/**
 * Twistshake Portugal Storefront Styles
 * Warm beige/cream color palette: #F9F6F0 (fundo), #111111 (texto), #8B7A68 (secundário)
 */

body.twistshake-theme {
    background-color: #F9F6F0 !important;
    color: #111111 !important;
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* Typography Overrides */
body.twistshake-theme h1,
body.twistshake-theme h2,
body.twistshake-theme h3,
body.twistshake-theme h4,
body.twistshake-theme h5,
body.twistshake-theme h6,
body.twistshake-theme .site-title a,
body.twistshake-theme .entry-title {
    font-family: 'Outfit', sans-serif !important;
    color: #111111 !important;
    font-weight: 600 !important;
}

/* --- 1. Promo/Top Bar --- */
.ts-promo-bar {
    background-color: #FAF8F5; /* Very light beige/cream top bar */
    color: #111111;
    border-bottom: 1px solid #EAE5DB;
    font-size: 11px;
    font-weight: 500;
    padding: 10px 0;
    width: 100%;
}
.ts-promo-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.ts-promo-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ts-promo-item span {
    white-space: nowrap;
}
.ts-promo-icon {
    font-size: 14px;
}
.ts-separator {
    display: none; /* Removed old text separator */
}

/* --- 2. Header --- */
.ts-header {
    background-color: #FFFFFF;
    border-bottom: 1px solid #EAE5DB;
    padding-top: 20px;
}
.ts-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
}

/* Logo */
.ts-branding {
    flex: 0 0 250px;
}
.ts-logo-link {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    line-height: 1;
}
.ts-logo-main {
    font-family: 'Outfit', sans-serif !important;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #111111;
    text-align: center;
}
.ts-logo-sub {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px;
    font-style: italic;
    letter-spacing: 0.05em;
    color: #8B7A68;
    text-align: center;
    margin-top: 2px;
}
.ts-logo-country {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #111111;
    text-align: center;
    margin-top: 4px;
}

/* Search Form */
.ts-search {
    flex: 0 1 450px;
}
.ts-search-form {
    display: flex;
    margin: 0;
    border: 1px solid #EAE5DB;
    border-radius: 25px;
    overflow: hidden;
    background-color: #F9F6F0;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.ts-search-form:focus-within {
    border-color: #111111;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.ts-search-field {
    flex-grow: 1;
    padding: 10px 18px;
    border: none !important;
    font-size: 13px;
    background: transparent !important;
    outline: none !important;
    color: #111111 !important;
}
.ts-search-submit {
    background: transparent;
    border: none;
    padding: 0 15px;
    cursor: pointer;
    color: #8B7A68;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ts-search-submit:hover {
    color: #111111;
}

/* Header Icons */
.ts-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}
.ts-icon-link {
    color: #111111;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.ts-icon-link:hover {
    color: #8B7A68;
}
.ts-cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: #111111;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 6px;
    line-height: 1;
}

/* Navigation */
.ts-nav {
    border-top: 1px solid #F9F6F0;
    background-color: #FFFFFF;
}
.ts-nav-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 12px 0;
    gap: 35px;
}
.ts-nav-menu li a {
    color: #111111 !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.2s;
}
.ts-nav-menu li a:hover {
    color: #8B7A68 !important;
}
.ts-nav-menu li a.ts-promo-link {
    color: #D32F2F !important;
}

/* Hide storefront default components on Twistshake domain */
body.twistshake-theme .custom-top-bar,
body.twistshake-theme .custom-middle-bar,
body.twistshake-theme .custom-nav-bar,
body.twistshake-theme .custom-promo-bar,
body.twistshake-theme #secondary {
    display: none !important;
}

body.twistshake-theme #primary {
    width: 100% !important;
    float: none !important;
}

