/*
 * This stylesheet loads after app.css, so anything declared here wins.
 * The export palette is remapped onto the Figma design tokens (see
 * docs/design/SPEC.md) so the storefront no longer mixes a warm brown
 * scheme with the cool neutral + sage one.
 */
:root {
  --export-brown: var(--color-muted);
  --export-dark: var(--color-dark);
  --export-cream: var(--color-bg);
  --export-sand: var(--color-muted-1);
  --export-line: var(--color-border);
}

body {
  /* Single family for the whole storefront, controlled from app.css. */
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-white);
}

main p,
main li,
main .text-muted {
  text-wrap: pretty;
}

@media (min-width: 768px) {
  main p,
  main li,
  main .text-muted {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(32, 35, 28, 0.12);
  box-shadow: 0 10px 30px rgba(32, 35, 28, 0.05);
}

.header-top {
  background: var(--export-dark);
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-top a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  margin-left: 24px;
  font-size: 13px;
}

.header-top a:hover {
  color: #fff;
}

.header-main {
  padding: 16px 0;
}

/*
 * Category nav. The frame sets the five labels ~96px apart measured
 * text-to-text; the 16px of padding on each link covers 32px of that, so the
 * flex gap carries the remaining 64px.
 */
.main-nav {
  gap: 64px;
}

.main-nav .nav-link {
  color: var(--export-dark) !important;
  font-weight: 700;
  padding: 10px 16px !important;
  border-radius: 999px;
}

/* The gap has to give way before the nav collides with the logo or the cart. */
@media (max-width: 1599.98px) { .main-nav { gap: 40px; } }
@media (max-width: 1399.98px) { .main-nav { gap: 20px; } }
@media (max-width: 1199.98px) { .main-nav { gap: 4px; } }

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
  color: var(--color-primary) !important;
  background: rgba(239, 140, 60, 0.1);
}

.main-nav .dropdown-menu {
  border: 1px solid var(--export-line);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 24px 50px rgba(32, 35, 28, 0.12);
}

.main-nav .dropdown-item {
  border-radius: 12px;
  padding: 10px 14px;
}

.main-nav .dropdown-item:hover {
  background: var(--export-cream);
  color: var(--color-primary);
}

.cart-btn {
  background: var(--export-cream);
  border: 1px solid var(--export-line);
  border-radius: 999px;
  padding: 10px 18px;
  color: var(--export-dark);
  font-weight: 700;
}

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

.cart-badge {
  background: var(--color-primary);
}

.export-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(239, 140, 60, 0.16), transparent 34%),
    linear-gradient(135deg, var(--color-dark) 0%, var(--color-sage-dark) 100%);
  color: #fff;
}

.export-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/images/export/bg-calc.webp') center/cover no-repeat;
  opacity: 0.1;
}

.export-hero .container {
  position: relative;
  z-index: 1;
}

.export-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.export-title {
  font-size: clamp(2.4rem, 4vw, 4.6rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.export-title .accent {
  color: var(--color-primary);
}

.export-subtitle {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
  line-height: 1.8;
}

.hero-visual-card {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 70px rgba(32, 35, 28, 0.28);
}

.hero-visual-card img {
  width: 100%;
  display: block;
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hero-fact {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-fact strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
}

.hero-fact span {
  display: block;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.9rem;
}

.benefits-strip {
  padding: 24px 0 10px;
  position: relative;
  z-index: 3;
}

.benefits-shell {
  background: #fff;
  border: 1px solid var(--export-line);
  border-radius: 28px;
  box-shadow: 0 25px 60px rgba(32, 35, 28, 0.08);
}

.benefits-shell .row > [class*="col-"] {
  display: flex;
}

.benefit-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  width: 100%;
  min-height: 100%;
  padding: 26px 28px;
}

.benefit-item + .benefit-item {
  border-left: 1px solid var(--export-line);
}

.benefit-item > div:last-child {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: 26ch;
}

.benefit-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--export-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-icon img {
  width: 28px;
  height: 28px;
}

.benefit-icon i {
  color: var(--color-primary);
  font-size: 1.15rem;
}

.benefit-item h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.2;
  font-weight: 750;
  color: var(--export-dark);
  text-align: left;
  text-wrap: balance;
}

.benefit-item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-muted);
  text-align: left;
  text-wrap: pretty;
  text-justify: auto;
  hyphens: none;
}

.store-section {
  padding: 84px 0;
}

.store-section.alt {
  background: linear-gradient(180deg, var(--color-bg) 0%, #fff 100%);
}

.section-head {
  max-width: 780px;
  margin-bottom: 38px;
}

.section-head .eyebrow {
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.section-head h2 {
  color: var(--export-dark);
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 3.2rem);
  letter-spacing: -0.04em;
  margin: 10px 0 12px;
}

.section-head p {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.9;
}

/* ===== CATEGORY ICON CARDS ===== */
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 16px;
  background: #fff;
  border: 1px solid var(--export-line);
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(32, 35, 28, 0.05);
  color: var(--export-dark);
  transition: all 0.25s ease;
  text-align: center;
}

.cat-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 14px 40px rgba(239, 140, 60, 0.14);
  transform: translateY(-4px);
  color: var(--color-primary);
}

.cat-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--export-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
  transition: all 0.25s ease;
}

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

.cat-card-name {
  font-size: 0.95rem;
  font-weight: 700;
}

/* ===== CATEGORY PROMO CARDS (kept for reference) ===== */
.category-promo {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--export-line);
  border-radius: 28px;
  padding: 28px;
  height: 100%;
  box-shadow: 0 18px 40px rgba(32, 35, 28, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.category-promo:hover {
  transform: translateY(-6px);
  border-color: rgba(239, 140, 60, 0.34);
  box-shadow: 0 26px 60px rgba(32, 35, 28, 0.12);
}

.category-promo .cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--export-cream);
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.category-promo h3 {
  margin: 18px 0 10px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--export-dark);
}

.category-promo p {
  color: var(--color-muted);
  margin-bottom: 20px;
}

.category-promo .media {
  margin-top: auto;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-muted-1) 100%);
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.category-promo .media img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.about-panel,
.calc-panel,
.team-panel,
.contact-panel-export {
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid var(--export-line);
  box-shadow: 0 25px 60px rgba(56, 37, 23, 0.08);
}

.about-panel {
  background: #fff;
}

.about-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-copy {
  padding: 38px;
}

.about-copy ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.about-copy li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--color-muted);
}

.about-copy li i {
  color: var(--color-primary);
}

.calc-panel {
  position: relative;
  background:
    linear-gradient(135deg, rgba(47, 36, 29, 0.96) 0%, rgba(32, 35, 28, 0.96) 100%),
    url('/images/export/bg-calc.webp') center/cover no-repeat;
  color: #fff;
}

.calc-copy {
  padding: 42px;
}

