/* ==========================================================================
   TRAPEZAPE THEME — Stylesheet principal
   OpenCart 4 · Roupa de bebê e criança
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Patrick+Hand&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    --tz-cream:        #FFF7F1;
    --tz-cream-soft:   #FFE9DC;
    --tz-cream-border: #FFE3D4;
    --tz-cream-line:   #FFF0E0;

    --tz-pink:         #FFD9E1;
    --tz-pink-ink:     #C2548A;
    --tz-blue:         #C9E4FF;
    --tz-blue-ink:     #1E5A8C;
    --tz-sage:         #D6E8C9;
    --tz-sage-ink:     #4A6B2E;
    --tz-butter:       #FCEAB4;
    --tz-butter-ink:   #A08020;
    --tz-lilac:        #F2E2F0;
    --tz-lilac-ink:    #8A4A8E;

    --tz-peach:        #F39C44;
    --tz-peach-dark:   #DC7A1F;
    --tz-peach-soft:   #FFE9DC;

    --tz-ink:          #2D2520;
    --tz-ink-soft:     #5D4F40;
    --tz-ink-mute:     #7A6855;
    --tz-ink-faint:    #A89685;

    --tz-white:        #FFFFFF;
    --tz-success:      #4CAF50;
    --tz-danger:       #E55353;
    --tz-warning:      #F39C44;

    --header-bg:       var(--tz-white);
    --header-color:    var(--tz-ink);
    --title-color:     var(--tz-ink);
    --primary-bg:      var(--tz-peach);
    --primary-color:   var(--tz-white);
    --secondary-bg:    var(--tz-ink);
    --secondary-color: var(--tz-white);

    --tz-font-sans:    'Poppins', system-ui, sans-serif;
    --tz-font-hand:    'Patrick Hand', cursive;
    --inv-font:        var(--tz-font-sans);

    --tz-radius-sm:    8px;
    --tz-radius-md:    14px;
    --tz-radius-lg:    22px;
    --tz-radius-pill:  999px;

    --tz-shadow-card:  0 2px 12px rgba(45, 37, 32, 0.05);
    --tz-shadow-hover: 0 8px 24px rgba(45, 37, 32, 0.10);

    --header-height:   84px;
    --top-bar-height:  36px;

    --tz-ease:         cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
html { margin: 0; padding: 0; overflow-x: hidden; scroll-behavior: smooth; background: var(--tz-white); }

body {
    margin: 0; padding: 0;
    font-family: var(--tz-font-sans);
    font-size: 14px; font-weight: 400;
    color: var(--tz-ink);
    background: var(--tz-white) !important;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reforço: TODOS os containers principais brancos */
#common-home,
#content,
#column-left,
#column-right,
main,
.maincontent-container,
.product-info,
#product-product {
    background: var(--tz-white) !important;
}

/* Botão X global (modal close, offcanvas close) — bonito sempre */
.btn-close,
button.close,
.modal .btn-close,
.offcanvas .btn-close {
    background: var(--tz-cream-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232D2520'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") center/12px no-repeat !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    transition: all 0.2s var(--tz-ease) !important;
    flex-shrink: 0;
}
.btn-close:hover, button.close:hover {
    background-color: var(--tz-peach) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") !important;
    transform: rotate(90deg);
}

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

a {
    color: var(--tz-ink);
    text-decoration: none !important;
    transition: color 0.2s var(--tz-ease);
}
a:hover { color: var(--tz-peach); }

.container { max-width: 1480px; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tz-font-sans);
    font-weight: 700; color: var(--tz-ink);
    letter-spacing: -0.5px; line-height: 1.15;
}
h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

.tz-hand {
    font-family: var(--tz-font-hand);
    font-weight: 400; letter-spacing: 0.3px;
    color: var(--tz-peach);
}

/* ==========================================================================
   3. BOTÕES
   ========================================================================== */
.btn, button.btn {
    font-family: var(--tz-font-sans);
    font-weight: 600;
    border-radius: var(--tz-radius-pill);
    padding: 11px 22px;
    font-size: 13px;
    letter-spacing: 0.3px;
    border: 1.5px solid transparent;
    transition: all 0.25s var(--tz-ease);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

.btn-primary, #content .btn-primary {
    background-color: var(--tz-peach) !important;
    color: var(--tz-white) !important;
    border-color: var(--tz-peach) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    background-color: var(--tz-peach-dark) !important;
    border-color: var(--tz-peach-dark) !important;
    color: var(--tz-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(243, 156, 68, 0.30);
}

.btn-secondary, #content .btn-secondary {
    background-color: var(--tz-ink) !important;
    color: var(--tz-white) !important;
    border-color: var(--tz-ink) !important;
}
.btn-secondary:hover { background-color: #1a1612 !important; transform: translateY(-1px); }

.btn-outline-dark, .btn-outline-primary {
    background: transparent !important;
    color: var(--tz-ink) !important;
    border-color: var(--tz-ink) !important;
}
.btn-outline-dark:hover { background: var(--tz-ink) !important; color: var(--tz-white) !important; }

.btn-link { color: var(--tz-ink) !important; text-decoration: underline !important; text-underline-offset: 3px; }

button:focus:not(:focus-visible) { outline: 0; }

/* ==========================================================================
   4. FORMS
   ========================================================================== */
.form-control, .form-select {
    font-family: var(--tz-font-sans);
    font-size: 14px;
    border: 1.5px solid var(--tz-cream-border);
    border-radius: var(--tz-radius-md);
    padding: 12px 16px;
    background: var(--tz-white);
    color: var(--tz-ink);
    transition: all 0.2s var(--tz-ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--tz-peach);
    box-shadow: 0 0 0 3px rgba(243, 156, 68, 0.15);
    outline: none;
}
.form-control::placeholder { color: var(--tz-ink-faint); }

.form-label, label {
    font-weight: 500; font-size: 13px;
    color: var(--tz-ink-soft); margin-bottom: 6px;
}

.form-floating > label { color: var(--tz-ink-faint); padding-left: 16px; }

/* ==========================================================================
   5. ALERTS
   ========================================================================== */
.alert {
    border-radius: var(--tz-radius-md);
    padding: 14px 20px; border: none;
    font-weight: 500; font-size: 14px;
    position: relative;
}
.alert-success { background: #E8F5E9; color: #2E7D32; }
.alert-danger  { background: #FFEBEE; color: #C62828; }
.alert-warning { background: #FFF8E1; color: #F57C00; }
.alert-info    { background: var(--tz-blue); color: var(--tz-blue-ink); }
.alert .close, .alert .btn-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   6. HEADER
   ========================================================================== */
#main-header {
    background: var(--tz-white);
    position: relative; top: 0; z-index: 1020;
    transition: transform 0.4s var(--tz-ease), background 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
    border-bottom: 1px solid var(--tz-cream-border);
}

#main-header.compact { position: fixed; top: 0; left: 0; right: 0; }
#main-header.header-hidden { transform: translateY(-100%); }
#main-header.header-sticky { box-shadow: 0 2px 16px rgba(45, 37, 32, 0.06); }

.header-top-bar {
    background: var(--tz-peach);
    color: var(--tz-white);
    min-height: var(--top-bar-height);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.3px; padding: 6px 16px;
}
.header-top-bar .topbar_container { padding: 0 !important; background: transparent !important; }
.header-top-bar .topbar_messages { text-align: center; width: 100%; }
.header-top-bar a {
    color: var(--tz-white);
    text-decoration: underline !important;
    text-underline-offset: 2px;
    margin-left: 6px; font-weight: 600;
}

.header-main-container { min-height: var(--header-height); padding: 14px 0; }

.header-logo-section img {
    max-height: 52px; width: auto; display: block;
}

.header-search-section { display: none; }

.header-search-inline {
    flex: 1; max-width: 480px; margin: 0 32px;
    position: relative;
}
.search-form-inline {
    width: 100%;
    background: var(--tz-white);
    border-radius: var(--tz-radius-pill);
    padding: 6px 6px 6px 22px;
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--tz-cream-border);
    transition: all 0.2s var(--tz-ease);
    position: relative;
}
.search-form-inline:focus-within {
    border-color: var(--tz-peach);
    box-shadow: 0 0 0 4px rgba(243, 156, 68, 0.10);
}
.search-icon-left { color: var(--tz-ink-mute); font-size: 14px; }
.search-input-inline {
    border: none; background: transparent; outline: none;
    flex: 1; font-family: var(--tz-font-sans);
    font-size: 14px; color: var(--tz-ink);
    padding: 10px 0;
    min-width: 0;
}
.search-input-inline::placeholder { color: var(--tz-ink-faint); font-weight: 400; }

.search-submit-btn {
    background: var(--tz-peach);
    color: var(--tz-white);
    border: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s var(--tz-ease);
    flex-shrink: 0;
}
.search-submit-btn:hover {
    background: var(--tz-peach-dark);
    transform: scale(1.06);
}

.header-actions-section { gap: 22px; }

.action-btn {
    background: none; border: none; padding: 4px;
    cursor: pointer; position: relative;
    color: var(--tz-ink);
    transition: all 0.2s var(--tz-ease);
    display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    font-family: var(--tz-font-sans);
}
.action-btn i { font-size: 20px; line-height: 1; }
.action-btn .action-label {
    font-size: 9px; font-weight: 600;
    letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--tz-ink-soft);
}
.action-btn:hover { color: var(--tz-peach); transform: translateY(-1px); }
.action-btn:hover .action-label { color: var(--tz-peach); }

.cart-badge-dot {
    position: absolute; top: -2px; right: -4px;
    min-width: 16px; height: 16px;
    background: var(--tz-peach); color: var(--tz-white);
    border-radius: var(--tz-radius-pill);
    font-size: 9px; font-weight: 700;
    display: none; align-items: center; justify-content: center;
    padding: 0 4px; border: 2px solid var(--tz-white);
}

.header-menu-bar {
    background: var(--tz-white);
    border-top: 1px solid var(--tz-cream-line);
    padding: 12px 0;
}

#main-header.compact .header-menu-bar { padding: 8px 0; }
#main-header.compact .header-top-bar { display: none; }
#main-header.compact .header-main-container { min-height: 64px; padding: 8px 0; }
#main-header.compact .header-logo-section img { max-height: 38px; }

/* ==========================================================================
   7. NAVIGATION / MENU
   ========================================================================== */
.nav-main-section { padding: 0; }
.container-menu-wrapper { width: 100%; }
#menu.navbar { padding: 0; }

#menu .navbar-nav {
    display: flex; flex-direction: row;
    gap: 6px; list-style: none; margin: 0; padding: 0;
    justify-content: center; flex-wrap: wrap;
}

#menu .nav-item { position: relative; }

#menu .nav-link {
    font-family: var(--tz-font-sans);
    font-size: 12px; font-weight: 600;
    color: var(--tz-ink);
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 8px 16px !important;
    border-radius: var(--tz-radius-pill);
    transition: all 0.2s var(--tz-ease);
    background: transparent; display: inline-block;
}
#menu .nav-link:hover, #menu .nav-link:focus {
    background: var(--tz-cream); color: var(--tz-ink);
}

#menu .nav-link[href*="promoc"],
#menu .nav-link[href*="sale"],
#menu .nav-link[href*="oferta"] {
    background: var(--tz-peach); color: var(--tz-white);
}
#menu .nav-link[href*="promoc"]:hover,
#menu .nav-link[href*="sale"]:hover,
#menu .nav-link[href*="oferta"]:hover {
    background: var(--tz-peach-dark); color: var(--tz-white);
}

