/*
 * Layout System — Retail Store Theme
 * ============================================================================
 * This file owns ALL page-level layout: grid areas, containers, breakpoints,
 * product grids, flexbox utilities, and vertical rhythm.
 *
 * Architecture:
 *   - Mobile-first: base styles target 320px, media queries add up
 *   - CSS Grid for page structure (named areas)
 *   - CSS Grid for product listings (auto-fit with subgrid alignment)
 *   - Flexbox for component-level layouts (nav, card footers, form groups)
 *   - All spacing via --space-* tokens — zero hardcoded pixel values
 *
 * Load order: tokens (in style.css :root) → this file → components.css
 *
 * Breakpoints:
 *   320px   base (default — all mobile-first rules here)
 *   480px   @media (min-width: 30em)   large phones
 *   768px   @media (min-width: 48em)   tablets
 *   1024px  @media (min-width: 64em)   desktop
 *   1440px  @media (min-width: 90em)   wide desktop
 * ============================================================================
 */

/* =============================================================================
   SECTION 1: Layout Tokens
   Extends style.css :root with layout-specific custom properties.
   Kept here (not style.css) so this file is the single source for layout config.
   ============================================================================= */
:root {
    /* Container widths */
    --container-narrow:     38rem;      /* 608px — reading width (product descriptions) */
    --container-standard:   75rem;      /* 1200px — main content grid */
    --container-wide:       90rem;      /* 1440px — store-finder map, max bleed sections */

    /* Container inline padding — fluid, scales with viewport */
    --container-px:         clamp(var(--space-4), 4vw, var(--space-12));

    /* Grid gaps — semantic names mapping to spacing tokens */
    --gap-card:             clamp(var(--space-4), 2vw, var(--space-6));    /* product card gap */
    --gap-column:           clamp(var(--space-6), 3vw, var(--space-10));   /* column separator */
    --gap-section:          clamp(var(--space-10), 5vw, var(--space-16));  /* between major sections */

    /* Section vertical rhythm — padding for homepage sections */
    --section-py:           clamp(var(--space-10), 8vw, var(--space-20));  /* 40px → 80px */
    --section-header-mb:    clamp(var(--space-8),  4vw, var(--space-12));  /* 32px → 48px */

    /* Sidebar width — shop/category pages with filters */
    --sidebar-width:        280px;

    /* Sticky header height — used for offset calculations */
    --header-height:        var(--space-16);  /* estimated; updated by JS if needed */
}


/* =============================================================================
   SECTION 2: Container System
   Three container sizes: narrow (reading), standard (content), wide (store map).
   Full-bleed sections use .rs-section-inner to contain their inner content.
   ============================================================================= */

/*
 * .container — standard content container (1200px max)
 * Wraps product grids, article content, and most page sections.
 */
.container,
.rs-container {
    width: 100%;
    max-width: var(--container-standard);
    margin-inline: auto;
    padding-inline: var(--container-px);
    box-sizing: border-box;
}

/*
 * .container--narrow — reading width container (608px max)
 * Used for: product descriptions, blog posts, account text blocks.
 */
.container--narrow {
    max-width: var(--container-narrow);
}

/*
 * .container--wide — full-width content container (1440px max)
 * Used for: store finder map, wide image galleries.
 */
.container--wide {
    max-width: var(--container-wide);
}

/*
 * .rs-section-inner — inner wrapper for full-bleed sections.
 * Pattern: full-bleed background + constrained inner content.
 * Usage: <section class="rs-homepage-section">
 *          <div class="rs-section-inner">...</div>
 *        </section>
 */
.rs-section-inner {
    width: 100%;
    max-width: var(--container-standard);
    margin-inline: auto;
    padding-inline: var(--container-px);
    box-sizing: border-box;
}


/* =============================================================================
   SECTION 3: Page Grid — Named Areas
   CSS Grid for the full-page layout backbone.
   Applied to #page (Storefront's outermost wrapper).

   Default layout (no sidebar):
     header | nav | main | footer — single column stack.

   With sidebar (.has-sidebar):
     header | nav | [sidebar + main] | footer — two columns at desktop.
   ============================================================================= */

