/* ============================================================
   XPARTS — CSS Global
   themes/xparts/assets/css/xparts.css
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&display=swap');

/* ── Variables ────────────────────────────────────────────── */
:root {
    --red:          #E83D33;
    --red-dark:     #c8302a;
    --dark:         #1a1a1a;
    --footer-bg:    #333334;
    --text:         #333334;
    --text-light:   #666;
    --text-muted:   #999;
    --bg-grey:      #E6E6E6;
    --bg-white:     #ffffff;
    --border:       #e0e0e0;
    --header-h:     64px;
    --radius:       4px;
    --radius-md:    8px;
    --transition:   0.25s ease;
    --shadow:       0 2px 12px rgba(0,0,0,0.10);
    --shadow-md:    0 4px 24px rgba(0,0,0,0.14);
    --font-main:    'Exo 2', sans-serif;

}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-main) !important;
    color: var(--text);
    background: var(--bg-white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
::placeholder{ font-family: inherit; }
/* ── Utilities ────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
	padding: 0 24px;
}
.nomargin{
	margin-left:0 !important;
}
.section-title {
    text-align: center;
    margin-bottom: 70px;
	display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
}
.section-title .sup {
    display: block;
    font-family: var(--font-main);
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
	margin-right: 180px;
}
.section-title .main {
    display: block;
    font-family: var(--font-main);
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    color: var(--text);
	margin-left: 180px;
}

@media (max-width:550px){
	.section-title .sup {
	    margin-right: 0px;
    }
    .section-title .main {
	    margin-left: 0px;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    font-family: var(--font-main);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius);
    transition: var(--transition);
    cursor: pointer;
}
.btn-red {
    background: var(--red);
    color: #fff;
    border: 2px solid var(--red);
}
.btn-red:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
}
.btn-outline-red {
    background: transparent;
    color: var(--red);
    border: 2px solid var(--red);
}
.btn-outline-red:hover {
    background: var(--red);
    color: #fff;
}

.btn-outline-white {
    background: transparent;
    color:white;
    border: 2px solid white;
}
.btn-outline-white:hover {
    background:white;
    color: rgba(51, 51, 52, 1);
}

.btn-full { width: 100%; }

.xp-categories-sep {
    background: #E6E6E6;
    height: 48px;
}

/* ── Badge ────────────────────────────────────────────────── */
.badge-discount {
    display: inline-block;
    background: var(--red);
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius);
}


/* ── jQuery UI Dialog — override xparts ─────────────────── */
.ui-dialog {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25) !important;
    font-family: var(--font-main) !important;
    padding: 0 !important;
}

.ui-dialog-titlebar {
    background: var(--dark, #333) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 20px !important;
    border-bottom: 2px solid var(--red, #E83D33) !important;
}

.ui-dialog-title {
    font-family: var(--font-main) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #fff !important;
}

.ui-dialog-titlebar-close {
    background: none !important;
    border: none !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 16px !important;
}
.ui-dialog-titlebar-close:hover { background: none !important; }
.ui-icon-closethick {
    background-image: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    color: transparent !important;
    font-size: 18px !important;
    line-height: 1 !important;
}
.ui-icon-closethick::before {
    content: '✕' !important;
    font-style: normal !important;
	color:white !important;
}

.ui-dialog-content {
    font-family: var(--font-main) !important;
    font-size: 0.82rem !important;
    color: #555 !important;
    line-height: 1.9 !important;
    padding: 20px 24px !important;
    background: #fff !important;
}

.ui-widget-overlay {
    background: rgba(0,0,0,0.6) !important;
    opacity: 1 !important;
}


/* ============================================================
   HEADER
   ============================================================ */
.xp-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--dark);
    height: var(--header-h);
    display: flex;
    align-items: center;
}
.xp-header .container {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 100%;
}

/* Logo */
.xp-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.xp-logo img {
    height: 36px;
    width: auto;
}

/* Nav */
.xp-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    flex: 1;
}
.xp-nav > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.xp-nav > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    height: 100%;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    transition: color var(--transition);
    white-space: nowrap;
}
.xp-nav > li > a:hover,
.xp-nav > li.active > a { color: var(--red); }
.xp-nav > li > a svg { transition: transform var(--transition); }
.xp-nav > li:hover > a svg { transform: rotate(180deg); }

/* Dropdown */
.xp-dropdown {
    position: absolute;
    top: calc(var(--header-h));
    left: 0;
    background: #fff;
    min-width: 240px;
    border-top: 3px solid var(--red);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 100;
}
.xp-nav > li:hover .xp-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.xp-dropdown a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 20px;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition), color var(--transition);
}
.xp-dropdown a:last-child { border-bottom: none; }
.xp-dropdown a:hover { background: var(--bg-grey); color: var(--red); }
.xp-dropdown a svg { color: var(--text-muted); flex-shrink: 0; }

/* Header Actions */
.xp-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.xp-search-form {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,1);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition);
}
.xp-search-form:focus-within {
    border-color: var(--red);
}
.xp-search-form input {
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.85rem;
    padding: 7px 12px;
    width: 180px;
}
.xp-search-form input::placeholder{ font-family:var(--font-main); }
.xp-search-form input::placeholder { color: rgba(255,255,255,1); }
.xp-search-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    height: 100%;
    color: rgba(255,255,255,0.6);
    transition: color var(--transition);
}
.xp-search-form button:hover { color: var(--red); }

.xp-icon-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius);
    transition: color var(--transition);
    position: relative;
}
.xp-icon-btn:hover { color: var(--red); }
.xp-cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
}

.xp-cart-count--active {
    display: flex; 
}

/* ── User Menu (logado) ───────────────────────────────────── */
.xp-user-menu {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.xp-user-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius);
    transition: color var(--transition);
    cursor: pointer;
    background: none;
    border: none;
}
.xp-user-trigger:hover { color: var(--red); }
.xp-user-trigger svg:last-child {
    transition: transform var(--transition);
}
.xp-user-menu:hover .xp-user-trigger svg:last-child {
    transform: rotate(180deg);
}
.xp-user-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xp-user-dropdown {
    position: absolute;
    top: calc(var(--header-h));
    right: 0;
    background: #fff;
    min-width: 200px;
    border-top: 3px solid var(--red);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 100;
}
.xp-user-menu:hover .xp-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.xp-user-dropdown li a {
    display: block;
    padding: 11px 20px;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition), color var(--transition);
}
.xp-user-dropdown li:last-child a { border-bottom: none; }
.xp-user-dropdown li a:hover { background: var(--bg-grey); color: var(--red); }
.xp-user-dropdown-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.xp-logout { color: var(--red) !important; }
.xp-logout:hover { background: var(--red) !important; color: #fff !important; }

/* Social sidebar */
.xp-social-sidebar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 500;
    display: flex;
    flex-direction: column;
	background: rgba(51, 51, 52, 1);
	padding: 10px 0px 10px 20px;
}
.xp-social-sidebar a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    transition: background var(--transition);
}
.xp-social-sidebar a:hover {
    background: transparent; /* sem fundo no hover */
}
.xp-social-sidebar a img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1); /* SVG branco */
    transition: filter var(--transition);
}
.xp-social-sidebar a:hover img {
    filter: brightness(0) saturate(100%) invert(22%) sepia(96%) saturate(2000%) hue-rotate(348deg) brightness(95%);
    /* resultado: var(--red) #E83D33 */
}

/* WhatsApp float */
.xp-whatsapp {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 500;
    width: 52px;
    height: 52px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(37,211,102,0.4);
    transition: transform var(--transition), box-shadow var(--transition);
}
.xp-whatsapp:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37,211,102,0.5);
}

/* Mobile hamburger */
.xp-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    margin-left: auto;
}
.xp-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: var(--transition);
}


/* ============================================================
   XPARTS — Search Preview + Cart
   themes/xparts/style/xp-search-cart.css

   Incluir no <head> do theme.php após xparts.css
   ============================================================ */


/* ── SEARCH PREVIEW ──────────────────────────────────────── */

.xp-search-preview {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 2000;
    overflow: hidden;
    border-top: 3px solid var(--red);

    /* Oculto por defeito */
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0.2s;
}
.xp-search-preview.xp-sp--open {
    max-height: 520px;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
}

/* Scrollbar discreta */
.xp-search-preview::-webkit-scrollbar { width: 4px; }
.xp-search-preview::-webkit-scrollbar-track { background: transparent; }
.xp-search-preview::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Loading dots */
.xp-sp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
}
.xp-sp-loading span {
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    animation: xp-sp-bounce 0.9s infinite ease-in-out both;
}
.xp-sp-loading span:nth-child(2) { animation-delay: 0.15s; }
.xp-sp-loading span:nth-child(3) { animation-delay: 0.30s; }
@keyframes xp-sp-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1);   opacity: 1; }
}

/* Sem resultados */
.xp-sp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.xp-sp-empty svg { color: var(--border); }
.xp-sp-empty strong { color: var(--text); }

/* Lista de resultados */
.xp-sp-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.xp-sp-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.xp-sp-item:last-child { border-bottom: none; }
.xp-sp-item:hover,
.xp-sp-item--active { background: #f8f8f8; }

/* Imagem */
.xp-sp-img {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xp-sp-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}
.xp-sp-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border);
}
.xp-sp-no-img svg { width: 24px; height: 24px; }

/* Info */
.xp-sp-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.xp-sp-vendor {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.xp-sp-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xp-sp-title mark {
    background: transparent;
    color: var(--red);
    font-weight: 700;
}
.xp-sp-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.xp-sp-price {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text);
}
.xp-sp-stock {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
}
.xp-sp-stock--ok  { background: #e8f5e9; color: #2e7d32; }
.xp-sp-stock--out { background: #fce4ec; color: #c62828; }

/* Ver todos */
.xp-sp-see-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--red);
    background: #fafafa;
    border-top: 1px solid var(--border);
    transition: background 0.15s;
    gap: 8px;
}
.xp-sp-see-all:hover { background: #fff0ee; }
.xp-sp-see-all strong { color: var(--text); }
.xp-sp-see-all svg { flex-shrink: 0; }


/* ── SEARCH FORM — mobile open state ────────────────────────
   Quando o form está escondido no mobile e abre ao clicar lupa */
@media (max-width: 1024px) {
    .xp-search-form {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        z-index: 999;
        border-radius: 0;
        background: var(--dark);
        border: none;
        border-bottom: 2px solid var(--red);
        display: none;
        padding: 0 16px;
    }
    .xp-search-form--mobile-open,
    .xp-search-form:focus-within {
        display: flex;
    }
    .xp-search-form input {
        width: 100%;
        padding: 14px 0;
        font-size: 1rem;
    }
    .xp-search-preview {
        border-radius: 0;
        top: 100%;
    }
}


/* ── CART TOAST ──────────────────────────────────────────── */
.xp-cart-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--dark);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    white-space: nowrap;
    max-width: calc(100vw - 32px);
}
.xp-cart-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.xp-cart-toast svg { color: #4caf50; flex-shrink: 0; }
.xp-cart-toast--error { background: #fff3f3; border: 1px solid rgba(232,61,51,.25); color: #c0392b; }
.xp-cart-toast--error svg { color: var(--red); }
.xp-cart-toast-link {
    color: var(--red);
    font-weight: 700;
    margin-left: 4px;
    text-decoration: underline;
    white-space: nowrap;
}
.xp-cart-toast-link:hover { color: #ff6b5b; }

/* ── CART COUNT pulse animation ─────────────────────────── */
@keyframes xp-cart-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.xp-cart-count--pulse {
    animation: xp-cart-pulse 0.5s ease;
}
.xp-cart-count--active {
    display: flex !important;
}

/* ── ADD TO CART button states ───────────────────────────── */
.xp-btn--added {
    background: #4caf50 !important;
    border-color: #4caf50 !important;
}
.xp-btn--error {
    background: #f44336 !important;
    border-color: #f44336 !important;
}

/* ── MOBILE search toggle button (lupa no header mobile) ── */
.xp-search-mobile-btn {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: #fff;
}
@media (max-width: 1024px) {
    .xp-search-mobile-btn { display: flex; }
}

/* ============================================================
   XPARTS — Mobile Nav Drawer CSS
   Adicionar ao teu xparts.css existente (ou num ficheiro separado)
   ============================================================ */
 
/* ── Mobile Nav Overlay + Drawer ──────────────────────────── */
.xp-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 2000;
    visibility: hidden;
    pointer-events: none;
}
.xp-mobile-nav.open {
    visibility: visible;
    pointer-events: auto;
}
 
/* Overlay escuro */
.xp-mobile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.xp-mobile-nav.open .xp-mobile-overlay {
    opacity: 1;
}
 
/* Drawer lateral */
.xp-mobile-drawer {
    position: absolute;
    top: 0;
    left: 0;
    width: min(320px, 88vw);
    height: 100%;
    background: var(--dark); /* #1a1a1a */
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 32px;
}
.xp-mobile-nav.open .xp-mobile-drawer {
    transform: translateX(0);
}
 
/* Scrollbar discreta */
.xp-mobile-drawer::-webkit-scrollbar { width: 3px; }
.xp-mobile-drawer::-webkit-scrollbar-track { background: transparent; }
.xp-mobile-drawer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
 
/* Linha do topo: logo + fechar */
.xp-mobile-close-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.xp-mobile-logo img {
    height: 28px;
    width: auto;
}
#xp-mobile-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}
#xp-mobile-close:hover { color: var(--red); }
 
/* Search mobile */
.xp-mobile-search-wrap {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.xp-mobile-search-wrap form {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.xp-mobile-search-wrap form:focus-within {
    border-color: var(--red);
}
.xp-mobile-search-wrap input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.9rem;
    padding: 10px 14px;
}
.xp-mobile-search-wrap input::placeholder {
    color: rgba(255,255,255,0.4);
}
.xp-mobile-search-wrap button {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    padding: 0 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.xp-mobile-search-wrap button:hover { color: var(--red); }
 
/* Menu items */
.xp-mobile-drawer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}
.xp-mobile-menu-item > a,
.xp-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 20px;
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s, background 0.2s;
}
.xp-mobile-menu-item > a:hover,
.xp-mobile-toggle:hover {
    color: var(--red);
    background: rgba(255,255,255,0.04);
}
.xp-mobile-menu-item > a.red { color: var(--red); }
 
/* Seta do toggle */
.xp-mobile-toggle svg {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.xp-mobile-toggle.open svg {
    transform: rotate(180deg);
}
 
/* Submenu */
.xp-mobile-sub {
    display: none;
    background: rgba(0,0,0,0.25);
}
.xp-mobile-sub.open {
    display: block;
}
.xp-mobile-sub a {
    display: block;
    padding: 10px 20px 10px 32px;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: color 0.2s, background 0.2s;
}
.xp-mobile-sub a:hover {
    color: var(--red);
    background: rgba(255,255,255,0.03);
}
 
/* Divisor */
.xp-mobile-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 8px 0;
}


/* ============================================================
   XPARTS — Footer CSS
   Substituir o bloco FOOTER no xparts.css
   ============================================================ */

.xp-footer {
    background: var(--footer-bg, #333334);
    color: #fff;
    padding: 56px 0 0;
    font-family: var(--font-main);
}

/* Grid — 3 colunas */
.xp-footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.8fr 1.4fr;
    gap: 160px;
    padding-bottom: 48px;
    align-items: start;
}

/* ── Col 1 — Info ─────────────────────────────────────────── */
.xp-footer-logo {
    display: block;
    margin-bottom: 20px;
}
.xp-footer-logo img {
    height: 60px;
    width: auto;
}

/* Sociais */
.xp-footer-socials {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.xp-footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: opacity var(--transition);
}
.xp-footer-socials a:hover { opacity: 0.7; }
.xp-footer-socials a img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
    transition: filter var(--transition);
    display: block;
}
.xp-footer-socials a:hover img {
    filter: brightness(0) saturate(100%) invert(22%) sepia(96%) saturate(2000%) hue-rotate(348deg) brightness(95%);
}

/* Contactos */
.xp-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-family: var(--font-main);
    font-size: 0.875rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.55;
}
.xp-footer-contact-item svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--red);
}
.xp-footer-contact-item strong {
    color: rgba(255,255,255,0.95);
    font-weight: 700;
}

/* Botão voltar ao topo */
.xp-footer-totop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: white;
    margin-top: 20px;
    transition: border-color var(--transition), color var(--transition);
    background: none;
    cursor: pointer;
}
.xp-footer-totop:hover {
    border-color: var(--red);
    color: var(--red);
}

/* ── Col 2 — Links ────────────────────────────────────────── */
.xp-footer-col-links {
    padding-top: 4px;
}
.xp-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.xp-footer-links li {
    margin-bottom: 50px;
}
.xp-footer-links a {
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    transition: color var(--transition);
    display: block;
}
.xp-footer-links a:hover { color: var(--red); }
.xp-footer-links a.red   { color: var(--red); }
.xp-footer-links a.red:hover { color: #ff6b5b; }

/* ── Col 3 — Formulário ───────────────────────────────────── */
.xp-footer-col-form h4 {
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 16px;
}

.xp-footer-form input:not([type=button]),
.xp-footer-form textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 2px;
    padding: 10px 14px;
    color: #111;
    background: #fff;
    font-family: var(--font-main);
    font-size: 0.82rem;
    margin-bottom: 6px;
    outline: none;
    transition: border-color var(--transition);
    box-sizing: border-box;
}
.xp-footer-form input:not([type=button])::placeholder,
.xp-footer-form textarea::placeholder {
    color: rgba(159, 153, 153, 1);
    font-family: var(--font-main);
}
.xp-footer-form input:not([type=button]):focus,
.xp-footer-form textarea:focus {
    border-color: var(--red);
}
.xp-footer-form .captcha-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
}
.xp-footer-form .captcha-row input {
    flex: 1;
    margin-bottom: 0 !important;
}
.xp-footer-form .captcha-row .img-captcha {
    height: 40px;
    width: 130px;
    flex-shrink: 0;
    border-radius: 2px;
    cursor: pointer;
}
.xp-footer-form textarea {
    resize: vertical;
    min-height: 90px;
}
.xp-footer-form .row {
    margin-top: 0;
}
.xp-footer-form .row input[type=button] {
    width: 100%;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    font-family: var(--font-main);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 14px 24px;
    cursor: pointer;
    border-radius: 0;
    transition: background var(--transition), color var(--transition);
}
.xp-footer-form .row input[type=button]:hover {
    background: #fff;
    color: #111;
}
.xp-footer-form .row input[type=button]:disabled {
    opacity: .5;
    cursor: default;
}
.xp-footer-form .row span {
    display: block;
    font-size: .85rem;
    margin-top: 8px;
    line-height: 1.4;
}
#xpFooterContact_ok  { color: #6fcf97; }
#xpFooterContact_err { color: #eb5757; }

/* Pagamentos */
.xp-footer-payments {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
	justify-content:space-between;
}
.xp-footer-payments img {
    height: 22px;
    width: auto;
    opacity: 0.85;
    display: block;
}

/* ── Copyright ────────────────────────────────────────────── */
.xp-copyright {
    background: rgba(51, 51, 52, 0.6);
    padding: 14px 0;
}
.xp-copyright-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-family: var(--font-main);
}
.xp-copyright-left p {
    font-size: 0.75rem;
    color: rgba(255,255,255,1);
    line-height: 1.5;
    margin: 0;
    font-family: var(--font-main);
}
.xp-copyright-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.xp-copyright-links a {
    font-family: var(--font-main);
    font-size: 0.75rem;
    color: rgba(255,255,255,1);
    transition: color var(--transition);
}
.xp-copyright-links a:hover { color: var(--red); }
.xp-copyright-links span {
    color: rgba(255,255,255,1);
    font-size: 0.75rem;
}
.xp-copyright-badges {
    display: flex;
    align-items: center;
    gap: 20px;
}
.xp-copyright-badges img {
    height: 30px;
    width: auto;
    opacity: 0.75;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .xp-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .xp-footer-col-form {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .xp-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .xp-copyright-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .xp-copyright-links {
        gap: 8px;
    }
}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.xp-product-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}
.xp-product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.xp-product-card-img {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #f8f8f8;
}
.xp-product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform 0.4s ease;
}
.xp-product-card:hover .xp-product-card-img img { transform: scale(1.05); }
.xp-product-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
}
.xp-product-card-wish {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    box-shadow: 0 1px 6px rgba(0,0,0,0.12);
    transition: color var(--transition), transform var(--transition);
    cursor: pointer;
}
.xp-product-card-wish:hover, .xp-product-card-wish.active { color: var(--red); transform: scale(1.1); }
.xp-product-card-body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
	font-family: var(--font-main);
}
.xp-product-card-cat {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.xp-product-card-cat span { color: var(--red); }
.xp-product-card-name {
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 10px;
    flex: 1;
}
.xp-product-card-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.xp-product-card-price .current {
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
}
.xp-product-card-price .old {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: line-through;
}
.xp-product-card-price.has-discount .current { color: var(--red); }

/* ============================================================
   SWIPER CUSTOM
   ============================================================ */
.xp-swiper-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}
.xp-swiper-progress {
    flex: 1;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 16px;
    position: relative;
    overflow: hidden;
}
.xp-swiper-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--red);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.xp-swiper-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 1.2rem;
    transition: color var(--transition);
    border-radius: 50%;
}
.xp-swiper-btn:hover { color: var(--red); }
.xp-swiper-btn.swiper-button-disabled { opacity: 0.3; pointer-events: none; }

/* ============================================================
   MOBILE NAV DRAWER
   ============================================================ */
