/* ============================================
   FLUID RESPONSIVE DESIGN SYSTEM
   Auto-scales all elements based on screen size
   Uses clamp() for smooth fluid scaling
   ============================================ */

/* ============================================
   1. CSS CUSTOM PROPERTIES (Variables)
   ============================================ */
:root {
    /* Fluid Typography Scale */
    --fluid-xs: clamp(0.625rem, 0.5rem + 0.5vw, 0.75rem);
    /* 10-12px */
    --fluid-sm: clamp(0.75rem, 0.65rem + 0.5vw, 0.875rem);
    /* 12-14px */
    --fluid-base: clamp(0.875rem, 0.75rem + 0.5vw, 1rem);
    /* 14-16px */
    --fluid-md: clamp(1rem, 0.85rem + 0.75vw, 1.25rem);
    /* 16-20px */
    --fluid-lg: clamp(1.125rem, 0.95rem + 0.9vw, 1.5rem);
    /* 18-24px */
    --fluid-xl: clamp(1.25rem, 1rem + 1.25vw, 1.875rem);
    /* 20-30px */
    --fluid-2xl: clamp(1.5rem, 1.15rem + 1.75vw, 2.5rem);
    /* 24-40px */
    --fluid-3xl: clamp(1.875rem, 1.4rem + 2.35vw, 3rem);
    /* 30-48px */
    --fluid-4xl: clamp(2.25rem, 1.6rem + 3.25vw, 4rem);
    /* 36-64px */

    /* Fluid Spacing Scale */
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    /* 4-8px */
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    /* 8-12px */
    --space-md: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
    /* 12-16px */
    --space-lg: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    /* 16-24px */
    --space-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    /* 24-40px */
    --space-2xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
    /* 32-64px */
    --space-3xl: clamp(3rem, 2rem + 5vw, 6rem);
    /* 48-96px */

    /* Fluid Container Widths */
    --container-padding: clamp(12px, 3vw, 40px);

    /* Fluid Border Radius */
    --radius-sm: clamp(4px, 0.5vw, 8px);
    --radius-md: clamp(8px, 1vw, 16px);
    --radius-lg: clamp(12px, 1.5vw, 24px);
    --radius-xl: clamp(16px, 2vw, 32px);

    /* Fluid Icon Sizes */
    --icon-sm: clamp(16px, 1rem + 0.5vw, 20px);
    --icon-md: clamp(20px, 1.25rem + 0.5vw, 28px);
    --icon-lg: clamp(24px, 1.5rem + 1vw, 40px);
    --icon-xl: clamp(32px, 2rem + 1.5vw, 56px);
}

/* ============================================
   2. BASE TYPOGRAPHY (Fluid)
   ============================================ */

html {
    font-size: 100%;
    /* 16px base */
    scroll-behavior: smooth;
}

body {
    font-size: var(--fluid-base);
    line-height: 1.6;
}

