/*
 Theme Name:   AD Maskin Child Theme
 Theme URI:    https://www.admaskin.se
 Description:  Professional Training & Certification Platform - Industrial Precision Meets Digital Clarity
 Author:       AD Maskin AB
 Author URI:   https://www.admaskin.se
 Template:     twentytwentyfour
 Version:      2.6.9
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         ecommerce, education, woocommerce, courses, industrial, training
 Text Domain:  admaskin

 Design System Version: 2.6.70
 Last Updated: 2025-11-07
*/

/* ============================================
   IMPORT DESIGN SYSTEM
   ============================================ */

/* Design tokens must be imported first */
@import url('assets/css/design-tokens.css');

/* Component library */
@import url('assets/css/components.css');

/* Header & Navigation */
@import url('assets/css/header.css');

/* Page-specific styles */
@import url('assets/css/pages.css');

/* WooCommerce styles */
@import url('assets/css/woocommerce.css');

/* Animations */
@import url('assets/css/animations.css');

/* ============================================
   GLOBAL OVERFLOW PREVENTION
   ============================================ */

/* Prevent horizontal scroll on all screen sizes */
html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

/* Custom Global Styles */
/* Desktop/Global Cart Icon Size */
.header-cart-main .cart-icon-svg {
    width: 40px;
    height: 40px;
    display: block;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.header-cart-main:hover .cart-icon-svg {
    transform: scale(1.1);
}

#page,
.site-content {
    overflow-x: hidden;
    max-width: 100%;
}

/* Ensure all elements use border-box */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ============================================
   WORDPRESS ADMIN BAR FIX FOR MOBILE
   ============================================ */

/* Force admin bar to always be at the very top */
#wpadminbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 999999 !important;
}

/* Ensure mobile menu doesn't cover admin bar */
body.admin-bar .mobile-menu {
    top: 46px !important;
    height: calc(100vh - 46px) !important;
}

@media screen and (min-width: 783px) {
    body.admin-bar .mobile-menu {
        top: 32px !important;
        height: calc(100vh - 32px) !important;
    }
}

/* ============================================
   BUG FIXES (VERSION 2.6.5)
   ============================================ */

/* 1. Remove blue outline on hover for product container */
.woocommerce div.product,
.woocommerce div.product *,
.woocommerce div.product a,
.woocommerce div.product a:hover,
.woocommerce div.product a:focus,
.woocommerce div.product a:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. Ensure main product image and gallery is always visible */
.woocommerce-product-gallery {
    opacity: 1 !important;
    visibility: visible !important;
}

.woocommerce-product-gallery__image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.woocommerce-product-gallery__wrapper {
    opacity: 1 !important;
    visibility: visible !important;
}

.woocommerce div.product div.images {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Add vertical spacing between quantity and buy button */
.woocommerce div.product form.cart div.quantity {
    margin-bottom: 1.5rem !important;
    /* Add spacing below quantity selector */
}

/* 4. Reduce space between product title and price */
.woocommerce div.product .product_title {
    margin-bottom: 0.45rem !important;
    margin-top: 0 !important;
    /* Ensure no top margin keeps it tight to description if needed, or just safety */
    padding-bottom: 0 !important;
    font-size: var(--font-size-xl) !important;
}

.woocommerce-ordering,
form.woocommerce-ordering,
.woocommerce .woocommerce-ordering,
select.orderby {
    display: none !important;
}

.woocommerce div.product .price {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ============================================
   COLOR VARIABLES & FOUNDATION
   ============================================ */

/* Ensure sticky positioning works */
html,
body,
#page {
    overflow-x: hidden;
    overflow-y: auto;
}

:root {
    /* Brand Colors */
    --admaskin-primary: #FF8C00;
    /* Orange */
    --admaskin-primary-dark: #E67E00;
    /* Darker orange for hover */
    --admaskin-secondary: #2C3E50;
    /* Dark blue-grey */
    --admaskin-accent: #3498DB;
    /* Blue accent */

    /* Neutral Colors */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-grey-50: #F8F9FA;
    --color-grey-100: #E9ECEF;
    --color-grey-200: #DEE2E6;
    --color-grey-300: #CED4DA;
    --color-grey-600: #6C757D;
    --color-grey-800: #343A40;
    --color-grey-900: #212529;

    /* Semantic Colors */
    --color-success: #28A745;
    --color-warning: #FFC107;
    --color-danger: #DC3545;
    --color-info: #17A2B8;

    /* Typography */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --font-headings: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 4rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Container widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.site-header {
    position: sticky;
    top: 0;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    /* Below mobile menu (9999) but above content */
}


/* Header Top */
.header-top {
    background: var(--color-grey-50);
    padding: 0.75rem 0;
    font-size: 0.875rem;
}

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

.header-contact {
    display: flex;
    gap: var(--spacing-md);
}

.header-contact a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-grey-800);
}

.header-contact a:hover {
    color: var(--admaskin-primary);
}

.header-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.header-account,
.header-cart {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-grey-800);
}

.header-cart {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--admaskin-primary);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-full);
    min-width: 18px;
    text-align: center;
}

/* Header Main */
.header-main {
    padding: 1.5rem 0;
}

