/*
Theme Name: GCM Master WooCommerce Theme
Theme URI: https://greatcreativemedia.co.za
Description: Master WooCommerce theme by Great Creative Media. Custom PHP theme (no page builder), LiteSpeed-optimised, PayFast-ready, WhatsApp enquiry integration, dark/amber ecommerce aesthetic. Deployed for Model Tech Hobbies as first implementation.
Author: Great Creative Media
Author URI: https://greatcreativemedia.co.za
Version: 1.0.28
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
WC requires at least: 7.0
WC tested up to: 8.9
License: Private
Text Domain: modeltech

Changelog:
1.0.28 — Order received / thank-you page styling
- Added: Styling for the order-received / thank-you page, which previously had NO theme styling at all (it rendered as plain, unstyled default WooCommerce markup).
        Note: unlike the cart and checkout, this page had no custom grid, so it was not broken/squashed — just unstyled. This release makes it match the theme.
        Styled: the "Thank you, your order has been received" confirmation line (display font, navy), the order overview bar (order number / date / email / total / payment method laid out as a bordered row of cells, stacking on mobile), the order details table (bordered, rounded, bold order total in navy), and the billing/shipping address blocks (two-column cards, single column on mobile).
- Note: WooCommerce transactional EMAILS (order confirmation etc.) use WooCommerce's own templates, not the theme, so they are unaffected and were not changed.

1.0.27 — Checkout page layout fix
- Fixed: The checkout page was crammed into the right half of the page — billing details, order summary, PayFast, and Place Order all squashed into a narrow right column with the entire left half empty. (Same class of bug as the cart in v1.0.26.)
        Root cause: `.woocommerce-checkout .woocommerce` was gridded with `1fr 400px`, assuming its two direct children were the billing form and the order review. They are not — WooCommerce nests those inside `form.checkout` alongside the notice and login/coupon toggles, so both real columns piled into the right track.
        Fix: Grid the checkout FORM itself (`form.checkout`), whose direct children ARE `#customer_details` and `#order_review`. Billing details now occupy the left column; the order review sits in a sticky card on the right. Collapses to a single column on mobile with the order review static.
- Improved: Checkout field focus state now uses the amber ring (matching the rest of the theme), order-review table is right-aligned with left-aligned labels, and shipping-method radios in the order review are laid out cleanly.
- My Account page reviewed — layout is correct, no changes needed.

1.0.26 — Cart page layout fix
- Fixed: The cart page was badly broken — the product-name column collapsed to one or two words per line down a tall narrow column, the cart table was squashed into the right half of the page, and the "Cart totals" box floated disconnected on the left.
        Root cause: `.woocommerce-cart .woocommerce` used `display: grid; grid-template-columns: 1fr 340px`, which assumed the cart table and the totals box were the two direct children of that container. In this WooCommerce version the DOM is different — the table sits inside `form.woocommerce-cart-form` and `.cart-collaterals` is a separate block — so the grid columns landed on the wrong elements, squashing the table into the 340px column.
        Fix: Replaced the fragile grid with a robust block layout that doesn't depend on the exact wrapper structure — the cart form/table is full width, and the totals sit in a card floated to the right below it (max-width 400px, full width on mobile). Added explicit column widths so the product name no longer collapses (remove 40px, thumbnail 90px, name auto/min 220px, price/qty/subtotal nowrap).
- Added: Proper cart styling that was previously missing or incomplete — remove (×) button as a circular chip that turns red on hover, quantity input styled to match the theme, coupon field + "Update cart"/"Apply coupon" buttons themed (navy → amber), shipping method options in the totals laid out cleanly, and the totals table right-aligned with a bold order-total row.
- Note: Checkout and My Account pages should be reviewed with the same scrutiny — they're in the same "less frequently looked at but critical to the sale" category as the cart was. Flagged for a follow-up pass.

1.0.25 — Gravity Forms spacing & rhythm
- Fixed: Form fields read as loose and disconnected — the gap between a label and its own input was nearly as large as the gap between separate fields, so the eye could not tell which label belonged to which box.
        Fix: Established a clear spacing rhythm. The gap WITHIN a field (label → input) is now 6px; the gap BETWEEN fields is 20px. Sub-labels (First/Last on a name field) sit 4px above their inputs, and field descriptions 5px below. Each field now reads as a single unit, and the form is compact without being cramped.
- Fixed: Section break headings ("About You", "How Can We Reach You?") created large vertical voids.
        Fix: Tightened the section margins and reduced the title/description sizes and line-heights, so a section heading now sits close to the fields it introduces rather than floating in its own band.
- Fixed: Inconsistent field widths — some fields (e.g. email) rendered half-width while others (phone, dropdown) rendered full-width, producing ragged, accidental-looking column breaks.
        Root cause: the two-column grid was applying to every field by default. Fix: all fields are now full-width by default; a field only sits half-width if it is explicitly set to half-width in Gravity Forms. Textareas, checkboxes, radios, consent, name, section and HTML fields are always full-width regardless.
- Fixed: Checkbox and radio label text was jammed hard against the boxes, with the first character clipping into the checkbox.
        Root cause: the gap was set with flex `gap` on the parent, which Gravity Forms' own stylesheet was overriding.
        Fix: The gap is now set as a margin ON THE INPUT itself (10px for choices, 12px for the consent field), with !important, so GF cannot collapse it. Choice labels and the consent label have their margins/padding explicitly zeroed for the same reason. Consent text now wraps cleanly beside the checkbox instead of clipping.

1.0.24 — Gravity Forms styling pass 2 (tested against a real form)
- Fixed: Submit button rendered in Gravity Forms' default blue instead of the theme's navy → amber.
        Root cause: GF ships its own stylesheet which loads AFTER the theme's and applies high-specificity button rules. The v1.0.18 selectors were too narrow and were being overridden.
        Fix: Broadened the selectors to cover every button variant GF uses across versions (.gform_button, input[type=submit], button[type=submit], .gform-button--primary, and .gform_footer scoped versions) and applied !important to the button properties specifically. Navy background, white text, flips to amber on hover, 52px tall to match the theme's other primary buttons.
- Fixed: The "Select All" helper button GF renders on checkbox groups was also default blue and crowded the choices.
        Fix: Styled as a subtle outline chip (uppercase, small, muted) that turns amber on hover, and given flex-shrink: 0 so it no longer squeezes the checkbox labels.
- Fixed: Checkbox / radio groups were cramped and hard to read.
        Fix: The choice list is now a wrapping flex row with proper spacing (10px/22px gap), each choice a flex row with an aligned 17px input and a readable label. Amber accent-color on the inputs. Radios get a circular border-radius.
- Fixed: Inputs, selects, and textareas were picking up GF's thin default borders rather than the theme's.
        Fix: Border rules given !important so they beat GF's stylesheet — 1.5px border, theme radius, amber focus ring. Select now has a custom chevron (no native OS dropdown arrow) and the textarea has a sensible min-height with vertical-only resize.
- Added: Styling for GF field types not previously covered — section breaks (gsection: display-font heading + muted description with a bottom rule), sub-labels (First/Last on a name field), field descriptions, and complex multi-input fields (name field lays out as a two-column grid, collapsing on mobile).
- Added: Consent field layout — checkbox aligned to the top of longer wrapping consent text, with any links in amber.
- Improved: Validation states — error labels turn red, error messages sized and coloured to match the theme, and the form-level error summary restyled (GF's own icon suppressed).
- Note: All of this is scoped to .mt-gf-wrap, so it only affects the themed Contact and Club forms and cannot leak into other Gravity Forms on the site.

1.0.23 — Multi-level navigation dropdown fix
- Fixed: The Products dropdown rendered as an unusable overlapping mess — sub-menu items laid out horizontally with badly wrapped text, and every nested level opened simultaneously, stacking on top of each other at wrong positions.
        Symptom: Hovering "Products" showed the level-1 items in a row (Slot Cars / Die Cast / Model Building Kits / Tools & Accessories) with text wrapping over multiple lines, AND all the level-2 sub-menus (Cars 1:24, Cars 1:18, Die-Cast Kits, Batteries, General Tools, Paints…) appeared at once, overlapping each other and the parent.
        Root cause — two bugs:
        1. `.primary-nav ul { display: flex }` applied to EVERY ul, including sub-menus. Dropdown items were laid out as a horizontal flex row instead of a vertical list.
        2. The open rule used a descendant selector — `.menu-item-has-children:hover .sub-menu` — so hovering the top-level item matched EVERY nested .sub-menu inside it, not just the immediate one. And only the top-level <li> had `position: relative`, so all of them anchored to that same element and stacked.
        Fix:
        - Flex row scoped to the top level only (`.primary-nav > ul`). Sub-menus are `display: block`.
        - Open rule changed to a direct-child selector (`li:hover > .sub-menu`), so only the hovered level opens.
        - Every `li` gets `position: relative`, so each nested sub-menu anchors to its own parent item.
        - Nested (2nd level and deeper) sub-menus now fly out to the RIGHT of their parent (`left: 100%`) rather than dropping down on top of it.
        - Added `:focus-within` alongside `:hover` for keyboard accessibility.
        - Added caret indicators: ▾ on top-level parents, ▸ on nested parents.
        - Added a drop shadow and a max-width so long category names wrap sensibly rather than stretching the panel.
- Added: Flyout edge guard (main.js) — if a nested flyout would overflow the right edge of the viewport, it flips to open leftwards instead (`.flip-left`). Desktop only; mobile expands inline.
- Changed: Mobile menu updated for the multi-level structure — all levels expand inline with progressive indentation and stepped-down type, and carets rotate to point down. No flyouts on mobile.

1.0.22 — Contextual category navigation
- Changed: The shop sidebar category list is now CONTEXTUAL rather than rendering the full taxonomy tree.
        Symptom: The sidebar rendered every category in the taxonomy. On staging (a partial import) that was already ~20 rows; against the real live taxonomy it would be 60–80+ rows and taller than the product grid — completely unusable.
        Root cause: The live product taxonomy is very large and deep — roughly 150+ nodes across four levels (product type → scale → brand → racing class), e.g. Die-Cast, Composite & Resin → 1:64 Cars → Mini GT → Porsche. Brand alone appears as a category ~70 times across different branches. No amount of styling, indentation, or accordion behaviour makes a 150-node tree workable in a sidebar.
        Fix: New mt_render_contextual_categories() shows only what is relevant to the customer's current position:
          • Shop root / no category → top-level categories only (~10 rows)
          • Inside a category → a "← Back to <parent>" link, the current category's children ("Browse in X"), and its siblings ("More in Y") with the current one highlighted
          • Leaf category → "← Back to <parent>" plus siblings
        The list never exceeds roughly 10–15 rows regardless of how large the taxonomy grows. Navigation up, down, and sideways is always one click away.
        This is fully compatible with the planned v2.0 faceted filtering — facets can join or replace this without rework.
- Fixed: Category count pills wrapped onto their own line below the category name.
        Root cause: The flex row had no flex sizing on its children, so the count pill was pushed to a new line when the category name was long. Fix: the name gets `flex: 1 1 auto; min-width: 0` and the count gets `flex: 0 0 auto; white-space: nowrap`, so the pill always sits inline on the right.
- Note: The underlying taxonomy still models three different things (product type, brand, and racing class) in one category tree. Migrating brand and class to WooCommerce product attributes, and building faceted filtering on them, remains the v2.0 item. This release makes the sidebar usable at full catalogue scale in the meantime.

1.0.21 — Shop sidebar: price slider + category hierarchy
- Fixed: "Filter by Price" widget rendered with no slider — just a bare "Filter" button and a plain text price range.
        Root cause: WC_Widget_Price_Filter needs jQuery UI Slider and WooCommerce's own wc-price-slider script to render the draggable track and handles. WooCommerce does not reliably auto-enqueue these, and the theme never enqueued them, so the widget fell back to its no-JS state.
        Fix: Explicitly enqueue 'wc-price-slider' and 'jquery-ui-slider' on shop, product category, and product tag archives (guarded with class_exists('WooCommerce')). Added full styling for the slider — 4px track, amber selected range, white circular handles with amber border, hover/focus scale and glow. The raw min/max number inputs are hidden (the slider is the control) and the Filter button is themed navy → amber on hover.
- Fixed: Duplicate "Filter by Price" heading — our themed .widget-title was rendered, and then the_widget() rendered the widget's own default title underneath it. Now passes an empty title and blank before/after title args to the_widget() so only our heading shows.
- Changed: Category list in the shop sidebar now renders with proper visual hierarchy.
        Symptom: The category list rendered flat, so nested categories looked like top-level ones. Because the taxonomy repeats names at different depths (there is a top-level "Cars 1:32" and another "Cars 1:32" nested under Slot Cars; likewise two "Classic" entries), customers saw what looked like duplicate categories with different counts and no way to tell them apart.
        Fix: Children are now indented with a left rule, and type steps down progressively by depth (level 2 → 3 → 4+ get smaller and lighter). Counts render as small pills instead of loose text. The current category is amber and bold; its ancestors are bold with an amber left rule on the branch, so you can always see where you are in the tree.
        Note: this is a DISPLAY fix. The underlying taxonomy still models three different things (product type, brand, and racing class) in one category tree — racing classes like DTM/GT3/Group C sit four levels deep as categories rather than as product attributes. Migrating brand and class to attributes, and building faceted filtering on them, remains a v2.0 item.

1.0.20 — Slot Car Club page rebuild
- Changed: page-club.php fully rebuilt. The previous version had hardcoded copy and inline styles and did not reflect the actual content of the live club page.
        New structure:
        1. Hero — full-width track photo with dark overlay and amber accent (matching the homepage hero treatment). Title, editable tagline, and two CTAs: "Join the Club" (anchors to the form) and "Visit the Shop".
        2. Club info — four cards in a row with amber icon chips: Club Racing Days, Open Track Days, Monthly Club Fees, Everyone Welcome. (The previous site's fourth item, "Hours of Fun!", was renamed to "Everyone Welcome" — it now carries real information and echoes the club tagline.)
        3. Track gallery — editorial asymmetric grid: one large feature image plus three supporting images, with a subtle hover zoom. Reads as a designed page rather than a photo strip.
        4. Join the club — navy band with the pitch and privacy note on the left, and the Gravity Form on a white card on the right. Falls back to a WhatsApp CTA if no form ID is set.
        5. Bottom CTA — low-friction "Not sure yet? Come and watch a race night" prompt with a WhatsApp deep link.
- Added: Settings → ModelTech → Slot Car Club section (Rule 4 — everything client-editable)
        Club Tagline, Club Racing Days, Open Track Days, Monthly Club Fees, Everyone Welcome (all multi-line, one item per row), and a separate Gravity Forms "Club Join Form ID" (distinct from the Contact form).
- Added: Customizer → Club Page Images section — Club Hero Background (1920×1080), Gallery Feature Image (1200×900), and three supporting gallery images (800×600). Recommended dimensions shown in the admin UI.
- Added: mt_get_lines() helper — splits any multi-line setting into an array of trimmed lines. mt_get_opening_hours() refactored to use it.
- Body copy for the "Join the Club" section comes from the normal WP page editor, so it is fully editable without touching code.
- Note: Deliberately NOT added — race schedule, results/leaderboard, club rules, member profiles. These would need ongoing content from the client, and empty sections look worse than absent ones. Easy to add later if wanted.

1.0.19 — Legal page template
- Added: page-legal.php — "Legal Page" template (selectable via Page Attributes → Template)
        Shared template for Terms & Conditions, Privacy Policy, and any other policy page.
        Layout: navy/amber page banner with an optional subtitle (taken from the page Excerpt field), then long-form legal content in a two-column clause grid (matching the previous site's T&Cs layout), and a "Have a question? Get in Touch" CTA at the bottom linking to the Contact page.
        Clause headings get an amber underline accent. CSS `break-inside`/`break-after` rules keep headings with their body text and prevent paragraphs splitting awkwardly across columns. Collapses to a single column below 860px.
        Also styles lists and tables (e.g. a data-retention schedule in a privacy policy).
- Content is fully client-editable via the normal WordPress page editor — nothing is hardcoded in the template. Clauses can be added, removed, reworded, or reordered freely; the layout adapts automatically. Structure the content as a sequence of headings ("1." or "1. Information We Collect") followed by paragraphs.
- The bottom CTA can be hidden per-page by setting the post meta `_mt_hide_legal_cta` to '1'.
- Footer legal links: no change needed — the footer already resolves Terms & Conditions via wc_get_page_permalink('terms') and Privacy Policy via get_privacy_policy_url(), both with sensible fallbacks. Set these under WooCommerce → Settings → Advanced (terms page) and Settings → Privacy (privacy page) so the links point at the right pages.
- Note: To use — create/edit the page, set Page Attributes → Template → "Legal Page", paste the content, and add a subtitle in the Excerpt field if wanted.

1.0.18 — Contact page template
- Added: page-contact.php — "Contact Page" template (selectable via Page Attributes → Template)
        Layout: navy/amber page banner (consistent with Shop page) with opening hours as the subtitle, then a two-column section — Gravity Forms contact form on the left, dark contact-details card on the right with an embedded Google Map inside it (styled per client reference: contained card, rounded corners, details stacked above the map).
        Contact card shows: business name, contact person, address, Phone (click-to-call), Email (mailto), Hours, embedded map, and a "Get directions" link.
        A WhatsApp fallback button sits below the form so visitors always have a contact route even if the form is unavailable.
        Map: simple Google Maps iframe embed — no API key required. Pin position is derived from the store address in Settings, so updating the address updates the map.
- Added: Gravity Forms styling pass — GF inputs, labels, selects, textareas, checkboxes, submit button, validation states, and confirmation message all styled to match the theme (amber focus rings, navy submit button that flips to amber on hover, two-column field grid collapsing to one column on mobile). Scoped to .mt-gf-wrap so it only affects the themed contact form.
- Added: New Settings → ModelTech fields (Rule 4 — everything client-editable)
        - Contact Name (shown on the contact card)
        - Email Address (used for the mailto link; previously not stored)
        - Opening Hours (multi-line — one entry per row)
        - Gravity Forms Contact Form ID (select which form renders on the Contact page; leave blank to hide it. Admin notice shown if Gravity Forms isn't active.)
- Changed: Opening hours are no longer hardcoded. The footer and the product-page store block now read from the new Settings → ModelTech "Opening Hours" field, so hours are edited in one place and stay consistent across the Contact page, footer, and product pages. Lines without a colon (e.g. "Or by appointment") render as an italic note rather than a two-column row.
- Note: To use the template — create/edit the Contact page, set Page Attributes → Template → "Contact Page", then set the Gravity Forms form ID under Settings → ModelTech → Contact Page.

1.0.17 — Post-demo feedback batch (Ruaan sign-off)
- Changed: Homepage shelf tiles — swapped "Paints & Tools" for "Slot Cars", reordered to Die-Cast → Slot Cars → Model Building Kits
        Customizer control mt_shelf_paints replaced with mt_shelf_slotcars (links to slot-cars category). Slot Cars image to be added via Appearance → Customise → Homepage Images. Old mt_shelf_paints theme_mod is no longer read (its value, if set, is orphaned — set the new Slot Cars image fresh).
- Added: Auto-delete product images on permanent deletion (opt-in, safe)
        New Settings → ModelTech toggle "Auto-delete Product Images" (default OFF). When enabled, permanently deleting a product also deletes its featured + gallery images from the Media Library. Before deleting each image, checks it is not used as featured image or in the gallery of any OTHER product — shared images are never removed. Only fires on permanent deletion (before_delete_post), never on trashing. Logs actions to debug.log when WP_DEBUG is on.
- Added: Shipping notice (editable) shown in 3 places
        New Settings → ModelTech field "Shipping Notice Text" (default: "Shipping 3–5 business days (often sooner). Order before 12pm for next-day delivery where available."). Displayed: (1) site-wide dismissible announcement bar at top of every page (toggle in Settings, on by default; dismissal is session-based via sessionStorage), (2) product page below add-to-cart/WhatsApp, (3) top of checkout form.
- Changed: Products per page now 24 (was WC default), editable via Settings → ModelTech "Products Per Page" field. 24 chosen so it divides evenly by both 3 and 4 columns (no orphan cards).
- Changed: Prominent pagination + result count (Ruaan feedback: customers miss the "next page" link and think the catalogue is small)
        Pagination buttons enlarged (48px min, 1.5px border, 15px bold). Prev/Next arrows are now amber, padded, and unmissable. Added a bold "Showing X–Y of Z products · Page N of M" summary above the pagination at the bottom of the shop grid (only when more than one page), with a hint line "More products below — use the page numbers to browse". Top result count made bolder.
- Note: All new content/behaviour is editable via Settings → ModelTech per GCM Rule 4. Settings page reorganised into sections (Contact & Social / Shipping & Announcement / Shop / Maintenance). This reinforces that the v2.0 refactor should migrate these into an organised Customizer panel.

1.0.16
- Changed: Product card image frame enlarged for a cleaner, more confident product grid
        Symptom: Product images on homepage (New Arrivals / Slot Cars) and shop page looked inconsistent — some products (e.g. Slot.it cars with display bases) appeared small/floaty in the frame while others filled it.
        Root cause: Not a crop — object-fit: contain never crops. The source product photos vary in aspect ratio and built-in whitespace (Ruaan's 5000+ catalogue is not uniform). With a fixed 180px-tall frame, photos with more internal whitespace scaled down more, leaving side gaps that read as "cut off" or "not filling the frame". This is a source-image consistency issue, not a CSS bug — true uniformity requires standardising the source photos (a future batch process, not a theme change).
        Fix (mitigation): Image frame height increased 180px → 220px, padding 12px → 18px, background changed from off-white to pure white. Larger frame + clean white canvas + even padding makes the unavoidable per-photo variation read as "clean product shots on white" rather than mismatched sizes. Kept object-fit: contain so no photo is ever pixel-cropped (safest with unpredictable source images).
- Fixed: Removed conflicting/redundant aspect-ratio CSS rules
        A leftover "prevent layout shift" rule set aspect-ratio: 1/1 on both loop images and single-product gallery images. This conflicted with (a) the explicit fixed-height frame on loop images and (b) the v1.0.5 squish fix which forces aspect-ratio: auto !important on gallery images. Removed the global rule — loop images use the fixed-height frame, gallery images use the v1.0.5 rules. No functional change (the !important already won) but eliminates a contradictory rule that could cause confusion or regressions later.

1.0.15
- Added: Trust block + Store block in left column below product thumbnails
        Symptom / Design decision: After v1.0.14 fixed the sticky-overlap bug, the initial visual state of the product page (before scrolling) still showed a large empty white rectangle below the thumbnails, because the right column (title + price + specs + qty/cart + WhatsApp + trust row + meta) is inherently taller than the left column (main image + thumbnails).
        Fix: Added two content blocks below the thumbnails:
        - "Why buy from Model Tech" trust block — 4 selling points (Authorised SA distributor / Serving hobbyists since 2002 / Expert advice via WhatsApp / In-store viewing available) with amber checkmarks. Content is filterable via 'mt_product_trust_points'.
        - "Also available in-store" store block — address (from Settings), business hours, "Get directions" link that opens Google Maps with the store address pre-filled.
        Guarantee: The store block has `flex: 1` and lives inside a flex-column `.mt-product-column--left` wrapper. Combined with `align-items: stretch` on the parent grid, the left column always matches the right column's height regardless of product. Any "extra" space is absorbed by the store block, not left as an orphan white gap.
        Removed: `position: sticky` on the images column (from v1.0.13). No longer needed since the column now has enough content to fill naturally. Sticky can return as an optional UX enhancement in v2.0 if desired.
- Implementation: New PHP function `mt_render_left_column_extras()` at priority 21 of `woocommerce_before_single_product_summary` (right after images at priority 20). Left column wrapper `.mt-product-column--left` is opened at priority 5 (same hook as the outer .mt-product-columns) and closed inside mt_render_left_column_extras after outputting the two blocks.

1.0.14
- Fixed: Sticky product image column overlapping content in the Description/Specifications/Delivery sections when scrolling
        Symptom: On single product page, as user scrolls past the two-column area into the tabs section, the sticky product image stayed pinned to the top of the viewport and floated over the tab content (text was hidden behind the image).
        Root cause: The sticky image column's containing block was the whole `.woocommerce div.product` element. Since `.mt-product-details` was also a child of that element (via `grid-column: 1 / -1`), the sticky image's scroll range extended through the tabs section, causing the overlap.
        Fix: Introduced a new `.mt-product-columns` wrapper that contains only the image column and the summary column. Sticky is now bounded by this wrapper and releases when scrolling past the two-column area into the tabs section below.
        Implementation:
        - Two new hook callbacks: opens `<div class="mt-product-columns">` at priority 5 of woocommerce_before_single_product_summary, closes it at priority 11 of woocommerce_after_single_product_summary (before mt_render_product_details_sections at priority 12).
        - `.woocommerce div.product` changed from `display: grid` to `display: flex; flex-direction: column`. Grid layout moved to `.mt-product-columns`.
        - `.mt-product-details` and `.related.products` no longer need `grid-column: 1 / -1` since parent is now flex column.
- Changed: Delivery & Returns grid layout
        Symptom: With 4 items in the grid, the auto-fit `repeat(auto-fit, minmax(240px, 1fr))` produced 3 columns + orphan card on the next row on typical desktop widths.
        Fix: Explicit responsive breakpoints — 1 column on mobile, 2 columns on tablet (640px+), 4 columns on desktop (1024px+). Card padding, heading, and body text sized down to fit narrower 4-column cards cleanly. Grid max-width bumped to 1200px so the 4-column layout has room to breathe.

1.0.13
- Fixed: Blank vertical space below product gallery thumbnails on single product page
        Symptom: On single product page, when the right column (purchase panel with title, price, specs, add-to-cart, WhatsApp, trust row, meta) was significantly taller than the left column (product images + thumbnails), a large empty white rectangle appeared below the thumbnails.
        Root cause: The two-column grid uses `align-items: start` (correct — content aligns to the top of each column). Since the left column ends after the thumbnails but the right column keeps going, and the mt-product-details section below only starts once both columns end, the empty gap below the left column was visually obvious.
        Fix: Re-added `position: sticky; top: 90px; align-self: start` to the images column. As user scrolls, the image gallery stays in view while the right column scrolls independently. Fills the blank space visually. When the user scrolls past both columns to reach the mt-product-details section, the sticky image column releases naturally.
        Safe to re-add sticky here (unlike the earlier attempt in v1.0.2 that we removed in v1.0.3):
        - Default WC tabs (which spanned full-width via grid-column: 1/-1 and caused the earlier overlap bug) were removed in v1.0.12.
        - The custom mt-product-details section that replaced them sits BELOW the two-column grid entirely, so it can't be overlapped by the sticky images.
        - Mobile responsive override sets position: static so sticky doesn't apply on single-column mobile layout.

1.0.12
- Added: Custom "product details" section replacing default WooCommerce tabs
        Symptom / Design decision: The default WC tabs (Description / Additional Information / Reviews) sat far down the product page, required a click to switch content, and mixed content types. The Description tab in particular was buried and its content was redundant with the quick specs card in the purchase panel.
        Fix: Removed default WC tabs (remove_action on woocommerce_output_product_data_tabs). Added a new custom "Product Details" section with three anchor sections: Description / Specifications / Delivery & Returns.
        Structure:
        - Sticky tab nav: pinned to top of viewport when scrolled past. Scroll-spy JS highlights the active tab based on which section is currently in view.
        - Description section: full product description rendered with the_content filter, styled prose (max 780px, 15px 1.75 line-height).
        - Specifications section: clean spec table listing all parsed fields (Manufacturer, Item Code, Description, Scale, Material, Colour, Steering, Type, Series, Year) plus SKU, Categories, Tags from WC meta.
        - Delivery & Returns section: 4-item grid (In-Store Pickup, Nationwide Delivery, Returns & Exchanges, WhatsApp Support) with amber icon chips. Content is filterable via 'mt_delivery_returns_content' for future customisation.
        JS: IntersectionObserver-based scroll spy in main.js. Native smooth scroll on click. URL hash updates for shareable deep links to a specific tab.
- Added: Amber accent bar under product summary excerpt
        A small (48px x 3px) amber accent bar renders below the product excerpt in the purchase panel, providing a subtle brand touchpoint and visual break between "product identity" and "specs card".
- Removed: Reviews tab (per project decision — reviews not currently used)
- Note for future: Description / Specifications tab content still parses from the description text (Ruaan's existing product format). Post-demo v2.0 refactor should migrate these to proper ACF fields on the product post type for cleaner data structure.

1.0.11
- Fixed: Search widget in shop sidebar had no visible border/styling
        Symptom: Search input field was invisible — only the dark "Search" button showed. Label "Search" floated above with no context.
        Root cause: v1.0.10 CSS selectors targeted `.widget_search .search-form` (classic widget's form class) and `.wp-block-search__inside-wrapper` (block widget's wrapper), but the actual DOM had a plain `<form>` element with only `role="search"` — neither classic .search-form class nor block widget structure. Selectors didn't match.
        Fix: Added defensive selectors covering all three cases: `form[role="search"]` (unclassed form with role), `.widget_search form` (classic widget), and `.wp-block-search__inside-wrapper` (block widget). Border, focus state, and button styling now apply regardless of which widget variant WordPress renders.
- Changed: Shop sidebar layout — Browse by Category + Filter by Price now ALWAYS show below user-added widgets
        Symptom: With only the search widget in the sidebar, there was a large empty space below it. User had to manually add category browse and price filter widgets to make the sidebar useful.
        Root cause: The previous woocommerce.php logic used if/else — either dynamic_sidebar OR the fallback defaults, never both. Result: any custom widget in the sidebar meant losing the useful category/price defaults.
        Fix: Extracted the default content into a helper `mt_render_shop_sidebar_defaults()` and now always call it AFTER dynamic_sidebar. Custom widgets from Appearance → Widgets show at top of sidebar; Browse by Category and Filter by Price always show below. Applied to both is_shop() and is_product_category() template branches.

1.0.10
- Fixed: Sidebar search widget input field missing / not rendering
        Symptom: On shop page sidebar, the "Search" button rendered but the input field where users type was invisible/missing.
        Root cause: v1.0.9 CSS applied `display: none` to `.shop-sidebar .widget_search label`. WordPress' default search widget wraps the input inside the label element (`<label><span class="screen-reader-text">Search for:</span><input type="search"></label>`). Hiding the label hid the input too.
        Fix: Use visually-hidden pattern (position: absolute + clip-path) on only the `.screen-reader-text` span inside the label. Label itself stays visible with `display: flex` to fill the search form width. Input inside label now renders properly.
- Fixed: Default WordPress widgets (Recent Posts, Recent Comments) still showing in shop sidebar despite CSS hide rules
        Symptom: v1.0.9 CSS should have hidden "Recent Posts" and "Recent Comments" widgets on the shop page, but they were still visible.
        Root cause: CSS hide rules relied on the widget wrapper having classes like `.widget_recent_entries`. Depending on WordPress version and widget registration method, the actual DOM class might differ, or the widget might be block-based (using different classes entirely).
        Fix: Added a PHP filter on `sidebars_widgets` that actively strips unwanted widget IDs (recent-posts-*, recent-comments-*, meta-*, archives-*, etc.) from the shop-sidebar area at render time. Belt-and-braces with the existing CSS rules. Widgets remain available for use in other sidebar areas — only removed from shop-sidebar specifically.
- Added: More comprehensive CSS hide rules covering additional widget types (calendar, tag_cloud, pages, categories, nav_menu) for completeness.

1.0.9
- Changed: Shop page polish pass — several small improvements so the shop page matches the visual quality of the homepage
        Symptom: Shop page felt like default WooCommerce with a colour scheme applied. Sidebar widgets were generic boxed cards ("Search / Recent Posts / Recent Comments"), page banner was a stark flat black rectangle, breadcrumb was barely visible light-grey-on-off-white, product cards blended into the white page background with no elevation, and the result-count/sort row had no visual separation from the products below.
        Fixes:
        - Page banner: replaced flat navy background with a diagonal navy gradient (navy → navy-mid → navy-light). Added a 3px amber accent stripe across the top. Subtle amber radial glow in the top-right. Padding increased 40px→56px for more presence.
        - Breadcrumb: text darkened to var(--text) for readability. Added a home icon (inline SVG) to the first link. Separator spacing increased. Last-item breadcrumb text weight increased for clearer "you are here" indication.
        - Sidebar widgets: removed boxy card treatment (no more borders, backgrounds, or radius). Replaced with clean typography and thin dividers between widgets. Widget titles now use uppercase letterspacing with a small amber bar accent to the left. Product category link size increased for readability.
        - Sidebar search widget: input + button styled as a single unit with border-radius, focus state (amber ring), navy submit button.
        - Sidebar cleanup: default WP widgets (Recent Posts, Recent Comments, Meta, Archives) hidden on shop pages via CSS — they're irrelevant to shoppers and look unprofessional.
        - Product cards: added a subtle default box-shadow (0 1px 3px rgba(15,17,23,0.04)) so they lift off white page backgrounds. Hover shadow retained.
        - Shop toolbar: divider line added above the product grid, separating "chrome" (result count, sort dropdown) from products. Sort select gets amber focus state.

1.0.8
- Changed: Hero overlay softened and tightened for better image visibility
        Symptom: Left ~40% of hero image was nearly black due to heavy darkening gradient. Detailed hero image (sunset, race car, model kits, paints) was hidden by the overlay.
        Design decision: Overlay was previously optimised aggressively for text readability at the cost of image visibility. The hero image is a strong visual asset that should be seen.
        Fix: Overlay gradient softened from rgba(8,10,18,.92) at 0% → .7 at 55% → .3 at 100%, to rgba(8,10,18,.7) at 0% → .35 at 35% → 0 at 60%. Dark zone is now contained to the left ~third where the text sits; right two-thirds of image displays cleanly with no overlay darkening. Image opacity increased from .45 to .6 for stronger presence.

1.0.7
- Fixed: Hero image cropped at the bottom, cutting off important visual content
        Symptom: With the recommended 1920×1080 hero image, the bottom third and left side of the image were cropped out (paints, chassis kit, product shelves lost from view)
        Root cause: Hero container was min-height 520px on a ~1200-1400px wide viewport (~2.5:1 aspect ratio), so object-fit: cover scaled the 16:9 image to match the container's width and cropped the vertical excess from top+bottom equally via default object-position: center.
        Fix: Hero min-height increased to min(90vh, 780px) — better matches 16:9 image aspect ratio, gives cinematic feel on desktop, caps at 780px for reasonable mobile experience. object-position: 50% 65% shifts the crop slightly downward so if any cropping does happen, it favours the product-showcase bottom half over the sky. Overlay strengthened (rgba .92→.7→.3 gradient) for text readability on brighter hero images. Image opacity increased to .45 for better ambient visibility.
- Added: Recommended image dimensions on all Customizer image controls
        Every Customizer image control (hero, 3 shelf tiles, 3 track photos) now shows recommended dimensions, aspect ratio, and file size guidance directly in the admin UI at the point of upload. No need to reference an external doc.
        Sizes: Hero 1920×1080 (16:9), Shelf tiles 800×600 (4:3), Track tall 800×1000 (4:5), Track wide 1600×800 (2:1).

1.0.6
- Fixed: Add to cart button squished, text wrapped onto 3 lines
        Symptom: On single product page, Add to cart button appeared as a narrow dark rectangle with text broken across 3 lines. WhatsApp button took most of the horizontal space.
        Root cause: The WhatsApp button was hooked to woocommerce_after_add_to_cart_button, which fires INSIDE the <form class="cart"> element. Our form.cart flex layout was treating the WhatsApp <a> as a third flex child (alongside qty and submit), and its width: 100% was pushing the submit button to a narrow width.
        Fix: Moved WhatsApp button hook from woocommerce_after_add_to_cart_button (inside form) to woocommerce_single_product_summary at priority 31 (outside form, right after the add_to_cart section at priority 30). WhatsApp now renders as its own block below the form. Bonus: WhatsApp now also shows for out-of-stock products where the form.cart isn't rendered.
- Fixed: Second "4 in stock" badge showing above the qty + cart row
        Symptom: The green "4 in stock" pill appeared twice on the single product page — once next to the price (correct, from our hook) and again above the qty + cart row.
        Root cause: Our custom stock badge hook renders correctly, but the default WC template still outputs <p class="stock"> via wc_get_stock_html() in single-product/add-to-cart/simple.php. The CSS selectors we used to hide it (form.cart p.stock, div.product > p.stock, .single_add_to_cart_button + p.stock) didn't match the actual position — the default output is a sibling of form.cart inside div.summary.
        Fix: Broadened CSS selector to .woocommerce div.product .summary p.stock which catches p.stock anywhere within the summary. Our custom badge uses .mt-stock-badge (not p.stock) so it's unaffected.

1.0.5
- Fixed: Product images with non-square aspect ratios displayed squished on single product page
        Symptom: Landscape product images (e.g. 1500x1000 Mini GT photos) rendered with distorted proportions — car appeared vertically stretched/compressed
        Root cause: WooCommerce's flex-slider script measures the first slide's dimensions at init and sets .flex-viewport inline `height: XXXpx` matching the slide width. In earlier versions the theme's CSS made the slide render as a square, so flex-slider locked a square viewport. Subsequent images with landscape aspect were then stretched vertically to fill the square container.
        Fix: Defensive CSS overrides on .flex-viewport { height: auto !important } to release the locked height. Added object-fit: contain !important and max-height: none !important on the img to guard against any WC-injected inline dimensions or object-fit: cover that would stretch/crop the image.
        Trade-off: Multi-image galleries will have viewport height change per slide (small layout jump). Fine for current product set which is mostly single-image. Fixed-height with aspect calculation is a v1.1 improvement.

1.0.4
- Fixed: Product gallery showing multiple slides side-by-side (duplicate/overlapping images)
        Symptom: On single product page, main image area displayed portions of two slides at once, and the previous slide bled into the visible viewport
        Root cause: v1.0.3 moved gallery treatment (padding, gradient, shadow) to .woocommerce-product-gallery__image which IS the slide container. Flex-slider measured this container's width on init to calculate slide widths, but our padding meant the visible viewport was smaller than the calculated slide width, causing adjacent slides to appear.
        Fix: Moved visual treatment to the OUTER .woocommerce-product-gallery container. .woocommerce-product-gallery__image is now reset to transparent/padding-0 so flex-slider's width math is correct.
- Fixed: Purchase area cluttered — quantity, add-to-cart, WhatsApp button had mismatched sizes and hierarchy
        Symptom: Stock badge floated alone above the qty input, add-to-cart was a small dark pill (auto width), WhatsApp button was full-width, sizes and shapes were inconsistent.
        Root cause: form.cart layout was default WC (block), qty input at 46px height, add-to-cart at ~46px height auto-width with 24px pill radius, WhatsApp at auto height with 24px pill radius, stock badge rendered independently.
        Fix: form.cart now uses flex row layout — qty (80px wide, 52px tall) + Add to cart (flex:1, 52px tall) share one row with matched heights. WhatsApp button matched to 52px height and same radius as Add to cart. Stock badge moved via hook to render right after price (priority 11) as an inline pill badge — creates clear hierarchy: Price+Stock → Excerpt → Specs → Qty+Cart row → WhatsApp → Trust.

1.0.3
- Fixed: Single product page main image appeared squished / wrong aspect ratio
        Symptom: Product image on single product page displayed with distorted proportions inside gradient container
        Root cause: Visual treatment (padding, background, shadow) was applied to the <img> element itself. WooCommerce's flex-slider script adds inline styles to the gallery wrapper that conflict with padding on the img, causing aspect distortion.
        Fix: Moved visual treatment from <img> to the .woocommerce-product-gallery__image wrapper. Image now sits inside naturally at correct aspect ratio. Padding reduced from 40px to 24px (Mini GT / Carrera product photos already include native whitespace).

1.0.2
- Fixed: Homepage "New Arrivals" and "Slot Cars" product loops rendered as full-width stacked list instead of 4-column grid
        Symptom: Products on homepage showed as vertical stack with huge titles, no price/button, broken layout
        Root cause: Product card CSS is scoped to .woocommerce ancestor. front-page.php called woocommerce_product_loop_start() without wrapping in .woocommerce div, so no card styles applied.
        Fix: Wrapped both loops in <div class="woocommerce columns-4">
- Fixed: Single product page description text scrolled behind sticky image gallery
        Symptom: When scrolling on product page, description tab text became obscured behind the fixed image gallery on left
        Root cause: div.images had position:sticky; but woocommerce-tabs used grid-column: 1/-1 (full width). Sticky element created stacking context above the tabs as they scrolled into view.
        Fix: Removed position:sticky from images. Content now scrolls naturally with no overlap.
- Added: Product page modernization
        - Cleaner image treatment (soft gradient background, generous padding, subtle shadow) replaces flat off-white padded box
        - Quick specs card in purchase panel (parses Manufacturer/Scale/Item Code/Material from description, falls back to SKU+Category)
        - Trust row below WhatsApp button (In-store pickup / Nationwide delivery / WhatsApp support)
        - Subtle card lift on hover (translateY -3px + amber border tint) for tactile feel

1.0.1
- Fixed: WC_Widget_Price_Filter deprecated in WC 8+ - now guarded with class_exists() check
        Symptom: PHP notice or blank widget on shop sidebar under WooCommerce 8+
        Root cause: WC_Widget_Price_Filter was deprecated in WC 8.3 (replaced by block-based filter)
        Fix: Wrapped call in class_exists() check in woocommerce.php
- Fixed: Die-cast category slug mismatch causing 404 links on homepage shelf tile and footer
        Symptom: Die-cast shelf tile on homepage and footer link would 404 on live site
        Root cause: Hardcoded 'die-cast-resin-models' slug didn't match live site's 'die-cast-composite-resin-static-models'
        Fix: Updated slug in front-page.php and footer.php
- Added: Customizer image controls for homepage images
        Symptom: 7 homepage image slots (hero, 3 shelves, 3 track photos) had no admin UI to set
        Root cause: front-page.php read via get_theme_mod() but no add_setting/add_control ever registered
        Fix: New Customizer section "Homepage Images" with WP_Customize_Image_Control for all 7 slots

1.0.0
- Initial release
*/

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --navy:       #0f1117;
  --navy-mid:   #1a1d27;
  --navy-light: #252836;
  --amber:      #e8a020;
  --amber-dark: #c8861a;
  --white:      #ffffff;
  --off-white:  #f7f7f5;
  --text:       #1a1a2e;
  --text-muted: #6b7280;
  --border:     #e5e7eb;
  --border-dark:#d1d5db;
  --red:        #c0392b;
  --green:      #22863a;
  --green-bg:   #f0faf3;

  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Barlow Condensed', 'Impact', sans-serif;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);

  --container:  1200px;
  --gutter:     20px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { list-style: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--text);
}

