/**
 * Family_ProductTabs — Tab styles
 * Scoped under .pdt-* prefix to avoid theme conflicts.
 * Matches screenshot: cream background, rust active underline, Inter font.
 */

/* ── CUSTOM PROPERTIES ──────────────────────────────── */
.pdt-wrap {
    --pdt-cream:      #F5F0E8;
    --pdt-ink:        #1A1612;
    --pdt-muted:      #7B6E62;
    --pdt-border:     #DDD5C5;
    --pdt-rust:       #7A2E2E;
    --pdt-body-text:  #3A3028;
    --pdt-font-sans:  'Inter', system-ui, -apple-system, sans-serif;
    --pdt-font-ser:   'Newsreader', Georgia, serif;
    --pdt-radius:     0px;
}

/* ── OUTER WRAPPER ──────────────────────────────────── */
.pdt-wrap {
    background:   var(--pdt-cream);
    border-top:   1.5px solid var(--pdt-border);
    margin-top:   48px;
    font-family:  var(--pdt-font-sans);
    color:        var(--pdt-ink);
    font-size:    15px;
    line-height:  1.7;
}

/* ── TAB NAV ────────────────────────────────────────── */
.pdt-nav {
    display:        flex;
    align-items:    flex-end;
    border-bottom:  1.5px solid var(--pdt-border);
    gap:            0;
    padding:        0;
    overflow-x:     auto;
    scrollbar-width: none;   /* Firefox */
}
.pdt-nav::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* ── TAB BUTTON ─────────────────────────────────────── */
.pdt-tab-btn {
    position:       relative;
    display:        inline-flex;
    align-items:    center;
    padding:        18px 24px 16px;
    background:     transparent;
    border:         none;
    border-bottom:  3px solid transparent;
    margin-bottom:  -1.5px;           /* overlap container border */
    font-family:    var(--pdt-font-sans);
    font-size:      14px;
    font-weight:    400;
    color:          var(--pdt-muted);
    cursor:         pointer;
    white-space:    nowrap;
    transition:     color .15s ease, border-color .15s ease;
    outline:        none;
    line-height:    1.4;
    letter-spacing: 0.1px;
}

.pdt-tab-btn:hover {
    color: var(--pdt-ink);
}

/* Active state — rust bottom border + darker text (matches screenshot) */
.pdt-tab-btn--active {
    color:              var(--pdt-ink);
    font-weight:        500;
    border-bottom-color: var(--pdt-rust);
}

/* Keyboard focus ring */
.pdt-tab-btn:focus-visible {
    outline:        2px solid var(--pdt-rust);
    outline-offset: -2px;
    border-radius:  2px;
}

/* ── PANEL ──────────────────────────────────────────── */
.pdt-panel {
    padding:    32px 0 44px;
}

/* ── CONTENT TYPOGRAPHY ─────────────────────────────── */
.pdt-content {
    max-width:   640px;
    font-size:   15px;
    line-height: 1.75;
    color:       var(--pdt-body-text);
}

/* Paragraph */
.pdt-para {
    margin:      0 0 20px;
    font-size:   15px;
    line-height: 1.75;
    color:       var(--pdt-body-text);
}
.pdt-para:last-child { margin-bottom: 0; }

/* Bullet list — custom dot to match screenshot style */
.pdt-list {
    list-style:     none;
    padding:        0;
    margin:         16px 0 0;
}

.pdt-list li {
    position:      relative;
    padding-left:  22px;
    margin-bottom: 12px;
    font-size:     15px;
    line-height:   1.6;
    color:         var(--pdt-body-text);
}

.pdt-list li::before {
    content:      '•';
    position:     absolute;
    left:         4px;
    top:          1px;
    color:        var(--pdt-muted);
    font-size:    16px;
    line-height:  1.5;
}

.pdt-list li:last-child { margin-bottom: 0; }

/* ── x-cloak ────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 767px) {
    .pdt-tab-btn {
        padding:   14px 16px 12px;
        font-size: 13px;
    }

    .pdt-panel {
        padding: 24px 0 32px;
    }

    .pdt-content,
    .pdt-para,
    .pdt-list li {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdt-tab-btn { transition: none; }
}