/*
Theme Name: MK Mobile Theme
Description: A Storefront child theme for mobile-first experience with optimized sticky cart and bundle layouts.
Author: MotherKnitter
Version: 3.7.19
Template: storefront
*/

/* Add your custom CSS here */

/* ==========================================================================
   TYPOGRAPHY - JOST FOR BODY TEXT, SOURCE SANS PRO FOR HEADINGS
   Apply Jost to body text, let headings keep Storefront's Source Sans Pro
   ========================================================================== */

/* Centralize font stacks for reuse */
:root {
    --mk-font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --mk-font-heading: "Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

/* Apply Jost to body text while keeping selectors from parent overrides */
body,
button,
input,
select,
textarea,
p,
li,
td,
th,
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p,
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel p,
.product_meta,
.entry-content p,
.site-description,
.woocommerce-breadcrumb,
.woocommerce-info,
.woocommerce-message,
.price,
.amount,
.cart-contents,
.widget_shopping_cart,
.product-description,
label,
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea,
select {
    font-family: var(--mk-font-body) !important;
}

/* Ensure headings continue to use Storefront's Source Sans Pro */
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.product_title,
.bundled_product_title,
.related.products h2,
.upsells.products h2,
.woocommerce-loop-product__title {
    font-family: var(--mk-font-heading) !important;
}

/* Fix variations table */
.single-product div.product .variations {
    width: 100%;
    margin-bottom: 1em;
}
/* Fix variations select */
.single-product div.product .variations select {
    width: 100%;
}
/* Fix variations reset */
.single-product div.product .variations .reset_variations {
    display: none !important;
}
/* Fix variations price */
.single-product div.product .woocommerce-variation-price {
    margin-bottom: 1em;
}
/* Fix variations description */
.single-product div.product .woocommerce-variation-description {
    margin-bottom: 1em;
}
/* Fix variations availability */
.single-product div.product .woocommerce-variation-availability {
    margin-bottom: 1em;
}
/* Fix variations add to cart */
.single-product div.product .woocommerce-variation-add-to-cart {
    margin-bottom: 1em;
}
/* Fix quantity input */
.single-product div.product .quantity {
    float: left;
    margin-right: 2%;
    width: 30%;
}
/* Fix quantity input field */
.single-product div.product .quantity input {
    width: 100%;
    padding: 0.5em;
    height: 2.5em;
}
/* Align quantity and add-to-cart horizontally using Storefront floats */
.single-product div.product .single_variation_wrap::after,
.single-product div.product .woocommerce-variation-add-to-cart::after {
    content: "";
    display: table;
    clear: both;
}
.single-product div.product form.cart .single_variation_wrap .quantity,
.single-product div.product form.cart .woocommerce-variation-add-to-cart .quantity {
    float: left !important;
    width: 90px;
    margin-right: 10px;
    margin-bottom: 0;
}

/* Consolidated quantity input styling (was duplicated 3 times) */
.single-product div.product .single_variation_wrap .quantity input,
.single-product div.product .woocommerce-variation-add-to-cart .quantity input {
    float: left !important;
    height: 44px;
    box-sizing: border-box;
    width: 100%;
}
.single-product div.product .single_variation_wrap .single_add_to_cart_button,
.single-product div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    float: right;
    display: block;
    width: calc(100% - 100px);
    height: 44px;
    margin: 0;
}

/* ==========================================================================
   CSS VARIABLES & REUSABLE SELECTORS
   ========================================================================== */

/* Define reusable selectors to reduce duplication */
:root {
    --product-card-border: 1px solid #e0e0e0;
    --product-card-radius: 3px;
    --product-card-bg: #fff;
    --product-card-height: 321px; /* Min: 229px image + 92px white space (uniform across homepage and category pages, allows expansion) */
    --product-title-padding: 10px 10px 5px 10px;
    --product-title-font-size: 14px;
    --product-title-line-height: 1.4;
    --product-price-margin: 0 10px 10px 10px;
    --product-price-font-size: 16px;
    --product-price-font-weight: 500;
}

/* ==========================================================================
   GENERAL TABLE STYLING - VERTICAL BORDERS FOR BETTER READABILITY
   ========================================================================== */