.header-main-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding {
    display: flex;
    align-items: center;
}

.site-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.site-title a {
    color: var(--admaskin-secondary);
}

.site-description {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-grey-600);
}

.custom-logo-link img {
    max-height: 60px;
    width: auto;
}

/* Main Navigation */
.main-navigation {
    display: flex;
}

.primary-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--spacing-md);
}

.primary-menu>li {
    position: relative;
}

.primary-menu>li>a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--admaskin-secondary);
    font-weight: 600;
    transition: color var(--transition-base);
}

.primary-menu>li>a:hover,
.primary-menu>li.current-menu-item>a {
    color: var(--admaskin-primary);
}

/* Dropdown menus */
.primary-menu li {
    position: relative;
}

.primary-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    padding: 0.5rem 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-base);
}

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

.primary-menu .sub-menu li a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--admaskin-secondary);
}

.primary-menu .sub-menu li a:hover {
    background: var(--color-grey-50);
    color: var(--admaskin-primary);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--admaskin-secondary);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 2px;
}

.mobile-menu-toggle:hover .hamburger span {
    background: var(--admaskin-primary);
}

.mobile-menu-toggle.active .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
    background: var(--admaskin-primary);
}

.mobile-menu-toggle.active .hamburger span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.mobile-menu-toggle.active .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
    background: var(--admaskin-primary);
}

/* ============================================
   MOBILE MENU
   ============================================ */

/* Mobile Menu - Slides from LEFT */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height for mobile browsers */
    background: var(--color-white);
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    /* Above everything including header and banner */
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
    will-change: transform;
}

.mobile-menu.active {
    transform: translateX(0);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    /* Just below mobile menu */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        visibility 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

body.mobile-menu-open {
    overflow: hidden;
    /* Prevent scrolling when menu is open */
}

body.mobile-menu-open .mobile-menu {
    transform: translateX(0);
}

body.mobile-menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Mobile Menu Header */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-grey-200);
    background: var(--color-white);
    position: sticky;
    top: 0;
    z-index: 10;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu.active .mobile-menu-header {
    animation: fadeInDown 0.4s ease forwards 0.05s;
}

@keyframes fadeInDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--admaskin-secondary);
}

.mobile-menu-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 2rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--admaskin-secondary);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: var(--radius-md);
}

.mobile-menu-close:hover {
    color: var(--admaskin-primary);
    background: var(--color-grey-50);
    transform: rotate(90deg);
}

/* Mobile Menu Items */
.mobile-menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-items li {
    border-bottom: 1px solid var(--color-grey-100);
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Staggered animation for menu items */
.mobile-menu.active .mobile-menu-items li:nth-child(1) {
    animation: slideInLeft 0.4s ease forwards 0.1s;
}

.mobile-menu.active .mobile-menu-items li:nth-child(2) {
    animation: slideInLeft 0.4s ease forwards 0.15s;
}

.mobile-menu.active .mobile-menu-items li:nth-child(3) {
    animation: slideInLeft 0.4s ease forwards 0.2s;
}

.mobile-menu.active .mobile-menu-items li:nth-child(4) {
    animation: slideInLeft 0.4s ease forwards 0.25s;
}

.mobile-menu.active .mobile-menu-items li:nth-child(5) {
    animation: slideInLeft 0.4s ease forwards 0.3s;
}

.mobile-menu.active .mobile-menu-items li:nth-child(6) {
    animation: slideInLeft 0.4s ease forwards 0.35s;
}

.mobile-menu.active .mobile-menu-items li:nth-child(7) {
    animation: slideInLeft 0.4s ease forwards 0.4s;
}

.mobile-menu.active .mobile-menu-items li:nth-child(8) {
    animation: slideInLeft 0.4s ease forwards 0.45s;
}

.mobile-menu.active .mobile-menu-items li:nth-child(9) {
    animation: slideInLeft 0.4s ease forwards 0.5s;
}

.mobile-menu.active .mobile-menu-items li:nth-child(10) {
    animation: slideInLeft 0.4s ease forwards 0.55s;
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mobile-menu-items li a {
    display: block;
    padding: 1.25rem 1.5rem;
    color: var(--admaskin-secondary);
    font-size: 1.125rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mobile-menu-items li a:hover,
.mobile-menu-items li.current-menu-item a {
    background: var(--color-grey-50);
    color: var(--admaskin-primary);
    padding-left: 2rem;
}

/* Mobile Menu Footer */
.mobile-menu-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--color-grey-200);
    background: var(--color-grey-50);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu.active .mobile-menu-footer {
    animation: fadeInUp 0.5s ease forwards 0.6s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--admaskin-secondary);
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
}

.mobile-menu-link:hover {
    background: var(--color-white);
    color: var(--admaskin-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

/* ============================================
   GLOBAL STYLES
   ============================================ */

body {
    font-family: var(--font-primary);
    color: var(--color-grey-900);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-headings);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--admaskin-secondary);
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1.125rem;
}

a {
    color: var(--admaskin-accent);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--admaskin-primary);
}

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

.container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.section {
    padding: var(--spacing-xl) 0;
}

