/**
 * Block Styles - Theme-Driven CSS for Page Builder Blocks
 * 
 * This stylesheet provides standardized styling for all page builder blocks.
 * All values reference theme design tokens from :root CSS variables.
 * No inline styles should be used in block rendering.
 * 
 * @package Cartify
 * @subpackage PageBuilder
 */

/* ==========================================================================
   CSS VARIABLES (Mapped to theme tokens with fallbacks)
   ========================================================================== */

:root {
    /* Map block variables to theme tokens (fallbacks if tokens not loaded) */
    --block-primary: var(--color-primary, #4f46e5);
    --block-primary-hover: var(--color-primary-hover, #4338ca);
    --block-secondary: var(--color-secondary, #10b981);
    --block-success: var(--color-success, #22c55e);
    --block-warning: var(--color-warning, #f59e0b);
    --block-danger: var(--color-error, #ef4444);
    --block-dark: var(--color-text, #1e293b);
    --block-light: var(--color-background-alt, #f8fafc);
    --block-border: var(--color-border, #e2e8f0);
    --block-muted: var(--color-muted, #64748b);
    --block-background: var(--color-background, #ffffff);

    /* Typography - mapped to theme fonts */
    --block-font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --block-font-secondary: var(--font-secondary, Georgia, serif);
    --block-font-size-base: 1rem;
    --block-font-size-sm: 0.875rem;
    --block-font-size-lg: 1.25rem;
    --block-font-size-xl: 1.5rem;
    --block-font-size-2xl: 2rem;
    --block-font-size-3xl: 3rem;
    --block-line-height: 1.6;

    /* Spacing - mapped to theme tokens */
    --block-spacing-xs: var(--spacing-xs, 4px);
    --block-spacing-sm: var(--spacing-sm, 8px);
    --block-spacing-md: var(--spacing-md, 16px);
    --block-spacing-lg: var(--spacing-lg, 24px);
    --block-spacing-xl: var(--spacing-xl, 48px);
    --block-spacing-2xl: var(--spacing-2xl, 64px);
    --block-spacing-3xl: 80px;

    /* Borders - mapped to theme tokens */
    --block-radius-sm: var(--radius-sm, 4px);
    --block-radius-md: var(--radius-md, 8px);
    --block-radius-lg: var(--radius-lg, 16px);
    --block-radius-full: var(--radius-full, 9999px);

    /* Shadows - mapped to theme tokens */
    --block-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    --block-shadow-md: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
    --block-shadow-lg: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));

    /* Containers */
    --block-container-xl: var(--container-xl, 1280px);
}

/* ==========================================================================
   BLOCK BASE
   ========================================================================== */

.block {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.block * {
    box-sizing: border-box;
}

/* ==========================================================================
   LAYOUT BLOCKS
   ========================================================================== */

/* Section Block */
.block-section {
    width: 100%;
    background-color: var(--section-bg, transparent);
    padding-top: var(--section-pt, var(--block-spacing-xl));
    padding-bottom: var(--section-pb, var(--block-spacing-xl));
}

.block-section__content {
    width: 100%;
    max-width: var(--block-container-xl, 1280px);
    margin: 0 auto;
    padding: 0 var(--block-spacing-lg);
}

/* Legacy section support */
.block-core-section {
    padding: var(--block-spacing-2xl) 0;
}

.section-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--block-spacing-lg);
}

/* Spacer Block */
.block-spacer {
    display: block;
    width: 100%;
}

.block-spacer--xs {
    height: var(--block-spacing-xs);
}

.block-spacer--sm {
    height: var(--block-spacing-sm);
}

.block-spacer--md {
    height: var(--block-spacing-md);
}

.block-spacer--lg {
    height: var(--block-spacing-lg);
}

.block-spacer--xl {
    height: var(--block-spacing-xl);
}

.block-spacer--2xl {
    height: var(--block-spacing-2xl);
}

.block-spacer--custom {
    height: var(--spacer-height, var(--block-spacing-md));
}

/* Hero Block */
.block-core-hero {
    padding: var(--block-spacing-3xl) var(--block-spacing-lg);
    text-align: center;
    border-radius: var(--block-radius-lg);
    margin: var(--block-spacing-xl) 0;
    color: white;
}

.block-hero--gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.block-hero--dark {
    background: var(--block-dark);
}

.block-hero--light {
    background: var(--block-light);
    color: var(--block-dark);
}

.block-hero--image {
    background-size: cover;
    background-position: center;
    position: relative;
}

.block-hero__title {
    font-size: var(--block-font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--block-spacing-md);
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.block-hero__subtitle {
    font-size: var(--block-font-size-lg);
    margin-bottom: var(--block-spacing-xl);
    opacity: 0.9;
}

.block-hero__button {
    display: inline-block;
    padding: var(--block-spacing-md) var(--block-spacing-xl);
    font-size: var(--block-font-size-base);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--block-radius-md);
    transition: all 0.2s ease;
}

/* Feature Grid Block */
.block-core-feature_grid {
    padding: var(--block-spacing-xl) 0;
}

.block-feature-grid {
    display: grid;
    gap: var(--block-spacing-xl);
}

.feature-item {
    text-align: center;
    padding: var(--block-spacing-lg);
}

.feature-item__icon {
    font-size: 2.5rem;
    margin-bottom: var(--block-spacing-md);
}

.feature-item__title {
    font-size: var(--block-font-size-lg);
    font-weight: 600;
    margin-bottom: var(--block-spacing-sm);
    color: var(--block-dark);
}

.feature-item__description {
    color: var(--block-muted);
    line-height: var(--block-line-height);
}

/* ==========================================================================
   CONTENT BLOCKS
   ========================================================================== */

/* Heading Block */
.block-heading {
    font-family: var(--block-font-secondary);
    font-weight: 700;
    line-height: 1.3;
    color: var(--block-dark);
    margin: 0;
    margin-top: var(--block-mt, 0);
    margin-bottom: var(--block-mb, var(--block-spacing-md));
}

.block-heading--h1 {
    font-size: var(--block-font-size-3xl);
}

.block-heading--h2 {
    font-size: var(--block-font-size-2xl);
}

.block-heading--h3 {
    font-size: var(--block-font-size-xl);
}

.block-heading--h4 {
    font-size: var(--block-font-size-lg);
}

.block-heading--h5 {
    font-size: var(--block-font-size-base);
}

.block-heading--h6 {
    font-size: var(--block-font-size-sm);
}

/* Alignment utilities */
.block-align--left {
    text-align: left;
}

.block-align--center {
    text-align: center;
}

.block-align--right {
    text-align: right;
}

.block-align--justify {
    text-align: justify;
}

/* Legacy heading block support */
.block-core-heading h1,
.block-core-heading h2,
.block-core-heading h3,
.block-core-heading h4,
.block-core-heading h5,
.block-core-heading h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.3;
    color: var(--block-dark);
}

.block-core-heading h1 {
    font-size: var(--block-font-size-3xl);
}

.block-core-heading h2 {
    font-size: var(--block-font-size-2xl);
}

.block-core-heading h3 {
    font-size: var(--block-font-size-xl);
}

.block-core-heading h4 {
    font-size: var(--block-font-size-lg);
}

.block-core-heading h5 {
    font-size: var(--block-font-size-base);
}

.block-core-heading h6 {
    font-size: var(--block-font-size-sm);
}

/* Text Block */
.block-text {
    font-family: var(--block-font-family);
    line-height: var(--block-line-height);
    color: var(--block-muted);
    margin-top: var(--block-mt, 0);
    margin-bottom: var(--block-mb, var(--block-spacing-md));
}

.block-text--sm {
    font-size: var(--block-font-size-sm);
}

.block-text--md {
    font-size: var(--block-font-size-base);
}

.block-text--lg {
    font-size: 1.125rem;
}

.block-text--xl {
    font-size: var(--block-font-size-lg);
}

.block-text--2xl {
    font-size: var(--block-font-size-xl);
}

/* Legacy text block support */
.block-core-text {
    line-height: var(--block-line-height);
    color: var(--block-muted);
}

.text-content p {
    margin: 0 0 var(--block-spacing-md) 0;
}

.text-content p:last-child {
    margin-bottom: 0;
}

/* Image Block */
.block-image {
    margin-top: var(--block-mt, 0);
    margin-bottom: var(--block-mb, var(--block-spacing-md));
}

.block-image__img {
    max-width: 100%;
    height: auto;
    border-radius: var(--block-radius-md);
    display: block;
}

.block-flex-align--left {
    display: flex;
    justify-content: flex-start;
}

.block-flex-align--center {
    display: flex;
    justify-content: center;
}

.block-flex-align--right {
    display: flex;
    justify-content: flex-end;
}

/* Legacy image wrapper support */
.image-wrapper {
    line-height: 0;
}

.image-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: var(--block-radius-md);
}

/* Button Block */
.block-button-wrapper {
    margin-top: var(--block-mt, 0);
    margin-bottom: var(--block-mb, var(--block-spacing-md));
}

.block-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--block-spacing-sm) var(--block-spacing-lg);
    font-family: var(--block-font-family);
    font-size: var(--block-font-size-base);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--block-radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.block-button--primary {
    background-color: var(--block-btn-bg, var(--block-primary));
    color: var(--block-btn-color, white);
    border-color: var(--block-btn-border, var(--block-primary));
}

.block-button--primary:hover {
    background-color: var(--block-primary-hover);
    border-color: var(--block-primary-hover);
    opacity: 0.9;
}

.block-button--secondary {
    background-color: var(--block-btn-bg, transparent);
    color: var(--block-btn-color, var(--block-primary));
    border-color: var(--block-btn-border, var(--block-primary));
}

.block-button--secondary:hover {
    background-color: var(--block-primary);
    color: white;
}

/* Legacy button block support */
.block-core-button {
    margin: var(--block-spacing-md) 0;
}

.button-wrapper .btn {
    display: inline-block;
    padding: var(--block-spacing-sm) var(--block-spacing-lg);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--block-radius-md);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--block-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--block-primary-hover);
}

.btn-secondary {
    background: var(--block-secondary);
    color: white;
}

.btn-secondary:hover {
    background: #475569;
}

/* Testimonials Block */
.block-core-testimonials {
    padding: var(--block-spacing-2xl) 0;
}

.block-testimonials {
    display: grid;
    gap: var(--block-spacing-xl);
}

.testimonial-card {
    background: var(--block-light);
    padding: var(--block-spacing-xl);
    border-radius: var(--block-radius-md);
    border: 1px solid var(--block-border);
}

.testimonial-card__rating {
    color: var(--block-warning);
    margin-bottom: var(--block-spacing-sm);
}

.testimonial-card__content {
    font-style: italic;
    color: var(--block-dark);
    margin-bottom: var(--block-spacing-lg);
    font-size: var(--block-font-size-base);
    line-height: var(--block-line-height);
}

.testimonial-card__name {
    font-weight: 600;
    color: var(--block-dark);
}

.testimonial-card__role {
    font-size: var(--block-font-size-sm);
    color: var(--block-muted);
}

/* ==========================================================================
   COMMERCE BLOCKS
   ========================================================================== */

/* Empty State */
.commerce-empty {
    padding: var(--block-spacing-xl);
    background: var(--block-light);
    border: 2px dashed var(--block-border);
    border-radius: var(--block-radius-md);
    text-align: center;
    color: var(--block-muted);
}

.commerce-empty p {
    margin: 0;
}

/* Product Grid */
.commerce-product-grid {
    display: grid;
    gap: var(--block-spacing-lg);
}

.commerce-product-grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.commerce-product-grid.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.commerce-product-grid.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.commerce-product-grid.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.commerce-product-grid.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Product Card */
.commerce-product-card {
    background: var(--block-background, white);
    border-radius: var(--block-radius-md);
    overflow: hidden;
    box-shadow: var(--block-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.commerce-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--block-shadow-lg);
}

.product-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.product-card__image {
    position: relative;
    overflow: hidden;
}

.product-card__image img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.commerce-product-card:hover .product-card__image img {
    transform: scale(1.05);
}

.product-card__body {
    padding: var(--block-spacing-md);
}

.product-card__title {
    font-family: var(--block-font-family);
    font-size: var(--block-font-size-base);
    font-weight: 600;
    margin: 0 0 var(--block-spacing-sm) 0;
    color: var(--block-dark);
}

.product-card__price {
    font-weight: 700;
    color: var(--block-primary);
    font-size: var(--block-font-size-base);
}

/* Product Badges */
.product-badge {
    position: absolute;
    top: var(--block-spacing-sm);
    left: var(--block-spacing-sm);
    padding: var(--block-spacing-xs) var(--block-spacing-sm);
    border-radius: var(--block-radius-sm);
    font-size: var(--block-font-size-sm);
    font-weight: 600;
}

.product-badge--sale {
    background: var(--block-danger);
    color: white;
}

.product-badge--featured {
    background: var(--block-warning);
    color: white;
}

/* Stock Status */
.product-stock {
    display: block;
    font-size: var(--block-font-size-sm);
    margin-top: var(--block-spacing-xs);
}

.stock-in_stock {
    color: var(--block-success);
}

.stock-low_stock {
    color: var(--block-warning);
}

.stock-out_of_stock {
    color: var(--block-danger);
}

/* Add to Cart Button */
.product-add-btn {
    display: block;
    width: 100%;
    padding: var(--block-spacing-sm) var(--block-spacing-md);
    background: var(--block-primary);
    color: white;
    border: none;
    font-family: var(--block-font-family);
    font-size: var(--block-font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.product-add-btn:hover {
    background: var(--block-primary-hover);
}

.product-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Category Grid */
.commerce-category-grid {
    display: grid;
    gap: var(--block-spacing-lg);
}

.commerce-category-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--block-radius-md);
    overflow: hidden;
    box-shadow: var(--block-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.commerce-category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--block-shadow-lg);
}

.category-card__image {
    position: relative;
    overflow: hidden;
}

.category-card__image img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.commerce-category-card:hover .category-card__image img {
    transform: scale(1.05);
}

.category-card__body {
    padding: var(--block-spacing-md);
    background: var(--block-background, white);
}

.category-card__title {
    font-family: var(--block-font-secondary);
    font-size: var(--block-font-size-lg);
    font-weight: 600;
    margin: 0;
    color: var(--block-dark);
}

.category-card__count {
    display: block;
    font-size: var(--block-font-size-sm);
    color: var(--block-muted);
    margin-top: var(--block-spacing-xs);
}

.category-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    padding: var(--block-spacing-md);
    text-align: center;
}

.commerce-category-card:hover .category-card__overlay {
    opacity: 1;
}

.category-card__desc {
    font-size: var(--block-font-size-sm);
    margin: 0 0 var(--block-spacing-sm) 0;
}

.category-card__cta {
    font-weight: 600;
}

/* Featured Product */
.commerce-featured-product {
    display: grid;
    gap: var(--block-spacing-xl);
    background: var(--block-background, white);
    border-radius: var(--block-radius-lg);
    overflow: hidden;
    box-shadow: var(--block-shadow-md);
}

.featured-product--side-by-side {
    grid-template-columns: 1fr 1fr;
}

.featured-product--stacked {
    grid-template-columns: 1fr;
}

.featured-product__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-product__content {
    padding: var(--block-spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-product__title {
    font-family: var(--block-font-secondary);
    font-size: var(--block-font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--block-spacing-md) 0;
    color: var(--block-dark);
}

.featured-product__price {
    font-size: var(--block-font-size-xl);
    margin-bottom: var(--block-spacing-md);
}

.price-compare {
    text-decoration: line-through;
    color: var(--block-muted);
    margin-right: var(--block-spacing-sm);
}

.price-current {
    font-weight: 700;
    color: var(--block-primary);
}

.featured-product__stock {
    font-size: var(--block-font-size-sm);
    margin-bottom: var(--block-spacing-md);
}

.featured-product__description {
    color: var(--block-muted);
    line-height: var(--block-line-height);
    margin-bottom: var(--block-spacing-lg);
}

.featured-variations {
    margin-bottom: var(--block-spacing-lg);
}

.variation-group {
    margin-bottom: var(--block-spacing-sm);
}

.variation-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--block-spacing-xs);
    color: var(--block-dark);
}

.variation-select {
    width: 100%;
    padding: var(--block-spacing-sm);
    border: 1px solid var(--block-border);
    border-radius: var(--block-radius-sm);
    font-family: var(--block-font-family);
}

.quantity-selector {
    margin-bottom: var(--block-spacing-md);
}

.quantity-selector label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--block-spacing-xs);
}

