/*
 Theme Name: Fibra Ótica Portugal - Premium
 Theme URI: https://fibraotica.com.pt
 Author: Fibra Ótica Portugal
 Author URI: https://fibraotica.com.pt
 Description: Tema premium profissional para Fibra Ótica Portugal
 Template: generatepress
 Version: 6.7.1
 Text Domain: fibra-otica
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================================
   DESIGN SYSTEM PREMIUM - FIBRA ÓPTICA PORTUGAL
   Inspirado em: ComparaJá.pt, Selectra.pt, Endesa.pt
   ============================================================================ */

/* Google Fonts (Inter + Poppins) sao carregadas via wp_enqueue_style em functions.php */

:root {
    /* === CORES PRINCIPAIS === */
    --fo-red: #E63946;
    --fo-red-dark: #C62828;
    --fo-red-light: #FF5252;
    --fo-red-glow: rgba(230, 57, 70, 0.4);

    /* === CORES SECUNDÁRIAS === */
    --fo-navy: #1D3557;
    --fo-navy-light: #264573;
    --fo-navy-dark: #0D1B2A;

    /* === CORES DE SERVIÇOS === */
    --fo-telecom: #E63946;
    --fo-telecom-light: #FDEBED;
    --fo-energia: #00C853;
    --fo-energia-light: #E8F5E9;
    --fo-seguranca: #2196F3;
    --fo-seguranca-light: #E3F2FD;

    /* === NEUTROS === */
    --fo-white: #FFFFFF;
    --fo-gray-50: #FAFAFA;
    --fo-gray-100: #F5F5F5;
    --fo-gray-200: #EEEEEE;
    --fo-gray-300: #E0E0E0;
    --fo-gray-400: #BDBDBD;
    --fo-gray-500: #9E9E9E;
    --fo-gray-600: #757575;
    --fo-gray-700: #616161;
    --fo-gray-800: #424242;
    --fo-gray-900: #212121;

    /* === GRADIENTES === */
    --fo-gradient-red: linear-gradient(135deg, #E63946 0%, #C62828 100%);
    --fo-gradient-navy: linear-gradient(135deg, #1D3557 0%, #0D1B2A 100%);
    --fo-gradient-hero: linear-gradient(135deg, rgba(29, 53, 87, 0.95) 0%, rgba(13, 27, 42, 0.9) 100%);
    --fo-gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);

    /* === TIPOGRAFIA === */
    --fo-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fo-font-heading: 'Poppins', 'Inter', sans-serif;

    /* === TAMANHOS === */
    --fo-text-xs: 0.75rem;
    --fo-text-sm: 0.875rem;
    --fo-text-base: 1rem;
    --fo-text-lg: 1.125rem;
    --fo-text-xl: 1.25rem;
    --fo-text-2xl: 1.5rem;
    --fo-text-3xl: 2rem;
    --fo-text-4xl: 2.5rem;
    --fo-text-5xl: 3.5rem;
    --fo-text-6xl: 4.5rem;

    /* === ESPAÇAMENTO === */
    --fo-space-1: 0.25rem;
    --fo-space-2: 0.5rem;
    --fo-space-3: 0.75rem;
    --fo-space-4: 1rem;
    --fo-space-5: 1.25rem;
    --fo-space-6: 1.5rem;
    --fo-space-8: 2rem;
    --fo-space-10: 2.5rem;
    --fo-space-12: 3rem;
    --fo-space-16: 4rem;
    --fo-space-20: 5rem;
    --fo-space-24: 6rem;
    --fo-space-32: 8rem;

    /* === SOMBRAS === */
    --fo-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --fo-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --fo-shadow-md: 0 4px 16px rgba(0,0,0,0.1);
    --fo-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --fo-shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
    --fo-shadow-red: 0 8px 32px rgba(230, 57, 70, 0.3);
    --fo-shadow-hover: 0 20px 60px rgba(0,0,0,0.15);

    /* === BORDER RADIUS === */
    --fo-radius-sm: 4px;
    --fo-radius: 8px;
    --fo-radius-md: 12px;
    --fo-radius-lg: 16px;
    --fo-radius-xl: 24px;
    --fo-radius-2xl: 32px;
    --fo-radius-full: 9999px;

    /* === TRANSIÇÕES === */
    --fo-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --fo-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --fo-transition-fast: 150ms var(--fo-ease);
    --fo-transition: 250ms var(--fo-ease);
    --fo-transition-slow: 400ms var(--fo-ease);

    /* === CONTAINER === */
    --fo-container: 1200px;
    --fo-container-wide: 1400px;
}

/* ============================================================================
   RESET & BASE
   ============================================================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    line-height: 1.7;
    color: var(--fo-gray-800);
    background-color: var(--fo-white);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--fo-red);
    text-decoration: none;
    transition: color var(--fo-transition-fast);
}

a:hover {
    color: var(--fo-red-dark);
}

/* ============================================================================
   TIPOGRAFIA
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fo-font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-4);
}

h1 { font-size: clamp(2rem, 5vw, var(--fo-text-5xl)); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 4vw, var(--fo-text-4xl)); }
h3 { font-size: clamp(1.5rem, 3vw, var(--fo-text-3xl)); }
h4 { font-size: var(--fo-text-2xl); }
h5 { font-size: var(--fo-text-xl); }
h6 { font-size: var(--fo-text-lg); }

p {
    margin-bottom: var(--fo-space-4);
}

.fo-lead {
    font-size: var(--fo-text-xl);
    color: var(--fo-gray-600);
    line-height: 1.8;
}

.fo-overline {
    font-size: var(--fo-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fo-red);
}

/* ============================================================================
   LAYOUT
   ============================================================================ */

.fo-container {
    width: 100%;
    max-width: var(--fo-container);
    margin: 0 auto;
    padding: 0 var(--fo-space-6);
}

.fo-container--wide {
    max-width: var(--fo-container-wide);
}

.fo-section {
    padding: var(--fo-space-20) 0;
}

.fo-section--sm {
    padding: var(--fo-space-12) 0;
}

.fo-section--lg {
    padding: var(--fo-space-32) 0;
}

.fo-section--gray {
    background-color: var(--fo-gray-50);
}

.fo-section--dark {
    background: var(--fo-gradient-navy);
    color: var(--fo-white);
}

.fo-section--dark h2,
.fo-section--dark h3,
.fo-section--dark h4 {
    color: var(--fo-white);
}

/* Section titles */
.fo-section__title {
    font-size: clamp(1.75rem, 4vw, var(--fo-text-4xl));
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-4);
}

.fo-section__subtitle {
    font-size: var(--fo-text-lg);
    color: var(--fo-gray-600);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ============================================================================
   GRID SYSTEM
   ============================================================================ */

.fo-grid {
    display: grid;
    gap: var(--fo-space-6);
}

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

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

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

@media (min-width: 640px) {
    .fo-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .fo-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .fo-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .fo-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .fo-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================================
   CARDS DE SERVIÇO (COM IMAGEM)
   ============================================================================ */

.fo-card {
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    overflow: hidden;
    box-shadow: var(--fo-shadow);
    transition: all var(--fo-transition);
}

.fo-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--fo-shadow-hover);
}

.fo-card--service .fo-card__image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.fo-card--service .fo-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--fo-transition-slow);
}

.fo-card--service:hover .fo-card__image img {
    transform: scale(1.1);
}

.fo-card__badge {
    position: absolute;
    top: var(--fo-space-4);
    left: var(--fo-space-4);
    padding: var(--fo-space-2) var(--fo-space-3);
    font-size: var(--fo-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--fo-radius-full);
    background: var(--fo-white);
}

.fo-card__badge--telecom { color: var(--fo-red); }
.fo-card__badge--energia { color: var(--fo-energia); }
.fo-card__badge--seguranca { color: var(--fo-seguranca); }

.fo-card__body {
    padding: var(--fo-space-6);
}

.fo-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--fo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--fo-space-4);
    margin-top: -44px;
    position: relative;
    box-shadow: var(--fo-shadow-lg);
}

.fo-card__icon--telecom {
    background: var(--fo-gradient-red);
    color: var(--fo-white);
}

.fo-card__icon--energia {
    background: linear-gradient(135deg, #00C853 0%, #00E676 100%);
    color: var(--fo-white);
}

.fo-card__icon--seguranca {
    background: linear-gradient(135deg, #2196F3 0%, #42A5F5 100%);
    color: var(--fo-white);
}

.fo-card__title {
    font-size: var(--fo-text-xl);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-3);
}

.fo-card__text {
    color: var(--fo-gray-600);
    line-height: 1.7;
    margin-bottom: var(--fo-space-4);
}

.fo-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--fo-space-4) 0;
}

.fo-card__features li {
    display: flex;
    align-items: center;
    gap: var(--fo-space-2);
    padding: var(--fo-space-2) 0;
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-700);
}

/* ============================================================================
   STEPS / COMO FUNCIONA (SERVIÇO)
   ============================================================================ */

.fo-steps {
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-8);
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .fo-steps {
        flex-direction: row;
        text-align: center;
    }
}

.fo-step {
    display: flex;
    gap: var(--fo-space-5);
    flex: 1;
}

@media (min-width: 768px) {
    .fo-step {
        flex-direction: column;
        align-items: center;
    }
}

.fo-step__number {
    width: 64px;
    height: 64px;
    min-width: 64px;
    background: var(--fo-gradient-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fo-font-heading);
    font-size: var(--fo-text-2xl);
    font-weight: 800;
    color: var(--fo-white);
    box-shadow: var(--fo-shadow-red);
}

.fo-step__content {
    flex: 1;
}

.fo-step__title {
    font-size: var(--fo-text-lg);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-2);
}

.fo-step__text {
    color: var(--fo-gray-600);
    line-height: 1.7;
    margin: 0;
}

/* ============================================================================
   BENEFITS (DARK SECTION)
   ============================================================================ */

.fo-benefit {
    text-align: center;
    padding: var(--fo-space-6);
}

.fo-benefit__icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--fo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--fo-space-4);
}

.fo-benefit__title {
    font-size: var(--fo-text-lg);
    font-weight: 700;
    color: var(--fo-white);
    margin-bottom: var(--fo-space-2);
}

.fo-benefit__text {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--fo-text-sm);
    line-height: 1.7;
    margin: 0;
}

/* ============================================================================
   PRICING CARDS
   ============================================================================ */

.fo-pricing {
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    padding: var(--fo-space-8);
    text-align: center;
    box-shadow: var(--fo-shadow);
    position: relative;
    transition: all var(--fo-transition);
}

.fo-pricing:hover {
    transform: translateY(-8px);
    box-shadow: var(--fo-shadow-xl);
}

.fo-pricing--featured {
    border: 3px solid var(--fo-red);
    transform: scale(1.05);
}

.fo-pricing--featured:hover {
    transform: scale(1.05) translateY(-8px);
}

.fo-pricing__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fo-gradient-red);
    color: var(--fo-white);
    padding: var(--fo-space-2) var(--fo-space-5);
    border-radius: var(--fo-radius-full);
    font-size: var(--fo-text-sm);
    font-weight: 700;
    white-space: nowrap;
}

.fo-pricing__header {
    margin-bottom: var(--fo-space-4);
}

.fo-pricing__title {
    font-size: var(--fo-text-xl);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-1);
}

.fo-pricing__subtitle {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-500);
}

.fo-pricing__price {
    padding: var(--fo-space-4) 0;
    border-bottom: 1px solid var(--fo-gray-200);
    margin-bottom: var(--fo-space-6);
}

.fo-pricing__from {
    display: block;
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-500);
}

.fo-pricing__amount {
    font-family: var(--fo-font-heading);
    font-size: var(--fo-text-4xl);
    font-weight: 800;
    color: var(--fo-red);
}

.fo-pricing__period {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-500);
}

.fo-pricing__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--fo-space-6) 0;
    text-align: left;
}

.fo-pricing__features li {
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
    padding: var(--fo-space-2) 0;
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-700);
}

/* ============================================================================
   CTA SECTION (COM IMAGEM FUNDO)
   ============================================================================ */

.fo-cta {
    padding: var(--fo-space-20) 0;
    background-size: cover;
    background-position: center;
    position: relative;
}

.fo-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    z-index: 0;
}

.fo-cta > * {
    position: relative;
    z-index: 1;
}

.fo-cta__content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.fo-cta__title {
    font-size: clamp(1.75rem, 4vw, var(--fo-text-4xl));
    font-weight: 700;
    color: var(--fo-white);
    margin-bottom: var(--fo-space-4);
}

.fo-cta__text {
    font-size: var(--fo-text-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--fo-space-8);
    line-height: 1.7;
}

.fo-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fo-space-4);
}

.fo-cta__note {
    font-size: var(--fo-text-sm);
    color: rgba(255, 255, 255, 0.7);
}

.fo-section__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--fo-space-12);
}

/* ============================================================================
   HEADER PREMIUM
   ============================================================================ */

.fo-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all var(--fo-transition);
}

.fo-header.scrolled {
    box-shadow: var(--fo-shadow-md);
}

.fo-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 15px 0 !important;
}

.fo-header__logo {
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
    font-family: var(--fo-font-heading);
    font-size: var(--fo-text-xl);
    font-weight: 800;
    color: var(--fo-navy);
    text-decoration: none;
}

.fo-header__logo-img {
    height: 50px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .fo-header__logo-img {
        height: 40px;
        max-width: 160px;
    }
}

.fo-header__logo span {
    color: var(--fo-red);
}

.fo-header__logo-icon {
    display: none;
}

/* Redes Sociais no Header */
.fo-header__social {
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
}

.fo-header__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--fo-gray-100);
    color: var(--fo-navy);
    transition: all var(--fo-transition);
}

.fo-header__social-link svg {
    width: 22px;
    height: 22px;
}

.fo-header__social-link:hover {
    background: var(--fo-red);
    color: var(--fo-white);
    transform: scale(1.1);
}

@media (max-width: 1024px) {
    .fo-header__social {
        display: none;
    }
}

/* Redes sociais em baixo do menu mobile */
.fo-mobile-nav__social {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.fo-mobile-nav__social a {
    color: var(--fo-navy);
    font-size: 1.5rem;
    transition: color 0.3s;
}

.fo-mobile-nav__social a:hover {
    color: var(--fo-red);
}

/* Navigation */
.fo-nav {
    display: none;
}

.fo-nav__list {
    display: flex;
    align-items: center;
    gap: var(--fo-space-1);
    list-style: none;
}

.fo-nav__item {
    position: relative;
}

.fo-nav__link {
    display: flex;
    align-items: center;
    gap: var(--fo-space-2);
    padding: var(--fo-space-3) var(--fo-space-4);
    font-size: var(--fo-text-sm);
    font-weight: 600;
    color: var(--fo-gray-700);
    border-radius: var(--fo-radius);
    transition: all var(--fo-transition-fast);
}

.fo-nav__link:hover {
    color: var(--fo-red);
    background: var(--fo-telecom-light);
}

.fo-nav__link--active {
    color: var(--fo-red);
}

/* Dropdown - ESCONDIDO por defeito, só aparece no hover */
.fo-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--fo-white);
    border-radius: var(--fo-radius-md);
    box-shadow: var(--fo-shadow-xl);
    padding: var(--fo-space-3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: all var(--fo-transition);
    z-index: 1001;
    border: 1px solid var(--fo-gray-100);
}

.fo-nav__item:hover > .fo-nav__dropdown,
.fo-nav__item:focus-within > .fo-nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.fo-nav__dropdown-link {
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
    padding: var(--fo-space-3) var(--fo-space-4);
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-700);
    border-radius: var(--fo-radius);
    transition: all var(--fo-transition-fast);
}

.fo-nav__dropdown-link:hover {
    background: var(--fo-gray-50);
    color: var(--fo-red);
}

.fo-nav__dropdown-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--fo-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.fo-nav__dropdown-icon--telecom {
    background: var(--fo-telecom-light);
    color: var(--fo-telecom);
}

.fo-nav__dropdown-icon--energia {
    background: var(--fo-energia-light);
    color: var(--fo-energia);
}

.fo-nav__dropdown-icon--seguranca {
    background: var(--fo-seguranca-light);
    color: var(--fo-seguranca);
}

/* CTA Header */
.fo-header__cta {
    display: none;
}

/* Mobile Menu */
.fo-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.fo-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--fo-navy);
    margin: 3px 0;
    border-radius: 2px;
    transition: all 0.3s;
}

.fo-menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.fo-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.fo-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Navigation - FULLSCREEN sem scroll */
.fo-mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--fo-white);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.fo-mobile-nav.active {
    transform: translateX(0);
}

/* Lista de links centrada */
.fo-mobile-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

.fo-mobile-nav__list li {
    margin: 0;
}

/* Links do menu mobile — compactos mas tap-friendly (>=44px alto) */
.fo-mobile-nav__link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    min-height: 44px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fo-navy);
    text-decoration: none;
    transition: color 0.3s, background 0.3s;
}

.fo-mobile-nav__link:hover,
.fo-mobile-nav__link:active {
    color: var(--fo-red);
    background: var(--fo-gray-100);
}

.fo-mobile-nav__link svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.fo-mobile-nav__link--sub {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--fo-gray-600);
    padding-top: 6px;
}

.fo-mobile-nav__divider {
    height: 1px;
    margin: 12px 24px;
    background: var(--fo-gray-200);
    list-style: none;
}

/* Botão fechar (X) no canto superior direito */
.fo-mobile-nav__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 0;
}

.fo-mobile-nav__close svg {
    width: 32px;
    height: 32px;
    stroke: var(--fo-navy);
    stroke-width: 2;
}

.fo-mobile-nav__close:hover svg {
    stroke: var(--fo-red);
}

/* Quando menu está aberto, esconder scroll do body */
body.menu-open {
    overflow: hidden;
}

/* ============================================================================
   HERO PREMIUM COM IMAGEM DE FUNDO CSS
   ============================================================================ */

.fo-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay escuro sobre a imagem */
.fo-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(29, 53, 87, 0.88) 0%, rgba(13, 27, 42, 0.82) 50%, rgba(230, 57, 70, 0.25) 100%);
    z-index: 1;
}

.fo-hero > * {
    position: relative;
    z-index: 2;
}

/* Fallback para browsers antigos */
.fo-hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.fo-hero__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fo-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(29, 53, 87, 0.88) 0%, rgba(13, 27, 42, 0.82) 50%, rgba(230, 57, 70, 0.25) 100%);
}

/* ============================================================================
   HERO COM FORMULÁRIO (LAYOUT SIDE BY SIDE)
   ============================================================================ */

.fo-hero--with-form {
    min-height: 100vh;
    padding: calc(80px + var(--fo-space-12)) 0 var(--fo-space-12);
}

.fo-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-10);
    align-items: center;
}

.fo-hero__form-wrapper {
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    padding: var(--fo-space-8);
    box-shadow: 0 25px 80px rgba(0,0,0,0.3);
}

.fo-hero__form-title {
    font-size: var(--fo-text-xl);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-2);
    text-align: center;
}

.fo-hero__form-subtitle {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-600);
    margin-bottom: var(--fo-space-6);
    text-align: center;
}

@media (min-width: 1024px) {
    .fo-hero__grid {
        grid-template-columns: 1fr 420px;
    }

    .fo-hero--with-form {
        min-height: 100vh;
    }
}

.fo-hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: var(--fo-space-12) 0;
}

.fo-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fo-space-2);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: var(--fo-space-2) var(--fo-space-4);
    border-radius: var(--fo-radius-full);
    font-size: var(--fo-text-sm);
    font-weight: 600;
    color: var(--fo-white);
    margin-bottom: var(--fo-space-6);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.fo-hero__badge-dot {
    width: 8px;
    height: 8px;
    background: var(--fo-energia);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.fo-hero__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    color: var(--fo-white);
    line-height: 1.1;
    margin-bottom: var(--fo-space-6);
}

.fo-hero__title span {
    color: var(--fo-red);
    position: relative;
}

.fo-hero__title span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--fo-red);
    border-radius: 2px;
}

.fo-hero__subtitle {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    margin-bottom: var(--fo-space-8);
    max-width: 600px;
}

.fo-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-4);
}

.fo-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fo-space-6);
    margin-top: var(--fo-space-12);
    padding-top: var(--fo-space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.fo-hero__stat {
    text-align: center;
}

.fo-hero__stat-value {
    font-family: var(--fo-font-heading);
    font-size: var(--fo-text-3xl);
    font-weight: 800;
    color: var(--fo-white);
    line-height: 1;
}

.fo-hero__stat-label {
    font-size: var(--fo-text-sm);
    color: rgba(255, 255, 255, 0.7);
    margin-top: var(--fo-space-2);
}

/* Scroll indicator */
.fo-hero__scroll {
    position: absolute;
    bottom: var(--fo-space-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fo-space-2);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fo-text-sm);
    animation: bounce 2s infinite;
    z-index: 10;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

/* ============================================================================
   HERO SERVICE PAGES (COM IMAGEM FUNDO CSS)
   ============================================================================ */

.fo-hero--service {
    min-height: 60vh;
    background-size: cover;
    background-position: center;
    padding: calc(80px + var(--fo-space-16)) 0 var(--fo-space-16);
}

.fo-hero--service::before {
    content: none; /* Override, usa gradiente inline */
}

.fo-hero__content--center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.fo-hero__content--center .fo-hero__subtitle {
    margin-left: auto;
    margin-right: auto;
}

.fo-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-4);
    justify-content: center;
    margin-top: var(--fo-space-8);
}

/* Botão outline branco */
.fo-btn--outline-white {
    background: transparent;
    color: var(--fo-white);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.fo-btn--outline-white:hover {
    background: var(--fo-white);
    color: var(--fo-navy);
    border-color: var(--fo-white);
}

/* Botão branco sólido */
.fo-btn--white {
    background: var(--fo-white);
    color: var(--fo-navy);
    box-shadow: var(--fo-shadow-md);
}

.fo-btn--white:hover {
    transform: translateY(-3px);
    box-shadow: var(--fo-shadow-lg);
    color: var(--fo-navy);
}

/* Botão bloco */
.fo-btn--block {
    width: 100%;
    justify-content: center;
}

/* ============================================================================
   BOTÕES PREMIUM
   ============================================================================ */

.fo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fo-space-2);
    padding: var(--fo-space-4) var(--fo-space-8);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--fo-radius-full);
    cursor: pointer;
    transition: all var(--fo-transition);
    position: relative;
    overflow: hidden;
}

.fo-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--fo-transition);
}

.fo-btn:hover::before {
    opacity: 1;
}

.fo-btn--primary {
    background: var(--fo-gradient-red);
    color: var(--fo-white);
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.4);
}

.fo-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(230, 57, 70, 0.5);
    color: var(--fo-white);
}

.fo-btn--secondary {
    background: var(--fo-white);
    color: var(--fo-navy);
    box-shadow: var(--fo-shadow-md);
}

.fo-btn--secondary:hover {
    transform: translateY(-3px);
    box-shadow: var(--fo-shadow-lg);
    color: var(--fo-navy);
}

.fo-btn--outline {
    background: transparent;
    color: var(--fo-white);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.fo-btn--outline:hover {
    background: var(--fo-white);
    color: var(--fo-navy);
    border-color: var(--fo-white);
}

.fo-btn--outline-dark {
    background: transparent;
    color: var(--fo-navy);
    border: 2px solid var(--fo-navy);
}

.fo-btn--outline-dark:hover {
    background: var(--fo-navy);
    color: var(--fo-white);
}

.fo-btn--lg {
    padding: var(--fo-space-5) var(--fo-space-10);
    font-size: var(--fo-text-lg);
}

.fo-btn--sm {
    padding: var(--fo-space-2) var(--fo-space-5);
    font-size: var(--fo-text-sm);
}

.fo-btn--icon {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
}

/* ============================================================================
   TRUST BAR
   ============================================================================ */

.fo-trust-bar {
    background: var(--fo-gray-50);
    padding: var(--fo-space-6) 0;
    border-bottom: 1px solid var(--fo-gray-200);
}

.fo-trust-bar__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--fo-space-8);
}

.fo-trust-bar__item {
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
    color: var(--fo-gray-600);
    font-size: var(--fo-text-sm);
    font-weight: 500;
}

.fo-trust-bar__icon {
    width: 40px;
    height: 40px;
    background: var(--fo-white);
    border-radius: var(--fo-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fo-red);
    font-size: 20px;
    box-shadow: var(--fo-shadow-sm);
}

/* Trust Bar com logos de texto */
.fo-trust-bar__text {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-600);
    font-weight: 500;
}

.fo-trust-bar__logos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-4);
    align-items: center;
}

.fo-trust-bar__logo {
    font-size: var(--fo-text-lg);
    font-weight: 700;
    color: var(--fo-gray-400);
    padding: var(--fo-space-2) var(--fo-space-4);
    background: var(--fo-white);
    border-radius: var(--fo-radius);
    transition: all var(--fo-transition);
}

.fo-trust-bar__logo:hover {
    color: var(--fo-navy);
    box-shadow: var(--fo-shadow);
}

/* ============================================================================
   SERVICE CARDS PREMIUM
   ============================================================================ */

.fo-services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-6);
}

.fo-service-card {
    position: relative;
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    overflow: hidden;
    box-shadow: var(--fo-shadow);
    transition: all var(--fo-transition);
    cursor: pointer;
}

.fo-service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--fo-shadow-hover);
}

.fo-service-card__image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.fo-service-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--fo-transition-slow);
}

.fo-service-card:hover .fo-service-card__image img {
    transform: scale(1.1);
}

.fo-service-card__image-overlay {
    position: absolute;
    inset: 0;
    background: var(--fo-gradient-overlay);
    opacity: 0.5;
}

.fo-service-card__badge {
    position: absolute;
    top: var(--fo-space-4);
    left: var(--fo-space-4);
    background: var(--fo-white);
    padding: var(--fo-space-2) var(--fo-space-3);
    border-radius: var(--fo-radius-full);
    font-size: var(--fo-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fo-service-card__badge--telecom {
    color: var(--fo-telecom);
}

.fo-service-card__badge--energia {
    color: var(--fo-energia);
}

.fo-service-card__badge--seguranca {
    color: var(--fo-seguranca);
}

.fo-service-card__content {
    padding: var(--fo-space-6);
}

.fo-service-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--fo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: var(--fo-space-4);
    margin-top: calc(var(--fo-space-8) * -1 - 28px);
    position: relative;
    box-shadow: var(--fo-shadow-lg);
}

.fo-service-card__icon--telecom {
    background: var(--fo-gradient-red);
    color: var(--fo-white);
}

.fo-service-card__icon--energia {
    background: linear-gradient(135deg, #00C853 0%, #00E676 100%);
    color: var(--fo-white);
}

.fo-service-card__icon--seguranca {
    background: linear-gradient(135deg, #2196F3 0%, #42A5F5 100%);
    color: var(--fo-white);
}

.fo-service-card__title {
    font-size: var(--fo-text-xl);
    font-weight: 700;
    margin-bottom: var(--fo-space-3);
    color: var(--fo-navy);
}

.fo-service-card__description {
    color: var(--fo-gray-600);
    margin-bottom: var(--fo-space-5);
    line-height: 1.7;
}

.fo-service-card__features {
    list-style: none;
    margin-bottom: var(--fo-space-5);
}

.fo-service-card__features li {
    display: flex;
    align-items: center;
    gap: var(--fo-space-2);
    padding: var(--fo-space-2) 0;
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-700);
}

.fo-service-card__features li::before {
    content: '✓';
    width: 20px;
    height: 20px;
    background: var(--fo-energia-light);
    color: var(--fo-energia);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.fo-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--fo-space-2);
    font-weight: 600;
    color: var(--fo-red);
    transition: gap var(--fo-transition);
}

.fo-service-card__link:hover {
    gap: var(--fo-space-3);
}

/* ============================================================================
   COMO FUNCIONA - TIMELINE PREMIUM
   ============================================================================ */

.fo-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-8);
    position: relative;
}

.fo-step {
    display: flex;
    gap: var(--fo-space-6);
    align-items: flex-start;
}

.fo-step__indicator {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fo-step__number {
    width: 64px;
    height: 64px;
    background: var(--fo-gradient-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fo-font-heading);
    font-size: var(--fo-text-2xl);
    font-weight: 800;
    color: var(--fo-white);
    box-shadow: var(--fo-shadow-red);
    position: relative;
    z-index: 1;
}

.fo-step__line {
    width: 3px;
    flex: 1;
    background: linear-gradient(180deg, var(--fo-red) 0%, var(--fo-gray-200) 100%);
    margin-top: var(--fo-space-4);
    border-radius: 2px;
    min-height: 40px;
}

.fo-step:last-child .fo-step__line {
    display: none;
}

.fo-step__content {
    flex: 1;
    padding-top: var(--fo-space-2);
}

.fo-step__title {
    font-size: var(--fo-text-xl);
    font-weight: 700;
    margin-bottom: var(--fo-space-2);
    color: var(--fo-navy);
}

.fo-step__description {
    color: var(--fo-gray-600);
    line-height: 1.7;
    margin: 0;
}

/* ============================================================================
   FORMULÁRIOS PREMIUM
   ============================================================================ */

.fo-form-section {
    background: linear-gradient(135deg, var(--fo-gray-50) 0%, var(--fo-white) 100%);
}

.fo-form-wrapper {
    max-width: 640px;
    margin: 0 auto;
}

.fo-form {
    background: var(--fo-white);
    padding: var(--fo-space-8);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow-xl);
}

.fo-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-4);
}

.fo-form__group {
    margin-bottom: var(--fo-space-5);
}

.fo-form__label {
    display: block;
    font-size: var(--fo-text-sm);
    font-weight: 600;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-2);
}

.fo-form__label span {
    color: var(--fo-red);
}

.fo-form__input,
.fo-form__textarea,
.fo-form__select {
    width: 100%;
    padding: var(--fo-space-4);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    color: var(--fo-gray-800);
    background: var(--fo-gray-50);
    border: 2px solid transparent;
    border-radius: var(--fo-radius-md);
    transition: all var(--fo-transition);
}

.fo-form__input:focus,
.fo-form__textarea:focus,
.fo-form__select:focus {
    outline: none;
    background: var(--fo-white);
    border-color: var(--fo-red);
    box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.1);
}

.fo-form__input::placeholder,
.fo-form__textarea::placeholder {
    color: var(--fo-gray-400);
}

.fo-form__textarea {
    min-height: 140px;
    resize: vertical;
}

.fo-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--fo-space-3);
    cursor: pointer;
}

.fo-form__checkbox input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--fo-red);
    cursor: pointer;
}

.fo-form__checkbox-text {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-600);
    line-height: 1.6;
}

.fo-form__checkbox-text a {
    color: var(--fo-red);
    text-decoration: underline;
}

.fo-form__submit {
    width: 100%;
    margin-top: var(--fo-space-4);
}

/* Form rows */
.fo-form__row--2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-4);
}

@media (min-width: 480px) {
    .fo-form__row--2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Form checkboxes group */
.fo-form__checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-4);
}

.fo-form__checkbox {
    display: flex;
    align-items: center;
    gap: var(--fo-space-2);
    cursor: pointer;
    font-size: var(--fo-text-sm);
}

.fo-form__checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--fo-red);
    cursor: pointer;
}

.fo-form__checkbox--terms {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-600);
}

.fo-form__checkbox--terms a {
    color: var(--fo-red);
    text-decoration: underline;
}

/* Form section (1 coluna empilhada em todos os viewports) */
.fo-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-10);
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    padding: var(--fo-space-8);
    box-shadow: var(--fo-shadow-xl);
}

@media (min-width: 1024px) {
    .fo-form-section {
        padding: var(--fo-space-12);
    }
}

.fo-form-section__content,
.fo-form-section__form {
    min-width: 0;
}

.fo-form-section__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fo-form-section__title {
    font-size: var(--fo-text-3xl);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-4);
}

.fo-form-section__subtitle {
    font-size: var(--fo-text-lg);
    color: var(--fo-gray-600);
    margin-bottom: var(--fo-space-6);
    line-height: 1.7;
    max-width: 560px;
}

.fo-form-section__benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    text-align: left;
}

.fo-form-section__benefits li {
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
    padding: var(--fo-space-2) 0;
    color: var(--fo-gray-700);
}

/*
 * Dentro de .fo-form-section o card visual é a própria .fo-form-section
 * (linha 1859: white bg + padding + shadow + radius). O wrapper estrutural
 * .fo-form-section__form e o <form> interno devem ficar "flat" — caso
 * contrário sobrepunham-se camadas (wrapper cinzento + form com sombra +
 * padding mas background transparent) que criavam um rectângulo cinzento
 * visível por trás do form (o "ghost rectangle" antes do form).
 *
 * Fora deste contexto (homepage hero, contacto), .fo-form continua
 * transparent (linha 1923) porque os parents .fo-hero__form-card /
 * .fo-contact-form-wrapper já fornecem o card visual.
 */
.fo-form-section .fo-form {
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Formulário interno */
.fo-form {
    background: transparent;
}

.fo-form .fo-form__group {
    margin-bottom: var(--fo-space-4);
}

.fo-form .fo-form__label {
    display: block;
    font-size: var(--fo-text-sm);
    font-weight: 600;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-2);
}

.fo-form .fo-form__input,
.fo-form .fo-form__select,
.fo-form .fo-form__textarea {
    width: 100%;
    padding: var(--fo-space-3) var(--fo-space-4);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    color: var(--fo-gray-800);
    background: var(--fo-white);
    border: 2px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-md);
    transition: all var(--fo-transition);
}

.fo-form .fo-form__input:focus,
.fo-form .fo-form__select:focus,
.fo-form .fo-form__textarea:focus {
    outline: none;
    border-color: var(--fo-red);
    box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.1);
}

.fo-form .fo-form__textarea {
    min-height: 100px;
    resize: vertical;
}

/* Contact Form 7 Styles */
.wpcf7-form {
    background: var(--fo-white);
    padding: var(--fo-space-8);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow-xl);
}

.wpcf7-form p {
    margin-bottom: var(--fo-space-5);
}

.wpcf7-form label {
    display: block;
    font-size: var(--fo-text-sm);
    font-weight: 600;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-2);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
    width: 100%;
    padding: var(--fo-space-4);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    color: var(--fo-gray-800);
    background: var(--fo-gray-50);
    border: 2px solid transparent;
    border-radius: var(--fo-radius-md);
    transition: all var(--fo-transition);
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    outline: none;
    background: var(--fo-white);
    border-color: var(--fo-red);
    box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.1);
}

.wpcf7-form input[type="submit"] {
    width: 100%;
    padding: var(--fo-space-4) var(--fo-space-8);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    font-weight: 600;
    color: var(--fo-white);
    background: var(--fo-gradient-red);
    border: none;
    border-radius: var(--fo-radius-full);
    cursor: pointer;
    transition: all var(--fo-transition);
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.4);
}

.wpcf7-form input[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(230, 57, 70, 0.5);
}

.wpcf7-form .wpcf7-acceptance {
    display: flex;
    align-items: flex-start;
    gap: var(--fo-space-3);
}

.wpcf7-form .wpcf7-acceptance input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.wpcf7-form .wpcf7-list-item {
    margin: 0;
}

.wpcf7-response-output {
    margin-top: var(--fo-space-4) !important;
    padding: var(--fo-space-4) !important;
    border-radius: var(--fo-radius-md) !important;
    font-size: var(--fo-text-sm);
}

.wpcf7-form.sent .wpcf7-response-output {
    background: var(--fo-energia-light);
    border-color: var(--fo-energia) !important;
    color: #1B5E20;
}

.wpcf7-not-valid-tip {
    color: var(--fo-red);
    font-size: var(--fo-text-sm);
    margin-top: var(--fo-space-1);
}

.wpcf7-spinner {
    margin-left: var(--fo-space-2);
}

/* ============================================================================
   TESTEMUNHOS PREMIUM
   ============================================================================ */

.fo-testimonials {
    background: var(--fo-gradient-navy);
    position: relative;
    overflow: hidden;
}

.fo-testimonials::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -25%;
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(230, 57, 70, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.fo-testimonials__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-6);
    position: relative;
    z-index: 1;
}

.fo-testimonial {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--fo-space-8);
    border-radius: var(--fo-radius-xl);
    transition: all var(--fo-transition);
}

.fo-testimonial:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}

.fo-testimonial__header {
    display: flex;
    align-items: center;
    gap: var(--fo-space-4);
    margin-bottom: var(--fo-space-4);
}

.fo-testimonial__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.fo-testimonial__info {
    flex: 1;
}

.fo-testimonial__name {
    font-weight: 700;
    font-size: var(--fo-text-base);
    color: var(--fo-white);
    margin-bottom: var(--fo-space-1);
}

.fo-testimonial__location {
    font-size: var(--fo-text-sm);
    color: rgba(255, 255, 255, 0.6);
}

.fo-testimonial__stars {
    color: #FFD700;
    font-size: var(--fo-text-lg);
    letter-spacing: 2px;
}

.fo-testimonial__text {
    font-size: var(--fo-text-base);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-style: italic;
}

.fo-testimonial__text::before {
    content: '"';
    font-size: var(--fo-text-3xl);
    color: var(--fo-red);
    line-height: 0;
    vertical-align: -8px;
    margin-right: 4px;
}

