/* ============================================
   HolyPet Design System
   Comida cocinada natural para perros y gatos
   Colors: #00c4ff (primary), #0099cc (dark), #66d9ff (light)
   ============================================ */

/* Google Fonts - Poppins for modern, friendly feel */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
    --hp-primary: #00c4ff;
    --hp-primary-dark: #0099cc;
    --hp-primary-darker: #007a99;
    --hp-primary-light: #66d9ff;
    --hp-primary-lighter: #b3ecff;
    --hp-primary-subtle: #e6f9ff;

    --hp-secondary: #ff6b35;
    --hp-secondary-dark: #e55a2b;
    --hp-secondary-light: #ff8c5c;

    --hp-success: #40994a;
    --hp-warning: #f5a623;
    --hp-error: #e74c3c;

    --hp-neutral-900: #1a1a2e;
    --hp-neutral-800: #2d2d44;
    --hp-neutral-700: #4a4a5a;
    --hp-neutral-600: #6b6b7b;
    --hp-neutral-500: #8e8e9e;
    --hp-neutral-400: #b0b0c0;
    --hp-neutral-300: #d0d0dd;
    --hp-neutral-200: #e8e8f0;
    --hp-neutral-100: #f5f5fa;
    --hp-neutral-50: #fafafe;

    --hp-white: #ffffff;
    --hp-black: #0f0f1a;

    --hp-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    --hp-radius-sm: 0.375rem;
    --hp-radius-md: 0.75rem;
    --hp-radius-lg: 1rem;
    --hp-radius-xl: 1.5rem;
    --hp-radius-full: 9999px;

    --hp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --hp-shadow-md: 0 4px 12px rgba(0, 196, 255, 0.1);
    --hp-shadow-lg: 0 8px 30px rgba(0, 196, 255, 0.15);
    --hp-shadow-xl: 0 20px 60px rgba(0, 196, 255, 0.2);

    --hp-transition-fast: 0.15s ease;
    --hp-transition-base: 0.3s ease;
    --hp-transition-slow: 0.5s ease;
}

/* ============================================
   Base Styles
   ============================================ */
body {
    font-family: var(--hp-font-family) !important;
    color: var(--hp-neutral-800);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 196, 255, 0.4); }
    50% { box-shadow: 0 0 20px 10px rgba(0, 196, 255, 0); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Animation utility classes */
.hp-animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.hp-animate-fade-in-down {
    animation: fadeInDown 0.5s ease forwards;
}

.hp-animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.hp-animate-slide-left {
    animation: slideInLeft 0.6s ease forwards;
}

.hp-animate-slide-right {
    animation: slideInRight 0.6s ease forwards;
}

.hp-animate-scale-in {
    animation: scaleIn 0.5s ease forwards;
}

.hp-animate-float {
    animation: float 3s ease-in-out infinite;
}

.hp-animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Stagger delays */
.hp-delay-100 { animation-delay: 0.1s; opacity: 0; }
.hp-delay-200 { animation-delay: 0.2s; opacity: 0; }
.hp-delay-300 { animation-delay: 0.3s; opacity: 0; }
.hp-delay-400 { animation-delay: 0.4s; opacity: 0; }
.hp-delay-500 { animation-delay: 0.5s; opacity: 0; }
.hp-delay-600 { animation-delay: 0.6s; opacity: 0; }

/* ============================================
   HolyPet Components
   ============================================ */

.product-quantity .col-3 .no-padding {
    max-width: 10%;
}

/* Hero Section */
.hp-hero {
    background: linear-gradient(135deg, var(--hp-primary-subtle) 0%, var(--hp-white) 50%, var(--hp-primary-subtle) 100%);
    position: relative;
    overflow: hidden;
    padding: 80px 0;
}

.hp-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 196, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.hp-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 196, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.hp-hero-title {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--hp-neutral-900);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.hp-hero-title span {
    color: var(--hp-primary);
    position: relative;
}

.hp-hero-subtitle {
    font-size: 1.2rem;
    color: var(--hp-neutral-600);
    font-weight: 400;
    max-width: 540px;
    line-height: 1.7;
}

/* Buttons */
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--hp-radius-full);
    font-family: var(--hp-font-family);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all var(--hp-transition-base);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

