/*
Theme Name: Goodwins Custom
Theme URI: http://192.168.1.160/A1/wordpress/
Description: Standalone Custom Theme for Goodwins Photo & Framing
Author: Lee
Version: 1.0.0
Text Domain: goodwins-custom
*/

/* ==========================================================================
    1. COLOR PALETTE & GLOBAL VARIABLES
   ========================================================================== */
:root {
    --goodwins-green: #2e8b57;
    --goodwins-green-dark: #1b4d30;
    --goodwins-navy-dark: #111827;
}

/* ==========================================================================
    2. GLOBAL LAYOUT & OVERFLOW FIXES
   ========================================================================== */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.site-main, .hero-section, section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Make wide fixed elements responsive on smaller screens */
#services .text-center div[style*="width: 500px"] {
    max-width: 90% !important;
}

/* ==========================================================================
    3. BRAND LOGO STYLING
   ========================================================================== */
header.site-header .navbar-brand,
header.site-header .navbar-brand span {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
    4. HEADER & NAVIGATION STYLING
   ========================================================================== */

/* Remove default list bullets and reset base margins */
.site-header ul,
.site-header ol,
.site-header li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Main menu link styling */
.site-header .navbar-nav .nav-link,
.site-header .menu-item a {
    color: #111827 !important;
    text-decoration: none !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.15rem !important;
    padding: 0.5rem 0.75rem !important;
    transition: color 0.2s ease-in-out;
}

.site-header .navbar-nav .nav-link:hover,
.site-header .menu-item a:hover {
    color: var(--goodwins-green) !important;
}

/* Ensure dropdown menu container positioning */
.site-header li {
    position: relative;
}

/* Desktop dropdown menus styling */
@media (min-width: 992px) {
    .site-header ul.sub-menu,
    .site-header ul.dropdown-menu {
        display: none;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background-color: #ffffff !important;
        min-width: 200px !important;
        padding: 8px 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        z-index: 9999 !important;
    }

    /* Show sub-menu on parent hover for desktop view */
    .site-header li:hover > ul.sub-menu,
    .site-header li:hover > ul.dropdown-menu {
        display: block !important;
    }
}

/* Child dropdown links styling */
.site-header ul.sub-menu li a,
.site-header ul.dropdown-menu li a {
    padding: 8px 16px !important;
    display: block !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    color: #333333 !important;
}

.site-header ul.sub-menu li a:hover,
.site-header ul.dropdown-menu li a:hover {
    background-color: #f8f9fa !important;
    color: var(--goodwins-green) !important;
}

/* ==========================================================================
    5. MOBILE NAVIGATION & RESPONSIVE MENU ALIGNMENT
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Let Bootstrap handle collapse toggle normally via its built-in JS classes (.collapse.show) */
    .site-header .navbar-collapse {
        display: none !important;
        background-color: #ffffff !important;
        padding: 20px !important;
        border-radius: 8px !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
        margin-top: 15px !important;
    }

    /* Force the collapse container to show when Bootstrap toggles it */
    .site-header .navbar-collapse.show {
        display: block !important;
    }

    /* Stack navigation items vertically and align them to the left */
    .site-header .navbar-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 15px !important;
    }

    /* Adjust sub-menus for mobile view and align text to the left */
    .site-header ul.sub-menu,
    .site-header ul.dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 15px;
        text-align: left;
        background-color: transparent;
    }
}

/* ==========================================================================
    6. HERO SECTION BACKGROUND & OVERLAY
   ========================================================================== */
.hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55)), url('../img/hero_bg.png') !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* General dark sections styling */
.app-section,
.site-footer {
    background-color: var(--goodwins-green-dark) !important;
    color: #ffffff !important;
}

/* Ensure text typography renders white inside dark sections */
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section p, .hero-section span,
.app-section h2, .app-section p, .app-section span,
.site-footer h4, .site-footer p, .site-footer span, .site-footer li, .site-footer a {
    color: #ffffff !important;
}

/* Theme primary button styles */
.btn-goodwins {
    background-color: var(--goodwins-green) !important;
    border-color: var(--goodwins-green) !important;
    color: #ffffff !important;
}

