/*
 Theme Name:   Azas Florais - Astra Child
 Theme URI:    https://azasflorais.com.br
 Description:  Tema filho do Astra para e-commerce Azas Florais com WooCommerce
 Author:       Azas Florais
 Author URI:   https://azasflorais.com.br
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  astra-child-azasflorais
*/

/* ==========================================================================
   CSS Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
    /* Paleta de cores - Tons mais escuros e intensos */
    --primary: #0D2847;
    /* Azul marinho profundo */
    --primary-light: #153867;
    /* Azul para hovers */
    --primary-foreground: #ffffff;
    --secondary: #9ECFB8;
    /* Verde intenso */
    --secondary-medium: #6BB89A;
    /* Verde médio escuro */
    --secondary-intense: #4A9E7D;
    /* Verde intenso escuro */
    --foreground: #1a1a1a;
    --background: #ffffff;
    --muted: #5a5a5a;
    /* Cinza escuro */
    --border: #d4d4d4;
    /* Borda escura */
    --card: #ffffff;
    --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-title: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   Typography
   ========================================================================== */

body {
    font-family: var(--font-sans);
    color: var(--foreground);
    background-color: var(--background);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Títulos com Montserrat Light */
h1,
h2,
h3,
h4 {
    font-family: var(--font-title);
    font-weight: 300;
}

.font-title {
    font-family: var(--font-title);
    font-weight: 300;
}

.font-serif {
    font-family: var(--font-title);
    font-weight: 300;
}

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

/* Font weights */
.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* Font sizes */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

/* Text colors */
.text-foreground {
    color: var(--foreground);
}

.text-muted {
    color: var(--muted);
}

.text-primary {
    color: var(--primary);
}

.text-white {
    color: #ffffff;
}

/* Text utilities */
.text-center {
    text-align: center;
}

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

.uppercase {
    text-transform: uppercase;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.leading-relaxed {
    line-height: 1.625;
}

.leading-tight {
    line-height: 1.25;
}

.line-through {
    text-decoration: line-through;
}

.no-underline {
    text-decoration: none;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Layout - Flexbox
   ========================================================================== */

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.hidden {
    display: none;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-1 {
    flex: 1 1 0%;
}

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

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-baseline {
    align-items: baseline;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-12 {
    gap: 3rem;
}

/* ==========================================================================
   Layout - Grid
   ========================================================================== */

.grid {
    display: grid;
}

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

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

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

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

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

.col-span-2 {
    grid-column: span 2 / span 2;
}

/* ==========================================================================
   Spacing
   ========================================================================== */

/* Margin */
.m-0 {
    margin: 0;
}

.m-auto {
    margin: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mt-12 {
    margin-top: 3rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.mr-1 {
    margin-right: 0.25rem;
}

/* Padding */
.p-0 {
    padding: 0;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-8 {
    padding-top: 2rem;
}

.pt-20 {
    padding-top: 5rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

/* ==========================================================================
   Sizing
   ========================================================================== */

.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.w-4 {
    width: 1rem;
}

.w-5 {
    width: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.w-8 {
    width: 2rem;
}

.w-10 {
    width: 2.5rem;
}

.w-12 {
    width: 3rem;
}

.w-14 {
    width: 3.5rem;
}

.w-16 {
    width: 4rem;
}

.w-20 {
    width: 5rem;
}

.w-64 {
    width: 16rem;
}

.h-4 {
    height: 1rem;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-8 {
    height: 2rem;
}

.h-10 {
    height: 2.5rem;
}

.h-12 {
    height: 3rem;
}

.h-14 {
    height: 3.5rem;
}

.h-16 {
    height: 4rem;
}

.h-20 {
    height: 5rem;
}

.min-h-screen {
    min-height: 100vh;
}

.max-w-xs {
    max-width: 20rem;
}

.max-w-sm {
    max-width: 24rem;
}

.max-w-md {
    max-width: 28rem;
}

.max-w-lg {
    max-width: 32rem;
}

.max-w-xl {
    max-width: 36rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.max-w-7xl {
    max-width: 80rem;
}

/* ==========================================================================
   Backgrounds
   ========================================================================== */

.bg-white {
    background-color: #ffffff;
}

.bg-background {
    background-color: var(--background);
}

.bg-primary {
    background-color: var(--primary);
}

.bg-secondary {
    background-color: var(--secondary);
}

.bg-foreground {
    background-color: var(--foreground);
}

.bg-transparent {
    background-color: transparent;
}

.bg-primary\/10 {
    background-color: rgba(13, 40, 71, 0.1);
    /* primary darker */
}

.bg-primary\/90 {
    background-color: rgba(13, 40, 71, 0.9);
    /* primary darker */
}

.bg-secondary\/30 {
    background-color: rgb(158, 207, 184);
    /* Verde mais escuro sólido */
}

.bg-secondary\/50 {
    background-color: rgba(158, 207, 184, 0.5);
    /* secondary darker */
}

.bg-secondary-medium {
    background-color: var(--secondary-medium);
}

.bg-secondary-intense {
    background-color: var(--secondary-intense);
}

.bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.5);
}

.bg-white\/80 {
    background-color: rgba(255, 255, 255, 0.8);
}

.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2);
}

.bg-red-500 {
    background-color: #ef4444;
}

/* ==========================================================================
   Borders
   ========================================================================== */

.border {
    border-width: 1px;
    border-style: solid;
}

.border-0 {
    border-width: 0;
}

.border-2 {
    border-width: 2px;
    border-style: solid;
}

.border-t {
    border-top-width: 1px;
    border-top-style: solid;
}

.border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.border-y {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-style: solid;
}

.border-border {
    border-color: var(--border);
}

.border-primary {
    border-color: var(--primary);
}

.border-transparent {
    border-color: transparent;
}

.border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1);
}

.border-primary\/20 {
    border-color: rgba(74, 158, 125, 0.2);
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

/* ==========================================================================
   Effects
   ========================================================================== */

.shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-80 {
    opacity: 0.8;
}

.opacity-90 {
    opacity: 0.9;
}

.backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ==========================================================================
   Positioning
   ========================================================================== */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.top-0 {
    top: 0;
}

.top-3 {
    top: 0.75rem;
}

.top-4 {
    top: 1rem;
}

.top-28 {
    top: 7rem;
}

.right-0 {
    right: 0;
}

.right-4 {
    right: 1rem;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.left-3 {
    left: 0.75rem;
}

.left-4 {
    left: 1rem;
}

.right-4 {
    right: 1rem;
}

.z-10 {
    z-index: 10;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

/* ==========================================================================
   Transforms & Transitions
   ========================================================================== */

.transition {
    transition: all 0.15s ease;
}

.transition-colors {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.transition-transform {
    transition: transform 0.15s ease;
}

.transition-all {
    transition: all 0.3s ease;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.translate-y-1\/2 {
    transform: translateY(50%);
}

.-translate-y-1\/2 {
    transform: translateY(-50%);
}

/* ==========================================================================
   Overflow
   ========================================================================== */

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-auto {
    overflow-x: auto;
}

/* ==========================================================================
   Lists
   ========================================================================== */

.list-none {
    list-style: none;
}

/* ==========================================================================
   Aspect Ratio
   ========================================================================== */

.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
}

.aspect-\[4\/5\] {
    aspect-ratio: 4 / 5;
}

/* ==========================================================================
   Object Fit
   ========================================================================== */

.object-cover {
    object-fit: cover;
}

.object-contain {
    object-fit: contain;
}

/* ==========================================================================
   Cursors & Interactivity
   ========================================================================== */

.cursor-pointer {
    cursor: pointer;
}

.pointer-events-none {
    pointer-events: none;
}

/* ==========================================================================
   Focus & Outline
   ========================================================================== */

.outline-none {
    outline: none;
}

.focus\:outline-none:focus {
    outline: none;
}

.focus\:ring-2:focus {
    box-shadow: 0 0 0 2px var(--primary);
}

.focus\:ring-primary:focus {
    box-shadow: 0 0 0 2px var(--primary);
}

/* ==========================================================================
   Hover States
   ========================================================================== */

.hover\:bg-secondary:hover {
    background-color: var(--secondary);
}

.hover\:bg-primary\/90:hover {
    background-color: rgba(74, 158, 125, 0.9);
}

.hover\:text-foreground:hover {
    color: var(--foreground);
}

.hover\:text-primary:hover {
    color: var(--primary);
}

.hover\:border-primary:hover {
    border-color: var(--primary);
}

.hover\:border-primary\/20:hover {
    border-color: rgba(74, 158, 125, 0.2);
}

.hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

/* ==========================================================================
   Responsive - SM (640px+)
   ========================================================================== */

@media (min-width: 640px) {
    .sm\:flex {
        display: flex;
    }

    .sm\:hidden {
        display: none;
    }

    .sm\:block {
        display: block;
    }

    .sm\:flex-row {
        flex-direction: row;
    }

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

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

    .sm\:text-3xl {
        font-size: 1.875rem;
    }

    .sm\:text-4xl {
        font-size: 2.25rem;
    }

    .sm\:text-5xl {
        font-size: 3rem;
    }

    .sm\:gap-6 {
        gap: 1.5rem;
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:items-start {
        align-items: flex-start;
    }

    .sm\:justify-start {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   Responsive - MD (768px+)
   ========================================================================== */

@media (min-width: 768px) {
    .md\:flex {
        display: flex;
    }

    .md\:hidden {
        display: none;
    }

    .md\:block {
        display: block;
    }

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

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

    .md\:gap-8 {
        gap: 2rem;
    }
}

/* ==========================================================================
   Responsive - LG (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
    .lg\:flex {
        display: flex;
    }

    .lg\:hidden {
        display: none;
    }

    .lg\:block {
        display: block;
    }

    .lg\:flex-row {
        flex-direction: row;
    }

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

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

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

    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .lg\:gap-12 {
        gap: 3rem;
    }

    .lg\:text-4xl {
        font-size: 2.25rem;
    }

    .lg\:text-6xl {
        font-size: 3.75rem;
    }

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .lg\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .lg\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .lg\:w-64 {
        width: 16rem;
    }

    .lg\:pb-0 {
        padding-bottom: 0;
    }
}

/* ==========================================================================
   Responsive - XL (1280px+)
   ========================================================================== */

@media (min-width: 1280px) {
    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Mobile Menu & Filter Sidebar
   ========================================================================== */

.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
    transform: translateX(0);
}

.filter-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.filter-sidebar.open {
    transform: translateX(0);
}

.overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.overlay.open {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Star Rating
   ========================================================================== */

.azas-star {
    color: #facc15;
}

.azas-star-empty {
    color: #e5e5e5;
}

/* ==========================================================================
   WooCommerce Overrides - Hide Default Elements
   ========================================================================== */

/* Hide Astra's default shop sidebar */
.woocommerce .ast-woocommerce-container,
.woocommerce-page .ast-woocommerce-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Hide default WooCommerce elements */
.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce nav.woocommerce-pagination,
.woocommerce-products-header__title.page-title,
.woocommerce-breadcrumb,
.ast-woocommerce-product-list #primary,
.ast-shop-toolbar-container {
    display: none !important;
}

/* Reset WooCommerce products list */
.woocommerce ul.products {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide sidebar */
#secondary,
.sidebar,
.widget-area,
aside#secondary {
    display: none !important;
}

/* Full width content */
#primary,
.content-area,
.site-main,
main#main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* Reset Astra container */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
    padding: 0 !important;
    background: transparent !important;
}

/* ==========================================================================
   Product Card Styles
   ========================================================================== */

.azas-product-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
    display: block;
    text-decoration: none;
    color: inherit;
}

.azas-product-card:hover {
    border-color: rgba(74, 158, 125, 0.2);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.azas-product-card .product-image {
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--secondary);
}

.azas-product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.azas-product-card .product-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: rgba(74, 158, 125, 0.9);
    color: var(--primary-foreground);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    background-color: transparent;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    color: var(--foreground);
}

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

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="search"],
input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--foreground);
    text-decoration: none;
    transition: all 0.2s ease;
    background: var(--card);
}

.page-numbers:hover {
    background-color: var(--secondary);
}

.page-numbers.current {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

/* ==========================================================================
   Accessibility - Screen Reader Only
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================================================
   Smooth Scroll
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   Container
   ========================================================================== */

.azas-container {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .azas-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .azas-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {

    header,
    footer,
    .mobile-menu,
    .overlay,
    .filter-sidebar,
    #secondary {
        display: none !important;
    }

    main {
        padding-top: 0 !important;
    }
}

/* ==========================================================================
   Additional Missing Utility Classes
   ========================================================================== */

/* Text colors with opacity */
.text-white\/70 {
    color: rgba(255, 255, 255, 0.7);
}

.text-white\/80 {
    color: rgba(255, 255, 255, 0.8);
}

.text-white\/50 {
    color: rgba(255, 255, 255, 0.5);
}

.text-white\/40 {
    color: rgba(255, 255, 255, 0.4);
}

.text-primary\/80 {
    color: rgba(74, 158, 125, 0.8);
}

.text-primary\/20 {
    color: rgba(74, 158, 125, 0.2);
}

/* Additional sizes */
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

.text-\[10px\] {
    font-size: 10px;
}

/* Width with arbitrary values */
.w-px {
    width: 1px;
}

.w-\[200px\] {
    width: 200px;
}

.w-\[300px\] {
    width: 300px;
}

.max-w-\[200px\] {
    max-width: 200px;
}

/* Height */
.h-full {
    height: 100%;
}

/* Min height with calc */
.min-h-\[calc\(100vh-4rem\)\] {
    min-height: calc(100vh - 4rem);
}

/* Positioning with negative values */
.-bottom-4 {
    bottom: -1rem;
}

.-bottom-6 {
    bottom: -1.5rem;
}

.-left-6 {
    left: -1.5rem;
}

.-right-4 {
    right: -1rem;
}

/* Gradients */
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-foreground\/80 {
    --tw-gradient-from: rgba(26, 26, 26, 0.8);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(26, 26, 26, 0));
}

.via-transparent {
    --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, transparent);
}

.to-transparent {
    --tw-gradient-to: transparent;
}

/* Simpler gradient implementation */
.bg-gradient-to-t.from-foreground\/80.via-transparent.to-transparent {
    background-image: linear-gradient(to top, rgba(26, 26, 26, 0.8), transparent, transparent);
}

/* Space between */
.space-y-1>*+* {
    margin-top: 0.25rem;
}

.space-y-2>*+* {
    margin-top: 0.5rem;
}

.space-y-4>*+* {
    margin-top: 1rem;
}

/* Inset positioning */
.inset-x-0 {
    left: 0;
    right: 0;
}

/* Additional padding */
.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.p-12 {
    padding: 3rem;
}

/* Additional margin */
.-bottom-6 {
    bottom: -1.5rem;
}

/* Translate */
.translate-x-0 {
    transform: translateX(0);
}

/* Scale */
.scale-105 {
    transform: scale(1.05);
}

/* Hover text primary with opacity */
.hover\:text-primary\/80:hover {
    color: rgba(74, 158, 125, 0.8);
}

/* Fill */
.fill-current {
    fill: currentColor;
}

/* Additional max-width for logo */
.max-w-\[150px\] {
    max-width: 150px;
}

/* Width arbitrary */
.w-\[260px\] {
    width: 260px;
}

/* SM responsive additions */
@media (min-width: 640px) {
    .sm\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .sm\:p-12 {
        padding: 3rem;
    }

    .sm\:items-end {
        align-items: flex-end;
    }

    .sm\:justify-between {
        justify-content: space-between;
    }

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

    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .sm\:h-6 {
        height: 1.5rem;
    }

    .sm\:w-6 {
        width: 1.5rem;
    }

    .sm\:mb-8 {
        margin-bottom: 2rem;
    }
}

/* MD responsive additions */
@media (min-width: 768px) {
    .md\:flex-row {
        flex-direction: row;
    }

    .md\:items-center {
        align-items: center;
    }

    .md\:gap-4 {
        gap: 1rem;
    }
}

/* LG responsive additions */
@media (min-width: 1024px) {
    .lg\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .lg\:gap-8 {
        gap: 2rem;
    }

    .lg\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .lg\:mb-8 {
        margin-bottom: 2rem;
    }

    .lg\:pt-12 {
        padding-top: 3rem;
    }
}

/* XL responsive additions */
@media (min-width: 1280px) {
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Group hover */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

/* Border radius additional */
.rounded-full {
    border-radius: 9999px;
}

/* Stroke */
.stroke-current {
    stroke: currentColor;
}

/* Width percentage */
.w-1\/2 {
    width: 50%;
}

/* Tracking widest */
.tracking-widest {
    letter-spacing: 0.1em;
}

/* White with more opacity variants */
.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2);
}

.text-white\/90 {
    color: rgba(255, 255, 255, 0.9);
}

/* Border white with opacity */
.border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Additional background colors */
.bg-border {
    background-color: var(--border);
}

/* Centered absolute positioning helper */
.center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Aspect ratios */
.aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
}

.aspect-\[4\/5\] {
    aspect-ratio: 4 / 5;
}

/* Image cover helper */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure correct link colors */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* Selection colors */
::selection {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

/* ==========================================================================
   Button Hover/Focus Fixes
   ========================================================================== */

/* Primary button hover and focus */
.bg-primary:hover,
button.bg-primary:hover,
a.bg-primary:hover {
    background-color: rgba(74, 158, 125, 0.85) !important;
}

.bg-primary:focus,
button.bg-primary:focus,
a.bg-primary:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Ensure button text stays white */
.bg-primary,
.bg-primary:hover,
.bg-primary:focus {
    color: #ffffff !important;
}

/* Header action buttons - icon color fix */
header button svg,
header a svg {
    stroke: var(--foreground);
}

header button:hover svg,
header a:hover svg {
    stroke: var(--primary);
}

/* ==========================================================================
   Header Logo Fix
   ========================================================================== */

/* Constrain logo size */
header .custom-logo,
header img[alt] {
    height: 48px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
}

header .custom-logo-link {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   Search Icon Color Fix
   ========================================================================== */

/* Search button background */
header button[aria-label="Buscar"] {
    background-color: transparent !important;
}

header button[aria-label="Buscar"]:hover {
    background-color: var(--secondary) !important;
}

header button[aria-label="Buscar"] svg {
    stroke: var(--muted);
}

header button[aria-label="Buscar"]:hover svg {
    stroke: var(--primary);
}

/* Product search input icon */
.search-icon-container svg {
    stroke: var(--muted);
}

/* ==========================================================================
   Testimonial Carousel Fixes
   ========================================================================== */

/* Arrow buttons */
#prevTestimonial,
#nextTestimonial {
    background-color: var(--card) !important;
    border: 1px solid var(--border) !important;
    color: var(--foreground) !important;
}

#prevTestimonial:hover,
#nextTestimonial:hover {
    background-color: var(--secondary) !important;
    border-color: var(--primary) !important;
}

#prevTestimonial svg,
#nextTestimonial svg {
    stroke: var(--foreground);
}

#prevTestimonial:hover svg,
#nextTestimonial:hover svg {
    stroke: var(--primary);
}

/* Carousel dots */
#testimonialDots button,
.testimonial-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: var(--border) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

#testimonialDots button.active,
.testimonial-dot.active {
    background-color: var(--primary) !important;
    width: 28px !important;
    border-radius: 5px !important;
}

#testimonialDots button:hover,
.testimonial-dot:hover {
    background-color: var(--muted) !important;
}

/* ==========================================================================
   Products Page Specific Fixes
   ========================================================================== */

/* Reduce main padding */
.woocommerce-page main,
.archive.woocommerce main {
    padding-top: 2.5rem !important;
}

/* Search input fix */
.product-search-form {
    position: relative;
}

.product-search-form svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    stroke: var(--muted);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.product-search-form input {
    padding-left: 40px !important;
}

/* Remove sidebar search icon duplicate */
.sidebar-search-wrapper {
    position: relative;
}

.sidebar-search-wrapper .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
}

.sidebar-search-wrapper input {
    width: 100%;
    padding-left: 40px;
}

/* ==========================================================================
   Footer Fixes
   ========================================================================== */

/* Footer title colors */
footer h3,
footer .footer-title {
    color: #ffffff !important;
}

footer a {
    color: rgba(255, 255, 255, 0.7);
}

footer a:hover {
    color: #ffffff;
}

/* ==========================================================================
   AJAX Loading States
   ========================================================================== */

.products-loading {
    opacity: 0.5;
    pointer-events: none;
}

.products-grid.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.products-grid {
    position: relative;
    min-height: 200px;
}

/* ==========================================================================
   Additional Fixes
   ========================================================================== */

/* Header logo constraint */
header .custom-logo,
header .custom-logo-link img {
    height: 60px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
}

/* Search modal */
#searchModal {
    transition: opacity 0.2s ease;
}

#searchModal.hidden {
    display: none !important;
}

