/* ============================================================
   Specification Tabs
   File: your-theme/components/specification-tabs.css
   ============================================================ */
:root {
    --sp-accent:  #B42D33;
    --sp-border:  #EEF2F4;
    --sp-text:    #333;
    --sp-muted:   #333;
}
/* ── Tabs row ── */
.sp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(51, 51, 51, 0.2);
    margin-bottom: 0;
    width: 100%;
}

.sp-tab {
    width: calc(50% / 3);
    /* rest of existing styles */
}
.sp-tab {
    width: calc(50% / 3);
    padding: 20px !important;
    background: none !important;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #333 !important;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
    min-width: 100px;
    text-align: left;
    margin-bottom: 0.1px;
}
.sp-tab:hover {
    color: var(--sp-text) !important;
}
.sp-tab.is-active {
    font-weight: 700;
}

.sp-tab:nth-child(1).is-active {
	background: #B5D8F4 !important;
}

.sp-tab:nth-child(2).is-active {
	background: #7398C5 !important;
}

.sp-tab:nth-child(3).is-active {
	background: #4D627D !important;
}

/* ── Panel ── */
.sp-panel {
    display: none;
}
.sp-panel.is-active {
    display: block;
    animation: spFadeIn 0.3s ease forwards;
}
@keyframes spFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ── Panel inner ── */
.sp-panel-inner {
    padding: 50px 0 0;
}
/* ── Content sections ── */
.sp-content {
    display: flex;
    flex-direction: row;
    gap: 30px;
}
.sp-section {
    width: calc(33.33% - 20px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    border: 1px solid rgba(51, 51, 51, 0.2);
    padding: 45px 30px;
}

.sp-section ul {
	padding-left: 20px !important; 
}

.sp-subtitle {
    font-size: 24px !important;
    line-height: 28px !important;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--sp-text);
    margin: 0;
    font-family: 'Lora', serif !important;
}
.sp-copy li {
    font-size: 1rem !important;
    color: var(--sp-muted);
    line-height: 20px !important;
}
.sp-copy li {
    margin: 0 0 15px;
}
.sp-copy li:last-child {
    margin-bottom: 0;
}

#sp-panel-0 .sp-content .sp-section {
	background: #B5D8F4;
}

#sp-panel-1 .sp-content .sp-section {
	background: #7398C5;
}

#sp-panel-2 .sp-content .sp-section {
	background: #4D627D;
}

#sp-panel-1 .sp-content .sp-section .sp-subtitle, #sp-panel-1 .sp-content .sp-section .sp-copy li, #sp-panel-2 .sp-content .sp-section .sp-subtitle, #sp-panel-2 .sp-content .sp-section .sp-copy li {
	color: #fff;
}

#sp-tab-1.is-active, #sp-tab-2.is-active {
	color: #fff !important;
}

/* ============================================================
   TABLET — 601px to 1024px
   ============================================================ */
@media (min-width: 601px) and (max-width: 1024px) {
    .sp-panel-inner {
        padding: 50px 0;
    }
    .sp-content {
        flex-direction: column;
    }
    .sp-section {
        width: 100%;
    }
    
    .sp-tab {
		width: 33.33%;
	}
}
/* ============================================================
   MOBILE — 600px and below
   ============================================================ */
@media (max-width: 767px) {

    .sp-tab {
        font-size: 0.78rem;
        width: 33.33%;
        text-align: center;
    }
    .sp-subtitle {
        font-size: 24px !important;
        line-height: 28px !important;
    }
    .sp-panel-inner {
        padding: 50px 0;
    }
    .sp-content {
        flex-direction: column;
    }
    .sp-section {
        width: 100%;
    }
}