/* =====================================================
   Steven Auto CarMedia — Main Theme Stylesheet
   ===================================================== */

:root {
        /* Мотоспорт палитра: състезателно червено + черно + бяло + жълто за
           акцент/внимание (стоп-сигнал логика: червено = марка/CTA,
           жълто = предупреждение/промо/hover акцент). */
        --color-primary: #e2101a;       /* Racing Red — основен бранд/CTA цвят */
        --color-primary-dark: #a70d15;
        --color-accent: #ffcc00;        /* Signal Yellow — за внимание: промо баджове, hover, акценти */
        --color-accent-dark: #e0b400;
        --color-secondary: #ffcc00;     /* запазено име за съвместимост с по-стар код */
        --color-dark: #0d0d0d;          /* почти черно */
        --color-light: #f6f6f4;
        --color-white: #ffffff;
        --color-gray: #6b7280;
        --color-border: #e5e7eb;
        --gradient-hero: linear-gradient(160deg, #0d0d0d 0%, #1a0405 55%, #2b0507 100%);
        --radius: 12px;
        --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
        --transition: all 0.25s ease;
        --font: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
        margin: 0;
        font-family: var(--font);
        color: var(--color-dark);
        background: var(--color-white);
        line-height: 1.65;
        font-size: 1rem;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 700; line-height: 1.25; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
}

/* ===== Buttons ===== */
.btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 28px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.95rem;
        border: 2px solid transparent;
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
}
.btn-primary,
button.button,
input[type="submit"],
.checkout-button {
        background: var(--color-primary);
        color: var(--color-white) !important;
        border-color: var(--color-primary);
}
.btn-primary:hover,
button.button:hover,
input[type="submit"]:hover {
        background: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
        transform: translateY(-2px);
}
.btn-outline {
        background: transparent;
        color: var(--color-dark);
        border-color: var(--color-dark);
}
.btn-outline:hover { background: var(--color-dark); color: var(--color-white); }
.btn-sm, .btn-small { padding: 8px 18px; font-size: 0.85rem; }
.btn-lg { padding: 16px 36px; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }

/* ===== Sticky nav ===== */
.sticky-nav {
        position: sticky;
        top: 0;
        z-index: 999;
        background: rgb(13, 13, 13);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 76px;
}
.brand a {
        color: var(--color-white);
        font-weight: 800;
        font-size: 1.25rem;
        letter-spacing: -0.02em;
}
.brand img { max-height: 48px; }
.nav-links { display: flex; gap: 32px; }
.nav-links a {
        color: rgba(255, 255, 255, 0.85);
        font-weight: 500;
        font-size: 0.9rem;
        transition: var(--transition);
}
.nav-links a:hover { color: var(--color-primary); }
.nav-right { display: flex; align-items: center; gap: 20px; }
.cart-icon-nav {
        position: relative;
        display: flex;
        align-items: center;
        color: var(--color-white);
        font-size: 1.2rem;
}
.cart-icon-nav .count {
        position: absolute;
        top: -8px;
        right: -10px;
        background: var(--color-primary);
        color: var(--color-white);
        font-size: 0.65rem;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
}
.account-icon-nav {
        display: flex;
        align-items: center;
        color: var(--color-white);
        font-size: 1.2rem;
        transition: var(--transition);
}
.account-icon-nav:hover { color: var(--color-primary); }
/* Телефонът в мобилното меню - скрит на десктоп, там вече го има .btn-nav-cta */
.nav-links-phone { display: none; }
.nav-links-phone a { font-weight: 700 !important; color: var(--color-primary) !important; }
.btn-nav-cta {
        background: var(--color-primary);
        color: var(--color-white);
        padding: 10px 22px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.85rem;
        transition: var(--transition);
}
.btn-nav-cta:hover { background: var(--color-primary-dark); }
.nav-toggle { display: none; }

/* ===== Hero ===== */
.hero-section {
        position: relative;
        min-height: 88vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: var(--color-dark);
}

.bg-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-background {
        position: absolute;
        inset: 0;
        background:
                radial-gradient(circle at 20% 20%, rgba(226, 16, 26, 0.35), transparent 55%),
                radial-gradient(circle at 82% 78%, rgba(255, 204, 0, 0.16), transparent 55%),
                var(--color-dark);
        filter: grayscale(35%) contrast(112%) brightness(0.75);
        transform: scale(1.04);
}

.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(13,13,13,0.88)); }
.hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-particles span {
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgba(226, 16, 26, 0.6);
        border-radius: 50%;
        animation: float-up linear infinite;
}
@keyframes float-up {
        from { transform: translateY(0); opacity: 0; }
        10% { opacity: 1; }
        to { transform: translateY(-100vh); opacity: 0; }
}
.hero-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.hero-content { max-width: 680px; }
.hero-eyebrow {
        display: inline-block;
        padding: 0.3rem 0.75rem;
        border-radius: 6px;
        background: rgba(255, 204, 0, 0.12);
        border: 1px solid rgba(255, 204, 0, 0.4);
        color: var(--color-accent);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 0.8rem;
        margin-bottom: 16px;
}
.hero-title { color: var(--color-white); font-size: 3.2rem; margin-bottom: 20px; }
.hero-title .accent { color: var(--color-primary); }
.hero-subtitle { color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; max-width: 540px; margin-bottom: 32px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-badges { display: flex; gap: 28px; flex-wrap: wrap; }
.hero-badges .badge { display: flex; align-items: center; gap: 8px; color: var(--color-white); font-size: 0.85rem; font-weight: 500; }
.hero-badges .badge .icon { color: var(--color-accent); font-weight: 700; }

/* ===== Reveal animation ===== */
.reveal-up { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* ===== Section heads ===== */
section { padding: 90px 0; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 50px; }
.section-eyebrow {
        display: inline-block;
        color: var(--color-primary);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 0.78rem;
        margin-bottom: 10px;
}
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--color-gray); }

/* ===== Products ===== */
.products-section { background: var(--color-light); }
.products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 24px;
}
/* Забележка: пълните, коригирани стилове за продуктовата карта живеят
   по-надолу в секцията "ПРОДУКТОВА КАРТА — по-професионален вид", за да
   няма два конфликтуващи набора от правила за едно и също нещо. */
