/*
 * Theme Name:        Retail Store Theme
 * Theme URI:         https://oclconsulting.com
 * Description:       Child theme for Storefront (WooCommerce official base theme).
 *                    Custom retail store design for an Irish retail chain with 7 locations
 *                    and 35,000 products. Built as a prototype for client presentation.
 * Author:            OCL Consulting
 * Author URI:        https://oclconsulting.com
 * Template:          storefront
 * Version:           1.7.0
 * Requires at least: WordPress 6.4
 * Tested up to:      WordPress 6.7
 * WC requires at least: 8.0
 * WC tested up to:   9.5
 * Text Domain:       retail-store-theme
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 *
 * NOTE: "retail-store-theme" is an internal code name.
 * The store name/branding will be customised once the client confirms their brand.
 */

/* =============================================================================
   Parent Theme (Storefront) is enqueued via functions.php wp_enqueue_style().
   Do NOT @import it here — that would load it twice (PHP enqueue + CSS import).
   Storefront styles load first (dependency chain), then this file overrides them.
   ============================================================================= */

/* =============================================================================
   CSS Custom Properties (Design Tokens)
   Change these variables to restyle the entire theme.
   Defined here for easy client branding updates.
   ============================================================================= */
:root {
    /* Brand colours — neutral professional palette for Irish retail */
    /* Replace these once the client confirms their brand identity */
    --color-primary:          #1a3a5c;   /* Deep navy — professional, trustworthy */
    --color-primary-light:    #2563a8;   /* Lighter navy for hover states */
    --color-primary-dark:     #0f2237;   /* Dark navy for pressed states */
    --color-accent:           #e8821a;   /* Warm amber — action calls, add-to-cart */
    --color-accent-light:     #f0a04b;   /* Lighter amber for hover states */
    --color-success:          #2d7a3a;   /* Green — in stock, success messages */
    --color-warning:          #b35c00;   /* Orange — low stock, warnings */
    --color-error:            #c0392b;   /* Red — out of stock, error messages */

    /* Neutral palette */
    --color-white:            #ffffff;
    --color-off-white:        #f8f9fa;
    --color-light-gray:       #e9ecef;
    --color-medium-gray:      #adb5bd;
    --color-dark-gray:        #495057;
    --color-near-black:       #212529;

    /* Typography */
    --font-family-heading:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base:         16px;
    --font-size-sm:           0.875rem;  /* 14px */
    --font-size-lg:           1.125rem;  /* 18px */
    --font-size-xl:           1.25rem;   /* 20px */
    --font-size-2xl:          1.5rem;    /* 24px */
    --font-size-3xl:          2rem;      /* 32px */
    --font-size-4xl:          2.5rem;    /* 40px */
    --font-weight-normal:     400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;
    --line-height-tight:      1.25;
    --line-height-normal:     1.5;
    --line-height-relaxed:    1.75;

    /* Spacing scale */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */

    /* Layout */
    --container-max-width:    1200px;
    --container-padding:      var(--space-4);
    --border-radius-sm:       4px;
    --border-radius:          8px;
    --border-radius-lg:       12px;
    --border-radius-full:     9999px;

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow:      0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md:   0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg:   0 20px 25px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast:    150ms ease;
    --transition-normal:  250ms ease;
    --transition-slow:    400ms ease;
}

/* =============================================================================
   Global Resets & Base Styles
   ============================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    color: var(--color-near-black);
    background-color: var(--color-white);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================================================
   Typography Overrides
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-near-black);
    margin-top: 0;
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

/* =============================================================================
   Header & Navigation
   ============================================================================= */
