/* ==========================================
   PRODUCT PAGE ENHANCEMENTS - PROFESSIONAL EDITION
   COMPLETE CSS FILE
   ========================================== */

/* Product Hero Adjustments */
.product-hero {
    padding-top: 120px;
    position: relative;
}

/* Breadcrumb */
.breadcrumb {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(15, 14, 14, 0.95);
    backdrop-filter: blur(10px);
    margin: 0;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: #EA9C22;
}

.breadcrumb i {
    font-size: 16px;
    opacity: 0.5;
}

.breadcrumb span:last-child {
    color: #ffffff;
    font-weight: 500;
}

/* Product Hero Grid */
.product-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 30px;
}

@media (max-width: 1024px) {
    .product-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Product Gallery Section */
.product-gallery-section {
    position: relative;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(234, 156, 34, 0.2) 0%, rgba(240, 93, 17, 0.2) 100%);
    border: 1px solid rgba(234, 156, 34, 0.3);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    color: #EA9C22;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.product-badge i {
    font-size: 14px;
}

.product-main-image {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.3);
}

.product-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.product-main-image:hover img {
    transform: scale(1.02);
}

/* Product Thumbnails */
.product-thumbnails {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.thumbnail {
    flex: 1;
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    min-height: 80px;
}

.thumbnail.active {
    border-color: #EA9C22;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(234, 156, 34, 0.2);
}

.thumbnail img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.thumbnail:hover img {
    transform: scale(1.1);
}

/* Quick Stats - PERFECT VERTICAL ALIGNMENT */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    margin-top: 20px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 16px;
    position: relative;
    min-height: 140px;
    height: 100%;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70px;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(234, 156, 34, 0.2) 0%, rgba(234, 156, 34, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(234, 156, 34, 0.3);
    margin-bottom: 12px;
    flex-shrink: 0;
}

.stat-icon i {
    font-size: 24px;
    color: #EA9C22;
    line-height: 1;
}

.stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 4px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    display: block;
    text-align: center;
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    letter-spacing: 0.5px;
    display: block;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}

/* Quick Stats - PERFECT ALIGNMENT FIX */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 20px;
    position: relative;
    min-height: 140px;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(234, 156, 34, 0.2) 0%, rgba(234, 156, 34, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(234, 156, 34, 0.3);
    margin-bottom: 12px;
}

.stat-icon i {
    font-size: 24px;
    color: #EA9C22;
}

.stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 6px;
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* Quick Stats - NO DIVIDERS - COMPLETE REMOVAL */
.quick-stats {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 16px;
    position: relative;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Remove any possible borders or dividers */
.stat-item::before,
.stat-item::after {
    display: none;
    content: none;
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(234, 156, 34, 0.2) 0%, rgba(234, 156, 34, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(234, 156, 34, 0.3);
    margin-bottom: 14px;
    flex-shrink: 0;
}

.stat-icon i {
    font-size: 24px;
    color: #EA9C22;
}

.stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Force all stat-item containers to have consistent height */
.stat-item {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    .quick-stats {
        flex-direction: column;
    }
    
    .stat-item {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: 18px 20px;
        min-height: auto;
    }
    
    .stat-icon {
        margin-bottom: 0;
        margin-right: 16px;
    }
    
    .stat-content {
        align-items: flex-start;
    }
    
    .stat-value {
        justify-content: flex-start;
        margin-bottom: 4px;
    }
    
    .stat-label {
        justify-content: flex-start;
        text-align: left;
    }
}

/* Product Details Section */
.product-details-section {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.product-header {
    margin-bottom: 10px;
}

.product-category {
    display: inline-block;
    background: linear-gradient(90deg, #F05D11 0%, #FBB131 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.product-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 15px 0;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-rating .stars {
    display: flex;
    gap: 3px;
    color: #EA9C22;
    font-size: 18px;
}

.rating-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.product-description {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Pricing Card */
.pricing-card {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.pricing-header {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 10px 0;
}

.price-display {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.current-price {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.billing-cycle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
}

/* Subscription Options */
.subscription-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

.subscription-option {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
}

.subscription-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.subscription-option.active {
    background: rgba(234, 156, 34, 0.1);
    border-color: #EA9C22;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(234, 156, 34, 0.2);
}

.option-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.duration {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.price {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
}

.per-day {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* Purchase Button */
.btn-purchase {
    width: 100%;
    padding: 20px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #F05D11 0%, #FBB131 50%, #F05D11 100%);
    background-size: 200% 100%;
    border: none;
    cursor: pointer;
}

.btn-purchase:hover {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(234, 156, 34, 0.3);
}

.btn-price {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 16px;
}

/* Security Assurance */
.security-assurance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.security-assurance i {
    color: #00ff88;
    font-size: 16px;
}

/* ==========================================
   COMPACT FEATURES SECTION - EFFICIENT LIST LAYOUT
   Supports 50+ features in minimal space
   ========================================== */

.elite-performance {
    padding: 100px 0;
    background: linear-gradient(180deg, rgba(15, 14, 14, 0) 0%, rgba(20, 20, 20, 0.5) 100%);
    position: relative;
}

.compact-features-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

@media (max-width: 1024px) {
    .compact-features-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .compact-features-wrapper {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

.feature-category-compact {
    background: rgba(20, 20, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.feature-category-compact:hover {
    border-color: rgba(234, 156, 34, 0.3);
    transform: translateY(-3px);
    background: rgba(25, 25, 25, 0.6);
}

.category-header-compact {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-icon-compact {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(234, 156, 34, 0.15), rgba(240, 93, 17, 0.1));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-icon-compact i {
    font-size: 26px;
    color: #EA9C22;
}

.category-title-compact {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.3px;
}

.feature-list-compact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-list-compact li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    padding: 4px 0;
}

.feature-list-compact li i {
    color: #EA9C22;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.feature-list-compact li:hover {
    color: #ffffff;
}

.feature-list-compact li:hover i {
    transform: scale(1.05);
}

/* ==========================================
   TECHNICAL SPECIFICATIONS - SPACIOUS LAYOUT
   ========================================== */
.enhanced-specs {
    padding: 100px 0;
    background: rgba(15, 14, 14, 0.95);
    position: relative;
}

.enhanced-specs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(234, 156, 34, 0.3), transparent);
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

@media (max-width: 1024px) {
    .specs-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

.spec-card {
    background: rgba(20, 20, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 30px;
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}

.spec-card:hover {
    border-color: rgba(234, 156, 34, 0.2);
    transform: translateY(-4px);
}

.spec-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 25px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spec-header-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(234, 156, 34, 0.15), rgba(240, 93, 17, 0.1));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spec-header-icon i {
    font-size: 30px;
    color: #EA9C22;
}

.spec-header-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 5px 0;
}

.spec-header-content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Universal Items */
.universal-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.universal-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.universal-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
    border-color: rgba(234, 156, 34, 0.2);
}

.universal-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(234, 156, 34, 0.1), rgba(240, 93, 17, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.universal-icon i {
    font-size: 24px;
    color: #EA9C22;
}

.universal-content {
    flex: 1;
}

.universal-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.universal-content p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.universal-tag {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(234, 156, 34, 0.1);
    color: #EA9C22;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgba(234, 156, 34, 0.3);
}

/* OS Items */
.os-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .os-items {
        grid-template-columns: 1fr;
    }
}

.os-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.os-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
}

.os-item.windows {
    border-left: 4px solid #0078D7;
}

.os-item.windows-11 {
    border-left: 4px solid #EA9C22;
}

.os-icon {
    width: 48px;
    height: 48px;
    background: rgba(0, 120, 215, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.os-item.windows .os-icon {
    background: rgba(0, 120, 215, 0.1);
}

.os-item.windows-11 .os-icon {
    background: rgba(234, 156, 34, 0.1);
}

.os-icon i {
    font-size: 26px;
    color: #0078D7;
}

.os-item.windows-11 .os-icon i {
    color: #EA9C22;
}

.os-details {
    flex: 1;
}

.os-details h4 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.os-details p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.os-badge {
    font-size: 10px;
    padding: 3px 10px;
    background: rgba(0, 255, 136, 0.1);
    border-radius: 12px;
    color: #00ff88;
    font-weight: 600;
    display: inline-block;
    margin-top: 6px;
}

/* Anti-Cheat Items */
.anticheat-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .anticheat-items {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.anticheat-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 18px;
    text-align: center;
    transition: all 0.3s ease;
}

.anticheat-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
}

.anticheat-item.battleye {
    border-top: 3px solid #FF6B6B;
}

.anticheat-item.easyanticheat {
    border-top: 3px solid #4ECDC4;
}

.anticheat-item.moss {
    border-top: 3px solid #45B7D1;
}

.anticheat-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anticheat-item.battleye .anticheat-icon {
    background: rgba(255, 107, 107, 0.1);
}

.anticheat-item.easyanticheat .anticheat-icon {
    background: rgba(78, 205, 196, 0.1);
}

.anticheat-item.moss .anticheat-icon {
    background: rgba(69, 183, 209, 0.1);
}

.anticheat-icon i {
    font-size: 24px;
    color: #FF6B6B;
}

.anticheat-item.easyanticheat .anticheat-icon i {
    color: #4ECDC4;
}

.anticheat-item.moss .anticheat-icon i {
    color: #45B7D1;
}

.anticheat-item h4 {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 5px 0;
}

.anticheat-item p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.4;
}

/* Hardware Compatibility Section */
.hardware-section {
    background: rgba(20, 20, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 35px;
    backdrop-filter: blur(12px);
    margin-top: 40px;
}

.hardware-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hardware-icon-large {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(234, 156, 34, 0.15), rgba(240, 93, 17, 0.1));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hardware-icon-large i {
    font-size: 30px;
    color: #EA9C22;
}

.hardware-header-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 5px 0;
}

.hardware-header-content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.hardware-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

@media (max-width: 1024px) {
    .hardware-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .hardware-items {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

.hardware-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    transition: all 0.3s ease;
}

.hardware-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-5px);
    border-color: rgba(234, 156, 34, 0.2);
}

.hardware-item-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    background: rgba(234, 156, 34, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hardware-item-icon i {
    font-size: 26px;
    color: #EA9C22;
}

.hardware-item h4 {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.hardware-item p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.hardware-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(234, 156, 34, 0.1);
    color: #EA9C22;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(234, 156, 34, 0.3);
}

/* ==========================================
   VIDEO SHOWCASE SECTION
   ========================================== */
.video-showcase {
    padding: 100px 0;
    position: relative;
}

.video-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

@media (max-width: 1024px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

.video-card {
    background: rgba(20, 20, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.video-card:hover {
    transform: translateY(-8px);
    border-color: rgba(234, 156, 34, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.video-thumbnail {
    position: relative;
    height: 200px;
    cursor: pointer;
    overflow: hidden;
}

/* Keyboard-focus ring for the newly-focusable video thumbnail
   (role=button + tabindex=0 in store/show.blade.php). The tile hugs
   the parent .video-card's top/left/right edges, and .video-card sets
   overflow: hidden to clip its border-radius — a browser default
   outline drawn OUTSIDE the thumbnail's box would therefore be
   clipped on three sides, leaving only a faint bottom edge visible.
   outline-offset:-2px paints the ring INSIDE the thumbnail's box,
   out of reach of the ancestor's clip. */
.video-thumbnail:focus-visible {
    outline: 2px solid #EA9C22;
    outline-offset: -2px;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.video-card:hover .video-thumbnail img {
    transform: scale(1.08);
}

/* THE TILE WHEN THERE IS NO THUMBNAIL TO PUT IN IT.

   The thumbnail path on a showcase card is typed into the admin panel as text
   rather than uploaded, so a card can name a file that does not exist — the CS2
   product has named /assets/images/products/coming-soon.png since it was seeded
   and that file has never shipped. store/show.blade.php now checks the file
   before it prints an <img> and renders this instead of one, which is the whole
   point: a browser's broken-image glyph, twice, under a heading that says "Watch
   Our Showcases" reads as a site that is falling over, and a customer who thinks
   the page failed reloads it instead of buying.

   It is a tile of the design rather than a substitute picture. Same amber the
   play button and the section tags use, held down to a wash so it recedes next
   to cards that do have a frame to show; the bottom hairline stands in for the
   edge the image would have given, so the card still reads as [media | copy]
   rather than as one tall panel with a stray icon in it.

   Absolutely positioned over the whole tile like .play-button and
   .video-duration, so it needs nothing from the parent and looks right on the
   one card that has no picture but does have a video to play. The parent
   modifier below is only about the cursor, which is a separate question:
   .video-thumbnail is cursor: pointer for the lightbox, and a tile with neither
   a picture nor a clip does not open one. */
.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    padding: 0 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.video-placeholder i {
    font-size: 34px;
    line-height: 1;
    color: rgba(234, 156, 34, 0.5);
}

.video-placeholder span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.video-thumbnail-empty {
    cursor: default;
}

.video-thumbnail .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #EA9C22, #F05D11);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f0e0e;
    font-size: 26px;
    opacity: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 0 20px rgba(234, 156, 34, 0.5);
}

.video-thumbnail:hover .play-button {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
}

.video-duration {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(15, 14, 14, 0.9);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    z-index: 5;
}

.video-info {
    padding: 24px;
}

.video-info h3 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.video-info p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.video-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Video Modal */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 14, 14, 0.96);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(15px);
    padding: 20px;
}

.video-modal.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    width: 100%;
    max-width: 1200px;
    position: relative;
}

/* PINNED TO THE VIEWPORT, NOT HUNG ABOVE THE VIDEO.
   It used to be `position: absolute; top: -50px` against .modal-content, which
   put the only visible way out of the lightbox FIFTY PIXELS ABOVE the thing it
   closes. .modal-content is a 16:9 box at min(1200px, 100vw - 40px) wide,
   vertically centred by the flex above, so the button is on screen only while
   (viewport height - content height) / 2 >= 50 — that is, only on a viewport
   about 100px taller than the video. At 1200px wide the video is 675px tall, so
   it needs a 775px-tall window, and laptops do not have one.

   MEASURED on /store/rainbow-six-siege-script, opening the first clip with a
   real click: at 1440x760 the button's box was y -7 to 33, eight pixels of it
   cut off the top of the screen; at 1280x720, the commonest laptop there is, it
   was y -27 to 13 and elementFromPoint at its centre returned null, because the
   centre of the button is not in the document. Escape and a backdrop click
   still closed it, so this was never a trap — but the control the modal draws
   for you was gone, which is precisely the "weird clipping" complaint.

   position: fixed anchors it to the top-right of the SCREEN, where it cannot be
   pushed off by any viewport. The answer is the same either way the browser
   resolves it: .video-modal carries a backdrop-filter, which makes it a
   containing block for fixed descendants, and .video-modal is itself a full
   viewport box with inset 0 — so a browser that honours that and a browser that
   falls back to the viewport both land the button 16px from the same corner.

   44x44 with a fill, rather than a bare 33x40 glyph, for the two reasons the
   move creates: it is now over the video on a phone instead of over the blurred
   backdrop, where a white glyph on a bright frame is unreadable; and it is the
   touch target the rest of this pass holds every control to. */
.modal-close {
    position: fixed;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: rgba(15, 14, 14, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: #ffffff;
    font-size: 26px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.3s ease, border-color 0.3s ease;
    z-index: 10001;
}

.modal-close:hover {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.34);
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Product FAQ */
.product-faq {
    padding: 100px 0;
    background: rgba(255, 255, 255, 0.02);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.faq-item {
    background: rgba(20, 20, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active {
    border-color: rgba(234, 156, 34, 0.3);
    background: rgba(30, 30, 30, 0.7);
}

.faq-question {
    padding: 22px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    transition: color 0.3s ease;
}

.faq-item.active .faq-question {
    color: #EA9C22;
}

.faq-question i {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-answer p {
    padding: 0 26px 26px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

/* Related Products */
.related-products {
    padding: 80px 0;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

.related-product-card {
    background: rgba(20, 20, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.related-product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(234, 156, 34, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.product-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.related-product-card:hover .product-image img {
    transform: scale(1.08);
}

.product-info {
    padding: 24px;
}

.product-info h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.product-info p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 18px 0;
    line-height: 1.5;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price {
    font-size: 24px;
    font-weight: 700;
    color: #EA9C22;
}

.product-footer .btn-secondary {
    padding: 8px 20px;
    font-size: 13px;
    border-radius: 10px;
    min-width: 110px;
    text-decoration: none;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transition: all 0.3s ease;
}

.product-footer .btn-secondary:hover {
    background: rgba(234, 156, 34, 0.15);
    border-color: #EA9C22;
    color: #EA9C22;
}



/* Container */
.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-tag {
    display: inline-block;
    background: linear-gradient(90deg, #F05D11 0%, #FBB131 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.section-header h2 {
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 18px 0;
    line-height: 1.2;
}

.section-header p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Footer */
.footer {
    padding: 80px 0 60px;
    position: relative;
}

.footer .footer-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url('../images/footer.png') no-repeat center;
    background-size: cover;
    z-index: 0;
    opacity: 0.5;
}

.footer-content {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    position: relative;
    z-index: 3;
    justify-content: center;
    align-items: center;
    max-width: 320px;
    margin: 0 auto 50px;
}

.footer-brand h3 {
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    text-align: center;
    background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 18px;
}

.footer-brand p {
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-column h4 {
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    color: #ffffff;
    margin-bottom: 6px;
}

.footer-column a {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #EA9C22;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    gap: 18px;
}

.footer-bottom p {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
}

.footer-social {
    display: flex;
    gap: 18px;
}

.footer-social a img {
    width: 26px;
    height: auto;
    transition: opacity 0.3s ease;
    opacity: 0.7;
}

.footer-social a:hover img {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(15, 14, 14, 0.98);
        backdrop-filter: blur(20px);
        padding: 20px;
        flex-direction: column;
        gap: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-menu.active {
        display: flex;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-top: 10px;
    }

    .navbar-actions .btn-secondary,
    .navbar-actions .btn-primary {
        width: 100%;
        text-align: center;
    }

    .breadcrumb {
        padding: 10px 15px;
        font-size: 11px;
        top: 70px;
    }
    
    .product-title {
        font-size: 32px;
    }
    
    .current-price {
        font-size: 36px;
    }
    
    .subscription-options {
        grid-template-columns: 1fr;
    }
    
    .section-header h2 {
        font-size: 32px;
    }
    
    .section-header p {
        font-size: 14px;
    }
    
    .elite-performance,
    .enhanced-specs,
    .video-showcase,
    .product-faq,
    .discord {
        padding: 70px 0;
    }
    
    .discord-title {
        font-size: 32px;
    }
    
    .discord-subtitle {
        font-size: 14px;
        padding: 0 20px;
    }
    
    .btn-discord {
        width: 90%;
        justify-content: center;
        padding: 16px 30px;
    }
    
    .quick-stats {
        grid-template-columns: 1fr;
    }
    
    .stat-item {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        height: auto;
    }
    
    .stat-item:last-child {
        border-bottom: none;
    }
    
    .stat-item:not(:last-child)::after {
        display: none;
    }
    
    .stat-icon {
        margin-bottom: 0;
        margin-right: 15px;
    }
    
    .stat-content {
        flex: 1;
        align-items: flex-start;
    }
    
    .stat-value, .stat-label {
        justify-content: flex-start;
        text-align: left;
    }
    
    .footer-content {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .footer-links {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    
    .footer-column {
        text-align: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .hardware-items {
        grid-template-columns: 1fr;
    }
    
    .spec-card {
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .product-hero {
        padding: 100px 0 40px;
    }
    
    .product-main-image {
        height: 280px;
    }
    
    .btn-purchase {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }
    
    .btn-price {
        width: 100%;
        text-align: center;
    }
    
    .feature-category-compact {
        padding: 18px;
    }
    
    .category-title-compact {
        font-size: 18px;
    }
    
    .category-icon-compact {
        width: 42px;
        height: 42px;
    }
    
    .category-icon-compact i {
        font-size: 22px;
    }
    
    .feature-list-compact li {
        font-size: 12px;
    }
    
    .video-thumbnail .play-button {
        width: 55px;
        height: 55px;
        font-size: 22px;
    }
}

/* Utility Classes */
.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

/* ============================================================
   Feature tabs — replaces compact-features-wrapper
   ============================================================ */

/*
   IT WRAPS INSTEAD OF SCROLLING, BECAUSE THE SCROLL WAS INVISIBLE.

   This was `overflow-x: auto` with `scrollbar-width: none` and the WebKit
   scrollbar switched off — a strip that scrolled sideways while showing no
   scrollbar, no fade and no cut-off tab to hint that it did. The tabs are the
   only route to the feature lists on this page, and measured against the six
   groups the catalogue actually ships the strip overflowed its own box by 24px
   at 1024, 280px at 768 and 572px at 360: on a phone rather more than half the
   tabs were off the end of a control that looked complete.

   A hidden scrollbar is recoverable by swiping if you already suspect there is
   something to swipe to. Wrapping needs no such guess — every tab is on screen
   and the row simply becomes two or three. The bar is a pill holding its own
   background, so extra rows read as a taller pill rather than as a broken edge,
   and row-gap keeps the lines apart now that there can be more than one.

   Nothing here scrolls any more, which is also why the two scrollbar-hiding
   declarations are gone rather than kept "just in case": they described a
   mechanism that no longer exists, and left in place they would hide a
   scrollbar on some future overflow instead of letting it be seen. */
.pn-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(234,156,34,.13);
    border-radius: 18px;
    margin-bottom: 22px;
}

.pn-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 13px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.62);
    white-space: nowrap;
    transition: all .2s;
    font-family: inherit;
}

.pn-tab-btn i { font-size: 16px; }

.pn-tab-btn:hover {
    color: #fff;
    background: rgba(255,255,255,.04);
}

.pn-tab-btn.active {
    background: rgba(234,156,34,.12);
    border-color: rgba(234,156,34,.28);
    color: #EA9C22;
}

.pn-tab-panel {
    display: none;
    animation: tabIn .22s ease;
}

.pn-tab-panel.active {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@keyframes tabIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pn-feature-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    background: #0f0e0c;
    border: 1px solid rgba(234,156,34,.13);
    border-radius: 12px;
    font-size: 13px;
    color: rgba(255,255,255,.62);
    transition: all .2s;
}

.pn-feature-row:hover {
    border-color: rgba(234,156,34,.28);
    color: #fff;
    transform: translateX(3px);
    background: rgba(234,156,34,.04);
}

.pn-feature-row i.ri-checkbox-circle-fill {
    color: #22C55E;
    font-size: 15px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .pn-tab-panel.active { grid-template-columns: 1fr; }

    /*
       NARROWER, NOT SHORTER, AND NOT SMALLER TO READ.

       This used to be `padding: 9px 14px; font-size: 12px`, which took a tab
       that was already only 37px tall down to about 34 and dropped the label a
       size — on the one device where the control is hit with a thumb rather
       than a cursor. The tightening was there to win horizontal room back from
       a strip that scrolled; the strip wraps now, so the room is no longer
       needed and the cost is no longer worth paying.

       The horizontal padding still comes in, because narrower tabs fit more per
       row and keep the wrapped bar to two lines instead of three. The height
       goes the other way to clear 44px, and the label stays at 13px. */
    .pn-tab-btn {
        padding: 10px 14px;
        min-height: 44px;
        font-size: 13px;
    }
}