.section-alt {
    background: var(--color-grey-50);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn,
.button,
.wp-block-button__link,
.woocommerce button.button,
.woocommerce a.button {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    line-height: 1.5;
}

.btn-primary,
.woocommerce button.button.alt {
    background: var(--admaskin-primary);
    color: var(--color-white);
    border-color: var(--admaskin-primary);
}

.btn-primary:hover,
.woocommerce button.button.alt:hover {
    background: var(--admaskin-primary-dark);
    border-color: var(--admaskin-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: transparent;
    color: var(--admaskin-primary);
    border-color: var(--admaskin-primary);
}

.btn-secondary:hover {
    background: var(--admaskin-primary);
    color: var(--color-white);
}

.btn-large {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
}

.btn-block {
    display: block;
    width: 100%;
}

/* ============================================
   TRUST BADGES
   ============================================ */

.admaskin-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: var(--color-grey-50);
    border-radius: var(--radius-md);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-grey-800);
}

.trust-badge .dashicons {
    color: var(--color-success);
    font-size: 1.25rem;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-section {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--admaskin-secondary) 0%, #34495E 100%);
    color: var(--color-white);
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    text-align: center;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

.hero-title {
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-lg);
    opacity: 0.95;
}

.hero-cta {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-lg);
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

/* ============================================
   VALUE PROPOSITIONS
   ============================================ */

.value-props {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.value-prop {
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.value-prop:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.value-prop-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--admaskin-primary), var(--admaskin-primary-dark));
    color: var(--color-white);
    border-radius: 50%;
    font-size: 1.75rem;
}

.value-prop-icon svg {
    width: 32px;
    height: 32px;
}

.value-prop h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
}

.value-prop p {
    color: var(--color-grey-600);
    font-size: 0.95rem;
}

/* ============================================
   PRODUCT CARDS / COURSE CARDS
   ============================================ */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.woocommerce ul.products li.product {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.woocommerce ul.products li.product img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.25rem;
    margin: var(--spacing-md) 0 var(--spacing-sm);
    padding: 0 var(--spacing-md);
}

.woocommerce ul.products li.product .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--admaskin-primary);
    padding: 0 var(--spacing-md);
}

.woocommerce ul.products li.product .button {
    margin: var(--spacing-md);
    width: calc(100% - 2rem);
}

/* ============================================
   TESTIMONIALS
   ============================================ */

.admaskin-testimonials {
    display: grid;
    gap: var(--spacing-lg);
}

.admaskin-testimonials.layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.testimonial-item {
    background: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--admaskin-primary);
}

.testimonial-content {
    font-style: italic;
    color: var(--color-grey-800);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.testimonial-content::before {
    content: '"';
    font-size: 3rem;
    color: var(--admaskin-primary);
    opacity: 0.3;
    line-height: 0;
    display: block;
    margin-bottom: 1rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rating {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.author-name {
    font-weight: 700;
    color: var(--admaskin-secondary);
    margin: 0;
}

.author-meta {
    font-size: 0.875rem;
    color: var(--color-grey-600);
    margin: 0;
}

/* ============================================
   HOW IT WORKS STEPS
   ============================================ */

.how-it-works-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.step {
    text-align: center;
    padding: var(--spacing-lg);
}

.step-number {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admaskin-primary);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
}

.step h4 {
    margin-bottom: var(--spacing-sm);
    font-size: 1.125rem;
}

.step p {
    color: var(--color-grey-600);
    font-size: 0.95rem;
}

/* ============================================
   COURSE INCLUDES
   ============================================ */

.course-includes {
    list-style: none;
    padding: 0;
}

.course-includes li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-grey-200);
    font-size: 1rem;
}

.course-includes li:last-child {
    border-bottom: none;
}

/* ============================================
   CHECKOUT ENHANCEMENTS
   ============================================ */

.woocommerce-checkout .woocommerce-checkout-payment {
    background: var(--color-grey-50);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
}

.woocommerce-checkout #payment {
    background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
    border: none;
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.woocommerce-checkout #payment div.payment_box {
    background: var(--color-grey-50);
    border-radius: var(--radius-sm);
}

.woocommerce-checkout #payment #place_order {
    width: 100%;
    font-size: 1.125rem;
    padding: 1.25rem;
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    background: var(--admaskin-secondary);
    color: var(--color-grey-200);
    padding: var(--spacing-16) 0 var(--spacing-lg);
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.footer-widget h4 {
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    text-transform: none;
}

.footer-widget ul {
    list-style: none;
    padding: 0;
}

.footer-widget ul li {
    margin-bottom: 0.35rem;
}

.footer-widget a,
.footer-widget p {
    color: var(--color-grey-200);
    transition: color var(--transition-base);
    font-size: 0.85rem;
    line-height: 1.5;
}

.footer-widget a:hover {
    color: var(--admaskin-primary);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--spacing-sm);
    text-align: center;
    font-size: 0.8rem;
}

.company-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.company-info p {
    margin: 0;
    font-size: 0.85rem;
}