/* ============================================================================
   FAQ PREMIUM
   ============================================================================ */

.fo-faq,
.fo-faq__list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-4);
}

.fo-faq__item {
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-100);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--fo-transition), border-color var(--fo-transition);
}

.fo-faq__item:hover {
    box-shadow: var(--fo-shadow-md);
    border-color: var(--fo-gray-200);
}

.fo-faq__item.active {
    border-color: var(--fo-red);
    box-shadow: var(--fo-shadow-md);
}

.fo-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fo-space-4);
    padding: var(--fo-space-6) var(--fo-space-8);
    background: transparent;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-lg);
    font-weight: 600;
    color: var(--fo-navy);
    text-align: left;
    cursor: pointer;
    transition: color var(--fo-transition);
}

.fo-faq__question:hover,
.fo-faq__question:focus,
.fo-faq__question:active {
    background: transparent;
    color: var(--fo-red);
}

.fo-faq__question:focus-visible {
    outline: 2px solid var(--fo-red);
    outline-offset: -2px;
}

.fo-faq__icon {
    width: 32px;
    height: 32px;
    background: var(--fo-gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--fo-transition);
}

.fo-faq__icon svg {
    width: 16px;
    height: 16px;
    transition: transform var(--fo-transition);
}

.fo-faq__item.active .fo-faq__icon {
    background: var(--fo-red);
    color: var(--fo-white);
}

.fo-faq__item.active .fo-faq__icon svg {
    transform: rotate(180deg);
}

.fo-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--fo-transition-slow);
}

.fo-faq__item.active .fo-faq__answer {
    max-height: 500px;
}

.fo-faq__answer p,
.fo-faq__answer-inner {
    padding: 0 var(--fo-space-8) var(--fo-space-6);
    margin: 0;
    color: var(--fo-gray-600);
    line-height: 1.8;
}

/* ============================================================================
   CTA SECTION PREMIUM
   ============================================================================ */

.fo-cta {
    background: var(--fo-gradient-red);
    position: relative;
    overflow: hidden;
}

.fo-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.fo-cta__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.fo-cta__title {
    font-size: clamp(1.75rem, 4vw, var(--fo-text-4xl));
    color: var(--fo-white);
    margin-bottom: var(--fo-space-4);
}

.fo-cta__text {
    font-size: var(--fo-text-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--fo-space-8);
}

.fo-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--fo-space-4);
}

/* ============================================================================
   FOOTER PREMIUM
   ============================================================================ */

.fo-footer {
    background: var(--fo-navy-dark);
    color: var(--fo-white);
}

.fo-footer__main {
    padding: var(--fo-space-16) 0;
}

.fo-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-10);
}

.fo-footer__brand {
    max-width: 320px;
}

.fo-footer__logo {
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
    font-family: var(--fo-font-heading);
    font-size: var(--fo-text-xl);
    font-weight: 800;
    color: var(--fo-white);
    margin-bottom: var(--fo-space-4);
    text-decoration: none;
}

.fo-footer__logo span {
    color: var(--fo-red);
}

.fo-footer__description {
    font-size: var(--fo-text-sm);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin-bottom: var(--fo-space-6);
}

.fo-footer__social {
    display: flex;
    gap: var(--fo-space-3);
}

.fo-footer__social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fo-white);
    font-size: 18px;
    transition: all var(--fo-transition);
}

.fo-footer__social-link:hover {
    background: var(--fo-red);
    transform: translateY(-3px);
    color: var(--fo-white);
}

.fo-footer__title {
    font-size: var(--fo-text-base);
    font-weight: 700;
    color: var(--fo-white);
    margin-bottom: var(--fo-space-5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.fo-footer__links li {
    margin-bottom: var(--fo-space-3);
}

.fo-footer__links a {
    font-size: var(--fo-text-sm);
    color: rgba(255, 255, 255, 0.7);
    transition: all var(--fo-transition);
    display: inline-flex;
    align-items: center;
    gap: var(--fo-space-2);
}

.fo-footer__links a:hover {
    color: var(--fo-white);
    transform: translateX(4px);
}

.fo-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--fo-space-3);
    margin-bottom: var(--fo-space-4);
    font-size: var(--fo-text-sm);
    color: rgba(255, 255, 255, 0.7);
}

.fo-footer__contact-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--fo-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fo-red);
    flex-shrink: 0;
}

.fo-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--fo-space-6) 0;
}

.fo-footer__bottom-inner {
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-4);
    text-align: center;
}

.fo-footer__copyright {
    font-size: var(--fo-text-sm);
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.fo-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--fo-space-4);
}

.fo-footer__legal a {
    font-size: var(--fo-text-sm);
    color: rgba(255, 255, 255, 0.5);
}

.fo-footer__legal a:hover {
    color: var(--fo-white);
}

/* ============================================================================
   PAGE HERO COM IMAGEM
   ============================================================================ */

.fo-page-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(80px + var(--fo-space-12)) 0 var(--fo-space-12);
    overflow: hidden;
}

.fo-page-hero--legal {
    background: linear-gradient(135deg, var(--fo-navy) 0%, var(--fo-navy-dark) 100%);
}

.fo-page-hero__background {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.fo-page-hero__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fo-page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.fo-page-hero__overlay--telecom {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.9) 0%, rgba(198, 40, 40, 0.85) 100%);
}

.fo-page-hero__overlay--energia {
    background: linear-gradient(135deg, rgba(0, 200, 83, 0.9) 0%, rgba(0, 150, 60, 0.85) 100%);
}

.fo-page-hero__overlay--seguranca {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.9) 0%, rgba(25, 118, 210, 0.85) 100%);
}

.fo-page-hero__overlay--default {
    background: linear-gradient(135deg, rgba(29, 53, 87, 0.92) 0%, rgba(13, 27, 42, 0.88) 100%);
}

.fo-page-hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.fo-page-hero__title {
    font-size: clamp(2rem, 5vw, var(--fo-text-5xl));
    font-weight: 800;
    color: var(--fo-white);
    margin-bottom: var(--fo-space-4);
}

.fo-page-hero__subtitle {
    font-size: var(--fo-text-xl);
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.fo-page-hero__breadcrumb {
    margin-top: var(--fo-space-6);
    font-size: var(--fo-text-sm);
    color: rgba(255, 255, 255, 0.7);
}

.fo-page-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
}

.fo-page-hero__breadcrumb a:hover {
    color: var(--fo-white);
}

.fo-page-hero__breadcrumb span {
    margin: 0 var(--fo-space-2);
}

/* ============================================================================
   STATS GRID
   ============================================================================ */

.fo-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--fo-space-8);
}

.fo-stat {
    text-align: center;
}

.fo-stat__number {
    display: block;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-2);
}

.fo-stat__label {
    display: block;
    font-size: var(--fo-text-sm);
    font-weight: 500;
    color: var(--fo-gray-700);
    line-height: 1.4;
}

/* ============================================================================
   BENEFITS GRID
   ============================================================================ */

.fo-benefits__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-6);
}

.fo-benefit {
    display: flex;
    gap: var(--fo-space-5);
    padding: var(--fo-space-6);
    background: var(--fo-white);
    border-radius: var(--fo-radius-lg);
    box-shadow: var(--fo-shadow);
    transition: all var(--fo-transition);
}

.fo-benefit:hover {
    transform: translateY(-4px);
    box-shadow: var(--fo-shadow-lg);
}

.fo-benefit__icon {
    width: 56px;
    height: 56px;
    background: var(--fo-telecom-light);
    border-radius: var(--fo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fo-red);
    font-size: 24px;
    flex-shrink: 0;
}

.fo-benefit--energia .fo-benefit__icon {
    background: var(--fo-energia-light);
    color: var(--fo-energia);
}

.fo-benefit--seguranca .fo-benefit__icon {
    background: var(--fo-seguranca-light);
    color: var(--fo-seguranca);
}

.fo-benefit__content {
    flex: 1;
}

.fo-benefit__title {
    font-size: var(--fo-text-lg);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-2);
}

.fo-benefit__description {
    color: var(--fo-gray-600);
    margin: 0;
    line-height: 1.7;
}

/* ============================================================================
   PRICING CARDS
   ============================================================================ */

.fo-pricing__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-6);
}

.fo-pricing-card {
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    padding: var(--fo-space-8);
    box-shadow: var(--fo-shadow);
    position: relative;
    transition: all var(--fo-transition);
}

.fo-pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--fo-shadow-xl);
}

.fo-pricing-card--featured {
    border: 2px solid var(--fo-red);
    transform: scale(1.02);
}

.fo-pricing-card--featured:hover {
    transform: scale(1.02) translateY(-8px);
}

.fo-pricing-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fo-gradient-red);
    color: var(--fo-white);
    padding: var(--fo-space-2) var(--fo-space-4);
    border-radius: var(--fo-radius-full);
    font-size: var(--fo-text-sm);
    font-weight: 700;
}

.fo-pricing-card__header {
    text-align: center;
    padding-bottom: var(--fo-space-6);
    border-bottom: 1px solid var(--fo-gray-200);
    margin-bottom: var(--fo-space-6);
}

.fo-pricing-card__name {
    font-size: var(--fo-text-xl);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-2);
}

.fo-pricing-card__price {
    font-family: var(--fo-font-heading);
    font-size: var(--fo-text-4xl);
    font-weight: 800;
    color: var(--fo-red);
}

.fo-pricing-card__price span {
    font-size: var(--fo-text-base);
    font-weight: 400;
    color: var(--fo-gray-500);
}

.fo-pricing-card__features {
    list-style: none;
    margin-bottom: var(--fo-space-8);
}

.fo-pricing-card__features li {
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
    padding: var(--fo-space-3) 0;
    color: var(--fo-gray-700);
}

.fo-pricing-card__features li::before {
    content: '✓';
    width: 24px;
    height: 24px;
    background: var(--fo-energia-light);
    color: var(--fo-energia);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================================================================
   CONTACT PAGE
   ============================================================================ */

.fo-contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-10);
}

.fo-contact__info {
    background: var(--fo-white);
    padding: var(--fo-space-8);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
}

.fo-contact__info-item {
    display: flex;
    gap: var(--fo-space-4);
    padding: var(--fo-space-5) 0;
    border-bottom: 1px solid var(--fo-gray-100);
}

.fo-contact__info-item:last-child {
    border-bottom: none;
}

.fo-contact__info-icon {
    width: 48px;
    height: 48px;
    background: var(--fo-telecom-light);
    border-radius: var(--fo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fo-red);
    font-size: 20px;
    flex-shrink: 0;
}

.fo-contact__info-content h4 {
    font-size: var(--fo-text-base);
    font-weight: 700;
    margin-bottom: var(--fo-space-1);
}

.fo-contact__info-content p {
    color: var(--fo-gray-600);
    margin: 0;
}

.fo-contact__info-content a {
    color: var(--fo-red);
    font-weight: 600;
}

.fo-contact__map {
    height: 300px;
    background: var(--fo-gray-100);
    border-radius: var(--fo-radius-xl);
    overflow: hidden;
    margin-top: var(--fo-space-8);
}

.fo-contact__map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================================================
   ANIMAÇÕES ON-SCROLL
   ============================================================================ */

.fo-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--fo-ease), transform 0.6s var(--fo-ease);
}

.fo-animate.fo-animate--visible {
    opacity: 1;
    transform: translateY(0);
}

.fo-animate--delay-1 { transition-delay: 0.1s; }
.fo-animate--delay-2 { transition-delay: 0.2s; }
.fo-animate--delay-3 { transition-delay: 0.3s; }
.fo-animate--delay-4 { transition-delay: 0.4s; }

.fo-animate--scale {
    transform: scale(0.95);
}

.fo-animate--scale.fo-animate--visible {
    transform: scale(1);
}

.fo-animate--left {
    transform: translateX(-30px);
}

.fo-animate--left.fo-animate--visible {
    transform: translateX(0);
}

.fo-animate--right {
    transform: translateX(30px);
}

.fo-animate--right.fo-animate--visible {
    transform: translateX(0);
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

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

.text-white { color: var(--fo-white); }
.text-red { color: var(--fo-red); }
.text-navy { color: var(--fo-navy); }
.text-gray { color: var(--fo-gray-600); }

.bg-white { background-color: var(--fo-white); }
.bg-gray { background-color: var(--fo-gray-50); }
.bg-navy { background-color: var(--fo-navy); }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--fo-space-4); }
.mt-8 { margin-top: var(--fo-space-8); }
.mt-12 { margin-top: var(--fo-space-12); }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--fo-space-4); }
.mb-8 { margin-bottom: var(--fo-space-8); }
.mb-12 { margin-bottom: var(--fo-space-12); }

.hidden { display: none; }

/* ============================================================================
   RESPONSIVE - TABLET (768px+)
   ============================================================================ */

@media (min-width: 1025px) {
    .fo-nav {
        display: flex;
    }

    .fo-header__cta {
        display: block;
    }

    .fo-menu-toggle {
        display: none !important;
    }

    .fo-hero__content {
        padding: var(--fo-space-20) 0;
    }

    .fo-hero__stats {
        max-width: 500px;
    }

    .fo-services__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .fo-steps {
        gap: var(--fo-space-10);
    }

    .fo-form__row {
        grid-template-columns: repeat(2, 1fr);
    }

    .fo-testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fo-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fo-pricing__grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
    }

    .fo-contact__grid {
        grid-template-columns: 1fr 1.5fr;
    }

    .fo-footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }

    .fo-footer__bottom-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* ============================================================================
   RESPONSIVE - DESKTOP (1024px+)
   ============================================================================ */

@media (min-width: 1024px) {
    .fo-hero__content {
        padding: var(--fo-space-24) 0;
    }

    .fo-testimonials__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .fo-steps {
        display: flex;
        gap: var(--fo-space-8);
    }

    .fo-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 1;
    }

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

    .fo-step__line {
        width: 100%;
        height: 3px;
        margin-top: 0;
        margin-left: var(--fo-space-4);
        min-height: auto;
    }
}

/* ============================================================================
   RESPONSIVE - LARGE DESKTOP (1280px+)
   ============================================================================ */

@media (min-width: 1280px) {
    .fo-container {
        padding: 0 var(--fo-space-8);
    }
}

/* ============================================================================
   PRINT
   ============================================================================ */

@media print {
    .fo-header,
    .fo-footer,
    .fo-mobile-nav,
    .fo-btn,
    .fo-cta {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    .fo-hero {
        min-height: auto;
        padding: 2rem 0;
    }
}

/* ============================================================================
   HERO FORM WRAPPER - FIX CUTOFF
   ============================================================================ */

.fo-hero__form-wrapper {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .fo-hero--with-form {
        padding-bottom: var(--fo-space-16);
    }

    .fo-hero__form-wrapper {
        margin: 0;
    }
}

/* ============================================================================
   CONTACT PAGE STYLES
   ============================================================================ */

.fo-contact-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fo-space-4);
}

@media (min-width: 768px) {
    .fo-contact-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

.fo-contact-card {
    background: var(--fo-white);
    padding: var(--fo-space-6);
    border-radius: var(--fo-radius-lg);
    text-align: center;
    box-shadow: var(--fo-shadow);
    transition: all var(--fo-transition);
}

.fo-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fo-shadow-lg);
}

.fo-contact-card__icon {
    width: 56px;
    height: 56px;
    background: var(--fo-telecom-light);
    border-radius: var(--fo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--fo-space-4);
}

.fo-contact-card__title {
    font-size: var(--fo-text-lg);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-2);
}

.fo-contact-card__text {
    margin-bottom: var(--fo-space-2);
}

.fo-contact-card__note {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-500);
}

.fo-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-10);
}

@media (min-width: 768px) {
    .fo-contact-grid {
        grid-template-columns: 2fr 3fr;
    }
}

.fo-contact-info__service-list {
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-3);
}

.fo-contact-info__service {
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
    padding: var(--fo-space-3);
    background: var(--fo-gray-50);
    border-radius: var(--fo-radius);
    transition: all var(--fo-transition);
}

.fo-contact-info__service:hover {
    background: var(--fo-gray-100);
}

.fo-contact-info__service-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--fo-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fo-contact-form-wrapper {
    background: var(--fo-white);
    padding: var(--fo-space-8);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow-xl);
}

.fo-social-link {
    width: 44px;
    height: 44px;
    background: var(--fo-gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fo-navy);
    transition: all var(--fo-transition);
}

.fo-social-link:hover {
    background: var(--fo-red);
    color: var(--fo-white);
    transform: scale(1.1);
}

.fo-hero--compact {
    min-height: 50vh;
}

/* ============================================================================
   HOMEPAGE V4 - NEW SECTIONS
   ============================================================================ */

/* Hero Fullscreen */
.fo-hero--fullscreen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--fo-space-20) 0;
}

.fo-hero__form-card {
    background: var(--fo-white);
    padding: var(--fo-space-8);
    border-radius: var(--fo-radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.fo-hero__form-title {
    font-size: var(--fo-text-xl);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-1);
}

.fo-hero__form-subtitle {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-500);
    margin-bottom: var(--fo-space-6);
}

.fo-form__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fo-space-2);
    font-size: 0.75rem;
    color: var(--fo-gray-500);
    margin-top: var(--fo-space-4);
}

/* Trust Bar Enhanced */
.fo-trust-bar__text {
    text-align: center;
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-600);
    margin-bottom: var(--fo-space-4);
}

/* About Section */
.fo-about {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-12);
    align-items: center;
}

@media (min-width: 1024px) {
    .fo-about {
        grid-template-columns: 1fr 1fr;
    }
}

.fo-about__image {
    position: relative;
    border-radius: var(--fo-radius-xl);
    overflow: hidden;
}

.fo-about__image img {
    width: 100%;
    height: auto;
    display: block;
}

.fo-about__image-badge {
    position: absolute;
    bottom: var(--fo-space-6);
    right: var(--fo-space-6);
    background: var(--fo-red);
    color: var(--fo-white);
    padding: var(--fo-space-4) var(--fo-space-6);
    border-radius: var(--fo-radius-lg);
    text-align: center;
}

.fo-about__years {
    display: block;
    font-size: var(--fo-text-3xl);
    font-weight: 800;
    line-height: 1;
}

.fo-about__years-text {
    font-size: var(--fo-text-xs);
    opacity: 0.9;
}

.fo-about__text {
    font-size: var(--fo-text-lg);
    color: var(--fo-gray-600);
    line-height: 1.8;
    margin-bottom: var(--fo-space-4);
}

.fo-about__list {
    list-style: none;
    padding: 0;
    margin: var(--fo-space-6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-3);
}

.fo-about__list li {
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
    font-size: var(--fo-text-base);
    color: var(--fo-gray-700);
}

/* About Grid (texto + imagem, 2 colunas em ≥768px) */
.fo-about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-12);
    align-items: center;
}

@media (min-width: 768px) {
    .fo-about-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.fo-about-grid__image img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Process Section (4 steps) */
.fo-process {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-6);
}

@media (min-width: 768px) {
    .fo-process {
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        align-items: flex-start;
    }
}

.fo-process__step {
    text-align: center;
    padding: var(--fo-space-6);
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
}

.fo-process__number {
    font-size: var(--fo-text-4xl);
    font-weight: 800;
    color: var(--fo-red);
    opacity: 0.2;
    margin-bottom: var(--fo-space-2);
}

.fo-process__icon {
    width: 64px;
    height: 64px;
    background: var(--fo-telecom-light);
    border-radius: var(--fo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--fo-space-4);
    color: var(--fo-red);
}

.fo-process__title {
    font-size: var(--fo-text-lg);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-2);
}

.fo-process__text {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-600);
}

.fo-process__connector {
    display: none;
}

@media (min-width: 768px) {
    .fo-process__connector {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-top: 80px;
    }

    .fo-process__connector::before {
        content: '';
        width: 40px;
        height: 2px;
        background: var(--fo-gray-300);
    }
}

/* Featured Service Card */
.fo-card--featured {
    border: 2px solid var(--fo-red);
    position: relative;
}

.fo-card__badge--popular {
    background: var(--fo-red);
    color: var(--fo-white);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Coverage Section */
.fo-section--coverage {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: var(--fo-space-20) 0;
}

.fo-coverage {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.fo-coverage__text {
    font-size: var(--fo-text-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--fo-space-8);
}

.fo-coverage__types {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--fo-space-6);
    margin-bottom: var(--fo-space-8);
}

.fo-coverage__type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fo-space-2);
    color: var(--fo-white);
}

.fo-coverage__type-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--fo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fo-coverage__type span {
    font-size: var(--fo-text-sm);
    font-weight: 500;
}

/* Product Preview */
.fo-product-preview {
    background: var(--fo-white);
    padding: var(--fo-space-6);
    border-radius: var(--fo-radius-lg);
    text-align: center;
    transition: all var(--fo-transition);
}

.fo-product-preview:hover {
    transform: translateY(-4px);
    box-shadow: var(--fo-shadow-lg);
}

.fo-product-preview__image {
    width: 100%;
    height: 120px;
    background: var(--fo-gray-100);
    border-radius: var(--fo-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--fo-space-4);
}

.fo-product-preview__name {
    font-size: var(--fo-text-base);
    font-weight: 600;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-1);
}

.fo-product-preview__price {
    font-size: var(--fo-text-sm);
    color: var(--fo-red);
    font-weight: 600;
}

/* Section Footer */
.fo-section__footer {
    text-align: center;
    margin-top: var(--fo-space-10);
}

/* CTA Enhanced */
.fo-cta__subtitle {
    font-size: var(--fo-text-xl);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--fo-space-4);
}

/* Footer Logo Image */
.fo-footer__logo-img {
    height: 40px;
    width: auto;
    max-width: 180px;
}

/* ============================================================================
   HEADER ALIGNMENT FIX - Force vertical centering
   ============================================================================ */

.fo-header {
    height: 80px;
}

.fo-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 15px 0 !important;
}

.fo-header__logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.fo-nav {
    display: flex;
    align-items: center;
    height: 100%;
}

.fo-nav__list {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fo-nav__item {
    display: flex;
    align-items: center;
    height: 100%;
}

.fo-nav__link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1rem;
}

.fo-header__actions {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 1rem;
}

.fo-header__social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ============================================================================
   HEADER SHOP ICONS (account, cart)
   ============================================================================ */

.fo-header__shop-icons {
    display: flex;
    align-items: center;
    gap: var(--fo-space-1);
}

.fo-header__shop-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--fo-navy);
    transition: color var(--fo-transition), background var(--fo-transition);
    border-radius: 50%;
}

.fo-header__shop-link:hover,
.fo-header__shop-link:focus-visible {
    color: var(--fo-red);
    background: var(--fo-gray-100);
}

.fo-header__shop-link svg {
    width: 22px;
    height: 22px;
}

.fo-header__cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--fo-red);
    color: var(--fo-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    border-radius: 9px;
    text-align: center;
    pointer-events: none;
}

/*
 * Quando o carrinho está vazio o badge é renderizado vazio (sem texto)
 * para que o seletor 'span.fo-header__cart-badge' do filtro
 * woocommerce_add_to_cart_fragments encontre sempre o elemento. :empty
 * esconde-o visualmente até o WC injectar conteúdo via AJAX.
 */
.fo-header__cart-badge:empty {
    display: none;
}

/* WooCommerce icons no header */
.fo-header__woo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-right: 1rem;
}

.fo-header__woo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--fo-navy);
    transition: all 0.3s;
    position: relative;
}

.fo-header__woo-link:hover {
    background: var(--fo-gray-100);
    color: var(--fo-red);
}

.fo-header__woo-link svg {
    width: 22px;
    height: 22px;
}

/* Contador do carrinho */
.fo-header__cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--fo-red);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Mobile WooCommerce */
@media (max-width: 1024px) {
    .fo-header__woo {
        margin-right: 0.5rem;
    }

    .fo-header__woo-link {
        width: 36px;
        height: 36px;
    }
}

.fo-mobile-nav__cart-count {
    color: var(--fo-red);
    font-weight: 600;
    margin-left: 0.25rem;
}

/* Language Switcher - SVG flags */
.fo-header__lang {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 1.5rem;
}

.fo-header__lang-link {
    display: flex;
    align-items: center;
    opacity: 0.5;
    transition: opacity 0.3s;
    border-radius: 2px;
    overflow: hidden;
    text-decoration: none;
}

.fo-header__lang-link:hover,
.fo-header__lang-link.active {
    opacity: 1;
}

.fo-header__lang-link svg {
    display: block;
}

/* Logo no menu mobile */
.fo-mobile-nav__logo {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10000;
}

.fo-mobile-nav__logo img {
    height: 45px;
    width: auto;
}

/* Loja com destaque especial */
.fo-mobile-nav__link--shop {
    background: var(--fo-red);
    color: var(--fo-white) !important;
    border-radius: 8px;
    margin: 10px 20px;
    justify-content: center;
}

.fo-mobile-nav__link--shop:hover {
    background: var(--fo-red-dark, #c41e3a);
    color: var(--fo-white) !important;
}

.fo-mobile-nav__link--shop svg {
    stroke: var(--fo-white);
}

/* Bandeiras de idioma no menu mobile */
.fo-mobile-nav__lang {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.fo-mobile-nav__lang-link {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--fo-gray-100);
    text-decoration: none;
    transition: all 0.3s;
    opacity: 0.6;
}

.fo-mobile-nav__lang-link:hover,
.fo-mobile-nav__lang-link.active {
    opacity: 1;
    background: var(--fo-gray-200);
}

.fo-mobile-nav__lang-link svg {
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ============================================================================
   HERO FORM WIDTH FIX
   ============================================================================ */

.fo-hero__form-wrapper {
    width: 100%;
    min-width: 380px;
    max-width: 500px;
}

.fo-hero__form-card {
    min-width: 380px;
    max-width: 500px;
    padding: var(--fo-space-6) var(--fo-space-6);
}

@media (min-width: 768px) {
    .fo-hero__form-card {
        padding: var(--fo-space-8);
    }

    .fo-hero__form-wrapper {
        min-width: 450px;
    }

    .fo-hero__form-card {
        min-width: 450px;
    }
}

@media (min-width: 1024px) {
    .fo-hero__form-wrapper {
        min-width: 480px;
        max-width: 500px;
    }

    .fo-hero__form-card {
        min-width: 480px;
        max-width: 500px;
    }
}

/* Fix dropdown text overflow */
.fo-form__select {
    padding-right: var(--fo-space-12);
    text-overflow: ellipsis;
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

.fo-form__select option {
    padding: var(--fo-space-2);
    white-space: normal;
    word-wrap: break-word;
}

/* ============================================================================
   STATISTICS 4-COLUMN LAYOUT
   ============================================================================ */

.fo-hero__stats--4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fo-space-4);
}

@media (min-width: 768px) {
    .fo-hero__stats--4 {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--fo-space-6);
    }
}

.fo-hero__stat {
    text-align: center;
    padding: var(--fo-space-3);
}

.fo-hero__stat-value {
    font-size: var(--fo-text-2xl);
    font-weight: 800;
    color: var(--fo-white);
    line-height: 1.2;
}

@media (min-width: 768px) {
    .fo-hero__stat-value {
        font-size: var(--fo-text-3xl);
    }
}

.fo-hero__stat-label {
    font-size: var(--fo-text-xs);
    color: rgba(255, 255, 255, 0.8);
    margin-top: var(--fo-space-1);
}

/* ============================================================================
   TESTIMONIALS TEXT COLOR FIX
   ============================================================================ */

.fo-testimonial {
    background: var(--fo-white);
    padding: var(--fo-space-6);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
}

.fo-testimonial__text {
    font-size: var(--fo-text-base);
    color: var(--fo-gray-700);
    line-height: 1.7;
    font-style: italic;
}

.fo-testimonial__name {
    font-weight: 600;
    color: var(--fo-navy);
}

.fo-testimonial__location {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-500);
}

.fo-testimonial__stars {
    color: #fbbf24;
    font-size: var(--fo-text-lg);
}

.fo-testimonials__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-6);
}

@media (min-width: 768px) {
    .fo-testimonials__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================================
   RESPONSIVE FIXES
   ============================================================================ */

@media (max-width: 767px) {
    .fo-hero--fullscreen {
        min-height: auto;
        padding: var(--fo-space-12) 0;
    }

    .fo-hero__grid {
        flex-direction: column;
        gap: var(--fo-space-8);
    }

    .fo-hero__form-wrapper {
        max-width: 100%;
        min-width: auto;
    }

    .fo-about__image-badge {
        bottom: var(--fo-space-4);
        right: var(--fo-space-4);
        padding: var(--fo-space-3) var(--fo-space-4);
    }

    .fo-about__years {
        font-size: var(--fo-text-2xl);
    }

    .fo-coverage__types {
        gap: var(--fo-space-4);
    }

    .fo-coverage__type-icon {
        width: 48px;
        height: 48px;
    }

    /*
     * .fo-header__actions mantém-se visível em mobile como container
     * dos ícones de loja (conta + carrinho). Os filhos não relevantes
     * em mobile (.fo-header__cta, .fo-header__social, .fo-header__lang)
     * são escondidos individualmente nas suas próprias regras.
     */
    .fo-header__actions {
        gap: var(--fo-space-2);
    }
}

/* ============================================================================
   MOBILE RESPONSIVO
   ============================================================================ */

/* Tablet e abaixo */
@media (max-width: 1024px) {
    /* Header */
    .fo-header__inner {
        padding: 10px 15px !important;
    }

    /* Esconder menu desktop, mostrar hamburger */
    .fo-nav {
        display: none;
    }

    .fo-menu-toggle {
        display: flex !important;
    }

    /* Hero */
    .fo-hero__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .fo-hero__content {
        text-align: center;
    }

    .fo-hero__form-card {
        max-width: 100%;
        margin: 0 auto;
    }

    /* Stats */
    .fo-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }

    .fo-stat {
        min-width: 120px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Header */
    .fo-header {
        height: auto;
        min-height: 60px;
    }

    .fo-header__inner {
        height: auto;
        min-height: 60px;
        padding: 10px 15px !important;
    }

    .fo-header__logo-img {
        height: 35px;
    }

    /* Esconder redes sociais e bandeiras no mobile */
    .fo-header__social,
    .fo-header__lang {
        display: none;
    }

    /* Hero */
    .fo-hero {
        min-height: auto;
        padding: 100px 0 40px;
    }

    .fo-hero__title {
        font-size: 2rem;
    }

    .fo-hero__form-card {
        padding: 1.5rem;
    }

    /* Stats em 2 colunas */
    .fo-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Secções */
    .fo-section {
        padding: 3rem 0;
    }

    .fo-section__title {
        font-size: 1.5rem;
    }

    /* Cards em coluna */
    .fo-grid--3 {
        grid-template-columns: 1fr;
    }

    /* Process steps em coluna */
    .fo-process {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .fo-footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

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

    /* Formulário - Prevenir zoom iOS */
    .fo-form__input,
    .fo-form__select,
    .fo-form__textarea {
        font-size: 16px;
    }
}

/* Mobile pequeno */
@media (max-width: 480px) {
    .fo-hero__title {
        font-size: 1.5rem;
    }

    .fo-hero__form-card {
        padding: 1rem;
    }

    .fo-form__row--2 {
        grid-template-columns: 1fr;
    }

    .fo-stats {
        grid-template-columns: 1fr;
    }

    .fo-stat__number {
        font-size: 2rem;
    }
}

/* ============================================================================
   WOOCOMMERCE SHOP
   ============================================================================ */

/* Forçar tamanho do logo em TODAS as páginas incluindo WooCommerce */
.fo-header__logo-img,
.woocommerce .fo-header__logo-img,
.woocommerce-page .fo-header__logo-img,
body.woocommerce .fo-header__logo-img,
body.woocommerce-page .fo-header__logo-img {
    height: 50px !important;
    width: auto !important;
    max-height: 50px !important;
    max-width: 200px !important;
}

/* Garantir que o header não cresce */
.fo-header,
.woocommerce .fo-header,
.woocommerce-page .fo-header {
    height: 80px !important;
    max-height: 80px !important;
}

.fo-header__inner,
.woocommerce .fo-header__inner,
.woocommerce-page .fo-header__inner {
    height: 80px !important;
    max-height: 80px !important;
}

/* Main shop container */
.fo-main--shop {
    padding-top: 120px;
    padding-bottom: 4rem;
    background: var(--fo-gray-50);
    min-height: calc(100vh - 80px);
}

/* Shop header */
.fo-shop__header {
    margin-bottom: 2rem;
}

.fo-shop__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--fo-navy);
    margin: 0 0 1rem;
}

/* Breadcrumb */
.fo-shop__breadcrumb {
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--fo-gray-500);
}

.fo-shop__breadcrumb a {
    color: var(--fo-navy);
    text-decoration: none;
}

.fo-shop__breadcrumb a:hover {
    color: var(--fo-red);
}

/* Shop header/title */
.woocommerce-products-header {
    background: transparent;
    padding: 0;
    margin-bottom: 1.5rem;
}

.page-title,
.woocommerce-products-header__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--fo-navy);
    margin: 0 0 0.5rem;
}

/* Result count and ordering */
.woocommerce .woocommerce-result-count {
    float: left;
    color: var(--fo-gray-600);
    font-size: 0.9rem;
    line-height: 40px;
    margin-bottom: 1rem;
}

.woocommerce .woocommerce-ordering {
    float: right;
    margin-bottom: 1rem;
}

.woocommerce .woocommerce-ordering select {
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border: 1px solid var(--fo-gray-200);
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Categorias da loja */
.fo-shop__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--fo-gray-200);
}

.fo-shop__category-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid var(--fo-gray-200);
    border-radius: 25px;
    color: var(--fo-gray-700);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
}

.fo-shop__category-link:hover {
    border-color: var(--fo-navy);
    color: var(--fo-navy);
}

.fo-shop__category-link.active {
    background: var(--fo-navy);
    border-color: var(--fo-navy);
    color: white;
}

.fo-shop__category-link .count {
    font-size: 0.8rem;
    color: var(--fo-gray-400);
}

.fo-shop__category-link.active .count {
    color: rgba(255,255,255,0.7);
}

@media (max-width: 768px) {
    .fo-shop__categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
    }

    .fo-shop__category-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Clear floats */
.fo-shop__content::after {
    content: "";
    display: table;
    clear: both;
}

/* Products grid - override any theme styles */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    padding: 0 !important;
    margin: 2rem 0 !important;
    list-style: none !important;
    clear: both;
}

@media (max-width: 1200px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* Product card */
.woocommerce ul.products li.product {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    padding: 1rem !important;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    transition: all 0.3s ease !important;
    position: relative;
    text-align: center;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
}

/* Product image */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
    width: 100% !important;
    height: 180px !important;
    object-fit: contain !important;
    background: var(--fo-gray-50);
    border-radius: 8px;
    margin-bottom: 1rem !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--fo-navy) !important;
    margin: 0 0 0.5rem !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    min-height: 2.8em;
}

/* Product price */
.woocommerce ul.products li.product .price {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--fo-red) !important;
    margin-bottom: 1rem !important;
    display: block !important;
}

.woocommerce ul.products li.product .price del {
    color: var(--fo-gray-400) !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    margin-right: 0.5rem;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
}

/* Sale badge */
.woocommerce span.onsale {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    background: var(--fo-red) !important;
    color: white !important;
    padding: 0.3rem 0.8rem !important;
    border-radius: 20px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.4 !important;
}

/* Add to cart button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
    display: block !important;
    width: 100% !important;
    background: var(--fo-navy) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    margin-top: auto !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
    background: var(--fo-red) !important;
}

/* Hide stars if no reviews */
.woocommerce ul.products li.product .star-rating {
    display: none;
}

/* Esconder produtos vazios/sem conteúdo */
.woocommerce ul.products li.product:empty,
.woocommerce ul.products li.product:not(:has(.woocommerce-loop-product__link)) {
    display: none !important;
}

.woocommerce ul.products li.product:not(:has(.woocommerce-loop-product__title)) {
    display: none !important;
}

/* Remover ::before e ::after do WooCommerce que criam espaços */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products.columns-3::before,
ul.products.columns-3::after,
ul.products.columns-4::before,
ul.products.columns-4::after {
    display: none !important;
    content: none !important;
}

/* Forçar tamanho do logo no footer */
.fo-footer__logo img,
.woocommerce .fo-footer__logo img,
.woocommerce-page .fo-footer__logo img,
body.woocommerce .fo-footer__logo img,
body.woocommerce-page .fo-footer__logo img {
    height: 60px !important;
    width: auto !important;
    max-height: 60px !important;
    max-width: 250px !important;
}

/* Esconder sidebar nas páginas WooCommerce */
.woocommerce-page #secondary,
.woocommerce-page .sidebar,
.woocommerce-page .widget-area,
.woocommerce #secondary,
.woocommerce .sidebar,
.woocommerce .widget-area,
.woocommerce-cart #secondary,
.woocommerce-cart .sidebar,
.woocommerce-checkout #secondary,
.woocommerce-checkout .sidebar,
.woocommerce-account #secondary,
.woocommerce-account .sidebar {
    display: none !important;
}

/* Conteúdo WooCommerce ocupa largura total */
.woocommerce-page #primary,
.woocommerce-page .content-area,
.woocommerce #primary,
.woocommerce .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
	margin-top: 80px !important;
}