.hp-btn-primary {
    background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-primary-dark) 100%);
    color: var(--hp-white);
    box-shadow: 0 4px 15px rgba(0, 196, 255, 0.3);
}

.hp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 196, 255, 0.4);
    color: var(--hp-white);
    text-decoration: none;
}

.hp-btn-secondary {
    background: var(--hp-white);
    color: var(--hp-primary-dark);
    border: 2px solid var(--hp-primary);
    box-shadow: var(--hp-shadow-sm);
}

.hp-btn-secondary:hover {
    background: var(--hp-primary-subtle);
    transform: translateY(-2px);
    box-shadow: var(--hp-shadow-md);
    text-decoration: none;
    color: var(--hp-primary-dark);
}

/* Cards */
.hp-card {
    background: var(--hp-white);
    border-radius: var(--hp-radius-lg);
    padding: 32px;
    box-shadow: var(--hp-shadow-sm);
    border: 1px solid var(--hp-neutral-200);
    transition: all var(--hp-transition-base);
    position: relative;
    overflow: hidden;
}

.hp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hp-shadow-lg);
    border-color: var(--hp-primary-light);
}

.hp-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--hp-radius-md);
    background: var(--hp-primary-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
    transition: all var(--hp-transition-base);
}

.hp-card:hover .hp-card-icon {
    background: var(--hp-primary);
    transform: scale(1.1);
}

.hp-card:hover .hp-card-icon svg {
    color: var(--hp-white);
}

/* Product Cards */
.hp-product-card {
    background: var(--hp-white);
    border-radius: var(--hp-radius-xl);
    overflow: hidden;
    box-shadow: var(--hp-shadow-sm);
    border: 1px solid var(--hp-neutral-200);
    transition: all var(--hp-transition-base);
}

.hp-product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hp-shadow-xl);
}

.hp-product-card-image {
    position: relative;
    padding-top: 95%;
    background: var(--hp-primary-subtle);
    overflow: hidden;
}

.hp-product-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--hp-transition-slow);
}

.hp-product-card:hover .hp-product-card-image img {
    transform: scale(1.05);
}

.hp-product-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--hp-primary);
    color: var(--hp-white);
    padding: 4px 12px;
    border-radius: var(--hp-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hp-product-card-body {
    padding: 24px;
}

.hp-product-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--hp-neutral-900);
    margin-bottom: 8px;
}

.hp-product-card-desc {
    font-size: 0.9rem;
    color: var(--hp-neutral-600);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* Section styles */
.hp-section {
    padding: 80px 0;
}

.hp-section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--hp-neutral-900);
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.hp-section-subtitle {
    font-size: 1.05rem;
    color: var(--hp-neutral-600);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 48px;
    line-height: 1.6;
}

/* Benefits strip */
.hp-benefits-strip {
    background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-primary-dark) 100%);
    color: var(--hp-white);
    padding: 20px 0;
}

.hp-benefits-strip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Testimonial */
.hp-testimonial {
    background: var(--hp-neutral-50);
    border-radius: var(--hp-radius-xl);
    padding: 40px;
    position: relative;
}

.hp-testimonial::before {
    content: '"';
    position: absolute;
    top: 16px;
    left: 24px;
    font-size: 4rem;
    color: var(--hp-primary-lighter);
    font-family: Georgia, serif;
    line-height: 1;
}

/* CTA Section */
.hp-cta {
    background: linear-gradient(135deg, var(--hp-neutral-900) 0%, var(--hp-neutral-800) 100%);
    color: var(--hp-white);
    border-radius: var(--hp-radius-xl);
    padding: 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hp-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 196, 255, 0.15) 0%, transparent 70%);
}

/* Grid layout */
.hp-grid {
    display: grid;
    gap: 24px;
}

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

@media (max-width: 992px) {
    .hp-grid-3, .hp-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .hp-hero-title { font-size: 2.4rem; }
    .hp-section { padding: 60px 0; }
}

@media only screen and (max-width: 992px) {
    .main-content-wrapper .vc-header>div.vc-small-screen img {
        max-width: 50px !important;
    }
    .outer-assets-container .image-container .magnifier>img {
        max-height: 500px !important;
    }
    .product-detail .quantity label[for="quantity-changer"] {
        width: 60% !important;
    }
}