#menu .dropdown-menu {
    border: none; background: var(--tz-white);
    border-radius: var(--tz-radius-md);
    box-shadow: 0 12px 32px rgba(45, 37, 32, 0.10);
    padding: 16px; margin-top: 8px;
    min-width: 240px;
    opacity: 0; visibility: hidden;
    transform: translateY(8px); display: flex;
    flex-wrap: wrap;
    transition: all 0.25s var(--tz-ease);
    pointer-events: none;
    list-style: none;
}
#menu .nav-item.dropdown:hover > .dropdown-menu,
#menu .nav-item.dropdown.show > .dropdown-menu {
    opacity: 1; visibility: visible;
    transform: translateY(0); pointer-events: auto;
}

/* Quando há multiplas colunas (li > ul), cada li vira uma coluna */
#menu .dropdown-menu > li {
    flex: 1 1 auto;
    min-width: 180px;
    list-style: none;
    padding: 0;
}
#menu .dropdown-menu > li > ul.list-unstyled {
    list-style: none;
    margin: 0;
    padding: 0 8px !important;
}
#menu .dropdown-menu > li > ul.list-unstyled > li {
    list-style: none;
}

/* Divider e "Todos em X" ocupam a largura toda */
#menu .dropdown-menu > li:has(hr.dropdown-divider),
#menu .dropdown-menu > li:has(.show-all-link) {
    flex: 1 1 100%;
    width: 100%;
}

#menu .dropdown-toggle::after { display: none; }

#menu .dropdown-item {
    font-family: var(--tz-font-sans);
    font-size: 13px; font-weight: 500;
    color: var(--tz-ink); padding: 8px 14px;
    border-radius: var(--tz-radius-sm);
    text-transform: none; letter-spacing: 0;
    transition: all 0.15s var(--tz-ease);
}
#menu .dropdown-item:hover {
    background: var(--tz-cream); color: var(--tz-peach);
}

#menu .dropdown-divider { border-color: var(--tz-cream-line); margin: 8px 0; }

#menu .show-all-link {
    color: var(--tz-peach) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* ==========================================================================
   8. OFFCANVAS
   ========================================================================== */
.offcanvas {
    font-family: var(--tz-font-sans);
    border: none !important;
    box-shadow: -8px 0 32px rgba(45, 37, 32, 0.12);
    background: var(--tz-white);
}

.offcanvas-header { padding: 20px 24px; border-bottom: 1px solid var(--tz-cream-line); }

.offcanvas-title {
    font-family: var(--tz-font-sans);
    font-weight: 700; letter-spacing: 1.2px;
    font-size: 14px; text-transform: uppercase;
    color: var(--tz-ink);
}

.offcanvas-header .btn-close { margin: 0; }

.offcanvas-body { padding: 24px; }

.header-mobile-menu .action-btn i { font-size: 22px; }

#offcanvasMenu .navbar-nav {
    flex-direction: column !important;
    gap: 0 !important; width: 100% !important;
    display: flex !important;
}

#offcanvasMenu .nav-link {
    padding: 16px 4px !important;
    border-bottom: 1px solid var(--tz-cream-line) !important;
    border-radius: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--tz-ink) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: transparent !important;
}

#offcanvasMenu .dropdown-toggle::after { display: none !important; }

#offcanvasMenu .dropdown-menu {
    display: none;
    position: static !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 12px 0 !important;
    background: var(--tz-cream) !important;
    margin: 0 -24px !important;
    width: calc(100% + 48px) !important;
    border-radius: 0 !important;
    opacity: 1 !important; visibility: visible !important;
    transform: none !important; pointer-events: auto !important;
}

#offcanvasMenu .dropdown-item {
    padding: 10px 32px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--tz-ink-soft) !important;
    background: transparent !important;
    white-space: normal !important;
    text-transform: none !important;
}
#offcanvasMenu .dropdown-item:hover {
    background: var(--tz-cream-soft) !important;
    color: var(--tz-peach) !important;
}

.mobile-menu-wrapper .dropdown-divider { display: none !important; }

/* ==========================================================================
   9. SEARCH RESULT
   ========================================================================== */
.search-wrapper { width: 100%; }

.search-wrapper .input-group {
    border-radius: var(--tz-radius-pill);
    overflow: hidden;
    border: 1.5px solid var(--tz-cream-border);
    transition: border-color 0.2s var(--tz-ease);
}
.search-wrapper .input-group:focus-within { border-color: var(--tz-peach); }

.search-wrapper .form-control {
    border: none !important; border-radius: 0 !important;
    padding: 14px 20px; background: transparent;
    font-size: 14px;
}
.search-wrapper .form-control:focus { box-shadow: none; }

.btn-search, .btn-search-trigger {
    background: var(--tz-peach) !important;
    color: var(--tz-white) !important;
    border: none !important;
    padding: 0 22px !important;
    border-radius: 0 !important;
    font-size: 16px;
    transition: background 0.2s var(--tz-ease);
}
.btn-search:hover, .btn-search-trigger:hover { background: var(--tz-peach-dark) !important; }

.search-result-box { margin-top: 16px; background: transparent; display: none; }

.live-search-list { list-style: none; padding: 0; margin: 0; }

.live-search-item {
    border-bottom: 1px solid var(--tz-cream-line);
    transition: background 0.15s;
}
.live-search-item:last-child { border-bottom: none; }
.live-search-item a {
    display: flex; align-items: center;
    text-decoration: none !important;
    color: var(--tz-ink); padding: 12px 4px; gap: 14px;
}
.live-search-item:hover { background: var(--tz-cream); }

.live-search-item img {
    width: 60px; height: 60px; object-fit: contain;
    background: var(--tz-cream);
    border-radius: var(--tz-radius-sm);
    flex-shrink: 0;
}

.live-search-item .product-info { flex: 1; min-width: 0; }
.live-search-item .product-name {
    font-weight: 600; color: var(--tz-ink);
    font-size: 13px; line-height: 1.3; display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-search-item .product-price {
    font-size: 13px; font-weight: 700;
    color: var(--tz-ink); margin-top: 4px;
}
.live-search-item .special-price { color: var(--tz-peach); margin-right: 6px; }
.live-search-item .text-decoration-line-through { font-weight: 400; color: var(--tz-ink-faint); }

.live-search-view-all { padding: 14px 0 0 0; }
.live-search-view-all a {
    display: flex !important; justify-content: center;
    background: var(--tz-ink) !important;
    color: var(--tz-white) !important;
    border-radius: var(--tz-radius-pill) !important;
    font-weight: 700; text-transform: uppercase;
    font-size: 12px; padding: 14px !important;
    letter-spacing: 0.8px; border: none !important;
}
.live-search-view-all a:hover { background: var(--tz-peach) !important; }

/* ==========================================================================
   10. BREADCRUMBS
   ========================================================================== */
ul.breadcrumb {
    list-style: none; display: flex; flex-wrap: wrap;
    padding: 12px 0; margin: 16px 0;
    font-size: 12px; background-color: transparent;
    border-radius: 0; box-shadow: none;
    font-weight: 500; letter-spacing: 0.4px;
}
ul.breadcrumb li { display: flex; align-items: center; }
ul.breadcrumb li:not(:last-child)::after {
    content: "›"; margin: 0 8px;
    color: var(--tz-ink-faint); font-weight: 400;
}
ul.breadcrumb li a {
    color: var(--tz-ink-mute) !important;
    text-decoration: none !important;
    text-transform: uppercase;
}
ul.breadcrumb li a:hover { color: var(--tz-peach) !important; }
ul.breadcrumb li:last-child a {
    color: var(--tz-ink) !important; font-weight: 600;
    pointer-events: none;
}

/* ==========================================================================
   11. PRODUCT CARDS
   ========================================================================== */
.product-thumb {
    background: var(--tz-white);
    border: 1px solid var(--tz-cream-border);
    border-radius: var(--tz-radius-lg);
    margin-bottom: 20px; padding: 0;
    transition: all 0.3s var(--tz-ease);
    position: relative; display: flex; flex-direction: column;
    text-align: center; overflow: hidden;
}
.product-thumb:hover {
    border-color: var(--tz-peach);
    box-shadow: 0 12px 28px rgba(243, 156, 68, 0.18);
    transform: translateY(-4px);
}

.product-thumb .image {
    position: relative; overflow: hidden;
    background: var(--tz-white); width: 100%;
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
}

.product-thumb .image a {
    display: flex; width: 100%; height: 100%;
    align-items: center; justify-content: center;
    padding: 12px;
}

.product-thumb .image img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform 0.6s var(--tz-ease), opacity 0.4s ease;
}

.product-thumb .image .img-hover {
    position: absolute; top: 12px; left: 12px;
    width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.8s var(--tz-ease);
    z-index: 2;
}

.product-thumb:hover .image .img-primary { opacity: 0; transform: scale(1.08); }
.product-thumb:hover .image .img-hover { opacity: 1; }

.product-badge {
    position: absolute; top: 14px; left: 14px; z-index: 10;
    background: var(--tz-peach); color: var(--tz-white);
    padding: 5px 13px; font-family: var(--tz-font-sans);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    pointer-events: none;
    border-radius: var(--tz-radius-pill);
    box-shadow: 0 3px 8px rgba(243, 156, 68, 0.30);
}
.product-badge.badge-new { background: var(--tz-pink); color: var(--tz-pink-ink); }

.btn-wishlist-corner {
    position: absolute; top: 14px; right: 14px;
    background: var(--tz-white); border: none;
    color: var(--tz-ink-faint);
    font-size: 14px; z-index: 12;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s var(--tz-ease);
    box-shadow: 0 2px 8px rgba(45, 37, 32, 0.08);
}
.btn-wishlist-corner:hover {
    color: var(--tz-pink-ink);
    background: var(--tz-pink);
    transform: scale(1.10);
}

.product-thumb .caption {
    padding: 16px 14px 8px; flex-grow: 1;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    gap: 4px;
}

.product-thumb .caption h4 {
    margin: 0; min-height: 38px;
    display: flex; align-items: center; width: 100%;
}

.product-thumb .caption h4 a {
    font-family: var(--tz-font-sans);
    font-size: 13px; font-weight: 500;
    color: var(--tz-ink); text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    letter-spacing: 0.1px; text-align: center; width: 100%;
}
.product-thumb .caption h4 a:hover { color: var(--tz-peach); }

.product-thumb .caption .price {
    font-family: var(--tz-font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--tz-ink-mute);
    margin-bottom: 4px;
    display: block;
    line-height: 1.7;
    width: 100%;
    text-align: center;
}
.product-thumb .caption .price-new {
    color: var(--tz-peach);
    font-weight: 800;
    font-size: 20px;
    display: inline-block;
    line-height: 1.2;
    letter-spacing: -0.3px;
}
.product-thumb .caption .price-old {
    font-size: 12px;
    color: var(--tz-ink-faint);
    text-decoration: line-through;
    margin-left: 0;
    margin-right: 6px;
    font-weight: 400;
    display: inline-block;
}
.product-thumb .caption .price:not(:has(.price-new)) {
    font-size: 20px;
    font-weight: 800;
    color: var(--tz-ink);
}
.product-thumb .caption .installments {
    font-size: 11px; color: var(--tz-ink-mute);
    font-weight: 500; margin-bottom: 4px;
}