.quantity-selector input {
    width: 80px;
    padding: var(--block-spacing-sm);
    border: 1px solid var(--block-border);
    border-radius: var(--block-radius-sm);
    text-align: center;
}

.featured-product__add-btn {
    margin-bottom: var(--block-spacing-md);
}

.featured-product__details-link {
    color: var(--block-primary);
    text-decoration: none;
    font-weight: 500;
}

.featured-product__details-link:hover {
    text-decoration: underline;
}

/* Add to Cart Form */
.commerce-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-spacing-md);
    align-items: flex-end;
}

.add-to-cart__variations {
    width: 100%;
}

.add-to-cart__quantity {
    display: flex;
    align-items: center;
    gap: var(--block-spacing-sm);
}

.quantity-input {
    display: flex;
    align-items: stretch;
}

.qty-btn {
    width: 36px;
    background: var(--block-light);
    border: 1px solid var(--block-border);
    cursor: pointer;
    font-size: 1.2rem;
}

.qty-input {
    width: 50px;
    text-align: center;
    border: 1px solid var(--block-border);
    border-left: none;
    border-right: none;
}

.add-to-cart__button {
    flex: 1;
}

/* Price Display */
.commerce-price-display {
    display: inline-flex;
    align-items: baseline;
    gap: var(--block-spacing-sm);
    flex-wrap: wrap;
}