/* --- 3. Hero Section --- */
.ts-hero-section {
    background-color: #FFF5F6; /* Soft light pinkish/cream */
    padding: 60px 0;
    border-bottom: 1px solid #F3ECE1;
}
.ts-hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
}
.ts-hero-content {
    flex: 1;
    max-width: 500px;
    text-align: left;
    margin: 0;
}
.ts-hero-tagline {
    font-size: 12px;
    font-weight: 700;
    color: #FC7A94; /* Soft pink brand text */
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.ts-hero-title {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 20px;
    color: #111111 !important;
}
.ts-hero-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 30px;
}
.ts-hero-buttons {
    display: flex;
    gap: 15px;
}
.ts-hero-btn-primary {
    background-color: #FC7A94; /* Filled pink brand button */
    color: #FFFFFF !important;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none !important;
    display: inline-block;
    transition: background-color 0.2s, transform 0.2s;
}
.ts-hero-btn-primary:hover {
    background-color: #E05D78;
    transform: translateY(-2px);
}
.ts-hero-btn-secondary {
    background-color: transparent;
    color: #111111 !important;
    padding: 12px 30px;
    border: 1.5px solid #111111;
    border-radius: 25px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none !important;
    display: inline-block;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.ts-hero-btn-secondary:hover {
    background-color: #111111;
    color: #FFFFFF !important;
    transform: translateY(-2px);
}

/* Badge Container */
.ts-hero-badge-container {
    flex: 0 0 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.ts-hero-badge {
    background-color: #FC7A94; /* Ruffled pink badge */
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 6px dashed #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    text-align: center;
    box-shadow: 0 10px 25px rgba(252, 122, 148, 0.2);
    transform: rotate(-5deg);
    animation: tsFloat 3s ease-in-out infinite alternate;
}
@keyframes tsFloat {
    0% { transform: translateY(0) rotate(-5deg); }
    100% { transform: translateY(-8px) rotate(-2deg); }
}
.ts-badge-sale {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.ts-badge-ate {
    font-size: 9px;
    font-weight: 600;
    opacity: 0.8;
    margin-top: 2px;
}
.ts-badge-percentage {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    margin: 2px 0;
}
.ts-badge-extra {
    font-size: 11px;
    font-weight: 700;
}
.ts-badge-code {
    background-color: #FFFFFF;
    color: #111111;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 12px;
    margin-top: 8px;
}

/* Image Container */
.ts-hero-image-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.ts-hero-image {
    max-height: 380px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.05));
}

/* --- 4. Circles Category Navigation --- */
.ts-circles-nav {
    padding: 40px 0 20px;
    background-color: #FFFFFF;
}
.ts-circles-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
}
.ts-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    flex: 0 0 auto;
    transition: transform 0.2s;
    width: 90px;
    text-align: center;
}
.ts-circle-item:hover {
    transform: translateY(-4px);
}
.ts-circle-icon-wrapper {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: box-shadow 0.2s;
}
.ts-circle-item:hover .ts-circle-icon-wrapper {
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}
.ts-circle-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #111111;
}

/* --- 5. Value Props Bar --- */
.ts-value-props {
    background-color: #FAF8F5; /* Cream background props bar */
    border-top: 1px solid #EAE5DB;
    border-bottom: 1px solid #EAE5DB;
    padding: 18px 0;
}
.ts-value-props-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.ts-val-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.ts-val-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.ts-val-text {
    font-size: 11px;
    line-height: 1.35;
}
.ts-val-text strong {
    font-weight: 700;
    color: #111111;
    letter-spacing: 0.04em;
}
.ts-val-text span {
    color: #666666;
}

/* --- 6. Featured Products (Mais Vendidos) --- */
.ts-home-featured {
    padding: 60px 0 20px;
    background-color: #FFFFFF;
}
.ts-featured-header {
    text-align: center;
    margin-bottom: 40px;
}
.ts-featured-header h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #111111;
    margin: 0;
    display: inline-block;
}
.ts-featured-line {
    width: 40px;
    height: 3px;
    background-color: #FC7A94;
    margin: 10px auto 0;
    border-radius: 2px;
}


/* --- 5. Homepage Product Grids --- */
.ts-home-products {
    padding: 30px 0 70px;
}
.ts-category-section {
    margin-bottom: 60px;
}
.ts-category-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #EAE5DB;
    padding-bottom: 12px;
    margin-bottom: 25px;
}
.ts-category-header h2 {
    font-size: 22px;
    margin: 0;
}
.ts-view-all {
    font-size: 13px;
    font-weight: 700;
    color: #8B7A68 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ts-view-all:hover {
    color: #111111 !important;
}