.xp-mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    visibility: hidden;
}
.xp-mobile-nav.open { visibility: visible; }
.xp-mobile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    transition: opacity 0.3s;
}
.xp-mobile-nav.open .xp-mobile-overlay { opacity: 1; }
.xp-mobile-drawer {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background: var(--dark);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 24px 0;
}
.xp-mobile-nav.open .xp-mobile-drawer { transform: translateX(0); }
.xp-mobile-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 8px;
}
.xp-mobile-close img { height: 28px; }
.xp-mobile-close button { color: rgba(255,255,255,0.6); font-size: 1.4rem; }
.xp-mobile-menu-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: color var(--transition);
}
.xp-mobile-menu-item > a:hover,
.xp-mobile-menu-item > a.red { color: var(--red); }
.xp-mobile-submenu { display: none; background: rgba(0,0,0,0.3); }
.xp-mobile-submenu.open { display: block; }
.xp-mobile-submenu a {
    display: block;
    padding: 10px 20px 10px 32px;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: color var(--transition);
}
.xp-mobile-submenu a:hover { color: var(--red); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1190px) {
    .xp-nav { display: none; }
    .xp-search-form { display: none; }
    .xp-hamburger { display: flex; }
    .xp-header .container { gap: 16px; }
    .xp-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    :root { --header-h: 56px; }
    .xp-footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .xp-copyright-inner { flex-direction: column; align-items: center; text-align: center; }
    .xp-copyright-links { justify-content: center; }
    .xp-copyright-badges { justify-content: center; }
    .xp-social-sidebar { display: none; }
}


/* ============================================================
   XPARTS — Home CSS
   themes/xparts/assets/css/home.css
   ============================================================ */

/* ── 1. HERO ─────────────────────────────────────────────── */
.xp-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* search em cima, content em baixo */
    overflow: hidden;
    padding-top: var(--header-h);
}

.xp-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.xp-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.xp-hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.xp-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0.15) 40%,
        rgba(0,0,0,0.65) 100%
    );
}

/* Barra pesquisa moto */
.xp-hero-search-bar {
    position: relative;
    z-index: 2;
    padding: 14px 0;
    /* sem background aqui — fica só no container */
}

.xp-hero-search-bar .container {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius);
    padding: 14px 20px;
}

.xp-moto-search {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.xp-moto-select-wrap {
    flex: 1;
    min-width: 160px;
}
.xp-moto-select-wrap select {
    width: 100%;
    padding: 10px 36px 10px 14px;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.xp-moto-select-wrap select:focus {
    outline: none;
    border-color: var(--red);
    background-color: rgba(255,255,255,0.15);
}
.xp-moto-select-wrap select option { background: #222; color: #fff; }

.xp-moto-search .btn-red {
    flex-shrink: 0;
    padding: 10px 32px;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}

/* Hero content */
.xp-hero-content {
    position: relative;
    z-index: 2;
    padding: 60px 0 64px;
}
.xp-hero-title {
    font-family: var(--font-main);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 16px;
}
.xp-hero-title .red { color: var(--red); }
.xp-hero-sub {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.80);
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 480px;
	font-family: var(--font-main);
	font-weight:400;
}
.xp-hero-cta {
    font-size: 0.95rem;
    padding: 13px 36px;
    letter-spacing: 0.1em;
}

/* ── CATEGORIAS ACCORDION ─────────────────────────────────── */
.xp-categories { overflow: hidden; }

.xp-cat-accordion {
    display: flex;
    width: 100%;
    height: 590px;
    gap: 6px;
    overflow: hidden;
}

.xp-cat-item {
    flex: 2.5;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.5s ease;
    isolation: isolate;
    display: block;
    text-decoration: none;
}

.xp-cat-item:hover { flex: 5; }

.xp-cat-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.xp-cat-item:hover img { transform: scale(1.05); }

/* Content layer */
.xp-cat-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Overlay vermelho no hover */
.xp-cat-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 64px; /* altura do label wrapper — ajusta conforme */
    background: rgba(232, 61, 51, 0);
    transition: background 0.4s ease;
    pointer-events: none;
}
.xp-cat-item:hover .xp-cat-overlay {
    background: rgba(232, 61, 51, 0.6);
}

/* Plus no centro */
.xp-cat-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-main);
    font-size: 4rem;
    font-weight: 300;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
    line-height: 1;
}
.xp-cat-item:hover .xp-cat-plus { opacity: 1; }

/* Número lateral */
.xp-cat-number {
    position: absolute;
    bottom: 80px;
    left: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.xp-cat-item:hover .xp-cat-number { opacity: 1; }

.xp-cat-line {
    width: 2px;
    height: 48px;
    background: #fff;
}
.xp-cat-number span {
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.1em;
}

/* Label em baixo */
.xp-cat-label-wrap {
    position: relative;
    z-index: 3;
    background: rgba(232, 61, 51, 0.6);
    padding: 20px 20px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.xp-cat-label {
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    text-align: center;
}

/* Mobile swiper */
.xp-cat-swiper-wrap { 
    overflow: hidden;
}
.xp-cat-swiper {
    overflow: hidden;
    padding: 0 !important;
}
.xp-cat-swiper .swiper-slide {
    height: 320px;
}
.xp-cat-swiper .xp-cat-item {
    flex: unset;
    width: 100%;
    height: 320px;
    display: block;
    aspect-ratio: unset;
}

/* Desktop/Mobile visibility */
.desktop-only { display: flex; }
.mobile-only  { display: none; }

@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only  { display: block; }
}

/* ── 3. OS NOSSOS PRODUTOS ───────────────────────────────── */
.xp-products-section {
    position: relative;
    background: var(--bg-grey);
    padding: 72px 0 56px;
    overflow: hidden;
}
.xp-x-watermark {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    width: 39%;
}
.xp-x-watermark--red {
    color: rgba(255,255,255,0.06);
    right: -40px;
    left: auto;
}

/* Tabs */
.xp-tabs {
    display: flex;
    gap: 0;
    justify-content: center;
    margin-bottom: 32px;
}
.xp-tab {
    padding: 9px 28px;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    border: 2px solid var(--border);
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
}
.xp-tab:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.xp-tab:last-child  { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
.xp-tab.active { background: var(--red); color: #fff; border-color: var(--red); }
.xp-tab:hover:not(.active) { border-color: var(--red); color: var(--red); }

/* Products Swiper — cards de igual altura com botão alinhado */
.xp-products-swiper { overflow: hidden !important; }
.xp-products-swiper .swiper-wrapper { align-items: stretch; }
.xp-products-swiper .swiper-slide   { display: flex; height: auto; }
.xp-products-swiper .swiper-slide .xp-product-card { width: 100%; height: 100%; }

/* ── 4. PROMOÇÕES ────────────────────────────────────────── */
.xp-promo-section {
    position: relative;
    background: var(--red);
    padding: 64px 0 48px;
    overflow: hidden;
}
.xp-promo-title {
    font-family: var(--font-main);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    margin-bottom: 36px;
    letter-spacing: 0.05em;
}
.xp-promo-section .xp-product-card {
    background: #fff;
}
.xp-swiper-progress--white {
    background: rgba(255,255,255,0.25);
}
.xp-swiper-progress--white .xp-swiper-progress-bar {
    background: #fff;
}
.xp-swiper-btn--white { color: #fff; }
.xp-swiper-btn--white:hover { color: rgba(255,255,255,0.7); }

/* ── 5. MARCAS ───────────────────────────────────────────── */
.xp-brands-section {
    padding: 64px 0;
    background: #fff;
}
.xp-brands-swiper { overflow: hidden; }
.xp-brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: filter var(--transition), opacity var(--transition);
}
.xp-brand-item:hover { filter: grayscale(0%); opacity: 1; }
.xp-brand-item img { max-height: 70px; width: auto; object-fit: contain; }

/* ── 6. YOUTUBE ──────────────────────────────────────────── */
.xp-youtube-section {
    padding: 72px 0;
    background: var(--bg-grey);
}
.xp-youtube-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.xp-yt-item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 9/16;
    border-radius: var(--radius);
}
.xp-yt-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.xp-yt-item:hover img { transform: scale(1.04); }
.xp-yt-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.20);
    transition: background 0.3s;
}
.xp-yt-item:hover .xp-yt-play { background: rgba(0,0,0,0.35); }
.xp-yt-play svg { width: 52px; height: 52px; drop-shadow: 0 2px 8px rgba(0,0,0,0.4); }

/* ============================================================
   XPARTS — Feedback Section CSS
   ============================================================ */

.xp-feedback-section {
    padding: 64px 0 48px;
    background: white;
}

/* Wrapper do swiper — 100% da largura */
.xp-feedback-swiper-wrap {
    width: 100%;
    overflow: hidden;
    margin-bottom: 28px;
}

.xp-feedback-swiper {
    overflow: visible !important;
}

/* Slide */
.xp-feedback-swiper .swiper-slide {
    height: auto;
}

/* Card */
.xp-testimonial {
    background: #E6E6E6;
    padding: 70px 90px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    border-right: 1px solid rgba(0,0,0,0.08);
}

/* Aspas — canto superior direito, grandes e subtis */
.xp-testimonial-quote {
    position: absolute;
    top: 20px;
    right: 20px;
    opacity: 1;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}
.xp-testimonial-quote img {
    width: 65px;
    height: auto;
    display: block;
}

/* Nome */
.xp-testimonial-name {
    font-family: var(--font-main);
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text, #333334);
    margin-bottom: 6px;
    padding-right: 52px; /* não sobrepor as aspas */
    line-height: 1.2;
}

/* Estrelas */
.xp-testimonial-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 14px;
}
.xp-testimonial-stars img {
    width: 20px;
    height: 20px;
    display: block;
}

/* Texto */
.xp-testimonial-text {
    font-size: 1rem;
    color: #333334;
    line-height: 1.6;
    margin: 0;
    flex: 1;
	font-family:var(--font-main);
}

/* Nav — dentro do container, setas nas extremidades */
.xp-feedback-section .xp-swiper-nav {
    margin-top: 0;
    display: flex;
    align-items: center;
}
.xp-feedback-section .xp-swiper-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text, #333);
    padding: 0;
    transition: color 0.2s;
}
.xp-feedback-section .xp-swiper-btn:hover {
    color: var(--red, #E83D33);
}
.xp-feedback-section .xp-swiper-progress {
    flex: 1;
    height: 3px;
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    margin: 0 16px;
    overflow: hidden;
}
.xp-feedback-section .xp-swiper-progress-bar {
    height: 100%;
    background: var(--red, #E83D33);
    border-radius: 2px;
    transition: width 0.35s ease;
    width: 0%;
}

/* ── 8. PAGAMENTO ────────────────────────────────────────── */
.xp-payment-section {
    padding: 72px 0;
    background: #fff;
}
.xp-payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.xp-payment-card {
    border: 1px solid var(--border);
    padding: 48px 86px;
    text-align: left;
    transition: box-shadow var(--transition);
	display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 20px;
}
.xp-payment-card:hover { box-shadow: var(--shadow-md); }
.xp-payment-logo {
    height: 75px;
    object-fit: contain;
}
.xp-payment-card h3 {
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.3;
}
.xp-payment-card p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.6;
	font-family:var(--font-main);
}

/* ============================================================
   XPARTS — Product Card Fix
   Adicionar no FINAL do xparts.css
   Corrige a estrutura nova do xp_card() no main.php
   ============================================================ */

/* Wrapper da imagem — position relative para o wish button */
.xp-product-card-img-wrap {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #f8f8f8;
}

/* Link que envolve só a imagem */
.xp-product-card-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.xp-product-card-img-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform 0.4s ease;
}
.xp-product-card:hover .xp-product-card-img-link img {
    transform: scale(1.05);
}

/* Imagem vazia / placeholder */
.xp-product-card-img-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
}

/* Badge de desconto — posição dentro do wrapper */
.xp-product-card-img-wrap .xp-product-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    pointer-events: none;
}

/* Wish button — absolute dentro do wrapper, fora do <a> */
.xp-product-card-img-wrap .xp-product-card-wish {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    box-shadow: 0 1px 6px rgba(0,0,0,0.12);
    transition: color 0.25s ease, transform 0.25s ease;
    cursor: pointer;
    border: none;
}
.xp-product-card-img-wrap .xp-product-card-wish:hover,
.xp-product-card-img-wrap .xp-product-card-wish.active {
    color: var(--red);
    transform: scale(1.1);
}

/* Garantir que o form do add to cart não interfere com cliques */
.xp-add-to-cart-form {
    margin-top: auto;
}
.xp-add-to-cart-btn {
    width: 100%;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .xp-youtube-grid { grid-template-columns: repeat(2, 1fr); }
    .xp-payment-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .xp-hero { min-height: 480px; }
    .xp-hero-content { padding: 40px 0 48px; }
    .xp-moto-search { flex-direction: column; }
    .xp-moto-select-wrap { width: 100%; min-width: unset; }
    .xp-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .xp-youtube-grid { grid-template-columns: repeat(2, 1fr); }
    .xp-payment-grid { grid-template-columns: 1fr; }
    .xp-payment-card { padding: 28px 20px; }
}

@media (max-width: 480px) {
    .xp-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .xp-youtube-grid { grid-template-columns: 1fr 1fr; }
    .xp-cat-item { aspect-ratio: 4/5; }
}




/* ============================================================
   XPARTS — Sobre Nós CSS
   themes/xparts/style/xp-about.css
   ============================================================ */

/* ── 1. HERO ─────────────────────────────────────────────── */
.xp-about-hero {
    position: relative;
    height: 100vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: var(--header-h);
}

.xp-about-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.xp-about-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.xp-about-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.55) 40%,
        rgba(0,0,0,0.10) 75%,
        transparent 100%
    );
}

.xp-about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 560px;
    padding: 48px 0;
}

.xp-about-hero-title {
    font-family: var(--font-main);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}
.xp-about-hero-title .red { color: var(--red); }

.xp-about-hero-sub {
    font-family: var(--font-main);
    font-size: clamp(1.3rem, 2.5vw, 2.8rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.15;
    letter-spacing: 0.02em;
    margin: 0;
}
.xp-about-hero-sub .red  { color: var(--red); }
.xp-about-hero-sub strong { font-weight: 900; }


/* ── 2. SECÇÃO TEXTO ─────────────────────────────────────── */
.xp-about-section {
    position: relative;
    background: #C1C1C1;
    padding: 80px 0; /* espaço para o texto respirar */
    overflow: visible;
	margin: 140px 0px;
    /* zona branca acima e abaixo é o body background */
}

.xp-about-img {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: -160px; /* sai 160px para cima (zona branca) */
    margin-bottom: -160px; /* sai 160px para baixo (zona branca) */
    position: relative;
}

/* X watermark — grande à esquerda */
.xp-about-watermark {
    position: absolute;
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
    width: 44%;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: 0.35;
}
.xp-about-watermark img {
    width: 100%;
    height: auto;
    display: block;
}

/* Grid */
.xp-about-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 32px;
    align-items: center;
    position: relative;
    z-index: 1;
    min-height: 520px;
}

/* Imagem — overflow intencional para cima e para baixo */
.xp-about-img {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: -160px; /* sai 160px para cima (zona branca) */
    margin-bottom: -160px; /* sai 160px para baixo (zona branca) */
    position: relative;
}
.xp-about-img img {
    width: 100%;
    max-width: 430px;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
}

/* Texto */
.xp-about-text {
    padding: 64px 48px 64px 0;
}
.xp-about-text p {
    font-family: var(--font-main);
    font-size: 1rem;
    color: var(--text, #333334);
    line-height: 1.25;
    margin-bottom: 18px;
}
.xp-about-text p:last-child { margin-bottom: 0; }
.xp-about-text strong { font-weight: 700; color: var(--text, #333334); }


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .xp-about-hero {
        height: 100vh;
        min-height: 420px;
    }
    .xp-about-hero-overlay {
        background: rgba(0,0,0,0.55);
    }
    .xp-about-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .xp-about-img {
        order: 2;
        margin-top: 0;
        margin-bottom: -40px;
        justify-content: center;
    }
    .xp-about-text {
        order: 1;
        padding: 40px 0 0;
    }
    .xp-about-watermark {
        width: 90%;
        left: -20px;
        opacity: 0.2;
    }
}



/* ============================================================
   XPARTS — Notícias CSS
   themes/xparts/style/xp-news.css
   ============================================================ */

/* ── LISTA ────────────────────────────────────────────────── */

.xp-news-wrap {
    background: #fff;
    padding-bottom: 72px;
    min-height: 60vh;
    padding-top: var(--header-h);
}

/* Título */
.xp-news-header {
    text-align: center;
    padding: 48px 0 32px;
}
.xp-news-title {
    font-family: var(--font-main);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
    margin: 0;
}

/* Categorias */
.xp-news-cats-wrap {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
    position: relative;
    padding: 0 24px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}
.xp-news-cats {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.xp-news-cats::-webkit-scrollbar { display: none; }
.xp-news-cats-inner {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
}
.xp-news-cat {
    display: inline-block;
    padding: 12px 20px;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    text-decoration: none;
    flex-shrink: 0;
}
.xp-news-cat:hover { color: var(--text); }
.xp-news-cat.active {
    color: var(--text);
    border-bottom-color: var(--text);
}

/* Setas categorias */
.xp-news-cats-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
}
.xp-news-cats-arrow:hover { color: var(--red); }

/* Grid */
.xp-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* Card */
.xp-news-card {
    display: flex;
    flex-direction: column;
}
.xp-news-card-img-wrap {
    display: block;
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #f0f0f0;
    margin-bottom: 0;
}
.xp-news-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}
.xp-news-card:hover .xp-news-card-img-wrap img {
    transform: scale(1.04);
}
.xp-news-card-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
}

/* Badge categoria sobre a imagem */
.xp-news-card-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--dark);
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    z-index: 2;
}

/* Body do card */
.xp-news-card-body {
    padding: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.xp-news-card-title {
    margin: 0;
}
.xp-news-card-title a {
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text);
    line-height: 1.3;
    transition: color 0.2s;
    display: block;
}
.xp-news-card-title a:hover { color: var(--red); }

.xp-news-card-resume a {
    font-family: var(--font-main);
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.6;
    display: block;
    text-decoration: none;
}
.xp-news-card-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-main);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.xp-news-card-date svg { color: var(--text-muted); flex-shrink: 0; }

/* Vazio */
.xp-news-empty {
    text-align: center;
    padding: 64px;
    color: var(--text-muted);
    font-family: var(--font-main);
}

/* Paginação */
.xp-news-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 48px;
}
.xp-pager-btn,
.xp-pager-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 2px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    text-decoration: none;
}
.xp-pager-btn:hover,
.xp-pager-num:hover { border-color: var(--red); color: var(--red); }
.xp-pager-num.active {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
}


/* ── DETALHE ──────────────────────────────────────────────── */

.xp-news-view-wrap {
    background: #fff;
    padding-top: var(--header-h);
    padding-bottom: 72px;
    min-height: 60vh;
}

/* Grid: main + sidebar */
.xp-news-view-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
    padding-top: 32px;
}

/* Hero com imagem e título sobreposto */
.xp-news-view-hero {
    position: relative;
    aspect-ratio: 16/7;
    overflow: hidden;
    background: var(--dark);
    margin-bottom: 32px;
}
.xp-news-view-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.xp-news-view-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(232,61,51,0.92) 0%,
        rgba(232,61,51,0.45) 45%,
        transparent 100%
    );
}
.xp-news-view-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 28px;
    z-index: 2;
}
.xp-news-view-cat {
    display: inline-block;
    background: var(--dark);
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    margin-bottom: 10px;
}
.xp-news-view-title {
    font-family: var(--font-main);
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 8px;
}
.xp-news-view-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-main);
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
}

/* Hero sem imagem */
.xp-news-view-hero--no-img {
    aspect-ratio: auto;
    min-height: 160px;
    padding: 32px;
    display: flex;
    align-items: flex-end;
}
.xp-news-view-hero--no-img .xp-news-view-hero-overlay { display: none; }
.xp-news-view-hero--no-img .xp-news-view-title { color: var(--text); }
.xp-news-view-hero--no-img .xp-news-view-cat { background: var(--red); }
.xp-news-view-hero--no-img .xp-news-view-date { color: var(--text-muted); }

/* Conteúdo do artigo */
.xp-news-view-content {
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.8;
}
.xp-news-view-content p { margin-bottom: 16px; }
.xp-news-view-content strong { color: var(--text); font-weight: 700; }
.xp-news-view-content a { color: var(--red); text-decoration: underline; }
.xp-news-view-content img { max-width: 100%; border-radius: 4px; margin: 16px 0; }

/* Botão voltar */
.xp-news-view-back {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.xp-news-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text);
    transition: border-color 0.2s, color 0.2s;
}
.xp-news-back-btn:hover { border-color: var(--red); color: var(--red); }