.price-gst-label {
    font-size: var(--block-font-size-sm);
    color: var(--block-muted);
}

/* Countdown Timer */
.block-countdown {
    text-align: center;
    padding: var(--block-spacing-xl);
    background: var(--countdown-bg, var(--block-primary));
    border-radius: var(--block-radius-lg);
    color: white;
}

.block-countdown--empty {
    background: var(--block-light);
    color: var(--block-muted);
}

.block-countdown__expired {
    display: none;
    font-size: var(--block-font-size-lg);
}

.block-countdown__title {
    margin: 0 0 var(--block-spacing-md) 0;
    font-size: var(--block-font-size-lg);
    font-weight: 600;
}

.block-countdown__timer {
    display: flex;
    justify-content: center;
    gap: var(--block-spacing-lg);
}

.block-countdown__unit {
    text-align: center;
}

.block-countdown__value {
    font-size: var(--block-font-size-3xl);
    font-weight: 700;
    display: block;
}

.block-countdown__label {
    font-size: var(--block-font-size-sm);
    opacity: 0.8;
}

/* Trust Badges */
.block-trust-badges {
    display: grid;
    gap: var(--block-spacing-lg);
    text-align: center;
}

.block-trust-badges__item {
    padding: var(--block-spacing-lg);
}

.block-trust-badges__icon {
    font-size: 2.5rem;
    margin-bottom: var(--block-spacing-sm);
}