/* Add vertical borders to all tables for better column separation */
table {
    border-collapse: collapse;
    width: 100%;
}

table th,
table td {
    border-right: 1px solid #e0e0e0; /* Vertical line separator */
    padding: 0.75em 1em;
    text-align: left;
    vertical-align: top;
}

/* Remove right border from last column for clean edge */
table th:last-child,
table td:last-child {
    border-right: none;
}

/* Ensure WooCommerce variation tables also get vertical borders */
.woocommerce table.variations th,
.woocommerce table.variations td {
    border-right: 1px solid #e0e0e0;
}

.woocommerce table.variations th:last-child,
.woocommerce table.variations td:last-child {
    border-right: none;
}

/* Desktop only: Make first column of extracted tables wider */
@media (min-width: 768px) {
    .mk-extracted-tables-section table tr th:first-child,
    .mk-extracted-tables-section table tr td:first-child {
        width: 25% !important; /* Wider first column to accommodate long text labels */
        min-width: 200px !important; /* Ensure minimum width for readability */
        font-size: inherit !important; /* Ensure no font-size changes */
    }
}

/* Universal: Horizontal scroll indicators for extracted tables (mobile + desktop) */
/* Container doesn't scroll */
.mk-extracted-tables-section {
    overflow-x: visible;
}

/* Section wrapper - contains headings, text, and table */
.mk-table-section {
    position: relative;
    overflow-x: visible;
    margin-bottom: 1em;
}

/* Scroll container - wraps only the scrolling table (not headings/text) */
.mk-table-scroll-container {
    position: relative;
    overflow-x: visible;
}

/* Right-edge gradient fade indicator (fixed layer above scrolling table only) */
.mk-table-scroll-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 75px;
    background: linear-gradient(to right, transparent, rgba(224, 224, 224, 0.95));
    backdrop-filter: blur(1.05px);
    -webkit-backdrop-filter: blur(1.05px);
    pointer-events: auto;
    cursor: pointer;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Hide gradient when table scrolled to the end */
.mk-table-scroll-container:has(.mk-table-scroll-wrapper.scrolled-end)::after {
    opacity: 0;
}

/* Table scroll wrapper - scrolls horizontally */
.mk-table-scroll-wrapper {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Enable horizontal scrolling for tables */
.mk-table-scroll-wrapper table {
    min-width: 100%;
    width: auto;
    table-layout: auto;
    border-collapse: collapse;
}

/* Set first column width for labels - mobile only */
@media (max-width: 767px) {
    .mk-table-scroll-wrapper table th:first-child,
    .mk-table-scroll-wrapper table td:first-child {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }
}

/* Auto-fit other columns to content (dynamic width based on content) */
.mk-table-scroll-wrapper table th:not(:first-child),
.mk-table-scroll-wrapper table td:not(:first-child) {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap;
    padding: 0.75em 1em;
}

/* Custom scrollbar styling for WebKit browsers */
.mk-table-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
}

.mk-table-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.mk-table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.mk-table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}



/* ==========================================================================
   MOBILE PRODUCT LAYOUT - v1.0.141
   Swatches positioned to the left of product image on mobile.
   Gallery and variations form side-by-side, with summary below.
   ========================================================================== */



/* ==========================================================================
   SINGLE PRODUCT LAYOUT - WORK WITH STOREFRONT'S FLOAT SYSTEM
   ========================================================================== */

/* Basic styling for single product elements in summary */
.single-product div.product .summary .product_title {
    font-size: 1.5em;
    margin: 0 0 1em 0;
    padding: 0;
    line-height: 1.2;
    color: #333;
}

.single-product div.product .summary .price {
    font-size: 1.3em;
    font-weight: 500;
    margin: 0.5em 0;
    color: #333;
}

/* Excerpt and meta sections - let Storefront handle layout naturally */
.single-product .woocommerce-product-details__short-description {
    /* Remove width/clear overrides - let Storefront's sidebar system handle layout */
    margin: 2em 0 1em 0;
    padding: 1.5em 0;
    line-height: 1.6;
    border-top: 1px solid #eee;
}

.single-product .product_meta {
    /* Remove width/clear overrides - let Storefront's sidebar system handle layout */
    margin: 1em 0 2em 0;
    padding: 1em 0;
    border-top: 1px solid #eee;
}