.product-stock { font-size: 0.8rem; color: var(--color-gray); margin-bottom: 10px; }

/* ===== Services ===== */
.services-grid, .service-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 24px;
}
.service-card {
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        padding: 32px 26px;
        text-align: center;
        transition: var(--transition);
}
.service-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow); transform: translateY(-4px); }
.service-icon, .service-card-icon { font-size: 2.4rem; display: block; margin-bottom: 16px; }
.service-card h3, .service-card-title { font-size: 1.15rem; margin-bottom: 10px; }
.service-card p, .service-card-description { color: var(--color-gray); font-size: 0.88rem; margin-bottom: 0; }

/* ===== Pricing ===== */
.pricing-section { background: var(--color-light); }
.pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
}
.pricing-card {
        background: var(--color-white);
        border-radius: var(--radius);
        padding: 28px;
        box-shadow: var(--shadow);
}
.pricing-card h3 { margin-bottom: 18px; }
.pricing-list { display: flex; flex-direction: column; gap: 12px; }
.pricing-item {
        display: flex;
        justify-content: space-between;
        padding-bottom: 12px;
        border-bottom: 1px dashed var(--color-border);
        font-size: 0.88rem;
}
.pricing-item strong { color: var(--color-primary); }
.pricing-note {
        margin-top: 30px;
        text-align: center;
        color: var(--color-gray);
        font-size: 0.85rem;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
}

/* ===== Why us / Features ===== */
.features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 24px;
}
.feature-box { text-align: center; padding: 20px; }
.feature-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: rgba(226, 16, 26, 0.12);
        color: var(--color-primary);
        font-size: 1.4rem;
        font-weight: 700;
        margin-bottom: 16px;
}
.feature-box h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature-box p { color: var(--color-gray); font-size: 0.88rem; }

/* ===== Brands ===== */
.brands-section { text-align: center; }
.brands-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 16px;
}
.brand-item {
        padding: 18px 10px;
        background: var(--color-light);
        border-radius: 10px;
        font-weight: 700;
        color: var(--color-gray);
        transition: var(--transition);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-decoration: none;
}
.brand-item img {
        width: 48px;
        height: 48px;
        object-fit: contain;
        filter: grayscale(100%);
        transition: var(--transition);
}
.brand-item-fallback {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,0.06);
        font-weight: 800;
        font-size: 1.2rem;
        text-transform: uppercase;
        color: var(--color-gray);
}
.brand-item:hover .brand-item-fallback { background: rgba(226,16,26,0.15); color: var(--color-primary); }
.brand-item:hover img { filter: grayscale(0%); }
.brand-item span { font-size: 0.85rem; }
.brand-item:hover { color: var(--color-primary); background: rgba(226,16,26,0.08); transform: translateY(-3px); }

/* ===== Contact ===== */
.contact-section { background: var(--color-dark); color: var(--color-white); }
.contact-section .section-head p { color: rgba(255,255,255,0.7); }
.contact-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 24px;
}
.contact-card {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius);
        padding: 30px;
        text-align: center;
}
.contact-icon { font-size: 2rem; display: block; margin-bottom: 14px; }
.contact-card h3 { margin-bottom: 10px; }
.contact-link { color: var(--color-primary); font-weight: 600; display: block; margin-bottom: 6px; }
.contact-hours { color: rgba(255, 255, 255, 0.6); font-size: 0.82rem; margin: 0; }