.block-trust-badges__title {
    font-size: var(--block-font-size-base);
    font-weight: 600;
    margin: 0 0 var(--block-spacing-xs) 0;
    color: var(--block-dark);
}

.block-trust-badges__subtitle {
    font-size: var(--block-font-size-sm);
    color: var(--block-muted);
    margin: 0;
}

/* Responsive Commerce */
@media (max-width: 768px) {

    .commerce-product-grid.grid-cols-3,
    .commerce-product-grid.grid-cols-4,
    .commerce-product-grid.grid-cols-5,
    .commerce-product-grid.grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .commerce-category-grid.grid-cols-3,
    .commerce-category-grid.grid-cols-4,
    .commerce-category-grid.grid-cols-5,
    .commerce-category-grid.grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-product--side-by-side {
        grid-template-columns: 1fr;
    }

    .block-countdown__timer {
        gap: var(--block-spacing-md);
    }

    .block-countdown__value {
        font-size: var(--block-font-size-2xl);
    }

    .block-trust-badges {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {

    .commerce-product-grid.grid-cols-2,
    .commerce-product-grid.grid-cols-3,
    .commerce-product-grid.grid-cols-4,
    .commerce-product-grid.grid-cols-5,
    .commerce-product-grid.grid-cols-6 {
        grid-template-columns: 1fr;
    }

    .commerce-category-grid.grid-cols-2,
    .commerce-category-grid.grid-cols-3,
    .commerce-category-grid.grid-cols-4 {
        grid-template-columns: 1fr;
    }

    .block-trust-badges {
        grid-template-columns: 1fr;
    }
}

/* Legacy product card support */
.block-core-product_grid {
    padding: var(--block-spacing-xl) 0;
}

.block-product-grid {
    display: grid;
    gap: var(--block-spacing-lg);
}

.product-card {
    background: white;
    border-radius: var(--block-radius-md);
    overflow: hidden;
    box-shadow: var(--block-shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--block-shadow-lg);
}

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

.product-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.product-card__details {
    padding: var(--block-spacing-md);
}

/* ==========================================================================
   BLOG BLOCKS
   ========================================================================== */

/* Blog Post Grid */
.block-post-grid {
    display: grid;
    gap: var(--block-spacing-lg);
}

.block-post-grid__item {
    background: var(--block-background, white);
    border-radius: var(--block-radius-md);
    overflow: hidden;
    box-shadow: var(--block-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.block-post-grid__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--block-shadow-lg);
}

.block-post-grid__image-link {
    display: block;
    overflow: hidden;
    height: 200px;
}

.block-post-grid__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.block-post-grid__item:hover .block-post-grid__image {
    transform: scale(1.05);
}

.block-post-grid__placeholder {
    width: 100%;
    height: 100%;
    background: var(--block-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--block-muted);
}

.block-post-grid__content {
    padding: var(--block-spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.block-post-grid__cat {
    font-size: var(--block-font-size-xs);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--block-primary);
    text-decoration: none;
    margin-bottom: var(--block-spacing-sm);
    display: inline-block;
}

.block-post-grid__title {
    font-family: var(--block-font-secondary);
    font-size: var(--block-font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--block-spacing-sm) 0;
    line-height: 1.3;
}

.block-post-grid__title a {
    color: var(--block-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.block-post-grid__title a:hover {
    color: var(--block-primary);
}

.block-post-grid__excerpt {
    font-size: var(--block-font-size-sm);
    color: var(--block-muted);
    margin: 0 0 var(--block-spacing-md) 0;
    line-height: 1.5;
    flex: 1;
}

.block-post-grid__date {
    font-size: var(--block-font-size-xs);
    color: var(--block-muted);
    margin-top: auto;
}

/* Author Box */
.block-author-box {
    display: flex;
    gap: var(--block-spacing-lg);
    align-items: center;
}

.block-author-box--card {
    background: var(--block-background, white);
    padding: var(--block-spacing-xl);
    border-radius: var(--block-radius-lg);
    box-shadow: var(--block-shadow-sm);
}

.block-author-box--boxed {
    background: var(--block-light);
    padding: var(--block-spacing-lg);
    border-radius: var(--block-radius-md);
}

.block-author-box--minimal {
    padding: var(--block-spacing-md) 0;
}

.block-author-box__avatar {
    flex-shrink: 0;
}

.block-author-box__img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.block-author-box__placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--block-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--block-muted);
}

.block-author-box__info {
    flex: 1;
}

.block-author-box__name {
    font-size: var(--block-font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--block-spacing-xs) 0;
    color: var(--block-dark);
}

.block-author-box__bio {
    font-size: var(--block-font-size-base);
    color: var(--block-muted);
    margin: 0;
    line-height: 1.5;
}

/* Share Buttons */
.block-share-buttons {
    margin: var(--block-spacing-lg) 0;
}

.block-share-buttons__title {
    font-size: var(--block-font-size-sm);
    color: var(--block-muted);
    margin: 0 0 var(--block-spacing-sm) 0;
    font-weight: 600;
}

.block-share-buttons__list {
    display: flex;
    gap: var(--block-spacing-sm);
    flex-wrap: wrap;
}

.block-share-buttons__link {
    display: inline-flex;
    align-items: center;
    gap: var(--block-spacing-xs);
    padding: var(--block-spacing-xs) var(--block-spacing-md);
    border-radius: var(--block-radius-sm);
    text-decoration: none;
    font-size: var(--block-font-size-base);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.block-share-buttons__link:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.block-share-buttons--colored .share-fb {
    background: #1877f2;
    color: white;
}

.block-share-buttons--colored .share-tw {
    background: #1da1f2;
    color: white;
}

.block-share-buttons--colored .share-in {
    background: #0077b5;
    color: white;
}

.block-share-buttons--colored .share-wa {
    background: #25d366;
    color: white;
}

.block-share-buttons--colored .share-em {
    background: #64748b;
    color: white;
}

.block-share-buttons--dark .block-share-buttons__link {
    background: var(--block-dark);
    color: white;
}

.block-share-buttons--outline .block-share-buttons__link {
    background: transparent;
    border-width: 2px;
    border-style: solid;
}

.block-share-buttons--outline .share-fb {
    color: #1877f2;
    border-color: #1877f2;
}

.block-share-buttons--outline .share-tw {
    color: #1da1f2;
    border-color: #1da1f2;
}

.block-share-buttons--outline .share-in {
    color: #0077b5;
    border-color: #0077b5;
}

.block-share-buttons--outline .share-wa {
    color: #25d366;
    border-color: #25d366;
}

.block-share-buttons--outline .share-em {
    color: #64748b;
    border-color: #64748b;
}

.block-share-buttons__label {
    font-size: var(--block-font-size-sm);
    font-weight: 500;
}

/* Related Posts */
.block-related-posts {
    margin: var(--block-spacing-2xl) 0;
}

.block-related-posts__title {
    font-size: var(--block-font-size-xl);
    font-weight: 700;
    margin-bottom: var(--block-spacing-lg);
    color: var(--block-dark);
}

.block-related-posts__grid {
    display: grid;
    gap: var(--block-spacing-lg);
}

.block-related-posts__item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.block-related-posts__img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--block-radius-md);
    margin-bottom: var(--block-spacing-sm);
    transition: opacity 0.2s ease;
}

.block-related-posts__item:hover .block-related-posts__img {
    opacity: 0.9;
}

.block-related-posts__post-title {
    font-size: var(--block-font-size-base);
    font-weight: 600;
    margin: 0;
    color: var(--block-dark);
    line-height: 1.4;
}

.block-related-posts__item:hover .block-related-posts__post-title {
    color: var(--block-primary);
}

/* Responsive Blog */
@media (max-width: 768px) {
    .block-post-grid {
        grid-template-columns: 1fr !important;
    }

    .block-author-box {
        flex-direction: column;
        text-align: center;
    }

    .block-related-posts__grid {
        grid-template-columns: 1fr !important;
    }
}

.block-newsletter__title {
    font-size: var(--block-font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--block-spacing-sm);
}

.block-newsletter__description {
    opacity: 0.8;
    margin-bottom: var(--block-spacing-xl);
}

.block-newsletter__form {
    display: flex;
    justify-content: center;
    gap: var(--block-spacing-sm);
    flex-wrap: wrap;
}

.block-newsletter__input {
    padding: var(--block-spacing-md);
    border-radius: var(--block-radius-md);
    border: none;
    width: 300px;
    max-width: 100%;
    font-size: var(--block-font-size-base);
}

.block-newsletter__input:focus {
    outline: 2px solid var(--block-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   DECORATIVE BLOCKS
   ========================================================================== */

/* Feature Grid */
.block-feature-grid {
    display: grid;
    gap: var(--block-spacing-lg);
}

.feature-item {
    background: var(--block-background, white);
    padding: var(--block-spacing-lg);
    border-radius: var(--block-radius-md);
    border: 1px solid var(--block-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--block-shadow-md);
}

.feature-item--vertical {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-item--horizontal {
    display: flex;
    align-items: flex-start;
    gap: var(--block-spacing-md);
    text-align: left;
}

.feature-item__icon {
    font-size: 2.5rem;
    margin-bottom: var(--block-spacing-sm);
    line-height: 1;
}

.feature-item--horizontal .feature-item__icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.feature-item__title {
    font-size: var(--block-font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--block-spacing-xs) 0;
    color: var(--block-dark);
}

.feature-item__description {
    font-size: var(--block-font-size-base);
    color: var(--block-muted);
    margin: 0;
    line-height: 1.5;
}

/* Testimonials */
.block-testimonials {
    gap: var(--block-spacing-lg);
}

.testimonial-card {
    background: var(--block-background, white);
    padding: var(--block-spacing-xl);
    border-radius: var(--block-radius-lg);
    box-shadow: var(--block-shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.testimonial-card__rating {
    color: var(--block-warning, #f59e0b);
    font-size: 1.25rem;
    margin-bottom: var(--block-spacing-md);
    letter-spacing: 2px;
}

.testimonial-card__content {
    font-style: italic;
    color: var(--block-dark);
    margin-bottom: var(--block-spacing-lg);
    font-size: var(--block-font-size-base);
    line-height: 1.6;
    flex: 1;
}

.testimonial-card__author {
    margin-top: auto;
}

.testimonial-card__name {
    display: block;
    font-weight: 600;
    color: var(--block-dark);
    font-size: var(--block-font-size-base);
}

.testimonial-card__role {
    display: block;
    font-size: var(--block-font-size-sm);
    color: var(--block-muted);
    margin-top: 2px;
}

/* Accordion */
.block-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--block-spacing-sm);
}

.block-accordion--empty {
    background: var(--block-light);
    color: var(--block-muted);
}

.block-accordion__item {
    border-radius: var(--block-radius-md);
    overflow: hidden;
    background: var(--block-background, white);
    border: 1px solid var(--block-border);
    transition: all 0.2s ease;
}

.block-accordion--minimal .block-accordion__item {
    border: none;
    border-bottom: 1px solid var(--block-border);
    border-radius: 0;
}

.block-accordion--filled .block-accordion__item {
    background: var(--block-light);
    border: none;
}

.block-accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--block-spacing-md) var(--block-spacing-lg);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--block-dark);
    transition: background 0.2s ease;
}

.block-accordion__header:hover {
    background: rgba(0, 0, 0, 0.02);
}

.block-accordion__title {
    font-weight: 600;
    font-size: var(--block-font-size-base);
}

.block-accordion__icon {
    font-size: 0.8em;
    transition: transform 0.3s ease;
    opacity: 0.5;
}

.block-accordion__item--open .block-accordion__icon {
    transform: rotate(180deg);
    opacity: 1;
}

.block-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.block-accordion__item--open .block-accordion__content {
    max-height: 500px;
    /* Approximate max height */
}

.block-accordion__body {
    padding: 0 var(--block-spacing-lg) var(--block-spacing-lg) var(--block-spacing-lg);
    color: var(--block-muted);
    line-height: 1.6;
}

/* Tabs */
.block-tabs {
    background: var(--block-background, white);
    border-radius: var(--block-radius-md);
    overflow: hidden;
    position: relative;
}

.block-tabs--empty {
    background: var(--block-light);
    color: var(--block-muted);
}

.block-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--block-light);
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.block-tabs__tab {
    padding: var(--block-spacing-md) var(--block-spacing-lg);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: inherit;
    font-size: var(--block-font-size-base);
    font-weight: 600;
    color: var(--block-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.block-tabs__tab:hover {
    color: var(--block-primary);
}

.block-tabs__tab--active {
    color: var(--block-primary);
    border-bottom-color: var(--block-primary);
}

.block-tabs--pills .block-tabs__nav {
    border-bottom: none;
    gap: var(--block-spacing-sm);
    padding: var(--block-spacing-sm);
}

.block-tabs--pills .block-tabs__tab {
    border-radius: var(--block-radius-md);
    border: none;
    margin: 0;
}

.block-tabs--pills .block-tabs__tab--active {
    background: var(--block-primary);
    color: white;
}

.block-tabs__panels {
    padding: var(--block-spacing-lg);
}

.block-tabs__panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.block-tabs__panel--active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Video Block */
/* Video Block */
.block-video--empty,
.block-video--error {
    padding: var(--block-spacing-xl);
    text-align: center;
    border-radius: var(--block-radius-lg);
    color: var(--block-muted);
    border: 2px dashed var(--block-border);
}

/* Spacer */
.block-spacer {
    display: block;
    width: 100%;
}

.block-spacer--xs {
    height: 10px;
}

/* Fallback/Specific */
.block-spacer--sm {
    height: var(--block-spacing-md);
}

.block-spacer--md {
    height: var(--block-spacing-xl);
}

.block-spacer--lg {
    height: var(--block-spacing-2xl);
}

.block-spacer--xl {
    height: 100px;
}

.block-spacer--2xl {
    height: 150px;
}

.block-spacer--custom {
    height: var(--spacer-height);
}

/* Divider */
.block-divider {
    border: none;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: var(--divider-color, var(--block-border));
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.block-divider--dashed {
    border-top-style: dashed;
}

.block-divider--dotted {
    border-top-style: dotted;
}

.block-divider--double {
    border-top-style: double;
    border-top-width: 4px;
}

.block-divider--w25 {
    width: 25%;
}

.block-divider--w50 {
    width: 50%;
}

.block-divider--w75 {
    width: 75%;
}

.block-divider--w100 {
    width: 100%;
}

.block-divider--msm {
    margin-top: var(--block-spacing-sm);
    margin-bottom: var(--block-spacing-sm);
}

.block-divider--mmd {
    margin-top: var(--block-spacing-md);
    margin-bottom: var(--block-spacing-md);
}

.block-divider--mlg {
    margin-top: var(--block-spacing-lg);
    margin-bottom: var(--block-spacing-lg);
}

.block-divider--mxl {
    margin-top: var(--block-spacing-xl);
    margin-bottom: var(--block-spacing-xl);
}

/* Quote */
.block-quote {
    margin: var(--block-spacing-lg) 0;
    padding: 0;
    font-family: serif;
}

.block-quote__icon {
    font-size: 3rem;
    color: var(--block-primary);
    opacity: 0.2;
    line-height: 1;
    margin-bottom: -1rem;
}

.block-quote__content {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--block-dark);
    margin: 0 0 var(--block-spacing-md) 0;
    line-height: 1.6;
}

.block-quote__citation {
    display: block;
    font-size: var(--block-font-size-sm);
    color: var(--block-muted);
    font-style: normal;
    font-weight: 600;
}

/* Quote Styles */
.block-quote--simple {
    text-align: center;
}

.block-quote--bordered {
    border-left: 4px solid var(--block-primary);
    padding-left: var(--block-spacing-lg);
    font-family: inherit;
}

.block-quote--bordered .block-quote__icon {
    display: none;
}

.block-quote--highlighted {
    background: var(--block-light);
    padding: var(--block-spacing-xl);
    border-radius: var(--block-radius-lg);
    text-align: center;
    font-family: inherit;
}

.block-quote--modern {
    background: var(--block-background, white);
    padding: var(--block-spacing-xl);
    border-radius: var(--block-radius-md);
    box-shadow: var(--block-shadow-md);
    border: 1px solid var(--block-border);
}

/* ==========================================================================
   ALIGNMENT UTILITIES
   ========================================================================== */

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

/* ==========================================================================
   GRID UTILITIES
   ========================================================================== */

.grid {
    display: grid;
    gap: var(--block-spacing-lg);
}

.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Auto-fit grid for testimonials and similar */
.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1024px) {
    .grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .block-hero__title {
        font-size: var(--block-font-size-2xl);
    }

    .block-newsletter__form {
        flex-direction: column;
        align-items: center;
    }

    .block-newsletter__input {
        width: 100%;
    }
}

@media (max-width: 480px) {

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }

    .block-hero {
        padding: var(--block-spacing-xl) var(--block-spacing-md);
    }

    .block-core-newsletter {
        padding: var(--block-spacing-xl) var(--block-spacing-md);
    }
}

/* ==========================================================================
   UNIFIED HERO BLOCK RESPONSIVE STYLES (data-device selectors)
   ==========================================================================
   
   WHY data-device instead of @media queries?
   ------------------------------------------
   - Editor preview uses an iframe with explicit body[data-device="mobile"]
   - This doesn't trigger @media (max-width: 768px) because iframe width !== viewport
   - Using data-device selectors ensures EXACT same styles in preview and frontend
   
   HOW IT WORKS:
   - Frontend: JS sets body[data-device] based on window.innerWidth
   - Editor:   body[data-device] is set explicitly by preview controller
   - Result:   Same CSS applies in both contexts = true WYSIWYG
   
   IMPORTANT:
   - @media queries above are kept for legacy/non-hero blocks
   - Hero-specific responsive rules should ONLY use data-device selectors below
   ========================================================================== */

/* ==========================================================================
   HERO DESKTOP (default) - No selector needed, base styles apply
   ========================================================================== */

.block-hero,
.block-hero--v1,
.block-hero--v4,
.block-hero--v5,
.block-hero--split {
    /* Base desktop styles - CSS custom properties for responsive override */
    --hero-height-editor: 550px;
    box-sizing: border-box;
}

/* ==========================================================================
   HERO TABLET - body[data-device="tablet"]
   ========================================================================== */

body[data-device="tablet"] .block-hero,
body[data-device="tablet"] .block-hero--v1,
body[data-device="tablet"] .block-hero--v4,
body[data-device="tablet"] .block-hero--v5 {
    /* Slightly reduced padding on tablet */
    --hero-height-editor: 450px;
}

body[data-device="tablet"] .block-hero h1,
body[data-device="tablet"] .block-hero--v1 h1,
body[data-device="tablet"] .block-hero--v4 h1,
body[data-device="tablet"] .block-hero--v5 h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
}

body[data-device="tablet"] .block-hero p,
body[data-device="tablet"] .block-hero--v1 p,
body[data-device="tablet"] .block-hero--v4 p,
body[data-device="tablet"] .block-hero--v5 p {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
}

body[data-device="tablet"] .block-hero--split {
    flex-direction: column !important;
}

body[data-device="tablet"] .block-hero--split>div {
    min-width: 100%;
}

body[data-device="tablet"] .block-hero__actions {
    gap: 0.75rem;
}

body[data-device="tablet"] .block-hero .btn,
body[data-device="tablet"] .block-hero--v1 .btn,
body[data-device="tablet"] .block-hero--v4 .btn-v4,
body[data-device="tablet"] .block-hero--v5 a {
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
}

/* ==========================================================================
   HERO MOBILE - body[data-device="mobile"]
   ========================================================================== */

body[data-device="mobile"] .block-hero,
body[data-device="mobile"] .block-hero--v1,
body[data-device="mobile"] .block-hero--v4,
body[data-device="mobile"] .block-hero--v5 {
    /* Compact height on mobile */
    --hero-height-editor: 350px;
    min-height: var(--hero-height-editor, 350px);
}

body[data-device="mobile"] .block-hero h1,
body[data-device="mobile"] .block-hero--v1 h1,
body[data-device="mobile"] .block-hero--v4 h1,
body[data-device="mobile"] .block-hero--v5 h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin-bottom: 0.75rem;
}