/* Páginas WooCommerce - padding consistente para header fixo */
body.woocommerce-cart .site-content,
body.woocommerce-checkout .site-content,
body.woocommerce-account .site-content {
    padding-top: 100px;
}

body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-account .entry-content {
    padding-top: 0;
}

/* Reduzir espaço no carrinho */
.woocommerce-cart .entry-header,
.woocommerce-cart .page-header {
    margin-bottom: 1rem;
}

.woocommerce-cart .entry-title,
.woocommerce-cart .page-title {
    margin-bottom: 0.5rem;
}

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
    padding-top: 1rem;
}

.woocommerce-cart .woocommerce > *:first-child,
.woocommerce-checkout .woocommerce > *:first-child {
    margin-top: 0;
}

/* Avatar na página Minha Conta */
.woocommerce-account .woocommerce-MyAccount-content img.avatar,
.woocommerce-account img.avatar,
.woocommerce-MyAccount-content .avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50%;
    object-fit: cover;
}

.woocommerce-account .woocommerce-MyAccount-content > p > img,
.woocommerce-account .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content img:first-child {
    max-width: 100px !important;
    max-height: 100px !important;
}

/* Layout da página Minha Conta — NEUTRALIZADO pelo Lote 5 (V2 round 3)
   As regras float + width 25%/70% conflitavam com o grid do Lote 5:
   os items ficavam com 25%/70% da grid cell (não do container),
   resultando em nav e content microscópicos. Bloco V2 redefine
   via grid 260px 1fr com width auto + float none. */

/* .woocommerce-account .woocommerce-MyAccount-navigation {
       width: 25%; float: left; margin-right: 5%;
   }
   .woocommerce-account .woocommerce-MyAccount-content {
       width: 70%; float: left;
   }
   — REMOVIDO. */

/* Menu lateral da conta — NEUTRALIZADO pelo Lote 5 (V2)
   As regras de background/color/borders foram movidas para o bloco
   'WOOCOMMERCE — MY ACCOUNT V2' no fim do ficheiro. Mantém-se aqui
   só list-style/padding/margin que são neutras e não conflitam. */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* background: removido — bloco V2 trata */
    /* border-radius: removido — bloco V2 trata */
    /* overflow: removido — bloco V2 trata */
}

/* .woocommerce-MyAccount-navigation ul li { border-bottom: ... }
   — neutralizado pelo Lote 5 (V2 define items sem border entre eles). */

/* .woocommerce-MyAccount-navigation ul li a { padding/color }
   — neutralizado pelo Lote 5 (V2 redefine padding/cor/transição). */

/* .woocommerce-MyAccount-navigation ul li a:hover,
   .woocommerce-MyAccount-navigation ul li.is-active a {
       background: navy; color: white;
   }
   — NEUTRALIZADO pelo Lote 5. Era esta a regra que sobrepunha o
   estado activo com bg navy. V2 usa bg vermelho subtil + border-left
   red para active state. */

/* Mobile - Minha Conta em coluna única */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
        float: none;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 2rem;
        margin-right: 0;
    }
}

/* Header actions - ordem dos elementos */
.fo-header__woo {
    order: 1;
    margin-right: 0.5rem;
}

.fo-header__social {
    order: 2;
}

.fo-header__lang {
    order: 3;
}

/* Paginação */
.woocommerce-pagination {
    margin-top: 3rem;
    text-align: center;
}

.woocommerce-pagination ul {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--fo-radius);
    background: var(--fo-gray-100);
    color: var(--fo-navy);
    font-weight: 600;
    transition: all 0.3s;
}

.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current {
    background: var(--fo-red);
    color: white;
}

.wp-block-woocommerce-customer-account {
	display: none;
}

/* === Botão CTA do header (Bonus B): "Análise gratuita" === */
.fo-header__cta {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    background: var(--fo-red);
    color: #fff !important;
    font-family: var(--fo-font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 2px;
    text-decoration: none;
    transition: background 200ms ease;
    line-height: 1;
    white-space: nowrap;
}

.fo-header__cta:hover {
    background: var(--fo-red-dark);
    color: #fff !important;
}

@media (max-width: 1023px) {
    .fo-header__cta {
        display: none;
    }
}

.fo-mobile-nav__cta {
    display: inline-flex !important;
    align-items: center;
    padding: 10px 24px !important;
    min-height: 44px;
    background: var(--fo-red);
    color: #fff !important;
    border-radius: 2px;
    font-weight: 500;
    margin: 10px 0;
    text-decoration: none;
}

/* ============================================================================
   WOOCOMMERCE — SHOP V2 (redesign Lote 2)
   ----------------------------------------------------------------------------
   Aplicada na /shop/ e nos arquivos de categoria de produto via o template
   woocommerce/archive-product.php do tema. Coexiste com o bloco "WOOCOMMERCE
   SHOP" acima (linhas 4198+) — esse bloco continua a estilizar /cart/,
   /minha-conta/, /finalizar-compra/ e outras páginas WC não tocadas neste lote.
   ============================================================================ */

/* Em arquivos de produto, o .fo-main--shop perde o padding-top porque o hero
   ocupa esse espaço (com o seu próprio padding-top) e fica full-bleed. */
body.woocommerce.archive .fo-main--shop,
body.woocommerce.tax-product_cat .fo-main--shop,
body.woocommerce.tax-product_tag .fo-main--shop {
    padding-top: 0;
}

/* ---- HERO ---- */
.fo-shop__hero {
    padding: calc(80px + var(--fo-space-12)) 0 var(--fo-space-12);
    background: linear-gradient(135deg, var(--fo-navy) 0%, var(--fo-navy-dark) 100%);
    color: var(--fo-white);
    text-align: center;
}

.fo-shop__hero-title {
    font-size: clamp(2rem, 5vw, var(--fo-text-5xl));
    font-weight: 800;
    color: var(--fo-white);
    margin: 0 0 var(--fo-space-4);
    line-height: 1.1;
}

.fo-shop__hero-subtitle {
    font-size: var(--fo-text-xl);
    color: rgba(255, 255, 255, 0.9);
    max-width: 640px;
    margin: 0 auto var(--fo-space-6);
    line-height: 1.6;
}

.fo-shop__hero-breadcrumb {
    font-size: var(--fo-text-sm);
    color: rgba(255, 255, 255, 0.7);
}

.fo-shop__hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.fo-shop__hero-breadcrumb a:hover {
    color: var(--fo-white);
}

/* ---- BARRA HORIZONTAL DE CATEGORIAS (abaixo do hero) ----
   Padrão "banda full-width com conteúdo centrado":
     .fo-shop__cats               -> background full-width
     .fo-shop__cats > .fo-container -> max-width 1200, overflow horizontal
                                       interno (scrollbar escondida)
*/
/* Pai: banda full-width COM scroll horizontal. Aplicar overflow aqui
   (em vez do .fo-container interno) é mais robusto — quando o conteúdo
   excede o max-width do container, o min-width: max-content do filho
   expande-o e o pai gere o scroll. */
.fo-shop__cats {
    background: var(--fo-white);
    border-bottom: 1px solid var(--fo-gray-200);
    margin-bottom: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;       /* Firefox */
    -ms-overflow-style: none;    /* IE 10+ */
}


/* Container interno: max-width igual ao resto da página, mas min-width:
   max-content força a expandir quando os chips não cabem — permite que
   o scroll horizontal do pai actue sobre o conteúdo. */
.fo-shop__cats > .fo-container {
    max-width: var(--fo-container);
    margin: 0 auto;
    padding: 0 var(--fo-space-6);
    display: flex !important;
    min-width: max-content;
    gap: 0;
    align-items: center;
    white-space: nowrap !important;
}

.fo-shop__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--fo-gray-600);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color var(--fo-transition), border-color var(--fo-transition);
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.fo-shop__cat:hover {
    color: var(--fo-navy);
    border-bottom-color: var(--fo-gray-300);
}

.fo-shop__cat--active {
    color: var(--fo-navy);
    font-weight: 700;
    border-bottom-color: var(--fo-red);
}

.fo-shop__cat-count {
    background: var(--fo-gray-100);
    color: var(--fo-gray-500);
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
}

.fo-shop__cat--active .fo-shop__cat-count {
    background: var(--fo-red);
    color: var(--fo-white);
}

/* ---- TOOLBAR sticky (search + orderby + filtro dropdown + count) ---- */

.fo-shop__toolbar {
    width: 100%;
    background: var(--fo-white);
    border-bottom: 1px solid var(--fo-gray-200);
    position: sticky;
    top: 80px; /* altura do header fixo do tema */
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 0;
}

/* Container interno da toolbar — alinha com o resto da página
   (max-width: var(--fo-container) = 1200px, padding lateral igual).
   Selector sem '>' deliberadamente para apanhar qualquer .fo-container
   descendente (defesa contra wrappers extras que algum plugin adicione). */
.fo-shop__toolbar .fo-container,
.fo-shop__toolbar > .fo-container {
    max-width: var(--fo-container) !important;
    margin: 0 auto !important;
    padding: 0 var(--fo-space-6) !important;
}

.fo-shop__toolbar-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

/* Pesquisa (form .fo-shop__search) */
.fo-shop__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--fo-gray-50);
    border: 1px solid var(--fo-gray-200);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    min-width: 0;
    margin: 0;
}

.fo-shop__search svg {
    color: var(--fo-gray-400);
    flex-shrink: 0;
}

.fo-shop__search input[type="search"] {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: var(--fo-font-body);
    font-size: 0.875rem;
    color: var(--fo-navy);
    width: 100%;
    padding: 0;
}

.fo-shop__search input[type="search"]::placeholder {
    color: var(--fo-gray-400);
}

/* Ordenar por (woocommerce_catalog_ordering) */
.fo-shop__orderby {
    flex-shrink: 0;
}

.fo-shop__orderby select,
.fo-shop__orderby .woocommerce-ordering,
.fo-shop__orderby .woocommerce-ordering select {
    margin: 0 !important;
    float: none !important;
}

.fo-shop__orderby select,
.fo-shop__orderby .woocommerce-ordering select {
    border: 1px solid var(--fo-gray-200) !important;
    border-radius: 8px !important;
    padding: 0.45rem 2rem 0.45rem 0.75rem !important;
    background: var(--fo-white) !important;
    color: var(--fo-navy) !important;
    font-family: var(--fo-font-body) !important;
    font-size: 0.875rem !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Botão Filtrar */
.fo-shop__filter-wrap {
    position: relative;
    flex-shrink: 0;
}

.fo-shop__filter-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    background: var(--fo-navy);
    color: var(--fo-white);
    border: none;
    border-radius: 8px;
    font-family: var(--fo-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.fo-shop__filter-btn:hover {
    background: #1e3a5f;
}

.fo-shop__filter-chevron {
    transition: transform 0.2s;
}

.fo-shop__filter-btn.is-open .fo-shop__filter-chevron {
    transform: rotate(180deg);
}

/* Dropdown de preço — escondido por defeito, aparece com .is-open */
.fo-shop__filter-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 1.25rem;
    min-width: 260px;
    z-index: 200;
}

.fo-shop__filter-dropdown.is-open {
    display: block;
}

.fo-shop__filter-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fo-gray-500);
    margin: 0 0 1rem;
}

.fo-shop__filter-dropdown .widget,
.fo-shop__filter-dropdown .widget_price_filter {
    margin: 0;
    padding: 0;
}

.fo-shop__filter-dropdown .price_slider_wrapper {
    margin: 0;
}

.fo-shop__filter-dropdown .price_slider {
    width: 100%;
    height: 4px;
    margin: 0 0 0.5rem;
    background: var(--fo-gray-200);
    border: none;
    border-radius: 999px;
    position: relative;
}

.fo-shop__filter-dropdown .price_slider .ui-slider-range {
    background: var(--fo-red);
    height: 100%;
    border-radius: 999px;
}

.fo-shop__filter-dropdown .price_slider .ui-slider-handle {
    width: 14px;
    height: 14px;
    top: -5px;
    background: var(--fo-white);
    border: 2px solid var(--fo-red);
    border-radius: 50%;
    cursor: grab;
}

.fo-shop__filter-dropdown .price_slider_amount {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--fo-gray-700);
}

.fo-shop__filter-dropdown .price_slider_amount .button {
    padding: 0.4rem 0.875rem !important;
    background: var(--fo-red) !important;
    color: var(--fo-white) !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.fo-shop__filter-dropdown .price_slider_amount .price_label {
    font-size: 0.8rem;
    color: var(--fo-gray-600);
    margin-left: auto;
}

.fo-shop__filter-dropdown .price_slider_amount input[type="text"],
.fo-shop__filter-dropdown .price_slider_amount #min_price,
.fo-shop__filter-dropdown .price_slider_amount #max_price,
.fo-shop__filter-dropdown .price_slider_amount .clear {
    display: none !important;
}

/* Result count à direita do filter */
.fo-shop__count {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--fo-gray-500);
    white-space: nowrap;
}

.fo-shop__count .woocommerce-result-count,
.fo-shop__count p {
    margin: 0;
    padding: 0;
    float: none;
    font-size: inherit;
    color: inherit;
}

/* (Regras antigas de scrollbar e margin-bottom no .fo-shop__cats
   movidas para o bloco base no início — agora o scroll horizontal
   acontece dentro do .fo-container interno, não na banda full-width.) */

/* Mobile (<768px) — toolbar em 2 linhas com order */
@media (max-width: 767px) {
    .fo-shop__toolbar {
        /* sticky pode interferir em mobile com soft keyboard quando
           o utilizador abre o search; tornamos não-sticky em mobile
           para evitar pular layout. */
        position: static;
    }

    .fo-shop__toolbar-inner {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .fo-shop__search {
        flex: 1 1 100%;
        order: 1;
    }

    .fo-shop__orderby {
        order: 2;
        flex: 1;
    }

    .fo-shop__orderby select,
    .fo-shop__orderby .woocommerce-ordering select {
        width: 100%;
    }

    .fo-shop__filter-wrap {
        order: 3;
    }

    .fo-shop__count {
        order: 4;
        flex: 1 1 100%;
        text-align: center;
    }

    .fo-shop__filter-dropdown {
        right: auto;
        left: 0;
        min-width: min(280px, calc(100vw - 2rem));
    }
}

/* ---- LAYOUT 1 COLUNA FULL-WIDTH (sidebar removida — Lote 7) ---- */
.fo-shop__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-8);
    padding-top: 1.5rem;
    padding-bottom: var(--fo-space-12);
    align-items: start;
}

/* Sidebar escondida em todos os viewports — categorias passam a barra
   horizontal abaixo do hero (Commit 2); filtro de preço passa para a
   toolbar inline (Commit 3). */
.fo-shop__sidebar {
    display: none !important;
}

.fo-shop__main {
    min-width: 0; /* impede que grid item rebente o container */
}

/* ---- GRID DE PRODUTOS (catálogo 100% — 4 cols default) ---- */
.fo-shop__main ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--fo-space-6) !important;
    margin: 0 !important;
}

@media (max-width: 1024px) {
    .fo-shop__main ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .fo-shop__main ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ---- CARD DE PRODUTO (.fo-product-card adicionada via wc_product_class) ---- */
.fo-shop__main ul.products li.product {
    background: var(--fo-white) !important;
    border-radius: var(--fo-radius-xl) !important;
    box-shadow: var(--fo-shadow) !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--fo-transition), box-shadow var(--fo-transition) !important;
}

.fo-shop__main ul.products li.product:hover {
    transform: translateY(-6px);
    box-shadow: var(--fo-shadow-lg) !important;
}

/* Wrapper de imagem (.fo-product-card__media) — aspect 4:3 (mais compacto que 1:1), contain (não corta produto) */
.fo-shop__main ul.products li.product .fo-product-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--fo-gray-100);
    overflow: hidden;
    border-bottom: 1px solid var(--fo-gray-100);
}

.fo-shop__main ul.products li.product .fo-product-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 1rem;
    background: transparent;
    border-radius: 0;
    margin: 0 !important;
    transition: transform var(--fo-transition-slow);
}

.fo-shop__main ul.products li.product:hover .fo-product-card__media img {
    transform: scale(1.04);
}

/* Body do card (.fo-product-card__body) — padding generoso */
.fo-shop__main ul.products li.product .fo-product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--fo-space-6);
    gap: var(--fo-space-2);
}

/* Título — clamp a 2 linhas para evitar partir em 3+ em produtos com nome longo */
.fo-shop__main ul.products li.product .woocommerce-loop-product__title,
.fo-shop__main ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--fo-navy) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Preço */
.fo-shop__main ul.products li.product .price {
    font-size: var(--fo-text-xl) !important;
    font-weight: 700 !important;
    color: var(--fo-red) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.fo-shop__main ul.products li.product .price del {
    color: var(--fo-gray-500) !important;
    font-size: var(--fo-text-base) !important;
    font-weight: 400 !important;
    margin-right: var(--fo-space-2);
    text-decoration: line-through;
}

.fo-shop__main ul.products li.product .price ins {
    text-decoration: none !important;
    background: transparent !important;
}

/* Badge "Promoção" — canto SUPERIOR ESQUERDO (override do existente que está à direita) */
.fo-shop__main ul.products li.product span.onsale {
    position: absolute !important;
    top: var(--fo-space-3) !important;
    left: var(--fo-space-3) !important;
    right: auto !important;
    background: var(--fo-red) !important;
    color: var(--fo-white) !important;
    padding: var(--fo-space-1) var(--fo-space-3) !important;
    border-radius: var(--fo-radius-full) !important;
    font-size: var(--fo-text-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.4 !important;
}

/* Botão "Adicionar ao carrinho" — full-width, vermelho, hover navy */
.fo-shop__main ul.products li.product .button,
.fo-shop__main ul.products li.product a.button,
.fo-shop__main ul.products li.product .add_to_cart_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    margin-top: var(--fo-space-3) !important;
    padding: var(--fo-space-3) var(--fo-space-4) !important;
    background: var(--fo-red) !important;
    color: var(--fo-white) !important;
    border: none !important;
    border-radius: var(--fo-radius-md) !important;
    font-weight: 600 !important;
    font-size: var(--fo-text-sm) !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background var(--fo-transition), transform var(--fo-transition) !important;
}

.fo-shop__main ul.products li.product .button:hover,
.fo-shop__main ul.products li.product a.button:hover,
.fo-shop__main ul.products li.product .add_to_cart_button:hover {
    background: var(--fo-navy) !important;
}

/* Estado "added" / "loading" do AJAX add-to-cart (mantém visibilidade do botão) */
.fo-shop__main ul.products li.product .added_to_cart {
    display: inline-block;
    margin-top: var(--fo-space-2);
    color: var(--fo-green, var(--fo-navy));
    font-size: var(--fo-text-sm);
    text-decoration: underline;
}

/* Link wrapper da imagem+título (woocommerce_template_loop_product_link_open) */
.fo-shop__main ul.products li.product a.woocommerce-LoopProduct-link {
    display: contents;
    color: inherit;
    text-decoration: none;
}

/* Esconder estrelas se não houver avaliações */
.fo-shop__main ul.products li.product .star-rating {
    margin: 0 0 var(--fo-space-2);
    color: var(--fo-red);
}

/* ---- SIDEBAR DE FILTROS ---- */
.fo-shop__sidebar {
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    padding: var(--fo-space-6);
    box-shadow: var(--fo-shadow);
    position: sticky;
    top: calc(80px + var(--fo-space-4));
    max-height: calc(100vh - 80px - var(--fo-space-8));
    overflow-y: auto;
}

/* Botão fechar — só visível no drawer mobile (Commit 4); escondido em desktop */
.fo-shop__sidebar-close {
    display: none;
    position: absolute;
    top: var(--fo-space-3);
    right: var(--fo-space-3);
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--fo-navy);
    cursor: pointer;
    border-radius: 50%;
    transition: background var(--fo-transition);
}

.fo-shop__sidebar-close:hover {
    background: var(--fo-gray-100);
}

/* Bloco de filtro (widget WC ou fallback) */
.fo-shop-filter {
    margin: 0;
    padding: var(--fo-space-4) 0;
    border-bottom: 1px solid var(--fo-gray-100);
}

.fo-shop-filter:first-child {
    padding-top: 0;
}

.fo-shop-filter:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fo-shop-filter__title {
    font-size: var(--fo-text-xs);
    font-weight: 700;
    color: var(--fo-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--fo-space-3);
}

.fo-shop-filter__list,
.fo-shop-filter ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-1);
}

.fo-shop-filter__link,
.fo-shop-filter li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fo-space-2);
    padding: var(--fo-space-2) var(--fo-space-3);
    color: var(--fo-gray-700);
    text-decoration: none;
    font-size: var(--fo-text-sm);
    border-radius: var(--fo-radius-md);
    transition: background var(--fo-transition), color var(--fo-transition);
}

.fo-shop-filter__link:hover,
.fo-shop-filter li a:hover {
    background: var(--fo-gray-50);
    color: var(--fo-navy);
}

.fo-shop-filter__link.is-active,
.fo-shop-filter li.current-cat > a {
    background: var(--fo-navy);
    color: var(--fo-white);
}

.fo-shop-filter__count,
.fo-shop-filter li a .count {
    font-size: var(--fo-text-xs);
    color: var(--fo-gray-500);
    font-variant-numeric: tabular-nums;
}

.fo-shop-filter__link.is-active .fo-shop-filter__count,
.fo-shop-filter li.current-cat > a .count {
    color: rgba(255, 255, 255, 0.75);
}

/* Sub-categorias indentadas (.children no widget legacy de categorias,
   .wc-block-product-categories-list--has-children ul no WC Blocks) */
.fo-shop__sidebar .children,
.fo-shop__sidebar .wc-block-product-categories-list--has-children ul {
    padding-left: var(--fo-space-4);
    font-size: 0.82rem;
    color: var(--fo-gray-500);
}

/* Slider de preço do WC (widget Filter by Price) */
.fo-shop-filter .price_slider_wrapper {
    margin-top: var(--fo-space-2);
}

.fo-shop-filter .price_slider_amount {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-700);
    margin-top: var(--fo-space-3);
    text-align: left !important;
}

.fo-shop-filter .price_slider_amount .button {
    background: var(--fo-red) !important;
    color: var(--fo-white) !important;
    border: none !important;
    padding: var(--fo-space-2) var(--fo-space-4) !important;
    border-radius: var(--fo-radius-md) !important;
    font-size: var(--fo-text-xs) !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background var(--fo-transition);
}

.fo-shop-filter .price_slider_amount .button:hover {
    background: var(--fo-navy) !important;
}

.fo-shop-filter .ui-slider {
    background: var(--fo-gray-200);
    height: 6px;
    border-radius: 3px;
    border: none;
    position: relative;
    margin: var(--fo-space-2) 0;
}

.fo-shop-filter .ui-slider .ui-slider-range {
    background: var(--fo-red);
    height: 100%;
    border-radius: 3px;
}

.fo-shop-filter .ui-slider .ui-slider-handle {
    width: 18px;
    height: 18px;
    background: var(--fo-white);
    border: 2px solid var(--fo-red);
    border-radius: 50%;
    top: -7px;
    cursor: grab;
}

/* ---- WIDGETS WC NA SIDEBAR — títulos (eyebrow) e refinamentos visuais ---- */

/*
 * O nosso .fo-shop-filter__title (acima) só é aplicado ao h3 do fallback PHP.
 * Os widgets reais do WC (legacy ou WC Blocks) usam classes próprias para os
 * títulos: .widget-title (legacy), h2/h3 directo, e
 * .wc-block-components-filter-wrapper h2 (blocks). Sem este reset, esses
 * títulos herdam o h2/h3 global do tema e ficam enormes.
 */
.fo-shop__sidebar .widget-title,
.fo-shop__sidebar .wc-block-components-filter-wrapper h2,
.fo-shop__sidebar h2,
.fo-shop__sidebar h3 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fo-navy);
    margin: 0 0 var(--fo-space-3);
    padding-bottom: var(--fo-space-2);
    border-bottom: 2px solid var(--fo-red);
}

/* Slider de preço — WC Blocks (input range nativo HTML5) */
.fo-shop__sidebar input[type="range"] {
    accent-color: var(--fo-red);
}

/* Slider de preço — widget legacy (botão 'Filtrar') */
.fo-shop__sidebar .price_slider_amount button {
    background: var(--fo-navy);
    color: var(--fo-white);
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--fo-transition);
}

.fo-shop__sidebar .price_slider_amount button:hover {
    background: var(--fo-red);
}

/* Breadcrumb duplicado: o nosso hero já mostra woocommerce_breadcrumb().
   O hook woocommerce_before_main_content também o imprime por defeito
   dentro do .fo-shop__main — esconder este 2º breadcrumb. */
.fo-shop__main .woocommerce-breadcrumb {
    display: none;
}

/* ---- TOGGLE DE FILTROS (mobile <1024px) ---- */
.fo-shop__filters-toggle {
    display: none;
    align-items: center;
    gap: var(--fo-space-2);
    padding: var(--fo-space-3) var(--fo-space-5);
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-md);
    color: var(--fo-navy);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-sm);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: var(--fo-space-5);
    transition: background var(--fo-transition), border-color var(--fo-transition);
}

.fo-shop__filters-toggle:hover {
    background: var(--fo-gray-50);
    border-color: var(--fo-navy);
}

@media (max-width: 1023px) {
    .fo-shop__filters-toggle {
        display: inline-flex;
    }

    /*
     * Em <1024px o aside sai do layout normal e fica em drawer fixo à
     * esquerda, fora do viewport por defeito (translateX -100%). Quando
     * recebe a classe .is-open desliza para dentro.
     * O CSS antes (no Commit 1) escondia o aside completamente em <1024px
     * com display: none — aqui sobrepomos com display: block + position
     * fixed.
     */
    .fo-shop__sidebar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(340px, 88vw);
        max-height: 100vh;
        z-index: 1100;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        border-radius: 0;
        box-shadow: var(--fo-shadow-xl);
        overflow-y: auto;
        padding: var(--fo-space-10) var(--fo-space-6) var(--fo-space-6);
    }

    .fo-shop__sidebar.is-open {
        transform: translateX(0);
    }

    .fo-shop__sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Backdrop (criado em runtime pelo JS quando o drawer abre) */
.fo-shop__sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 27, 42, 0.55);
    z-index: 1099;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.fo-shop__sidebar-backdrop.is-visible {
    opacity: 1;
}

/* Bloquear scroll do body enquanto o drawer está aberto */
body.fo-shop-sidebar-open {
    overflow: hidden;
}

/* ---- TOOLBAR (result count + orderby) ---- */
/*
 * O WC imprime woocommerce-result-count e woocommerce-ordering como
 * irmãos sequenciais via hooks no woocommerce_before_shop_loop. Aqui
 * usamos flexbox no contentor pai (.fo-shop__main) para os alinhar
 * lado a lado. O CSS antigo (linhas 4280-4300) usava floats — sobreposto
 * abaixo com selectors mais específicos para esta página.
 */
.fo-shop__main .woocommerce-result-count,
.fo-shop__main .woocommerce-ordering {
    float: none !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.fo-shop__main .woocommerce-result-count {
    color: var(--fo-gray-600);
    font-size: var(--fo-text-sm);
}

.fo-shop__main .woocommerce-ordering {
    display: flex;
    align-items: center;
    gap: var(--fo-space-2);
}

.fo-shop__orderby-label {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-600);
    font-weight: 500;
    white-space: nowrap;
}

.fo-shop__main .woocommerce-ordering select,
.fo-shop__orderby-select {
    padding: var(--fo-space-2) var(--fo-space-8) var(--fo-space-2) var(--fo-space-3) !important;
    background: var(--fo-white) !important;
    border: 1px solid var(--fo-gray-200) !important;
    border-radius: var(--fo-radius-md) !important;
    color: var(--fo-navy);
    font-size: var(--fo-text-sm);
    font-family: var(--fo-font-body);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%231D3557' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--fo-space-3) center !important;
    background-size: 12px !important;
    transition: border-color var(--fo-transition);
}

.fo-shop__main .woocommerce-ordering select:focus,
.fo-shop__orderby-select:focus {
    outline: none;
    border-color: var(--fo-red) !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12);
}

/*
 * Layout da toolbar: arruma result-count à esquerda, orderby à direita,
 * com wrap em telas pequenas. Usa um pseudo-wrapper via :first-of-type +
 * sibling selectors em vez de um div extra.
 */
.fo-shop__main {
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-5);
	margin-top: -80px !important;
}

.fo-shop__main .woocommerce-result-count,
.fo-shop__main .woocommerce-ordering {
    order: -1;
}

@media (min-width: 600px) {
    /*
     * Em ≥600px, as duas (result-count + ordering) partilham uma linha
     * 'falsa' via position: relative + margin-top negativo no ordering
     * para o trazer ao lado do count. Hack discreto mas evita wrappers
     * extra no template (que requereria override de hooks WC).
     */
    .fo-shop__main .woocommerce-result-count {
        align-self: flex-start;
    }
    .fo-shop__main .woocommerce-ordering {
        align-self: flex-end;
        margin-top: calc(-1 * (1.4em + var(--fo-space-5))) !important;
    }
}

/* ---- PAGINAÇÃO ---- */
.fo-shop__main .woocommerce-pagination {
    margin-top: var(--fo-space-8);
    text-align: center;
}

.fo-shop__main .woocommerce-pagination ul.page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--fo-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}

.fo-shop__main .woocommerce-pagination ul.page-numbers li {
    margin: 0;
    border: none;
}

.fo-shop__main .woocommerce-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--fo-space-3);
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-md);
    color: var(--fo-navy);
    font-size: var(--fo-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--fo-transition), border-color var(--fo-transition);
}

.fo-shop__main .woocommerce-pagination .page-numbers:hover {
    background: var(--fo-gray-50);
    border-color: var(--fo-navy);
}

.fo-shop__main .woocommerce-pagination .page-numbers.current {
    background: var(--fo-navy);
    border-color: var(--fo-navy);
    color: var(--fo-white);
}

.fo-shop__main .woocommerce-pagination .page-numbers.dots {
    background: transparent;
    border-color: transparent;
}

/* ============================================================================
   WOOCOMMERCE — SINGLE PRODUCT (Lote 3)
   ----------------------------------------------------------------------------
   Aplicada em /produto/{slug}/ via woocommerce/single-product.php +
   woocommerce/content-single-product.php do tema. Coexiste com os blocos
   "WOOCOMMERCE SHOP" e "WOOCOMMERCE — SHOP V2" sem os tocar.
   ============================================================================ */

.fo-main--single-product {
    padding-top: 80px; /* offset do header position:fixed (.fo-header tem height 80px). NÃO reduzir abaixo deste valor ou o conteúdo (breadcrumb/título) fica tapado pelo header. */
    padding-bottom: var(--fo-space-12);
    background: var(--fo-gray-50);
    min-height: calc(100vh - 80px);
}

.fo-single-product {
    margin: 0;
}

/* ---- SECÇÃO 1 — Above the fold ---- */
.fo-single-product__hero {
    padding: 0 0 var(--fo-space-8); /* sem padding-top: já há 80px no .fo-main--single-product (o brief sinalizou 'duplicado'). */
}

.fo-single-product__breadcrumb {
    margin-bottom: var(--fo-space-6);
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-500);
}

.fo-single-product__breadcrumb a {
    color: var(--fo-navy);
    text-decoration: none;
}

.fo-single-product__breadcrumb a:hover {
    color: var(--fo-red);
}

.fo-single-product__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-10);
    align-items: start;
}

@media (min-width: 768px) {
    .fo-single-product__layout {
        grid-template-columns: 55fr 45fr;
        gap: var(--fo-space-12);
    }
}

.fo-single-product__gallery,
.fo-single-product__summary {
    min-width: 0;
}

/* ---- Galeria (.woocommerce-product-gallery) ---- */
/*
 * O markup é gerado pelo WC com FlexSlider/PhotoSwipe. Não tocamos no JS;
 * só estilizamos as classes existentes (.woocommerce-product-gallery,
 * .woocommerce-product-gallery__image, .flex-control-thumbs, etc.).
 */
.fo-single-product__gallery .woocommerce-product-gallery {
    position: relative;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    opacity: 1 !important;
}

.fo-single-product__gallery .woocommerce-product-gallery__wrapper {
    margin: 0;
}

/* Imagem principal — aspect 1:1, fundo branco, contain, sombra suave */
.fo-single-product__gallery .woocommerce-product-gallery__image,
.fo-single-product__gallery .woocommerce-product-gallery__image--placeholder {
    aspect-ratio: 1 / 1;
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fo-space-6);
}

.fo-single-product__gallery .woocommerce-product-gallery__image img,
.fo-single-product__gallery .woocommerce-product-gallery__image a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    display: block;
    transition: transform var(--fo-transition);
}

.fo-single-product__gallery .woocommerce-product-gallery__image:hover img {
    transform: scale(1.03);
}

/* Trigger de zoom (lupa) gerado pelo PhotoSwipe — canto sup. direito */
.fo-single-product__gallery .woocommerce-product-gallery__trigger {
    position: absolute;
    top: var(--fo-space-4);
    right: var(--fo-space-4);
    width: 40px;
    height: 40px;
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: 50%;
    box-shadow: var(--fo-shadow-sm);
    color: var(--fo-navy);
    z-index: 9;
    font-size: 0;
    text-indent: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--fo-transition), color var(--fo-transition);
}

.fo-single-product__gallery .woocommerce-product-gallery__trigger::before {
    content: '\1F50D'; /* ícone lupa */
    font-size: 18px;
}

.fo-single-product__gallery .woocommerce-product-gallery__trigger:hover {
    background: var(--fo-red);
    color: var(--fo-white);
}

/* Badge "Promoção!" — canto sup. esquerdo (override do bloco antigo) */
.fo-single-product__gallery .onsale {
    position: absolute !important;
    top: var(--fo-space-4) !important;
    left: var(--fo-space-4) !important;
    right: auto !important;
    background: var(--fo-red) !important;
    color: var(--fo-white) !important;
    padding: var(--fo-space-1) var(--fo-space-4) !important;
    border-radius: var(--fo-radius-full) !important;
    font-size: var(--fo-text-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.4 !important;
}

/* Thumbnails — row horizontal abaixo da imagem principal */
.fo-single-product__gallery .flex-control-nav.flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: var(--fo-space-3);
    margin: var(--fo-space-4) 0 0 !important;
    padding: 0 !important;
    list-style: none;
    overflow: hidden;
}

.fo-single-product__gallery .flex-control-thumbs li {
    margin: 0;
    width: 100% !important;
    aspect-ratio: 1 / 1;
}

.fo-single-product__gallery .flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--fo-space-2);
    background: var(--fo-white);
    border: 2px solid transparent;
    border-radius: var(--fo-radius-md);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--fo-transition), border-color var(--fo-transition);
}

.fo-single-product__gallery .flex-control-thumbs li img:hover {
    opacity: 1;
}

.fo-single-product__gallery .flex-control-thumbs li img.flex-active,
.fo-single-product__gallery .flex-control-thumbs li img:focus {
    opacity: 1;
    border-color: var(--fo-red);
}

/* ---- Summary (coluna direita) ---- */
.fo-single-product__summary {
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-4);
}

/* Título do produto */
.fo-single-product__summary .product_title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--fo-navy);
    line-height: 1.2;
    margin: 0;
}

/* Estrelas — usar a stack visual existente do WC mas com cor red */
.fo-single-product__summary .woocommerce-product-rating {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
}

.fo-single-product__summary .star-rating {
    color: var(--fo-red);
    margin: 0;
}

.fo-single-product__summary .woocommerce-review-link {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-600);
    text-decoration: none;
}

.fo-single-product__summary .woocommerce-review-link:hover {
    color: var(--fo-red);
}

/* Preço */
.fo-single-product__summary .price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--fo-red);
    margin: 0;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--fo-space-2);
}

.fo-single-product__summary .price del {
    color: var(--fo-gray-400);
    font-size: 1.1rem;
    font-weight: 400;
    text-decoration: line-through;
}

.fo-single-product__summary .price ins {
    text-decoration: none;
    background: transparent;
}

/* Descrição curta */
.fo-single-product__summary .woocommerce-product-details__short-description {
    padding: var(--fo-space-4) 0;
    border-top: 1px solid var(--fo-gray-200);
    border-bottom: 1px solid var(--fo-gray-200);
    color: var(--fo-gray-700);
    line-height: 1.7;
}

.fo-single-product__summary .woocommerce-product-details__short-description p {
    margin: 0 0 var(--fo-space-2);
}

.fo-single-product__summary .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}

/* Form de add-to-cart */
.fo-single-product__summary form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--fo-space-3);
    margin: 0;
}

/* Wrapper da quantidade — fallback CSS aplicado a qualquer .quantity em
   single-product (com OU sem botões injectados pelo JS). Se o JS correr,
   .fo-qty-btn .minus e .plus aparecem antes/depois do input. Se não correr
   (cache JS, erro), o input mantém-se utilizável com os spinners default
   do browser (CSS abaixo desliga-os só dentro do .fo-quantity--enhanced). */
.fo-single-product__summary .quantity,
body.single-product .fo-single-product__summary .quantity {
    display: inline-flex;
    align-items: stretch;
    height: 52px;
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-md);
    background: var(--fo-white);
    overflow: hidden;
}

