/* ==========================================================================
   THEME NAME: Howling Meadows Studios
   BRAND: Howling Meadows Studios ("Adventures Woven Together.")
   ========================================================================== */

/* 1. SEAMLESS 1-PAGE CART & COLLATERAL STRUCTURES */
.woocommerce-cart .cart-collaterals .cart-notes,
.woocommerce-cart .cart-collaterals .woocommerce-cart-coupon-form {
    width: 100% !important;
}

.woocommerce-cart .cart-collaterals {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    justify-content: flex-end !important;
}

.woocommerce-cart .cart-collaterals .cart-coupon-form {
    flex: 1 0 0 !important;
}

.woocommerce-cart form.cart {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-height: 75px !important;
}

.woocommerce-cart form.cart #cart_uri {
    display: none !important;
}

.woocommerce-cart #cart_items {
    width: 70% !important;
}

.woocommerce-cart .cart_totals {
    width: 30% !important;
    min-height: 75px !important;
}

.woocommerce-cart table.cart tr td.qty.form-row {
    width: 10% !important;
}

.woocommerce-cart table.cart tr td.product_name,
.woocommerce-cart table.cart tr td.product_meta {
    width: 50% !important;
}

.woocommerce-cart table.cart tr td.product_sku,
.woocommerce-cart table.cart tr td.product_thumbs img {
    width: 20% !important;
}

.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a {
    background: #2B4436 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
}

.woocommerce-cart table.cart tr td.product-thumbnail,
.woocommerce-cart table.cart tr td.product_name,
.woocommerce-cart table.cart tr td.product_meta,
.woocommerce-cart table.cart tr td.product-quantity,
.woocommerce-cart table.cart tr td.actions {
    vertical-align: middle;
}

.woocommerce-cart img {
    border-radius: 4px;
}

.woocommerce-cart .quantity,
.woocommerce-cart .actions .btn {
    height: 48px;
    width: 55px;
}


/* 2. DYNAMIC 3-STEP SEAMLESS CHECKOUT LAYOUT */
.woocommerce-checkout form.checkout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: clamp(20px, 5vw, 50px) !important;
    padding-left: 0 !important;
}

.woocommerce-checkout p.form-row {
    flex: 0 1 calc(50% - var(--gap, 25px) / 2);
    margin-bottom: calc(var(--gap, 25px) / 2);
}

.woocommerce-checkout #orders #order_review_heading {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

.woocommerce-checkout #order_review,
.woocommerce .widget_shopping_cart .cart_totals {
    border-top: 1px solid #e5e5e5 !important;
    padding-top: clamp(30px, 5vw, 60px);
    margin-top: calc(clamp(30px, 5vw, 60px) + 1px) !important;
}

.woocommerce-cart .woocommerce-checkout-review-order-table th,
.woocommerce-cart .woocommerce-checkout-review-order-table td {
    padding: 0 !important;
}

.woocommerce-cart .woocommerce-checkout-review-order-table.totals tr td {
    width: 100% !important;
}

.woocommerce-cart .woocommerce-checkout-review-order-table.totals tr td.label {
    display: none;
}


/* 3. BRAND BREADCRUMB ALIGNMENTS */
.woocommerce-breadcrumb {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-size: 0.875rem !important;
    color: #2E3436 !important;
    margin-bottom: 2rem !important;
    letter-spacing: 0.05em !important;
}

.woocommerce-breadcrumb a {
    color: #2B4436 !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.1em !important;
    transition: color 0.2s ease !important;
}

.woocommerce-breadcrumb a:hover {
    color: #C98326 !important;
}


/* 4. IRONCLAD WOOCOMMERCE GRID RESET (Anti-Squish Architecture) */

/* STEP A: Defuse the parent container and CAP the width on large PC monitors */
.archive-products-grid {
    display: block !important; 
    width: 100% !important;
    max-width: 1100px !important; /* Stops the grid from stretching infinitely on 4K/wide screens */
    margin: 0 auto !important; /* Keeps the grid perfectly centered */
}