@media (max-width: 768px) {
    .hp-grid-2, .hp-grid-3, .hp-grid-4 { grid-template-columns: 1fr; }
    .hp-hero { padding: 50px 0; }
    .hp-hero-title { font-size: 2rem; }
    .hp-section-title { font-size: 1.8rem; }
    .hp-cta { padding: 40px 24px; }
}

/* Ingredient tag */
.hp-ingredient-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--hp-primary-subtle);
    color: var(--hp-primary-dark);
    padding: 6px 14px;
    border-radius: var(--hp-radius-full);
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--hp-primary-lighter);
}

/* Navbar override */
.hp-navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hp-neutral-200);
    box-shadow: var(--hp-shadow-sm);
}

/* Footer override */
.hp-footer {
    background: var(--hp-neutral-900);
    color: var(--hp-neutral-400);
}

.hp-footer a {
    color: var(--hp-neutral-400);
    transition: color var(--hp-transition-fast);
}

.hp-footer a:hover {
    color: var(--hp-primary-light);
}

/* Comparison table */
.hp-comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--hp-radius-lg);
    overflow: hidden;
    box-shadow: var(--hp-shadow-sm);
}

.hp-comparison-table th {
    background: var(--hp-primary);
    color: var(--hp-white);
    padding: 16px 20px;
    font-weight: 600;
    text-align: left;
}

.hp-comparison-table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--hp-neutral-200);
}

.hp-comparison-table tr:nth-child(even) td {
    background: var(--hp-neutral-50);
}

.hp-comparison-table tr:last-child td {
    border-bottom: none;
}

/* Scroll reveal base */
.hp-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.hp-reveal.hp-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   HolyPet Global Overrides
   Sobrescritura de colores Velocity/Bagisto
   ============================================ */

/* === BOTONES PRINCIPALES (Add to Cart, Buy Now, Submit) === */
.btn-add-to-cart,
.add-to-cart-btn,
.addtocart,
.btn-primary,
.theme-btn,
.add-to-buttons .btn,
.product-actions .btn-primary,
.buynow,
.btn-add-to-cart-new {
    background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-primary-dark) 100%) !important;
    border-color: var(--hp-primary) !important;
    color: var(--hp-white) !important;
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
    border-radius: var(--hp-radius-md) !important;
    transition: all var(--hp-transition-base) !important;
    box-shadow: 0 4px 12px rgba(0, 196, 255, 0.25) !important;
}

.btn-add-to-cart:hover,
.add-to-cart-btn:hover,
.addtocart:hover,
.btn-primary:hover,
.theme-btn:hover,
.add-to-buttons .btn:hover,
.buynow:hover,
.btn-add-to-cart-new:hover {
    background: linear-gradient(135deg, var(--hp-primary-dark) 0%, var(--hp-primary-darker) 100%) !important;
    border-color: var(--hp-primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 196, 255, 0.35) !important;
    color: var(--hp-white) !important;
}

.btn-add-to-cart:active,
.add-to-cart-btn:active,
.btn-primary:active,
.theme-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 196, 255, 0.2) !important;
}

/* === BOTONES SECUNDARIOS === */
.btn-secondary,
.btn-outline,
.btn-default {
    background: var(--hp-white) !important;
    border: 2px solid var(--hp-primary) !important;
    color: var(--hp-primary-dark) !important;
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
    border-radius: var(--hp-radius-md) !important;
    transition: all var(--hp-transition-base) !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-default:hover {
    background: var(--hp-primary-subtle) !important;
    border-color: var(--hp-primary-dark) !important;
    color: var(--hp-primary-dark) !important;
    transform: translateY(-1px) !important;
}

/* === LINKS Y ANCHORS === */
a {
    color: var(--hp-primary-dark);
    transition: color var(--hp-transition-fast);
}

a:hover {
    color: var(--hp-primary);
}

/* === VELOCITY HEADER COLORS === */
.sticky-header,
header.sticky-header {
    background: linear-gradient(135deg, var(--hp-white) 0%, var(--hp-primary-subtle) 100%) !important;
    border-bottom: 2px solid var(--hp-primary-lighter) !important;
    font-family: var(--hp-font-family) !important;
}

#top,
nav#top {
    background: linear-gradient(135deg, var(--hp-neutral-900) 0%, var(--hp-neutral-800) 100%) !important;
}