/* ===== Dropshipping & Brand System ===== */
.dropshipping-layout {
    font-size: 1.15rem;
    line-height: 1.8;
}
.dropshipping-layout a {
    color: #e2101a;
    text-decoration: underline;
    font-weight: 700;
}
.dropshipping-layout .video-container-pro {
    margin: 40px 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.meta-sep { opacity: 0.3; margin: 0 5px; }
.single-post-model { color: #e2101a; font-weight: 700; }

/* Custom Grid for Brands & Models (Professional Dark UI) */
.brands-grid-pro, .models-grid-pro {
    display: grid;
    gap: 25px;
}
@media (min-width: 992px) {
    .brands-grid-pro { grid-template-columns: repeat(5, 1fr); }
    .models-grid-pro { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .brands-grid-pro { grid-template-columns: repeat(3, 1fr); }
    .models-grid-pro { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .brands-grid-pro { grid-template-columns: repeat(2, 1fr); }
    .models-grid-pro { grid-template-columns: 1fr; }
}

/* ===== Footer ===== */
.site-footer { background: #111; color: rgba(255,255,255,0.8); }
.footer-widgets { padding: 60px 0 30px; }
.footer-widgets-row, .footer-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 32px;
        padding: 60px 0 30px;
}
.footer-section h4, .footer-widget-col h4 { color: var(--color-white); margin-bottom: 14px; }
.footer-section p { color: rgba(255,255,255,0.65); font-size: 0.88rem; }
.footer-social { display: flex; gap: 12px; margin-top: 10px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 22px 0; }
.footer-bottom-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p, .footer-copyright p { margin: 0; font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.footer-navigation ul { display: flex; gap: 16px; }
.footer-credits a { color: var(--color-primary); }

/* ===== Generic page header (cart/checkout/account/search/404) ===== */
.page-header {
        background: var(--color-dark);
        color: var(--color-white);
        padding: 60px 0;
        text-align: center;
}
.page-title { color: var(--color-white); margin-bottom: 8px; }
.page-subtitle { color: rgba(255,255,255,0.7); margin: 0; }

.site-main, .site-main-content { padding: 60px 0; }
.content-wrapper { display: flex; gap: 40px; align-items: flex-start; }
.site-main-content { flex: 1; min-width: 0; padding: 0; }
.sidebar { width: 280px; flex-shrink: 0; }
.sidebar .widget { background: var(--color-light); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.widget-title { font-size: 1rem; margin-bottom: 14px; }

/* ===== Cart page ===== */
.cart-page-main .container,
.checkout-page-main .container { padding-top: 0; }
.cart-wrapper, .checkout-wrapper { display: flex; gap: 32px; align-items: flex-start; }
.cart-items-section, .checkout-content { flex: 1; min-width: 0; }
.cart-summary-section, .checkout-sidebar { width: 340px; flex-shrink: 0; }

.cart-table, table.shop_table {
        width: 100%;
        border-collapse: collapse;
        background: var(--color-white);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow);
}
.cart-table th, .cart-table td,
table.shop_table th, table.shop_table td {
        padding: 16px;
        text-align: left;
        border-bottom: 1px solid var(--color-border);
        font-size: 0.88rem;
}
.cart-table th, table.shop_table th {
        background: var(--color-light);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.04em;
}

.cart-summary, .order-summary {
        background: var(--color-light);
        border-radius: var(--radius);
        padding: 26px;
}
.cart-summary h3, .order-summary h3 { margin-bottom: 18px; }

/* Реални редове в количката (инжектирани от template-cart.php) */
.woocommerce-cart-form { display: contents; }
.cart-item-product { display: flex; align-items: center; gap: 12px; }
.cart-item-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block; }
.cart-item-name { font-weight: 700; color: var(--color-dark); text-decoration: none; }
.cart-item-name:hover { color: var(--color-primary); }
.cart-item-qty-input { width: 64px; padding: 8px; border-radius: 8px; border: 1px solid var(--color-border); text-align: center; }
.cart-item-remove .remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--color-dark); font-size: 1.1rem; text-decoration: none; }
.cart-item-remove .remove:hover { background: var(--color-primary); color: #fff; }
.cart-actions-row td { border-bottom: none; }

.summary-row {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        font-size: 0.9rem;
        border-bottom: 1px dashed var(--color-border);
}
.summary-row.total { font-size: 1.1rem; font-weight: 800; border-bottom: none; color: var(--color-primary); }
.summary-divider { height: 1px; background: var(--color-border); margin: 14px 0; }

/* ===== Checkout ===== */
.checkout-section {
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        padding: 26px;
        margin-bottom: 24px;
}
.checkout-section h2 { font-size: 1.15rem; margin-bottom: 18px; }
.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
select, textarea {
        width: 100%;
        padding: 11px 14px;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        font-family: var(--font);
        font-size: 0.9rem;
        transition: var(--transition);
}
.form-group input:focus, textarea:focus, select:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(226, 16, 26, 0.12);
}
.shipping-options, .payment-options { display: flex; flex-direction: column; gap: 12px; }
.shipping-option, .payment-option {
        display: flex;
        align-items: center;
        gap: 12px;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        padding: 14px 16px;
        cursor: pointer;
        transition: var(--transition);
}
.shipping-option:has(input:checked), .payment-option:has(input:checked) {
        border-color: var(--color-primary);
        background: rgba(226, 16, 26, 0.05);
}
.option-label { display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; }
.option-label small { color: var(--color-gray); }

/* ===== My Account ===== */
.account-wrapper { display: flex; gap: 32px; align-items: flex-start; }
.account-sidebar { width: 260px; flex-shrink: 0; }
.account-content { flex: 1; min-width: 0; }
.account-nav {
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        overflow: hidden;
}
.account-nav-link {
        display: block;
        padding: 14px 18px;
        font-size: 0.88rem;
        font-weight: 500;
        border-bottom: 1px solid var(--color-border);
        transition: var(--transition);
}
.account-nav-link:last-child { border-bottom: none; }
.account-nav-link:hover, .account-nav-link.active { background: var(--color-primary); color: var(--color-white); }
.account-section { display: none; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; margin-bottom: 24px; }
.account-section.active { display: block; }
.dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.dashboard-card { background: var(--color-light); border-radius: 10px; padding: 20px; display: flex; align-items: center; gap: 14px; }
.card-icon { font-size: 1.6rem; }
.card-value { font-size: 1.3rem; font-weight: 800; color: var(--color-primary); }
.orders-table { width: 100%; border-collapse: collapse; }
.orders-table th, .orders-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 0.85rem; }
.status-badge { padding: 4px 12px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; }
.status-processing { background: rgba(226,16,26,0.12); color: var(--color-primary); }
.status-delivered { background: rgba(34,197,94,0.12); color: #16a34a; }
.addresses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.address-card { border: 1px solid var(--color-border); border-radius: 10px; padding: 18px; }
.address-actions { display: flex; gap: 10px; margin-top: 12px; }

/* ===== 404 / search ===== */
.error-404 { text-align: center; padding: 40px 0; }
.error-actions { margin: 24px 0 40px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.search-header { text-align: center; margin-bottom: 40px; }
.search-form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.search-field { flex: 1; }

/* ===== WooCommerce single product basics ===== */
.woocommerce-single-product { display: flex; gap: 40px; flex-wrap: wrap; }
.entry-summary { flex: 1; min-width: 280px; }
.breadcrumb { color: var(--color-gray); font-size: 0.82rem; margin-bottom: 20px; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
        .cart-wrapper, .checkout-wrapper, .account-wrapper, .content-wrapper { flex-direction: column; }
        .cart-summary-section, .checkout-sidebar, .account-sidebar, .sidebar { width: 100%; }
        .hero-title { font-size: 2.3rem; }
}
@media (max-width: 768px) {
        section { padding: 60px 0; }
        .form-row { flex-direction: column; gap: 0; }
        .footer-bottom-content { flex-direction: column; text-align: center; }
}

/* =====================================================
   SERVICES — "CarMedia Pro" reference design
   Прилага се САМО за секцията с услугите (#services) на
   началната страница, по образец на предоставения референтен
   HTML дизайн (тъмна тема с оранжев акцент).
   ===================================================== */
.services-section-pro {
        --sp-bg: #0b0f17;
        --sp-surface: #161e2e;
        --sp-surface-light: #1e293b;
        --sp-accent: #e2101a;
        --sp-accent-light: #ffcc00;
        --sp-text: #f1f5f9;
        --sp-text-muted: #94a3b8;
        --sp-border: rgba(255,255,255,0.08);
        --sp-radius: 14px;
        background: var(--sp-bg);
        padding: 5rem 0;
}
.section-head-pro {
        text-align: center;
        max-width: 640px;
        margin: 0 auto 3rem;
}
.section-eyebrow-pro {
        display: inline-block;
        font-size: 0.8rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--sp-accent);
        margin-bottom: 0.6rem;
}
.services-section-pro .section-head-pro h2 {
        font-size: clamp(1.6rem, 3.5vw, 2.4rem);
        font-weight: 900;
        line-height: 1.15;
        color: var(--sp-text);
        margin: 0;
}
.services-grid-pro {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.75rem;
}
.service-card-pro {
        background: var(--sp-surface);
        border: 1px solid var(--sp-border);
        border-radius: var(--sp-radius);
        overflow: hidden;
        position: relative;
        transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s, border-color 0.35s;
}
.service-card-pro:hover {
        transform: translateY(-10px) scale(1.01);
        border-color: rgba(226,16,26,0.35);
        box-shadow: 0 30px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(226,16,26,0.12);
}
.service-card-pro .card-visual {
        height: 170px;
        position: relative;
        overflow: hidden;
        background: var(--sp-surface-light);
        display: flex;
        align-items: center;
        justify-content: center;
}
.service-card-pro .card-visual::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 40%, rgba(11,15,23,0.9) 100%);
        z-index: 1;
}
.service-card-pro .card-visual .emoji {
        font-size: 3.6rem;
        line-height: 1;
        z-index: 2;
        filter: grayscale(20%);
        transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
        display: block;
}
.service-card-pro:hover .card-visual .emoji { transform: scale(1.15) rotate(-4deg); }
.service-card-pro .card-body { padding: 1.4rem 1.5rem 1.6rem; }
.service-card-pro .card-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.4rem; color: var(--sp-text); }
.service-card-pro .card-desc { font-size: 0.9rem; color: var(--sp-text-muted); line-height: 1.5; margin-bottom: 1.1rem; }
.service-card-pro .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.service-card-pro .card-price { font-size: 0.88rem; font-weight: 700; color: var(--sp-accent-light); white-space: nowrap; }
.service-card-pro .card-link {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--sp-text);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        white-space: nowrap;
}
.service-card-pro .card-link::after { content: '→'; transition: transform 0.2s; display: inline-block; }
.service-card-pro:hover .card-link::after { transform: translateX(4px); }