.product-thumb .button-group { margin: 0 16px 18px 16px; z-index: 11; }

.btn-add-cart {
    background: var(--tz-peach); color: var(--tz-white);
    width: 100%; height: 44px;
    border: 1.5px solid var(--tz-peach);
    border-radius: var(--tz-radius-pill);
    font-family: var(--tz-font-sans);
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.25s var(--tz-ease); cursor: pointer;
    box-shadow: 0 2px 8px rgba(243, 156, 68, 0.18);
}
.btn-add-cart::before {
    content: '\f290';
    font-family: 'FontAwesome';
    font-weight: 400;
    font-size: 13px;
}
.btn-add-cart:hover {
    background: var(--tz-peach-dark);
    border-color: var(--tz-peach-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(243, 156, 68, 0.32);
}

/* ==========================================================================
   12. MODULE PRODUCTS
   ========================================================================== */
.module-products {
    padding: 60px 24px 40px;
    max-width: 1480px; margin: 0 auto;
    position: relative;
    background: var(--tz-white);
}

.module-products h3 {
    text-align: center; padding: 0 0 32px 0;
    font-family: var(--tz-font-sans);
    font-size: 28px; font-weight: 700;
    color: var(--tz-ink);
    text-transform: none; letter-spacing: -0.5px;
    margin: 0; position: relative;
}

.module-products h3::before {
    content: 'novidades';
    display: block;
    font-family: var(--tz-font-hand);
    font-size: 26px; color: var(--tz-peach);
    font-weight: 400; letter-spacing: 0.3px;
    text-transform: none; margin-bottom: 2px; line-height: 1;
}

.module-products h3 {
    padding-bottom: 32px;
    font-size: 30px;
}

/* Separador decorativo entre seções */
.module-products::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--tz-peach);
    border-radius: var(--tz-radius-pill);
    margin: 32px auto 0;
    opacity: 0.3;
}

/* ==========================================================================
   13. CAROUSEL / SLICK
   ========================================================================== */
.slick-slide { margin: 0 8px; }
.slick-list { margin: 0 -8px; padding: 4px 0; }

.slideshow-fullwidth .slick-slide,
.slideshow-fullwidth .slick-list,
.banner-fullwidth .slick-slide,
.banner-fullwidth .slick-list { margin: 0; }

.slick-carousel .slick-prev,
.slick-carousel .slick-next {
    width: 42px; height: 42px;
    background: var(--tz-white);
    border: 1.5px solid var(--tz-cream-border);
    color: var(--tz-ink); border-radius: 50%;
    z-index: 10;
    display: flex !important;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(45, 37, 32, 0.08);
    transition: all 0.25s var(--tz-ease);
    font-size: 14px;
}
.slick-carousel .slick-prev:hover,
.slick-carousel .slick-next:hover {
    background: var(--tz-ink); border-color: var(--tz-ink);
    color: var(--tz-white); transform: scale(1.05);
}
.slick-carousel .slick-prev::before,
.slick-carousel .slick-next::before { content: none !important; }
.slick-carousel .slick-prev { left: -8px; }
.slick-carousel .slick-next { right: -8px; }

@media (max-width: 991px) {
    .slick-carousel .slick-prev { left: 0; }
    .slick-carousel .slick-next { right: 0; }
}

.slideshow-fullwidth {
    width: 100%; overflow: hidden; position: relative; margin-bottom: 0;
    padding: 18px;
    transition: background-color 0.8s var(--tz-ease);
    background-color: var(--tz-pink); /* cor inicial — JS troca conforme slide */
}
.slideshow-fullwidth .slideshow-img {
    width: 100%; height: auto; display: block; object-fit: cover;
    border-radius: var(--tz-radius-lg);
}
.slideshow-fullwidth .slick-list { line-height: 0; border-radius: var(--tz-radius-lg); overflow: hidden; }
.slideshow-fullwidth .slick-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
}
.slideshow-fullwidth .slick-prev { left: -10px; }
.slideshow-fullwidth .slick-next { right: -10px; }

@media (max-width: 991px) {
    .slideshow-fullwidth { padding: 8px; }
    .slideshow-fullwidth .slick-prev { left: 8px; }
    .slideshow-fullwidth .slick-next { right: 8px; }
}

.slideshow-nav {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.85);
    color: var(--tz-ink);
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 14px;
    cursor: pointer; transition: all 0.25s var(--tz-ease);
    border: none; padding: 0;
}
.slideshow-nav::before { content: none !important; }
.slideshow-nav:hover, .slideshow-nav:focus {
    background: var(--tz-peach); color: var(--tz-white);
    transform: translateY(-50%) scale(1.06);
}

.slideshow-fullwidth .slick-dots {
    position: absolute; bottom: 24px; width: 100%;
    text-align: center; padding: 0; margin: 0;
    list-style: none; display: flex !important;
    justify-content: center; gap: 6px;
}
.slideshow-fullwidth .slick-dots li { display: inline-block; }
.slideshow-fullwidth .slick-dots li button {
    width: 10px; height: 10px;
    background: rgba(255, 255, 255, 0.6);
    border: none; padding: 0; border-radius: 50%;
    transition: all 0.25s var(--tz-ease);
    font-size: 0; color: transparent; cursor: pointer;
}
.slideshow-fullwidth .slick-dots li button::before { content: none !important; }
.slideshow-fullwidth .slick-dots li.slick-active button {
    background: var(--tz-white); width: 28px;
    border-radius: var(--tz-radius-pill);
}

.banner-fullwidth { width: 100%; overflow: hidden; }
.banner-fullwidth .banner-img {
    width: 100%; height: auto; display: block; object-fit: cover;
}

.carousel-module {
    padding: 40px 24px; background: var(--tz-white);
    margin: 40px 0 0 0;
    border-top: 1px solid var(--tz-cream-line);
    border-bottom: 1px solid var(--tz-cream-line);
}
.carousel-module .item img {
    max-height: 60px; width: auto; margin: 0 auto;
    filter: grayscale(1); opacity: 0.55;
    transition: all 0.25s var(--tz-ease);
}
.carousel-module .item:hover img { filter: grayscale(0); opacity: 1; }

/* ==========================================================================
   14. HOME
   ========================================================================== */
#common-home { padding: 0; margin: 0; background: var(--tz-white); }

#content { background: transparent; }

/* ==========================================================================
   15. CATEGORY PAGE
   ========================================================================== */
.category-page {
    font-family: var(--tz-font-sans);
    background: var(--tz-white);
    padding-bottom: 80px;
}

.category-banner-inv {
    height: 320px; background-size: cover; background-position: center;
    position: relative; display: flex; align-items: center; justify-content: center;
    color: var(--tz-white); margin: 0 24px 32px;
    border-radius: var(--tz-radius-lg); overflow: hidden;
}
.category-banner-inv::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(45, 37, 32, 0.25);
}
.category-banner-inv .banner-content {
    position: relative; z-index: 2; text-align: center; color: var(--tz-white);
}
.category-banner-inv h1 {
    font-family: var(--tz-font-sans);
    font-size: 44px !important; font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -1px !important;
    margin: 0 !important; color: var(--tz-white);
}

.category-header-simple-inv { padding: 56px 0 24px; text-align: center; }
.category-header-simple-inv h1 {
    font-family: var(--tz-font-sans);
    font-size: 36px !important; font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.8px !important;
    margin: 0 !important; color: var(--tz-ink);
}

.category-controls-inv {
    border: 1px solid var(--tz-cream-border);
    padding: 18px 0; margin: 0 24px 32px;
    background: var(--tz-white);
    border-radius: var(--tz-radius-md);
}
.controls-inner {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1480px; margin: 0 auto; padding: 0 24px;
    flex-wrap: wrap; gap: 14px;
}

.btn-filter-inv {
    background: transparent;
    border: 1.5px solid var(--tz-cream-border);
    font-family: var(--tz-font-sans);
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--tz-ink);
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; padding: 10px 18px;
    border-radius: var(--tz-radius-pill);
    transition: all 0.2s var(--tz-ease);
}
.btn-filter-inv:hover {
    background: var(--tz-cream); border-color: var(--tz-peach); color: var(--tz-peach);
}

.product-count-inv {
    font-size: 12px; color: var(--tz-ink-mute);
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}

.sort-wrapper-inv { display: flex; align-items: center; gap: 10px; }
.sort-wrapper-inv label {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; margin: 0;
    color: var(--tz-ink-mute); letter-spacing: 0.5px;
}
.sort-wrapper-inv select {
    border: 1.5px solid var(--tz-cream-border);
    font-size: 13px; font-weight: 600;
    background: var(--tz-white); color: var(--tz-ink);
    cursor: pointer; appearance: none;
    padding: 8px 32px 8px 14px;
    border-radius: var(--tz-radius-pill);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%232D2520' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    transition: all 0.2s var(--tz-ease);
}
.sort-wrapper-inv select:hover { border-color: var(--tz-peach); }

.product-grid-inv {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 24px; max-width: 1480px; margin: 0 auto;
    padding: 0 24px;
}

.refine-search { padding: 24px 0; margin: 24px 0; }
.refine-search ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.refine-search ul li a {
    display: inline-block;
    background-color: var(--tz-cream) !important;
    color: var(--tz-ink) !important;
    transition: all 0.25s var(--tz-ease);
    padding: 8px 16px; margin: 0;
    border-radius: var(--tz-radius-pill);
    font-size: 13px; font-weight: 600;
}
.refine-search ul li a:hover {
    background-color: var(--tz-peach) !important;
    color: var(--tz-white) !important;
}

.pagination-interface { margin: 32px 0; }

.pagination-wrapper .pagination { gap: 8px; }
.pagination-wrapper .page-item .page-link {
    border-radius: 50%;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--tz-cream-border);
    color: var(--tz-ink); font-weight: 600; padding: 0;
}
.pagination-wrapper .page-item.active .page-link,
.pagination-wrapper .page-link:hover {
    background: var(--tz-peach);
    border-color: var(--tz-peach);
    color: var(--tz-white);
}

.page-search-panel {
    background: var(--tz-white); padding: 24px;
    border-radius: var(--tz-radius-md);
    margin-bottom: 28px;
    border: 1px solid var(--tz-cream-border);
}

.page-header { margin: 24px 0; }

/* ==========================================================================
   16. PRODUCT PAGE
   ========================================================================== */
#product-product {
    padding: 24px 0 60px;
    background: var(--tz-white);
}

#product-gallery {
    max-width: 100%;
    background: var(--tz-white);
}

#main-image {
    border-radius: var(--tz-radius-md);
    max-height: 620px; object-fit: contain;
    background: var(--tz-white);
    border: 1px solid var(--tz-cream-border);
}

#main-image-link {
    background: var(--tz-white);
    display: block;
    border-radius: var(--tz-radius-md);
    overflow: hidden;
}

/* Setas da galeria */
#product-gallery .btn-light {
    background: var(--tz-white) !important;
    border: 1.5px solid var(--tz-cream-border) !important;
    color: var(--tz-ink) !important;
    width: 42px; height: 42px;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(45, 37, 32, 0.08);
    display: flex; align-items: center; justify-content: center;
    padding: 0 !important;
    transition: all 0.25s var(--tz-ease);
}
#product-gallery .btn-light:hover {
    background: var(--tz-peach) !important;
    color: var(--tz-white) !important;
    border-color: var(--tz-peach) !important;
}
#product-gallery #prev-image { left: 12px !important; }
#product-gallery #next-image { right: 12px !important; }

