/*
 * The Standard Plus - Main Stylesheet
 * Version: 1.0.0
 * Color Scheme: Kenyan CBC Education Platform
 */

/* ============================================
   RESET & BASE
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: #212121;
    background-color: #F5F5F5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: #1B5E20;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #2E7D32;
    text-decoration: underline;
}

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

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================
   UTILITIES
   ============================================ */
.tsp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.tsp-section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1B5E20;
    margin-bottom: 1.5rem;
    text-align: center;
}

.tsp-section-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    text-align: center;
}

.tsp-view-all {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1B5E20;
}

.tsp-view-all:hover {
    color: #2E7D32;
}

.tsp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    border: 2px solid transparent;
    text-decoration: none;
    line-height: 1.4;
}

.tsp-btn-primary {
    background-color: #1B5E20;
    color: #FFFFFF;
    border-color: #1B5E20;
}

.tsp-btn-primary:hover {
    background-color: #2E7D32;
    border-color: #2E7D32;
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.3);
}

.tsp-btn-outline {
    background-color: transparent;
    color: #1B5E20;
    border-color: #1B5E20;
}

.tsp-btn-outline:hover {
    background-color: #1B5E20;
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-1px);
}

.tsp-btn-lg {
    padding: 14px 32px;
    font-size: 1.05rem;
}

.tsp-btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
}

.tsp-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: #757575;
    font-size: 1.05rem;
}

/* Badges */
.tsp-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.tsp-badge-grade {
    background-color: #E8F5E9;
    color: #1B5E20;
}

.tsp-badge-subject {
    background-color: #FFF3E0;
    color: #E65100;
}

.tsp-badge-category {
    background-color: #E3F2FD;
    color: #1565C0;
}

.tsp-badge-term {
    background-color: #F3E5F5;
    color: #7B1FA2;
}

/* ============================================
   TOP BAR
   ============================================ */
.tsp-top-bar {
    background-color: #1B5E20;
    color: #FFFFFF;
    padding: 8px 0;
    font-size: 0.85rem;
}

.tsp-top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tsp-top-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tsp-top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tsp-top-bar-phone,
.tsp-top-bar-email {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tsp-top-bar-phone a,
.tsp-top-bar-email a {
    color: #FFFFFF;
    text-decoration: none;
}

.tsp-top-bar-phone a:hover,
.tsp-top-bar-email a:hover {
    text-decoration: underline;
    color: #C8E6C9;
}

.tsp-mpesa-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
}

/* WhatsApp Floating Button */
.tsp-whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 56px;
    height: 56px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.tsp-whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    text-decoration: none;
}

.tsp-whatsapp-float svg {
    display: block;
}

/* ============================================
   HEADER
   ============================================ */
.tsp-header {
    background-color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.tsp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    gap: 20px;
}

/* Logo */
.tsp-site-logo {
    flex-shrink: 0;
}

.tsp-logo-fallback {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.tsp-logo-fallback:hover {
    text-decoration: none;
}

.custom-logo-link {
    display: flex;
    align-items: center;
}

.custom-logo {
    max-height: 55px;
    width: auto;
}

/* Header Search */
.tsp-header-search {
    flex: 1;
    max-width: 480px;
}

.tsp-search-form {
    display: flex;
    position: relative;
}

.tsp-search-input {
    width: 100%;
    padding: 10px 48px 10px 16px;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
    background-color: #FAFAFA;
}

.tsp-search-input:focus {
    outline: none;
    border-color: #1B5E20;
    background-color: #FFFFFF;
}

.tsp-search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #1B5E20;
    color: #FFFFFF;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.tsp-search-btn:hover {
    background-color: #2E7D32;
}

/* Header Cart */
.tsp-header-cart {
    flex-shrink: 0;
}

.tsp-cart-link {
    position: relative;
    display: flex;
    align-items: center;
    color: #212121;
    text-decoration: none;
    transition: color 0.2s ease;
}

.tsp-cart-link:hover {
    color: #1B5E20;
    text-decoration: none;
}

.tsp-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: #1B5E20;
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Hamburger */
.tsp-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    padding: 0;
    z-index: 1001;
}

.tsp-hamburger-line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #1B5E20;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.tsp-hamburger.active .tsp-hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.tsp-hamburger.active .tsp-hamburger-line:nth-child(2) {
    opacity: 0;
}

.tsp-hamburger.active .tsp-hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* ============================================
   NAVIGATION
   ============================================ */
.tsp-main-nav {
    background-color: #FFFFFF;
    border-top: 1px solid #F0F0F0;
}

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

.tsp-nav-list > li {
    position: relative;
}

.tsp-nav-list > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 18px;
    color: #212121;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tsp-nav-list > li > a:hover,
.tsp-nav-list > li.current-menu-item > a {
    color: #1B5E20;
    background-color: #E8F5E9;
    text-decoration: none;
}

/* Dropdown Menus */
.tsp-nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-radius: 0 0 8px 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s ease;
    z-index: 999;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tsp-nav-list > li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tsp-nav-list .sub-menu li a {
    display: block;
    padding: 10px 18px;
    color: #212121;
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid #F5F5F5;
}

.tsp-nav-list .sub-menu li a:hover {
    color: #1B5E20;
    background-color: #E8F5E9;
    text-decoration: none;
}

.tsp-nav-list .sub-menu li:last-child a {
    border-bottom: none;
}

/* ============================================
   HERO SECTION
   ============================================ */
.tsp-hero {
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #43A047 100%);
    color: #FFFFFF;
    padding: 60px 0 80px;
    position: relative;
    overflow: hidden;
}

.tsp-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.tsp-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
}

.tsp-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.tsp-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.tsp-hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.6;
}

.tsp-hero-search {
    display: flex;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
}

.tsp-hero-search-input {
    flex: 1;
    padding: 16px 24px;
    border: none;
    border-radius: 12px 0 0 12px;
    font-size: 1rem;
    color: #212121;
    background-color: #FFFFFF;
}

.tsp-hero-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.tsp-hero-search-input::placeholder {
    color: #9E9E9E;
}