/* Sidebar */
.xp-news-view-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 24px);
}
.xp-news-sidebar-title {
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

/* Cards relacionados */
.xp-news-related-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.xp-news-related-card { display: flex; flex-direction: column; gap: 0; }
.xp-news-related-img {
    display: block;
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f0f0f0;
}
.xp-news-related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
    display: block;
}
.xp-news-related-card:hover .xp-news-related-img img { transform: scale(1.04); }
.xp-news-related-no-img { width: 100%; height: 100%; background: #eee; }
.xp-news-related-body { padding: 10px 0 0; }
.xp-news-related-title {
    margin: 0 0 6px;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.3;
}
.xp-news-related-title a {
    color: var(--text);
    transition: color 0.2s;
}
.xp-news-related-title a:hover { color: var(--red); }
.xp-news-related-resume {
    font-family: var(--font-main);
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0 0 6px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .xp-news-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .xp-news-view-grid { grid-template-columns: 1fr; }
    .xp-news-view-sidebar { position: static; }
}
@media (max-width: 640px) {
    .xp-news-grid { grid-template-columns: 1fr; gap: 20px; }
    .xp-news-view-hero { aspect-ratio: 4/3; }
}

/* ============================================================
   XPARTS — Products Page CSS
   themes/xparts/style/xp-products.css
   ============================================================ */

/* ── Wrap ────────────────────────────────────────────────── */
#xp-store-wrap {
    background: var(--bg-grey, #E6E6E6);
    padding-top: calc(var(--header-h) + 32px);
    font-family: var(--font-main);
    min-height: 80vh;
    padding-bottom: 64px;
}

/* ── Toast ───────────────────────────────────────────────── */
.xp-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    background: var(--dark, #333334);
    color: #fff;
    padding: 12px 20px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    z-index: 9999;
    animation: xpToastIn 0.3s ease;
}
@keyframes xpToastIn {
    from { transform: translateX(110%); }
    to   { transform: translateX(0); }
}

/* ── Mobile bar ──────────────────────────────────────────── */
.xp-mobile-bar {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    background: #fff;
    position: sticky;
    top: var(--header-h);
    z-index: 90;
}
.xp-mobile-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid #333;
    padding: 8px 16px;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.xp-mobile-count { font-size: 0.78rem; color: #888; }

/* ── Layout ──────────────────────────────────────────────── */
.xp-products-layout {
    max-width: var(--container-w, 1400px);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    align-items: start;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.xp-sidebar {
    background: #fff;
    padding: 20px 16px;
    position: sticky;
    top: calc(var(--header-h) + 32px);
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.xp-sidebar::-webkit-scrollbar { width: 3px; }
.xp-sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

.xp-sidebar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
}
.xp-sidebar-head-title {
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.xp-clear-filters { font-size: 0.7rem; color: #888; text-decoration: none; transition: color 0.2s; }
.xp-clear-filters:hover { color: var(--red, #E83D33); }
.xp-sidebar-close { background: none; border: none; font-size: 20px; cursor: pointer; padding: 0; display: none; }

.xp-sidebar-sort { display: none; border-bottom: 1px solid rgba(0,0,0,0.08); }
.xp-filter-label {
    font-family: var(--font-main); font-size: 0.68rem; font-weight: 900;
    letter-spacing: 0.1em; text-transform: uppercase; color: #333;
    padding: 10px 0 8px;
}
.xp-sidebar-sort-opt {
    display: block; padding: 5px 0;
    font-family: var(--font-main); font-size: 0.78rem; color: #555; text-decoration: none;
}
.xp-sidebar-sort-opt.active { color: #333; font-weight: 800; }

/* Filter blocks */
.xp-filter-block { border-bottom: 1px solid rgba(0,0,0,0.08); padding: 10px 0; }
.xp-filter-toggle {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    background: none; border: none; cursor: pointer; padding: 4px 0;
    font-family: var(--font-main); font-size: 0.68rem; font-weight: 900;
    letter-spacing: 0.1em; text-transform: uppercase; color: #333;
}
.xp-filter-toggle.collapsed .xp-toggle-icon { transform: rotate(-90deg); }
.xp-toggle-icon { transition: transform 0.2s; }
.xp-filter-opts { margin-top: 8px; }

/* Checkboxes */
.xp-filter-check {
    display: flex; align-items: center; gap: 7px; padding: 3px 0; cursor: pointer;
    font-family: var(--font-main); font-size: 0.75rem; color: #555; transition: color 0.2s;
}
.xp-filter-check:hover { color: #333; }
.xp-filter-check.active { color: #333; font-weight: 700; }
.xp-filter-check input[type="checkbox"] { display: none; }
.xp-checkbox {
    width: 13px; height: 13px; border: 1px solid rgba(0,0,0,0.2);
    flex-shrink: 0; position: relative; background: #fff; transition: all 0.2s;
}
.xp-filter-check.active .xp-checkbox,
.xp-filter-check input:checked ~ .xp-checkbox { background: #333; border-color: #333; }
.xp-filter-check input:checked ~ .xp-checkbox::after {
    content: ''; position: absolute; left: 3px; top: 1px;
    width: 4px; height: 7px; border: 2px solid #fff;
    border-top: none; border-left: none; transform: rotate(45deg);
}
.xp-check-label { flex: 1; font-size: 0.72rem; }
.xp-check-count { font-size: 0.68rem; color: #aaa; }

/* Color swatches */
.xp-filter-colors { display: flex; flex-wrap: wrap; gap: 5px; }
.xp-color-swatch { cursor: pointer; position: relative; }
.xp-color-swatch input { display: none; }
.xp-swatch {
    display: block; width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}
.xp-color-swatch.active .xp-swatch,
.xp-color-swatch:hover .xp-swatch {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #333;
}
/* Tooltip com nome da cor */
.xp-color-swatch::after {
    content: attr(title);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.6rem;
    padding: 2px 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.xp-color-swatch:hover::after { opacity: 1; }

/* Price range */
.xp-price-range-inputs { display: flex; align-items: center; gap: 5px; margin-top: 10px; }
.xp-price-range-inputs input {
    flex: 1; padding: 4px 6px; border: 1px solid rgba(0,0,0,0.15);
    font-family: var(--font-main); font-size: 0.72rem; outline: none; width: 0; background: #f9f9f9;
}
.xp-price-range-inputs input:focus { border-color: #333; }
.xp-price-range-inputs span { color: #aaa; font-size: 0.72rem; flex-shrink: 0; }
.xp-btn-apply {
    padding: 4px 8px; background: #333; color: #fff; border: none;
    font-family: var(--font-main); font-size: 0.68rem; font-weight: 700; cursor: pointer;
}

/* ── Main ────────────────────────────────────────────────── */
.xp-products-main { min-width: 0; }

/* Header */
.xp-products-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; gap: 16px; flex-wrap: wrap;
    background: transparent; padding: 0 0 12px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.xp-products-title {
    font-family: var(--font-main); font-size: 0.9rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em; color: #333; margin: 0 0 4px;
}
.xp-products-count { font-size: 0.78rem; color: #888; font-weight: 400; letter-spacing: 0; }
.xp-active-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.xp-active-tag {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
    background: #333; color: #fff; font-family: var(--font-main); font-size: 0.68rem;
    font-weight: 700; text-decoration: none; transition: background 0.2s;
}
.xp-active-tag:hover { background: var(--red, #E83D33); }

/* Sort */
.xp-products-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.xp-sort-label { font-family: var(--font-main); font-size: 0.72rem; color: #888; white-space: nowrap; }
.xp-sort-btns { display: flex; }
.xp-sort-btn {
    padding: 6px 10px; font-family: var(--font-main); font-size: 0.72rem; font-weight: 700;
    color: #555; text-decoration: none; border: 1px solid rgba(0,0,0,0.12);
    border-right: none; background: #fff; transition: all 0.2s; white-space: nowrap;
}
.xp-sort-btn:last-child { border-right: 1px solid rgba(0,0,0,0.12); }
.xp-sort-btn:hover { color: #333; border-color: #333; z-index: 1; position: relative; }
.xp-sort-btn.active { background: #333; color: #fff; border-color: #333; }

/* ── Grid ────────────────────────────────────────────────── */
.xp-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* ── Card ────────────────────────────────────────────────── */
.xp-product-card {
    background: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
	padding: 20px;
}
.xp-product-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }

.xp-product-badge {
    position: absolute; top: 8px; left: 8px;
    background: var(--red, #E83D33); color: #fff;
    font-family: var(--font-main); font-size: 0.68rem; font-weight: 800;
    padding: 3px 6px; letter-spacing: 0.04em; z-index: 2;
}

.xp-wish-btn {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; z-index: 2;
    color: rgba(0,0,0,0.2); transition: color 0.2s;
}
.xp-wish-btn:hover { color: var(--red, #E83D33); }

.xp-esgotado {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.75);
    display: flex; align-items: center; justify-content: center;
    z-index: 3; pointer-events: none;
}
.xp-esgotado span {
    font-family: var(--font-main); font-size: 0.68rem; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    border: 1px solid #333; padding: 5px 14px;
}

.xp-product-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }

.xp-product-img-wrap {
    aspect-ratio: 1/1; overflow: hidden; background: #fff;
    padding: 10px; box-sizing: border-box; flex-shrink: 0;
}
.xp-product-img-wrap img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform 0.4s ease; display: block;
}
.xp-product-card:hover .xp-product-img-wrap img { transform: scale(1.04); }
.xp-product-img-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5;
}

.xp-product-info {
    padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px;
}
.xp-product-vendor {
    font-family: var(--font-main); font-size: 0.62rem; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase; color: #888;
}
.xp-product-name {
    font-family: var(--font-main); font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; color: #333; margin: 0; line-height: 1.3;
}
.xp-product-price-wrap { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.xp-price { font-family: var(--font-main); font-size: 0.85rem; font-weight: 800; color: #333; }
.xp-price-compare { font-family: var(--font-main); font-size: 0.75rem; color: #aaa; text-decoration: line-through; }

/* ── Botão ADICIONAR — sem fundo, vermelho só no hover ───── */
.xp-quick-add { width: 100%; }
.xp-btn-add {
    display: block;
    width: 100%;
    padding: 11px 0;
    background: transparent;
    color: var(--red, #E83D33);
    border: none;
    border-top: 1px solid rgba(0,0,0,0.08);
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-align: center;
    line-height: 1;
}
.xp-btn-add:hover:not(:disabled) {
    background: var(--red, #E83D33);
    color: #fff;
}
.xp-btn-add:disabled { opacity: 0.5; cursor: wait; }

.xp-btn-esgotado {
    display: block; width: 100%; padding: 11px 0; background: #ddd; color: #888;
    font-family: var(--font-main); font-size: 0.72rem; font-weight: 900;
    letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
}

/* ── Paginação ───────────────────────────────────────────── */
.xp-pagination { text-align: center; margin-top: 32px; }
.xp-pagination-bar { width: 180px; height: 3px; background: rgba(0,0,0,0.12); margin: 0 auto 10px; border-radius: 2px; overflow: hidden; }
.xp-pagination-progress { height: 100%; background: var(--red, #E83D33); width: 40%; border-radius: 2px; }
.xp-pagination-info { font-family: var(--font-main); font-size: 0.75rem; color: #888; margin-bottom: 14px; }
.xp-btn-load-more {
    display: inline-block; padding: 11px 36px; border: 1px solid #333; color: #333;
    font-family: var(--font-main); font-size: 0.75rem; font-weight: 900;
    letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: all 0.2s;
}
.xp-btn-load-more:hover { background: #333; color: #fff; }

/* ── Recently Viewed ─────────────────────────────────────── */
.xp-recently-viewed { margin-top: 40px; padding-top: 28px; border-top: 2px solid rgba(0,0,0,0.08); }
.xp-rv-title {
    font-family: var(--font-main); font-size: 0.72rem; font-weight: 900;
    letter-spacing: 0.12em; text-transform: uppercase; color: #333; margin: 0 0 16px;
}
.xp-rv-swiper-wrap { position: relative; }
.xp-rv-swiper { overflow: hidden; }
.xp-rv-prev, .xp-rv-next {
    position: absolute; top: 40%; transform: translateY(-50%);
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid rgba(0,0,0,0.15); cursor: pointer; z-index: 2;
    transition: all 0.2s; color: #333;
}
.xp-rv-prev { left: -15px; }
.xp-rv-next { right: -15px; }
.xp-rv-prev:hover, .xp-rv-next:hover { border-color: #333; color: var(--red, #E83D33); }

/* ── Empty ───────────────────────────────────────────────── */
.xp-empty { text-align: center; padding: 80px 20px; color: #888; font-family: var(--font-main); font-size: 0.9rem; }
.xp-btn-clear {
    display: inline-block; margin-top: 16px; padding: 10px 24px;
    background: #333; color: #fff; font-family: var(--font-main);
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-decoration: none;
}

/* ── Sidebar overlay ─────────────────────────────────────── */
/* z-index 1100 garante que cobre o .xp-header (z-index 1000) */
.xp-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1100; }
.xp-sidebar-overlay.open { display: block; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .xp-mobile-bar { display: flex; }
    .xp-products-layout { display: block; padding: 0; }
    .xp-sidebar {
        position: fixed; top: 0; left: -100%; width: 85%; max-width: 300px;
        height: 100vh; z-index: 1200; border: none; padding: 0;
        transition: left 0.3s; box-shadow: 4px 0 24px rgba(0,0,0,0.15);
        display: flex; flex-direction: column; max-height: none;
    }
    .xp-sidebar.open { left: 0; }
    .xp-sidebar-close { display: block; }
    .xp-sidebar-sort { display: block; padding: 12px 16px 14px; }
    .xp-sidebar-head { padding: 16px; position: sticky; top: 0; background: #fff; z-index: 2; border-bottom: 2px solid #333; }
    /* padding-bottom extra para não ficar tapado pela cookie widget fixa */
    #xp-filter-form { padding: 0 16px 90px; flex: 1; overflow-y: auto; }
    .xp-products-main { padding: 12px; }
    .xp-products-header { flex-direction: column; gap: 8px; }
    .xp-products-header-right { display: none; }
    .xp-products-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}
@media (max-width: 480px) {
    .xp-products-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
}
@media (min-width: 961px) {
    .xp-sidebar-close { display: none; }
    .xp-sidebar-sort { display: none; }
    .xp-sidebar-overlay { display: none !important; }
    .xp-mobile-bar { display: none; }
}


/* ============================================================
   XPARTS — Cart Page CSS
   themes/xparts/style/xp-cart.css
   ============================================================ */

#xp-cart-page {
    max-width: var(--container-w, 1280px);
    margin: 0 auto;
    padding: calc(var(--header-h) + 40px) 24px 80px;
    font-family: var(--font-main);
    min-height: 60vh;
    position: relative;
}

/* ── Empty ───────────────────────────────────────────────── */
.xp-cart-empty {
    text-align: center;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.xp-cart-empty h2 {
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin: 0;
}
.xp-cart-continue {
    display: inline-block;
    padding: 12px 32px;
    background: var(--dark, #333);
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s;
}
.xp-cart-continue:hover { background: var(--red, #E83D33); }

/* ── Header ──────────────────────────────────────────────── */
.xp-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--dark, #333);
}
.xp-cart-back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark, #333);
    text-decoration: none;
    transition: color 0.2s;
}
.xp-cart-back:hover { color: var(--red, #E83D33); }
.xp-cart-title {
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    color: var(--dark, #333);
}

/* ── Tabela ──────────────────────────────────────────────── */
.xp-cart-table {
    border-top: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 32px;
}
.xp-cart-thead {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    font-family: var(--font-main);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
}
.xp-cart-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    align-items: center;
    transition: background 0.15s;
}
.xp-cart-row:hover { background: rgba(0,0,0,0.01); }
.xp-cart-row:last-child { border-bottom: none; }

/* Produto */
.xp-cart-product {
    display: flex;
    align-items: center;
    gap: 16px;
}
.xp-cart-img-wrap {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    position: relative;
    background: #f5f5f5;
    overflow: hidden;
}
.xp-cart-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.xp-cart-img-placeholder { width: 100%; height: 100%; background: #eee; }
.xp-cart-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--red, #E83D33);
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.62rem;
    font-weight: 900;
    padding: 2px 6px;
    z-index: 2;
}
.xp-cart-product-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.xp-cart-vendor {
    font-family: var(--font-main);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: #888;
    text-transform: uppercase;
}
.xp-cart-name {
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark, #333);
    line-height: 1.3;
    text-transform: uppercase;
}
.xp-cart-variant {
    font-family: var(--font-main);
    font-size: 0.75rem;
    color: #888;
}

/* Preço */
.xp-cart-col-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.xp-cart-price-orig {
    font-family: var(--font-main);
    font-size: 0.78rem;
    color: #aaa;
    text-decoration: line-through;
}
.xp-cart-price {
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--dark, #333);
}

/* Quantidade */
.xp-cart-col-qty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.xp-qty-wrap {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.15);
    height: 40px;
}
.xp-qty-btn {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--dark, #333);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-main);
}
.xp-qty-btn:hover { background: rgba(0,0,0,0.05); }
.xp-qty-val {
    width: 48px;
    text-align: center;
    font-family: var(--font-main);
    font-size: 0.88rem;
    font-weight: 800;
    border-left: 1px solid rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xp-cart-remove {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 700;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.xp-cart-remove:hover { color: var(--red, #E83D33); }

/* Total linha */
.xp-cart-col-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}
.xp-cart-line-total {
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--dark, #333);
}

/* ── Footer ──────────────────────────────────────────────── */
.xp-cart-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(0,0,0,0.1);
}
.xp-cart-discount-row {
    display: flex;
    gap: 40px;
    font-family: var(--font-main);
    font-size: 0.82rem;
    color: var(--red, #E83D33);
    font-weight: 700;
}

/* Perks */
.xp-cart-perks {
    display: flex;
    gap: 32px;
    width: 100%;
    justify-content: flex-start;
    padding: 16px 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.xp-cart-perk {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555;
}
.xp-cart-perk svg { color: var(--dark, #333); flex-shrink: 0; }
.xp-cart-perk div { display: flex; flex-direction: column; gap: 1px; }
.xp-cart-perk strong {
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--dark, #333);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.xp-cart-perk span {
    font-family: var(--font-main);
    font-size: 0.72rem;
    color: #888;
}

/* Total */
.xp-cart-total-row {
    display: flex;
    align-items: baseline;
    gap: 24px;
}
.xp-cart-total-label {
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
}
.xp-cart-total-val {
    font-family: var(--font-main);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--dark, #333);
}

/* Botão checkout */
.xp-checkout-form { width: 100%; max-width: 480px; }
.xp-btn-checkout {
    width: 100%;
    padding: 16px;
    background: var(--red, #E83D33);
    color: #fff;
    border: none;
    font-family: var(--font-main);
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}
.xp-btn-checkout:hover { background: #c53028; }

/* ── Loading overlay ─────────────────────────────────────── */
.xp-cart-loading {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xp-cart-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top-color: var(--red, #E83D33);
    border-radius: 50%;
    animation: xpSpin 0.7s linear infinite;
}
@keyframes xpSpin { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    #xp-cart-page { padding-left: 16px; padding-right: 16px; }
    .xp-cart-thead { display: none; }
    .xp-cart-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 0;
    }
    .xp-cart-img-wrap { width: 80px; height: 80px; }
    .xp-cart-col-total { text-align: left; }
    .xp-cart-footer { align-items: stretch; }
    .xp-cart-total-row { justify-content: space-between; }
    .xp-cart-perks { flex-direction: column; gap: 12px; }
    .xp-checkout-form { max-width: 100%; }
}

/* ── NIF na fatura ───────────────────────────────────────── */
.xp-nif-section {
    width: 100%;
    max-width: 480px;
    margin-bottom: 4px;
}
.xp-nif-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.xp-nif-label {
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--dark, #333);
    letter-spacing: 0.02em;
}

/* Toggle switch */
.xp-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.xp-switch input { display: none; }
.xp-switch-slider {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.15);
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.2s;
}
.xp-switch-slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.xp-switch input:checked ~ .xp-switch-slider { background: var(--red, #E83D33); }
.xp-switch input:checked ~ .xp-switch-slider::before { transform: translateX(20px); }

/* NIF input wrap */
.xp-nif-input-wrap {
    padding: 10px 0 14px;
}
.xp-nif-saved {
    display: flex;
    align-items: center;
    gap: 12px;
}
.xp-nif-saved-val {
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 900;
    color: var(--dark, #333);
    letter-spacing: 0.1em;
    background: #f0f0ee;
    padding: 10px 16px;
    flex: 1;
}
.xp-nif-edit-btn {
    background: none;
    border: 1px solid rgba(0,0,0,0.15);
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 700;
    color: #888;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.xp-nif-edit-btn:hover { border-color: var(--dark, #333); color: var(--dark, #333); }
.xp-nif-input {
    width: 100%;
    padding: 12px 14px;
    border: none;
    background: #f0f0ee;
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--dark, #333);
    outline: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.xp-nif-input:focus { border-bottom-color: var(--red, #E83D33); }

/* ============================================================
   XPARTS — Product Detail CSS
   themes/xparts/style/xp-product.css
   ============================================================ */

#xp-product-page {
    max-width: var(--container-w, 1280px);
    margin: 0 auto;
    padding: calc(var(--header-h) + 32px) 24px 0;
    font-family: var(--font-main);
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.xp-pd-breadcrumb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}
.xp-pd-back {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--font-main); font-size: 0.72rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--dark, #333); text-decoration: none; transition: color 0.2s;
}
.xp-pd-back:hover { color: var(--red, #E83D33); }
.xp-pd-crumbs { font-family: var(--font-main); font-size: 0.72rem; color: #888; }
.xp-pd-crumbs a { color: #888; text-decoration: none; }
.xp-pd-crumbs a:hover { color: var(--dark, #333); }

/* ── Grid ────────────────────────────────────────────────── */
.xp-pd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    margin-bottom: 0;
    align-items: start;
}

/* ── Galeria ─────────────────────────────────────────────── */
.xp-pd-gallery {
    position: sticky;
    top: calc(var(--header-h) + 16px);
}
.xp-pd-main-img {
    width: 100%; aspect-ratio: 1/1; background: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; margin-bottom: 10px;
}
.xp-pd-main-img img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    transition: opacity 0.2s;
}
.xp-pd-no-img { width: 100%; height: 100%; background: #eee; }
.xp-pd-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.xp-pd-thumb {
    aspect-ratio: 1/1; background-size: cover; background-position: center;
    border: 2px solid transparent; cursor: pointer; background-color: #f5f5f5;
    transition: border-color 0.15s;
}
.xp-pd-thumb.active,
.xp-pd-thumb:hover { border-color: var(--dark, #333); }

/* ── Info ────────────────────────────────────────────────── */
.xp-pd-info { padding-top: 4px; }

/* Rating */
.xp-pd-rating {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.xp-pd-stars { display: flex; gap: 2px; color: var(--dark, #333); }
.xp-pd-rating-txt { font-family: var(--font-main); font-size: 0.78rem; color: #666; flex: 1; }
.xp-pd-wish {
    background: none; border: none; cursor: pointer;
    color: rgba(0,0,0,0.2); padding: 4px; transition: color 0.2s; margin-left: auto;
}
.xp-pd-wish:hover { color: var(--red, #E83D33); }

/* Título */
.xp-pd-vendor {
    font-family: var(--font-main); font-size: 0.7rem; font-weight: 900;
    letter-spacing: 0.12em; color: #888; text-transform: uppercase; margin-bottom: 4px;
}
.xp-pd-title {
    font-family: var(--font-main);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 900; text-transform: uppercase;
    color: var(--dark, #333); line-height: 1.15; margin: 0 0 18px;
}

/* ── Badges ──────────────────────────────────────────────── */
.xp-pd-badges {
    display: flex; gap: 10px; margin-bottom: 18px; align-items: stretch;
}
.xp-pd-payment-badges {
    display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.xp-pd-badge-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 8px 10px;
}
.xp-pd-badge-logo { display: flex; align-items: center; }
.xp-pd-badge-logo img { max-height: 16px; object-fit: contain; }
.xp-pd-badge-text {
    font-family: var(--font-main); font-size: 0.68rem; color: #555; line-height: 1.4;
}
.xp-pd-badge-cta {
    font-family: var(--font-main); font-size: 0.62rem; font-weight: 900;
    letter-spacing: 0.06em; color: var(--red, #E83D33); text-decoration: none;
    white-space: nowrap; border: 1px solid var(--red, #E83D33); padding: 3px 7px;
    transition: all 0.2s; flex-shrink: 0;
}
.xp-pd-badge-cta:hover { background: var(--red, #E83D33); color: #fff; }
.xp-pd-shipping-badge {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid rgba(0,0,0,0.1); padding: 10px 12px;
    flex-shrink: 0; color: var(--dark, #333);
}
.xp-pd-shipping-badge div { display: flex; flex-direction: column; gap: 1px; }
.xp-pd-shipping-badge strong {
    font-family: var(--font-main); font-size: 0.7rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.xp-pd-shipping-badge span { font-family: var(--font-main); font-size: 0.62rem; color: #666; }

/* ── Opções ──────────────────────────────────────────────── */
.xp-pd-option-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.xp-pd-option-label {
    font-family: var(--font-main); font-size: 0.72rem; font-weight: 900;
    letter-spacing: 0.08em; color: var(--dark, #333); min-width: 80px; flex-shrink: 0;
}
.xp-pd-size-select {
    flex: 1; max-width: 200px; height: 36px;
    border: 1px solid rgba(0,0,0,0.2); font-family: var(--font-main); font-size: 0.78rem;
    padding: 0 10px; background: #fff; outline: none; cursor: pointer;
}
.xp-pd-size-select:focus { border-color: var(--dark, #333); }

/* Swatches cor */
.xp-pd-color-row { gap: 6px; }
.xp-pd-color-swatch {
    width: 26px; height: 26px; border: 2px solid rgba(0,0,0,0.12);
    cursor: pointer; padding: 0; overflow: hidden; transition: border-color 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.xp-pd-color-swatch span { display: block; width: 100%; height: 100%; }
.xp-pd-swatch-txt {
    font-family: var(--font-main); font-size: 0.5rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; background: #eee;
}
.xp-pd-color-swatch.selected,
.xp-pd-color-swatch:hover { border-color: var(--dark, #333); transform: scale(1.12); }
.xp-pd-color-swatch.unavailable { opacity: 0.35; cursor: not-allowed; transform: none !important; }

/* Botões de opção */
.xp-pd-opt-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-pd-opt-btn {
    padding: 5px 12px; border: 1px solid rgba(0,0,0,0.15); background: #fff;
    font-family: var(--font-main); font-size: 0.75rem; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
}
.xp-pd-opt-btn:hover,
.xp-pd-opt-btn.selected { border-color: var(--dark, #333); background: var(--dark, #333); color: #fff; }
.xp-pd-opt-btn.unavailable { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }

/* ── Preço ───────────────────────────────────────────────── */
.xp-pd-price-block {
    display: flex; align-items: baseline; gap: 10px;
    margin: 18px 0 20px; flex-wrap: wrap;
}
.xp-pd-price-label {
    font-family: var(--font-main); font-size: 0.7rem; color: #888; width: 100%; margin-bottom: -6px;
}
.xp-pd-price-orig { font-family: var(--font-main); font-size: 1rem; color: #aaa; text-decoration: line-through; }
.xp-pd-price { font-family: var(--font-main); font-size: 1.7rem; font-weight: 900; color: var(--dark, #333); }

/* ── Add to cart ─────────────────────────────────────────── */
.xp-pd-add-row { display: flex; height: 52px; }
.xp-pd-qty {
    display: flex; align-items: center;
    border: 1px solid rgba(0,0,0,0.15); border-right: none; flex-shrink: 0;
}
.xp-pd-qty button {
    width: 48px; height: 100%; background: none; border: none;
    font-size: 1.2rem; cursor: pointer; color: var(--dark, #333);
    transition: background 0.15s; font-family: var(--font-main);
}
.xp-pd-qty button:hover { background: rgba(0,0,0,0.04); }
.xp-pd-qty input {
    width: 52px; height: 100%; text-align: center; border: none;
    border-left: 1px solid rgba(0,0,0,0.1); border-right: 1px solid rgba(0,0,0,0.1);
    font-family: var(--font-main); font-size: 0.9rem; font-weight: 800;
    outline: none; background: #fff;
}
.xp-pd-btn-add {
    flex: 1; background: var(--red, #E83D33); color: #fff; border: none;
    font-family: var(--font-main); font-size: 0.82rem; font-weight: 900;
    letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
    transition: background 0.2s;
}
.xp-pd-btn-add:hover:not(:disabled) { background: #c53028; }
.xp-pd-btn-add:disabled { background: #ccc; cursor: not-allowed; }

/* ── Tabs section ────────────────────────────────────────── */
.xp-pd-tabs-section {
    background: var(--bg-grey, #E6E6E6);
    margin: 40px -24px 0;
    padding: 0 24px 48px;
}
.xp-pd-tabs-bar { display: flex; }
.xp-pd-tab {
    padding: 14px 28px; background: rgba(0,0,0,0.07); border: none;
    font-family: var(--font-main); font-size: 0.78rem; font-weight: 900;
    letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
    color: #777; transition: all 0.15s; border-bottom: 3px solid transparent;
}
.xp-pd-tab.active { background: #fff; color: var(--dark, #333); border-bottom-color: var(--red, #E83D33); }
.xp-pd-tab-pane { background: #fff; padding: 32px; }

/* Detalhes */
.xp-pd-details-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
.xp-pd-details-left p {
    font-family: var(--font-main); font-size: 0.82rem;
    color: #555; margin: 0 0 8px; line-height: 1.6;
}
.xp-pd-details-left strong { color: var(--dark, #333); font-weight: 800; }
.xp-pd-description {
    font-family: var(--font-main); font-size: 0.82rem;
    color: #555; line-height: 1.75; margin-top: 14px;
}
.xp-pd-details-right h4 {
    font-family: var(--font-main); font-size: 0.75rem; font-weight: 900;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark, #333); margin: 0 0 14px;
}
.xp-pd-specs {
    list-style: none; padding: 0; margin: 0;
    font-family: var(--font-main); font-size: 0.82rem; color: #555;
}
.xp-pd-specs li {
    padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,0.06); line-height: 1.5;
}
.xp-pd-specs li:last-child { border-bottom: none; }
.xp-pd-specs strong { color: var(--dark, #333); font-weight: 700; }

/* Reviews */
.xp-pd-review {
    padding: 24px; background: var(--bg-grey, #E6E6E6);
    display: flex; flex-direction: column; gap: 8px; height: 100%;
    box-sizing: border-box;
}
.xp-pd-review-stars { display: flex; gap: 2px; color: var(--dark, #333); }
.xp-pd-review-name {
    font-family: var(--font-main); font-size: 0.8rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--dark, #333);
}
.xp-pd-review-text {
    font-family: var(--font-main); font-size: 0.78rem; color: #555; line-height: 1.6; margin: 0;
}

/* ── Swiper nav comum ────────────────────────────────────── */
.xp-swiper-nav {
    display: flex; align-items: center; gap: 12px; margin-top: 20px;
}
.xp-swiper-btn {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--dark, #333); transition: all 0.15s; flex-shrink: 0;
}
.xp-swiper-btn:hover { border-color: var(--dark, #333); color: var(--red, #E83D33); }
.xp-swiper-progress { flex: 1; height: 2px; background: rgba(0,0,0,0.1); }
.xp-swiper-progress-bar { height: 100%; background: var(--red, #E83D33); width: 0; transition: width 0.3s; }

/* ── Relacionados ────────────────────────────────────────── */
.xp-pd-related {
    padding: 48px 24px 60px;
    max-width: var(--container-w, 1280px);
    margin: 0 auto;
}
.xp-pd-section-title {
    font-family: var(--font-main); font-size: 0.78rem; font-weight: 900;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark, #333);
    margin: 0 0 20px;
}
.xp-pd-swiper-wrap { overflow: hidden; }
.xp-pd-swiper { overflow: visible; }
.xp-pd-related-nav { margin-top: 20px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .xp-pd-grid { gap: 32px; }
    .xp-pd-details-grid { grid-template-columns: 1fr; gap: 24px; }
    .xp-pd-badges { flex-direction: column; }
}
@media (max-width: 768px) {
    .xp-pd-grid { grid-template-columns: 1fr; }
    .xp-pd-gallery { position: static; }
    .xp-pd-title { font-size: 1.4rem; }
    .xp-pd-tabs-section { margin: 32px -16px 0; padding: 0 16px 32px; }
    .xp-pd-tab-pane { padding: 20px 16px; }
    .xp-pd-details-grid { grid-template-columns: 1fr; }
    #xp-product-page { padding-left: 16px; padding-right: 16px; }
    .xp-pd-related { padding: 32px 16px 48px; }
}

/* ============================================================
   XPARTS — Login/Register Page
   themes/xparts/style/xp-login.css
   ============================================================ */

#xp-login-page {
    max-width: var(--container-w, 1280px);
    margin: 0 auto;
    padding: calc(var(--header-h) + 32px) 24px 80px;
    font-family: var(--font-main);
}

/* Back link */
.xp-login-back {
    margin-bottom: 32px;
}
.xp-login-back a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark, #333);
    text-decoration: none;
    transition: color 0.2s;
}
.xp-login-back a:hover { color: var(--red, #E83D33); }

/* Mensagens */
.xp-login-msg {
    padding: 12px 16px;
    margin-bottom: 20px;
    font-family: var(--font-main);
    font-size: 0.82rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
	margin-top: 100px;
}
.xp-login-msg--success { background: #d4edda; color: #155724; border-left: 3px solid #28a745; }
.xp-login-msg--error   { background: #fdf2f2; color: #721c24; border-left: 3px solid var(--red, #E83D33); }

/* Grid dois painéis */
.xp-login-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0 60px;
    max-width: 900px;
    margin: 0 auto;
}

/* Divisor vertical */
.xp-login-sep {
    background: rgba(0,0,0,0.1);
    align-self: stretch;
}

/* Coluna */
.xp-login-col {
    padding: 0;
}

/* Título */
.xp-login-title {
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dark, #333);
    margin: 0 0 28px;
    text-align: center;
}

/* Form */
.xp-login-form { display: flex; flex-direction: column; gap: 0; }

.xp-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.xp-form-group label {
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dark, #333);
}
.xp-form-group input {
    width: 100%;
    padding: 13px 14px;
    border: none;
    background: #f0f0ee;
    font-family: var(--font-main);
    font-size: 0.88rem;
    color: var(--dark, #333);
    box-sizing: border-box;
    outline: none;
    transition: background 0.15s;
    border-bottom: 2px solid transparent;
}
.xp-form-group input:focus {
    background: #e8e8e5;
    border-bottom-color: var(--red, #E83D33);
}

/* Row de dois inputs lado a lado */
.xp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.xp-form-row .xp-form-group { margin-bottom: 16px; }

/* Actions */
.xp-login-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
}

/* Botão */
.xp-btn-login {
    flex-shrink: 0;
    padding: 14px 40px;
    background: var(--red, #E83D33);
    color: #fff;
    border: none;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}
.xp-btn-login:hover { background: #c53028; }

/* Forgot */
.xp-forgot-link {
    font-family: var(--font-main);
    font-size: 0.75rem;
    color: #888;
    text-decoration: underline;
    transition: color 0.2s;
    white-space: nowrap;
}
.xp-forgot-link:hover { color: var(--dark, #333); }

/* Divider Google */
.xp-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    color: #aaa;
    font-family: var(--font-main);
    font-size: 0.72rem;
}
.xp-login-divider::before,
.xp-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0,0,0,0.1);
}

/* Botão Google */
.xp-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid #d0d0d0;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 600;
    color: #3c4043;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.15s, box-shadow 0.15s;
}
.xp-btn-google:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .xp-login-grid {
        grid-template-columns: 1fr;
        gap: 40px 0;
    }
    .xp-login-sep {
        width: 100%;
        height: 1px;
        align-self: auto;
    }
    .xp-form-row {
        grid-template-columns: 1fr;
    }
    .xp-login-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .xp-btn-login {
        width: 100%;
        text-align: center;
    }
}

/* ── Login single column ─────────────────────────────────── */
.xp-login-grid--single {
    grid-template-columns: 1fr;
    max-width: 480px;
}

/* ── Registo ─────────────────────────────────────────────── */
.xp-register-wrap { max-width: 680px; margin: 0 auto; }

.xp-input-wrap {
    position: relative; display: flex; align-items: center;
}
.xp-input-wrap input {
    padding-right: 44px;
}
.xp-eye-btn {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 44px; background: none; border: none;
    cursor: pointer; color: #aaa; display: flex;
    align-items: center; justify-content: center;
    transition: color 0.2s;
}
.xp-eye-btn:hover,
.xp-eye-btn.active { color: var(--dark, #333); }

/* Checkboxes */
.xp-register-checks { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.xp-rcheck {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    font-family: var(--font-main); font-size: 0.75rem; color: #555; line-height: 1.5;
}
.xp-rcheck input { display: none; }
.xp-rcheck-box {
    width: 16px; height: 16px; border: 1px solid rgba(0,0,0,0.2);
    flex-shrink: 0; margin-top: 1px; position: relative;
    background: #fff; transition: all 0.15s;
}
.xp-rcheck input:checked ~ .xp-rcheck-box {
    background: var(--dark, #333); border-color: var(--dark, #333);
}
.xp-rcheck input:checked ~ .xp-rcheck-box::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 5px; height: 8px; border: 2px solid #fff;
    border-top: none; border-left: none; transform: rotate(45deg);
}
.xp-rcheck a { color: var(--red, #E83D33); text-decoration: underline; }

/* Link "Já tem conta?" */
.xp-register-back-link {
    text-align: center; margin-top: 24px;
    font-family: var(--font-main); font-size: 0.82rem; color: #888;
}
.xp-register-back-link a {
    color: var(--dark, #333); font-weight: 800; text-decoration: underline;
}

/* ── Forgot password ─────────────────────────────────────── */
.xp-forgot-desc {
    font-family: var(--font-main);
    font-size: 0.82rem;
    color: #888;
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.6;
}



/* ============================================================
   XPARTS — Profile Page CSS
   themes/xparts/style/xp-profile.css
   ============================================================ */

#xp-profile-page {
    max-width: var(--container-w, 1280px);
    margin: 0 auto;
    padding: calc(var(--header-h) + 32px) 24px 80px;
    font-family: var(--font-main);
}

/* ── Back ────────────────────────────────────────────────── */
.xp-profile-back { margin-bottom: 24px; }
.xp-profile-back a {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-main); font-size: 0.72rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--dark, #333); text-decoration: none; transition: color 0.2s;
}
.xp-profile-back a:hover { color: var(--red, #E83D33); }

/* ── Title ───────────────────────────────────────────────── */
.xp-profile-title {
    text-align: center;
    font-family: var(--font-main); font-size: 1.1rem; font-weight: 900;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--dark, #333); margin: 0 0 32px;
}

/* ── B2B ─────────────────────────────────────────────────── */
.xp-b2b-banner {
    display: flex; align-items: center; gap: 24px;
    background: var(--dark, #333); color: #fff;
    padding: 20px 28px; margin-bottom: 32px; flex-wrap: wrap;
}
.xp-b2b-left { display: flex; align-items: center; gap: 16px; flex: 1; flex-wrap: wrap; }
.xp-b2b-label { font-family: var(--font-main); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; }
.xp-b2b-code { background: rgba(255,255,255,0.1); padding: 6px 14px; font-size: 0.88rem; letter-spacing: 2px; font-weight: 700; }
.xp-b2b-copy {
    background: var(--red, #E83D33); color: #fff; border: none;
    padding: 6px 14px; font-family: var(--font-main); font-size: 0.72rem;
    font-weight: 800; cursor: pointer; letter-spacing: 0.06em; transition: background 0.2s;
}
.xp-b2b-copy:hover { background: #c53028; }
.xp-b2b-badge {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,0.08); padding: 12px 20px;
    font-family: var(--font-main); font-size: 0.62rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.6);
}
.xp-b2b-badge span { font-size: 1.4rem; font-weight: 900; color: #fff; }
.xp-b2b-progress-wrap { width: 100%; }
.xp-b2b-progress-bar { height: 4px; background: rgba(255,255,255,0.15); margin-bottom: 6px; }
.xp-b2b-progress-bar div { height: 100%; background: var(--red, #E83D33); transition: width 0.3s; }
.xp-b2b-progress-wrap span { font-size: 0.68rem; color: rgba(255,255,255,0.5); }

/* ── Tabs ────────────────────────────────────────────────── */
.xp-profile-tabs {
    display: flex; border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 40px; overflow-x: auto; scrollbar-width: none;
}
.xp-profile-tabs::-webkit-scrollbar { display: none; }
.xp-profile-tab {
    padding: 16px 28px; background: none; border: none;
    font-family: var(--font-main); font-size: 0.75rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase; color: #888;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    border-bottom: 2px solid transparent; transition: all 0.15s;
    display: flex; align-items: center;
}
.xp-profile-tab:hover { color: var(--dark, #333); }
.xp-profile-tab.active {
    color: var(--dark, #333); background: #f5f5f5;
    border-bottom-color: var(--red, #E83D33);
}
.xp-profile-logout { margin-left: auto; text-decoration: underline; }

/* ── Panes ───────────────────────────────────────────────── */
.xp-profile-pane { display: none; }
.xp-profile-pane.active { display: block; }

.xp-profile-msg {
    background: #fdf2f2; color: #721c24;
    border-left: 3px solid var(--red, #E83D33);
    padding: 12px 16px; margin-bottom: 20px;
    font-family: var(--font-main); font-size: 0.82rem;
}

/* ── Encomendas ──────────────────────────────────────────── */
.xp-order-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,0.08);
    cursor: pointer; transition: padding 0.15s;
}
.xp-order-row:hover,
.xp-order-row.open { padding-left: 12px; padding-right: 12px; background: #fafafa; border-bottom-color: transparent; }
.xp-order-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xp-order-name { font-family: var(--font-main); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; }
.xp-order-date { font-family: var(--font-main); font-size: 0.78rem; color: #888; }
.xp-order-badge {
    font-family: var(--font-main); font-size: 0.65rem; font-weight: 800;
    padding: 3px 8px; letter-spacing: 0.06em;
}
.xp-badge-pending { background: #fff8e1; color: #e65100; }
.xp-badge-paid    { background: #e8f5e9; color: #2e7d32; }
.xp-order-right { display: flex; align-items: center; gap: 16px; }
.xp-order-total { font-family: var(--font-main); font-size: 0.9rem; font-weight: 800; color: var(--red, #E83D33); }
.xp-order-arrow { color: #888; transition: transform 0.25s; flex-shrink: 0; }
.xp-order-row.open .xp-order-arrow { transform: rotate(180deg); }

.xp-order-detail {
    max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
    background: #fafafa; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.xp-order-detail.open { max-height: 2000px; padding: 20px 12px 28px; }

/* Guia pagamento */
.xp-pay-guide {
    padding: 16px 20px; margin-bottom: 20px;
    border-left: 3px solid var(--red, #E83D33); background: rgba(232,61,51,0.04);
}
.xp-pay-guide strong { font-family: var(--font-main); font-size: 0.82rem; font-weight: 800; display: block; margin-bottom: 10px; }
.xp-pay-fields { display: flex; gap: 32px; flex-wrap: wrap; }
.xp-pay-fields div { display: flex; flex-direction: column; gap: 3px; }
.xp-pay-fields span { font-family: var(--font-main); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; color: #888; text-transform: uppercase; }
.xp-pay-fields strong { font-family: var(--font-main); font-size: 1rem; font-weight: 900; color: var(--dark, #333); }

/* Tabela de produtos */
.xp-order-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.xp-order-table tr { border-bottom: 1px solid rgba(0,0,0,0.06); }
.xp-order-table td { padding: 14px 8px; font-family: var(--font-main); font-size: 0.78rem; vertical-align: middle; }
.xp-ot-img { width: 72px; }
.xp-ot-img img { width: 72px; height: 72px; object-fit: contain; display: block; background: #fff; }
.xp-ot-info { padding-left: 16px !important; }
.xp-ot-info strong { display: block; font-weight: 800; color: var(--dark,#333); margin-bottom: 3px; }
.xp-ot-info span { color: #888; font-size: 0.72rem; }
.xp-ot-qty, .xp-ot-price { color: #666; text-align: center; }
.xp-ot-total { text-align: right; font-weight: 800; }

/* Payment guide variants */
.xp-pay-bt { border-left-color: #555; background: rgba(0,0,0,0.03); }

/* Status inline */
.xp-status-pending { color: #b45309; font-weight: 700; }

/* Rodapé encomenda */
.xp-order-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.xp-btn-invoice {
    background: var(--red, #E83D33); color: #fff; border: none;
    padding: 14px 40px; font-family: var(--font-main); font-size: 0.78rem;
    font-weight: 900; letter-spacing: 0.1em; cursor: pointer; transition: background 0.2s;
    align-self: flex-end;
}
.xp-btn-invoice:hover { background: #c53028; }
.xp-order-summary { min-width: 240px; }
.xp-order-summary div {
    display: flex; justify-content: space-between;
    padding: 7px 0; font-family: var(--font-main); font-size: 0.78rem; color: #666;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.xp-summary-total {
    font-size: 0.9rem !important; font-weight: 800; color: var(--dark,#333) !important;
    border-bottom: none !important; padding-top: 12px !important; border-top: 2px solid rgba(0,0,0,0.1);
}

/* ── Forms (Dados + Password) ────────────────────────────── */
.xp-details-form { max-width: 780px; }
.xp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.xp-fg { display: flex; flex-direction: column; gap: 6px; }
.xp-fg--wide { grid-column: 1 / 2; }
.xp-fg--full { grid-column: 1 / -1; }
.xp-fg label {
    font-family: var(--font-main); font-size: 0.72rem; font-weight: 700;
    color: #555; letter-spacing: 0.04em;
}
.xp-fg input,
.xp-fg select {
    padding: 12px 14px; border: none; background: #f0f0ee;
    font-family: var(--font-main); font-size: 0.85rem; color: var(--dark,#333);
    outline: none; border-bottom: 2px solid transparent; transition: all 0.15s;
    box-sizing: border-box; width: 100%;
}
.xp-fg input:focus,
.xp-fg select:focus { background: #e8e8e5; border-bottom-color: var(--red, #E83D33); }
.xp-form-actions { margin-top: 8px; }
.xp-btn-save {
    padding: 14px 48px; background: var(--red, #E83D33); color: #fff; border: none;
    font-family: var(--font-main); font-size: 0.82rem; font-weight: 900;
    letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
    transition: background 0.2s;
}
.xp-btn-save:hover { background: #c53028; }

/* ── Moradas ─────────────────────────────────────────────── */
.xp-addr-block {
    padding: 24px 0; border-bottom: 1px solid rgba(0,0,0,0.08); margin-bottom: 8px;
}
.xp-addr-block-title {
    font-family: var(--font-main); font-size: 0.72rem; font-weight: 900;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark,#333);
    margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.xp-addr-note {
    font-size: 0.78rem; color: #888; margin: -10px 0 16px; font-style: italic;
}
.xp-addr-default {
    background: var(--dark,#333); color: #fff;
    font-size: 0.62rem; padding: 2px 8px; letter-spacing: 0.06em;
}
.xp-addr-grid { max-width: 780px; }
.xp-fg--addr { grid-column: 1 / -1; }
.xp-fg--cp .xp-cp-wrap { display: flex; align-items: center; gap: 8px; }
.xp-fg--cp .xp-cp-wrap span { color: #888; }
.xp-fg--cp input { padding: 12px 10px; text-align: center; }
.xp-addr-actions { margin-top: 12px; }
.xp-btn-addr-del {
    background: none; border: none; font-family: var(--font-main);
    font-size: 0.72rem; color: #aaa; cursor: pointer; text-decoration: underline;
    padding: 0; transition: color 0.2s;
}
.xp-btn-addr-del:hover { color: var(--red, #E83D33); }
.xp-addr-form-footer {
    display: flex; align-items: center; gap: 16px; margin-top: 28px;
}
.xp-btn-add-addr {
    width: 44px; height: 44px; background: var(--red, #E83D33); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 300; text-decoration: none;
    transition: background 0.2s; flex-shrink: 0;
}
.xp-btn-add-addr:hover { background: #c53028; }
.xp-btn-cancel {
    font-family: var(--font-main); font-size: 0.78rem; color: #888;
    text-decoration: underline; text-underline-offset: 2px;
}

/* ── Empty / Info ────────────────────────────────────────── */
.xp-profile-empty { text-align: center; padding: 60px 20px; }
.xp-profile-empty p { font-family: var(--font-main); font-size: 0.9rem; color: #999; margin-bottom: 20px; }
.xp-btn-shop {
    display: inline-block; padding: 12px 32px;
    background: var(--dark,#333); color: #fff;
    font-family: var(--font-main); font-size: 0.78rem;
    font-weight: 800; letter-spacing: 0.08em; text-decoration: none;
    transition: background 0.2s;
}
.xp-btn-shop:hover { background: var(--red, #E83D33); }
.xp-profile-info-msg {
    max-width: 500px; text-align: center; padding: 40px 24px;
    background: #f5f5f5; margin: 0 auto;
}
.xp-profile-info-msg p { font-family: var(--font-main); font-size: 0.85rem; color: #555; margin-bottom: 20px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .xp-form-grid { grid-template-columns: 1fr; }
    .xp-fg--wide, .xp-fg--full { grid-column: 1; }
    .xp-order-footer { flex-direction: column; }
    .xp-btn-invoice { width: 100%; text-align: center; }
    .xp-order-summary { width: 100%; }
    .xp-profile-tab { padding: 14px 16px; font-size: 0.68rem; }
    #xp-profile-page { padding-left: 16px; padding-right: 16px; }
}

/* ── DOB selects ─────────────────────────────────────────── */
.xp-dob-wrap {
    display: flex; gap: 10px;
}
.xp-dob-wrap select {
    flex: 1; padding: 12px 10px; border: none; background: #f0f0ee;
    font-family: var(--font-main); font-size: 0.85rem; color: var(--dark,#333);
    outline: none; border-bottom: 2px solid transparent; transition: all 0.15s;
    cursor: pointer;
}
.xp-dob-wrap select:focus { background: #e8e8e5; border-bottom-color: var(--red, #E83D33); }

.xp-btn-addr-default {
    background: none;
    border: 1px solid rgba(0,0,0,0.15);
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 700;
    color: #888;
    padding: 7px 14px;
    cursor: pointer;
    transition: all 0.15s;
    margin-right: 8px;
}
.xp-btn-addr-default:hover {
    border-color: var(--dark, #333);
    color: var(--dark, #333);
}

/* ═══════════════════════════════════════ RETURNS ═══════════════════════════════════════ */

/* ── Return request button ───────────────────────────────── */
.xp-btn-return-request {
    padding: 9px 20px;
    background: none;
    border: 1px solid var(--red, #E83D33);
    color: var(--red, #E83D33);
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}
.xp-btn-return-request:hover {
    background: var(--red, #E83D33);
    color: #fff;
}

/* ── Return status badges ────────────────────────────────── */
.xp-badge-return-open      { background: #fff3cd; color: #856404; }
.xp-badge-return-closed    { background: #d4edda; color: #155724; }
.xp-badge-return-declined  { background: #f8d7da; color: #721c24; }
.xp-badge-return-cancelled { background: #e2e3e5; color: #383d41; }

/* ── Returns pane rows ───────────────────────────────────── */
.xp-return-row {
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
.xp-return-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    cursor: pointer;
    gap: 16px;
}
.xp-return-header:hover .xp-order-name { color: var(--red, #E83D33); }
.xp-return-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xp-return-right { display: flex; align-items: center; gap: 10px; }
.xp-return-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.xp-return-detail.open { max-height: 900px; }

/* ── Return timeline ─────────────────────────────────────── */
.xp-return-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 20px 0 16px;
}
.xp-rtl-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 90px;
}
.xp-rtl-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    border: 2px solid #ddd;
    background: #fff;
    color: #aaa;
}
.xp-rtl-done .xp-rtl-dot  { background: #155724; border-color: #155724; color: #fff; }
.xp-rtl-pending .xp-rtl-dot { background: #fff; border-color: #ccc; color: #ccc; }
.xp-rtl-label { font-size: 11px; text-align: center; color: #666; font-weight: 500; max-width: 80px; line-height: 1.3; }
.xp-rtl-done .xp-rtl-label { color: #155724; font-weight: 700; }
.xp-rtl-date  { font-size: 10px; color: #aaa; text-align: center; }
.xp-rtl-line {
    flex: 1;
    height: 2px;
    background: #e0e0e0;
    margin-top: 15px;
    min-width: 20px;
}
.xp-rtl-line-done { background: #155724; }

/* ── Return refund box ───────────────────────────────────── */
.xp-return-refund-box {
    background: #d4edda;
    color: #155724;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 13px;
    margin-bottom: 16px;
}
.xp-return-refund-date { color: #4a8c5c; margin-left: 6px; }

/* ── Return items list ───────────────────────────────────── */
.xp-return-items { padding-bottom: 16px; }
.xp-return-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.xp-return-item:last-child { border-bottom: none; }
.xp-return-item-img {
    width: 48px; height: 48px;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 4px;
    flex-shrink: 0;
}
.xp-return-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}
.xp-return-item-info strong { color: #111; font-size: 14px; }
.xp-return-item-info span   { color: #888; }
.xp-return-item-note { font-style: italic; color: #666 !important; }
.xp-return-item-qty { font-size: 13px; color: #555; font-weight: 600; white-space: nowrap; }

/* ── Return modal overlay ────────────────────────────────── */
.xp-return-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.xp-return-modal-overlay.active { display: flex; }

.xp-return-modal {
    background: #fff;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.xp-return-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.xp-return-modal-header h3 {
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.xp-return-modal-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #888;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
}
.xp-return-modal-close:hover { color: var(--dark, #333); }

.xp-return-modal-body { padding: 20px 24px; flex: 1; }

.xp-return-order-ref {
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
    margin: 0 0 16px;
}

.xp-return-field { margin-bottom: 18px; }
.xp-return-field label {
    display: block;
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
}
.xp-return-field select,
.xp-return-field textarea {
    width: 100%;
    padding: 11px 12px;
    background: #f0f0ee;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-main);
    font-size: 0.85rem;
    color: var(--dark, #333);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.xp-return-field select:focus,
.xp-return-field textarea:focus { border-bottom-color: var(--red, #E83D33); }
.xp-return-field textarea { resize: vertical; min-height: 80px; }

.xp-return-items-list { display: flex; flex-direction: column; gap: 8px; }
.xp-return-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f5f5f5;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 0.82rem;
}
.xp-return-item-row input[type="checkbox"] { accent-color: var(--red, #E83D33); }
.xp-return-item-row em { color: #888; font-style: normal; }

.xp-return-msg {
    font-family: var(--font-main);
    font-size: 0.8rem;
    padding: 8px 12px;
    margin-top: 8px;
    display: none;
}
.xp-return-msg:not(:empty) { display: block; }
.xp-return-msg--error   { background: #fdf2f2; color: #721c24; }
.xp-return-msg--success { background: #d4edda; color: #155724; }

.xp-return-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(0,0,0,0.1);
}
.xp-btn-cancel-return {
    padding: 11px 24px;
    background: none;
    border: 1px solid rgba(0,0,0,0.15);
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    color: #888;
    transition: all 0.15s;
}
.xp-btn-cancel-return:hover { border-color: var(--dark,#333); color: var(--dark,#333); }

























/*  RESET browser defaults (Eric Meyer Global Reset)*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

html{
	font-family:montserrat-regular;
	letter-spacing:1.2px;
	font-size:16px;
}

a{
	text-decoration:none;
	color:white;
	transition: color 0.3s ease;
	transition: background 0.3s ease;
}

/* END RESET browser defaults */


/*
============================================================================
 FONTS
============================================================================
*/

/* INTER FONT */

@font-face {
    font-family: 'inter-regular';
    src:  url('fonts/inter/inter_regular.ttf') format('truetype'), 
}

@font-face {
    font-family: 'inter-light';
    src:  url('fonts/inter/inter_light.ttf') format('truetype'), 
}

@font-face {
    font-family: 'inter-thin';
    src:  url('fonts/inter/inter_thin.ttf') format('truetype'), 
}

@font-face {
    font-family: 'inter-bold';
    src:  url('fonts/inter/inter_bold.ttf') format('truetype'), 
}

/* MONTSERRAT FONT */

@font-face {
    font-family: 'montserrat-regular';
    src:  url('fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'), 
}

@font-face {
    font-family: 'montserrat-medium';
    src:  url('fonts/Montserrat/Montserrat-Medium.ttf') format('truetype'), 
}

@font-face {
    font-family: 'montserrat-bold';
    src:  url('fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'), 
}

@font-face {
    font-family: 'montserrat-light';
    src:  url('fonts/Montserrat/Montserrat-Light.ttf') format('truetype'), 
}

.josefin-italic{
    font-family: "Josefin Sans", sans-serif;
    font-style: italic;
    font-size:35px;
}



/*
============================================================================
Structure (for every page in the theme)
============================================================================
*/

.section{
	width:100%;
	float:left;
}

.full{
	max-width:100% !important;
	display: flex;
    flex-direction: column;
    align-items: center;
}

.partial{
	max-width: 1300px;
}

.section-content {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.bold{
	font-weight: bold;
}

.wrap {
	width: 940px;
	margin: 0 auto;
	padding: 10px;
}

.section2 {
	border-top: 1px solid white;
	padding: 30px 0;
}

.section_main {
	padding-top: 10px;
}

.main-content {
	float: left;
	width: 74.4680851%;
}

#sidebar {
	float: right;
	width: 23.4042553%;
}

.section-info{
	padding-top:60px;
	padding-bottom:60px;
	text-align:center;
	color:black;
	line-height: 1;
    display: inline-block;
}

.section-info .title{
	font-size:70px;
}

.section-info .description{
	font-size:21px;
}

.section-info .section-content{
	display:flex;
	flex-direction:column;
	gap:25px;
}

@media (max-width:1250px){
	.section-content{
		max-width:90%;
	}
	.section-info .title{
	    font-size:50px;
    }	
	.section-info .description{
        font-size: 18px;
    }
}


.bg-black{
	background:black;
}

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

.black{
	color:black;
}

.transparent{
	background:transparent;
}

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

#header {
    backdrop-filter: blur(27px);
    -webkit-backdrop-filter: blur(27px);
    z-index: 99;
    position: fixed;
    width: 100%;
    filter: brightness(1.16);
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 120px;
    max-width: 1300px;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.header.shrink {
    height: 70px;
}

/* ─── LOGO ─────────────────────────────────────────────── */

.logo {
    height: 78px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.header.shrink .logo {
    height: 50px;
	overflow:hidden;
}

.logo img {
    height: 100%;
	overflow:hidden;
}

/* ─── NAVIGATION ───────────────────────────────────────── */

.nav .menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 0;
    padding: 0;
}

.menu a {
    text-decoration: none;
    color: #000000;
    font-size: 14px;
    font-family: montserrat-medium, sans-serif;
    letter-spacing: 0.03em;
    transition: color 0.3s ease;
}

.menu a:hover {
    color: #6D7D5A;
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 60px;
    background: transparent;
}

.dropdown-menu {
    position: absolute;
    top: 80px;
    left: 0;
    background: #fff;
    list-style: none;
    padding: 8px 0;
    min-width: 180px;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    padding: 10px 20px;
    white-space: nowrap;
}

.dropdown-menu li a {
    font-size: 13px;
}

.dropdown-menu li a:hover {
    color: #6D7D5A;
}

/* ─── HEADER ACTIONS (Right Side) ──────────────────────── */

.header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Discovery Call Button */
.btn-discovery {
    background: #000;
    color: #fff;
    padding: 10px 18px;
    font-size: 12px;
    font-family: montserrat-medium, sans-serif;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: 2px solid #000;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-discovery:hover {
    background: transparent;
    color: #000;
}

/* User Actions Container */
.user-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #000;
    transition: opacity 0.3s ease;
}

.user-link:hover {
    opacity: 0.7;
}

.user-name {
    font-size: 14px;
    font-family: montserrat-medium, sans-serif;
    color: #000;
    white-space: nowrap;
}

.icon-link {
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease;
}

.icon-link:hover {
    opacity: 0.7;
}

.icon {
    width: 24px;
    height: 24px;
}

/* Cart */
.cart-link {
    display: flex;
    align-items: center;
    position: relative;
    transition: opacity 0.3s ease;
}

.cart-link:hover {
    opacity: 0.7;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #6D7D5A;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── BURGER MENU (Mobile) ─────────────────────────────── */

.burger {
    width: 30px;
    height: 22px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 101;
}

.burger span {
    width: 100%;
    height: 2px;
    background: black;
    border-radius: 3px;
    transition: 0.3s;
}

.burger.open span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.burger.open span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.burger.open span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

.burger-menu {
    position: fixed;
    right: 0;
    top: 120px;
    width: 0;
    height: 100%;
    transition: all 0.5s ease-in-out;
    z-index: 99;
    backdrop-filter: blur(27px);
    -webkit-backdrop-filter: blur(27px);
    background: rgba(255, 255, 255, 0.95);
    overflow: hidden;
}

.burger-menu.open {
    width: 100%;
}

.burger-menu .nav-links {
    margin-top: 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
    list-style: none;
    padding: 0;
}

.burger-menu li a {
    color: #000;
    font-size: 16px;
    font-family: montserrat-medium, sans-serif;
    text-decoration: none;
}

.burger-menu li a:hover {
    color: #6D7D5A;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1350px) {
    .header {
        max-width: 90%;
    }
    
    .nav .menu {
        gap: 30px;
    }
}

@media (max-width: 1100px) {
    .nav .menu {
        gap: 20px;
    }
    
    .menu a {
        font-size: 13px;
    }
    
    .user-name {
        display: none; /* Esconde nome em tablets */
    }
}

@media (max-width: 1000px) {
    .nav {
        display: none;
    }
    
    .btn-discovery {
        display: none;
    }
    
    .burger {
        display: flex;
    }
    
    .logo {
        position: absolute;
        left: calc(50% - 39px);
    }
    
    .header-actions {
        margin-left: auto;
    }
	
	.header.shrink{
    height: 120px;
    }
}

@media (max-width: 600px) {
    .header {
        height: 80px;
        padding: 0 16px;
    }
	
	.header.shrink{
        height: 80px;
    }
    
    .logo {
        height: 50px;
        left: calc(50% - 25px);
    }
    
    .burger-menu {
        top: 80px;
    }
    
    .user-name {
        display: none;
    }
    
    .header-actions {
        gap: 16px;
    }
}

/*
============================================================================
HOMEPAGE START
============================================================================
*/



#homepage {
}

/* ── Banner Slider ──────────────────────────────────────── */
.banner-slider-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.banner-swiper {
    width: 100%;
    height: 100%;
}

.banner-slide {
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Barra de navegação inferior */
.banner-nav-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 0 0px 70px;
}

.banner-nav-inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.banner-nav-arrows {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Setas — reset ao posicionamento absoluto do Swiper */
.banner-swiper .swiper-button-prev,
.banner-swiper .swiper-button-next {
    position: static;
    margin: 0;
    width: 32px;
    height: 32px;
    color: #fff;
    transform: none;
    top: auto;
}

.banner-swiper .swiper-button-prev img,
.banner-swiper .swiper-button-next img{
	width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

.banner-swiper .swiper-button-prev{
	
}

.banner-swiper .swiper-button-next{
	
}

.banner-swiper .swiper-button-prev::after,
.banner-swiper .swiper-button-next::after {
    font-size: 20px;
	display: none;
}

/* Dots */
.banner-swiper .swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    gap: 3px;
    width: auto !important;
}

.banner-swiper .swiper-pagination-bullet {
    width: 38px;
    height: 3px;
    border-radius: 0;
    background: rgba(255,255,255,0.4);
    opacity: 1;
    margin: 0;
}

.banner-swiper .swiper-pagination-bullet-active {
    background: #fff;
	width: 100px;
}

/* Shop Now */
.banner-shop-now {
    background: #111;
    color: #fff;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}

.banner-shop-now:hover { background: #333; }

.hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 5;
}

/* Hotspot btn — roda para X quando aberto */
.hotspot-btn {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.3s;
    line-height: 1;
}

.hotspot.open .hotspot-btn {
    background: rgba(255,255,255,0.9);
    color: #111;
    transform: none;
}

.hotspot-plus {
    display: inline-block;
    transition: transform 0.3s;
    line-height: 1;
}

.hotspot.open .hotspot-plus {
    transform: rotate(45deg);
}

/* Modal — layout vertical */
.hotspot-modal {
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    background: #fff;
    width: 280px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 20;
}

.hotspot.open .hotspot-modal      { display: block; }
.hotspot.open-left .hotspot-modal { left: auto; right: 0; }
.hotspot.open-top .hotspot-modal  { top: auto; bottom: 36px; }

/* Remover botão close interno */
.modal-close { display: none; }

/* Imagem topo */
.modal-img {
    width: 100%;
    background: #f5f5f5;
}
.modal-img img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    display: block;
    padding: 16px;
    box-sizing: border-box;
}

/* Info */
.modal-inner {
    display: flex;
    flex-direction: column;
}

.modal-info {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 6px;
}

.modal-vendor-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.modal-vendor-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.modal-vendor   { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.modal-designer { font-size: 11px; color: #888; }

.modal-price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.modal-price-label { font-size: 10px; color: #999; }
.modal-price       { font-size: 20px; font-weight: 700; }

.modal-shop-btn {
    display: block;
    background: #6D7D5A;
    color: #fff;
    text-align: center;
    padding: 11px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background 0.2s;
    margin: 0 16px 16px;
}
.modal-shop-btn:hover { background: #5a6849; }



/* Mobile hotspot btn */
.mobile-hotspot-btn {
    display: none;
}

@media (max-width: 768px) {
    .hotspot { display: none; }

    .mobile-hotspot-btn {
        display: flex;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        backdrop-filter: blur(4px);
        border: 2px solid rgba(255,255,255,0.9);
        color: #fff;
        font-size: 28px;
        font-weight: 300;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: background 0.2s;
    }

    .mobile-products-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 1000;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        height: 100%;
        bottom: auto;
        transition: none;
    }

    .mobile-products-overlay.open {
        display: flex;
        bottom: auto;
    }

    .overlay-header {
        position: absolute;
        top: 20px;
        right: 20px;
        border: none;
        padding: 0;
        width: auto;
    }

    .overlay-title { display: none; }

    .overlay-close {
        background: rgba(255,255,255,0.2);
        border: 2px solid rgba(255,255,255,0.8);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: 24px;
        cursor: pointer;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .overlay-slides {
        width: 100%;
        overflow: hidden;
    }

    .overlay-slide-group {
        width: 100%;
    }

    .overlay-swiper {
        width: 100%;
        padding: 0 40px 40px;
        box-sizing: border-box;
    }

    .overlay-swiper .swiper-slide {
        display: flex;
        justify-content: center;
    }

    .overlay-product {
        background: #fff;
        width: 240px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .overlay-product .modal-img {
        background: #f5f5f5;
    }

    .overlay-product .modal-img img {
        width: 100%;
        height: 220px;
        object-fit: contain;
        padding: 16px;
        box-sizing: border-box;
    }

    .overlay-product .modal-info {
        padding: 14px 16px;
    }

    .overlay-product .modal-shop-btn {
        margin: 0 16px 16px;
    }

    .overlay-pagination {
        bottom: 12px !important;
    }

    .overlay-swiper .swiper-pagination-bullet {
        background: rgba(255,255,255,0.5);
    }

    .overlay-swiper .swiper-pagination-bullet-active {
        background: #fff;
    }
}

@media (min-width: 769px) {
    .mobile-products-overlay { display: none !important; }
}

@media (max-width:1350px){
	.banner-nav-inner {
        max-width: 90%;
	}
}

@media (max-width:769px){
    .banner-pagination{
		display:none !important;
	}
}

/* Desktop — esconder overlay */
@media (min-width: 769px) {
    .mobile-products-overlay {
        display: none;
    }
}

/* SERVICES SECTION HOMEPAGE  */

.services{
	position:relative;
}

.services .section-content .accordion {
    display: flex;
    width: 100%;
    height: 500px; 
    overflow: hidden;
	gap: 8px;
}

.services .section-content .accordion-item {
    flex: 2.5; 
    position: relative;
    transition: flex 0.5s ease;
    overflow: hidden;
    cursor: pointer;
	isolation: isolate;
}

.accordion-item::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  mix-blend-mode: multiply;
  z-index: 1;
}

.accordion-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: rgba(109, 125, 90, 0.62);
  mix-blend-mode: multiply;
  z-index: 1;
}

.services .section-content .accordion .accordion-item:hover {
        flex: 5;
    }

.services .section-content .accordion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.services .section-content .accordion-item:hover img {
    transform: scale(1.05);
}

.services .section-content .accordion-content {
    height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	display: flex;
    flex-direction: column;
    justify-content: end;
	color:white;
}

.accordion-content .container-mix-blended{
	width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100px;
    z-index: 1;
    color: white;
	text-align:left;
	background:rgba(109, 125, 90, 0.62);
	mix-blend-mode: multiply;
}

.accordion-content .container-mix-blended::before{
	 content: "";
	position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    background:rgba(109, 125, 90, 0.62);
    z-index: 1;
    mix-blend-mode: multiply;
	width:100%;
}

.accordion-content .container-title{
	height:100px;
	z-index: 2; 
    mix-blend-mode: normal; 
    opacity: 1;
	position:absolute;
	color:white;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	
}

.accordion-content .container-title .title{
    font-size:25px;	
	width:100%;
	text-align:left;
}

.services .section-content .accordion-content .number{
	display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 30px;
    font-size: 18px;
	padding: 30px;
	z-index:3;
	position: absolute;
    bottom: 100px;
}

.services .section-content .accordion-content .number .vertical-line{
	background: white;
    height: 50px;
    width: 2px;
}

.services .section-content .accordion-content .accordion-title-container{
    position:relative;
}



.services .section-content .accordion-content .accordion-title-container p{
	margin: 0;
    padding: 40px 31px;
	font-size:18px;
}

.rotate{
	rotate:-90deg;
}

.services .section-content .accordion-content {
    position: absolute;
    z-index: 2;
}

.services .section-title,
.services .section-mix-blended {
    transition: opacity 0.4s ease;
}

.accordion-item:hover.accordion-item::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    /*background: rgba(109, 125, 90, 1);*/
	background: rgba(0, 0, 0, 1);
    mix-blend-mode: unset;
    z-index: 1;
}

.accordion-content .container{
	height:100%;
	background: rgba(109, 125, 90, 0.32);
	mix-blend-mode: multiply;
    opacity:0;
}

.accordion-content .services-plus{
    font-family: Josefin;
    color: white;
    font-size: 70px;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
	opacity:0;
}

.accordion-content .container::after{
	content:" ";
	background: rgba(109, 125, 90, 0.32);
	mix-blend-mode: multiply;
	width:100%;
	height:80%;
	position:absolute;
	opacity:0;
}

.accordion-item:hover .accordion-content .container,
.accordion-item:hover .accordion-content .container::after,
.accordion-item:hover .accordion-content .services-plus{
    opacity:1;
}

.mobile-only {
        display: none;
    }


@media (max-width:1200px){
	.services .section-content .accordion{
        height: 400px;
    }
}

@media (max-width: 800px) {
    .desktop-only {
        display: none !important;
    }
	
    .mobile-only {
        display: block;
    }

    .services .section-content .acordion-convert .swiper-slide {
        position: relative;
        text-align: center;
    }

    .services .section-content .acordion-convert .swiper-slide img {
        width: 100%;
        height: 60vw;
        object-fit: cover;
    }

    .services .section-content .acordion-convert .swiper-slide .slide-content {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        color: #fff;
        text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    }
	
	.acordion-convert {
    position: relative;
    width: 100%;
}

.acordion-button-next,
.acordion-button-prev {
    position: absolute;
    top: 85%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.acordion-button-next { right: 10px; }
.acordion-button-prev { left: 10px; }

.acordion-convert .swiper-pagination {
    bottom: 10px;
}

.acordion-convert .swiper-pagination-bullet-active {
    background: white;
}
}

@media (max-width: 500px) {
	.services .section-content .acordion-convert .swiper-slide img {
        width: 100%;
        height: 400px;
        object-fit: cover;
    }
}

/* BRANDS HOMEPAGE */

#homepage .brands {
    position: relative;
    float: left;
	margin-top: 75px;
}

#homepage .brands .section-content {
    width: 100%;
}

#homepage .brands .section-content .hp-brands {
    width: 100%;
    height: 720px;
	overflow:hidden;
}

#homepage .brands .section-content .hp-brands .swiper-wrapper {
    height: 100%;
}

#homepage .brands .section-content .hp-brands .swiper-wrapper .swiper-slide {
    width: auto;
}

#homepage .brand-grids {
    display: flex;
    gap: 20px;
	height: inherit;
}

#homepage .grid-block1 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: calc(40% - 20px);
}

#homepage .grid-block1 .top {
    width: 100%;
    height: 350px;
}

#homepage .grid-block1 .bottom-left {
    width: calc(70% - 20px);
    height: 350px;
}

#homepage .grid-block1 .bottom-right {
    width: 30%;
    height: 350px;
}

#homepage .grid-block2 {
    width: 30%;
}

#homepage .brand-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

#homepage .brand-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

#homepage .brand-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.73);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

#homepage .brand-logo{
    width: 50%;
}

#homepage .brand-card:hover .brand-overlay {
    opacity: 1;
}

#homepage .brand-card:hover img {
    transform: scale(1.05);
}

.hp-brands { display: block; }
.mobile-brands { display: none; }

@media (max-width: 1300px) {
    .hp-brands { display: none; }
    .mobile-brands {
        display: block;
        width: 100%;
        height: 400px;
		overflow: hidden;
    }
    .mobile-brands .brand-card {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
        overflow: hidden;
    }
    .mobile-brands .brand-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mobile-brands .swiper-pagination {
        bottom: 10px;
    }
    .mobile-brands .swiper-pagination-bullet-active {
        background: white;
    }
}

/* HOMEPAGE FEATURED PRODUCTS */

.featured { 
    background: white; 
	padding: 0 0 120px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display:flex;
    gap: 50px;	
}

.featured .title{
	text-align: left;
    width: 100%;
	color:#6D7D5A;
	opacity:1;
	line-height: 1;
    display: flex;
    flex-direction: column;
	gap:11px;
	padding: 100px 0;
	text-align:left;
	align-items: center;
}

.featured .title .title-content{
	width: 100%;
	display: flex;
    flex-direction: column;
    gap: 11px;
}

/* === SLIDER === */
.slider-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    /*height: 100vh; /* fills viewport when sticky */
}

.slider {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: max-content;
	 gap: 15px;
}

.product {
    width: calc(97.3vw / 3);
        height: calc(100vh - 324px);
    border: 2px solid #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
	position: relative;
}

.product .product-image{
	position:absolute;
	top:0%;
	width:100%;
	left:0%;
	height:80%;
}

.product .product-image img{
	object-fit:contain;
	width:100%;
	height:100%;
}

.product .product-info{
	position: absolute;
    bottom: 10%;
    left: 5%;
	color:#000000;
	display:flex;
	flex-direction: column;
	gap:10px;
}

.product .product-info .name{
	font-size:21px;
	font-family:inter-thin;
}

.product .product-info .brand{
	font-size:15px;
	letter-spacing:1.3px;
}




/* FEEDBACKS */

.feedback{
	flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 50px;
	padding-top: 75px;
	padding-bottom: 175px;
}

.feedback .feedback-swiper{
    width: 100%;
}

.feedback .feedback-swiper .swiper-slide{
    height: -webkit-fill-available;
    border-right:2px solid black;
}

.feedback .feedback-swiper .swiper-slide .slide-content{
    width: 70%;
    margin-left: 15%;
    height: 100%;
    display: flex;
    text-align: left;
    flex-direction: column;
    gap: 20px;
	color:black;
}

.feedback .feedback-swiper .swiper-slide .slide-content .identification{
    display: flex;
    gap: 5px;
    align-items: center;
}

.feedback .feedback-swiper .swiper-slide .slide-content .identification .name{
    font-family:montserrat-bold;
}

.feedback .feedback-swiper .swiper-slide .slide-content .identification .country{
    display: flex;
    align-items: center;
    gap: 5px;
	font-family:montserrat-bold;
	letter-spacing: 0px;
}

.feedback .feedback-swiper .swiper-slide .slide-content .text{ 
    line-height: 1.2;
	letter-spacing: 0px;
}

.stars {
    display: flex;
    gap: 4px;
}

.star {
    font-size: 34px;
    color: #000;
}

/* HOMEPAGE BLOG */

.homepage-blog{
	position:relative;
}

.homepage-blog .section-mix-blended{
	width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    z-index: 1;
    color: white;
	
	text-align:left;
	background:rgba(109, 125, 90, 0.67);
	mix-blend-mode: multiply;
}

.homepage-blog .section-mix-blended::before{
	 content: "";
	position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    background:rgba(109, 125, 90, 0.67);
    z-index: 1;
    mix-blend-mode: multiply;
	width:100%;
}

.homepage-blog .section-title{
    
	height:100px;
	z-index: 2; 
    mix-blend-mode: normal; 
    opacity: 1;
	position:absolute;
	color:white;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	
}

.homepage-blog .section-title .title{
	width:100%;
	text-align:left;
}

.homepage-blog .section-content .accordion {
    display: flex;
    width: 100%;
    height: 500px; 
    overflow: hidden;
	gap: 8px;
}

.homepage-blog .section-content .accordion-item {
    flex: 2.5; 
    position: relative;
    transition: flex 0.5s ease;
    overflow: hidden;
    cursor: pointer;
	isolation: isolate;
}

/* overlay that blends with image */
.homepage-blog .accordion-item::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: rgba(109, 125, 90, 0.62);
  mix-blend-mode: multiply;
  z-index: 1;
}

.homepage-blog .accordion-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: rgba(109, 125, 90, 0.62);
  mix-blend-mode: multiply;
  z-index: 1;
}

.homepage-blog .section-content .accordion .accordion-item:hover {
        flex: 5;
    }

.homepage-blog .section-content .accordion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.homepage-blog .section-content .accordion-item:hover img {
    transform: scale(1.05);
}

.homepage-blog .section-content .accordion-content {
    height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	display: flex;
    flex-direction: column;
    justify-content: end;
	color:white;
}

.homepage-blog .accordion-content .container-mix-blended{
	width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100px;
    z-index: 1;
    color: white;
	text-align:left;
	background:rgba(109, 125, 90, 0.62);
	mix-blend-mode: multiply;
}

.homepage-blog .accordion-content .container-mix-blended::before{
	 content: "";
	position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    background:rgba(109, 125, 90, 0.62);
    z-index: 1;
    mix-blend-mode: multiply;
	width:100%;
}

.homepage-blog .accordion-content .container-title{
	height:100px;
	z-index: 2; 
    mix-blend-mode: normal; 
    opacity: 1;
	position:absolute;
	color:white;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	
}

.homepage-blog .accordion-content .container-title .title{
    font-size:25px;	
	width:100%;
	text-align:left;
}

.homepage-blog .section-content .accordion-content .number{
	display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 30px;
    font-size: 18px;
	padding: 30px;
	z-index:3;
	position: absolute;
    bottom: 100px;
}

.homepage-blog .section-content .accordion-content .number .vertical-line{
	background: white;
    height: 50px;
    width: 2px;
}

.homepage-blog .section-content .accordion-content .accordion-title-container{
    position:relative;
}

.homepage-blog .section-content .accordion-content .accordion-title-container p{
	margin: 0;
    padding: 40px 31px;
	font-size:18px;
}

.rotate{
	rotate:-90deg;
}

.homepage-blog .section-content .accordion-content {
    position: absolute;
    z-index: 2;
}

.homepage-blog .section-title,
.homepage-blog .section-mix-blended {
    transition: opacity 0.4s ease;
}

.homepage-blog .accordion-item:hover.accordion-item::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: rgba(109, 125, 90, 1);
    mix-blend-mode: unset;
    z-index: 1;
}

.homepage-blog .accordion-content .container{
	height:100%;
	background: rgba(109, 125, 90, 0.32);
	mix-blend-mode: multiply;
    opacity:0;
}

.homepage-blog .accordion-content .services-plus{
    font-family: Josefin;
    color: white;
    font-size: 70px;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
	opacity:0;
}

.homepage-blog .accordion-content .container::after{
	content:" ";
	background: rgba(109, 125, 90, 0.32);
	mix-blend-mode: multiply;
	width:100%;
	height:80%;
	position:absolute;
	opacity:0;
}

.homepage-blog .accordion-item:hover .accordion-content .container,
.homepage-blog .accordion-item:hover .accordion-content .container::after,
.homepage-blog .accordion-item:hover .accordion-content .services-plus{
    opacity:1;
}

.separator-btn{
	height: 175px;
    position: relative;
	display:flex;
	justify-content:center;
}

.separator-btn div{
	width: 100%;
    position: relative;
}

 .separator-btn div a{
	position: absolute;
    right: 0;
	top: 35px;
}


@media (max-width: 800px) {
    .desktop-only {
        display: none !important;
    }
	
    .mobile-only {
        display: block;
    }

    .homepage-blog .section-content .acordion-convert .swiper-slide {
        position: relative;
        text-align: center;
    }

    .homepage-blog .section-content .acordion-convert .swiper-slide img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 10px;
    }

    .homepage-blog .section-content .acordion-convert .swiper-slide .slide-content {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        color: #fff;
        text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    }
}


/*
============================================================================
 REGISTER PAGE
============================================================================
*/
#store-register {
    position:relative;
	top: 120px;
    margin-bottom: 100px;
    padding: 0 20px;
}

.register-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px  0px;
    box-sizing: border-box;
}

.register-title {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--col-black);
    margin: 0 0 36px;
}

/* ── Alertas ───────────────────────────────────────────────── */
.register-alert {
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 13px;
}

.register-alert p { margin: 4px 0; }

.register-alert-error {
    background: #fdf2f2;
    color: #721c24;
    border-left: 3px solid #dc3545;
}

.register-alert-success {
    background: #d4edda;
    color: #155724;
    border-left: 3px solid #28a745;
    text-align: center;
}

/* ── Toggle B2C / B2B ──────────────────────────────────────── */
.register-type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 32px;
    border: 1px solid var(--col-border, #e0e0e0);
}

.register-toggle-btn {
    padding: 12px;
    border: none;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-family: var(--font-sans);
    color: #999;
    transition: all .2s;
}

.register-toggle-btn:first-child {
    border-right: 1px solid var(--col-border, #e0e0e0);
}

.register-toggle-btn.active {
    background: var(--col-black, #111);
    color: #fff;
}

.register-toggle-btn:hover:not(.active) {
    color: var(--col-black, #111);
}

/* ── Form layout ───────────────────────────────────────────── */
.register-form {
    display: flex;
    flex-direction: column;
}

.rform-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 0;
}

.rform-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.rform-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.rform-group label {
    font-size: 12px;
    font-weight: 400;
    color: var(--col-black, #111);
    font-family: var(--font-sans);
}

.rform-group input,
.rform-group select {
    padding: 13px 14px;
    border: none;
    border-radius: 0;
    background: #f2f2f0;
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--col-black, #111);
    box-sizing: border-box;
    width: 100%;
    transition: background .15s;
    appearance: none;
    -webkit-appearance: none;
}

.rform-group input:focus,
.rform-group select:focus {
    outline: none;
    background: #eaeae7;
}

/* ── Date of birth selects ─────────────────────────────────── */
.dob-selects {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 6px;
}

.dob-selects select {
    padding: 13px 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

/* ── Password eye toggle ───────────────────────────────────── */
.rform-input-wrap {
    position: relative;
}

.rform-input-wrap input {
    padding-right: 44px;
}

.rform-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #aaa;
    display: flex;
    align-items: center;
    transition: color .15s;
}

.rform-eye:hover,
.rform-eye.active { color: var(--col-black, #111); }

/* ── B2B fields ────────────────────────────────────────────── */
.b2b-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 20px;
    color: #aaa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-family: var(--font-sans);
}

.b2b-divider::before,
.b2b-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.b2b-notice {
    background: #fafaf8;
    border-left: 3px solid #d0c9b0;
    padding: 10px 14px;
    font-size: 12px;
    color: #777;
    margin-bottom: 20px;
    font-family: var(--font-sans);
}

/* ── Checkboxes privacidade ────────────────────────────────── */
.register-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 8px 0 32px;
}

.rcheck-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.5;
    color: #444;
    font-family: var(--font-sans);
}

.rcheck-label input[type="checkbox"] {
    display: none;
}

.rcheck-box {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #bbb;
    background: #fff;
    margin-top: 1px;
    position: relative;
    transition: background .15s, border-color .15s;
}

.rcheck-label input[type="checkbox"]:checked + .rcheck-box {
    background: var(--col-black, #111);
    border-color: var(--col-black, #111);
}

.rcheck-label input[type="checkbox"]:checked + .rcheck-box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.rcheck-label a {
    color: var(--col-black, #111);
    text-decoration: underline;
}

/* ── Submit ────────────────────────────────────────────────── */
.register-submit {
    display: flex;
    justify-content: center;
}

.btn-register {
    padding: 15px 80px;
    background: var(--col-green, #5a7a5a);
    color: #fff;
    border: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background .2s;
}

.btn-register:hover {
    background: #4a6a4a;
}

/* ── Login link ────────────────────────────────────────────── */
.register-login-link {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: var(--col-grey, #888);
    font-family: var(--font-sans);
}

.register-login-link a {
    color: var(--col-black, #111);
    font-weight: 700;
    text-decoration: none;
}

.register-login-link a:hover {
    text-decoration: underline;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 600px) {
    .register-container {
        padding: 32px 20px 60px;
    }

    .rform-row,
    .rform-row-3 {
        grid-template-columns: 1fr;
    }

    .dob-selects {
        grid-template-columns: 1fr 1fr 1.4fr;
    }

    .btn-register {
        width: 100%;
        padding: 15px;
    }
}

/*
============================================================================
 LOGIN PAGE
============================================================================
*/
#store-login {
    margin-top: 120px;
}

#store-login .content {
    max-width: 460px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

#store-login h1 {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--col-black);
    margin: 0 0 36px;
}

/* ── Mensagens ─────────────────────────────────────────────── */
.success-message {
    background: #d4edda;
    color: #155724;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-left: 3px solid #28a745;
    font-size: 13px;
    text-align: center;
}

.error-message {
    background: #fdf2f2;
    color: #721c24;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-left: 3px solid #dc3545;
    font-size: 13px;
}

/* ── Form — sem background ─────────────────────────────────── */
.login-form {
    background: none;
    padding: 0;
    border-radius: 0;
}

.login-form .form-group {
    margin-bottom: 16px;
}

.login-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--col-black);
    font-family: var(--font-sans);
}

.login-form input {
    width: 100%;
    padding: 13px 14px;
    border: none;
    border-radius: 0;
    background: #f2f2f0;
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--col-black);
    box-sizing: border-box;
    transition: background .15s;
}

.login-form input:focus {
    outline: none;
    background: #eaeae7;
}

/* ── Forgot password — logo abaixo da password ─────────────── */
.forgot-password-link {
    text-align: left;
    margin: 8px 0 24px;
}

.forgot-password-link a {
    font-size: 12px;
    color: var(--col-black);
    text-decoration: underline;
    font-family: var(--font-sans);
}

.forgot-password-link a:hover {
    color: var(--col-grey);
}

/* ── Botão Sign In — verde ─────────────────────────────────── */
.btn-primary {
    width: 100%;
    padding: 15px;
    background: var(--col-green, #5a7a5a);
    color: #fff;
    border: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background .2s;
    margin-bottom: 12px;
}

.btn-primary:hover {
    background: #4a6a4a;
}

/* ── Divider escondido ─────────────────────────────────────── */
.divider {
    display: none;
}

/* ── Google ────────────────────────────────────────────────── */
.social-login-section {
    margin: 0;
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    text-decoration: none;
    color: #3c4043;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans);
    box-sizing: border-box;
    transition: background .15s, box-shadow .15s;
    cursor: pointer;
}

.btn-google:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(60,64,67,.2);
}

.btn-google svg {
    flex-shrink: 0;
}

/* ── Register link ─────────────────────────────────────────── */
.register-link {
    text-align: left;
    margin-top: 20px;
    font-size: 13px;
    color: var(--col-grey);
    font-family: var(--font-sans);
}

.register-link a {
    color: var(--col-black);
    font-weight: 700;
    text-decoration: none;
}

.register-link a:hover {
    text-decoration: underline;
}

/*
============================================================================
 PROFILE PAGE
============================================================================
*/

#profile-page {
    max-width: 1300px;
    margin: 0px auto 0px;
    position: relative;
    top: 120px;
    margin-bottom: 180px;
}
.profile-back {
    margin-bottom: 40px;
}
.profile-back a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: #111;
}
.profile-page-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin: 0 0 40px 0;
}

/* B2B Banner */
.b2b-banner {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #fff;
    padding: 32px;
    border-radius: 12px;
    margin-bottom: 60px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.b2b-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.b2b-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.b2b-subtitle {
    margin: 6px 0 0;
    color: #aaa;
    font-size: 13px;
}
.b2b-discount-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    border-radius: 8px;
    text-align: center;
}
.discount-percentage {
    font-size: 28px;
    font-weight: 700;
    color: #4ade80;
}
.discount-label {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}
.b2b-code-section {
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.code-label {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 10px;
}
.code-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.discount-code {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #fff;
    flex: 1;
}
.btn-copy {
    background: #4ade80;
    color: #000;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s;
}
.btn-copy:hover {
    background: #22c55e;
}
.code-note {
    font-size: 11px;
    color: #888;
    margin-top: 10px;
}
.b2b-progress-section {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 8px;
}
.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.progress-label {
    font-size: 11px;
    color: #aaa;
}
.progress-amounts {
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
}
.progress-remaining {
    text-align: right;
}
.remaining-label {
    font-size: 11px;
    color: #aaa;
}
.remaining-amount {
    font-size: 18px;
    font-weight: 700;
    color: #fbbf24;
    margin-top: 4px;
}
.progress-bar {
    background: rgba(0, 0, 0, 0.3);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
    height: 100%;
    transition: width 0.3s;
}
.b2b-max-tier {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}
.trophy-icon {
    font-size: 24px;
}
.max-tier-text {
    font-size: 14px;
    margin-left: 10px;
    color: #4ade80;
    font-weight: 600;
}

/* Navigation */
.profile-nav {
    display: flex;
    justify-content: center;
    gap: 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 60px;
}
.nav-tab {
    background: none;
    border: none;
    padding: 18px 32px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    color: #999;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.nav-tab:hover {
    color: #111;
}
.nav-tab.active {
    color: #111;
    background: #f5f5f5;
    border-bottom-color: #111;
}
.nav-tab-logout {
    text-decoration: underline;
    margin-left: 40px;
}

/* Tab Content */
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

/* Order Row */
.order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all 0.3s ease;
}
.order-row:hover {
    background: #fafafa;
    padding-left: 16px;
    padding-right: 16px;
}
.order-row.expanded {
    border-bottom: none;
    background: #fafafa;
    padding-left: 16px;
    padding-right: 16px;
}
.order-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.order-number {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.order-date {
    font-size: 13px;
    color: #888;
}
.order-right {
    display: flex;
    align-items: center;
    gap: 24px;
}
.order-total {
    font-size: 16px;
    font-weight: 600;
}
.order-toggle-icon {
    font-size: 14px;
    color: #666;
    transition: transform 0.3s ease;
}
.payment-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    margin-left: 12px;
    letter-spacing: 0.03em;
}
.payment-status-badge.pending {
    background: #fff8e1;
    color: #f57f17;
}
.payment-status-badge.paid {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Payment Guide (Multibanco / MB Way) */
.payment-guide {
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}
.multibanco-guide {
    background: linear-gradient(135deg, #e8f4fd 0%, #d0eaf9 100%);
    border-left: 4px solid #1976d2;
}
.mbway-guide {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-left: 4px solid #2e7d32;
}
.guide-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.guide-icon {
    font-size: 36px;
    flex-shrink: 0;
}
.guide-header-text {
    flex: 1;
}
.guide-header-text strong {
    display: block;
    font-size: 15px;
    color: #111;
    margin-bottom: 4px;
}
.guide-header-text p {
    margin: 0;
    font-size: 12px;
    color: #555;
}
.guide-expires {
    text-align: right;
    flex-shrink: 0;
}
.expires-label {
    font-size: 10px;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.expires-value {
    font-size: 13px;
    font-weight: 600;
    color: #e65100;
    margin-top: 2px;
}
.guide-details {
    display: flex;
    gap: 32px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.guide-field {
    flex: 1;
}
.field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #777;
    margin-bottom: 6px;
}
.field-value {
    font-size: 20px;
    font-weight: 700;
    color: #111;
}
.reference-value {
    font-size: 22px;
    letter-spacing: 2px;
}
.guide-actions {
    text-align: center;
}
.btn-voucher {
    display: inline-block;
    background: #1976d2;
    color: #fff;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s;
}
.btn-voucher:hover {
    background: #1565c0;
}

/* Payment Pending Alert (generico) */
.payment-pending-alert {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-left: 4px solid #ffa726;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.alert-icon {
    font-size: 32px;
    flex-shrink: 0;
}
.alert-content strong {
    display: block;
    font-size: 15px;
    color: #e65100;
    margin-bottom: 6px;
}
.alert-content p {
    margin: 0;
    font-size: 13px;
    color: #5d4037;
    line-height: 1.5;
}
.payment-status-row {
    background: #fff8e1;
    padding: 10px;
    margin: 4px -10px;
    border-radius: 4px;
}
.status-pending {
    color: #f57f17;
    font-weight: 600;
}

/* Order Details */
.order-details {
    background: #fafafa;
    padding: 0 16px 32px 16px;
    border-bottom: 1px solid #e8e8e8;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}
.order-details.show {
    opacity: 1;
    max-height: 2000px;
    padding: 24px 16px 32px 16px;
}

/* Product Table */
.order-table {
    width: 100%;
    margin-bottom: 32px;
    border-collapse: collapse;
}
.order-product-row {
    border-bottom: 1px solid #e8e8e8;
}
.order-product-row td {
    padding: 20px 12px;
    vertical-align: middle;
    font-size: 13px;
}
.product-checkbox input {
    width: 16px;
    height: 16px;
}
.product-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    background: #fff;
}
.product-info {
    padding-left: 20px !important;
}
.product-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.product-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}
.product-variant,
.product-dimensions,
.product-qty {
    color: #666;
}
.product-qty {
    text-align: center;
}
.product-price {
    text-align: right;
    font-weight: 600;
}
.product-total {
    text-align: right;
    font-weight: 700;
}

/* Order Footer */
.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 24px;
}
.btn-view-invoice {
    background: #6d7d5a;
    color: #fff;
    border: none;
    padding: 14px 48px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.3s;
}
.btn-view-invoice:hover {
    background: #5a6849;
}
.order-summary {
    min-width: 280px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: #666;
}
.summary-total {
    border-top: 1px solid #ddd;
    padding-top: 12px;
    margin-top: 8px;
    font-size: 15px;
    color: #111;
}
.summary-total strong {
    font-size: 16px;
}

/* Personal Details */
.details-section {
    max-width: 600px;
    margin: 0 auto;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #e8e8e8;
    font-size: 14px;
    transition: background 0.2s;
}
.detail-row:hover {
    background: #fafafa;
    padding-left: 16px;
    padding-right: 16px;
}
.detail-label {
    font-weight: 600;
    color: #666;
}
.detail-value {
    color: #111;
}

/* Addresses */
.addresses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.address-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}
.address-card:hover {
    border-color: #111;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.address-card.is-default {
    border-color: #111;
    border-width: 2px;
}
.address-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
}
.default-badge {
    background: #111;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.address-actions {
    display: flex;
    gap: 6px;
}
.action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
    border-radius: 4px;
    transition: background 0.2s;
}
.action-btn:hover {
    background: #e8e8e8;
}
.action-delete:hover {
    background: #ffebee;
}
.address-card-body {
    padding: 16px;
}
.address-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.address-line {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}
.empty-text {
    text-align: center;
    color: #999;
    font-size: 14px;
    margin: 40px 0;
}

/* Forms */
.address-form-section,
.password-form-section {
    max-width: 600px;
    margin: 60px auto 0;
    padding: 32px;
    background: #fafafa;
    border-radius: 8px;
}
.address-form-section h3,
.password-form-section h3 {
    margin: 0 0 24px;
    font-size: 16px;
    font-weight: 600;
}
.address-form,
.password-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-field label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
}
.form-field input,
.form-field select {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
}
.form-field input:focus,
.form-field select:focus {
    outline: none;
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
}
.form-field small {
    font-size: 12px;
    color: #888;
}
.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.btn-submit {
    background: #111;
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}
.btn-submit:hover {
    background: #333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.btn-cancel {
    background: #fff;
    color: #111;
    border: 1px solid #ddd;
    padding: 14px 24px;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
}
.btn-cancel:hover {
    background: #f5f5f5;
}

/* Password Tab */
.info-message {
    max-width: 600px;
    margin: 0 auto;
    padding: 32px;
    background: #e3f2fd;
    border-radius: 8px;
    text-align: center;
}
.info-message p {
    margin: 0 0 20px;
    color: #1565c0;
    font-size: 14px;
}
.btn-external {
    display: inline-block;
    background: #1976d2;
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
}
.btn-external:hover {
    background: #1565c0;
    transform: translateY(-1px);
}

/* Alerts */
.alert-message {
    max-width: 600px;
    margin: 0 auto 24px;
    padding: 14px 18px;
    background: #fdecea;
    color: #c62828;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    font-size: 14px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 80px 20px;
}
.empty-state p {
    font-size: 16px;
    color: #888;
    margin-bottom: 24px;
}
.btn-shop {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 14px 32px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: background 0.3s;
}
.btn-shop:hover {
    background: #333;
}

/* Responsive */
@media (max-width: 1000px) {
    .profile-nav {
        flex-wrap: wrap;
    }
    .nav-tab {
        padding: 14px 20px;
        font-size: 11px;
    }
    .nav-tab-logout {
        margin-left: 0;
    }
    .guide-details {
        flex-direction: column;
        gap: 16px;
    }
}
@media (max-width: 768px) {
    #profile-page {
        padding: 0 20px;
        margin-top: 100px;
    }
    .order-table {
        display: block;
        overflow-x: auto;
    }
    .order-footer {
        flex-direction: column;
        gap: 24px;
    }
    .order-summary {
        width: 100%;
    }
    .guide-header {
        flex-wrap: wrap;
    }
}

/*
============================================================================
SERVICES - PROPERTY HUNTINGE PAGE
============================================================================
*/

/* ── Variáveis locais (herda as do tema) ──────────────────── */
.ph-banner,
.ph-intro,
.ph-services,
.ph-tabs-section,
.ph-cta {
    --ph-black:   #111111;
    --ph-grey:    #888888;
    --ph-border:  #e0e0e0;
    --ph-bg:      #f9f9f7;
    --ph-white:   #ffffff;
    --ph-green:   var(--col-green, #2d5a3d);
    --ease:       cubic-bezier(.4,0,.2,1);
}

/* ── BANNER ───────────────────────────────────────────────── */
.ph-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ph-banner-swiper {
    width: 100%;
    height: 100vh;
    min-height: 420px;
    max-height: 100%;
}

.ph-banner-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ph-banner-fallback {
    background-color: #e8e4de;
}

/* Overlay que cobre o banner inteiro e centra em 1300px */
.ph-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none; /* deixa o swiper receber eventos */
}

.ph-banner-overlay-inner {
    max-width: 1300px;
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}

/* Setas — bottom left */
.ph-banner-arrows {
    position: absolute;
    bottom: 100px;
    display: flex;
    align-items: center;
    gap: 30px;
    pointer-events: all;
}

.ph-banner-prev,
.ph-banner-next {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .85;
    transition: opacity .2s var(--ease);
}

.ph-banner-prev:hover,
.ph-banner-next:hover { opacity: 1; }

.ph-banner-prev img,
.ph-banner-next img {
    height: 30px;
    width: auto;
    display: block;
}

/* Bullets — bottom center (relativo ao overlay-inner) */
.ph-banner-pagination {
    position: absolute !important;
    bottom: 125px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    pointer-events: all;
}

.ph-banner-pagination .swiper-pagination-bullet {
    width: 40px;
    height: 3px;
    background: rgba(255,255,255,.5);
    opacity: 1;
	border-radius:0;
    margin: 0 !important;
    transition: background .2s;
    cursor: pointer;
}

.ph-banner-pagination .swiper-pagination-bullet-active {
    background: #fff;
	width:120px;
}

/* ── INTRO ────────────────────────────────────────────────── */
.ph-intro {
    padding: 80px 20px 60px;
    text-align: center;
    background: var(--ph-white);
}

.ph-intro-inner {
    max-width: 700px;
    margin: 0 auto;
}

.ph-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--ph-black);
    margin: 0 0 16px;
}

.ph-subtitle {
    font-size: 15px;
    color: var(--ph-grey);
    margin: 0 0 28px;
    font-style: italic;
}

.ph-lead {
    font-size: 13px;
    line-height: 1.8;
    color: #555;
    max-width: 620px;
    margin: 0 auto;
}

/* ── SERVICES GRID ────────────────────────────────────────── */
.ph-services {
    padding: 20px 20px 80px;
    background: var(--ph-white);
}

.ph-services-inner {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    background: transparent;
    border: none;
}

.ph-service-card {
    background: var(--ph-white);
    padding: 28px 24px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 2px 12px rgba(0,0,0,.05);
    transition: box-shadow .2s var(--ease);
}

.ph-service-card:hover {
    box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 4px 20px rgba(0,0,0,.09);
}

.ph-service-num {
    display: block;
    font-size: 28px;
    font-family: var(--font-serif, Georgia, serif);
    color: var(--ph-green);
    font-weight: 400;
    line-height: 1;
    margin-bottom: 12px;
}

.ph-service-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ph-black);
    margin: 0 0 10px;
    text-transform: uppercase;
}

.ph-service-desc {
    font-size: 12px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* ── TABS SECTION ─────────────────────────────────────────── */
.ph-tabs-section {
    background: var(--ph-white);
    padding: 0 0 80px;
}

/* Wrapper centrado a 1300px */
.ph-tabs-nav-inner,
.ph-tabs-content {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* Navegação */
.ph-tabs-nav {
    border-bottom: 1px solid var(--ph-border);
}

.ph-tabs-nav-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.ph-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 28px 32px 0 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: opacity .2s;
}

.ph-tab-btn:not(:first-child) {
    padding-left: 32px;
    border-left: 1px solid var(--ph-border);
}

.ph-tab-btn:not(.active) { opacity: .4; }
.ph-tab-btn:hover:not(.active) { opacity: .65; }

/* Número + label numa linha, barra logo abaixo */
.ph-tab-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.ph-tab-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--ph-black);
    letter-spacing: .08em;
    flex-shrink: 0;
    font-family: var(--font-sans, sans-serif);
}

.ph-tab-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ph-black);
    font-family: var(--font-sans, sans-serif);
}

/* Barra: número à esquerda, track ocupa o resto — tudo na mesma linha */
.ph-tab-track-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 20px;
}

.ph-tab-track {
    flex: 1;
    height: 2px;
    background: var(--ph-border);
    position: relative;
    overflow: hidden;
}

.ph-tab-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    background: var(--ph-black);
}

/* Tab concluída */
.ph-tab-btn.done .ph-tab-fill {
    width: 100%;
    opacity: .3;
}

/* Conteúdo */
.ph-tabs-content {
    position: relative;
}

.ph-tab-panel {
    display: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.ph-tab-panel.active {
    display: block;
}

.ph-tab-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

.ph-tab-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 60px 0;
}

.ph-tab-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 400;
    color: var(--ph-black);
    margin: 0 0 32px;
}

.ph-tab-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ph-tab-list li {
    font-size: 13px;
    line-height: 1.6;
    color: #444;
    padding-left: 20px;
    position: relative;
}

.ph-tab-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ph-black);
    font-size: 14px;
}

.ph-tab-image img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

/* ── CTA ──────────────────────────────────────────────────── */
.ph-cta {
    padding: 100px 20px;
    text-align: center;
    background: var(--ph-white);
    border-top: 1px solid var(--ph-border);
}

.ph-cta-inner {
    max-width: 600px;
    margin: 0 auto;
}

.ph-cta-text {
    font-size: clamp(22px, 4vw, 36px);
    font-family: var(--font-serif, Georgia, serif);
    font-weight: 400;
    color: var(--ph-black);
    line-height: 1.4;
    margin: 0 0 4px;
}

.ph-cta-highlight {
    font-size: clamp(22px, 4vw, 36px);
    font-family: var(--font-serif, Georgia, serif);
    color: var(--ph-black);
    margin: 0 0 40px;
}

.ph-cta-highlight strong {
    font-weight: 700;
}

.ph-cta-btn {
    display: inline-block;
    padding: 14px 40px;
    background: var(--ph-black);
    color: var(--ph-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-decoration: none;
    font-family: var(--font-sans, sans-serif);
    transition: background .2s var(--ease), color .2s var(--ease);
}

.ph-cta-btn:hover {
    background: transparent;
    color: var(--ph-black);
    outline: 1px solid var(--ph-black);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1350px){
	.ph-banner-overlay-inner {
        width:90%;
    }
}

@media (max-width: 960px) {
    .ph-services-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .ph-tabs-nav-inner {
        padding: 0 20px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ph-tabs-nav-inner::-webkit-scrollbar { display: none; }

    .ph-tab-btn { min-width: 140px; }

    .ph-tabs-content { padding: 0 20px; }

    .ph-tab-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 0;
    }

    .ph-tab-image { order: -1; }
}

@media (max-width: 600px) {
    .ph-banner-swiper {
        height: 55vw;
        min-height: 260px;
    }

    .ph-banner-overlay-inner { padding: 0 20px; }
    .ph-banner-arrows { bottom: 24px; }
    .ph-banner-pagination { bottom: 40px !important; }

    .ph-services-inner {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ph-service-card { padding: 20px 16px; }

    .ph-intro { padding: 52px 20px 40px; }

    .ph-tab-label { display: none; }
    .ph-tab-btn { min-width: 80px; padding: 16px 16px 0 0; }
    .ph-tab-btn:not(:first-child) { padding-left: 16px; }
	.ph-banner-pagination .swiper-pagination-bullet-active{
		width:60px !important;
	}
	
	.ph-banner-pagination .swiper-pagination-bullet{
		width:20px;
	}
	
	.ph-banner-prev img, .ph-banner-next img {
        height: 20px;
    }
}




/*
============================================================================
 PRODUCT DETAIL PAGE
============================================================================
*/

#product-page {
    max-width: 1300px;
    margin: 0 auto;
    color: #111;
    position: relative;
    top: 120px;
    margin-bottom: 180px;
}
#product-page .breadcrumb-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    font-size: 11px;
    letter-spacing: 0.05em;
}
#product-page .breadcrumb-nav a {
    text-decoration: none;
    color: #111;
    font-weight: 600;
}
#product-page .breadcrumb-path {
    color: #888;
}

/* ── Layout ─────────────────────────────────────────────── */
#product-page .product-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

/* ── Gallery ────────────────────────────────────────────── */
#product-page .product-gallery-col {
    position: sticky;
    top: 140px;
    align-self: start;
}
#product-page .main-image-wrap {
    width: 100%;
    aspect-ratio: 1;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    overflow: hidden;
}
#product-page .main-image-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
#product-page .thumbnail-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    position: relative;
}
#product-page .thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s;
}
#product-page .thumb.active,
#product-page .thumb:hover {
    border-color: #111;
}
#product-page .thumb-nav {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #ddd;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 20px;
}

/* ── Product Info ───────────────────────────────────────── */
#product-page .product-info-col {
    padding-top: 10px;
}
#product-page .product-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
#product-page .stars {
    color: #111;
    font-size: 18px;
    letter-spacing: 2px;
}
#product-page .stars .half {
    opacity: 0.5;
}
#product-page .rating-text {
    font-size: 13px;
    color: #666;
}
#product-page .product-brand {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}
#product-page .product-designer {
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}
#product-page .product-title {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.1;
}
#product-page .product-dimensions {
    font-size: 18px;
    color: #666;
    margin-bottom: 24px;
}

/* ── Variations ─────────────────────────────────────────── */
#product-page .variations-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

#product-page .swatch-rect {
    width: 32px;
    height: 32px;
    border: 2px solid #ddd;
    background: #fff;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
    position: relative;
    overflow: hidden;
}
#product-page .swatch-rect:hover,
#product-page .swatch-rect.selected {
    border-color: #111;
}
#product-page .swatch-rect.unavailable {
    opacity: 0.4;
}
#product-page .swatch-rect.unavailable::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #999;
    transform: rotate(-45deg);
}
#product-page .swatch-color {
    display: block;
    width: 100%;
    height: 100%;
}
#product-page .swatch-text {
    font-size: 10px;
    font-weight: 600;
    padding: 0 4px;
    text-align: center;
    line-height: 1.2;
}

#product-page .more-variations-wrap {
    position: relative;
}
#product-page .btn-more-variations {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s;
    white-space: nowrap;
}
#product-page .btn-more-variations:hover {
    border-color: #111;
}

/* Dropdown */
#product-page .variations-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 20px;
    z-index: 100;
    min-width: 240px;
    border-radius: 4px;
}
#product-page .variations-dropdown.open {
    display: block;
}

#product-page .dropdown-option-group {
    margin-bottom: 16px;
}
#product-page .dropdown-option-group:last-child {
    margin-bottom: 0;
}
#product-page .dropdown-option-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #888;
    margin-bottom: 12px;
}
#product-page .dropdown-option-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#product-page .dropdown-swatch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    transition: border-color 0.2s, background 0.2s;
    border-radius: 2px;
}
#product-page .dropdown-swatch:hover,
#product-page .dropdown-swatch.selected {
    border-color: #111;
    background: #f8f8f8;
}
#product-page .dropdown-swatch.unavailable {
    opacity: 0.4;
    text-decoration: line-through;
}

#product-page .dropdown-swatch-color {
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}
#product-page .dropdown-swatch-label {
    font-size: 12px;
    color: #333;
}
#product-page .dropdown-swatch-text {
    font-size: 12px;
    color: #333;
    padding: 0 4px;
}

/* ── Price ──────────────────────────────────────────────── */
#product-page .product-price-block {
    margin-bottom: 24px;
}
#product-page .price-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}
#product-page .price-current {
    font-size: 32px;
    font-weight: 700;
}
#product-page .price-original {
    font-size: 18px;
    color: #999;
    text-decoration: line-through;
}
#product-page .price-b2b {
    font-size: 32px;
    font-weight: 700;
    color: #2563eb;
}

/* ── Add to Cart ────────────────────────────────────────── */
#product-page .qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    height: 50px;
    margin-bottom: 16px;
    width: fit-content;
}
#product-page .qty-selector button {
    width: 50px;
    height: 100%;
    border: none;
    background: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s;
}
#product-page .qty-selector button:hover {
    background: #f5f5f5;
}
#product-page .qty-selector input {
    width: 60px;
    height: 100%;
    text-align: center;
    border: none;
    font-size: 16px;
    font-weight: 600;
}
#product-page .btn-add-cart {
    display: block;
    width: 100%;
    height: 50px;
    background: #6d7d5a;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.3s;
    margin-bottom: 12px;
}
#product-page .btn-add-cart:hover {
    background: #5a6849;
}

#product-page .delivery-note {
    font-size: 12px;
    color: #888;
    margin-bottom: 32px;
}

/* ── Details + Specs full width abaixo do produto ──────── */
#product-page .details-specs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}
#product-page .details-heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 16px 0;
}
#product-page .details-text {
    font-size: 13px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}
#product-page .specs-list {
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}
#product-page .specs-list dt {
    font-weight: 700;
    color: #111;
    margin-top: 8px;
}
#product-page .specs-list dt:first-child {
    margin-top: 0;
}
#product-page .specs-list dd {
    margin: 0 0 2px 0;
    color: #555;
}

/* ── Related Products ───────────────────────────────────── */
#product-page .related-section {
    margin-top: 80px;
    padding-top: 32px;
    border-top: 1px solid #e0e0e0;
}
#product-page .related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    gap: 24px;
}
#product-page .related-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    white-space: nowrap;
}
#product-page .related-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e0e0;
    display: block;
}
#product-page .related-nav {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
#product-page .related-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}
#product-page .related-btn:hover {
    border-color: #111;
    background: #111;
    color: #fff;
}
#product-page .related-slider-wrap {
    overflow: hidden;
}
#product-page .related-track {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease;
}
#product-page .related-card {
    flex: 0 0 calc(20% - 16px);
    min-width: 200px;
    position: relative;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}
#product-page .related-card:hover {
    border-color: #e8e8e8;
}
#product-page .related-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
#product-page .related-img-wrap {
    width: 100%;
    aspect-ratio: 1;
    background: #f5f5f5;
    overflow: hidden;
    margin-bottom: 14px;
}
#product-page .related-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
#product-page .related-card:hover .related-img-wrap img {
    transform: scale(1.04);
}
#product-page .related-no-img {
    width: 100%;
    height: 100%;
    background: #eee;
}
#product-page .related-card-body {
    padding: 0 4px 44px;
}
#product-page .related-vendor {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}
#product-page .related-designer {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}
#product-page .related-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
}
#product-page .related-height {
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}
#product-page .related-rating {
    font-size: 12px;
    color: #111;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
#product-page .related-price-label {
    font-size: 10px;
    color: #999;
    margin-bottom: 2px;
}
#product-page .related-price strong {
    font-size: 15px;
    font-weight: 700;
}
#product-page .related-price-original {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
}
#product-page .related-price-b2b {
    font-size: 15px;
    font-weight: 700;
    color: #2563eb;
}
#product-page .related-add-cart {
    position: absolute;
    bottom: 10px;
    right: 6px;
    width: 34px;
    height: 34px;
    background: #6d7d5a;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#product-page .related-card:hover .related-add-cart {
    opacity: 1;
}
#product-page .related-add-cart:hover {
    background: #5a6849;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
    #product-page .related-card {
        flex: 0 0 calc(25% - 15px);
    }
}
@media (max-width: 900px) {
    #product-page .details-specs-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    #product-page .related-card {
        flex: 0 0 calc(33.333% - 14px);
    }
}
@media (max-width: 768px) {
    #product-page .product-container {
        grid-template-columns: 1fr;
    }
    #product-page .product-gallery-col {
        position: static;
    }
    #product-page .product-title {
        font-size: 28px;
    }
    #product-page .related-card {
        flex: 0 0 calc(50% - 10px);
    }
}
@media (max-width: 480px) {
    #product-page .related-card {
        flex: 0 0 80%;
    }
}


/*
============================================================================
 CART PAGE
============================================================================
*/

#cart-page {
    max-width: 1300px;
    margin: 0px auto 0px;
    position:relative;
	top:120px;
	margin-bottom:200px;
}

/* ─── Header ────────────────────────────────────────────── */

.cart-header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.back-link {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: #111;
}

.cart-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0;
}

/* ─── Cart Table ────────────────────────────────────────── */

.cart-table {
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
    margin-bottom: 40px;
}

.cart-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.cart-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 20px;
    padding: 30px 0;
    border-bottom: 1px solid #e0e0e0;
    align-items: start;
}

.cart-row:last-child {
    border-bottom: none;
}

/* Product Column */
.col-product {
    display: flex;
    align-items: flex-start;
}

.product-cell {
    display: flex;
    gap: 20px;
    width: 100%;
}

.product-thumb {
    width: 120px;
    height: 120px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f5f5f5;
}

.product-thumb-placeholder {
    width: 120px;
    height: 120px;
    background: #f0f0f0;
    flex-shrink: 0;
}

.product-info-cell {
    flex: 1;
    padding-top: 4px;
}

.product-brand {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.product-designer {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
}

.product-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
}

.product-variant {
    font-size: 12px;
    color: #666;
}

/* Price Column */
.col-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.price-original-strike {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}

.price-discounted {
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.price-normal {
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

/* Quantity Column */
.col-qty {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    height: 44px;
}

.qty-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
}

.qty-btn:hover {
    background: #f5f5f5;
}

.qty-input {
    width: 60px;
    height: 44px;
    text-align: center;
    border: none;
    font-size: 15px;
    font-weight: 600;
}

.btn-delete {
    background: none;
    border: none;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    padding: 6px 12px;
    transition: color 0.2s;
}

.btn-delete:hover {
    color: #111;
}

/* Total Column */
.col-total {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    text-align: right;
}

.total-original-strike {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}

.total-amount {
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

/* ─── Footer (Total + Checkout) ────────────────────────── */

.cart-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 40px;
    padding-top: 20px;
}

.cart-total-section {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.total-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.total-value {
    font-size: 24px;
    font-weight: 700;
}

.btn-checkout {
    background: #6D7D5A;
    color: #fff;
    border: none;
    padding: 16px 80px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-checkout:hover {
    background: #5a6849;
}

/* ─── Empty Cart ────────────────────────────────────────── */

.empty-cart-state {
    text-align: center;
    padding: 80px 20px;
}

.empty-cart-state h2 {
    font-size: 24px;
    margin-bottom: 24px;
    color: #666;
}

.btn-continue {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 14px 32px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: background 0.3s;
}

.btn-continue:hover {
    background: #333;
}

/* ─── Messages ──────────────────────────────────────────── */

.cart-message {
    padding: 12px 20px;
    margin-bottom: 24px;
    border-radius: 4px;
    font-size: 14px;
}

.cart-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* ─── Responsive ────────────────────────────────────────── */

@media (max-width: 900px) {
    .cart-table-header {
        display: none;
    }

    .cart-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .product-cell {
        flex-direction: column;
    }

    .product-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .col-price,
    .col-qty,
    .col-total {
        align-items: flex-start;
    }

    .cart-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .cart-total-section {
        justify-content: space-between;
    }

    .btn-checkout {
        width: 100%;
    }
}

@media (max-width: 600px) {
    #cart-page {
        padding: 0 20px;
        margin-top: 100px;
    }

    .product-name {
        font-size: 14px;
    }
}

/*
============================================================================
 PROJECTS PAGE   (GALLERY MODULE)
============================================================================
*/

#projects{
	position:relative;
	top:120px;
	margin-bottom:120px;
}

#projects .parent-categories{
	margin-bottom:100px;
}
#projects .projects-header {
    text-align: center;
    margin-bottom: 40px;
}
#projects .projects-subtitle {
    font-size: 14px;
    color: #888;
}
#projects .projects-title {
    font-size: 42px;
    font-weight: 300;
}
#projects .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
	margin-bottom:100px;
}
#projects .project-item img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}
#projects .project-item a {
    display: block;
    position: relative;
}

#projects .project-image {
    position: relative;
    overflow: hidden;
}

/* overlay escuro */
.project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
	height: 450px;
}

/* símbolo + */
.project-image::before {
    content: "+";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 48px;
    font-weight: 300;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
	font-family:Josefin;
}

/* hover */
.project-item a:hover .project-image::after,
.project-item a:hover .project-image::before {
    opacity: 1;
}

#projects .project-info {
    padding: 10px 0;
    font-size: 16px;
	color:black;
	letter-spacing: 1px;
}
#projects .project-info strong {
    font-weight: 600;
	color:black;
	font-family:montserrat-bold;
}

@media (max-width: 768px) {
    #projects .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    #projects .projects-grid {
        grid-template-columns: 1fr;
    }
}

/*
============================================================================
PAGE GALLERY VIEW
============================================================================
*/

#gallery-view {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 20px;
	position:relative;
	top:120px;
	margin-bottom:120px;
}

.gallery-view-header {
    text-align: left;
    margin-bottom: 40px;
}

.gallery-view-title {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 10px;
}

.gallery-view-description {
    font-size: 14px;
    color: #888;
}

.gallery-view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.gallery-view-grid .gallery-view-item:first-child {
    grid-column: 1 / -1;
}

.gallery-view-item img {
    width: 100%;

    object-fit: cover;
    display: block;
}

.gallery-view-item:first-child img {
    width:100%;
}

.gallery-view-back {
    margin-top: 40px;
    text-align: left;
}

.gallery-view-back a {
    font-size: 14px;
    color: #333;
    text-decoration: none;
}

@media (max-width: 768px) {
    .gallery-view-item:first-child {
        grid-column: 1;
    }
}


/*
============================================================================
FOOTER START
============================================================================
*/

#footer{
	background:#000000;
	color:white;
}

#footer #column-form{
	width: 382px;
}

#footer a{
	color:white;
}

#footer .title{
	font-size:18px;
	font-family:montserrat-bold;
} 

#footer .footer{
	display:flex;
	gap:75px;
	padding:100px 0;
}

#footer .footer .column{
	display:flex;
	flex-direction:column;
	gap:50px;
	width: auto;
}

#footer .footer .column .footer-logo{
	width:210px;
	height:210px;
}

#footer .footer .column .footer-logo img{
	width:100%;
	height:100%;
}

#footer .footer .column .socials{
	display: flex;
    gap: 20px;
}

#footer .footer .column .socials a{
	
}

#footer .footer .column .socials a img{
	
}

#footer .footer .column .contacts{
	display: flex;
    flex-direction: column;
    gap: 50px;
	width: max-content;
	margin-bottom: 35px;
}

#footer .footer .column .contacts .contact{
	display:flex;
	flex-direction:column;
	gap:10px;
}

#footer .footer .column .contacts .contact .email{
	display:flex;
	gap:10px;
	font-size:21px;
}

#footer .footer .column .contacts .contact .number{
	display:flex;
	align-items:center;
	font-size:21px;
}

#footer .footer .column .footer-nav{
	display:flex;
	flex-direction:column;
	gap:15px;
}

#footer .footer .column .footer-nav a{ 
    font-family:montserrat-light;
}


#footer .footer .column .form-contact{
	display:flex;
	gap:20px;
	flex-direction:column;
}

#footer .footer .column .form-contact .text{
	display:flex;
	gap:12px;
	flex-direction:column;
}

#footer .footer .column .form-contact .text .description{

}

#footer .footer .column .form-contact form{
	display: flex;
    flex-direction: column;
    gap: 15px;
}

#footer .footer .column .form-contact form input[type="text"]{
	background:#F5F5F5;
	padding:12px 20px;
	border:none;
	color:black;
	font-size:13px;
	font-family:montserrat-regular;
}

#footer #captcha{
    width: 100%;
    background: white;
    height: 39px;
	object-position: left;
	object-fit:contain;
}

#footer #newsletter_submit{
	text-align:center;
	width:auto;
	border:1px solid white;
	color:white;
	background:transparent;
	font-family:inter-bold;
	font-size:21px;
	padding:6px 0;
	cursor:pointer;
}

#footer #newsletter_submit:hover {
	color:black;
	background:white;
	
}

#footer .footer .column .form-contact form input::placeholder{
	color:#000000;
	opacity:0.6;
	font-family:montserrat-regular;
}

#footer .footer .column .payments{
	display: flex;
    flex-direction: column;
    gap: 50px;
}

#footer .footer .column .payments .text{
	display: flex;
    flex-direction: column;
    gap: 25px;
}

#footer .footer .column .payments .text .description{
}

#footer .footer .column .payments .methods{
	display: flex;
    justify-content: space-between;
}

#footer .footer .column .payments .methods img{
	
}

#footer .footer .column .slogan{ 
	font-size:21px;
	font-family:montserrat-light;
}

#footer .footer .column .questions{
	display:flex;
	flex-direction:column;
	gap:10px;
}

#footer .footer .column .questions .btn-discovery-footer{
	background: white;
    color: black;
    padding: 8px 25px;
	border: 2px solid #000000;
    cursor: pointer;
    transition: background 0.3s ease;
    letter-spacing: 0;
    z-index: 1;
    width: fit-content;
}

#footer .footer .column .questions .btn-discovery-footer:hover{
	background:transparent;
	color:white;
	border: 2px solid white;
}

#footer .footer .column .customer-support{
	display:flex;
	flex-direction:column;
	gap:10px;
}

#footer .footer .column .customer-support a{
	
}

.copyright{
	background:#E2E2E2;
	color:black;
	padding:30px 0;
	justify-content:space-between;
}

.copyright .content{
	width:100%;
	justify-content:space-between;
	display:flex;
	
}

.copyright .content .side{
	font-family:inter-regular;
	letter-spacing:0px;
}


@media (max-width:1350px){
	#footer .footer{
        width: 90%;
		display:grid;
		grid-template-columns: 1fr 1fr;
        gap: 50px;
    }
	
	.copyright .content{
	    width:90%;
	}
}

@media (max-width:768px){
	#footer .footer{
        width: 90%;
		display:flex;
		flex-direction:column;
    }
	
	.copyright .content {
        width: 90%;
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
	
	#footer #column-form {
        width: 100%;
    }
}

/* ═══════════════════════════════════════ CHECKOUT ═══════════════════════════════════════ */

.co-page {
    max-width: 1300px;
    margin: 0 auto;
    padding-top: calc(var(--header-h) + 80px);
    padding-bottom: 80px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.co-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 32px;
}

.co-back {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #888;
    text-decoration: none;
    text-transform: uppercase;
}
.co-back:hover { color: var(--dark); }

.co-pagetitle {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dark);
}

.co-layout {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: 48px;
    align-items: start;
}

.co-section {
    background: #fff;
    border: 2px solid #f5f5f5;
    padding: 0 22px 20px;
    margin-bottom: 8px;
}

.co-section-nif { padding: 14px 22px; }

.co-section-head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dark);
    background: #f5f5f5;
    padding: 12px 22px;
    margin: 0 -22px 18px -22px;
}

.co-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.co-fields-row input {
    width: 100%;
    background: #f5f5f5;
    border: none;
    padding: 11px 12px;
    font-size: 12px;
    color: #333;
    outline: none;
    box-sizing: border-box;
}
.co-fields-row input::placeholder { color: #aaa; }

.co-addr-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.co-addr-box {
    background: #fff;
    padding: 14px 16px;
    outline: 2px solid #f5f5f5;
}

.co-addr-label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    margin-bottom: 14px;
}

.co-addr-label input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #aaa;
    background: #fff;
    flex-shrink: 0;
    margin-top: 1px;
    cursor: pointer;
}
.co-addr-label input[type="radio"]:checked {
    background: var(--dark);
    border-color: var(--dark);
    box-shadow: inset 0 0 0 2px #fff;
}

.co-addr-label-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dark);
    line-height: 1.5;
}

.co-addr-text {
    font-size: 12px;
    color: #555;
    line-height: 1.7;
    padding-left: 23px;
}
.co-addr-empty { color: #bbb; font-style: italic; }

.co-addr-fields input[type="text"] {
    width: 100%;
    background: #f5f5f5;
    border: none;
    padding: 10px 11px;
    font-size: 12px;
    color: #333;
    box-sizing: border-box;
    outline: none;
}
.co-addr-fields input[type="text"]::placeholder { color: #aaa; }

.co-field { margin-bottom: 8px; }

.co-field-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px;
}

.co-nif-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.co-nif-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dark);
    white-space: nowrap;
    flex-shrink: 0;
}
.co-nif-row input[type="text"] {
    flex: 1;
    background: #f5f5f5;
    border: none;
    padding: 10px 12px;
    font-size: 12px;
    color: #333;
    outline: none;
}
.co-nif-row input[type="text"]::placeholder { color: #aaa; }

.co-btn-use-nif {
    background: none;
    border: 1px solid var(--dark);
    color: var(--dark);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.co-btn-use-nif:hover { background: var(--dark); color: #fff; }

.co-shipping-note { font-size: 12px; color: #666; margin: 0 0 14px 0; }
.co-shipping-wait { font-style: italic; }

.co-btn-calc {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    background: var(--dark);
    color: #fff;
    border: none;
    padding: 11px 22px;
    cursor: pointer;
    transition: background 0.15s;
}
.co-btn-calc:hover { background: #333; }

.co-rate-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #f2f2f2;
    cursor: pointer;
    font-size: 12px;
    color: #333;
}
.co-rate-option:last-child { border-bottom: none; }

.co-rate-option input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #aaa;
    background: #fff;
    flex-shrink: 0;
    cursor: pointer;
}
.co-rate-option input[type="radio"]:checked {
    background: var(--dark);
    border-color: var(--dark);
    box-shadow: inset 0 0 0 2px #fff;
}

.co-rate-title { flex: 1; }
.co-rate-price { font-weight: 600; color: var(--dark); white-space: nowrap; }

.co-payment-error {
    background: #fff0f0;
    border: 1px solid #ffcccc;
    color: #cc0000;
    padding: 10px 12px;
    font-size: 12px;
    margin-top: 12px;
}

/* Payment methods IfThenPay */
.co-pm-ifp-list { display: flex; flex-direction: column; }
.co-pm-ifp-option { align-items: center; }
.co-pm-ifp-logo { max-height: 28px; max-width: 80px; object-fit: contain; }

/* BNPL logos (Klarna, SeQura) */
.co-pm-bnpl-logo { max-height: 22px; max-width: 110px; object-fit: contain; flex-shrink: 0; }
.co-pm-bnpl-fallback { display: flex; flex-direction: column; }
.co-pm-bnpl-desc { font-size: 11px; color: #888; margin-left: auto; white-space: nowrap; }

/* Bottom nav */
.co-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 28px;
}

.co-btn-back {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    border: 1px solid var(--red);
    padding: 13px 22px;
    display: inline-block;
    transition: all 0.15s;
}
.co-btn-back:hover { background: var(--red); color: #fff; }

.co-btn-checkout {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    background: var(--red);
    color: #fff;
    border: none;
    padding: 14px 52px;
    cursor: pointer;
    transition: background 0.15s;
}
.co-btn-checkout:hover:not(:disabled) { background: var(--red-dark); }
.co-btn-checkout:disabled { opacity: 0.4; cursor: not-allowed; }
.co-btn-full { width: 100%; margin-top: 12px; }

/* Summary */
.co-summary {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    background: #f5f5f5;
    padding: 22px;
}
.co-summary-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--dark);
}
.co-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid #d8d8d8;
}
.co-item { display: flex; gap: 12px; padding: 10px; background: #e2e2e2; }
.co-item-img { width: 58px; height: 58px; object-fit: contain; flex-shrink: 0; background: #fff; }
.co-item-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.co-item-name { font-size: 11px; color: var(--dark); line-height: 1.45; }
.co-item-variant { font-size: 10px; color: #999; }
.co-item-price { font-size: 11px; color: #333; margin-top: 4px; }

.co-totals { margin-top: 0; }
.co-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
    border-bottom: 1px solid #d8d8d8;
}
.co-total-row:last-child { border-bottom: none; }
.co-total-discount { color: #2e7d32; }
.co-total-final {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark);
    border-top: 1px solid var(--dark);
    border-bottom: none;
    padding-top: 13px;
    margin-top: 2px;
}
.co-total-final strong { font-size: 13px; }

/* Responsive */
@media (max-width: 1250px) { .co-page { max-width: 90%; } }
@media (max-width: 960px) {
    .co-layout { grid-template-columns: 1fr; }
    .co-summary { position: static; border-top: 2px solid var(--dark); margin-top: 16px; }
}
@media (max-width: 640px) {
    .co-page { padding-top: calc(var(--header-h) + 40px); }
    .co-addr-row { grid-template-columns: 1fr; gap: 16px; }
    .co-fields-row { grid-template-columns: 1fr; }
    .co-bottom-nav { flex-direction: column-reverse; gap: 12px; }
    .co-btn-back, .co-btn-checkout { width: 100%; text-align: center; padding: 14px; }
}

/* ── Páginas estáticas (privacidade, termos, resolução de conflitos) ── */
.xp-static-page { padding: 100px 0 80px; }
.xp-static-page h1 { font-family: var(--font-main); font-size: 2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 40px; }
.xp-static-page h2 { font-family: var(--font-main); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 32px 0 12px; }
.xp-static-page p, .xp-static-page li { font-size: .95rem; line-height: 1.75; color: #333; margin-bottom: 12px; }
.xp-static-page ul, .xp-static-page ol { padding-left: 24px; margin-bottom: 16px; }
.xp-static-page a { color: var(--red); text-decoration: underline; }
.xp-static-page a:hover { opacity: .8; }
.xp-static-updated { margin-top: 40px; color: #888; font-size: .85rem; }