.gallery-thumb,
.img-thumbnail {
    cursor: pointer; transition: all 0.25s var(--tz-ease);
    border-radius: var(--tz-radius-sm) !important;
    border: 2px solid var(--tz-cream-border) !important;
    background: var(--tz-white) !important;
    padding: 4px !important;
}
.gallery-thumb:hover, .gallery-thumb.active,
.img-thumbnail:hover {
    border-color: var(--tz-peach) !important;
    transform: translateY(-2px);
}

.thumbnail-container {
    padding-left: 50px; padding-right: 50px;
    position: relative; margin-bottom: 24px;
}

/* Slick thumbnails do produto */
.thumbnail-slick { margin: 0 -6px; }
.thumbnail-slick .item { padding: 0 6px; }
.thumbnail-slick .slick-prev,
.thumbnail-slick .slick-next {
    width: 36px; height: 36px;
    background: var(--tz-white);
    border: 1.5px solid var(--tz-cream-border);
    color: var(--tz-ink);
    border-radius: 50%;
    z-index: 10;
    display: flex !important;
    align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(45, 37, 32, 0.08);
    transition: all 0.2s var(--tz-ease);
    position: absolute;
    top: 50%; transform: translateY(-50%);
}
.thumbnail-slick .slick-prev { left: -42px; }
.thumbnail-slick .slick-next { right: -42px; }
.thumbnail-slick .slick-prev::before,
.thumbnail-slick .slick-next::before { content: none !important; }
.thumbnail-slick .slick-prev:hover,
.thumbnail-slick .slick-next:hover {
    background: var(--tz-peach);
    color: var(--tz-white);
    border-color: var(--tz-peach);
}

#content .thumbnail-container .owl-carousel .owl-prev { left: -50px; }
#content .thumbnail-container .owl-carousel .owl-next { right: -50px; }

.owl-carousel .item { padding: 0 4px; }

/* H1 com toque handwritten */
.product-info h1,
#product-product h1 {
    font-family: var(--tz-font-sans);
    font-size: 28px; font-weight: 700;
    color: var(--tz-ink); letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 12px 0 16px 0;
    position: relative;
}

/* Botões wishlist/compare no topo */
#product-product .btn-group { margin-bottom: 8px; gap: 6px; }
#product-product .btn-group .btn-default {
    background: var(--tz-white) !important;
    border: 1.5px solid var(--tz-cream-border) !important;
    color: var(--tz-ink-mute) !important;
    width: 38px; height: 38px;
    border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 !important;
    transition: all 0.2s var(--tz-ease);
}
#product-product .btn-group .btn-default:hover {
    background: var(--tz-pink) !important;
    color: var(--tz-pink-ink) !important;
    border-color: var(--tz-pink) !important;
    transform: scale(1.06);
}

/* Lista de infos do produto (Marca, Modelo, Disponibilidade) */
#product-product .list-unstyled {
    margin: 0 0 20px 0;
    padding: 0;
}
#product-product .list-unstyled li {
    font-size: 14px;
    color: var(--tz-ink-soft);
    margin-bottom: 6px;
    line-height: 1.6;
    padding: 0;
}
#product-product .list-unstyled li:last-child { margin-bottom: 0; }

#product-product .list-unstyled li a {
    color: var(--tz-peach);
    font-weight: 600;
    text-decoration: none;
}
#product-product .list-unstyled li a:hover { text-decoration: underline !important; }

/* Bloco de preço com mais respiro */
#product-product .list-unstyled + .list-unstyled,
#product-product ul.list-unstyled:has(h2) {
    background: #FAF3EC;
    padding: 20px 22px;
    border-radius: var(--tz-radius-md);
    margin: 16px 0 24px 0;
}

#product-product ul.list-unstyled:has(h2) li {
    margin-bottom: 6px;
}

#product-product .list-unstyled h2 {
    font-family: var(--tz-font-sans);
    font-size: 32px;
    font-weight: 800;
    color: var(--tz-peach);
    margin: 4px 0;
    letter-spacing: -1px;
    line-height: 1;
}

#product-product .list-unstyled span[style*="line-through"] {
    color: var(--tz-ink-faint) !important;
    font-size: 14px !important;
    font-weight: 400;
}

#product-product .price {
    font-size: 32px;
    font-weight: 800;
    color: var(--tz-ink);
}
#product-product .price-new { color: var(--tz-peach); }

/* Label de quantidade + input */
#product-product label[for="input-quantity"],
#product-product .form-label {
    font-size: 12px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tz-ink-mute);
    margin-bottom: 8px;
}

#product-product .input-group .btn-outline-secondary {
    background: var(--tz-white);
    border: 1.5px solid var(--tz-cream-border);
    color: var(--tz-ink);
    width: 42px;
    transition: all 0.2s var(--tz-ease);
}
#product-product .input-group .btn-outline-secondary:hover {
    background: var(--tz-cream-soft);
    border-color: var(--tz-peach);
    color: var(--tz-peach);
}
#product-product .input-group .form-control {
    text-align: center;
    font-weight: 700;
    border-left: none;
    border-right: none;
}

/* Botão COMPRAR (era btn-success verde - vira pêssego) */
#button-cart,
.btn-success,
#product-product .btn-success {
    background-color: var(--tz-peach) !important;
    color: var(--tz-white) !important;
    border-color: var(--tz-peach) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 13px !important;
    padding: 14px 28px !important;
    border-radius: var(--tz-radius-pill) !important;
    transition: all 0.25s var(--tz-ease);
    height: auto;
    box-shadow: 0 4px 12px rgba(243, 156, 68, 0.20);
}
#button-cart:hover,
.btn-success:hover,
#product-product .btn-success:hover {
    background-color: var(--tz-peach-dark) !important;
    border-color: var(--tz-peach-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(243, 156, 68, 0.32);
}

/* Opções de produto (cores/tamanhos) */
.product-option-radio { display: block; width: 100% !important; }
.product-option-radio .radio { width: auto !important; color: var(--tz-ink); }
.product-info .product-options .option-value { line-height: 42px !important; }

label.optionimage input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}

label.optionimage {
    display: inline-flex;
    border: 1.5px solid var(--tz-cream-border);
    border-radius: var(--tz-radius-sm);
    background-color: var(--tz-white);
    font-weight: 600; font-size: 13px;
    cursor: pointer; user-select: none;
    transition: all 0.2s var(--tz-ease);
    min-width: 42px; min-height: 42px !important;
    padding: 0 10px !important;
    text-align: center;
    align-items: center; justify-content: center;
    color: var(--tz-ink);
}
label.optionimage:hover:not(:has(input[disabled])) {
    background-color: var(--tz-cream-soft);
    border-color: var(--tz-peach);
    color: var(--tz-peach);
}
label.optionimage:has(input:checked) {
    background-color: var(--tz-peach);
    color: var(--tz-white);
    border-color: var(--tz-peach);
}
label.optionimage:has(input[disabled]) {
    opacity: 0.4; cursor: not-allowed;
    pointer-events: none; text-decoration: line-through;
}

/* Calcular frete */
#product-product .input-group .form-control + .btn,
#product-product input[placeholder*="000"] + button,
#product-product .btn-secondary {
    border-radius: var(--tz-radius-pill) !important;
}

/* Tabs */
.nav-tabs {
    border-bottom: 2px solid var(--tz-cream-border);
    gap: 4px; margin-bottom: 0;
}
.nav-tabs .nav-link {
    border-radius: 0; margin: 0;
    padding: 14px 20px;
    background-color: transparent; border: none;
    color: var(--tz-ink-mute);
    transition: all 0.2s var(--tz-ease);
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    position: relative;
}
.nav-tabs .nav-link:hover { background-color: transparent; color: var(--tz-ink); }
.nav-tabs .nav-link.active {
    background-color: transparent !important;
    color: var(--tz-peach) !important; border: none;
}
.nav-tabs .nav-link.active::after {
    content: ''; position: absolute;
    bottom: -2px; left: 0; right: 0; height: 2px;
    background: var(--tz-peach);
}

.tab-content {
    border: none; padding: 32px 4px;
    border-radius: 0; background-color: transparent;
    line-height: 1.7; color: var(--tz-ink-soft);
    font-size: 14px;
}

/* Produtos relacionados */
.related-products { margin-top: 64px; }
.related-products h3,
#product-product h3 {
    text-align: center;
    font-size: 26px; font-weight: 700;
    color: var(--tz-ink);
    margin-bottom: 28px;
    text-transform: none;
    letter-spacing: -0.5px;
    position: relative;
    padding-top: 28px;
}
.related-products h3::before,
#product-product > .related-products h3::before {
    content: 'produtos relacionados';
    display: block;
    font-family: var(--tz-font-hand);
    font-size: 20px; color: var(--tz-peach);
    font-weight: 400; line-height: 1;
    margin-bottom: 6px;
    text-transform: none;
}
.related-products h3 {
    font-size: 0;
}
.related-products h3::after {
    content: 'você também vai amar';
    display: block;
    font-family: var(--tz-font-sans);
    font-size: 22px; font-weight: 700;
    color: var(--tz-ink);
    letter-spacing: -0.3px;
    margin-top: 2px;
}

/* ==========================================================================
   17. LOGIN
   ========================================================================== */
.login-wrapper {
    min-height: calc(100vh - 280px);
    display: flex; align-items: center; justify-content: center;
    padding: 40px 16px; background: var(--tz-white);
}

.login-card {
    background: var(--tz-white); width: 100%;
    max-width: 460px; padding: 48px 40px;
    border: 1px solid var(--tz-cream-border);
    border-radius: var(--tz-radius-lg);
    box-shadow: var(--tz-shadow-card);
    text-align: center;
}

.login-card .logo-login { margin-bottom: 32px; }
.login-card .logo-login img { max-height: 52px; width: auto; }

.login-card h2 {
    font-family: var(--tz-font-sans);
    font-weight: 700; font-size: 26px;
    margin: 0 0 4px; color: var(--tz-ink);
    text-transform: none; letter-spacing: -0.5px;
}
.login-card h2::before {
    content: 'olá';
    display: block;
    font-family: var(--tz-font-hand);
    font-size: 22px; color: var(--tz-peach);
    font-weight: 400; line-height: 1;
    margin-bottom: 2px;
}

.login-card .subtitle {
    color: var(--tz-ink-mute);
    font-size: 14px; margin-bottom: 32px;
}

.login-card label {
    display: block; text-align: left;
    font-weight: 600; font-size: 12px;
    margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--tz-ink-mute);
}

.login-card .form-control {
    height: 50px; margin-bottom: 16px;
    background: var(--tz-cream);
    border-color: transparent;
}
.login-card .form-control:focus { background: var(--tz-white); }

.btn-login-inv {
    background: var(--tz-peach); color: var(--tz-white);
    width: 100%; height: 52px; border: none;
    border-radius: var(--tz-radius-pill);
    font-family: var(--tz-font-sans);
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; font-size: 13px;
    margin-top: 8px; cursor: pointer;
    transition: all 0.25s var(--tz-ease);
}
.btn-login-inv:hover {
    background: var(--tz-peach-dark);
    color: var(--tz-white);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(243, 156, 68, 0.30);
}