/* Mobile menu - ensure white background and correct text colors */
.mobile-menu {
    background-color: #ffffff !important;
}

.mobile-menu a {
    color: var(--muted) !important;
    background-color: transparent !important;
}

.mobile-menu a:hover {
    color: var(--foreground) !important;
    background-color: var(--secondary) !important;
}

.mobile-menu a.current-menu-item,
.mobile-menu a[aria-current="page"] {
    color: var(--foreground) !important;
    background-color: var(--secondary) !important;
}

/* Filter sidebar - ensure proper styling */
.filter-sidebar {
    background-color: #ffffff !important;
}

.filter-sidebar a,
.filter-sidebar button:not(.bg-primary) {
    color: var(--foreground);
}

/* Only active category should be green */
.filter-sidebar a.bg-primary,
.filter-sidebar button.bg-primary {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.filter-sidebar a:not(.bg-primary):hover {
    background-color: var(--secondary) !important;
}

/* Translate Y for search icon */
.-translate-y-1\/2 {
    transform: translateY(-50%);
}

/* Height 16 for logo */
.h-16 {
    height: 4rem;
}

/* Max width 180px */
.max-w-\[180px\] {
    max-width: 180px;
}

/* Width 280px for mobile menu */
.w-\[280px\] {
    width: 280px;
}

/* Width 300px for filter sidebar */
.w-\[300px\] {
    width: 300px;
}

/* Gap 3 */
.gap-3 {
    gap: 0.75rem;
}

/* Header icon color fix */
header svg {
    color: var(--foreground);
    stroke: var(--foreground);
}

header .bg-primary svg {
    color: #ffffff;
    stroke: #ffffff;
}

/* Ensure mobile menu items don't inherit green */
#mobileMenu * {
    background-color: transparent;
}