.tsp-hero-search-btn {
    padding: 16px 28px;
    background-color: #1B5E20;
    color: #FFFFFF;
    border: none;
    border-radius: 0 12px 12px 0;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.tsp-hero-search-btn:hover {
    background-color: #0D3B12;
}

/* ============================================
   CATEGORY CARDS
   ============================================ */
.tsp-categories-section {
    padding: 50px 0;
    background-color: #FFFFFF;
}

.tsp-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.tsp-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 20px 24px;
    background-color: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #F0F0F0;
    border-top: 4px solid var(--cat-color, #1B5E20);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: #212121;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.tsp-category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: transparent;
    border-top-color: var(--cat-color, #1B5E20);
    text-decoration: none;
    color: var(--cat-color, #1B5E20);
}

.tsp-category-icon {
    color: var(--cat-color, #1B5E20);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tsp-category-card:hover .tsp-category-icon {
    transform: scale(1.1);
}

.tsp-category-name {
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    color: #212121;
}

.tsp-category-card:hover .tsp-category-name {
    color: var(--cat-color, #1B5E20);
}

.tsp-category-browse {
    font-size: 0.85rem;
    font-weight: 600;
    color: #757575;
    transition: color 0.2s ease;
}

.tsp-category-card:hover .tsp-category-browse {
    color: var(--cat-color, #1B5E20);
}

/* ============================================
   GRADE CARDS
   ============================================ */
.tsp-grade-section {
    padding: 50px 0;
    background-color: #F5F5F5;
}

.tsp-grade-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.tsp-grade-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 12px;
    background-color: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #F0F0F0;
    border-top: 4px solid #1B5E20;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: #212121;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tsp-grade-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: transparent;
    border-top-color: #1B5E20;
    text-decoration: none;
    color: #1B5E20;
    background-color: #FFFFFF;
}

.tsp-grade-icon {
    color: #1B5E20;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tsp-grade-card:hover .tsp-grade-icon {
    transform: scale(1.1);
}

.tsp-grade-name {
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
}

.tsp-grade-card:hover .tsp-grade-name {
    color: #1B5E20;
}

/* ============================================
   RESOURCE CARDS
   ============================================ */
.tsp-featured-section,
.tsp-popular-section,
.tsp-recommended-section {
    padding: 50px 0;
}

.tsp-popular-section {
    background-color: #FFFFFF;
}

.tsp-recommended-section {
    background-color: #F5F5F5;
}

.tsp-resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.tsp-resource-card {
    background-color: #FFFFFF;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border: 1px solid #F0F0F0;
    border-top: 4px solid var(--card-accent, #1B5E20);
}

.tsp-resource-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

.tsp-resource-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.tsp-resource-card-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Card Header - Accent Colored Top Banner */
.tsp-resource-card-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 18px;
    min-height: 70px;
    overflow: hidden;
}

.tsp-resource-card-header::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.tsp-resource-card-header::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.tsp-resource-card-type-icon {
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.tsp-resource-card-ext {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    position: relative;
    z-index: 1;
}

/* Legacy image support (still works if featured image set) */
.tsp-resource-card-image {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background-color: #F5F5F5;
}

.tsp-resource-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tsp-resource-card:hover .tsp-resource-card-image img {
    transform: scale(1.05);
}

.tsp-resource-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8F5E9;
}

/* File icon styles (for single resource page) */
.tsp-file-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 8px;
}

.tsp-file-icon--pdf {
    background-color: #FFEBEE;
}

.tsp-file-icon--word {
    background-color: #E3F2FD;
}

.tsp-file-icon--document,
.tsp-file-icon--default {
    background-color: #E8F5E9;
}

.tsp-file-icon--large {
    min-height: 200px;
    border-radius: 12px;
}

.tsp-file-icon-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 4px;
    line-height: 1;
}

.tsp-file-icon--pdf .tsp-file-icon-label {
    background-color: #D32F2F;
    color: #FFFFFF;
}

.tsp-file-icon--word .tsp-file-icon-label {
    background-color: #1565C0;
    color: #FFFFFF;
}

.tsp-file-icon--document .tsp-file-icon-label,
.tsp-file-icon--default .tsp-file-icon-label {
    background-color: #1B5E20;
    color: #FFFFFF;
}

.tsp-resource-card-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.tsp-resource-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 10px;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: break-word;
    flex-grow: 1;
}

.tsp-resource-card:hover .tsp-resource-card-title {
    color: var(--card-accent, #1B5E20);
}

.tsp-resource-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    justify-content: center;
}

.tsp-resource-card-price {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tsp-price {
    font-weight: 700;
    color: #1B5E20;
    font-size: 1.1rem;
}

.tsp-price.tsp-free {
    background-color: #E8F5E9;
    padding: 3px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.tsp-resource-card-action {
    padding: 0 18px 18px;
    text-align: center;
    margin-top: auto;
    /* margin-top:auto pushes Buy Now to the bottom of the card.
       Since all cards in a grid row are equal height (grid stretch),
       this ensures all Buy Now buttons align at the same line. */
}

.tsp-btn-add-cart {
    width: 100%;
    padding: 11px 16px;
    background-color: #1B5E20;
    color: #FFFFFF;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tsp-btn-add-cart:hover {
    background-color: #2E7D32;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.3);
}

.tsp-btn-add-cart.added {
    background-color: #43A047;
}

/* ============================================
   SINGLE RESOURCE PAGE
   ============================================ */
.tsp-single-layout {
    padding: 30px 0;
}

.tsp-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 0;
    font-size: 0.9rem;
    color: #757575;
}

.tsp-breadcrumb a {
    color: #1B5E20;
    text-decoration: none;
}

.tsp-breadcrumb a:hover {
    text-decoration: underline;
}

.tsp-breadcrumb-sep {
    color: #BDBDBD;
}

.tsp-breadcrumb-current {
    color: #757575;
    font-weight: 500;
}

.tsp-single-resource-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

.tsp-single-image {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    background-color: #F5F5F5;
}

.tsp-single-image img {
    width: 100%;
    height: auto;
}

.tsp-resource-placeholder-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 300px;
    background-color: #E8F5E9;
    color: #1B5E20;
    font-size: 0.95rem;
}

.tsp-single-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212121;
    margin-bottom: 16px;
    line-height: 1.3;
}

.tsp-single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.tsp-single-meta .tsp-badge {
    text-decoration: none;
    transition: transform 0.2s ease;
}

.tsp-single-meta .tsp-badge:hover {
    transform: translateY(-1px);
}

.tsp-single-content {
    line-height: 1.8;
    color: #424242;
}

.tsp-single-content h2,
.tsp-single-content h3,
.tsp-single-content h4 {
    color: #212121;
    margin: 1.5rem 0 0.75rem;
}

.tsp-single-content p {
    margin-bottom: 1rem;
}

.tsp-single-content ul,
.tsp-single-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.tsp-single-content ul {
    list-style: disc;
}

.tsp-single-content ol {
    list-style: decimal;
}

/* Purchase Panel */
.tsp-single-sidebar {
    position: sticky;
    top: 100px;
}

.tsp-purchase-panel {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tsp-purchase-price {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #F0F0F0;
    text-align: center;
}

.tsp-price-large {
    font-size: 2rem;
    font-weight: 700;
    color: #1B5E20;
}

.tsp-price-large.tsp-free {
    background-color: #E8F5E9;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 1.2rem;
    display: inline-block;
}

.tsp-purchase-panel .tsp-btn {
    width: 100%;
    margin-bottom: 10px;
}

.tsp-resource-details {
    margin-top: 24px;
    padding: 20px 24px;
    background-color: #F8FAF8;
    border: 1px solid #E8F5E9;
    border-left: 4px solid #43A047;
    border-radius: 10px;
    /* max-width: 520px removed in Task 29 — was preventing the details box
       from filling its desktop grid column (1fr in a 1fr/380px grid).
       All other sizing (padding, font-size, border) is unchanged. */
}

.tsp-resource-details h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E0E0E0;
    text-align: center;  /* Task 34 — center the "Resource Details" heading */
}

.tsp-resource-details ul {
    list-style: none;
    padding: 0;
}

.tsp-resource-details li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #F5F5F5;
    font-size: 0.9rem;
}

.tsp-resource-details li:last-child {
    border-bottom: none;
}

.tsp-resource-details li strong {
    color: #757575;
    font-weight: 500;
}

.tsp-mpesa-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    background-color: #E8F5E9;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #1B5E20;
    text-align: center;
    width: 100%;
}

/* Related Resources */
.tsp-related-section {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 2px solid #F0F0F0;
}

/* ============================================
   ARCHIVE PAGE
   ============================================ */
.tsp-archive-layout {
    padding: 30px 0;
}

.tsp-archive-header {
    margin-bottom: 24px;
}

.tsp-archive-title {
    font-size: 2rem;
    font-weight: 700;
    color: #212121;
    margin-bottom: 8px;
}

.tsp-archive-subtitle {
    color: #757575;
    font-size: 1.05rem;
}

/* Active Filters */
.tsp-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background-color: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
}

.tsp-active-filters-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #757575;
}

.tsp-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background-color: #E8F5E9;
    color: #1B5E20;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.tsp-remove-filter {
    background: none;
    border: none;
    color: #1B5E20;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}

.tsp-remove-filter:hover {
    color: #D32F2F;
}

.tsp-clear-filters {
    color: #D32F2F;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.tsp-clear-filters:hover {
    text-decoration: underline;
}

/* ============================================
   ARCHIVE CONTENT WITH SIDEBAR
   ============================================ */
.tsp-archive-with-sidebar {
    display: flex !important;
    flex-direction: row !important;
    gap: 28px;
    align-items: flex-start;
}

.tsp-archive-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    order: 1;
}

/* When sidebar is present, resource grid uses 2 columns */
.tsp-archive-main .tsp-resources-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.tsp-archive-sidebar {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
    position: sticky;
    top: 90px;
    order: 2;
}

/* ============================================
   SIDEBAR WIDGETS — Premium Card Design
   ============================================ */