/* =====================================================
   NAV TOGGLE (mobile)
   ===================================================== */
.nav-toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 8px;
        cursor: pointer;
        padding: 0;
}
.nav-toggle-bar {
        display: block;
        height: 2px;
        width: 22px;
        background: #fff;
        margin: 0 auto;
        border-radius: 2px;
        transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
        /* Хамбургерът да е най-вляво (преди логото), а не по средата на
           реда - на средните ширини .nav-wrapper има 3 видими флекс елемента
           (лого, бутон, количка/телефон) и justify-content:space-between ги
           разпределяше равномерно, което буташе бутона в центъра. */
        .nav-wrapper { justify-content: flex-start; }
        .nav-toggle { display: inline-flex; order: -1; margin-right: 14px; }
        .nav-right { margin-left: auto; }
        .nav-links {
                position: fixed;
                inset: 76px 0 auto 0;
                background: rgba(20,20,20,0.98);
                flex-direction: column;
                gap: 0;
                padding: 12px 0;
                transform: translateY(-999%);
                transition: transform 0.3s ease;
                border-bottom: 1px solid rgba(255,255,255,0.08);
                max-height: calc(100vh - 76px);
                overflow-y: auto;
        }
        .nav-links.is-open { transform: translateY(0); }
        .nav-links li { width: 100%; }
        .nav-links a { display: block; padding: 14px 24px; }
        .nav-links a:hover { background: rgba(226,16,26,0.1); }
        .nav-links-phone { display: block; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 6px; padding-top: 6px; }
        .btn-nav-cta { display: none; }
}


/* =====================================================
   SHOP ARCHIVE — Търсачка / Филтър / Сортиране / 4x3 решетка
   ===================================================== */
.shop-archive { padding: 60px 0 80px; background: var(--color-light); }
.shop-archive .container { max-width: 1280px; }

.shop-archive-header { text-align: center; margin-bottom: 36px; padding-top: 12px; }
.shop-archive-header .section-eyebrow {
        display: inline-block;
        color: var(--color-primary);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 0.78rem;
        margin-bottom: 8px;
}
.shop-archive-title { font-size: 2.2rem; margin-bottom: 8px; }
.shop-archive-subtitle { color: var(--color-gray); margin: 0 auto; max-width: 640px; }

/* ТУЛБАР */
.shop-toolbar {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 16px;
        align-items: end;
        background: var(--color-white);
        padding: 18px 22px;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        margin-bottom: 36px;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
}
@media (max-width: 900px) {
        .shop-toolbar { grid-template-columns: 1fr 1fr; }
        .shop-toolbar .shop-search-form { grid-column: 1 / -1; }
}
/* Под 560px подредбата минава изцяло в 1 колона: всеки елемент (търсачка,
   категория, сортиране, брояч) заема цялата ширина, един под друг, за да
   не се "чупи"/излиза настрани търсачката при тесен екран. */
@media (max-width: 560px) {
        .shop-toolbar {
                grid-template-columns: 1fr;
                padding: 16px;
                gap: 14px;
        }
        .shop-toolbar .shop-search-form,
        .shop-toolbar .shop-filter-group,
        .shop-toolbar .shop-sort-group,
        .shop-toolbar .shop-results-count {
                grid-column: 1 / -1;
                width: 100%;
                max-width: 100%;
        }
        .shop-toolbar .shop-filter-select,
        .shop-toolbar .orderby {
                width: 100%;
                min-width: 0;
        }
        .shop-results-count {
                text-align: left;
                padding-bottom: 0;
                white-space: normal;
        }
}