/* Ensure proper clearing after gallery and summary */
.single-product div.product::after {
    content: "";
    display: table;
    clear: both;
}

/* Unify product gallery corner radius across devices to match grid cards */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a,
.single-product .flex-viewport {
    border-radius: 3px !important;
    overflow: hidden;
}
.single-product .woocommerce-product-gallery__image img,
.single-product .flex-viewport img {
    border-radius: 3px !important;
}

/* ==========================================================================
   PRODUCT PAGE LAYOUT - USE STOREFRONT'S RIGHT-SIDEBAR SYSTEM
   ========================================================================== */

/* Product pages use Storefront's built-in right-sidebar layout system
Content area: 73.9% width, Sidebar: 21.7% width (Storefront defaults)
Storefront handles the float-based layout automatically - no width overrides needed! */

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

/* Global spacing reduction for product images - applies to all devices */
.woocommerce ul.products li.product img {
    margin-bottom: 0.7em; /* 50% of Storefront's default ~1.4em */
}

/* Card-like border for entire product containers on category pages */
.woocommerce ul.products li.product {
    border: var(--product-card-border);
    border-radius: var(--product-card-radius);
    background: var(--product-card-bg);
    overflow: hidden;
}

/* Apply uniform minimum height to actual product cards (not category cards) across all pages */
.woocommerce ul.products li.product:not(.product-category) {
    min-height: var(--product-card-height);
}

/* Remove border from individual images since container now has border */
.woocommerce ul.products li.product img {
    border: none;
    border-radius: var(--product-card-radius);
    margin: 0;
    display: block;
}

/* Add padding between image and text content, limit title to 2 lines */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    padding: var(--product-title-padding);
    margin: 0;
    font-size: var(--product-title-font-size);
    line-height: var(--product-title-line-height);
    min-height: 60px; /* Ensure consistent white space by fixing title area height (accommodates 3-line titles) */
    /* Limit title to 3 lines with ellipsis to prevent excessive height */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Style product prices consistently */
.woocommerce ul.products li.product .price {
    margin: var(--product-price-margin);
    padding: 0;
    font-size: var(--product-price-font-size);
    font-weight: var(--product-price-font-weight);
}

/* Hide all action buttons (Read More, Add to Cart, etc.) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
    display: none;
}

/* Aspect Ratio for Related Products, Upsells, and Cross-sells */
.related.products ul.products li.product a img,
.upsells.products ul.products li.product a img,
.cross-sells ul.products li.product a img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% -10px; /* Shift image up 10px to show more of the bottom portion */
    width: 100%;
    height: auto;
}

/* Single product related/upsells container */
.single-product .related,
.single-product .upsells,
.single-product .cross-sells {
    width: 100%;
    clear: both;
    margin-top: 2rem;
}

/* ==========================================================================
   SINGLE PRODUCT PAGE - REMOVE EXCESSIVE WHITESPACE (All Devices)
   ========================================================================== */
/* Override global min-height for related/upsell products to eliminate whitespace */
.single-product .related ul.products li.product,
.single-product .upsells ul.products li.product {
    min-height: auto !important; /* Override the 350px global rule - ONLY for single product related/upsells */
}

/* CRITICAL: Override ALL product listing min-height on single product pages */
body.single-product .woocommerce ul.products li.product {
    min-height: auto !important; /* Remove forced height on single product pages */
}

/* CRITICAL: Override built-in WooCommerce upsells and related sections */
body.single-product .upsells.products ul.products li.product,
body.single-product .related.products ul.products li.product {
    min-height: auto !important; /* Remove forced height from built-in sections */
}

/* ==========================================================================
   REMOVE SORTING ELEMENTS (All Devices)
   ========================================================================== */