.site-header {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-branding .site-title a,
.site-branding .site-title a:visited {
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    text-decoration: none;
}

/* Primary navigation */
.main-navigation a {
    color: var(--color-white);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

.main-navigation a:hover {
    color: var(--color-accent-light);
}

/* Mobile hamburger */
.menu-toggle {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.3);
    transition: background-color var(--transition-fast);
}

.menu-toggle:hover {
    background-color: var(--color-primary-light);
}

/* Keep the nav on a single row — compact link spacing for 7 items.
   Storefront default padding is too generous for a 7-item menu. */
.main-navigation ul > li > a {
    padding: 0.65em 0.75em;
    font-size: 0.875rem;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Storefront nav bar — flex row so all nav items + cart stay on one row.
   Need !important because Storefront's own stylesheet sets display:block on .col-full
   and float:left on .main-navigation — these overrides must win that fight. */
.storefront-primary-navigation .col-full {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box;
}

/* Override Storefront's float-based nav layout with flexbox */
.storefront-primary-navigation .main-navigation {
    float: none !important;
    flex: 1 1 auto !important;
    display: block !important;
    min-width: 0;
}

.storefront-primary-navigation .main-navigation .primary-navigation ul,
.storefront-primary-navigation .main-navigation ul.nav-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
}

.storefront-primary-navigation .main-navigation ul.menu {
    clear: none !important;
}

/* Prevent the fallback page-list from appearing alongside the real menu */
.storefront-primary-navigation .main-navigation .menu:not(.nav-menu) {
    display: none !important;
}

/* Keep cart on the right, same row as nav */
.storefront-primary-navigation .storefront-header-cart {
    float: none !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding-right: 1rem !important;  /* Prevent cart text clipping at viewport edge */
}

.storefront-header-cart a {
    font-size: 0.875rem;
    white-space: nowrap;
    color: var(--color-white) !important;
    padding-right: 0.5rem;
}

/* Header layout — keep branding and search on first row, tight */
.site-header .col-full {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
}

.site-branding {
    padding: var(--space-3) 0;
    flex-shrink: 0;
}

/* =============================================================================
   Buttons
   Storefront base button styles overridden to use our brand colours.
   ============================================================================= */

/* Primary CTA button — "Add to Cart", "Checkout", "Place Order" */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
button.wp-block-button__link,
.wp-block-button__link {
    background-color: var(--color-accent);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius);
    border: none;
    padding: var(--space-3) var(--space-6);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--color-accent-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Secondary/outline button variant */
.woocommerce a.button.button-secondary,
.button-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.woocommerce a.button.button-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* =============================================================================
   Product Grid
   WooCommerce product loop — shop page, category pages, widgets
   ============================================================================= */

/* Product loop: 4 columns on desktop, 3 on tablet, 2 on mobile, 1 on small mobile */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}

/* Product card */
.woocommerce ul.products li.product {
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
    position: relative;
}

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

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

@media (max-width: 480px) {
    .woocommerce ul.products li.product a img {
        height: 160px;
    }
}

/* Product card content */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-near-black);
    padding: var(--space-3) var(--space-4) var(--space-2);
    margin: 0;
}

.woocommerce ul.products li.product .price {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    padding: 0 var(--space-4) var(--space-2);
}

.woocommerce ul.products li.product .button {
    margin: 0 var(--space-4) var(--space-4);
    width: calc(100% - 2rem);
    justify-content: center;
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-4);
}

/* =============================================================================
   Product Page (Single Product)
   ============================================================================= */
.woocommerce div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
}

@media (max-width: 768px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* Product title */
.woocommerce div.product .product_title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-near-black);
    margin-bottom: var(--space-4);
}

/* Product price */
.woocommerce div.product p.price {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-6);
}

/* Stock availability */
.woocommerce div.product .stock {
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-sm);
    display: inline-block;
    margin-bottom: var(--space-4);
}

.woocommerce div.product .stock.in-stock {
    background-color: #d4edda;
    color: var(--color-success);
}

.woocommerce div.product .stock.out-of-stock {
    background-color: #f8d7da;
    color: var(--color-error);
}

/* =============================================================================
   Store Availability Widget (Stage 10+ — placeholder styles)
   Shows per-store stock availability on the product page.
   The actual functionality is implemented in Stage 10 (store finder).
   ============================================================================= */
.rs-store-availability {
    background: var(--color-off-white);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--border-radius);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}

.rs-store-availability__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-near-black);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.rs-store-availability__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rs-store-availability__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-light-gray);
    font-size: var(--font-size-sm);
}

.rs-store-availability__item:last-child {
    border-bottom: none;
}

.rs-store-availability__store-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-dark-gray);
}

.rs-store-availability__status--in-stock {
    color: var(--color-success);
    font-weight: var(--font-weight-semibold);
}

.rs-store-availability__status--low-stock {
    color: var(--color-warning);
    font-weight: var(--font-weight-semibold);
}

.rs-store-availability__status--out-of-stock {
    color: var(--color-error);
}