/* WooCommerce Product Card Overrides (Twistshake brand styles) */
body.twistshake-theme ul.products li.product {
    background-color: #FFFFFF !important;
    border: 1px solid #EAE5DB !important;
    border-radius: 8px !important;
    padding: 15px !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    box-shadow: none !important;
}
body.twistshake-theme ul.products li.product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03) !important;
}
body.twistshake-theme ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Outfit', sans-serif !important;
    color: #111111 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}
body.twistshake-theme ul.products li.product .price {
    color: #8B7A68 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}
body.twistshake-theme ul.products li.product .button {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 10px 20px !important;
    transition: background-color 0.2s !important;
}
body.twistshake-theme ul.products li.product .button:hover {
    background-color: #8B7A68 !important;
}

/* --- 6. Footer --- */
.ts-trust-badges {
    background-color: #FFFFFF;
    border-top: 1px solid #EAE5DB;
    border-bottom: 1px solid #EAE5DB;
    padding: 30px 0;
}
.ts-trust-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.ts-badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: center;
}
.ts-badge-icon {
    font-size: 24px;
}
.ts-badge-text strong {
    font-size: 12px;
    letter-spacing: 0.05em;
    color: #111111;
}
.ts-badge-text span {
    font-size: 11px;
    color: #666666;
}

.ts-footer {
    background-color: #F9F6F0;
    padding: 70px 0 0;
    font-size: 13px;
    color: #333333;
}
.ts-footer-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 40px !important;
    padding-bottom: 50px !important;
}
.ts-footer-col {
    flex: 1 1 220px !important;
    margin: 0 !important;
}
.ts-brand-col {
    flex: 1.4 1 300px !important;
}
.ts-footer-logo .ts-logo-main {
    font-size: 24px;
    text-align: left;
}
.ts-footer-logo .ts-logo-sub {
    font-size: 9px;
    text-align: left;
}
.ts-footer-logo .ts-logo-country {
    font-size: 10px;
    text-align: left;
}
.ts-brand-desc {
    margin: 20px 0;
    line-height: 1.6;
    color: #555555;
}
.ts-social-icons {
    display: flex;
    gap: 12px;
}
.ts-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #FFFFFF;
    border: 1px solid #EAE5DB;
    border-radius: 50%;
    color: #111111;
    transition: background-color 0.2s, color 0.2s;
.ts-footer-col h3 {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin-bottom: 25px !important;
    color: #111111 !important;
}