/*
 * Base page grid — mobile: single column.
 * Named areas: header, nav, main, footer.
 * Storefront renders: #masthead (header), .storefront-primary-navigation (nav),
 * #content (main), .site-footer (footer).
 */
#page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:
        auto   /* header */
        auto   /* nav bar */
        1fr    /* main content */
        auto;  /* footer */
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
    min-height: 100dvh;  /* dynamic viewport height — mobile browser chrome safe */
}

/* Storefront region → grid area mapping */
#masthead,
.site-header {
    grid-area: header;
}

.storefront-primary-navigation {
    grid-area: nav;
}

#content,
.site-content {
    grid-area: main;
}

.site-footer {
    grid-area: footer;
}

/*
 * Desktop: introduce sidebar column when .has-sidebar is on <body>.
 * The sidebar is the WooCommerce filter panel on shop/category pages.
 * At 1024px+ the #primary (content) and #secondary (sidebar) split into columns.
 */
@media (min-width: 64em) {
    body.has-sidebar #content .col-full {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        grid-template-areas: "sidebar main";
        gap: var(--gap-column);
        align-items: start;
    }

    body.has-sidebar #secondary.widget-area {
        grid-area: sidebar;
        position: sticky;
        top: calc(var(--header-height) + var(--space-4));
        max-height: calc(100svh - var(--header-height) - var(--space-8));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body.has-sidebar #primary.content-area {
        grid-area: main;
        min-width: 0; /* prevent grid blowout */
    }
}

/* Sidebar hidden below desktop */
@media (max-width: 63.99em) {
    #secondary.widget-area {
        display: none; /* filter panel is triggered via mobile toggle (JS) */
    }
}


/* =============================================================================
   SECTION 4: Product Grid System
   CSS Grid for WooCommerce product listings with subgrid card alignment.

   Grid approach: fixed columns per breakpoint (not auto-fill) because
   WooCommerce controls PHP-side item count via .columns-N classes, making
   auto-fill/auto-fit unreliable (orphaned last rows at fixed column counts).

   Subgrid: aligns title, price, and button across all cards in a row.
   ============================================================================= */

/*
 * Base (320px): 1 column — critical. Two columns at 320px = ~140px cards, too narrow.
 * WooCommerce float/width overrides: width:auto + float:none are intentional.
 * Inside a grid container, float is ignored but explicit WC width:30.75% still
 * calculates to a small pixel value — overriding to auto is correct behaviour.
 */
.woocommerce ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5 {
    display: grid !important;
    grid-template-columns: 1fr;             /* 320px base: single column */
    gap: var(--gap-card);
    list-style: none;
    margin: 0;
    padding: 0;
    /* Subgrid parent: 4 row tracks per card (image, title, price, button) */
    grid-auto-rows: auto;
}

/* Product cards: subgrid participation for cross-row alignment */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
    display: grid !important;
    grid-template-rows: auto 1fr auto auto;  /* image | title | price | button */
    width: auto !important;
    float: none !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;  /* gap handles spacing */
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition:
        box-shadow var(--transition-normal),
        translate var(--transition-normal);
    position: relative;
}

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

/*
 * 480px: 2 columns — phones from 480px can handle 2 cards comfortably.
 * Each card ~220px at 480px viewport with 1rem gap.
 */
@media (min-width: 30em) {
    .woocommerce ul.products,
    .woocommerce ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 1-column overrides stay single at 480px — used for checkout/mini grids */
    .woocommerce ul.products.columns-1 {
        grid-template-columns: 1fr !important;
    }
}

/*
 * 768px: 3 columns on standard grids, 2 on narrow contexts (cart widget).
 */