.fo-single-product__summary .quantity .qty,
.fo-single-product__summary .quantity input[type="number"] {
    width: 80px;
    height: 100%;
    padding: 0 var(--fo-space-3);
    border: none;
    background: transparent;
    color: var(--fo-navy);
    font-size: var(--fo-text-base);
    font-weight: 600;
    text-align: center;
}

/* Wrapper marcado pelo JS como 'enhanced' (botões +/- injectados):
   estreita o input e desliga os spinners default do browser. */
.fo-single-product__summary .quantity.fo-quantity--enhanced .qty,
.fo-single-product__summary .quantity.fo-quantity--enhanced input[type="number"] {
    width: 56px;
    padding: 0;
    appearance: textfield;
    -moz-appearance: textfield;
}

.fo-single-product__summary .quantity.fo-quantity--enhanced input[type="number"]::-webkit-outer-spin-button,
.fo-single-product__summary .quantity.fo-quantity--enhanced input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Botões +/- injectados via JS (initSingleProductQty no main.js) */
.fo-qty-btn {
    width: 44px;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--fo-navy);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--fo-transition), color var(--fo-transition);
}

.fo-qty-btn:hover {
    background: var(--fo-gray-100);
    color: var(--fo-red);
}

.fo-qty-btn:focus-visible {
    outline: 2px solid var(--fo-red);
    outline-offset: -2px;
}

.fo-qty-btn--minus {
    border-right: 1px solid var(--fo-gray-200);
}

.fo-qty-btn--plus {
    border-left: 1px solid var(--fo-gray-200);
}

/* Botão 'Adicionar ao carrinho' — full-width preferencial, mas partilha
   linha com qty em >=480px */
.fo-single-product__summary .single_add_to_cart_button,
.fo-single-product__summary button.single_add_to_cart_button,
.fo-single-product__summary .button.alt {
    flex: 1 1 220px;
    min-height: 52px;
    padding: var(--fo-space-3) var(--fo-space-6) !important;
    background: var(--fo-red) !important;
    color: var(--fo-white) !important;
    border: none !important;
    border-radius: var(--fo-radius-md) !important;
    font-family: var(--fo-font-body) !important;
    font-size: var(--fo-text-base) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: background var(--fo-transition), transform var(--fo-transition) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--fo-space-2);
}

.fo-single-product__summary .single_add_to_cart_button:hover,
.fo-single-product__summary button.single_add_to_cart_button:hover {
    background: var(--fo-red-dark) !important;
    transform: translateY(-1px);
}

.fo-single-product__summary .single_add_to_cart_button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Ícone do carrinho injectado via ::before SVG data URI */
.fo-single-product__summary .single_add_to_cart_button::before {
    content: '';
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23ffffff' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-1.7 3.4A1 1 0 006.2 18H19m0 0a2 2 0 100 4 2 2 0 000-4zm-10 2a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

/* Linha de confiança (injectada via fo_single_product_trust_line no PHP) */
.fo-single-product__trust {
    list-style: none;
    margin: var(--fo-space-2) 0 0;
    padding: var(--fo-space-4) 0;
    border-top: 1px solid var(--fo-gray-200);
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-4) var(--fo-space-5);
}

.fo-single-product__trust li {
    display: flex;
    align-items: center;
    gap: var(--fo-space-2);
    margin: 0;
    color: var(--fo-gray-700);
    font-size: var(--fo-text-sm);
}

.fo-single-product__trust svg {
    color: var(--fo-red);
    flex-shrink: 0;
}

/* Meta (SKU, categorias, tags) — discreto */
.fo-single-product__summary .product_meta {
    padding-top: var(--fo-space-4);
    border-top: 1px solid var(--fo-gray-200);
    font-size: 0.8rem;
    color: var(--fo-gray-600);
    line-height: 1.8;
}

.fo-single-product__summary .product_meta > span {
    display: block;
}

.fo-single-product__summary .product_meta a {
    color: var(--fo-gray-700);
    text-decoration: none;
}

.fo-single-product__summary .product_meta a:hover {
    color: var(--fo-red);
}

.fo-single-product__summary .product_meta .sku_wrapper .sku,
.fo-single-product__summary .product_meta .posted_in,
.fo-single-product__summary .product_meta .tagged_as {
    color: var(--fo-gray-700);
}

/* ---- SECÇÃO 2 — Tabs ---- */
.fo-single-product__tabs-section {
    padding: var(--fo-space-8) 0;
    background: var(--fo-white);
    border-top: 1px solid var(--fo-gray-100);
}

/* Tabs nav (.woocommerce-tabs > ul.tabs) */
.fo-single-product__tabs-section .woocommerce-tabs {
    background: transparent;
}

.fo-single-product__tabs-section .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-2);
    list-style: none;
    margin: 0 0 var(--fo-space-6);
    padding: 0;
    border-bottom: 1px solid var(--fo-gray-200);
}

.fo-single-product__tabs-section .woocommerce-tabs ul.tabs::before,
.fo-single-product__tabs-section .woocommerce-tabs ul.tabs::after {
    display: none !important;
    content: none !important;
}

.fo-single-product__tabs-section .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    position: relative;
}

.fo-single-product__tabs-section .woocommerce-tabs ul.tabs li::before,
.fo-single-product__tabs-section .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

.fo-single-product__tabs-section .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: var(--fo-space-3) var(--fo-space-5);
    color: var(--fo-gray-600);
    font-size: var(--fo-text-base);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--fo-transition), border-color var(--fo-transition);
}

.fo-single-product__tabs-section .woocommerce-tabs ul.tabs li a:hover {
    color: var(--fo-navy);
}

.fo-single-product__tabs-section .woocommerce-tabs ul.tabs li.active a,
.fo-single-product__tabs-section .woocommerce-tabs ul.tabs li[aria-selected="true"] a {
    color: var(--fo-navy);
    font-weight: 700;
    border-bottom-color: var(--fo-red);
}

/* Painel das tabs */
.fo-single-product__tabs-section .woocommerce-Tabs-panel {
    padding: var(--fo-space-6);
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-100);
    border-radius: var(--fo-radius-lg);
    color: var(--fo-gray-700);
    line-height: 1.7;
}

.fo-single-product__tabs-section .woocommerce-Tabs-panel h2,
.fo-single-product__tabs-section .woocommerce-Tabs-panel h3 {
    color: var(--fo-navy);
    margin-top: 0;
    margin-bottom: var(--fo-space-4);
    font-size: var(--fo-text-xl);
    font-weight: 700;
}

.fo-single-product__tabs-section .woocommerce-Tabs-panel p:last-child {
    margin-bottom: 0;
}

/* Informações adicionais — tabela */
.fo-single-product__tabs-section .shop_attributes {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.fo-single-product__tabs-section .shop_attributes th,
.fo-single-product__tabs-section .shop_attributes td {
    padding: var(--fo-space-3) var(--fo-space-4);
    border: none;
    border-bottom: 1px solid var(--fo-gray-100);
    background: transparent;
    text-align: left;
    vertical-align: top;
}

.fo-single-product__tabs-section .shop_attributes th {
    width: 35%;
    color: var(--fo-navy);
    font-weight: 600;
}

.fo-single-product__tabs-section .shop_attributes td {
    color: var(--fo-gray-700);
}

.fo-single-product__tabs-section .shop_attributes tr:last-child th,
.fo-single-product__tabs-section .shop_attributes tr:last-child td {
    border-bottom: none;
}

/* Avaliações */
.fo-single-product__tabs-section #reviews .commentlist {
    list-style: none;
    margin: 0 0 var(--fo-space-6);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-4);
}

.fo-single-product__tabs-section #reviews .comment {
    background: var(--fo-gray-50);
    padding: var(--fo-space-5);
    border-radius: var(--fo-radius-md);
}

.fo-single-product__tabs-section #reviews .comment_container {
    display: flex;
    gap: var(--fo-space-4);
}

.fo-single-product__tabs-section #reviews .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fo-single-product__tabs-section #reviews .meta strong {
    color: var(--fo-navy);
    font-weight: 700;
}

.fo-single-product__tabs-section #reviews .star-rating {
    color: var(--fo-red);
}

.fo-single-product__tabs-section #review_form .comment-form input[type="text"],
.fo-single-product__tabs-section #review_form .comment-form input[type="email"],
.fo-single-product__tabs-section #review_form .comment-form textarea {
    width: 100%;
    padding: var(--fo-space-3) var(--fo-space-4);
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-md);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    color: var(--fo-gray-800);
    transition: border-color var(--fo-transition);
}

.fo-single-product__tabs-section #review_form .comment-form input:focus,
.fo-single-product__tabs-section #review_form .comment-form textarea:focus {
    outline: none;
    border-color: var(--fo-red);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12);
}

.fo-single-product__tabs-section #review_form .form-submit input[type="submit"] {
    padding: var(--fo-space-3) var(--fo-space-6);
    background: var(--fo-red);
    color: var(--fo-white);
    border: none;
    border-radius: var(--fo-radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--fo-transition);
}

.fo-single-product__tabs-section #review_form .form-submit input[type="submit"]:hover {
    background: var(--fo-red-dark);
}

/* ---- SECÇÃO 3 — Upsells + Relacionados ---- */
.fo-single-product__related-section {
    padding: var(--fo-space-12) 0 0;
}

.fo-single-product__related-section:empty {
    display: none;
}

/*
 * Títulos das secções 'Também pode gostar' (related) e 'Pode também
 * gostar de…' (upsells). WC renderiza com <h2> default — substituímos
 * pelo estilo do tema (centrado, navy, separador subtil).
 */
.fo-single-product__related-section .related > h2,
.fo-single-product__related-section .upsells > h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fo-navy);
    margin: 0 0 var(--fo-space-8);
    padding-bottom: var(--fo-space-3);
    text-align: center;
    position: relative;
}

.fo-single-product__related-section .related > h2::after,
.fo-single-product__related-section .upsells > h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--fo-red);
    border-radius: 2px;
}

.fo-single-product__related-section .related,
.fo-single-product__related-section .upsells {
    margin-bottom: var(--fo-space-12);
}

.fo-single-product__related-section .related:last-child,
.fo-single-product__related-section .upsells:last-child {
    margin-bottom: 0;
}

/*
 * Grid de 4 cols em desktop (override da regra 4cols antiga do WC SHOP
 * para este contexto). Reutiliza o estilo de card do bloco antigo
 * .woocommerce ul.products li.product (linhas 4399+) que já dá ao
 * <li> bg white + border-radius + shadow + hover.
 */
.fo-single-product__related-section ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--fo-space-5) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

@media (max-width: 1023px) {
    .fo-single-product__related-section ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .fo-single-product__related-section ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--fo-space-3) !important;
    }
}

@media (max-width: 480px) {
    .fo-single-product__related-section ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Refinamentos finais ---- */

/* Notice WC (ex.: 'Adicionado ao carrinho') no topo da single-product —
   alinhar visualmente com o resto da página. */
.fo-single-product .woocommerce-notices-wrapper:not(:empty),
.fo-main--single-product > .woocommerce-notices-wrapper:not(:empty) {
    max-width: var(--fo-container);
    margin: 0 auto var(--fo-space-6);
    padding: 0 var(--fo-space-6);
}

.fo-single-product .woocommerce-message,
.fo-single-product .woocommerce-error,
.fo-single-product .woocommerce-info {
    border-radius: var(--fo-radius-md);
    border-left-color: var(--fo-red);
    background: var(--fo-gray-50);
    padding: var(--fo-space-4) var(--fo-space-5);
}

.fo-single-product .woocommerce-message a.button,
.fo-single-product .woocommerce-error a.button {
    background: var(--fo-red);
    color: var(--fo-white);
    border-radius: var(--fo-radius-md);
}

/* Schema breadcrumb tem padding-left em alguns themes — reset */
.fo-single-product__breadcrumb .woocommerce-breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================================
   WOOCOMMERCE — CART & CHECKOUT (Lote 4)
   ----------------------------------------------------------------------------
   Estiliza /cart/ e /checkout/ sem templates PHP. O WC renderiza estas
   páginas via shortcodes [woocommerce_cart] / [woocommerce_checkout] e
   hooks; aqui só damos CSS. Selectors prefixados com body.woocommerce-cart
   ou body.woocommerce-checkout para não vazar para outras páginas.

   Coexiste com o bloco antigo "WOOCOMMERCE SHOP" (4198+) que já tem
   algumas regras de infraestrutura (esconder sidebar, padding-top,
   site-content) — não tocadas aqui.
   ============================================================================ */

/* ---- CART: container e layout 2 colunas ---- */

body.woocommerce-cart .site-content,
body.woocommerce-cart .entry-content {
    background: var(--fo-gray-50);
}

body.woocommerce-cart .woocommerce {
    max-width: var(--fo-container);
    margin: 0 auto;
    padding: var(--fo-space-8) var(--fo-space-6);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-8);
    align-items: start;
}

@media (min-width: 768px) {
    body.woocommerce-cart .woocommerce {
        grid-template-columns: 65fr 35fr;
        gap: var(--fo-space-10);
    }
}

/* Notice / messages do WC podem aparecer no topo do .woocommerce —
   garantir que ocupam linha inteira no grid */
body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-cart .woocommerce > .woocommerce-message,
body.woocommerce-cart .woocommerce > .woocommerce-error,
body.woocommerce-cart .woocommerce > .woocommerce-info {
    grid-column: 1 / -1;
}

/* O form .woocommerce-cart-form é o filho esquerdo;
   o .cart-collaterals é o filho direito (estilizado no Commit 2). */
body.woocommerce-cart .woocommerce-cart-form {
    min-width: 0;
}

/* ---- CART: tabela de produtos ---- */

body.woocommerce-cart .shop_table.cart {
    width: 100%;
    background: var(--fo-white);
    border: none !important;
    border-collapse: collapse;
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
    overflow: hidden;
    margin: 0;
}

body.woocommerce-cart .shop_table.cart thead th {
    padding: var(--fo-space-4) var(--fo-space-5);
    background: var(--fo-gray-50);
    color: var(--fo-gray-600);
    font-size: var(--fo-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    border-bottom: 1px solid var(--fo-gray-100);
}

body.woocommerce-cart .shop_table.cart tbody td {
    padding: 1rem 0.75rem;
    background: var(--fo-white);
    border: none;
    border-bottom: 1px solid var(--fo-gray-100);
    vertical-align: middle;
    color: var(--fo-gray-800);
}

body.woocommerce-cart .shop_table.cart tbody tr.cart_item:last-child td {
    border-bottom: none;
}

/* Coluna "Remover" — botão × discreto */
body.woocommerce-cart .shop_table.cart .product-remove {
    width: 48px;
    text-align: center;
    padding-left: var(--fo-space-3);
    padding-right: 0;
}

body.woocommerce-cart .shop_table.cart .product-remove .remove {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fo-gray-100);
    color: var(--fo-gray-500);
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    line-height: 1;
    transition: background var(--fo-transition), color var(--fo-transition);
}

body.woocommerce-cart .shop_table.cart .product-remove .remove:hover {
    background: var(--fo-red);
    color: var(--fo-white);
}

/* Coluna "Imagem" — 60x60 com border-radius */
body.woocommerce-cart .shop_table.cart .product-thumbnail {
    width: 80px;
}

body.woocommerce-cart .shop_table.cart .product-thumbnail a {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: var(--fo-radius-md);
    overflow: hidden;
    background: var(--fo-gray-50);
}

body.woocommerce-cart .shop_table.cart .product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    display: block;
}

/* Coluna "Produto" — nome em navy bold */
body.woocommerce-cart .shop_table.cart .product-name a {
    color: var(--fo-navy);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--fo-transition);
}

body.woocommerce-cart .shop_table.cart .product-name a:hover {
    color: var(--fo-red);
}

body.woocommerce-cart .shop_table.cart .product-name .variation,
body.woocommerce-cart .shop_table.cart .product-name dl {
    margin: var(--fo-space-1) 0 0;
    font-size: var(--fo-text-xs);
    color: var(--fo-gray-600);
}

/* Colunas "Preço" e "Subtotal" — vermelhas */
body.woocommerce-cart .shop_table.cart .product-price,
body.woocommerce-cart .shop_table.cart .product-subtotal {
    color: var(--fo-red);
    font-weight: 600;
}

body.woocommerce-cart .shop_table.cart .product-subtotal {
    font-weight: 700;
}

body.woocommerce-cart .shop_table.cart .amount {
    color: inherit;
}

/* Coluna "Quantidade" — input estilizado, botões +/- via JS partilhado
   com o single-product (initSingleProductQty) cobre também a class
   .quantity em body.single-product, mas no carrinho o body é
   .woocommerce-cart. O CSS abaixo garante aspecto decente mesmo sem JS;
   no Commit 5 do Lote 3 já tornámos o selector permissivo a single-product —
   aqui não há injecção, só estilo nativo. */
body.woocommerce-cart .shop_table.cart .product-quantity .quantity {
    display: inline-flex;
    align-items: center;
    height: 44px;
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-md);
    background: var(--fo-white);
    overflow: hidden;
}

body.woocommerce-cart .shop_table.cart .product-quantity .qty {
    width: 64px;
    height: 100%;
    padding: 0 var(--fo-space-3);
    border: none;
    background: transparent;
    color: var(--fo-navy);
    font-size: var(--fo-text-base);
    font-weight: 600;
    text-align: center;
}

/* Linha "Acções" — campo de cupão + botão actualizar */
body.woocommerce-cart .shop_table.cart td.actions {
    padding: var(--fo-space-5);
    background: var(--fo-gray-50);
    border-top: 1px solid var(--fo-gray-100);
    border-bottom: none !important;
}

/* Botão "Atualizar carrinho" — navy */
body.woocommerce-cart .shop_table.cart td.actions button[name="update_cart"],
body.woocommerce-cart .shop_table.cart td.actions input[name="update_cart"] {
    float: right;
    padding: var(--fo-space-3) var(--fo-space-5);
    background: var(--fo-navy);
    color: var(--fo-white);
    border: none;
    border-radius: var(--fo-radius-md);
    font-size: var(--fo-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--fo-transition), opacity var(--fo-transition);
}

body.woocommerce-cart .shop_table.cart td.actions button[name="update_cart"]:hover:not(:disabled) {
    background: var(--fo-navy-light);
}

body.woocommerce-cart .shop_table.cart td.actions button[name="update_cart"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- CART: campo de cupão (.coupon) ---- */

body.woocommerce-cart .shop_table.cart td.actions .coupon {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-md);
    overflow: hidden;
    float: left;
}

body.woocommerce-cart .shop_table.cart td.actions .coupon label {
    /* Label 'Cupão:' do WC — esconder visualmente mas manter acessível */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.woocommerce-cart .shop_table.cart td.actions .coupon input[type="text"],
body.woocommerce-cart .shop_table.cart td.actions .coupon input.input-text {
    width: 220px;
    padding: var(--fo-space-3) var(--fo-space-4);
    border: none;
    background: transparent;
    color: var(--fo-navy);
    font-size: var(--fo-text-sm);
    font-family: var(--fo-font-body);
}

body.woocommerce-cart .shop_table.cart td.actions .coupon input[type="text"]::placeholder {
    color: var(--fo-gray-400);
}

body.woocommerce-cart .shop_table.cart td.actions .coupon button,
body.woocommerce-cart .shop_table.cart td.actions .coupon input[type="submit"] {
    padding: var(--fo-space-3) var(--fo-space-4);
    background: var(--fo-gray-100);
    color: var(--fo-navy);
    border: none;
    border-left: 1px solid var(--fo-gray-200);
    font-size: var(--fo-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--fo-transition), color var(--fo-transition);
}

body.woocommerce-cart .shop_table.cart td.actions .coupon button:hover,
body.woocommerce-cart .shop_table.cart td.actions .coupon input[type="submit"]:hover {
    background: var(--fo-navy);
    color: var(--fo-white);
}

/* ---- CART: resumo (.cart-collaterals + .cart_totals) ---- */

body.woocommerce-cart .cart-collaterals {
    min-width: 0;
}

body.woocommerce-cart .cart-collaterals .cross-sells {
    display: none; /* esconde 'também pode gostar' aqui — opcional */
}

body.woocommerce-cart .cart_totals {
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    padding: var(--fo-space-6);
    box-shadow: var(--fo-shadow);
}

body.woocommerce-cart .cart_totals > h2 {
    margin: 0 0 var(--fo-space-5);
    padding-bottom: var(--fo-space-3);
    color: var(--fo-navy);
    font-size: var(--fo-text-xl);
    font-weight: 700;
    border-bottom: 1px solid var(--fo-gray-100);
}

/* Tabela de totais dentro do resumo (WC usa <table.shop_table>) */
body.woocommerce-cart .cart_totals table.shop_table {
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
    padding: var(--fo-space-3) 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--fo-gray-100);
    font-size: var(--fo-text-base);
    line-height: 1.5;
}

body.woocommerce-cart .cart_totals table.shop_table th {
    text-align: left;
    color: var(--fo-gray-700);
    font-weight: 500;
}

body.woocommerce-cart .cart_totals table.shop_table td {
    text-align: right;
    color: var(--fo-navy);
    font-weight: 600;
}

/* Subtotal + Total — linha 'order-total' destaque */
body.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
    padding-top: var(--fo-space-4);
    font-size: var(--fo-text-lg);
    font-weight: 700;
    border-bottom: none;
}

body.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
    color: var(--fo-red);
    font-weight: 800;
}

body.woocommerce-cart .cart_totals table.shop_table tr.order-total td .amount {
    font-size: 1.5rem;
}

/* Linha de envio dentro do resumo (.shipping) */
body.woocommerce-cart .cart_totals table.shop_table tr.shipping td {
    color: var(--fo-gray-700);
    font-weight: 500;
    text-align: right;
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-methods,
body.woocommerce-cart .cart_totals .shipping-calculator-form {
    text-align: left;
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li {
    list-style: none;
    margin: var(--fo-space-1) 0;
    color: var(--fo-gray-700);
    font-size: var(--fo-text-sm);
}

/* Botão "Finalizar encomenda" — full-width, vermelho, grande */
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
    margin-top: var(--fo-space-5);
    padding: 0;
}

body.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button,
body.woocommerce-cart .cart_totals a.checkout-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--fo-space-2);
    width: 100%;
    min-height: 56px;
    padding: var(--fo-space-4) var(--fo-space-5) !important;
    background: var(--fo-red) !important;
    color: var(--fo-white) !important;
    border: none !important;
    border-radius: var(--fo-radius-md) !important;
    font-family: var(--fo-font-body) !important;
    font-size: var(--fo-text-base) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.25);
    transition: background var(--fo-transition), transform var(--fo-transition), box-shadow var(--fo-transition) !important;
}

body.woocommerce-cart .cart_totals a.checkout-button:hover {
    background: var(--fo-red-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(230, 57, 70, 0.35);
}

/* Linha de ícones de pagamento abaixo do botão (texto stand-in se não
   houver SVGs disponíveis). Markup adicional injectado a partir de um
   filter no functions.php seria ideal — aqui só CSS para o caso de
   alguém adicionar via <p class="wc-payment-methods-info"> ou similar. */
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout::after {
    content: 'Visa  •  Mastercard  •  MB Way  •  Multibanco';
    display: block;
    margin-top: var(--fo-space-4);
    text-align: center;
    color: var(--fo-gray-500);
    font-size: var(--fo-text-xs);
    letter-spacing: 0.04em;
}

/* ---- CHECKOUT: container e layout 2 colunas ---- */

body.woocommerce-checkout .site-content,
body.woocommerce-checkout .entry-content {
    background: var(--fo-gray-50);
}

body.woocommerce-checkout .woocommerce {
    max-width: var(--fo-container);
    margin: 0 auto;
    padding: var(--fo-space-8) var(--fo-space-6);
}

body.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-8);
    align-items: start;
}

@media (min-width: 768px) {
    body.woocommerce-checkout form.checkout {
        grid-template-columns: 60fr 40fr;
        /* 2 linhas explícitas: sem isto o auto-placement punha o
           #order_review na linha 2 — DEBAIXO da altura toda do
           #customer_details — criando o "espaço morto gigante" entre as
           colunas (defeito nº 5 da 2.ª ronda de produção). */
        grid-template-rows: auto 1fr;
        gap: var(--fo-space-6) var(--fo-space-10);
    }

    body.woocommerce-checkout form.checkout > #customer_details {
        grid-column: 1;
        grid-row: 1 / 3; /* a esquerda atravessa as duas linhas */
    }
}

/* Notice messages WC ocupam linha cheia */
body.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-checkout form.checkout > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}

body.woocommerce-checkout #customer_details,
body.woocommerce-checkout form.checkout > #order_review_heading,
body.woocommerce-checkout form.checkout > #order_review {
    min-width: 0;
}

/* #customer_details vem como col-1/col-2 do WC (billing/shipping side by side
   em 2 cols internas). Forçar a stack vertical — o nosso layout já tem o
   review do lado direito; aqui a esquerda fica em 1 coluna interna. */
body.woocommerce-checkout #customer_details {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-8);
}

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    padding: var(--fo-space-6) !important;
    box-shadow: var(--fo-shadow);
}

/* ---- CHECKOUT: títulos das secções ---- */

body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout form.checkout h3 {
    margin: 0 0 var(--fo-space-5);
    padding-bottom: var(--fo-space-3);
    color: var(--fo-navy);
    font-size: var(--fo-text-xl);
    font-weight: 700;
    border-bottom: 1px solid var(--fo-gray-100);
}

/* ---- CHECKOUT: inputs e labels do formulário ---- */

body.woocommerce-checkout .form-row,
body.woocommerce-checkout .woocommerce-billing-fields .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row,
body.woocommerce-checkout .woocommerce-additional-fields .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-2);
    margin: 0 0 var(--fo-space-4);
    padding: 0;
    width: 100%;
}

/* Layout 2 cols para .form-row-first / .form-row-last (Nome/Apelido etc.) */
@media (min-width: 600px) {
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--fo-space-4);
    }

    body.woocommerce-checkout .form-row-wide,
    body.woocommerce-checkout .form-row[id^="billing_address_"],
    body.woocommerce-checkout .form-row#billing_email_field,
    body.woocommerce-checkout .form-row#billing_company_field,
    body.woocommerce-checkout .form-row#billing_country_field,
    body.woocommerce-checkout .form-row#shipping_address_1_field,
    body.woocommerce-checkout .form-row#shipping_address_2_field,
    body.woocommerce-checkout .form-row#shipping_country_field {
        grid-column: 1 / -1;
    }
}

/* Label acima do input */
body.woocommerce-checkout .form-row > label,
body.woocommerce-checkout .form-row label.checkbox {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--fo-navy);
    font-size: var(--fo-text-sm);
    font-weight: 600;
}

/* Asterisco vermelho para required */
body.woocommerce-checkout .form-row .required,
body.woocommerce-checkout abbr.required {
    color: var(--fo-red);
    text-decoration: none;
    border-bottom: none;
    margin-left: 2px;
}

body.woocommerce-checkout .form-row .optional {
    color: var(--fo-gray-500);
    font-weight: 400;
    margin-left: 4px;
    font-size: var(--fo-text-xs);
}

/* Inputs / textareas / selects do checkout */
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row .select2-selection--single {
    width: 100%;
    min-height: 48px;
    padding: var(--fo-space-3) var(--fo-space-4);
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-300);
    border-radius: var(--fo-radius-md);
    color: var(--fo-gray-800);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    line-height: 1.4;
    transition: border-color var(--fo-transition), box-shadow var(--fo-transition);
    box-shadow: none;
    outline: none;
}

body.woocommerce-checkout .form-row textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select2 (plugin que o WC usa para country/state dropdowns) */
body.woocommerce-checkout .form-row .select2-container .select2-selection--single {
    height: 48px;
    display: flex;
    align-items: center;
}

body.woocommerce-checkout .form-row .select2-container .select2-selection__rendered {
    padding: 0;
    line-height: 1.4;
    color: var(--fo-gray-800);
}

body.woocommerce-checkout .form-row .select2-container .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
    right: var(--fo-space-3);
}

/* Focus state — border navy + box-shadow azul subtil */
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .form-row .select2-container--focus .select2-selection--single,
body.woocommerce-checkout .form-row .select2-container--open .select2-selection--single {
    border-color: var(--fo-navy);
    box-shadow: 0 0 0 3px rgba(29, 53, 87, 0.12);
}

/* Erro de validação WC */
body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout .form-row.woocommerce-invalid textarea {
    border-color: var(--fo-red);
}

body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text:focus,
body.woocommerce-checkout .form-row.woocommerce-invalid select:focus {
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

/* Checkbox "Enviar para morada diferente" + "Criar conta" + cookies legais */
body.woocommerce-checkout .form-row .input-checkbox,
body.woocommerce-checkout #ship-to-different-address-checkbox,
body.woocommerce-checkout #createaccount {
    width: 18px;
    height: 18px;
    margin-right: var(--fo-space-2);
    accent-color: var(--fo-red);
    cursor: pointer;
    vertical-align: middle;
}

body.woocommerce-checkout #ship-to-different-address label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* "Notas da encomenda" textarea ocupa linha cheia */
body.woocommerce-checkout #order_comments_field {
    width: 100%;
}

/* ---- CHECKOUT: resumo (coluna direita) ---- */

/*
 * #order_review_heading e #order_review são irmãos do #customer_details no
 * grid principal. Aparecem na 2ª coluna (40fr) em >=768px. Combinámo-los num
 * único bloco visual via grid-column e display: contents para fluírem juntos.
 */
@media (min-width: 768px) {
    body.woocommerce-checkout #order_review_heading,
    body.woocommerce-checkout #order_review {
        grid-column: 2;
    }
	
	body.woocommerce-checkout #order_review {
        grid-row: 1; /* ao lado do form; sem isto o auto-placement punha-o na linha 2 */
    }
}

/* O <h3 id="order_review_heading"> do template é IRMÃO da caixa — era ele,
   sticky sozinho, que ficava colado ao topo com a caixa lá em baixo
   (defeito nº 3). Esconde-se; o mesmo título é impresso DENTRO da caixa
   pelo hook fo_checkout_review_title (inc/wc-checkout-classic.php), e a
   caixa passa a ser UM cartão coerente. */
body.woocommerce-checkout #order_review_heading {
    display: none;
}
/* NOTA: o posicionamento no grid (grid-column/grid-row) vive na media query
   >=768px acima — aqui fora estas propriedades criavam uma 2ª coluna
   IMPLÍCITA no grid de 1 coluna do mobile, espremendo form e resumo lado a
   lado em ecrãs pequenos (regressão da 4ª passagem, corrigida na 5ª). */
body.woocommerce-checkout #order_review {
    align-self: start;
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    padding: var(--fo-space-6);
    margin-top: 0;
    box-shadow: var(--fo-shadow);
}

body.woocommerce-checkout .fo-order-review-title {
    margin: 0 0 var(--fo-space-5);
    padding-bottom: var(--fo-space-3);
    color: var(--fo-navy);
    font-size: var(--fo-text-xl);
    font-weight: 700;
    border-bottom: 1px solid var(--fo-gray-100);
}

/* Sticky do BLOCO INTEIRO (título já vive lá dentro). SEM max-height nem
   overflow interno: a caixa cresce com o conteúdo — a barra de scroll
   própria cortava o Total ao meio (defeito nº 4). */
@media (min-width: 768px) {
    body.woocommerce-checkout #order_review {
        position: sticky;
        top: calc(80px + var(--fo-space-4));
    }
}

/* Tabela de produtos no resumo (.woocommerce-checkout-review-order-table) */
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 var(--fo-space-5);
    border-collapse: collapse;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
    display: none; /* esconde o th 'Produto' / 'Total' — visual mais clean */
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td {
    padding: var(--fo-space-3) 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--fo-gray-100);
    vertical-align: top;
    color: var(--fo-gray-800);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr:last-child td {
    border-bottom: none;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
    color: var(--fo-navy);
    font-weight: 600;
    font-size: var(--fo-text-sm);
    line-height: 1.5;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity {
    color: var(--fo-gray-600);
    font-weight: 500;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total .amount {
    color: var(--fo-navy);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr td {
    padding: var(--fo-space-3) 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--fo-gray-100);
    font-size: var(--fo-text-base);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr th {
    color: var(--fo-gray-700);
    font-weight: 500;
    text-align: left;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr td {
    color: var(--fo-navy);
    font-weight: 700;
    text-align: right;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    padding-top: var(--fo-space-4);
    font-size: var(--fo-text-lg);
    font-weight: 800;
    border-top: 2px solid var(--fo-gray-200);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    color: var(--fo-red);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td .amount {
    font-size: 1.5rem;
}

/* ---- CHECKOUT: métodos de pagamento (#payment) ---- */

body.woocommerce-checkout #payment {
    background: var(--fo-gray-50);
    border-radius: var(--fo-radius-md);
    padding: var(--fo-space-4);
    margin: var(--fo-space-5) 0 var(--fo-space-5);
    box-shadow: none;
}

body.woocommerce-checkout ul.payment_methods {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-2);
}

body.woocommerce-checkout ul.payment_methods > li {
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-md);
    /* padding retirado (3.ª passagem): o cartão do método é desenhado no
       assets/css/woocommerce.css, onde o padding vive no label clicável;
       aqui duplicava o espaçamento. */
    padding: 0;
    transition: border-color var(--fo-transition), background var(--fo-transition);
    list-style: none;
}

body.woocommerce-checkout ul.payment_methods > li:has(input[type="radio"]:checked) {
    /* Seleccionado = contorno NAVY (o vermelho é do CTA e do radio — um só
       acento de cor; estava vermelho + sombra rgba fora dos tokens). */
    border-color: var(--fo-navy);
    background: var(--fo-white);
    box-shadow: 0 0 0 1px var(--fo-navy);
}

body.woocommerce-checkout ul.payment_methods > li > input[type="radio"] {
    margin-right: var(--fo-space-3);
    accent-color: var(--fo-red);
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

body.woocommerce-checkout ul.payment_methods > li label {
    display: inline;
    color: var(--fo-navy);
    font-weight: 600;
    font-size: var(--fo-text-base);
    cursor: pointer;
    vertical-align: middle;
}

body.woocommerce-checkout ul.payment_methods > li img {
    max-height: 28px;
    width: auto;
    margin-left: var(--fo-space-3);
    vertical-align: middle;
}

/* Descrição que aparece debaixo do método quando seleccionado */
body.woocommerce-checkout ul.payment_methods .payment_box {
    margin: var(--fo-space-3) 0 0;
    padding: var(--fo-space-3);
    background: var(--fo-gray-50);
    border-radius: var(--fo-radius-sm);
    border: none;
    color: var(--fo-gray-700);
    font-size: var(--fo-text-sm);
    line-height: 1.6;
}

body.woocommerce-checkout ul.payment_methods .payment_box::before {
    /* WC default usa um triângulo apontando para cima ligando ao radio.
       Aqui escondemos para visual mais clean. */
    display: none;
}

body.woocommerce-checkout ul.payment_methods .payment_box p {
    margin: 0 0 var(--fo-space-2);
}

body.woocommerce-checkout ul.payment_methods .payment_box p:last-child {
    margin-bottom: 0;
}

/* Termos & condições antes do botão */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin: var(--fo-space-4) 0;
    color: var(--fo-gray-700);
    font-size: var(--fo-text-sm);
    line-height: 1.6;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a {
    color: var(--fo-red);
    text-decoration: underline;
}

/* Botão "Fazer encomenda" — full-width vermelho grande */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button#place_order {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--fo-space-2);
    width: 100%;
    min-height: 60px;
    padding: var(--fo-space-4) var(--fo-space-5) !important;
    background: var(--fo-red) !important;
    color: var(--fo-white) !important;
    border: none !important;
    border-radius: var(--fo-radius-md) !important;
    font-family: var(--fo-font-body) !important;
    font-size: var(--fo-text-lg) !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.25);
    transition: background var(--fo-transition), transform var(--fo-transition), box-shadow var(--fo-transition) !important;
    margin: var(--fo-space-4) 0 0 !important;
}

body.woocommerce-checkout #place_order:hover:not(:disabled) {
    background: var(--fo-red-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(230, 57, 70, 0.35);
}

body.woocommerce-checkout #place_order:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Mensagem de segurança abaixo do botão (texto puro — sem JS extra) */
body.woocommerce-checkout #order_review::after {
    content: '\1F512  Pagamento 100% seguro  \2022  Encriptação SSL';
    display: block;
    margin-top: var(--fo-space-4);
    padding: var(--fo-space-3);
    background: var(--fo-gray-50); /* estava um verde fora dos tokens */
    border-radius: var(--fo-radius-md);
    text-align: center;
    color: var(--fo-gray-700);
    font-size: var(--fo-text-xs);
    letter-spacing: 0.04em;
}

/* ---- REFINAMENTOS MOBILE + ESTADOS ---- */

/*
 * Cart: em mobile (<768px), a tabela 'responsive' do WC converte cada
 * <td> num bloco com pseudo-label da coluna. Estilizar para ficar legível.
 */