.shop-search-form {
        display: flex;
        align-items: center;
        position: relative;
        background: var(--color-light);
        border: 1px solid var(--color-border);
        border-radius: 50px;
        padding: 4px 4px 4px 44px;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        flex-wrap: nowrap;
}
.shop-search-field { min-width: 0; }
.shop-search-submit { flex-shrink: 0; white-space: nowrap; }
.shop-search-icon {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1rem;
        pointer-events: none;
        opacity: 0.6;
}
.shop-search-field {
        flex: 1;
        border: none !important;
        background: transparent;
        padding: 10px 4px !important;
        font-size: 0.9rem;
}
.shop-search-field:focus {
        outline: none;
        box-shadow: none !important;
}
.shop-search-submit {
        background: var(--color-primary);
        color: #fff;
        border: none;
        border-radius: 50px;
        padding: 9px 22px;
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        transition: var(--transition);
}
.shop-search-submit:hover { background: var(--color-primary-dark); }

.shop-filter-group { display: flex; flex-direction: column; gap: 6px; }
.shop-filter-label {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-gray);
}
.shop-filter-select,
.shop-toolbar .orderby {
        padding: 10px 36px 10px 14px !important;
        border-radius: 8px !important;
        border: 1px solid var(--color-border) !important;
        background: var(--color-white) !important;
        font-size: 0.88rem !important;
        font-weight: 600;
        cursor: pointer;
        min-width: 160px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
}
.shop-toolbar .orderby { display: block; width: 100%; }

.shop-results-count {
        font-size: 0.82rem;
        color: var(--color-gray);
        font-weight: 600;
        white-space: nowrap;
        align-self: end;
        padding-bottom: 12px;
}

/* 4-КОЛОННА РЕШЕТКА */
.woocommerce ul.products,
ul.products,
.products-section .products-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
}
@media (max-width: 1100px) {
        .woocommerce ul.products,
        ul.products,
        .products-section .products-grid {
                grid-template-columns: repeat(3, 1fr) !important;
        }
}
@media (max-width: 768px) {
        .woocommerce ul.products,
        ul.products,
        .products-section .products-grid {
                grid-template-columns: repeat(2, 1fr) !important;
        }
}
@media (max-width: 480px) {
        .woocommerce ul.products,
        ul.products,
        .products-section .products-grid {
                grid-template-columns: 1fr !important;
        }
}

/* ПРОДУКТОВА КАРТА — по-професионален вид */
.woocommerce ul.products li.product,
.product-card {
        position: relative;
        background: var(--color-white);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s;
        margin: 0 !important;
        width: auto !important;
}
.woocommerce ul.products li.product:hover,
.product-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
}
/* Обвивката на снимката е квадратна котва (aspect-ratio), а всяка <img>
   вътре е абсолютно позиционирана върху нея с object-fit: cover — така
   двете снимки лежат точно една върху друга и hover-ефектът е плавен
   crossfade (opacity), вместо display:none/block, което чупеше layout-а. */
.woocommerce ul.products li.product .product-image,
.product-card .product-image {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: var(--color-light);
        margin: 0 !important;
}
.woocommerce ul.products li.product .product-image img,
.product-card .product-image img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: 0 !important;
        transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.woocommerce ul.products li.product .product-image img:nth-child(2),
.product-card .product-image img:nth-child(2) {
        opacity: 0;
}
.woocommerce ul.products li.product:hover .product-image img:nth-child(1),
.product-card:hover .product-image img:nth-child(1) {
        opacity: 0;
}
.woocommerce ul.products li.product:hover .product-image img:nth-child(2),
.product-card:hover .product-image img:nth-child(2) {
        opacity: 1;
}
.woocommerce ul.products li.product:hover .product-image img,
.product-card:hover .product-image img {
        transform: scale(1.06);
}