.login-card .forgotten {
    display: block; margin-top: 16px;
    font-size: 13px;
    color: var(--tz-ink-mute) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.login-footer-promo {
    margin-top: 36px; padding-top: 28px;
    border-top: 1px solid var(--tz-cream-line);
}

.login-footer-promo p {
    font-size: 14px; color: var(--tz-ink-soft);
    margin-bottom: 16px;
}

.btn-outline-login {
    display: inline-block;
    border: 1.5px solid var(--tz-ink); color: var(--tz-ink);
    padding: 12px 32px;
    border-radius: var(--tz-radius-pill);
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; font-size: 12px;
    text-decoration: none !important;
    transition: all 0.25s var(--tz-ease);
}
.btn-outline-login:hover {
    background: var(--tz-ink); color: var(--tz-white);
    transform: translateY(-1px);
}

/* ==========================================================================
   18. CART OFFCANVAS
   ========================================================================== */
.cart-sidebar { font-family: var(--tz-font-sans); }
.cart-items-list { margin-bottom: 24px; }

.cart-item { padding: 16px 0; border-bottom: 1px solid var(--tz-cream-line); }
.cart-item:last-child { border-bottom: none; }

.cart-item-image img {
    width: 76px !important; height: 76px !important;
    object-fit: cover;
    border-radius: var(--tz-radius-sm) !important;
    background: var(--tz-cream);
}

.cart-item-details a {
    font-family: var(--tz-font-sans) !important;
    font-size: 13px !important; font-weight: 600 !important;
    text-transform: none !important;
    color: var(--tz-ink) !important;
    line-height: 1.35; margin-bottom: 4px !important;
}

.cart-item-details .small,
.cart-item-details .text-muted {
    font-size: 12px !important;
    color: var(--tz-ink-mute) !important;
    font-family: var(--tz-font-sans) !important;
}

.btn-remove-item {
    color: var(--tz-ink-faint) !important;
    transition: color 0.2s var(--tz-ease);
}
.btn-remove-item:hover { color: var(--tz-danger) !important; }

.cart-sidebar-footer {
    padding-top: 20px;
    border-top: 2px solid var(--tz-cream-line);
}

.totals-container .h5 {
    font-family: var(--tz-font-sans);
    font-size: 18px; font-weight: 700;
    color: var(--tz-ink);
}

#cart .btn-dark,
.cart-sidebar-footer .btn-dark {
    background: var(--tz-peach) !important;
    color: var(--tz-white) !important;
    border: none !important;
    border-radius: var(--tz-radius-pill) !important;
    font-family: var(--tz-font-sans) !important;
    font-weight: 700 !important;
    padding: 14px !important;
    font-size: 13px; letter-spacing: 1px;
}
#cart .btn-dark:hover { background: var(--tz-peach-dark) !important; }

/* ==========================================================================
   19. FOOTER
   ========================================================================== */
#main-footer, footer#main-footer {
    background-color: #FFE0D6 !important;
    color: var(--tz-ink) !important;
    font-family: var(--tz-font-sans) !important;
    padding: 0 !important; margin: 0 !important;
    display: block !important; width: 100% !important;
    position: relative;
}

/* Onda no topo do footer — separa footer rosa do conteúdo branco acima */
#main-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0; right: 0;
    height: 40px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C150,0 150,40 300,20 C450,0 450,40 600,20 C750,0 750,40 900,20 C1050,0 1050,40 1200,20 L1200,0 L0,0 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    transform: translateY(-99%);
}

.footer-section {
    padding: 80px 32px 48px !important;
    max-width: 1480px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 48px;
    position: relative;
}

.footer-column { min-width: 0; }
.footer-column.brand-col { max-width: 460px; }

.footer-heading {
    font-family: var(--tz-font-sans);
    font-size: 11px !important; font-weight: 800 !important;
    margin-bottom: 18px !important;
    color: var(--tz-ink) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    position: relative; padding-bottom: 12px;
}
.footer-heading::after {
    content: ''; position: absolute;
    bottom: 0; left: 0;
    width: 22px; height: 2px;
    background: var(--tz-peach);
    border-radius: var(--tz-radius-pill);
}

.footer-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.footer-list li { margin-bottom: 10px !important; line-height: 1.4 !important; }
.footer-list li a {
    color: var(--tz-ink) !important;
    font-family: var(--tz-font-sans);
    font-size: 13px !important; font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s var(--tz-ease);
    opacity: 0.75;
}
.footer-list li a:hover {
    color: var(--tz-peach-dark) !important;
    opacity: 1;
    padding-left: 4px;
}

.footer-logo { margin-bottom: 28px !important; display: block; }
.footer-logo img {
    height: 48px !important; width: auto !important;
    filter: none;
}

.newsletter-title {
    font-family: var(--tz-font-hand) !important;
    font-size: 28px !important; font-weight: 400 !important;
    margin-bottom: 6px !important;
    color: var(--tz-ink) !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
}
.newsletter-title::after {
    content: 'ofertas e novidades direto no seu e-mail';
    display: block;
    font-family: var(--tz-font-sans);
    font-size: 13px;
    color: var(--tz-ink-mute);
    margin-top: 6px; line-height: 1.4;
    font-weight: 500;
}

.newsletter-form-container {
    position: relative; max-width: 460px; margin-top: 16px;
}

.newsletter-input-field {
    width: 100%;
    background: var(--tz-white) !important;
    border: none !important;
    color: var(--tz-ink) !important;
    padding: 16px 60px 16px 24px !important;
    font-family: var(--tz-font-sans);
    font-size: 14px !important;
    border-radius: var(--tz-radius-pill) !important;
    height: 52px !important;
    transition: all 0.2s var(--tz-ease);
    box-shadow: 0 2px 8px rgba(45, 37, 32, 0.04);
}
.newsletter-input-field::placeholder { color: var(--tz-ink-faint); }
.newsletter-input-field:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(243, 156, 68, 0.20), 0 2px 8px rgba(45, 37, 32, 0.04);
}

.newsletter-submit-btn {
    position: absolute;
    right: 6px; top: 6px; bottom: 6px;
    background: var(--tz-peach) !important;
    color: var(--tz-white) !important;
    border: none !important;
    width: 40px !important;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s var(--tz-ease);
}
.newsletter-submit-btn:hover { background: var(--tz-peach-dark) !important; }

.footer-social-icons {
    display: flex; gap: 10px; margin-top: 28px;
}

.footer-social-icons a {
    color: var(--tz-ink) !important; font-size: 14px !important;
    width: 36px; height: 36px;
    background: var(--tz-white);
    border: none;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.25s var(--tz-ease);
    box-shadow: 0 2px 6px rgba(45, 37, 32, 0.04);
}
.footer-social-icons a:hover {
    background: var(--tz-peach) !important;
    color: var(--tz-white) !important;
    transform: translateY(-2px);
}

.footer-bottom-bar {
    background: rgba(255, 255, 255, 0.35);
    padding: 20px 32px !important;
    border-top: 1px solid rgba(45, 37, 32, 0.08);
}

.footer-bottom-inner {
    max-width: 1480px; margin: 0 auto; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 20px;
}

.footer-legal-text {
    font-family: var(--tz-font-sans);
    font-size: 11px !important;
    color: var(--tz-ink-mute) !important;
    font-weight: 500 !important;
    text-align: center; line-height: 1.5;
}

.footer-badges, .footer-payment-icons {
    display: flex; gap: 14px; align-items: center;
}
.footer-badges img { height: 28px; opacity: 0.8; }
.footer-payment-icons i,
.footer-payment-icons img {
    font-size: 22px !important;
    color: var(--tz-ink-mute);
    opacity: 0.85;
}
.footer-payment-icons svg { opacity: 0.85; }

footer ul li a, footer a {
    padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}

/* ==========================================================================
   20. CHECKOUT
   ========================================================================== */
.checkout-wrapper {
    background: var(--tz-white);
    min-height: 100vh;
    padding-bottom: 60px;
}

.checkout-main { padding: 40px 0; }

.checkout-minimal-header {
    background: var(--tz-white);
    padding: 20px 0;
    border-bottom: 1px solid var(--tz-cream-border);
    margin-bottom: 32px;
}
.checkout-minimal-header .logo-checkout img { max-height: 44px; }
.checkout-minimal-header .security-badge {
    font-size: 13px; color: var(--tz-ink-mute);
    display: flex; align-items: center; gap: 8px;
}
.checkout-minimal-header .security-badge i {
    color: var(--tz-success); font-size: 18px;
}

.checkout-steps-nav {
    display: flex; justify-content: space-between;
    margin-bottom: 48px; position: relative;
    padding: 0 2%;
}
.checkout-steps-nav::before {
    content: ''; position: absolute;
    top: 14px; left: 5%; right: 5%;
    height: 2px; background: var(--tz-cream-border); z-index: 1;
}

.checkout-step-item {
    position: relative; z-index: 2;
    background: var(--tz-cream); text-align: center;
    width: 28px; padding: 0 5px;
}
.checkout-step-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--tz-cream-border);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--tz-ink-mute);
    margin: 0 auto 10px;
    transition: all 0.3s var(--tz-ease);
    border: 3px solid var(--tz-cream); font-size: 12px;
}
.checkout-step-item.active .checkout-step-dot {
    background: var(--tz-peach); color: var(--tz-white);
    box-shadow: 0 0 0 4px rgba(243, 156, 68, 0.15);
}
.checkout-step-item.completed .checkout-step-dot {
    background: var(--tz-success); color: var(--tz-white);
}

.checkout-step-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase;
    color: var(--tz-ink-faint);
    position: absolute; top: 36px; left: 50%;
    transform: translateX(-50%);
    white-space: nowrap; letter-spacing: 0.5px;
}
.checkout-step-item.active .checkout-step-label { color: var(--tz-ink); }

.checkout-card {
    background: var(--tz-white);
    border: 1px solid var(--tz-cream-border);
    border-radius: var(--tz-radius-md);
    padding: 28px; margin-bottom: 20px;
}
.checkout-card.active {
    border-color: var(--tz-peach);
    box-shadow: var(--tz-shadow-card);
}

.checkout-card-header {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 24px;
}

.checkout-card-header h3 {
    font-family: var(--tz-font-sans);
    font-size: 16px; font-weight: 700;
    margin: 0; display: flex; align-items: center; gap: 10px;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--tz-ink);
}
.checkout-card-header h3 i { font-size: 16px; color: var(--tz-peach); }

.checkout-card-edit {
    font-size: 12px; font-weight: 700;
    color: var(--tz-peach);
    text-transform: uppercase;
    text-decoration: none !important;
    letter-spacing: 0.5px; cursor: pointer;
}

.logged-info-box {
    display: flex; justify-content: space-between;
    align-items: center; padding: 16px;
    background: var(--tz-cream);
    border-radius: var(--tz-radius-sm); font-size: 14px;
}
.logged-user-email { font-weight: 600; color: var(--tz-ink); }

.summary-card,
.checkout-summary-card {
    background: var(--tz-white);
    border: 1px solid var(--tz-cream-border);
    border-radius: var(--tz-radius-md);
    padding: 28px;
    position: sticky; top: 24px;
}