.calc-copy p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.9;
}

.calc-points {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.calc-point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.calc-point strong {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.calc-side {
  background: rgba(255, 255, 255, 0.05);
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.calc-side img {
  max-width: 100%;
}

.product-grid-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--export-line);
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 45px rgba(53, 34, 20, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.product-grid-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(53, 34, 20, 0.12);
  border-color: rgba(239, 140, 60, 0.3);
}

.product-grid-image {
  display: block;
  background: #fff;
  min-height: 240px;
  padding: 22px;
}

.product-grid-image img {
  width: 100%;
  height: 196px;
  object-fit: contain;
}

.product-grid-body {
  padding: 22px 22px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-grid-category {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.product-grid-title {
  color: var(--export-dark);
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 4px 0 0;
  flex: 1;
}

.product-grid-title a {
  color: inherit;
  text-decoration: none;
}

.product-grid-meta {
  color: var(--color-muted);
  font-size: 0.88rem;
}

.product-grid-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  color: var(--export-dark);
}

.product-grid-price strong {
  font-size: 1.25rem;
  font-weight: 800;
}

.product-grid-footer {
  padding: 0 22px 22px;
  background: linear-gradient(180deg, rgba(248,243,237,.2) 0%, #fff 100%);
}

.product-grid-footer .btn {
  min-height: 46px;
  border-radius: 999px;
  font-weight: 700;
}

.shop-shell {
  padding: 38px 0 84px;
}

.shop-sidebar {
  background: linear-gradient(180deg, var(--color-bg) 0%, #fff 100%);
  border: 1px solid var(--export-line);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 18px 45px rgba(53, 34, 20, 0.06);
}

.filter-title {
  color: var(--export-dark);
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.filter-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-muted);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 14px;
}

.filter-item a:hover,
.filter-item a.active {
  background: #fff;
  color: var(--color-primary);
}

.shop-topbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 28px;
}

.shop-topbar h1 {
  color: var(--export-dark);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.site-footer {
  background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-dark) 100%);
  color: rgba(255, 255, 255, 0.78);
  padding: 72px 0 32px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .site-footer .col-lg-4,
  .site-footer .col-md-4,
  .site-footer .col-lg-2,
  .site-footer .col-lg-3 {
    text-align: center;
  }

  .site-footer img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.site-footer h5 {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.74);
  display: block;
  text-decoration: none;
  margin-bottom: 10px;
}

.site-footer a:hover {
  color: #fff;
}

.payment-icons {
  margin-top: 20px;
}

.payment-icons img {
  height: 28px;
  width: auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 8px;
}

.footer-bottom {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 991.98px) {
  .hero-facts {
    grid-template-columns: 1fr;
  }

  .benefit-item + .benefit-item {
    border-left: 0;
    border-top: 1px solid var(--export-line);
  }

  .benefit-item > div:last-child {
    max-width: none;
  }

  .shop-topbar {
    flex-direction: column;
    align-items: start;
  }
}

@media (max-width: 767.98px) {
  .header-main {
    padding: 12px 0;
  }

  .benefits-strip {
    padding: 10px 0 12px;
  }

  .benefit-item {
    gap: 16px;
    padding: 18px 20px;
    align-items: center;
  }

  .benefit-item h3 {
    font-size: 0.96rem;
  }

  .benefit-item p {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .benefit-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
  }

  .benefit-icon img {
    width: 30px;
    height: 30px;
  }

  .benefits-shell {
    border-radius: 24px;
  }

  .store-section {
    padding: 64px 0;
  }

  .about-copy,
  .calc-copy,
  .calc-side {
    padding: 28px;
  }

  .product-grid-card {
    border-radius: 24px;
    box-shadow: 0 14px 32px rgba(41, 28, 16, 0.08);
  }

  .product-grid-card:hover {
    transform: none;
  }

  .product-grid-image {
    min-height: 220px;
    padding: 26px 22px 18px;
  }

  .product-grid-image img {
    height: 172px;
  }

  .product-grid-body {
    padding: 18px 20px 16px;
  }

  .product-grid-category {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
  }

  .product-grid-title {
    font-size: 1.15rem;
    line-height: 1.15;
  }

  .product-grid-price {
    gap: 10px;
  }

  .product-grid-price strong {
    font-size: 1.55rem;
    line-height: 1.05;
  }

  .product-grid-footer {
    padding: 14px 20px 18px;
  }

  .product-grid-footer .btn {
    min-height: 52px;
    font-size: 1rem;
  }
}

/* =====================================================================
   DESIGN ALIGNMENT (Figma "Dverko - UI/UX")
   This stylesheet is the last one loaded, so these rules reconcile the
   older warm-scheme declarations above with the design tokens in app.css.
   See docs/design/SPEC.md.
   ===================================================================== */

body {
  color: var(--color-text);
  background: var(--color-white);
}

/* Header is a plain white bar with a hairline, not a translucent warm panel. */
.site-header {
  background: var(--color-white);
  backdrop-filter: none;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}

/* The utility bar is white in the design; the rule above set it to ink. */
.header-top {
  background: var(--color-white);
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
}

.header-top a { color: var(--color-muted); }
.header-top a:hover { color: var(--color-dark); }

.main-nav .nav-link {
  /* Bold in the frame; this block used to drop it back to 500. */
  font-weight: 700;
  border-radius: var(--border-radius-sm);
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
  color: var(--color-dark) !important;
  background: var(--color-bg-alt);
}

.main-nav .dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 24px 50px rgba(32, 35, 28, 0.12);
}

.main-nav .dropdown-item:hover {
  background: var(--color-bg-alt);
  color: var(--color-dark);
}

/* Cart is a text action, and its badge carries dark ink on orange. */
.cart-btn {
  background: transparent;
  border: 0;
  border-radius: var(--border-radius-sm);
  padding: 8px 10px;
  font-weight: 500;
  color: var(--color-dark);
}

.cart-btn:hover {
  background: var(--color-bg-alt);
  border-color: transparent;
  color: var(--color-dark);
}

.cart-badge { color: var(--color-dark); }

/*
 * The benefits bar was previously a bordered white shell with divider lines.
 * The design uses a single muted panel, so neutralise the old item chrome
 * inside the new container only.
 */
.benefits-bar .benefit-item {
  padding: 0;
  min-height: 0;
  width: auto;
  align-items: flex-start;
  gap: 16px;
}

.benefits-bar .benefit-item + .benefit-item { border-left: 0; }

.benefits-bar .benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-sm);
  background: var(--color-muted-3);
}

.benefits-bar .benefit-icon i { color: var(--color-dark); font-size: 1.1rem; }

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