.product-card-inner { display: flex; flex-direction: column; height: 100%; }
.woocommerce ul.products li.product .product-body,
.product-info,
.product-body {
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product-title {
        font-size: 1rem !important;
        font-weight: 700;
        margin: 0 0 4px !important;
        color: var(--color-dark);
        line-height: 1.3;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a { color: inherit; }
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover,
.product-title a:hover { color: var(--color-primary); }

.product-rating { font-size: 0.78rem; color: #f59e0b; }
.product-rating .star-rating { float: none; }

.woocommerce ul.products li.product .price,
.product-price {
        color: var(--color-primary);
        font-weight: 800;
        font-size: 1.1rem !important;
        margin: 0 !important;
}
.woocommerce ul.products li.product .price ins,
.product-price ins {
        color: var(--color-primary);
        text-decoration: none;
        font-weight: 800;
}
.woocommerce ul.products li.product .price del,
.product-price del {
        color: var(--color-gray);
        opacity: 0.7;
        font-weight: 500;
        margin-right: 6px;
}

.product-stock-mini {
        font-size: 0.74rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
}
.product-stock-mini.in-stock { color: #16a34a; }
.product-stock-mini.out-of-stock { color: #dc2626; }

/* SALE! бадж — жълто на черно = максимално внимание, като предупредителна лента */
.product-badge,
.woocommerce ul.products li.product .onsale {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 2;
        background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
        color: var(--color-dark) !important;
        border-radius: 10px;
        padding: 8px 12px;
        font-size: 0.7rem !important;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin: 0 !important;
        min-width: 56px;
        text-align: center;
        box-shadow: 0 4px 14px rgba(255,204,0,0.5);
        line-height: 1.2;
        animation: badgePulse 2.4s ease-in-out infinite;
}
@keyframes badgePulse {
        0%, 100% { box-shadow: 0 4px 14px rgba(255,204,0,0.5); }
        50%      { box-shadow: 0 4px 22px rgba(255,204,0,0.85); }
}
.product-badge-sale { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.product-badge-sale .badge-text { font-size: 0.95rem; font-weight: 900; line-height: 1; }
.product-badge-sale .badge-label { font-size: 0.55rem; opacity: 0.9; letter-spacing: 0.1em; }

.woocommerce span.onsale {
        /* single product sale badge - removed as it looked like a "red pill" separator */
        display: none !important;
}

/* ПРОДУКТОВИ БУТОНИ — Добави + Количка */
.product-cta-row {
        display: flex;
        flex-wrap: wrap; /* Allow buttons to stack if they don't fit */
        gap: 8px;
        margin-top: auto;
        padding-top: 12px;
}
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 11px 18px !important;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.85rem;
        border: 2px solid transparent;
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
        text-decoration: none !important;
        line-height: 1.2;
}

.btn-add-cart-loop,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.ajax_add_to_cart {
        flex: 1;
        background: var(--color-primary);
        color: #fff !important;
        border-color: var(--color-primary);
}
.btn-add-cart-loop:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product .button.ajax_add_to_cart:hover {
        background: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
        transform: translateY(-2px);
}
.btn-add-cart-loop.loading {
        opacity: 0.7;
        pointer-events: none;
}
.btn-add-cart-loop.added::after {
        content: ' ✓';
        margin-left: 4px;
}

/* "Количка" — постоянен бутон, винаги видим до "Добави" */
.btn-cart-loop {
        background: var(--color-white);
        color: var(--color-dark) !important;
        border-color: var(--color-border);
}
.btn-cart-loop:hover {
        background: var(--color-dark);
        color: #fff !important;
        border-color: var(--color-dark);
}

/* "Виж в количка" — динамичен бутон, показва се само след добавяне
   (или ако продуктът вече е в количката при зареждане) */
.btn-view-cart-loop,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce a.added_to_cart {
        background: var(--color-primary-dark);
        color: #fff !important;
        border-color: var(--color-primary-dark);
        flex: 1 0 100%; /* Force full width and stack under the main buttons */
        padding: 11px 16px !important;
        margin-top: 4px;
}
.btn-view-cart-loop:hover,
.woocommerce ul.products li.product .added_to_cart:hover,
.woocommerce a.added_to_cart:hover {
        background: var(--color-dark);
        color: #fff !important;
        border-color: var(--color-dark);
}
.js-view-cart.is-hidden {
        display: none !important;
}

/* Single product — бутони "Добави" и "Количка" */
.single-product-cta {
        display: flex;
        gap: 12px;
        margin: 22px 0 12px;
        flex-wrap: wrap;
}
.single-product-cta .single_add_to_cart_button,
.woocommerce div.product form.cart .button {
        flex: 1;
        min-width: 200px;
        background: var(--color-primary);
        color: #fff !important;
        border-color: var(--color-primary);
        padding: 14px 28px !important;
        font-size: 0.95rem !important;
        border-radius: 50px;
        font-weight: 700;
}
.single-product-cta .single_add_to_cart_button:hover {
        background: var(--color-primary-dark);
        transform: translateY(-2px);
}
.btn-view-cart-single {
        background: var(--color-white);
        color: var(--color-dark) !important;
        border: 2px solid var(--color-border);
        padding: 14px 24px !important;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.95rem;
}
.btn-view-cart-single:hover {
        background: var(--color-dark);
        color: #fff !important;
        border-color: var(--color-dark);
}
/* Динамичното "Виж в количка" до постоянното "Количка" на single продукта */
.single-product-cta .js-view-cart {
        background: var(--color-primary-dark);
        color: #fff !important;
        border-color: var(--color-primary-dark);
}
.single-product-cta .js-view-cart:hover {
        background: var(--color-dark);
        border-color: var(--color-dark);
}
.single-product-cta .js-view-cart.is-hidden {
        display: none !important;
}

/* Хайлайт на реда в количката, към който сочи "Виж в количка" */
.cart-item-highlight {
        animation: carmediaCartHighlight 2.2s ease;
}
@keyframes carmediaCartHighlight {
        0%   { background: rgba(226, 16, 26, 0.22); }
        100% { background: transparent; }
}

/* Малка категорийна лента на продуктовата карта в магазина */
.product-card-cats {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 4px;
}

/* Пагинация */
.shop-pagination,
.blog-pagination,
.pagination,
nav.woocommerce-pagination {
        margin-top: 40px;
        text-align: center;
}
.shop-pagination .page-numbers,
.blog-pagination .page-numbers,
.woocommerce-pagination .page-numbers,
.pagination .page-numbers {
        display: inline-flex;
        gap: 6px;
        list-style: none;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
        justify-content: center;
}
.shop-pagination .page-numbers li,
.blog-pagination .page-numbers li,
.woocommerce-pagination .page-numbers li,
.pagination .page-numbers li { list-style: none; }
.shop-pagination .page-numbers a,
.shop-pagination .page-numbers span,
.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span,
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span,
.pagination .page-numbers a,
.pagination .page-numbers span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        height: 42px;
        padding: 0 12px;
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 10px;
        color: var(--color-dark);
        font-weight: 600;
        font-size: 0.88rem;
        text-decoration: none;
        transition: var(--transition);
}
.shop-pagination .page-numbers a:hover,
.blog-pagination .page-numbers a:hover,
.woocommerce-pagination .page-numbers a:hover,
.pagination .page-numbers a:hover {
        background: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
}
.shop-pagination .page-numbers .current,
.blog-pagination .page-numbers .current,
.woocommerce-pagination .page-numbers .current,
.pagination .page-numbers .current {
        background: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
}
.shop-pagination .page-numbers .dots,
.blog-pagination .page-numbers .dots { border: none; background: transparent; }

/* ==============================
   SINGLE PRODUCT — галерия хоризонтална и центрирана
   ============================== */
.single-product-wrapper { padding: 30px 0 60px; background: var(--color-light); }
.single-product-wrapper .container { max-width: 1200px; }

.woocommerce div.product .woocommerce-breadcrumb {
        margin-bottom: 28px;
        font-size: 0.82rem;
        color: var(--color-gray);
}
.woocommerce div.product .woocommerce-breadcrumb a { color: var(--color-primary); }

.single-product-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: start;
        background: var(--color-white);
        border-radius: var(--radius);
        padding: 40px;
        box-shadow: var(--shadow);
}
@media (max-width: 900px) {
        .single-product-grid { grid-template-columns: 1fr; gap: 32px; padding: 24px; }
}

/* ГАЛЕРИЯ — центрирана, с оразмерени миниатюри под главната снимка.
 * ВАЖНО: тук вече НЕ пипаме display/flex-direction на самата
 * .woocommerce-product-gallery, нито крием снимки "докато JS не тръгне".
 * Именно тези намеси чупеха вградения WooCommerce/FlexSlider механизъм.
 * След като темата вече декларира wc-product-gallery-slider/zoom/lightbox
 * поддръжка (виж functions.php), просто оставяме WooCommerce да върши
 * работата си, точно както в старата версия, в която темата изобщо
 * нямаше собствен woocommerce/ override — само центриране и размери. */
.single-product-gallery { display: flex; flex-direction: column; align-items: center; }

.woocommerce div.product div.images,
.woocommerce-product-gallery {
        width: 100% !important;
        max-width: 520px;
        float: none !important;
        margin: 0 auto !important;
}

.woocommerce-product-gallery__wrapper {
        width: 100%;
        margin: 0 auto !important;
}

.woocommerce-product-gallery__image {
        text-align: center;
}
.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img {
        display: block;
        width: 100%;
        margin: 0 auto;
        border-radius: var(--radius);
        background: var(--color-light);
        aspect-ratio: 1 / 1;
        object-fit: contain;
}

/* ТУМБНЕЙЛИ — хоризонтално, под главната снимка */
.woocommerce-product-gallery .flex-control-thumbs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        margin: 18px auto 0 !important;
        max-width: 520px;
        padding: 0;
}
.woocommerce-product-gallery .flex-control-thumbs li {
        list-style: none;
        width: 80px;
        flex: 0 0 80px;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
        border: 2px solid transparent;
        cursor: pointer;
        transition: var(--transition);
        opacity: 0.6;
}
.woocommerce-product-gallery .flex-control-thumbs li img:hover { opacity: 0.9; }
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
        opacity: 1;
        border-color: var(--color-primary);
}

/* Навигационни стрелки за галерията (предишна/следваща снимка) —
 * добавят се само по избор от JS, ако галерията има повече от 1 снимка. */
.woocommerce-product-gallery {
        position: relative;
}
.woocommerce-product-gallery .gallery-prev,
.woocommerce-product-gallery .gallery-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(26,26,26,0.85);
        color: #fff;
        border: none;
        font-size: 1.4rem;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
        transition: var(--transition);
        line-height: 1;
}
.woocommerce-product-gallery .gallery-prev { left: 8px; }
.woocommerce-product-gallery .gallery-next { right: 8px; }
.woocommerce-product-gallery .gallery-prev:hover,
.woocommerce-product-gallery .gallery-next:hover {
        background: var(--color-primary);
}