@media (max-width: 767px) {
    body.woocommerce-cart .shop_table.cart {
        border-radius: var(--fo-radius-lg);
    }

    body.woocommerce-cart .shop_table.cart thead {
        display: none;
    }

    body.woocommerce-cart .shop_table.cart tbody tr.cart_item {
        display: grid;
        grid-template-columns: 60px 1fr;
        gap: var(--fo-space-2) var(--fo-space-4);
        padding: var(--fo-space-4);
        border-bottom: 1px solid var(--fo-gray-100);
    }

    body.woocommerce-cart .shop_table.cart tbody tr.cart_item td {
        padding: 0;
        border: none;
        display: block;
    }

    /* Coluna 'Remover' alinhada com a thumbnail */
    body.woocommerce-cart .shop_table.cart .product-remove {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        width: auto;
        padding: 0;
    }

    /* Thumb à esquerda, span de 2 linhas */
    body.woocommerce-cart .shop_table.cart .product-thumbnail {
        grid-column: 1;
        grid-row: 2 / span 3;
        width: 60px;
        align-self: start;
    }

    /* Nome na 1ª linha à direita do remove */
    body.woocommerce-cart .shop_table.cart .product-name {
        grid-column: 2;
        grid-row: 1;
        padding-left: 0;
    }

    /* Preço, qty, subtotal stacked à direita */
    body.woocommerce-cart .shop_table.cart .product-price,
    body.woocommerce-cart .shop_table.cart .product-quantity,
    body.woocommerce-cart .shop_table.cart .product-subtotal {
        grid-column: 2;
    }

    /* WC responsive injecta data-title como pseudo-label antes do conteúdo */
    body.woocommerce-cart .shop_table.cart tbody td::before {
        content: attr(data-title) ': ';
        color: var(--fo-gray-500);
        font-size: var(--fo-text-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-right: var(--fo-space-2);
    }

    body.woocommerce-cart .shop_table.cart .product-name::before,
    body.woocommerce-cart .shop_table.cart .product-remove::before,
    body.woocommerce-cart .shop_table.cart .product-thumbnail::before {
        display: none;
    }

    /* Linha de actions em mobile: empilhar cupão + actualizar */
    body.woocommerce-cart .shop_table.cart td.actions {
        display: flex;
        flex-direction: column;
        gap: var(--fo-space-3);
        padding: var(--fo-space-4);
    }

    body.woocommerce-cart .shop_table.cart td.actions .coupon {
        width: 100%;
        float: none;
    }

    body.woocommerce-cart .shop_table.cart td.actions .coupon input[type="text"] {
        flex: 1;
        width: auto;
    }

    body.woocommerce-cart .shop_table.cart td.actions button[name="update_cart"] {
        float: none;
        width: 100%;
    }
}

/*
 * Checkout: em mobile (<600px), os pares de form-row colapsam para 1
 * coluna naturalmente (a grid 2 cols só activa em >=600px).
 *
 * Para tablet (600-767px): o layout principal continua em 1 coluna
 * (60/40 só >=768px) — review aparece abaixo do form, sem sticky.
 */
@media (max-width: 767px) {
    body.woocommerce-checkout #order_review_heading,
    body.woocommerce-checkout #order_review {
        position: static;
        max-height: none;
        overflow: visible;
    }

    body.woocommerce-checkout .woocommerce {
        padding: var(--fo-space-6) var(--fo-space-4);
    }

    body.woocommerce-cart .woocommerce {
        padding: var(--fo-space-6) var(--fo-space-4);
    }
}

/* ---- Estados disabled / loading do WC ---- */

/* Loading overlay que o WC adiciona durante AJAX (.blockUI / .processing) */
body.woocommerce-cart .blockUI.blockOverlay,
body.woocommerce-checkout .blockUI.blockOverlay {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(2px);
}

body.woocommerce-cart .processing,
body.woocommerce-checkout .processing {
    opacity: 0.6;
    pointer-events: none;
}

/* Spinner WC default — manter mas com cor red */
body.woocommerce-cart .loading::after,
body.woocommerce-checkout .loading::after {
    border-color: var(--fo-gray-200);
    border-top-color: var(--fo-red);
}

/* ---- Animações subtis ---- */

@keyframes fo-cart-row-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.woocommerce-cart .shop_table.cart tbody tr.cart_item {
    animation: fo-cart-row-in 0.25s ease;
}

/* Hover row no carrinho (desktop) — feedback visual subtil */
@media (min-width: 768px) {
    body.woocommerce-cart .shop_table.cart tbody tr.cart_item {
        transition: background var(--fo-transition);
    }
    body.woocommerce-cart .shop_table.cart tbody tr.cart_item:hover {
        background: var(--fo-gray-50);
    }
}

/* Animação do método pagamento ao seleccionar (descrição expande) */
body.woocommerce-checkout ul.payment_methods .payment_box {
    animation: fo-cart-row-in 0.2s ease;
}

/* Empty cart message — quando o carrinho está vazio o WC mostra
   .cart-empty antes do .return-to-shop. Estilizar para não parecer
   abandonado. */
body.woocommerce-cart .cart-empty {
    text-align: center;
    padding: var(--fo-space-12) var(--fo-space-6);
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
    color: var(--fo-gray-700);
    font-size: var(--fo-text-lg);
    margin: var(--fo-space-8) 0;
    grid-column: 1 / -1;
}

body.woocommerce-cart .return-to-shop {
    text-align: center;
    margin-top: var(--fo-space-6);
    grid-column: 1 / -1;
}

body.woocommerce-cart .return-to-shop .button {
    display: inline-block;
    padding: var(--fo-space-3) var(--fo-space-6);
    background: var(--fo-red);
    color: var(--fo-white);
    border-radius: var(--fo-radius-md);
    text-decoration: none;
    font-weight: 700;
    transition: background var(--fo-transition);
}

body.woocommerce-cart .return-to-shop .button:hover {
    background: var(--fo-red-dark);
}

/* ---- FIXES VISUAIS LOTE 4 ---- */

/*
 * #1 Título 'Carrinho' / 'Cart' herdava o h1 global do tema
 * (clamp 2rem -> --fo-text-5xl) e ficava gigante. Reset para tamanho
 * coerente com h2 das outras secções (1.6rem navy weight 700).
 */
.woocommerce-cart h1.entry-title,
.woocommerce-cart h1.page-title,
.woocommerce-cart h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: 1.5rem;
}

/*
 * #2 Botão 'Finalizar compra' garantidamente vermelho. O bloco principal
 * do Lote 4 já tinha estilos no .cart_totals a.checkout-button, mas com
 * selector mais aninhado — em casos onde o button está noutro contexto
 * (ex.: alguns plugins reorganizam o markup do resumo) podia não actuar.
 * Esta regra com selector mais permissivo apanha qualquer .checkout-button
 * dentro de .woocommerce-cart .wc-proceed-to-checkout.
 */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart a.checkout-button.button {
    display: block;
    width: 100%;
    padding: 1rem;
    background: var(--fo-red);
    color: var(--fo-white);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    margin-top: 1rem;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart a.checkout-button.button:hover {
    background: #b91c1c;
}

/*
 * #3 Card na coluna direita. O .cart_totals (filho do .cart-collaterals)
 * já tem o card visual no bloco principal. O WC default tem
 * .cart-collaterals .cart_totals { width: 48%; float: right } que pode
 * encolher o card para metade da coluna. Forçar width 100% + float none
 * para o card ocupar a coluna inteira.
 *
 * NOTA: não aplico card-styles a .cart-collaterals em si (seria card-in-
 * card visual). Mantém-se como wrapper estrutural.
 */
body.woocommerce-cart .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
}

/*
 * #4 Espaço vazio na tabela: alguns themes/extensões dão min-height ao
 * .woocommerce-cart-form ou .shop_table que cria espaço cinzento por
 * baixo das linhas. Reset.
 */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .woocommerce-cart-form__contents {
    min-height: unset;
}

/* ---- FIXES VISUAIS LOTE 4 (round 2) — overrides com !important ---- */

/*
 * Fix #1 (round 2): botão 'Finalizar compras' continuava a aparecer como
 * link de texto apesar das regras anteriores. O WC core e alguns plugins
 * declaram .button / .wc-forward / .checkout-button com selectors mais
 * específicos e !important — vence em cascade. Aqui usa-se !important
 * com selectors globais (sem prefixo de body) para garantir override em
 * qualquer contexto onde o botão apareça (cart, mini-cart widgets, etc.).
 */
a.checkout-button,
.wc-proceed-to-checkout a,
.checkout-button {
    display: block !important;
    background: var(--fo-red) !important;
    color: #fff !important;
    padding: 1rem 2rem !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-align: center !important;
    margin-top: 1rem !important;
}

a.checkout-button:hover,
.wc-proceed-to-checkout a:hover {
    background: #b91c1c !important;
    color: #fff !important;
}

/*
 * Fix #2 (round 2): espaço branco no fim da tabela. O reset do round 1
 * (sem !important) podia estar a ser sobreposto por min-height vindo
 * de outros estilos. Forçar com !important + remover height calculada.
 */
.woocommerce-cart-form__contents,
.woocommerce-cart-form,
table.woocommerce-cart-form__contents {
    min-height: unset !important;
    height: auto !important;
}

/*
 * Inverte a regra do Lote 4 que tirava o border da última linha
 * (.shop_table.cart tbody tr.cart_item:last-child td { border-bottom: none }).
 * Mantém border-bottom subtil em todas as linhas para a tabela não
 * 'cortar' visualmente sem definição, evitando a percepção de 'espaço
 * vazio' debaixo do último item.
 */
.woocommerce-cart-form table tr.cart_item:last-child td {
    border-bottom: 1px solid var(--fo-gray-200);
}

/* ---- FIXES VISUAIS LOTE 4 (round 3) — WooCommerce Cart Blocks ---- */

/*
 * Diagnóstico:
 *   A página /cart/ está a usar o WooCommerce Cart Block (Gutenberg)
 *   em vez do shortcode clássico [woocommerce_cart]. O block tem
 *   markup totalmente diferente: o botão 'Finalizar compras' usa
 *   classes WC Blocks (.wc-block-cart__submit-button,
 *   .wc-block-proceed-to-checkout-button, etc.) — não .checkout-button.
 *   Os rounds anteriores estilizavam apenas os selectors clássicos,
 *   pelo que o botão dos blocks ficava com o estilo default text-link.
 *
 *   O CSS empacotado pelo WC Blocks é carregado depois do nosso e tem
 *   especificidade alta. Selectors globais + !important garantem
 *   override.
 */

/* Botão 'Finalizar compras' / 'Proceed to checkout' nos Cart Blocks */
.wc-block-cart__submit-button,
.wc-block-proceed-to-checkout-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wc-block-cart .wc-block-components-button,
.wc-block-cart .wp-block-button__link,
.wc-block-cart__submit-container a,
.wc-block-cart__submit-container button {
    background: var(--fo-red) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 1rem 2rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-proceed-to-checkout-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wc-block-cart .wc-block-components-button:hover,
.wc-block-cart .wp-block-button__link:hover,
.wc-block-cart__submit-container a:hover,
.wc-block-cart__submit-container button:hover {
    background: #b91c1c !important;
    color: #fff !important;
}

/* Texto interno do botão dos blocks pode ter um <span> com
   .wc-block-components-button__text — garante herança de cor. */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-cart .wc-block-components-button__text {
    color: #fff !important;
}

/* Espaço branco — Cart Block tem .wc-block-cart, .wc-block-cart__main,
   .wp-block-woocommerce-cart com min-height próprio (algumas versões
   reservam viewport-height para o checkout fluído). Reset. */
.wc-block-cart,
.wc-block-cart__main,
.wc-block-cart__sidebar,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-empty-cart-block {
    min-height: unset !important;
    height: auto !important;
}

/* ============================================================================
   WOOCOMMERCE — MY ACCOUNT V2 (Lote 5)
   ----------------------------------------------------------------------------
   Aplica o design system --fo-* à página /minha-conta/. O WC renderiza via
   shortcode [woocommerce_my_account] com markup conhecido:
     body.woocommerce-account
     .woocommerce > .woocommerce-MyAccount-navigation  (esquerda)
                  > .woocommerce-MyAccount-content     (direita)
     items do nav: li.woocommerce-MyAccount-navigation-link--{dashboard|
                   orders|downloads|edit-address|edit-account|customer-logout}

   Coexiste com o bloco antigo (linhas 4594-4675) — selectors prefixados com
   body.woocommerce-account e source-order posterior garantem precedência.
   ============================================================================ */

/* ---- Container e layout 2 colunas ---- */

body.woocommerce-account .site-content,
body.woocommerce-account .entry-content {
    background: var(--fo-gray-50);
}

body.woocommerce-account .woocommerce {
    /*
     * Restrição: este grid 25/75 só faz sentido quando o utilizador
     * está logado (existe nav esquerda + conteúdo direita). Quando
     * deslogado, o .woocommerce contém só o #customer_login que deve
     * ocupar 100% do container — o grid pai entra em conflito.
     * Tornar a regra condicional via :not(.logged-out):not(:has(#customer_login)) —
     * mas :has() não é universalmente suportado em build pipelines;
     * mantém-se o display: grid aqui e o round 5 abaixo derruba-o
     * quando o body tem .logged-out ou :not(.logged-in).
     */
    max-width: var(--fo-container);
    margin: 0 auto;
    padding: var(--fo-space-8) var(--fo-space-6);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-8);
    align-items: start;
}

@media (min-width: 768px) {
    body.woocommerce-account .woocommerce {
        grid-template-columns: 25fr 75fr;
        gap: var(--fo-space-8);
    }
}

/* Notices ocupam linha cheia no grid */
body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-account .woocommerce > .woocommerce-message,
body.woocommerce-account .woocommerce > .woocommerce-error,
body.woocommerce-account .woocommerce > .woocommerce-info {
    grid-column: 1 / -1;
}

/* ---- Navegação esquerda (.woocommerce-MyAccount-navigation) ---- */

body.woocommerce-account .woocommerce-MyAccount-navigation {
    /* Override do float-based layout antigo */
    width: auto !important;
    float: none !important;
    margin-right: 0 !important;
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
    padding: var(--fo-space-6);
    min-width: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-1);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
    padding: var(--fo-space-3) var(--fo-space-4);
    background: transparent;
    color: var(--fo-gray-700);
    font-size: var(--fo-text-sm);
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    border-radius: var(--fo-radius-md);
    transition: background var(--fo-transition), color var(--fo-transition), border-color var(--fo-transition);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--fo-gray-50);
    color: var(--fo-navy);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: rgba(230, 57, 70, 0.08);
    color: var(--fo-navy);
    font-weight: 700;
    border-left-color: var(--fo-red);
    border-radius: 0 var(--fo-radius-md) var(--fo-radius-md) 0;
}

/* ---- Avatar no topo do nav (CSS-only — ícone user generico) ----
 * O WC não imprime avatar dentro de .woocommerce-MyAccount-navigation
 * por defeito. Aplicamos um avatar visual via ::before no <nav> em si
 * (não num li) — não interfere com markup do WC nem precisa de PHP.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation::before {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto var(--fo-space-3);
    border-radius: 50%;
    background-color: var(--fo-navy);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='%23ffffff' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
    box-shadow: 0 4px 12px rgba(29, 53, 87, 0.18);
}

/* ---- Ícones SVG nos items do nav (via ::before) ---- */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
    content: '';
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
    transition: opacity var(--fo-transition);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover::before {
    opacity: 1;
}

/* Painel (dashboard) — ícone home */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231D3557' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E");
}

/* Encomendas — ícone shopping bag */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231D3557' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 11V7a4 4 0 00-8 0v4M5 9h14l-1 12H6L5 9z'/%3E%3C/svg%3E");
}

/* Transferências — ícone download */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231D3557' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'/%3E%3C/svg%3E");
}

/* Endereços — ícone location pin */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231D3557' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E");
}

/* Métodos de pagamento — ícone credit card */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231D3557' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 10h18M5 6h14a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2z'/%3E%3C/svg%3E");
}

/* Detalhes da conta — ícone user-cog */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231D3557' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E");
}

/* Terminar sessão — ícone log-out (em red para destaque) */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23E63946' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1'/%3E%3C/svg%3E");
    opacity: 1;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--fo-red);
    margin-top: var(--fo-space-2);
    padding-top: var(--fo-space-4);
    border-top: 1px solid var(--fo-gray-100);
    border-radius: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: rgba(230, 57, 70, 0.08);
    color: var(--fo-red);
}

/* ---- Conteúdo direita (.woocommerce-MyAccount-content) ---- */

body.woocommerce-account .woocommerce-MyAccount-content {
    width: auto !important;
    float: none !important;
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
    padding: var(--fo-space-8);
    min-width: 0;
    color: var(--fo-gray-800);
    line-height: 1.7;
}

body.woocommerce-account .woocommerce-MyAccount-content > h2,
body.woocommerce-account .woocommerce-MyAccount-content > h3 {
    margin: 0 0 var(--fo-space-5);
    padding-bottom: var(--fo-space-3);
    color: var(--fo-navy);
    font-size: 1.2rem;
    font-weight: 700;
    border-bottom: 1px solid var(--fo-gray-200);
}

body.woocommerce-account .woocommerce-MyAccount-content p {
    margin: 0 0 var(--fo-space-4);
}

body.woocommerce-account .woocommerce-MyAccount-content a {
    color: var(--fo-red);
    text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content a:hover {
    text-decoration: underline;
}

/* ---- Dashboard (painel) ---- */

/*
 * O WC imprime parágrafos com 'Olá %s', links 'edit your account',
 * 'logout' etc. Container .woocommerce-MyAccount-content já estiliza
 * texto e <p>. Aqui adicionamos cards visuais nos links principais
 * via ::first-letter/text estilização — mas sem markup PHP custom,
 * a melhor opção é estilizar o <p> com strong dentro como destaque.
 */

body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
    padding: var(--fo-space-5) var(--fo-space-6);
    background: linear-gradient(135deg, rgba(29, 53, 87, 0.04) 0%, rgba(230, 57, 70, 0.04) 100%);
    border-radius: var(--fo-radius-md);
    margin-bottom: var(--fo-space-6);
    color: var(--fo-gray-800);
    font-size: var(--fo-text-base);
}

body.woocommerce-account .woocommerce-MyAccount-content > p strong {
    color: var(--fo-navy);
}

/* ---- Tabela de encomendas (.shop_table.my_account_orders) ---- */

body.woocommerce-account .shop_table.my_account_orders,
body.woocommerce-account table.my_account_orders {
    width: 100%;
    border: none !important;
    border-collapse: collapse;
    margin: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

body.woocommerce-account .shop_table.my_account_orders thead th {
    padding: var(--fo-space-3) var(--fo-space-4);
    background: var(--fo-gray-50);
    border: none;
    border-bottom: 1px solid var(--fo-gray-100);
    color: var(--fo-gray-600);
    font-size: var(--fo-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
}

body.woocommerce-account .shop_table.my_account_orders tbody td {
    padding: var(--fo-space-4);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--fo-gray-100);
    color: var(--fo-gray-800);
    font-size: var(--fo-text-sm);
    vertical-align: middle;
}

body.woocommerce-account .shop_table.my_account_orders tbody tr:last-child td {
    border-bottom: none;
}

body.woocommerce-account .shop_table.my_account_orders tbody tr:hover {
    background: var(--fo-gray-50);
}

body.woocommerce-account .shop_table.my_account_orders .woocommerce-orders-table__cell-order-number a {
    color: var(--fo-navy);
    font-weight: 700;
}

/* ---- Badges de estado de encomenda ---- */

/*
 * WC marca a TD com classe data-title="Status" e o conteúdo é uma
 * string traduzida. Para colorir os badges, usa-se a class
 * 'woocommerce-orders-table__cell-order-status' no <td> e dentro
 * costuma haver um <mark class="order-status status-{slug}">.
 *
 * Os slugs WC: status-pending / processing / on-hold / completed /
 * cancelled / refunded / failed.
 */

body.woocommerce-account .shop_table.my_account_orders .order-status,
body.woocommerce-account .shop_table.my_account_orders mark.order-status {
    display: inline-block;
    padding: var(--fo-space-1) var(--fo-space-3);
    border-radius: var(--fo-radius-full);
    background: var(--fo-gray-100);
    color: var(--fo-gray-700);
    font-size: var(--fo-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

/* Pendente / on-hold — cinza (default acima) ou amarelo subtil */
body.woocommerce-account .shop_table.my_account_orders mark.status-pending,
body.woocommerce-account .shop_table.my_account_orders mark.status-on-hold {
    background: rgba(255, 193, 7, 0.18);
    color: #8a6d00;
}

/* Processando — amarelo */
body.woocommerce-account .shop_table.my_account_orders mark.status-processing {
    background: rgba(255, 152, 0, 0.18);
    color: #b15600;
}

/* Concluído — verde */
body.woocommerce-account .shop_table.my_account_orders mark.status-completed {
    background: rgba(46, 204, 113, 0.18);
    color: #1f7a3a;
}

/* Cancelado / falhado — vermelho */
body.woocommerce-account .shop_table.my_account_orders mark.status-cancelled,
body.woocommerce-account .shop_table.my_account_orders mark.status-failed {
    background: rgba(230, 57, 70, 0.15);
    color: var(--fo-red);
}

/* Reembolsado — cinza escuro */
body.woocommerce-account .shop_table.my_account_orders mark.status-refunded {
    background: var(--fo-gray-200);
    color: var(--fo-gray-700);
}

/* ---- Botão 'Ver' / 'View' na coluna de actions ---- */

body.woocommerce-account .shop_table.my_account_orders .woocommerce-orders-table__cell-order-actions {
    text-align: right;
}

body.woocommerce-account .shop_table.my_account_orders .woocommerce-button,
body.woocommerce-account .shop_table.my_account_orders a.button {
    display: inline-flex;
    align-items: center;
    padding: var(--fo-space-2) var(--fo-space-4);
    background: var(--fo-navy);
    color: var(--fo-white);
    border: none;
    border-radius: var(--fo-radius-md);
    font-size: var(--fo-text-xs);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--fo-transition);
    margin: 0 0 0 var(--fo-space-2);
}

body.woocommerce-account .shop_table.my_account_orders .woocommerce-button:hover,
body.woocommerce-account .shop_table.my_account_orders a.button:hover {
    background: var(--fo-navy-light);
    text-decoration: none;
}

/* Botão 'Pagar' (orders pendentes) destacado em vermelho */
body.woocommerce-account .shop_table.my_account_orders .woocommerce-button.pay,
body.woocommerce-account .shop_table.my_account_orders a.button.pay {
    background: var(--fo-red);
}

body.woocommerce-account .shop_table.my_account_orders .woocommerce-button.pay:hover,
body.woocommerce-account .shop_table.my_account_orders a.button.pay:hover {
    background: var(--fo-red-dark);
}

/* ---- Estado 'sem encomendas' ---- */

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
    padding: var(--fo-space-4) var(--fo-space-5);
    background: var(--fo-gray-50);
    border: none;
    border-left: 3px solid var(--fo-red);
    border-radius: var(--fo-radius-md);
    color: var(--fo-gray-700);
    margin: 0 0 var(--fo-space-4);
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button {
    margin-left: var(--fo-space-3);
    padding: var(--fo-space-2) var(--fo-space-4);
    background: var(--fo-red);
    color: var(--fo-white);
    border-radius: var(--fo-radius-md);
    font-weight: 600;
    text-decoration: none;
}

/* ---- Formulários: editar endereço, detalhes da conta ----
 * Templates afectados:
 *   .woocommerce-EditAccountForm  (detalhes da conta — nome, email, password)
 *   .woocommerce-address-fields   (endereço de faturação / envio)
 *
 * O markup interno usa .form-row idêntico ao checkout, com .col2-set
 * para colunas. Diferente do checkout, aqui o .form-row pode estar
 * directamente em <p>, não em <div>.
 */

body.woocommerce-account .woocommerce-EditAccountForm,
body.woocommerce-account .woocommerce-address-fields__field-wrapper,
body.woocommerce-account form.edit-account,
body.woocommerce-account form.woocommerce-address-fields {
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-4);
}

/* Pares Nome/Apelido lado a lado em >=600px */
@media (min-width: 600px) {
    body.woocommerce-account .woocommerce-EditAccountForm,
    body.woocommerce-account .woocommerce-address-fields__field-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--fo-space-4);
        row-gap: var(--fo-space-4);
    }

    body.woocommerce-account .woocommerce-EditAccountForm .form-row-wide,
    body.woocommerce-account .woocommerce-EditAccountForm fieldset,
    body.woocommerce-account .woocommerce-EditAccountForm > p:not(.form-row),
    body.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide,
    body.woocommerce-account .woocommerce-address-fields__field-wrapper > p.form-row[id*="address_1"],
    body.woocommerce-account .woocommerce-address-fields__field-wrapper > p.form-row[id*="address_2"],
    body.woocommerce-account .woocommerce-address-fields__field-wrapper > p.form-row[id*="country"],
    body.woocommerce-account .woocommerce-address-fields__field-wrapper > p.form-row[id*="email"] {
        grid-column: 1 / -1;
    }
}

/* .form-row interno */
body.woocommerce-account .woocommerce-MyAccount-content .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-2);
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Labels acima dos inputs */
body.woocommerce-account .woocommerce-MyAccount-content .form-row > label {
    margin: 0;
    color: var(--fo-navy);
    font-size: var(--fo-text-sm);
    font-weight: 600;
}

body.woocommerce-account .woocommerce-MyAccount-content .form-row .required {
    color: var(--fo-red);
    text-decoration: none;
    border-bottom: none;
}

body.woocommerce-account .woocommerce-MyAccount-content .form-row .optional {
    color: var(--fo-gray-500);
    font-size: var(--fo-text-xs);
    font-weight: 400;
}

/* Inputs / textareas / selects */
body.woocommerce-account .woocommerce-MyAccount-content .form-row input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="text"],
body.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="email"],
body.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="tel"],
body.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="password"],
body.woocommerce-account .woocommerce-MyAccount-content .form-row textarea,
body.woocommerce-account .woocommerce-MyAccount-content .form-row select,
body.woocommerce-account .woocommerce-MyAccount-content .form-row .select2-selection--single {
    width: 100%;
    min-height: 44px;
    padding: var(--fo-space-3) var(--fo-space-4);
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-300);
    border-radius: 8px;
    color: var(--fo-gray-800);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    line-height: 1.4;
    transition: border-color var(--fo-transition), box-shadow var(--fo-transition);
    outline: none;
    box-shadow: none;
}

body.woocommerce-account .woocommerce-MyAccount-content .form-row textarea {
    min-height: 100px;
    resize: vertical;
}

body.woocommerce-account .woocommerce-MyAccount-content .form-row .select2-container .select2-selection--single {
    height: 44px;
    display: flex;
    align-items: center;
}

body.woocommerce-account .woocommerce-MyAccount-content .form-row .select2-container .select2-selection__rendered {
    padding: 0;
    color: var(--fo-gray-800);
    line-height: 1.4;
}

/* Focus state — border navy + ring subtil */
body.woocommerce-account .woocommerce-MyAccount-content .form-row input:focus,
body.woocommerce-account .woocommerce-MyAccount-content .form-row textarea:focus,
body.woocommerce-account .woocommerce-MyAccount-content .form-row select:focus,
body.woocommerce-account .woocommerce-MyAccount-content .form-row .select2-container--focus .select2-selection--single,
body.woocommerce-account .woocommerce-MyAccount-content .form-row .select2-container--open .select2-selection--single {
    border-color: var(--fo-navy);
    box-shadow: 0 0 0 3px rgba(29, 53, 87, 0.12);
}

/* Erro de validação */
body.woocommerce-account .woocommerce-MyAccount-content .form-row.woocommerce-invalid input,
body.woocommerce-account .woocommerce-MyAccount-content .form-row.woocommerce-invalid select,
body.woocommerce-account .woocommerce-MyAccount-content .form-row.woocommerce-invalid textarea {
    border-color: var(--fo-red);
}

/* <fieldset> usado para 'Alterar password' na edit-account */
body.woocommerce-account .woocommerce-MyAccount-content fieldset {
    margin: var(--fo-space-6) 0 0;
    padding: var(--fo-space-5);
    background: var(--fo-gray-50);
    border: none;
    border-radius: var(--fo-radius-md);
}

body.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
    padding: 0 var(--fo-space-2);
    color: var(--fo-navy);
    font-size: var(--fo-text-base);
    font-weight: 700;
}

/* ---- Botão 'Guardar alterações' / 'Save address' (.button) ---- */

body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"].button,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"].button,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"].woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content .form-row.form-row-wide button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--fo-space-4);
    padding: var(--fo-space-3) var(--fo-space-6);
    background: var(--fo-red);
    color: var(--fo-white);
    border: none;
    border-radius: var(--fo-radius-md);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--fo-transition), transform var(--fo-transition);
}

body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
    background: var(--fo-red-dark);
    transform: translateY(-1px);
}

/* ---- Lista de endereços (página /minha-conta/edit-address/) ---- */

body.woocommerce-account .woocommerce-Addresses,
body.woocommerce-account .u-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 600px) {
    body.woocommerce-account .woocommerce-Addresses,
    body.woocommerce-account .u-columns {
        grid-template-columns: 1fr 1fr;
    }
}

body.woocommerce-account .woocommerce-Address {
    background: var(--fo-gray-50);
    border-radius: var(--fo-radius-md);
    padding: var(--fo-space-5);
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

body.woocommerce-account .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fo-space-3);
    margin-bottom: var(--fo-space-3);
}

body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
    margin: 0;
    padding: 0;
    border: none;
    color: var(--fo-navy);
    font-size: var(--fo-text-base);
    font-weight: 700;
}

body.woocommerce-account .woocommerce-Address-title .edit {
    color: var(--fo-red);
    font-size: var(--fo-text-sm);
    font-weight: 600;
    text-decoration: none;
}

body.woocommerce-account .woocommerce-Address-title .edit:hover {
    text-decoration: underline;
}

body.woocommerce-account address {
    margin: 0;
    color: var(--fo-gray-700);
    font-size: var(--fo-text-sm);
    line-height: 1.7;
    font-style: normal;
}

/* ---- Página de login/registo (utilizador NÃO autenticado) ----
 * Quando o user visita /minha-conta/ sem sessão, o WC mostra:
 *   .u-columns.col2-set#customer_login
 *     .u-column1.col-1   > form.woocommerce-form.woocommerce-form-login.login
 *     .u-column2.col-2   > form.woocommerce-form.woocommerce-form-register.register
 *
 * Não há .woocommerce-MyAccount-navigation neste caso — o container
 * .woocommerce do shortcode passa de grid 25/75 para coluna única.
 * O #customer_login internamente cria as 2 colunas.
 */

/* Override do grid principal quando estamos no login (sem nav esquerda) */
body.woocommerce-account:not(.logged-in) .woocommerce {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    body.woocommerce-account:not(.logged-in) .woocommerce {
        max-width: 920px;
        grid-template-columns: 1fr;
    }
}

#customer_login {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-6);
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    #customer_login {
        grid-template-columns: 1fr 1fr;
        gap: var(--fo-space-8);
    }
}

#customer_login .u-column1,
#customer_login .u-column2 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cards de login e registo */
#customer_login form.woocommerce-form-login,
#customer_login form.woocommerce-form-register {
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
    padding: var(--fo-space-8);
    margin: 0;
    border: none;
}

#customer_login h2 {
    margin: 0 0 var(--fo-space-5);
    padding-bottom: var(--fo-space-3);
    color: var(--fo-navy);
    font-size: 1.4rem;
    font-weight: 700;
    border-bottom: 1px solid var(--fo-gray-200);
}

/* Inputs nos forms de login/registo */
#customer_login .form-row input.input-text,
#customer_login .form-row input[type="text"],
#customer_login .form-row input[type="email"],
#customer_login .form-row input[type="password"] {
    width: 100%;
    min-height: 44px;
    padding: var(--fo-space-3) var(--fo-space-4);
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-300);
    border-radius: 8px;
    color: var(--fo-gray-800);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    transition: border-color var(--fo-transition), box-shadow var(--fo-transition);
    outline: none;
}

#customer_login .form-row input:focus {
    border-color: var(--fo-navy);
    box-shadow: 0 0 0 3px rgba(29, 53, 87, 0.12);
}

#customer_login .form-row > label {
    color: var(--fo-navy);
    font-size: var(--fo-text-sm);
    font-weight: 600;
    margin-bottom: var(--fo-space-2);
    display: block;
}

#customer_login .form-row {
    margin-bottom: var(--fo-space-4);
}

/* Checkbox "Lembrar-me" */
#customer_login .form-row .woocommerce-form__label-for-checkbox,
#customer_login .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: var(--fo-space-2);
    cursor: pointer;
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-700);
}

#customer_login .form-row input[type="checkbox"],
#customer_login input.woocommerce-form__input-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--fo-red);
    cursor: pointer;
}

/* Botão "Iniciar sessão" — vermelho */
#customer_login form.woocommerce-form-login button[type="submit"],
#customer_login form.woocommerce-form-login button.woocommerce-Button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--fo-space-2);
    padding: var(--fo-space-3) var(--fo-space-6);
    background: var(--fo-red);
    color: var(--fo-white);
    border: none;
    border-radius: var(--fo-radius-md);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--fo-transition), transform var(--fo-transition);
}

#customer_login form.woocommerce-form-login button[type="submit"]:hover {
    background: var(--fo-red-dark);
    transform: translateY(-1px);
}

/* Botão "Registar" — navy outline */
#customer_login form.woocommerce-form-register button[type="submit"],
#customer_login form.woocommerce-form-register button.woocommerce-Button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--fo-space-2);
    padding: var(--fo-space-3) var(--fo-space-6);
    background: transparent;
    color: var(--fo-navy);
    border: 2px solid var(--fo-navy);
    border-radius: var(--fo-radius-md);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--fo-transition), color var(--fo-transition), transform var(--fo-transition);
}

#customer_login form.woocommerce-form-register button[type="submit"]:hover {
    background: var(--fo-navy);
    color: var(--fo-white);
    transform: translateY(-1px);
}

/* Link "Esqueceu-se da password?" */
#customer_login .lost_password {
    margin-top: var(--fo-space-3);
    text-align: right;
}

#customer_login .lost_password a {
    color: var(--fo-gray-600);
    font-size: var(--fo-text-sm);
    text-decoration: none;
}

#customer_login .lost_password a:hover {
    color: var(--fo-red);
    text-decoration: underline;
}

/* ---- Mobile (<768px) ---- */

@media (max-width: 767px) {
    body.woocommerce-account .woocommerce {
        padding: var(--fo-space-6) var(--fo-space-4);
        gap: var(--fo-space-5);
    }

    /* Nav passa a horizontal scroll em mobile — preserva a usability
       sem ocupar muita altura. */
    body.woocommerce-account .woocommerce-MyAccount-navigation {
        padding: var(--fo-space-4);
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation::before {
        width: 48px;
        height: 48px;
        background-size: 26px 26px;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: var(--fo-space-2);
        padding-bottom: var(--fo-space-2);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        white-space: nowrap;
        padding: var(--fo-space-3) var(--fo-space-4);
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: var(--fo-radius-md);
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
        border-left: none;
        border-bottom-color: var(--fo-red);
        border-radius: var(--fo-radius-md);
    }

    /* Logout separator em mobile — não há divider lateral, esconde a border-top */
    body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
        border-top: none;
        margin-top: 0;
        padding-top: var(--fo-space-3);
    }

    body.woocommerce-account .woocommerce-MyAccount-content {
        padding: var(--fo-space-6);
    }

    /* Tabela orders responsive em mobile */
    body.woocommerce-account .shop_table.my_account_orders thead {
        display: none;
    }

    body.woocommerce-account .shop_table.my_account_orders tbody tr {
        display: block;
        margin-bottom: var(--fo-space-4);
        padding: var(--fo-space-4);
        background: var(--fo-gray-50);
        border-radius: var(--fo-radius-md);
        border-bottom: none !important;
    }

    body.woocommerce-account .shop_table.my_account_orders tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--fo-space-3);
        padding: var(--fo-space-2) 0;
        border: none;
    }

    body.woocommerce-account .shop_table.my_account_orders tbody td::before {
        content: attr(data-title) ':';
        color: var(--fo-gray-500);
        font-size: var(--fo-text-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    body.woocommerce-account .shop_table.my_account_orders .woocommerce-orders-table__cell-order-actions {
        justify-content: flex-end;
        margin-top: var(--fo-space-2);
    }

    body.woocommerce-account .shop_table.my_account_orders .woocommerce-orders-table__cell-order-actions::before {
        display: none;
    }

    /* Login/Registo já é grid 1fr em mobile — sem overrides extras */
    #customer_login form.woocommerce-form-login,
    #customer_login form.woocommerce-form-register {
        padding: var(--fo-space-6);
    }
}

/* ---- FIXES VISUAIS LOTE 5 (round 2) ---- */

/*
 * Fix #1: bloco antigo neutralizado in-place (linhas ~4632-4661).
 * Os comentários no bloco antigo documentam o que foi neutralizado.
 *
 * Fix #2: título 'Minha conta' / 'My account' (h1.entry-title) herdava
 * o h1 global do tema (clamp 2rem -> --fo-text-5xl) e ficava gigante.
 * Mesmo padrão do fix do /cart/ (Lote 4 round 2).
 */