/* STEP B: Turn the native WooCommerce UL into the true, full-width grid */
.woocommerce ul.products,
.woocommerce-page ul.products,
.archive-products-grid ul.products {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Tablet Layout Expansion */
@media (min-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .archive-products-grid ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Desktop Layout Expansion (Fine-Tuned Goldilocks Sizing) */
@media (min-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .archive-products-grid ul.products {
        /* Tells the browser: Make cards at least 220px wide, but no larger than the max-width allows */
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
        gap: 2rem !important;
    }
}

/* Nuke the WooCommerce legacy clearfix pseudo-elements causing ghost columns */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none !important;
    content: none !important;
}

/* STEP C: Force product cards to stretch and fill their new wide grid cells */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product-category,
.woocommerce-page ul.products li.product-category {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}


/* 5. IMMUTABLE SYSTEM OVERRIDES FOR DYNAMIC LOOP ACTIONS */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .products a.button,
.woocommerce .wp-block-button__link {
    background-color: #2B4436 !important;
    color: #F6F3EB !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1rem !important;
    border-radius: 2px !important;
    padding: 0.75rem 1rem !important;
    font-size: 10px !important;
    transition: all 0.2s ease-in-out !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    border: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .products a.button:hover,
.woocommerce .wp-block-button__link:hover {
    background-color: #C98326 !important;
    color: #F6F3EB !important;
}


/* 6. RAW FINANCIAL STRING PRICE ALIGNMENT */
.tailwoo-price-lock .woocommerce-Price-amount,
.tailwoo-price-lock ins,
.tailwoo-price-lock del {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: #2E3436 !important;
}

.tailwoo-price-lock del .woocommerce-Price-amount {
    color: rgba(46, 52, 54, 0.4) !important;
    font-weight: 400 !important;
    font-size: 0.85em !important;
    margin-right: 0.25rem;
    text-decoration: line-through !important;
}

/* ==========================================================================
   7. BOUTIQUE SORTING DROPDOWN OVERRIDE
   ========================================================================== */

form.woocommerce-ordering {
    margin: 0 !important;
}

form.woocommerce-ordering select.orderby {
    /* Strip default OS styles */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Brand Design Tokens */
    background-color: transparent !important;
    border: 1px solid rgba(43, 68, 54, 0.2) !important; /* Forest Green @ 20% opacity */
    color: #2B4436 !important; /* Forest Green Text */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.6rem 2.5rem 0.6rem 1.25rem !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    
    /* Custom SVG Chevron (Forest Green) to replace the ugly default arrow */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232B4436%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
}

/* Hover & Focus Interaction States */
form.woocommerce-ordering select.orderby:hover,
form.woocommerce-ordering select.orderby:focus {
    border-color: #C98326 !important; /* Shifts to Warm Amber */
    color: #C98326 !important;
    
    /* Custom SVG Chevron (Warm Amber) */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C98326%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
}

/* ==========================================================================
   8. MOBILE LOOKBOOK OPTIMIZATION (Sub-768px viewports)
   ========================================================================== */

@media (max-width: 767px) {
    /* Force a premium 2-column apparel grid on mobile devices */
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .archive-products-grid ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important; /* Tighter gaps to maximize screen real estate */
        padding: 0 0.5rem !important;
    }

    /* Scale down product and category titles to prevent aggressive text wrapping */
    .woocommerce ul.products li.product h2,
    .woocommerce ul.products li.product-category h2 {
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.25rem !important;
    }

    /* Scale down the italicized "Provisions" / category counter text */
    .woocommerce ul.products li.product-category p,
    .woocommerce ul.products li.product .font-accent {
        font-size: 0.65rem !important;
        margin-top: 0.25rem !important;
    }

    /* Shrink the raw price strings */
    .tailwoo-price-lock .woocommerce-Price-amount,
    .tailwoo-price-lock ins,
    .tailwoo-price-lock del {
        font-size: 0.75rem !important;
    }

    /* Optimize primary action buttons to prevent blowing out the 2-column boundaries */
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce .products a.button,
    .woocommerce .wp-block-button__link {
        padding: 0.6rem 0.25rem !important;
        font-size: 8px !important;
        letter-spacing: 0.05rem !important;
        margin-top: 0.5rem !important;
    }
    
    /* Shrink the boutique sorting dropdown to fit narrow mobile headers */
    form.woocommerce-ordering select.orderby {
        font-size: 0.6rem !important;
        padding: 0.5rem 1.75rem 0.5rem 0.75rem !important;
        background-size: 0.8rem !important;
    }
}

/* ==========================================================================
   9. SINGLE PRODUCT PAGE OPTIMIZATIONS
   ========================================================================== */

/* Nuke WooCommerce's default 48% floats on the single product page */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix image gallery bounds inside our custom wrapper */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    margin: 0 !important;
}

