/* ============================================================
   BOHORY — style2.css v4.5
   Fonts: Manrope (headlines) + Inter (body, data, labels)
   Design: "Warm continuity" — paper everywhere, red dot accent
   Phase 1 (§1–17): Homepage — LIVE
   Phase 2 (§18–28): Product detail + description components
   Phase 2b (§29–36): Category pages + HTML compat fixes
   Phase 4 (§37–41): Editorial pages (O Bohory, Na míru)
   Phase 5 (§42): Button hierarchy — navy functional, red editorial only
   §16 rewrite: Footer — navy bg, 3-col layout, Shoptet override
   Upload: FTP → /user/documents/upload/style2.css
   ============================================================ */

/* === 1. VARIABLES === */
:root {
  --navy: #152238;
  --red: #D63031;
  --red-hover: #c0292a;
  --red-glow: rgba(214, 48, 49, 0.15);
  --navy-hover: #1e3050;
  --navy-glow: rgba(21, 34, 56, 0.12);
  --paper: #F6F4EF;
  --paper-rgb: 246, 244, 239;
  --stone: #D8D4CC;
  --mist: #706C66;      /* darkened for readability on paper */
  --white: #FFFFFF;

  --font-display: 'Manrope', 'Segoe UI', sans-serif;   /* Headlines — wide, confident */
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'Inter', 'Segoe UI', sans-serif;  /* data/labels — same face, styled via weight+spacing */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}


/* === 2. GLOBAL === */

body {
  background-color: var(--paper) !important;
  color: var(--navy) !important;
  font-family: var(--font-body) !important;
  font-size: 17px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* Paper bg on Shoptet wrappers */
.overall-wrapper,
#content-wrapper,
.content-wrapper,
.container_resetted,
.container,
footer,
#footer {
  background-color: var(--paper) !important;
}

a {
  color: var(--navy);
  transition: color var(--duration-fast) ease;
}
a:hover {
  color: var(--red);
}

/* Headings — Manrope */
h1, h2, h3, .p-name {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
}

/* Data font — prices, breadcrumbs, codes, inputs (Inter with tighter spacing) */
.price, .p-price, .p-final-price, .p-standard-price,
.breadcrumbs, .breadcrumb,
.p-code, .p-availability,
input, select {
  font-family: var(--font-mono) !important;
}

/* Tabular numerals for price alignment */
.price, .p-price, .p-final-price, .p-standard-price,
.p-code, .cart-price, .order-price {
  font-feature-settings: "tnum";
}


/* === 3. SCROLL PROGRESS BAR === */

#bohory-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--red);
  z-index: 10000;
  pointer-events: none;
}
#bohory-scroll-progress::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}


/* === 4. HEADER === */

#header {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--stone) !important;
}
body.scrolled #header {
  background: rgba(var(--paper-rgb), 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 24px rgba(21, 34, 56, 0.06);
  border-bottom-color: transparent !important;
}


/* === 5. NAVIGATION — Inter, clean, confident === */

#navigation a {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy) !important;
  transition: color var(--duration-fast) ease;
}
#navigation a:hover {
  color: var(--red) !important;
}

/* Red dot ONLY on top-level active items — NOT dropdown children */
#navigation > ul > li.active > a::after,
#navigation > ul > li.current > a::after {
  content: ' •';
  color: var(--red);
  font-size: 1.1em;
}
/* Kill dot on ANY dropdown item */
#navigation ul ul li.active > a::after,
#navigation ul ul li.current > a::after {
  content: none !important;
}

/* Dropdown */
#navigation ul ul {
  background: var(--white) !important;
  border: 1px solid var(--stone);
  box-shadow: 0 8px 32px rgba(21, 34, 56, 0.08);
}
#navigation ul ul a {
  font-size: 12px !important;
  font-weight: 400;
}
#navigation ul ul a:hover {
  background: rgba(214, 48, 49, 0.04) !important;
  color: var(--red) !important;
}

/* Nav buttons (search, login, cart) */
.navigation-buttons a,
.navigation-buttons button {
  color: var(--navy) !important;
  transition: color var(--duration-fast) ease;
}
.navigation-buttons a:hover,
.navigation-buttons button:hover {
  color: var(--red) !important;
}


/* === 6. BREADCRUMBS === */

.breadcrumbs {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--mist);
}
.breadcrumbs a { color: var(--mist); }
.breadcrumbs a:hover { color: var(--red); }
.breadcrumbs .separator { color: var(--red) !important; }


/* === 7. PRODUCT CARDS — red bottom line on hover, no dot === */

.product .p-name,
.p-name a {
  font-family: var(--font-display) !important;
  font-weight: 600;
  font-size: 16px !important;
  color: var(--navy) !important;
}
.p-name a:hover { color: var(--red) !important; }

/* Product appendix (variant info under title in card) */
.product-appendix {
  display: block;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  color: var(--mist) !important;
  letter-spacing: 0.02em;
  margin-top: 0.3em;
  line-height: 1.5;
}

.product .p-price,
.p-final-price {
  font-family: var(--font-mono) !important;
  font-weight: 600;
  font-size: 15px !important;
  color: var(--navy) !important;
}

/* Hover: lift + shadow */
.product {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(21, 34, 56, 0.07);
}

/* Image zoom on hover */
.product .p-image img {
  transition: transform var(--duration-slow) var(--ease-out);
}
.product:hover .p-image img {
  transform: scale(1.03);
}

/* Red bottom line — grows on hover */
.product::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
  pointer-events: none;
  z-index: 5;
}
.product:hover::after {
  transform: scaleX(1);
}

/* Buttons — navy for functional, red reserved for editorial CTAs */
.product .btn,
.buy-form .btn {
  background: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--duration-fast) ease,
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.product .btn:hover,
.buy-form .btn:hover {
  background: var(--navy-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--navy-glow);
}


/* === 8. PRODUCT TABS === */

.product-tabs .tab,
.tab-navigation a,
.tab-navigation button {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist) !important;
  transition: color var(--duration-fast) ease;
}
.product-tabs .tab:hover,
.tab-navigation a:hover {
  color: var(--navy) !important;
}
.product-tabs .tab.active,
.tab-navigation .active {
  color: var(--navy) !important;
  font-weight: 600;
}


/* === 8b. HOMEPAGE TABS — red dot, no borders === */

/* Wrapper — exact class chain from DOM */
div.shp-tabs-row.responsive-nav {
  background: var(--paper) !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
  position: relative;
}