nav#top a,
nav#top span,
nav#top .locale-icon,
nav#top select {
    color: var(--hp-neutral-300) !important;
    font-family: var(--hp-font-family) !important;
}

nav#top a:hover {
    color: var(--hp-primary-light) !important;
}

/* Header shadow on scroll */
header.header-shadow {
    box-shadow: 0 4px 20px rgba(0, 196, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(10px) !important;
}

/* === VELOCITY CATEGORY BAR === */
.velocity-divide-page .category-menu-list,
.main-category,
.sidebar-header > div {
    background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-primary-dark) 100%) !important;
    color: var(--hp-white) !important;
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
}

/* === PRODUCT CARDS (Velocity carousel) === */
.product-card,
.product-card-new,
.card,
.product-information {
    font-family: var(--hp-font-family) !important;
    border-radius: var(--hp-radius-lg) !important;
    border: 1px solid var(--hp-neutral-200) !important;
    transition: all var(--hp-transition-base) !important;
}

.product-card:hover,
.product-card-new:hover,
.card:hover {
    box-shadow: var(--hp-shadow-lg) !important;
    border-color: var(--hp-primary-lighter) !important;
    transform: translateY(-4px) !important;
}

.product-card .product-name a,
.product-card-new .product-name a,
.product-information .product-name a {
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
    color: var(--hp-neutral-900) !important;
}

.product-card .product-name a:hover,
.product-card-new .product-name a:hover {
    color: var(--hp-primary-dark) !important;
}

.product-card .product-price,
.product-card-new .product-price,
.product-information .product-price {
    color: var(--hp-primary-dark) !important;
    font-weight: 700 !important;
    font-family: var(--hp-font-family) !important;
}

/* === WISHLIST & COMPARE ICONS === */
.wishlist-icon .rango-heart,
.compare-icon,
.material-icons.text-down-3 {
    color: var(--hp-neutral-600) !important;
    transition: color var(--hp-transition-fast) !important;
}

.wishlist-icon:hover .rango-heart,
.compare-icon:hover {
    color: var(--hp-primary) !important;
}

/* === CART MINI === */
.mini-cart .badge,
.badge-wrapper .badge {
    background: var(--hp-primary) !important;
    color: var(--hp-white) !important;
}

.mini-cart-container,
.cart-dropdown {
    border-radius: var(--hp-radius-lg) !important;
    box-shadow: var(--hp-shadow-xl) !important;
    border: 1px solid var(--hp-neutral-200) !important;
    font-family: var(--hp-font-family) !important;
}

/* === BREADCRUMBS === */
.breadcrumb,
.breadcrumbs {
    font-family: var(--hp-font-family) !important;
}

.breadcrumb a,
.breadcrumbs a {
    color: var(--hp-primary-dark) !important;
}

/* === PAGINATION === */
.pagination .page-item.active .page-link {
    background: var(--hp-primary) !important;
    border-color: var(--hp-primary) !important;
    color: var(--hp-white) !important;
}

.pagination .page-link {
    color: var(--hp-primary-dark) !important;
    font-family: var(--hp-font-family) !important;
    border-radius: var(--hp-radius-sm) !important;
}

.pagination .page-link:hover {
    background: var(--hp-primary-subtle) !important;
    color: var(--hp-primary-dark) !important;
}

/* === FORM INPUTS === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select {
    font-family: var(--hp-font-family) !important;
    border-radius: var(--hp-radius-md) !important;
    border: 2px solid var(--hp-neutral-300) !important;
    transition: border-color var(--hp-transition-base), box-shadow var(--hp-transition-base) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--hp-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 196, 255, 0.12) !important;
    outline: none !important;
}

/* === ALERTS & NOTIFICATIONS === */
.alert-success,
.flash-success {
    background: var(--hp-primary-subtle) !important;
    border-color: var(--hp-primary-lighter) !important;
    color: var(--hp-primary-darker) !important;
    font-family: var(--hp-font-family) !important;
    border-radius: var(--hp-radius-md) !important;
}

/* === PRICE DISPLAY === */
.price,
.product-price .special-price,
.product-price .regular-price {
    font-family: var(--hp-font-family) !important;
    font-weight: 700 !important;
}