/* =============================================================================
   Store Finder Page (Stage 10)
   Placeholder layout — fully implemented in Stage 10.
   ============================================================================= */
.rs-store-finder {
    margin: var(--space-8) 0;
}

.rs-store-finder__map {
    width: 100%;
    height: 480px;
    background: var(--color-light-gray);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-8);
}

@media (max-width: 768px) {
    .rs-store-finder__map {
        height: 300px;
    }
}

.rs-store-finder__locations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
}

.rs-location-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--border-radius);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal);
}

.rs-location-card:hover {
    box-shadow: var(--shadow-md);
}

.rs-location-card__name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.rs-location-card__address {
    color: var(--color-dark-gray);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-relaxed);
}

.rs-location-card__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.rs-location-card__actions a {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    transition: background-color var(--transition-fast);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.rs-location-card__actions a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.rs-location-card__actions a.primary-action {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.rs-location-card__actions a.primary-action:hover {
    background-color: var(--color-primary-dark);
}

/* =============================================================================
   Hero Section (Homepage)
   ============================================================================= */
.rs-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white);
    padding: var(--space-20) var(--space-4);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.rs-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="40" fill="rgba(255,255,255,0.03)"/><circle cx="80" cy="80" r="60" fill="rgba(255,255,255,0.02)"/></svg>') no-repeat center;
    background-size: cover;
}

.rs-hero__content {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.rs-hero__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-bottom: var(--space-5);
    line-height: 1.2;
}

@media (max-width: 768px) {
    .rs-hero__title {
        font-size: var(--font-size-3xl);
    }
}

.rs-hero__subtitle {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-8);
    line-height: var(--line-height-relaxed);
}

.rs-hero__cta {
    display: inline-flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

.rs-hero__cta .button-primary {
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-size: var(--font-size-lg);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    display: inline-block;
}

.rs-hero__cta .button-primary:hover {
    background: var(--color-accent-light);
    transform: translateY(-2px);
}

/* =============================================================================
   Cart & Checkout
   ============================================================================= */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
    background: var(--color-off-white);
    border-radius: var(--border-radius);
    padding: var(--space-6);
    border: 1px solid var(--color-light-gray);
}

/* =============================================================================
   Footer
   ============================================================================= */
.site-footer {
    background-color: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.75);
    padding: var(--space-12) 0 var(--space-6);
}

.site-footer a {
    color: rgba(255, 255, 255, 0.9);
}

.site-footer a:hover {
    color: var(--color-accent-light);
}

/* =============================================================================
   Accessibility
   ============================================================================= */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-2) var(--space-4);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    z-index: 9999;
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.skip-link:focus {
    top: 0;
}

/* =============================================================================
   Homepage — Suppress page title and make hero flush with header
   The full-width template still outputs the page title via the_title().
   We hide it on the front page so the hero section is the first element.
   ============================================================================= */
.home .entry-header,
.home .page-title,
.home h1.entry-title,
.home .woocommerce-breadcrumb {
    display: none !important;
}

/* Remove default entry content padding on homepage so hero is flush.
   Storefront constrains .entry-content to ~41em (~657px) — way too narrow
   for a product grid. Override to full-width for the homepage only.
   Also override the .col-full max-width inside #primary — that is the real
   constraint (1063px cap set by Storefront's parent stylesheet). */
.home .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Remove default page content wrapper margins on homepage */
.home .hentry,
.home .page {
    margin: 0 !important;
    padding: 0 !important;
}

/* Break the Storefront col-full max-width on the homepage content column.
   The .site-content .col-full wraps #primary and is capped at ~1064px by
   the parent theme. On the homepage our sections are full-bleed, so we need
   this container to span the full viewport width. */
.home #content .col-full,
.home .site-content .col-full,
.home #primary.content-area,
.home #main.site-main {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Section wrappers themselves constrain their inner content to a readable width */
.rs-homepage-section .rs-section-header,
.rs-homepage-section .rs-hero-content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

/* =============================================================================
   Homepage Sections
   Used by the custom homepage (page ID 153). Each section is a full-width
   block with centred heading, subtitle, and content below.
   ============================================================================= */

/* Base section — white background, generous vertical padding */
.rs-homepage-section {
    padding: var(--space-16) var(--space-4);
    max-width: 100%;
}

/* Alternate background — light grey for visual rhythm between sections */
.rs-homepage-section--alt {
    background-color: var(--color-off-white);
}