body[data-device="mobile"] .block-hero p,
body[data-device="mobile"] .block-hero--v1 p,
body[data-device="mobile"] .block-hero--v4 p,
body[data-device="mobile"] .block-hero--v5 p {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

body[data-device="mobile"] .block-hero--split {
    flex-direction: column !important;
    min-height: auto;
}

body[data-device="mobile"] .block-hero--split>div:first-child {
    padding: 2rem 1.5rem;
    min-width: 100%;
}

body[data-device="mobile"] .block-hero--split>.hero-image-side {
    min-height: 200px;
    min-width: 100%;
}

body[data-device="mobile"] .block-hero__actions {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    align-items: center;
}

body[data-device="mobile"] .block-hero .btn,
body[data-device="mobile"] .block-hero--v1 .btn,
body[data-device="mobile"] .block-hero--v4 .btn-v4,
body[data-device="mobile"] .block-hero--v5 a {
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
    width: 100%;
    max-width: 280px;
    text-align: center;
    justify-content: center;
}

body[data-device="mobile"] .block-hero .container,
body[data-device="mobile"] .block-hero--v1 .container,
body[data-device="mobile"] .block-hero--v4 .container,
body[data-device="mobile"] .block-hero--v5 .container {
    padding: 1.5rem;
}

/* ==========================================================================
   ICON BOX BLOCK
   ========================================================================== */

.icon-box {
    padding: var(--block-spacing-lg);
}

.icon-box--left {
    text-align: left;
}

.icon-box--center {
    text-align: center;
}

.icon-box--right {
    text-align: right;
}

.icon-box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--block-spacing-md);
    line-height: 1;
}