h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(22px, 3vw, 34px); }
h3 { font-size: clamp(18px, 2.5vw, 26px); }
h4 { font-size: 20px; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow { max-width: 860px; }
.container--wide   { max-width: 1400px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

.section { padding: 64px 0; }
.section--sm { padding: 40px 0; }
.section--lg { padding: 96px 0; }

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--amber);
  color: var(--navy);
  border-color: var(--amber);
}
.btn--primary:hover { background: var(--amber-dark); border-color: var(--amber-dark); }

.btn--dark {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn--dark:hover { background: var(--navy-mid); border-color: var(--navy-mid); }

.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--border-dark);
}
.btn--outline:hover { border-color: var(--navy); }

.btn--outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.4);
}
.btn--outline-light:hover { border-color: var(--white); }

.btn--sm { padding: 7px 16px; font-size: 13px; }
.btn--lg { padding: 14px 30px; font-size: 16px; }
.btn--full { width: 100%; justify-content: center; }

/* ============================================================
   SITE HEADER
   ============================================================ */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--navy);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 24px;
}

.site-logo img { height: 42px; width: auto; object-fit: contain; }
.site-logo svg { height: 36px; }

/* Primary Nav */
/* Top level only — the flex row. Sub-menus must NOT inherit this (see below). */
.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.primary-nav a {
  display: block;
  padding: 6px 12px;
  color: rgba(255,255,255,.72);
  font-size: 13.5px;
  font-weight: 450;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-page-ancestor > a {
  color: var(--white);
  background: rgba(255,255,255,.08);
  text-decoration: none;
}

/* ---- Dropdowns (multi-level) ----
   The live menu is 3 levels deep (Products → category → sub-category), so the rules must:
   - stack sub-menu items vertically (not inherit the top-level flex row)
   - open ONLY the hovered level (direct-child selector, not descendant)
   - anchor each nested sub-menu to its OWN parent <li>, flying out sideways
*/
.primary-nav li { position: relative; }

.primary-nav .sub-menu {
  display: block;           /* never a flex row */
  list-style: none;
  margin: 0;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-width: 280px;
  background: var(--navy-mid);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* Nested levels (2nd and deeper) fly out to the RIGHT of their parent item */
.primary-nav .sub-menu .sub-menu {
  top: -7px;                /* align with the parent item, allowing for padding */
  left: 100%;
  margin-left: 4px;
  transform: translateX(-6px);
}

/* Only open the level being hovered — direct child, not descendant */
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.primary-nav .sub-menu li:hover > .sub-menu,
.primary-nav .sub-menu li:focus-within > .sub-menu {
  transform: translateX(0);
}

.primary-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255,255,255,.75);
  border-radius: var(--radius-sm);
  font-size: 13px;
  padding: 8px 10px;
  line-height: 1.35;
}
.primary-nav .sub-menu a:hover {
  color: var(--white);
  background: rgba(255,255,255,.08);
}
.primary-nav .sub-menu .current-menu-item > a {
  color: var(--amber);
}