.woocommerce div.product div.images img {
    width: 100% !important;
    height: auto !important;
    border-radius: 4px;
    object-fit: cover;
}

/* Reset Variation Table Layout to stretch fully */
.woocommerce div.product form.cart .variations {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
    border: none !important;
}

/* Brand styling for variation labels (e.g. "Size", "Color") */
.woocommerce div.product form.cart .variations th {
    text-align: left !important;
    padding-bottom: 0.5rem !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    color: #2B4436 !important;
}

.woocommerce div.product form.cart .variations td {
    padding-bottom: 1rem !important;
    vertical-align: middle !important;
}

/* Ensure Add to Cart block lays out nicely with Quantity box */
.woocommerce div.product form.cart .single_variation_wrap {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 1rem !important;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity {
    margin: 0 !important;
}

/* Custom styling for the Quantity Input box */
.woocommerce .quantity .qty {
    width: 4rem !important;
    height: 3rem !important;
    border: 1px solid rgba(43, 68, 54, 0.2) !important;
    background-color: transparent !important;
    color: #2E3436 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    border-radius: 2px !important;
    text-align: center !important;
    appearance: none !important;
    -moz-appearance: textfield !important;
}

/* Stretch the Add to Cart button to fill the remaining space next to quantity */
.woocommerce div.product form.cart button.single_add_to_cart_button {
    flex: 1 !important;
    height: 3rem !important;
    margin: 0 !important;
    padding: 0 1.5rem !important;
    font-size: 0.75rem !important;
}

/* ==========================================================================
   10. BOUTIQUE ACCOUNT DASHBOARD OPTIMIZATION
   ========================================================================== */

/* Establish modern CSS Grid for the Account Page */
.woocommerce-account .woocommerce {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

@media (min-width: 768px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 280px 1fr !important;
        gap: 3rem !important;
        align-items: flex-start !important;
    }
}

/* Nuke the legacy clearfix pseudo-elements causing ghost columns on the Account page */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
    display: none !important;
    content: none !important;
}

/* -----------------------------------------
   Sidebar Navigation Menu
----------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none !important;
    width: 100% !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(43, 68, 54, 0.1) !important; /* Subtle Forest Green */
    border-radius: 4px !important;
    background-color: #F6F3EB !important; /* Oatmeal Cream */
    overflow: hidden !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid rgba(43, 68, 54, 0.1) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 1rem 1.5rem !important;
    color: #2E3436 !important; /* Charcoal Slate */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

/* Active and Hover States */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #2B4436 !important; /* Forest Green */
    color: #F6F3EB !important;
    padding-left: 1.75rem !important; /* Slight nudge effect on interaction */
}