.woocommerce-account h1.entry-title,
.woocommerce-account h1.page-title,
.woocommerce-account h1 {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--fo-navy) !important;
    margin-bottom: var(--fo-space-6) !important;
}

/*
 * Fix #3: login/registo em 2 colunas. O Lote 5 (Commit 5) já faz isto
 * via #customer_login { grid 1fr 1fr em >=768px }. Mas se o body não
 * tiver a class .logged-in (depende do estado da sessão WC e pode
 * faltar em alguns setups), o fallback no #customer_login directo
 * cobre o caso. Adicionamos:
 *
 *   - Override no shortcode (#customer_login) com !important para vencer
 *     possíveis floats antigos do WC default.
 *   - Cobertura para o block .wc-block-customer-account se for usado
 *     (mais raro — é o ícone do header, mas alguns sites têm um
 *     'Account Block' na página /minha-conta/).
 */

/* Shortcode — força grid 2 cols no #customer_login em >=768px */
@media (min-width: 768px) {
    #customer_login,
    .woocommerce #customer_login,
    body.woocommerce-account #customer_login {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--fo-space-8) !important;
        align-items: start !important;
    }

    #customer_login .u-column1,
    #customer_login .u-column2,
    #customer_login > .col-1,
    #customer_login > .col-2 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Mobile: empilhar */
@media (max-width: 767px) {
    #customer_login,
    .woocommerce #customer_login {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--fo-space-6);
    }
}

/* Block alternative — se o site usar um Customer Account block */
@media (min-width: 768px) {
    .wc-block-customer-account {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--fo-space-8);
    }
}

/* ---- FIXES LOTE 5 (round 3) — força grid 2 cols com !important ----
 *
 * Diagnóstico: as regras dos rounds anteriores estavam correctas mas as
 * linhas 4620-4629 (CSS antigo) ainda aplicavam 'width: 25%; float: left'
 * directamente ao .woocommerce-MyAccount-navigation e 'width: 70%; float:
 * left' ao .woocommerce-MyAccount-content. Isto fazia com que os grid
 * items ficassem com 25%/70% da própria cell (em vez de 100%), criando
 * o sintoma 'nav e content microscópicos / empilhados'. As regras foram
 * agora REMOVIDAS no bloco antigo (acompanha este commit). Este round
 * reforça com !important conforme brief.
 *
 * Selectors usam body.logged-in (class WP standard para sessão activa) —
 * cobre também casos onde body.woocommerce-account possa não estar
 * presente (ex.: alguns plugins gerem /minha-conta/ via custom endpoint).
 */

/* Container principal — grid 260px 1fr em >=768px */
@media (min-width: 768px) {
    body.logged-in .woocommerce,
    body.logged-in.woocommerce-account .woocommerce {
        display: grid !important;
        grid-template-columns: 260px 1fr !important;
        gap: 2rem !important;
        align-items: start !important;
    }

    body.logged-in .woocommerce-MyAccount-navigation,
    body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation {
        grid-column: 1 !important;
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    body.logged-in .woocommerce-MyAccount-content,
    body.logged-in.woocommerce-account .woocommerce-MyAccount-content {
        grid-column: 2 !important;
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
}

/* Login/Registo — grid 1fr 1fr em >=768px (reforço com mais especificidade
 * e !important — fix anterior não estava a apanhar em alguns contextos). */

#customer_login,
body.woocommerce-account #customer_login {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    align-items: start !important;
}

@media (min-width: 768px) {
    #customer_login,
    body.woocommerce-account #customer_login {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }
}

#customer_login .u-column1,
#customer_login .u-column2,
#customer_login > .col-1,
#customer_login > .col-2,
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- FIXES LOTE 5 (round 4) — deslogado: sem grid no .woocommerce ----
 *
 * Diagnóstico: o .woocommerce tinha 'display: grid' base (linha 7628)
 * que continuava activo mesmo deslogado, com a override anterior
 * (':not(.logged-in)') só a mudar grid-template-columns para 1fr. Em
 * setups onde a class .logged-in pudesse falhar ou onde o WC Block
 * estivesse a renderizar markup diferente, isto criava sintomas:
 *   1. Coluna esquerda vazia (grid 25/75 aplicado quando não devia)
 *   2. #customer_login dentro de grid 1fr empilhado em vez de 2 cols
 *
 * Fix definitivo: deslogado, o .woocommerce passa a 'display: block'.
 * Apenas o #customer_login interno cria o grid 2 cols.
 */

body.woocommerce-account:not(.logged-in) .woocommerce,
body.logged-out.woocommerce-account .woocommerce {
    display: block !important;
    grid-template-columns: none !important;
    max-width: 920px;
    margin: 0 auto;
    padding: var(--fo-space-8) var(--fo-space-6);
}

@media (min-width: 768px) {
    body.woocommerce-account:not(.logged-in) .woocommerce,
    body.logged-out.woocommerce-account .woocommerce {
        max-width: 920px;
        padding: var(--fo-space-10) var(--fo-space-6);
    }
}

/* #customer_login — 2 cols absolutamente garantidas em >=768px.
 * Selectors com máxima especificidade + !important para vencer
 * qualquer regra anterior ou plugin. */

#customer_login,
body #customer_login,
body.woocommerce-account #customer_login,
.woocommerce #customer_login,
body .woocommerce #customer_login {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

@media (min-width: 768px) {
    #customer_login,
    body #customer_login,
    body.woocommerce-account #customer_login,
    .woocommerce #customer_login,
    body .woocommerce #customer_login {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }
}

/* Filhos directos do #customer_login — derrubar floats/widths antigos
 * com selectors máximos. Cobre tanto .u-column1/2 como .col-1/2 (alguns
 * plugins WC renomeiam). */

#customer_login > div,
#customer_login .u-column1,
#customer_login .u-column2,
#customer_login > .col-1,
#customer_login > .col-2,
body.woocommerce-account #customer_login > div,
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}

/* ---- FIXES LOTE 5 (round 5) — div.woocommerce + grid-template-areas unset ----
 *
 * Diagnóstico via DevTools (cliente): o round 4 com 'display: block !important'
 * em 'body.logged-out.woocommerce-account .woocommerce' ainda não estava a
 * vencer — alguma regra base com display: grid persistia.
 *
 * Reforço final:
 *   - Selectors com 'div.woocommerce' adicionam +1 element à specificity
 *     (vs '.woocommerce' das outras regras). Mantém-se compatível porque
 *     o .woocommerce é sempre um <div>.
 *   - 'grid-template-areas: unset' garante reset de qualquer area
 *     declarada por outra regra (defesa em profundidade).
 *   - 'gap: 0' para o caso de algum bottom margin do .woocommerce.
 */

body.woocommerce-account:not(.logged-in) .woocommerce,
body.logged-out.woocommerce-account .woocommerce,
body.woocommerce-account:not(.logged-in) div.woocommerce,
body.logged-out.woocommerce-account div.woocommerce {
    display: block !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
    grid-template-rows: unset !important;
    gap: 0 !important;
}

/* ---- FIXES LOTE 5 (round 6) — sidebar GeneratePress + #customer_login.col2-set ----
 *
 * Causas identificadas no HTML real (via DevTools):
 *
 * 1. O body em /minha-conta/ tem class 'right-sidebar' e o GeneratePress
 *    parent renderiza um <div class="widget-area sidebar is-right-sidebar">
 *    a ocupar uma fatia da largura. Isto encolhe o #primary/.content-area
 *    para ~70% e impede o #customer_login interno de ficar em 2 cols.
 *
 * 2. O #customer_login real tem a class adicional 'col2-set'
 *    (<form id="customer_login" class="col2-set">). Os rounds anteriores
 *    seleccionavam só por #id, sem a class — funcionou para grid, mas
 *    reforçar com '.col2-set' aumenta especificidade contra regras
 *    legacy do WC default que usam '.col2-set' para floats antigos.
 */

/* Esconder sidebar do GP nas páginas de conta */
.woocommerce-account .widget-area,
.woocommerce-account #right-sidebar,
.woocommerce-account .is-right-sidebar,
body.woocommerce-account .widget-area,
body.woocommerce-account aside.sidebar {
    display: none !important;
}

/* Conteúdo principal volta a ocupar 100% */
.woocommerce-account #primary,
.woocommerce-account .content-area,
body.woocommerce-account #primary,
body.woocommerce-account .content-area,
body.woocommerce-account .site-content > .inside-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
}

/* #customer_login.col2-set — 2 cols garantidas com a class WC default */
#customer_login.col2-set,
form#customer_login.col2-set,
body #customer_login.col2-set,
body.woocommerce-account #customer_login.col2-set {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    align-items: start !important;
}

@media (min-width: 768px) {
    #customer_login.col2-set,
    form#customer_login.col2-set,
    body #customer_login.col2-set,
    body.woocommerce-account #customer_login.col2-set {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }
}

#customer_login.col2-set .u-column1,
#customer_login.col2-set .u-column2,
form#customer_login.col2-set .u-column1,
form#customer_login.col2-set .u-column2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}

/* ============================================================================
   BLOCO D — FIX OVERFLOW MOBILE NO HERO
   ----------------------------------------------------------------------------
   Causa raiz: .fo-hero__form-wrapper e .fo-hero__form-card tinham
   min-width: 380px (linhas 3674, 3679). Em viewports < 428px o card
   transbordava o container (.fo-container, padding 24px) e o CSS Grid
   arrastava a coluna do texto (badge/H1/sub/botoes) para a direita,
   cortando o conteudo. A media query @max-width:767px existente so
   corrigia o wrapper; nao o card. Aqui faz-se o reset completo em mobile.
   ============================================================================ */

/* Defesa em profundidade: html tambem com overflow-x hidden (body ja tinha) */
html {
    overflow-x: hidden;
}

@media (max-width: 767px) {

    /* Reset min-width do form-card e wrapper: ocupam 100% do container. */
    .fo-hero__form-wrapper,
    .fo-hero__form-card {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    /* Grid: minmax(0, 1fr) impede que o min-content dos filhos
       force a coluna a ser maior que o viewport. */
    .fo-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fo-hero__content {
        max-width: 100%;
    }

    /* Garantir wrap correcto em palavras longas / URLs / hyphens */
    .fo-hero__title,
    .fo-hero__subtitle,
    .fo-hero__badge {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Hero badge: permitir wrap em strings longas tipo
       "Consultoria gratuita em telecomunicacoes" */
    .fo-hero__badge {
        flex-wrap: wrap;
        text-align: left;
    }
}

@media (max-width: 480px) {

    /* Phones <=480px: padding lateral mais apertado (16px),
       padding interno do form-card mais compacto. */
    .fo-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .fo-hero__form-card {
        padding: var(--fo-space-5);
    }
}

/* ============================================================================
   BLOCO E — FIX VISIBILIDADE SECÇÃO 4 (Princípios) DA HOMEPAGE
   ----------------------------------------------------------------------------
   Causa: a 2.ª definição de .fo-benefit (linha 2541) — adicionada para
   uma variante "card horizontal claro" — sobrepõe globalmente a 1.ª
   (linha 469, desenhada para .fo-section--dark). Como o markup da
   homepage usa apenas .fo-benefit + .fo-benefit__title + .fo-benefit__text
   (sem o wrapper .fo-benefit__content esperado pela 2.ª versão), em
   .fo-section--dark resulta:

   - Card fica BRANCO (.fo-benefit { background: var(--fo-white) }).
   - .fo-benefit__title é navy (regra 2583), MAS .fo-section--dark h4
     (regra 237, especificidade 0,1,1) sobrepõe e força branco -> texto
     branco em fundo branco do card -> INVISÍVEL.
   - .fo-benefit__text só está definido com cor branco/0.8 (regra 492),
     pois a 2.ª versão definiu .fo-benefit__description (nome diferente)
     -> texto branco em fundo branco -> INVISÍVEL.
   - .fo-benefit { display: flex } sem o wrapper .fo-benefit__content
     põe ícone+h4+p lado-a-lado. O <p>, sendo o último, é espremido
     numa coluna estreita à direita (sintoma "texto fora do card").

   Fix scoped por ID (#principios PT / #principles EN) na homepage, e
   por contexto .fo-section--dark .fo-benefit nas restantes 6 páginas
   (telecom/energia/segurança PT+EN). Especificidade (1,1,0) ou (0,2,0)
   > regra global h4 dentro de .fo-section--dark (0,1,1), sem afectar
   outros usos de .fo-benefit em fundos claros.
   ============================================================================ */

#principios .fo-benefit,
#principles .fo-benefit,
.fo-section--dark .fo-benefit {
    display: block;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    text-align: center;
    padding: var(--fo-space-6);
    transition: none;
}

#principios .fo-benefit:hover,
#principles .fo-benefit:hover,
.fo-section--dark .fo-benefit:hover {
    transform: none;
    box-shadow: none;
}

#principios .fo-benefit__icon,
#principles .fo-benefit__icon,
.fo-section--dark .fo-benefit__icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--fo-radius-lg);
    color: var(--fo-red);
    margin: 0 auto var(--fo-space-4);
    flex-shrink: 1;
}

#principios .fo-benefit__title,
#principles .fo-benefit__title,
.fo-section--dark .fo-benefit__title {
    color: var(--fo-white);
    font-size: var(--fo-text-xl);
    margin-bottom: var(--fo-space-3);
}

#principios .fo-benefit__text,
#principles .fo-benefit__text,
.fo-section--dark .fo-benefit__text {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fo-text-base);
    line-height: 1.7;
    margin: 0 auto;
    max-width: 320px;
}

/* ============================================================================
   FIX FINAL — /minha-conta/ deslogado, .woocommerce sem grid 260px
   ----------------------------------------------------------------------------
   Esta regra está no FIM do ficheiro deliberadamente — garante source-order
   máximo contra qualquer regra anterior que aplique display: grid /
   grid-template-columns: 260px 1fr ao .woocommerce em páginas de conta.

   3 selectors paralelos cobrem:
     A. body.woocommerce-account:not(.logged-in) — caso WP marca logged-out
        pela ausência da class .logged-in
     B. body.logged-out.woocommerce-account — caso WP marca explicitamente
        com .logged-out (default WP)
     C. body.woocommerce-account .woocommerce:has(#customer_login) — detecta
        a página de login pela presença do form #customer_login no DOM.
        Independente do body class — robusto a setups custom onde a flag
        de sessão possa estar ausente.

   :has() tem suporte ~2023+ (Chrome 105+, Safari 15.4+, Firefox 121+).
   Em browsers mais antigos cai-se nos 2 primeiros selectors A+B.
   ============================================================================ */

body.woocommerce-account:not(.logged-in) .woocommerce,
body.woocommerce-account:not(.logged-in) div.woocommerce,
body.logged-out.woocommerce-account .woocommerce,
body.logged-out.woocommerce-account div.woocommerce,
body.woocommerce-account .woocommerce:has(#customer_login),
body.woocommerce-account div.woocommerce:has(#customer_login) {
    display: block !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    grid-template-areas: unset !important;
    gap: 0 !important;
}

/* Remove pseudo-elements clearfix do WC default no #customer_login —
   criavam espaços fantasma / linhas vazias antes/depois do form. */
#customer_login::before,
#customer_login::after {
    display: none !important;
}
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  REDESIGN 2026 — CAMADA VISUAL PREMIUM                                    ║
   ║  Refinamento global: profundidade, micro-interações, animações e          ║
   ║  credibilidade. Colocada no FIM do ficheiro para ganhar source-order       ║
   ║  sobre todas as regras anteriores (excepto !important pontuais).          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ============================================================================
   R0. TOKENS REFINADOS
   ============================================================================ */

:root {
    /* Navy mais profundo e rico */
    --fo-navy: #16304F;
    --fo-navy-light: #23477A;
    --fo-navy-dark: #0A1628;

    /* Sombras em camadas (mais suaves e realistas) */
    --fo-shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.05), 0 1px 1px rgba(10, 22, 40, 0.03);
    --fo-shadow: 0 2px 4px rgba(10, 22, 40, 0.04), 0 4px 12px rgba(10, 22, 40, 0.06);
    --fo-shadow-md: 0 4px 8px rgba(10, 22, 40, 0.05), 0 8px 24px rgba(10, 22, 40, 0.08);
    --fo-shadow-lg: 0 8px 16px rgba(10, 22, 40, 0.06), 0 16px 40px rgba(10, 22, 40, 0.10);
    --fo-shadow-xl: 0 12px 24px rgba(10, 22, 40, 0.08), 0 24px 64px rgba(10, 22, 40, 0.14);
    --fo-shadow-red: 0 8px 24px rgba(230, 57, 70, 0.28), 0 2px 8px rgba(230, 57, 70, 0.18);
    --fo-shadow-hover: 0 12px 28px rgba(10, 22, 40, 0.10), 0 24px 56px rgba(10, 22, 40, 0.12);

    /* Gradientes refinados */
    --fo-gradient-red: linear-gradient(135deg, #FF5252 0%, #E63946 45%, #C62828 100%);
    --fo-gradient-navy: linear-gradient(150deg, #23477A 0%, #16304F 45%, #0A1628 100%);
    --fo-gradient-text: linear-gradient(120deg, #FF6B6B 0%, #E63946 60%, #D32F3F 100%);

    /* Superfícies vidro */
    --fo-glass-bg: rgba(255, 255, 255, 0.08);
    --fo-glass-border: rgba(255, 255, 255, 0.16);

    /* Anel de foco acessível */
    --fo-focus-ring: 0 0 0 3px rgba(230, 57, 70, 0.35);
}

/* ============================================================================
   R1. BASE — seleção, foco, scrollbar, rendering
   ============================================================================ */

::selection {
    background: var(--fo-red);
    color: var(--fo-white);
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: none;
    box-shadow: var(--fo-focus-ring);
}

html {
    scrollbar-color: var(--fo-gray-400) var(--fo-gray-100);
}

body {
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    letter-spacing: -0.02em;
}

/* Ritmo de secções mais generoso em desktop */
@media (min-width: 1025px) {
    .fo-section {
        padding: var(--fo-space-24) 0;
    }
}

/* ============================================================================
   R2. HEADER — vidro real, hairline gradiente, sublinhado animado
   ============================================================================ */

.fo-header {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-bottom: 1px solid rgba(22, 48, 79, 0.06);
}

.fo-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(230, 57, 70, 0.5) 50%, transparent 100%);
    opacity: 0;
    transition: opacity var(--fo-transition-slow);
    pointer-events: none;
}

.fo-header.scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 32px rgba(10, 22, 40, 0.08);
}

.fo-header.scrolled::after {
    opacity: 1;
}

.fo-header__logo-img {
    transition: transform var(--fo-transition);
}

.fo-header__logo:hover .fo-header__logo-img {
    transform: scale(1.04);
}

/* Sublinhado animado nos links de navegação */
.fo-nav__link {
    position: relative;
}

.fo-nav__link::after {
    content: '';
    position: absolute;
    left: var(--fo-space-4);
    right: var(--fo-space-4);
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--fo-gradient-red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--fo-transition);
}

.fo-nav__link:hover::after,
.fo-nav__link--active::after {
    transform: scaleX(1);
}

.fo-nav__link:hover {
    background: transparent;
}

/* Dropdown: mais polido, com "seta" e entrada suave */
.fo-nav__dropdown {
    min-width: 280px;
    padding: var(--fo-space-3);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-lg);
    box-shadow: var(--fo-shadow-xl);
    transform: translateY(14px) scale(0.98);
    transform-origin: top left;
}

.fo-nav__item:hover > .fo-nav__dropdown,
.fo-nav__item:focus-within > .fo-nav__dropdown {
    transform: translateY(8px) scale(1);
}

.fo-nav__dropdown::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 32px;
    width: 10px;
    height: 10px;
    background: var(--fo-white);
    border-left: 1px solid var(--fo-gray-200);
    border-top: 1px solid var(--fo-gray-200);
    transform: rotate(45deg);
}

.fo-nav__dropdown-link {
    border-radius: var(--fo-radius-md);
}

.fo-nav__dropdown-link:hover {
    background: var(--fo-gray-50);
    transform: translateX(3px);
}

.fo-nav__dropdown-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--fo-radius-md);
    transition: transform var(--fo-transition);
}

.fo-nav__dropdown-link:hover .fo-nav__dropdown-icon {
    transform: scale(1.08);
}

/* Badge do carrinho: pop quando actualiza */
.fo-header__cart-badge:not(:empty) {
    animation: foPop 0.35s var(--fo-ease-bounce);
}

/* ============================================================================
   R3. HERO — profundidade, brilhos radiais, form-card premium
   ============================================================================ */

.fo-hero--fullscreen {
    isolation: isolate;
}

/* Brilhos radiais decorativos por cima da imagem/gradiente inline */
.fo-hero--fullscreen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 45% 55% at 12% 88%, rgba(230, 57, 70, 0.32) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 88% 10%, rgba(35, 71, 122, 0.55) 0%, transparent 65%),
        radial-gradient(ellipse 100% 45% at 50% 100%, rgba(10, 22, 40, 0.55) 0%, transparent 70%);
}

.fo-hero__badge {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(10, 22, 40, 0.25);
}

.fo-hero__badge-dot {
    animation: foPulseDot 2s var(--fo-ease) infinite;
}

.fo-hero__title {
    text-shadow: 0 2px 24px rgba(10, 22, 40, 0.35);
}

/* Form card com barra de acento e vidro */
.fo-hero__form-card {
    border-radius: var(--fo-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 24px 64px rgba(10, 22, 40, 0.35), 0 8px 24px rgba(10, 22, 40, 0.2);
    position: relative;
    overflow: hidden;
}

.fo-hero__form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--fo-gradient-red);
    z-index: 1;
}

/* Inputs mais elegantes */
.fo-form__input,
.fo-form__select,
.fo-form__textarea {
    border-radius: var(--fo-radius-md);
    transition: border-color var(--fo-transition-fast), box-shadow var(--fo-transition-fast), background var(--fo-transition-fast);
}

.fo-form__input:hover,
.fo-form__select:hover,
.fo-form__textarea:hover {
    border-color: var(--fo-gray-400);
}

.fo-form__input:focus,
.fo-form__select:focus,
.fo-form__textarea:focus {
    border-color: var(--fo-red);
    box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.12);
    outline: none;
}

/* ============================================================================
   R4. BOTÕES — brilho varrido, nudge de ícone, estados apurados
   ============================================================================ */

.fo-btn {
    will-change: transform;
}

/* Varrimento de brilho no hover */
.fo-btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -75%;
    width: 50%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: none;
    pointer-events: none;
}

.fo-btn:hover::after {
    animation: foShine 0.85s var(--fo-ease);
}

/* Ícone (seta) desliza no hover */
.fo-btn svg {
    transition: transform var(--fo-transition);
}

.fo-btn:hover svg {
    transform: translateX(4px);
}

.fo-btn:active {
    transform: translateY(-1px) scale(0.98);
}

.fo-btn--primary {
    box-shadow: var(--fo-shadow-red);
}

.fo-btn--primary:hover {
    box-shadow: 0 12px 32px rgba(230, 57, 70, 0.4), 0 4px 12px rgba(230, 57, 70, 0.25);
}

/* Outline claro: preenche a partir de baixo */
.fo-btn--outline,
.fo-btn--outline-white {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ============================================================================
   R5. CABEÇALHOS DE SECÇÃO — overline em pill, subtítulo equilibrado
   ============================================================================ */

.fo-section__header {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: var(--fo-space-16);
}

.fo-section__header .fo-overline {
    display: inline-flex;
    align-items: center;
    gap: var(--fo-space-2);
    padding: var(--fo-space-2) var(--fo-space-5);
    background: var(--fo-telecom-light);
    border: 1px solid rgba(230, 57, 70, 0.18);
    border-radius: var(--fo-radius-full);
    margin-bottom: var(--fo-space-5);
}

.fo-section--dark .fo-section__header .fo-overline {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

.fo-section__title {
    margin-bottom: var(--fo-space-4);
}

.fo-section__subtitle {
    text-wrap: balance;
}

/* ============================================================================
   R6. CARDS DE SERVIÇO — borda crisp, lift, zoom de imagem, seta viva
   ============================================================================ */

.fo-card {
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
    overflow: hidden;
    transition: transform var(--fo-transition-slow), box-shadow var(--fo-transition-slow), border-color var(--fo-transition-slow);
}

.fo-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--fo-shadow-hover);
    border-color: var(--fo-gray-300);
}

.fo-card--service .fo-card__image {
    position: relative;
}

.fo-card--service .fo-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(10, 22, 40, 0.25) 100%);
    opacity: 0;
    transition: opacity var(--fo-transition-slow);
}

.fo-card--service:hover .fo-card__image::after {
    opacity: 1;
}

.fo-card--service .fo-card__image img {
    transition: transform 0.7s var(--fo-ease);
}

.fo-card--service:hover .fo-card__image img {
    transform: scale(1.07);
}

.fo-card__badge {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(10, 22, 40, 0.18);
}

.fo-card__icon {
    transition: transform var(--fo-transition-slow), box-shadow var(--fo-transition-slow);
}

.fo-card:hover .fo-card__icon {
    transform: translateY(-3px) rotate(-4deg) scale(1.06);
    box-shadow: var(--fo-shadow-md);
}

/* ============================================================================
   R7. STEPS — círculos gradiente com halo e linha de ligação
   ============================================================================ */

.fo-steps {
    position: relative;
    counter-reset: fo-step;
}

.fo-step {
    position: relative;
    padding: var(--fo-space-8);
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow-sm);
    transition: transform var(--fo-transition-slow), box-shadow var(--fo-transition-slow), border-color var(--fo-transition-slow);
}

.fo-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--fo-shadow-lg);
    border-color: rgba(230, 57, 70, 0.25);
}

.fo-step__number {
    background: var(--fo-gradient-red);
    color: var(--fo-white);
    box-shadow: 0 0 0 6px rgba(230, 57, 70, 0.12), var(--fo-shadow-red);
    transition: transform var(--fo-transition-slow), box-shadow var(--fo-transition-slow);
}

.fo-step:hover .fo-step__number {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(230, 57, 70, 0.10), var(--fo-shadow-red);
}

/* ============================================================================
   R8. SECÇÃO DARK / BENEFITS — cartões de vidro
   ============================================================================ */

.fo-section--dark {
    background: var(--fo-gradient-navy);
    position: relative;
    overflow: hidden;
}

.fo-section--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 40% 50% at 85% 15%, rgba(230, 57, 70, 0.14) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 10% 90%, rgba(35, 71, 122, 0.5) 0%, transparent 65%);
}

.fo-section--dark > * {
    position: relative;
}

#principios .fo-benefit,
#principles .fo-benefit,
.fo-section--dark .fo-benefit {
    background: var(--fo-glass-bg);
    border: 1px solid var(--fo-glass-border);
    border-radius: var(--fo-radius-xl);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--fo-space-10) var(--fo-space-8);
    transition: transform var(--fo-transition-slow), background var(--fo-transition-slow), border-color var(--fo-transition-slow), box-shadow var(--fo-transition-slow);
}

#principios .fo-benefit:hover,
#principles .fo-benefit:hover,
.fo-section--dark .fo-benefit:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

#principios .fo-benefit__icon,
#principles .fo-benefit__icon,
.fo-section--dark .fo-benefit__icon {
    background: rgba(230, 57, 70, 0.14);
    border: 1px solid rgba(230, 57, 70, 0.30);
    border-radius: var(--fo-radius-lg);
    transition: transform var(--fo-transition-slow), box-shadow var(--fo-transition-slow);
}

#principios .fo-benefit:hover .fo-benefit__icon,
#principles .fo-benefit:hover .fo-benefit__icon,
.fo-section--dark .fo-benefit:hover .fo-benefit__icon {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 8px 24px rgba(230, 57, 70, 0.25);
}

/* ============================================================================
   R9. PARCEIROS (trust strip) + BANDA DE NÚMEROS
   ============================================================================ */

.fo-partners {
    background: var(--fo-white);
    border-bottom: 1px solid var(--fo-gray-200);
    padding: var(--fo-space-8) 0;
}

.fo-partners__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fo-space-5);
}

.fo-partners__label {
    font-size: var(--fo-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fo-gray-500);
    margin: 0;
}

.fo-partners__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--fo-space-10);
}

.fo-partners__logo {
    height: 34px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(0.55);
    transition: filter var(--fo-transition-slow), transform var(--fo-transition-slow);
}

.fo-partners__logo:hover {
    filter: grayscale(0) opacity(1);
    transform: translateY(-2px) scale(1.05);
}

@media (min-width: 768px) {
    .fo-partners__inner {
        flex-direction: row;
        justify-content: space-between;
    }
    .fo-partners__logos {
        gap: var(--fo-space-12);
    }
    .fo-partners__logo {
        height: 40px;
    }
}

/* Banda de números / compromissos */
.fo-numbers {
    background: var(--fo-gray-50);
    border-bottom: 1px solid var(--fo-gray-200);
    padding: var(--fo-space-12) 0;
}

.fo-numbers__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fo-space-8);
}

@media (min-width: 768px) {
    .fo-numbers__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.fo-number {
    text-align: center;
    position: relative;
}

.fo-number + .fo-number::before {
    content: '';
    position: absolute;
    left: calc(var(--fo-space-4) * -1);
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: var(--fo-gray-200);
}

@media (max-width: 767px) {
    .fo-number:nth-child(odd)::before {
        display: none;
    }
}

.fo-number__value {
    display: block;
    font-family: var(--fo-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    background: var(--fo-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--fo-red);
    margin-bottom: var(--fo-space-2);
}

.fo-number__label {
    display: block;
    font-size: var(--fo-text-sm);
    font-weight: 500;
    color: var(--fo-gray-600);
    line-height: 1.5;
}

/* ============================================================================
   R10. CTA FINAL — brilho vivo e profundidade
   ============================================================================ */

.fo-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.fo-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 70% at 15% 20%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 55% 75% at 85% 85%, rgba(10, 22, 40, 0.30) 0%, transparent 60%);
}

.fo-cta__title {
    text-shadow: 0 2px 16px rgba(10, 22, 40, 0.25);
}

.fo-cta .fo-btn--white {
    box-shadow: 0 12px 32px rgba(10, 22, 40, 0.25);
}

/* ============================================================================
   R11. FOOTER — barra gradiente, links com seta
   ============================================================================ */

.fo-footer {
    position: relative;
}

.fo-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--fo-red) 0%, var(--fo-red-light) 35%, var(--fo-navy-light) 100%);
}

.fo-footer__links a {
    position: relative;
    padding-left: 0;
    transition: color var(--fo-transition), padding-left var(--fo-transition), transform var(--fo-transition);
}

.fo-footer__links a::before {
    content: '→';
    position: absolute;
    left: -4px;
    opacity: 0;
    color: var(--fo-red);
    transition: opacity var(--fo-transition), left var(--fo-transition);
}

.fo-footer__links a:hover {
    transform: none;
    padding-left: 18px;
    color: var(--fo-white);
}

.fo-footer__links a:hover::before {
    opacity: 1;
    left: 0;
}

.fo-footer__contact-icon {
    transition: background var(--fo-transition), transform var(--fo-transition);
}

.fo-footer__contact-item:hover .fo-footer__contact-icon {
    background: rgba(230, 57, 70, 0.22);
    transform: scale(1.08);
}

/* ============================================================================
   R12. LOJA (archive) — cards de produto premium
   ============================================================================ */

/* Hero da loja com brilhos */
.fo-shop__hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.fo-shop__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 45% 65% at 88% 20%, rgba(230, 57, 70, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 8% 90%, rgba(35, 71, 122, 0.45) 0%, transparent 65%);
    pointer-events: none;
}

/* Pills de categoria mais táteis */
.fo-shop__cat {
    transition: all var(--fo-transition);
}

.fo-shop__cat:hover {
    transform: translateY(-2px);
    box-shadow: var(--fo-shadow-sm);
}

.fo-shop__cat--active {
    box-shadow: var(--fo-shadow-red);
}

/* Grid de produtos: respiro em relação à toolbar (a regra base tem
   margin: 0 !important, por isso este espaçamento também precisa de !important) */
.fo-shop__main ul.products {
    margin-top: var(--fo-space-8) !important;
    margin-bottom: var(--fo-space-8) !important;
}

/* Card de produto: crisp + lift + zoom (transition/box-shadow com !important
   para vencer as regras base equivalentes que já usam !important) */
.fo-shop__main ul.products li.product {
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-xl) !important;
    box-shadow: var(--fo-shadow-sm) !important;
    overflow: hidden;
    transition: transform var(--fo-transition-slow), box-shadow var(--fo-transition-slow), border-color var(--fo-transition-slow) !important;
}

.fo-shop__main ul.products li.product:hover {
    transform: translateY(-6px);
    box-shadow: var(--fo-shadow-lg) !important;
    border-color: var(--fo-gray-300);
}

.fo-shop__main ul.products li.product .fo-product-card__media {
    background: linear-gradient(180deg, var(--fo-gray-50) 0%, var(--fo-gray-100) 100%);
}

.fo-shop__main ul.products li.product .fo-product-card__media img {
    transition: transform 0.6s var(--fo-ease);
}

.fo-shop__main ul.products li.product:hover .fo-product-card__media img {
    transform: scale(1.06);
}

/* Badge Promoção: pill gradiente */
.fo-shop__main ul.products li.product .onsale,
.fo-single-product .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    background: var(--fo-gradient-red);
    color: var(--fo-white);
    font-size: var(--fo-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 7px 12px;
    border-radius: var(--fo-radius-full);
    box-shadow: var(--fo-shadow-red);
    min-width: 0;
    min-height: 0;
}

/* Título do produto muda de cor no hover do card */
.fo-shop__main ul.products li.product .woocommerce-loop-product__title {
    transition: color var(--fo-transition);
}

.fo-shop__main ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--fo-red);
}

/* Botão adicionar ao carrinho: gradiente + shine */
.fo-shop__main ul.products li.product .button {
    position: relative;
    overflow: hidden;
    background: var(--fo-gradient-red);
    color: var(--fo-white);
    border: none;
    border-radius: var(--fo-radius-full);
    font-weight: 600;
    box-shadow: var(--fo-shadow-red);
    transition: transform var(--fo-transition), box-shadow var(--fo-transition);
}

.fo-shop__main ul.products li.product .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(230, 57, 70, 0.38);
    color: var(--fo-white);
}

.fo-shop__main ul.products li.product .button::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -75%;
    width: 50%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
}

.fo-shop__main ul.products li.product .button:hover::after {
    animation: foShine 0.85s var(--fo-ease);
}

/* Loading state do AJAX add-to-cart */
.fo-shop__main ul.products li.product .button.loading {
    opacity: 0.75;
    pointer-events: none;
}

/* Confirmação "ver carrinho" após adicionar */
.fo-shop__main ul.products li.product .added_to_cart {
    display: inline-block;
    margin-top: var(--fo-space-2);
    font-size: var(--fo-text-sm);
    font-weight: 600;
    color: var(--fo-energia);
}

/* Toolbar com sombra suave ao ficar sticky */
.fo-shop__toolbar {
    box-shadow: 0 4px 16px rgba(10, 22, 40, 0.04);
}

/* ============================================================================
   R13. PRODUTO INDIVIDUAL — galeria e resumo premium
   ============================================================================ */

.fo-single-product__gallery .woocommerce-product-gallery {
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-xl);
    overflow: hidden;
    box-shadow: var(--fo-shadow);
    background: var(--fo-white);
}

.fo-single-product__summary .price {
    font-family: var(--fo-font-heading);
    font-weight: 800;
}

.fo-single-product__summary .single_add_to_cart_button {
    position: relative;
    overflow: hidden;
    background: var(--fo-gradient-red);
    border-radius: var(--fo-radius-full);
    box-shadow: var(--fo-shadow-red);
    transition: transform var(--fo-transition), box-shadow var(--fo-transition);
}

.fo-single-product__summary .single_add_to_cart_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(230, 57, 70, 0.38);
}

/* Linha de confiança: chips */
.fo-single-product__trust li {
    transition: transform var(--fo-transition), color var(--fo-transition);
}

.fo-single-product__trust li:hover {
    transform: translateY(-2px);
    color: var(--fo-navy);
}

/* ============================================================================
   R14. BACK TO TOP
   ============================================================================ */

.fo-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fo-white);
    color: var(--fo-navy);
    border: 1px solid var(--fo-gray-200);
    border-radius: 50%;
    box-shadow: var(--fo-shadow-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--fo-transition), transform var(--fo-transition), visibility var(--fo-transition), background var(--fo-transition), color var(--fo-transition);
}

.fo-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fo-back-to-top:hover {
    background: var(--fo-red);
    color: var(--fo-white);
    border-color: var(--fo-red);
    transform: translateY(-3px);
}

/* ============================================================================
   R15. KEYFRAMES + ACESSIBILIDADE DE MOVIMENTO
   ============================================================================ */

@keyframes foShine {
    from { left: -75%; }
    to   { left: 125%; }
}

@keyframes foPop {
    0%   { transform: scale(0.6); }
    60%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@keyframes foPulseDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(0, 200, 83, 0); }
}

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