/* Dark background variant — used for New Arrivals to add contrast */
.rs-homepage-section--dark {
    background-color: var(--color-primary);
}

/* Section header — centred title + subtitle above content */
.rs-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-10);
}

.rs-section-header h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-near-black);
    margin-bottom: var(--space-3);
}

.rs-section-header p {
    font-size: var(--font-size-lg);
    color: var(--color-dark-gray);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* Light header variant — white text on dark section background */
.rs-section-header--light h2,
.rs-section-header--light p {
    color: var(--color-white);
}

.rs-section-header--light p {
    color: rgba(255, 255, 255, 0.80);
}

/* Contain the WooCommerce shortcode output within the section.
   The homepage entry-content is full-width; section wrappers constrain their own content. */
.rs-homepage-section .woocommerce {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* Force 4-column grid inside homepage product sections.
   Matches both the direct .woocommerce child and nested variants from wpautop. */
.rs-homepage-section ul.products.columns-4,
.rs-homepage-section ul.products,
.rs-homepage-section .woocommerce ul.products.columns-4,
.rs-homepage-section .woocommerce ul.products,
.rs-homepage-section p .woocommerce ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Category grid: 3 columns for top-level category cards */
.rs-homepage-section--alt ul.products.columns-3,
.rs-homepage-section--alt .woocommerce ul.products.columns-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Ensure the .woocommerce div wrapper itself is full width */
.rs-homepage-section .woocommerce,
.rs-homepage-section > p > .woocommerce,
.rs-homepage-section .entry-content .woocommerce {
    max-width: var(--container-max-width) !important;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--space-6);
    box-sizing: border-box;
}

/* Strip wpautop paragraph wrappers from sections */
.rs-homepage-section p:has(> .woocommerce) {
    margin: 0;
    padding: 0;
}

/* Override WooCommerce float-based product item widths inside homepage sections.
   WooCommerce woocommerce.css sets li.product { float: left; width: X% } which
   conflicts with our CSS Grid layout on ul.products. The float is ignored inside
   a grid container, but the explicit width% still applies and calculates to a small
   pixel value. Force auto width so the grid fr units control column sizing. */
.rs-homepage-section ul.products li.product,
.rs-homepage-section ul.products li.product-category {
    width: auto !important;
    float: none !important;
    min-width: 0 !important;
    margin-right: 0 !important;
}

/* Product images: fill their column, maintain square aspect ratio */
.rs-homepage-section ul.products li.product img,
.rs-homepage-section ul.products li.product-category img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Hide the WooCommerce Wishlist plugin block on homepage product grids.
   The plugin adds a large heart icon + "Add to Wishlist" text below each
   product card, which makes cards very tall at narrow widths. It remains
   fully functional on individual product pages.
   Handles both YITH and RCP wishlist plugins. */
.rs-homepage-section .yith-wcwl-add-to-wishlist,
.rs-homepage-section .add_to_wishlist,
.rs-homepage-section .yith-wcwl-wishlist-icon,
.rs-homepage-section .rcp-wishlist-toggle,
.rs-homepage-section [class*="wishlist-toggle"],
.rs-homepage-section [class*="wcwl"] {
    display: none !important;
}

/* Remove excess top padding from the header white space above hero.
   Storefront's site-header has a transparent area above the nav bar. */
.home .site-header {
    padding-top: 0 !important;
}

/* Storefront sets ~68px margin-bottom on .site-header (for sticky cart offset etc).
   On the homepage this creates a white gap between the nav and the hero section.
   Zero it out so the hero butts directly against the nav. */
.home .site-header,
.home #masthead {
    margin-bottom: 0 !important;
}

/* Tighten category card placeholder image height */
.rs-homepage-section ul.products.columns-3 li.product-category .woocommerce-loop-category__title {
    font-size: 1rem;
    text-align: center;
    padding: var(--space-3);
}

@media (max-width: 1024px) {
    .rs-homepage-section ul.products.columns-4,
    .rs-homepage-section .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .rs-homepage-section ul.products.columns-4,
    .rs-homepage-section .woocommerce ul.products,
    .rs-homepage-section--alt ul.products.columns-3,
    .rs-homepage-section--alt .woocommerce ul.products.columns-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Category grid on homepage — Storefront renders these as ul.products.columns-3 */
.rs-homepage-section--alt .woocommerce ul.products.columns-3,
.rs-homepage-section--alt .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
}