.ts-footer-links,
ul.ts-footer-links {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ts-footer-links li,
ul.ts-footer-links li {
    list-style: none !important;
    list-style-type: none !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
}

.ts-footer-links li::before,
ul.ts-footer-links li::before {
    content: none !important;
    display: none !important;
}

.ts-footer-links li a,
ul.ts-footer-links li a {
    color: #444444 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.ts-footer-links li a:hover,
ul.ts-footer-links li a:hover {
    color: #111111 !important;
    text-decoration: underline !important;
}

.ts-footer-contacts,
ul.ts-footer-contacts {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ts-footer-contacts li {
    margin-bottom: 18px;
    line-height: 1.4;
}
.ts-contact-icon {
    margin-right: 8px;
}
.ts-footer-contacts li a {
    color: #111111 !important;
    font-weight: 600;
    text-decoration: none !important;
}
.ts-contact-hours {
    color: #666666;
    font-size: 11px;
}

.ts-footer-bottom {
    border-top: 1px solid #EAE5DB;
    padding: 30px 0;
    background-color: #FFFFFF;
}
.ts-bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ts-payment-badges {
    display: flex;
    align-items: center;
    gap: 15px;
}
.ts-lock-icon {
    font-weight: 600;
    font-size: 12px;
}
.ts-payment-icons {
    display: flex;
    align-items: center;
    gap: 12px;
}
img.ts-payment-logo,
.ts-payment-logo {
    height: 24px !important;
    max-height: 24px !important;
    width: auto !important;
    max-width: 75px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    background-color: #FFFFFF !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 1px solid #EAE5DB !important;
}
.ts-distributor-info {
    text-align: right;
    font-size: 11px;
    line-height: 1.4;
}
.ts-distributor-logo {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    font-size: 13px;
}

.ts-copyright-bar {
    background-color: #111111;
    color: rgba(255,255,255,0.6);
    padding: 15px 0;
    font-size: 11px;
}
.ts-copyright-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ts-legal-links a {
    color: rgba(255,255,255,0.6) !important;
    text-decoration: none !important;
    margin-left: 20px;
}
.ts-legal-links a:hover {
    color: #FFFFFF !important;
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .ts-header-container {
        flex-direction: column;
        gap: 15px;
    }
    .ts-branding, .ts-search, .ts-icons {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
    }
    .ts-nav-menu {
        flex-wrap: wrap;
        gap: 15px;
    }
    .ts-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ts-footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ts-trust-container, .ts-bottom-container, .ts-copyright-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .ts-distributor-info {
        text-align: center;
    }
    
    /* New Responsive Additions */
    .ts-promo-content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .ts-hero-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .ts-hero-content {
        max-width: 100%;
        text-align: center;
    }
    .ts-hero-title {
        font-size: 30px;
    }
    .ts-hero-buttons {
        justify-content: center;
    }
    .ts-hero-badge-container {
        margin: 10px 0;
    }
    .ts-hero-badge {
        width: 140px;
        height: 140px;
    }
    .ts-badge-percentage {
        font-size: 28px;
    }
    .ts-hero-image-container {
        justify-content: center;
    }
    .ts-hero-image {
        max-height: 250px;
    }
    .ts-circles-container {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 5px 15px 15px;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
    }
    .ts-value-props-container {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        padding: 0 15px;
    }
    .ts-val-item {
        width: 100%;
    }
}

/* --- Banner Slider Section --- */
.ts-banner-slider-section {
    margin: 20px 0 35px !important;
}
.ts-banner-slider-wrapper {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 540px !important;
}
.ts-banner-slider {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}
.ts-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 35px 50px !important;
    box-sizing: border-box !important;
}
.ts-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}
.ts-slide-content {
    flex: 0 1 46% !important;
    z-index: 3 !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(10px) !important;
    padding: 28px 32px !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important;
}
.ts-slide-tag {
    display: inline-block !important;
    background-color: #4B6E8F !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
}
.ts-slide-title {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
}
.ts-slide-desc {
    font-size: 14px !important;
    color: #444444 !important;
    line-height: 1.5 !important;
    margin-bottom: 22px !important;
}
.ts-slide-btn {
    display: inline-block !important;
    background-color: #111111 !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s !important;
}
.ts-slide-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
}
.ts-slide-image-wrapper {
    flex: 0 1 50% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2 !important;
}
.ts-slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12) !important;
    transition: transform 0.5s ease !important;
}
.ts-slide:hover .ts-slide-img {
    transform: scale(1.03) !important;
}

/* Arrows */
.ts-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background-color: rgba(255,255,255,0.9);
    color: #111111;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.ts-slider-arrow:hover {
    background-color: #111111;
    color: #FFFFFF;
    transform: translateY(-50%) scale(1.08);
}
.ts-slider-prev {
    left: 20px;
}
.ts-slider-next {
    right: 20px;
}

/* Dots */
.ts-slider-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.ts-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}
.ts-dot.active {
    background-color: #111111;
    width: 24px;
    border-radius: 10px;
}

/* Responsive Footer Grid for 3 Columns */
.ts-footer-grid {
    grid-template-columns: 2fr 1fr 1.5fr !important;
}

/* Badge "NOVO" on product grid cards */
ul.products li.product,
.woocommerce ul.products li.product {
    position: relative !important;
}
.ts-new-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background-color: #111111 !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    z-index: 8 !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