.tsp-sidebar-widget {
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(27, 94, 32, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
    margin-bottom: 16px;
    border: none;
    border-left: 4px solid #1B5E20;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}

.tsp-sidebar-widget:hover {
    box-shadow: 0 8px 28px rgba(27, 94, 32, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.tsp-sidebar-widget:last-child {
    margin-bottom: 0;
}

/* --- Sidebar Category Cards (Blog Sidebar) --- */
.tsp-sidebar-cat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-left: 4px solid var(--cat-color, #1B5E20);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    text-decoration: none;
    transition: all 0.2s ease;
}
.tsp-sidebar-cat-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    text-decoration: none;
}
.tsp-sidebar-cat-card:last-child {
    margin-bottom: 0;
}
.tsp-sidebar-cat-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--cat-color, #1B5E20);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
}
.tsp-sidebar-cat-card-info {
    flex: 1;
    min-width: 0;
}
.tsp-sidebar-cat-card-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #212121;
    line-height: 1.3;
}
.tsp-sidebar-cat-card-count {
    display: block;
    font-size: 0.72rem;
    color: #757575;
    margin-top: 2px;
}
.tsp-sidebar-cat-card-arrow {
    color: #9E9E9E;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.tsp-sidebar-cat-card:hover .tsp-sidebar-cat-card-arrow {
    color: var(--cat-color, #1B5E20);
}

/* --- Sidebar Category Heading --- */
.tsp-sidebar-cat-heading {
    text-align: center;
    margin-bottom: 12px;
}
.tsp-sidebar-cat-heading-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1B5E20;
    margin: 0;
    padding: 0;
}
.tsp-sidebar-cat-heading-title svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.tsp-sidebar-widget-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1B5E20;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #E8F5E9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tsp-sidebar-widget-title svg {
    flex-shrink: 0;
    opacity: 0.8;
    color: #1B5E20;
}

/* Sidebar Search */
.tsp-sidebar-search-widget {
    text-align: center;
}
.tsp-sidebar-search-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1B5E20;
    margin: 0 0 12px 0;
    padding: 0;
}
.tsp-sidebar-search-heading svg {
    flex-shrink: 0;
    opacity: 0.8;
}
.tsp-sidebar-search-centered {
    display: flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    margin: 0 auto;
}
.tsp-sidebar-search {
    display: flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.tsp-sidebar-search-input {
    flex: 1;
    padding: 11px 14px;
    border: 2px solid #E0E0E0;
    border-right: none;
    border-radius: 10px 0 0 10px;
    font-size: 0.85rem;
    color: #212121;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    background-color: #FAFAFA;
}

.tsp-sidebar-search-input:focus {
    border-color: #1B5E20;
    background-color: #FFFFFF;
}

.tsp-sidebar-search-input::placeholder {
    color: #9E9E9E;
}

.tsp-sidebar-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: auto;
    background-color: #1B5E20;
    color: #FFFFFF;
    border: 2px solid #1B5E20;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tsp-sidebar-search-btn:hover {
    background-color: #2E7D32;
    border-color: #2E7D32;
}

/* Sidebar Taxonomy Lists */
.tsp-sidebar-tax-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tsp-sidebar-tax-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-bottom: 2px;
}

.tsp-sidebar-tax-list li:hover {
    background-color: #F1F8E9;
    padding-left: 16px;
}

.tsp-sidebar-tax-list li a {
    color: #424242;
    text-decoration: none;
    flex: 1;
    padding-right: 8px;
    transition: color 0.2s ease;
    line-height: 1.4;
    font-weight: 500;
}

.tsp-sidebar-tax-list li a:hover {
    color: #1B5E20;
    text-decoration: none;
}

.tsp-sidebar-tax-list li.current-cat {
    background-color: #E8F5E9;
    border-radius: 10px;
}

.tsp-sidebar-tax-list li.current-cat a {
    color: #1B5E20;
    font-weight: 700;
}

.tsp-sidebar-count {
    background-color: #E8F5E9;
    color: #1B5E20;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    min-width: 28px;
    text-align: center;
    line-height: 1.4;
}

.tsp-sidebar-tax-list li.current-cat .tsp-sidebar-count {
    background-color: #1B5E20;
    color: #FFFFFF;
}

.tsp-sidebar-tax-list li:hover .tsp-sidebar-count {
    background-color: #C8E6C9;
}

/* Sidebar Current Term Badge */
.tsp-sidebar-current-term {
    text-align: center;
    padding: 22px 16px !important;
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 50%, #A5D6A7 100%) !important;
    border-left: 4px solid #1B5E20 !important;
    position: relative;
    overflow: hidden;
}

.tsp-sidebar-current-term::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.tsp-sidebar-term-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    position: relative;
}

.tsp-sidebar-term-type {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #558B2F;
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 10px;
    border-radius: 10px;
}

.tsp-sidebar-term-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1B5E20;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.tsp-sidebar-all-resources {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1B5E20;
    text-decoration: none;
    padding: 7px 16px;
    background-color: #FFFFFF;
    border: 1px solid #A5D6A7;
    border-radius: 20px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    position: relative;
}

.tsp-sidebar-all-resources:hover {
    background-color: #1B5E20;
    color: #FFFFFF;
    border-color: #1B5E20;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.2);
}

/* Horizontal Filter Bar */
.tsp-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px 24px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tsp-filter-bar-item {
    flex: 1;
    min-width: 140px;
}

.tsp-filter-bar-item label {
    display: block;
    font-weight: 500;
    font-size: 0.8rem;
    color: #757575;
    margin-bottom: 4px;
}

.tsp-filter-bar-item .tsp-filter-select {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #212121;
    background-color: #FFFFFF;
    transition: border-color 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 30px;
}

.tsp-filter-bar-item .tsp-filter-select:focus {
    outline: none;
    border-color: #1B5E20;
}

.tsp-filter-bar-btn {
    flex: 0 0 auto;
    min-width: auto;
}

.tsp-filter-bar-btn .tsp-btn {
    padding: 8px 20px;
    font-size: 0.85rem;
}

/* Filter Sidebar */
.tsp-filter-sidebar {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 100px;
}

.tsp-filter-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 20px;
}

.tsp-filter-item {
    margin-bottom: 16px;
}

.tsp-filter-item label {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    color: #424242;
    margin-bottom: 6px;
}

.tsp-filter-select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #212121;
    background-color: #FFFFFF;
    transition: border-color 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 36px;
}

.tsp-filter-select:focus {
    outline: none;
    border-color: #1B5E20;
}

.tsp-btn-apply-filter {
    width: 100%;
    margin-top: 8px;
}

/* Sort Bar */
.tsp-sort-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.tsp-sort-label {
    font-weight: 500;
    font-size: 0.9rem;
    color: #757575;
    white-space: nowrap;
}

.tsp-sort-select {
    padding: 8px 32px 8px 12px;
    border: 2px solid #E0E0E0;
    border-radius: 6px;
    font-size: 0.9rem;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

.tsp-sort-select:focus {
    outline: none;
    border-color: #1B5E20;
}

/* Pagination */
.tsp-pagination {
    margin-top: 30px;
    text-align: center;
}

.tsp-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tsp-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    color: #424242;
    text-decoration: none;
    transition: all 0.2s ease;
}

.tsp-pagination .page-numbers:hover {
    border-color: #1B5E20;
    color: #1B5E20;
    text-decoration: none;
}

.tsp-pagination .page-numbers.current {
    background-color: #1B5E20;
    color: #FFFFFF;
    border-color: #1B5E20;
}

/* Load More */
.tsp-load-more-wrap {
    text-align: center;
    margin-top: 30px;
}

.tsp-btn-load-more {
    padding: 12px 36px;
    background-color: #FFFFFF;
    color: #1B5E20;
    border: 2px solid #1B5E20;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s ease;
}

.tsp-btn-load-more:hover {
    background-color: #1B5E20;
    color: #FFFFFF;
}

/* ============================================
   CART PAGE
   ============================================ */
.tsp-cart-page {
    padding: 30px 0 60px;
}

.tsp-cart-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    align-items: start;
}

.tsp-cart-items-col {
    min-width: 0;
}

.tsp-cart-summary-col {
    position: sticky;
    top: 30px;
}

.tsp-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: #212121;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tsp-cart-count-badge {
    background: #E8F5E9;
    color: #1B5E20;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

.tsp-cart-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 100%;
}

.tsp-cart-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

.tsp-cart-table thead {
    background-color: #F5F5F5;
}

.tsp-cart-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.tsp-cart-table td {
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid #F0F0F0;
}

/* Center the Grade column on desktop (header label + grade badge cell) */
.tsp-cart-table .tsp-cart-th-grade,
.tsp-cart-table .tsp-cart-td-grade {
    text-align: center;
}