/* ИНФО панел — заглавие / цена / описание */
.single-product-info { padding-top: 8px; }
.single-product-info .product_title {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 12px;
        line-height: 1.2;
}
.single-product-info .woocommerce-product-rating { margin-bottom: 14px; font-size: 0.9rem; }
.single-product-info .woocommerce-review-link { color: var(--color-gray); }

.single-product-info .price {
        font-size: 1.8rem !important;
        color: var(--color-primary);
        font-weight: 800;
        margin-bottom: 18px !important;
        display: block;
}
.single-product-info .price del { color: var(--color-gray); font-weight: 500; margin-right: 8px; }
.single-product-info .price ins { color: var(--color-primary); text-decoration: none; }

.woocommerce-product-details__short-description {
        margin: 0 0 22px;
        color: var(--color-gray);
        font-size: 0.95rem;
        line-height: 1.7;
        padding: 16px 0;
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
}

.woocommerce div.product form.cart {
        display: flex !important;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        margin: 0 0 20px;
        padding: 0;
        border: none;
}
.woocommerce div.product form.cart .quantity {
        flex: 0 0 auto;
        margin: 0 !important;
}
.woocommerce .quantity .qty {
        height: 50px;
        width: 70px;
        border-radius: 50px;
        border: 2px solid var(--color-border);
        text-align: center;
        font-size: 1rem;
        font-weight: 700;
}

.woocommerce div.product .product_meta {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--color-border);
        font-size: 0.85rem;
        color: var(--color-gray);
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 6px; }
.woocommerce div.product .product_meta a { color: var(--color-primary); }

/* Табове под продукта */
.single-product-tabs {
        margin-top: 40px;
        background: var(--color-white);
        border-radius: var(--radius);
        padding: 32px;
        box-shadow: var(--shadow);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
        padding: 0;
        margin: 0 0 24px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        border-bottom: 2px solid var(--color-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
        background: transparent;
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
        display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
        background: transparent;
        border-bottom: 3px solid var(--color-primary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
        display: inline-block;
        padding: 12px 20px;
        color: var(--color-gray);
        font-weight: 700;
        font-size: 0.92rem;
        text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--color-primary); }

.woocommerce div.product .woocommerce-tabs .panel {
        margin: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        color: var(--color-dark);
        line-height: 1.7;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.3rem; margin-bottom: 12px; }

/* Related products */
.woocommerce div.product .related,
.woocommerce div.product .upsells {
        margin-top: 32px;
}
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
        font-size: 1.4rem;
        margin-bottom: 20px;
}

/* ==============================
   BLOG / POSTS — дизайн като продуктовия
   ============================== */
.blog-page-main,
.search-results-page { padding: 50px 0 80px; background: var(--color-light); }
.blog-page-main .container,
.search-results-page .container { max-width: 1280px; }

.blog-cards-grid,
.posts-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin: 0;
        padding: 0;
        list-style: none;
}
@media (max-width: 1100px) {
        .blog-cards-grid, .posts-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
        .blog-cards-grid, .posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
        .blog-cards-grid, .posts-grid { grid-template-columns: 1fr; }
}

.post-card {
        background: var(--color-white);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s;
        display: flex;
        flex-direction: column;
        height: 100%;
}
.post-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
}
.post-card-image {
        display: block;
        aspect-ratio: 3 / 2;
        background: var(--color-light);
        overflow: hidden;
}
.post-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
}
.post-card:hover .post-card-image img { transform: scale(1.06); }
.post-card-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        background: linear-gradient(135deg, #f5f5f5, #e5e7eb);
}
.post-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 700;
}
.post-card-date { color: var(--color-gray); }
.post-card-cat {
        background: rgba(226,16,26,0.12);
        color: var(--color-primary);
        padding: 2px 10px;
        border-radius: 50px;
}
.post-card-title {
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
        margin: 4px 0;
}
.post-card-title a { color: var(--color-dark); }
.post-card-title a:hover { color: var(--color-primary); }
.post-card-excerpt {
        color: var(--color-gray);
        font-size: 0.88rem;
        line-height: 1.55;
        margin: 0;
        flex: 1;
}
.post-card-link { margin-top: 12px; align-self: flex-start; }

