/*!  * Derby Mountain Rescue Team Theme  * Replaces Bootswatch Journal theme  * Load after: bootstrap4/4.6.2/dist/css/bootstrap.min.css  *   * Brand Colours:  * - Primary Red: #c41e3a  * - Dark: #1a1a2e  */  /* ==========================================================================    1. CSS Variables    ========================================================================== */  :root {     /* DMRT Brand Colours - Official Mountain Rescue Red */     --dmrt-red: #ef3e33;     --dmrt-red-dark: #c9342b;     --dmrt-red-light: #f26a62;     --dmrt-red-pale: #fef5f4;     --dmrt-dark: #3d3469;     --dmrt-dark-mid: #4a4175;     --dmrt-grey-dark: #4a4a5a;     --dmrt-grey: #6c757d;     --dmrt-grey-light: #f8f9fa;          /* Override Bootstrap variables */     --primary: #ef3e33;     --dark: #3d3469;          /* Category card gradients */     --accent-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);     --accent-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);     --accent-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);     --accent-green: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);     --accent-orange: linear-gradient(135deg, #fa709a 0%, #fee140 100%);          /* Shadows */     --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);     --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);     --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);     --shadow-red: 0 4px 15px rgba(239, 62, 51, 0.4);          /* Border Radius */     --radius-sm: 8px;     --radius-md: 12px;     --radius-lg: 16px;     --radius-pill: 50px;          /* Transitions */     --transition-fast: 0.2s ease;     --transition-normal: 0.3s ease; }  /* ==========================================================================    2. Base Typography    ========================================================================== */  body {     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;     color: #333;     line-height: 1.6; }  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {     font-weight: 700;     line-height: 1.3; }  .lead {     font-size: 1.2rem;     font-weight: 400;     color: var(--dmrt-grey-dark); }  /* ==========================================================================    3. Links    ========================================================================== */  a {     color: var(--dmrt-red);     transition: color var(--transition-fast); }  a:hover {     color: var(--dmrt-red-dark); }  /* ==========================================================================    4. Buttons    ========================================================================== */  .btn {     font-weight: 600;     border-radius: var(--radius-sm);     transition: all var(--transition-normal); }  .btn:hover {     transform: translateY(-2px); }  .btn:active {     transform: translateY(0); }  /* Primary - DMRT Purple with Red hover */ .btn-primary {     color: #fff;     background-color: var(--dmrt-dark);     border-color: var(--dmrt-dark); }  .btn-primary:hover, .btn-primary:focus {     color: #fff;     background-color: var(--dmrt-red);     border-color: var(--dmrt-red);     box-shadow: var(--shadow-red); }  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {     color: #fff;     background-color: var(--dmrt-red-dark);     border-color: var(--dmrt-red-dark); }  .btn-primary:focus, .btn-primary.focus {     box-shadow: 0 0 0 0.2rem rgba(61, 52, 105, 0.5); }  /* Outline Primary */ .btn-outline-primary {     color: var(--dmrt-red);     border-color: var(--dmrt-red); }  .btn-outline-primary:hover {     color: #fff;     background-color: var(--dmrt-red);     border-color: var(--dmrt-red); }  .btn-outline-primary:focus, .btn-outline-primary.focus {     box-shadow: 0 0 0 0.2rem rgba(61, 52, 105, 0.5); }  .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {     color: #fff;     background-color: var(--dmrt-red);     border-color: var(--dmrt-red); }  /* Dark */ .btn-dark {     background-color: var(--dmrt-dark);     border-color: var(--dmrt-dark); }  .btn-dark:hover {     background-color: #2e2750;     border-color: #262043; }  /* Link */ .btn-link {     color: var(--dmrt-red); }  .btn-link:hover {     color: var(--dmrt-red-dark); }  /* Custom DMRT button */ .btn-dmrt {     color: #fff;     background-color: var(--dmrt-red);     border-color: var(--dmrt-red); }  .btn-dmrt:hover, .btn-dmrt:focus {     color: #fff;     background-color: var(--dmrt-red-dark);     border-color: var(--dmrt-red-dark);     box-shadow: var(--shadow-red); }  .btn-outline-dmrt {     color: var(--dmrt-red);     border-color: var(--dmrt-red);     background: transparent; }  .btn-outline-dmrt:hover {     color: #fff;     background-color: var(--dmrt-red);     border-color: var(--dmrt-red); }  /* Pill buttons */ .btn-pill {     border-radius: var(--radius-pill);     padding: 0.75rem 2rem; }  .btn-lg.btn-pill {     padding: 1rem 2.5rem; }  /* ==========================================================================    5. Forms    ========================================================================== */  .form-control:focus {     border-color: var(--dmrt-red-light);     box-shadow: 0 0 0 0.2rem rgba(239, 62, 51, 0.25); }  .custom-select:focus {     border-color: var(--dmrt-red-light);     box-shadow: 0 0 0 0.2rem rgba(239, 62, 51, 0.25); }  /* Custom controls */ .custom-control-input:checked ~ .custom-control-label::before {     border-color: var(--dmrt-red);     background-color: var(--dmrt-red); }  .custom-control-input:focus ~ .custom-control-label::before {     box-shadow: 0 0 0 0.2rem rgba(239, 62, 51, 0.25); }  .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {     border-color: var(--dmrt-red-light); }  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {     background-color: #fcd4d1;     border-color: #fcd4d1; }  .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {     border-color: var(--dmrt-red);     background-color: var(--dmrt-red); }  .custom-switch .custom-control-input:checked ~ .custom-control-label::before {     border-color: var(--dmrt-red);     background-color: var(--dmrt-red); }  .custom-range::-webkit-slider-thumb {     background-color: var(--dmrt-red); }  .custom-range::-moz-range-thumb {     background-color: var(--dmrt-red); }  .custom-range:focus::-webkit-slider-thumb {     box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(239, 62, 51, 0.25); }  .custom-range:focus::-moz-range-thumb {     box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(239, 62, 51, 0.25); }  /* ==========================================================================    6. Navigation    ========================================================================== */  .navbar-nav .nav-link {     color: var(--dmrt-dark);     font-weight: 500;     transition: color var(--transition-fast); }  .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {     color: var(--dmrt-red); }  .navbar-nav .nav-link.active {     color: var(--dmrt-red); }  /* Dropdown */ .dropdown-menu {     border: none;     box-shadow: var(--shadow-md);     border-radius: var(--radius-md); }  .dropdown-item:hover, .dropdown-item:focus {     background-color: var(--dmrt-red-pale);     color: var(--dmrt-red); }  .dropdown-item.active, .dropdown-item:active {     background-color: var(--dmrt-red);     color: #fff; }  /* Nav pills */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link {     background-color: var(--dmrt-red); }  /* Nav tabs */ .nav-tabs .nav-link {     color: var(--dmrt-grey);     font-weight: 600; }  .nav-tabs .nav-link:hover {     color: var(--dmrt-red); }  .nav-tabs .nav-link.active {     color: var(--dmrt-red); }  /* ==========================================================================    7. Pagination    ========================================================================== */  .page-link {     color: var(--dmrt-red); }  .page-link:hover {     color: var(--dmrt-red-dark); }  .page-item.active .page-link {     background-color: var(--dmrt-red);     border-color: var(--dmrt-red); }  .page-link:focus {     box-shadow: 0 0 0 0.2rem rgba(239, 62, 51, 0.25); }  /* ==========================================================================    8. Badges & Alerts    ========================================================================== */  .badge-primary {     background-color: var(--dmrt-red); }  a.badge-primary:hover, a.badge-primary:focus {     background-color: var(--dmrt-red-dark); }  .alert-primary {     color: #7a1f1a;     background-color: #fde4e2;     border-color: #fcd4d1; }  .alert-primary .alert-link {     color: #521512; }  /* ==========================================================================    9. Progress & List Groups    ========================================================================== */  .progress-bar {     background-color: var(--dmrt-red); }  .list-group-item.active {     background-color: var(--dmrt-red);     border-color: var(--dmrt-red); }  /* ==========================================================================    10. Cards    ========================================================================== */  .card {     border: none;     border-radius: var(--radius-lg);     box-shadow: var(--shadow-sm);     transition: all var(--transition-normal); }  .card:hover {     box-shadow: var(--shadow-md); }  .card-body {     padding: 1.5rem; }  .card-title {     font-weight: 600; }  /* Clickable cards */ a.card, .card-link {     text-decoration: none;     color: inherit; }  a.card:hover, .card-link:hover {     transform: translateY(-8px);     box-shadow: var(--shadow-lg);     text-decoration: none;     color: inherit; }  /* ==========================================================================    11. Background & Text Utilities    ========================================================================== */  .bg-primary {     background-color: var(--dmrt-red) !important; }  a.bg-primary:hover, button.bg-primary:hover {     background-color: var(--dmrt-red-dark) !important; }  .bg-info {     background-color: var(--dmrt-dark) !important; }  .bg-dark {     background-color: var(--dmrt-dark) !important; }  .bg-dmrt {     background-color: var(--dmrt-red) !important; }  .bg-dmrt-dark {     background-color: var(--dmrt-dark) !important; }  .bg-dmrt-pale {     background-color: var(--dmrt-red-pale) !important; }  .text-primary {     color: var(--dmrt-red) !important; }  a.text-primary:hover {     color: var(--dmrt-red-dark) !important; }  .text-dmrt {     color: var(--dmrt-red) !important; }  .text-dmrt-dark {     color: var(--dmrt-dark) !important; }  .border-primary {     border-color: var(--dmrt-red) !important; }  .border-dmrt {     border-color: var(--dmrt-red) !important; }  /* ==========================================================================    12. Tables    ========================================================================== */  .table-primary, .table-primary > th, .table-primary > td {     background-color: #fde4e2; }  .table-hover .table-primary:hover {     background-color: #fcd4d1; }  .table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th {     background-color: #fcd4d1; }  /* ==========================================================================    13. Breadcrumb    ========================================================================== */  .breadcrumb {     background: transparent;     padding: 0;     margin: 0; }  .breadcrumb-item a {     color: var(--dmrt-red); }  .breadcrumb-item.active {     color: var(--dmrt-grey); }  .breadcrumb-section {     background: var(--dmrt-grey-light);     padding: 1rem 0;     border-bottom: 1px solid #eee; }  /* ==========================================================================    14. Custom Components - Category Cards    ========================================================================== */  .category-card {     background: #fff;     border-radius: var(--radius-lg);     overflow: hidden;     box-shadow: var(--shadow-sm);     transition: all var(--transition-normal);     height: 100%;     text-decoration: none;     color: inherit;     display: block; }  .category-card:hover {     transform: translateY(-8px);     box-shadow: var(--shadow-lg);     text-decoration: none;     color: inherit; }  .category-icon {     height: 140px;     display: flex;     align-items: center;     justify-content: center;     font-size: 3.5rem;     color: #fff; }  .category-icon.clothing { background: var(--accent-purple); } .category-icon.kids { background: var(--accent-pink); } .category-icon.wishlist { background: linear-gradient(135deg, var(--dmrt-red) 0%, #ff6b6b 100%); } .category-icon.events { background: var(--accent-blue); } .category-icon.gifts { background: var(--accent-green); } .category-icon.base { background: var(--accent-orange); }  .category-body {     padding: 1.5rem; }  .category-body h3 {     font-size: 1.25rem;     font-weight: 600;     margin-bottom: 0.5rem; }  .category-body p {     color: var(--dmrt-grey);     font-size: 0.95rem;     margin-bottom: 0; }  /* ==========================================================================    15. Custom Components - Product Cards    ========================================================================== */  .product-card {     background: #fff;     border-radius: var(--radius-md);     overflow: hidden;     box-shadow: var(--shadow-sm);     transition: all var(--transition-normal);     height: 100%; }  .product-card:hover {     box-shadow: var(--shadow-md);     transform: translateY(-4px); }  .product-card-img, .product-image {     height: 220px;     background: var(--dmrt-grey-light);     overflow: hidden; }  .product-card-img img, .product-image img {     width: 100%;     height: 100%;     object-fit: cover;     transition: transform var(--transition-normal); }  .product-card:hover .product-card-img img, .product-card:hover .product-image img {     transform: scale(1.05); }  .product-card-body, .product-body {     padding: 1.25rem; }  .product-card-body h4, .product-body h4 {     font-size: 1.1rem;     font-weight: 600;     margin-bottom: 0.5rem; }  .product-card-body .price, .product-body .product-price {     color: var(--dmrt-red);     font-weight: 700;     font-size: 1.1rem; }  /* ==========================================================================    16. Custom Components - Product Page    ========================================================================== */  .product-gallery {     position: sticky;     top: 2rem; }  .main-image {     border-radius: var(--radius-lg);     overflow: hidden;     background: var(--dmrt-grey-light);     margin-bottom: 1rem; }  .main-image img {     width: 100%;     height: auto; }  .thumbnail-row {     display: flex;     gap: 0.75rem; }  .thumbnail {     width: 80px;     height: 80px;     border-radius: var(--radius-sm);     overflow: hidden;     cursor: pointer;     border: 2px solid transparent;     transition: all var(--transition-fast); }  .thumbnail:hover, .thumbnail.active {     border-color: var(--dmrt-red); }  .thumbnail img {     width: 100%;     height: 100%;     object-fit: cover; }  .product-title {     font-size: 2rem;     font-weight: 700;     margin-bottom: 0.5rem;     color: var(--dmrt-dark); }  .product-subtitle {     color: var(--dmrt-grey);     font-size: 1.1rem;     margin-bottom: 1.5rem; }  .product-price {     font-size: 2rem;     font-weight: 700;     color: var(--dmrt-red);     margin-bottom: 1.5rem; }  .product-price small {     font-size: 1rem;     font-weight: 400;     color: var(--dmrt-grey); }  /* Impact Banner */ .impact-banner {     background: linear-gradient(135deg, var(--dmrt-red-pale) 0%, #fff 100%);     border-left: 4px solid var(--dmrt-red);     padding: 1rem 1.25rem;     border-radius: 0 var(--radius-sm) var(--radius-sm) 0;     margin-bottom: 1.5rem; }  .impact-banner i {     color: var(--dmrt-red);     margin-right: 0.5rem; }  .impact-banner strong {     color: var(--dmrt-dark); }  /* Size buttons */ .size-buttons {     display: flex;     flex-wrap: wrap;     gap: 0.5rem; }  .size-btn {     min-width: 60px;     padding: 0.75rem 1rem;     border: 2px solid #ddd;     background: #fff;     border-radius: var(--radius-sm);     font-weight: 600;     cursor: pointer;     transition: all var(--transition-fast); }  .size-btn:hover {     border-color: var(--dmrt-red); }  .size-btn.active {     border-color: var(--dmrt-red);     background: var(--dmrt-red);     color: #fff; }  /* Colour swatches */ .colour-swatches {     display: flex;     gap: 0.75rem; }  .colour-swatch {     width: 48px;     height: 48px;     border-radius: 50%;     cursor: pointer;     position: relative;     border: 3px solid transparent;     transition: all var(--transition-fast); }  .colour-swatch::after {     content: '';     position: absolute;     inset: -6px;     border-radius: 50%;     border: 2px solid transparent;     transition: all var(--transition-fast); }  .colour-swatch:hover::after, .colour-swatch.active::after {     border-color: var(--dmrt-red); }  /* Add to cart */ .btn-add-cart {     background: var(--dmrt-red);     color: #fff;     border: none;     padding: 1rem 2rem;     font-size: 1.1rem;     font-weight: 600;     border-radius: var(--radius-pill);     width: 100%;     transition: all var(--transition-normal); }  .btn-add-cart:hover {     background: var(--dmrt-red-dark);     color: #fff;     transform: translateY(-2px);     box-shadow: var(--shadow-red); }  /* Delivery info */ .delivery-info {     background: var(--dmrt-grey-light);     border-radius: var(--radius-md);     padding: 1.25rem;     margin-top: 1.5rem; }  .delivery-item {     display: flex;     align-items: flex-start;     gap: 1rem;     padding: 0.75rem 0; }  .delivery-item:not(:last-child) {     border-bottom: 1px solid #eee; }  .delivery-item i {     color: var(--dmrt-red);     font-size: 1.25rem;     width: 24px;     text-align: center;     flex-shrink: 0; }  .delivery-item strong {     display: block;     margin-bottom: 0.25rem; }  .delivery-item span {     color: var(--dmrt-grey);     font-size: 0.9rem; }  /* Feature grid */ .feature-grid {     display: grid;     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));     gap: 1.5rem; }  .feature-item {     display: flex;     align-items: flex-start;     gap: 1rem; }  .feature-icon {     width: 48px;     height: 48px;     background: linear-gradient(135deg, var(--dmrt-red-pale) 0%, #ffe5e5 100%);     border-radius: var(--radius-md);     display: flex;     align-items: center;     justify-content: center;     color: var(--dmrt-red);     font-size: 1.25rem;     flex-shrink: 0; }  .feature-item h4 {     font-size: 1rem;     font-weight: 600;     margin-bottom: 0.25rem; }  .feature-item p {     font-size: 0.9rem;     color: var(--dmrt-grey);     margin: 0; }  /* ==========================================================================    17. Custom Components - Hero Section    ========================================================================== */  .hero-section {     background: linear-gradient(135deg, var(--dmrt-dark) 0%, var(--dmrt-dark-mid) 100%);     color: #fff;     padding: 80px 0 100px;     position: relative;     overflow: hidden; }  .hero-section::before {     content: '';     position: absolute;     top: 0;     left: 0;     right: 0;     bottom: 0;     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon fill="%23ffffff08" points="0,100 100,0 100,100"/></svg>');     background-size: cover; }  .hero-content {     position: relative;     z-index: 1; }  .hero-section h1 {     font-size: 3rem;     font-weight: 700;     margin-bottom: 1.5rem;     color: #fff; }  .hero-section .lead {     font-size: 1.3rem;     opacity: 0.9;     max-width: 600px;     color: #fff; }  .hero-stats {     display: flex;     gap: 3rem;     margin-top: 2.5rem; }  .stat-item {     text-align: center; }  .stat-number {     font-size: 2.5rem;     font-weight: 700;     color: var(--dmrt-red);     display: block; }  .stat-label {     font-size: 0.9rem;     opacity: 0.8;     text-transform: uppercase;     letter-spacing: 1px; }  .quick-links {     display: flex;     flex-wrap: wrap;     gap: 0.5rem;     margin-top: 1rem; }  .quick-link {     background: rgba(255, 255, 255, 0.15);     color: #fff;     padding: 0.5rem 1rem;     border-radius: var(--radius-pill);     font-size: 0.9rem;     text-decoration: none;     transition: all var(--transition-fast); }  .quick-link:hover {     background: #fff;     color: var(--dmrt-dark);     text-decoration: none; }  /* ==========================================================================    18. Custom Components - Feature Sections    ========================================================================== */  .wishlist-section {     padding: 80px 0;     background: linear-gradient(135deg, var(--dmrt-red) 0%, var(--dmrt-red-dark) 100%);     color: #fff; }  .wishlist-card {     background: rgba(255, 255, 255, 0.1);     border-radius: var(--radius-md);     padding: 1.5rem;     text-align: center;     transition: all var(--transition-normal);     height: 100%; }  .wishlist-card:hover {     background: rgba(255, 255, 255, 0.2);     transform: translateY(-4px); }  .wishlist-card i {     font-size: 2.5rem;     margin-bottom: 1rem;     opacity: 0.9; }  .wishlist-card h4 {     font-size: 1.1rem;     font-weight: 600;     margin-bottom: 0.5rem;     color: #fff; }  .wishlist-card p {     font-size: 0.9rem;     opacity: 0.85;     margin-bottom: 0; }  .impact-section {     padding: 80px 0;     background: var(--dmrt-dark);     color: #fff; }  .impact-card {     text-align: center;     padding: 2rem; }  .impact-icon {     width: 80px;     height: 80px;     background: var(--dmrt-red);     border-radius: 50%;     display: flex;     align-items: center;     justify-content: center;     margin: 0 auto 1.5rem;     font-size: 2rem;     color: #fff; }  .impact-card h4 {     font-size: 1.2rem;     margin-bottom: 0.75rem;     color: #fff; }  .impact-card p {     opacity: 0.8;     font-size: 0.95rem; }  .support-card {     background: var(--dmrt-dark);     color: #fff;     border-radius: var(--radius-lg);     padding: 3rem;     position: relative;     overflow: hidden; }  .support-card::before {     content: '';     position: absolute;     top: 0;     right: 0;     width: 200px;     height: 200px;     background: var(--dmrt-red);     opacity: 0.1;     border-radius: 50%;     transform: translate(50%, -50%); }  .support-card h3 {     font-size: 1.5rem;     margin-bottom: 1rem;     color: #fff; }  .support-stats {     display: flex;     gap: 2rem;     margin-top: 2rem; }  .support-stat {     text-align: center; }  .support-stat .number {     font-size: 2rem;     font-weight: 700;     color: var(--dmrt-red);     display: block; }  .support-stat .label {     font-size: 0.85rem;     opacity: 0.8; }  /* ==========================================================================    19. Custom Components - Pricing Cards    ========================================================================== */  .pricing-card {     background: #fff;     border-radius: var(--radius-lg);     padding: 2rem;     box-shadow: var(--shadow-sm);     text-align: center;     height: 100%;     transition: all var(--transition-normal);     border: 2px solid transparent; }  .pricing-card:hover {     box-shadow: var(--shadow-md);     transform: translateY(-4px); }  .pricing-card.featured {     border-color: var(--dmrt-red); }  .pricing-card h3 {     font-size: 1.5rem;     margin-bottom: 0.5rem; }  .pricing-card .subtitle {     color: var(--dmrt-grey);     margin-bottom: 1.5rem; }  .pricing-card .price {     font-size: 2.5rem;     font-weight: 700;     color: var(--dmrt-red); }  .pricing-card .price small {     font-size: 1rem;     font-weight: 400;     color: var(--dmrt-grey); }  .pricing-card ul {     list-style: none;     padding: 0;     margin: 1.5rem 0;     text-align: left; }  .pricing-card ul li {     padding: 0.5rem 0 0.5rem 1.5rem;     position: relative; }  .pricing-card ul li::before {     content: '?';     position: absolute;     left: 0;     color: var(--dmrt-red);     font-weight: bold; }  /* ==========================================================================    20. Custom Components - Testimonials    ========================================================================== */  blockquote, .blockquote {     border-left: 4px solid var(--dmrt-red);     padding-left: 1.5rem;     margin: 1.5rem 0;     font-style: italic;     color: var(--dmrt-grey-dark); }  .testimonial-card {     background: #fff;     border-radius: var(--radius-md);     padding: 2rem;     box-shadow: var(--shadow-sm);     height: 100%; }  .testimonial-card blockquote {     border-left: none;     padding-left: 0;     margin: 0 0 1rem; }  .testimonial-card cite {     font-style: normal;     font-weight: 600;     color: var(--dmrt-dark); }  /* ==========================================================================    21. Custom Components - Trust Badges & Tables    ========================================================================== */  .trust-badges {     display: flex;     justify-content: center;     gap: 3rem;     padding: 2rem 0;     border-top: 1px solid #eee; }  .trust-badge {     text-align: center; }  .trust-badge i {     font-size: 2rem;     color: var(--dmrt-red);     margin-bottom: 0.5rem;     display: block; }  .trust-badge span {     display: block;     font-size: 0.85rem;     color: var(--dmrt-grey); }  .size-table {     width: 100%;     border-collapse: collapse; }  .size-table th, .size-table td {     padding: 0.75rem 1rem;     text-align: center;     border-bottom: 1px solid #eee; }  .size-table th {     background: var(--dmrt-grey-light);     font-weight: 600; }  .size-table tr:hover td {     background: var(--dmrt-red-pale); }  .tab-content-box {     background: #fff;     border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);     padding: 2rem;     box-shadow: var(--shadow-sm); }  /* ==========================================================================    22. Content & Collection Sections    ========================================================================== */  .section-title {     font-size: 2rem;     font-weight: 700;     margin-bottom: 0.5rem;     color: var(--dmrt-dark); }  .section-subtitle {     color: var(--dmrt-grey);     margin-bottom: 2.5rem;     font-size: 1.1rem; }  .content-section {     padding: 4rem 0; }  .content-section.alt {     background: var(--dmrt-grey-light); }  .collection-header {     padding: 3rem 0;     background: var(--dmrt-grey-light);     margin-bottom: 2rem; }  .collection-header h1 {     font-size: 2.5rem;     margin-bottom: 0.5rem; }  .collection-header p {     color: var(--dmrt-grey);     font-size: 1.1rem;     max-width: 600px; }  /* ==========================================================================    23. Footer    ========================================================================== */  footer {     background: var(--dmrt-dark);     color: #fff;     padding: 3rem 0 1.5rem; }  footer a {     color: rgba(255, 255, 255, 0.8); }  footer a:hover {     color: #fff; }  footer h5, footer h6 {     color: #fff;     margin-bottom: 1rem; }  footer ul {     list-style: none;     padding: 0; }  footer ul li {     margin-bottom: 0.5rem; }  footer .copyright {     border-top: 1px solid rgba(255, 255, 255, 0.1);     margin-top: 2rem;     padding-top: 1.5rem;     font-size: 0.9rem;     opacity: 0.7; }  /* ==========================================================================    24. Utility Classes    ========================================================================== */  /* Text colours - white text utility */ .white-text, h1.white-text, h2.white-text, h3.white-text, h4.white-text, h5.white-text, h6.white-text, .white-text h1, .white-text h2, .white-text h3, .white-text h4, .white-text h5, .white-text h6, .masthead .white-text, .masthead h1.white-text, .masthead h2.white-text, .white-heading h1, .white-heading h2, .white-heading h3, .post-heading h1, .post-heading h2, .post-heading .white-text {     color: #fff !important; }  .text-white, h1.text-white, h2.text-white, h3.text-white, h4.text-white, h5.text-white, h6.text-white {     color: #fff !important; }  .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow-md { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; }  .rounded-lg { border-radius: var(--radius-lg) !important; } .rounded-md { border-radius: var(--radius-md) !important; }  .hover-lift {     transition: transform var(--transition-normal), box-shadow var(--transition-normal); }  .hover-lift:hover {     transform: translateY(-4px);     box-shadow: var(--shadow-md); }  /* ==========================================================================    25. Animations    ========================================================================== */  @keyframes fadeInUp {     from {         opacity: 0;         transform: translateY(20px);     }     to {         opacity: 1;         transform: translateY(0);     } }  .animate-fade-in-up {     animation: fadeInUp 0.6s ease forwards; }  /* ==========================================================================    26. Responsive    ========================================================================== */  @media (max-width: 991.98px) {     .hero-section h1 { font-size: 2.25rem; }     .hero-stats { gap: 2rem; }     .stat-number { font-size: 2rem; }     .support-stats { flex-wrap: wrap; gap: 1.5rem; } }  @media (max-width: 767.98px) {     h1, .h1 { font-size: 2rem; }     h2, .h2 { font-size: 1.75rem; }          .hero-section { padding: 60px 0 80px; }     .hero-section h1 { font-size: 1.75rem; }     .hero-section .lead { font-size: 1.1rem; }     .hero-stats { gap: 1.5rem; }     .stat-number { font-size: 1.75rem; }          .category-icon { height: 100px; font-size: 2.5rem; }     .product-title { font-size: 1.5rem; }     .product-price { font-size: 1.5rem; }          .support-card { padding: 2rem; }     .support-stats { flex-direction: column; gap: 1rem; }     .trust-badges { flex-wrap: wrap; gap: 1.5rem; }     .content-section { padding: 3rem 0; } }  @media (max-width: 575.98px) {     .hero-stats { flex-direction: column; gap: 1rem; align-items: flex-start; }     .stat-item { text-align: left; }     .quick-links { flex-direction: column; }     .quick-link { text-align: center; }     .btn-add-cart { padding: 0.875rem 1.5rem; font-size: 1rem; } }  /* ==========================================================================    27. Print    ========================================================================== */  @media print {     .hero-section, .impact-section, .wishlist-section {         background: none !important;         color: #000 !important;     }     .btn, .nav, footer { display: none !important; } }