/* Hide sorting dropdown and results count on category/shop pages */
.woocommerce-ordering,
.woocommerce-result-count {
    display: none !important;
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Reduced header padding */
    .site-header {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* VERTICAL SPACING REDUCTIONS */
    .single-product div.product .summary .product_title {
        margin-bottom: 0.5rem;
    }
    .single-product div.product .summary .price {
        margin-bottom: 0.75rem;
    }
    .single-product div.product .variations {
        margin-bottom: 0.5rem;
    }

    /* DROPDOWN SELECTOR FULL WIDTH AND STYLING */
    .single-product div.product .variations select,
    .single-product div.product .variations .mobile-variation-select,
    .single-product div.product .variations #variant {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px 16px;
        font-size: 16px; /* Prevents iOS zoom */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333' width='18px' height='18px'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        height: 44px;
    }

    /* STOCK INDICATOR STYLING */
    .single-product div.product .woocommerce-variation-availability {
        font-size: 0.9em;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0;
        background: none;
        border: none;
        text-align: left;
        display: block;
    }
    .single-product div.product .woocommerce-variation-availability .stock {
        color: #28a745;
        font-weight: 500;
    }
    .single-product div.product .woocommerce-variation-availability .out-of-stock {
        color: #8b2635;
        background-color: #fde8e8;
        padding: 4px 8px;
        border-radius: 4px;
        display: inline-block;
        font-weight: 500;
    }
    
    /* HORIZONTAL QUANTITY & ADD-TO-CART */
    .single-product div.product .single_variation_wrap .woocommerce-variation-add-to-cart {
        display: block;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .single-product div.product .single_variation_wrap .quantity {
        display: inline-block;
        width: 90px;
        margin-right: 10px;
        vertical-align: middle;
        float: none;
    }
    .single-product div.product .single_variation_wrap .quantity input {
        width: 100%;
        box-sizing: border-box;
        height: 44px;
    }
    .single-product div.product .single_variation_wrap .single_add_to_cart_button {
        display: inline-block;
        width: calc(100% - 100px);
        margin: 0;
        height: 44px;
        vertical-align: middle;
        float: none;
    }
        
    /* RELATED/UPSELLS/CROSS-SELLS: 2-COLUMN LAYOUT & HALF-HEIGHT IMAGES */
    .single-product .related ul.products li.product,
    .single-product .upsells ul.products li.product,
    .single-product .cross-sells ul.products li.product {
        width: 48%;
        margin-right: 4%;
        margin-bottom: 1.5rem;
        float: left;
        position: relative;
        /* REMOVED: overflow: visible; - This was causing float containment failure */
        min-height: auto; /* Natural height - no forced minimum */
    }
    .single-product .related ul.products li.product:nth-child(2n),
    .single-product .upsells ul.products li.product:nth-child(2n),
    .single-product .cross-sells ul.products li.product:nth-child(2n) {
        margin-right: 0;
    }
    .single-product .related ul.products li.product:nth-child(odd),
    .single-product .upsells ul.products li.product:nth-child(odd),
    .single-product .cross-sells ul.products li.product:nth-child(odd) {
        clear: left;
    }
    
    /* Reduce spacing between thumbnail and title */
    .related.products ul.products li.product img,
    .upsells.products ul.products li.product img,
    .cross-sells ul.products li.product img {
        margin-bottom: 0.5rem !important;
    }
    
    .related.products ul.products li.product .woocommerce-loop-product__title,
    .upsells.products ul.products li.product .woocommerce-loop-product__title,
    .cross-sells ul.products li.product .woocommerce-loop-product__title {
        margin-top: 0.25rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Text and buttons - Show titles below images */
    .woocommerce .single-product .related ul.products li.product h2,
    .woocommerce .single-product .upsells ul.products li.product h2,
    .woocommerce .single-product .cross-sells ul.products li.product h2,
    .woocommerce .single-product .related ul.products li.product .woocommerce-loop-product__title,
    .woocommerce .single-product .upsells ul.products li.product .woocommerce-loop-product__title,
    .woocommerce .single-product .cross-sells ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        display: block !important;
        /* REMOVED: overflow: visible !important; - This was causing float containment failure */
        text-overflow: clip !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: #333 !important;
        position: relative !important;
        bottom: auto !important; 
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        background: transparent !important;
        padding: 0.25rem !important;
    }
    .single-product .related ul.products li.product .price,
    .single-product .upsells ul.products li.product .price,
    .single-product .cross-sells ul.products li.product .price {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }
    .single-product .related ul.products li.product .button,
    .single-product .upsells ul.products li.product .button,
    .single-product .cross-sells ul.products li.product .button {
        display: none !important;
    }
    
    /* Ensure product content is properly structured */
    .single-product .related ul.products li.product .woocommerce-loop-product__link,
    .single-product .upsells ul.products li.product .woocommerce-loop-product__link,
    .single-product .cross-sells ul.products li.product .woocommerce-loop-product__link {
        text-decoration: none !important;
        color: inherit !important;
    }
    
    /* Force title visibility with higher specificity */
    .single-product .related ul.products li.product h2.woocommerce-loop-product__title,
    .single-product .upsells ul.products li.product h2.woocommerce-loop-product__title,
    .single-product .cross-sells ul.products li.product h2.woocommerce-loop-product__title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        clip: auto !important;
        height: auto !important;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        color: #333 !important;
        background: none !important;
    }

    /* MAIN PRODUCT GALLERY: CROP 10% TOP/BOTTOM */
    .single-product .woocommerce-product-gallery,
    .single-product .woocommerce-product-gallery__image,
    .single-product .woocommerce-product-gallery__thumbs {
        overflow: hidden;
        position: relative;
    }
    .single-product .woocommerce-product-gallery__image img,
    .single-product .woocommerce-product-gallery__thumbs img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        /* Removed transform: scale(1.25) to fix image stretching */
    }

    /* CATEGORY ARCHIVE MOBILE OPTIMIZATIONS - USE FLOAT-BASED LAYOUT */
    /* Force 2-column layout for category archives using floats */
    .woocommerce ul.products {
        overflow: hidden; /* Clear floats */
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Reset individual product styling for float-based layout */
    .woocommerce ul.products li.product {
        width: 48%;
        margin-right: 4%;
        margin-bottom: 1rem;
        float: left;
        clear: none;
        display: block;
    }

    /* Clear every odd product to start new row */
    .woocommerce ul.products li.product:nth-child(odd) {
        clear: left;
    }

    /* Remove right margin from even products */
    .woocommerce ul.products li.product:nth-child(even) {
        margin-right: 0;
    }

    /* Center product titles and prices */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .woocommerce ul.products li.product .price {
        text-align: center;
        margin: 0.25rem 0 0.5rem 0;
        font-size: 0.85rem;
    }

    /* YARN CATEGORY OVERRIDE - square aspect ratio for thumbnails (Mobile) */
    /* Apply only on category/archive pages under Yarn (uses body class mk-yarn-category) */
    body.mk-yarn-category ul.products li.product img:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img) {
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        width: 100% !important;
        height: auto !important;
    }

    /* PATTERN CATEGORY OVERRIDE - 3:4 aspect ratio for patterns (Mobile) */
    /* Only apply to category/archive pages, not single product galleries or bundle images */
    body.mk-patterns-category ul.products li.product img:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img) {
        aspect-ratio: 3 / 4 !important;
        object-fit: cover !important;
        width: 100% !important;
        height: auto !important;
    }

    /* We Recommend section - apply pattern styling */
    .woocommerce ul.products.mk-patterns-recommend li.product img:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img) {
        aspect-ratio: 3 / 4 !important;
        object-fit: cover !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* YARN BRAND CATEGORY: square crop (Mobile) */
    body.mk-yarn-brand-category ul.products li.product img:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img) {
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        width: 100% !important;
        height: auto !important;
    }

    /* HIDE SELECT OPTIONS BUTTONS ON MOBILE */
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product a.button,
    .woocommerce ul.products li.product .add_to_cart_button {
        display: none !important;
    }

    /* Product card styling handled by global rule (line 281) - no need for mobile override */
    
    /* Adjust image to be flush with the top, left, and right borders of the card */
    .woocommerce ul.products li.product img {
        margin-top: -1px !important;
        margin-left: -1px !important;
        margin-right: -1px !important;
        width: calc(100% + 2px) !important;
        border-top-left-radius: var(--product-card-radius) !important;
        border-top-right-radius: var(--product-card-radius) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* Make the product summary content take up available space */
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2 {
        padding: 0.8em 1em !important;
        margin: 0 !important;
        min-height: 60px !important; /* Ensure consistent white space by fixing title area height (accommodates 3-line titles) */
    }

    /* OVERRIDE ORDER FIX: Ensure Yarn and Yarn Brand square wrapper wins over generic image flush rule */
    body.mk-yarn-category ul.products li.product a.woocommerce-LoopProduct-link img,
    body.mk-yarn-category ul.products li.product a.woocommerce-loop-product__link img,
    body.mk-yarn-brand-category ul.products li.product a.woocommerce-LoopProduct-link img,
    body.mk-yarn-brand-category ul.products li.product a.woocommerce-loop-product__link img {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }
}