@media (min-width: 48em) {
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .woocommerce ul.products.columns-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/*
 * 1024px: 4 columns — desktop standard. Stays 3-col in sidebar layouts
 * since the product area is narrower when sidebar is present.
 */
@media (min-width: 64em) {
    .woocommerce ul.products.columns-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .woocommerce ul.products.columns-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Sidebar context: one fewer column to maintain readable card width */
    body.has-sidebar .woocommerce ul.products.columns-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/*
 * 1440px: 5 columns available for wide viewports, but only if WC sets columns-5.
 * Default 4-column stays — wider cards look better on large screens.
 */
@media (min-width: 90em) {
    .woocommerce ul.products.columns-5 {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/*
 * Homepage section grids — override column counts per section type.
 * These override the global .woocommerce ul.products rules above for homepage context.
 */

/* Featured products: 4-column on desktop, progressive reduction */
.rs-homepage-section .woocommerce ul.products,
.rs-homepage-section ul.products {
    grid-template-columns: 1fr !important;          /* 320px base */
    max-width: var(--container-standard);
    margin-inline: auto;
}

@media (min-width: 30em) {
    .rs-homepage-section .woocommerce ul.products,
    .rs-homepage-section ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 48em) {
    .rs-homepage-section .woocommerce ul.products,
    .rs-homepage-section ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 64em) {
    .rs-homepage-section .woocommerce ul.products.columns-4,
    .rs-homepage-section .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Category grid: 3-column (alt sections) — never more than 3 for visual breathing room */
@media (min-width: 48em) {
    .rs-homepage-section--alt .woocommerce ul.products.columns-3,
    .rs-homepage-section--alt ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Product float/width global reset — clears WooCommerce woocommerce.css interference */
.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 column, consistent aspect ratio */
.rs-homepage-section ul.products li.product a img,
.rs-homepage-section ul.products li.product-category a img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top center;
}


/* =============================================================================
   SECTION 5: Store Finder Grid
   Responsive card grid for the 7-store location listing.
   Uses auto-fill with a minimum card width — no explicit breakpoints needed
   (the RAM pattern handles wrapping intrinsically).
   ============================================================================= */

/*
 * Store finder location cards — RAM pattern (Repeat Auto Minmax).
 * min(300px, 100%) prevents overflow on 320px: when 300px > viewport,
 * 100% takes over ensuring the card fills the available width.
 */
.rs-store-finder__locations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--gap-card);
}

/* Store map — full width with responsive height */
.rs-store-finder__map {
    width: 100%;
    height: clamp(240px, 40vw, 480px);  /* 240px mobile → 480px desktop */
    background: var(--color-light-gray);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: var(--gap-section);
}


/* =============================================================================
   SECTION 6: Homepage Section Layout
   Full-bleed sections with contained inner content.
   Each section spans viewport width; inner content is constrained.
   ============================================================================= */

/*
 * .rs-homepage-section — base section: full-bleed background, centered inner content.
 * Vertical padding uses the fluid --section-py token.
 */
.rs-homepage-section {
    padding-block: var(--section-py);
    padding-inline: 0;  /* zero — inner containers handle padding */
    max-width: 100%;
    width: 100%;
}

/* Inner content constraint — applies to direct WooCommerce wrappers inside sections */
.rs-homepage-section .woocommerce,
.rs-homepage-section > p > .woocommerce,
.rs-homepage-section .entry-content .woocommerce {
    max-width: var(--container-standard) !important;
    width: 100% !important;
    margin-inline: auto;
    padding-inline: var(--container-px);
    box-sizing: border-box;
}

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

/*
 * .rs-section-header — centred title + subtitle block above section content.
 * Margin below uses fluid --section-header-mb.
 */
.rs-section-header {
    text-align: center;
    max-width: 700px;
    margin-inline: auto;
    margin-bottom: var(--section-header-mb);
    padding-inline: var(--container-px);
}

.rs-section-header h2 {
    font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    color: var(--color-near-black);
    margin-bottom: var(--space-3);
    text-wrap: balance;
}

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

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

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

/*
 * content-visibility: auto on below-fold homepage sections.
 * Cuts initial paint time significantly for sections not in the viewport.
 * contain-intrinsic-size hints the browser's placeholder dimensions.
 * NOTE: Applied only to sections 3+ (category grid, new arrivals) — first two
 * sections are frequently above the fold and should render immediately.
 */
.rs-homepage-section--alt,
.rs-homepage-section--dark {
    content-visibility: auto;
    contain-intrinsic-size: 0 700px;  /* approx section height — prevents scroll jump */
}

/* Footer also benefits from content-visibility */
.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 0 360px;
}


/* =============================================================================
   SECTION 7: Hero Section Layout
   Full-bleed gradient hero. Uses CSS Grid for stacked layer effect —
   background pseudo-element and content on the same grid cell.
   ============================================================================= */

/*
 * .rs-hero — layered grid hero: background and content stack in one cell.
 * min-height uses dvh (dynamic viewport height) — mobile browser chrome safe.
 * 50dvh = half the dynamic viewport, ensuring hero is impactful without
 * being a full-height blocker on small phones.
 */
.rs-hero {
    display: grid;
    min-height: clamp(320px, 50dvh, 560px);
    place-items: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white);
    padding-block: var(--section-py);
    padding-inline: var(--container-px);
    position: relative;
    overflow: hidden;
}

/* Subtle decorative background circles — inside the grid layer */
.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;
    pointer-events: none;
}