/* Respeitar utilizadores com movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .fo-animate {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================================
   R16. EXTRAS CRIATIVOS — barra de progresso e destaque gradiente no hero
   ============================================================================ */

/* Barra de progresso de leitura (injectada via JS) */
.fo-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 2000;
    background: transparent;
    pointer-events: none;
}

.fo-progress__bar {
    height: 100%;
    width: 0;
    background: var(--fo-gradient-red);
    box-shadow: 0 0 12px rgba(230, 57, 70, 0.5);
    transition: width 80ms linear;
}

/* Destaque do título do hero com gradiente animado (o inline color
   var(--fo-red) fica como fallback para browsers sem background-clip) */
.fo-hero__title span {
    background: linear-gradient(90deg, #FF6B6B 0%, #E63946 35%, #FF8A80 65%, #E63946 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: foGradientText 5s linear infinite;
}

@keyframes foGradientText {
    to { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
    .fo-hero__title span {
        animation: none;
    }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  FIBRA 2026 — IDENTIDADE VISUAL NOVA (camada drástica)                    ║
   ║                                                                            ║
   ║  Conceito: "luz a viajar em fibra". Casca escura (header, hero, bento,     ║
   ║  footer) com feixes de luz animados e brilhos, zonas claras para leitura,  ║
   ║  tipografia display Space Grotesk, bento grid, marquee de operadoras e     ║
   ║  cartões com glow que segue o cursor.                                      ║
   ║                                                                            ║
   ║  Fica no FIM do ficheiro: vence todas as camadas anteriores por            ║
   ║  source-order. Componentes antigos continuam a existir para as             ║
   ║  restantes páginas.                                                        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ============================================================================
   D0. TOKENS DA NOVA IDENTIDADE
   ============================================================================ */

:root {
    /* Tinta escura (fundo da casca) */
    --fo-ink: #05080F;
    --fo-ink-2: #0A1120;
    --fo-ink-3: #101B31;

    /* Texto sobre escuro */
    --fo-ice: #EDF2FB;
    --fo-ice-dim: rgba(237, 242, 251, 0.62);

    /* Acentos "luz na fibra" */
    --fo-laser: #FF4D5A;
    --fo-laser-deep: #E63946;
    --fo-photon: #37B6FF;
    --fo-lime: #38E8A0;

    /* Superfícies de vidro escuro */
    --fo-panel: rgba(255, 255, 255, 0.045);
    --fo-panel-2: rgba(255, 255, 255, 0.08);
    --fo-line: rgba(255, 255, 255, 0.10);
    --fo-line-2: rgba(255, 255, 255, 0.18);

    /* Tipografia display */
    --fo-font-display: 'Space Grotesk', 'Poppins', 'Inter', sans-serif;

    /* Gradientes da identidade */
    --fo-beam: linear-gradient(90deg, transparent, var(--fo-laser) 35%, #FF8A93 50%, var(--fo-laser) 65%, transparent);
    --fo-gradient-laser: linear-gradient(120deg, #FF4D5A 0%, #E63946 50%, #C62828 100%);
    --fo-gradient-ice: linear-gradient(120deg, #FFFFFF 0%, #C9D8F0 100%);
}

/* Headings do site inteiro passam para a display font */
h1, h2, h3, h4, h5, h6,
.fo-section__title,
.fo-hero__title,
.fo-cta__title,
.fo-page-hero__title,
.fo-shop__hero-title {
    font-family: var(--fo-font-display);
    letter-spacing: -0.03em;
}

/* ============================================================================
   D1. HEADER — casca escura de vidro
   ============================================================================ */

.fo-header {
    background: rgba(5, 8, 15, 0.72);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid var(--fo-line);
}

.fo-header.scrolled {
    background: rgba(5, 8, 15, 0.9);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.fo-header::after {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 77, 90, 0.7) 50%, transparent 100%);
}

.fo-nav__link {
    color: var(--fo-ice-dim);
}

.fo-nav__link:hover,
.fo-nav__link--active {
    color: var(--fo-ice);
    background: transparent;
}

.fo-nav__dropdown {
    background: var(--fo-ink-2);
    border-color: var(--fo-line-2);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.fo-nav__dropdown::before {
    background: var(--fo-ink-2);
    border-color: var(--fo-line-2);
}

.fo-nav__dropdown-link {
    color: var(--fo-ice-dim);
}

.fo-nav__dropdown-link:hover {
    background: var(--fo-panel-2);
    color: var(--fo-ice);
}

.fo-nav__dropdown-link strong {
    color: var(--fo-ice);
}

.fo-header__social-link {
    background: var(--fo-panel-2);
    color: var(--fo-ice);
}

.fo-header__shop-link {
    color: var(--fo-ice);
}

.fo-header__lang-link {
    opacity: 0.55;
    transition: opacity var(--fo-transition), transform var(--fo-transition);
}

.fo-header__lang-link.active,
.fo-header__lang-link:hover {
    opacity: 1;
}

.fo-menu-toggle span {
    background: var(--fo-ice);
}

/* Menu mobile escuro */
.fo-mobile-nav {
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(230, 57, 70, 0.18) 0%, transparent 60%),
        var(--fo-ink);
}

.fo-mobile-nav__link {
    color: var(--fo-ice);
}

.fo-mobile-nav__link:hover,
.fo-mobile-nav__link:active {
    color: var(--fo-laser);
    background: var(--fo-panel);
}

.fo-mobile-nav__link--sub {
    color: var(--fo-ice-dim);
}

.fo-mobile-nav__divider {
    background: var(--fo-line);
}

.fo-mobile-nav__close svg {
    stroke: var(--fo-ice);
}

.fo-mobile-nav__social a {
    color: var(--fo-ice);
}

/* ============================================================================
   D2. HERO 2026 — feixes de fibra, órbitas de luz, tipografia display
   ============================================================================ */

.fo-hero2 {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(80px + var(--fo-space-12)) 0 0;
    background: var(--fo-ink);
    color: var(--fo-ice);
    overflow: hidden;
    isolation: isolate;
}

/* Fundo: malha de pontos + órbitas + feixes */
.fo-hero2__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.fo-hero2__bg::before {
    /* malha de pontos subtil */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black 0%, transparent 75%);
}

.fo-hero2__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    animation: foOrbFloat 14s ease-in-out infinite;
}

.fo-hero2__orb--1 {
    width: 620px;
    height: 620px;
    left: -180px;
    top: -140px;
    background: radial-gradient(circle, rgba(230, 57, 70, 0.55) 0%, transparent 70%);
}

.fo-hero2__orb--2 {
    width: 540px;
    height: 540px;
    right: -160px;
    top: 10%;
    background: radial-gradient(circle, rgba(55, 182, 255, 0.32) 0%, transparent 70%);
    animation-delay: -5s;
}

.fo-hero2__orb--3 {
    width: 480px;
    height: 480px;
    left: 30%;
    bottom: -220px;
    background: radial-gradient(circle, rgba(230, 57, 70, 0.28) 0%, transparent 70%);
    animation-delay: -9s;
}

/* Feixes de luz: linhas finas com um pulso a viajar */
.fo-hero2__beam {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.fo-hero2__beam::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18%;
    background: var(--fo-beam);
    animation: foBeamTravel 5.5s linear infinite;
    opacity: 0.9;
}

.fo-hero2__beam--1 { top: 22%; transform: rotate(-4deg) scaleX(1.2); }
.fo-hero2__beam--2 { top: 54%; transform: rotate(3deg) scaleX(1.2); }
.fo-hero2__beam--2::after { animation-delay: -2.2s; animation-duration: 7s; background: linear-gradient(90deg, transparent, var(--fo-photon) 40%, #9BD9FF 50%, var(--fo-photon) 60%, transparent); }
.fo-hero2__beam--3 { top: 82%; transform: rotate(-2deg) scaleX(1.2); }
.fo-hero2__beam--3::after { animation-delay: -4s; animation-duration: 6.2s; }

/* Layout: copy + form */
.fo-hero2__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-12);
    align-items: center;
    padding-bottom: var(--fo-space-16);
}

@media (min-width: 1025px) {
    .fo-hero2__layout {
        grid-template-columns: 1.15fr 0.85fr;
        gap: var(--fo-space-16);
    }
}

.fo-hero2__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--fo-space-3);
    padding: var(--fo-space-2) var(--fo-space-5);
    border: 1px solid var(--fo-line-2);
    border-radius: var(--fo-radius-full);
    background: var(--fo-panel);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: var(--fo-text-sm);
    font-weight: 600;
    color: var(--fo-ice);
    margin-bottom: var(--fo-space-6);
}

.fo-hero2__eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fo-lime);
    animation: foPulseDot 2s var(--fo-ease) infinite;
}

.fo-hero2__title {
    font-family: var(--fo-font-display);
    font-size: clamp(2.6rem, 6.5vw, 5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--fo-ice);
    margin-bottom: var(--fo-space-6);
}

.fo-hero2__title em {
    font-style: normal;
    background: linear-gradient(90deg, #FF6B76 0%, var(--fo-laser) 40%, #FFB3B9 60%, var(--fo-laser) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: foGradientText 5s linear infinite;
}

.fo-hero2__lead {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.75;
    color: var(--fo-ice-dim);
    max-width: 34rem;
    margin-bottom: var(--fo-space-8);
}

.fo-hero2__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-4);
    margin-bottom: var(--fo-space-8);
}

/* Chips de confiança por baixo dos CTAs */
.fo-hero2__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.fo-hero2__chips li {
    display: inline-flex;
    align-items: center;
    gap: var(--fo-space-2);
    padding: var(--fo-space-2) var(--fo-space-4);
    border: 1px solid var(--fo-line);
    border-radius: var(--fo-radius-full);
    background: var(--fo-panel);
    font-size: var(--fo-text-sm);
    color: var(--fo-ice-dim);
}

.fo-hero2__chips svg {
    color: var(--fo-lime);
    flex-shrink: 0;
}

/* Cartão de formulário: vidro escuro com aresta de luz */
.fo-hero2__card {
    position: relative;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid var(--fo-line-2);
    border-radius: var(--fo-radius-xl);
    padding: var(--fo-space-8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.fo-hero2__card::before {
    /* aresta de luz no topo */
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    background: var(--fo-beam);
    background-size: 200% auto;
    animation: foGradientText 4s linear infinite;
}

.fo-hero2__card-title {
    font-family: var(--fo-font-display);
    font-size: var(--fo-text-2xl);
    font-weight: 700;
    color: var(--fo-ice);
    margin-bottom: var(--fo-space-1);
}

.fo-hero2__card-sub {
    font-size: var(--fo-text-sm);
    color: var(--fo-ice-dim);
    margin-bottom: var(--fo-space-6);
}

/* Formulário sobre escuro */
.fo-hero2__card .fo-form__label {
    color: var(--fo-ice);
    font-size: var(--fo-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.fo-hero2__card .fo-form__input {
    background: rgba(5, 8, 15, 0.55);
    border: 1px solid var(--fo-line-2);
    color: var(--fo-ice);
    border-radius: var(--fo-radius-md);
}

.fo-hero2__card .fo-form__input::placeholder {
    color: rgba(237, 242, 251, 0.35);
}

.fo-hero2__card .fo-form__input:hover {
    border-color: rgba(255, 255, 255, 0.32);
}

.fo-hero2__card .fo-form__input:focus {
    border-color: var(--fo-laser);
    box-shadow: 0 0 0 4px rgba(255, 77, 90, 0.18);
    background: rgba(5, 8, 15, 0.75);
}

.fo-hero2__card .fo-form__note {
    color: var(--fo-ice-dim);
}

.fo-hero2__card .fo-form__group {
    margin-bottom: var(--fo-space-4);
}

/* ============================================================================
   D3. MARQUEE DE OPERADORAS — banda de luz no fundo do hero
   ============================================================================ */

.fo-marquee {
    position: relative;
    border-top: 1px solid var(--fo-line);
    background: rgba(255, 255, 255, 0.02);
    padding: var(--fo-space-5) 0;
    overflow: hidden;
}

.fo-marquee__label {
    text-align: center;
    font-size: var(--fo-text-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(237, 242, 251, 0.45);
    margin: 0 0 var(--fo-space-4);
}

.fo-marquee__viewport {
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

.fo-marquee__track {
    display: flex;
    align-items: center;
    gap: var(--fo-space-16);
    padding-right: var(--fo-space-16);
    flex-shrink: 0;
    animation: foMarquee 30s linear infinite;
}

.fo-marquee:hover .fo-marquee__track {
    animation-play-state: paused;
}

.fo-marquee__item {
    font-family: var(--fo-font-display);
    font-size: var(--fo-text-xl);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(237, 242, 251, 0.38);
    white-space: nowrap;
    transition: color var(--fo-transition);
}

.fo-marquee__item:hover {
    color: var(--fo-ice);
}

.fo-marquee__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fo-laser);
    opacity: 0.6;
    flex-shrink: 0;
}

/* ============================================================================
   D4. BENTO GRID — "o que comparamos" em mosaico escuro
   ============================================================================ */

.fo-bento-section {
    background:
        radial-gradient(ellipse 60% 45% at 80% 0%, rgba(55, 182, 255, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 55% 40% at 10% 100%, rgba(230, 57, 70, 0.08) 0%, transparent 60%),
        var(--fo-ink);
    padding: var(--fo-space-24) 0;
    color: var(--fo-ice);
}

.fo-bento-section .fo-section__title {
    color: var(--fo-ice);
}

.fo-bento-section .fo-section__subtitle {
    color: var(--fo-ice-dim);
}

.fo-bento-section .fo-overline {
    background: var(--fo-panel);
    border-color: var(--fo-line-2);
    color: var(--fo-laser);
}

.fo-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-5);
}

@media (min-width: 768px) {
    .fo-bento {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "telecom telecom energia energia energia stat"
            "telecom telecom seguranca seguranca seguranca cta";
    }
    .fo-bento__card--telecom   { grid-area: telecom; }
    .fo-bento__card--energia   { grid-area: energia; }
    .fo-bento__card--seguranca { grid-area: seguranca; }
    .fo-bento__card--stat      { grid-area: stat; }
    .fo-bento__card--cta       { grid-area: cta; }
}

/* Cartão bento base: vidro escuro + glow que segue o cursor (JS: --mx/--my) */
.fo-bento__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-4);
    padding: var(--fo-space-8);
    background: var(--fo-panel);
    border: 1px solid var(--fo-line);
    border-radius: var(--fo-radius-xl);
    overflow: hidden;
    transition: transform var(--fo-transition-slow), border-color var(--fo-transition-slow), background var(--fo-transition-slow);
}

.fo-bento__card::before {
    /* glow radial que segue o cursor */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 77, 90, 0.14), transparent 65%);
    opacity: 0;
    transition: opacity var(--fo-transition-slow);
    pointer-events: none;
}

.fo-bento__card:hover {
    transform: translateY(-4px);
    border-color: var(--fo-line-2);
    background: var(--fo-panel-2);
}

.fo-bento__card:hover::before {
    opacity: 1;
}

.fo-bento__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fo-radius-lg);
    background: rgba(230, 57, 70, 0.14);
    border: 1px solid rgba(230, 57, 70, 0.35);
    color: var(--fo-laser);
    flex-shrink: 0;
}

.fo-bento__card--energia .fo-bento__icon {
    background: rgba(56, 232, 160, 0.10);
    border-color: rgba(56, 232, 160, 0.32);
    color: var(--fo-lime);
}

.fo-bento__card--seguranca .fo-bento__icon {
    background: rgba(55, 182, 255, 0.10);
    border-color: rgba(55, 182, 255, 0.32);
    color: var(--fo-photon);
}

.fo-bento__title {
    font-family: var(--fo-font-display);
    font-size: var(--fo-text-2xl);
    font-weight: 700;
    color: var(--fo-ice);
    margin: 0;
}

.fo-bento__text {
    font-size: var(--fo-text-base);
    line-height: 1.7;
    color: var(--fo-ice-dim);
    margin: 0;
}

.fo-bento__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-3);
}

.fo-bento__list li {
    display: flex;
    align-items: center;
    gap: var(--fo-space-3);
    font-size: var(--fo-text-sm);
    color: var(--fo-ice-dim);
}

.fo-bento__list svg {
    color: var(--fo-lime);
    flex-shrink: 0;
}

.fo-bento__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--fo-space-2);
    font-weight: 600;
    font-size: var(--fo-text-sm);
    color: var(--fo-ice);
}

.fo-bento__link svg {
    transition: transform var(--fo-transition);
}

.fo-bento__link:hover {
    color: var(--fo-laser);
}

.fo-bento__link:hover svg {
    transform: translateX(4px);
}

/* Cartão-estatística */
.fo-bento__card--stat {
    align-items: flex-start;
    justify-content: center;
}

.fo-bento__stat-value {
    font-family: var(--fo-font-display);
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    background: var(--fo-gradient-ice);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--fo-ice);
}

.fo-bento__stat-label {
    font-size: var(--fo-text-sm);
    color: var(--fo-ice-dim);
}

/* Cartão-CTA */
.fo-bento__card--cta {
    background: var(--fo-gradient-laser);
    border-color: transparent;
    justify-content: center;
    align-items: flex-start;
}

.fo-bento__card--cta::before {
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.22), transparent 65%);
}

.fo-bento__card--cta .fo-bento__title {
    font-size: var(--fo-text-xl);
}

.fo-bento__card--cta .fo-bento__link {
    color: var(--fo-white);
    font-size: var(--fo-text-base);
}

/* ============================================================================
   D5. TIMELINE "COMO FUNCIONA" — trilho de luz em fundo claro
   ============================================================================ */

.fo-timeline {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-10);
    counter-reset: fo-tl;
}

@media (min-width: 900px) {
    .fo-timeline {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--fo-space-8);
    }

    /* trilho contínuo por trás dos números */
    .fo-timeline::before {
        content: '';
        position: absolute;
        top: 32px;
        left: 8%;
        right: 8%;
        height: 2px;
        background: linear-gradient(90deg, var(--fo-laser) 0%, var(--fo-photon) 50%, var(--fo-lime) 100%);
        opacity: 0.35;
    }
}

.fo-timeline__item {
    position: relative;
    text-align: center;
    padding: 0 var(--fo-space-4);
}

.fo-timeline__num {
    counter-increment: fo-tl;
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--fo-space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fo-font-display);
    font-size: var(--fo-text-xl);
    font-weight: 700;
    color: var(--fo-white);
    background: var(--fo-gradient-laser);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(230, 57, 70, 0.10), 0 12px 32px rgba(230, 57, 70, 0.35);
    transition: transform var(--fo-transition-slow), box-shadow var(--fo-transition-slow);
}

.fo-timeline__num::after {
    content: counter(fo-tl);
}

.fo-timeline__item:nth-child(2) .fo-timeline__num {
    background: linear-gradient(120deg, #37B6FF 0%, #1D82C9 100%);
    box-shadow: 0 0 0 8px rgba(55, 182, 255, 0.10), 0 12px 32px rgba(55, 182, 255, 0.30);
}

.fo-timeline__item:nth-child(3) .fo-timeline__num {
    background: linear-gradient(120deg, #38E8A0 0%, #17A56A 100%);
    box-shadow: 0 0 0 8px rgba(56, 232, 160, 0.10), 0 12px 32px rgba(56, 232, 160, 0.30);
}

.fo-timeline__item:hover .fo-timeline__num {
    transform: scale(1.12) rotate(-4deg);
}

.fo-timeline__title {
    font-family: var(--fo-font-display);
    font-size: var(--fo-text-xl);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-3);
}

.fo-timeline__text {
    font-size: var(--fo-text-base);
    line-height: 1.7;
    color: var(--fo-gray-600);
    max-width: 300px;
    margin: 0 auto;
}

/* Secções claras ganham textura de pontos subtil */
.fo-section--dotted {
    background-image: radial-gradient(rgba(22, 48, 79, 0.06) 1px, transparent 1px);
    background-size: 26px 26px;
}

/* ============================================================================
   D6. NÚMEROS — display gigante
   ============================================================================ */

.fo-numbers {
    background: var(--fo-gray-50);
}

.fo-number__value {
    font-family: var(--fo-font-display);
    font-size: clamp(2.6rem, 5vw, 4rem);
    letter-spacing: -0.03em;
}

/* ============================================================================
   D7. PRINCÍPIOS — spotlight cards (glow segue o cursor também aqui)
   ============================================================================ */

#principios .fo-benefit,
#principles .fo-benefit,
.fo-section--dark .fo-benefit {
    position: relative;
    overflow: hidden;
    background: var(--fo-panel);
    border: 1px solid var(--fo-line);
}

#principios .fo-benefit::before,
#principles .fo-benefit::before,
.fo-section--dark .fo-benefit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 77, 90, 0.13), transparent 65%);
    opacity: 0;
    transition: opacity var(--fo-transition-slow);
    pointer-events: none;
}

#principios .fo-benefit:hover::before,
#principles .fo-benefit:hover::before,
.fo-section--dark .fo-benefit:hover::before {
    opacity: 1;
}

.fo-section--dark {
    background:
        radial-gradient(ellipse 50% 45% at 85% 10%, rgba(55, 182, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 10% 95%, rgba(230, 57, 70, 0.10) 0%, transparent 60%),
        var(--fo-ink);
}

/* ============================================================================
   D8. CTA FINAL — tipografia gigante sobre laser
   ============================================================================ */

.fo-cta__title {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
}

/* ============================================================================
   D9. FOOTER — continua a casca escura
   ============================================================================ */

.fo-footer {
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(230, 57, 70, 0.06) 0%, transparent 60%),
        var(--fo-ink);
}

.fo-footer::before {
    background: var(--fo-beam);
    background-size: 200% auto;
    animation: foGradientText 6s linear infinite;
}

/* ============================================================================
   D10. LOJA — hero escuro alinhado com a identidade
   ============================================================================ */

.fo-shop__hero {
    background:
        radial-gradient(ellipse 45% 65% at 88% 20%, rgba(230, 57, 70, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 8% 90%, rgba(55, 182, 255, 0.10) 0%, transparent 65%),
        var(--fo-ink);
}

/* ============================================================================
   D11. KEYFRAMES NOVOS + MOVIMENTO REDUZIDO
   ============================================================================ */

@keyframes foOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.06); }
    66%      { transform: translate(-30px, 24px) scale(0.97); }
}

@keyframes foBeamTravel {
    from { left: -20%; }
    to   { left: 120%; }
}

@keyframes foMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .fo-hero2__orb,
    .fo-hero2__beam::after,
    .fo-marquee__track,
    .fo-hero2__card::before,
    .fo-footer::before {
        animation: none !important;
    }
}

/* Skip-link: garantidamente invisível até receber foco (não depende do CSS
   do tema-pai), e elegante quando focado por teclado */
.skip-link.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: var(--fo-space-3) var(--fo-space-6);
    background: var(--fo-ink);
    color: var(--fo-ice);
    border-radius: 0 0 var(--fo-radius-md) 0;
    font-weight: 600;
}

.skip-link.screen-reader-text:focus {
    left: 0;
}

/* ============================================================================
   FIX — dropdown "Serviços" fechava ao mover o cursor para o submenu
   ----------------------------------------------------------------------------
   Causa: o estado aberto usa translateY(8px), criando um vazio de 8px entre
   o link e o dropdown. Ao atravessar esse vazio o cursor sai do .fo-nav__item
   e o :hover perde-se, fechando o submenu antes de lá chegar.

   Solução: "ponte" invisível (::after) colada ao topo do dropdown que cobre
   o vazio — como é descendente do item, mantém o :hover durante a travessia.
   Bónus: pequeno atraso no fecho (visibility) para tolerar saídas breves.
   ============================================================================ */

.fo-nav__dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
    background: transparent;
}

.fo-nav__dropdown {
    transition: opacity var(--fo-transition), transform var(--fo-transition), visibility 0s linear 0.18s;
}

.fo-nav__item:hover > .fo-nav__dropdown,
.fo-nav__item:focus-within > .fo-nav__dropdown {
    transition: opacity var(--fo-transition), transform var(--fo-transition), visibility 0s;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  FIBRA 2026 — RONDA 2: páginas GP, login/conta e Loja V3                  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ============================================================================
   G1. FIX GLOBAL — conteúdo escondido atrás do header fixo
   ----------------------------------------------------------------------------
   As páginas renderizadas pelos templates do tema-pai (minha-conta, carrinho,
   checkout, pesquisa, 404, posts) usam <div id="primary" class="content-area">
   e começavam no y=0, debaixo do header fixo de 80px. Os nossos templates
   custom usam class="site-main" e não são afectados.
   ============================================================================ */

#primary.content-area {
    padding-top: 80px;
}

#primary.content-area h1.entry-title,
#primary.content-area h1.page-title {
    font-family: var(--fo-font-display);
    letter-spacing: -0.03em;
}

/* ============================================================================
   G2. INPUTS WOOCOMMERCE — base moderna global (login, registo, checkout,
   moradas, recuperar senha)
   ============================================================================ */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
    width: 100%;
    padding: 13px 16px;
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-300);
    border-radius: var(--fo-radius-md);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    color: var(--fo-gray-900);
    transition: border-color var(--fo-transition-fast), box-shadow var(--fo-transition-fast);
}

.woocommerce form .form-row input.input-text:hover,
.woocommerce form .form-row textarea:hover,
.woocommerce form .form-row select:hover {
    border-color: var(--fo-gray-400);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--fo-laser-deep);
    box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.12);
}

.woocommerce form .form-row label {
    font-weight: 600;
    font-size: var(--fo-text-sm);
    color: var(--fo-navy);
    margin-bottom: 6px;
}

/* ============================================================================
   G3. MINHA CONTA — LOGIN / REGISTO (deslogado)
   ----------------------------------------------------------------------------
   Banda escura da identidade no topo (é o .entry-header do template GP,
   full-bleed porque o nosso header custom não abre .grid-container) e os
   dois cartões a flutuar sobre ela.
   ============================================================================ */

body.woocommerce-account:not(.logged-in) #primary.content-area {
    padding-top: 0;
    background: var(--fo-gray-50);
}

body.woocommerce-account:not(.logged-in) .entry-header {
    background:
        radial-gradient(ellipse 45% 70% at 85% 20%, rgba(230, 57, 70, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 75% at 10% 85%, rgba(55, 182, 255, 0.10) 0%, transparent 65%),
        var(--fo-ink);
    padding: calc(80px + var(--fo-space-16)) var(--fo-space-6) calc(var(--fo-space-16) + 72px);
    text-align: center;
    margin: 0;
}

body.woocommerce-account:not(.logged-in) .entry-header h1.entry-title {
    color: var(--fo-ice);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    margin: 0;
}

/* Subtítulo injectado via CSS (o template GP não tem slot para ele) */
body.woocommerce-account:not(.logged-in) .entry-header h1.entry-title::after {
    content: 'Aceda às suas encomendas, moradas e dados — ou crie conta em segundos.';
    display: block;
    margin-top: var(--fo-space-4);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-lg);
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(237, 242, 251, 0.65);
}

html[lang^="en"] body.woocommerce-account:not(.logged-in) .entry-header h1.entry-title::after {
    content: 'Access your orders, addresses and details — or create an account in seconds.';
}

body.woocommerce-account:not(.logged-in) .woocommerce {
    display: block;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--fo-space-6) var(--fo-space-24);
}

/* Grid dos dois cartões, puxados para cima sobre a banda escura */
#customer_login {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-6);
    margin-top: -72px;
}

@media (min-width: 860px) {
    #customer_login {
        grid-template-columns: 1fr 1fr;
        gap: var(--fo-space-8);
    }
}

#customer_login .u-column1,
#customer_login .u-column2 {
    position: relative;
    width: 100%;
    max-width: none;
    float: none;
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow-xl);
    padding: var(--fo-space-10) var(--fo-space-8);
    overflow: hidden;
}

/* Aresta de luz no topo dos cartões */
#customer_login .u-column1::before,
#customer_login .u-column2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--fo-beam);
    background-size: 200% auto;
    animation: foGradientText 5s linear infinite;
}

#customer_login .u-column2::before {
    background: linear-gradient(90deg, transparent, var(--fo-photon) 35%, #9BD9FF 50%, var(--fo-photon) 65%, transparent);
    background-size: 200% auto;
}

#customer_login h2 {
    font-family: var(--fo-font-display);
    font-size: var(--fo-text-2xl);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-6);
    padding: 0;
    border: none;
}

#customer_login form.login,
#customer_login form.register {
    border: none;
    padding: 0;
    margin: 0;
}

/* Botões: entrar = laser, registar = outline navy */
#customer_login button.woocommerce-form-login__submit,
#customer_login button.woocommerce-form-register__submit,
.woocommerce-ResetPassword button.woocommerce-Button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 24px;
    border: none;
    border-radius: var(--fo-radius-full);
    font-family: var(--fo-font-body);
    font-size: var(--fo-text-base);
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--fo-transition), box-shadow var(--fo-transition), background var(--fo-transition), color var(--fo-transition);
}

#customer_login button.woocommerce-form-login__submit,
.woocommerce-ResetPassword button.woocommerce-Button {
    background: var(--fo-gradient-laser);
    color: var(--fo-white);
    box-shadow: var(--fo-shadow-red);
}

#customer_login button.woocommerce-form-login__submit:hover,
.woocommerce-ResetPassword button.woocommerce-Button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(230, 57, 70, 0.38);
    color: var(--fo-white);
}

#customer_login button.woocommerce-form-register__submit {
    background: transparent;
    color: var(--fo-navy);
    border: 2px solid var(--fo-navy);
}

#customer_login button.woocommerce-form-register__submit:hover {
    background: var(--fo-navy);
    color: var(--fo-white);
    transform: translateY(-2px);
}

/* Manter sessão + perdeu a senha */
#customer_login .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: var(--fo-space-2);
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-700);
    margin-bottom: var(--fo-space-4);
}

#customer_login .lost_password {
    text-align: center;
    margin: var(--fo-space-4) 0 0;
    font-size: var(--fo-text-sm);
}

#customer_login .lost_password a {
    color: var(--fo-gray-600);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#customer_login .lost_password a:hover {
    color: var(--fo-laser-deep);
}

/* Nota de privacidade do registo */
#customer_login .woocommerce-privacy-policy-text p {
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-600);
    line-height: 1.7;
}

/* ============================================================================
   G4. LOGIN SOCIAL — integração visual de plugins (Nextend & afins)
   ----------------------------------------------------------------------------
   Cobre os contentores mais comuns: .nsl-container (Nextend Social Login),
   .social-login, #social-login. Divisor "ou" + botões full-width arredondados.
   ============================================================================ */

#customer_login .nsl-container,
.woocommerce form .nsl-container,
#customer_login .social-login {
    margin-top: var(--fo-space-6);
    padding-top: var(--fo-space-6);
    position: relative;
}

#customer_login .nsl-container::before,
#customer_login .social-login::before {
    content: 'ou continuar com';
    position: absolute;
    top: -0.65em;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fo-white);
    padding: 0 var(--fo-space-4);
    font-size: var(--fo-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fo-gray-500);
    white-space: nowrap;
}

html[lang^="en"] #customer_login .nsl-container::before,
html[lang^="en"] #customer_login .social-login::before {
    content: 'or continue with';
}

#customer_login .nsl-container {
    border-top: 1px solid var(--fo-gray-200);
}

#customer_login .nsl-container .nsl-button {
    border-radius: var(--fo-radius-full) !important;
    box-shadow: var(--fo-shadow-sm) !important;
    transition: transform var(--fo-transition), box-shadow var(--fo-transition);
}

#customer_login .nsl-container .nsl-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--fo-shadow-md) !important;
}

/* ============================================================================
   G5. MINHA CONTA — ÁREA LOGADA (dashboard)
   ============================================================================ */

body.woocommerce-account.logged-in .entry-header {
    background:
        radial-gradient(ellipse 45% 70% at 85% 20%, rgba(230, 57, 70, 0.18) 0%, transparent 60%),
        var(--fo-ink);
    padding: calc(80px + var(--fo-space-12)) var(--fo-space-6) var(--fo-space-12);
    text-align: center;
    margin: 0;
}

body.woocommerce-account.logged-in .entry-header h1.entry-title {
    color: var(--fo-ice);
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: 0;
}

body.woocommerce-account.logged-in #primary.content-area {
    padding-top: 0;
    background: var(--fo-gray-50);
}

/* Navegação lateral em cartão */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
    padding: var(--fo-space-4);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-1);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    border: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--fo-space-3) var(--fo-space-4);
    border-radius: var(--fo-radius-md);
    font-weight: 600;
    font-size: var(--fo-text-sm);
    color: var(--fo-gray-700);
    transition: background var(--fo-transition-fast), color var(--fo-transition-fast), transform var(--fo-transition-fast);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--fo-gray-100);
    color: var(--fo-navy);
    transform: translateX(3px);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--fo-gradient-laser);
    color: var(--fo-white);
    box-shadow: var(--fo-shadow-red);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--fo-laser-deep);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: var(--fo-telecom-light);
}

/* Conteúdo em cartão */
body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
    padding: var(--fo-space-10) var(--fo-space-8);
}

body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-family: var(--fo-font-display);
    color: var(--fo-navy);
}

/* ============================================================================
   G6. LOJA V3 — hero com feixes, categorias na casca escura, cards refinados
   ============================================================================ */

/* Hero maior; os feixes/órbitas entram por markup (.fo-hero2__bg reutilizado) */
.fo-shop__hero {
    padding: calc(80px + var(--fo-space-16)) 0 var(--fo-space-12);
    isolation: isolate;
}

.fo-shop__hero .fo-hero2__bg {
    z-index: -1;
}

.fo-shop__hero-title {
    font-size: clamp(2.6rem, 5.5vw, 4rem);
    color: var(--fo-ice);
}

.fo-shop__hero-subtitle {
    color: rgba(237, 242, 251, 0.65);
}

/* Categorias: continuação da casca escura, pills de vidro */
.fo-shop__cats {
    background: var(--fo-ink);
    border-bottom: 1px solid var(--fo-line);
    padding: var(--fo-space-4) 0;
}

.fo-shop__cats .fo-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-3);
}

.fo-shop__cat {
    display: inline-flex;
    align-items: center;
    gap: var(--fo-space-2);
    padding: var(--fo-space-2) var(--fo-space-5);
    background: var(--fo-panel);
    border: 1px solid var(--fo-line);
    border-radius: var(--fo-radius-full);
    color: var(--fo-ice-dim);
    font-weight: 600;
    font-size: var(--fo-text-sm);
}

.fo-shop__cat:hover {
    background: var(--fo-panel-2);
    border-color: var(--fo-line-2);
    color: var(--fo-ice);
    transform: translateY(-2px);
    box-shadow: none;
}

.fo-shop__cat--active {
    background: var(--fo-gradient-laser);
    border-color: transparent;
    color: var(--fo-white);
    box-shadow: var(--fo-shadow-red);
}

.fo-shop__cat-count {
    background: rgba(255, 255, 255, 0.14);
    color: inherit;
    border-radius: var(--fo-radius-full);
    padding: 1px 8px;
    font-size: var(--fo-text-xs);
}

/* Cards de produto V3 */
.fo-shop__main ul.products li.product .fo-product-card__media {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--fo-gray-100) 100%);
    padding: var(--fo-space-4);
}

/* Eyebrow de categoria (impresso via hook no functions.php) */
.fo-product-card__cat {
    display: block;
    font-size: var(--fo-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fo-laser-deep);
    margin-bottom: var(--fo-space-1);
}

/* Título com clamp a 2 linhas para grelha alinhada */
.fo-shop__main ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--fo-font-display);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    line-height: 1.3;
}

/* Estrelas de avaliação */
.fo-shop__main ul.products li.product .star-rating,
.fo-shop__main ul.products li.product .star-rating span::before {
    color: #F5A623;
}

/* Preço em destaque */
.fo-shop__main ul.products li.product .price {
    font-family: var(--fo-font-display);
    font-weight: 700;
    color: var(--fo-navy);
    font-size: var(--fo-text-xl);
}

.fo-shop__main ul.products li.product .price del {
    font-size: var(--fo-text-sm);
    opacity: 0.55;
    font-weight: 500;
}

.fo-shop__main ul.products li.product .price ins {
    text-decoration: none;
    color: var(--fo-laser-deep);
}

/* Estado vazio da pesquisa/loja */
.woocommerce-no-products-found .woocommerce-info {
    background: var(--fo-white);
    border: 1px dashed var(--fo-gray-300);
    border-radius: var(--fo-radius-xl);
    padding: var(--fo-space-12);
    text-align: center;
    color: var(--fo-gray-600);
}

/* Paginação da loja */
.fo-shop__main .woocommerce-pagination ul.page-numbers {
    display: flex;
    justify-content: center;
    gap: var(--fo-space-2);
    border: none;
    margin-top: var(--fo-space-8);
}

.fo-shop__main .woocommerce-pagination ul.page-numbers li {
    border: none;
}

.fo-shop__main .woocommerce-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 var(--fo-space-3);
    border-radius: var(--fo-radius-full);
    border: 1px solid var(--fo-gray-300);
    background: var(--fo-white);
    color: var(--fo-navy);
    font-weight: 600;
    transition: all var(--fo-transition-fast);
}