.product-price .special-price {
    color: var(--hp-primary-dark) !important;
}

/* === FOOTER === */
footer,
.footer-ct-content {
    background: var(--hp-neutral-900) !important;
    font-family: var(--hp-font-family) !important;
}

footer a {
    color: var(--hp-neutral-400) !important;
    transition: color var(--hp-transition-fast) !important;
}

footer a:hover {
    color: var(--hp-primary-light) !important;
}

footer h3,
footer h4,
footer .footer-heading {
    color: var(--hp-white) !important;
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
}

/* === GO TO TOP BUTTON === */
.go-top {
    background: var(--hp-primary) !important;
    border-radius: var(--hp-radius-full) !important;
    box-shadow: var(--hp-shadow-md) !important;
}

.go-top:hover {
    background: var(--hp-primary-dark) !important;
    box-shadow: var(--hp-shadow-lg) !important;
}

/* === PRODUCT PAGE SPECIFIC === */
.product-detail .product-heading {
    font-family: var(--hp-font-family) !important;
    font-weight: 700 !important;
    color: var(--hp-neutral-900) !important;
}

.product-detail .qty-btn,
.quantity .btn {
    border-color: var(--hp-primary) !important;
    color: var(--hp-primary-dark) !important;
    border-radius: var(--hp-radius-sm) !important;
}

.product-detail .qty-btn:hover,
.quantity .btn:hover {
    background: var(--hp-primary-subtle) !important;
}

/* === TABS (Product description, reviews) === */
.tabs ul li.active,
.tab-content .tab-pane {
    font-family: var(--hp-font-family) !important;
}

.tabs ul li.active a,
.nav-tabs .nav-link.active {
    color: var(--hp-primary-dark) !important;
    border-bottom-color: var(--hp-primary) !important;
    font-weight: 600 !important;
}

/* === STAR RATINGS === */
.rango-star-fill {
    color: var(--hp-warning) !important;
}

/* === VELOCITY PRODUCT COLLECTIONS (carousel titles) === */
.product-collections .title h2,
.product-collections .title span {
    font-family: var(--hp-font-family) !important;
    font-weight: 700 !important;
    color: var(--hp-neutral-900) !important;
}

/* === LABELS & BADGES ON PRODUCTS === */
.sticker.new,
.sticker.sale {
    background: var(--hp-primary) !important;
    color: var(--hp-white) !important;
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
    border-radius: var(--hp-radius-full) !important;
}

.sticker.sale {
    background: var(--hp-secondary) !important;
}

/* === CHECKOUT BUTTONS === */
.checkout-btn,
.place-order-btn,
#checkout .btn-primary {
    background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-primary-dark) 100%) !important;
    border-color: var(--hp-primary) !important;
    color: var(--hp-white) !important;
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
    border-radius: var(--hp-radius-md) !important;
    box-shadow: 0 4px 12px rgba(0, 196, 255, 0.25) !important;
    transition: all var(--hp-transition-base) !important;
}

.checkout-btn:hover,
.place-order-btn:hover,
#checkout .btn-primary:hover {
    background: linear-gradient(135deg, var(--hp-primary-dark) 0%, var(--hp-primary-darker) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 196, 255, 0.35) !important;
}

/* === SIDEBAR CATEGORY LINKS === */
.sidebar-category .category-list a,
.category-list-container a {
    font-family: var(--hp-font-family) !important;
    color: var(--hp-neutral-700) !important;
    transition: all var(--hp-transition-fast) !important;
}

.sidebar-category .category-list a:hover,
.category-list-container a:hover {
    color: var(--hp-primary-dark) !important;
    padding-left: 4px !important;
}

.sidebar-category .category-list a.active,
.category-list-container a.active {
    color: var(--hp-primary-dark) !important;
    font-weight: 600 !important;
}

/* === SEARCH RESULTS === */
.searched-result {
    border-radius: var(--hp-radius-lg) !important;
    box-shadow: var(--hp-shadow-lg) !important;
    font-family: var(--hp-font-family) !important;
}

/* === GLOBAL HEADING OVERRIDE === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--hp-font-family) !important;
}

/* ============================================
   HolyPet Cart Page Styles
   ============================================ */

