/* Import Kreon font from Google Fonts (same as production) */
@import url('https://fonts.googleapis.com/css2?family=Kreon:wght@300;400;500;600;700&display=swap');

/* Remove gap at top of page */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove any gap from wrapper elements */
body > *,
.wp-site-blocks {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure header starts at top */
header,
header.wp-block-template-part {
    margin-top: 0 !important;
    position: relative !important;
    top: 0 !important;
}

/* Apply Kreon font to all headings */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: 'Kreon', serif !important;
    font-weight: 600 !important;
}

/* ========================================
   HEADER SIZE AND MENU STYLING
   ======================================== */

/* Remove styling from outer header wrapper */
header.wp-block-template-part {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: none !important;
    background-color: transparent !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* Remove padding from header inner container */
header.wp-block-template-part .wp-block-group {
    padding-top: 0 !important;
}

/* Make logo bigger */
.wp-block-site-logo img {
    width: 120px !important;
    height: auto !important;
}

/* Make menu items bigger */
.wp-block-navigation .wp-block-navigation-item a {
    font-size: 18px !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
}

/* Menu item hover effect */
.wp-block-navigation .wp-block-navigation-item a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Show submenu dropdown arrows (carets) */
.wp-block-navigation .wp-block-navigation-item button.wp-block-navigation__submenu-icon,
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 0 0 6px !important;
    margin: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    min-width: auto !important;
    height: auto !important;
    cursor: pointer !important;
}

/* Make caret icon itself a bit larger and nicely aligned */
.wp-block-navigation .wp-block-navigation__submenu-icon svg,
.wp-block-navigation .wp-block-navigation__submenu-icon img {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    transform: translateY(1px) !important;
}

/* Submenu styling */
.wp-block-navigation .wp-block-navigation__submenu-container {
    background-color: rgba(52, 73, 94, 0.95) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 0 !important;
}

/* Submenu item styling */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
    padding: 10px 20px !important;
    font-size: 16px !important;
}

/* Submenu item hover */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ========================================
   HIDE MOBILE MENU BUTTONS ON DESKTOP
   ======================================== */

/* Hide hamburger and close buttons on desktop (>782px is WordPress admin bar breakpoint) */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    display: none !important;
}

/* On mobile, show the buttons */
@media (max-width: 781px) {
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-close {
        display: flex !important;
    }
}

/* ========================================
   HIDE CART PRICE EXCEPT ON PRODUCTS PAGE
   ======================================== */

/* Hide cart container and price by default on all pages */
.woocommerce-mini-cart__total,
header a[href="/cart"],
header a[href*="/cart"] {
    display: none !important;
}

/* Hide the orange cart container div */
header a[href="/cart"] {
    display: none !important;
}

/* Hide parent div of cart link (the orange box) */
header div[style*="background:#d32f2f"] {
    display: none !important;
}

/* Show cart price and container only on products page and WooCommerce pages */
body.woocommerce header a[href*="/cart"],
body.woocommerce-page header a[href*="/cart"],
body.page-id-500 header a[href*="/cart"],
body.post-type-archive-product header a[href*="/cart"],
body.tax-product_cat header a[href*="/cart"],
body.single-product header a[href*="/cart"] {
    display: flex !important;
}

/* Show the orange container on products/shop pages */
body.woocommerce header div[style*="background:#d32f2f"],
body.woocommerce-page header div[style*="background:#d32f2f"],
body.page-id-500 header div[style*="background:#d32f2f"],
body.post-type-archive-product header div[style*="background:#d32f2f"],
body.tax-product_cat header div[style*="background:#d32f2f"],
body.single-product header div[style*="background:#d32f2f"] {
    display: block !important;
}

/* Remove underlines from all links */
a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}

/* Add more spacing between sections */
.entry-content > * {
    margin-bottom: 60px !important;
}

/* Extra spacing for section headings */
.entry-content > h2 {
    margin-top: 80px !important;
    margin-bottom: 40px !important;
}

/* First element shouldn't have top margin */
.entry-content > *:first-child {
    margin-top: 0 !important;
}

/* Make header sticky */
header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
}

