/**
 * SwimShark Store — fluid type scale
 * Modular scale (≈12 / 14 / 16 / 18 / 24 / 32) with clamp() for all viewports.
 * Loads before page/component CSS; home.css must not override font-size.
 */

:root {
    /* Type scale — rem relative to browser root (typically 16px) */
    --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12–13: badges, meta */
    --fs-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);    /* 13–14: secondary UI */
    --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);      /* 16–17: body (min 16px) */
    --fs-md: clamp(1.0625rem, 1rem + 0.35vw, 1.125rem);      /* 17–18 */
    --fs-lg: clamp(1.125rem, 1.05rem + 0.45vw, 1.25rem);     /* 18–20 */
    --fs-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);         /* 20–24 */
    --fs-2xl: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);       /* 22–28: section titles */
    --fs-3xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);           /* 24–32: page H1 */
    --fs-hero: clamp(1.625rem, 1.15rem + 2.2vw, 2.5rem);     /* hero / banner */
    --fs-price: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);  /* PDP price */
    --fs-price-card: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); /* card price — above title */

    --lh-tight: 1.25;
    --lh-snug: 1.35;
    --lh-body: 1.6;
    --lh-relaxed: 1.7;
}

/* Base: readable body on every device */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}

body,
button,
input,
select,
optgroup,
textarea {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}

p {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}

/* Heading hierarchy */
h1,
.h1 {
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
}

h2,
.h2 {
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
}

h3,
.h3 {
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
}

h4,
.h4 {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
}

h5,
.h5 {
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
}

h6,
.h6 {
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
}

/* Soften Bootstrap display-* when misused for product UI */
.product-title.display-1,
.product-title.display-2,
.product-title.display-3,
.product-title.display-4,
.product-title.display-5,
.product-title.display-6,
.current-price.display-1,
.current-price.display-2,
.current-price.display-3,
.current-price.display-4,
.current-price.display-5,
.current-price.display-6 {
    font-size: inherit;
    line-height: inherit;
}

/* Section titles (home + catalog) */
.section-title h2,
.shop-section-title h2,
.shop-home-list .shop-section-title h1,
.shop-home-list .shop-section-title h2,
.home-faq-title.shop-section-title h2 {
    font-size: var(--fs-2xl) !important;
    line-height: var(--lh-tight);
    text-transform: none !important;
}

.section-title p {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}

/* Home SEO headings — clear hierarchy, not tiny */
.home-seo-headings h1 {
    font-size: var(--fs-2xl) !important;
    line-height: var(--lh-snug) !important;
    font-weight: 600 !important;
}

.home-seo-headings h2 {
    font-size: var(--fs-xl) !important;
    line-height: var(--lh-snug) !important;
}

.home-seo-headings h3 {
    font-size: var(--fs-lg) !important;
    line-height: var(--lh-snug) !important;
}

.home-products-seo-content {
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
}

/* Hero / carousel */
.hero-slider .hero-text h1,
#Gslider .carousel-inner .carousel-caption h1 {
    font-size: var(--fs-hero) !important;
    line-height: var(--lh-tight) !important;
}

.hero-slider .hero-text h1 span,
#Gslider .carousel-inner .carousel-caption h2 {
    font-size: var(--fs-lg) !important;
    line-height: var(--lh-snug) !important;
}

#Gslider .carousel-inner .carousel-caption h3,
#Gslider .carousel-inner .carousel-caption p {
    font-size: var(--fs-md) !important;
    line-height: var(--lh-body) !important;
}

.hero-area4 .big-content .title,
.midium-banner .single-banner h3,
.small-banner .single-banner h3 {
    font-size: var(--fs-xl) !important;
    line-height: var(--lh-snug);
}

/* Product listing cards — keep compact inside carousels/grids */
.product-card .product-title,
.product-title-name .product-title,
.single-product .product-content h3 a,
.product-name-link {
    font-size: var(--fs-sm) !important;
    line-height: var(--lh-snug) !important;
    font-weight: 500 !important;
}

.product-card .product-title-name .product-title,
.owl-carousel .product-card .product-title,
.related-product .product-card .product-title,
.related-products .product-card .product-title,
.category-products .product-card .product-title,
.most-popular .product-card .product-title,
.product-detail-page .product-card .product-title,
.shop-home-list .product-card .product-title,
.product-area .product-card .product-title,
.products-grid .product-card .product-title,
[data-context="home"] .product-title,
[data-context="home"].product-card .product-title {
    font-size: var(--fs-sm) !important; /* protect vs Bootstrap display-* */
    line-height: var(--lh-snug) !important;
    min-height: 2.4rem !important;
    max-height: 2.8rem !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
}