/* Inner wrappers — kill everything down the chain */
div.shp-tabs-row .shp-tabs-holder,
div.shp-tabs-row.responsive-nav .shp-tabs-holder {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

ul.shp-tabs.homepage-tabs,
ul#homepage-tabs.shp-tabs,
ul.shp-tabs[role="tablist"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  list-style: none !important;
}

/* Tab items — exact: li.shp-tab inside ul#homepage-tabs */
ul.shp-tabs li.shp-tab,
ul#homepage-tabs li.shp-tab,
li.shp-tab {
  position: relative !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Tab links — kill ALL Shoptet styling on a.shp-tab-link */
ul.shp-tabs li.shp-tab a.shp-tab-link,
li.shp-tab a.shp-tab-link,
a.shp-tab-link {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--mist) !important;
  padding: 1.15em 1.6em !important;
  position: relative !important;
  text-decoration: none !important;
  transition: color var(--duration-base) var(--ease-out) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Hover */
a.shp-tab-link:hover,
li.shp-tab a.shp-tab-link:hover {
  color: var(--navy) !important;
  background: transparent !important;
}

/* Active tab — navy + bold, NO border, NO box-shadow */
li.shp-tab.active a.shp-tab-link,
ul.shp-tabs li.shp-tab.active a.shp-tab-link {
  color: var(--navy) !important;
  font-weight: 700 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Red dot after active tab name */
li.shp-tab.active a.shp-tab-link::after {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  margin-left: 0.4em !important;
  vertical-align: middle !important;
  border: none !important;
  box-shadow: none !important;
  position: static !important;
}

/* Inactive tab — no ::after */
li.shp-tab:not(.active) a.shp-tab-link::after {
  content: none !important;
  display: none !important;
}

/* No ::before on any tab link (kill separators + any Shoptet pseudo) */
a.shp-tab-link::before,
li.shp-tab a.shp-tab-link::before {
  content: none !important;
  display: none !important;
}

/* JS sliding underline (if bohory.js adds it) */
.bohory-tab-line {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--red);
  z-index: 2;
  transition: left var(--duration-slow) var(--ease-out),
              width var(--duration-slow) var(--ease-out);
  pointer-events: none;
}

/* Kill box-shadow fallback completely */
.bohory-tabs-enhanced li.shp-tab.active a.shp-tab-link {
  box-shadow: none !important;
}


/* === 9. FORMS === */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-family: var(--font-mono) !important;
  font-size: 14px;
  border: 1px solid var(--stone);
  background: var(--white);
  color: var(--navy);
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}


/* ============================================================
   CUSTOM .bohory-* SECTIONS (our HTML in TEXTOVÝ banners)
   ============================================================ */

/* === 10. CONTOUR DIVIDER === */

.bohory-divider {
  width: 100%;
  height: 48px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bohory-divider svg { width: 100%; height: auto; }
.bohory-divider .contour-line {
  stroke: var(--red);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 8 4;
  animation: bohory-dash 20s linear infinite;
}
@keyframes bohory-dash { to { stroke-dashoffset: -240; } }


/* === 11. HERO TEXT (Titulní strana) === */

.bohory-hero-text {
  text-align: center;
  padding: 3rem 1rem;
}
.bohory-hero-text h2 {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.bohory-hero-text .subtitle {
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 1.3vw, 0.95rem);
  color: var(--mist);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* === 12. MATERIAL STRIP === */

.bohory-material {
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  padding: 1.5rem 1rem;
}
.bohory-material .mat-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.bohory-material .mat-item {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.bohory-material .mat-item .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}


/* === 13. BRAND STORY ("Proč BOHORY") === */

.bohory-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
.bohory-story .story-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 500;
}
.bohory-story .story-label::before {
  content: '';
  width: 20px;
  height: 1.5px;
  background: var(--red);
}
.bohory-story .story-text h3 {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.bohory-story .story-text p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  color: var(--navy);
  opacity: 0.78;
}

/* Data badges */
.bohory-data-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bohory-data-badges .badge {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--stone);
  color: var(--mist);
  transition: all var(--duration-fast) ease;
}
.bohory-data-badges .badge:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Animated coordinate visual */
.bohory-coord-visual {
  background: var(--navy);
  aspect-ratio: 3 / 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.bohory-coord-visual .coord-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 1;
}
.bohory-coord-visual .coord-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.4rem;
  position: relative;
  z-index: 1;
}
/* Pulsing red dot in the coordinate box */
.bohory-coord-visual .coord-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  animation: coord-pulse 3s ease-in-out infinite;
}
.bohory-coord-visual .coord-dot::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  opacity: 0;
  animation: coord-ring 3s ease-in-out infinite;
}
@keyframes coord-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}
@keyframes coord-ring {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(3); opacity: 0; }
}

@media (max-width: 768px) {
  .bohory-story { grid-template-columns: 1fr; gap: 2rem; }
}


/* === 14. SIZE COMPARISON === */

.bohory-sizes {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.bohory-sizes h3 {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}
.bohory-sizes .sizes-subtitle {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--mist);
  letter-spacing: 0.06em;
  margin-bottom: 2rem;
}
.bohory-sizes .size-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 700px;
  margin: 0 auto;
}
.bohory-sizes .size-card {
  border: 1px solid var(--stone);
  padding: 2rem 1.5rem;
  background: var(--white);
  transition: all var(--duration-base) var(--ease-out);
}
.bohory-sizes .size-card:hover {
  border-color: var(--red);
  box-shadow: 0 4px 24px var(--red-glow);
}
.bohory-sizes .size-card .size-dim {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--navy);
}
.bohory-sizes .size-card .size-label {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--mist);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bohory-sizes .size-card .size-price {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-top: 1rem;
}
.bohory-sizes .size-card .size-price::before {
  content: '• ';
  color: var(--red);
}
/* §14 fix — 3 size cards */
.bohory-sizes .size-cards {
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 960px;
}
@media (max-width: 768px) {
  .bohory-sizes .size-cards {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}


/* === 15. CTA — warm paper === */

.bohory-cta {
  background: var(--paper);
  padding: 4rem 1.5rem;
  text-align: center;
}
.bohory-cta .cta-inner {
  max-width: 560px;
  margin: 0 auto;
}
.bohory-cta .cta-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
  font-weight: 500;
}
.bohory-cta h2 {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.bohory-cta p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--mist);
  line-height: 1.8;
  margin-bottom: 2rem;
}
.bohory-cta .btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 1em 2.2em;
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  text-decoration: none;
}
.bohory-cta .btn-cta:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(214, 48, 49, 0.2);
  color: var(--white);
}
.bohory-cta .btn-cta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}


/* === 16. FOOTER — navy === */

/* --- 16a. Shoptet footer wrapper overrides ---
   DOM (from inspect element):
   footer#footer.footer
     .container.footer-rows
       .row.custom-footer.elements-1
         .custom-footer__banner3671.col-sm-12
           .banner
             .banner-wrapper
               span[data-ec-promo-id]
                 ← our HTML (bf-divider, bf-columns, bf-bar)
     .container.footer-bottom
       #signature + .copyright

   RULE: NO wildcard selectors [class*="..."] — breaks Shoptet.
   Use exact class chains instead.
   ------------------------------------------------------------ */

/* Footer root — navy bg, kill border */
footer#footer {
  background: var(--navy) !important;
  border-top: none !important;
  padding: 0 !important;
}

/* Kill max-width + padding on Shoptet containers inside footer.
   Using exact classes from DOM, NOT wildcards. */
footer#footer > .container.footer-rows {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

footer#footer .footer-rows .row {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

footer#footer .footer-rows .col-sm-12 {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

footer#footer .footer-rows .col-sm-6 {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Banner wrapper chain — direct child selectors for safety */
footer#footer .footer-rows .banner-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