/* Header styling to match production - full width background */
.wp-block-group.has-background {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Fix logo visibility and sizing */
.header-logo img,
.wp-block-site-logo img {
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
}

.wp-block-site-logo {
    width: 160px !important;
}

/* Fix header navigation positioning - everything within content container */
.wp-block-group.alignfull {
    gap: 20px !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    max-width: 1280px !important; /* 1200px content + 40px padding on each side */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 100% !important;
    display: flex !important;
}

/* Logo within the container */
.wp-block-site-logo {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* Group containing navigation and cart button */
.wp-block-group.alignfull > .wp-block-group {
    flex-grow: 1 !important;
    gap: 40px !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Navigation - no extra margin */
.wp-block-navigation {
    margin-left: 0 !important;
}

.wp-block-navigation {
    flex-grow: 0 !important;
    margin-left: 0 !important;
    align-self: center !important;
}

/* Navigation styling */
.wp-block-navigation a {
    color: white !important;
    font-weight: 500;
    text-decoration: none;
}

.wp-block-navigation a:hover {
    opacity: 0.85;
}

/* Navigation dropdown styling for better readability */
.wp-block-navigation .wp-block-navigation__submenu-container {
    background-color: #3a5a7e !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0 !important;
    min-width: 220px;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 12px 24px !important;
    color: white !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    display: block !important;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* Make sure dropdown text is white and visible */
.wp-block-navigation .wp-block-navigation__submenu-container a {
    color: white !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container a:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Hero section cover block - Let the image show through the overlay */
.wp-block-cover.has-background-dim-50 .wp-block-cover__background {
    opacity: 0.5 !important; /* 50% overlay allows 50% of image to show through */
}

/* Make hero text bigger to match production */
.wp-block-cover h1 {
    font-size: clamp(42px, 4.5vw, 64px) !important; /* Slightly smaller: 42-64px instead of 48-72px */
    line-height: 1.2 !important;
    margin-bottom: 30px !important; /* Spacing between h1 and h3 */
}

.wp-block-cover h3 {
    font-size: clamp(22px, 2vw, 28px) !important; /* Increased from 18-24px to 22-28px */
    line-height: 1.4 !important;
    margin-bottom: 35px !important; /* Spacing between h3 and button */
}

/* Hero logo styling */
.wp-block-cover .wp-block-image {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.wp-block-cover .wp-block-image img {
    max-width: 160px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    display: block !important;
}

/* Nudge hero logo slightly down so it doesn't appear cut off at the top */
.wp-block-cover .wp-block-columns .wp-block-column:last-child .wp-block-image img {
    margin-top: 12px !important;
}

/* Ensure hero logo figure is not constrained by generic figure rules */
.wp-block-cover .wp-block-column figure {
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

/* Constrain hero columns to match page content width */
.wp-block-cover .wp-block-columns {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    align-items: center !important; /* Ensure vertical centering */
    gap: 24px !important; /* Tighter space between text and logo */
}

/* Text column should fill all available space */
.wp-block-cover .wp-block-column:first-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin-top: 80px !important; /* Reduced for better spacing above hero text */
    flex-grow: 1 !important; /* Fill all available space */
    flex-shrink: 1 !important;
    flex-basis: 0 !important; /* Start from zero and grow to fill */
}

/* Logo column should be pushed to the right edge */
.wp-block-cover .wp-block-column:last-child {
    display: flex !important;
    justify-content: flex-end !important; /* Push logo to the right */
    align-items: center !important;
    padding: 0 !important; /* Remove all padding from logo column */
    margin: 0 !important; /* Remove all margin from logo column */
    flex-basis: auto !important; /* Let column shrink to fit content */
    width: auto !important; /* Don't force a specific width */
    flex-grow: 0 !important; /* Don't grow to fill space */
    flex-shrink: 0 !important; /* Don't shrink below content size */
}

/* Align hero text with page content and enable vertical centering */
.wp-block-cover .wp-block-column .wp-block-group.has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
}

/* Ensure all hero text elements are left-aligned with each other */
.wp-block-cover .wp-block-columns h1,
.wp-block-cover .wp-block-columns h3,
.wp-block-cover .wp-block-columns .wp-block-buttons {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Left-align hero section to match page content */
.wp-block-cover {
    align-items: flex-start !important;
    justify-content: center !important;
}

.wp-block-cover__inner-container {
    z-index: 2;
    position: relative;
    text-align: left !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important; /* Let children control width */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important; /* No padding on container */
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Left-align hero section content - match h2 text position at 559px */
/* Parent .wp-block-group has 104px padding (WordPress global padding) */
/* h2 text is at 559px, so we need: 104px (parent) + 455px (h1 margin) = 559px */
.wp-block-cover .wp-block-group {
    padding-left: 0 !important; /* Remove WordPress global padding from hero parent */
    padding-right: 0 !important;
}

.wp-block-cover h1,
.wp-block-cover h3,
.wp-block-cover .wp-block-buttons {
    text-align: left !important;
    justify-content: flex-start !important;
    margin-left: 519px !important; /* Position to match h2 element */
    margin-right: auto !important;
    padding-left: 40px !important; /* Match h2 padding for text alignment */
    padding-right: 40px !important;
    max-width: 1200px !important; /* Constrain width */
}

/* Orange button styling - ALL buttons on the page */
.wp-block-button__link,
.wp-block-cover .wp-block-button__link,
.wp-block-buttons .wp-block-button__link {
    background-color: #d32f2f !important;
    color: white !important;
    border: none !important;
    padding: 12px 30px !important;
    font-size: 16px !important;
    display: inline-block !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    width: auto !important;
    min-width: fit-content !important;
}

.wp-block-button__link:hover {
    background-color: #b71c1c !important;
}

/* Fix column alignment in product section */
.wp-block-columns {
    align-items: stretch !important;
}

.wp-block-column {
    display: flex !important;
    flex-direction: column !important;
}

.wp-block-column > * {
    margin-top: 0 !important;
}

/* Align buttons at the bottom of each column */
.wp-block-column > .wp-block-buttons {
    margin-top: auto !important;
}

/* Make product images same height with preserved aspect ratio */
.wp-block-columns .wp-block-column figure {
    height: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 30px !important; /* Add spacing between images and text below */
}

.wp-block-columns .wp-block-column figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Override product image figure rule for hero logo so it's not clipped */
.wp-block-cover .wp-block-columns .wp-block-column figure {
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

/* Add horizontal padding to body content, but NOT to full-width elements like hero */
.entry-content > *:not(.alignfull):not(.wp-block-cover) {
    padding-left: 40px !important;
    padding-right: 40px !important;
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Ensure hero/cover blocks and full-width images remain full width */
.entry-content > .wp-block-cover.alignfull,
.entry-content > .alignfull,
.entry-content > figure.alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Tablet and below (max-width: 768px) */
@media (max-width: 768px) {
    /* Reset header layout for mobile */
    .wp-block-site-logo {
        margin-left: 10px !important;
        width: 120px !important;
    }
    
    .header-logo img,
    .wp-block-site-logo img {
        max-height: 40px !important;
    }
    
    /* Force WordPress navigation to use mobile menu */
    .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
    
    /* Show the mobile menu button */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
    
    /* Adjust header layout for mobile */
    .wp-block-group.has-background {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .wp-block-group.alignfull {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .wp-block-group.alignfull > .wp-block-group {
        width: auto !important;
        flex-grow: 0 !important;
    }
    
    /* Make hero text smaller on mobile */
    .wp-block-cover h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    .wp-block-cover h3 {
        font-size: 16px !important;
    }
    
    /* Reduce hero padding on mobile */
    .wp-block-cover {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

       /* Mobile phones (max-width: 480px) */
       @media (max-width: 480px) {
           .wp-block-site-logo {
               width: 100px !important;
               margin-left: 5px !important;
           }
           
           .header-logo img,
           .wp-block-site-logo img {
               max-height: 35px !important;
           }
           
           /* Even smaller hero text for phones */
           .wp-block-cover h1 {
               font-size: 20px !important;
           }
           
           .wp-block-cover h3 {
               font-size: 14px !important;
           }
       }

/* ========================================
   EXPERIENCE SECTION LAYOUT (FIXED WITH BLOCKS)
   ======================================== */

/* Experience section wrapper - constrain to content width */
.entry-content > .wp-block-group:has(img[alt*="Mark Slats"]) {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}

/* Experience columns - proper side-by-side layout */
.entry-content > .wp-block-group:has(img[alt*="Mark Slats"]) > .wp-block-columns {
    display: flex !important;
    align-items: flex-start !important;
    gap: 40px !important;
}

/* Image column - 45% width */
.entry-content > .wp-block-group:has(img[alt*="Mark Slats"]) .wp-block-column:first-child {
    flex: 0 0 45% !important;
    max-width: 45% !important;
}

/* Text column - 55% width */
.entry-content > .wp-block-group:has(img[alt*="Mark Slats"]) .wp-block-column:last-child {
    flex: 0 0 55% !important;
    max-width: 55% !important;
}

/* Ensure image scales properly */
.entry-content > .wp-block-group:has(img[alt*="Mark Slats"]) img {
    width: 100% !important;
    height: auto !important;
}

/* On mobile, stack vertically */
@media (max-width: 768px) {
    .entry-content > .wp-block-group:has(img[alt*="Mark Slats"]) > .wp-block-columns {
        flex-direction: column !important;
    }
    
    .entry-content > .wp-block-group:has(img[alt*="Mark Slats"]) .wp-block-column:first-child,
    .entry-content > .wp-block-group:has(img[alt*="Mark Slats"]) .wp-block-column:last-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   SALTY STORIES & CONTACT SECTIONS LAYOUT
   ======================================== */

/* Salty Stories section wrapper - constrain to content width */
.wp-block-group:has(img[alt*="Lean Nelis Aries Vane Gear"]) {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}

/* Salty Stories columns - proper side-by-side layout */
.wp-block-group:has(img[alt*="Lean Nelis Aries Vane Gear"]) > .wp-block-columns {
    display: flex !important;
    align-items: flex-start !important;
    gap: 40px !important;
}

/* Image column - 40% width */
.wp-block-group:has(img[alt*="Lean Nelis Aries Vane Gear"]) .wp-block-column:first-child {
    flex: 0 0 40% !important;
    max-width: 40% !important;
}

/* Text column - 60% width */
.wp-block-group:has(img[alt*="Lean Nelis Aries Vane Gear"]) .wp-block-column:last-child {
    flex: 0 0 60% !important;
    max-width: 60% !important;
}

/* Ensure image scales properly */
.wp-block-group:has(img[alt*="Lean Nelis Aries Vane Gear"]) img {
    width: 100% !important;
    height: auto !important;
}

/* Contact section wrapper - constrain to content width */
.wp-block-group:has(img[alt*="Lean Nelis Aries Vanegear"]) {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}

/* Contact columns - proper side-by-side layout */
.wp-block-group:has(img[alt*="Lean Nelis Aries Vanegear"]) > .wp-block-columns {
    display: flex !important;
    align-items: flex-start !important;
    gap: 40px !important;
}

/* Image column - 40% width */
.wp-block-group:has(img[alt*="Lean Nelis Aries Vanegear"]) .wp-block-column:first-child {
    flex: 0 0 40% !important;
    max-width: 40% !important;
}

/* Text column - 60% width */
.wp-block-group:has(img[alt*="Lean Nelis Aries Vanegear"]) .wp-block-column:last-child {
    flex: 0 0 60% !important;
    max-width: 60% !important;
}

/* Ensure image scales properly */
.wp-block-group:has(img[alt*="Lean Nelis Aries Vanegear"]) img {
    width: 100% !important;
    height: auto !important;
}

/* On mobile, stack vertically */
@media (max-width: 768px) {
    .wp-block-group:has(img[alt*="Lean Nelis Aries Vane Gear"]) > .wp-block-columns,
    .wp-block-group:has(img[alt*="Lean Nelis Aries Vanegear"]) > .wp-block-columns {
        flex-direction: column !important;
    }
    
    .wp-block-group:has(img[alt*="Lean Nelis Aries Vane Gear"]) .wp-block-column:first-child,
    .wp-block-group:has(img[alt*="Lean Nelis Aries Vane Gear"]) .wp-block-column:last-child,
    .wp-block-group:has(img[alt*="Lean Nelis Aries Vanegear"]) .wp-block-column:first-child,
    .wp-block-group:has(img[alt*="Lean Nelis Aries Vanegear"]) .wp-block-column:last-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   PRODUCT SECTION (WORDPRESS BLOCKS)
   ======================================== */

/* Make product columns use flexbox to align buttons at bottom */
.wp-block-columns.alignwide .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
}

/* Add spacing between product section elements */
.wp-block-columns.alignwide .wp-block-column h3 {
    margin-top: 25px !important;
    margin-bottom: 20px !important;
}

.wp-block-columns.alignwide .wp-block-column p {
    margin-bottom: 25px !important;
    flex-grow: 1 !important; /* Push button to bottom */
}

.wp-block-columns.alignwide .wp-block-column .wp-block-buttons {
    margin-top: auto !important; /* Align to bottom */
}

/* Better approach: wrap the three product sections in a flex container */
/* Target elements between "The Aries Vane Gear Webshop" and "Experience" */
.entry-content {
    display: block !important;
}

/* Create grid layout for product items */
.entry-content > h2 + figure,
.entry-content > h2 + figure ~ h3:nth-of-type(1),
.entry-content > h2 + figure ~ p:nth-of-type(1),
.entry-content > h2 + figure ~ button:nth-of-type(1),
.entry-content > h2 + figure ~ figure:nth-of-type(1),
.entry-content > h2 + figure ~ h3:nth-of-type(2),
.entry-content > h2 + figure ~ p:nth-of-type(2),
.entry-content > h2 + figure ~ button:nth-of-type(2),
.entry-content > h2 + figure ~ figure:nth-of-type(2),
.entry-content > h2 + figure ~ h3:nth-of-type(3),
.entry-content > h2 + figure ~ p:nth-of-type(3),
.entry-content > h2 + figure ~ button:nth-of-type(3) {
    display: inline-block !important;
    vertical-align: top !important;
    width: 30% !important;
    margin-right: 3% !important;
    box-sizing: border-box !important;
}

/* Make all buttons orange/red */
button,
.wp-block-button__link,
.wp-element-button,
a.wp-block-button__link {
    background-color: #d32f2f !important;
    color: white !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-weight: 600 !important;
}

button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
    background-color: #b71c1c !important;
}

/* Ensure product images have consistent height */
.entry-content figure img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* On mobile, stack products vertically */
@media (max-width: 768px) {
    .entry-content > h2 + figure,
    .entry-content > h2 + figure ~ h3,
    .entry-content > h2 + figure ~ p,
    .entry-content > h2 + figure ~ button,
    .entry-content > h2 + figure ~ figure {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
}