.no-results {
        text-align: center;
        padding: 60px 20px;
        color: var(--color-gray);
        font-size: 1rem;
        background: var(--color-white);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
}

/* Single post */
.single-post-main { padding: 50px 0 80px; background: var(--color-light); }
.single-post-main .container { max-width: 860px; }
.single-post-article {
        background: var(--color-white);
        border-radius: var(--radius);
        padding: 48px 56px;
        box-shadow: var(--shadow);
}
@media (max-width: 768px) {
        .single-post-article { padding: 28px; }
}
.single-post-meta-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 0.78rem; }
.single-post-cat {
        background: var(--color-primary);
        color: #fff;
        padding: 4px 12px;
        border-radius: 50px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-decoration: none;
}
.single-post-date { color: var(--color-gray); font-weight: 600; }
.single-post-title { font-size: 2.1rem; line-height: 1.25; margin-bottom: 12px; }
.single-post-author { font-size: 0.88rem; color: var(--color-gray); }
.single-post-author strong { color: var(--color-dark); }
.single-post-thumbnail { margin: 24px 0 28px; border-radius: var(--radius); overflow: hidden; }
.single-post-thumbnail img { width: 100%; height: auto; display: block; }
.single-post-content { font-size: 1rem; line-height: 1.8; color: var(--color-dark); }
.single-post-content h2, .single-post-content h3 { margin-top: 28px; }
.single-post-content p { margin: 0 0 1.2em; }
.single-post-content img { border-radius: 8px; margin: 16px 0; }
.single-post-content blockquote {
        border-left: 4px solid var(--color-primary);
        padding: 12px 20px;
        margin: 18px 0;
        background: var(--color-light);
        font-style: italic;
        color: var(--color-gray);
        border-radius: 0 8px 8px 0;
}
.single-post-footer {
        margin-top: 32px;
        padding-top: 20px;
        border-top: 1px solid var(--color-border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
}
.single-post-tags .tags-label {
        font-weight: 700;
        color: var(--color-gray);
        margin-right: 6px;
        font-size: 0.85rem;
}
.single-post-tags a {
        color: var(--color-primary);
        font-weight: 600;
        font-size: 0.85rem;
        margin-right: 6px;
}

.post-navigation {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 32px;
}
@media (max-width: 768px) {
        .post-navigation { grid-template-columns: 1fr; }
}
.post-nav-link {
        background: var(--color-white);
        border-radius: var(--radius);
        padding: 18px 22px;
        box-shadow: var(--shadow);
        text-decoration: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
        transition: var(--transition);
}
.post-nav-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.post-nav-next { text-align: right; }
.post-nav-direction {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
}
.post-nav-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--color-dark);
}

/* Search form в search.php */
.search-form-wrapper { max-width: 480px; margin: 20px auto 0; }
.search-form-wrapper .search-form {
        display: flex;
        gap: 8px;
        background: var(--color-white);
        padding: 8px;
        border-radius: 50px;
        box-shadow: var(--shadow);
}
.search-form-wrapper .search-field {
        flex: 1;
        border: none !important;
        background: transparent;
        padding: 8px 14px !important;
}
.search-form-wrapper .search-submit {
        background: var(--color-primary);
        color: #fff;
        border: none;
        padding: 10px 22px;
        border-radius: 50px;
        font-weight: 700;
        cursor: pointer;
}

/* site-main-full за страници без сайдбар */
.site-main-full {
        padding: 60px 0 80px;
        background: var(--color-light);
        min-height: 50vh;
}
.site-main-full .container { max-width: 1280px; }

/* page-content-wrapper */
.page-content-wrapper { padding: 50px 0 80px; background: var(--color-white); }
.page-content-wrapper .entry-title { font-size: 2rem; margin-bottom: 18px; }
.page-content-wrapper .entry-thumbnail { margin: 0 0 28px; border-radius: var(--radius); overflow: hidden; }
.page-content-wrapper .entry-content { line-height: 1.8; color: var(--color-dark); }
.page-content-wrapper .entry-content h2,
.page-content-wrapper .entry-content h3 { margin-top: 28px; }

/* Галерии в съдържанието на публикация (WP Gallery блок/шорткод) — темата
 * досега изобщо не ги стилизираше, затова седяха центрирани/натрупани в
 * най-горния край на статията с произволни размери. Тук ги подреждаме в
 * равномерна мрежа с еднакъв мащаб на всяка снимка, независимо от
 * оригиналните ѝ пропорции. */
.entry-content .wp-block-gallery,
.entry-content .gallery {
        display: grid !important;
        grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
        gap: 12px;
        margin: 28px 0;
        list-style: none;
        padding: 0;
}
.entry-content .gallery-columns-1 { --gallery-columns: 1; }
.entry-content .gallery-columns-2 { --gallery-columns: 2; }
.entry-content .gallery-columns-4 { --gallery-columns: 4; }
.entry-content .gallery-columns-5 { --gallery-columns: 5; }
.entry-content .gallery-columns-6 { --gallery-columns: 6; }
@media (max-width: 640px) {
        .entry-content .wp-block-gallery,
        .entry-content .gallery { grid-template-columns: repeat(2, 1fr) !important; }
}
.entry-content .wp-block-gallery figure,
.entry-content .gallery .gallery-item {
        margin: 0 !important;
        width: auto !important;
        float: none !important;
}
.entry-content .wp-block-gallery img,
.entry-content .gallery img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
        border-radius: 8px;
        margin: 0 !important;
}
.entry-content .gallery-caption {
        font-size: 0.8rem;
        opacity: 0.7;
        margin-top: 6px;
        text-align: center;
}