#mobileMenu {
    background-color: #ffffff !important;
}

#mobileMenu a {
    display: block;
    background-color: transparent !important;
}

/* ==========================================================================
   Cart Badge Position Fix - MUST be on top of cart icon
   ========================================================================== */

header .cart-badge,
header a[href*="carrinho"] span,
header a[aria-label="Carrinho"] span {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    bottom: auto !important;
    left: auto !important;
}

/* Cart icon container needs relative positioning */
header a[href*="carrinho"],
header a[aria-label="Carrinho"] {
    position: relative !important;
}

/* ==========================================================================
   Search Icon Position Fix 
   ========================================================================== */

.relative svg.absolute,
.sidebar-search-wrapper svg,
form .relative svg {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1;
}

/* Search input padding adjustment */
.sidebar-search-wrapper input,
form .relative input[type="search"] {
    padding-left: 2.5rem !important;
}

/* ==========================================================================
   Related Products Styling
   ========================================================================== */

/* Related products card styling */
.azas-product-card {
    display: block;
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.azas-product-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: rgba(74, 158, 125, 0.2);
}

.azas-product-card .product-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--secondary);
}

.azas-product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.azas-product-card .product-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background-color: var(--primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
}

/* Related product card text styling */
.azas-product-card h3,
.azas-product-card .product-title {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--foreground) !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.4 !important;
}