/* Section heading typography aligned to the design's flatter hierarchy. */
.section-head .eyebrow {
  color: var(--color-muted);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.section-head h2 {
  color: var(--color-dark);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
  letter-spacing: -0.01em;
}

.section-head p { color: var(--color-muted); line-height: 1.6; }

/* Category cards pick up the flat neutral treatment. */
.cat-card {
  background: var(--color-card);
  border: 1px solid transparent;
  border-radius: var(--border-radius-card);
  box-shadow: none;
  color: var(--color-dark);
}

.cat-card:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-hover);
  color: var(--color-dark);
}

.cat-card-icon { background: var(--color-bg-alt); color: var(--color-dark); }
.cat-card:hover .cat-card-icon { background: var(--color-muted-1); color: var(--color-dark); }

/* =====================================================================
   CATEGORY LISTING (Figma "Category-page")
   ===================================================================== */

.listing-hero-wrap { padding: 20px 0 8px; background: transparent; border-bottom: 0; }

.listing-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
  gap: 32px;
  align-items: center;
  padding: 44px;
  border-radius: var(--border-radius-panel);
  background: var(--color-muted-1);
  overflow: hidden;
}

.listing-hero-breadcrumb {
  margin-bottom: 14px;
  padding: 0;
  background: transparent;
  font-size: 0.85rem;
}

.listing-hero-breadcrumb .breadcrumb-item a { color: var(--color-dark); text-decoration: none; }
.listing-hero-breadcrumb .breadcrumb-item.active { color: var(--color-dark); }

.listing-hero-title {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-dark);
}

.listing-hero-intro {
  margin: 0;
  max-width: 46ch;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-dark);
  text-align: left;
}

.listing-hero-visual { align-self: end; justify-self: center; }
.listing-hero-visual img { max-width: 100%; height: auto; display: block; }

.listing-hero-tips-title {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-dark);
}

.listing-hero-tips ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.listing-hero-tips li { display: flex; align-items: center; gap: 12px; }

.listing-hero-tips li i { color: var(--color-primary); flex-shrink: 0; }

.listing-hero-tips a,
.listing-hero-tips span {
  color: var(--color-dark);
  font-size: 0.95rem;
  text-decoration: underline;
}

/* ---- Filter sidebar ---- */
.filter-form {
  padding: 26px 22px;
  border-radius: var(--border-radius-panel);
  background: var(--color-card);
}

.filter-sec-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-dark);
}

.filter-chip {
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-dark);
}

.filter-chip:hover,
.filter-chip.active {
  border-color: var(--color-dark);
  background: var(--color-bg-alt);
  color: var(--color-dark);
}

.color-swatch {
  border: 1px solid rgba(32, 35, 28, 0.14);
  border-radius: 50%;
}

/* ---- Toolbar above the grid ---- */
.listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.listing-active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.listing-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-dark);
  font-size: 0.88rem;
  text-decoration: none;
}

.listing-active-filter:hover { background: var(--color-bg-alt); color: var(--color-dark); }

.listing-count { font-size: 0.9rem; color: var(--color-muted); }

.listing-sort select,
.listing-sort .form-select {
  min-width: 240px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-white);
  color: var(--color-dark);
  font-size: 0.95rem;
}

@media (max-width: 991px) {
  .listing-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px;
  }
  .listing-hero-visual { display: none; }
}

@media (max-width: 575px) {
  .listing-hero { padding: 22px; }
  .filter-form { padding: 20px 16px; }
  .listing-sort select,
  .listing-sort .form-select { min-width: 0; width: 100%; }
}

/* =====================================================================
   EXACT GEOMETRY FROM THE FIGMA FRAME
   The design frame is 1920px wide with a 1600px content column
   (160px margins). All values below are measured from the captured
   frames at 100% zoom, not approximated. See docs/design/SPEC.md.
   ===================================================================== */

:root {
  --layout-max: 1600px;   /* content column in the 1920px frame */
  --gutter: 30px;         /* the single gutter used throughout the design */

  /*
    Page gutter: the empty margin the design leaves between the content column
    and the edge of the page. At 1920px the 1600px column sits 160px in, and
    that is where this gutter stops mattering — below 1760px the column shrinks
    and the gutter keeps 80px of air on both sides instead of letting the logo,
    nav, filters and footer run into the edge of the window.
  */
  --page-gutter: 80px;

  /*
    Wide panels (listing hero, "Naposledy prohlížené produkty"). The Figma
    frame draws them 1850px wide inside the 1920px page, i.e. 35px of air on
    each side. Next to the full-bleed footer that still read as too narrow on
    the live page, so the gap is tightened to 16px on request: the panels reach
    further out while the content column underneath does not move at all.

    One knob - --panel-gap is the air left on each side, --panel-max caps the
    panel on screens wider than the 1920px frame.
  */
  --panel-gap: 16px;
  --panel-max: 1888px;   /* 1920 - 2 * --panel-gap */

  /* Type scale, measured from cap heights (cap / 0.70). */
  --fs-display: 48px;     /* bento stats, reviews score */
  --fs-h1: 40px;          /* hero headline, section headings, panel titles */
  --fs-h3: 32px;          /* bento card titles */
  --fs-card-title: 24px;  /* product card category + name */
  --fs-body: 16px;
}

/*
  Bootstrap caps .container at 1320px; the design needs 1600px of content
  inside a 160px margin. Expressed as a 1760px border box with the page gutter
  as padding, the content column resolves to
  min(1600px, 100vw - 2 * --page-gutter): 160..1760 at 1920px exactly as in
  the frame, and 80px from each edge on anything narrower.
*/
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  max-width: calc(var(--layout-max) + 2 * var(--page-gutter));
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* The gutter has to give way before it eats the content on smaller screens. */
@media (max-width: 1199.98px) { :root { --page-gutter: 40px; } }
@media (max-width: 767.98px) { :root { --page-gutter: 20px; } }

/* No 1920px exception any more: the gutter is what produces the frame's 160px
   margin, so zeroing it there would push the content back out to the edge. */

/* Section headings and hero share one size in the design. */
.section-title,
.home-hero-title,
.home-hero-calc-title,
.listing-hero-title,
.cart-page-title,
.checkout-page-title,
.section-head h2 {
  font-size: clamp(1.75rem, 1.15rem + 1.6vw, var(--fs-h1));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.bento-title { font-size: clamp(1.35rem, 1rem + 1vw, var(--fs-h3)); }
.bento-stat,
.reviews-score strong { font-size: clamp(2rem, 1.4rem + 1.8vw, var(--fs-display)); }

/* Product card: category and name are the same size, stacked as one unit. */
.product-card .product-category,
.product-card-title {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, var(--fs-card-title));
  line-height: 1.22;
}

.product-card .product-price { font-size: 1.0625rem; }

/* ---- Hero: 1057 / 30 / 513 within the 1600px column, 660px tall ---- */
.home-hero { padding-top: 30px; }