.company-info-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet Landscape & Small Desktop (992px - 1200px) */
@media (max-width: 1200px) {
    :root {
        --spacing-xl: 3rem;
    }

    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .hero-content {
        max-width: 700px;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    :root {
        --spacing-xl: 2.5rem;
    }

    /* Header adjustments */
    .header-main {
        padding: 1rem 0;
    }

    .custom-logo-link img {
        max-height: 50px;
    }

    .primary-menu>li>a {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    /* Hero section */
    .hero-section {
        min-height: 600px;
    }

    .hero-title {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }

    /* Product grid */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    /* Footer */
    .footer-widgets {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    /* Value props */
    .value-props {
        grid-template-columns: repeat(2, 1fr);
    }

    /* How it works steps - 2 columns on tablet */
    .how-it-works-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Header - Hide desktop nav, show mobile rules for Tablet + Mobile */
    .header-top {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .main-navigation {
        display: none;
    }

    .header-main-content {
        padding: 0.75rem 0;
    }

    .header-cart-main {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        margin-right: 1rem;
        width: 70px !important;
        height: 70px !important;
        color: #333 !important;
        z-index: 1002;
        background: transparent;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .header-cart-main .cart-icon-svg {
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        color: #333 !important;
        fill: currentColor !important;
    }
}

.single-product-page .container {
    padding: 2rem 0;
    /* Default padding for larger screens */
}

@media (max-width: 767px) {
    .single-product-page .container {
        padding: 1rem;
        /* Adjust padding for smaller screens */
    }
}

/* Tablet Portrait & Large Phone (481px - 767px) */
@media (max-width: 767px) {
    :root {
        --spacing-xl: 2rem;
        --spacing-lg: 1.75rem;
    }

    /* Hero section */
    .hero-section {
        min-height: 500px;
        padding: var(--spacing-xl) 0;
    }

    .hero-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: var(--spacing-md);
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: var(--spacing-lg);
    }

    .hero-cta {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .hero-features {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    /* Buttons - Touch friendly */
    .btn,
    .button {
        min-height: 48px;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .btn-large {
        padding: 1rem 2rem;
        font-size: 1.125rem;
        min-height: 56px;
    }

    /* Product grid - Single column */
    .woocommerce ul.products {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .woocommerce ul.products li.product {
        max-width: 500px;
        margin: 0 auto;
    }

    /* Value props & steps - Single column */
    .value-props,
    .how-it-works-steps {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Footer - Single column */
    .footer-widgets {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Typography scaling */
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }

    h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Product cards */
    .woocommerce ul.products li.product img {
        height: 200px;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 1.125rem;
    }

    /* Forms - Touch friendly */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        min-height: 48px;
        font-size: 16px;
        /* Prevents zoom on iOS */
        padding: 0.75rem 1rem;
    }

    /* WooCommerce quantity inputs */
    .quantity input.qty {
        min-height: 56px !important;
        font-size: 18px;
        padding: 0.5rem;
    }

    /* Make quantity buttons larger */
    .quantity .plus,
    .quantity .minus,
    .quantity button {
        min-height: 56px !important;
        min-width: 56px !important;
        font-size: 24px !important;
    }

    .woocommerce table.cart td.actions .coupon .input-text {
        min-height: 56px;
    }

    /* MATCHING ADD TO CART BUTTON HEIGHT */
    .woocommerce ul.products li.product .button,
    .woocommerce .products .product .button,
    button.single_add_to_cart_button,
    .single_add_to_cart_button {
        min-height: 56px !important;
        height: 56px !important;
        line-height: normal !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Force Quantity Controls to Match Height & Fill Background */
    .woocommerce ul.products li.product .quantity-controls .qty-btn,
    .woocommerce ul.products li.product .quantity-controls .qty-input,
    .woocommerce ul.products li.product .quantity-controls .qty-display {
        min-height: 56px !important;
        height: 56px !important;
        line-height: 56px !important;
    }
}

/* Mobile (320px - 480px) */
@media (max-width: 480px) {
    :root {
        --spacing-xl: 1.5rem;
        --spacing-lg: 1.25rem;
        --spacing-md: 1rem;
    }

    /* Container padding - ensure no horizontal overflow */
    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Prevent body overflow */
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    #page,
    .site-content {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Logo size */
    .custom-logo-link img {
        max-height: 40px;
    }

    .site-title {
        font-size: 1.125rem;
    }

    /* Hero section - Compact */
    .hero-section {
        min-height: 450px;
        padding: var(--spacing-lg) 0;
    }

    .hero-content {
        padding: var(--spacing-md);
    }

    .hero-title {
        font-size: 1.5rem;
        line-height: 1.25;
        margin-bottom: var(--spacing-sm);
    }

    .hero-subtitle {
        font-size: 0.9375rem;
        margin-bottom: var(--spacing-md);
    }

    .hero-cta .btn {
        width: 100%;
    }

    .hero-feature {
        font-size: 0.875rem;
    }

    /* Section spacing */
    .section {
        padding: var(--spacing-xl) 0;
    }

    /* Typography */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.125rem;
    }

    /* Buttons - Full width on small screens */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Product badges - Smaller */
    .product-badge {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        top: 8px;
        right: 8px;
    }

    /* Value props */
    .value-prop {
        padding: var(--spacing-md);
    }

    .value-prop-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .value-prop-icon svg {
        width: 28px;
        height: 28px;
    }

    .value-prop h3 {
        font-size: 1.125rem;
    }

    .value-prop p {
        font-size: 0.875rem;
    }

    /* Trust badges - Stack vertically */
    .admaskin-trust-badges {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .trust-badge {
        font-size: 0.8125rem;
    }

    /* Testimonials */
    .testimonial-item {
        padding: var(--spacing-md);
    }

    .testimonial-content {
        font-size: 0.9375rem;
    }

    .author-avatar {
        width: 48px;
        height: 48px;
    }

    /* Steps */
    .step {
        padding: var(--spacing-md);
    }

    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    /* Product grid - prevent overflow */
    .woocommerce ul.products {
        padding: 0;
        margin: 0 auto;
        max-width: 100%;
        overflow: visible;
    }

    .woocommerce ul.products li.product {
        margin: 0 auto var(--spacing-md);
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    /* Product card adjustments */
    .woocommerce ul.products li.product .price {
        font-size: 1.25rem;
    }

    .woocommerce ul.products li.product .button {
        margin: var(--spacing-sm);
        width: calc(100% - 1rem);
        padding: 0.75rem;
        font-size: 0.9375rem;
        box-sizing: border-box;
    }

    /* Product images - prevent overflow */
    .woocommerce ul.products li.product img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* Product title - prevent overflow */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Footer adjustments */
    .footer-widget h4 {
        font-size: 0.9rem;
    }

    .footer-widget a,
    .footer-widget p,
    .company-info {
        font-size: 0.8rem;
    }

    .footer-bottom {
        font-size: 0.75rem;
    }

    .company-info-item {
        font-size: 0.875rem;
    }

    /* Checkout forms - Full width */
    .woocommerce-checkout #payment #place_order {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
    }

    /* Quantity controls - Larger touch targets */
    .quantity-controls {
        min-height: 48px;
    }

    .qty-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.25rem;
    }

    .qty-display {
        min-width: 44px;
        font-size: 1.125rem;
    }

    /* Mobile menu - Full screen */
    .mobile-menu {
        width: 100%;
        max-width: 100%;
    }

    .mobile-menu-items li a {
        font-size: 1.125rem;
        padding: 1.25rem 1.5rem;
    }

    .mobile-menu-header {
        padding: 1.25rem;
    }

    .mobile-menu-footer {
        padding: 1.25rem;
    }

    /* Header contact stacking */
    .header-contact {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .header-contact a {
        font-size: 0.8125rem;
    }
}

/* Very small devices (< 360px) */
@media (max-width: 359px) {

    /* Prevent any horizontal overflow */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw;
        width: 100%;
    }

    body,
    #page,
    .site-content,
    main,
    section {
        max-width: 100%;
        overflow-x: hidden;
    }

    * {
        box-sizing: border-box;
    }

    .container {
        max-width: 100%;
        overflow-x: hidden;
    }

    .hero-title {
        font-size: 1.375rem;
    }

    .hero-subtitle {
        font-size: 0.875rem;
    }

    .custom-logo-link img {
        max-height: 36px;
    }

    .btn,
    .button {
        font-size: 0.9375rem;
        padding: 0.75rem 1rem;
    }

    .container {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
        max-width: 100%;
    }

    /* Product grid extra small */
    .woocommerce ul.products {
        gap: var(--spacing-3);
    }

    .woocommerce ul.products li.product {
        width: 100%;
        max-width: 100%;
    }

    /* Category cards extra small */
    .category-grid {
        padding: 0 0.5rem;
    }

    .category-card {
        padding: var(--spacing-4);
    }

    /* Mobile menu adjustments */
    .mobile-menu {
        width: 100%;
    }

    .mobile-menu-header {
        padding: 1rem;
    }

    .mobile-menu-items li a {
        padding: 1rem 1rem;
        font-size: 1rem;
    }

    .mobile-menu-footer {
        padding: 1rem;
    }
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: 400px;
    }

    .mobile-menu {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
    }

    .mobile-menu-items li a {
        padding: 0.875rem 1.5rem;
    }

    .mobile-menu-header,
    .mobile-menu-footer {
        padding: 1rem 1.5rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {

    /* Remove hover effects on touch devices */
    .btn:hover,
    .button:hover {
        transform: none;
    }

    /* Larger touch targets */
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover states that don't work well on touch */
    .woocommerce ul.products li.product:hover {
        transform: none;
    }

    .value-prop:hover {
        transform: none;
    }
}

/* Reduced Motion - Accessibility */
@media (prefers-reduced-motion: reduce) {
    .mobile-menu {
        transition: transform 0.1s linear;
    }

    .mobile-menu-overlay {
        transition: opacity 0.1s linear, visibility 0.1s linear;
    }

    .mobile-menu-header,
    .mobile-menu-items li,
    .mobile-menu-footer {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hamburger span {
        transition: all 0.1s linear;
    }

    .mobile-menu-toggle.active .hamburger span:nth-child(2) {
        transform: none;
    }
}

/* ============================================
   DISABLE PRODUCT REVIEWS
   ============================================ */

/* Hide all WooCommerce review/rating elements */
.woocommerce .star-rating,
.woocommerce .woocommerce-product-rating,
.woocommerce-product-rating,
#reviews,
#review_form_wrapper,
#review_form,
.woocommerce-Reviews,
.woocommerce-review,
.woocommerce-Reviews-title,
.comment-form-rating,
.reviews_tab,
a[href*="#reviews"],
a[href*="#tab-reviews"] {
    display: none !important;
}

/* Hide review-related meta in product listings */
.woocommerce-loop-product__title+.star-rating {
    display: none !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

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

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

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

.mt-0 {
    margin-top: 0;
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

@media (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hidden-desktop {
        display: none !important;
    }
}

/* ============================================
   HIDE PARENT THEME NAVIGATION BLOCKS
   ============================================ */

/* Hide WordPress block-based navigation from parent theme */
.wp-block-navigation,
.wp-block-page-list {
    display: none !important;
}

/* Ensure our custom header navigation shows on desktop */
@media (min-width: 992px) {
    .site-header .main-navigation {
        display: block !important;
    }
}

/* ============================================
   BLOG GRID LAYOUT
   ============================================ */

.blog-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

/* ============================================
   BLOG HERO SECTION
   ============================================ */

.blog-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('assets/images/blog-hero-bg.jpg');
    /* Fallback or dynamic image */
    background-color: #8B0000;
    /* Dark Red fallback */
    color: var(--color-white);
    padding: 6rem 1.5rem;
    text-align: center;
    margin-bottom: var(--spacing-xl);
    background-size: cover;
    background-position: center;
}

.blog-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.blog-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
}

.blog-hero-text {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
    color: rgba(255, 255, 255, 0.9);
}

.blog-hero-subtext {
    font-size: 1.1rem;
    font-weight: 600;
}

.blog-hero-subtext a {
    color: var(--color-white);
    text-decoration: underline;
}

.blog-hero-subtext a:hover {
    color: var(--admaskin-primary);
}

/* Placeholder for posts without images */
.blog-card-placeholder {
    width: 100%;
    height: 250px;
    background: var(--color-grey-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-card-placeholder .dashicons {
    font-size: 4rem;
    color: var(--color-grey-300);
    width: auto;
    height: auto;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    row-gap: 3rem;
}

@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        row-gap: 3rem;
    }
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    margin-bottom: 2rem;
}

.blog-card-image {
    overflow: hidden;
    width: 100%;
    margin-bottom: 1.25rem;
}

.blog-card-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base);
}

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

.blog-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
    color: var(--color-grey-900);
}

.blog-card-title a {
    color: var(--color-grey-900);
    text-decoration: none;
}

.blog-card-title a:hover {
    color: var(--admaskin-primary);
}

.blog-card-excerpt {
    font-size: 1rem;
    color: var(--color-grey-600);
    margin-bottom: 1.5rem;
    line-height: 1.7;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    line-clamp: 6;
}

.blog-card-link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--admaskin-primary);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
    margin-top: auto;
    width: fit-content;
}

.blog-card-link:hover {
    background: var(--admaskin-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-white);
    text-decoration: none;
}

.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
    background: var(--admaskin-primary);
    color: var(--color-white);
    border-color: var(--admaskin-primary);
}

/* Override Blog Hero Styles */
.blog-hero {
    background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), url('assets/images/blog-hero-bg.jpg') !important;
    background-color: var(--admaskin-secondary) !important;
}

@media (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hidden-desktop {
        display: none !important;
    }
}

/* ============================================
   HIDE PARENT THEME NAVIGATION BLOCKS
   ============================================ */

/* Hide WordPress block-based navigation from parent theme */
.wp-block-navigation,
.wp-block-page-list {
    display: none !important;
}

/* Ensure our custom header navigation shows on desktop */
@media (min-width: 992px) {
    .site-header .main-navigation {
        display: block !important;
    }
}

/* ============================================
   BLOG GRID LAYOUT
   ============================================ */

.blog-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

/* ============================================
   BLOG HERO SECTION
   ============================================ */

.blog-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('assets/images/blog-hero-bg.jpg');
    /* Fallback or dynamic image */
    background-color: #8B0000;
    /* Dark Red fallback */
    color: var(--color-white);
    padding: 6rem 1.5rem;
    text-align: center;
    margin-bottom: var(--spacing-xl);
    background-size: cover;
    background-position: center;
}

.blog-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.blog-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
}

.blog-hero-text {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
    color: rgba(255, 255, 255, 0.9);
}

.blog-hero-subtext {
    font-size: 1.1rem;
    font-weight: 600;
}

.blog-hero-subtext a {
    color: var(--color-white);
    text-decoration: underline;
}

.blog-hero-subtext a:hover {
    color: var(--admaskin-primary);
}

/* Placeholder for posts without images */
.blog-card-placeholder {
    width: 100%;
    height: 250px;
    background: var(--color-grey-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-card-placeholder .dashicons {
    font-size: 4rem;
    color: var(--color-grey-300);
    width: auto;
    height: auto;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    height: 100%;
}

.blog-card-image {
    margin-bottom: var(--spacing-md);
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.blog-card-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base);
}

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

.blog-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

.blog-card-title a {
    color: var(--color-grey-900);
    text-decoration: none;
}

.blog-card-title a:hover {
    color: var(--admaskin-primary);
}



.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
    background: var(--admaskin-primary);
    color: var(--color-white);
    border-color: var(--admaskin-primary);
}

/* Override Blog Hero Styles */
.blog-hero {
    background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), url('assets/images/blog-hero-bg.jpg') !important;
    background-color: var(--admaskin-secondary) !important;
}

.blog-hero-content {
    padding: 0 1rem !important;
}

/* Fix spacing for blog card text */
@media (min-width: 769px) {
    .hidden-desktop {
        display: none !important;
    }
}

/* ============================================
   HIDE PARENT THEME NAVIGATION BLOCKS
   ============================================ */

/* Hide WordPress block-based navigation from parent theme */
.wp-block-navigation,
.wp-block-page-list {
    display: none !important;
}

/* Ensure our custom header navigation shows on desktop */
@media (min-width: 992px) {
    .site-header .main-navigation {
        display: block !important;
    }
}

/* ============================================
   BLOG GRID LAYOUT
   ============================================ */

.blog-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

/* ============================================
   BLOG HERO SECTION
   ============================================ */

.blog-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('assets/images/blog-hero-bg.jpg');
    /* Fallback or dynamic image */
    background-color: #8B0000;
    /* Dark Red fallback */
    color: var(--color-white);
    padding: 6rem 1.5rem;
    text-align: center;
    margin-bottom: var(--spacing-xl);
    background-size: cover;
    background-position: center;
}