.btn-goodwins:hover {
    background-color: #236c43 !important;
    border-color: #236c43 !important;
    color: #ffffff !important;
}

.text-goodwins {
    color: var(--goodwins-green) !important;
}

/* ==========================================================================
    7. CARDS & INTERACTION EFFECTS
   ========================================================================== */
.hero-promo-card {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-radius: 12px;
}

.hero-promo-card h3,
.hero-promo-card p {
    color: #111827 !important;
}

/* Hover elevation effect for interactive cards */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2) !important;
}

/* Footer link styling */
.footer-link {
    color: #e5e7eb !important;
    transition: color 0.2s ease;
    text-decoration: none;
}

.footer-link:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

.tracking-wider {
    letter-spacing: 1.5px;
}

/* ==========================================================================
    8. SINGLE SERVICE DARK THEME STYLING
   ========================================================================== */

/* Glassmorphism button effects */
.btn-glass {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Gutenberg typography overrides for dark backgrounds */
.service-dark-content p,
.service-dark-content h1,
.service-dark-content h2,
.service-dark-content h3,
.service-dark-content h4,
.service-dark-content li,
.service-dark-content span,
.service-dark-content strong {
    color: #ffffff !important;
}

.service-dark-content ul {
    padding-left: 1.25rem;
    margin-bottom: 1.5rem;
}

.service-dark-content ul li {
    margin-bottom: 0.5rem;
}

/* Rounded corners & shadow for cover cards */
.wp-block-cover {
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

/* Cover cards hover effect (lift up & glow) */
.wp-block-cover:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(245, 158, 11, 0.25) !important;
}

/* Make the entire card clickable */
.wp-block-cover p a,
.wp-block-cover h2 a,
.wp-block-cover h3 a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.wp-block-cover p a::after,
.wp-block-cover h2 a::after,
.wp-block-cover h3 a::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important;
}

/* Modern price table style */
.service-dark-content figure.wp-block-table,
.wp-block-table {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    margin: 2rem auto !important;
    border: none !important;
    max-width: 900px !important;
}

.wp-block-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    color: #2d3748 !important;
    font-size: 0.95rem;
    margin: 0 !important;
}

.wp-block-table thead,
.wp-block-table thead tr,
.wp-block-table th {
    background-color: #2d7a4d !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 14px 20px !important;
    border: none !important;
}

.wp-block-table td {
    padding: 12px 20px !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #333333 !important;
}

.wp-block-table tbody tr:nth-child(even) {
    background-color: #f9fbf9 !important;
}

.wp-block-table tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
}

.wp-block-table tbody tr:hover {
    background-color: #f0f7f2 !important;
}

@media (max-width: 991.98px) {
    .wp-block-table table, 
    .table table {
        font-size: 11px !important;
    }

    .wp-block-table th, 
    .wp-block-table td, 
    .table th, 
    .table td {
        padding: 8px 4px !important;
        word-break: break-word !important;
        hyphens: auto;
    }
}

/* ==========================================================================
    9. WOOCOMMERCE SINGLE PRODUCT MODERN LAYOUT & GOODWINS STYLING
   ========================================================================== */

.single-product #primary,
.single-product #content,
.single-product .content-area {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
}

.single-product #secondary,
.single-product .widget-area,
.single-product aside,
.single-product .sidebar {
    display: none !important;
    width: 0 !important;
    flex: 0 0 0% !important;
    max-width: 0 !important;
}

.single-product .row > [class*="col-lg-8"],
.single-product .row > [class*="col-md-8"],
.single-product .site-main .row > div:first-child:not(:last-child) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

.single-product .entry-title {
    display: none !important;
}

.single-product div.product {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
}

.single-product div.product div.images {
    flex: 1 1 45% !important;
    max-width: 45% !important;
    float: none !important;
    width: 100% !important;
    position: relative !important;
}