footer#footer .footer-rows .banner-wrapper > span {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- 16b. Contour divider (reusable, not used in footer banner) --- */
footer#footer .bf-divider {
  width: 100%;
  height: 24px;
  overflow: hidden;
  line-height: 0;
}
footer#footer .bf-divider svg {
  display: block;
  width: 100%;
  height: 24px;
}
footer#footer .bf-divider-line {
  stroke: var(--red);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 8 4;
  opacity: 0.35;
  animation: bohory-dash 20s linear infinite;
}

/* --- 16c. 3-column layout --- */
footer#footer .bf-columns {
  display: flex !important;
  gap: 48px;
  padding: 48px 64px 40px;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
footer#footer .bf-col {
  flex: 1;
  min-width: 0;
}
footer#footer .bf-col:first-child {
  flex: 1.3;
}

/* --- 16d. Column headings --- */
footer#footer .bf-heading {
  display: block;
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper) !important;
  margin-bottom: 16px;
}

/* --- 16e. Paragraph text (col 1) --- */
footer#footer .bf-text {
  font-family: var(--font-body) !important;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--stone) !important;
  margin: 0;
}

/* --- 16f. Link lists (cols 2–3) --- */
footer#footer .bf-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
footer#footer .bf-links li {
  font-family: var(--font-body) !important;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--stone) !important;
  margin-bottom: 8px;
  list-style: none !important;
  padding-left: 0 !important;
}
/* Kill any Shoptet ::before markers on list items */
footer#footer .bf-links li::before {
  content: none !important;
  display: none !important;
}
footer#footer .bf-links li::marker {
  content: none !important;
  font-size: 0 !important;
}
footer#footer .bf-links li:last-child {
  margin-bottom: 0;
}
footer#footer .bf-links a {
  color: var(--stone) !important;
  text-decoration: none !important;
  transition: color var(--duration-fast) ease;
}
footer#footer .bf-links a:hover {
  color: var(--paper) !important;
}

/* --- 16g. Bottom bar (tagline only — copyright lives in Shoptet footer-bottom) --- */
footer#footer .bf-bar {
  border-top: 1px solid rgba(246, 244, 239, 0.1);
  padding: 20px 64px;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
footer#footer .bf-tagline {
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 13px;
  color: var(--paper) !important;
  letter-spacing: 0.02em;
}
footer#footer .bf-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* --- 16h. Shoptet footer-bottom (copyright strip) --- */
footer#footer > .container.footer-bottom {
  background: var(--navy) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: rgba(246, 244, 239, 0.3) !important;
  border-top: none !important;
  padding: 12px 64px 16px !important;
  max-width: 100% !important;
  width: 100% !important;
}
footer#footer .footer-bottom a {
  color: rgba(246, 244, 239, 0.3) !important;
}
footer#footer .footer-bottom a:hover {
  color: var(--paper) !important;
}
/* Shoptet "Vytvořil Shoptet" — visible but subtle */
footer#footer .footer-bottom #signature {
  opacity: 0.5;
}
footer#footer .footer-bottom #signature img {
  opacity: 0.4;
  filter: grayscale(100%) brightness(2);
}

/* --- 16i. Responsive --- */
@media (max-width: 767px) {
  footer#footer .bf-columns {
    flex-direction: column;
    gap: 28px;
    padding: 36px 24px 28px;
  }
  footer#footer .bf-col:first-child { flex: 1; }
  footer#footer .bf-heading { font-size: 13px; margin-bottom: 12px; }
  footer#footer .bf-text,
  footer#footer .bf-links li { font-size: 13px; }
  footer#footer .bf-bar { padding: 16px 24px; }
  footer#footer .bf-tagline { font-size: 12px; }
  footer#footer > .container.footer-bottom { padding: 8px 24px 16px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  footer#footer .bf-columns { gap: 32px; padding: 40px 32px 32px; }
  footer#footer .bf-bar { padding: 16px 32px; }
  footer#footer > .container.footer-bottom { padding: 8px 32px 16px !important; }
}


/* === 17. ANIMATIONS === */

.bohory-anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.bohory-anim.visible { opacity: 1; transform: translateY(0); }

.bohory-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.bohory-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.bohory-stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.bohory-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.bohory-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.bohory-stagger.visible > * { opacity: 1; transform: translateY(0); }


/* ============================================================
   PHASE 2 — PRODUCT DETAIL & DESCRIPTION COMPONENTS
   Sections 18–28: Detail page overrides + .bohory-* content blocks
   Added: 2026-03-14
   ============================================================ */


/* === 18. SECONDARY TEXT — variant labels, parameters, short desc === */

/* Jemné ztlumení sekundárních textů na stránce detailu i jinde.
   Breadcrumbs řeší sekce 6 (mist color) — NEDUPLIKOVAT. */
.p-parameters,
.p-parameter,
.p-variant,
.p-variants label,
.type-varianty .p-type,
.p-variants .p-type,
.p-short-description,
.product-detail .p-short-description,
.p-code,
.p-category {
  color: var(--navy) !important;
  opacity: 0.78;
}


/* === 19. AVAILABILITY — červená tečka místo zelené fajfky (globální) === */

.availability-label,
.p-availability,
.availability {
  color: var(--navy) !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4em;
  position: relative;
}

.availability-label::before,
.p-availability::before,
.availability::before {
  content: '•' !important;
  color: var(--red) !important;
  font-size: 1.1em;
  line-height: 1;
  display: inline-block;
  margin-right: 0.2em;
}

/* Shoptet někdy vkládá ikonu jako img nebo i — skryjeme */
.availability-label img,
.p-availability img,
.availability img,
.availability-label i,
.p-availability i,
.availability i {
  display: none !important;
}


/* === 20. BOHORY-SHORT — perex / krátký popis produktu === */

.bohory-short {
  padding: 1.5rem 0 1rem;
  border-bottom: 1px solid var(--stone);
  margin-bottom: 1.5rem;
}

.bohory-short .bohory-title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--navy);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.bohory-short .bohory-lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  color: var(--navy);
  opacity: 0.78;
  max-width: 62ch;
  margin: 0;
}


/* === 21. BOHORY-BADGES — štítky technických parametrů === */

.bohory-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 1.25rem 0;
}

.bohory-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono) !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid var(--stone);
  padding: 0.4em 0.85em;
  background: transparent;
  transition: border-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

/* Červená tečka před textem každého štítku */
.bohory-badges .badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

.bohory-badges .badge:hover {
  border-color: var(--red);
  color: var(--red);
}


/* === 22. BOHORY-ACCORDION — rozbalovací detaily === */

.bohory-accordion {
  border-top: 1px solid var(--stone);
  margin: 1.5rem 0;
}

.bohory-accordion details {
  border-bottom: 1px solid var(--stone);
}

/* Odstraň výchozí prohlížečový trojúhelník */
.bohory-accordion details > summary {
  list-style: none;
}
.bohory-accordion details > summary::-webkit-details-marker {
  display: none;
}
.bohory-accordion details > summary::marker {
  display: none;
}