.blog-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.blog-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
}

.blog-hero-text {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
    color: rgba(255, 255, 255, 0.9);
}

.blog-hero-subtext {
    font-size: 1.1rem;
    font-weight: 600;
}

.blog-hero-subtext a {
    color: var(--color-white);
    text-decoration: underline;
}

.blog-hero-subtext a:hover {
    color: var(--admaskin-primary);
}

/* Placeholder for posts without images */
.blog-card-placeholder {
    width: 100%;
    height: 250px;
    background: var(--color-grey-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-card-placeholder .dashicons {
    font-size: 4rem;
    color: var(--color-grey-300);
    width: auto;
    height: auto;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}



.blog-card-image {
    margin-bottom: var(--spacing-md);
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.blog-card-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base);
}

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

.blog-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

.blog-card-title a {
    color: var(--color-grey-900);
    text-decoration: none;
}

.blog-card-title a:hover {
    color: var(--admaskin-primary);
}



.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
    background: var(--admaskin-primary);
    color: var(--color-white);
    border-color: var(--admaskin-primary);
}

/* Override Blog Hero Styles */
.blog-hero {
    background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), url('assets/images/blog-hero-bg.jpg') !important;
    background-color: var(--admaskin-secondary) !important;
}

.blog-hero-content {
    padding: 0 1rem !important;
}