/* ==========================================================================
   MOBILE PRODUCT METADATA HIDING
   ========================================================================== */

/* Hide product metadata on mobile devices - consolidated ruleset */
@media (max-width: 767px) {
    /* Hide SKU, Category, Tags on all product pages */
    .product_meta,
    .woocommerce div.product .product_meta,
    .woocommerce-product-attributes-item {
        display: none !important;
    }
    
    /* Hide "Select options" buttons on category pages */
    .woocommerce-loop-product__link + .button,
    .woocommerce ul.products li.product .button {
        display: none !important;
    }
}

/* ==========================================================================
   DESKTOP LAYOUT
   ========================================================================== */

@media (min-width: 768px) {
    /* Default square aspect ratio for product images on desktop (archives) */
    /* Exclusions remain: not single product galleries or bundle images */
    .woocommerce ul.products li.product img:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img) {
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Patterns category: force 3:4 aspect ratio, override all */
    /* Only apply to category/archive pages, not single product galleries or bundle images */
    body.mk-patterns-category ul.products li.product img:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img),
    body.mk-patterns-category li.product img.attachment-woocommerce_thumbnail:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img) {
        aspect-ratio: 3 / 4 !important;
        object-fit: cover !important;
        width: 100% !important;
        height: auto !important;
    }

    /* We Recommend section - apply pattern styling (Desktop) */
    .woocommerce ul.products.mk-patterns-recommend li.product img:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img),
    .woocommerce ul.products.mk-patterns-recommend li.product img.attachment-woocommerce_thumbnail:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img) {
        aspect-ratio: 3 / 4 !important;
        object-fit: cover !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Yarn brand category: force square (Desktop) */
    body.mk-yarn-brand-category ul.products li.product img:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img),
    body.mk-yarn-brand-category li.product img.attachment-woocommerce_thumbnail:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img) {
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Yarn category: force square (Desktop) */
    body.mk-yarn-category ul.products li.product img:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img),
    body.mk-yarn-category li.product img.attachment-woocommerce_thumbnail:not(.single-product .woocommerce-product-gallery__image img):not(.single-product .woocommerce-product-gallery__thumbs img):not(.bundled_product_images img):not(.single-product img) {
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Product card styling handled by global rule (line 281) - no need for desktop override */
    
    /* Make product images flush with card borders */
    .woocommerce ul.products li.product img {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        display: block !important;
    }
    
    /* Ensure product titles and content fill available space */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        margin: var(--product-title-padding) !important;
        padding: 0 !important;
        font-size: var(--product-title-font-size) !important;
        line-height: var(--product-title-line-height) !important;
        min-height: 60px !important; /* Ensure consistent white space by fixing title area height (accommodates 3-line titles) */
    }
    
    /* Style product prices consistently */
    .woocommerce ul.products li.product .price {
        margin: var(--product-price-margin) !important;
        padding: 0 !important;
        font-size: var(--product-price-font-size) !important;
        font-weight: var(--product-price-font-weight) !important;
    }
}