@media (min-width: 640px) {

    .azas-product-card h3,
    .azas-product-card .product-title {
        font-size: 1rem !important;
    }
}

/* Related product price styling */
.azas-product-card .woocommerce-Price-amount,
.azas-product-card .price,
.azas-product-card span.price {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--foreground) !important;
}

.azas-product-card del .woocommerce-Price-amount,
.azas-product-card del .amount {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--muted) !important;
}

.azas-product-card ins {
    text-decoration: none !important;
}

.azas-product-card ins .woocommerce-Price-amount {
    color: var(--primary) !important;
}

/* ==========================================================================
   Product Card with Bag Icon
   ========================================================================== */

.product-card .product-price-row,
.product-card .price-with-bag {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem;
}

/* Bag Icon Styling */
.bag-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease !important;
}

.bag-icon:hover {
    background-color: rgba(74, 158, 125, 0.85) !important;
}

.bag-icon svg {
    width: 1rem !important;
    height: 1rem !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
}

.product-card .bag-icon,
.product-card .add-to-cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: var(--primary);
    color: #ffffff;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.product-card .bag-icon svg {
    width: 1rem;
    height: 1rem;
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Single Product Page Fixes
   ========================================================================== */

/* Single product rating stars */
.single-product .star-rating,
.woocommerce-product-rating .star-rating {
    color: #fbbf24 !important;
}