/* Caret indicators — ▾ on top-level parents, ▸ on nested parents */
.primary-nav > ul > .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
}
.primary-nav .sub-menu .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: .55;
}

/* Edge guard — if a parent is near the right of the viewport, flip the flyout to the left.
   Applied via JS (see main.js), which adds .flip-left when a sub-menu would overflow. */
.primary-nav .sub-menu.flip-left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 4px;
}
.primary-nav > ul > li > .sub-menu.flip-left {
  left: auto;
  right: 0;
  margin-right: 0;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-search-toggle,
.header-account {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.8);
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-size: 16px;
}
.header-search-toggle:hover,
.header-account:hover {
  background: rgba(255,255,255,.14);
  color: var(--white);
}

/* Cart Icon */
.header-cart {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--amber);
  color: var(--navy);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s;
  text-decoration: none;
}
.header-cart:hover { background: var(--amber-dark); text-decoration: none; color: var(--navy); }
.header-cart .cart-count {
  background: var(--navy);
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 2px;
  background: rgba(255,255,255,.8);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10,12,20,.9);
  backdrop-filter: blur(4px);
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
}
.search-overlay.is-open { display: flex; }
.search-overlay form {
  width: 100%;
  max-width: 600px;
  position: relative;
}
.search-overlay input[type="search"] {
  width: 100%;
  padding: 18px 60px 18px 24px;
  background: var(--navy-mid);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: var(--radius-lg);
  color: var(--white);
  font-size: 18px;
  outline: none;
}
.search-overlay input::placeholder { color: rgba(255,255,255,.4); }
.search-overlay input:focus { border-color: var(--amber); }
.search-overlay button[type="submit"] {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  font-size: 20px;
}
.search-close {
  position: absolute;
  top: 32px;
  right: 32px;
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
#site-footer {
  background: var(--navy);
  color: rgba(255,255,255,.7);
  margin-top: 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  padding: 64px 0 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer-brand .site-logo { margin-bottom: 16px; }
.footer-brand p {
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 260px;
  margin-bottom: 20px;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  font-size: 15px;
  transition: background .15s, color .15s;
}
.footer-social a:hover { background: var(--amber); color: var(--navy); }

.footer-col h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--white);
  margin-bottom: 16px;
  font-family: var(--font-sans);
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul a {
  font-size: 13.5px;
  color: rgba(255,255,255,.6);
  transition: color .15s;
}
.footer-col ul a:hover { color: var(--amber); text-decoration: none; }