.home-hero-grid {
  grid-template-columns: minmax(0, 1057fr) minmax(0, 513fr);
  gap: var(--gutter);
}

.home-hero-visual,
.home-hero-calc {
  min-height: 660px;
  border-radius: 24px;
}

.home-hero-visual { padding: 40px; }
.home-hero-calc { padding: 40px; }

/* ---- Benefits bar: 164px tall, 30px radius ---- */
.benefits-bar {
  min-height: 164px;
  align-content: center;
  border-radius: 30px;
  gap: var(--gutter);
  padding: 30px 40px;
}

/* ---- Consistent 30px rhythm between stacked blocks ---- */
.home-band { padding-top: var(--gutter); }
.home-band:last-of-type { padding-bottom: 60px; }

/* Section heading rows sit 30px above their content. */
.section-bar { margin-bottom: var(--gutter); }

/* ---- Panels and cards ---- */
.panel-sage,
.panel-muted,
.panel-inset,
.bento-cell,
.listing-hero,
.site-footer > .container,
.cart-summary-card,
.order-summary,
.cross-sell,
.checkout-card,
.checkout-section,
.detail-advisor,
.product-configurator .config-section {
  border-radius: 24px;
}

.decor-card,
.article-card,
.review-card,
.product-card,
.cart-table tbody td:first-child,
.cross-sell-card { border-radius: 20px; }

.bento-grid,
.decor-rail,
.article-rail,
.review-rail { gap: var(--gutter); }

/* Form controls: 52px tall in the design. */
.calc-input,
.product-configurator select,
.product-configurator .form-select {
  min-height: 52px;
  border-radius: 12px;
}

/* Bootstrap's .row gutter aligned to the design's 30px. */
.row.g-4 { --bs-gutter-x: var(--gutter); --bs-gutter-y: var(--gutter); }

@media (max-width: 991px) {
  .home-hero-visual,
  .home-hero-calc { min-height: 0; }
  .home-hero-visual { min-height: 380px; }
  .benefits-bar { min-height: 0; }
}

/* ---- Header: aligned to the same 1600px column, no divider ----
   Measured from the frame: utility text y 8-33, logo row y 65-121,
   hero starts at y 184. Content starts at x 161 like every other section,
   so the older full-bleed header rules are reset here. */
.site-header {
  border-bottom: 0;
  box-shadow: none;
}

.site-header .header-main .container,
.site-header .header-top .container {
  max-width: calc(var(--layout-max) + 2 * var(--page-gutter));
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

.site-header .logo { margin-left: 0; }

.header-top {
  padding: 8px 0;
  border-bottom: 0;
}

.header-main { padding: 14px 0 18px; }

/* A third off the 52px the frame drew, on request. */
.logo img { height: 35px; }

/* The tagline sits directly under the wordmark in the design. */
.logo { display: inline-flex; flex-direction: column; gap: 2px; }

/*
  The claim under the wordmark, ending flush with it.

  Two classes on purpose: app.css still carries a `.logo span` rule from the
  old text logo (24px/700), and one class + one element outranks a lone
  `.logo-tagline`, so a single-class rule here silently loses and the claim
  renders at 24px bold.

  Sizing: the svg is 277.21 x 54.61, so the 35px wordmark is 178px wide. The
  string measures ~12.5em in Manrope 500 (the frame draws it 175px at 14px),
  which puts 14px a couple of px short of 178 - close enough that justifying
  the single line closes the rest invisibly, and guaranteed flush rather than
  relying on the font metrics being what we measured.
*/
.logo .logo-tagline {
  display: block;
  width: 178px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
}

@media (max-width: 575px) {
  .logo-tagline { display: none; }
  .logo img { height: 27px; }
}

/* Logo lockup: wordmark with the tagline beneath, both left-aligned.
   The older rules let .logo grow and centred the image inside it. */
.site-header .logo {
  flex: 0 0 auto;
  align-items: flex-start;
  margin-left: 0;
}

.site-header .logo img {
  /* Wins over .logo img above; keep the two in step. */
  height: 35px;
  width: auto;
  max-width: none;
  display: block;
}

/* Body copy is left-aligned and unhyphenated in the design. The older
   justify + hyphens rule produced river gaps and mid-word breaks
   ("při-pravené"), which do not appear in the frames. */
main p,
main li,
main .text-muted {
  text-align: left;
  hyphens: manual;
}

/* The block above still paints the pre-redesign dark footer. The design has an
   inset sage panel on the white page, with ink text rather than white. */
.site-footer {
  background: transparent;
  color: var(--color-dark);
  padding: 0 0 24px;
  margin-top: 40px;
}

.site-footer h5 {
  color: var(--color-dark);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 18px;
}

.site-footer a {
  color: var(--color-dark);
  margin-bottom: 0;
}

.site-footer a:hover { color: var(--color-dark); opacity: 0.62; }


/* Footer mascot, positioned between the newsletter column and the link
   columns as in the design. Hidden on narrow layouts where it would collide. */


/* Product-grid CTA: the rule above still makes it a pill. The design uses the
   same ~12px rounded rectangle as every other button. */
.product-grid-footer .btn,
.product-card .btn,
.product-card-action {
  border-radius: var(--border-radius-sm);
  font-weight: 600;
}

.product-grid-footer {
  background: transparent;
}

/* Breadcrumbs sit on the page background in the design, without a tinted band. */
.breadcrumb-section {
  background: transparent;
  border-bottom: 0;
  padding: 18px 0 0;
}

.breadcrumb-section .breadcrumb,
.breadcrumb { background: transparent; margin-bottom: 0; }

.breadcrumb-section a,
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb-section a:hover,
.breadcrumb a:hover { color: var(--color-dark); }
.breadcrumb-item.active { color: var(--color-dark); }

/* =====================================================================
   BUTTON SPECS FROM THE COMPONENT SET (read via the Figma REST API)
   akcent-button-l : 52px tall, radius 16, gradient #EF8739 -> #F29E50,
                     label #40190C, Manrope 600 18px, ls -0.02em
   akcent-button-m : 40px tall, radius 14, 14px label
   primary-button  : same geometry, sage gradient #8D957F -> #B1B4AA
   *-line variants : no fill, 2px #F1F1ED stroke, label #6E775F
   ===================================================================== */

.btn-primary {
  background: var(--gradient-primary) !important;
  border: 0 !important;
  border-radius: var(--radius-btn-l);
  min-height: 52px;
  padding: 16px 20px;
  color: var(--color-on-primary) !important;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--color-orange-600) 0%, var(--color-orange-500) 100%) !important;
  color: var(--color-on-primary) !important;
  box-shadow: 0 8px 20px rgba(224, 106, 42, 0.28);
}

.btn-primary.btn-sm,
.btn-sm.btn-primary {
  min-height: 40px;
  padding: 14px 16px;
  border-radius: var(--radius-btn-m);
  font-size: 14px;
  letter-spacing: -0.02em;
}