/* Single product price */
.single-product .price .woocommerce-Price-amount,
.single-product .summary .price {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
}

/* Single product quantity input */
.single-product input[type="number"],
.cart input.qty {
    text-align: center !important;
    font-weight: 500 !important;
    border: 1px solid var(--border) !important;
    background-color: #ffffff !important;
}

/* Single product add to cart button */
.single-product .single_add_to_cart_button,
.single-product button[name="add-to-cart"] {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.2s ease !important;
}

.single-product .single_add_to_cart_button:hover {
    background-color: rgba(74, 158, 125, 0.9) !important;
}

/* Trust badges alignment */
.single-product .grid.grid-cols-3 {
    align-items: start;
}

/* WooCommerce default styling overrides */
.woocommerce .price del {
    opacity: 0.6;
}

.woocommerce .price ins {
    text-decoration: none !important;
    font-weight: 700;
}

/* Rating stars container */
.azas-product-card .flex.items-center.gap-1 {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Star icon styling */
.azas-product-card svg.text-amber-400 {
    color: #fbbf24;
    fill: #fbbf24;
}

/* ==========================================================================
   Archive page filter search icon position fix 
   ========================================================================== */

aside form .relative,
.filter-sidebar form .relative {
    position: relative;
}

aside form .relative input,
.filter-sidebar form .relative input {
    padding-left: 2.5rem;
}

aside form .relative svg,
.filter-sidebar form .relative svg {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--muted);
    pointer-events: none;
    z-index: 2;
}

/* Top 1/2 utility */
.top-1\/2 {
    top: 50%;
}

/* ==========================================================================
   NEW HEADER STYLES - Clean, Minimal, 5% Transparency
   ========================================================================== */

.site-header {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Cart count badge - positioned on top right of cart icon */
.cart-link {
    position: relative !important;
}

.cart-count {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    min-width: 1.1rem !important;
    height: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    line-height: 1 !important;
}

/* ==========================================================================
   NEW FOOTER STYLES - Premium, Modern Design
   ========================================================================== */

.footer-modern {
    background: linear-gradient(180deg, #1a2f23 0%, #0f1a14 100%);
    color: #ffffff;
}

.footer-main {
    background: transparent;
}

.footer-logo {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.footer-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.7;
    max-width: 280px;
}

.footer-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: #ffffff;
    padding-left: 4px;
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
}

.footer-contact svg {
    color: var(--primary);
    margin-top: 2px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transition: all 0.2s ease;
}

.social-link:hover {
    background-color: var(--primary);
    transform: translateY(-2px);
}

.footer-bottom {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copyright {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Footer responsive */
@media (max-width: 768px) {
    .footer-modern .grid {
        text-align: center;
    }

    .footer-description {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-modern .flex.gap-3 {
        justify-content: center;
    }

    .footer-contact li {
        justify-content: center;
    }
}

/* Override any conflicting footer styles */
footer.footer-modern {
    background: linear-gradient(180deg, #1a2f23 0%, #0f1a14 100%) !important;
}

footer.footer-modern h3 {
    color: #ffffff !important;
}

footer.footer-modern a {
    color: rgba(255, 255, 255, 0.65) !important;
}

footer.footer-modern a:hover {
    color: #ffffff !important;
}

/* Padding utility */
.p-2\.5 {
    padding: 0.625rem;
}

/* ML auto utility */
.ml-auto {
    margin-left: auto;
}

/* ==========================================================================
   Header Navigation Centering Fix
   ========================================================================== */

@media (min-width: 768px) {
    .site-header nav>div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Center navigation container - absolute positioning for true center */
    .site-header .md\:flex-1 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   Footer Desktop Flex Row Layout
   ========================================================================== */

@media (min-width: 1024px) {
    .footer-main>div>.grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 2rem !important;
    }

    .footer-main .lg\:col-span-4 {
        flex: 0 0 auto;
        width: auto;
        max-width: 300px;
    }

    .footer-main .lg\:col-span-2 {
        flex: 0 0 auto;
        width: auto;
    }
}

/* ==========================================================================
   Border-b Color Fix
   ========================================================================== */

.border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #6590721c !important;
}

/* ==========================================================================
   Footer Logo Size Fix - Consistent 60px on all pages
   ========================================================================== */

.footer-logo {
    height: 60px !important;
    width: auto !important;
    max-height: 60px !important;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

footer .footer-logo,
.footer-modern .footer-logo,
footer img.footer-logo {
    height: 60px !important;
    width: auto !important;
    max-height: 60px !important;
}

/* ==========================================================================
   Animated Inline Header Search
   ========================================================================== */

.header-search-container {
    display: flex;
    align-items: center;
}

.header-search-form {
    display: flex;
    align-items: center;
    position: relative;
}

.header-search-input {
    width: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    color: var(--foreground);
    outline: none;
}

.header-search-input::placeholder {
    color: var(--muted);
}

.header-search-form.active .header-search-input {
    width: 180px;
    padding: 0.5rem 0.75rem;
    opacity: 1;
    background-color: var(--secondary);
    border-radius: 0.5rem 0 0 0.5rem;
    border: 1px solid var(--border);
    border-right: none;
}

.header-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    border: none;
    background-color: transparent;
    color: var(--foreground);
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.header-search-btn:hover {
    background-color: var(--secondary);
}

.header-search-form.active .header-search-btn {
    background-color: var(--primary);
    color: #ffffff;
    border-radius: 0 0.5rem 0.5rem 0;
}

.header-search-form.active .header-search-btn:hover {
    background-color: rgba(74, 158, 125, 0.85);
}

/* Hide search on smaller screens within the header */
@media (max-width: 767px) {
    .header-search-container {
        display: none !important;
    }
}

/* ==========================================================================
   Search Input Focus Fix
   ========================================================================== */

.header-search-input:focus,
.header-search-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid var(--primary) !important;
}

.header-search-form.active .header-search-input:focus,
.header-search-form.active .header-search-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid var(--primary) !important;
    border-right: none !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
}

/* Remove any default focus outlines */
input[type="search"]:focus,
input[type="search"]:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Fix for webkit search input */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* ==========================================================================
   Product Card Uniform Height & Typography
   ========================================================================== */

/* Card container with flexbox for uniform height */
.product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Image container - fixed aspect ratio */
.product-card .aspect-square {
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
}

/* Content area - grows to fill and uses flexbox */
.product-card .p-4,
.product-card>div:last-child {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 1rem !important;
}

/* Title - fixed height with line clamp */
.product-card h3 {
    font-family: var(--font-sans) !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--foreground) !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.8em !important;
}

/* Description - fixed height with line clamp */
.product-card p.text-muted,
.product-card .text-sm.text-muted.line-clamp-2 {
    font-family: var(--font-sans) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: var(--muted) !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.5em !important;
    flex-grow: 1 !important;
}

/* Price row - pushed to bottom */
.product-card .flex.items-center.justify-between {
    margin-top: auto !important;
    padding-top: 0.5rem !important;
}

/* Price typography */
.product-card .font-semibold {
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--foreground) !important;
}

/* Sale price styling */
.product-card .font-semibold del,
.product-card .font-semibold .woocommerce-Price-amount:first-child+.woocommerce-Price-amount {
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: var(--muted) !important;
    text-decoration: line-through !important;
    margin-left: 0.5rem !important;
}

.product-card .font-semibold ins {
    text-decoration: none !important;
}

/* Grid for uniform card heights */
.grid.sm\:grid-cols-2.lg\:grid-cols-4 {
    display: grid !important;
}

.grid.sm\:grid-cols-2.lg\:grid-cols-4>a,
.grid.sm\:grid-cols-2.lg\:grid-cols-4>.product-card {
    height: 100% !important;
}

/* Course Section - No hover on section background */
#curso {
    background-color: var(--primary) !important;
}