/* Headings - Fluid sizing */
h1,
.h1 {
    font-size: var(--fluid-3xl);
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

h2,
.h2 {
    font-size: var(--fluid-2xl);
    line-height: 1.25;
    margin-bottom: var(--space-md);
}

h3,
.h3 {
    font-size: var(--fluid-xl);
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}

h4,
.h4 {
    font-size: var(--fluid-lg);
    line-height: 1.35;
    margin-bottom: var(--space-sm);
}

h5,
.h5 {
    font-size: var(--fluid-md);
    line-height: 1.4;
    margin-bottom: var(--space-xs);
}

h6,
.h6 {
    font-size: var(--fluid-base);
    line-height: 1.45;
    margin-bottom: var(--space-xs);
}

p {
    font-size: var(--fluid-base);
    line-height: 1.65;
    margin-bottom: var(--space-md);
}

small,
.small-text {
    font-size: var(--fluid-sm);
}

.tiny-text {
    font-size: var(--fluid-xs);
}

/* ============================================
   3. CONTAINER & LAYOUT (Fluid)
   ============================================ */

.container {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Sections - Fluid vertical spacing */
section {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

/* Grid gaps - Fluid */
.product-grid,
.products-row {
    gap: var(--space-md);
}

/* ============================================
   4. BUTTONS - Fluid Sizing
   ============================================ */

button,
.btn,
.btn-primary,
.btn-secondary,
.add-to-cart-btn,
.buy-now-btn {
    font-size: var(--fluid-sm);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    min-height: clamp(40px, 5vw, 48px);
}

/* Large buttons */
.btn-lg {
    font-size: var(--fluid-base);
    padding: var(--space-md) var(--space-xl);
    min-height: clamp(48px, 6vw, 56px);
}

/* Small buttons */
.btn-sm {
    font-size: var(--fluid-xs);
    padding: var(--space-xs) var(--space-md);
    min-height: clamp(32px, 4vw, 40px);
}

/* ============================================
   5. CARDS - Fluid Styling
   ============================================ */

.product-card {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.product-info {
    padding: var(--space-md);
}

.product-title {
    font-size: var(--fluid-sm);
    line-height: 1.4;
    margin-bottom: var(--space-xs);
}

.product-price {
    font-size: var(--fluid-md);
}

.product-price-old {
    font-size: var(--fluid-sm);
}

.product-usp {
    font-size: var(--fluid-xs);
}

.product-rating {
    font-size: var(--fluid-xs);
    gap: var(--space-xs);
}

/* Review/Story Cards */
.review-card,
.story-card {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
}

/* ============================================
   6. FORMS - Fluid Sizing
   ============================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    font-size: var(--fluid-base);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    min-height: clamp(44px, 5vw, 52px);
}

label {
    font-size: var(--fluid-sm);
    margin-bottom: var(--space-xs);
}

.form-group {
    margin-bottom: var(--space-lg);
}

/* ============================================
   7. NAVIGATION - Fluid
   ============================================ */

.nav-link {
    font-size: var(--fluid-sm);
    padding: var(--space-sm) var(--space-md);
}

/* Header Logo - Fluid */
.brand-logo img,
.logo-img {
    height: clamp(32px, 3vw + 12px, 55px);
    /* Option 2: Balanced - Updated max to 55px */
    width: auto;
}

/* Header Actions - Fluid icons */
.header-actions a svg,
.action-link svg {
    width: var(--icon-md);
    height: var(--icon-md);
}

/* ============================================
   8. SECTION HEADINGS - Fluid
   ============================================ */

.section-title,
.section-heading {
    font-size: var(--fluid-2xl);
    margin-bottom: var(--space-lg);
}

.section-subtitle,
.section-desc {
    font-size: var(--fluid-base);
    margin-bottom: var(--space-xl);
}

/* ============================================
   9. FOOTER - Fluid
   ============================================ */

.footer-title {
    font-size: var(--fluid-md);
    margin-bottom: var(--space-md);
}

.footer-links a {
    font-size: var(--fluid-sm);
    padding: var(--space-xs) 0;
}

.footer-bottom {
    font-size: var(--fluid-sm);
    padding: var(--space-lg) 0;
}

/* ============================================
   10. BADGES & TAGS - Fluid
   ============================================ */

.badge,
.tag,
.label {
    font-size: var(--fluid-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

.discount-badge {
    font-size: var(--fluid-xs);
    padding: var(--space-xs) var(--space-sm);
}

/* ============================================
   11. CONCERN PILLS - Fluid
   ============================================ */

.concern-pill,
.concern-item {
    font-size: var(--fluid-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-lg);
}

.concern-flex-wrapper {
    gap: var(--space-sm);
}

/* ============================================
   12. ICONS - Fluid
   ============================================ */

svg,
.icon {
    width: var(--icon-md);
    height: var(--icon-md);
}

.icon-sm {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.icon-lg {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

/* ============================================
   13. IMAGES - Always Responsive
   ============================================ */

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

/* Product images maintain aspect ratio */
.product-image,
.product-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ============================================
   14. HERO/BANNER SECTIONS - Fluid
   ============================================ */

.hero-content h1,
.banner-title {
    font-size: var(--fluid-4xl);
}

.hero-content p,
.banner-subtitle {
    font-size: var(--fluid-lg);
}

.hero-cta,
.banner-btn {
    font-size: var(--fluid-md);
    padding: var(--space-md) var(--space-xl);
}

/* ============================================
   15. MODALS & POPUPS - Fluid
   ============================================ */

.modal-title {
    font-size: var(--fluid-xl);
}

.modal-content {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
}

/* ============================================
   16. ALERTS & MESSAGES - Fluid
   ============================================ */

.alert,
.message,
.notification {
    font-size: var(--fluid-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
}

/* ============================================
   17. TABLES - Fluid
   ============================================ */

table {
    font-size: var(--fluid-sm);
}

th,
td {
    padding: var(--space-sm) var(--space-md);
}

/* ============================================
   18. LISTS - Fluid
   ============================================ */

ul,
ol {
    padding-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

li {
    margin-bottom: var(--space-xs);
    font-size: var(--fluid-base);
}

/* ============================================
   19. UTILITY SPACING CLASSES
   ============================================ */

/* Margins */
.mt-fluid-sm {
    margin-top: var(--space-sm);
}

.mt-fluid-md {
    margin-top: var(--space-md);
}

.mt-fluid-lg {
    margin-top: var(--space-lg);
}

.mt-fluid-xl {
    margin-top: var(--space-xl);
}

.mb-fluid-sm {
    margin-bottom: var(--space-sm);
}

.mb-fluid-md {
    margin-bottom: var(--space-md);
}

.mb-fluid-lg {
    margin-bottom: var(--space-lg);
}

.mb-fluid-xl {
    margin-bottom: var(--space-xl);
}

/* Paddings */
.p-fluid-sm {
    padding: var(--space-sm);
}

.p-fluid-md {
    padding: var(--space-md);
}

.p-fluid-lg {
    padding: var(--space-lg);
}

.p-fluid-xl {
    padding: var(--space-xl);
}

/* Gap */
.gap-fluid-sm {
    gap: var(--space-sm);
}

.gap-fluid-md {
    gap: var(--space-md);
}

.gap-fluid-lg {
    gap: var(--space-lg);
}

.gap-fluid-xl {
    gap: var(--space-xl);
}

/* ============================================
   20. MOBILE SPECIFIC ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {

    /* Slightly reduce base sizing on mobile */
    :root {
        --fluid-xs: clamp(0.6rem, 0.55rem + 0.25vw, 0.7rem);
        --fluid-sm: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
        --fluid-base: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
    }

    /* Tighter spacing on mobile */
    section {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    /* Product card compact on mobile */
    .product-info {
        padding: var(--space-sm);
    }

    .product-title {
        font-size: var(--fluid-sm);
        line-height: 1.3;
    }
}

@media (max-width: 480px) {

    /* Extra compact for small phones */
    :root {
        --container-padding: 10px;
    }

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ============================================
   21. LARGE SCREENS - Scale up gracefully
   ============================================ */

@media (min-width: 1400px) {
    :root {
        --container-padding: 40px;
    }

    .container {
        max-width: 1320px;
    }
}

@media (min-width: 1920px) {

    /* Slightly more relaxed scaling for 4K, but not huge */
    :root {
        --fluid-base: clamp(1rem, 0.95rem + 0.1vw, 1.05rem);
        --fluid-md: clamp(1.15rem, 1.1rem + 0.2vw, 1.3rem);
        --fluid-lg: clamp(1.4rem, 1.35rem + 0.2vw, 1.6rem);
    }
}