.single-product div.product div.summary {
    flex: 1 1 48% !important;
    max-width: 48% !important;
    float: none !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.single-product div.product div.summary > * {
    order: 99 !important;
}

.single-product div.product div.summary .posted_in,
.single-product div.product div.summary .product_meta .posted_in {
    order: 0 !important;
    background-color: #1b4d30 !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    width: fit-content !important;
    margin-bottom: 15px !important;
    display: inline-block !important;
}

.single-product div.product div.summary .posted_in a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Product title ordered right below the category badge */
.single-product div.product div.summary h1.product_title {
    order: 2 !important;
    font-size: 2.2rem !important;
    color: #1b4d30 !important;
    margin-bottom: 15px !important;
    display: block !important;
}

.single-product div.product div.summary p.price {
    order: 3 !important;
    color: #2e8b57 !important;
    font-size: 1.6rem !important;
    font-weight: bold !important;
    margin-bottom: 20px !important;
}

.single-product div.product div.summary .woocommerce-product-details__short-description {
    order: 4 !important;
    color: #444444 !important;
    line-height: 1.6 !important;
}

.single-product div.product div.summary form.cart {
    order: 5 !important;
    display: flex !important;
}

.single-product div.product div.summary .product_meta {
    order: 6 !important;
    margin-top: 20px !important;
}

.single-product .woocommerce-product-gallery img,
.single-product .woocommerce-product-gallery__image img,
.single-product img {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
    display: flex !important;
    gap: 15px !important;
    margin-top: 25px !important;
    padding: 0 !important;
}

.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li {
    flex: 0 0 22% !important;
    margin: 0 !important;
}

.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img {
    border-radius: 8px !important;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img:hover {
    opacity: 1;
    transform: scale(1.03);
}

.single-product .woocommerce-product-gallery .flex-direction-nav {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-product .woocommerce-product-gallery .flex-direction-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(27, 77, 48, 0.85) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    text-indent: 0 !important;
    font-size: 18px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    transition: background 0.3s ease, transform 0.3s ease;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
}

.single-product .woocommerce-product-gallery .flex-direction-nav a:hover {
    background: #1b4d30 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.single-product .woocommerce-product-gallery .flex-direction-nav .flex-prev {
    left: 15px !important;
}

.single-product .woocommerce-product-gallery .flex-direction-nav .flex-next {
    right: 15px !important;
}

.single-product div.product form.cart .quantity input.input-text {
    height: 48px !important;
    border-radius: 8px !important;
    border: 1px solid #ccc !important;
    text-align: center !important;
}

.single-product div.product button.single_add_to_cart_button {
    background-color: #1b4d30 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 30px !important;
    height: 48px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

.single-product div.product button.single_add_to_cart_button:hover {
    background-color: #2e8b57 !important;
}

.single-product .woocommerce-tabs.wc-tabs-wrapper {
    flex: 1 1 100% !important;
    width: 100% !important;
    background-color: #1b4d30 !important;
    padding: 40px !important;
    border-radius: 12px !important;
    margin-top: 40px !important;
    color: #ffffff !important;
}

.single-product .woocommerce-tabs ul.tabs {
    border-bottom: none !important;
    padding-left: 0 !important;
    margin-bottom: 30px !important;
}

.single-product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin-right: 20px !important;
}

.single-product .woocommerce-tabs ul.tabs li a {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    padding: 8px 0 !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

.single-product .woocommerce-tabs ul.tabs li.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    color: #ffd700 !important;
    border: none !important;
    background: transparent !important;
}

.single-product .woocommerce-Tabs-panel > h2:first-child {
    display: none !important;
}

.single-product .woocommerce-Tabs-panel {
    color: #ffffff !important;
    padding-top: 10px !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}

/* ==========================================================================
    10. MOBILE RESPONSIVE OPTIMIZATIONS (SMALL SCREENS)
   ========================================================================== */
@media (max-width: 991.98px) {
    .single-product div.product {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .single-product div.product div.images,
    .single-product div.product div.summary {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .single-product .woocommerce-product-gallery {
        width: 100% !important;
    }

    .single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
        gap: 10px !important;
        margin-top: 20px !important;
    }

    .single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li {
        flex: 0 0 23% !important;
    }

    .single-product .woocommerce-tabs.wc-tabs-wrapper {
        padding: 20px !important;
        margin-top: 25px !important;
    }
}

/* ==========================================================================
    11. WOOCOMMERCE SHOP PAGE & PRODUCT CATALOG STYLING
   ========================================================================== */

.woocommerce-shop .site-main,
.woocommerce-archive .site-main {
    width: 100% !important;
    max-width: 100% !important;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
    list-style: none !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product-category,
.woocommerce ul.products li.product:not(.product-category),
.woocommerce-page ul.products li.product-category,
.woocommerce-page ul.products li.product:not(.product-category) {
    float: none !important;
    clear: none !important;
    flex: 0 0 31.333% !important;
    max-width: 31.333% !important;
    width: 31.333% !important;
    margin-left: 1% !important;
    margin-right: 1% !important;
    margin-bottom: 30px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.woocommerce ul.products li.product-category:hover,
.woocommerce ul.products li.product:not(.product-category):hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important;
}

.woocommerce ul.products li.product-category a,
.woocommerce ul.products li.product:not(.product-category) a.woocommerce-LoopProduct-link {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.woocommerce ul.products li.product-category img,
.woocommerce ul.products li.product:not(.product-category) img {
    border-radius: 10px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
}

.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title,
.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product:not(.product-category) h2.woocommerce-loop-product__title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1b4d30 !important;
    margin: 0 0 10px 0 !important;
}

.woocommerce ul.products li.product-category mark.count {
    display: none !important;
}

.woocommerce ul.products li.product:not(.product-category) span.price {
    color: #2e8b57 !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    display: block !important;
}

.woocommerce ul.products li.product:not(.product-category) .button {
    background-color: #1b4d30 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background 0.3s ease !important;
    margin-top: auto !important;
    display: inline-block !important;
    border: none !important;
}

.woocommerce ul.products li.product:not(.product-category) .button:hover {
    background-color: #2e8b57 !important;
}

/* ==========================================================================
    12. RESPONSIVE BREAKPOINTS (TABLET & MOBILE)
   ========================================================================== */

@media (max-width: 991.98px) {
    .woocommerce ul.products li.product-category,
    .woocommerce ul.products li.product:not(.product-category) {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        width: 48% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
    }
}

@media (max-width: 575.98px) {
    .woocommerce ul.products li.product-category,
    .woocommerce ul.products li.product:not(.product-category) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   13. GOODWINS CLASSIC CART STYLING (VERTICAL CENTERED DESKTOP)
   ========================================================================== */

.woocommerce-cart .woocommerce {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px !important;
    gap: 35px !important;
    align-items: center !important;
    max-width: 1250px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-cart .woocommerce-cart-form {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.woocommerce-cart .cart-collaterals {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 30px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.woocommerce-cart .cart-collaterals .cart_totals {
    width: 100% !important;
    margin: 0 !important;
}

.woocommerce-cart-form__contents {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
}

.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-sizing: border-box !important;
}

.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item:last-child {
    border-bottom: none !important;
}

.woocommerce-cart-form__contents td {
    padding: 20px 12px;
    border-bottom: none !important;
    vertical-align: middle;
    box-sizing: border-box;
}

.woocommerce-cart-form__contents thead {
    background-color: #1b4d30 !important;
    display: block !important;
    width: 100% !important;
}

.woocommerce-cart-form__contents thead tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.woocommerce-cart-form__contents thead th {
    background-color: transparent !important;
    color: #ffffff !important;
    padding: 16px 12px !important;
    font-size: 0.95rem;
    font-weight: 600;
    border: none !important;
    text-transform: none;
    display: block !important;
    box-sizing: border-box;
}

.woocommerce-cart-form__contents td.product-thumbnail,
.woocommerce-cart-form__contents thead th.product-thumbnail {
    order: 1 !important;
    flex: 0 0 15% !important;
    text-align: center;
}

.woocommerce-cart-form__contents td.product-name,
.woocommerce-cart-form__contents thead th.product-name {
    order: 2 !important;
    flex: 1 1 35% !important;
    min-width: 0 !important;
    word-break: break-word;
}

.woocommerce-cart-form__contents td.product-price,
.woocommerce-cart-form__contents thead th.product-price {
    order: 3 !important;
    flex: 0 0 15% !important;
    text-align: center;
}

.woocommerce-cart-form__contents td.product-quantity,
.woocommerce-cart-form__contents thead th.product-quantity {
    order: 4 !important;
    flex: 0 0 18% !important;
    text-align: center;
}

.woocommerce-cart-form__contents td.product-subtotal,
.woocommerce-cart-form__contents thead th.product-subtotal {
    order: 5 !important;
    flex: 0 0 12% !important;
    text-align: center;
}

.woocommerce-cart-form__contents td.product-remove,
.woocommerce-cart-form__contents thead th.product-remove {
    order: 6 !important;
    flex: 0 0 5% !important;
    text-align: center;
}

.woocommerce-cart-form__contents thead th.product-remove {
    font-size: 0 !important;
}

.woocommerce-cart-form__contents td.product-thumbnail img {
    width: 65px !important;
    height: 65px !important;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    display: block;
    margin: 0 auto;
}

.woocommerce-cart-form__contents td.product-name a {
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
}

.woocommerce-cart .woocommerce-cart-form .input-text.qty {
    width: 70px !important;
    height: 38px !important;
    text-align: center !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    -webkit-appearance: number-input !important;
    appearance: number-input !important;
}

.woocommerce-cart-form__contents td.product-price,
.woocommerce-cart-form__contents td.product-subtotal {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

.woocommerce-cart-form__contents td.product-remove a.remove {
    font-size: 1.1rem;
    color: #9ca3af;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: all 0.2s;
}

.woocommerce-cart-form__contents td.product-remove a.remove:hover {
    color: #ef4444;
    background-color: #fee2e2;
}

.woocommerce-cart .actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    padding: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}

.woocommerce-cart .actions .coupon {
    display: flex !important;
    gap: 10px !important;
    flex: 1 !important;
    min-width: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.woocommerce-cart .actions .input-text#coupon_code {
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    flex: 1 !important;
    margin: 0 !important;
    font-size: 0.95rem;
}

.woocommerce-cart .actions button[name="apply_coupon"],
.woocommerce-cart .actions button[name="update_cart"] {
    background-color: #374151 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 20px !important;
    height: 44px !important;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.90rem;
    white-space: nowrap;
    transition: background 0.2s;
    margin: 0 !important;
}

.woocommerce-cart .actions button[name="update_cart"] {
    background-color: #1b4d30 !important;
}

.woocommerce-cart .actions button[name="update_cart"]:hover,
.woocommerce-cart .actions button[name="apply_coupon"]:hover {
    background-color: #2e8b57 !important;
}

.woocommerce-cart .woocommerce-error {
    flex-basis: 100% !important;
    order: 10 !important;
    margin: 5px 0 0 0 !important;
    padding: 10px 14px !important;
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    box-sizing: border-box !important;
}

.cart_totals h2 {
    font-size: 1.25rem;
    color: #1b4d30;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #2e8b57;
    font-weight: 700;
}

.cart_totals table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 1rem;
}

.cart_totals table.shop_table th {
    color: #4b5563;
    font-weight: 500;
    text-align: left;
}

.cart_totals table.shop_table td {
    text-align: right;
    font-weight: 600;
    color: #111827;
}

.woocommerce-cart .cart-collaterals .checkout-button {
    background-color: #1b4d30 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    text-align: center;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    transition: background-color 0.2s ease;
    box-shadow: 0 4px 6px rgba(27, 77, 48, 0.2);
}

.woocommerce-cart .cart-collaterals .checkout-button:hover {
    background-color: #2e8b57 !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS FIX (Full Width Elements & Stacked Layout)
   ========================================================================== */
@media (max-width: 768px) {
    .woocommerce-cart .woocommerce {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    .woocommerce-cart .woocommerce-cart-form,
    .woocommerce-cart .cart-collaterals {
        width: 100% !important;
        max-width: 100% !important;
    }

    .woocommerce-cart-form__contents thead {
        display: none !important;
    }

    .woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 20px 15px 15px 15px !important;
        position: relative !important;
        gap: 10px !important;
    }

    .woocommerce-cart-form__contents td {
        padding: 4px 0 !important;
        border: none !important;
        text-align: left !important;
    }

    .woocommerce-cart-form__contents td.product-thumbnail {
        order: 1 !important;
        text-align: left !important;
        margin-bottom: 5px !important;
    }
    .woocommerce-cart-form__contents td.product-thumbnail img {
        margin: 0 !important;
    }

    .woocommerce-cart-form__contents td.product-name {
        order: 2 !important;
        width: 100% !important;
        padding-right: 30px !important;
    }

    .woocommerce-cart-form__contents td.product-price {
        order: 3 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .woocommerce-cart-form__contents td.product-price::before {
        content: "Price:";
        font-weight: 500;
        color: #6b7280;
    }

    .woocommerce-cart-form__contents td.product-quantity {
        order: 4 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .woocommerce-cart-form__contents td.product-quantity::before {
        content: "Quantity:";
        font-weight: 500;
        color: #6b7280;
    }

    .woocommerce-cart-form__contents td.product-subtotal {
        order: 5 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-top: 1px dashed #e5e7eb !important;
        margin-top: 5px !important;
        padding-top: 10px !important;
    }
    .woocommerce-cart-form__contents td.product-subtotal::before {
        content: "Subtotal:";
        font-weight: 500;
        color: #6b7280;
    }

    .woocommerce-cart-form__contents td.product-remove {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        order: 6 !important;
        width: auto !important;
    }

    .woocommerce-cart .actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .woocommerce-cart .actions .coupon {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 12px !important;
        margin: 0 !important;
    }

    .woocommerce-cart .actions .input-text#coupon_code {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .woocommerce-cart .actions button[name="apply_coupon"],
    .woocommerce-cart .actions button[name="update_cart"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   14. GOODWINS CLEAN EMPTY CART (FULLY CENTERED)
   ========================================================================== */

/* When the cart is empty, override the 2-column sidebar grid layout and center the container */
.woocommerce-cart .woocommerce:has(.woocommerce-cart-empty),
.woocommerce-cart .woocommerce:has(.cart-empty),
.woocommerce-cart .woocommerce:has(.woocommerce-info) {
    display: block !important;
    max-width: 700px !important;
    margin: 40px auto !important;
    float: none !important;
}

/* Style and perfectly center the empty cart card container */
.woocommerce-cart .woocommerce-cart-empty,
.woocommerce-cart p.cart-empty,
.woocommerce-cart .woocommerce-info {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 24px !important;
    padding: 60px 40px !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    float: none !important;
    clear: both !important;
}

.woocommerce-cart .woocommerce-cart-empty::before,
.woocommerce-cart .woocommerce-info::before {
    display: none !important;
}

/* Center and format the empty cart message text */
.woocommerce-cart .woocommerce-cart-empty,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-cart-empty p,
.woocommerce-cart .woocommerce-info p {
    order: 0 !important;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
    font-weight: 800 !important;
    color: #1b4d30 !important;
    text-align: center !important;
    margin: 0 auto 25px auto !important;
    line-height: 1.3 !important;
    position: static !important;
    width: 100% !important;
}

/* Center the shopping cart icon SVG */
.woocommerce-cart .woocommerce-cart-empty::after,
.woocommerce-cart .woocommerce-info::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 100px !important;
    margin: 0 auto 30px auto !important;
    order: 1 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b4d30' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.5'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1.5'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Center the return to shop button wrapper container */
.woocommerce-cart .woocommerce-cart-empty .return-to-shop,
.woocommerce-cart .woocommerce-info p.return-to-shop {
    order: 2 !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
}

/* Style and center the 'Return to shop' button */
.woocommerce-cart .woocommerce-cart-empty .return-to-shop .button,
.woocommerce-cart .woocommerce-info .button {
    background-color: #1b4d30 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 16px 40px !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 15px rgba(27, 77, 48, 0.25);
    transition: all 0.2s ease !important;
    display: inline-block !important;
    margin: 0 auto !important;
}

.woocommerce-cart .woocommerce-cart-empty .return-to-shop .button:hover,
.woocommerce-info .button:hover {
    background-color: #2e8b57 !important;
    transform: translateY(-2px);
}

/* Remove "View basket" quick link below product cards */
.products .product .added_to_cart {
    display: none !important;
}

/* Fix table padding and spacing */
.table th, 
.table td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
}

.table th:first-child, 
.table td:first-child {
    padding-left: 20px !important; 
}

.table th:last-child, 
.table td:last-child {
    padding-right: 20px !important;
    text-align: right !important;
}

/* ==========================================================================
   15. VARIABLE PRODUCT LAYOUT & QUANTITY SPINNERS
   ========================================================================== */

/* Fix mobile scroll and layout bugs on variable product pages */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
    }

    body.single-product {
        height: auto !important;
        overflow-y: auto !important;
    }

    .woocommerce-product-details__short-description,
    .variations_form,
    .single-product div.product {
        overflow: visible !important;
    }
}

/* Transform the variations form into a clean, compact vertical block layout globally */
.single-product .variations_form {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

.single-product .variations_form .variations {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 2px !important;
}

.single-product .variations_form .variations tbody,
.single-product .variations_form .variations tr,
.single-product .variations_form .variations th,
.single-product .variations_form .variations td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    text-align: left !important;
    float: none !important;
}

.single-product .variations_form .variations tr {
    margin-bottom: 0 !important;
}

/* Increase the size of the printing size label and style it with Goodwins branding */
.single-product .variations_form .variations th label {
    display: block !important;
    margin-bottom: 2px !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    color: #1b4d30 !important;
}

/* Style "Choose an option" select box with Goodwins styling and minimal spacing */
.single-product .variations_form .variations td select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 44px !important;
    padding: 0 15px !important;
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    font-size: 1rem !important;
    color: #111827 !important;
    margin-bottom: 0 !important;
}

/* Force the cart button container and form row to stack vertically under choose an option */
.single-product div.product form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding-top: 0 !important;
}

/* Make quantity input and Add to Basket button stack vertically on desktop */
.single-product div.product form.cart .quantity {
    width: auto !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin: 0 !important;
}

.single-product div.product form.cart .quantity input.input-text,
.single-product div.product form.cart .quantity input.qty {
    width: 70px !important;
    height: 44px !important;
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
    text-align: center !important;
    margin: 0 !important;
}

.single-product div.product button.single_add_to_cart_button {
    width: auto !important;
    min-width: 160px !important;
    height: 44px !important;
    border-radius: 8px !important;
    background-color: #1b4d30 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 20px !important;
}

/* On mobile screens, stretch quantity and add to cart to full width and ensure uniform vertical spacing between all blocks */
@media (max-width: 768px) {
    .single-product div.product form.cart {
        align-items: stretch !important;
    }

    .single-product div.product form.cart .quantity,
    .single-product div.product form.cart .quantity input.input-text,
    .single-product div.product form.cart .quantity input.qty,
    .single-product div.product button.single_add_to_cart_button {
        width: 100% !important;
    }

    /* Enforce consistent spacing between product page elements on mobile */
    .woocommerce div.product.elementor-product-builder,
    .woocommerce div.product form.cart,
    .woocommerce div.product .woocommerce-product-details__short-description,
    .woocommerce div.product p.price,
    .woocommerce div.product .variations_form,
    .woocommerce div.product .wcu-upload-field-container,
    .woocommerce div.product .quantity,
    .woocommerce div.product .single_add_to_cart_button {
        margin-bottom: 20px !important;
    }

    .woocommerce #content div.product div.summary, 
    .woocommerce div.product div.summary, 
    .woocommerce-page div.product div.summary {
        padding: 0 15px !important;
    }
}

/* Force native browser spinner buttons (arrows) to appear on quantity input fields */
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce-cart .cart-collaterals .cart_totals .quantity input.qty,
.woocommerce .quantity input.qty {
    -webkit-appearance: number-input !important;
    -moz-appearance: number-input !important;
    appearance: number-input !important;
    opacity: 1 !important;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button !important;
    opacity: 1 !important;
}

/* Desktop override for dropdown width */
@media (min-width: 992px) {
    .single-product .variations_form .variations td select {
        width: 300px !important;
        max-width: 100% !important;
    }
}