/* Fix pagination icons & styling across WooCommerce (clean & borderless, no grey square boxes) */
.woocommerce-pagination,
.page-numbers {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.woocommerce-pagination ul.page-numbers {
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

.woocommerce-pagination ul.page-numbers li {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: none !important;
    background: transparent !important;
    color: #111111 !important;
    padding: 6px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.woocommerce-pagination ul.page-numbers li span.current {
    background-color: #111111 !important;
    color: #FFFFFF !important;
}

/* Remove grey square background & boxes specifically from prev/next arrows */
.woocommerce-pagination ul.page-numbers li a.prev,
.woocommerce-pagination ul.page-numbers li a.next,
.woocommerce-pagination ul.page-numbers li span.prev,
.woocommerce-pagination ul.page-numbers li span.next,
.woocommerce-pagination a.prev,
.woocommerce-pagination a.next,
.page-numbers .prev,
.page-numbers .next {
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #111111 !important;
    padding: 4px 10px !important;
    text-indent: 0 !important;
}

.woocommerce-pagination a.prev::before,
.woocommerce-pagination a.next::before,
.woocommerce-pagination span.prev::before,
.woocommerce-pagination span.next::before,
.page-numbers .prev::before,
.page-numbers .next::before {
    content: none !important;
    display: none !important;
}

.woocommerce-pagination a.prev:hover,
.woocommerce-pagination a.next:hover {
    color: #005492 !important;
    background: transparent !important;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
@media (max-width: 991px) {
    /* Top Promo Bar Responsiveness */
    .ts-promo-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 8px 10px !important;
        background-color: #FAF8F5 !important;
    }
    .ts-promo-bar::-webkit-scrollbar {
        display: none !important;
    }
    .ts-promo-content {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 16px !important;
        width: max-content !important;
        margin: 0 !important;
    }
    .ts-promo-item {
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    /* Main Header Mobile Flex Layout */
    .ts-header-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 15px !important;
        gap: 10px !important;
    }
    .ts-branding {
        flex: 1 1 auto !important;
        text-align: left !important;
    }
    .ts-logo-main {
        font-size: 22px !important;
    }
    .ts-logo-sub {
        font-size: 9px !important;
    }
    .ts-logo-country {
        font-size: 10px !important;
    }
    .ts-icons {
        flex: 0 0 auto !important;
        gap: 15px !important;
    }
    .ts-search {
        flex: 0 0 100% !important;
        width: 100% !important;
        order: 3 !important;
        margin-top: 4px !important;
    }
    .ts-search-form {
        width: 100% !important;
        background-color: #F9F6F0 !important;
    }
    .ts-search-field {
        width: 100% !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* Navigation Mobile Swipeable Menu Pills */
    .ts-nav {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        background: #FFFFFF !important;
        border-top: 1px solid #EAE5DB !important;
        border-bottom: 1px solid #EAE5DB !important;
    }
    .ts-nav::-webkit-scrollbar {
        display: none !important;
    }
    .ts-nav-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 15px !important;
        margin: 0 !important;
        width: max-content !important;
    }
    .ts-nav-menu li {
        flex-shrink: 0 !important;
    }
    .ts-nav-menu li a {
        font-size: 11.5px !important;
        white-space: nowrap !important;
        padding: 6px 14px !important;
        display: inline-block !important;
        border-radius: 20px !important;
        background-color: #F9F6F0 !important;
        color: #111111 !important;
        font-weight: 700 !important;
    }
    .ts-nav-menu li a.ts-promo-link {
        background-color: #FEE2E2 !important;
        color: #D32F2F !important;
    }

    /* Hero Banner Mobile Clean Layout */
    .ts-banner-slider-wrapper {
        aspect-ratio: auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 480px !important;
        border-radius: 16px !important;
    }
    .ts-banner-slider {
        height: auto !important;
        min-height: 480px !important;
        position: relative !important;
    }
    .ts-banner-slider-section .ts-slide {
        padding: 15px 15px 55px !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }
    .ts-banner-slider-section .ts-slide.active {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: center !important;
    }
    .ts-banner-slider-section .ts-slide-content {
        flex: 0 0 auto !important;
        width: 100% !important;
        padding: 18px 16px !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.05) !important;
    }
    .ts-banner-slider-section .ts-slide-tag {
        font-size: 10px !important;
        padding: 4px 12px !important;
        margin-bottom: 8px !important;
    }
    .ts-banner-slider-section .ts-slide-title {
        font-size: 20px !important;
        margin-bottom: 8px !important;
        line-height: 1.25 !important;
    }
    .ts-banner-slider-section .ts-slide-desc {
        font-size: 12px !important;
        margin-bottom: 14px !important;
        line-height: 1.4 !important;
    }
    .ts-banner-slider-section .ts-slide-btn {
        font-size: 12px !important;
        padding: 9px 24px !important;
    }
    .ts-banner-slider-section .ts-slide-image-wrapper {
        flex: 0 0 180px !important;
        width: 100% !important;
        height: 180px !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .ts-banner-slider-section .ts-slide-img {
        max-height: 180px !important;
        width: auto !important;
        max-width: 92% !important;
        object-fit: contain !important;
        border-radius: 12px !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
    }
    .ts-banner-slider-wrapper .ts-slider-arrow {
        display: none !important;
    }
    .ts-banner-slider-wrapper .ts-slider-dots {
        bottom: 12px !important;
    }

    .ts-footer-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Color Group Swatches Styling (Clean Twistshake Official Style) */
.ts-color-swatches-wrapper {
    margin: 20px 0 24px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ts-color-swatches-header {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    letter-spacing: 0.5px !important;
}

.ts-color-swatches-title {
    color: #444444 !important;
    font-weight: 600 !important;
}

.ts-color-swatches-active-label {
    color: #111111 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.ts-color-swatches-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

.ts-color-swatch-card-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.ts-color-swatch-item {
    display: block !important;
    width: 68px !important;
    height: 68px !important;
    border-radius: 6px !important;
    padding: 2px !important;
    background: #FAF9F6 !important;
    border: 1px solid #E2E8F0 !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
    position: relative !important;
    box-shadow: none !important;
}

.ts-color-swatch-img-box {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FAF9F6 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

.ts-color-swatch-img {
    max-width: 92% !important;
    max-height: 92% !important;
    object-fit: contain !important;
    display: block !important;
}

.ts-color-swatch-item:hover {
    border-color: #111111 !important;
    transform: translateY(-2px) !important;
}

.ts-color-swatch-item.ts-color-swatch-active {
    border: 2px solid #111111 !important;
    outline: 1px solid #111111 !important;
    box-shadow: none !important;
    transform: none !important;
}

.ts-color-swatch-stock-label {
    font-size: 11px !important;
    color: #DC2626 !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 4px !important;
}

.ts-stock-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #DC2626 !important;
    display: inline-block !important;
}

/* ==========================================================================
   Clean & Modern Vector SVG Icons (Fix Broken Font Icons)
   ========================================================================== */

/* 1. Gallery Zoom / Expand Button */
.woocommerce-product-gallery__trigger {
    background-color: #FFFFFF !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #E2E8F0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 99 !important;
}

.woocommerce-product-gallery__trigger:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

.woocommerce-product-gallery__trigger::before,
.woocommerce-product-gallery__trigger::after {
    content: "" !important;
    display: none !important;
}

/* 2. Stock Status Icon (In Stock & Out of Stock) */
p.stock::before,
.stock.in-stock::before,
.stock.out-of-stock::before,
.stock::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    font-family: inherit !important;
}

p.stock.in-stock::before,
.stock.in-stock::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="%2310B981"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>') !important;
}

p.stock.out-of-stock::before,
.stock.out-of-stock::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="%23EF4444"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>') !important;
}

p.stock {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 12px 0 !important;
}

p.stock.in-stock {
    color: #059669 !important;
}

p.stock.out-of-stock {
    color: #DC2626 !important;
}

/* 3. Product Tabs & Accordions Fix (Clean & Clutter-Free, No Extra Arrows) */
.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li a::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li a::before,
.wc-tabs li::after,
.wc-tabs li a::after,
.wc-tabs li::before,
.wc-tabs li a::before,
.woocommerce-tabs .panel h2::after,
.woocommerce-tabs .panel h2::before,
.woocommerce-Tabs-panel h2::after,
.woocommerce-Tabs-panel h2::before,
.wc-tab-title::after,
.wc-tab-title::before {
    content: "" !important;
    display: none !important;
}

/* 4. WooCommerce Notices Modern Styling (Success, Info, Error) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    position: relative !important;
    display: block !important;
    padding: 16px 20px 16px 52px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

.woocommerce-info {
    background-color: #f0f9ff !important;
    border-left: 4px solid #0284c7 !important;
    color: #0369a1 !important;
}

.woocommerce-info::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="%230284c7" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/><circle cx="12" cy="8" r="1" fill="%23ffffff"/><rect x="11" y="11" width="2" height="6" fill="%23ffffff"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.woocommerce-message {
    background-color: #f0fdf4 !important;
    border-left: 4px solid #10b981 !important;
    color: #15803d !important;
}

.woocommerce-message::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%2310b981"/><path d="M10 15.17l7.59-7.59L19 9l-9 9-5-5 1.41-1.41z" fill="%23ffffff"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.woocommerce-error {
    background-color: #fff1f2 !important;
    border-left: 4px solid #f43f5e !important;
    color: #be123c !important;
    list-style: none !important;
}

.woocommerce-error::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%23f43f5e"/><rect x="11" y="7" width="2" height="6" fill="%23ffffff"/><circle cx="12" cy="16" r="1" fill="%23ffffff"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Hide admin "Editar" links across all frontend pages */
.post-edit-link,
.edit-link,
a.post-edit-link,
span.edit-link,
footer.entry-footer .edit-link,
footer.entry-footer {
    display: none !important;
}


.woocommerce-message a.button::after,
.woocommerce-message .button::after,
.woocommerce-info a.button::after,
.woocommerce-info .button::after,
a.button.wc-forward::after,
.button.wc-forward::after {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-family: inherit !important;
}


/* 5. Cart Table Remove Product Item Link (Minimalist Trash Can SVG) */
td.product-remove a.remove,
.woocommerce-cart-form .product-remove a.remove,
a.remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

td.product-remove a.remove::before,
.woocommerce-cart-form .product-remove a.remove::before,
a.remove::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%2394A3B8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: all 0.2s ease !important;
}

td.product-remove a.remove:hover::before,
.woocommerce-cart-form .product-remove a.remove:hover::before,
a.remove:hover::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23EF4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>') !important;
    transform: translate(-50%, -50%) scale(1.15) !important;
}



/* 6. Checkout Payment Method Radio Button Icons */
.wc_payment_methods label::before,
.payment_methods label::before,
#add_payment_method #payment ul.payment_methods li label::before,
.woocommerce-checkout #payment ul.payment_methods li label::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    border-radius: 50% !important;
    border: 2px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
}