/* Line / outline variant. */
.btn-outline-primary,
.btn-outline-soft {
  background: transparent !important;
  border: 2px solid var(--color-green-100) !important;
  border-radius: var(--radius-btn-l);
  min-height: 52px;
  padding: 16px 20px;
  color: var(--color-green-600) !important;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-outline-primary:hover,
.btn-outline-soft:hover {
  background: var(--color-green-100) !important;
  border-color: var(--color-green-200) !important;
  color: var(--color-green-700) !important;
}

/* Sage solid, used inside the bento grid. */
.btn-sage {
  background: var(--gradient-sage) !important;
  border: 0 !important;
  border-radius: var(--radius-btn-l);
  min-height: 52px;
  padding: 16px 20px;
  color: var(--color-ink) !important;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.btn-sage:hover {
  background: linear-gradient(180deg, var(--color-green-600) 0%, var(--color-green-500) 100%) !important;
  color: var(--color-ink) !important;
}

.btn-ghost-on-image {
  border-radius: var(--radius-btn-l);
  min-height: 52px;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Product-grid CTA follows the medium size. */
.product-grid-footer .btn,
.product-card .btn,
.product-card-action {
  border-radius: var(--radius-btn-m);
  min-height: 40px;
  padding: 14px 16px;
  font-size: 14px;
}

/* Panels and inputs keep the 24px / 16px shapes. */
.calc-input,
.product-configurator select,
.product-configurator .form-select,
.listing-sort select,
.listing-sort .form-select {
  border-radius: var(--radius-btn-l);
}

/* =====================================================================
   FLAT SURFACES
   Profiling the rows directly below every panel edge in the design
   (benefits bar, product cards, bento tiles, reviews container, footer)
   returns the flat page colour — the design has no panel shadows. The
   older stylesheets add several, so they are cleared here.
   ===================================================================== */
.site-header,
.benefits-shell,
.benefits-bar,
.cat-card,
.cat-card:hover,
.product-card,
.product-card:hover,
.product-grid,
.product-grid:hover,
.hero-visual-card,
.filter-form,
.mobile-filter-panel,
.listing-hero,
.panel-sage,
.panel-muted,
.panel-inset,
.bento-cell,
.review-card,
.article-card,
.decor-card,
.cart-summary-card,
.cart-items-card,
.checkout-card,
.checkout-section,
.detail-advisor,
.product-configurator .config-section,
.header-search-trigger,
.mobile-nav-toggle,
.mobile-nav-link,
.mobile-nav-link:hover {
  box-shadow: none !important;
}

/* Carousel arrows are the one place the design does lift an element. */
.carousel-arrow { box-shadow: 0 6px 20px rgba(32, 35, 28, 0.14) !important; }
.carousel-arrow:hover { box-shadow: 0 8px 26px rgba(32, 35, 28, 0.2) !important; }

/* Hover feedback without shadow: a hairline and a small lift only. */
.product-card:hover,
.cat-card:hover {
  border-color: var(--color-green-200);
  transform: translateY(-2px);
}

/* =====================================================================
   PANEL GRADIENTS + DECORATIVE ARCS
   Sampled across every panel in the pristine API render of Homepage 1b:
   the panels are NOT flat, each carries a horizontal (90deg) two-stop
   gradient between adjacent steps of the green ramp.

     sage panels      #8D957F -> #B1B4AA   (green-500 -> green-400)
     muted panels     #E1E2DD -> #CCCFC6   (green-200 -> green-300)
     light cards      flat #F8F9F7         (unchanged)

   The footer has its own stylesheet (footer.css) and is not touched here.
   ===================================================================== */

.panel-sage,
.home-hero-calc,
.home-calc-banner,
.bento-cell--sage {
  background: linear-gradient(90deg, var(--color-green-500) 0%, var(--color-green-400) 100%);
}

.benefits-bar,
.panel-muted,
.bento-cell,
.bento-cell--light,
.listing-hero {
  background: linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%);
}

/* --sage must win over the broad .bento-cell rule above. */
.bento-cell--sage {
  background: linear-gradient(90deg, var(--color-green-500) 0%, var(--color-green-400) 100%);
}

/* Light cards stay flat. */
.product-card,
.review-card,
.article-card,
.decor-card--plain { background: var(--color-card); }

/* Panels clip their arcs and their mascots. */
.panel-sage,
.home-hero-calc,
.home-calc-banner,
.bento-cell--sage,
.benefits-bar,
.panel-muted,
.listing-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/*
 * Decorative arcs, matching the treatment on the category hero: a #B1B4AA
 * shape at low opacity sweeping behind the panel content. The vector is baked
 * into the frame's PNG export rather than being a separate asset, so it is
 * redrawn as oversized thin circles clipped by the panel.
 */
.panel-sage::before,
.panel-sage::after,
.home-hero-calc::before,
.home-hero-calc::after,
.home-calc-banner::before,
.home-calc-banner::after,
.bento-cell--sage::before,
.benefits-bar::before,
.panel-muted::before {
  content: '';
  position: absolute;
  z-index: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  pointer-events: none;
}

.home-calc-banner::before {
  width: 1180px;
  height: 1180px;
  left: -260px;
  top: -820px;
}

.home-calc-banner::after {
  width: 1460px;
  height: 1460px;
  right: -420px;
  top: -1010px;
}

.home-hero-calc::before,
.panel-sage::before {
  width: 900px;
  height: 900px;
  right: -420px;
  top: -560px;
}

.home-hero-calc::after,
.panel-sage::after {
  width: 1120px;
  height: 1120px;
  left: -520px;
  bottom: -700px;
}

.bento-cell--sage::before {
  width: 760px;
  height: 760px;
  right: -300px;
  top: -430px;
}

/* Muted panels take a paler stroke so the arc stays subtle on light fills. */
.benefits-bar::before,
.panel-muted::before {
  width: 1180px;
  height: 1180px;
  right: -200px;
  bottom: -1000px;
  border-color: rgba(177, 180, 170, 0.45);
}

/*
 * Keep panel content above the arcs. Images are excluded: the mascots are
 * absolutely positioned against the panel, and a blanket `position: relative`
 * here would drop them back into the flow.
 */
.panel-sage > *:not(img),
.home-hero-calc > *:not(img),
.home-calc-banner > *:not(img),
.bento-cell--sage > *:not(img),
.benefits-bar > *:not(img),
.panel-muted > *:not(img),
.listing-hero > *:not(img) { position: relative; z-index: 1; }

/* Headings use the display face, as on the category page. */
.section-title,
.section-bar .section-title,
.cart-page-title,
.checkout-page-title,
.cross-sell-title,
.detail-price,
.product-card-title {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* =====================================================================
   RECENTLY VIEWED STRIP
   Moved out of _group_listing_styles.blade.php so the homepage gets it
   too - that partial is only pushed on listing pages.
   ===================================================================== */

/* ---- "Naposledy prohlížené produkty" strip ---- */
.recently-viewed { padding:64px 0 24px; }
/*
  Same panel width as the hero (--panel-max / --panel-gap; the frame's own
  "bg" for this band is 1850x1437 at left calc(50% - 1850px/2)). Here the panel
  IS the container, so it is widened through max-width rather than negative
  margins — .container centres itself with `margin: 0 auto`, and setting an
  explicit margin would knock it out of the middle of the page. The extra width
  is handed straight back as padding, so the heading and the cards do not move.
*/
/* The komplety band on the product detail page takes the same panel. */
.recently-viewed > .container,
.komplety-band > .container {
  --recently-panel-bleed:max(0px, calc((min(var(--panel-max), 100vw - 2 * var(--panel-gap)) - min(1600px, 100vw - 2 * var(--page-gutter))) / 2));
  /* The panel is the container here, so it takes the panel's own width and
     the bleed becomes padding — heading and cards stay on the content column. */
  max-width:min(var(--panel-max), calc(100vw - 2 * var(--panel-gap)));
  padding-top:64px;
  padding-bottom:64px;
  padding-left:var(--recently-panel-bleed);
  padding-right:var(--recently-panel-bleed);
  border-radius:32px;
  background:linear-gradient(180deg, var(--color-green-100) 0%, var(--color-white) 42%);
}
.recently-viewed-title {
  margin:0 0 40px;
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 1.1rem + 1.6vw, 42px);
  font-weight:600;
  line-height:1.2;
  color:var(--color-ink);
}

@media (max-width: 991.98px) {
  .recently-viewed { padding:40px 0 16px; }
  .recently-viewed > .container,
  .komplety-band > .container {
    padding-top:36px;
    padding-bottom:36px;
    border-radius:24px;
  }
  .recently-viewed-title { margin-bottom:24px; }
}

/* =====================================================================
   PRODUCT CARD GEOMETRY - shared by every surface that renders a card
   Moved out of _group_listing_styles.blade.php, which is pushed only on
   listing pages. The homepage strips and the recently-viewed rail use the
   same partial, so without these rules their image box had no fixed ratio:
   a tall door photo produced a tall card and a wide handle photo a short
   one, leaving the button floating half way up next to its neighbours.
   ===================================================================== */

/* ---- One image box for every card, so cards match ---- */
.listing-card-col > .product-card,
.listing-card-col .product-card {
  /* The card anchor carries Bootstrap's .d-block utility, which is declared
     !important, so plain `display:flex` loses to it and the card stays a block
     box: flex-direction, the body's flex-grow and the footer's margin-top:auto
     all go inert, and short copy leaves slack under the button instead of
     above it. That is why buttons drifted off the baseline only on some cards
     and only at some widths. Overriding display is the one way to beat the
     utility short of removing the class from the markup. */
  display:flex !important;
  flex-direction:column;
  height:100%;
}
.listing-card-col .product-card .product-image {
  /* 336x400 in the design. A ratio keeps every box identical at any width. */
  aspect-ratio:336 / 400;
  height:auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Deliberately not overflow:hidden. The photo below is contained, so there is
     nothing to clip, and a hidden overflow here would silently cut a door off
     the moment any rule made the image taller than the box. */
}
.listing-card-col .product-card .product-image img.listing-card-media {
  /* Fill the box and let object-fit letterbox: the whole door is always shown,
     never cropped, never stretched, and it uses the full height the box offers
     instead of stopping at a fixed pixel cap part way down. */
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
}
.listing-card-col .product-card .product-body { flex:1 1 auto; }
.listing-card-col .product-card .product-footer { margin-top:auto; }
.listing-card-col .product-card .product-card-text {
  /* Two lines are reserved even when empty and three is the cap, so the
     price and button sit on one baseline no matter the copy length. */
  min-height:2.6em;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---- Card padding, type, swatches, footer and CTA ----
   Also moved out of the listing-only stylesheet: the footer padding is what
   holds the button off the card's bottom edge, so without it the homepage
   button sat flush against the border (1px instead of the intended 18px).
   Kept after the rules above to preserve the precedence it had when this
   block was pushed last on listing pages. ---- */

.listing-card-col {
  display:flex;
}
.listing-card-col > .product-card {
  width:100%;
  min-height:100%;
}
.listing-card-col .product-card {
  border-radius:28px;
  box-shadow:0 14px 32px rgba(41, 28, 16, 0.08);
}
.listing-card-col .product-card .product-image {
  /* Only the inner padding is left here. The old min-height and the per-category
     --group-card-image-max-height cap used to size this box; the fixed ratio
     above does that now, and the two together were the reason a door showed up
     small: a 290px cap inside a 447px box left a third of the frame empty and
     shrank the photo to a sliver. The cap is no longer applied on these cards -
     the frame is the limit - so the *_card_image_max_height_* admin settings no
     longer have an effect here. They are left in place rather than removed,
     because the detail pages and other card surfaces still read them. */
  padding:22px 18px;
  align-items:center;
}
.listing-card-col .product-card .product-image img.listing-card-media {
  display:block;
}
.listing-card-col .product-card .product-body {
  padding:16px 18px 12px;
  gap:6px;
}
.listing-card-col .product-card .product-category {
  margin-bottom:0;
}
.listing-card-col .product-card h3 {
  font-size:1.12rem;
  line-height:1.12;
  margin-bottom:2px;
  flex:0 0 auto;
}
.product-card-color-dots {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  min-height:24px;
  margin:2px 0 8px;
}
.product-card-color-dot {
  width:18px;
  height:18px;
  border-radius:50%;
  flex:0 0 18px;
  background:#e8dfd4;
  background-size:cover;
  background-position:center;
  /* 40% ink, so a white or cream decor still reads as a circle. */
  border:1px solid rgba(32,35,28,.4);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.55), 0 3px 8px rgba(33,23,15,.1);
}
.product-card-color-dots--large {
  gap:10px;
  min-height:40px;
  margin:4px 0 10px;
}
.product-card-color-dots--large .product-card-color-dot {
  width:36px;
  height:36px;
  flex-basis:36px;
  border-width:1px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.55), 0 5px 12px rgba(33,23,15,.14);
}
.product-card-color-dots--large .product-card-color-more {
  min-width:36px;
  height:28px;
  padding:0 10px;
  font-size:0.82rem;
}
.product-card-color-more {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#f7efe7;
  color:var(--color-primary);
  font-size:0.7rem;
  font-weight:800;
  line-height:1;
}
.listing-card-col .product-card .product-footer {
  padding:0 18px 18px;
  background:transparent;
}
.listing-card-col .product-card-action {
  /* Matches akcent-button-m from the Figma component set. */
  min-height:40px;
  font-size:14px;
}
@media (min-width: 992px) {
  .listing-card-col .product-card .product-image {
    /* min-height dropped with the pixel cap: on a narrow column it made the box
       taller than its own ratio, which is where the extra dead space under the
       door came from. */
    padding:24px 18px;
  }
}
@media (max-width: 575.98px) {
  .listing-card-col .product-card {
    border-radius:22px;
  }
  .listing-card-col .product-card .product-image {
    /* A phone card is narrow, so the box is a little squarer than 336x400. */
    aspect-ratio:5 / 6;
    padding:16px 12px;
  }
  .listing-card-col .product-card .product-body {
    padding:14px 14px 10px;
  }
  .listing-card-col .product-card h3 {
    font-size:0.98rem;
  }
  .product-card-color-dots {
    gap:5px;
  }
  .product-card-color-dot {
    width:16px;
    height:16px;
    flex-basis:16px;
  }
  .product-card-color-dots--large {
    gap:8px;
    min-height:34px;
  }
  .product-card-color-dots--large .product-card-color-dot {
    width:32px;
    height:32px;
    flex-basis:32px;
  }
  .product-card-color-dots--large .product-card-color-more {
    min-width:32px;
    height:24px;
    padding:0 8px;
    font-size:0.76rem;
  }
  .listing-card-col .product-card .product-category {
    font-size:0.72rem;
  }
  .listing-card-col .product-card .product-footer {
    padding:0 14px 14px;
  }
  .listing-card-col .product-card-action {
    min-height:40px;
    font-size:14px;
  }
}

/* =====================================================================
   ABOUT BENTO - the five tiles that close the product detail page
   Built from docs/design/design_product_all/about-us.png and that frame's
   CSS: a 1600x864 band (the .container column at 1920) with the 473px story
   tile down the left and a 1097px column beside it holding a 344px row
   (385 + 682) and a 490px row (682 + 385). The wide tile swaps sides between
   the rows, so the band is nested flex - as the frame itself is - rather than
   one grid: fixed grid columns cannot be 385 in one row and 682 in the next.

   Widths go to flex as ratios (flex:473 1 0 and so on), so every tile lands on
   its exact design width at 1600 and scales with the page below that. Row
   heights are min-heights, not fixed: the design height is reached at full
   width and shrinks with the viewport, but a tile is always free to grow
   rather than clip its copy.

   The visual language is the homepage bento's - same gradients off the green
   ramp, radius 24, hairline top edge, arcs and clipped mascot - while the
   sizes (64px padding, 42px and 80px type) are this frame's. That is why these
   rules are their own namespace instead of extra .bento-* modifiers: the
   homepage grid keeps its 32px type and equal columns.
   ===================================================================== */
.about-bento { padding:64px 0 24px; }

.about-bento-grid {
  display:flex;
  align-items:stretch;
  gap:30px;
}

.about-bento-col {
  display:flex;
  flex-direction:column;
  flex:1097 1 0;
  gap:30px;
  min-width:0;
}

.about-bento-row {
  display:flex;
  align-items:stretch;
  gap:30px;
  min-width:0;
}

/* 344 and 490 of the frame's 1600 wide band, held as a floor only. */
.about-bento-row--top { min-height:min(344px, 21.5vw); }
.about-bento-row--bottom { min-height:min(490px, 30.6vw); }

.about-bento-cell {
  position:relative;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:clamp(24px, 4vw, 64px);
  border-top:1px solid rgba(255, 255, 255, 0.12);
  border-radius:24px;
  overflow:hidden;
  isolation:isolate;
  color:var(--color-ink);
}

.about-bento-cell p {
  margin:0;
  font-size:16px;
  line-height:1.48;
  color:var(--color-ink);
}

.about-bento-cell--sage { background:linear-gradient(90deg, var(--color-green-500) 0%, var(--color-green-400) 100%); }
.about-bento-cell--muted { background:linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%); }