/* Category card image height — taller for category hero shots */
.rs-homepage-section--alt .woocommerce ul.products li.product a img {
    height: 260px;
}

/* Dark section product cards — keep white cards on dark background */
.rs-homepage-section--dark .woocommerce ul.products li.product {
    background: rgba(255, 255, 255, 0.95);
}

/* Mobile adjustments for sections */
@media (max-width: 768px) {
    .rs-homepage-section {
        padding: var(--space-10) var(--space-4);
    }

    .rs-section-header h2 {
        font-size: var(--font-size-2xl);
    }

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

/* =============================================================================
   Header — Storefront colour override
   Storefront injects inline CSS for header colours via Customizer.
   These rules use !important to guarantee the child theme wins.
   ============================================================================= */
.site-header,
.storefront-primary-navigation .main-navigation,
#masthead {
    background-color: var(--color-primary) !important;
}

/* Ensure nav links are white on the navy header */
.main-navigation ul li a,
.storefront-primary-navigation .main-navigation ul li a,
.storefront-handheld-footer-bar ul li a {
    color: var(--color-white) !important;
}

.main-navigation ul li a:hover,
.storefront-primary-navigation .main-navigation ul li a:hover {
    color: var(--color-accent-light) !important;
    text-decoration: none;
}

/* Handheld nav background on mobile */
.storefront-handheld-footer-bar {
    background-color: var(--color-primary-dark) !important;
}

/* =============================================================================
   WooCommerce product grid — square aspect ratio for retail product images
   Square (1:1) is the industry standard for clothing/footwear/accessories.
   ============================================================================= */
.woocommerce ul.products li.product a img {
    height: 240px;
    width: 100%;
    object-fit: cover;
    object-position: top center;
}

/* =============================================================================
   Storefront site branding area — full-width nav bar
   ============================================================================= */
.storefront-primary-navigation {
    background-color: var(--color-primary);
}

.site-branding {
    padding: var(--space-4) 0;
}

/* Cart icon in header */
.storefront-header-cart a,
.storefront-header-cart a:visited {
    color: var(--color-white) !important;
}

.storefront-header-cart .count {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
}

/* Search form in header */
.site-search .search-field {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

.site-search .search-field::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* =============================================================================
   WooCommerce buttons — full-width add-to-cart on product cards
   ============================================================================= */
.woocommerce ul.products li.product .button {
    display: block;
    text-align: center;
    width: calc(100% - 2 * var(--space-4));
    margin: 0 var(--space-4) var(--space-4);
}

/* =============================================================================
   Breadcrumbs
   ============================================================================= */
.woocommerce-breadcrumb {
    padding: var(--space-3) 0;
    font-size: var(--font-size-sm);
    color: var(--color-medium-gray);
    border-bottom: 1px solid var(--color-light-gray);
    margin-bottom: var(--space-6);
}

.woocommerce-breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

/* =============================================================================
   Shop page heading & count
   ============================================================================= */
.woocommerce .woocommerce-result-count {
    font-size: var(--font-size-sm);
    color: var(--color-medium-gray);
}

.woocommerce .woocommerce-ordering select {
    border-color: var(--color-light-gray);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
}

/* =============================================================================
   Footer — 3-column widget layout
   ============================================================================= */
.site-footer .widget-area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-4) var(--space-10);
}

@media (max-width: 768px) {
    .site-footer .widget-area {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

.site-footer .widget-title,
.site-footer .footer-widget__title {
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

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

.site-footer ul li {
    padding: var(--space-1) 0;
}

.site-footer ul li a {
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.site-footer ul li a:hover {
    color: var(--color-accent-light);
}

/* Copyright bar */
.site-info {
    text-align: center;
    padding: var(--space-4) var(--space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--font-size-sm);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* =============================================================================
   Notices — WooCommerce flash messages
   ============================================================================= */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--color-primary) !important;
}

.woocommerce-error {
    border-top-color: var(--color-error) !important;
}

/* =============================================================================
   Print Styles
   ============================================================================= */
@media print {
    .site-header,
    .site-footer,
    .woocommerce-breadcrumb,
    .related.products,
    .cart-collaterals,
    .woocommerce-tabs {
        display: none;
    }

    body {
        font-size: 12pt;
        color: #000;
    }
}