#curso:hover {
    background-color: var(--primary) !important;
}

/* Header Icon Spacing */
.icone-space-header {
    padding: 10px 10px 5px 10px;
}

.woocommerce-page main,
.archive.woocommerce main {
    padding-top: 0 !important;
}

/* ==========================================================================
   Single Product - Quantity Buttons Fix
   ========================================================================== */

/* Quantity +/- buttons - neutral style */
.single-product .cart button[type="button"],
.single-product form.cart button[onclick*="Qty"] {
    background-color: transparent !important;
    color: var(--foreground) !important;
}

.single-product .cart button[type="button"]:hover,
.single-product form.cart button[onclick*="Qty"]:hover {
    background-color: var(--secondary) !important;
}

/* Quantity input styling */
.single-product input[type="number"]#productQuantity,
.single-product input[type="number"]#productQuantityMobile {
    background-color: transparent !important;
    border: none !important;
}

/* ==========================================================================
   Single Product - Gallery Thumbnails Fix
   ========================================================================== */

/* Gallery thumbnails container - target the flex container with images */
.single-product .gallery-thumbnails button {
    width: 5rem !important;
    height: 5rem !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
}

.single-product .gallery-thumbnails button img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background-color: #ffffff !important;
}

/* ==========================================================================
   Cart, Checkout & My Account Page Styles
   ========================================================================== */

/* Form Input Styling */
.woocommerce-cart .input-text,
.woocommerce-checkout .input-text,
.woocommerce-account .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce select,
.woocommerce textarea {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    color: var(--foreground) !important;
    background-color: #ffffff !important;
    transition: border-color 0.2s ease !important;
}

.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: none !important;
}

/* WooCommerce Form Row Styling */
.woocommerce-checkout .form-row {
    margin-bottom: 1rem !important;
}

.woocommerce-checkout .form-row label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--foreground) !important;
    margin-bottom: 0.5rem !important;
}

.woocommerce-checkout .form-row-wide {
    clear: both !important;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: 48% !important;
    float: left !important;
}

.woocommerce-checkout .form-row-last {
    float: right !important;
}

@media (max-width: 768px) {

    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        float: none !important;
    }
}

/* Required Field Asterisk */
.woocommerce-checkout .required {
    color: #ef4444 !important;
}

/* Select2 Dropdown Styling */
.select2-container--default .select2-selection--single {
    height: auto !important;
    padding: 0.5rem 0.75rem !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.5rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--foreground) !important;
    line-height: 1.5 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
}

/* Cart Quantity Input */
.woocommerce-cart .quantity {
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
}

.woocommerce-cart .quantity input[type="number"] {
    width: 3rem !important;
    text-align: center !important;
    border: none !important;
    padding: 0.5rem !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.woocommerce-cart .quantity input[type="number"]::-webkit-outer-spin-button,
.woocommerce-cart .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Proceed to Checkout Button */
.wc-proceed-to-checkout .checkout-button {
    display: block !important;
    width: 100% !important;
    padding: 1rem !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-align: center !important;
    border: none !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.wc-proceed-to-checkout .checkout-button:hover {
    background-color: rgba(74, 158, 125, 0.9) !important;
}

/* Payment Methods Styling */
.woocommerce-checkout-payment .wc_payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-checkout-payment .wc_payment_method {
    padding: 1rem !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.5rem !important;
    margin-bottom: 0.75rem !important;
    background-color: #ffffff !important;
}

.woocommerce-checkout-payment .wc_payment_method.payment_method_selected {
    border-color: var(--primary) !important;
    background-color: rgba(74, 158, 125, 0.05) !important;
}

.woocommerce-checkout-payment .wc_payment_method label {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    cursor: pointer !important;
    font-weight: 500 !important;
}

.woocommerce-checkout-payment .payment_box {
    padding: 1rem !important;
    background-color: var(--secondary) !important;
    border-radius: 0.5rem !important;
    margin-top: 0.75rem !important;
    font-size: 0.875rem !important;
    color: var(--muted) !important;
}

/* WooCommerce Notices */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    padding: 1rem 1.5rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    font-size: 0.875rem !important;
}

.woocommerce-error {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
}

.woocommerce-info {
    background-color: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1e40af !important;
}

.woocommerce-message {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #166534 !important;
}

/* My Account Dashboard */
.woocommerce-MyAccount-content {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-family: var(--font-serif) !important;
    font-weight: 500 !important;
    margin-bottom: 1rem !important;
}

/* Orders Table */
.woocommerce-orders-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.woocommerce-orders-table th,
.woocommerce-orders-table td {
    padding: 1rem !important;
    text-align: left !important;
    border-bottom: 1px solid var(--border) !important;
}

.woocommerce-orders-table th {
    font-weight: 600 !important;
    color: var(--foreground) !important;
    background-color: var(--secondary) !important;
}

.woocommerce-orders-table td {
    color: var(--foreground) !important;
}

.woocommerce-orders-table .button {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border-radius: 0.375rem !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
}

.woocommerce-orders-table .button:hover {
    background-color: rgba(74, 158, 125, 0.9) !important;
}

/* Address Cards */
.woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
}