.footer-contact p {
  font-size: 13.5px;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.footer-contact i { color: var(--amber); margin-top: 2px; flex-shrink: 0; }

.footer-hours { margin-top: 16px; }
.footer-hours span {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin-bottom: 4px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.35);
}
.footer-bottom a { color: rgba(255,255,255,.45); }
.footer-bottom a:hover { color: var(--amber); }

/* ============================================================
   WOOCOMMERCE — PRODUCT CARDS (archive)
   ============================================================ */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce ul.products li.product {
  float: none !important;
  width: 100% !important;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex !important;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(15, 17, 23, 0.04);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 17, 23, 0.08);
  border-color: var(--amber);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
}

/* Product image — larger frame, white canvas, even padding for a cleaner, more uniform grid.
   Uses object-fit: contain so no product photo is ever cropped (source images vary in aspect
   ratio and built-in whitespace). The consistent white background + generous frame makes the
   inevitable per-photo variation read as "clean product shots" rather than mismatched sizes. */
.woocommerce ul.products li.product a img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  padding: 18px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  transition: transform .3s;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }

/* Product info */
.woocommerce ul.products li.product .mt-product-inner {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 0 8px !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
}

.woocommerce ul.products li.product .price {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 10px !important;
  margin-top: auto;
}
.woocommerce ul.products li.product .price del {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
  margin-right: 4px;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
  color: var(--red) !important;
}

/* Add to cart button on archive */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  display: block !important;
  width: 100% !important;
  padding: 9px 14px !important;
  background: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background .15s !important;
  text-decoration: none !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background: var(--amber) !important;
  color: var(--navy) !important;
  text-decoration: none !important;
}

/* Badges */
.woocommerce span.onsale {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: var(--red) !important;
  color: var(--white) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  min-height: unset !important;
  min-width: unset !important;
  line-height: 1.5 !important;
}

/* ============================================================
   WOOCOMMERCE — SHOP PAGE LAYOUT
   ============================================================ */
.woocommerce-page .shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

/* Sidebar */
.shop-sidebar {
  position: sticky;
  top: 80px;
}
.shop-sidebar .widget {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.shop-sidebar .widget:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.shop-sidebar .widget-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text);
  margin-bottom: 16px;
  font-family: var(--font-sans);
  padding-bottom: 0;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.shop-sidebar .widget-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--amber);
  border-radius: 2px;
}
/* --- Category list — contextual (v1.0.22).
   The taxonomy is very large (150+ nodes). Rather than rendering the whole tree, the sidebar
   shows only what's relevant to the customer's current position (see mt_render_contextual_categories):
   top-level at the shop root; children + siblings once inside a category. The list is always
   flat and short, so no nesting/indentation styles are needed. --- */
.shop-sidebar .product-categories {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-sidebar .product-categories li {
  margin: 0;
}
.shop-sidebar .product-categories a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: color .15s;
  text-decoration: none;
  line-height: 1.35;
}
.shop-sidebar .product-categories a:hover {
  color: var(--amber);
  text-decoration: none;
}
/* Name takes the available width; the count pill never wraps to its own line */
.shop-sidebar .product-categories .cat-name {
  flex: 1 1 auto;
  min-width: 0;
}
.shop-sidebar .product-categories .count {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  line-height: 1.5;
}
/* Current category */
.shop-sidebar .product-categories .current-cat > a {
  color: var(--amber);
  font-weight: 600;
}
.shop-sidebar .product-categories .current-cat > a .count {
  background: rgba(232, 160, 32, 0.12);
  border-color: rgba(232, 160, 32, 0.35);
  color: var(--amber-dark);
}

/* "Back to <parent>" link — shown when inside a category */
.mt-cat-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s;
}
.mt-cat-back:hover {
  color: var(--amber);
  text-decoration: none;
}
.mt-cat-back svg { transition: transform .15s; }
.mt-cat-back:hover svg { transform: translateX(-2px); }

/* When a widget contains more than one heading (e.g. "Browse in X" then "More in Y"),
   give the later headings some breathing room from the list above. */
