/* Catalog layout variants (same engine, different look-and-feel) */

body[data-catalog-layout="moderno"] {
  background:
    radial-gradient(1200px 420px at 50% 0%, rgba(var(--primary-rgb), 0.11), transparent 65%),
    linear-gradient(180deg, #f7efe8 0%, #f9f3ee 42%, #f6efe9 100%);
}

body[data-catalog-layout="moderno"] .container.py-4 {
  max-width: 1240px;
}

body[data-catalog-layout="moderno"] .navbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

body[data-catalog-layout="moderno"] .hero-with-filters {
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 26px 56px rgba(114, 73, 33, 0.16);
}

body[data-catalog-layout="moderno"] #heroCarousel,
body[data-catalog-layout="moderno"] #heroCarousel .carousel-inner {
  border-radius: 34px 34px 0 0 !important;
}

body[data-catalog-layout="moderno"] #heroCarousel .hero-banner {
  min-height: clamp(170px, 18vw, 230px);
}

body[data-catalog-layout="moderno"] #heroCarousel .hero-content {
  width: min(90%, 760px);
  padding: clamp(1.1rem, 2.4vw, 2.1rem);
}

body[data-catalog-layout="moderno"] #heroCarousel .hero-content h1 {
  font-size: clamp(1.7rem, 3.2vw, 3.3rem);
  font-weight: 800;
}

body[data-catalog-layout="moderno"] #stickyFilters .category-sticky {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(105, 67, 31, 0.14);
  box-shadow: 0 16px 38px rgba(114, 73, 33, 0.14);
}

body[data-catalog-layout="moderno"] .category-pill {
  border-radius: 999px;
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  background: rgba(255, 255, 255, 0.9);
}

body[data-catalog-layout="moderno"] .category-pill.active {
  background: rgba(var(--primary-rgb), 0.16);
  border-color: rgba(var(--primary-rgb), 0.4);
}

body[data-catalog-layout="moderno"] .product-card {
  border-radius: 24px;
  border: 1px solid rgba(192, 145, 102, 0.25);
  background: linear-gradient(180deg, #fff8f3 0%, #fff2e7 100%);
  box-shadow: 0 16px 30px rgba(114, 73, 33, 0.11);
}

body[data-catalog-layout="moderno"] .product-card .product-image-wrapper {
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}

body[data-catalog-layout="moderno"] .product-card .card-title {
  font-weight: 700;
}

body[data-catalog-layout="moderno"] .product-card .price,
body[data-catalog-layout="moderno"] .price-old {
  color: var(--primary);
}

body[data-catalog-layout="moderno"] .btn-pro,
body[data-catalog-layout="moderno"] .btn-primary {
  border-radius: 14px;
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.22);
}

body[data-catalog-layout="moderno"] .checkout-slide,
body[data-catalog-layout="moderno"] .modal-content {
  border-radius: 20px;
}

@media (max-width: 768px) {
  body[data-catalog-layout="moderno"] .hero-with-filters,
  body[data-catalog-layout="moderno"] #heroCarousel,
  body[data-catalog-layout="moderno"] #heroCarousel .carousel-inner {
    border-radius: 22px 22px 0 0 !important;
  }

  body[data-catalog-layout="moderno"] #heroCarousel .hero-banner {
    min-height: clamp(140px, 34vw, 180px);
  }
}

/* ===== Layout: Tradicional ===== */
body[data-catalog-layout="tradicional"] {
  background: #f3f5f8;
}

body[data-catalog-layout="tradicional"] .hero-with-filters {
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

body[data-catalog-layout="tradicional"] #heroCarousel,
body[data-catalog-layout="tradicional"] #heroCarousel .carousel-inner {
  border-radius: 12px 12px 0 0 !important;
}

body[data-catalog-layout="tradicional"] #stickyFilters .category-sticky {
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.09);
}

body[data-catalog-layout="tradicional"] .product-card {
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

body[data-catalog-layout="tradicional"] .product-card .product-image-wrapper {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* ===== Layout: Ferretería ===== */
body[data-catalog-layout="ferreteria"] {
  background:
    radial-gradient(900px 360px at 50% 0%, rgba(var(--primary-rgb), 0.09), transparent 70%),
    #eef2f5;
}

body[data-catalog-layout="ferreteria"] .container.py-4 {
  max-width: 1360px;
}

body[data-catalog-layout="ferreteria"] .hero-with-filters {
  border-radius: 16px;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14);
}

body[data-catalog-layout="ferreteria"] #heroCarousel,
body[data-catalog-layout="ferreteria"] #heroCarousel .carousel-inner {
  border-radius: 16px 16px 0 0 !important;
}

body[data-catalog-layout="ferreteria"] #heroCarousel .hero-banner {
  min-height: clamp(170px, 18vw, 230px);
}

body[data-catalog-layout="ferreteria"] #stickyFilters .category-sticky {
  background: rgba(251, 252, 253, 0.96);
  border-bottom: 1px solid rgba(30, 41, 59, 0.14);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.1);
}

body[data-catalog-layout="ferreteria"] .category-pill {
  border-radius: 10px;
  font-weight: 700;
}

body[data-catalog-layout="ferreteria"] #productsGrid > [class*="col-"] {
  width: 20%;
  flex: 0 0 auto;
}

body[data-catalog-layout="ferreteria"] .product-card {
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  border: 1px solid rgba(30, 41, 59, 0.16);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.11);
}

body[data-catalog-layout="ferreteria"] .product-card .product-image-wrapper {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

body[data-catalog-layout="ferreteria"] .product-card .card-title {
  font-size: 1.06rem;
  font-weight: 700;
}

body[data-catalog-layout="ferreteria"] .product-summary {
  font-size: 0.85rem;
}

@media (max-width: 1200px) {
  body[data-catalog-layout="ferreteria"] #productsGrid > [class*="col-"] {
    width: 25%;
  }
}

@media (max-width: 992px) {
  body[data-catalog-layout="ferreteria"] #productsGrid > [class*="col-"] {
    width: 33.3333%;
  }
}

@media (max-width: 768px) {
  body[data-catalog-layout="ferreteria"] #productsGrid > [class*="col-"] {
    width: 50%;
  }
}

@media (max-width: 576px) {
  body[data-catalog-layout="ferreteria"] #productsGrid > [class*="col-"] {
    width: 100%;
  }
}