.summary-title {
    font-family: var(--tz-font-sans);
    font-size: 14px; font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--tz-ink);
    padding-bottom: 12px; letter-spacing: 0.8px;
    color: var(--tz-ink);
}

.summary-product-item {
    display: flex; gap: 14px;
    margin-bottom: 14px; padding-bottom: 14px;
    border-bottom: 1px solid var(--tz-cream-line);
    align-items: center;
}
.summary-product-item:last-of-type { border-bottom: none; }

.summary-product-image {
    width: 64px; height: 80px;
    position: relative; background: var(--tz-cream);
    border: 1px solid var(--tz-cream-border);
    border-radius: var(--tz-radius-sm);
    flex-shrink: 0; overflow: hidden;
}
.summary-product-image img { width: 100%; height: 100%; object-fit: contain; }
.summary-product-qty {
    position: absolute; top: -8px; right: -8px;
    background: var(--tz-ink); color: var(--tz-white);
    font-size: 10px; font-weight: 700;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--tz-white);
}

.summary-product-info { flex-grow: 1; min-width: 0; }
.summary-product-name {
    font-size: 13px; font-weight: 600;
    line-height: 1.3; color: var(--tz-ink);
    display: block; margin-bottom: 4px;
}
.summary-product-variant { font-size: 12px; color: var(--tz-ink-mute); }
.summary-product-price { font-size: 14px; font-weight: 700; color: var(--tz-ink); }

.summary-totals { margin-top: 20px; }
.summary-total-row {
    display: flex; justify-content: space-between;
    margin-bottom: 10px; font-size: 14px;
    color: var(--tz-ink-soft);
}
.summary-total-row .label { color: var(--tz-ink-mute); }
.summary-total-row .value { color: var(--tz-ink); font-weight: 600; }

.summary-total-row.main-total {
    margin-top: 16px; padding-top: 16px;
    border-top: 2px solid var(--tz-cream-line);
    font-size: 22px; font-weight: 800;
    color: var(--tz-ink);
}

.summary-coupon {
    display: flex; gap: 8px; margin-bottom: 24px;
}
.summary-coupon .form-control { height: 44px; }
.btn-apply {
    background: var(--tz-cream); color: var(--tz-ink);
    border: 1.5px solid var(--tz-cream-border);
    padding: 0 20px;
    border-radius: var(--tz-radius-pill);
    font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.btn-apply:hover {
    background: var(--tz-peach); color: var(--tz-white);
    border-color: var(--tz-peach);
}

.checkout-btn-next {
    background: var(--tz-peach); color: var(--tz-white);
    border: none; padding: 16px; width: 100%;
    font-family: var(--tz-font-sans);
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: var(--tz-radius-pill);
    margin-top: 10px;
    transition: all 0.25s var(--tz-ease);
    font-size: 13px; cursor: pointer;
}
.checkout-btn-next:hover {
    background: var(--tz-peach-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(243, 156, 68, 0.30);
}

.address-card {
    border: 1px solid var(--tz-cream-border);
    padding: 20px; border-radius: var(--tz-radius-md);
    margin-bottom: 16px; background: var(--tz-cream);
    position: relative;
}
.address-card strong {
    display: block; margin-bottom: 6px; font-size: 1.05rem;
}

.checkout-footer-info {
    margin-top: 40px; text-align: center;
    color: var(--tz-ink-faint); font-size: 12px;
}

/* ==========================================================================
   21. PRICE
   ========================================================================== */
.price {
    font-family: var(--tz-font-sans);
    font-size: 17px; font-weight: 700;
    color: var(--tz-ink);
}
.price-new { color: var(--tz-peach); font-weight: 700; }
.price-old { color: var(--tz-ink-faint); text-decoration: line-through; font-weight: 400; }
.price-tax { font-weight: 400; color: var(--tz-ink-mute); font-size: 12px; }

/* ==========================================================================
   22. LIST GROUP
   ========================================================================== */
.list-group-item {
    border-color: var(--tz-cream-line);
    color: var(--tz-ink);
    padding: 12px 16px;
    font-size: 14px;
    background: var(--tz-white);
}
.list-group-item:hover {
    background-color: var(--tz-cream) !important;
    color: var(--tz-peach) !important;
    border-color: var(--tz-cream-line) !important;
}
.list-group-item.active {
    color: var(--tz-white);
    background-color: var(--tz-peach);
    border-color: var(--tz-peach);
}

/* ==========================================================================
   23. ACCORDION
   ========================================================================== */
.accordion-button {
    background-color: transparent;
    border: none; box-shadow: none !important;
    font-weight: 600; color: var(--tz-ink);
    padding: 14px 0;
}
.accordion-button:focus { box-shadow: none; }
.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--tz-peach); box-shadow: none;
}
.accordion-item {
    background: transparent; border: none;
    border-bottom: 1px solid var(--tz-cream-border);
}
.accordion-body { padding: 8px 0 16px; color: var(--tz-ink-soft); }

/* ==========================================================================
   24. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .product-grid-inv { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (max-width: 991px) {
    .header-main-container { min-height: 68px; padding: 10px 0; }
    .header-search-section { display: none; }
    .header-logo-section {
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
    }
    .header-logo-section img { max-height: 38px; }
    .header-mobile-menu { display: block !important; }
    .nav-main-section { display: none !important; }
    .header-menu-bar { display: none; }
    .header-actions-section .action-btn .action-label { display: none; }
    .header-actions-section { gap: 14px; }

    h1 { font-size: 26px; }
    h2 { font-size: 22px; }

    .category-banner-inv { height: 240px; margin: 0 16px 24px; }
    .category-banner-inv h1 { font-size: 32px !important; }
    .category-controls-inv { margin: 0 16px 24px; }

    .product-grid-inv {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px; padding: 0 16px;
    }

    .module-products { padding: 40px 16px 24px; }
    .module-products h3 { font-size: 22px; }
    .module-products h3::before { font-size: 20px; }

    .footer-section {
        grid-template-columns: 1fr 1fr;
        gap: 36px; padding: 48px 24px 32px !important;
    }
    .footer-column.brand-col { grid-column: 1 / -1; max-width: 100%; }

    .footer-bottom-inner {
        flex-direction: column; gap: 16px; text-align: center;
    }
}

@media (max-width: 575px) {
    .product-grid-inv { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .product-thumb .caption h4 a { font-size: 12px; }
    .product-thumb .caption .price { font-size: 16px; }
    .btn-add-cart { font-size: 11px; height: 38px; }

    .footer-section { grid-template-columns: 1fr; gap: 28px; }

    .login-card { padding: 32px 24px; }
    .login-card h2 { font-size: 22px; }
}

/* ==========================================================================
   25. UTILITIES
   ========================================================================== */
.text-peach { color: var(--tz-peach) !important; }
.bg-peach { background-color: var(--tz-peach) !important; }
.bg-cream { background-color: var(--tz-cream) !important; }
.bg-pink { background-color: var(--tz-pink) !important; }
.bg-blue { background-color: var(--tz-blue) !important; }
.bg-sage { background-color: var(--tz-sage) !important; }
.bg-butter { background-color: var(--tz-butter) !important; }

@keyframes tz-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

#main-header > *, #common-home > * {
    animation: tz-fade-in 0.5s var(--tz-ease) both;
}

/* ==========================================================================
   27. SLOGAN TOPO (acima do slideshow)
   ========================================================================== */
.trapezape-slogan {
    text-align: center;
    padding: 36px 24px 12px;
    max-width: 900px;
    margin: 0 auto;
    background: var(--tz-white);
}
.slogan-hand {
    display: inline;
    font-family: var(--tz-font-hand);
    font-size: 36px;
    color: var(--tz-peach);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0.3px;
    margin-right: 6px;
}
.slogan-emphasis {
    display: inline;
    font-family: var(--tz-font-sans);
    font-size: 38px;
    color: var(--tz-ink);
    font-weight: 800;
    letter-spacing: -1.5px;
    position: relative;
}
.slogan-emphasis::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -6px;
    left: 0; right: 0;
    height: 5px;
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2,5 Q25,0 50,4 T98,3' fill='none' stroke='%23F39C44' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.slogan-sub {
    display: block;
    font-family: var(--tz-font-sans);
    font-size: 13px;
    color: var(--tz-ink-mute);
    margin-top: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

@media (max-width: 575px) {
    .slogan-hand { font-size: 26px; }
    .slogan-emphasis { font-size: 28px; }
    .slogan-sub { font-size: 12px; }
    .trapezape-slogan { padding: 24px 16px 8px; }
}

/* ==========================================================================
   28. BANNER PROMOCIONAL 1200x300
   ========================================================================== */
.promo-banner-1200 {
    display: block;
    margin: 32px 24px;
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border-radius: var(--tz-radius-lg);
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.3s var(--tz-ease), box-shadow 0.3s var(--tz-ease);
    aspect-ratio: 4 / 1;
    max-height: 300px;
}
.promo-banner-1200:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(243, 156, 68, 0.20);
}
.promo-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.promo-banner-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    padding: 48px 56px;
    align-items: center;
}
.promo-banner-left {}
.promo-banner-hand {
    display: block;
    font-family: var(--tz-font-hand);
    font-size: 26px;
    color: var(--tz-peach-dark);
    line-height: 1;
    margin-bottom: 8px;
}
.promo-banner-title {
    font-family: var(--tz-font-sans);
    font-size: 42px;
    font-weight: 800;
    color: var(--tz-ink);
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin: 0 0 12px 0;
}
.promo-banner-title em {
    font-style: italic;
    color: var(--tz-peach);
    font-weight: 800;
}
.promo-banner-desc {
    font-size: 15px;
    color: var(--tz-ink-soft);
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
}
.promo-banner-desc strong {
    color: var(--tz-ink);
    font-weight: 800;
    background: var(--tz-butter);
    padding: 2px 8px;
    border-radius: var(--tz-radius-sm);
}
.promo-banner-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.promo-banner-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.promo-coupon {
    display: inline-block;
    background: var(--tz-white);
    border: 2px dashed var(--tz-peach);
    color: var(--tz-peach-dark);
    font-family: var(--tz-font-sans);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 3px;
    padding: 12px 24px;
    border-radius: var(--tz-radius-md);
}
.promo-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tz-ink);
    color: var(--tz-white);
    padding: 14px 28px;
    border-radius: var(--tz-radius-pill);
    font-family: var(--tz-font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 12px;
    transition: all 0.2s var(--tz-ease);
}
.promo-banner-1200:hover .promo-cta-btn {
    background: var(--tz-peach);
}

@media (max-width: 991px) {
    .promo-banner-1200 { aspect-ratio: auto; max-height: none; margin: 24px 16px; }
    .promo-banner-content { grid-template-columns: 1fr; padding: 32px 24px; gap: 20px; text-align: center; }
    .promo-banner-title { font-size: 28px; }
    .promo-banner-right { justify-content: center; }
    .promo-banner-cta { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================================
   29. SECTION HEADERS (categorias por idade / coleções / etc)
   ========================================================================== */
.age-section-header,
.collections-section-header {
    text-align: center;
    padding: 48px 24px 20px;
    background: var(--tz-white);
}
.age-section-hand,
.collections-hand {
    display: block;
    font-family: var(--tz-font-hand);
    font-size: 26px;
    color: var(--tz-peach);
    line-height: 1;
    margin-bottom: 4px;
}
.age-section-title,
.collections-title {
    font-family: var(--tz-font-sans);
    font-size: 28px;
    font-weight: 800;
    color: var(--tz-ink);
    margin: 0;
    letter-spacing: -0.8px;
}

/* ==========================================================================
   30. GRID DE COLEÇÕES (3 colunas)
   ========================================================================== */
.collections-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 16px 24px 48px;
    max-width: 1480px;
    margin: 0 auto;
}

.collection-card {
    display: block;
    background: var(--tz-white);
    border-radius: var(--tz-radius-lg);
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--tz-cream-border);
}
.collection-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(45, 37, 32, 0.10);
}