.woocommerce-Address {
    padding: 1.5rem !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.75rem !important;
    background-color: #ffffff !important;
}

.woocommerce-Address-title h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.woocommerce-Address-title .edit {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 0.375rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.woocommerce-Address-title .edit:hover {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Coupon Code Applied */
.cart-discount {
    color: #16a34a !important;
}

/* Terms Checkbox */
.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 1rem !important;
}

.woocommerce-terms-and-conditions-wrapper label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
    color: var(--muted) !important;
}

.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    margin-top: 0.25rem !important;
}

/* Shipping Methods */
.woocommerce-shipping-methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-shipping-methods li {
    padding: 0.75rem !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.woocommerce-shipping-methods label {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
}

/* ==========================================================================
   Checkout Order Review - Clean Styling
   ========================================================================== */

/* Reset table borders */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table tr {
    border: none !important;
    background: transparent !important;
}

.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 1.5rem !important;
}

.woocommerce-checkout-review-order-table thead {
    display: none !important;
}

/* Product rows */
.woocommerce-checkout-review-order-table tbody tr {
    border-bottom: 1px solid var(--border) !important;
}

.woocommerce-checkout-review-order-table tbody td {
    padding: 1rem 0 !important;
    font-size: 0.875rem !important;
    color: var(--foreground) !important;
    vertical-align: top !important;
}

.woocommerce-checkout-review-order-table tbody td.product-name {
    padding-right: 1rem !important;
}

.woocommerce-checkout-review-order-table tbody td.product-total {
    font-weight: 600 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Footer rows (subtotal, shipping, total) */
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
    padding: 0.75rem 0 !important;
    font-size: 0.875rem !important;
}

.woocommerce-checkout-review-order-table tfoot th {
    text-align: left !important;
    font-weight: 500 !important;
    color: var(--muted) !important;
}

.woocommerce-checkout-review-order-table tfoot td {
    text-align: right !important;
    color: var(--foreground) !important;
}

/* Order total row */
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
    padding-top: 1rem !important;
    border-top: 1px solid var(--border) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
}

.woocommerce-checkout-review-order-table tfoot .order-total td {
    color: var(--primary) !important;
}

/* Shipping methods - clean styling */
#shipping_method {
    list-style: none !important;
    padding: 0 !important;
    margin: 0.5rem 0 !important;
}

#shipping_method li {
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.5rem !important;
    background: #fff !important;
}

#shipping_method li:last-child {
    margin-bottom: 0 !important;
}

#shipping_method label {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
}

/* Payment methods */
.woocommerce-checkout-payment {
    margin-top: 1.5rem !important;
}

.wc_payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wc_payment_method {
    margin-bottom: 0.75rem !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
}

.wc_payment_method>label {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.wc_payment_method .payment_box {
    padding: 1rem !important;
    background: var(--secondary) !important;
    font-size: 0.8125rem !important;
    color: var(--muted) !important;
}

/* Place order button */
#place_order {
    width: 100% !important;
    padding: 1rem !important;
    margin-top: 1.5rem !important;
    background: var(--primary) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
}

#place_order:hover {
    opacity: 0.9 !important;
}

/* Privacy text */
.woocommerce-privacy-policy-text {
    font-size: 0.75rem !important;
    color: var(--muted) !important;
    margin: 1rem 0 !important;
}

/* ==========================================================================
   Cart, Checkout, My Account - Page Header Styling
   ========================================================================== */

/* Centered page titles with compact padding */
.woocommerce-cart main>.mx-auto>h1,
.checkout-page main>.mx-auto>h1,
.myaccount-page main>.mx-auto>h1,
.woocommerce-cart .mx-auto.max-w-7xl>h1,
.checkout-page .mx-auto.max-w-7xl h2:first-of-type,
.myaccount-page .mx-auto.max-w-7xl>h1 {
    text-align: center !important;
}

/* Compact breadcrumb padding */
.woocommerce-cart .bg-secondary\/30,
.checkout-page .bg-secondary\/30,
.myaccount-page .bg-secondary\/30 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.woocommerce-cart .bg-secondary\/30 .py-4,
.checkout-page .bg-secondary\/30 .py-4,
.myaccount-page .bg-secondary\/30 .py-4 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   Shipping Display - Ensure Visibility
   ========================================================================== */

/* Ensure shipping row is visible in checkout */
.woocommerce-checkout-review-order-table tr.shipping,
.woocommerce-checkout-review-order-table tfoot tr.shipping,
tr.woocommerce-shipping-totals {
    display: table-row !important;
    visibility: visible !important;
}

.woocommerce-checkout-review-order-table tr.shipping th,
.woocommerce-checkout-review-order-table tr.shipping td,
tr.woocommerce-shipping-totals th,
tr.woocommerce-shipping-totals td {
    display: table-cell !important;
    visibility: visible !important;
    padding: 0.75rem 0 !important;
}

/* Shipping calculator in cart */
.woocommerce-shipping-calculator,
.shipping-calculator-form {
    display: block !important;
    visibility: visible !important;
    margin-top: 1rem !important;
}

/* Shipping methods list */
#shipping_method,
.woocommerce-shipping-methods {
    display: block !important;
    visibility: visible !important;
}

/* ==========================================================================
   Footer Mobile Adjustments
   ========================================================================== */