.bohory-accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 0;
  cursor: pointer;
  font-family: var(--font-mono) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  user-select: none;
  transition: color var(--duration-fast) ease;
}

.bohory-accordion summary:hover {
  color: var(--red);
}

/* Červené + na pravé straně */
.bohory-accordion summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--red);
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

/* Po otevření: + se otočí na × a summary se zvýrazní */
.bohory-accordion details[open] > summary {
  color: var(--red);
}
.bohory-accordion details[open] > summary::after {
  content: '×';
  transform: rotate(0deg);
}

/* Obsah accordionu */
.bohory-accordion .accordion-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
  color: var(--navy);
  opacity: 0.82;
  padding: 0 0 1.25rem;
  max-width: 65ch;
}

/* Jemná fade-in animace otevření */
.bohory-accordion details[open] .accordion-body {
  animation: accordion-open 0.25s var(--ease-out);
}
@keyframes accordion-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 0.82; transform: translateY(0); }
}


/* === 23. BOHORY-KV — klíčové vlastnosti (grid tabulka) === */

.bohory-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  border-top: 1px solid var(--stone);
  margin: 1.5rem 0;
}

.bohory-kv .kv-row {
  display: contents;
}

.bohory-kv .kv-key,
.bohory-kv .kv-val {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--stone);
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
}

.bohory-kv .kv-key {
  font-family: var(--font-mono) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  padding-right: 2rem;
  white-space: nowrap;
}

.bohory-kv .kv-val {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mist);
}

/* Poslední řádek bez spodní linky */
.bohory-kv .kv-key:last-of-type,
.bohory-kv .kv-val:last-of-type {
  border-bottom: none;
}

/* Mobil: stack do jednoho sloupce */
@media (max-width: 480px) {
  .bohory-kv {
    grid-template-columns: 1fr;
  }
  .bohory-kv .kv-key {
    padding-bottom: 0.1rem;
    border-bottom: none;
  }
  .bohory-kv .kv-val {
    padding-top: 0.1rem;
  }
}


/* ============================================================
   PRODUCT DETAIL PAGE — .type-detail
   Galerijní, vzdušný, prémiový zážitek na papírovém pozadí.
   ============================================================ */

/* === 24. DETAIL — GLOBÁLNÍ VZDUCH A POZADÍ === */

.type-detail #content-wrapper,
.type-detail .content-wrapper {
  background: var(--paper) !important;
}

/* Hlavní grid detailu — více prostoru kolem */
.type-detail .product-detail {
  padding-top: 2.5rem !important;
  padding-bottom: 4rem !important;
}

/* Blok s obrázky — jemný odstup */
.type-detail .product-images,
.type-detail .p-gallery {
  margin-bottom: 1rem;
}

/* Pravý sloupec s info — rovnoměrný vzduch mezi bloky */
.type-detail .product-info > *,
.type-detail .buy-form > * {
  margin-bottom: 1.25rem;
}


/* === 25. DETAIL — CENA === */

/* Zvětšení ceny POUZE na detail stránce — sekce 7 (15px) zůstává pro karty */
.type-detail .p-final-price,
.type-detail .p-price,
.type-detail .price {
  font-family: var(--font-mono) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Přeškrtnutá původní cena — subtilní */
.type-detail .p-standard-price,
.type-detail .price-before,
.type-detail .p-price-before {
  font-family: var(--font-mono) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--mist) !important;
  text-decoration: line-through;
  opacity: 0.78;
}


/* === 26. DETAIL — TLAČÍTKO "DO KOŠÍKU" === */

.type-detail .buy-form .btn-buy,
.type-detail .buy-form button[type="submit"],
.type-detail .buy-form .btn.btn-primary {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 0.7em;
  background: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.9em 2em !important;
  cursor: pointer;
  transition: background var(--duration-fast) ease,
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

/* Bílá tečka vlevo */
.type-detail .buy-form .btn-buy::before,
.type-detail .buy-form button[type="submit"]::before,
.type-detail .buy-form .btn.btn-primary::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
}

/* Hover: mírné zvětšení + navy záře */
.type-detail .buy-form .btn-buy:hover,
.type-detail .buy-form button[type="submit"]:hover,
.type-detail .buy-form .btn.btn-primary:hover {
  background: var(--navy-hover) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px var(--navy-glow);
}

.type-detail .buy-form .btn-buy:hover::before,
.type-detail .buy-form button[type="submit"]:hover::before,
.type-detail .buy-form .btn.btn-primary:hover::before {
  transform: scale(1.5);
}

/* Aktivní stav (klik) */
.type-detail .buy-form .btn-buy:active,
.type-detail .buy-form button[type="submit"]:active {
  transform: translateY(0) scale(0.99);
  box-shadow: none;
}


/* === 27. DETAIL — VARIANTY === */

/* Wrapper skupiny variant */
.type-detail .p-variants,
.type-detail .type-varianty {
  margin-bottom: 1.5rem;
}

/* Label nad výběrem */
.type-detail .p-variants label,
.type-detail .type-varianty .p-type {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.6;
  display: block;
  margin-bottom: 0.6rem;
}

/* Jednotlivé variantové buttony / boxy */
.type-detail .p-variant,
.type-detail .variant-item,
.type-detail .p-variants .variant {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--navy) !important;
  background: transparent !important;
  border: 1px solid var(--stone) !important;
  border-bottom: 2px solid var(--stone) !important;
  padding: 0.5em 1.1em !important;
  cursor: pointer;
  transition: border-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

/* Aktivní varianta — červená linka dole */
.type-detail .p-variant.active,
.type-detail .p-variant:checked,
.type-detail .variant-item.active,
.type-detail .p-variants .variant.selected,
.type-detail .p-variants input[type="radio"]:checked + label {
  border-bottom-color: var(--red) !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
}

/* Hover na neaktivní variantě */
.type-detail .p-variant:hover,
.type-detail .variant-item:hover {
  border-color: var(--navy) !important;
  border-bottom-color: var(--navy) !important;
}

/* Select box varianta */
.type-detail .p-variants select {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  border: 1px solid var(--stone) !important;
  border-bottom: 2px solid var(--red) !important;
  background: transparent !important;
  color: var(--navy) !important;
  padding: 0.5em 0.8em;
  appearance: auto;
  outline: none;
}
.type-detail .p-variants select:focus {
  border-bottom-color: var(--red) !important;
  box-shadow: none !important;
}


/* === 28. DETAIL — DOSTUPNOST (scoped přepis §19 pro detail) === */

.type-detail .availability-label,
.type-detail .p-availability,
.type-detail .availability {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
}

.type-detail .availability-label::before,
.type-detail .p-availability::before,
.type-detail .availability::before {
  content: '•';
  color: var(--red) !important;
  font-size: 1.2em;
  margin-right: 0.35em;
  line-height: 1;
}

.type-detail .availability-label img,
.type-detail .p-availability img,
.type-detail .availability img,
.type-detail .availability-label i,
.type-detail .p-availability i,
.type-detail .availability i {
  display: none !important;
}


/* ============================================================
   PHASE 2b — CATEGORY PAGES & HTML COMPAT FIXES
   Sections 29–35
   ============================================================ */


