:root {
    --type-h1: clamp(1.75rem, 3vw, 2.5rem);
    --type-h2: clamp(1.4rem, 2.2vw, 1.9rem);
    --type-h3: clamp(1.125rem, 1.6vw, 1.35rem);
}

body { line-height: 1.55; }

h1,
.hero-title,
.shop-title,
.section-title {
    font-size: clamp(1.65rem, 2.7vw, 2.4rem) !important;
    line-height: 1.2 !important;
}

.hero-title { max-width: 16ch; margin-inline: auto; }
.hero { padding: clamp(2.5rem, 5vw, 4rem) 1.25rem !important; }
.hero-subtitle { font-size: 1rem !important; }

.section { padding-block: clamp(2.5rem, 5vw, 4rem) !important; }
.section-title { margin-bottom: 0.65rem; }
.section-subtitle { margin-bottom: 1.5rem !important; }

.shop-grid,
.products-grid {
    gap: clamp(0.75rem, 1.5vw, 1.25rem) !important;
    margin-bottom: 2rem !important;
}

.shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.product-image-container { height: clamp(150px, 19vw, 230px) !important; max-height: 230px !important; aspect-ratio: auto !important; }
.product-img { height: clamp(150px, 19vw, 230px) !important; max-height: 230px !important; aspect-ratio: auto !important; }
.product-content { padding: 0.8rem !important; }
.product-title { font-size: 0.92rem !important; line-height: 1.35 !important; }
.price-new { font-size: 1.1rem !important; }
.btn-order-whatsapp { min-height: 38px; padding: 0.55rem 0.6rem !important; }

.category-card,
.category-card-large { border-radius: 12px; }
.categories-grid { gap: 0.9rem !important; }
.category-card-large { height: clamp(170px, 20vw, 250px) !important; }

.feature-card,
.about-card,
.testimonial-card { padding: clamp(1rem, 2vw, 1.5rem) !important; }

@media (min-width: 640px) {
    .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
    .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 480px) {
    .shop-grid,
    .products-grid { gap: 0.65rem !important; }
    .product-image-container,
    .product-img { height: 145px !important; }
    .product-content { padding: 0.65rem !important; }
    .product-title { font-size: 0.85rem !important; }
    .price-new { font-size: 1rem !important; }
}