/* Cart page title */
.cart-details > h2 {
    font-family: var(--hp-font-family) !important;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    color: var(--hp-neutral-900) !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid var(--hp-primary-lighter) !important;
}

/* Cart header row */
.cart-details .cart-header {
    background: var(--hp-neutral-50) !important;
    border-radius: var(--hp-radius-md) !important;
    padding: 14px 16px !important;
    margin-bottom: 16px !important;
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
    color: var(--hp-neutral-700) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* Cart items container */
.cart-details .cart-content {
    padding: 0 !important;
}

/* Each cart item row */
.cart-details .cart-item-list > .row,
.cart-details .cart-item-list > form > .row,
.cart-details .cart-content .row.col-12 {
    padding: 20px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--hp-neutral-200) !important;
    transition: background var(--hp-transition-fast) !important;
    align-items: center !important;
}

.cart-details .cart-item-list > .row:hover,
.cart-details .cart-content .row.col-12:hover {
    background: var(--hp-neutral-50) !important;
    border-radius: var(--hp-radius-md) !important;
}

.cart-details .cart-item-list > .row:last-child,
.cart-details .cart-content .row.col-12:last-child {
    border-bottom: none !important;
}

/* Product image in cart */
.cart-details .product-image-container img,
.cart-details .card-img-top {
    border-radius: var(--hp-radius-md) !important;
    border: 1px solid var(--hp-neutral-200) !important;
    object-fit: contain !important;
    background: var(--hp-neutral-50) !important;
    transition: transform var(--hp-transition-base) !important;
}

.cart-details .product-image-container:hover img,
.cart-details .card-img-top:hover {
    transform: scale(1.03) !important;
}

/* Product name in cart */
.cart-details .product-details-content .item-title a span,
.cart-details .item-title .link-color {
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: var(--hp-neutral-900) !important;
    transition: color var(--hp-transition-fast) !important;
}

.cart-details .product-details-content .item-title a:hover span,
.cart-details .item-title a:hover .link-color {
    color: var(--hp-primary-dark) !important;
}

/* Item price */
.cart-details .item-price .product-price span,
.cart-details .product-price span {
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
    color: var(--hp-neutral-700) !important;
    font-size: 0.95rem !important;
}

/* Subtotal per item */
.cart-details .product-price.fs18 span,
.cart-details .card-current-price {
    font-family: var(--hp-font-family) !important;
    font-weight: 700 !important;
    color: var(--hp-primary-dark) !important;
    font-size: 1.05rem !important;
}

/* Item attributes */
.cart-details .item-attribute {
    font-family: var(--hp-font-family) !important;
    font-size: 0.85rem !important;
    color: var(--hp-neutral-600) !important;
    margin-top: 4px !important;
}

.cart-details .item-attribute label {
    font-weight: 600 !important;
    color: var(--hp-neutral-700) !important;
}

/* Item actions (wishlist, remove) */
.cart-details .item-actions {
    margin-top: 12px !important;
}

.cart-details .item-actions a,
.cart-details .item-actions span {
    font-family: var(--hp-font-family) !important;
    font-size: 0.82rem !important;
    color: var(--hp-neutral-500) !important;
    transition: color var(--hp-transition-fast) !important;
}

.cart-details .item-actions a:hover,
.cart-details .item-actions a:hover span {
    color: var(--hp-error) !important;
}

/* Delete icon */
.cart-details .rango-delete {
    font-size: 18px !important;
    color: var(--hp-neutral-400) !important;
    transition: color var(--hp-transition-fast) !important;
}

.cart-details .rango-delete:hover {
    color: var(--hp-error) !important;
}

/* Quantity changer in cart */
.cart-details .product-quantity .quantity,
.cart-details .product-quantity .quantity-changer {
    display: inline-flex !important;
    align-items: center !important;
    border: 2px solid var(--hp-neutral-300) !important;
    border-radius: var(--hp-radius-md) !important;
    overflow: hidden !important;
}

.cart-details .product-quantity .quantity .btn,
.cart-details .product-quantity .quantity-changer .btn,
.cart-details .product-quantity button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--hp-neutral-100) !important;
    color: var(--hp-neutral-800) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background var(--hp-transition-fast) !important;
}