.fo-shop__main .woocommerce-pagination .page-numbers:hover {
    border-color: var(--fo-laser-deep);
    color: var(--fo-laser-deep);
}

.fo-shop__main .woocommerce-pagination .page-numbers.current {
    background: var(--fo-gradient-laser);
    border-color: transparent;
    color: var(--fo-white);
    box-shadow: var(--fo-shadow-red);
}

/* Ajustes de especificidade e ritmo da página Minha Conta — a regra antiga
   com ID (#primary...) ganhava à cor do título; espaço extra entre a banda
   escura e os cartões flutuantes */
body.woocommerce-account:not(.logged-in) #primary.content-area .entry-header h1.entry-title {
    color: var(--fo-ice);
}

body.woocommerce-account.logged-in #primary.content-area .entry-header h1.entry-title {
    color: var(--fo-ice);
}

body.woocommerce-account:not(.logged-in) .entry-header {
    padding-bottom: calc(var(--fo-space-16) + 140px);
}

#customer_login {
    margin-top: -140px;
}

/* ============================================================================
   G7. MINHA CONTA — OVERRIDE DEFINITIVO (vence os blocos antigos com
   !important: título navy 1.6rem, colunas com padding:0, form-como-cartão)
   ============================================================================ */

/* Título e subtítulo sobre a banda escura */
body.woocommerce-account:not(.logged-in) .entry-header h1.entry-title,
body.woocommerce-account:not(.logged-in) .entry-header h1 {
    color: var(--fo-ice) !important;
    font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
    margin-bottom: 0 !important;
    font-weight: 700 !important;
}

body.woocommerce-account.logged-in .entry-header h1.entry-title,
body.woocommerce-account.logged-in .entry-header h1 {
    color: var(--fo-ice) !important;
    font-size: clamp(2rem, 4vw, 2.8rem) !important;
    margin-bottom: 0 !important;
    font-weight: 700 !important;
}

/* Cartões = as colunas .u-column1/2 (o bloco antigo punha padding:0
   !important nas colunas e fazia do form o cartão — invertemos) */
#customer_login {
    margin-top: -140px !important;
}

#customer_login .u-column1,
#customer_login .u-column2 {
    padding: var(--fo-space-10) var(--fo-space-8) !important;
    margin: 0 !important;
}

#customer_login form.woocommerce-form-login,
#customer_login form.woocommerce-form-register {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

#customer_login h2 {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    font-size: var(--fo-text-2xl) !important;
    font-family: var(--fo-font-display) !important;
}

/* Largura do conjunto (o bloco antigo limitava a 920px) */
body.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 1080px !important;
}

/* G7b — os rounds antigos usam selectors de especificidade máxima com
   !important (body.woocommerce-account #customer_login { margin/padding: 0
   !important }). Repetimos a mesma artilharia, em último na cascata. */

#customer_login,
body #customer_login,
body.woocommerce-account #customer_login,
.woocommerce #customer_login,
body .woocommerce #customer_login {
    margin-top: -140px !important;
    gap: var(--fo-space-6) !important;
}

@media (min-width: 860px) {
    #customer_login,
    body #customer_login,
    body.woocommerce-account #customer_login,
    .woocommerce #customer_login,
    body .woocommerce #customer_login {
        gap: var(--fo-space-8) !important;
    }
}

#customer_login .u-column1,
#customer_login .u-column2,
body.woocommerce-account #customer_login > div,
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
    padding: var(--fo-space-10) var(--fo-space-8) !important;
}

/* ============================================================================
   G8. MINHA CONTA — FULL-BLEED REAL NO SERVIDOR
   ----------------------------------------------------------------------------
   No site live o GeneratePress envolve o conteúdo em wrappers com margens e
   fundo branco (.site-main { margin }, .inside-article { padding + bg }),
   deixando a banda escura "encaixotada". Anulamos os wrappers só nesta
   página e esticamos a banda de lado a lado com a técnica 100vw.
   ============================================================================ */

body.woocommerce-account #page,
body.woocommerce-account #content,
body.woocommerce-account .site-content,
body.woocommerce-account .site-main,
body.woocommerce-account #main,
body.woocommerce-account .grid-container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.woocommerce-account #primary.content-area {
    padding-top: 0 !important;
    margin: 0 !important;
}

body.woocommerce-account .inside-article,
body.woocommerce-account article.page,
body.woocommerce-account article.post {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Banda do título: de lado a lado independentemente do container pai */
body.woocommerce-account .entry-header {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

body.woocommerce-account .entry-content {
    margin: 0 !important;
}

body.woocommerce-account {
    background: var(--fo-gray-50);
}

/* ============================================================================
   G9. ADMIN BAR — o header fixo desce quando a barra do WP está visível
   ============================================================================ */

body.admin-bar .fo-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .fo-header {
        top: 46px;
    }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  FIBRA 2026 — RONDA 3: responsividade auditada + login social polido      ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ============================================================================
   R1. OVERFLOW HORIZONTAL — causa raiz e blindagem
   ----------------------------------------------------------------------------
   Causa raiz encontrada (reproduzida em teste): o iframe do Cloudflare
   Turnstile tem 300px FIXOS. Dentro do cartão do hero (padding 32px x2)
   força min-content de 364px > 342px disponíveis num ecrã de 390px.
   Como os grid items têm min-width:auto, o track não encolhe e a página
   inteira estica ~30-40px — texto cortado na borda + scroll horizontal.
   ============================================================================ */

/* Grid do hero pode encolher abaixo do min-content dos filhos */
.fo-hero2__layout {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1025px) {
    .fo-hero2__layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
}

.fo-hero2__content,
.fo-hero2__form {
    min-width: 0;
    max-width: 100%;
}

.fo-hero2__card {
    max-width: 100%;
}

/* Turnstile nunca pode exceder o contentor */
.fo-form__turnstile,
.cf-turnstile {
    max-width: 100%;
    overflow: hidden;
}

.fo-form__turnstile iframe,
.cf-turnstile iframe {
    max-width: 100% !important;
}

/* Em ecrãs estreitos: card com menos padding; iframe do Turnstile escalado */
@media (max-width: 480px) {
    .fo-hero2__card {
        padding: var(--fo-space-6) var(--fo-space-5);
    }
}

@media (max-width: 400px) {
    .fo-form__turnstile,
    .cf-turnstile {
        transform: scale(0.88);
        transform-origin: left top;
    }
}

/* Blindagem global: nenhum plugin/embed volta a criar scroll horizontal.
   'clip' em vez de 'hidden' — não cria um scroll-container novo. */
html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

iframe,
embed,
object,
video {
    max-width: 100%;
}

/* ============================================================================
   R2. FOOTER MOBILE — alinhado à esquerda (o antigo centrava tudo)
   ============================================================================ */

@media (max-width: 768px) {
    .fo-footer__grid {
        text-align: left;
    }

    .fo-footer__brand {
        max-width: none;
    }

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

    .fo-footer__bottom-inner {
        text-align: left;
        align-items: flex-start;
    }

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

/* ============================================================================
   R3. LOGIN SOCIAL — botões a 100% com o mesmo raio do "Iniciar sessão"
   ----------------------------------------------------------------------------
   Markup real do Nextend: .nsl-container-buttons > a.nsl-button >
   .nsl-button-svg-container + .nsl-button-label-container. O CSS do plugin
   carrega depois do tema — daí o !important em tudo.
   ============================================================================ */

#customer_login .nsl-container-buttons,
.woocommerce .nsl-container-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#customer_login .nsl-container-buttons a,
#customer_login a.nsl-button,
.woocommerce .nsl-container-buttons a,
.woocommerce a.nsl-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--fo-radius-full) !important;
    overflow: hidden !important;
    box-shadow: var(--fo-shadow-sm) !important;
    transition: transform var(--fo-transition), box-shadow var(--fo-transition) !important;
}

#customer_login a.nsl-button:hover,
.woocommerce a.nsl-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--fo-shadow-md) !important;
}

#customer_login .nsl-button-default,
.woocommerce .nsl-button-default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 46px !important;
}

#customer_login .nsl-button-label-container,
.woocommerce .nsl-button-label-container {
    flex: 0 0 auto !important;
    text-align: center !important;
    margin: 0 8px !important;
    font-family: var(--fo-font-body) !important;
    font-weight: 600 !important;
}

/* ============================================================================
   R4. AFINAÇÕES RESPONSIVAS GERAIS (auditoria mobile)
   ============================================================================ */

/* Hero mobile: menos padding vertical, título respira */
@media (max-width: 768px) {
    .fo-hero2 {
        padding-top: calc(80px + var(--fo-space-8));
    }

    .fo-hero2__layout {
        gap: var(--fo-space-8);
        padding-bottom: var(--fo-space-10);
    }

    .fo-hero2__actions .fo-btn {
        width: 100%;
        justify-content: center;
    }

    /* Bento: padding mais compacto */
    .fo-bento__card {
        padding: var(--fo-space-6);
    }

    /* Secções com menos respiro vertical em mobile */
    .fo-bento-section {
        padding: var(--fo-space-16) 0;
    }

    /* Conta: cartões sobem menos (a banda é mais baixa em mobile) */
    #customer_login,
    body #customer_login,
    body.woocommerce-account #customer_login,
    .woocommerce #customer_login,
    body .woocommerce #customer_login {
        margin-top: -100px !important;
    }

    body.woocommerce-account:not(.logged-in) .entry-header {
        padding-bottom: calc(var(--fo-space-12) + 100px);
    }

    /* Marquee mais compacto */
    .fo-marquee__track {
        gap: var(--fo-space-10);
        padding-right: var(--fo-space-10);
    }

    .fo-marquee__item {
        font-size: var(--fo-text-lg);
    }
}

/* Tablets: bento em 2 colunas equilibradas */
@media (min-width: 768px) and (max-width: 1024px) {
    .fo-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "telecom energia"
            "telecom seguranca"
            "stat cta";
    }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  FIBRA 2026 — RONDA 4: containers largos + dashboard da conta polido      ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ============================================================================
   W1. CONTAINERS MAIS LARGOS — em ecrãs grandes o site usava só 1200px
   ============================================================================ */

:root {
    --fo-container: 1280px;
    --fo-container-wide: 1440px;
}

/* Secções de vitrine usam o container largo */
.fo-hero2 > .fo-container,
.fo-bento-section > .fo-container,
.fo-numbers > .fo-container,
.fo-marquee .fo-container,
.fo-shop__hero > .fo-container,
.fo-shop__cats > .fo-container,
.fo-shop__toolbar .fo-container,
.fo-container.fo-shop__layout,
.fo-footer .fo-container {
    max-width: var(--fo-container-wide);
}

/* ============================================================================
   W2. NOTICES WOOCOMMERCE — modernos, sem o ícone da fonte WC (o carácter
   "tofu" que aparecia vinha do ::before com a font WooCommerce não carregada)
   ============================================================================ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    position: relative;
    background: var(--fo-white) !important;
    border: 1px solid var(--fo-gray-200) !important;
    border-left: 4px solid var(--fo-energia) !important;
    border-radius: var(--fo-radius-md) !important;
    box-shadow: var(--fo-shadow-sm) !important;
    padding: var(--fo-space-4) var(--fo-space-6) !important;
    margin: 0 0 var(--fo-space-5) !important;
    color: var(--fo-gray-800) !important;
    font-size: var(--fo-text-base);
    line-height: 1.7;
    list-style: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fo-space-3);
}

.woocommerce-info {
    border-left-color: var(--fo-photon) !important;
}

.woocommerce-error {
    border-left-color: var(--fo-laser-deep) !important;
}

.woocommerce-error li {
    list-style: none;
    margin: 0;
}

/* Matar os ícones da fonte WooCommerce (tofu quando a fonte não carrega) */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after,
.woocommerce-error li::before,
.woocommerce-error li::after {
    display: none !important;
    content: none !important;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: var(--fo-laser-deep);
    font-weight: 600;
}

/* Botão dentro do notice (ex.: "Ver carrinho") empurrado para a direita */
.woocommerce-message .button,
.woocommerce-info .button {
    order: 2;
    margin-left: auto;
    background: var(--fo-gradient-laser);
    color: var(--fo-white);
    border: none;
    border-radius: var(--fo-radius-full);
    padding: 10px 20px;
    font-weight: 600;
}

/* ============================================================================
   W3. DASHBOARD DA CONTA — layout mais largo, tabelas, moradas e formulários
   ============================================================================ */

body.woocommerce-account.logged-in .woocommerce {
    max-width: var(--fo-container) !important;
    padding: var(--fo-space-10) var(--fo-space-6) var(--fo-space-20) !important;
}

@media (min-width: 900px) {
    body.woocommerce-account.logged-in .woocommerce {
        grid-template-columns: 280px minmax(0, 1fr) !important;
        gap: var(--fo-space-8) !important;
    }
}

/* Saudação "Olá X" — sem a caixa dupla, texto limpo */
body.woocommerce-account .woocommerce-MyAccount-content > p {
    color: var(--fo-gray-700);
}

body.woocommerce-account .woocommerce-MyAccount-content > p a {
    color: var(--fo-laser-deep);
    font-weight: 600;
}

/* Tabela de encomendas / downloads */
.woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--fo-gray-200) !important;
    border-radius: var(--fo-radius-lg);
    overflow: hidden;
}

.woocommerce-MyAccount-content table.shop_table th {
    background: var(--fo-gray-50);
    color: var(--fo-navy);
    font-weight: 700;
    font-size: var(--fo-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--fo-space-4) var(--fo-space-5) !important;
    border: none !important;
}

.woocommerce-MyAccount-content table.shop_table td {
    padding: var(--fo-space-4) var(--fo-space-5) !important;
    border: none !important;
    border-top: 1px solid var(--fo-gray-100) !important;
    color: var(--fo-gray-700);
}

.woocommerce-MyAccount-content table.shop_table .button {
    background: transparent;
    color: var(--fo-navy);
    border: 2px solid var(--fo-navy);
    border-radius: var(--fo-radius-full);
    padding: 8px 18px;
    font-weight: 600;
    transition: all var(--fo-transition-fast);
}

.woocommerce-MyAccount-content table.shop_table .button:hover {
    background: var(--fo-navy);
    color: var(--fo-white);
}

/* Moradas em cartões */
body.woocommerce-account .woocommerce-Address {
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-lg);
    box-shadow: var(--fo-shadow-sm);
}

body.woocommerce-account .woocommerce-Address-title h3 {
    font-family: var(--fo-font-display);
    color: var(--fo-navy);
}

body.woocommerce-account .woocommerce-Address-title .edit {
    color: var(--fo-laser-deep);
    font-weight: 600;
    font-size: var(--fo-text-sm);
}

/* Formulários da conta (detalhes, moradas, senha) */
.woocommerce-MyAccount-content fieldset {
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-lg);
    padding: var(--fo-space-6);
    margin: var(--fo-space-6) 0;
}

.woocommerce-MyAccount-content fieldset legend {
    font-family: var(--fo-font-display);
    font-weight: 700;
    color: var(--fo-navy);
    padding: 0 var(--fo-space-3);
}

.woocommerce-MyAccount-content button.woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"] {
    background: var(--fo-gradient-laser);
    color: var(--fo-white);
    border: none;
    border-radius: var(--fo-radius-full);
    padding: 14px 32px;
    font-weight: 700;
    font-size: var(--fo-text-base);
    cursor: pointer;
    box-shadow: var(--fo-shadow-red);
    transition: transform var(--fo-transition), box-shadow var(--fo-transition);
}

.woocommerce-MyAccount-content button.woocommerce-Button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(230, 57, 70, 0.38);
}

/* Links "encomendas recentes / moradas / detalhes" no texto do painel */
.woocommerce-MyAccount-content p a {
    text-underline-offset: 3px;
}

/* ============================================================================
   W4. MOLDURA DO TEMA-PAI ANULADA
   ----------------------------------------------------------------------------
   O GeneratePress (layout "separate containers") aplica margin: 20px a
   qualquer .site-main — incluindo o <main class="site-main"> dos nossos
   templates custom, emoldurando a homepage e as restantes páginas com uma
   borda de 20px. Anulado aqui; o espaçamento é todo gerido pelo tema filho.
   ============================================================================ */

.separate-containers .site-main,
.separate-containers.right-sidebar .site-main,
.separate-containers.left-sidebar .site-main,
.separate-containers.both-sidebars .site-main,
.separate-containers.no-sidebar .site-main,
body .site-main {
    margin: 0 !important;
}

/* O mesmo layout do GP dá padding/background aos wrappers — neutralizar
   nos templates custom (o main é filho directo do body, sem wrappers GP) */
.separate-containers .site-content {
    padding: 0;
}

/* Turnstile em modo interaction-only: sem espaço vazio enquanto o widget
   está invisível; quando a Cloudflare precisa de interação, aparece com
   respiro adequado */
.fo-form__turnstile {
    margin: 0;
    line-height: 0;
}

.fo-form__turnstile iframe:not([style*="display: none"]) {
    margin-bottom: var(--fo-space-2);
}

/* ============================================================================
   W5. VITRINE DA LOJA — banner principal + cartões de destaque + campanha
   ============================================================================ */

.fo-showcase {
    padding: var(--fo-space-10) 0 0;
    background: var(--fo-gray-50);
}

.fo-showcase > .fo-container {
    max-width: var(--fo-container-wide);
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-5);
}

/* --- Banner principal (escuro, com luz) --- */
.fo-showcase__hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-6);
    align-items: center;
    background: var(--fo-ink);
    border-radius: var(--fo-radius-2xl);
    padding: var(--fo-space-10) var(--fo-space-8);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--fo-transition-slow), box-shadow var(--fo-transition-slow);
}

@media (min-width: 900px) {
    .fo-showcase__hero {
        grid-template-columns: 1.1fr 0.9fr;
        padding: var(--fo-space-12) var(--fo-space-12);
        min-height: 380px;
    }
}

.fo-showcase__hero:hover {
    transform: translateY(-4px);
    box-shadow: var(--fo-shadow-xl);
}

.fo-showcase__hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 80% at 85% 30%, rgba(230, 57, 70, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 45% 70% at 10% 90%, rgba(55, 182, 255, 0.12) 0%, transparent 65%);
}

.fo-showcase__eyebrow {
    display: inline-block;
    padding: var(--fo-space-1) var(--fo-space-4);
    background: rgba(230, 57, 70, 0.16);
    border: 1px solid rgba(230, 57, 70, 0.4);
    border-radius: var(--fo-radius-full);
    color: #FF8A93;
    font-size: var(--fo-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--fo-space-4);
}

.fo-showcase__title {
    font-family: var(--fo-font-display);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--fo-ice);
    margin-bottom: var(--fo-space-3);
}

.fo-showcase__excerpt {
    color: var(--fo-ice-dim);
    font-size: var(--fo-text-base);
    line-height: 1.7;
    max-width: 30rem;
    margin-bottom: var(--fo-space-4);
}

.fo-showcase__price {
    font-family: var(--fo-font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--fo-white);
    margin-bottom: var(--fo-space-6);
}

.fo-showcase__price del {
    font-size: 0.55em;
    color: var(--fo-ice-dim);
    font-weight: 500;
    margin-right: var(--fo-space-3);
}

.fo-showcase__price ins {
    text-decoration: none;
    color: var(--fo-laser);
}

/* --- Zona da imagem (banner e cartões) --- */
.fo-showcase__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.fo-showcase__media--hero {
    min-height: 260px;
}

.fo-showcase__img {
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
    transition: transform var(--fo-transition-slow);
}

.fo-showcase__hero:hover .fo-showcase__img,
.fo-showcase__card:hover .fo-showcase__img {
    transform: scale(1.04);
}

/* Produto ainda sem imagem: bloco elegante com o nome (a <img> partida
   remove-se sozinha via onerror e marca o wrapper com .is-empty) */
.fo-showcase__media.is-empty {
    position: relative;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: var(--fo-radius-lg);
    background: rgba(255, 255, 255, 0.04);
}

.fo-showcase__media.is-empty::after {
    content: 'Adicionar imagem ao produto \2192  Produtos \203A ' attr(data-nome);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--fo-space-6);
    font-size: var(--fo-text-sm);
    color: rgba(237, 242, 251, 0.5);
    line-height: 1.6;
}

/* Nos cartões claros, o placeholder adapta as cores */
.fo-showcase__card .fo-showcase__media.is-empty {
    border-color: var(--fo-gray-300);
    background: var(--fo-gray-50);
}

.fo-showcase__card .fo-showcase__media.is-empty::after {
    color: var(--fo-gray-500);
}

/* --- Cartões secundários --- */
.fo-showcase__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fo-space-5);
}

@media (min-width: 768px) {
    .fo-showcase__row {
        grid-template-columns: 1fr 1fr;
    }
}

.fo-showcase__card {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--fo-space-5);
    align-items: center;
    background: var(--fo-white);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-xl);
    padding: var(--fo-space-6);
    overflow: hidden;
    transition: transform var(--fo-transition-slow), box-shadow var(--fo-transition-slow), border-color var(--fo-transition-slow);
}

.fo-showcase__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fo-shadow-lg);
    border-color: var(--fo-gray-300);
}

.fo-showcase__card .fo-showcase__media {
    min-height: 160px;
}

.fo-showcase__card .fo-showcase__img {
    max-height: 180px;
    filter: none;
}

.fo-showcase__eyebrow--dark {
    background: var(--fo-telecom-light);
    border-color: rgba(230, 57, 70, 0.25);
    color: var(--fo-laser-deep);
}

.fo-showcase__card-title {
    font-family: var(--fo-font-display);
    font-size: var(--fo-text-xl);
    font-weight: 700;
    color: var(--fo-navy);
    line-height: 1.2;
    margin-bottom: var(--fo-space-2);
}

.fo-showcase__card-price {
    font-family: var(--fo-font-display);
    font-size: var(--fo-text-2xl);
    font-weight: 700;
    color: var(--fo-navy);
    margin-bottom: var(--fo-space-3);
}

.fo-showcase__card-price del {
    font-size: 0.6em;
    opacity: 0.5;
    font-weight: 500;
    margin-right: var(--fo-space-2);
}

.fo-showcase__card-price ins {
    text-decoration: none;
    color: var(--fo-laser-deep);
}

.fo-showcase__card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--fo-space-2);
    color: var(--fo-laser-deep);
    font-weight: 600;
    font-size: var(--fo-text-sm);
}

.fo-showcase__card-link svg {
    transition: transform var(--fo-transition);
}

.fo-showcase__card:hover .fo-showcase__card-link svg {
    transform: translateX(4px);
}

/* --- Banner de campanha (imagem colada pelo administrador) --- */
.fo-showcase__campaign {
    display: block;
    border-radius: var(--fo-radius-xl);
    overflow: hidden;
    box-shadow: var(--fo-shadow);
    transition: transform var(--fo-transition-slow), box-shadow var(--fo-transition-slow);
}

.fo-showcase__campaign:hover {
    transform: translateY(-3px);
    box-shadow: var(--fo-shadow-lg);
}

.fo-showcase__campaign img {
    width: 100%;
    display: block;
}

/* Mobile: banner principal empilha com imagem por cima */
@media (max-width: 899px) {
    .fo-showcase__hero {
        grid-template-columns: 1fr;
    }
    .fo-showcase__media--hero {
        order: -1;
        min-height: 200px;
    }
    .fo-showcase__img {
        max-height: 220px;
    }
    .fo-showcase__card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .fo-showcase__card .fo-showcase__card-link {
        justify-content: center;
    }
}

/* ============================================================================
   ║ W6 — PRODUTO v2 (6.5.0)                                                  ║
   ║ 1. Galeria sem FlexSlider: o slider nativo foi desligado no functions.php ║
   ║    (as larguras inline dele lutavam com o aspect-ratio e a imagem         ║
   ║    seguinte espreitava). Uma imagem visível de cada vez + miniaturas      ║
   ║    geradas pelo initProductGallery() do main.js.                          ║
   ║ 2. Cards da loja/relacionados: media com fundo BRANCO (as fotos da        ║
   ║    Amazon têm fundo branco — sobre cinzento ficava um rectângulo a        ║
   ║    flutuar) + mix-blend-mode: multiply para fundirem na perfeição.        ║
   ║ 3. Summary em cartão branco + tipografia display.                         ║
   ============================================================================ */

/* ---- 2. Cards de produto (loja, relacionados, upsells) ---- */
ul.products li.product .fo-product-card__media,
.fo-shop__main ul.products li.product .fo-product-card__media {
    aspect-ratio: 1 / 1;
    background: var(--fo-white);
    border-bottom: 1px solid var(--fo-gray-100);
}

ul.products li.product .fo-product-card__media img,
.fo-shop__main ul.products li.product .fo-product-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 1.25rem;
    mix-blend-mode: multiply; /* funde o fundo branco das fotos da Amazon com o cartão */
}

/* Placeholder cinzento do WC (produto ainda sem imagem) — centrado e discreto */
ul.products li.product .fo-product-card__media img.woocommerce-placeholder,
ul.products li.product .fo-product-card__media img[src*="placeholder"] {
    padding: 2.5rem;
    opacity: 0.35;
    mix-blend-mode: normal;
}

/* ---- 1. Galeria da página de produto ---- */
.fo-single-product__gallery .woocommerce-product-gallery {
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
    padding: var(--fo-space-4);
}

/* Sem slider: só a imagem activa é visível. Fallback sem JS: a primeira. */
.fo-single-product__gallery .woocommerce-product-gallery__image,
.fo-single-product__gallery .woocommerce-product-gallery__image--placeholder {
    display: none;
    box-shadow: none;
    border-radius: var(--fo-radius-lg);
    padding: var(--fo-space-4);
}

.fo-single-product__gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
    display: flex;
}

.fo-single-product__gallery .fo-gallery--js .woocommerce-product-gallery__image.fo-active {
    display: flex;
}

.fo-single-product__gallery .fo-gallery--js .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child:not(.fo-active) {
    display: none;
}

.fo-single-product__gallery .woocommerce-product-gallery__image img {
    mix-blend-mode: multiply;
}

/* Miniaturas geradas pelo main.js */
.fo-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: var(--fo-space-3);
    margin-top: var(--fo-space-4);
}

@media (min-width: 768px) {
    .fo-gallery-thumbs {
        grid-template-columns: repeat(auto-fill, 76px);
    }
}

.fo-gallery-thumbs__btn {
    aspect-ratio: 1 / 1;
    padding: 6px;
    background: var(--fo-white);
    border: 2px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-md);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--fo-transition), transform var(--fo-transition);
}

.fo-gallery-thumbs__btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: 0;
    mix-blend-mode: multiply;
}

.fo-gallery-thumbs__btn:hover {
    border-color: var(--fo-gray-400);
}

.fo-gallery-thumbs__btn.is-active {
    border-color: var(--fo-red);
}

.fo-gallery-thumbs__btn:focus-visible {
    outline: 2px solid var(--fo-red);
    outline-offset: 2px;
}

/* Thumbs antigos do FlexSlider — nunca devem aparecer (slider desligado),
   mas se um cache servir o JS antigo, escondem-se para não duplicar. */
.fo-single-product__gallery .flex-control-nav.flex-control-thumbs {
    display: none !important;
}

/* ---- 3. Summary em cartão branco ---- */
.fo-single-product__summary {
    background: var(--fo-white);
    border-radius: var(--fo-radius-xl);
    box-shadow: var(--fo-shadow);
    padding: var(--fo-space-8);
}

@media (max-width: 767px) {
    .fo-single-product__summary {
        padding: var(--fo-space-5);
    }
}

.fo-single-product__summary .product_title {
    font-family: var(--fo-font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    letter-spacing: -0.02em;
}

.fo-single-product__summary .price {
    font-family: var(--fo-font-display);
    font-size: clamp(1.8rem, 2.6vw, 2.2rem);
}

.fo-single-product__summary .price del {
    font-family: var(--fo-font-body);
}

/* Breadcrumb mais respirado em cima, colado ao conteúdo em baixo */
.fo-single-product__hero {
    padding-top: var(--fo-space-6);
}

/* Galeria e summary alinhados no topo em desktop */
@media (min-width: 768px) {
    .fo-single-product__layout {
        grid-template-columns: 52fr 48fr;
    }
}

/* Âncora do badge "Promoção!" e do trigger de zoom (o .onsale é impresso
   dentro de .fo-single-product__gallery, que não tinha position). */
.fo-single-product__gallery {
    position: relative;
}

.woocommerce .fo-single-product__gallery span.onsale,
.fo-single-product__gallery > .onsale,
.fo-single-product__gallery .woocommerce-product-gallery .onsale {
    position: absolute !important;
    top: calc(var(--fo-space-4) + 8px) !important;
    left: calc(var(--fo-space-4) + 8px) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 20;
}

/* ============================================================================
   ║ W7 — GALERIA v2.1 (6.5.1): blindagem contra o CSS core do WooCommerce   ║
   ║ O woocommerce.css do plugin (que não existia no preview) tem regras de   ║
   ║ especificidade alta SEM !important — p.ex.                               ║
   ║   .woocommerce-product-gallery .woocommerce-product-gallery__wrapper     ║
   ║     .woocommerce-product-gallery__image:nth-child(n+2)                   ║
   ║     { width: 25%; display: inline-block; }                               ║
   ║   .woocommerce-product-gallery img { height: auto; }                     ║
   ║ que atropelavam a lógica mostrar/esconder (1.ª imagem gigante, clique    ║
   ║ nas miniaturas sem efeito). Tudo aqui leva !important — o core não usa.  ║
   ============================================================================ */

/* Contentor: nunca flutua (core: float:left; width:48%) + ordem garantida
   imagem (order 1) -> miniaturas (order 2), independente da ordem no DOM. */
.fo-single-product__gallery .woocommerce-product-gallery {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
}

.fo-single-product__gallery .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    order: 1;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !important;
    float: none !important;
}

.fo-single-product__gallery .fo-gallery-thumbs {
    order: 2;
}

/* Todas as imagens escondidas por defeito — !important para bater o
   :nth-child(n+2){display:inline-block} do core. */
.fo-single-product__gallery .woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    display: none !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1;
    background: var(--fo-white);
    border-radius: var(--fo-radius-lg);
    overflow: hidden;
    padding: var(--fo-space-4);
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

/* Visível: 1.ª imagem (fallback sem JS)… */
.fo-single-product__gallery .woocommerce-product-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
    display: flex !important;
}

/* …ou a imagem activa quando o JS das miniaturas está a comandar. */
.fo-single-product__gallery .woocommerce-product-gallery.fo-gallery--js .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.fo-active {
    display: flex !important;
}

.fo-single-product__gallery .woocommerce-product-gallery.fo-gallery--js .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child:not(.fo-active) {
    display: none !important;
}

/* Âncora e imagem preenchem o quadrado (core: img{height:auto}) */
.fo-single-product__gallery .woocommerce-product-gallery .woocommerce-product-gallery__image > a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.fo-single-product__gallery .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    mix-blend-mode: multiply;
}

/* Clone do hover-zoom do WC — o suporte foi removido no functions.php, mas
   se um cache servir o JS antigo, o clone (sem object-fit/mix-blend) fica
   escondido em vez de "tirar o fundo". */
.woocommerce-product-gallery .zoomImg {
    display: none !important;
}

/* ============================================================================
   ║ W8 — CARDS DE PRODUTO v2 (6.6.0)                                         ║
   ║ Com as miniaturas sem recorte (fo_uncropped_thumbnail) a foto vem        ║
   ║ inteira; aqui garante-se que ela ENCAIXA no quadrado sem cortar nem      ║
   ║ esticar, e os cards ficam todos com a mesma altura (título com espaço    ║
   ║ para 2 linhas, botão sempre alinhado em baixo).                          ║
   ============================================================================ */

/* Media: quadrado, imagem inteira, com ar à volta */
ul.products li.product .fo-product-card__media,
.fo-shop__main ul.products li.product .fo-product-card__media {
    aspect-ratio: 1 / 1;
    background: var(--fo-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

ul.products li.product .fo-product-card__media img,
.fo-shop__main ul.products li.product .fo-product-card__media img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center;
    padding: 1.5rem;
    margin: 0 !important;
    mix-blend-mode: multiply;
}

/* Card inteiro em coluna — botão sempre no fundo, cards com a mesma altura */
ul.products li.product.fo-product-card,
.fo-shop__main ul.products li.product.fo-product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fo-gray-100);
}

ul.products li.product .fo-product-card__body,
.fo-shop__main ul.products li.product .fo-product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Título com espaço reservado para 2 linhas (alinha preços entre cards) */
ul.products li.product .woocommerce-loop-product__title,
.fo-shop__main ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    line-height: 1.35;
}

/* Botão 'Adicionar' empurrado para o fundo do card */
ul.products li.product .fo-product-card__body .add_to_cart_button,
ul.products li.product .fo-product-card__body .button,
.fo-shop__main ul.products li.product .fo-product-card__body .add_to_cart_button {
    margin-top: auto;
}

/* Hover: leve elevação + zoom subtil da foto */
ul.products li.product.fo-product-card {
    transition: transform var(--fo-transition), box-shadow var(--fo-transition), border-color var(--fo-transition);
}

ul.products li.product.fo-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fo-shadow-lg);
    border-color: var(--fo-gray-200);
}

@media (prefers-reduced-motion: reduce) {
    ul.products li.product.fo-product-card:hover {
        transform: none;
    }
}

/* ============================================================================
   ║ W9 — NAVEGAÇÃO DE CATEGORIAS EM 2 NÍVEIS (6.7.0)                         ║
   ║ Barra principal: 6 categorias-mãe (sem scroll horizontal — com poucas    ║
   ║ categorias fazem wrap). Barra secundária: subcategorias da categoria     ║
   ║ activa, banda clara colada à barra escura.                               ║
   ============================================================================ */

.fo-shop__cats {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Menu secundário de subcategorias */
.fo-shop__subcats {
    background: var(--fo-white);
    border-bottom: 1px solid var(--fo-gray-200);
    padding: var(--fo-space-3) 0;
}

.fo-shop__subcats .fo-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fo-space-2);
}

.fo-shop__subcat {
    display: inline-flex;
    align-items: center;
    gap: var(--fo-space-2);
    padding: var(--fo-space-2) var(--fo-space-4);
    border: 1px solid var(--fo-gray-200);
    border-radius: var(--fo-radius-full);
    background: var(--fo-white);
    color: var(--fo-gray-700);
    font-size: var(--fo-text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--fo-transition), color var(--fo-transition), background var(--fo-transition);
}

.fo-shop__subcat:hover {
    border-color: var(--fo-navy);
    color: var(--fo-navy);
}

.fo-shop__subcat--active {
    background: var(--fo-red);
    border-color: var(--fo-red);
    color: var(--fo-white);
}

.fo-shop__subcat--active:hover {
    color: var(--fo-white);
    border-color: var(--fo-red);
}

.fo-shop__subcat-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fo-gray-400);
}

.fo-shop__subcat--active .fo-shop__subcat-count {
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 640px) {
    .fo-shop__subcats .fo-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .fo-shop__subcats .fo-container::-webkit-scrollbar {
        display: none;
    }
    /* no telemóvel a barra principal também desliza em vez de empilhar */
    .fo-shop__cats .fo-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .fo-shop__cats .fo-container::-webkit-scrollbar {
        display: none;
    }
}

/* ============================================================================
   ║ W10 — FIM DO "FANTASMA" NA IMAGEM DO PRODUTO (6.7.1)                     ║
   ║ Causa confirmada: a regra do W7                                          ║
   ║   .fo-single-product__gallery … .woocommerce-product-gallery__image img  ║
   ║   { display: block !important; mix-blend-mode: multiply }                ║
   ║ apanhava TAMBÉM o clone .zoomImg (especificidade 0,4,1 — ganhava à       ║
   ║ regra que o escondia, 0,2,0). Resultado: o clone ficava visível E        ║
   ║ translúcido pelo multiply, deixando ver a imagem por baixo — o efeito    ║
   ║ "png duplicado" no hover.                                                ║
   ║ Correcção: esconder o clone com especificidade superior + desligar o     ║
   ║ mix-blend-mode (os contentores já são brancos, logo o blend não          ║
   ║ acrescenta nada e só cria estes artefactos quando há sobreposições).     ║
   ============================================================================ */

/* 1. Clone do zoom fora — especificidade acima da regra do W7 */
.fo-single-product__gallery .woocommerce-product-gallery .woocommerce-product-gallery__image img.zoomImg,
.woocommerce-product-gallery img.zoomImg,
img.zoomImg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. Sem mix-blend-mode: o fundo branco da foto já coincide com o fundo
      branco do contentor, por isso o resultado visual é idêntico — mas
      deixa de haver transparência quando dois elementos se sobrepõem. */
.fo-single-product__gallery .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.fo-gallery-thumbs__btn img,
ul.products li.product .fo-product-card__media img,
.fo-shop__main ul.products li.product .fo-product-card__media img,
.fo-showcase__media img {
    mix-blend-mode: normal !important;
}

/* 3. Sem zoom no hover da imagem principal — era o gesto que revelava a
      sobreposição e não acrescenta nada (o lightbox já dá a imagem grande). */
.fo-single-product__gallery .woocommerce-product-gallery__image:hover img,
.fo-single-product__gallery .woocommerce-product-gallery__image img {
    transform: none !important;
}