.icon-box__heading {
    font-family: var(--block-font-secondary);
    font-size: var(--block-font-size-lg);
    font-weight: 600;
    color: var(--block-dark);
    margin: 0 0 var(--block-spacing-sm) 0;
}

.icon-box__description {
    color: var(--block-muted);
    line-height: var(--block-line-height);
    margin: 0;
}

.icon-box-link:hover .icon-box {
    transform: translateY(-4px);
    transition: transform 0.2s ease;
}

/* ==========================================================================
   IMAGE BOX BLOCK
   ========================================================================== */

.image-box {
    background: var(--block-background);
    border-radius: var(--block-radius-md);
    overflow: hidden;
    box-shadow: var(--block-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--block-shadow-lg);
}

.image-box__image img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.image-box__content {
    padding: var(--block-spacing-lg);
}

.image-box__heading {
    font-family: var(--block-font-secondary);
    font-size: var(--block-font-size-lg);
    font-weight: 600;
    color: var(--block-dark);
    margin: 0 0 var(--block-spacing-sm) 0;
}

.image-box__description {
    color: var(--block-muted);
    line-height: var(--block-line-height);
    margin: 0;
}

/* ==========================================================================
   CALL TO ACTION BLOCK
   ========================================================================== */

.cta-block {
    padding: var(--block-spacing-2xl) var(--block-spacing-xl);
    border-radius: var(--block-radius-lg);
    text-align: center;
}