/* Fix spacing for blog card text */
.blog-card-content {
    padding: 0 1.5rem 1.5rem !important;
    position: relative !important;
}

/* ============================================
   PRODUCT COURSE TYPE BUBBLES
   ============================================ */

.course-bubble {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    z-index: 100;
    font-size: 0.85rem;
    /* Slightly larger text */
    font-weight: 700;
    text-transform: uppercase;
    color: #fff !important;
    background-color: #FF8C00;
    /* Orange */
    background-color: var(--admaskin-primary, #FF8C00);
    /* Use variable with fallback */
    padding: 10px 20px !important;
    /* Adjusted padding with !important to ensure it applies */
    /* More padding */
    border-radius: 50px !important;
    /* Pill shape */
    letter-spacing: 1px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    /* Softer shadow */
    pointer-events: none;
    display: inline-block !important;
    width: auto !important;
    line-height: 1;
    white-space: nowrap !important;
    /* Prevent text wrapping */
    max-width: calc(100% - 24px);
    /* Ensure it doesn't overflow container */
}

/* Specific colors for each course type */
.course-bubble-online {
    background-color: #FF8C00 !important;
    /* Orange for online courses */
}

.course-bubble-praktik {
    background-color: #28A745 !important;
    /* Green for practical courses */
}

.course-bubble-online_praktik {
    background-color: #2563EB !important;
    /* Blue for online + practical courses */
}

/* Mobile responsive positioning */
@media (max-width: 768px) {
    .course-bubble {
        top: 8px;
        left: 8px;
        font-size: 0.75rem;
        /* Slightly smaller on mobile */
        padding: 8px 16px !important;
        max-width: calc(100% - 16px);
    }
}

/* Ensure product items have relative positioning */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wc-block-components-product-grid__item {
    position: relative !important;
    overflow: hidden;
    /* Prevent bubbles from extending outside */
}

/* ============================================
   EXIT INTENT POPUP STYLES
   ============================================ */

.exit-intent-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    padding: 1rem;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeInOverlay 0.3s ease;
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.exit-intent-popup {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border-radius: 16px !important;
    padding: 2.5rem !important;
    max-width: 480px !important;
    width: 100% !important;
    position: relative !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    text-align: center !important;
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 140, 0, 0.2);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.exit-intent-popup h2 {
    color: #FF8C00 !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    margin-top: 0 !important;
}

.exit-intent-popup p {
    color: #2C3E50 !important;
    font-size: 1.1rem !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.6 !important;
}

.exit-intent-popup p strong {
    color: #FF8C00 !important;
    font-weight: 700 !important;
}

.exit-intent-popup .popup-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 50% !important;
    font-size: 1.5rem !important;
    color: #666 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

.exit-intent-popup .popup-close:hover {
    background: #f0f0f0 !important;
    border-color: #ccc !important;
    color: #333 !important;
    transform: rotate(90deg) !important;
}

.exit-intent-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.exit-intent-form input[type="email"] {
    width: 100% !important;
    padding: 1rem 1.25rem !important;
    font-size: 1rem !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.exit-intent-form input[type="email"]:focus {
    border-color: #FF8C00 !important;
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15) !important;
}

.exit-intent-form input[type="email"]::placeholder {
    color: #999 !important;
}

.exit-intent-form button[type="submit"] {
    width: 100% !important;
    padding: 1rem 2rem !important;
    background: linear-gradient(135deg, #FF8C00, #E67E00) !important;
    color: white !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3) !important;
}

.exit-intent-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #E67E00, #CC6D00) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.4) !important;
}