/* Match the Order Summary card's inner L/R padding (.tsp-cart-summary-inner
   uses 28px on desktop). The first cell (Product) gets 28px left padding so
   the resource title aligns with the Order Summary's left edge; the last cell
   (Remove) gets 28px right padding so the remove button area aligns with the
   Order Summary's right edge. Middle cells keep their default 16px L/R
   padding so the inter-column spacing stays tight. */
.tsp-cart-table .tsp-cart-th-product,
.tsp-cart-table .tsp-cart-td-product {
    padding-left: 28px;
}
.tsp-cart-table .tsp-cart-th-remove,
.tsp-cart-table .tsp-cart-td-remove {
    padding-right: 28px;
}

.tsp-cart-product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tsp-cart-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #E8F5E9;
}

.tsp-cart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tsp-cart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tsp-cart-product-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: #212121;
    text-decoration: none;
    display: block;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
}

.tsp-cart-product-title:hover {
    color: #1B5E20;
    text-decoration: underline;
}

.tsp-cart-item-price,
.tsp-cart-item-total {
    font-weight: 700;
    color: #212121;
    font-size: 0.92rem;
    white-space: nowrap;
}

/* Quantity Controls */
.tsp-qty-control {
    display: inline-flex;
    align-items: center;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    overflow: hidden;
}

.tsp-qty-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    font-size: 1.1rem;
    font-weight: 600;
    color: #424242;
    transition: all 0.2s ease;
    border: none;
}

.tsp-qty-btn:hover {
    background-color: #1B5E20;
    color: #FFFFFF;
}

.tsp-qty-input {
    width: 48px;
    height: 36px;
    text-align: center;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    -moz-appearance: textfield;
}

.tsp-qty-input::-webkit-outer-spin-button,
.tsp-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove Button */
.tsp-cart-remove-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFEBEE;
    color: #D32F2F;
    border-radius: 50%;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.tsp-cart-remove-btn:hover {
    background-color: #D32F2F;
    color: #FFFFFF;
}

/* Cart Summary */
.tsp-cart-summary {
    margin-top: 0;
}

.tsp-cart-summary-inner {
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #F0F0F0;
}

.tsp-cart-summary-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #212121;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #F0F0F0;
}

/* Center prominent page/section titles sitewide (Task 26, refined in Task 28).
   Covers:
   - .tsp-page-title (cart / checkout / search page H1)
   - .tsp-section-title (homepage section H2 — already centered, kept for safety)
   - .tsp-checkout-section-title (Customer Details / Payment Method / Order Summary)
   - .tsp-cart-summary-title (Order Summary on cart)
   - .tsp-sidebar-widget-title (sidebar widget headings)
   - .tsp-filter-title (filter panel heading)
   - .tsp-paybill-steps-title (M-Pesa Paybill steps label)
   NOT centered on desktop (Task 28): footer headings, single resource H1,
   archive/taxonomy H1 + subtitle. These three are centered only on mobile
   (see the @media (max-width: 768px) block below).
   Hero + 404 titles are already centered via their parent containers. */
.tsp-page-title,
.tsp-section-title,
.tsp-checkout-section-title,
.tsp-cart-summary-title,
.tsp-sidebar-widget-title,
.tsp-filter-title,
.tsp-paybill-steps-title {
    text-align: center;
}

/* Flex-based titles also need justify-content: center to actually center
   their inline content (cart count badge, search query span, widget icons). */
.tsp-page-title,
.tsp-sidebar-widget-title {
    justify-content: center;
}

.tsp-cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.95rem;
    color: #616161;
}

.tsp-cart-summary-total {
    padding: 14px 0;
    margin-top: 8px;
    border-top: 2px solid #E8F5E9;
    font-weight: 700;
    font-size: 1.25rem;
    color: #1B5E20;
}

.tsp-cart-total-value {
    font-weight: 600;
}

.tsp-btn-checkout {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 24px !important;
    font-size: 1rem !important;
    margin-top: 20px;
    border-radius: 10px !important;
    white-space: nowrap;
}

.tsp-btn-continue {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 24px !important;
    font-size: 0.9rem !important;
    margin-top: 10px;
    border-radius: 10px !important;
    white-space: nowrap;
}

.tsp-cart-secure-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px;
    background: #E8F5E9;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #2E7D32;
    font-weight: 500;
}

/* Empty Cart */
.tsp-cart-empty {
    text-align: center;
    padding: 60px 20px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tsp-cart-empty svg {
    margin-bottom: 20px;
}

.tsp-cart-empty h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 8px;
}

.tsp-cart-empty p {
    color: #757575;
    margin-bottom: 24px;
}



/* Single resource document section */
.tsp-single-document {
    margin-bottom: 24px;
}

/* Checkout email notice */
.tsp-checkout-email-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background-color: #FFF3E0;
    border: 1px solid #FFB74D;
    border-left: 4px solid #E65100;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #BF360C;
    line-height: 1.5;
}

.tsp-checkout-email-notice svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Email field note */
.tsp-field-note {
    display: block;
    font-size: 0.8rem;
    color: #757575;
    margin-top: 4px;
    font-style: italic;
}

/* ============================================
   CHECKOUT PAGE
   ============================================ */
.tsp-checkout-page {
    padding: 30px 0 60px;
    overflow-x: hidden; /* prevent any horizontal overflow from cards/form inputs */
}

.tsp-checkout-form {
    margin: 0; /* override any browser default form margin */
}

.tsp-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    align-items: start;
}

/* Mirror .tsp-cart-items-col — critical: min-width:0 prevents grid item
   from expanding past its track when content (form inputs, payment cards)
   has intrinsic min-width. Without this, the grid can overflow horizontally
   on mobile and cause cards to appear shifted right with unequal margins. */
.tsp-checkout-details {
    min-width: 0;
}

.tsp-checkout-section {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 24px 24px;  /* explicitly equal L/R padding */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    max-width: 100%; /* never wider than the grid track */
}

.tsp-checkout-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212121;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #F0F0F0;
}

/* Form Fields */
.tsp-form-group {
    margin-bottom: 16px;
}

.tsp-form-group label {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    color: #424242;
    margin-bottom: 6px;
}

.required {
    color: #D32F2F;
}

.tsp-form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #212121;
    transition: border-color 0.2s ease;
}

.tsp-form-input:focus {
    outline: none;
    border-color: #1B5E20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.1);
}

.tsp-form-input::placeholder {
    color: #9E9E9E;
}

/* Phone Input */
.tsp-phone-wrap {
    display: flex;
    align-items: stretch;
}

.tsp-phone-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background-color: #F5F5F5;
    border: 2px solid #E0E0E0;
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-weight: 500;
    font-size: 0.95rem;
    color: #757575;
}

.tsp-phone-input {
    border-radius: 0 8px 8px 0;
}

/* Payment Methods */
.tsp-payment-method {
    margin-bottom: 16px;
}

.tsp-payment-option {
    display: block;
    cursor: pointer;
}

.tsp-payment-option input[type="radio"] {
    display: none;
}

.tsp-payment-card {
    padding: 16px;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    transition: all 0.25s ease;
}

.tsp-payment-option input[type="radio"]:checked + .tsp-payment-card {
    border-color: #1B5E20;
    background-color: #E8F5E9;
    box-shadow: 0 0 0 1px #1B5E20;
}

.tsp-payment-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.tsp-payment-name {
    font-weight: 600;
    font-size: 1rem;
    color: #212121;
}

.tsp-payment-desc {
    font-size: 0.85rem;
    color: #757575;
    line-height: 1.5;
}

.tsp-paybill-info {
    margin-top: 12px;
    padding: 16px;
    background-color: #F0F7F0;
    border-radius: 10px;
    border: 1px solid #C8E6C9;
}

.tsp-paybill-info p {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.tsp-paybill-info p:last-child {
    margin-bottom: 0;
}

.tsp-paybill-highlight {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #C8E6C9;
}

.tsp-paybill-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1B5E20;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tsp-paybill-number {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #1B5E20 !important;
    letter-spacing: 2px;
    margin: 6px 0 10px !important;
    padding: 10px 16px !important;
    background-color: #FFFFFF;
    border-radius: 8px;
    border: 2px dashed #43A047;
    text-align: center;
}

.tsp-paybill-steps {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #C8E6C9;
}

.tsp-paybill-steps-title {
    font-weight: 600;
    color: #1B5E20;
    margin-bottom: 8px !important;
}

.tsp-paybill-steps ol {
    padding-left: 20px;
    list-style: decimal;
    counter-reset: item;
}

.tsp-paybill-steps ol li {
    padding: 4px 0;
    font-size: 0.85rem;
    color: #424242;
    line-height: 1.6;
    list-style-type: decimal;
}

.tsp-stk-phone-wrap {
    margin-top: 16px;
}

/* Order Summary */
.tsp-order-items {
    margin-bottom: 16px;
}

.tsp-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F0F0F0;
    gap: 16px; /* breathing room between title block and price amount */
}