/* Same decorative arcs the other panels carry, clipped by the tile. */
.about-bento-cell--sage::before,
.about-bento-cell--muted::before {
  content:'';
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
  border:1.5px solid rgba(255, 255, 255, 0.26);
  width:760px;
  height:760px;
  right:-300px;
  top:-430px;
}

/* Paler and lower on the light fills, as on the muted panels elsewhere. */
.about-bento-cell--muted::before {
  width:1180px;
  height:1180px;
  right:-200px;
  top:auto;
  bottom:-1000px;
  border-color:rgba(177, 180, 170, 0.45);
}

/* Content above the arcs; images stay absolutely positioned (the mascot). */
.about-bento-cell > *:not(img) { position:relative; z-index:1; }

.about-bento-title {
  margin:0;
  font-family:var(--font-display);
  /* 32px in the frame. */
  font-size:clamp(1.35rem, 1rem + 1vw, 32px);
  font-weight:600;
  line-height:1.2;
  color:var(--color-ink);
}

/* The story and know-how headings are the frame's larger 42px cut. */
.about-bento-title--lg { font-size:clamp(1.5rem, 1.05rem + 1.4vw, 42px); }

.about-bento-stat {
  margin:0;
  font-family:var(--font-display);
  /* 48px in the frame. */
  font-size:clamp(2rem, 1.4rem + 1.8vw, 48px);
  font-weight:600;
  line-height:1.2;
  color:var(--color-ink);
}