@media (max-width: 767px) {
    .footer-main {
        padding-top: 2rem !important;
        padding-bottom: 1.5rem !important;
    }

    .footer-main .grid {
        gap: 1.5rem !important;
    }

    .footer-main .lg\:col-span-4,
    .footer-main .lg\:col-span-2 {
        padding-bottom: 1.5rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .footer-main .lg\:col-span-2:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .footer-title {
        margin-bottom: 0.75rem !important;
        font-size: 0.875rem !important;
    }

    .footer-links li {
        margin-bottom: 0.5rem !important;
    }

    .footer-links li a {
        font-size: 0.8125rem !important;
    }

    .footer-contact li {
        font-size: 0.8125rem !important;
        margin-bottom: 0.5rem !important;
    }

    .footer-description {
        font-size: 0.8125rem !important;
        margin-bottom: 1rem !important;
    }

    .footer-bottom {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .footer-bottom .flex-col {
        gap: 0.75rem !important;
    }
}

/* ==========================================================================
   Footer Styling - Nova Paleta de Cores
   ========================================================================== */

.footer-modern {
    background: linear-gradient(135deg, var(--primary) 0%, #0d2544 100%);
    color: #ffffff;
}

.footer-main {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.footer-logo {
    filter: brightness(0) invert(1);
}

.footer-description {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.footer-title {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--secondary);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 0.875rem;
}

.footer-links li a:hover {
    color: var(--secondary);
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.footer-contact li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact li a:hover {
    color: var(--secondary);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #ffffff;
    transition: all 0.2s ease;
}

.social-link:hover {
    background-color: var(--secondary-intense);
    color: var(--primary);
}

.footer-bottom {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

.payment-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Hover Styles - Azul para Botões, Menu e Links
   ========================================================================== */

/* Botões primários - hover azul mais claro */
.bg-primary:hover,
button.bg-primary:hover,
a.bg-primary:hover {
    background-color: #1a4680 !important;
}

/* Botão de adicionar ao carrinho */
.single-product .single_add_to_cart_button:hover,
.single-product button[name="add-to-cart"]:hover,
.product-card .bag-icon:hover {
    background-color: #1a4680 !important;
}

/* Links de navegação - hover azul */
.text-muted:hover {
    color: var(--primary) !important;
}

/* Menu items hover */
.header-nav a:hover,
nav a.text-muted:hover,
.nav-link:hover {
    color: var(--primary) !important;
}

/* Botões com borda - hover com fundo azul claro */
.border-border:hover,
button.border-border:hover {
    border-color: var(--primary) !important;
    background-color: rgba(13, 40, 71, 0.05) !important;
    /* primary darker */
}

/* Links em geral - hover azul */
a:not(.bg-primary):not(.social-link):not(.footer-links a):not(.footer-contact a):hover {
    color: var(--primary);
}

/* Classe utilitária para hover azul */
.hover\:bg-primary\/90:hover {
    background-color: #1a4680 !important;
}

/* ==========================================================================
   Mobile Add to Cart - Botões +/- Menores
   ========================================================================== */

/* Barra mobile de adicionar ao carrinho */
.fixed.bottom-0 .flex.items-center.border {
    padding: 0 !important;
}

/* Botões +/- mobile menores */
.fixed.bottom-0 button[onclick*="Qty"],
.fixed.bottom-0 button[type="button"] {
    padding: 0.375rem !important;
    min-width: 2rem !important;
}

.fixed.bottom-0 button[onclick*="Qty"] svg,
.fixed.bottom-0 button[type="button"] svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
}

/* Input de quantidade mobile menor */
.fixed.bottom-0 input[type="number"] {
    width: 1.75rem !important;
    font-size: 0.8125rem !important;
    padding: 0 !important;
}

/* Botão adicionar mobile - texto menor e sem quebra */
.fixed.bottom-0 button[name="add-to-cart"],
.fixed.bottom-0 button[type="submit"] {
    font-size: 0.8125rem !important;
    white-space: nowrap !important;
    gap: 0.375rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.fixed.bottom-0 button[name="add-to-cart"] svg,
.fixed.bottom-0 button[type="submit"] svg {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
}

/* Mobile cart total */
#mobileCartTotal {
    font-weight: 600 !important;
}

/* ==========================================================================
   Product Gallery Thumbnails - Mobile Scroll Fix
   ========================================================================== */

.gallery-thumbnails {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--border) transparent !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Hide scrollbar but keep functionality */
.gallery-thumbnails::-webkit-scrollbar {
    height: 6px !important;
}

.gallery-thumbnails::-webkit-scrollbar-track {
    background: transparent !important;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
    background-color: var(--border) !important;
    border-radius: 3px !important;
}

/* Ensure thumbnails don't overflow container */
.single-product .space-y-4 {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Gallery container on mobile */
@media (max-width: 1023px) {
    .gallery-thumbnails {
        padding-bottom: 0.5rem !important;
    }

    .gallery-thumbnails button {
        width: 4rem !important;
        height: 4rem !important;
        min-width: 4rem !important;
    }
}

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

/* Footer contact icons - white color */
.footer-contact li svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.footer-contact li a,
.footer-contact li span {
    color: rgba(255, 255, 255, 0.7) !important;
}

.footer-contact li a:hover {
    color: var(--secondary) !important;
}

.border-border:hover,
button.border-border:hover {
    background-color: #fff !important;
    border-color: #fff !important;
}

/* ==========================================================================
   Fórmulas Florais Page Styles
   ========================================================================== */

/* Formula Cards */
.formula-card {
    position: relative;
    overflow: hidden;
}

.formula-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary-intense) 100%);
    transition: height 0.4s ease;
    z-index: 1;
}

.formula-card:hover::before {
    height: 100%;
}

/* Formula Affirmation Blockquote */
.formula-affirmation {
    position: relative;
    transition: all 0.3s ease;
}

.formula-affirmation p {
    margin: 0;
    line-height: 1.6;
}

.formula-card:hover .formula-affirmation {
    background-color: rgba(158, 207, 184, 0.5);
    /* secondary darker */
}

/* Formula Card Icon Animation */
.formula-card>.flex.items-start>.flex-shrink-0 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.formula-card:hover>.flex.items-start>.flex-shrink-0 {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(13, 40, 71, 0.2);
    /* primary darker, stronger shadow */
}

/* Formula Card Title Animation */
.formula-card h2 {
    transition: color 0.3s ease;
}

.formula-card:hover h2 {
    color: var(--primary);
}