.tsp-order-item:last-child {
    border-bottom: none;
}

.tsp-order-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 8px; /* title must NOT touch the amount on the right */
}

.tsp-order-item-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #212121;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
}

.tsp-order-item-qty {
    font-size: 0.8rem;
    color: #9E9E9E;
}

.tsp-order-item-price {
    font-weight: 700;
    color: #212121;
    font-size: 0.92rem;
    flex: 0 0 auto;
    white-space: nowrap;
    padding-left: 8px; /* price must NOT touch the title on the left */
}

.tsp-order-total {
    padding-top: 12px;
    border-top: 2px solid #F0F0F0;
}

.tsp-order-total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.95rem;
}

.tsp-order-grand-total {
    font-weight: 700;
    font-size: 1.15rem;
    color: #1B5E20;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid #E0E0E0;
}

.tsp-btn-place-order {
    width: 100%;
    margin-top: 16px;
}

/* STK Push Status */
.tsp-stk-status {
    margin-top: 16px;
    text-align: center;
    padding: 24px;
    background-color: #FFF8E1;
    border-radius: 12px;
}

.tsp-stk-spinner p {
    color: #424242;
    margin-bottom: 8px;
    font-weight: 500;
}

.tsp-stk-hint {
    font-size: 0.85rem;
    color: #757575;
    font-weight: 400;
}

.tsp-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #E0E0E0;
    border-top-color: #1B5E20;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: tsp-spin 0.8s linear infinite;
}

@keyframes tsp-spin {
    to { transform: rotate(360deg); }
}

/* Checkout Success/Failure */
.tsp-checkout-success,
.tsp-checkout-failure {
    margin-top: 16px;
    text-align: center;
    padding: 24px;
    border-radius: 12px;
}

.tsp-checkout-success {
    background-color: #E8F5E9;
}

.tsp-checkout-success h3 {
    color: #1B5E20;
    margin: 12px 0 8px;
    font-size: 1.25rem;
}

.tsp-checkout-success p {
    color: #2E7D32;
    font-size: 0.95rem;
}

.tsp-checkout-failure {
    background-color: #FFEBEE;
}

.tsp-checkout-failure h3 {
    color: #D32F2F;
    margin: 12px 0 8px;
    font-size: 1.25rem;
}

.tsp-checkout-failure p {
    color: #C62828;
    font-size: 0.95rem;
}

/* ============================================
   SEARCH PAGE
   ============================================ */
.tsp-search-page {
    padding: 30px 0 60px;
}

.tsp-search-query {
    color: #1B5E20;
}

.tsp-search-page-form {
    margin-bottom: 24px;
}

.tsp-search-results-count {
    font-size: 0.95rem;
    color: #757575;
    margin-bottom: 20px;
}

.tsp-no-results-wrap {
    text-align: center;
    padding: 60px 20px;
}

.tsp-no-results-wrap svg {
    margin-bottom: 16px;
}

.tsp-no-results-wrap h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 8px;
}

.tsp-no-results-wrap p {
    color: #757575;
    margin-bottom: 24px;
}

.tsp-resource-card-excerpt {
    font-size: 0.85rem;
    color: #757575;
    margin-top: 8px;
    line-height: 1.5;
}

/* ============================================
   404 PAGE
   ============================================ */
.tsp-404-page {
    padding: 60px 0;
}

.tsp-404-content {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.tsp-404-title {
    font-size: 6rem;
    font-weight: 700;
    color: #1B5E20;
    line-height: 1;
    margin-bottom: 8px;
}

.tsp-404-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 12px;
}

.tsp-404-text {
    color: #757575;
    margin-bottom: 24px;
    line-height: 1.6;
}

.tsp-404-search {
    max-width: 480px;
    margin: 0 auto 24px;
}

/* ============================================
   SIDEBAR
   ============================================ */
.tsp-sidebar {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.widget {
    margin-bottom: 24px;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1B5E20;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #E8F5E9;
}

.tsp-widget-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #F5F5F5;
    font-size: 0.9rem;
}

.tsp-widget-list li:last-child {
    border-bottom: none;
}

.tsp-widget-list li a {
    color: #424242;
    text-decoration: none;
}

.tsp-widget-list li a:hover {
    color: #1B5E20;
    text-decoration: underline;
}

.tsp-widget-count {
    background-color: #E8F5E9;
    color: #1B5E20;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.tsp-widget-price {
    font-weight: 600;
    color: #1B5E20;
    font-size: 0.85rem;
}

.tsp-widget-price.tsp-free {
    background-color: #E8F5E9;
    padding: 2px 8px;
    border-radius: 12px;
}

.tsp-grade-list li a {
    display: block;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.tsp-grade-list li a:hover {
    background-color: #E8F5E9;
    text-decoration: none;
}

/* ============================================
   FOOTER
   ============================================ */
.tsp-footer {
    background-color: #1B5E20;
    color: #FFFFFF;
    padding: 50px 0 0;
    margin-top: 50px;
}

.tsp-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 40px;
    align-items: stretch;       /* Task 34 — make all 4 columns equal height */
}

.tsp-footer-heading {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #FFFFFF;
}

/* Task 34 — Make each footer column a flex column so the .tsp-footer-links
   list grows to fill the column height. Combined with align-items: stretch on
   .tsp-footer-grid above, all 4 columns now visually have the same length
   even when their item counts differ (e.g. About Us column has only 2 items). */
.tsp-footer-col {
    display: flex;
    flex-direction: column;
}

.tsp-footer-col .tsp-footer-links {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Push the last child of each column to the bottom of the stretched column
   so social icons (column 1), Privacy Policy (column 2), Tutorials (column 3),
   and Email (column 4) all sit at the same Y position. */
.tsp-footer-col .tsp-footer-links > li:last-child {
    margin-top: auto;
}

.tsp-footer-col p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

.tsp-footer-about-text {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    display: block;            /* was inline-block — needed for justify + block-level wrapping (Task 30) */
    text-align: justify;       /* justified per Task 30 */
    -webkit-hyphens: auto;
    hyphens: auto;
    margin-bottom: 12px;
}

.tsp-footer-links li {
    margin-bottom: 8px;
}

.tsp-footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.tsp-footer-links a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.tsp-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.tsp-footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.88rem;
}

.tsp-footer-contact svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.tsp-footer-contact-list svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.tsp-footer-contact-list a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.tsp-footer-contact-list a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.tsp-footer-contact-list span {
    color: rgba(255, 255, 255, 0.8);
}

.tsp-footer-contact a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.tsp-footer-contact a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.tsp-footer-contact span {
    color: rgba(255, 255, 255, 0.8);
}

.tsp-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.tsp-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    transition: all 0.2s ease;
}

.tsp-social-link:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-2px);
}

/* Footer Bottom */
.tsp-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 20px 0;
}

.tsp-footer-bottom .tsp-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tsp-copyright {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

.tsp-footer-nav {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    width: 100%;
}

.tsp-footer-nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.85rem;
}

.tsp-footer-nav a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.tsp-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tsp-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 400px;
    animation: tsp-toast-in 0.3s ease;
    border-left: 4px solid #43A047;
}

.tsp-toast.tsp-toast-error {
    border-left-color: #D32F2F;
}

.tsp-toast.tsp-toast-info {
    border-left-color: #1565C0;
}

.tsp-toast-message {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: #212121;
}

.tsp-toast-close {
    background: none;
    border: none;
    color: #9E9E9E;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
}

.tsp-toast-close:hover {
    color: #424242;
}