/* Sorting elements already hidden by global rule at line 362 - duplicate removed */

/* ==========================================================================
   MODERN ACCESSIBILITY SUPPORT - FORCED COLORS MODE (v3.6.0: Consolidated)
   ========================================================================== */

/* Modern forced-colors media query with CSS custom properties for DRY code */
@media (forced-colors: active) {
    /* Define reusable forced-colors variables */
    :root {
        --forced-border: 1px solid CanvasText;
        --forced-bg: Canvas;
        --forced-text: CanvasText;
        --forced-highlight-bg: Highlight;
        --forced-highlight-text: HighlightText;
    }
    
    /* Product cards - consolidated border and background */
    .woocommerce ul.products li.product,
    .single-product .related ul.products li.product,
    .single-product .upsells ul.products li.product {
        border: var(--forced-border) !important;
        background-color: var(--forced-bg) !important;
    }
    
    /* Text elements - consolidated color */
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2,
    .woocommerce ul.products li.product .price,
    .single-product .related ul.products li.product h2,
    .single-product .upsells ul.products li.product h2,
    .single-product .related ul.products li.product .woocommerce-loop-product__title,
    .single-product .upsells ul.products li.product .woocommerce-loop-product__title,
    .single-product .related ul.products li.product .price,
    .single-product .upsells ul.products li.product .price {
        color: var(--forced-text) !important;
    }
    
    /* Form controls - consolidated styling */
    .single-product div.product .variations select,
    .single-product div.product .variations .mobile-variation-select,
    .single-product div.product .variations #variant {
        border: var(--forced-border) !important;
        background-color: var(--forced-bg) !important;
        color: var(--forced-text) !important;
    }
    
    /* Action buttons and stock indicators - highlight styling */
    .single-product div.product .single_variation_wrap .single_add_to_cart_button,
    .single-product div.product .woocommerce-variation-availability .stock,
    .single-product div.product .woocommerce-variation-availability .out-of-stock {
        background-color: var(--forced-highlight-bg) !important;
        color: var(--forced-highlight-text) !important;
        border: var(--forced-border) !important;
    }
    
    /* Product gallery images */
    .single-product .woocommerce-product-gallery__image img,
    .single-product .woocommerce-product-gallery__thumbs img {
        border: var(--forced-border) !important;
    }
}