/* === 29. CATEGORY PAGE — SIDEBAR === */

/* Paper bg na sidebar */
.sidebar-left,
.sidebar-inner,
.sidebar-left .box,
.sidebar-left .box-categories,
#categories {
  background: var(--paper) !important;
}

/* "Kategorie" heading */
.sidebar-left .pageElement__heading {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--stone);
}

/* ALL category links — Inter, clean */
#categories a {
  font-family: var(--font-body) !important;
  font-size: 14px;
  font-weight: 400;
  color: var(--navy) !important;
  opacity: 0.55;
  letter-spacing: 0;
  transition: color var(--duration-fast) ease, opacity var(--duration-fast) ease;
  text-decoration: none;
}
#categories a:hover {
  color: var(--red) !important;
  opacity: 1;
}

/* Top-level categories (Města, Krajina, Skály, Traily) — red dot + stronger */
#categories > .topic > a,
#categories > div > .topic > a,
.categories.cat-01 > .topic > a {
  font-weight: 600;
  font-size: 14px;
  opacity: 0.8;
}
#categories > .topic > a::before,
#categories > div > .topic > a::before,
.categories.cat-01 > .topic > a::before {
  content: '•';
  color: var(--red);
  margin-right: 0.4em;
  font-size: 1.1em;
}

/* Active / current category — full weight, full opacity, red left border */
#categories .topic.active > a,
#categories .active > a {
  color: var(--navy) !important;
  opacity: 1;
  font-weight: 700;
}

/* Subcategories — indent, lighter */
#categories ul ul,
#categories .topic ul {
  padding-left: 1.2em;
  margin-top: 0.2em;
}
#categories ul ul a,
#categories .topic ul a {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.5;
}
#categories ul ul a::before {
  content: none !important; /* no red dot on subcategories */
}
#categories ul ul a:hover {
  opacity: 0.85;
}

/* Brands list (značky) — subtle, separated */
.sidebar-left .box-manufacturers,
.sidebar-left [data-testid="brandsList"] {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--stone);
}
.sidebar-left .box-manufacturers a,
.sidebar-left [data-testid="brandsList"] a {
  font-family: var(--font-body) !important;
  font-size: 12px;
  font-weight: 400;
  color: var(--navy) !important;
  opacity: 0.4;
  transition: color var(--duration-fast) ease, opacity var(--duration-fast) ease;
}
.sidebar-left .box-manufacturers a:hover,
.sidebar-left [data-testid="brandsList"] a:hover {
  color: var(--red) !important;
  opacity: 1;
}


/* === 30. CATEGORY PAGE — HEADING, DESCRIPTION, SORT === */

/* Heading "Města" — already Manrope via h1 global rule */

/* Default category description (Shoptet plain text fallback) */
.type-category .category-description,
.category-top .category-description,
.type-category .category-text {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy);
  opacity: 0.65;
  line-height: 1.75;
  max-width: 50ch;
}

/* Custom category intro (paste HTML in Shoptet category "Popis kategorie") */
.bohory-category-intro {
  padding: 0.5rem 0 1.5rem;
  max-width: 26ch;
}
.bohory-category-intro p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--navy);
  opacity: 0.6;
  margin: 0;
}
/* Optional accent line or quote-like styling */
.bohory-category-intro .intro-accent {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--navy);
  opacity: 0.85;
  line-height: 1.4;
  margin: 0 0 0.75rem;
}

/* --- §30. SORTING — paper bg, red dot on active, nothing else --- */

/* Wrapper — paper, no decorations */
.listSorting,
.listSorting.js-listSorting,
div.listSorting {
  background: var(--paper) !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 1.25rem !important;
}

/* Hide "Řazení produktů" heading */
#listSortingHeading {
  position: absolute !important;
  clip: rect(0,0,0,0) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
}

/* List reset */
ul.listSorting_controls,
.listSorting_controls {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Li reset */
.listSorting_controls li {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Every button — kill ALL Shoptet styling */
button.listSorting_control,
.listSorting_controls button,
.listSorting_control,
.listSorting .listSorting_control {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--mist) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0.7em 1.2em !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: color var(--duration-fast) ease !important;
}

/* Hover — just navy */
button.listSorting_control:hover,
.listSorting_control:hover {
  color: var(--navy) !important;
  background: transparent !important;
}

/* Active — navy + bold + red dot before */
button.listSorting_control.listSorting_control--current,
.listSorting_control.listSorting_control--current,
.listSorting_control--current {
  color: var(--navy) !important;
  font-weight: 700 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Red dot before active tab name */
button.listSorting_control.listSorting_control--current::before,
.listSorting_control--current::before {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  margin-right: 0.4em !important;
  vertical-align: middle !important;
}


/* === 30b. CATEGORY FILTERS (cena, značky) === */

/* Filters wrapper + ALL inner containers — paper bg */
#filters-wrapper,
.filters-wrapper,
#filters,
#filters.visible,
.slider-wrapper,
.slider-header,
.slider-content,
.filter-sections,
#category-filter-hover,
#manufacturer-filter,
.filter-section,
.filter-section-count,
.filter-section-manufacturer,
body .category-content-wrapper #filters-wrapper,
body .category-content-wrapper .filters-wrapper,
body .category-content-wrapper #filters {
  background: var(--paper) !important;
  background-color: var(--paper) !important;
}

/* Kill any border/shadow Shoptet puts on filter block */
#filters-wrapper,
.filters-wrapper,
#filters {
  box-shadow: none !important;
  border: none !important;
}

/* "Cena" + "Značky" headings — simple, centered, bold */
.slider-wrapper h4,
.filter-section h4,
#manufacturer-filter h4 {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy) !important;
  text-align: center;
  margin-bottom: 0.75rem;
}

/* Kill the red dash — no ::before */
.slider-wrapper h4 span::before,
.filter-section h4 span::before,
#manufacturer-filter h4 span::before {
  content: none !important;
  display: none !important;
}

/* Price values */
#price-filter-form,
.slider-wrapper,
.slider-header {
  font-family: var(--font-body) !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  font-feature-settings: "tnum";
}

/* --- jQuery UI Price Slider --- */

/* Track — exact class chain from DOM */
div#slider.param-price-filter.ui-slider.ui-corner-all.ui-slider-horizontal.ui-widget.ui-widget-content,
#slider.param-price-filter.ui-slider-horizontal.ui-widget.ui-widget-content,
div#slider.ui-slider-horizontal,
.slider-content #slider,
#slider.ui-slider-horizontal,
#slider.ui-widget-content,
.param-price-filter.ui-slider-horizontal {
  background: var(--stone) !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 2px !important;
  height: 3px !important;
}

/* Kill jQuery UI default border on widget-content inside slider */
.slider-content .ui-widget-content,
.slider-content .ui-corner-all,
.slider-wrapper .ui-widget-content,
.slider-wrapper .ui-corner-all {
  border: none !important;
  border-width: 0 !important;
}

/* Filled range between handles */
#slider .ui-slider-range,
#slider .ui-widget-header,
.param-price-filter .ui-slider-range {
  background: var(--red) !important;
  border: none !important;
  border-radius: 2px !important;
}