.wc_payment_methods input[type="radio"]:checked + label::before,
.payment_methods input[type="radio"]:checked + label::before,
#add_payment_method #payment ul.payment_methods li input[type="radio"]:checked + label::before,
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label::before {
    border-color: #111111 !important;
    background-color: #111111 !important;
    box-shadow: inset 0 0 0 3px #ffffff !important;
}

/* 7. My Account Navigation Icons */
.woocommerce-MyAccount-navigation ul li a::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    font-family: inherit !important;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23555555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>') !important;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23555555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>') !important;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads a::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23555555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>') !important;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23555555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>') !important;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23555555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>') !important;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23555555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>') !important;
}

/* 8. Star Rating Icons */
.star-rating::before,
.star-rating span::before {
    font-family: Arial, sans-serif !important;
    color: #F59E0B !important;
}

/* 9. Added to Cart Link ("Ver carrinho") Styling & Vector SVG Arrow */
a.added_to_cart,
.added_to_cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    margin-left: 10px !important;
    vertical-align: middle !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

a.added_to_cart:hover,
.added_to_cart:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

a.added_to_cart::after,
.added_to_cart::after,
a.wc-forward::after,
.wc-forward::after,
.woocommerce-Button--next::after {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-family: inherit !important;
}

.woocommerce-Button--previous::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-family: inherit !important;
}