.collection-card-image {
    aspect-ratio: 5 / 4;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.collection-card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--tz-ease);
}
.collection-card:hover .collection-card-image img {
    transform: scale(1.06);
}
.collection-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.collection-card-pink .collection-card-image { background: var(--tz-pink); }
.collection-card-blue .collection-card-image { background: var(--tz-blue); }
.collection-card-butter .collection-card-image { background: var(--tz-butter); }
.collection-card-sage .collection-card-image { background: var(--tz-sage); }
.collection-card-lilac .collection-card-image { background: var(--tz-lilac); }
.collection-card-peach .collection-card-image { background: var(--tz-peach-soft); }

.collection-card-body {
    padding: 24px 22px 26px;
}
.collection-card-hand {
    display: block;
    font-family: var(--tz-font-hand);
    font-size: 20px;
    color: var(--tz-peach);
    line-height: 1;
    margin-bottom: 4px;
}
.collection-card-title {
    font-family: var(--tz-font-sans);
    font-size: 26px;
    font-weight: 800;
    color: var(--tz-ink);
    letter-spacing: -0.8px;
    line-height: 1.05;
    margin: 0 0 10px 0;
}
.collection-card-title em {
    font-style: italic;
    color: var(--tz-peach);
    font-weight: 800;
}
.collection-card-desc {
    font-size: 13px;
    color: var(--tz-ink-mute);
    line-height: 1.5;
    margin: 0 0 14px 0;
}
.collection-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tz-font-sans);
    font-weight: 700;
    font-size: 12px;
    color: var(--tz-ink);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--tz-ink);
    padding-bottom: 2px;
    transition: all 0.2s var(--tz-ease);
}
.collection-card:hover .collection-card-cta {
    color: var(--tz-peach);
    border-bottom-color: var(--tz-peach);
    gap: 10px;
}

@media (max-width: 991px) {
    .collections-grid-3 { grid-template-columns: 1fr; padding: 16px 16px 32px; gap: 18px; }
    .age-section-title, .collections-title { font-size: 24px; }
}

/* ==========================================================================
   30B. AGE CHIPS 4-COLUNAS (era 6)
   ========================================================================== */
.age-chips.age-chips-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1200px;
}
.age-chips.age-chips-4 .age-chip {
    padding: 32px 18px;
}
.age-chips.age-chips-4 .age-chip-icon {
    width: 80px; height: 80px;
}
.age-chips.age-chips-4 .age-chip-name {
    font-size: 13px;
}
.age-chips.age-chips-4 .age-chip-count {
    font-size: 15px;
}

@media (max-width: 991px) {
    .age-chips.age-chips-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 16px;
    }
}
@media (max-width: 575px) {
    .age-chips.age-chips-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .age-chips.age-chips-4 .age-chip { padding: 20px 12px; }
    .age-chips.age-chips-4 .age-chip-icon { width: 64px; height: 64px; }
}

/* ==========================================================================
   30C. BARRA "COMPRE POR TIPO" — ícones redondos pequenos
   ========================================================================== */
.types-bar-wrap {
    background: var(--tz-white);
    padding: 32px 24px 40px;
    max-width: 1480px;
    margin: 0 auto;
}
.types-bar-header {
    text-align: center;
    margin-bottom: 24px;
}
.types-bar-hand {
    display: block;
    font-family: var(--tz-font-hand);
    font-size: 24px;
    color: var(--tz-peach);
    line-height: 1;
    margin-bottom: 4px;
}
.types-bar-title {
    font-family: var(--tz-font-sans);
    font-size: 26px;
    font-weight: 800;
    color: var(--tz-ink);
    margin: 0;
    letter-spacing: -0.8px;
}

.types-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.types-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    color: var(--tz-ink) !important;
    transition: all 0.25s var(--tz-ease);
}

.types-chip .types-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--tz-white);
    border: 1.5px solid var(--tz-cream-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s var(--tz-ease);
}

.types-chip:hover .types-icon {
    background: var(--tz-peach-soft);
    border-color: var(--tz-peach);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(243, 156, 68, 0.18);
}

.types-chip:hover .types-icon svg {
    stroke: var(--tz-peach-dark);
    transition: stroke 0.2s;
}

.types-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tz-ink);
    text-align: center;
    line-height: 1.25;
}

@media (max-width: 767px) {
    .types-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 8px;
        max-width: 100%;
    }
    .types-chip .types-icon { width: 64px; height: 64px; }
    .types-chip .types-icon svg { width: 28px; height: 28px; }
    .types-name { font-size: 10px; }
    .types-bar-title { font-size: 22px; }
    .types-bar-wrap { padding: 24px 16px 32px; }
}
@media (max-width: 380px) {
    .types-bar { grid-template-columns: repeat(3, 1fr); }
}

/* Scroll horizontal alternativa em telas bem pequenas (opcional) */
@media (max-width: 575px) {
    .types-bar.types-bar-scroll {
        display: flex;
        overflow-x: auto;
        padding-bottom: 12px;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }
    .types-bar.types-bar-scroll .types-chip {
        flex: 0 0 auto;
        min-width: 80px;
        scroll-snap-align: start;
    }
}

/* ==========================================================================
   30D. FILTRO MENINA / MENINO (cards circulares grandes - estilo Kidstok)
   ========================================================================== */
.gender-section {
    background: var(--tz-white);
    padding: 48px 24px 60px;
    max-width: 1480px;
    margin: 0 auto;
}
.gender-section-header {
    text-align: center;
    margin-bottom: 32px;
}
.gender-section-hand {
    display: block;
    font-family: var(--tz-font-hand);
    font-size: 24px;
    color: var(--tz-peach);
    line-height: 1;
    margin-bottom: 4px;
}
.gender-section-title {
    font-family: var(--tz-font-sans);
    font-size: 28px;
    font-weight: 800;
    color: var(--tz-ink);
    margin: 0;
    letter-spacing: -0.8px;
}

.gender-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 720px;
    margin: 0 auto;
}

.gender-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-decoration: none !important;
    color: var(--tz-ink) !important;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gender-card:hover {
    transform: translateY(-6px);
}

.gender-card-circle {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 320px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    transition: all 0.35s var(--tz-ease);
    border: 4px solid transparent;
}

.gender-card-menina .gender-card-circle {
    background: var(--tz-pink);
}
.gender-card-menino .gender-card-circle {
    background: var(--tz-blue);
}

.gender-card:hover .gender-card-circle {
    border-color: var(--tz-peach);
    box-shadow: 0 16px 40px rgba(45, 37, 32, 0.12);
}

.gender-card-circle img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--tz-ease);
}
.gender-card:hover .gender-card-circle img {
    transform: scale(1.05);
}

.gender-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.gender-card-label {
    font-family: var(--tz-font-sans);
    font-size: 28px;
    font-weight: 800;
    color: var(--tz-ink);
    margin: 0;
    letter-spacing: -0.5px;
    position: relative;
}
.gender-card-label::after {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background: var(--tz-peach);
    border-radius: var(--tz-radius-pill);
    margin: 6px auto 0;
    transition: width 0.3s var(--tz-ease);
}
.gender-card:hover .gender-card-label::after {
    width: 60px;
}

@media (max-width: 575px) {
    .gender-cards { gap: 24px; }
    .gender-section { padding: 32px 16px 40px; }
    .gender-section-title { font-size: 22px; }
    .gender-card-label { font-size: 22px; }
}

/* ==========================================================================
   31. PEGADA INFANTIL — decorações lúdicas (mantido)
   ========================================================================== */

/* ==========================================================================
   32. MÓDULOS ADMIN v10 — classes com prefixo tz10- (TinyMCE-resistant)
   ========================================================================== */

/* Slogan */
.tz10-slogan{text-align:center;padding:36px 24px 12px;max-width:900px;margin:0 auto;background:#fff}
.tz10-slogan-line{line-height:1.1}
.tz10-slogan-hand{font-family:var(--tz-font-hand);font-size:36px;color:var(--tz-peach);font-weight:400}
.tz10-slogan-emph{font-family:var(--tz-font-sans);font-size:38px;color:var(--tz-ink);font-weight:800;letter-spacing:-1.5px;position:relative;display:inline-block}
.tz10-slogan-emph::after{content:'';display:block;position:absolute;bottom:-6px;left:0;right:0;height:5px;background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2,5 Q25,0 50,4 T98,3' fill='none' stroke='%23F39C44' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.tz10-slogan-sub{font-size:13px;color:var(--tz-ink-mute);margin-top:14px;font-weight:500}
@media(max-width:575px){.tz10-slogan-hand{font-size:26px}.tz10-slogan-emph{font-size:28px}}

/* Features Bar */
.tz10-feat-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:32px 24px;margin:0 auto;max-width:1480px;list-style:none}
.tz10-feat-bar li{list-style:none}
.tz10-feat-card{background:#fff;border:1px solid var(--tz-cream-border);border-radius:22px;padding:20px 22px;display:flex;align-items:center;gap:14px;transition:all 0.25s var(--tz-ease)}
.tz10-feat-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(243,156,68,0.10);border-color:var(--tz-peach)}
.tz10-feat-icon{display:flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;flex-shrink:0;transition:transform 0.25s var(--tz-ease)}
.tz10-feat-card:hover .tz10-feat-icon{transform:scale(1.08) rotate(-6deg)}
.tz10-feat-text{display:flex;flex-direction:column;min-width:0}
.tz10-feat-text strong{font-size:14px;font-weight:700;color:var(--tz-ink);line-height:1.2;margin-bottom:2px}
.tz10-feat-text span{font-size:12px;color:var(--tz-ink-mute);line-height:1.2}
@media(max-width:991px){.tz10-feat-bar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.tz10-feat-bar{grid-template-columns:1fr}}

/* Compre por Tamanho */
.tz10-tam-wrap{background:#fff;padding:40px 24px;max-width:1480px;margin:0 auto}
.tz10-tam-header{text-align:center;margin-bottom:24px}
.tz10-tam-hand{font-family:var(--tz-font-hand);font-size:26px;color:var(--tz-peach);line-height:1;margin-bottom:4px;display:block}
.tz10-tam-title{font-size:28px;font-weight:800;color:var(--tz-ink);letter-spacing:-0.8px;line-height:1.1;margin:0}
.tz10-tam-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1200px;margin:0 auto;list-style:none;padding:0}
.tz10-tam-grid li{list-style:none}
.tz10-tam-chip{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none !important;color:var(--tz-ink) !important;border-radius:22px;padding:32px 18px;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1)}
.tz10-tam-chip:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(45,37,32,0.10)}
.tz10-tam-chip:hover .tz10-tam-icon{transform:scale(1.08) rotate(-6deg)}
.tz10-tam-icon{display:flex;width:80px;height:80px;border-radius:50%;background:#fff;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(45,37,32,0.06);transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1)}
.tz10-tam-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--tz-ink);text-align:center;line-height:1.2}
.tz10-tam-count{font-family:var(--tz-font-hand);font-size:15px;color:var(--tz-ink-soft);line-height:1}
.tz10-tam-pink{background:var(--tz-pink)} .tz10-tam-blue{background:var(--tz-blue)}
.tz10-tam-butter{background:var(--tz-butter)} .tz10-tam-sage{background:var(--tz-sage)}
@media(max-width:991px){.tz10-tam-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:575px){.tz10-tam-chip{padding:20px 12px}.tz10-tam-icon{width:64px;height:64px}.tz10-tam-title{font-size:22px}}