/* Handles — round navy circles */
#slider span.ui-slider-handle.ui-corner-all.ui-state-default,
.slider-content span.ui-slider-handle,
#slider .ui-slider-handle.ui-state-default,
#slider .ui-slider-handle,
.param-price-filter .ui-slider-handle {
  background: var(--navy) !important;
  border: 2px solid var(--paper) !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  top: -7px !important;
  box-shadow: 0 1px 4px rgba(21, 34, 56, 0.2) !important;
  cursor: pointer !important;
  outline: none !important;
}

/* NO dividers between sections */
.filter-sections {
  border: none !important;
  border-top: none !important;
  margin-top: 0.75rem;
  padding-top: 0;
}

/* Kill decorative borders in filter sections */
.filter-sections,
.filter-section,
.filter-section-manufacturer,
.filter-section-count,
#category-filter-hover,
#manufacturer-filter {
  border: none !important;
  box-shadow: none !important;
}

/* Fieldset reset */
#manufacturer-filter fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Parent divs wrapping each checkbox+label — prevent clipping */
#manufacturer-filter fieldset > div,
.filter-section-manufacturer fieldset > div {
  overflow: visible !important;
  max-width: none !important;
  text-overflow: unset !important;
}

/* Checkbox — red accent */
.filter-section input[type="checkbox"],
#manufacturer-filter input[type="checkbox"] {
  accent-color: var(--red);
}

/* Tag labels — fix clipping, ensure text is fully visible */
.filter-section .filter-label,
#manufacturer-filter .filter-label {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 400;
  color: var(--navy) !important;
  opacity: 0.65;
  cursor: pointer;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  max-width: none !important;
  text-indent: 0 !important;
  transition: opacity var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

/* Ensure ::before checkbox has enough room and doesn't overlap text */
.filter-section .filter-label::before,
#manufacturer-filter .filter-label::before {
  position: static !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 0.4em !important;
  flex-shrink: 0 !important;
}

.filter-section .filter-label:hover,
#manufacturer-filter .filter-label:hover {
  opacity: 1;
  color: var(--red) !important;
}

/* Filter count number */
.filter-section .filter-count,
#manufacturer-filter .filter-count {
  font-family: var(--font-body) !important;
  font-size: 11px;
  font-weight: 500;
  color: var(--mist);
  font-feature-settings: "tnum";
}

/* "Položek k zobrazení: 31" */
.filter-section-count,
.filter-total-count {
  font-family: var(--font-body) !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--mist) !important;
  opacity: 0.45;
  font-feature-settings: "tnum";
  margin-top: 0.75rem;
  padding-top: 0;
  border: none !important;
}


/* === 31. PRODUCT DETAIL — SIDEBAR (košík, info) === */

/* Paper bg na detail sidebar */
.type-detail .sidebar-left,
.type-detail .sidebar-inner,
.type-detail .sidebar-left .box {
  background: var(--paper) !important;
}

/* Sidebar heading "Nákupní košík" apod. */
.type-detail .sidebar-left h2,
.type-detail .sidebar-left h3 {
  font-family: var(--font-mono) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Sidebar links */
.type-detail .sidebar-left a {
  font-family: var(--font-mono) !important;
  font-size: 13px;
  color: var(--mist) !important;
}
.type-detail .sidebar-left a:hover {
  color: var(--red) !important;
}


/* ============================================================
   32–35: HTML COMPAT FIXES — match Eliška's actual HTML
   ============================================================ */


/* === 32. BOHORY-BADGE (singular) — alias pro .badge === */
/* HTML používá .bohory-badge, CSS měl .badge → podporujeme obě */

.bohory-badges .bohory-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono) !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid var(--stone);
  padding: 0.4em 0.85em;
  background: transparent;
  transition: border-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
}
.bohory-badges .bohory-badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}
.bohory-badges .bohory-badge:hover {
  border-color: var(--red);
  color: var(--red);
}


/* === 33. BOHORY-META — seznam (ul) v krátkém popisu === */

.bohory-meta {
  list-style: none;
  padding: 1rem 0 0.5rem;
  margin: 0;
}
.bohory-meta li {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.75;
  color: var(--navy);
  opacity: 0.78;
  padding: 0.2em 0;
  padding-left: 1.2em;
  position: relative;
}
/* Červená tečka místo bullet */
.bohory-meta li::before {
  content: '•';
  color: var(--red);
  position: absolute;
  left: 0;
  font-weight: 700;
}


/* === 34. BOHORY-SIZE — rozměr ve titulku + accordion hint === */

/* Rozměr v titulku — mono, menší, šedý */
.bohory-title .bohory-size {
  font-family: var(--font-mono) !important;
  font-size: 0.5em;
  font-weight: 500;
  color: var(--mist);
  letter-spacing: 0.06em;
  vertical-align: middle;
  margin-left: 0.5em;
}

/* Accordion hint text — pravá strana summary */
.bohory-accordion summary .hint {
  font-family: var(--font-mono) !important;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  opacity: 0.7;
  margin-left: auto;
  margin-right: 0.8rem;
}
.bohory-accordion details[open] > summary .hint {
  opacity: 1;
}


/* === 35. BOHORY-PRODUCT wrapper + KV fallback === */

/* Wrapper pro dlouhý popis */
.bohory-product {
  padding: 0.5rem 0 2rem;
}

/* KV fallback: pokud HTML nemá .kv-key/.kv-val,
   stylujeme liché/sudé přímé div děti v .bohory-kv */
.bohory-kv > div:nth-child(odd):not(.kv-row) {
  font-family: var(--font-mono) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0.7rem 0;
  padding-right: 2rem;
  border-bottom: 1px solid var(--stone);
  white-space: nowrap;
}
.bohory-kv > div:nth-child(even):not(.kv-row) {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mist);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--stone);
  line-height: 1.5;
}
/* Poslední pár bez spodní čáry */
.bohory-kv > div:nth-last-child(1):not(.kv-row),
.bohory-kv > div:nth-last-child(2):not(.kv-row) {
  border-bottom: none;
}


/* === 36. CATEGORY BOTTOM — spodní popis kategorie === */

.bohory-category-bottom {
  max-width: 720px;
  margin: 3rem auto 1rem;
  padding: 3rem 0 0;
  text-align: center;
}

/* Contour line above */
.bohory-category-bottom .bohory-divider {
  margin-bottom: 2.5rem;
}

/* "Nenašel jsi svou mapu?" — hlavní CTA */
.bohory-category-bottom .cb-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.bohory-category-bottom .cb-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
  color: var(--navy);
  opacity: 0.65;
  max-width: 52ch;
  margin: 0 auto 2rem;
}

/* CTA button — global utility (used in category bottom, Na míru, etc.) */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 1em 2.2em;
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  text-decoration: none;
}
.btn-cta:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(214, 48, 49, 0.2);
  color: var(--white);
}
.btn-cta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}

/* Spodní poznámka — drobný text pod CTA */
.bohory-category-bottom .cb-note {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--navy);
  opacity: 0.45;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--stone);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
}