/* Mobile styles for exit popup */
@media (max-width: 480px) {
    .exit-intent-popup {
        padding: 2rem 1.5rem !important;
        margin: 1rem !important;
    }

    .exit-intent-popup h2 {
        font-size: 1.5rem !important;
    }

    .exit-intent-popup p {
        font-size: 1rem !important;
    }
}

/* ============================================
   HEADER CART FIX - ALWAYS VISIBLE ON MOBILE
   ============================================ */

/* Override the display:none rule at 991px and ensure cart is always visible */
@media (max-width: 991px) {
    .header-cart-main {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 48px !important;
        height: 48px !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        order: 3 !important;
        margin-right: 0.75rem !important;
        margin-left: 0 !important;
    }

    .header-cart-main .dashicons {
        font-size: 26px !important;
        width: 26px !important;
        height: 26px !important;
        display: inline-block !important;
    }

    .header-cart-main .cart-count {
        position: absolute !important;
        top: 6px !important;
        right: 6px !important;
        display: inline-block !important;
        min-width: 18px !important;
        font-size: 10px !important;
        padding: 2px 5px !important;
    }
}

@media (max-width: 480px) {
    .header-cart-main {
        width: 44px !important;
        height: 44px !important;
        margin-right: 0.5rem !important;
    }

    .header-cart-main .dashicons {
        font-size: 24px !important;
        width: 24px !important;
        height: 24px !important;
    }
}