/* Hero inner content — centred, constrained reading width */
.rs-hero__content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    width: 100%;
    text-align: center;
}

.rs-hero__title {
    font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-4xl));
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-bottom: var(--space-5);
    line-height: var(--line-height-tight);
    text-wrap: balance;
}

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

/* CTA button row — flex with wrap for small screens */
.rs-hero__cta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}


/* =============================================================================
   SECTION 8: Header Layout
   Two-row sticky header: branding row + navigation row.
   Both rows share the navy background.
   ============================================================================= */

/*
 * Site header — sticky at top, full viewport width.
 * z-index: 1000 ensures it stacks above product images and overlays.
 */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background-color: var(--color-primary) !important;
    box-shadow: var(--shadow-sm);
}

/* Branding row — logo left, optional search right */
.site-header .col-full {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-inline: var(--container-px);
    padding-block: var(--space-3);
    max-width: var(--container-standard);
    margin-inline: auto;
    box-sizing: border-box;
}

.site-branding {
    flex-shrink: 0;
    padding-block: 0;
}

/* Navigation row — full width, flex row with nav + cart */
.storefront-primary-navigation {
    background-color: var(--color-primary) !important;
    width: 100%;
}

.storefront-primary-navigation .col-full {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    max-width: var(--container-standard) !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: var(--container-px) !important;
    box-sizing: border-box !important;
}

/* Nav links list — flex row, no wrap */
.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;
    gap: 0;
}

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

/* Hide fallback page list — WP outputs this when custom menu is not assigned */
.storefront-primary-navigation .main-navigation .menu:not(.nav-menu) {
    display: none !important;
}

/* Cart widget — pushed to far right by margin-left: auto */
.storefront-primary-navigation .site-header-cart,
.storefront-primary-navigation .storefront-header-cart {
    float: none !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    list-style: none !important;
    padding: 0 !important;
}


/* =============================================================================
   SECTION 9: Footer Grid Layout
   Three-column widget grid with asymmetric columns at desktop.
   Progressively stacks to single column at mobile.
   ============================================================================= */

/*
 * Footer widget area — three columns on desktop.
 * Asymmetric: company info (2fr) is wider than navigation columns (1fr each).
 * This gives the company description and address more space.
 */
.site-footer .widget-area {
    display: grid;
    grid-template-columns: 1fr;      /* 320px base: stacked */
    gap: var(--space-8);
    max-width: var(--container-standard);
    margin-inline: auto;
    padding-inline: var(--container-px);
    padding-bottom: var(--space-10);
}

/* 768px: two-column footer */
@media (min-width: 48em) {
    .site-footer .widget-area {
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-column);
    }
}

/* 1024px: three-column footer — company info wider */
@media (min-width: 64em) {
    .site-footer .widget-area {
        grid-template-columns: 2fr 1fr 1fr;
        gap: var(--gap-column);
    }
}

/* Copyright bar — separate from widget grid, centred */
.site-info {
    max-width: var(--container-standard);
    margin-inline: auto;
    padding-inline: var(--container-px);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}


/* =============================================================================
   SECTION 10: Cart and Checkout Grid Layout
   WooCommerce cart: items table + totals sidebar.
   Checkout: billing form + order review — standard 60/40 split.
   ============================================================================= */

/*
 * Cart page layout — two-column at desktop: items table (wider) + totals (narrower).
 * WooCommerce cart structure: .woocommerce-cart-form + .cart-collaterals
 */
.woocommerce-page.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: 1fr;  /* mobile: stacked */
    gap: var(--gap-column);
    align-items: start;
}