/* 10. Pagination & Navigation Arrows */
.woocommerce-pagination .next::after,
.woocommerce-pagination .prev::after,
.site-main nav.navigation .nav-previous a::before,
.site-main nav.navigation .nav-next a::after,
.storefront-product-pagination a[rel=prev]::after,
.storefront-product-pagination a[rel=next]::after {
    font-family: Arial, sans-serif !important;
}

.woocommerce-pagination .next::after,
.site-main nav.navigation .nav-next a::after,
.storefront-product-pagination a[rel=next]::after {
    content: "→" !important;
}

.woocommerce-pagination .prev::after,
.site-main nav.navigation .nav-previous a::before,
.storefront-product-pagination a[rel=prev]::after {
    content: "←" !important;
}

/* 11. Breadcrumbs & Reset Links */
.woocommerce-breadcrumb .breadcrumb-separator::after {
    content: "/" !important;
    font-family: Arial, sans-serif !important;
    opacity: 0.5 !important;
}

a.reset_variations::before,
a#variations_clear::before {
    content: "" !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    margin-right: 4px !important;
    vertical-align: middle !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23666666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-family: inherit !important;
}

/* 13. Modern CSS Loading Spinner (Replaces Broken FontAwesome Spinner) */
@keyframes ts-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.blockUI::before,
.woocommerce .blockUI::before,
.woocommerce-page .blockUI::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 32px !important;
    height: 32px !important;
    margin-top: -16px !important;
    margin-left: -16px !important;
    border: 3px solid rgba(0, 0, 0, 0.1) !important;
    border-top-color: #111111 !important;
    border-radius: 50% !important;
    animation: ts-spin 0.75s linear infinite !important;
    font-family: inherit !important;
    text-indent: 0 !important;
    display: block !important;
    z-index: 99999 !important;
}