.shop-sidebar .widget_product_categories .widget-title + ul.product-categories {
  margin-bottom: 0;
}
.shop-sidebar .widget_product_categories ul.product-categories + .widget-title {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* --- Price filter widget --- */
.shop-sidebar .widget_price_filter .price_slider_wrapper {
  padding-top: 4px;
}
.shop-sidebar .widget_price_filter .price_slider_amount {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
/* WC renders two number inputs (min/max) then the button and price label */
.shop-sidebar .widget_price_filter .price_slider_amount .price_label {
  order: 1;
  font-size: 13px;
  color: var(--text);
  text-align: left;
}
.shop-sidebar .widget_price_filter .price_slider_amount .price_label span {
  font-weight: 600;
  color: var(--navy);
}
.shop-sidebar .widget_price_filter .price_slider_amount .button {
  order: 2;
  align-self: flex-start;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  float: none;
}
.shop-sidebar .widget_price_filter .price_slider_amount .button:hover {
  background: var(--amber);
  color: var(--navy);
}
/* Hide the raw min/max number inputs — the slider is the control */
.shop-sidebar .widget_price_filter .price_slider_amount input[type="text"],
.shop-sidebar .widget_price_filter .price_slider_amount input[type="number"] {
  display: none;
}
/* Slider track */
.shop-sidebar .widget_price_filter .ui-slider {
  position: relative;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  border: none;
  margin: 10px 8px 0;
  text-align: left;
}
/* Selected range */
.shop-sidebar .widget_price_filter .ui-slider .ui-slider-range {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--amber);
  border-radius: 4px;
  display: block;
  border: none;
}
/* Handles */
.shop-sidebar .widget_price_filter .ui-slider .ui-slider-handle {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  background: var(--white);
  border: 2px solid var(--amber);
  border-radius: 50%;
  cursor: ew-resize;
  outline: none;
  box-shadow: 0 1px 4px rgba(15, 17, 23, 0.18);
  transition: transform .12s, box-shadow .12s;
  z-index: 2;
}
.shop-sidebar .widget_price_filter .ui-slider .ui-slider-handle:hover,
.shop-sidebar .widget_price_filter .ui-slider .ui-slider-handle:focus {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(232, 160, 32, 0.45);
}
/* Search widget cleanup — handles BOTH classic widget (form has no class, uses role="search")
   AND block-based widget (form has wp-block-search classes) */

/* Classic search widget: form with role="search" only */
.shop-sidebar form[role="search"],
.shop-sidebar .widget_search form,
.shop-sidebar .widget_product_search form,
.shop-sidebar .wp-block-search__inside-wrapper {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .15s;
  background: var(--white);
  margin: 0;
}
.shop-sidebar form[role="search"]:focus-within,
.shop-sidebar .widget_search form:focus-within,
.shop-sidebar .widget_product_search form:focus-within,
.shop-sidebar .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--amber);
}
/* Label wraps the input on classic widget — make it flex to fill width */
.shop-sidebar form[role="search"] label,
.shop-sidebar .widget_search label,
.shop-sidebar .widget_product_search label {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-weight: normal;
}
/* Hide only the label TEXT via visually-hidden pattern — input inside stays visible */
.shop-sidebar .screen-reader-text,
.shop-sidebar form[role="search"] label > span:first-child {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Search input — both classic and block */
.shop-sidebar form[role="search"] input[type="search"],
.shop-sidebar .widget_search input[type="search"],
.shop-sidebar .widget_product_search input[type="search"],
.shop-sidebar .wp-block-search__input {
  flex: 1;
  width: 100%;
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  background: transparent;
  outline: none;
  border-radius: 0;
}
/* Search button — both classic (input[submit]) and block (button) */
.shop-sidebar form[role="search"] input[type="submit"],
.shop-sidebar form[role="search"] button[type="submit"],
.shop-sidebar .widget_search button,
.shop-sidebar .widget_product_search button,
.shop-sidebar .wp-block-search__button {
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
  border-radius: 0;
  height: auto;
}
.shop-sidebar form[role="search"] input[type="submit"]:hover,
.shop-sidebar form[role="search"] button[type="submit"]:hover,
.shop-sidebar .widget_search button:hover,
.shop-sidebar .widget_product_search button:hover,
.shop-sidebar .wp-block-search__button:hover {
  background: var(--amber);
  color: var(--navy);
}
/* Hide the block-widget label above the search (redundant when input has placeholder) */
.shop-sidebar .wp-block-search__label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Hide default WP widgets on shop pages — includes both classic and block-based versions */
.shop-sidebar .widget_recent_entries,
.shop-sidebar .widget_recent_comments,
.shop-sidebar .widget_meta,
.shop-sidebar .widget_archive,
.shop-sidebar .widget_calendar,
.shop-sidebar .widget_tag_cloud,
.shop-sidebar .widget_pages,
.shop-sidebar .widget_categories,
.shop-sidebar .widget_nav_menu {
  display: none;
}

/* Shop toolbar — result count on left, sort on right (using flex on WC's markup) */
.woocommerce-result-count {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 12px !important;
  float: left;
}
.woocommerce-ordering {
  margin: 0 0 12px;
  float: right;
}
.woocommerce-ordering select {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--white);
  cursor: pointer;
  transition: border-color .15s;
}
.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus {
  border-color: var(--amber);
  outline: none;
}
/* Divider above the products grid — cleaner than putting it below the toolbar */
.shop-main ul.products {
  clear: both;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Pagination — large and prominent (Ruaan feedback: customers miss the "next page" link) */
.woocommerce nav.woocommerce-pagination {
  margin-top: 8px;
}
.woocommerce nav.woocommerce-pagination ul {
  display: flex !important;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 24px !important;
  list-style: none !important;
  flex-wrap: wrap;
}
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 8px;
  border-radius: var(--radius-md) !important;
  border: 1.5px solid var(--border) !important;
  font-size: 15px;
  font-weight: 600;
  color: var(--text) !important;
  transition: background .15s, color .15s, border-color .15s;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--navy) !important;
  color: var(--white) !important;
  border-color: var(--navy) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--amber) !important;
  color: var(--navy) !important;
  border-color: var(--amber) !important;
}
/* Prev / Next arrows — bigger, amber, unmissable */
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev {
  min-width: auto;
  padding: 0 24px;
  background: var(--amber) !important;
  color: var(--navy) !important;
  border-color: var(--amber) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.woocommerce nav.woocommerce-pagination ul li a.next:hover,
.woocommerce nav.woocommerce-pagination ul li a.prev:hover {
  background: var(--amber-dark) !important;
  border-color: var(--amber-dark) !important;
  color: var(--navy) !important;
}

/* Bottom result summary above pagination */
.mt-loop-footer-count {
  text-align: center;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mt-loop-footer-count__hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

/* Top result count — make it bolder/more prominent than the WC default */
.woocommerce .woocommerce-result-count {
  font-weight: 600;
  color: var(--text);
}

/* ============================================================
   WOOCOMMERCE — SINGLE PRODUCT
   ============================================================ */
.woocommerce div.product {
  display: flex;
  flex-direction: column;
}

/* Two-column area — left (images + trust + store blocks) / right (summary) */
/* align-items: stretch ensures both columns match height, so the left column's flex-fill
   store block eliminates the previous white-gap-below-thumbnails issue in v1.0.13/1.0.14. */
.mt-product-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}

/* Left column wrapper — flex column so we can stretch the last block to fill space */
.mt-product-column--left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

/* Gallery — visual treatment on outer .woocommerce-product-gallery */
/* NOT on .woocommerce-product-gallery__image which is a slide container that flex-slider measures */
.woocommerce div.product div.images .woocommerce-product-gallery {
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #f7f7f5 0%, #ffffff 100%);
  padding: 24px;
  box-shadow: 0 2px 12px rgba(15, 17, 23, 0.05);
}
/* Override flex-slider's inline height on the viewport — otherwise the viewport locks to a square
   dimension based on init-time measurement, which squishes non-square images vertically */
.woocommerce div.product div.images .flex-viewport {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
/* Slide container — must stay unstyled so flex-slider's width math works */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  height: auto !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image a {
  display: block;
}
/* Image must display at natural aspect ratio — object-fit: contain guards against any inline
   or WC-injected object-fit: cover that would stretch/crop the image */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: auto !important; float: none !important; }
.woocommerce div.product div.images .flex-control-thumbs img {
  width: 68px !important;
  height: 68px !important;
  object-fit: contain;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 4px;
  background: var(--white);
  transition: border-color .15s;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs li.flex-active img {
  border-color: var(--amber);
}

/* Product Summary */
.woocommerce div.product div.summary {
  padding-top: 8px;
}
.woocommerce div.product .product_title {
  font-size: clamp(22px, 2.5vw, 30px) !important;
  margin-bottom: 8px !important;
}

.woocommerce div.product p.price {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 16px !important;
}
.woocommerce div.product p.price del { font-size: 16px !important; color: var(--text-muted) !important; }
.woocommerce div.product p.price ins { text-decoration: none !important; color: var(--red) !important; }

/* Stock status — hide the default WC stock display anywhere in the summary.
   Our custom badge (via mt_render_stock_badge hook) uses .mt-stock-badge, not p.stock,
   so it's unaffected. This selector catches p.stock whether it's inside form.cart,
   before the form, after the form, or as a sibling of the form. */
.woocommerce div.product .summary p.stock,
.woocommerce div.product div.summary p.stock,
.woocommerce div.product form.cart p.stock {
  display: none !important;
}

/* Our custom stock badge (rendered right after price via hook) */
.mt-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  margin: -8px 0 20px;
  padding: 6px 12px;
  border-radius: 20px;
}
.mt-stock-badge--in {
  background: var(--green-bg);
  color: var(--green);
}
.mt-stock-badge--out {
  background: #fef2f2;
  color: var(--red);
}
.mt-stock-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* SKU */
.woocommerce div.product .sku_wrapper {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* Add to cart — quantity + button on same row, matched heights */
.woocommerce div.product form.cart {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
  flex-wrap: nowrap;
}
.woocommerce div.product form.cart .quantity {
  flex-shrink: 0;
  margin: 0;
}
.woocommerce div.product form.cart .quantity input {
  width: 80px;
  height: 52px;
  padding: 0 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  background: var(--white);
}
.woocommerce div.product form.cart .quantity input:focus {
  border-color: var(--amber);
  outline: none;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button[type="submit"] {
  flex: 1;
  height: 52px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
  padding: 0 28px !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .15s !important;
  text-decoration: none !important;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart button[type="submit"]:hover {
  background: var(--amber) !important;
  color: var(--navy) !important;
}

/* WhatsApp enquiry button — matches Add to cart dimensions for hierarchy */
/* Now rendered OUTSIDE form.cart via mt_render_whatsapp_button() at priority 31 */
.whatsapp-enquiry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  height: 52px;
  background: #25D366;
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  margin-top: 0;
  transition: background .15s;
  text-decoration: none;
  box-sizing: border-box;
}
.whatsapp-enquiry:hover { background: #1ebe5d; color: var(--white); text-decoration: none; }
.whatsapp-enquiry i { font-size: 18px; }

/* Quick Specs card — sits in the product summary between excerpt and add-to-cart */
.mt-quick-specs {
  margin: 18px 0 22px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.mt-quick-specs__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.mt-quick-specs__row:last-child { border-bottom: none; }
.mt-quick-specs__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.mt-quick-specs__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

/* Trust Row — three items below add-to-cart / WhatsApp buttons */
.mt-trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0 4px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--border);
}
.mt-trust-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.mt-trust-row__icon {
  color: var(--amber);
  display: inline-flex;
}
.mt-trust-row__text {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Product specs table */
.product-specs {
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.product-specs table { width: 100%; border-collapse: collapse; }
.product-specs td {
  padding: 9px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.product-specs tr:last-child td { border-bottom: none; }
.product-specs td:first-child {
  background: var(--off-white);
  font-weight: 500;
  color: var(--text-muted);
  width: 40%;
}

/* Product categories & tags */
.woocommerce div.product .posted_in,
.woocommerce div.product .tagged_as {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.woocommerce div.product .posted_in a,
.woocommerce div.product .tagged_as a {
  color: var(--amber);
}

/* ============================================================
   ANNOUNCEMENT BAR (site-wide shipping notice)
   ============================================================ */
.mt-announcement-bar {
  background: var(--navy);
  color: var(--white);
  font-size: 13.5px;
  border-bottom: 2px solid var(--amber);
}
.mt-announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 9px 0;
  position: relative;
}
.mt-announcement-bar__text {
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.mt-announcement-bar__close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color .15s;
}
.mt-announcement-bar__close:hover { color: var(--white); }

/* Product page shipping notice (below add-to-cart / WhatsApp) */
.mt-shipping-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 4px;
  padding: 12px 16px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.mt-shipping-notice svg {
  color: var(--amber);
  flex-shrink: 0;
}

/* Amber accent bar under product summary excerpt — small brand touchpoint */
.woocommerce div.product .woocommerce-product-details__short-description {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 4px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
}
.woocommerce div.product .woocommerce-product-details__short-description::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--amber);
  border-radius: 2px;
}

/* ============================================================
   PRODUCT DETAILS — CUSTOM TABS SECTION (v1.0.12)
   Sticky nav + Description / Specifications / Delivery & Returns
   Replaces default WooCommerce tabs which are removed via hook.
   ============================================================ */
.mt-product-details {
  margin-top: 64px;
}

/* Sticky tab nav — anchors to top of viewport when scrolled */
.mt-product-tabs {
  position: sticky;
  top: 60px; /* below header (~60px tall) */
  z-index: 10;
  display: flex;
  gap: 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  margin: 0 -20px 0;
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mt-product-tabs::-webkit-scrollbar { display: none; }
.mt-product-tab {
  padding: 18px 24px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.mt-product-tab:hover {
  color: var(--text);
  text-decoration: none;
}
.mt-product-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--amber);
  font-weight: 600;
}

/* Section containers — scroll-margin-top compensates for sticky nav on anchor jumps */
.mt-product-section {
  padding: 48px 0 32px;
  scroll-margin-top: 140px;
}
.mt-product-section + .mt-product-section {
  border-top: 1px solid var(--border);
}
.mt-section-heading {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  margin: 0 0 24px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mt-section-heading::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 22px;
  background: var(--amber);
  border-radius: 2px;
}

/* Description section — prose content */
.mt-prose {
  max-width: 780px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
}
.mt-prose p {
  margin-bottom: 1em;
}
.mt-prose p:last-child { margin-bottom: 0; }
.mt-prose strong { font-weight: 600; color: var(--text); }

/* Specifications table */
.mt-spec-table-wrap {
  max-width: 780px;
}
.mt-spec-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.mt-spec-table th,
.mt-spec-table td {
  padding: 14px 20px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.mt-spec-table tr:last-child th,
.mt-spec-table tr:last-child td {
  border-bottom: none;
}
.mt-spec-table th {
  width: 200px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  background: var(--off-white);
}
.mt-spec-table td {
  color: var(--text);
  font-weight: 500;
}

/* Empty state */
.mt-empty-state {
  color: var(--text-muted);
  font-style: italic;
  font-size: 14px;
}

/* Delivery & Returns — 4 items always in one row on desktop, 2x2 on tablet, stacked on mobile */
.mt-delivery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 1200px;
}
@media (min-width: 640px) {
  .mt-delivery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (min-width: 1024px) {
  .mt-delivery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.mt-delivery-item {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.mt-delivery-item:hover {
  border-color: var(--amber);
  box-shadow: 0 4px 16px rgba(15, 17, 23, 0.06);
}
.mt-delivery-item h3 {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 14px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
}
.mt-delivery-item p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 0;
}
.mt-delivery-item p a {
  color: var(--amber);
  font-weight: 500;
}
.mt-delivery-item p a:hover {
  text-decoration: underline;
}
.mt-delivery-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(232, 160, 32, 0.1);
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   LEFT COLUMN EXTRAS — Trust block + Store block (v1.0.15)
   Fills the previously-empty space below the product thumbnails.
   Store block has flex:1 so it stretches to match right column height.
   ============================================================ */

/* Trust block — "Why buy from Model Tech" */
.mt-trust-block {
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.mt-trust-block__heading {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mt-trust-block__heading::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--amber);
  border-radius: 2px;
}
.mt-trust-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mt-trust-block__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.mt-trust-block__check {
  color: var(--amber);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Store block — "Also available in-store" */
.mt-store-block {
  flex: 1;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  display: flex;
  min-height: 180px;
}
.mt-store-block__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.mt-store-block__heading {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mt-store-block__heading svg {
  color: var(--amber);
  flex-shrink: 0;
}
.mt-store-block__address {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 14px;
  font-weight: 500;
}
.mt-store-block__hours {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-bottom: 16px;
}
.mt-store-block__hours > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.mt-store-block__hours-note {
  justify-content: flex-start !important;
  font-style: italic;
  padding-top: 2px;
}
.mt-store-block__hours span:first-child {
  font-weight: 500;
  color: var(--text);
}
.mt-store-block__hours-note span:first-child {
  font-weight: 400 !important;
  color: var(--text-muted) !important;
}
.mt-store-block__directions {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--amber);
  text-decoration: none;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  transition: color .15s;
}
.mt-store-block__directions:hover {
  color: var(--amber-dark);
  text-decoration: none;
}
.mt-store-block__directions svg {
  transition: transform .15s;
}
.mt-store-block__directions:hover svg {
  transform: translateX(2px);
}

/* ============================================================
   LEGAL PAGE TEMPLATE (v1.0.19)
   Terms & Conditions, Privacy Policy, etc.
   Content comes from the normal WP editor — fully client-editable.
   ============================================================ */
.mt-legal {
  max-width: 1000px;
  margin: 0 auto;
  /* Two-column clause grid on desktop, matching the previous site's T&Cs layout.
     Uses CSS columns so any number of clauses flows naturally — add/remove clauses
     in the editor and the layout adapts with no code change. */
}
@media (min-width: 860px) {
  .mt-legal {
    column-count: 2;
    column-gap: 56px;
  }
}

/* Clause headings (1., 2., 3. … or "1. Information We Collect") */
.mt-legal h2,
.mt-legal h3,
.mt-legal h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 10px;
  padding-bottom: 8px;
  position: relative;
  /* Keep a heading with its following paragraph — never orphan a heading at a column break */
  break-after: avoid;
  break-inside: avoid;
}
.mt-legal h2::after,
.mt-legal h3::after,
.mt-legal h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  background: var(--amber);
  border-radius: 2px;
}
/* First heading shouldn't have a big top margin */
.mt-legal > *:first-child { margin-top: 0; }

/* Clause body text */
.mt-legal p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 14px;
}
/* Space between clauses — applied to the heading that starts a new clause */
.mt-legal h2:not(:first-child),
.mt-legal h3:not(:first-child),
.mt-legal h4:not(:first-child) {
  margin-top: 36px;
}
.mt-legal ul,
.mt-legal ol {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 14px;
  padding-left: 20px;
}
.mt-legal li { margin-bottom: 6px; }
.mt-legal strong { font-weight: 600; color: var(--navy); }
.mt-legal a {
  color: var(--amber);
  font-weight: 500;
}
.mt-legal a:hover { color: var(--amber-dark); }
/* Avoid a paragraph splitting awkwardly across columns */
.mt-legal p,
.mt-legal ul,
.mt-legal ol,
.mt-legal li {
  break-inside: avoid;
}
/* Tables (e.g. data retention schedules in a privacy policy) */
.mt-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 13.5px;
  break-inside: avoid;
}
.mt-legal table th,
.mt-legal table td {
  padding: 10px 14px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.mt-legal table th {
  background: var(--off-white);
  font-weight: 600;
  color: var(--navy);
}

/* Bottom CTA */
.mt-legal-cta {
  max-width: 1000px;
  margin: 64px auto 0;
  padding-top: 48px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.mt-legal-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--navy);
  margin: 0 0 8px;
}
.mt-legal-cta p {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 24px;
}

/* ============================================================
   CONTACT PAGE (v1.0.18)
   ============================================================ */
.mt-contact-intro {
  max-width: 780px;
  margin-bottom: 40px;
}
.mt-contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) {
  .mt-contact-layout {
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
  }
}

/* --- Left: form column --- */
.mt-contact-form-col .mt-section-heading {
  margin-bottom: 24px;
}
.mt-contact-alt {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.mt-contact-alt > span {
  font-size: 13.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.mt-contact-alt .whatsapp-enquiry {
  width: auto;
  padding: 0 24px;
}

/* --- Right: contact details card (dark, with map inside) --- */
.mt-contact-card {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 4px 24px rgba(15, 17, 23, 0.12);
}
.mt-contact-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--amber);
  margin-bottom: 10px;
}
.mt-contact-card__eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--amber);
  border-radius: 2px;
}
.mt-contact-card__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
  margin: 0 0 6px;
}
.mt-contact-card__person {
  font-size: 15px;
  font-weight: 600;
  color: var(--amber);
  margin: 0 0 14px;
}
.mt-contact-card__address {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
  margin: 0 0 18px;
}