.cta-block--gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.cta-block--primary {
    background: var(--block-primary);
    color: white;
}

.cta-block--dark {
    background: var(--block-dark);
    color: white;
}

.cta-block--light {
    background: var(--block-light);
    color: var(--block-dark);
}

.cta-block__heading {
    font-size: var(--block-font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--block-spacing-md) 0;
}

.cta-block__description {
    font-size: var(--block-font-size-lg);
    opacity: 0.9;
    margin: 0 0 var(--block-spacing-xl) 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-block__button {
    display: inline-block;
    padding: var(--block-spacing-md) var(--block-spacing-xl);
    background: white;
    color: var(--block-primary);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--block-radius-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-block__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cta-block--light .cta-block__button {
    background: var(--block-primary);
    color: white;
}

/* ==========================================================================
   HTML/CODE BLOCK
   ========================================================================== */

.html-block {
    margin: var(--block-spacing-md) 0;
}

.html-block--bordered {
    border: 1px solid var(--block-border);
    border-radius: var(--block-radius-md);
    padding: var(--block-spacing-md);
}

/* ==========================================================================
   COUNTER BLOCK
   ========================================================================== */

.counter-block {
    text-align: center;
    padding: var(--block-spacing-lg);
}

.counter-block__number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--block-primary);
    line-height: 1;
    margin-bottom: var(--block-spacing-sm);
}