/* "25 let" is set at 80px. */
.about-bento-stat--xl { font-size:clamp(2.6rem, 1.6rem + 3.2vw, 80px); }

.about-bento-link {
  margin-top:32px;
  align-self:flex-start;
  font-size:16px;
  font-weight:600;
  line-height:28px;
  letter-spacing:-0.02em;
  text-decoration:underline;
  color:var(--color-green-600);
}

.about-bento-link:hover { color:var(--color-ink); }

/* ---- s-1: story ---- */
.about-bento-cell--story {
  flex:473 1 0;
  justify-content:flex-end;
  /* The photo and its fade are set inline, so the tile keeps the frame's
     gradient-over-image stack with an editable image behind it. */
  background-color:var(--color-green-200);
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}

.about-bento-story-copy {
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* ---- s-a / s-d: the two stat tiles ---- */
.about-bento-cell--stat {
  justify-content:center;
  align-items:center;
  text-align:center;
}

.about-bento-cell--stat .about-bento-stat { margin-bottom:8px; }
.about-bento-cell--delivery { flex:385 1 0; }

/*
  The stat tiles centre what they hold, but `main p` above left-aligns every
  paragraph on the page and outranked them, so the lines under "Do 3 dnů" and
  "25 let" sat off to one side of a centred heading. Said again here, where it
  wins.
*/
.about-bento-cell--delivery p,
.about-bento-cell--experience p { text-align:center; }

/* The stat sits at the top here so the mascot owns the lower half. */
.about-bento-cell--experience {
  flex:385 1 0;
  justify-content:flex-start;
}

.about-bento-cell--experience p { max-width:24ch; }

/* 323x433 at top 210 of the frame's 385x490 tile, so it is the tile's bottom
   edge that crops the bird - anchoring it to the bottom instead would lift the
   whole mascot over the copy. */
.about-bento-mascot {
  position:absolute;
  left:50%;
  top:43%;
  z-index:0;
  height:min(433px, 27vw);
  width:auto;
  transform:translateX(-50%) scaleX(-1);
  pointer-events:none;
}

/* ---- s-b: stock ---- */
.about-bento-cell--stock {
  flex:682 1 0;
  justify-content:center;
}

.about-bento-cell--stock p { margin-top:8px; }

/* ---- s-c: know-how ---- */
.about-bento-cell--knowhow {
  flex:682 1 0;
  justify-content:space-between;
  gap:32px;
}

.about-bento-knowhow-copy {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.about-bento-knowhow-copy .btn-sage { margin-top:24px; }

/* Two benefits at the foot, split by the frame's hairline. */
.about-bento-points {
  display:flex;
  align-items:center;
  gap:32px;
}

.about-bento-point {
  display:flex;
  align-items:flex-start;
  gap:24px;
  flex:1 1 0;
  min-width:0;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:1.24;
  letter-spacing:-0.02em;
  color:var(--color-ink);
}

.about-bento-point + .about-bento-point {
  padding-left:32px;
  border-left:1px solid var(--color-green-400);
}

.about-bento-point-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-radius:14px;
  background:var(--color-green-100);
  color:var(--color-green-600);
  font-size:24px;
}

@media (max-width: 1399.98px) {
  /* The rows keep their order but stop chasing the frame's heights. */
  .about-bento-row--top,
  .about-bento-row--bottom { min-height:0; }
  .about-bento-cell--story { min-height:520px; }
  /*
    Below the full column the know-how tile is too narrow to hold two benefits
    side by side - the second one ran past the tile edge - so they stack and the
    divider goes with them. The mascot goes too: cropped this small it sits
    right behind the last line of copy instead of under it.
  */
  .about-bento-points { flex-direction:column; align-items:flex-start; gap:20px; }
  .about-bento-point { flex:0 0 auto; gap:16px; font-size:16px; }
  .about-bento-point + .about-bento-point { padding-left:0; border-left:0; }
  .about-bento-mascot { display:none; }
}

@media (max-width: 991.98px) {
  .about-bento { padding:40px 0 16px; }
  /* Below the sidebar breakpoint the band stacks: story, then each tile. */
  .about-bento-grid { flex-direction:column; }
  .about-bento-row { flex-direction:column; }
  /*
    The width ratios are a flex-basis of 0, which a stacked column reads as a
    height of 0 - the tiles collapsed onto their first line of copy. Stacked,
    every tile is simply as tall as its content.
  */
  .about-bento-grid > .about-bento-cell,
  .about-bento-row > .about-bento-cell { flex:0 0 auto; }
  .about-bento-cell { border-radius:20px; }
  .about-bento-cell--story { min-height:440px; }
}

/* =====================================================================
   KOMPLETY RAIL - "Vše pohromadě" band on the product detail page
   From docs/design/design_product_all/vsechny_komplety.png: heading and
   outline CTA on one line, then four cards of the range per slide 30px apart,
   a round arrow over the right edge and the slide pills underneath. The panel
   behind it is the recently viewed one, shared by extending that selector
   rather than restating the gradient.

   The homepage shows four featured groups in a static row; here it is the whole
   komplety range, so the row scrolls and snaps. A slide is the visible width,
   which is what both the arrows and the pills page by.
   ===================================================================== */
.komplety-band { padding:64px 0 24px; }

/*
  The frame gives this CTA a 2px green-300 edge and green-600 text. The shared
  .btn-outline-soft is a 1px green-200 hairline, which all but vanished against
  the panel's green-100 top, so the band restates the frame's own values.
*/
.komplety-band .btn-outline-soft {
  border:2px solid var(--color-green-300) !important;
  color:var(--color-green-600) !important;
}

.komplety-band .btn-outline-soft:hover {
  border-color:var(--color-green-500) !important;
  color:var(--color-ink) !important;
}

.komplety-rail {
  display:flex;
  gap:30px;
  overflow-x:auto;
  /* Arrows and pills page by whole cards; the snap is what catches a touch
     flick so it also comes to rest on a card edge. */
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.komplety-rail::-webkit-scrollbar { display:none; }

.komplety-rail-item {
  /* Four cards per slide in the design's 1600 column. */
  flex:0 0 calc((100% - 3 * 30px) / 4);
  max-width:calc((100% - 3 * 30px) / 4);
  scroll-snap-align:start;
}

/* 54px in the frame, with the arrow in green-600. */
.komplety-rail-shell .carousel-arrow {
  width:54px;
  height:54px;
  color:var(--color-green-600);
}

.komplety-rail-shell .carousel-arrow--prev { left:-27px; }
.komplety-rail-shell .carousel-arrow--next { right:-27px; }

/* The frame shows no arrow where the rail cannot go, not a faded one. */
.komplety-rail-shell .carousel-arrow:disabled { opacity:0; pointer-events:none; }

.komplety-rail-pills {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  margin-top:16px;
  /* Holds the row's height while the script fills it in. */
  min-height:7px;
}

.komplety-rail-pill {
  width:29px;
  height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--color-green-200);
  cursor:pointer;
  transition:background 0.2s;
}

.komplety-rail-pill:hover { background:var(--color-green-400); }
.komplety-rail-pill.is-active { background:var(--color-green-500); }

@media (max-width: 1399.98px) {
  /* Half the circle would hang over the page edge once the panel has no bleed
     left for it to sit in, so the arrows move inside the rail. */
  .komplety-rail-shell .carousel-arrow--prev { left:6px; }
  .komplety-rail-shell .carousel-arrow--next { right:6px; }
}

@media (max-width: 1199.98px) {
  .komplety-rail-item {
    flex:0 0 calc((100% - 2 * 30px) / 3);
    max-width:calc((100% - 2 * 30px) / 3);
  }
}

@media (max-width: 991.98px) {
  .komplety-band { padding:40px 0 16px; }
  .komplety-rail { gap:20px; }
  .komplety-rail-item {
    flex:0 0 calc((100% - 20px) / 2);
    max-width:calc((100% - 20px) / 2);
  }
  /* Touch swipes the rail, so the arrows are dead weight here. */
  .komplety-rail-shell .carousel-arrow { display:none; }
}

@media (max-width: 575.98px) {
  .komplety-rail-item { flex:0 0 78%; max-width:78%; }
}