.product-card .current-price,
.product-price-grid .current-price,
.owl-carousel .product-card .current-price,
.related-product .product-card .current-price,
.related-products .product-card .current-price,
.category-products .product-card .current-price,
.product-detail-page .product-card .current-price,
.shop-home-list .product-card .current-price,
.product-area .product-card .current-price,
.products-grid .product-card .current-price,
[data-context="home"] .current-price,
[data-context="home"].product-card .current-price {
    font-size: var(--fs-price-card) !important;
    line-height: var(--lh-tight) !important;
    font-weight: 700 !important;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.product-price-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.5rem;
}

.product-card .old-price,
.product-price-grid .old-price,
.product-detail-page .product-card .old-price,
.shop-home-list .product-card .old-price,
.product-area .product-card .old-price,
[data-context="home"] .old-price {
    font-size: var(--fs-sm) !important;
    font-weight: 500;
    color: #8a8a8a;
}

.product-badge,
.badge-sale-bottom,
.rating-count,
.stock-status {
    font-size: var(--fs-xs) !important;
}

/* Category tiles on home — compact labels, not heading scale */
.main-categories .category-title,
.category-tile .category-title,
.category-item-mobile .category-title {
    font-size: var(--fs-sm) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

.category-title {
    font-size: var(--fs-sm) !important;
    line-height: var(--lh-snug);
}

/* Home FAQ */
.home-faq-btn,
.home-faq-btn-text,
.home-faq-answer {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}

.home-faq-btn,
.home-faq-btn-text {
    line-height: var(--lh-snug);
}

.home-faq-btn-icon {
    font-size: var(--fs-md);
}

/* Category filter chips on home */
#category-scroll-wrapper button,
.category-filter-btn {
    font-size: var(--fs-base);
}

/* Promo cards on home */
.promotions-section .promotion-title,
h4.promotion-title {
    font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem) !important;
    line-height: 1.3 !important;
}

.promotions-section .promotion-dates {
    font-size: var(--fs-xs) !important;
}

.promotions-section .default-banner h3 {
    font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem) !important;
}

/* Product detail H1 only — never cascade into carousel cards */
.product-header .product-title,
.product-header h1.product-title,
h1.product-title {
    font-size: var(--fs-3xl) !important;
    line-height: var(--lh-tight) !important;
}

/* Main PDP purchase price only */
.purchase-box .current-price,
.product-info > .purchase-box .current-price,
.price-section > .current-price {
    font-size: var(--fs-price) !important;
    line-height: var(--lh-tight) !important;
}

.purchase-box .price-section {
    font-size: var(--fs-md) !important;
}

/* Quick view modal */
.quickview-product-title,
.fast-look .quickview-product-title {
    font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem) !important;
    line-height: 1.3 !important;
}

.quickview-price-value,
.full-price,
.fast-look .full-price {
    font-size: clamp(1.25rem, 1.1rem + 1vw, 1.75rem) !important;
    line-height: 1.2 !important;
}

.quickview-content h2 {
    font-size: var(--fs-xl) !important;
}

.quickview-content h3 {
    font-size: var(--fs-lg) !important;
}

/* Nav / chrome — floor tiny labels */
.breadcrumbs ul li a {
    font-size: var(--fs-sm) !important;
}

.header.shop .topbar,
.header .top-left,
.header .right-content {
    font-size: var(--fs-sm);
}

.header.shop .nav li a,
.header .main-menu > li > a {
    font-size: var(--fs-sm);
}

/* Buttons */
.btn,
.btn-sm,
.btn-lg {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.btn-lg {
    font-size: var(--fs-base);
}

.btn-sm {
    font-size: var(--fs-xs);
}

/* Floor legacy micro text (8–11px) without breaking icons */
.shopping-item,
.dropdown-cart-header,
.header .shopping-list h4 a,
.header .shopping-item .total span,
.header .shopping-item .total .total-amount {
    font-size: var(--fs-sm) !important;
}

/* Error pages still dramatic but fluid */
.error-page .error-inner h2 {
    font-size: clamp(2.5rem, 8vw, 5rem) !important;
    line-height: 1.1;
}

/* Prefer readable motion */
@media (prefers-reduced-motion: reduce) {
    body,
    button,
    input,
    select,
    textarea,
    h1, h2, h3, h4, h5, h6 {
        transition: none;
    }
}