.counter-block__label {
    font-size: var(--block-font-size-base);
    color: var(--block-muted);
}

/* ==========================================================================
   PROGRESS BAR BLOCK
   ========================================================================== */

.progress-block {
    margin: var(--block-spacing-md) 0;
}

.progress-block__label {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--block-spacing-sm);
    font-size: var(--block-font-size-sm);
    color: var(--block-dark);
}

.progress-block__bar {
    height: 8px;
    background: var(--block-light);
    border-radius: var(--block-radius-full);
    overflow: hidden;
}

.progress-block__fill {
    height: 100%;
    background: var(--block-primary);
    border-radius: var(--block-radius-full);
    transition: width 1s ease-out;
}

/* ==========================================================================
   PRICE TABLE BLOCK
   ========================================================================== */

.price-table {
    display: grid;
    gap: var(--block-spacing-lg);
    align-items: stretch;
}

.price-table--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.price-table--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.price-table--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {

    .price-table--cols-2,
    .price-table--cols-3,
    .price-table--cols-4 {
        grid-template-columns: 1fr;
    }
}

.price-card {
    position: relative;
    background: var(--block-background);
    border: 1px solid var(--block-border);
    border-radius: var(--block-radius-md);
    padding: var(--block-spacing-xl);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.price-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--block-shadow-lg);
}

.price-card--highlighted {
    border-color: var(--block-primary);
    box-shadow: 0 0 0 2px var(--block-primary);
    transform: scale(1.02);
}

.price-card--highlighted:hover {
    transform: scale(1.02) translateY(-4px);
}

.price-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--block-primary);
    color: white;
    padding: var(--block-spacing-xs) var(--block-spacing-md);
    border-radius: var(--block-radius-full);
    font-size: var(--block-font-size-sm);
    font-weight: 600;
}

.price-card__name {
    font-size: var(--block-font-size-lg);
    font-weight: 600;
    color: var(--block-dark);
    margin: 0 0 var(--block-spacing-md) 0;
}

.price-card__price {
    margin-bottom: var(--block-spacing-sm);
}

.price-card__amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--block-primary);
}

.price-card__period {
    font-size: var(--block-font-size-sm);
    color: var(--block-muted);
}

.price-card__description {
    font-size: var(--block-font-size-sm);
    color: var(--block-muted);
    margin-bottom: var(--block-spacing-lg);
}

.price-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--block-spacing-xl) 0;
    text-align: left;
}

.price-card__feature {
    padding: var(--block-spacing-sm) 0;
    border-bottom: 1px solid var(--block-border);
    font-size: var(--block-font-size-sm);
    color: var(--block-dark);
}

.price-card__feature:last-child {
    border-bottom: none;
}

.price-card__button {
    display: block;
    padding: var(--block-spacing-md) var(--block-spacing-lg);
    background: var(--block-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--block-radius-md);
    font-weight: 600;
    transition: background 0.2s ease;
}

.price-card__button:hover {
    background: var(--block-primary-hover);
}

/* ==========================================================================
   TABLE BLOCK
   ========================================================================== */

.table-wrapper {
    overflow-x: auto;
    margin: var(--block-spacing-md) 0;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--block-font-size-sm);
}

.data-table th,
.data-table td {
    padding: var(--block-spacing-sm) var(--block-spacing-md);
    text-align: left;
}

.data-table th {
    background: var(--block-light);
    font-weight: 600;
    color: var(--block-dark);
}

.data-table td {
    color: var(--block-muted);
}

.data-table--bordered th,
.data-table--bordered td {
    border: 1px solid var(--block-border);
}

.data-table--striped tbody tr:nth-child(even) {
    background: var(--block-light);
}

.data-table--hoverable tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}