.cart-details .product-quantity .quantity .btn:hover,
.cart-details .product-quantity button:hover {
    background: var(--hp-primary-subtle) !important;
    color: var(--hp-primary-dark) !important;
}

.cart-details .product-quantity input {
    width: 40px !important;
    height: 32px !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    font-family: var(--hp-font-family) !important;
    border: none !important;
    border-left: 1px solid var(--hp-neutral-300) !important;
    border-right: 1px solid var(--hp-neutral-300) !important;
    border-radius: 0 !important;
    outline: none !important;
    padding: 0 !important;
}

/* Bottom misc buttons (continue shopping, update, remove all) */
.cart-details .misc {
    display: flex !important;
    gap: 12px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-content: space-around !important;
    padding: 24px 0 !important;
    border-top: 1px solid var(--hp-neutral-200) !important;
    margin-top: 16px !important;
}

.cart-details .misc .theme-btn,
.cart-details .misc button {
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    padding: 10px 20px !important;
    border-radius: var(--hp-radius-md) !important;
    border: 2px solid var(--hp-neutral-300) !important;
    background: var(--hp-white) !important;
    color: var(--hp-neutral-700) !important;
    transition: all var(--hp-transition-base) !important;
    text-decoration: none !important;
}

.cart-details .misc .theme-btn:hover,
.cart-details .misc button:hover {
    border-color: var(--hp-primary) !important;
    color: var(--hp-primary-dark) !important;
    background: var(--hp-primary-subtle) !important;
}

/* === ORDER SUMMARY SIDEBAR === */
.order-summary-container {
    position: sticky !important;
    top: 100px !important;
}

.order-summary-container .order-summary,
.order-summary-container > div:first-child {
    background: var(--hp-white) !important;
    border-radius: var(--hp-radius-xl) !important;
    border: 2px solid var(--hp-neutral-200) !important;
    padding: 28px !important;
    box-shadow: var(--hp-shadow-md) !important;
    font-family: var(--hp-font-family) !important;
}

/* Summary title */
.order-summary-container h3,
.order-summary-container .order-summary-title {
    font-family: var(--hp-font-family) !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    color: var(--hp-neutral-900) !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--hp-primary-lighter) !important;
}

/* Summary rows */
.order-summary-container .row,
.order-summary-container .totals .item {
    font-family: var(--hp-font-family) !important;
    padding: 8px 0 !important;
    font-size: 0.92rem !important;
}

.order-summary-container .totals .item label,
.order-summary-container .row label {
    color: var(--hp-neutral-600) !important;
    font-weight: 500 !important;
}

.order-summary-container .totals .item .value,
.order-summary-container .row .value {
    font-weight: 600 !important;
    color: var(--hp-neutral-900) !important;
}

/* Grand total */
.order-summary-container .grand-total,
.order-summary-container .totals .item:last-child {
    border-top: 2px solid var(--hp-neutral-200) !important;
    margin-top: 12px !important;
    padding-top: 16px !important;
}

.order-summary-container .grand-total label,
.order-summary-container .grand-total .value {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--hp-neutral-900) !important;
}

.order-summary-container .grand-total .value {
    color: var(--hp-primary-dark) !important;
    font-size: 1.3rem !important;
}

/* Proceed to checkout button */
.order-summary-container .btn-primary,
.order-summary-container a.theme-btn,
.order-summary-container .checkout-btn,
.order-summary-container button[type="button"].theme-btn {
    width: 100% !important;
    padding: 14px !important;
    margin-top: 20px !important;
    background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-primary-dark) 100%) !important;
    color: var(--hp-white) !important;
    border: none !important;
    border-radius: var(--hp-radius-md) !important;
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(0, 196, 255, 0.3) !important;
    transition: all var(--hp-transition-base) !important;
    display: block !important;
    text-decoration: none !important;
}

.order-summary-container .btn-primary:hover,
.order-summary-container a.theme-btn:hover,
.order-summary-container .checkout-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 196, 255, 0.4) !important;
}

/* Coupon section */
.order-summary-container .coupon-container,
.order-summary-container .discount {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--hp-neutral-200) !important;
}

.order-summary-container .coupon-container input,
.order-summary-container .discount input {
    border: 2px solid var(--hp-neutral-300) !important;
    border-radius: var(--hp-radius-md) !important;
    padding: 10px 14px !important;
    font-family: var(--hp-font-family) !important;
    font-size: 0.9rem !important;
    transition: border-color var(--hp-transition-base) !important;
}