/* ==========================================================================
   BLOG CARD LAYOUT
   ========================================================================== */

.blog-card-grid {
    margin: 0 -1%;
    overflow: hidden; /* Clear floats */
}

.blog-card {
    float: left;
    width: 31.33%; /* Adjusted for full-width layout */
    margin: 0 1% 1.5em;
    background: #fff;
    padding: 0; /* Remove padding to eliminate frame */
    box-sizing: border-box;
}

/* Clear every 3rd card to force new rows */
.blog-card:nth-child(3n+1) {
    clear: left;
}

.blog-card__image {
    width: 100%;
    height: 200px; /* Fixed height for 4:3 aspect ratio */
    position: relative;
    overflow: hidden;
    background: #f5f5f5; /* Light background for loading state */
    border: 1px solid #eaeaea; /* Move border to image area */
    margin-bottom: 0;
    padding-bottom: 0;
}

.blog-card__content {
    padding: 0.25em 0;
    border: 1px solid #eaeaea;
    border-top: none;
    margin-top: -1px; /* Pull content up to meet image border */
}

.blog-card__image img,
.blog-card .wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop and maintain aspect ratio */
    object-position: center; /* Center the crop */
    margin: 0; /* Override Storefront's margin */
    display: block; /* Ensure proper display */
}

.blog-card__placeholder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(45deg, #96588a, #f0f0f0);
    color: white;
    font-size: 0.9em;
    text-align: center;
    padding: 1em;
    /* Center content vertically without flexbox */
    display: table-cell;
    vertical-align: middle;
}

.blog-card__title {
    font-size: 1.2em;
    margin: 1em 1em 0.5em;
}

.blog-card__excerpt {
    margin: 0 1em 1em;
    color: #666;
}

.blog-card__read-more {
    display: block;
    margin: 0 1em 1em;
    font-weight: 500;
    color: #96588a; /* Storefront primary color */
}

@media (max-width: 767px) {
    .blog-card { 
        width: 100%; 
        margin: 0 0 1.5em; 
    }
}

/* ==========================================================================
   FULL-WIDTH LAYOUT (BLOG & PRODUCT PAGES)
   ========================================================================== */

/* Note: Using Storefront's built-in 'storefront-full-width-content' class
   which automatically provides:
   .storefront-full-width-content .content-area {
       width: 100%;
       float: left;
       margin-left: 0;
       margin-right: 0;
   }
   
   No additional CSS overrides needed - Storefront handles this natively.
*/

/* ==========================================================================
   BLOG CARD META & PAGINATION
   ========================================================================== */

.blog-card__meta {
    margin: 0 1em 0.5em;
    font-size: 0.8em;
    color: #666;
}

