/* ============================================================
   products-tabs.css
   ────────────────────────────────────────────────────────────
   LOCATION : motta-child/assets/css/products-tabs.css
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1. SECTION WRAPPER
   ════════════════════════════════════════════════════════════ */
body.tinza-child .tinza-tabs {
    width:       100%;
    max-width:   var(--container-max);
    margin:      0 auto;
    padding:     var(--space-2) var(--header-pad-x);  /* 8px 60px */
    box-sizing:  border-box;
    font-family: var(--font-primary);
}


/* ════════════════════════════════════════════════════════════
   2. TABS NAVIGATION
   ════════════════════════════════════════════════════════════ */
body.tinza-child .tinza-tabs__nav {
    display:         flex;
    flex-direction:  row;
    justify-content: center;
    align-items:     center;
    gap:             var(--space-8);             /* 40px between tabs */
    padding:         var(--space-2) 0;
    list-style:      none;
    margin:          0;
}

body.tinza-child .tinza-tabs__item {
    display:     inline-flex;
    align-items: center;
}


/* ════════════════════════════════════════════════════════════
   3. TAB BUTTON  (DESKTOP)
   ════════════════════════════════════════════════════════════ */
body.tinza-child .tinza-tabs__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         0 0 var(--space-1);        
    background:      transparent;
    border:          none;
    border-bottom:   1px solid transparent;       
    font-family:     var(--font-primary);
    font-weight:     var(--font-weight-regular);  
    font-size:       14px;       
    line-height:     1.4;
    letter-spacing:  0.005em;
    text-transform:  uppercase;
    color:           var(--color-text);          
    cursor:          pointer;
    white-space:     nowrap;
    transition:      color var(--t-fast),
                     border-color var(--t-fast),
                     font-weight var(--t-fast);
}

/* Hover state (inactive only) */
body.tinza-child .tinza-tabs__btn:hover {
    color: var(--color-primary);
}

/* ── Active tab — desktop ── */
body.tinza-child .tinza-tabs__btn.is-active {
    font-weight:   var(--font-weight-semibold);   
    border-bottom: 1px solid var(--color-text);
    color:         var(--color-text);
}


/* ════════════════════════════════════════════════════════════
   4. TABS CONTENT  (panels — hidden when not active)
   ════════════════════════════════════════════════════════════ */
body.tinza-child .tinza-tabs__panels {
    margin-top: var(--space-6);                   
}

body.tinza-child .tinza-tabs__panel {
    display:    none;
    animation:  tinza-fade .35s ease;
}
body.tinza-child .tinza-tabs__panel.is-active {
    display: block;
}

@keyframes tinza-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════
   5. RESPONSIVE — TABLET  (≤ 1024px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    body.tinza-child .tinza-tabs {
        padding: var(--space-2) var(--space-6);
    }

    body.tinza-child .tinza-tabs__nav {
        gap: var(--space-6);                      
    }

    body.tinza-child .tinza-tabs__btn {
        font-size: var(--font-size-small);        
    }
}


/* ════════════════════════════════════════════════════════════
   6. RESPONSIVE — MOBILE  (≤ 768px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    body.tinza-child .tinza-tabs {
        padding: var(--space-2) 0;
    }

    /* ── Nav becomes horizontal scrollable ── */
    body.tinza-child .tinza-tabs__nav {
        gap:                        var(--space-2);   /* 8px */
        justify-content:            flex-start;
        padding:                    var(--space-2) var(--space-4);
        overflow-x:                 auto;
        scroll-snap-type:           x proximity;
        -webkit-overflow-scrolling: touch;
        flex-wrap:                  nowrap;
    }
    body.tinza-child .tinza-tabs__nav::-webkit-scrollbar { display: none; }

    body.tinza-child .tinza-tabs__item {
        scroll-snap-align: start;
        flex-shrink:       0;
    }

    /* ── Pill buttons ── */
    body.tinza-child .tinza-tabs__btn {
        padding:        10px var(--space-4);          
        background:     var(--color-white);
        border:         1px solid var(--color-border);
        border-bottom:  1px solid var(--color-border);
        border-radius:  999px;                         
        font-size:      13px;
        font-weight:    var(--font-weight-medium);    
        color:          var(--color-text);
        line-height:    1.2;
    }

    body.tinza-child .tinza-tabs__btn:hover {
        background: var(--color-bg-warm);
        color:      var(--color-text);
    }

    /* ── Active pill — black background, white text ── */
    body.tinza-child .tinza-tabs__btn.is-active {
        background:    var(--color-text);              /* black #161A17 */
        border-color:  var(--color-text);
        color:         var(--color-white);
        font-weight:   var(--font-weight-semibold);
    }

    body.tinza-child .tinza-tabs__panels {
        margin-top: var(--space-4);
    }
}


/* ════════════════════════════════════════════════════════════
   7. SMALL MOBILE  (≤ 420px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
    body.tinza-child .tinza-tabs__btn {
        padding:   8px 14px;
        font-size: 12px;
    }
}