@media (min-width: 64em) {
    .woocommerce-page.woocommerce-cart .woocommerce {
        grid-template-columns: 3fr 1fr;  /* ~75% items / 25% totals */
    }
}

/*
 * Checkout page layout — two-column at desktop.
 * WooCommerce checkout: #customer_details (billing/shipping) + #order_review
 */
.woocommerce-checkout #content form.woocommerce-checkout,
.woocommerce-page.woocommerce-checkout form.woocommerce-checkout {
    display: grid;
    grid-template-columns: 1fr;  /* mobile: stacked */
    gap: var(--gap-column);
    align-items: start;
}

@media (min-width: 64em) {
    .woocommerce-checkout #content form.woocommerce-checkout,
    .woocommerce-page.woocommerce-checkout form.woocommerce-checkout {
        grid-template-columns: 3fr 2fr;  /* 60% billing / 40% order summary */
    }

    /* Order review column — sticky for long billing forms */
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        position: sticky;
        top: calc(var(--header-height) + var(--space-4));
    }
}

/* Cart totals and order review — shared visual style */
.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);
}


/* =============================================================================
   SECTION 11: Single Product Page Layout
   Two-column grid: product image gallery (left) + product details (right).
   Stacks to single column at tablet and below.
   ============================================================================= */

/*
 * Single product — CSS Grid: images left, info right.
 * align-items: start prevents the shorter column from stretching.
 */
.woocommerce div.product {
    display: grid;
    grid-template-columns: 1fr;  /* mobile: stacked */
    gap: var(--space-8);
    align-items: start;
}

@media (min-width: 48em) {
    .woocommerce div.product {
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-column);
    }
}

/* Store availability widget — full width below product details */
.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-block: var(--space-6);
}


/* =============================================================================
   SECTION 12: Flexbox Utility System
   Component-level layout utilities. Scoped to avoid polluting WooCommerce output.
   All gap values reference --space-* tokens.
   ============================================================================= */

/*
 * Generic flex direction utilities
 */
.flex-row   { display: flex; flex-direction: row; }
.flex-col   { display: flex; flex-direction: column; }

/*
 * Alignment combos — most common WooCommerce UI patterns
 */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start   { display: flex; align-items: center; justify-content: flex-start; }
.flex-end     { display: flex; align-items: center; justify-content: flex-end; }

/*
 * Wrap control
 */
.flex-wrap   { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/*
 * Gap utilities — use spacing tokens, not raw values
 */
.flex-gap-xs { gap: var(--space-1); }
.flex-gap-sm { gap: var(--space-2); }
.flex-gap-md { gap: var(--space-4); }
.flex-gap-lg { gap: var(--space-6); }
.flex-gap-xl { gap: var(--space-8); }

/*
 * Flex item sizing helpers
 */
.flex-grow   { flex: 1 1 auto; min-width: 0; }
.flex-shrink { flex: 0 0 auto; }
.flex-none   { flex: none; }

/*
 * Component-specific flex patterns — applied directly to component selectors.
 * Named for what they do rather than abstract utilities.
 */

/* Navigation bar: items in a horizontal row, centred vertically */
.main-navigation ul > li {
    display: flex;
    align-items: center;
}

/* Product card footer: price left, button right */
.woocommerce ul.products li.product {
    /* Defined as grid in Section 4 — internal flex not needed */
}

/* Store availability item: store name left, status right */
.rs-store-availability__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

/* Store availability list: vertical stack */
.rs-store-availability__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Location card actions: horizontal row of links, wraps on small cards */
.rs-location-card__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

/* Section title with icon: icon + text side by side */
.rs-store-availability__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Hero CTA buttons: row, wraps on narrow screens */
.rs-hero__cta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

/* Breadcrumb: horizontal list with separators */
.woocommerce-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

/* Price display: regular + sale price side by side */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Star ratings: horizontal star row */
.woocommerce .star-rating {
    display: flex;
    align-items: center;
}


/* =============================================================================
   SECTION 13: Spacing Utilities
   Margin and padding helpers for WooCommerce override contexts.
   All values reference --space-* tokens — no raw pixel values.
   ============================================================================= */

/* Margin block (vertical) */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Horizontal centring */
.mx-auto { margin-inline: auto; }

/* Padding block */
.py-4  { padding-block: var(--space-4);  }
.py-6  { padding-block: var(--space-6);  }
.py-8  { padding-block: var(--space-8);  }
.py-12 { padding-block: var(--space-12); }

/* Padding inline */
.px-4  { padding-inline: var(--space-4);  }
.px-6  { padding-inline: var(--space-6);  }
.px-8  { padding-inline: var(--space-8);  }

/*
 * .flow — vertical rhythm utility.
 * Applies consistent margin between sibling elements.
 * Safe for WooCommerce content areas — uses margin-top on subsequent siblings
 * rather than modifying WooCommerce's own spacing.
 */
.flow > * + * {
    margin-block-start: var(--flow-space, var(--space-4));
}

/* Override flow spacing for specific element types */
.flow > h2 { --flow-space: var(--space-8); }
.flow > h3 { --flow-space: var(--space-6); }
.flow > p  { --flow-space: var(--space-4); }


/* =============================================================================
   SECTION 14: Container Queries
   Component-level responsive behaviour based on container width, not viewport.
   Applied to components that may appear in sidebars, widgets, or narrow contexts.
   ============================================================================= */

/*
 * Store availability widget — container context.
 * When widget is in a narrow sidebar (~280px), list stays vertical.
 * When in a wide product page column (~600px+), can go two-column.
 */
.rs-store-availability {
    container-type: inline-size;
    container-name: store-availability;
}

@container store-availability (min-width: 400px) {
    .rs-store-availability__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2) var(--space-6);
    }
}