/* Info tags pod poznámkou */
.bohory-category-bottom .cb-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 1rem;
}
.bohory-category-bottom .cb-tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.35;
  border: 1px solid var(--stone);
  padding: 0.3em 0.7em;
}


/* ============================================================
   PHASE 4 — EDITORIAL PAGES (O Bohory, Na míru, etc.)
   Shared .ob- classes used across custom pages
   ============================================================ */


/* === 37. EDITORIAL — base wrapper & typography === */

.ob {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.ob-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 1rem;
}

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

/* Red dot in headings — perfect circle, not font glyph */
.ob-dot {
  display: inline-block;
  width: 0.18em;
  height: 0.18em;
  border-radius: 50%;
  background: var(--red);
  vertical-align: 0.12em;
  margin-left: 0.04em;
  font-size: 0;        /* hide the text "." inside the span */
  line-height: 0;
}

.ob-fine {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--navy);
  opacity: 0.4;
  line-height: 1.65;
  margin-top: 2rem;
}

.ob-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 2rem;
}

.ob-sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  color: var(--navy);
  opacity: 0.65;
  max-width: 52ch;
  margin: 0 auto 2rem;
}


/* === 38. EDITORIAL — hero === */

.ob-hero {
  text-align: center;
  padding: 5rem 0 3rem;
  position: relative;
}

.ob-hero-coord {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--navy);
  opacity: 0.25;
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.ob-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 10vw, 7rem);
  color: var(--navy);
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin: 0 0 1.5rem;
}

.ob-lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.85;
  color: var(--navy);
  opacity: 0.7;
  max-width: 52ch;
  margin: 0 auto;
}


/* === 39. EDITORIAL — personal layout (text + stamps) === */

.ob-personal {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 768px) {
  .ob-personal { grid-template-columns: 1fr; gap: 2rem; }
}

.ob-accent {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--navy);
  line-height: 1.5;
  margin: 0 0 1.25rem;
}

.ob-personal-text p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
  color: var(--navy);
  opacity: 0.72;
  margin: 0 0 1rem;
  max-width: 58ch;
}

.ob-personal-side {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid var(--stone);
  padding-left: 1.5rem;
}
@media (max-width: 768px) {
  .ob-personal-side {
    border-left: none;
    border-top: 1px solid var(--stone);
    padding-left: 0;
    padding-top: 1.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 2rem;
  }
}

.ob-stamp {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--stone);
}
.ob-stamp:last-child { border-bottom: none; }
@media (max-width: 768px) {
  .ob-stamp { border-bottom: none; }
}

.ob-stamp-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.4;
  margin-bottom: 0.15rem;
}

.ob-stamp-val {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}


/* === 40. EDITORIAL — process steps === */

.ob-process {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ob-step {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--stone);
  position: relative;
}
.ob-step:last-child { border-bottom: none; }

.ob-step-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.ob-step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--red);
  flex-shrink: 0;
}

.ob-step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.015em;
}

.ob-step p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--navy);
  opacity: 0.68;
  margin: 0;
  max-width: 60ch;
  padding-left: calc(11px * 2 + 1rem);
}

.ob-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.75rem;
  padding-left: calc(11px * 2 + 1rem);
}
.ob-step-tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.35;
  border: 1px solid var(--stone);
  padding: 0.25em 0.65em;
}


/* === 41. EDITORIAL — CTA block === */

.ob-cta {
  padding: 0 0 3rem;
}

.ob-cta-inner {
  text-align: center;
  padding: 3rem 0 0;
  position: relative;
}

.ob-cta-glow {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,48,49,0.07) 0%, transparent 70%);
  pointer-events: none;
  animation: ob-glow 4s ease-in-out infinite;
}
@keyframes ob-glow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50%      { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
}

.ob-cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ob-btn-ghost {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  padding: 0.8em 1.5em;
  border: 1px solid var(--stone);
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.ob-btn-ghost:hover {
  border-color: var(--navy);
  color: var(--red);
}


/* ============================================================
   §42 — BUTTON HIERARCHY: Navy functional, Red editorial only
   Navy = transactional (Do košíku, Pokračovat, Odeslat, Detail)
   Red  = editorial CTA only (.btn-cta, .ob-cta)
   ============================================================ */


/* --- 42a. GLOBAL Shoptet .btn.btn-primary (forms, misc) --- */

.btn.btn-primary,
.btn.btn-conversion,
input[type="submit"].btn,
input[type="submit"].btn-primary {
  background: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--duration-fast) ease,
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.btn.btn-primary:hover,
.btn.btn-conversion:hover,
input[type="submit"].btn:hover,
input[type="submit"].btn-primary:hover {
  background: var(--navy-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--navy-glow);
}


/* --- 42b. CART FLOW — Pokračovat, objednat, další krok --- */

.next-step-forward,
#continue-order-button,
.btn-conversion.next-step-forward,
.cart-wrapper .btn-conversion,
.order-step .btn-conversion,
a.btn.btn-lg.btn-conversion {
  background: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--duration-fast) ease,
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.next-step-forward:hover,
#continue-order-button:hover,
.btn-conversion.next-step-forward:hover,
.cart-wrapper .btn-conversion:hover,
.order-step .btn-conversion:hover,
a.btn.btn-lg.btn-conversion:hover {
  background: var(--navy-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--navy-glow);
  color: var(--white) !important;
}


/* --- 42c. ADD-TO-CART button (globální — list i detail) --- */

.add-to-cart-button,
button[data-testid="buttonAddToCart"],
.btn.btn-conversion.add-to-cart-button {
  background: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
}
.add-to-cart-button:hover,
button[data-testid="buttonAddToCart"]:hover,
.btn.btn-conversion.add-to-cart-button:hover {
  background: var(--navy-hover) !important;
}


/* --- 42d. Shoptet zelená/oranžová → navy kill --- */
/* Shoptet default green/orange buttons that leak through */

.btn-success,
.btn-warning,
.btn-info {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: var(--white) !important;
}
.btn-success:hover,
.btn-warning:hover,
.btn-info:hover {
  background: var(--navy-hover) !important;
  border-color: var(--navy-hover) !important;
}


/* --- 42e. RED stays ONLY on editorial CTA --- */
/* .btn-cta (§36) and .bohory-cta .btn-cta (§15) remain red — no changes needed */
/* .ob-cta .btn-cta also stays red */


/* ============================================================
   §43 — BANNER: STŘED — vertical stack + visual brand elements
   Forces .banners-content.body-banners children under each other
   (Shoptet default = flex row, puts banners side by side)
   ============================================================ */

/* --- 43a. Force banners under each other --- */
.index-content-wrapper .banners-content.body-banners,
.banners-content.body-banners {
  flex-direction: column !important;
}

.banners-content.body-banners > .banner-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}


/* --- 43b. Homepage banner visual brand elements --- */