@keyframes tsp-toast-in {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tsp-toast-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* ============================================
   RESPONSIVE: TABLET (768px)
   ============================================ */
@media (max-width: 768px) {
    /* Center single resource + archive/taxonomy titles only on mobile (Task 28).
       On desktop these stay left-aligned for readability.
       !important added in Task 29 to guarantee override of any inherited
       left-alignment from .tsp-archive-main / .tsp-single-main parents. */
    .tsp-archive-header,
    .tsp-single-title,
    .tsp-archive-title,
    .tsp-archive-subtitle {
        text-align: center !important;
    }

    /* Center the meta badges (Grade / Subject / Category / Term) that sit
       directly below the resource H1 — mobile only (Task 30).
       This is .tsp-single-meta (the flex-wrap row of badges), NOT the
       .tsp-resource-details card below it. The details card keeps its
       left-aligned list rows on every breakpoint. */
    .tsp-single-meta {
        justify-content: center !important;
    }

    .tsp-top-bar-inner {
        gap: 6px;
    }

    .tsp-top-bar-left,
    .tsp-top-bar-right {
        flex: 1;
    }

    .tsp-top-bar-right {
        justify-content: flex-end;
    }

    .tsp-header-inner {
        flex-wrap: wrap;
    }

    .tsp-header-search {
        order: 3;
        max-width: 100%;
        width: 100%;
    }

    .tsp-hamburger {
        display: flex;
    }

    /* Mobile Navigation */
    .tsp-main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #FFFFFF;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        z-index: 999;
    }

    .tsp-main-nav.active {
        display: block;
    }

    .tsp-nav-list {
        flex-direction: column;
    }

    .tsp-nav-list > li > a {
        padding: 12px 20px;
        border-bottom: 1px solid #F0F0F0;
    }

    .tsp-nav-list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        padding-left: 20px;
        display: none;
    }

    .tsp-nav-list > li.menu-item-has-children.open > .sub-menu {
        display: block;
    }

    /* Hero */
    .tsp-hero {
        padding: 40px 0 50px;
    }

    .tsp-hero-title {
        font-size: 1.75rem;
    }

    .tsp-hero-subtitle {
        font-size: 0.95rem;
    }

    .tsp-hero-search {
        flex-direction: column;
        border-radius: 12px;
        overflow: hidden;
    }

    .tsp-hero-search-input {
        border-radius: 0;
        padding: 14px 16px;
    }

    .tsp-hero-search-btn {
        border-radius: 0;
        justify-content: center;
        padding: 14px;
    }

    /* Categories */
    .tsp-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .tsp-category-card {
        padding: 24px 16px 20px;
    }

    .tsp-category-icon svg {
        width: 28px;
        height: 28px;
    }

    /* Grade Cards */
    .tsp-grade-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .tsp-grade-card {
        padding: 18px 10px;
    }

    .tsp-grade-icon svg {
        width: 26px;
        height: 26px;
    }

    /* Resources Grid */
    .tsp-resources-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Single Resource */
    .tsp-single-resource-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .tsp-single-sidebar {
        position: static;
    }

    /* Archive with Sidebar — stack on tablet */
    .tsp-archive-with-sidebar {
        flex-direction: column !important;
        gap: 24px;
    }

    .tsp-archive-sidebar {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        position: static;
        order: 2;
    }

    .tsp-archive-main {
        order: 1;
    }

    .tsp-archive-main .tsp-resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tsp-filter-bar {
        flex-direction: column;
        gap: 10px;
        padding: 16px;
    }

    .tsp-filter-bar-item {
        min-width: 100%;
    }

    /* Cart */
    .tsp-cart-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tsp-cart-summary-col {
        position: static;
    }

    /* Cart table: keep all 6 columns visible on one row, reduce font/padding to fit */
    .tsp-cart-table {
        table-layout: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* On mobile, show the column headers for ONLY Resource, Total, and Remove
       columns (hide headers for Grade / Price / Qty). The body cells for those
       3 columns are also hidden (see below). This keeps a header row visible
       ("Resource" / "Total" / "Remove") above the 3 visible body columns. */
    .tsp-cart-table thead {
        display: table-header-group !important;
    }
    .tsp-cart-table .tsp-cart-th-grade,
    .tsp-cart-table .tsp-cart-th-price,
    .tsp-cart-table .tsp-cart-th-qty {
        display: none !important;
    }

    .tsp-cart-table th,
    .tsp-cart-table td {
        padding: 10px 8px !important;
        font-size: 0.88rem !important;
        letter-spacing: 0 !important;
        /* Cells default to nowrap so column widths stay stable, BUT the
           product-title cell uses white-space: normal (see below) so the
           full title is always visible — it wraps to multiple lines if long. */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        vertical-align: middle !important;
    }

    /* On mobile, ONLY 3 columns are shown: Resource, Total, Remove.
       Grade / Price / Qty columns are hidden entirely
       (both header labels and cell contents). */
    .tsp-cart-table .tsp-cart-th-grade,
    .tsp-cart-table .tsp-cart-td-grade,
    .tsp-cart-table .tsp-cart-th-price,
    .tsp-cart-table .tsp-cart-td-price,
    .tsp-cart-table .tsp-cart-th-qty,
    .tsp-cart-table .tsp-cart-td-qty {
        display: none !important;
    }

    /* Remaining 3 columns fill 100%: Resource (title can wrap), Total, Remove.
       Remove column widened to 22% so the "Remove" header label fits without
       being clipped on the right. Resource reduced to 55%, Total to 23%. */
    .tsp-cart-table .tsp-cart-th-product,
    .tsp-cart-table .tsp-cart-td-product {
        width: 55% !important;
        text-align: left !important;
    }
    .tsp-cart-table .tsp-cart-th-total,
    .tsp-cart-table .tsp-cart-td-total {
        width: 23% !important;
        text-align: right !important;
    }
    .tsp-cart-table .tsp-cart-th-remove,
    .tsp-cart-table .tsp-cart-td-remove {
        width: 22% !important;
        text-align: center !important;
    }

    /* Match the Order Summary card's inner L/R padding on tablets/phones
       (.tsp-cart-summary-inner uses 20px 20px at this breakpoint).
       First visible cell (Product) gets 20px left padding; last visible cell
       (Remove) gets 20px right padding. Middle cell (Total) keeps the 8px L/R
       cell padding so the price column stays compact. This makes the cart
       items card's visual L/R padding symmetric and equal to the Order Summary
       card below it. */
    .tsp-cart-table .tsp-cart-th-product,
    .tsp-cart-table .tsp-cart-td-product {
        padding-left: 20px !important;
    }
    .tsp-cart-table .tsp-cart-th-remove,
    .tsp-cart-table .tsp-cart-td-remove {
        padding-right: 20px !important;
    }

    /* Safety net: allow "Remove" header to wrap if it still doesn't fit
       the column width, instead of being clipped. */
    .tsp-cart-table .tsp-cart-th-remove {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.2 !important;
    }

    .tsp-cart-product {
        gap: 4px !important;
        flex-direction: row !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .tsp-cart-thumb {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
    }

    /* Product title: FULL title always visible — wraps to multiple lines if long.
       No truncation, no ellipsis. min-width:0 + flex:1 1 auto lets the title
       take all remaining space inside the cell and wrap within it.
       Font size 0.92rem matches .tsp-resource-card-title on the archive page. */
    .tsp-cart-product-title {
        font-size: 0.92rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        display: block !important;
    }

    .tsp-cart-item-price,
    .tsp-cart-item-total {
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        color: #212121 !important;
        display: block !important;
        white-space: nowrap !important;
    }

    /* Total cell content right-aligned on mobile (Resource + Total + Remove shown) */
    .tsp-cart-item-total {
        text-align: right !important;
        font-weight: 700 !important;
    }

    .tsp-qty-control {
        border-width: 1px !important;
        margin: 0 auto !important;
    }

    .tsp-qty-btn {
        width: 20px !important;
        height: 24px !important;
        font-size: 0.7rem !important;
    }

    .tsp-qty-input {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.65rem !important;
        padding: 0 !important;
    }

    .tsp-cart-remove-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 1rem !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .tsp-badge-grade {
        font-size: 0.58rem !important;
        padding: 2px 4px !important;
        white-space: nowrap !important;
    }

    /* Cart summary + buttons: force centering on tablets/phones (<=768px) */
    .tsp-cart-summary {
        width: 100% !important;
    }

    .tsp-cart-summary-inner {
        width: 100% !important;
        padding: 20px 20px !important;  /* explicitly equal L/R padding */
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .tsp-btn-checkout,
    .tsp-btn-continue {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    .tsp-cart-secure-badge {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /* Checkout: single column on mobile, matches cart page layout exactly.
       Cards fill the full grid track width with no horizontal margin/padding
       on the grid itself — same pattern as .tsp-cart-grid on mobile. */
    .tsp-checkout-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 !important;
    }
    .tsp-checkout-details {
        min-width: 0 !important;
        width: 100% !important;
    }
    .tsp-checkout-section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Footer */
    .tsp-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .tsp-footer-bottom .tsp-container {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
}

/* ============================================
   RESPONSIVE: MOBILE (480px)
   ============================================ */
@media (max-width: 480px) {
    .tsp-top-bar {
        font-size: 0.7rem;
        padding: 6px 0;
    }

    .tsp-top-bar-phone,
    .tsp-top-bar-email {
        gap: 3px;
    }

    .tsp-whatsapp-float {
        bottom: 20px;
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .tsp-whatsapp-float svg {
        width: 24px;
        height: 24px;
    }

    .tsp-hero-title {
        font-size: 1.4rem;
    }

    .tsp-hero-subtitle {
        font-size: 0.9rem;
    }

    .tsp-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .tsp-category-name {
        font-size: 0.85rem;
    }

    .tsp-category-browse {
        font-size: 0.75rem;
    }

    .tsp-category-card {
        padding: 20px 12px 16px;
    }

    .tsp-grade-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .tsp-grade-name {
        font-size: 0.85rem;
    }

    .tsp-grade-card {
        padding: 14px 8px;
    }

    .tsp-grade-icon svg {
        width: 22px;
        height: 22px;
    }

    .tsp-resources-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tsp-archive-main .tsp-resources-grid {
        grid-template-columns: 1fr;
    }

    .tsp-resource-card-image {
        height: 140px;
    }

    .tsp-resource-card-header {
        padding: 16px 14px;
        min-height: 60px;
    }

    .tsp-section-title {
        font-size: 1.35rem;
    }

    .tsp-single-title {
        font-size: 1.35rem;
    }

    .tsp-page-title {
        font-size: 1.5rem;
    }

    .tsp-archive-title {
        font-size: 1.5rem;
    }

    .tsp-404-title {
        font-size: 4rem;
    }

    .tsp-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Cart: tighter sizing for narrow phones (<=480px). Only Resource + Total
       columns are shown (inherited from 768px breakpoint). */
    .tsp-cart-table th,
    .tsp-cart-table td {
        padding: 8px 6px !important;
        font-size: 0.8rem !important;
    }

    /* Match the Order Summary card's narrower L/R padding on phones (<=480px).
       .tsp-cart-summary-inner uses 16px 16px at this breakpoint, so the cart
       items card's first cell gets 16px left padding and the last cell gets
       16px right padding — keeping the two cards visually aligned edge-to-edge. */
    .tsp-cart-table .tsp-cart-th-product,
    .tsp-cart-table .tsp-cart-td-product {
        padding-left: 16px !important;
    }
    .tsp-cart-table .tsp-cart-th-remove,
    .tsp-cart-table .tsp-cart-td-remove {
        padding-right: 16px !important;
    }

    .tsp-cart-product {
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .tsp-cart-thumb {
        width: 30px !important;
        height: 30px !important;
    }

    .tsp-cart-product-title {
        font-size: 0.92rem !important;
        line-height: 1.35 !important;
    }

    .tsp-cart-item-price,
    .tsp-cart-item-total {
        font-size: 0.92rem !important;
        font-weight: 700 !important;
    }

    .tsp-qty-btn {
        width: 20px;
        height: 22px;
        font-size: 0.75rem;
    }

    .tsp-qty-input {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    /* Bigger remove button on narrow phones for easier tap target */
    .tsp-cart-remove-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.95rem !important;
    }

    .tsp-badge-grade {
        font-size: 0.6rem;
        padding: 2px 4px;
    }

    /* Tighter summary padding on narrow phones */
    .tsp-cart-summary-inner {
        padding: 16px 16px;  /* explicitly equal L/R padding on narrow phones */
    }

    .tsp-phone-wrap {
        flex-direction: column;
    }

    .tsp-phone-prefix {
        border-radius: 8px 8px 0 0;
        border-right: 2px solid #E0E0E0;
        justify-content: center;
        padding: 10px;
    }

    .tsp-phone-input {
        border-radius: 0 0 8px 8px;
    }

    .tsp-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .tsp-btn-lg {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .tsp-toast {
        min-width: auto;
        max-width: calc(100vw - 40px);
    }

    .tsp-toast-container {
        left: 20px;
        right: 20px;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes tsp-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tsp-resource-card {
    animation: tsp-fade-in 0.4s ease;
}

.tsp-resource-card:nth-child(2) {
    animation-delay: 0.05s;
}

.tsp-resource-card:nth-child(3) {
    animation-delay: 0.1s;
}

.tsp-resource-card:nth-child(4) {
    animation-delay: 0.15s;
}

.tsp-resource-card:nth-child(5) {
    animation-delay: 0.2s;
}

.tsp-resource-card:nth-child(6) {
    animation-delay: 0.25s;
}

.tsp-resource-card:nth-child(7) {
    animation-delay: 0.3s;
}

.tsp-resource-card:nth-child(8) {
    animation-delay: 0.35s;
}

/* Loading state */
.tsp-btn-add-cart.loading {
    opacity: 0.7;
    pointer-events: none;
}

.tsp-btn-add-cart.loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: tsp-spin 0.6s linear infinite;
    display: inline-block;
}

/* ============================================
   STANDARD POST & PAGE STYLES
   (Clean flowing layout — no card boxes)
   ============================================ */

/* --- Breadcrumb --- */
.tsp-post-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.85rem;
    color: #757575;
    padding: 16px 0 12px;
}
.tsp-post-breadcrumb a {
    color: #1B5E20;
    text-decoration: none;
    font-weight: 500;
}
.tsp-post-breadcrumb a:hover {
    text-decoration: underline;
}
.tsp-breadcrumb-sep {
    color: #BDBDBD;
}
.tsp-breadcrumb-current {
    color: #424242;
    font-weight: 600;
}

/* --- Sidebar Layout (shared by posts, pages, archives) --- */
.tsp-single-post-with-sidebar,
.tsp-page-with-sidebar,
.tsp-archive-with-sidebar {
    display: flex;
    flex-direction: row;
    gap: 28px;
    align-items: flex-start;
    padding-top: 16px;
}
.tsp-single-post-main,
.tsp-page-main,
.tsp-archive-main {
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
}
.tsp-blog-sidebar {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
    position: sticky;
    top: 90px;
    order: 2;
}

/* --- Post Categories --- */
.tsp-post-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

/* --- Post Title --- */
.tsp-post-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: #212121;
    line-height: 1.35;
    margin-bottom: 16px;
}

/* --- Page Title --- */
.tsp-page-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: #212121;
    line-height: 1.35;
    margin-bottom: 16px;
}

/* --- Post Meta --- */
.tsp-post-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #E8F5E9;
}
.tsp-post-meta-author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tsp-post-meta-author img {
    border-radius: 50%;
    width: 44px;
    height: 44px;
    border: 2px solid #E8F5E9;
}
.tsp-post-meta-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tsp-post-meta-author-name a {
    color: #1B5E20;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
}
.tsp-post-meta-author-name a:hover {
    text-decoration: underline;
}
.tsp-post-meta-date {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #757575;
    font-size: 0.85rem;
}


/* --- Featured Image --- */
.tsp-post-featured-image,
.tsp-page-featured-image {
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
}
.tsp-post-featured-image img,
.tsp-page-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* --- Post Content & Page Body (shared styles) --- */
.tsp-post-content,
.tsp-page-body {
    font-size: 1rem;
    line-height: 1.8;
    color: #424242;
    text-align: justify;
}
.tsp-post-content h2,
.tsp-page-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212121;
    margin: 32px 0 16px;
}
.tsp-post-content h3,
.tsp-page-body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212121;
    margin: 24px 0 12px;
}
.tsp-post-content h4,
.tsp-page-body h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #424242;
    margin: 20px 0 8px;
}
.tsp-post-content p,
.tsp-page-body p {
    margin-bottom: 18px;
}
.tsp-post-content ul,
.tsp-post-content ol,
.tsp-page-body ul,
.tsp-page-body ol {
    list-style: disc;
    margin: 16px 0 18px 24px;
}
.tsp-post-content ol,
.tsp-page-body ol {
    list-style: decimal;
}
.tsp-post-content li,
.tsp-page-body li {
    margin-bottom: 6px;
    line-height: 1.7;
}
.tsp-post-content blockquote,
.tsp-page-body blockquote {
    background: #E8F5E9;
    border-left: 4px solid #1B5E20;
    padding: 16px 20px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #2E7D32;
}
.tsp-post-content img,
.tsp-page-body img {
    border-radius: 6px;
    margin: 16px 0;
}
.tsp-post-content a,
.tsp-page-body a {
    color: #1B5E20;
    text-decoration: underline;
    text-decoration-color: #A5D6A7;
    text-underline-offset: 2px;
}
.tsp-post-content a:hover,
.tsp-page-body a:hover {
    text-decoration-color: #1B5E20;
}
.tsp-post-content table,
.tsp-page-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}
.tsp-post-content th,
.tsp-post-content td,
.tsp-page-body th,
.tsp-page-body td {
    padding: 12px;
    border: 1px solid #E0E0E0;
    text-align: left;
}
.tsp-post-content th,
.tsp-page-body th {
    background: #E8F5E9;
    font-weight: 600;
    color: #1B5E20;
}
.tsp-post-content pre,
.tsp-page-body pre {
    background: #F5F5F5;
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 16px 0;
}
.tsp-post-content code,
.tsp-page-body code {
    background: #E8F5E9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* --- Post Pages (multi-page) --- */
.tsp-post-pages {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    margin-top: 16px;
    border-top: 1px solid #E0E0E0;
}
.tsp-post-pages-label {
    font-weight: 600;
    color: #1B5E20;
}
.tsp-post-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #E8F5E9;
    color: #1B5E20;
    font-weight: 600;
}