.blog-card__category {
    display: inline-block;
    margin-right: 0.5em;
    padding: 0.2em 0.5em;
    border-radius: 3px;
    background: #f5f5f5;
    color: #96588a;
    border: 1px solid #96588a;
}

.blog-card__tags {
    margin: 0 1em 0.3em;
    /* Clear floats after tags */
}

.blog-card__tags::after {
    content: "";
    display: table;
    clear: both;
}

.blog-card__tags .blog-card__tag {
    float: left;
    margin-right: 0.2em;
    margin-bottom: 0.2em;
    padding: 0.15em 0.4em;
    font-size: 0.75em;
    line-height: 1.2;
}

.blog-pagination {
    clear: both;
    margin: 2em 0;
    text-align: center;
}

.blog-pagination .page-numbers {
    display: inline-block;
    padding: 0.5em 1em;
    margin: 0 0.2em;
    border: 1px solid #eaeaea;
    background: #fff;
    color: #96588a;
    text-decoration: none;
}

.blog-pagination .page-numbers.current,
.blog-pagination a.page-numbers:hover {
    background: #96588a;
    color: #fff;
    border-color: #96588a;
}

.blog-pagination .page-numbers.dots {
    border: none;
    background: transparent;
}

@media (max-width: 767px) {
    .blog-pagination .page-numbers {
        padding: 0.5em;
        margin: 0 0.1em;
    }
}

/* Variable Product Layout - Working with WooCommerce Swatches Plugin & Storefront's Float System */
/* Swatch styling moved to separate CSS file for proper loading order */



/* Sticky gallery on desktop */
.woocommerce-product-gallery.is-sticky {
    position: sticky;
    top: 20px;
}

/* CSS positioning approach for mobile cart - handled in functions.php */
 
/* Simple products: horizontal quantity + add-to-cart alignment (mobile) */
@media (max-width: 767px) {
    body.single-product.product-type-simple div.product form.cart::after {
        content: "";
        display: table;
        clear: both;
    }
    body.single-product.product-type-simple div.product form.cart .quantity {
        float: left !important;
        width: 90px !important;
        margin-right: 10px !important;
        margin-bottom: 0 !important;
        vertical-align: middle !important;
    }
    body.single-product.product-type-simple div.product form.cart .quantity .qty {
        width: 100% !important;
        height: 44px !important;
        box-sizing: border-box !important;
    }
    body.single-product.product-type-simple div.product form.cart .single_add_to_cart_button {
        display: inline-block !important;
        float: none !important;
        width: calc(100% - 100px) !important;
        height: 44px !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }
}

/* Mobile: force variation dropdowns to full width with high specificity */
@media (max-width: 767px) {
    .woocommerce.single-product div.product form.cart table.variations,
    .woocommerce.single-product div.product form.cart .variations {
        width: 100% !important;
        max-width: 100% !important;
    }
    .woocommerce.single-product div.product form.cart table.variations th,
    .woocommerce.single-product div.product form.cart table.variations td,
    .woocommerce.single-product div.product form.cart .variations th,
    .woocommerce.single-product div.product form.cart .variations td {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    .woocommerce.single-product div.product form.cart table.variations td.value,
    .woocommerce.single-product div.product form.cart .variations .value {
        display: block !important;
        width: 100% !important;
    }
    .woocommerce.single-product div.product form.cart table.variations select,
    .woocommerce.single-product div.product form.cart .variations select {
        width: 100% !important;
        max-width: 100% !important; /* override Storefront 70% */
        box-sizing: border-box !important;
    }
    /* Select2 containers (if plugin enhances selects) */
    .woocommerce.single-product div.product form.cart table.variations .value .select2,
    .woocommerce.single-product div.product form.cart table.variations .value .select2-container,
    .woocommerce.single-product div.product form.cart .variations .value .select2,
    .woocommerce.single-product div.product form.cart .variations .value .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    .woocommerce.single-product div.product form.cart .variations .value .select2-container .select2-selection--single,
    .woocommerce.single-product div.product form.cart .variations .value .select2-container .select2-selection--multiple {
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    .woocommerce.single-product div.product form.cart .variations .value .select2-container .select2-selection__rendered {
        white-space: normal !important; /* allow long labels to wrap */
    }
}