/* Compre por Tipo */
.tz10-tipo-wrap{background:#fff;padding:40px 24px;max-width:1480px;margin:0 auto}
.tz10-tipo-header{text-align:center;margin-bottom:24px}
.tz10-tipo-hand{font-family:var(--tz-font-hand);font-size:24px;color:var(--tz-peach);line-height:1;margin-bottom:4px;display:block}
.tz10-tipo-title{font-size:26px;font-weight:800;color:var(--tz-ink);letter-spacing:-0.8px;line-height:1.1;margin:0}
.tz10-tipo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;max-width:900px;margin:0 auto;list-style:none;padding:0}
.tz10-tipo-grid li{list-style:none}
.tz10-tipo-chip{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none !important;color:var(--tz-ink) !important;transition:all 0.25s var(--tz-ease)}
.tz10-tipo-icon{display:flex;width:80px;height:80px;border-radius:50%;background:#fff;border:1.5px solid var(--tz-cream-border);align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(45,37,32,0.04);transition:all 0.25s var(--tz-ease)}
.tz10-tipo-chip:hover .tz10-tipo-icon{background:var(--tz-cream-soft);border-color:var(--tz-peach);transform:translateY(-4px);box-shadow:0 8px 20px rgba(243,156,68,0.18)}
.tz10-tipo-chip:hover .tz10-tipo-icon svg{stroke:var(--tz-peach-dark)}
.tz10-tipo-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:var(--tz-ink);text-align:center;line-height:1.25}
@media(max-width:767px){.tz10-tipo-grid{grid-template-columns:repeat(3,1fr)}.tz10-tipo-icon{width:64px;height:64px}.tz10-tipo-icon svg{width:28px;height:28px}.tz10-tipo-name{font-size:10px}.tz10-tipo-title{font-size:22px}}

/* Filtro Menina/Menino */
.tz10-gen-wrap{background:#fff;padding:48px 24px 60px;max-width:1480px;margin:0 auto}
.tz10-gen-header{text-align:center;margin-bottom:32px}
.tz10-gen-hand{font-family:var(--tz-font-hand);font-size:24px;color:var(--tz-peach);line-height:1;margin-bottom:4px;display:block}
.tz10-gen-title{font-size:28px;font-weight:800;color:var(--tz-ink);letter-spacing:-0.8px;line-height:1.1;margin:0}
.tz10-gen-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;max-width:720px;margin:0 auto;list-style:none;padding:0}
.tz10-gen-grid li{list-style:none}
.tz10-gen-card{display:flex;flex-direction:column;align-items:center;gap:16px;text-decoration:none !important;color:var(--tz-ink) !important;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1)}
.tz10-gen-card:hover{transform:translateY(-6px)}
.tz10-gen-circle{display:block;width:100%;aspect-ratio:1/1;max-width:280px;border-radius:50%;overflow:hidden;position:relative;border:4px solid transparent;transition:all 0.35s var(--tz-ease)}
.tz10-gen-card:hover .tz10-gen-circle{border-color:var(--tz-peach);box-shadow:0 16px 40px rgba(45,37,32,0.12)}
.tz10-gen-pink{background:var(--tz-pink)} .tz10-gen-blue{background:var(--tz-blue)}
.tz10-gen-label{font-size:26px;font-weight:800;color:var(--tz-ink);letter-spacing:-0.5px;text-align:center;display:block;position:relative}
.tz10-gen-label::after{content:'';display:block;width:30px;height:3px;background:var(--tz-peach);border-radius:999px;margin:6px auto 0;transition:width 0.3s var(--tz-ease)}
.tz10-gen-card:hover .tz10-gen-label::after{width:60px}
@media(max-width:575px){.tz10-gen-grid{gap:24px}.tz10-gen-title{font-size:22px}.tz10-gen-label{font-size:22px}}

/* Hovers brincalhonos */
.product-thumb {
    transition: all 0.3s var(--tz-ease);
}
.product-thumb:hover {
    transform: translateY(-4px);
}
.product-thumb:hover .product-badge {
    transform: scale(1.05);
    transition: transform 0.3s var(--tz-ease);
}

/* Cards de banner / slideshow secundário com bordas arredondadas grandes e cores */
.banner-fullwidth img,
[class*="banner-img"] {
    border-radius: var(--tz-radius-lg);
}

/* Slideshow principal com cantos arredondados nos slides */
.slideshow-fullwidth {
    padding: 16px 16px 0;
}
.slideshow-fullwidth img,
.slideshow-fullwidth .slideshow-img {
    border-radius: var(--tz-radius-lg);
    overflow: hidden;
}

/* Banners de categoria secundários — quando há módulo banner pequeno */
.column-banner .item,
.banner-module .item {
    border-radius: var(--tz-radius-lg);
    overflow: hidden;
    transition: all 0.3s var(--tz-ease);
}
.column-banner .item:hover,
.banner-module .item:hover {
    transform: translateY(-4px) rotate(0.5deg);
    box-shadow: 0 12px 24px rgba(45, 37, 32, 0.10);
}

/* Cards alternados em pastéis (módulo banner com múltiplos itens) */
.banner-row > div:nth-child(4n+1) .banner-card,
.column-banner .item:nth-child(4n+1) {
    background: var(--tz-pink);
}
.banner-row > div:nth-child(4n+2) .banner-card,
.column-banner .item:nth-child(4n+2) {
    background: var(--tz-blue);
}
.banner-row > div:nth-child(4n+3) .banner-card,
.column-banner .item:nth-child(4n+3) {
    background: var(--tz-butter);
}
.banner-row > div:nth-child(4n) .banner-card,
.column-banner .item:nth-child(4n) {
    background: var(--tz-sage);
}

/* Topbar com curvinhas suaves nas pontas (em vez de barra reta) */
.header-top-bar {
    position: relative;
}
.header-top-bar::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    height: 6px;
    background: var(--tz-peach);
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    transform: scaleX(1.2);
    pointer-events: none;
}

/* Title da seção com mais punch */
.module-products h3 {
    position: relative;
}

/* Features bar (Frete Grátis, etc.) — quando o cliente colocar */
.features-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 32px 24px;
    margin: 24px 0;
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
}
.feature-card {
    background: var(--tz-white);
    border: 1px solid var(--tz-cream-border);
    border-radius: var(--tz-radius-lg);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.25s var(--tz-ease);
}
.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(45, 37, 32, 0.06);
    border-color: var(--tz-peach);
}
.feature-card .feature-icon {
    width: 48px; height: 48px;
    background: var(--tz-cream-soft);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--tz-peach);
    font-size: 20px;
    flex-shrink: 0;
}
.feature-card .feature-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--tz-ink);
    margin-bottom: 2px;
}
.feature-card .feature-text span {
    font-size: 12px;
    color: var(--tz-ink-mute);
}

/* Categoria chip / Pílulas de idade (cards visuais por idade) */
.age-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    padding: 32px 24px;
    max-width: 1480px;
    margin: 0 auto;
}
.age-chip {
    background: var(--tz-cream-soft);
    border-radius: var(--tz-radius-lg);
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none !important;
    color: var(--tz-ink) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.age-chip:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(45, 37, 32, 0.10);
}
.age-chip:hover .age-chip-icon {
    transform: scale(1.08) rotate(-6deg);
}
.age-chip-icon {
    width: 64px; height: 64px;
    background: var(--tz-white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    color: var(--tz-peach);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 12px rgba(45, 37, 32, 0.06);
}
.age-chip:nth-child(6n+1) { background: var(--tz-pink); }
.age-chip:nth-child(6n+2) { background: var(--tz-blue); }
.age-chip:nth-child(6n+3) { background: var(--tz-butter); }
.age-chip:nth-child(6n+4) { background: var(--tz-sage); }
.age-chip:nth-child(6n+5) { background: var(--tz-lilac); }
.age-chip:nth-child(6n+6) { background: var(--tz-peach-soft); }

.age-chip-name {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.age-chip-count {
    font-family: var(--tz-font-hand);
    font-size: 14px;
    color: var(--tz-ink-mute);
}

/* Newsletter Patrick Hand maior */
.newsletter-title {
    font-size: 28px !important;
}

/* Microcopy handwritten em pontos */
.product-thumb .button-group::before {
    content: '';
    display: none;
}

/* Botão "Comprar" no produto, ícone de carrinho antes */
#button-cart::before {
    content: '\f07a';
    font-family: 'FontAwesome';
    margin-right: 8px;
    font-size: 14px;
}

/* Cart vazia com vibe fofa */
.cart-sidebar:empty::before,
#cart-content-target:empty::before {
    content: 'sua sacola está vazia';
    display: block;
    text-align: center;
    font-family: var(--tz-font-hand);
    font-size: 22px;
    color: var(--tz-ink-mute);
    padding: 60px 20px;
}

/* Form-control com hover divertido */
.form-control:hover:not(:focus) {
    border-color: var(--tz-peach-soft);
}

/* Botões com leve "salto" no active */
.btn:active,
button.btn:active {
    transform: translateY(1px) !important;
    transition: transform 0.05s linear;
}

/* Loading button: badge spinning */
.btn[data-loading-text]:disabled::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: tz-spin 0.6s linear infinite;
    margin-right: 8px;
    vertical-align: -2px;
}
@keyframes tz-spin {
    to { transform: rotate(360deg); }
}

/* Modal (popup) styling — incluindo "Ver todas as parcelas" */
.modal-content {
    border: none !important;
    border-radius: var(--tz-radius-lg) !important;
    box-shadow: 0 24px 48px rgba(45, 37, 32, 0.15);
    overflow: hidden;
}

.modal-header {
    background: var(--tz-cream-soft);
    border-bottom: 1px solid var(--tz-cream-border) !important;
    padding: 20px 24px !important;
}

.modal-title {
    font-family: var(--tz-font-sans) !important;
    font-weight: 700 !important;
    font-size: 16px;
    color: var(--tz-ink) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-body {
    padding: 28px 24px !important;
    background: var(--tz-white);
}

.modal-footer {
    border-top: 1px solid var(--tz-cream-border) !important;
    padding: 16px 24px !important;
    background: var(--tz-white);
}

/* Tabela de parcelas dentro do modal */
.modal-body table { width: 100%; border-collapse: separate; border-spacing: 0; }
.modal-body table td,
.modal-body table th {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--tz-cream-line);
    font-size: 14px;
}
.modal-body table tr:last-child td { border-bottom: none; }
.modal-body table th {
    background: var(--tz-cream-soft);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--tz-ink-mute);
}

/* Garantir que o card de produto tem o efeito visual fofo */
.product-thumb {
    box-shadow: 0 2px 8px rgba(45, 37, 32, 0.03);
}