/* -----------------------------------------
   Main Content Area & Typography
----------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    color: #2E3436 !important;
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1.6 !important;
}

/* Highlighted Account Names */
.woocommerce-account .woocommerce-MyAccount-content mark {
    background: none !important;
    color: #C98326 !important; /* Warm Amber */
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 1.1em !important;
}

/* Account Page Inline Links */
.woocommerce-account .woocommerce-MyAccount-content p a {
    color: #2B4436 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(43, 68, 54, 0.3) !important;
    transition: all 0.2s ease !important;
}

.woocommerce-account .woocommerce-MyAccount-content p a:hover {
    color: #C98326 !important;
    border-bottom-color: #C98326 !important;
}

/* -----------------------------------------
   Data Tables (Orders, Downloads)
----------------------------------------- */
.woocommerce-account table.shop_table {
    border-collapse: collapse !important;
    width: 100% !important;
    border: 1px solid rgba(43, 68, 54, 0.1) !important;
    border-radius: 4px !important;
    text-align: left !important;
}

.woocommerce-account table.shop_table th {
    background-color: rgba(43, 68, 54, 0.05) !important;
    color: #2B4436 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
    padding: 1rem !important;
}

.woocommerce-account table.shop_table td {
    padding: 1rem !important;
    border-top: 1px solid rgba(43, 68, 54, 0.1) !important;
    color: #2E3436 !important;
    font-size: 0.85rem !important;
    vertical-align: middle !important;
}

/* Order Status Highlights */
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-status {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    color: #C98326 !important;
}

/* Standardize Account Buttons */
.woocommerce-account .woocommerce-MyAccount-content a.button {
    padding: 0.5rem 1rem !important;
    font-size: 0.65rem !important;
    display: inline-block !important;
    width: auto !important; /* Revert full-width override for small table buttons */
    margin-top: 0 !important;
}

/* Addresses Section Layout */
.woocommerce-account .u-columns.woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
}

@media (min-width: 768px) {
    .woocommerce-account .u-columns.woocommerce-Addresses {
        grid-template-columns: 1fr 1fr !important;
    }
}

.woocommerce-account .u-column {
    float: none !important;
    width: 100% !important;
    background-color: #fff !important;
    border: 1px solid rgba(43, 68, 54, 0.1) !important;
    padding: 1.5rem !important;
    border-radius: 4px !important;
}

/* ==========================================================================
   11. MOBILE ACCOUNT PAGE REORDERING
   ========================================================================== */

@media (max-width: 767px) {
    /* Force the dashboard/content area to the top of the screen */
    .woocommerce-account .woocommerce-MyAccount-content {
        order: -1 !important;
        margin-bottom: 2rem !important;
    }
    
    /* Push the navigation menu to the bottom */
    .woocommerce-account .woocommerce-MyAccount-navigation {
        order: 2 !important;
    }
}

/* ==========================================================================
   12. MOBILE MINI-CART & SLIDE-OUT DRAWER OVERRIDES
   ========================================================================== */

/* 1. Stop WooCommerce from turning the remove "X" red and BREAK the left-anchor */
.woocommerce-mini-cart-item a.remove.remove_from_cart_button,
.woocommerce ul.cart_list li a.remove,
.woocommerce ul.product_list_widget li a.remove,
.widget_shopping_cart_content a.remove {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important; /* CRITICAL: Destroys WooCommerce's native left-side mobile anchor */
    margin: 0 !important;
    color: rgba(46, 52, 54, 0.4) !important; 
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: bold !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    z-index: 50 !important;
}
/* 2. Force the mini-cart images to load, scale, and align correctly */
.woocommerce-mini-cart-item img,
.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    position: static !important;
    object-fit: cover !important;
}

/* 3. Protect the flexbox layout and FORCE relative anchoring for the X */
.woocommerce-mini-cart-item,
.woocommerce ul.cart_list li,
.woocommerce ul.product_list_widget li {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important; /* CRITICAL: Keeps the X trapped inside the product card */
    width: 100% !important;
    box-sizing: border-box !important;
}