/*
 Theme Name:   Firemouth Aquaristic
 Theme URI:    https://firemouthaquaristic.com
 Description:  Child theme de Storefront para Firemouth Aquaristic. Paleta: rust/terracota (#99392c), teal (#108474), dark (#121212). Fuente: Red Hat Display.
 Author:       Firemouth Aquaristic
 Author URI:   https://firemouthaquaristic.com
 Template:     storefront
 Version:      1.0.0
 Text Domain:  firemouth-child
*/

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap');

/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
    --fi-primary:   #99392c;
    --fi-secondary: #108474;
    --fi-dark:      #121212;
    --fi-light:     #f3f3f3;
    --fi-font:      'Red Hat Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Base Typography ──────────────────────────────────────────────────────── */
body,
.site,
.storefront-handheld-footer-bar,
input, textarea, select, button {
    font-family: var(--fi-font) !important;
    color: var(--fi-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fi-font) !important;
    font-weight: 900;
    color: var(--fi-dark);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
    background: var(--fi-dark) !important;
    padding: 18px 0;
}
.site-header .site-branding,
.site-header .site-title,
.site-header .site-title a {
    color: #fff !important;
    font-weight: 900;
    font-size: 22px;
}
.site-header .site-description {
    color: #aaa !important;
    font-size: 12px;
}

/* Logo */
.custom-logo { max-height: 64px; width: auto; }

/* Navigation */
.main-navigation ul li a,
.site-header-cart a {
    color: #e0e0e0 !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
    transition: color .2s;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
    color: #f0a060 !important;
    text-decoration: none;
}
/* Dropdown */
.main-navigation ul ul {
    background: var(--fi-dark) !important;
    border: 1px solid #333;
}
.main-navigation ul ul li a {
    color: #ccc !important;
}
.main-navigation ul ul li a:hover { color: #f0a060 !important; }

/* Cart icon */
.site-header-cart .cart-contents {
    color: #fff !important;
}
.site-header-cart .cart-contents-count {
    background: var(--fi-primary) !important;
    color: #fff !important;
}

/* ── Primary Buttons ──────────────────────────────────────────────────────── */
.button, button,
input[type="button"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-proceed-to-checkout a.checkout-button {
    background: var(--fi-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: var(--fi-font) !important;
    font-weight: 700 !important;
    padding: 11px 22px !important;
    transition: background .2s, transform .15s !important;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: #7d2e23 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Alt button (outline) */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--fi-secondary) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: #0b6659 !important;
}

/* ── Links ────────────────────────────────────────────────────────────────── */
a { color: var(--fi-primary); }
a:hover { color: #7d2e23; }

/* ── Product Cards ────────────────────────────────────────────────────────── */
.woocommerce ul.products li.product {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: box-shadow .2s, transform .2s;
    background: #fff;
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.14);
    transform: translateY(-3px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-weight: 900;
    font-size: 15px;
    color: var(--fi-dark);
    padding: 12px 14px 4px;
}
.woocommerce ul.products li.product .price {
    padding: 0 14px;
    color: var(--fi-primary) !important;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 900; }
.woocommerce ul.products li.product a.button {
    margin: 12px 14px 14px !important;
    width: calc(100% - 28px) !important;
    text-align: center !important;
}

/* ── Product Page ─────────────────────────────────────────────────────────── */
.woocommerce div.product .product_title {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 900;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--fi-primary) !important;
    font-size: 24px;
    font-weight: 700;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
    font-size: 16px !important;
    padding: 14px 30px !important;
}

/* ── Cart & Checkout ──────────────────────────────────────────────────────── */
.woocommerce-cart-form .cart_totals h2,
.woocommerce-checkout h3 {
    color: var(--fi-primary);
}

/* Payment methods */
#payment .payment_methods li input[type="radio"]:checked ~ label {
    font-weight: 700;
    color: var(--fi-primary);
}
#payment #place_order {
    background: var(--fi-secondary) !important;
    font-size: 18px !important;
    padding: 16px 30px !important;
    width: 100% !important;
}
#payment #place_order:hover { background: #0b6659 !important; }

/* ── Notices ──────────────────────────────────────────────────────────────── */
.woocommerce-message {
    border-top-color: var(--fi-secondary) !important;
}
.woocommerce-error   { border-top-color: var(--fi-primary) !important; }
.woocommerce-info    { border-top-color: #3b82f6 !important; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--fi-dark) !important;
    color: #aaa;
    padding: 40px 0;
}
.site-footer .widget-title,
.site-footer h2, .site-footer h3 {
    color: var(--fi-white) !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.site-footer a      { color: #ccc; }
.site-footer a:hover { color: #f0a060; }

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */
.woocommerce-breadcrumb,
.storefront-breadcrumb {
    background: var(--fi-light);
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 13px;
    color: #888;
}
.woocommerce-breadcrumb a { color: var(--fi-primary); text-decoration: none; }

/* ── Badges / Labels ──────────────────────────────────────────────────────── */
.woocommerce span.onsale {
    background: var(--fi-primary) !important;
    border-radius: 4px;
}

/* ── Table override for WC ────────────────────────────────────────────────── */
.woocommerce table.shop_table thead th {
    background: var(--fi-dark);
    color: #fff;
    font-weight: 700;
    padding: 12px 14px;
}

/* ── Responsive tweaks ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .site-header { padding: 12px 0; }
}