/*
 * Location card — container context.
 * Actions row layout adapts to card width.
 */
.rs-location-card {
    container-type: inline-size;
    container-name: location-card;
}

@container location-card (max-width: 280px) {
    .rs-location-card__actions {
        flex-direction: column;
    }

    .rs-location-card__actions a {
        text-align: center;
    }
}

/*
 * Homepage section — container context.
 * Hero CTA stacks on narrow containers (used inside page-builder blocks).
 */
.rs-homepage-section {
    container-type: inline-size;
    container-name: homepage-section;
}

@container homepage-section (max-width: 480px) {
    .rs-hero__cta {
        flex-direction: column;
        align-items: stretch;
    }

    .rs-hero__cta .button-primary {
        text-align: center;
    }
}


/* =============================================================================
   SECTION 15: Homepage — Storefront Full-Width Overrides
   Storefront constrains homepage content with .col-full max-width and
   auto margins. These overrides restore full-width for full-bleed sections
   while keeping inner content containers sane.
   ============================================================================= */

/* Hide WP page title on homepage — hero replaces it */
.home .entry-header,
.home .page-title,
.home h1.entry-title,
.home .woocommerce-breadcrumb {
    display: none !important;
}

/* Remove entry-content constraints on homepage — sections handle their own padding */
.home .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.home .hentry,
.home .page {
    margin: 0 !important;
    padding: 0 !important;
}

/* Break Storefront .col-full max-width on homepage — sections are full-bleed */
.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-inline: 0 !important;
    margin-inline: 0 !important;
}

/* Remove header margin-bottom gap between nav and hero */
.home .site-header,
.home #masthead {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}

/* Wishlist plugin suppression on homepage grids — keeps cards compact */
.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;
}


/* =============================================================================
   SECTION 16: Print Layout
   Override grid/flex for clean print output.
   Hides navigation, checkout widgets, and interactive elements.
   ============================================================================= */
@media print {
    /* Reset grid layouts for linear document flow */
    #page,
    .woocommerce div.product,
    .woocommerce-cart .woocommerce,
    .woocommerce-checkout form.woocommerce-checkout,
    .site-footer .widget-area {
        display: block;
    }

    /* Hide non-print elements */
    .site-header,
    .storefront-primary-navigation,
    .site-footer,
    .woocommerce-breadcrumb,
    .related.products,
    .cart-collaterals,
    .woocommerce-tabs,
    .rs-store-finder__map,
    .rs-hero__cta {
        display: none;
    }

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

    .rs-homepage-section {
        content-visibility: visible;  /* remove paint optimisation for print */
        padding: 0;
    }
}