/* Labelled rows: Phone / Email / Hours */
.mt-contact-card__rows {
  margin: 0 0 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mt-contact-card__row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 14px;
}
.mt-contact-card__row dt {
  flex-shrink: 0;
  width: 62px;
  font-weight: 600;
  color: var(--amber);
}
.mt-contact-card__row dd {
  margin: 0;
  color: rgba(255,255,255,.9);
}
.mt-contact-card__row dd a {
  color: rgba(255,255,255,.9);
  transition: color .15s;
}
.mt-contact-card__row dd a:hover {
  color: var(--amber);
  text-decoration: none;
}
.mt-contact-card__row--hours dd {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mt-contact-card__row--hours dd span {
  line-height: 1.4;
}

/* Map inside the card — rounded, contained */
.mt-contact-card__map {
  border-radius: var(--radius-md);
  overflow: hidden;
  line-height: 0;
  border: 1px solid rgba(255,255,255,.12);
}
.mt-contact-card__map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}
.mt-contact-card__directions {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--amber);
  text-decoration: none;
  transition: color .15s;
}
.mt-contact-card__directions:hover {
  color: var(--amber-dark);
  text-decoration: none;
}
.mt-contact-card__directions svg { transition: transform .15s; }
.mt-contact-card__directions:hover svg { transform: translateX(2px); }

/* ============================================================
   GRAVITY FORMS — theme styling (v1.0.24)
   Scoped to .mt-gf-wrap so it only affects the themed Contact / Club forms.
   Selectors are deliberately broad + !important on buttons because Gravity Forms
   ships its own stylesheet that is loaded after the theme's and uses high-specificity
   rules. Covers both legacy (gform_wrapper) and GF 2.5+ (gform-theme) markup.
   ============================================================ */
.mt-gf-wrap .gform_wrapper { margin: 0; }
.mt-gf-wrap .gform_wrapper form { margin: 0; }

/* Field grid.
   SPACING RHYTHM (v1.0.25): the gap WITHIN a field (label -> input) must be clearly
   smaller than the gap BETWEEN fields, otherwise the eye can't tell which label belongs
   to which input and the form reads as loose and disconnected.
     label -> input : 6px
     field -> field : 20px
   All fields are full-width by default. Only fields explicitly marked half-width in
   Gravity Forms sit side by side — otherwise ragged, accidental-looking column breaks
   appear (e.g. a half-width email next to a full-width phone). */
.mt-gf-wrap .gform_fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 18px;
}
@media (max-width: 600px) {
  .mt-gf-wrap .gform_fields { grid-template-columns: 1fr; }
}
/* Default: every field spans the full width. */
.mt-gf-wrap .gfield { grid-column: 1 / -1; margin: 0; padding: 0; }
/* Opt IN to half-width — only when the form explicitly sets it in GF. */
@media (min-width: 601px) {
  .mt-gf-wrap .gfield--width-half { grid-column: span 1; }
  .mt-gf-wrap .gfield--width-third { grid-column: span 1; }
}
/* These types are always full-width regardless of any GF width setting. */
.mt-gf-wrap .gfield--type-textarea,
.mt-gf-wrap .gfield--type-consent,
.mt-gf-wrap .gfield--type-checkbox,
.mt-gf-wrap .gfield--type-radio,
.mt-gf-wrap .gfield--type-section,
.mt-gf-wrap .gfield--type-html,
.mt-gf-wrap .gfield--type-name {
  grid-column: 1 / -1;
}

/* Section break headings — a divider between groups of fields.
   Extra top margin separates it from the previous group; the bottom rule sits close
   to the fields it introduces, so it reads as a heading FOR them, not a floating band. */
.mt-gf-wrap .gsection {
  border-bottom: 1px solid var(--border);
  padding-bottom: 9px;
  margin: 14px 0 -2px;
}
/* No extra top margin if the section is the very first thing in the form */
.mt-gf-wrap .gform_fields > .gsection:first-child { margin-top: 0; }
.mt-gf-wrap .gsection .gsection_title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}
.mt-gf-wrap .gsection .gsection_description {
  font-size: 13px;
  color: var(--text-muted);
  margin: 3px 0 0;
  line-height: 1.45;
}

/* Labels — tight to their own input (6px), so each field reads as one unit. */
.mt-gf-wrap .gfield_label,
.mt-gf-wrap legend.gfield_label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
.mt-gf-wrap .gfield_required,
.mt-gf-wrap .gfield_required_text {
  color: var(--amber);
  margin-left: 4px;
  font-weight: 500;
}
/* Field description sits under the input, close to it */
.mt-gf-wrap .gfield_description,
.mt-gf-wrap .gform_fileupload_rules {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin: 5px 0 0;
  padding: 0;
  line-height: 1.45;
}
/* Complex (multi-input) fields like Name — two columns, sub-labels tight to their inputs */
.mt-gf-wrap .ginput_complex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 600px) {
  .mt-gf-wrap .ginput_complex { grid-template-columns: 1fr; }
}
.mt-gf-wrap .ginput_complex > span { display: block; }
.mt-gf-wrap .ginput_complex label {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 4px;
  line-height: 1.3;
}

/* ---- Inputs ---- */
.mt-gf-wrap input[type="text"],
.mt-gf-wrap input[type="email"],
.mt-gf-wrap input[type="tel"],
.mt-gf-wrap input[type="url"],
.mt-gf-wrap input[type="number"],
.mt-gf-wrap input[type="password"],
.mt-gf-wrap select,
.mt-gf-wrap textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--white);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  line-height: 1.4;
}
.mt-gf-wrap textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}
.mt-gf-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
  cursor: pointer;
}
.mt-gf-wrap input:focus,
.mt-gf-wrap select:focus,
.mt-gf-wrap textarea:focus {
  outline: none;
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.12);
}
.mt-gf-wrap input::placeholder,
.mt-gf-wrap textarea::placeholder { color: var(--text-muted); }