/* Partial rings for homepage banners (same system as Jak tiskneme) */
.hb-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hb-ring--tr {
  border: 1.5px solid transparent;
  border-top-color: rgba(214,48,49,0.16);
  border-right-color: rgba(214,48,49,0.16);
}
.hb-ring--bl {
  border: 1.5px solid transparent;
  border-bottom-color: rgba(214,48,49,0.13);
  border-left-color: rgba(214,48,49,0.13);
}
.hb-ring--t {
  border: 1.5px solid transparent;
  border-top-color: rgba(214,48,49,0.14);
}
.hb-ring--trbl {
  border: 1.5px solid rgba(214,48,49,0.11);
  border-bottom-color: transparent;
}
.hb-ring--spin {
  animation: hb-spin 50s linear infinite;
}
.hb-ring--spin-rev {
  animation: hb-spin 40s linear infinite reverse;
}
@keyframes hb-spin {
  to { transform: rotate(360deg); }
}

/* Glow dot for homepage banners */
.hb-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,48,49,0.08) 0%, rgba(214,48,49,0.02) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hb-glow--pulse {
  animation: hb-glow-pulse 4s ease-in-out infinite;
}
@keyframes hb-glow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* Process step cards — subtle hover */
.hb-step {
  padding: 1.5rem 1rem;
  position: relative;
  transition: background var(--duration-fast) ease;
}
.hb-step:hover {
  background: rgba(214,48,49,0.02);
}

/* Process step number — large faded */
.hb-step-num {
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 300;
  color: var(--stone);
  margin-bottom: 0.5rem;
}

/* Process step title */
.hb-step-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.hb-step-title::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

/* Process step description */
.hb-step-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

/* Size card description override */
.bohory-sizes .size-card p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mist);
  line-height: 1.7;
}

/* === §44 — DETAIL: delivery time + action icons — toned down === */

/* Delivery date — subtle, mono, small */
.type-detail .delivery-time,
.type-detail .delivery-time-label,
.type-detail .delivery-time span {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--mist) !important;
  letter-spacing: 0.04em;
}

/* Kill any highlight/background Shoptet puts on the date */
.type-detail .delivery-time {
  background: none !important;
  border: none !important;
  padding: 0.4rem 0 !important;
  margin: 0 !important;
}

/* Action icons (Tisknout, Zeptat se, Sdílet) — shrink */
.type-detail .social-buttons-wrapper,
.type-detail .link-icons {
  gap: 0.5rem !important;
}

.type-detail .link-icons a,
.type-detail .link-icons .link-icon {
  font-size: 12px !important;
  color: var(--mist) !important;
  opacity: 0.5;
  transition: opacity var(--duration-fast) ease, color var(--duration-fast) ease;
}

.type-detail .link-icons a:hover,
.type-detail .link-icons .link-icon:hover {
  color: var(--red) !important;
  opacity: 1;
}

/* Icon size inside the links (Shoptet uses ::before or img/svg) */
.type-detail .link-icons a::before,
.type-detail .link-icons .link-icon::before {
  font-size: 14px !important;
}

.type-detail .link-icons a span {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;


* === §45 — DETAIL: variant selectors (BARVA, TYP) — refined === */

/* Kill table grid look */
.type-detail table.detail-parameters {
  border-collapse: collapse !important;
  border: none !important;
  width: 100% !important;
  margin: 0.5rem 0 !important;
}

.type-detail table.detail-parameters tr {
  border: none !important;
}

.type-detail table.detail-parameters th,
.type-detail table.detail-parameters td {
  border: none !important;
  padding: 0.6rem 0 !important;
  background: transparent !important;
  vertical-align: middle !important;
}

/* Label (th) — small mono, red dot before */
.type-detail table.detail-parameters th {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--navy) !important;
  opacity: 0.5;
  white-space: nowrap !important;
  padding-right: 1.2rem !important;
  position: relative;
}

/* Red dot */
.type-detail table.detail-parameters th::before {
  content: '' !important;
  display: inline-block !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  margin-right: 0.5em !important;
  vertical-align: middle !important;
}

/* Select dropdown — clean, stone border, red bottom accent */
.type-detail table.detail-parameters select {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--navy) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid var(--stone) !important;
  border-radius: 0 !important;
  padding: 0.35em 1.5em 0.35em 0 !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: border-color var(--duration-fast) ease !important;
  /* Custom arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23706C66'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  background-size: 10px 6px !important;
}

.type-detail table.detail-parameters select:hover {
  border-bottom-color: var(--navy) !important;
}

.type-detail table.detail-parameters select:focus {
  border-bottom-color: var(--red) !important;
}

/* === §46 — DETAIL: product tabs — centered divider style === */

/* Wrapper chain — kill Shoptet defaults */
.type-detail .shp-tabs-wrapper,
.type-detail .p-detail-tabs-wrapper,
.type-detail .shp-tabs-row,
.type-detail .shp-tabs-holder {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

/* The row: centered text, stone line through the middle */
.type-detail div.col-sm-12.shp-tabs-row.responsive-nav,
div.col-sm-12.shp-tabs-row.responsive-nav {
  text-align: center !important;
  border: none !important;
  margin-bottom: 2.5rem !important;
  margin-top: 0.5rem !important;
  padding: 0 !important;
  position: relative !important;
}

/* Stone line — full width, vertically centered via ::before on the row */
.type-detail div.col-sm-12.shp-tabs-row.responsive-nav::before,
div.col-sm-12.shp-tabs-row.responsive-nav::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: var(--stone) !important;
  display: block !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Holder becomes inline + paper bg to punch through the line */
.type-detail div.col-sm-12.shp-tabs-row .shp-tabs-holder,
div.col-sm-12.shp-tabs-row .shp-tabs-holder {
  display: inline-block !important;
  background: var(--paper) !important;
  padding: 0 1.2rem !important;
  position: relative !important;
  z-index: 1 !important;
}

/* UL tab list — inline */
.type-detail ul#p-detail-tabs,
ul#p-detail-tabs.shp-tabs.p-detail-tabs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tab item — target by data-testid */
.type-detail li[data-testid="tabDescription"],
.type-detail ul#p-detail-tabs li.shp-tab,
li[data-testid="tabDescription"].shp-tab {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tab link — target by data-testid parent */
.type-detail li[data-testid="tabDescription"] a.shp-tab-link,
li[data-testid="tabDescription"] a.shp-tab-link,
.type-detail ul#p-detail-tabs li.shp-tab a.shp-tab-link {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--navy) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0.5em 0.8em !important;
  margin: 0 !important;
  position: relative !important;
  transition: color var(--duration-fast) ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* Red dot BEFORE tab text */
.type-detail li[data-testid="tabDescription"] a.shp-tab-link::before,
li[data-testid="tabDescription"] a.shp-tab-link::before {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  margin-right: 0.6em !important;
  vertical-align: middle !important;
  position: static !important;
  border: none !important;
}

/* Red dot AFTER tab text */
.type-detail li[data-testid="tabDescription"] a.shp-tab-link::after,
li[data-testid="tabDescription"] a.shp-tab-link::after {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  margin-left: 0.6em !important;
  vertical-align: middle !important;
  position: static !important;
  border: none !important;
}

/* Hover */
.type-detail li[data-testid="tabDescription"] a.shp-tab-link:hover {
  color: var(--red) !important;
  background: transparent !important;
}

/* === END style2.css v4.6 === */