@media (max-width: 359px) {
    .header-cart-main {
        width: 40px !important;
        height: 40px !important;
        margin-right: 0.375rem !important;
    }

    .header-cart-main .dashicons {
        font-size: 22px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .header-cart-main .cart-count {
        top: 4px !important;
        right: 4px !important;
        min-width: 16px !important;
        font-size: 9px !important;
        padding: 1px 4px !important;
    }
}

/* ============================================
   KURSORT LOCATION CARD STYLING
   ============================================ */

.kursort-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.kursort-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FF8C00, #FFB347);
}

.kursort-card:hover {
    border-color: #FF8C00;
    box-shadow: 0 8px 30px rgba(255, 140, 0, 0.15);
    transform: translateY(-2px);
}

.kursort-card h3 {
    color: #2C3E50;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.kursort-card .address {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2C3E50;
    margin: 1rem 0;
    line-height: 1.6;
}

.kursort-card .address strong {
    display: block;
    font-size: 1.25rem;
    color: #FF8C00;
    margin-bottom: 0.5rem;
}

/* ============================================
   FÖRETAGSUTBILDNING CARD STYLING
   ============================================ */

.foretagsutbildning-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.foretagsutbildning-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2C3E50, #34495E);
}

.foretagsutbildning-card:hover {
    border-color: #FF8C00;
    box-shadow: 0 8px 30px rgba(255, 140, 0, 0.15);
    transform: translateY(-2px);
}

.foretagsutbildning-card h3 {
    color: #2C3E50;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.foretagsutbildning-card h3 svg {
    stroke: #FF8C00;
}

.foretagsutbildning-card .subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.foretagsutbildning-card .benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.foretagsutbildning-card .benefit-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 140, 0, 0.05);
    border-radius: 8px;
    font-weight: 500;
    color: #2C3E50;
    transition: all 0.2s ease;
}

.foretagsutbildning-card .benefit-item:hover {
    background: rgba(255, 140, 0, 0.1);
    transform: translateX(4px);
}

.foretagsutbildning-card .benefit-item svg {
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {

    .kursort-card,
    .foretagsutbildning-card {
        padding: 1.5rem;
    }

    .kursort-card h3,
    .foretagsutbildning-card h3 {
        font-size: 1.25rem;
    }

    .foretagsutbildning-card .benefits-grid {
        grid-template-columns: 1fr;
    }
}