/* ---- Checkboxes & radios ----
   The gap between the box and its label is set with margin ON THE INPUT rather than
   flex `gap` on the parent — Gravity Forms' own stylesheet overrides the gap, which
   left the label text jammed against (and clipping into) the box. */
.mt-gf-wrap .gfield_checkbox,
.mt-gf-wrap .gfield_radio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mt-gf-wrap .gchoice {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.mt-gf-wrap .gchoice label,
.mt-gf-wrap .gfield_checkbox label,
.mt-gf-wrap .gfield_radio label {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  font-weight: 400;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  max-width: none;
}
.mt-gf-wrap input[type="checkbox"],
.mt-gf-wrap input[type="radio"] {
  width: 17px;
  height: 17px;
  min-width: 17px;
  margin: 0 10px 0 0 !important;   /* the gap lives here — GF can't override it away */
  flex-shrink: 0;
  accent-color: var(--amber);
  cursor: pointer;
  border-radius: 3px;
  position: static;
}
.mt-gf-wrap input[type="radio"] { border-radius: 50%; }

/* Consent field — checkbox alongside longer, wrapping consent text */
.mt-gf-wrap .gfield--type-consent .gfield_label { text-transform: none; letter-spacing: 0; }
.mt-gf-wrap .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  padding: 0;
}
.mt-gf-wrap .ginput_container_consent input[type="checkbox"] {
  margin: 2px 12px 0 0 !important;
}
.mt-gf-wrap .gfield_consent_label,
.mt-gf-wrap .ginput_container_consent label {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  font-weight: 400;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  flex: 1;
}
.mt-gf-wrap .gfield_consent_label a { color: var(--amber); font-weight: 500; }

/* "Select All" helper button that GF renders on checkbox groups */
.mt-gf-wrap .gfield_choice_all_toggle,
.mt-gf-wrap button.gfield_choice_all_toggle {
  flex-shrink: 0;
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  line-height: 1.4 !important;
  height: auto !important;
  box-shadow: none !important;
}
.mt-gf-wrap .gfield_choice_all_toggle:hover,
.mt-gf-wrap button.gfield_choice_all_toggle:hover {
  border-color: var(--amber) !important;
  color: var(--amber) !important;
  background: rgba(232, 160, 32, 0.06) !important;
}

/* ---- Submit button ----
   Broad selectors + !important: Gravity Forms' own stylesheet loads after the theme's
   and applies its own high-specificity button styling (the default blue). */
.mt-gf-wrap .gform_footer {
  margin: 26px 0 0 !important;
  padding: 0 !important;
}
.mt-gf-wrap .gform_footer input[type="submit"],
.mt-gf-wrap .gform_footer button[type="submit"],
.mt-gf-wrap .gform_footer .gform_button,
.mt-gf-wrap .gform_button,
.mt-gf-wrap input.gform_button,
.mt-gf-wrap button.gform_button,
.mt-gf-wrap .gform-button--primary,
.mt-gf-wrap input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 40px !important;
  background: var(--navy) !important;
  background-image: none !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .15s, color .15s;
  box-shadow: none !important;
  text-transform: none;
}
.mt-gf-wrap .gform_footer input[type="submit"]:hover,
.mt-gf-wrap .gform_footer button[type="submit"]:hover,
.mt-gf-wrap .gform_footer .gform_button:hover,
.mt-gf-wrap .gform_button:hover,
.mt-gf-wrap input.gform_button:hover,
.mt-gf-wrap button.gform_button:hover,
.mt-gf-wrap .gform-button--primary:hover,
.mt-gf-wrap input[type="submit"]:hover {
  background: var(--amber) !important;
  color: var(--navy) !important;
}

/* ---- Validation ---- */
.mt-gf-wrap .gfield_error input,
.mt-gf-wrap .gfield_error select,
.mt-gf-wrap .gfield_error textarea {
  border-color: var(--red) !important;
}
.mt-gf-wrap .gfield_error .gfield_label { color: var(--red); }
.mt-gf-wrap .gfield_validation_message,
.mt-gf-wrap .validation_message {
  font-size: 12.5px !important;
  color: var(--red) !important;
  margin-top: 6px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.mt-gf-wrap .gform_validation_errors {
  background: #fef2f2 !important;
  border: 1px solid var(--red) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 16px !important;
  margin-bottom: 22px !important;
  box-shadow: none !important;
}
.mt-gf-wrap .gform_validation_errors h2,
.mt-gf-wrap .gform_submission_error {
  font-size: 14px !important;
  color: var(--red) !important;
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  text-transform: none;
  font-weight: 600;
}
.mt-gf-wrap .gform_validation_errors h2 .gform-icon { display: none; }

/* Confirmation message */
.gform_confirmation_message {
  padding: 20px 24px;
  background: var(--green-bg);
  border: 1px solid var(--green);
  border-radius: var(--radius-md);
  color: var(--green);
  font-weight: 500;
}

/* Dark variant — used inside the navy Join band on the Club page.
   The form sits on a white card there, so it mostly inherits the light styling. */
.mt-gf-wrap--dark .gsection .gsection_title,
.mt-gf-wrap--dark .gfield_label { color: var(--text); }

/* Related products */
.related.products { margin-top: 48px; }
.related.products h2 { margin-bottom: 20px !important; }

/* ============================================================
   WOOCOMMERCE — CART
   ============================================================ */
/* Robust cart layout.
   Different WooCommerce versions wrap the cart differently — sometimes the table is inside
   a <form> and the totals (.cart-collaterals) is a sibling; sometimes the grid children are
   not what a `1fr 340px` two-column grid expects, which squashed the table into one column
   and left the totals floating. Instead of gridding the outer container (whose direct children
   vary), we let the cart form/table be full width and float the totals into a card below,
   constrained to a sensible width. This works regardless of the exact wrapper structure. */
.woocommerce-cart .woocommerce {
  display: block;
}
.woocommerce-cart form.woocommerce-cart-form {
  width: 100%;
  margin-bottom: 32px;
}

.woocommerce table.cart,
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  table-layout: auto;
}
.woocommerce table.cart thead th {
  background: var(--off-white);
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.woocommerce table.cart td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.woocommerce table.cart tr:last-child td { border-bottom: none; }

/* Column widths — stop the product name collapsing into a one-word-per-line column */
.woocommerce table.cart td.product-remove,
.woocommerce table.cart th.product-remove { width: 40px; text-align: center; }
.woocommerce table.cart td.product-thumbnail,
.woocommerce table.cart th.product-thumbnail { width: 90px; }
.woocommerce table.cart td.product-name,
.woocommerce table.cart th.product-name { width: auto; min-width: 220px; }
.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-quantity,
.woocommerce table.cart td.product-subtotal { white-space: nowrap; }

.woocommerce table.cart img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 4px;
  background: var(--white);
}
.woocommerce table.cart .product-name a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}
.woocommerce table.cart .product-name a:hover { color: var(--amber); }
.woocommerce table.cart td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--off-white);
  color: var(--text-muted) !important;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}
.woocommerce table.cart td.product-remove a.remove:hover {
  background: var(--red);
  color: var(--white) !important;
}
/* Quantity input in the cart */
.woocommerce table.cart .quantity input.qty {
  width: 64px;
  padding: 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 14px;
}
/* Coupon + update row */
.woocommerce table.cart td.actions {
  padding: 16px;
  background: var(--off-white);
}
.woocommerce table.cart td.actions .coupon { display: inline-flex; gap: 8px; }
.woocommerce table.cart td.actions .coupon input[type="text"] {
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  min-width: 160px;
}
.woocommerce table.cart td.actions .button,
.woocommerce table.cart td.actions input.button {
  padding: 10px 18px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.woocommerce table.cart td.actions .button:hover,
.woocommerce table.cart td.actions input.button:hover {
  background: var(--amber);
  color: var(--navy);
}

/* Totals — a card floated to the right, constrained width, below the table */
.woocommerce .cart-collaterals {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
}
.woocommerce .cart-collaterals .cart_totals {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  float: none;
}
.woocommerce .cart_totals h2 {
  font-size: 18px !important;
  margin-bottom: 16px !important;
}
.woocommerce .cart_totals table { width: 100%; }
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: top;
}
.woocommerce .cart_totals table th { font-weight: 500; color: var(--text-muted); text-align: left; }
.woocommerce .cart_totals table td { text-align: right; }
.woocommerce .cart_totals table .order-total th,
.woocommerce .cart_totals table .order-total td {
  font-weight: 700;
  font-size: 16px;
  border-bottom: none;
  color: var(--text);
}
/* Shipping options in totals */
.woocommerce .cart_totals #shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce .cart_totals #shipping_method li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13.5px;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
  background: var(--navy);
  color: var(--white);
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 16px;
  transition: background .15s;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--amber);
  color: var(--navy);
  text-decoration: none;
}

/* ============================================================
   WOOCOMMERCE — CHECKOUT
   ============================================================ */
/* Robust two-column checkout.
   The previous rule gridded `.woocommerce-checkout .woocommerce` with `1fr 400px`, assuming
   its two direct children were the billing form and the order review. They aren't — WooCommerce
   nests them (the notice, the login/coupon toggles, and the <form> are all children), so both
   real columns piled into the right track and the left half was empty.
   Fix: grid the checkout FORM itself, whose direct children ARE #customer_details and
   #order_review, so the two-column layout lands on the correct elements. */
.woocommerce-checkout .woocommerce { display: block; }
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: start;
}
.woocommerce-checkout #customer_details { min-width: 0; }
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
  grid-column: 2;
}
.woocommerce-checkout #order_review_heading { margin-top: 0; }
/* The billing details column spans the left track */
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }

.woocommerce-checkout h3 {
  font-size: 18px !important;
  margin-bottom: 20px;
}
.woocommerce form .form-row label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: border-color .15s;
  box-sizing: border-box;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.1);
}

#order_review {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: 90px;
}
#order_review table { width: 100%; }
#order_review td, #order_review th {
  padding: 10px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
#order_review td { text-align: right; }
#order_review th { text-align: left; font-weight: 500; }
#order_review .order-total td, #order_review .order-total th {
  font-weight: 700;
  font-size: 15px;
  border-bottom: none;
}
/* Shipping method radios in the order review */
#order_review #shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
#order_review #shipping_method li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  justify-content: flex-end;
}

#place_order {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  transition: background .15s;
}
#place_order:hover { background: var(--amber); color: var(--navy); }

/* ============================================================
   WOOCOMMERCE — ORDER RECEIVED / THANK YOU
   ============================================================ */
/* Confirmation line */
.woocommerce-order .woocommerce-notice--success,
.woocommerce-order p.woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  color: var(--navy);
  background: none;
  border: none;
  padding: 0 0 8px;
  margin: 0 0 24px;
}
.woocommerce-order .woocommerce-notice--success::before { display: none; }

/* Order overview bar (order number / date / email / total / payment method) */
.woocommerce-order ul.woocommerce-order-overview,
.woocommerce-order ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.woocommerce-order ul.woocommerce-order-overview li,
.woocommerce-order ul.order_details li {
  flex: 1;
  min-width: 140px;
  margin: 0;
  padding: 16px 20px;
  border-right: 1px solid var(--border);
  border-bottom: none;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.woocommerce-order ul.woocommerce-order-overview li:last-child,
.woocommerce-order ul.order_details li:last-child { border-right: none; }
.woocommerce-order ul.woocommerce-order-overview li strong,
.woocommerce-order ul.order_details li strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

/* Section headings */
.woocommerce-order h2.woocommerce-order-details__title,
.woocommerce-order h2.woocommerce-column__title,
.woocommerce-order section h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin: 0 0 16px;
}

/* Order details table */
.woocommerce-order table.woocommerce-table--order-details,
.woocommerce-order table.order_details {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 40px;
}
.woocommerce-order table.order_details th,
.woocommerce-order table.order_details td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  text-align: left;
}
.woocommerce-order table.order_details tfoot th,
.woocommerce-order table.order_details tfoot td { font-weight: 600; }
.woocommerce-order table.order_details tfoot tr:last-child th,
.woocommerce-order table.order_details tfoot tr:last-child td {
  font-size: 16px;
  color: var(--navy);
  border-bottom: none;
}
.woocommerce-order table.order_details .product-total,
.woocommerce-order table.order_details td.product-total { text-align: right; white-space: nowrap; }