.blockUI.blockOverlay,
.woocommerce .blockUI.blockOverlay {
    background-color: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(2px) !important;
    opacity: 1 !important;
}

button.loading::after,
input[type=button].loading::after,
input[type=reset].loading::after,
input[type=submit].loading::after,
.button.loading::after,
.added_to_cart.loading::after {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: #ffffff !important;
    border-radius: 50% !important;
    animation: ts-spin 0.7s linear infinite !important;
    font-family: inherit !important;
    position: relative !important;
/* 14. Order Action Buttons ("Ver") & My Account Buttons SVG Icons */
.my_account_orders .button.view,
.woocommerce-orders-table__cell-order-actions .button.view,
.woocommerce-orders-table__cell-order-actions a.button,
td.order-actions a.button,
a.button.view,
.button.view {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.my_account_orders .button.view::after,
.woocommerce-orders-table__cell-order-actions .button.view::after,
.woocommerce-orders-table__cell-order-actions a.view::after,
td.order-actions a.view::after,
a.button.view::after,
.button.view::after {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
}

.my_account_orders .button.view:hover::after,
.woocommerce-orders-table__cell-order-actions .button.view:hover::after,
.woocommerce-orders-table__cell-order-actions a.view:hover::after,
td.order-actions a.view:hover::after,
a.button.view:hover::after,
.button.view:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>') !important;
}

p.order-again .button::after,
.order-again a::after {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-family: inherit !important;
}

.woocommerce-MyAccount-downloads .button::after,
.woocommerce-Table--downloadable-files .button::after {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-family: inherit !important;
}

/* 16. Address Titles Edit Button ("Editar") SVG Pencil Icon */
.addresses header.title a,
.woocommerce-Address-title a,
.woocommerce-address-title a,
header.title a.edit,
a.edit,
.woocommerce-Address-title a.edit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background-color: #f1f5f9 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
    margin-left: 10px !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    cursor: pointer !important;
}

.addresses header.title a::before,
.woocommerce-Address-title a::before,
.woocommerce-address-title a::before,
header.title a.edit::before,
a.edit::before,
.woocommerce-Address-title a.edit::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 14px !important;
    height: 14px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23475569" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 1 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-family: inherit !important;
    text-indent: 0 !important;
    transition: all 0.2s ease !important;
}

.addresses header.title a:hover,
.woocommerce-Address-title a:hover,
a.edit:hover {
    background-color: #111111 !important;
}

.addresses header.title a:hover::before,
.woocommerce-Address-title a:hover::before,
a.edit:hover::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 1 2 2h14a2 2 0 0 1 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>') !important;
}

/* 17. Password Inputs Show/Hide Toggle SVG Eye Icon */
.woocommerce-form-row {
    position: relative !important;
}

span.show-password-input,
button.show-password-input,
.show-password-input,
.woocommerce-form-row .show-password-input {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    z-index: 10 !important;
    font-size: 0 !important;
    color: transparent !important;
}

span.show-password-input::after,
button.show-password-input::after,
.show-password-input::after,
.woocommerce-form-row .show-password-input::after {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-family: inherit !important;
    text-indent: 0 !important;
}

span.show-password-input::before,
button.show-password-input::before,
.show-password-input::before,
.woocommerce-form-row .show-password-input::before {
    display: none !important;
}

span.show-password-input.display-password::after,
button.show-password-input.display-password::after,
.show-password-input.display-password::after,
.woocommerce-form-row .show-password-input.display-password::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>') !important;
}

.woocommerce-password-strength::after {
    display: none !important;
}