/* --- Tags --- */
.tsp-post-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 0;
    margin-bottom: 24px;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
    justify-content: center;
}
.tsp-post-tags-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #1B5E20;
    font-size: 0.9rem;
}
.tsp-badge-tag {
    display: inline-block;
    padding: 4px 12px;
    background: #F5F5F5;
    color: #424242;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #E0E0E0;
}
.tsp-badge-tag:hover {
    background: #E8F5E9;
    color: #1B5E20;
    border-color: #A5D6A7;
    text-decoration: none;
}

/* --- Share --- */
.tsp-post-share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}
.tsp-post-share-label {
    font-weight: 600;
    color: #424242;
    font-size: 0.95rem;
}
.tsp-post-share-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.tsp-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}
.tsp-share-facebook { background: #1877F2; color: #FFFFFF; }
.tsp-share-facebook:hover { background: #1565C0; color: #FFFFFF; text-decoration: none; }
.tsp-share-twitter { background: #1DA1F2; color: #FFFFFF; }
.tsp-share-twitter:hover { background: #0D8BD9; color: #FFFFFF; text-decoration: none; }
.tsp-share-whatsapp { background: #25D366; color: #FFFFFF; }
.tsp-share-whatsapp:hover { background: #1DA851; color: #FFFFFF; text-decoration: none; }

/* --- Post Navigation --- */
.tsp-post-navigation {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}
.tsp-post-navigation .nav-links {
    display: flex;
    gap: 16px;
    width: 100%;
}
.tsp-post-navigation .nav-previous,
.tsp-post-navigation .nav-next {
    flex: 1;
    background: #FFFFFF;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    transition: all 0.2s ease;
}
.tsp-post-navigation .nav-previous:hover,
.tsp-post-navigation .nav-next:hover {
    border-color: #A5D6A7;
    background: #F1F8E9;
}
.tsp-post-navigation a { text-decoration: none; color: inherit; }
.tsp-post-nav-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1B5E20;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.tsp-post-nav-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: #212121;
}



/* --- Edit Link (pages) --- */
.tsp-page-edit-link {
    padding: 16px 0;
    margin-top: 20px;
    border-top: 1px solid #E0E0E0;
}
.tsp-page-edit-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1B5E20;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}
.tsp-page-edit-link a:hover { text-decoration: underline; }

/* ============================================
   POST LIST (Archive & Related — article rows)
   ============================================ */
.tsp-post-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tsp-post-item {
    padding: 0;
    margin-bottom: 0;
}
.tsp-post-item-link {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #EEEEEE;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}
.tsp-post-item-link:hover {
    background: #F1F8E9;
    text-decoration: none;
}
.tsp-post-item-thumb {
    flex: 0 0 160px;
    width: 160px;
    height: 100px;
    overflow: hidden;
    border-radius: 6px;
    position: relative;
}
.tsp-post-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tsp-post-item-category {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #1B5E20;
    color: #FFFFFF;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}
.tsp-post-item-body {
    flex: 1 1 auto;
    min-width: 0;
}
.tsp-post-item-title {
    font-size: 1rem;
    font-weight: 700;
    color: #212121;
    line-height: 1.4;
    margin-bottom: 6px;
    transition: color 0.15s ease;
}
.tsp-post-item-link:hover .tsp-post-item-title {
    color: #1B5E20;
}
.tsp-post-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: #9E9E9E;
    margin-bottom: 8px;
}
.tsp-post-item-date,
.tsp-post-item-author {
    display: flex;
    align-items: center;
    gap: 3px;
}
.tsp-post-item-excerpt {
    font-size: 0.85rem;
    color: #616161;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Related posts section uses a grid */
.tsp-related-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.tsp-related-list .tsp-post-item-link {
    border-bottom: none;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
}
.tsp-related-list .tsp-post-item-link:hover {
    border-color: #A5D6A7;
}
.tsp-related-list .tsp-post-item-thumb {
    flex: 0 0 120px;
    width: 120px;
    height: 80px;
}

/* --- Related Posts Section --- */
.tsp-related-posts-section {
    padding: 32px 0;
    margin-top: 16px;
}

/* ============================================
   ARCHIVE STYLES (Standard Posts)
   ============================================ */

.tsp-archive-layout {
    padding: 0 0 40px;
}
.tsp-archive-header {
    text-align: center;
    padding: 24px 0 16px;
}
.tsp-archive-description {
    font-size: 0.92rem;
    color: #616161;
    line-height: 1.6;
    margin-top: 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.tsp-archive-description p { margin-bottom: 0; }

.author .tsp-archive-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.author .tsp-archive-header img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    border: 2px solid #E8F5E9;
}

/* --- Blog Sidebar Recent Posts --- */
.tsp-sidebar-recent-posts li {
    display: block !important;
}
/* ============================================
   RESPONSIVE — Post, Page & Archive
   ============================================ */
@media (max-width: 768px) {
    .tsp-single-post-with-sidebar,
    .tsp-page-with-sidebar,
    .tsp-archive-with-sidebar {
        flex-direction: column;
        gap: 24px;
    }
    .tsp-blog-sidebar {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        position: static;
        order: 2;
    }
    .tsp-single-post-main,
    .tsp-page-main,
    .tsp-archive-main {
        order: 1;
    }

    .tsp-post-title,
    .tsp-page-title {
        font-size: 1.4rem;
    }

    .tsp-post-meta {
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
    }

    .tsp-post-navigation .nav-links {
        flex-direction: column;
    }

    .tsp-post-share-links {
        justify-content: center;
    }

    .tsp-post-item-link {
        flex-direction: column;
        gap: 12px;
    }
    .tsp-post-item-thumb {
        flex: 0 0 auto;
        width: 100%;
        height: 180px;
    }

    .tsp-related-list {
        grid-template-columns: 1fr;
    }

    .tsp-archive-header {
        padding: 16px 0 12px;
    }
}

@media (max-width: 480px) {
    .tsp-post-title,
    .tsp-page-title {
        font-size: 1.2rem;
    }

    .tsp-post-content,
    .tsp-page-body {
        font-size: 0.92rem;
    }

    .tsp-post-item-thumb {
        height: 140px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .tsp-top-bar,
    .tsp-header,
    .tsp-main-nav,
    .tsp-footer,
    .tsp-btn-add-cart,
    .tsp-cart-actions {
        display: none !important;
    }

    .tsp-container {
        max-width: 100%;
    }

    body {
        background-color: #FFFFFF;
    }
}