/* ═══════════════════════════════════════════
   TireDrive — Minimal CSS
   Tailwind CDN handles 95% of styling
   Only custom properties + WooCommerce fixes below
   ═══════════════════════════════════════════ */

/* === Custom Properties (fallback — Tailwind config in header) === */
:root {
    --color-background: #FFFFFF;
    --color-surface: #F5F5F5;
    --color-surface-alt: #E5E5E5;
    --color-foreground: #0A0A0A;
    --color-foreground-muted: #737373;
    --color-accent: #0A0A0A;
    --color-alert: #FF4D4D;
    --color-success: #00D26A;
    --font-sans: 'Be Vietnam Pro', sans-serif;
}

body { font-family: var(--font-sans); }

/* === WooCommerce Reset === */
.woocommerce .products::before,
.woocommerce .products::after { display: none; }
.woocommerce .products { display: grid; gap: 0; }
.woocommerce .product { width: 100% !important; float: none !important; margin: 0 !important; }

/* === Product Grid (shared) === */
.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 768px) { .products { gap: 16px; } }
@media (min-width: 1024px) { .products { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* === Product Card === */
.product-card { display: flex; flex-direction: column; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.product-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.product-card__image-wrap {
    position: relative; border-radius: 12px; overflow: hidden;
    background-color: var(--color-surface); aspect-ratio: 3/4; margin-bottom: 12px;
}
@media (min-width: 768px) { .product-card__image-wrap { margin-bottom: 16px; } }
.product-card__img {
    width: 100%; height: 100%; object-fit: cover;
    display: block; transition: transform 0.5s ease-out;
}
.product-card:hover .product-card__img { transform: scale(1.05); }
.product-card__badge {
    position: absolute; top: 10px; left: 10px; z-index: 1;
    background: var(--color-alert); color: #fff;
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; padding: 4px 8px; border-radius: 4px;
}
.product-card__meta { display: flex; flex-direction: column; flex-grow: 1; }
.product-card__cat {
    font-size: 0.75rem; color: var(--color-foreground-muted);
    display: block; margin-bottom: 8px; font-weight: 500;
}
.product-card__title {
    font-size: 0.875rem; font-weight: 500; margin: 0 0 4px;
    color: var(--color-foreground); display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.4;
}
.product-card:hover .product-card__title { color: var(--color-foreground-muted); }
.product-card__price {
    font-size: 1rem; font-weight: 700; color: var(--color-foreground);
    display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.product-card__price ins { text-decoration: none; color: var(--color-alert); }
.product-card__price del { color: var(--color-foreground-muted); font-size: 0.875rem; font-weight: 400; }

/* === Star Rating === */
.star-rating {
    display: inline-flex; gap: 2px; font-size: 0.875rem;
    color: #f59e0b; overflow: hidden; position: relative; width: 5.3em; font-family: 'star';
}
.star-rating::before { content: "SSSSS"; color: #e0e0e0; }
.star-rating span { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.star-rating span::before { content: "SSSSS"; color: #f59e0b; }

/* === WC Buttons === */
.woocommerce .button {
    display: inline-flex !important; align-items: center; justify-content: center;
    padding: 0.75rem 1.5rem !important; font-weight: 700 !important;
    font-size: 0.875rem !important; text-transform: uppercase !important;
    letter-spacing: 0.05em !important; border-radius: 9999px !important;
    transition: all 0.2s !important; min-height: 44px;
}
.woocommerce .button.alt { background: var(--color-foreground) !important; color: #fff !important; }
.woocommerce .button.alt:hover { opacity: 0.8 !important; }

/* === WC Notices === */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    padding: 14px 16px; border-radius: 10px; margin-bottom: 1.5rem;
    font-size: 0.9rem; font-family: var(--font-sans);
}
.woocommerce-message { background: color-mix(in srgb, var(--color-success) 10%, transparent); border-left: 3px solid var(--color-success); }
.woocommerce-info    { background: color-mix(in srgb, var(--color-accent) 8%, transparent); border-left: 3px solid var(--color-accent); }
.woocommerce-error   { background: color-mix(in srgb, var(--color-alert) 10%, transparent); border-left: 3px solid var(--color-alert); }

/* === Print === */
@media print {
    header, footer, .product-card__badge { display: none !important; }
    body { font-size: 12pt; }
}