.order-summary-container .coupon-container input:focus,
.order-summary-container .discount input:focus {
    border-color: var(--hp-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 196, 255, 0.1) !important;
}

.order-summary-container .coupon-container button,
.order-summary-container .discount button {
    background: var(--hp-neutral-900) !important;
    color: var(--hp-white) !important;
    border: none !important;
    border-radius: var(--hp-radius-md) !important;
    padding: 10px 18px !important;
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: background var(--hp-transition-fast) !important;
}

.order-summary-container .coupon-container button:hover,
.order-summary-container .discount button:hover {
    background: var(--hp-neutral-800) !important;
}

/* Empty cart */
.cart-details .empty-cart-message {
    text-align: center !important;
    padding: 60px 20px !important;
    font-family: var(--hp-font-family) !important;
    font-size: 1.1rem !important;
    color: var(--hp-neutral-600) !important;
}

.cart-details .continue-shopping .theme-btn {
    background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-primary-dark) 100%) !important;
    color: var(--hp-white) !important;
    border: none !important;
    border-radius: var(--hp-radius-md) !important;
    padding: 14px 32px !important;
    font-family: var(--hp-font-family) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0, 196, 255, 0.3) !important;
}

/* Error messages in cart */
.cart-details .control-error {
    color: var(--hp-error) !important;
    font-family: var(--hp-font-family) !important;
    font-size: 0.82rem !important;
    margin-top: 6px !important;
}

/* Cross-sell products */
.cart-details .cross-sell-products h2 {
    font-family: var(--hp-font-family) !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    color: var(--hp-neutral-900) !important;
    margin-top: 40px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--hp-neutral-200) !important;
}

/* ============================================
   FIX: Mobile Menu - apuntar directamente a elementos
   sin depender de la estructura del contenedor padre
   ============================================ */
@media (max-width: 992px) {
    /* El header mobile siempre está dentro de .vc-header */
    .vc-header .vc-small-screen {
        display: block !important;
        visibility: visible !important;
    }

    .vc-header .vc-small-screen .row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Hamburger siempre visible */
    .hamburger-wrapper {
        display: inline-block !important;
        visibility: visible !important;
    }

    .hamburger-wrapper .rango-toggle,
    i.rango-toggle.hamburger {
        display: inline-block !important;
        visibility: visible !important;
        font-size: 22px !important;
        color: var(--hp-neutral-900) !important;
        cursor: pointer !important;
    }

    /* El contenido de full-content-wrapper empuja el contenido fuera
       del main-content-wrapper, pero el header mobile sigue ahí */
    .main-content-wrapper {
        display: block !important;
    }

    /* Ocultar header desktop en mobile (el de arriba, .sticky-header) */
    header.sticky-header {
        display: none !important;
    }

    /* El .vc-header (secondary header con menu mobile) siempre visible */
    .vc-header {
        display: block !important;
        visibility: visible !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
        background: var(--hp-white) !important;
    }

    /* Right side icons en mobile */
    .right-vc-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
    }

    .right-vc-header .material-icons {
        font-size: 22px !important;
        color: var(--hp-neutral-800) !important;
    }

    .right-vc-header .badge {
        background: var(--hp-primary) !important;
        color: var(--hp-white) !important;
        font-size: 0.65rem !important;
    }

    /* Ocultar category bar y content-list en mobile */
    .vc-header > div:not(.vc-small-screen),
    .vc-header .content-list {
        display: none !important;
    }

    /* Asegurar que vc-small-screen tiene prioridad visual */
    .vc-header .vc-small-screen {
        display: block !important;
    }
}

/* Limitar tamaño de imagen en header mobile */
.main-content-wrapper .vc-header > div.vc-small-screen img {
    max-width: 50px !important;
}

/* ============================================
   Deshabilitar botones de resumen en checkout onepage
   para evitar clics accidentales
   ============================================ */
#checkout > .order-summary-container.top .theme-btn,
#checkout > .order-summary-container.top a.theme-btn,
#checkout .order-summary.fs16 .theme-btn,
#checkout .order-summary.fs16 a.theme-btn {
    pointer-events: none !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}