/* Customer address blocks */
.woocommerce-order .woocommerce-customer-details {
  margin-top: 8px;
}
.woocommerce-order .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.woocommerce-order .woocommerce-columns--addresses .col-1,
.woocommerce-order .woocommerce-columns--addresses .col-2 { width: auto; float: none; margin: 0; }
.woocommerce-order address {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--off-white);
}
@media (max-width: 600px) {
  .woocommerce-order .woocommerce-columns--addresses { grid-template-columns: 1fr; }
  .woocommerce-order ul.woocommerce-order-overview,
  .woocommerce-order ul.order_details { flex-direction: column; }
  .woocommerce-order ul.woocommerce-order-overview li,
  .woocommerce-order ul.order_details li {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .woocommerce-order ul.woocommerce-order-overview li:last-child,
  .woocommerce-order ul.order_details li:last-child { border-bottom: none; }
}

/* ============================================================
   WOOCOMMERCE — NOTICES
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 14px 18px 14px 48px !important;
  border-radius: var(--radius-md) !important;
  border-top: none !important;
  font-size: 14px;
  margin-bottom: 20px !important;
  position: relative;
}
.woocommerce-message {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}
.woocommerce-info {
  background: #eff6ff !important;
  color: #1e3a8a !important;
  border: 1px solid #bfdbfe !important;
}
.woocommerce-error {
  background: #fff1f2 !important;
  color: #9f1239 !important;
  border: 1px solid #fecdd3 !important;
  list-style: none !important;
}
.woocommerce-message a.button {
  background: #166534 !important;
  color: var(--white) !important;
  padding: 6px 14px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  border: none !important;
  float: right;
  margin-top: -2px;
}

/* ============================================================
   HOMEPAGE — HERO
   ============================================================ */
.hero-banner {
  position: relative;
  min-height: min(90vh, 780px);
  background: var(--navy);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-banner__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: 50% 65%;
  width: 100%;
  height: 100%;
  opacity: .6;
}
.hero-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8,10,18,.7) 0%, rgba(8,10,18,.35) 35%, rgba(8,10,18,0) 60%);
}
.hero-banner__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 80px 0;
}
.hero-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,160,32,.15);
  border: 1px solid rgba(232,160,32,.3);
  color: var(--amber);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.hero-banner h1 {
  color: var(--white);
  font-size: clamp(36px, 5vw, 58px);
  margin-bottom: 16px;
  text-transform: uppercase;
  line-height: 1.05;
}
.hero-banner h1 em { color: var(--amber); font-style: normal; }
.hero-banner__desc {
  color: rgba(255,255,255,.7);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 28px;
}
.hero-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-banner__badges {
  position: absolute;
  right: 40px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.hero-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 7px 14px;
  color: rgba(255,255,255,.85);
  font-size: 12.5px;
  white-space: nowrap;
}
.hero-badge i { color: var(--amber); font-size: 14px; }

/* ============================================================
   HOMEPAGE — CATEGORY STRIP
   ============================================================ */
.category-strip {
  background: var(--off-white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.category-strip::-webkit-scrollbar { display: none; }
.category-strip__inner {
  display: flex;
  gap: 0;
  min-width: max-content;
}
.category-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.category-chip:first-child { border-left: none; }
.category-chip i { font-size: 16px; }
.category-chip:hover, .category-chip.active {
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
}
.category-chip:hover i, .category-chip.active i { color: var(--amber); }

/* ============================================================
   HOMEPAGE — SHOP SHELVES (photo strip)
   ============================================================ */
.shop-shelves {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 200px;
}
.shop-shelf {
  position: relative;
  overflow: hidden;
}
.shop-shelf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.shop-shelf:hover img { transform: scale(1.05); }
.shop-shelf__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
}
.shop-shelf__label {
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
}

/* ============================================================
   HOMEPAGE — TRACK SECTION
   ============================================================ */
.track-section {
  background: var(--navy);
  padding: 72px 0;
}
.track-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.track-section__text h2 {
  color: var(--white);
  font-size: clamp(28px, 3.5vw, 42px);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.track-section__text h2 em { color: var(--amber); font-style: normal; }
.track-section__text p {
  color: rgba(255,255,255,.6);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.track-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.track-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.8);
  font-size: 14px;
}
.track-feature i { color: var(--amber); font-size: 16px; flex-shrink: 0; }

.track-section__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 8px;
}
.track-photo {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.track-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track-photo--wide { grid-column: 1 / -1; height: 120px; }
.track-photo--tall { height: 200px; }

/* ============================================================
   HOMEPAGE — NEW ARRIVALS
   ============================================================ */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.section-header h2 { margin: 0; }
.section-header a {
  font-size: 13.5px;
  color: var(--amber);
  font-weight: 500;
  white-space: nowrap;
}
.section-header a:hover { text-decoration: underline; }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.site-breadcrumb {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  background: var(--off-white);
  margin-bottom: 0;
}
.site-breadcrumb nav {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-breadcrumb a { color: var(--text-muted); transition: color .15s; }
.site-breadcrumb a:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-breadcrumb a:first-child::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.site-breadcrumb a:hover { color: var(--amber); text-decoration: none; }
.site-breadcrumb span.sep { margin: 0 8px; color: var(--border-dark); }
.site-breadcrumb .breadcrumb_last { color: var(--text); font-weight: 500; }

/* ============================================================
   PAGE TITLE BANNER
   ============================================================ */
.page-title-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, var(--navy-light) 100%);
  padding: 56px 0 52px;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
.page-title-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber) 0%, var(--amber-dark) 100%);
}
.page-title-banner::after {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232,160,32,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.page-title-banner .container { position: relative; z-index: 1; }
.page-title-banner h1 {
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 0;
  letter-spacing: 0.02em;
}
.page-title-banner p {
  color: rgba(255,255,255,.7);
  font-size: 15px;
  margin-top: 8px;
  margin-bottom: 0;
  max-width: 640px;
}

/* ============================================================
   SLOT CAR CLUB PAGE (rebuilt v1.0.20)
   ============================================================ */

/* --- 1. Hero --- */
.club-hero {
  position: relative;
  min-height: min(70vh, 560px);
  background: var(--navy);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.club-hero__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center 55%;
  width: 100%;
  height: 100%;
  opacity: .55;
}
.club-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8,10,18,.85) 0%, rgba(8,10,18,.5) 45%, rgba(8,10,18,.15) 100%);
}
.club-hero__content {
  position: relative;
  z-index: 2;
  padding: 72px 0;
  max-width: 620px;
}
.club-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(232, 160, 32, .5);
  border-radius: 20px;
  color: var(--amber);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 18px;
}
.club-hero h1 {
  color: var(--white);
  font-size: clamp(32px, 5vw, 54px);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 14px;
}
.club-hero__tagline {
  color: rgba(255,255,255,.78);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 480px;
}
.club-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- 2. Club info cards --- */
.club-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.club-info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.club-info-card:hover {
  border-color: var(--amber);
  box-shadow: 0 8px 24px rgba(15, 17, 23, 0.07);
  transform: translateY(-2px);
}
.club-info-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(232, 160, 32, 0.1);
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.club-info-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 10px;
}
.club-info-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 3px;
}
.club-info-card p:last-child { margin-bottom: 0; }

/* --- 3. Track gallery (asymmetric: 1 feature + 3 supporting) --- */
.club-gallery-section { padding-top: 0; }
.club-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
  min-height: 520px;
}
.club-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  position: relative;
  background: var(--off-white);
}
.club-gallery__item--feature {
  grid-row: span 3;
}
.club-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.club-gallery__item:hover img { transform: scale(1.05); }

/* --- 4. Join the club (navy band) --- */
.club-join {
  background: var(--navy);
  padding: 72px 0;
  color: var(--white);
}
.club-join__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.club-join__pitch h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 18px;
  position: relative;
  padding-bottom: 14px;
}
.club-join__pitch h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: var(--amber);
  border-radius: 2px;
}
.club-join__copy,
.club-join__copy p {
  color: rgba(255,255,255,.75);
  font-size: 15.5px;
  line-height: 1.7;
}
.club-join__copy p:last-child { margin-bottom: 0; }
.club-join__privacy {
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.club-join__privacy a {
  color: var(--amber);
  font-weight: 500;
}
.club-join__privacy a:hover { color: var(--amber-dark); }
.club-join__form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.club-join__fallback {
  text-align: center;
}
.club-join__fallback p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 20px;
}

/* --- 5. Bottom CTA --- */
.club-cta {
  padding: 64px 0;
  text-align: center;
  background: var(--off-white);
  border-top: 1px solid var(--border);
}
.club-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 10px;
}
.club-cta p {
  font-size: 15.5px;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 26px;
  line-height: 1.6;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}
.contact-info { }
.contact-info h2 { margin-bottom: 16px; }
.contact-detail {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  align-items: flex-start;
}
.contact-detail i { color: var(--amber); font-size: 18px; margin-top: 2px; flex-shrink: 0; }
.contact-detail h4 { font-size: 14px; margin-bottom: 2px; font-family: var(--font-sans); }
.contact-detail p { font-size: 14px; color: var(--text-muted); margin: 0; }

.contact-map {
  margin-top: 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.contact-map iframe {
  width: 100%;
  height: 260px;
  display: block;
}

/* ============================================================
   FORMS (generic)
   ============================================================ */
.mt-form .form-row,
.mt-form .form-group {
  margin-bottom: 16px;
}
.mt-form label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
}
.mt-form input[type="text"],
.mt-form input[type="email"],
.mt-form input[type="tel"],
.mt-form input[type="number"],
.mt-form select,
.mt-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: border-color .15s;
  background: var(--white);
}
.mt-form input:focus,
.mt-form select:focus,
.mt-form textarea:focus {
  outline: none;
  border-color: var(--navy);
}
.mt-form textarea { min-height: 120px; resize: vertical; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.blog-card__img {
  height: 180px;
  overflow: hidden;
}
.blog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.blog-card:hover .blog-card__img img { transform: scale(1.04); }
.blog-card__body { padding: 18px; }
.blog-card__meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.blog-card__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.35;
  font-family: var(--font-display);
}
.blog-card__title a { color: var(--text); }
.blog-card__title a:hover { color: var(--amber); text-decoration: none; }
.blog-card__excerpt {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   MY ACCOUNT
   ============================================================ */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
}
.woocommerce-MyAccount-navigation ul {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  list-style: none !important;
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 18px;
  font-size: 13.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation li:last-child a { border-bottom: none; }
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--off-white);
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .woocommerce-page .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { position: static; }
  .hero-banner__badges { display: none; }
  .track-section__inner { grid-template-columns: 1fr; gap: 32px; }
  .contact-layout { grid-template-columns: 1fr; }
  .woocommerce div.product { grid-template-columns: 1fr; }
  .woocommerce-cart .woocommerce { display: block; }
  .woocommerce .cart-collaterals .cart_totals { max-width: none; }
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading { grid-column: 1; grid-row: auto; }
  .woocommerce-checkout #order_review { position: static; }
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
  .club-info-grid { grid-template-columns: repeat(2, 1fr); }
  .club-join__grid { grid-template-columns: 1fr; gap: 36px; }
  .club-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }
  .club-gallery__item {
    aspect-ratio: 4 / 3;
  }
  .club-gallery__item--feature {
    grid-row: auto;
    grid-column: span 2;
  }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --gutter: 16px; }
  .club-info-grid { grid-template-columns: 1fr; }
  .club-hero__actions { flex-direction: column; align-items: stretch; }
  .club-hero__actions .btn { width: 100%; }
  .club-join { padding: 48px 0; }
  .club-join__form { padding: 24px; }
  .primary-nav { display: none; }
  .primary-nav.is-open {
    display: block;
    position: fixed;
    inset: 64px 0 0;
    background: var(--navy);
    overflow-y: auto;
    padding: 16px;
    z-index: 999;
  }
  .primary-nav.is-open > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .primary-nav.is-open a { padding: 10px 14px; font-size: 15px; }
  /* All levels expand inline (no flyouts on mobile) — nested levels indent progressively */
  .primary-nav.is-open .sub-menu,
  .primary-nav.is-open .sub-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(255,255,255,.05);
    border: none;
    box-shadow: none;
    border-radius: var(--radius-sm);
    min-width: 0;
    max-width: none;
    margin: 4px 0 4px 14px;
    padding: 4px;
  }
  .primary-nav.is-open .sub-menu a { font-size: 14px; padding: 8px 12px; }
  .primary-nav.is-open .sub-menu .sub-menu a { font-size: 13.5px; }
  /* Carets point down on mobile since everything expands inline */
  .primary-nav.is-open .sub-menu .menu-item-has-children > a::after {
    transform: rotate(45deg);
  }
  .menu-toggle { display: flex; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product { gap: 24px; }
  .mt-product-columns { grid-template-columns: 1fr; gap: 24px; }
  .woocommerce div.product div.images { position: static; top: auto; }
  .mt-trust-row { gap: 6px; padding: 12px 0 4px; }
  .mt-trust-row__text { font-size: 10.5px; }
  .mt-product-tabs { top: 56px; }
  .mt-product-tab { padding: 14px 16px; font-size: 13px; }
  .mt-product-section { padding: 32px 0 24px; scroll-margin-top: 120px; }
  .mt-section-heading { font-size: 22px; }
  .mt-spec-table th { width: 140px; padding: 12px 14px; font-size: 11px; }
  .mt-spec-table td { padding: 12px 14px; font-size: 13px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .shop-shelves { height: 140px; }
  .footer-top { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .blog-grid { grid-template-columns: 1fr; }
  .category-strip__inner { gap: 0; }
}

@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
  .hero-banner { min-height: 380px; }
  .hero-banner__content { padding: 48px 0; }
  .hero-banner__actions { flex-direction: column; }
  .shop-shelves { grid-template-columns: 1fr; height: auto; }
  .shop-shelf { height: 120px; }
}

/* ============================================================
   LITESPEED / PERFORMANCE
   ============================================================ */
/* NOTE: product loop images use a fixed-height contain frame (see .woocommerce ul.products
   li.product a img). Single product gallery images are handled by the v1.0.5 rules with
   aspect-ratio: auto !important to prevent flex-slider squishing. No global aspect-ratio
   rule here — it would conflict with both. */

/* Smooth add to cart feedback */
.woocommerce ul.products li.product.loading .button::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-left: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }