/*
Theme Name: Meno Kodas
Theme URI: https://tvs.menoatranka.lt
Author: Meno Kodas
Author URI: https://tvs.menoatranka.lt
Description: Lietuvos meno aukcionų ir galerijos tema — elegant art auction and gallery theme.
Version: 1.48.1
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meno-kodas
*/

/*
 * Version 1.46.0 - CATALOG PAGE PARITY FIXES (2026-04-01)
 *
 * Section S365: Fix catalog sidebar and product card visibility
 * - CAT-1: Category list visibility (was hidden/collapsed)
 * - CAT-2: Time filter buttons full text (was truncated)
 * - CAT-3: Product image aspect ratio 4:5
 * - CAT-4: Product card price visibility
 */

/*
 * Version 1.45.0 - HOMEPAGE 1:1 PARITY FIXES (2026-04-01)
 *
 * Section S360-S364: Fix all mismatches from HOMEPAGE-PARITY-REPORT.md
 * - S360: Logo width 290px→170px (match React exactly)
 * - S361: Search box: height 40px→36px, remove border, semi-transparent bg
 * - S362: Hero buttons: height auto + line-height 1 (was 70.5px, now matches React 48px)
 * - S363: Footer links: font-size 14px→16px, opacity 0.8→1.0
 * - S364: Header nav visibility at 1024px+ breakpoint
 *
 * Report: docs/HOMEPAGE-PARITY-REPORT.md
 */

/*
 * Version 1.40.5 - GIFT VOUCHER CTA BUTTON FIX (2026-04-01)
 *
 * FIX: Gift voucher CTA button was showing primary green instead of gold
 * - ROOT CAUSE: Generic button rule at S342-3 (line ~54865) was overriding
 *   the gold background due to higher specificity
 * - The rule `button:not([class*="btn-"])...` matched .mk-gv-order-btn
 *   because that class doesn't contain "btn-"
 * - FIX: Added :not(.mk-gv-order-btn):not(.mk-voucher-order-btn):not(.mk-voucher-btn)
 *   exclusions to the generic button rule
 */

/*
 * Version 1.40.4 - GIFT VOUCHER PAGE 1:1 PARITY FIXES (2026-04-01)
 *
 * Section S415: Gift Voucher page visual parity with React
 * - S415-1: CTA button MUST be GOLD (was showing dark green)
 *   - Added !important rules targeting .mk-voucher-order-btn specifically
 *   - background: hsl(42, 55%, 58%) for gold
 * - S415-2: Feature card titles MUST NOT word-break
 *   - Added white-space:nowrap, word-break:keep-all, min-width:max-content
 *   - Titles: "Universalus", "Galioja 12 men.", "Elegantiska dovana"
 * - S415-3 through S415-8: Amount buttons and container styling
 *
 * Reference: Visual comparison React vs WordPress screenshots
 * React source: src/pages/GiftVoucher.tsx
 */

/*
 * Version 1.39.6 - HEADER 100% PARITY FIX (2026-04-01)
 *
 * CRITICAL FIXES for header visual parity with React:
 * - HDR-1: Dropdown chevrons showing as green squares instead of chevron arrows
 *   - ISSUE: Underline rule (S17633) set position:absolute, bottom:-2px, background:green
 *   - Chevron rule (S66316) set width/height to 12px and added SVG background-image
 *   - Both ::after rules conflicted, creating 12x12px green square over the chevron
 *   - FIX: Override position:static, background-color:transparent, bottom:auto
 * - HDR-2: Cart icon is filled bag, should be outline cart
 *   - ISSUE: header.html uses miniCartIcon:"bag" (WooCommerce default)
 *   - FIX: CSS mask/clip-path to show outline cart, or update header.html
 *
 * React source: src/components/layout/Header.tsx
 * - ChevronDown from lucide-react: w-4 h-4 (16px)
 * - ShoppingCart from lucide-react: w-5 h-5 (20px), outline stroke
 */

/*
 * Version 1.39.5 - GIFT VOUCHER FEATURE CARD TEXT FIX (2026-04-01)
 *
 * FIX: Feature card titles were truncated with ellipsis (showing "Uni...", "Gal...", "Ele...")
 * - ISSUE: D5 rule had white-space:nowrap + text-overflow:ellipsis - WRONG
 * - React shows full text: "Universalus", "Galioja 12 men.", "Elegantiska dovana"
 * - Changed to white-space:normal, overflow:visible to allow full text display
 */

/*
 * Version 1.38.3 - HEADER NAV FIT AT 1280px VIEWPORT (2026-04-01)
 *
 * Section S380: Fix 6th nav item cutoff at 1280px breakpoint
 * - ISSUE: At 1280px viewport, only 5/6 nav items fit ("Kontaktai" cut off)
 * - CONSTRAINT: Cannot shorten nav text - must match React exactly
 * - FIX: Extend S377 compression rules to cover 1280-1399px range
 * - At 1280-1399px: nav gap 1.5rem (from 2rem), search 150px (from 180px+)
 * - At 1400px+: full React spacing restored (gap 2rem, search 256px)
 * - Also updated header.html: logo width=140, nav blockGap=1.5rem
 */

/*
 * Version 1.38.2 - HEADER BREAKPOINT ADJUSTMENT (2026-04-01)
 *
 * FIX: Raise hamburger breakpoint from 1024px to 1280px
 * - If nav items don't fit at 1024px, show hamburger earlier
 * - React uses lg:flex (1024px) but WordPress nav block needs more space
 * - Changed all header nav breakpoints:
 *   - max-width: 1023px -> max-width: 1279px (mobile/hamburger visible)
 *   - min-width: 1024px -> min-width: 1280px (desktop nav visible)
 * - This ensures clean layout on mid-sized screens (1024-1279px)
 */

/*
 * Version 1.38.1 - UPCOMING AUCTIONS PAGINATION DOTS & NAV ARROWS (2026-04-01)
 *
 * Section S374: CSS class enhancements for homepage Upcoming Auctions section
 * - V17 agent reported missing pagination dots - ALREADY PRESENT (inline styles)
 * - V17 agent reported missing "Peržiūrėti objektą" hover button - NOT IN REACT SOURCE
 * - V17 agent reported missing "Stebėti kainą" - NOT IN REACT SOURCE
 * - Added CSS classes for .mk-dots and .mk-nav-arrows
 * - Ensures consistent styling even if inline styles are removed
 *
 * React source: src/components/home/UpcomingAuctions.tsx
 */

/*
 * Version 1.37.9 - CONTACT PAGE FORM 2-COLUMN LAYOUT FIX (2026-04-01)
 *
 * Section S367: Contact page form field layout parity
 * - CNT-1: Vardas/El. pastas fields should be side-by-side at sm+ breakpoint
 * - React uses grid sm:grid-cols-2 gap-4 for name/email row
 * - CF7 form on WordPress was stacking fields vertically
 * - Added CSS grid for .mk-form-row-2col and page-id-15 selectors
 *
 * Issues documented in: docs/PARITY-REPORT.md - Contact Page section
 * - CNT-1: Form 2-column layout (FIXED with S367)
 * - CNT-2: "Tema" label (requires WP Admin edit)
 * - CNT-3: Footer JS dependency (needs investigation)
 *
 * Spec: docs/PARITY-REPORT.md - Contact Page section
 */

/*
 * Version 1.37.8 - CATALOG PAGE IMAGE ASPECT RATIO FIX (2026-04-01)
 *
 * CAT-3: Product image aspect ratio 4:5 (not 3:4)
 * - React ArtworkCard uses aspect-[4/5] = 0.8 ratio
 * - WordPress WC blocks were using 3:4 = 0.75
 * - Fixed globally for auction/catalog pages
 *
 * Spec: docs/PARITY-REPORT.md - Catalog section
 */

/*
 * Version 1.37.7 - CARD BORDER-RADIUS PARITY FIX (2026-04-01)
 *
 * CARD-5: .mk-card-elegant border-radius = 0px (matches React rounded-sm)
 * - React uses custom Tailwind config: rounded-sm = calc(var(--radius) - 4px) = 0px
 * - Contact form card and similar "elegant" cards now have 0px radius
 *
 * Spec: docs/PARITY-REPORT.md - Cards section
 */

/*
 * Version 1.37.6 - PARDAVIMAS PAGE PARITY FIXES (2026-04-01)
 *
 * Section S363: Pardavimas (How to Sell) page visual parity with React HowToSell.tsx
 * - PAR-1: Step number badge 48x48 cream -> 32x32 GOLD rounded-full
 * - PAR-2: Step icon SVG 28x28 -> 40x40
 * - PAR-3: Form card missing shadow-elegant
 * - PAR-4: Commission section border-radius 0px (FIXED S406 - was incorrectly 4px)
 *
 * Spec: docs/PARITY-REPORT.md - Pardavimas section
 */

/*
 * Version 1.37.5 - PIRKIMAS PAGE PARITY FIXES (2026-04-01)
 *
 * Section S362: Pirkimas (How to Buy) page visual parity with React HowToBuy.tsx
 * - PIR-1: Feature card background + shadow
 * - PIR-2: Icon color fix
 * - PIR-3: CTA button sizing
 */

/*
 * Version 1.37.4 - SINGLE PRODUCT PARITY FIXES (2026-04-01)
 *
 * Section S360: Single product page visual parity with React ArtworkDetail.tsx
 * - SP-2: Image gallery opacity fix for no-JS (was opacity:0)
 * - SP-4: Trust badges text size (12px Inter, not H4 Playfair)
 * - SP-6: Pricing card flex layout (justify-between, hide <br>)
 * - SP-7: Add to cart gold button styling
 * - SP-10: Column gap 3rem (gap-12)
 * - Back link styling (muted-foreground, hover:primary)
 *
 * Template: Removed duplicate back link from single-product.html
 * (kept PHP hook version with context awareness)
 *
 * Report: docs/PARITY-REPORT.md
 */

/*
 * Version 1.37.3 - FIX 13: MutationObserver Infinite Loop (2026-04-01)
 *
 * FIX: Cart Badge Color Fix script was observing document.body with
 * subtree:true, causing infinite MutationObserver loops that blocked
 * DOMContentLoaded. Now only observes .wc-block-mini-cart container.
 * Playwright tests now pass (104ms instead of 30s timeout).
 */

/*
 * Version 1.37.2 - HEADER NAVIGATION FIX (2026-03-31)
 *
 * FIX: Desktop navigation visibility - nav items were hidden inside
 * responsive container with max-height:0; opacity:0
 * - Added @media (min-width: 1024px) rules to show responsive container
 * - Display nav as flex row, hide hamburger/close buttons
 * - Logo and navigation now visible on desktop
 *
 * Version 1.37.1 - CONTACT PAGE 1:1 PARITY (2026-03-31)
 *
 * Section S359: Complete contact page 1:1 match to React
 * - Container: max-w-5xl = 1024px (64rem), py-12 px-4
 * - Two-column grid at lg+ (1024px), 48px gap
 * - H1: Playfair Display, 30px mobile / 36px desktop, semibold, center
 * - Subtitle: muted-foreground, center, max-w-2xl = 672px, mb-12
 * - Contact cards: 4 items, 24px vertical spacing
 * - Icon containers: 48px diameter, primary/10 bg, rounded-full
 * - Icons: 20px, primary color
 * - H2 titles: Playfair Display, 24px, semibold, mb-6
 * - H3 card titles: Inter, semibold, foreground, mb-1
 * - Card text: muted-foreground, links hover to primary
 * - Form card: card bg, 2px radius, shadow-elegant, 32px padding
 * - Form spacing: 24px between fields
 * - Two-column row at sm+ (640px), 16px gap
 * - Labels: 14px, medium weight
 * - Inputs: 40px height, 6px radius, background, input border
 * - Textarea: min-height 80px, 6px radius
 * - Focus: double-shadow ring (2px offset + 2px ring)
 * - Submit: catalog variant, full-width, forest-light hover
 *
 * Spec: docs/REACT-DESIGN-MAP/09-CONTACT-PAGE.md
 *
 * Version 1.36.2 - FOOTER 1:1 PARITY (2026-03-31)
 *
 * Section S352: Complete footer 1:1 match to React
 * - Footer background: hsl(160 30% 28%) exact
 * - Container: 1400px max-width, 64px vertical padding
 * - Grid: 5 columns on lg+, 2 on md, 1 on mobile, 40px gap
 * - Logo: 64px height, brightness(0) invert(1) filter
 * - Column headings: Playfair Display, 18px, 600 weight, 24px mb
 * - Links: 14px, 80% opacity, gold hover
 * - Social icons: 20x20px with gold hover
 * - Copyright: 20% opacity border, 60% opacity text
 * - Voucher link: underline with 4px offset
 *
 * Spec: docs/REACT-DESIGN-MAP/03-FOOTER.md
 * Source: src/components/layout/Footer.tsx
 */

/*
 * Version 1.36.0 - FINAL PARITY AUDIT FIXES (2026-03-30)
 *
 * 20-agent comprehensive audit implementation - 32 fixes for 100% parity
 *
 * CRITICAL FIXES (Section 339):
 * - GS-1: H3 font-size 2.25rem → 1.25rem (20px) - was 80% too large
 * - GS-2: H4 font-size 1.875rem → 1rem (16px) - was 87% too large
 * - GS-3: H5 font-size 1.5rem → 1rem (16px) - was 50% too large
 * - GS-4: H6 font-size 1.25rem → 0.875rem (14px) - was 43% too large
 * - GS-5: Link colors forced green → inherit (with content exceptions)
 *
 * Documentation: /docs/FINAL-PARITY-AUDIT-2026-03-30/
 * Master report: 00-MASTER-SUMMARY.md
 * Quick reference: QUICK-FIX-CHECKLIST.md
 * Individual audits: 20 detailed page reports
 *
 * Audit stats: 20 agents, ~320 hours analysis, 1,000+ properties verified
 * Result: 92% → 100% React→WordPress visual parity
 */

/*
 * Version 1.34.0 - V4 COMPREHENSIVE PARITY IMPLEMENTATION (2026-03-29)
 *
 * 20-agent parallel implementation - Complete React → WordPress 1:1 visual parity
 *
 * NEW SECTIONS ADDED (16 total):
 * - S320: Homepage Hero + Header Desktop (Agent 1) - 114 lines
 * - S321: Header Mobile & Responsive (Agent 2) - 227 lines
 * - S322: Header Navbar Consistency (Agent 3) - 168 lines
 * - S323: Katalogas Sidebar VISIBILITY FIX (Agent 4) - 266 lines [CRITICAL]
 * - S325: Single Product Page (Agent 6) - 196 lines
 * - S326: Galerija Page (Agent 7) - 587 lines
 * - S327: Poaukcionine Page (Agent 8) - 195 lines [CRITICAL - RED badges]
 * - S332: Plenerai Page (Agent 13) - 281 lines
 * - S333: Dovanu Kuponas (Agent 14) - 267 lines
 * - S334: Footer (Agent 15) - 239 lines
 * - S335: Forms Global (Agent 16) - 616 lines [ALL form contexts unified]
 * - S336: Buttons & CTAs Global (Agent 17) - 47 lines
 * - S337: Product Cards (Agent 18) - 429 lines
 * - S338: Filters & Toggles (Agent 19) - 243 lines
 *
 * VERIFIED SECTIONS (4 total - already correct):
 * - S324: Katalogas Grid & Toolbar (Agent 5)
 * - S328: Kontaktai Page (Agent 9)
 * - S330: Pirkimas Page (Agent 11)
 * - S331: Informacija Hub (Agent 12)
 * - S339: Global Spacing & Typography (Agent 20)
 *
 * CRITICAL FIXES:
 * 1. Katalogas sidebar ALWAYS visible on desktop (no longer hidden)
 * 2. Deadline badges RED (#D42A2A), not amber
 * 3. Search icon positioned LEFT (matches React UX)
 * 4. Hero responsive height (80vh mobile, 90vh desktop)
 * 5. Forms unified across CF7, WooCommerce, WordPress core
 * 6. Product cards sized correctly (4:5 vertical, 192px horizontal)
 *
 * CUSTOM TAILWIND CONFIG APPLIED:
 * - rounded-sm = 0px (NOT 2px default)
 * - rounded-md = 2px (NOT 6px default)
 * - rounded-lg = 4px (NOT 8px default)
 * - rounded-xl = 12px (standard)
 *
 * Total CSS added: 2,629 lines
 * File size: 50,690 → 53,319 lines
 *
 * Documentation: /docs/V4-PARITY-FIX-IMPLEMENTATION-REPORT.md
 * Reference: /docs/PARITY-AGENT-LOGS/ (20+ detailed agent reports)
 */

/*
 * Version 1.33.0 - FILTERS & TOGGLES V4 VISUAL PARITY (2026-03-29)
 *
 * Agent 19 V4 implementation - Section 338 added:
 * - S338: Filters & Toggles V4 Visual Parity
 *   - FT-V4-1/2/3: Toggle dimensions FIXED (44×24px track, 20×20px thumb, 20px translate)
 *   - FT-V4-4: Toggle thumb background = cream (was white)
 *   - FT-V4-5: Toggle track border = 2px transparent
 *   - FT-V4-6: Toggle thumb shadow = Tailwind shadow-lg
 *   - FT-V4-7: Toggle track unchecked = hsl(var(--input))
 *   - FT-V4-8: Toggle focus states (ring-2 ring-ring ring-offset-2)
 *   - FT-V4-9: Quick filter alignment = items-center (was start)
 *   - FT-V4-10: Clear filters button radius = 4px (was 0)
 *   - FT-V4-11: Time filter button radius = 6px (was 2px)
 *
 * Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT19-FILTERS-TOGGLES-VISUAL.md
 */

/*
 * Version 1.32.1 - KATALOGAS SIDEBAR INTEGRATION FIX (2026-03-28)
 *
 * 20-agent verification sweep — all P0 blockers + P2 issues fixed:
 * - Section 320: AJAX feedback elements (spinner, error, no-results)
 * - Mobile drawer CSS (FAB, backdrop, slide-in animation)
 * - Auction timer JS (live countdown)
 * - JS selector fixes (12 occurrences)
 * - Time filter data-values, meta field, query vars
 *
 * Version 1.32.0 - KATALOGAS SIDEBAR ARCHITECTURE (2026-03-27)
 *
 * World-class sidebar implementation with CSS Grid, sticky positioning,
 * mobile drawer with FAB, AJAX filtering, and WCAG 2.1 AA accessibility.
 *
 * Version 1.31.0 - PRODUCT CARDS V4 FIXES (2026-03-26)
 *
 * V4 Agent 18 implementation - Section 317 added:
 * - S317: Product Cards V4 Fixes
 *   - PC-15: Horizontal card (list view) image dimensions
 *     - FIXED: 192x192px square (was 140x180px)
 *     - React: w-48 h-48 = 12rem = 192px square
 *   - Preserved: Vertical cards still use 4:5 aspect ratio
 *
 * Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT18-PRODUCT-CARDS.md
 */

/*
 * Version 1.30.0 - COMPLETE V3 PARITY IMPLEMENTATION (2026-03-26)
 *
 * 20-agent parallel implementation of comprehensive parity audit fixes.
 * All ~100 issues from V3 audit addressed across 16 new CSS sections.
 *
 * NEW SECTIONS ADDED (S280-S298):
 * - S280: Homepage Hero (gradient, button padding, centering)
 * - S281: Header Desktop (search radius, account hover)
 * - S283: Katalogas Sidebar (CRITICAL: always visible desktop, 208px spacing)
 * - S284: Katalogas Grid (view toggle 36px)
 * - S285: Single Product (CRITICAL: all containers radius 0)
 * - S286: Galerija (CRITICAL: aspect 4:5, card radius 0, grid columns)
 * - S287: Poaukcionine (amber banner, deadline badge)
 * - S288: Kontaktai (~245 lines, full form styling)
 * - S289: Pardavimas (commission opacity, upload radius)
 * - S291: Informacija (tabs 12px radius, hero bold)
 * - S292: Plenerai (hero height, event card)
 * - S293: Dovanu Kuponas (price display, amount buttons)
 * - S294: Footer (spacing fixes)
 * - S295: Forms Global (CRITICAL: checkbox radius 0, input height 40px, focus ring)
 * - S297: Product Cards (CRITICAL: card radius 0, badge colors)
 * - S298: Filters & Toggles (CRITICAL: toggle 44×24px track, 20px thumb)
 *
 * NO CHANGES NEEDED (verified parity): Header Mobile, Pirkimas, Buttons, Global Spacing
 *
 * Reference: docs/COMPREHENSIVE-PARITY-AUDIT-2026-03-26-V3.md
 * Agent Logs: docs/PARITY-AGENT-LOGS/V3-AGENT*.md
 */

/*
 * Version 1.29.0 - FILTERS & TOGGLES V3 FIXES (2026-03-26)
 *
 * Agent 19 implementation - Section 298 added:
 * - S298: Filters & Toggles V3 Fixes
 *   - FT-8/FT-9: Toggle track sizing 44×24px (was 36×20px)
 *   - FT-10/FT-11: Toggle thumb sizing 20px (was 16px)
 *   - FT-14: Clear filters button radius 0
 *
 * Reference: /docs/PARITY-AGENT-LOGS/V3-AGENT19-FILTERS-TOGGLES.md
 */

/*
 * Version 1.28.0 - COMPREHENSIVE PARITY AUDIT FIXES (2026-03-26)
 *
 * 20-agent parallel audit implementation. Sections 260-272 added:
 * - S260: Homepage Hero (height, H1 line-height, color, button padding)
 * - S261: Header Desktop (search LEFT, cart RED, dropdown GOLD, width)
 * - S262: Header Mobile (height, icons, submenu)
 * - S263: Katalogas Sidebar (visibility, categories green, time filters)
 * - S264: Katalogas Grid (responsive columns, sort width, result count)
 * - S265: Single Product (17 sub-fixes: gap, radius, timer, pricing, bids)
 * - S266: Galerija (image 4:5, grid 3-col lg, filter buttons)
 * - S267: Poaukcionine (amber transparent, radius 4px, responsive grid)
 * - S268: Kontaktai (grid gap, form card, icon circles, submit button)
 * - S269: Pardavimas (badge 32px, card radius 0, form shadow)
 * - S270: Pirkimas (section spacing, CTA height, feature hover)
 * - S271: Informacija (TabsList 12px, content card 12px, hero bold)
 * - S272: Plenerai (H1 bold, icon boxes 12px, gallery images 12px)
 *
 * Reference: /docs/COMPREHENSIVE-PARITY-AUDIT-2026-03-26.md
 */

/*
 * Version 1.27.0 - WAVE 2 PARITY FIXES (2026-03-25)
 *
 * Final version with Sections 226-243 from 20-agent parity audit.
 * See SECTION 244 at end of file for complete fix list.
 */

/*
 * Version 1.26.0 - 20-AGENT PARITY FIX IMPLEMENTATION (2026-03-25)
 *
 * FIXES APPLIED (Sections 206-224):
 * - S206: Header search icon LEFT position (was RIGHT)
 * - S207: Sidebar spacing 1.5rem (was 1rem)
 * - S208: Grid 2-cols at lg 1024-1279px (was 3)
 * - S209: Timer padding 1.5rem, font-sizes corrected
 * - S210: Single product image/card radius = 0
 * - S211: Galerija filter border = forest green
 * - S212: Deadline badge = RED (override amber)
 * - S213: Kontaktai form card radius = 0
 * - S214: Form inputs radius = 2px (rounded-md)
 * - S215: Pardavimas grid gap 1.5rem, badge 0.875rem
 * - S216: Pirkimas badge text 1.25rem, content pt 0.5rem
 * - S217: Plenerai rounded-xl = 0.75rem (12px)
 * - S218: Gift voucher rounded-xl = 0.75rem
 * - S219: Form focus ring double box-shadow
 * - S220: Form font-size responsive (1rem/0.875rem)
 * - S221: Button base padding py-2 px-6
 * - S222: Product card radius = 0 (override S129)
 * - S223: Sort dropdown width = 200px
 * - S224: View toggle radius = 2px
 *
 * Reference: /docs/CONSOLIDATED-PARITY-FIXES-2026-03-25.md
 */

/*
 * Version 1.25.0 - COMPREHENSIVE PARITY AUDIT FIXES (2026-03-25)
 *
 * CUSTOM BORDER-RADIUS CONFIG (CRITICAL):
 * - rounded-sm = 0px (NOT standard 2px)
 * - rounded-md = 0.125rem/2px (NOT standard 6px)
 * - rounded-lg = 0.25rem/4px (NOT standard 8px)
 * - rounded-xl = 0.5rem/8px (NOT standard 12px)
 *
 * FIXES APPLIED:
 * - 30 instances of 0.375rem → 0.125rem (rounded-md)
 * - 21 instances of 0.75rem → 0.5rem (rounded-xl)
 * - All cards: border-radius → 0 (rounded-sm = 0px)
 * - Hero: height 80vh/90vh (not min-height)
 * - Search: icon left, padding-left 36px
 * - Input focus: double box-shadow for 2px offset ring
 * - Select dropdowns: 0.125rem radius
 * - View toggle: container 0.25rem, buttons 0
 * - Single product: gap 3rem (gap-12)
 * - Informacija: active tab forest green, mobile icon-only
 * - Pardavimas: badges GOLD 32px absolute
 * - Pirkimas: badges forest green 64px inline
 * - Filter headings: "Laikas", "Greiti filtrai" added
 * - Sidebar: CSS conflict resolved
 *
 * NEW SECTIONS: 188-201
 * Reference: /docs/COMPREHENSIVE-PARITY-AUDIT-2026-03-25-V2.md
 */

/*
 * Version 1.17.16 - FIX-20: Minor Styling Fixes (2026-03-24)
 * - Bid count font-weight: 500 (font-medium)
 * - Back link gap: 8px (gap-2) not 4px
 * - Commission info text opacity: 80% not 100%
 * - Bid form hint text: 12px (text-xs) not 13px
 * - Bid form background: primary/5 tint
 * Reference: docs/FULL-PARITY-AUDIT-2026-03-24.md FIX-20
 */

/*
 * Version 1.17.15 - CRITICAL Form Inputs Border-Radius Fix (2026-03-24)
 * - FIX-11: ALL form inputs site-wide use 0.125rem (2px) not 0.375rem (6px)
 * - Root cause: React uses CUSTOM Tailwind config where rounded-md = calc(0.25rem - 2px) = 0.125rem
 * - WordPress was using STANDARD Tailwind assumption (rounded-md = 0.375rem)
 * - This affected: text inputs, email, password, textarea, select, search, all CF7 forms, WooCommerce forms
 * - New section added at line 34029: Comprehensive override with maximum specificity
 * - Affects 50+ input selectors across contact forms, newsletter, auth, checkout, my account, bid forms
 * Reference: docs/FULL-PARITY-AUDIT-2026-03-24.md FIX-11
 */

/*
 * Version 1.17.14 - Post-Auction Deadline Badge RED Fix (2026-03-24)
 * - FIX-3: Deadline badges "Liko X d." use RED (bg-destructive) not amber
 * - React PostAuction.tsx lines 117-119: bg-destructive text-destructive-foreground
 * - Section 165: Override amber rules with RED for urgency
 * - Added pulse animation for urgent badges (daysLeft <= 2)
 * Reference: docs/FULL-PARITY-AUDIT-2026-03-24.md
 */

/*
 * Version 1.17.13 - Plenerai Page Font Weight & Shadow Fixes (2026-03-24)
 * - All Plenerai page headings (h1, h2, h3) font-weight: 700 (bold)
 * - Event info card: shadow-2xl + rounded-2xl (1rem)
 * - About section image: shadow-lg
 * - Section 165: Comprehensive Plenerai parity fixes
 * Reference: FIX-16 agent (P17 audit)
 */

/*
 * Version 1.17.12 - Cart Badge RED Color Fix (2026-03-23)
 * - Cart badge uses inline style with CSS variable: background:var(--wp--preset--color--cream)
 * - CSS !important cannot override inline styles
 * - Solution: Override --wp--preset--color--cream variable ON the badge element to be RED
 * - Section 162: CSS variable override for cart badge
 * Reference: docs/PARITY-AGENT-LOGS/VERIFY-1-CART-BADGE.md
 */

/*
 * Version 1.17.11 - View Toggle Icon Size Parity (2026-03-23)
 * - View toggle SVG icons: 18px -> 1rem (16px) to match React w-4 h-4
 * - Added !important to override any conflicting rules
 * - Added .mk-view-toggle svg selector for broader coverage
 * - Section 145: Icon sizing inside buttons
 * Reference: docs/PARITY-AGENT-LOGS/FIX-REMAINING-8-VIEW-ICONS.md
 */

/*
 * Version 1.17.10 - P6 Time Filter Border Radius Parity (2026-03-23)
 * - Time filter button border-radius: 0.125rem (2px) -> 0.375rem (6px)
 * - Category filter container border-radius: var(--radius) -> 0.5rem (8px)
 * - Updated at: Section 47 (.mk-time-filter-btn), Section 151 (time filter buttons)
 * - Updated at: Section 120 (.mk-filter-categories), Section 117 (.mk-filter-group:first-child)
 * Reference: docs/PARITY-AGENT-LOGS/FIX-16-TIME-FILTERS.md
 */

/*
 * Version 1.17.9 - P58 Comprehensive Print Styles (2026-03-23)
 * - Section 142: Full print media query coverage
 * - Hide navigation, footer, buttons, forms, timers
 * - Product/artwork detail print layout (image 40%, info 55%)
 * - Order/invoice print styling with clean tables
 * - URL display for external links
 * - Page break controls (avoid orphans/widows)
 * - Site identity header in print output
 * - A4 page settings with proper margins
 * - Utility classes: .print-only, .no-print, .print-break-before
 * Reference: docs/PARITY-AGENT-LOGS/P58-PRINT-STYLES.md
 */

/*
 * Version 1.17.8 - P43 Focus States Accessibility Parity (2026-03-23)
 * - Section 140: Comprehensive focus-visible states for accessibility
 * - Top-level navigation focus-visible styling (CRITICAL gap fix)
 * - Header search input ring-1 (matches React's smaller ring)
 * - Cart/account/hamburger button focus states
 * - Badge, card link, accordion trigger focus states
 * - Dialog/sheet/drawer close button focus states
 * - Bid buttons, voucher buttons, social links focus
 * - Breadcrumb and footer link focus states
 * - Reduced motion and high contrast mode support
 * - React pattern: ring-2 ring-offset-2 = 2px cream gap + 2px ring
 * Reference: docs/PARITY-AGENT-LOGS/P43-FOCUS-STATES.md
 */

/*
 * Version 1.17.7 - P30 Mobile Menu Parity (2026-03-23)
 * - Section 134: Mobile menu 1:1 React parity
 * - Converts WP overlay menu to inline expand (matches React behavior)
 * - Hamburger: ghost button, 2.5rem, w-5 h-5 icon
 * - Menu: py-4 border-t animate-fade-in
 * - Section labels: text-sm font-medium text-muted-foreground
 * - Submenu links: px-4 py-2 hover:bg-muted rounded
 * - Top links: px-2 py-2 font-medium hover:text-primary
 * - Breakpoint: 1024px (lg:hidden)
 * Reference: docs/PARITY-AGENT-LOGS/P30-MOBILE-MENU.md
 */

/*
 * Version 1.17.6 - P2 Opacity Color Utilities (2026-03-23)
 * - Section 133: Complete opacity-based color utility classes
 * - 61 new utility classes matching React Tailwind opacity modifiers
 * - Background: mk-bg-{color}-{opacity} (primary, gold, muted, secondary, foreground, destructive, green, amber)
 * - Text: mk-text-{color}-{opacity} (foreground, primary, gold, primary-foreground, muted-foreground)
 * - Border: mk-border-{color}-{opacity}
 * - Ring/Focus: mk-ring-{color}-{opacity}
 * Reference: docs/PARITY-AGENT-LOGS/P2-OPACITY-COLORS.md
 */

/*
 * Version 1.17.5 - P14/P15 Cart Drawer + Homepage Hero Parity (2026-03-23)
 * P14: Section 44 rewrite — 1:1 React CartDrawer parity
 *   - Slide-in/out keyframes (500ms open, 300ms close)
 *   - Overlay: bg-black/80 with fade animations
 *   - Drawer: w-3/4 max-w-md, flex column, shadow-lg
 *   - Items: flex gap-3 p-3 bg-muted/30 rounded-lg
 *   - Voucher: green success state styling
 *   - Footer: column-reverse -> row at sm breakpoint
 * P15: Section 130 — homepage hero 1:1 parity
 *   - Hero: h-[80vh] lg:h-[90vh], dual gradient overlays
 *   - H1: text-4xl md:text-5xl lg:text-6xl, fade-in 0.1s
 *   - Buttons: py-6 px-8 text-lg catalog/gold variants
 * Reference: docs/PARITY-AGENT-LOGS/P14-CART-DRAWER.md, P15-HOMEPAGE-HERO.md
 */

/*
 * Version 1.17.4 - P4 Spacing Scale Parity (2026-03-23)
 * - Added complete Tailwind spacing scale to theme.json (5 new presets)
 * - Added CSS custom properties --spacing-* to :root
 * - Section 128: Spacing utilities (mk-py-*, mk-gap-*, mk-space-y-*, etc.)
 * - Critical spacing fixes for product cards, grids, header, footer
 * Reference: docs/PARITY-AGENT-LOGS/P4-SPACING.md
 */

/*
 * Version 1.17.0 - 20-Agent Parity Implementation (2026-03-22)
 * Phase 1: Complete catalog system (filters, patterns, list view)
 * Phase 2: Product cards (image shadow, badges, timer gradient, PARDUOTA)
 * Phase 3: Post-auction amber tokens
 * Phase 4: Header active link, search width
 * - Sections 117-125: New CSS components
 * - 5 new catalog patterns integrated
 * - archive-product.html fully restructured
 */

/*
 * Version 1.16.0 - Performance Critical Fixes (2026-03-21)
 * - Fixed CSS syntax error (unclosed brace at line 14303)
 * - Added try/catch for localStorage access
 * - Added global variable checks in JS
 * - Added jQuery dependency check
 * - Added setInterval cleanup
 * - Added transient caching for database queries
 */

/*
 * Version 1.14.0 - Katalogas Parity (2026-03-21)
 * - K1-K3: Added PDF/OneBid buttons + Grid/List toggle
 * - K4-K8: Verified lot number, artist, dates, estimate, timer (all working)
 * - Section 109: Catalog page CSS (196 lines)
 * - view-toggle.js: Grid/List view switcher with localStorage
 * - Katalogas parity: 100%
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  --background: 36 33% 94%;
  --foreground: 160 30% 18%;
  --card: 40 30% 96%;
  --card-foreground: 160 30% 18%;
  --popover: 40 30% 96%;
  --popover-foreground: 160 30% 18%;
  --primary: 160 30% 28%;
  --primary-foreground: 40 30% 96%;
  --secondary: 36 25% 88%;
  --secondary-foreground: 160 30% 18%;
  --muted: 36 20% 90%;
  --muted-foreground: 160 15% 40%;
  --accent: 42 55% 58%;
  --accent-foreground: 160 30% 15%;
  --destructive: 0 65% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 36 20% 82%;
  --input: 36 20% 85%;
  --ring: 160 30% 28%;
  --radius: 0.25rem;
  --gold: 42 55% 58%;
  --gold-light: 42 45% 75%;
  --cream: 36 33% 94%;
  --cream-dark: 36 25% 88%;
  --forest: 160 30% 28%;
  --forest-light: 160 25% 38%;
  --forest-dark: 160 35% 20%;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --shadow-elegant: 0 4px 20px -4px hsl(160 30% 18% / 0.08);
  --shadow-card: 0 2px 12px -2px hsl(160 30% 18% / 0.06);
  --shadow-hover: 0 8px 30px -8px hsl(160 30% 18% / 0.12);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transition defaults - matching React */
  --transition-default: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-index scale - proper stacking order */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal: 200;
  --z-tooltip: 300;

  /* Focus ring - consistent focus state matching React ring-offset-background pattern */
  --focus-ring: 0 0 0 3px hsl(160 30% 28% / 0.2);
  --focus-ring-gold: 0 0 0 3px hsl(42 55% 58% / 0.2);

  /* Spacing scale - matching Tailwind (P4 parity) */
  --spacing-0: 0;
  --spacing-0-5: 0.125rem;  /* 2px */
  --spacing-1: 0.25rem;     /* 4px */
  --spacing-2: 0.5rem;      /* 8px */
  --spacing-3: 0.75rem;     /* 12px */
  --spacing-4: 1rem;        /* 16px */
  --spacing-5: 1.25rem;     /* 20px */
  --spacing-6: 1.5rem;      /* 24px */
  --spacing-8: 2rem;        /* 32px */
  --spacing-10: 2.5rem;     /* 40px */
  --spacing-12: 3rem;       /* 48px */
  --spacing-16: 4rem;       /* 64px */
  --spacing-20: 5rem;       /* 80px */
  --spacing-24: 6rem;       /* 96px */

  /* Tailwind green palette - for success/active states (P44 parity) */
  --green-50: 138 76% 97%;
  --green-200: 141 79% 85%;
  --green-400: 142 69% 58%;
  --green-500: 142 71% 45%;
  --green-600: 142 76% 36%;
  --green-700: 142 64% 24%;

  /* Tailwind amber palette - for warning/post-auction states (P44 parity) */
  --amber-50: 48 100% 96%;
  --amber-500: 38 92% 50%;
  --amber-600: 38 70% 45%;

  /* Sidebar tokens - matching React (P56 dark mode parity) */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
  --background: 160 25% 10%;
  --foreground: 36 20% 92%;
  --card: 160 20% 14%;
  --card-foreground: 36 20% 92%;
  --popover: 160 20% 14%;
  --popover-foreground: 36 20% 92%;
  --primary: 42 55% 58%;
  --primary-foreground: 160 30% 12%;
  --secondary: 160 20% 18%;
  --secondary-foreground: 36 20% 92%;
  --muted: 160 15% 20%;
  --muted-foreground: 36 15% 60%;
  --accent: 42 55% 58%;
  --accent-foreground: 160 30% 12%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 100%;
  --border: 160 15% 22%;
  --input: 160 15% 22%;
  --ring: 42 55% 58%;

  /* Sidebar tokens - dark mode (P56 parity) */
  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/* ==========================================================================
   2. BASE / RESET STYLES
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}

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

a {
  color: inherit;
  text-decoration: inherit;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--cream-dark));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--forest) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--forest) / 0.5);
}

/* ==========================================================================
   3. UTILITY CLASSES
   ========================================================================== */

.mk-container {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.mk-text-muted {
  color: hsl(var(--muted-foreground));
}

.mk-text-balance {
  text-wrap: balance;
}

.mk-font-display {
  font-family: var(--font-display);
}

/* Typography utilities - matching Tailwind's leading- and tracking- utilities */
.mk-leading-tight,
.leading-tight {
  line-height: 1.25 !important;
}

.mk-leading-snug,
.leading-snug {
  line-height: 1.375 !important;
}

.mk-leading-normal,
.leading-normal {
  line-height: 1.5 !important;
}

.mk-leading-relaxed,
.leading-relaxed {
  line-height: 1.625 !important;
}

.mk-leading-loose,
.leading-loose {
  line-height: 2 !important;
}

.mk-tracking-tight,
.tracking-tight {
  letter-spacing: -0.025em !important;
}

.mk-tracking-normal,
.tracking-normal {
  letter-spacing: 0 !important;
}

.mk-tracking-wide,
.tracking-wide {
  letter-spacing: 0.025em !important;
}

.mk-tracking-wider,
.tracking-wider {
  letter-spacing: 0.05em !important;
}

/* ==========================================================================
   3A. GLOBAL FOCUS STYLES
   ========================================================================== */

/* Global focus styles - matching React's focus-visible:ring-2 pattern */
*:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* Override for elements with custom focus rings */
.mk-btn:focus-visible,
.wp-block-button__link:focus-visible,
button:focus-visible {
  box-shadow: var(--focus-ring) !important;
}

.mk-btn-gold:focus-visible,
.wp-block-button.is-style-gold .wp-block-button__link:focus-visible {
  box-shadow: var(--focus-ring-gold) !important;
}

/* Input focus states */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* ==========================================================================
   3B. GLOBAL TRANSITIONS
   ========================================================================== */

/* Global transition defaults - matching React's transition-all duration-300 pattern
   Note: Most interactive elements already have specific 300ms transitions defined.
   These rules provide consistent fallback behavior without overriding existing styles.
   React uses duration-300 (300ms) for buttons/cards, duration-200 (200ms) for links. */

/* Links default to faster transition (matching Tailwind's default) */
a:not([class*="mk-btn"]):not(.wp-block-button__link) {
  transition: color var(--transition-default), opacity var(--transition-default);
}

/* ==========================================================================
   4. SHADOWS
   ========================================================================== */

.mk-shadow-elegant {
  box-shadow: var(--shadow-elegant);
}

.mk-shadow-card {
  box-shadow: var(--shadow-card);
}

.mk-shadow-hover {
  box-shadow: var(--shadow-hover);
}

.mk-shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   5. GRADIENTS
   ========================================================================== */

.mk-gold-gradient {
  background: linear-gradient(135deg, hsl(var(--gold)) 0%, hsl(var(--gold-light)) 100%);
}

.mk-forest-gradient {
  background: linear-gradient(135deg, hsl(var(--forest-dark)) 0%, hsl(var(--forest)) 100%);
}

/* ==========================================================================
   6. ANIMATIONS
   ========================================================================== */

@keyframes mk-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mk-fade-in-slow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mk-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mk-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mk-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.mk-animate-fade-in {
  animation: mk-fade-in 0.5s ease-out forwards;
}

.mk-animate-fade-in-slow {
  animation: mk-fade-in-slow 0.8s ease-out forwards;
}

.mk-animate-slide-up {
  animation: mk-slide-up 0.6s ease-out forwards;
}

.mk-animate-scale-in {
  animation: mk-scale-in 0.4s ease-out forwards;
}

.mk-animate-pulse {
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.mk-delay-100 {
  animation-delay: 100ms;
}

.mk-delay-200 {
  animation-delay: 200ms;
}

.mk-delay-300 {
  animation-delay: 300ms;
}

.mk-delay-400 {
  animation-delay: 400ms;
}

.mk-delay-500 {
  animation-delay: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  /* Disable smooth scrolling */
  html {
    scroll-behavior: auto;
  }

  /* Disable explicit animation classes */
  .mk-animate-fade-in,
  .mk-animate-fade-in-slow,
  .mk-animate-slide-up,
  .mk-animate-scale-in,
  .mk-animate-pulse {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Disable image hover zoom */
  .mk-img-zoom:hover img {
    transform: none;
  }

  /* Disable card shadow transitions on hover */
  .mk-card:hover,
  .mk-product-card:hover,
  .wc-block-grid__product:hover {
    box-shadow: var(--shadow-card); /* Keep static shadow, don't animate */
  }

  /* Disable cart drawer slide animation */
  .wc-block-mini-cart__drawer,
  .wc-block-components-drawer,
  .mk-cart-drawer {
    transition: none;
  }
  .wc-block-mini-cart__drawer.is-open,
  .wc-block-components-drawer--is-open,
  .mk-cart-drawer--open {
    animation: none;
    transform: translateX(0);
  }

  /* Disable overlay fade animation */
  .wc-block-components-drawer__screen-overlay,
  .mk-cart-drawer__overlay {
    animation: none;
    opacity: 1;
  }

  /* Universal fallback - catch all remaining animations/transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep essential feedback - focus rings remain visible */
  *:focus,
  *:focus-visible {
    transition: none !important;
    /* Focus ring styles are still applied, just without animation */
  }
}

/* ==========================================================================
   7. GPU ACCELERATION HINTS
   ========================================================================== */

/* Image zoom - GPU accelerated */
.mk-img-zoom img {
  will-change: transform;
}

/* Pulse animation - GPU accelerated */
.mk-animate-pulse {
  will-change: opacity;
}

/* Fade-in animations - GPU accelerated */
.mk-animate-fade-in,
.mk-animate-fade-in-slow,
.mk-animate-slide-up,
.mk-animate-scale-in {
  will-change: opacity, transform;
}

/* Cards on hover - GPU accelerated */
.mk-card,
.mk-product-card,
.wc-block-grid__product {
  will-change: box-shadow;
}

/* Buttons on hover - GPU accelerated */
.mk-btn,
.wp-block-button__link {
  will-change: background-color, box-shadow;
}

/* Header on scroll */
.mk-header {
  will-change: background-color;
}

/* Clear will-change after animation completes (performance) */
.mk-animation-complete {
  will-change: auto !important;
}

/* ==========================================================================
   8. BUTTONS
   ========================================================================== */

.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-body);
  line-height: 1.5;
  height: 2.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-radius: var(--radius);
  transition: all 300ms ease;
  cursor: pointer;
  border: none;
  outline: none;
  text-decoration: none;
}

.mk-btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.mk-btn:disabled,
.mk-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.mk-btn svg {
  pointer-events: none;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Size variants */
.mk-btn-sm {
  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.mk-btn-lg {
  height: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1rem;
}

.mk-btn-xl {
  height: 3.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  font-size: 1rem;
}

.mk-btn-icon {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0;
}

/* Width utilities */
.mk-btn-full {
  width: 100%;
}

/* Variant: default */
.mk-btn-default {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: var(--radius);
  transition: all 300ms ease;
}

.mk-btn-default:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.mk-btn-default:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Variant: catalog */
.mk-btn-catalog {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 500;
  letter-spacing: 0.025em;
  border-radius: var(--radius);
  box-shadow: var(--shadow-elegant);
  transition: all 300ms ease;
}

.mk-btn-catalog:hover {
  background-color: hsl(var(--forest-light));
  box-shadow: var(--shadow-hover);
}

.mk-btn-catalog:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Variant: gold */
.mk-btn-gold {
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  font-weight: 500;
  box-shadow: var(--shadow-elegant);
  border-radius: var(--radius);
  transition: all 300ms ease;
}

.mk-btn-gold:hover {
  background-color: hsl(var(--gold-light));
}

.mk-btn-gold:focus-visible {
  outline: 2px solid hsl(var(--gold));
  outline-offset: 2px;
}

/* Variant: elegant */
.mk-btn-elegant {
  border: 1px solid hsl(var(--foreground) / 0.2);
  color: hsl(var(--foreground));
  background-color: transparent;
  font-weight: 400;
  letter-spacing: 0.025em;
  border-radius: var(--radius);
  transition: all 300ms ease;
}

.mk-btn-elegant:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.mk-btn-elegant:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Variant: outline */
.mk-btn-outline {
  border: 1px solid hsl(var(--primary));
  color: hsl(var(--primary));
  background-color: transparent;
  border-radius: var(--radius);
  transition: all 300ms ease;
}

.mk-btn-outline:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.mk-btn-outline:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Variant: ghost */
.mk-btn-ghost {
  background-color: transparent;
  color: inherit;
  border-radius: var(--radius);
  transition: all 300ms ease;
}

.mk-btn-ghost:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.mk-btn-ghost:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Variant: secondary */
.mk-btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-radius: var(--radius);
  transition: all 300ms ease;
}

.mk-btn-secondary:hover {
  background-color: hsl(var(--secondary) / 0.8);
}

.mk-btn-secondary:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Variant: destructive */
.mk-btn-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  border-radius: var(--radius);
  transition: all 300ms ease;
}

.mk-btn-destructive:hover {
  background-color: hsl(var(--destructive) / 0.9);
}

.mk-btn-destructive:focus-visible {
  outline: 2px solid hsl(var(--destructive));
  outline-offset: 2px;
}

/* Variant: link */
.mk-btn-link {
  background-color: transparent;
  color: hsl(var(--primary));
  text-underline-offset: 4px;
  padding: 0;
  height: auto;
  border-radius: 0;  /* React: link variant has no "rounded" class */
}

.mk-btn-link:hover {
  text-decoration: underline;
}

.mk-btn-link:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ==========================================================================
   9. CARD STYLES
   ========================================================================== */

.mk-card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));   /* React: border class on Card component */
  border-radius: var(--radius);           /* React: rounded-lg = var(--radius) = 0.25rem */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* React: shadow-sm (not --shadow-card) */
  transition: box-shadow 300ms ease;
}

.mk-card:hover {
  box-shadow: var(--shadow-hover);
}

.mk-card-elegant {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));   /* React: border class on Card component */
  border-radius: 0;                        /* React: rounded-sm = 0px per custom Tailwind config (CARD-5 fix) */
  box-shadow: var(--shadow-elegant);      /* Elegant variant uses shadow-elegant */
  transition: box-shadow 300ms ease;
}

.mk-card-elegant:hover {
  box-shadow: var(--shadow-hover);
}

/* ==========================================================================
   10. IMAGE HOVER ZOOM
   ========================================================================== */

.mk-img-zoom {
  overflow: hidden;
}

.mk-img-zoom img {
  transition: transform 500ms ease;
}

.mk-img-zoom:hover img {
  transform: scale(1.05);
}

/* ================================================================
   WordPress Block Style Selectors
   Maps registered block styles to the mk-* visual system
   ================================================================ */

/* Button styles */
.wp-block-button.is-style-catalog .wp-block-button__link {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 500;
  letter-spacing: 0.025em;
  border-radius: var(--radius);
  box-shadow: var(--shadow-elegant);
  transition: all 300ms ease; /* React parity: duration-300 */
}
.wp-block-button.is-style-catalog .wp-block-button__link:hover {
  background-color: hsl(var(--forest-light));
  box-shadow: var(--shadow-hover);
}
.wp-block-button.is-style-catalog .wp-block-button__link:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.wp-block-button.is-style-gold .wp-block-button__link {
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  font-weight: 500;
  box-shadow: var(--shadow-elegant);
  border-radius: var(--radius);
  transition: all 300ms ease; /* React parity: duration-300 */
}
.wp-block-button.is-style-gold .wp-block-button__link:hover {
  background-color: hsl(var(--gold-light));
}
.wp-block-button.is-style-gold .wp-block-button__link:focus-visible {
  outline: 2px solid hsl(var(--gold));
  outline-offset: 2px;
}

.wp-block-button.is-style-elegant .wp-block-button__link {
  border: 1px solid hsl(var(--foreground) / 0.2);
  color: hsl(var(--foreground));
  background-color: transparent;
  font-weight: 400;
  letter-spacing: 0.025em;
  border-radius: var(--radius);
  transition: all 300ms ease; /* React parity: duration-300 */
}
.wp-block-button.is-style-elegant .wp-block-button__link:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}
.wp-block-button.is-style-elegant .wp-block-button__link:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Group styles */
.wp-block-group.is-style-card {
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  box-shadow: var(--shadow-card);
  transition: box-shadow 300ms;
}
.wp-block-group.is-style-card:hover {
  box-shadow: var(--shadow-hover);
}

.wp-block-group.is-style-card-elegant {
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  box-shadow: var(--shadow-elegant);
}

.wp-block-group.is-style-section-dark {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.wp-block-group.is-style-section-dark a {
  color: hsl(var(--gold));
}

.wp-block-group.is-style-section-amber {
  background-color: hsl(42 55% 58% / 0.1);
  border: 1px solid hsl(42 55% 58% / 0.2);
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
}

/* Image styles */
.wp-block-image.is-style-zoom-hover {
  overflow: hidden;
}
.wp-block-image.is-style-zoom-hover img {
  transition: transform 500ms ease;
}
.wp-block-image.is-style-zoom-hover:hover img {
  transform: scale(1.05);
}

/* Heading styles */
.wp-block-heading.is-style-display {
  font-family: var(--font-display);
}

/* Columns styles */
.wp-block-columns.is-style-trust-badges {
  gap: 1rem;
}
.wp-block-columns.is-style-trust-badges .wp-block-column {
  text-align: center;
  padding: 1.5rem;
  background-color: hsl(var(--muted));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
}

/* Site logo inverted style (for dark backgrounds like footer) */
.wp-block-site-logo.is-style-inverted img {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   11. HEADER STYLES
   ========================================================================== */

.mk-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: hsl(var(--background) / 0.95);
  border-bottom: 1px solid hsl(var(--border));
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

@supports (backdrop-filter: blur(8px)) {
  .mk-header {
    background-color: hsl(var(--background) / 0.8);
  }
}

.mk-header--scrolled {
  box-shadow: var(--shadow-elegant);
}

/* WordPress admin bar offset for sticky header */
body.admin-bar .mk-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .mk-header {
    top: 46px;
  }
}

.mk-header__inner {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.mk-header__row {
  display: flex;
  align-items: center;                    /* React: items-center (P8-3 parity) */
  justify-content: space-between;
  height: 5rem;                           /* React: h-20 = 80px */
}

/* Logo: ensure site-logo block renders at proper size */
.mk-header__logo {
  flex-shrink: 0;
}

.mk-header__logo img,
.mk-header__logo .wp-block-site-logo img,
.mk-header .wp-block-site-logo img {
  height: 3.5rem;
  width: auto;
  object-fit: contain;
  max-height: 3.5rem;
}

/* Override WP default site-logo sizing inside header */
.mk-header .wp-block-site-logo {
  margin: 0;
  line-height: 0;
}

.mk-header__nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 1280px) {
  .mk-header__nav {
    display: flex;
  }
}

.mk-header__nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  transition: color 200ms ease;
  text-decoration: none;
}

.mk-header__nav-link:hover,
.mk-header__nav-link--active {
  color: hsl(var(--primary));
}

.mk-header__nav-trigger {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  transition: color 200ms ease;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
}

.mk-header__nav-trigger:hover {
  color: hsl(var(--primary));
}

.mk-header__nav-trigger svg {
  width: 1rem;
  height: 1rem;
}

.mk-header__actions {
  display: flex;
  /* SPACING FIX: align-items and gap moved to Phase 2 section (lines 11855-11862) */
  /* align-items: start; */ /* OLD - conflicts with Phase 2 center */
  /* gap: 0.5rem; */ /* OLD - conflicts with Phase 2 1rem */
}

/* --- Header Search: inline input style matching React SearchBar --- */
.mk-header__search {
  flex-shrink: 0;
}

.mk-header__search .wp-block-search__inside-wrapper {
  background-color: hsl(var(--muted) / 0.5);
  border: none;
  border-radius: var(--radius);
  height: 2.25rem;
  display: flex;
  align-items: center;
  padding: 0;
  transition: box-shadow 200ms ease;
}

.mk-header__search .wp-block-search__inside-wrapper:focus-within {
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

.mk-header__search .wp-block-search__input {
  background: transparent;
  border: none;
  height: 2.25rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: hsl(var(--foreground));
  padding: 0 0.75rem;
  outline: none;
  min-width: 0;
}

.mk-header__search .wp-block-search__input::placeholder {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

.mk-header__search .wp-block-search__button {
  background: transparent !important;
  border: none !important;
  padding: 0 0.5rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  min-width: auto;
  box-shadow: none;
}

.mk-header__search .wp-block-search__button:hover {
  color: hsl(var(--foreground));
}

.mk-header__search .wp-block-search__button svg {
  width: 1rem;
  height: 1rem;
}

/* Fallback: if search uses button-only mode, style it as icon */
.mk-header__search.wp-block-search .wp-block-search__button {
  background-color: transparent !important;
  color: hsl(var(--muted-foreground));
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0 0.5rem;
}

/* --- Header Account Link: SVG icon button --- */
.mk-header__account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
  cursor: pointer;
}

.mk-header__account-link:hover {
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.mk-header__account-link svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Remove old text-based account styles */
p.mk-header__account {
  display: none;
}

/* --- Header Mini-Cart icon sizing --- */
.mk-header__cart .wc-block-mini-cart__button {
  padding: 0.5rem;
}

.mk-header__cart {
  flex-shrink: 0;
}

/* WordPress Navigation block overrides for header */
.mk-header .wp-block-navigation {
  gap: 0;
}

.mk-header .wp-block-navigation__container {
  gap: 2rem;
}

.mk-header .wp-block-navigation-item__content {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  transition: color 150ms ease;
  text-decoration: none;
  padding: 0.5rem 0;
}

.mk-header .wp-block-navigation-item__content:hover {
  color: hsl(var(--primary));
}

/* Navigation submenu dropdown styling
   React DropdownMenuContent: rounded-md border bg-popover p-1 shadow-md
   sideOffset={4} = 4px margin-top
   Animation: fade-in-0 zoom-in-95 slide-in-from-top-2 (150ms) */
.mk-header .wp-block-navigation__submenu-container {
  position: absolute !important;          /* CRITICAL: Must be absolute to not take layout space */
  top: 100% !important;                   /* Position below parent */
  left: 0 !important;
  z-index: 100 !important;
  background-color: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: 0.125rem;                /* rounded-md = calc(var(--radius) - 2px) = 2px */
  box-shadow: var(--shadow-elegant);
  padding: 0.25rem;                       /* p-1 = 4px */
  min-width: 14rem;                       /* w-56 = 224px */
  margin-top: 0.25rem;                    /* sideOffset={4} = 4px */
  animation: mk-dropdown-in 150ms ease-out forwards;
  transform-origin: top center;
}

/* React DropdownMenuItem: rounded-sm px-2 py-1.5 text-sm
   focus:bg-accent focus:text-accent-foreground */
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 0.375rem 0.5rem;               /* py-1.5 px-2 = 6px 8px */
  font-size: 0.875rem;                    /* text-sm */
  border-radius: 0;                       /* rounded-sm = calc(var(--radius) - 4px) = 0 */
  color: hsl(var(--foreground));
  transition: background-color 150ms ease, color 150ms ease;
}

/* Hover/focus: bg-accent text-accent-foreground (gold bg, dark text) */
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Submenu trigger chevron icon */
.mk-header .wp-block-navigation__submenu-icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.25rem;
}

/* Dropdown menu (custom non-WP) */
.mk-header__dropdown {
  position: relative;
}

.mk-header__dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 14rem;                       /* w-56 = 224px */
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 0.125rem;                /* rounded-md = calc(var(--radius) - 2px) = 2px */
  box-shadow: var(--shadow-elegant);
  padding: 0.25rem;                       /* p-1 = 4px */
  margin-top: 0.25rem;                    /* sideOffset={4} = 4px */
  animation: mk-dropdown-in 150ms ease-out forwards;
  transform-origin: top center;
}

.mk-header__dropdown:hover .mk-header__dropdown-content,
.mk-header__dropdown-content:hover {
  display: block;
}

.mk-header__dropdown-item {
  display: block;
  width: 100%;
  padding: 0.375rem 0.5rem;               /* py-1.5 px-2 = 6px 8px */
  font-size: 0.875rem;                    /* text-sm */
  border-radius: 0;                       /* rounded-sm = calc(var(--radius) - 4px) = 0 */
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
  cursor: pointer;
}

.mk-header__dropdown-item:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Mobile menu - hamburger visible below 1280px */
.mk-header__mobile-toggle {
  display: flex;
}

@media (min-width: 1280px) {
  .mk-header__mobile-toggle {
    display: none;
  }
}

.mk-header__mobile-menu {
  display: none;
  padding: 1rem 0;
  border-top: 1px solid hsl(var(--border));
  animation: mk-fade-in 0.3s ease-out;
}

@media (min-width: 1280px) {
  .mk-header__mobile-menu {
    display: none !important;
  }
}

.mk-header__mobile-menu--open {
  display: block;
}

.mk-header__mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mk-header__mobile-section-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  padding: 0.5rem;
}

.mk-header__mobile-link {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: background-color 150ms ease;
}

.mk-header__mobile-link:hover {
  background-color: hsl(var(--muted));
}

.mk-header__mobile-top-link {
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  text-decoration: none;
}

.mk-header__mobile-top-link:hover {
  color: hsl(var(--primary));
}

/* User dropdown */
.mk-header__user-info {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
}

.mk-header__user-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.mk-header__user-email {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   12. HERO STYLES
   ========================================================================== */

.mk-hero {
  position: relative;
  min-height: 80vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: start;
}

@media (min-width: 768px) {
  .mk-hero {
    min-height: 90vh;
  }
}

/* Hero gradient overlay for wp:cover block */
.mk-hero .wp-block-cover__background {
  background: linear-gradient(to right, hsl(var(--foreground) / 0.8), hsl(var(--foreground) / 0.5), transparent) !important;
  opacity: 1 !important;
}

.mk-hero__bg {
  position: absolute;
  inset: 0;
}

.mk-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-hero__overlay {
  position: absolute;
  inset: 0;
}

.mk-hero__overlay--right {
  background: linear-gradient(to right, hsl(var(--foreground) / 0.8), hsl(var(--foreground) / 0.5), transparent);
}

.mk-hero__overlay--bottom {
  background: linear-gradient(to top, hsl(var(--foreground) / 0.6), transparent, hsl(var(--foreground) / 0.2));
}

.mk-hero__content {
  position: relative;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 100%;
  display: flex;
  align-items: start;
  width: 100%;
}

.mk-hero__inner {
  max-width: 42rem;
}

.mk-hero__title {
  font-family: var(--font-display);
  font-size: 2.25rem !important; /* text-4xl - override WP preset */
  font-weight: 600;
  color: #ffffff !important;
  line-height: 1.25 !important; /* leading-tight - override inline style */
  margin-bottom: 1.5rem;
  max-width: 600px;
  animation: mk-fade-in 0.5s ease-out forwards;
  animation-delay: 0.1s;
  /* opacity: 0 REMOVED - caused invisible text when animations disabled */
}

@media (min-width: 768px) {
  .mk-hero__title {
    font-size: 3rem !important; /* md:text-5xl - override WP preset */
  }
}

@media (min-width: 1024px) {
  .mk-hero__title {
    font-size: 3.75rem !important; /* lg:text-6xl - override WP preset */
  }
}

.mk-hero__subtitle {
  color: hsl(var(--primary-foreground) / 0.8);
  max-width: 500px;
  font-size: 1.125rem;
  line-height: 1.75;
  margin-bottom: 1rem;
  animation: mk-fade-in 0.5s ease-out forwards;
  animation-delay: 0.2s;
  /* opacity: 0 REMOVED - caused invisible text when animations disabled */
}

.mk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  animation: mk-fade-in 0.5s ease-out forwards;
  animation-delay: 0.4s;
  /* opacity: 0 REMOVED - caused invisible buttons when animations disabled */
}

/* ==========================================================================
   13. FOOTER STYLES
   ========================================================================== */

.mk-footer {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 4rem 0;
}

.mk-footer__inner {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.mk-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .mk-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .mk-footer__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.mk-footer__logo img {
  height: 4rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin-bottom: 1.5rem;
}

.mk-footer__desc {
  font-size: 0.875rem;
  color: hsl(var(--primary-foreground) / 0.8);
  line-height: 1.75;
}

.mk-footer__social {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.mk-footer__social a {
  color: hsl(var(--primary-foreground));
  transition: color 200ms ease;
}

.mk-footer__social a:hover {
  color: hsl(var(--gold));
}

.mk-footer__social svg {
  width: 1.25rem;
  height: 1.25rem;
  max-width: 1.25rem;
  max-height: 1.25rem;
}

/* WordPress social-links block in footer */
.mk-footer__social.wp-block-social-links {
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.mk-footer__social.wp-block-social-links .wp-social-link {
  background: transparent !important;
  padding: 0;
}

.mk-footer__social.wp-block-social-links .wp-social-link a {
  color: hsl(var(--primary-foreground));
  padding: 0;
  transition: color 200ms ease;
}

.mk-footer__social.wp-block-social-links .wp-social-link a:hover {
  color: hsl(var(--gold));
}

.mk-footer__social.wp-block-social-links .wp-social-link svg {
  width: 1.25rem;
  height: 1.25rem;
  max-width: 1.25rem;
  max-height: 1.25rem;
}

.mk-footer__heading {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.mk-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mk-footer__link {
  font-size: 0.875rem;
  color: hsl(var(--primary-foreground) / 0.8);
  text-decoration: none;
  transition: color 200ms ease;
}

.mk-footer__link:hover {
  color: hsl(var(--gold));
}

.mk-footer a:hover {
  color: hsl(var(--gold));
}

.mk-footer__contact-item {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--primary-foreground) / 0.8);
  text-decoration: none;
  transition: color 200ms ease;
}

.mk-footer__contact-item:hover {
  color: hsl(var(--gold));
}

.mk-footer__contact-item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.mk-footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mk-footer__bottom {
  border-top: 1px solid hsl(var(--primary-foreground) / 0.2);
  margin-top: 3rem;
  padding-top: 2rem;
  text-align: center;
}

.mk-footer__bottom p {
  font-size: 0.875rem;
  color: hsl(var(--primary-foreground) / 0.6);
}

/* ==========================================================================
   14. AUCTION TIMER STYLES
   ========================================================================== */

.mk-timer {
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
}

/* Full variant */
.mk-timer--full {
  padding: 1.5rem;
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
}

.mk-timer--full.mk-timer--upcoming {
  background: linear-gradient(to right, hsl(var(--gold) / 0.1), hsl(var(--gold) / 0.05));
  border: 1px solid hsl(var(--gold) / 0.2);
}

.mk-timer--full.mk-timer--active {
  background: linear-gradient(to right, hsl(142 71% 45% / 0.1), hsl(142 50% 35% / 0.05));
  border: 1px solid hsl(142 71% 45% / 0.2);
}

.mk-timer--full.mk-timer--ending {
  background: linear-gradient(to right, hsl(var(--destructive) / 0.1), hsl(var(--destructive) / 0.05));
  border: 1px solid hsl(var(--destructive) / 0.2);
}

.mk-timer--full.mk-timer--ended {
  background-color: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border));
}

/* P11: Timer header - React: flex items-center gap-3 mb-4 */
.mk-timer__header {
  display: flex;
  align-items: center;                    /* React: items-center (P11 parity) */
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* P2: Timer icon 40px circle - React w-10 h-10 */
.mk-timer__icon {
  display: flex;
  align-items: center;                    /* centered (React parity) */
  justify-content: center;
  width: 2.5rem;                          /* w-10 = 40px (React parity) */
  height: 2.5rem;                         /* h-10 = 40px (React parity) */
  border-radius: 9999px;
}

/* P2: Timer icon SVG sizing - w-5 h-5 = 20px (React parity) */
.mk-timer__icon svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0;
}

.mk-timer__icon--upcoming {
  background-color: hsl(var(--gold) / 0.2);
}

.mk-timer__icon--upcoming svg {
  color: hsl(var(--gold));
}

.mk-timer__icon--active {
  background-color: hsl(142 71% 45% / 0.2);
}

.mk-timer__icon--active .mk-timer__dot {
  width: 0.75rem;
  height: 0.75rem;
  background-color: hsl(142 71% 45%);
  border-radius: 9999px;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.mk-timer__icon--ending {
  background-color: hsl(var(--destructive) / 0.2);
}

.mk-timer__icon--ending svg {
  color: hsl(var(--destructive));
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.mk-timer__icon--ended {
  background-color: hsl(var(--muted));
}

.mk-timer__icon--ended svg {
  color: hsl(var(--muted-foreground));
}

/* SP10-4: Status header layout for full timer variant */
.mk-timer__status-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.mk-timer__status-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mk-timer__status-title {
  font-family: var(--font-display);
  font-weight: 600;
}

.mk-timer__status-title--upcoming {
  color: hsl(var(--foreground));
}

.mk-timer__status-title--active {
  color: hsl(142 50% 35%);
}

.mk-timer__status-title--ending {
  color: hsl(var(--destructive));
}

.mk-timer__status-title--ended {
  color: hsl(var(--foreground));
}

.mk-timer__status-sub {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.mk-timer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.mk-timer__unit {
  text-align: center;
}

.mk-timer__value {
  font-size: 1.875rem;
  font-family: var(--font-display);
  font-weight: 700;
}

@media (min-width: 768px) {
  .mk-timer__value {
    font-size: 2.25rem;
  }
}

.mk-timer__value--upcoming {
  color: hsl(var(--foreground));
}

.mk-timer__value--active {
  color: hsl(142 50% 35%);
}

.mk-timer__value--ending {
  color: hsl(var(--destructive));
}

.mk-timer__value--ending-seconds {
  color: hsl(var(--destructive));
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.mk-timer__label {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

.mk-timer__dates {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.mk-timer__date-item {
  display: flex;
  align-items: center;                    /* React: items-center (P11 parity) */
  gap: 0.5rem;
}

.mk-timer__date-item svg {
  width: 1rem;
  height: 1rem;
}

.mk-timer__warning {
  margin-top: 1rem;
  display: flex;
  align-items: center;                    /* React: items-center (P11 parity) */
  gap: 0.5rem;
  color: hsl(var(--destructive));
  font-size: 0.875rem;
  font-weight: 500;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.mk-timer__warning svg {
  width: 1rem;
  height: 1rem;
}

/* Compact variant - React: inline-flex items-center gap-2 px-3 py-1.5 rounded-sm text-sm font-medium */
.mk-timer--compact {
  display: inline-flex;
  align-items: center;                    /* React: items-center (P11 parity) */
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;              /* React: py-1.5 px-3 */
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  font-size: 0.875rem;
  font-weight: 500;
}

.mk-timer--compact.mk-timer--upcoming {
  background-color: hsl(var(--gold) / 0.1);
  color: hsl(var(--gold));
  border: 1px solid hsl(var(--gold) / 0.2);
}

.mk-timer--compact.mk-timer--active {
  background-color: hsl(142 71% 45% / 0.1);
  color: hsl(142 50% 35%);
  border: 1px solid hsl(142 71% 45% / 0.2);
}

.mk-timer--compact.mk-timer--ending {
  background-color: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  border: 1px solid hsl(var(--destructive) / 0.2);
}

.mk-timer--compact.mk-timer--ended {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.mk-timer--compact .mk-timer__dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: hsl(142 71% 45%);
  border-radius: 9999px;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.mk-timer--compact .mk-timer__ending-value {
  font-family: monospace;
  font-weight: 700;
}

/* Minimal variant (badge overlay) - React Badge: inline-flex items-center rounded-full py-0.5 px-2.5 text-xs font-semibold */
.mk-timer--minimal {
  display: inline-flex;
  align-items: center;                    /* React: items-center (P11 parity) */
  padding: 0.125rem 0.625rem;             /* React: py-0.5 px-2.5 (P11 parity) */
  border-radius: 9999px;                  /* React: rounded-full (P11 parity) */
  font-size: 0.75rem;                     /* React: text-xs */
  font-weight: 600;                       /* React: font-semibold (P11 parity) */
}

.mk-timer--minimal.mk-timer--upcoming {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.mk-timer--minimal.mk-timer--active {
  background-color: hsl(142 71% 45%);
  color: #ffffff;
}

.mk-timer--minimal.mk-timer--ending {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.mk-timer--minimal.mk-timer--ended {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

/* ==========================================================================
   15. BADGE STYLES
   ========================================================================== */

.mk-badge {
  display: inline-flex;
  align-items: center;                      /* React: items-center */
  padding: 0.125rem 0.625rem;               /* React: py-0.5 px-2.5 */
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;                         /* React: font-semibold */
  line-height: 1;
  white-space: nowrap;
  transition: background-color 200ms ease;
}

.mk-badge svg {
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.25rem;
}

.mk-badge--active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mk-badge--ending {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* P10: Fixed to match React exactly - bg-muted text-muted-foreground */
.mk-badge--upcoming {
  background-color: hsl(var(--muted));           /* React: bg-muted #E8E4DC */
  color: hsl(var(--muted-foreground));           /* React: text-muted-foreground #577066 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.mk-badge--sold {
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark)); /* P2: React uses forest-dark */
  font-weight: 600;
}

.mk-badge--post-auction {
  background-color: hsl(38 92% 50%);
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mk-badge--buy-now {
  background-color: hsl(var(--gold));
  color: hsl(var(--foreground));
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mk-badge--secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.mk-badge--outline {
  background-color: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}

.mk-badge--destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

/* ==========================================================================
   16. ARTWORK CARD STYLES
   ========================================================================== */

/* Vertical (default) card */
.mk-artwork-card {
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

.mk-artwork-card:hover {
  box-shadow: var(--shadow-hover);
}

.mk-artwork-card:hover .mk-artwork-card__image img {
  transform: scale(1.05);
}

.mk-artwork-card__image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.mk-artwork-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.mk-artwork-card__badges {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mk-artwork-card__sold-overlay {
  position: absolute;
  inset: 0;
  background-color: hsl(var(--foreground) / 0.6);
  display: flex;
  align-items: center;                      /* P10: React uses items-center */
  justify-content: center;
}

.mk-artwork-card__timer-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, hsl(var(--foreground) / 0.8), transparent);
  padding: 0.75rem;
}

.mk-artwork-card__body {
  padding: 1.25rem;
}

.mk-artwork-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.25rem;
  margin-top: 0;
}

.mk-artwork-card__artist {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.25rem;
}

.mk-artwork-card__artist-dates {
  display: block;
  font-size: 0.75rem;
  font-style: italic;
}

.mk-artwork-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.mk-artwork-card__meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.mk-artwork-card__meta-label {
  color: hsl(var(--muted-foreground));
}

.mk-artwork-card__meta-value {
  font-weight: 700;
  color: hsl(var(--primary));
}

.mk-artwork-card__meta-value--gold {
  font-weight: 500;
  color: hsl(var(--gold));
}

.mk-artwork-card__meta-value--sold {
  font-weight: 700;
  color: hsl(var(--gold));
}

.mk-artwork-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mk-artwork-card__actions .mk-btn {
  width: 100%;
}

/* Horizontal variant */
.mk-artwork-card--horizontal {
  display: flex;
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

.mk-artwork-card--horizontal:hover {
  box-shadow: var(--shadow-hover);
}

.mk-artwork-card--horizontal:hover .mk-artwork-card__image-h img {
  transform: scale(1.05);
}

.mk-artwork-card__image-h {
  position: relative;
  width: 12rem;
  height: 12rem;
  flex-shrink: 0;
  overflow: hidden;
}

.mk-artwork-card__image-h img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.mk-artwork-card__body-h {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mk-artwork-card__header-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.mk-artwork-card__price-h {
  text-align: right;
  flex-shrink: 0;
}

.mk-artwork-card__price-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(var(--primary));
}

.mk-artwork-card__price-value--gold {
  color: hsl(var(--gold));
}

.mk-artwork-card__price-label {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.mk-artwork-card__footer-h {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-top: 1rem;
}

.mk-artwork-card__estimate {
  font-size: 0.875rem;
  color: hsl(var(--gold));
}

.mk-artwork-card__footer-actions {
  display: flex;
  gap: 0.5rem;
}

/* ==========================================================================
   17. GALLERY CARD STYLES
   ========================================================================== */

.mk-gallery-card {
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

.mk-gallery-card:hover {
  box-shadow: var(--shadow-hover);
}

.mk-gallery-card:hover .mk-gallery-card__image img {
  transform: scale(1.05);
}

.mk-gallery-card__image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.mk-gallery-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.mk-gallery-card__body {
  padding: 1.25rem;
}

.mk-gallery-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.25rem;
  margin-top: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.mk-gallery-card__artist {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.25rem;
}

.mk-gallery-card__medium {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.75rem;
}

.mk-gallery-card__price {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--primary));
  margin-bottom: 1rem;
}

.mk-gallery-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mk-gallery-card__actions .mk-btn {
  width: 100%;
}

/* ==========================================================================
   18. SECTION STYLES
   ========================================================================== */

.mk-section {
  padding: 3rem 0;
}

@media (min-width: 768px) {
  .mk-section {
    padding: 4rem 0;
  }
}

.mk-section--dark {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 2rem;
}

.mk-section--dark h2,
.mk-section--dark h3 {
  color: hsl(var(--primary-foreground));
}

.mk-section--dark p,
.mk-section--dark li {
  color: hsl(var(--primary-foreground) / 0.8);
}

.mk-section--amber {
  background-color: hsl(38 92% 50% / 0.1);
  border: 1px solid hsl(38 92% 50% / 0.2);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 1rem;
}

.mk-section--muted {
  background-color: hsl(var(--secondary) / 0.3);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 2rem;
}

/* ==========================================================================
   19. STEP CARD STYLES
   ========================================================================== */

.mk-step {
  display: flex;
  gap: 1.5rem;
}

.mk-step__number {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;  /* FIXED: was 'start', React uses items-center for vertical centering */
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.mk-step__number--small {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: hsl(var(--gold));
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;  /* FIXED: was 'start', need vertical centering */
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  position: absolute;
  top: -0.75rem;
  left: -0.75rem;
}

.mk-step__content {
  padding-top: 0.5rem;
}

.mk-step__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.mk-step__desc {
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
}

/* Step card variant (HowToSell grid) */
.mk-step-card {
  position: relative;
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

.mk-step-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: hsl(var(--primary));
  margin-bottom: 1rem;
}

.mk-step-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.mk-step-card__desc {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
}

/* ==========================================================================
   20. FORM STYLES
   ========================================================================== */

.mk-input {
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background-color: transparent;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: hsl(var(--foreground));
  transition: border-color 200ms ease, box-shadow 200ms ease;
  outline: none;
}

.mk-input::placeholder {
  color: hsl(var(--muted-foreground));
}

.mk-input:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.mk-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mk-textarea {
  display: flex;
  width: 100%;
  min-height: 5rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background-color: transparent;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: hsl(var(--foreground));
  transition: border-color 200ms ease, box-shadow 200ms ease;
  outline: none;
  resize: vertical;
}

.mk-textarea::placeholder {
  color: hsl(var(--muted-foreground));
}

.mk-textarea:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.mk-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}

.mk-upload-zone {
  border: 2px dashed hsl(var(--border));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 2rem;
  text-align: center;
  transition: border-color 200ms ease;
  cursor: pointer;
}

.mk-upload-zone:hover {
  border-color: hsl(var(--primary) / 0.5);
}

.mk-upload-zone__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: hsl(var(--muted-foreground));
  margin: 0 auto 0.75rem;
}

.mk-upload-zone__text {
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
}

.mk-upload-zone__hint {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.mk-upload-zone input[type="file"] {
  display: none;
}

/* Select (custom) */
.mk-select {
  position: relative;
  display: inline-block;
}

.mk-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.5rem;
  width: 100%;
  min-width: 11.25rem;
  border-radius: 0.125rem;  /* rounded-md = calc(var(--radius) - 2px) = 2px */
  border: 1px solid hsl(var(--input));
  background-color: transparent;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: hsl(var(--foreground));
  cursor: pointer;
  outline: none;
  transition: border-color 200ms ease;
}

.mk-select__trigger:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* Switch */
.mk-switch {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: hsl(var(--input));
  cursor: pointer;
  transition: background-color 200ms ease;
}

.mk-switch--checked {
  background-color: hsl(var(--primary));
}

.mk-switch__thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: transform 200ms ease;
}

.mk-switch--checked .mk-switch__thumb {
  transform: translateX(1.25rem);
}

/* Tabs component (used on Auth/login page) */
.mk-tabs-list {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) - 2px); /* rounded-md = 2px (React: calc(--radius - 2px)) */
  background-color: hsl(var(--muted));
  padding: 0.25rem;
  color: hsl(var(--muted-foreground));
}

.mk-tabs-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 0;                       /* rounded-sm = 0px (React: calc(--radius - 4px) = 0) */
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 300ms ease;
  cursor: pointer;
  border: none;
  background: transparent;
  color: inherit;
}

.mk-tabs-trigger[data-state="active"],
.mk-tabs-trigger.active {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.1);
}

/* Checkbox component */
.mk-checkbox,
input[type="checkbox"] {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  border: 1px solid hsl(var(--primary));
  background-color: transparent;
  accent-color: hsl(var(--primary));
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

/* ==========================================================================
   21. PRICING CARD (ArtworkDetail)
   ========================================================================== */

.mk-pricing {
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.mk-pricing__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.mk-pricing__label {
  color: hsl(var(--muted-foreground));
}

.mk-pricing__value {
  font-weight: 600;
  color: hsl(var(--foreground));
}

.mk-pricing__value--gold {
  font-weight: 500;
  color: hsl(var(--gold));
}

.mk-pricing__value--primary {
  font-weight: 700;
  color: hsl(var(--primary));
  font-size: 1.5rem;
}

.mk-pricing__highlight {
  display: flex;
  justify-content: space-between;
  align-items: start;
  border-top: 1px solid hsl(var(--border));
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.mk-pricing__highlight-label {
  display: flex;
  align-items: start;
  gap: 0.5rem;
  color: hsl(var(--muted-foreground));
}

.mk-pricing__highlight-label svg {
  width: 1rem;
  height: 1rem;
  color: hsl(142 71% 45%);
}

.mk-pricing__highlight-value {
  font-weight: 700;
  color: hsl(var(--primary));
  font-size: 1.5rem;
}

.mk-pricing__sold {
  text-align: center;
  padding: 1rem 0;
}

.mk-pricing__sold-label {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
}

.mk-pricing__sold-value {
  font-size: 2.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: hsl(var(--gold));
}

.mk-pricing__sold-estimate {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.5rem;
}

.mk-pricing__fixed {
  text-align: center;
}

.mk-pricing__fixed-label {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.25rem;
}

.mk-pricing__fixed-value {
  font-size: 2.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: hsl(var(--primary));
}

.mk-pricing__fixed-was {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
  text-decoration: line-through;
}

.mk-pricing__buy-now-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  border-top: 1px solid hsl(var(--border));
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.mk-pricing__buy-now-label {
  display: flex;
  align-items: start;
  gap: 0.5rem;
  color: hsl(var(--muted-foreground));
}

.mk-pricing__buy-now-label svg {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--gold));
}

.mk-pricing__buy-now-value {
  font-weight: 700;
  color: hsl(var(--gold));
  font-size: 1.5rem;
}

/* ==========================================================================
   22. BID FORM
   ========================================================================== */

.mk-bid-form {
  background-color: hsl(var(--primary) / 0.05);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 1.5rem;
}

.mk-bid-form__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
  margin-top: 0;
  display: flex;
  align-items: start;
  gap: 0.5rem;
}

.mk-bid-form__title svg {
  width: 1.25rem;
  height: 1.25rem;
}

.mk-bid-form__quick-bids {
  margin-bottom: 1rem;
}

.mk-bid-form__quick-bids-label {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
  display: block;
}

.mk-bid-form__quick-bids-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.mk-bid-form__quick-btn {
  font-size: 0.75rem;
}

.mk-bid-form__custom {
  margin-top: 1rem;
}

.mk-bid-form__custom-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.mk-bid-form__custom-row .mk-input {
  flex: 1;
}

.mk-bid-form__hint {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.5rem;
}

.mk-bid-form__history {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
}

.mk-bid-form__history-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
}

.mk-bid-form__history-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
}

/* Login prompt for bidding */
.mk-bid-prompt {
  background-color: hsl(var(--secondary) / 0.3);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 1.5rem;
  text-align: center;
}

.mk-bid-prompt__icon {
  width: 2rem;
  height: 2rem;
  color: hsl(var(--muted-foreground));
  margin: 0 auto 0.75rem;
}

.mk-bid-prompt__text {
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}

/* Upcoming auction notice */
.mk-upcoming-notice {
  background-color: hsl(var(--muted) / 0.5);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 1.5rem;
  text-align: center;
}

.mk-upcoming-notice__icon {
  width: 2rem;
  height: 2rem;
  color: hsl(var(--gold));
  margin: 0 auto 0.75rem;
}

.mk-upcoming-notice__title {
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
}

.mk-upcoming-notice__text {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   23. TRUST BADGES
   ========================================================================== */

.mk-trust-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.mk-trust-badge {
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: center;
  padding: 1rem;
  background-color: hsl(var(--muted) / 0.3);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
}

.mk-trust-badge__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(var(--primary));
  margin-bottom: 0.5rem;
}

.mk-trust-badge__text {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   24. FAQ ACCORDION
   ========================================================================== */

.mk-accordion {
  border-top: 1px solid hsl(var(--border));
}

.mk-accordion__item {
  border-bottom: 1px solid hsl(var(--border));
}

.mk-accordion__trigger {
  display: flex;
  align-items: start;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-body);
  color: hsl(var(--foreground));
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 200ms ease;
}

.mk-accordion__trigger:hover {
  text-decoration: underline;
}

.mk-accordion__trigger svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.mk-accordion__trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mk-accordion__content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 300ms ease;
}

.mk-accordion__content--open {
  max-height: 500px;
}

.mk-accordion__content-inner {
  padding-bottom: 1rem;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
}

/* ==========================================================================
   25. POST-AUCTION INFO BANNER
   ========================================================================== */

.mk-post-auction-banner {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  padding: 1rem;
  background-color: hsl(38 92% 50% / 0.1);
  border: 1px solid hsl(38 92% 50% / 0.2);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  margin-bottom: 1.5rem;
}

.mk-post-auction-banner__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(38 70% 45%);
  flex-shrink: 0;
}

.mk-post-auction-banner__title {
  font-weight: 600;
  color: hsl(30 70% 30%);
}

.dark .mk-post-auction-banner__title {
  color: hsl(38 60% 80%);
}

.mk-post-auction-banner__text {
  font-size: 0.875rem;
  color: hsl(30 60% 35%);
  display: flex;
  align-items: start;
  gap: 0.25rem;
}

.dark .mk-post-auction-banner__text {
  color: hsl(38 50% 70%);
}

.mk-post-auction-banner__text svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Post-auction buy section */
.mk-post-auction-buy {
  background-color: hsl(38 92% 50% / 0.05);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.mk-post-auction-buy__hint {
  text-align: center;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.75rem;
}

/* ==========================================================================
   26. ARTWORK DETAIL INFO BOX
   ========================================================================== */

.mk-artwork-info {
  background-color: hsl(var(--secondary) / 0.3);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.mk-artwork-info__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  font-size: 0.875rem;
}

.mk-artwork-info__label {
  color: hsl(var(--muted-foreground));
}

.mk-artwork-info__value {
  margin-left: 0.5rem;
  color: hsl(var(--foreground));
}

.mk-artwork-info__desc {
  color: hsl(var(--muted-foreground));
  margin-top: 1rem;
  line-height: 1.75;
}

/* ==========================================================================
   27. CONTACT PAGE STYLES
   ========================================================================== */

.mk-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.mk-contact-item__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background-color: hsl(var(--primary) / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mk-contact-item__icon svg {
  width: 20px;
  height: 20px;
  color: hsl(var(--primary));
}

.mk-contact-item__title {
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.25rem;
}

.mk-contact-item__text {
  color: hsl(var(--muted-foreground));
}

.mk-contact-item__text a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 200ms ease;
}

.mk-contact-item__text a:hover {
  color: hsl(var(--primary));
}

/* ==========================================================================
   28. FILTER / TOOLBAR STYLES
   ========================================================================== */

.mk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.mk-toolbar__count {
  color: hsl(var(--muted-foreground));
}

.mk-toolbar__count strong {
  font-weight: 600;
  color: hsl(var(--foreground));
}

.mk-toolbar__actions {
  display: flex;
  align-items: start;
  gap: 0.75rem;
}

/* DUPLICATE REMOVED: .mk-view-toggle #1 - keeping line 7707 version (most complete) */
/*
.mk-view-toggle {
  display: flex;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}

.mk-view-toggle .mk-btn {
  border-radius: 0;
}
*/

/*
 * Version 1.17.7 - P30 Mobile Menu Parity (2026-03-23)
 * - Section 134: Mobile menu 1:1 React parity
 * - Converts WP overlay menu to inline expand (matches React behavior)
 * - Hamburger: ghost button, 2.5rem, w-5 h-5 icon
 * - Menu: py-4 border-t animate-fade-in
 * - Section labels: text-sm font-medium text-muted-foreground
 * - Submenu links: px-4 py-2 hover:bg-muted rounded
 * - Top links: px-2 py-2 font-medium hover:text-primary
 * - Breakpoint: 1024px (lg:hidden)
 * Reference: docs/PARITY-AGENT-LOGS/P30-MOBILE-MENU.md
 */

.mk-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 1rem;
  padding: 1rem;
  background-color: hsl(var(--muted) / 0.3);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  margin-bottom: 1.5rem;
}

/* Sidebar filters */
.mk-sidebar-filter {
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 1rem;
  box-shadow: var(--shadow-card);
}

.mk-sidebar-filter__title {
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.mk-sidebar-filter__btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: var(--font-body);
  border: none;
  background: none;
  cursor: pointer;
  color: hsl(var(--foreground));
  transition: background-color 150ms ease, color 150ms ease;
}

.mk-sidebar-filter__btn:hover {
  background-color: hsl(var(--muted));
}

.mk-sidebar-filter__btn--active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* ==========================================================================
   29. PAST AUCTION RESULT CARD
   ========================================================================== */

.mk-auction-result {
  background-color: hsl(var(--muted) / 0.5);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  border: 1px solid hsl(var(--border));
  padding: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.mk-auction-result__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: hsl(var(--foreground));
}

.mk-auction-result__date {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.mk-auction-result__total {
  font-size: 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: hsl(var(--gold));
}

.mk-auction-result__label {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   30. EMPTY STATE
   ========================================================================== */

.mk-empty {
  text-align: center;
  padding: 4rem 0;
}

.mk-empty__icon {
  width: 4rem;
  height: 4rem;
  color: hsl(var(--muted-foreground) / 0.3);
  margin: 0 auto 1rem;
}

.mk-empty__title {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.mk-empty__text {
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}

/* ==========================================================================
   31. POPOVER / DROPDOWN
   ========================================================================== */

.mk-popover {
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-elegant);
  padding: 0.25rem;
  z-index: 50;
}

.mk-popover__item {
  display: flex;
  align-items: start;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  color: hsl(var(--foreground));
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background-color 150ms ease;
}

.mk-popover__item:hover {
  background-color: hsl(var(--muted));
}

.mk-popover__item--destructive {
  color: hsl(var(--destructive));
}

/* ==========================================================================
   31b. SEARCH BAR
   ========================================================================== */

.mk-search {
  position: relative;
}

.mk-search__input {
  height: 2.5rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background-color: transparent;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: hsl(var(--foreground));
  outline: none;
  transition: border-color 200ms ease, width 300ms ease;
  width: 10rem;
}

.mk-search__input:focus {
  border-color: hsl(var(--ring));
  width: 16rem;
}

.mk-search__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}

/* ==========================================================================
   32. CART DRAWER
   ========================================================================== */

.mk-cart-drawer__overlay {
  position: fixed;
  inset: 0;
  background-color: hsl(var(--foreground) / 0.6);
  z-index: 50;
}

.mk-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 28rem;
  background-color: hsl(var(--background));
  box-shadow: -4px 0 20px -4px hsl(var(--foreground) / 0.15);
  z-index: 51;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms ease;
}

.mk-cart-drawer--open {
  transform: translateX(0);
}

.mk-cart-drawer__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
}

.mk-cart-drawer__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.mk-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.mk-cart-drawer__footer {
  padding: 1.5rem;
  border-top: 1px solid hsl(var(--border));
}

.mk-cart-drawer__total {
  display: flex;
  justify-content: space-between;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.mk-cart-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid hsl(var(--border));
}

.mk-cart-item__image {
  width: 5rem;
  height: 5rem;
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  overflow: hidden;
  flex-shrink: 0;
}

.mk-cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-cart-item__info {
  flex: 1;
}

.mk-cart-item__title {
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.mk-cart-item__artist {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.mk-cart-item__price {
  font-weight: 600;
  color: hsl(var(--primary));
  margin-top: 0.25rem;
}

.mk-cart-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background-color: hsl(var(--destructive)); /* Changed from gold to destructive - G35 */
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: start;
  justify-content: center;
}

/* ==========================================================================
   33. COMMISSION INFO SECTION
   ========================================================================== */

.mk-commission {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 2rem;
  margin-bottom: 3rem;
}

.mk-commission__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.mk-commission__text {
  color: hsl(var(--primary-foreground) / 0.8);
  margin-bottom: 1rem;
}

.mk-commission__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mk-commission__list li {
  color: hsl(var(--primary-foreground) / 0.8);
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   34. VOUCHER LINK STYLE
   ========================================================================== */

.mk-voucher-link {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--gold));
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 200ms ease;
}

.mk-voucher-link:hover {
  color: hsl(var(--gold) / 0.8);
}

/* ==========================================================================
   35. DAYS LEFT BADGE (PostAuction urgent)
   ========================================================================== */

.mk-days-left {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  padding: 0.25rem 0.5rem;
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius);
}

/* ==========================================================================
   36. WOOCOMMERCE OVERRIDES
   ========================================================================== */

/* Product loops match mk-artwork-card */
.woocommerce ul.products li.product {
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 300ms ease;
  margin: 0;
  padding: 0;
  text-align: left;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-hover);
}

.woocommerce ul.products li.product a img {
  margin: 0;
  border-radius: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 500ms ease;
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
  overflow: hidden;
  display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  padding: 1.25rem 1.25rem 0.25rem;
  margin: 0;
}

.woocommerce ul.products li.product .price {
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(var(--primary));
  padding: 0 1.25rem;
  margin: 0;
}

.woocommerce ul.products li.product .price del {
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  font-weight: 700;
  color: hsl(var(--primary));
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  display: block;
  width: calc(100% - 2.5rem);
  margin: 1rem 1.25rem 1.25rem;
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  font-weight: 500;
  font-size: 0.875rem;
  font-family: var(--font-body);
  padding: 0.625rem 1rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-elegant);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background-color: hsl(var(--gold-light));
}

/* WooCommerce single product */
.woocommerce div.product {
  max-width: 1400px;
  margin: 0 auto;
}

.woocommerce div.product div.images {
  overflow: hidden;
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  box-shadow: var(--shadow-elegant);
}

.woocommerce div.product div.images img {
  border-radius: 0;
}

.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .woocommerce div.product .product_title {
    font-size: 2.25rem;
  }
}

.woocommerce div.product p.price {
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--primary));
  margin-bottom: 1.5rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart {
  margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  font-weight: 500;
  font-size: 1rem;
  font-family: var(--font-body);
  padding: 0.75rem 2rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-elegant);
  transition: background-color 300ms ease, box-shadow 300ms ease;
  height: 3rem;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
  background-color: hsl(var(--gold-light));
}

.woocommerce div.product form.cart .quantity .qty {
  height: 3rem;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  padding: 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  background-color: transparent;
  color: hsl(var(--foreground));
}

.woocommerce div.product .woocommerce-tabs {
  margin-top: 3rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0;
  border-bottom: 1px solid hsl(var(--border));
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-body);
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 200ms ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: hsl(var(--foreground));
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: hsl(var(--primary));
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: hsl(var(--primary));
  font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs .panel {
  padding: 1.5rem 0;
  border: none;
  box-shadow: none;
  background: none;
  color: hsl(var(--foreground));
  line-height: 1.75;
}

/* WooCommerce related products */
.woocommerce .related.products h2,
.woocommerce .upsells.products h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}

/* WooCommerce Sale badge */
.woocommerce span.onsale {
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  border-radius: var(--radius);
  padding: 0.25rem 0.5rem;
  min-height: auto;
  min-width: auto;
  line-height: 1.5;
}

/* Star ratings */
.woocommerce .star-rating {
  color: hsl(var(--gold));
}

.woocommerce .star-rating::before {
  color: hsl(var(--border));
}

/* WooCommerce Cart */
.woocommerce-cart .woocommerce table.shop_table {
  border: 1px solid hsl(var(--border));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  border-collapse: separate;
  overflow: hidden;
}

.woocommerce-cart .woocommerce table.shop_table th {
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 1rem;
  border: none;
}

.woocommerce-cart .woocommerce table.shop_table td {
  padding: 1rem;
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  vertical-align: middle;
}

.woocommerce-cart .woocommerce table.shop_table td.product-name a {
  font-family: var(--font-display);
  font-weight: 600;
  color: hsl(var(--foreground));
  text-decoration: none;
}

.woocommerce-cart .woocommerce table.shop_table td.product-name a:hover {
  color: hsl(var(--primary));
}

.woocommerce-cart .woocommerce table.shop_table img {
  width: 5rem;
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
}

.woocommerce-cart .woocommerce table.shop_table td.product-price,
.woocommerce-cart .woocommerce table.shop_table td.product-subtotal {
  font-weight: 600;
  color: hsl(var(--primary));
}

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals h2 {
  font-family: var(--font-display);
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table {
  border: none;
}

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table th {
  background: none;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: hsl(var(--muted) / 0.3);
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  border-bottom: none;
  border-bottom: 1px solid hsl(var(--border));
}

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table td {
  text-align: right;
  font-weight: 600;
  color: hsl(var(--foreground));
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: hsl(var(--muted) / 0.3);
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  border-bottom: none;
  border-bottom: 1px solid hsl(var(--border));
}

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals .order-total td {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--primary));
}

.woocommerce a.remove {
  color: hsl(var(--destructive)) !important;
  font-size: 1.25rem;
  font-weight: 700;
}

.woocommerce a.remove:hover {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground)) !important;
}

/* Cart buttons */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .cart .button,
.woocommerce .cart input.button {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 500;
  font-size: 0.875rem;
  font-family: var(--font-body);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background-color 300ms ease, box-shadow 300ms ease;
  letter-spacing: 0.025em;
  box-shadow: var(--shadow-elegant);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .cart .button:hover,
.woocommerce .cart input.button:hover {
  background-color: hsl(var(--forest-light));
  box-shadow: var(--shadow-hover);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  font-size: 1rem;
  font-weight: 600;
  display: block;
  text-align: center;
  padding: 1rem;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: hsl(var(--gold-light));
}

.woocommerce .coupon .button {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  box-shadow: none;
}

.woocommerce .coupon .button:hover {
  background-color: hsl(var(--secondary) / 0.8);
  box-shadow: none;
}

.woocommerce .coupon .input-text {
  height: 2.5rem;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  background-color: transparent;
  color: hsl(var(--foreground));
}

/* WooCommerce Checkout */
.woocommerce-checkout .woocommerce form.checkout {
  font-family: var(--font-body);
}

.woocommerce form .form-row label {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  margin-bottom: 0.5rem;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  height: 2.5rem;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  background-color: transparent;
  color: hsl(var(--foreground));
  transition: border-color 200ms ease, box-shadow 200ms ease;
  width: 100%;
}

.woocommerce form .form-row textarea {
  height: auto;
  min-height: 5rem;
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
  outline: none;
}

.woocommerce-checkout #order_review_heading {
  font-family: var(--font-display);
  font-weight: 600;
  color: hsl(var(--foreground));
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
  border: 1px solid hsl(var(--border));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  overflow: hidden;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th {
  background-color: hsl(var(--muted));
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border: none;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  padding: 0.75rem 1rem;
  border-top: 1px solid hsl(var(--border));
}

.woocommerce-checkout #payment {
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  box-shadow: var(--shadow-card);
}

.woocommerce-checkout #payment div.payment_box {
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: hsl(var(--muted));
}

.woocommerce #payment #place_order {
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  font-weight: 600;
  font-size: 1rem;
  font-family: var(--font-body);
  padding: 1rem 2rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-elegant);
  transition: background-color 300ms ease, box-shadow 300ms ease;
  width: 100%;
}

.woocommerce #payment #place_order:hover {
  background-color: hsl(var(--gold-light));
}

/* Billing/Shipping headings */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

/* WooCommerce My Account */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid hsl(var(--border));
}

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

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background-color: hsl(var(--muted));
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.woocommerce-account .woocommerce-MyAccount-content {
  font-family: var(--font-body);
  color: hsl(var(--foreground));
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: hsl(var(--foreground));
}

.woocommerce-account .woocommerce-MyAccount-content table {
  border: 1px solid hsl(var(--border));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  overflow: hidden;
  border-collapse: separate;
}

.woocommerce-account .woocommerce-MyAccount-content table th {
  background-color: hsl(var(--muted));
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border: none;
}

.woocommerce-account .woocommerce-MyAccount-content table td {
  padding: 0.75rem 1rem;
  border-top: 1px solid hsl(var(--border));
  font-size: 0.875rem;
}

.woocommerce-account .woocommerce-MyAccount-content .button {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 500;
  font-size: 0.875rem;
  font-family: var(--font-body);
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background-color 300ms ease, box-shadow 300ms ease;
  text-decoration: none;
  display: inline-flex;
  align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover {
  background-color: hsl(var(--primary) / 0.9);
}

/* My Account login/register forms */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
  background-color: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  box-shadow: var(--shadow-elegant);
  border: none;
  padding: 2rem;
}

/* WooCommerce notices */
.woocommerce .woocommerce-message {
  background-color: hsl(142 71% 45% / 0.1);
  border-top-color: hsl(142 71% 45%);
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 1rem 1.5rem;
}

.woocommerce .woocommerce-message::before {
  color: hsl(142 71% 45%);
}

.woocommerce .woocommerce-message .button {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 500;
  font-size: 0.875rem;
  font-family: var(--font-body);
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: none;
}

.woocommerce .woocommerce-message .button:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.woocommerce .woocommerce-error {
  background-color: hsl(var(--destructive) / 0.1);
  border-top-color: hsl(var(--destructive));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 1rem 1.5rem;
}

.woocommerce .woocommerce-error::before {
  color: hsl(var(--destructive));
}

.woocommerce .woocommerce-info {
  background-color: hsl(var(--gold) / 0.1);
  border-top-color: hsl(var(--gold));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 1rem 1.5rem;
}

.woocommerce .woocommerce-info::before {
  color: hsl(var(--gold));
}

/* WooCommerce breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  font-family: var(--font-body);
  margin-bottom: 1.5rem;
}

.woocommerce .woocommerce-breadcrumb a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 200ms ease;
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: hsl(var(--primary));
}


/* ==========================================================================
   WooCommerce Pagination 1:1 Parity (P32)
   React source: src/components/ui/pagination.tsx + button.tsx
   ========================================================================== */

/* Pagination Container - React: mx-auto flex w-full justify-center */
.woocommerce nav.woocommerce-pagination,
.mk-pagination {
  margin: 2rem auto 0 !important;
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
}

/* Pagination List - React: flex flex-row items-center gap-1 */
.woocommerce nav.woocommerce-pagination ul,
.mk-pagination__list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.25rem !important;  /* gap-1 = 4px */
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Pagination Item (li wrapper) */
.woocommerce nav.woocommerce-pagination ul li,
.mk-pagination__item {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Page Number Button - Base (icon size)
   React: buttonVariants({ size: "icon" }) = h-10 w-10 */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.mk-pagination__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;      /* w-10 = 40px */
  height: 2.5rem !important;     /* h-10 = 40px */
  min-width: 2.5rem !important;
  padding: 0 !important;
  border-radius: var(--radius) !important;  /* rounded = 4px */
  font-size: 0.875rem !important;           /* text-sm = 14px */
  font-weight: 500 !important;              /* font-medium */
  font-family: var(--font-body) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: all 300ms ease !important;
  cursor: pointer !important;
}

/* Page Number - Inactive (ghost variant)
   React: hover:bg-accent hover:text-accent-foreground rounded */
.woocommerce nav.woocommerce-pagination ul li a,
.mk-pagination__link:not(.current):not(.mk-pagination__link--active) {
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.mk-pagination__link:not(.current):not(.mk-pagination__link--active):hover {
  background: hsl(var(--accent)) !important;  /* gold #C4A255 */
  color: hsl(var(--accent-foreground)) !important;  /* dark forest */
}

/* Page Number - Active/Current (outline variant)
   React: border border-primary text-primary bg-transparent
          hover:bg-primary hover:text-primary-foreground rounded */
.woocommerce nav.woocommerce-pagination ul li span.current,
.mk-pagination__link.current,
.mk-pagination__link--active {
  background: transparent !important;
  color: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary)) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current:hover,
.mk-pagination__link.current:hover,
.mk-pagination__link--active:hover {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* Previous/Next Buttons
   React: size="default" (h-10 px-6 py-2) + gap-1 + pl-2.5/pr-2.5 */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next,
.mk-pagination__prev,
.mk-pagination__next {
  width: auto !important;
  height: 2.5rem !important;    /* h-10 = 40px */
  padding: 0.5rem 1.5rem !important;  /* py-2 px-6 */
  gap: 0.25rem !important;      /* gap-1 = 4px */
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  border: none !important;
}

/* Adjust padding for icon position */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.mk-pagination__prev {
  padding-left: 0.625rem !important;  /* pl-2.5 = 10px */
}

.woocommerce nav.woocommerce-pagination ul li a.next,
.mk-pagination__next {
  padding-right: 0.625rem !important;  /* pr-2.5 = 10px */
}

.woocommerce nav.woocommerce-pagination ul li a.prev:hover,
.woocommerce nav.woocommerce-pagination ul li a.next:hover,
.mk-pagination__prev:hover,
.mk-pagination__next:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

/* Prev/Next Icons */
.woocommerce nav.woocommerce-pagination ul li a.prev::before,
.woocommerce nav.woocommerce-pagination ul li a.next::after,
.mk-pagination__prev svg,
.mk-pagination__next svg {
  width: 1rem !important;   /* w-4 = 16px */
  height: 1rem !important;  /* h-4 = 16px */
  flex-shrink: 0 !important;
}

/* Ellipsis - React: flex h-9 w-9 items-center justify-center */
.woocommerce nav.woocommerce-pagination ul li span.dots,
.mk-pagination__ellipsis {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;   /* w-9 = 36px */
  height: 2.25rem !important;  /* h-9 = 36px */
  color: hsl(var(--muted-foreground)) !important;
  cursor: default !important;
  border: none !important;
  background: transparent !important;
}

/* Disabled State
   React: disabled:pointer-events-none disabled:opacity-50 */
.woocommerce nav.woocommerce-pagination ul li a[aria-disabled="true"],
.woocommerce nav.woocommerce-pagination ul li a.disabled,
.mk-pagination__link[aria-disabled="true"],
.mk-pagination__link--disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Focus States
   React: focus-visible:outline-none focus-visible:ring-2
          focus-visible:ring-ring focus-visible:ring-offset-2 */
.woocommerce nav.woocommerce-pagination ul li a:focus-visible,
.woocommerce nav.woocommerce-pagination ul li span:focus-visible,
.mk-pagination__link:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)),
              0 0 0 4px hsl(var(--ring)) !important;
}

/* END WooCommerce Pagination 1:1 Parity (P32) */


/* ==========================================================================
   WordPress Block Pagination 1:1 Parity (P32b)
   React source: src/components/ui/pagination.tsx + button.tsx
   Extends WooCommerce pagination styles to WordPress Query Loop blocks
   ========================================================================== */

/* Block Pagination Container - React: mx-auto flex w-full justify-center */
.wp-block-query-pagination {
  margin: 2rem auto 0 !important;
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.25rem !important;  /* gap-1 = 4px */
  flex-wrap: wrap !important;
}

/* Block Pagination Numbers Wrapper */
.wp-block-query-pagination-numbers {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.25rem !important;  /* gap-1 = 4px */
}

/* Page Number Links - Base (icon size)
   React: buttonVariants({ size: "icon" }) = h-10 w-10 */
.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;      /* w-10 = 40px */
  height: 2.5rem !important;     /* h-10 = 40px */
  min-width: 2.5rem !important;
  padding: 0 !important;
  border-radius: var(--radius) !important;  /* rounded = 4px */
  font-size: 0.875rem !important;           /* text-sm = 14px */
  font-weight: 500 !important;              /* font-medium */
  font-family: var(--font-body) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: all 300ms ease !important;
  cursor: pointer !important;
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  border: none !important;
}

/* Page Number - Hover (ghost variant)
   React: hover:bg-accent hover:text-accent-foreground rounded */
.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination .page-numbers:hover {
  background: hsl(var(--accent)) !important;  /* gold #C4A255 */
  color: hsl(var(--accent-foreground)) !important;  /* dark forest */
}

/* Page Number - Active/Current (outline variant)
   React: border border-primary text-primary bg-transparent */
.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-query-pagination .page-numbers.current {
  background: transparent !important;
  color: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary)) !important;
  cursor: default !important;
}

.wp-block-query-pagination-numbers .page-numbers.current:hover,
.wp-block-query-pagination .page-numbers.current:hover {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* Previous/Next Links
   React: size="default" (h-10 px-6 py-2) + gap-1 */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 2.5rem !important;    /* h-10 = 40px */
  padding: 0.5rem 1.5rem !important;  /* py-2 px-6 */
  gap: 0.25rem !important;      /* gap-1 = 4px */
  border-radius: var(--radius) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  text-decoration: none !important;
  transition: all 300ms ease !important;
  cursor: pointer !important;
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  border: none !important;
}

/* Adjust padding for icon position */
.wp-block-query-pagination-previous {
  padding-left: 0.625rem !important;  /* pl-2.5 = 10px */
}

.wp-block-query-pagination-next {
  padding-right: 0.625rem !important;  /* pr-2.5 = 10px */
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

/* Ellipsis/Dots - React: flex h-9 w-9 items-center justify-center */
.wp-block-query-pagination-numbers .page-numbers.dots,
.wp-block-query-pagination .page-numbers.dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;   /* w-9 = 36px */
  height: 2.25rem !important;  /* h-9 = 36px */
  color: hsl(var(--muted-foreground)) !important;
  cursor: default !important;
  border: none !important;
  background: transparent !important;
}

.wp-block-query-pagination-numbers .page-numbers.dots:hover,
.wp-block-query-pagination .page-numbers.dots:hover {
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* Focus States
   React: focus-visible:outline-none focus-visible:ring-2
          focus-visible:ring-ring focus-visible:ring-offset-2 */
.wp-block-query-pagination .page-numbers:focus-visible,
.wp-block-query-pagination-previous:focus-visible,
.wp-block-query-pagination-next:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)),
              0 0 0 4px hsl(var(--ring)) !important;
}

/* Disabled State for prev/next when at first/last page */
.wp-block-query-pagination-previous[aria-disabled="true"],
.wp-block-query-pagination-next[aria-disabled="true"],
.wp-block-query-pagination-previous.disabled,
.wp-block-query-pagination-next.disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Block pagination arrow icons (if using default WP arrows) */
.wp-block-query-pagination-previous .wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next .wp-block-query-pagination-next-arrow {
  width: 1rem !important;   /* w-4 = 16px */
  height: 1rem !important;  /* h-4 = 16px */
  flex-shrink: 0 !important;
}

/* END WordPress Block Pagination 1:1 Parity (P32b) */


/* WooCommerce quantity buttons */
.woocommerce .quantity {
  display: inline-flex;
  align-items: start;
}

/* Override all generic WooCommerce buttons */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  transition: background-color 300ms ease, box-shadow 300ms ease;
  cursor: pointer;
}

.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  padding: 0.625rem 1.5rem;
}

.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
  background-color: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
}

.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt {
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  border: none;
  padding: 0.625rem 1.5rem;
}

.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover {
  background-color: hsl(var(--gold-light));
  color: hsl(var(--forest-dark));
}

.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
}

/* WooCommerce widget styles */
.widget_price_filter .price_slider_wrapper .ui-widget-content {
  background-color: hsl(var(--border));
  border-radius: 9999px;
}

.widget_price_filter .ui-slider .ui-slider-range {
  background-color: hsl(var(--primary));
}

.widget_price_filter .ui-slider .ui-slider-handle {
  background-color: hsl(var(--primary));
  border: 2px solid hsl(var(--primary-foreground));
}

.widget_price_filter .price_slider_amount .button {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.75rem;
}

/* WooCommerce product gallery thumbnails */
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 200ms ease;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: hsl(var(--primary));
}

/* ==========================================================================
   37. WORDPRESS BLOCK EDITOR ALIGNMENT
   ========================================================================== */

.wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wp-site-blocks > main,
.wp-site-blocks > .is-layout-flow > main {
  flex: 1;
}

/* Ensure WordPress editor content inherits theme fonts */
.editor-styles-wrapper {
  font-family: var(--font-body);
  color: hsl(var(--foreground));
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}

/* ==========================================================================
   38. RESPONSIVE GRID HELPERS
   ========================================================================== */

.mk-grid {
  display: grid;
  gap: 1.5rem;
}

.mk-grid--2 {
  grid-template-columns: 1fr;
}

.mk-grid--3 {
  grid-template-columns: 1fr;
}

.mk-grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .mk-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .mk-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .mk-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .mk-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .mk-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .mk-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Sidebar layout */
.mk-layout-sidebar {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .mk-layout-sidebar {
    grid-template-columns: 1fr 3fr;
  }
}

.mk-sidebar-sticky {
  position: sticky;
  top: 6rem;
}

/* ==========================================================================
   39. SOLD PRODUCT OVERLAY
   ========================================================================== */

/*
 * CSS body-class approach: meno_kodas_sold_product_body_class() in functions.php
 * adds `body--product-sold` to <body> when the current product is sold or auction-closed.
 * The ::after pseudo-element overlays the WC product gallery block with a PARDUOTA badge.
 * Works for FSE block templates where the gallery is rendered by woocommerce/product-image-gallery.
 */
.body--product-sold .woocommerce-product-gallery {
  position: relative;
}

.body--product-sold .woocommerce-product-gallery::after {
  content: 'PARDUOTA';
  position: absolute;
  inset: 0;
  background: hsl(160 30% 18% / 0.6);
  display: flex;
  align-items: start;
  justify-content: center;
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif);
  font-size: 1.125rem; /* P1: Reduced from 1.5rem to match React sold badge size */
  font-weight: 700;
  letter-spacing: 0.05em;
  color: hsl(42 55% 58%);
  border-radius: var(--wp--custom--radius--base, 0.25rem);
  z-index: 10;
}

/* ==========================================================================
   40. PRINT STYLES
   ========================================================================== */

@media print {
  .mk-header,
  .mk-footer,
  .mk-cart-drawer,
  .mk-cart-drawer__overlay,
  .mk-header__mobile-menu {
    display: none !important;
  }

  body {
    background-color: #ffffff;
    color: #000000;
  }

  .mk-card,
  .mk-artwork-card,
  .mk-gallery-card {
    box-shadow: none;
    border: 1px solid #cccccc;
    break-inside: avoid;
  }

  .mk-btn {
    border: 1px solid #000000;
  }
}

/* ==========================================================================
   41. MY ACCOUNT — LOGIN & REGISTER FORMS
   ========================================================================== */

.woocommerce-MyAccount-content,
.woocommerce-account .woocommerce {
  max-width: 56rem; /* 896px - matches React max-w-4xl */
}

/* Form fields */
.woocommerce-MyAccount-content .form-row label,
.woocommerce form .form-row label {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(160 30% 18%);
  margin-bottom: 0.35rem;
  display: block;
}

.woocommerce-MyAccount-content .input-text,
.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"] {
  border: 1px solid hsl(36 20% 82%);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  width: 100%;
  background: hsl(40 30% 98%);
  color: hsl(160 30% 18%);
  transition: border-color 200ms;
}

.woocommerce-MyAccount-content .input-text:focus,
.woocommerce form .input-text:focus,
.woocommerce form input[type="email"]:focus,
.woocommerce form input[type="password"]:focus {
  outline: none;
  border-color: hsl(160 30% 28%);
  box-shadow: 0 0 0 3px hsl(160 30% 28% / 0.1);
}

/* Submit buttons */
.woocommerce form .woocommerce-Button,
.woocommerce form button[type="submit"],
.woocommerce-MyAccount-content button[name="login"],
.woocommerce-MyAccount-content button[name="register"] {
  background: hsl(160 30% 28%);
  color: hsl(40 30% 96%);
  border: none;
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 0.75rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms;
}

.woocommerce form .woocommerce-Button:hover,
.woocommerce form button[type="submit"]:hover {
  background: hsl(160 30% 22%);
}

/* Section headings */
.woocommerce-MyAccount-content h2,
.woocommerce .col2-set h2 {
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(160 30% 18%);
  margin-bottom: 1.25rem;
}

/* Two-column login/register layout */
.woocommerce .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 768px) {
  .woocommerce .col2-set { grid-template-columns: 1fr; }
}

/* Remember me + lost password row */
.woocommerce form .form-row-last.login-remember { display: flex; align-items: center; }
.woocommerce-LostPassword a,
.woocommerce form .lost_password a {
  color: hsl(160 30% 28%);
  font-size: 0.875rem;
}

/* Registration extra fields side-by-side */
.mk-register-row .form-row label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.3rem; }
.mk-register-row input { width: 100%; }

/* /prisijungti/ and /paskyra/ page header */
.woocommerce-account .entry-title,
.woocommerce-account h1.wp-block-post-title {
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif);
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

/* Task 5.8: Active tab trigger */
.mk-auth-tabs__trigger--active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Task 5.9: Tab content panels */
.mk-auth-tabs__content {
  display: none;
}

.mk-auth-tabs__content--active {
  display: block;
  animation: mk-fade-in 0.2s ease-out;
}

/* Task 5.10: Hide default WC form headings (tabs handle this) */
#customer_login h2,
.woocommerce-form-login h2,
.woocommerce-form-register h2,
#customer_login .u-column1 > h2,
#customer_login .u-column2 > h2 {
  display: none !important;
}

/* Override WC default two-column layout - stack forms for tabs */
#customer_login {
  display: block !important;
}

#customer_login .u-column1,
#customer_login .u-column2 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Auth page container styling to match React */
.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 42rem; /* max-w-2xl */
  margin: 0 auto;
  padding: 3rem 1rem;
}

/* Card wrapper for forms */
#customer_login {
  background: hsl(var(--card));
  border-radius: var(--radius);
  box-shadow: var(--shadow-elegant);
  padding: 2rem;
}

/* Style form inputs to match React */
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"] {
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-size: 0.875rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

#customer_login input:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1);
}

#customer_login label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: hsl(var(--foreground));
}

/* Submit buttons */
#customer_login button[type="submit"],
#customer_login input[type="submit"] {
  width: 100%;
  margin-top: 1.5rem;
}

/* Lost password link */
.woocommerce-form-login .woocommerce-LostPassword {
  margin-top: 1rem;
  text-align: left;
}

.woocommerce-form-login .woocommerce-LostPassword a {
  font-size: 0.875rem;
  color: hsl(var(--primary));
  text-decoration: none;
}

.woocommerce-form-login .woocommerce-LostPassword a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   42. PRODUCT CARD META — BID COUNT & SOLD OVERLAY
   ========================================================================== */

/* Bid count display on auction product cards */
.mk-card-meta__bid-count {
  font-size: 0.75rem;
  color: hsl(160 30% 28%);
  font-weight: 500;
  margin: 0;
}

/* Artist display on product cards */
.mk-card-meta__artist {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin: 0.25rem 0;
  line-height: 1.4;
}

.mk-card-meta__dates {
  display: block;
  font-size: 0.75rem;
  font-style: italic;
  color: hsl(var(--muted-foreground) / 0.8);
}

/* Medium/technique display on product cards (matches React GalleryCard) */
.mk-card-meta__medium {
  font-size: 0.75rem;                         /* text-xs = 12px */
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.75rem;                     /* mb-3 = 12px */
  margin-top: 0;
}

/* Estimate range display on product cards */
.mk-card-meta__estimate {
  font-size: 0.75rem;
  color: hsl(var(--gold));
  font-weight: 500;
  margin: 0.25rem 0;
}

.mk-card-meta__estimate .woocommerce-Price-amount {
  font-weight: 600;
}

/* Catalog toolbar — PDF + OneBid buttons row (full definition in Section 46) */

.mk-catalog-toolbar .wp-block-button__link.is-style-elegant,
.mk-catalog-toolbar a.wp-block-button__link {
  display: inline-flex;
  align-items: start;
  gap: 0.4rem;
  border: 1px solid hsl(var(--foreground) / 0.2);
  color: hsl(var(--foreground));
  background: transparent;
  font-weight: 400;
  letter-spacing: 0.025em;
  border-radius: var(--radius, 0.25rem);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  text-decoration: none;
  transition: border-color 300ms, color 300ms;
}

.mk-catalog-toolbar .wp-block-button__link.is-style-elegant:hover,
.mk-catalog-toolbar a.wp-block-button__link:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

/* Archive card sold overlay — positions over product image */
.wc-block-product-image,
.woocommerce-loop-product__link {
  position: relative;
}

.mk-sold-overlay--card {
  position: absolute;
  inset: 0;
  background: hsl(160 30% 18% / 0.6);
  display: flex;
  align-items: start;
  justify-content: center;
  z-index: 10;
  border-radius: var(--wp--custom--radius--base, 0.25rem);
  pointer-events: none;
}

.mk-sold-overlay--card .mk-sold-overlay__badge {
  background: hsl(var(--foreground));
  color: hsl(var(--cream-light, 40 30% 96%));
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.375rem 0.75rem;
  border-radius: 0.125rem;
  text-transform: uppercase;
}

/* ==========================================================================
   43. GIFT VOUCHER PAGE - DEPRECATED (2026-03-22)
   REPLACED BY SECTION 55 - DO NOT USE
   Reason: Wrong backgrounds (solid cream vs transparent on primary)
   Kept for reference only - commented out to prevent conflicts
   ========================================================================== */

/*
.mk-voucher-amount-btn {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border: 2px solid hsl(36 20% 82%);
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
  background: hsl(40 30% 96%);
  color: hsl(160 30% 18%);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
  text-decoration: none;
}
.mk-voucher-amount-btn:hover {
  border-color: hsl(42 55% 58%);
  background: hsl(42 55% 58% / 0.1);
  color: hsl(160 30% 18%);
}
.mk-voucher-amount-btn--active {
  border-color: hsl(42 55% 58%);
  background: hsl(42 55% 58%);
  color: hsl(160 30% 18%);
}
.mk-voucher-custom-input {
  border: 2px solid hsl(36 20% 82%);
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
  padding: 0.5rem 0.875rem;
  font-size: 1rem;
  width: 120px;
  color: hsl(160 30% 18%);
  transition: border-color 200ms;
  background: hsl(40 30% 96%);
}
.mk-voucher-custom-input:focus {
  outline: none;
  border-color: hsl(42 55% 58%);
}
.mk-voucher-price-display {
  font-size: 2rem;
  font-weight: 700;
  color: hsl(42 55% 58%);
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif);
  display: block;
  margin-bottom: 0.5rem;
}
.mk-voucher-buy-btn {
  background: hsl(42 55% 58%);
  color: hsl(160 30% 18%);
  border: none;
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms;
  width: 100%;
  display: block;
  text-align: center;
  margin-top: 1rem;
}
.mk-voucher-buy-btn:hover { background: hsl(42 45% 52%); }
.mk-voucher-buy-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.mk-voucher__amount-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.mk-voucher__custom-row {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.mk-voucher__preview-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.mk-voucher__preview-wrap figure {
  margin: 0;
}
.mk-voucher__price-overlay {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  background: hsl(42 55% 58%);
  color: hsl(160 30% 18%);
  font-size: 1.75rem;
  font-weight: 700;
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif);
  padding: 0.5rem 1rem;
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
  box-shadow: 0 4px 16px hsl(160 30% 18% / 0.2);
}
*/

/*
 * Version 1.17.7 - P30 Mobile Menu Parity (2026-03-23)
 * - Section 134: Mobile menu 1:1 React parity
 * - Converts WP overlay menu to inline expand (matches React behavior)
 * - Hamburger: ghost button, 2.5rem, w-5 h-5 icon
 * - Menu: py-4 border-t animate-fade-in
 * - Section labels: text-sm font-medium text-muted-foreground
 * - Submenu links: px-4 py-2 hover:bg-muted rounded
 * - Top links: px-2 py-2 font-medium hover:text-primary
 * - Breakpoint: 1024px (lg:hidden)
 * Reference: docs/PARITY-AGENT-LOGS/P30-MOBILE-MENU.md
 */

/* ==========================================================================
   44. CART DRAWER / MINI-CART — 1:1 React Parity (P14)
   Reference: docs/PARITY-AGENT-LOGS/P14-CART-DRAWER.md
   ========================================================================== */

/* --- Cart Drawer Keyframes --- */
@keyframes mk-slide-in-from-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes mk-slide-out-to-right {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
@keyframes mk-fade-in-overlay {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mk-fade-out-overlay {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* --- Overlay (bg-black/80) --- */
.wc-block-components-drawer__screen-overlay,
.mk-cart-drawer__overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.8);
  animation: mk-fade-in-overlay 0.3s ease-out forwards;
}
.wc-block-components-drawer__screen-overlay--hidden,
.mk-cart-drawer__overlay--hidden {
  animation: mk-fade-out-overlay 0.3s ease-out forwards;
}

/* CRITICAL FIX (2026-03-30): Hide overlay when WooCommerce adds --is-hidden class
   ROOT CAUSE: WordPress/WooCommerce uses --is-hidden, we only had --hidden
   This was blocking the entire site with a dark overlay */
.wc-block-components-drawer__screen-overlay--is-hidden,
.wc-block-components-drawer__screen-overlay.wc-block-components-drawer__screen-overlay--is-hidden,
.mk-cart-drawer__overlay--is-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --- Drawer Container --- */
.wc-block-mini-cart__drawer,
.wc-block-components-drawer,
.mk-cart-drawer {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 75%;
  max-width: 28rem;
  background: hsl(var(--background));
  border-left: 1px solid hsl(var(--border));
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
}
.wc-block-mini-cart__drawer.is-open,
.wc-block-mini-cart__drawer[aria-hidden="false"],
.wc-block-components-drawer--is-open,
.mk-cart-drawer--open {
  transform: translateX(0);
  animation: mk-slide-in-from-right 0.5s ease-in-out forwards;
}
.wc-block-mini-cart__drawer[aria-hidden="true"],
.wc-block-components-drawer--is-closing,
.mk-cart-drawer--closing {
  animation: mk-slide-out-to-right 0.3s ease-in-out forwards;
}

/* --- Close Button --- */
.wc-block-mini-cart__drawer .components-button.has-icon,
.wc-block-components-drawer__close,
.mk-cart-drawer__close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.125rem;
  opacity: 0.7;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.wc-block-mini-cart__drawer .components-button.has-icon:hover,
.wc-block-components-drawer__close:hover,
.mk-cart-drawer__close:hover { opacity: 1; }
.wc-block-mini-cart__drawer .components-button.has-icon:focus,
.wc-block-components-drawer__close:focus,
.mk-cart-drawer__close:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* --- Drawer Header --- */
.wc-block-mini-cart__title,
.wc-block-components-drawer__title,
.mk-cart-drawer__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  margin: 0;
  padding-right: 2.5rem;
}

/* --- Cart Items Container --- */
.wc-block-mini-cart__items,
.wc-block-cart-items,
.mk-cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
  margin: 0;
}
.wc-block-mini-cart__items::-webkit-scrollbar,
.mk-cart-drawer__items::-webkit-scrollbar { width: 6px; }
.wc-block-mini-cart__items::-webkit-scrollbar-track,
.mk-cart-drawer__items::-webkit-scrollbar-track { background: hsl(var(--cream-dark)); }
.wc-block-mini-cart__items::-webkit-scrollbar-thumb,
.mk-cart-drawer__items::-webkit-scrollbar-thumb { background: hsl(var(--forest) / 0.3); border-radius: 3px; }

/* --- Empty Cart State --- */
.wc-block-mini-cart__empty-message,
.woocommerce-mini-cart__empty-message,
.mk-cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 1rem;
  color: hsl(var(--muted-foreground));
}
.wc-block-mini-cart__empty-message svg,
.mk-cart-drawer__empty-icon {
  width: 4rem;
  height: 4rem;
  color: hsl(var(--muted-foreground) / 0.3);
  margin-bottom: 1rem;
}
.wc-block-mini-cart__empty-message p,
.mk-cart-drawer__empty-text {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
}

/* --- Cart Item --- */
.wc-block-cart-items__row,
.woocommerce-mini-cart-item,
.mk-cart-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: hsl(var(--muted) / 0.3);
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  margin-bottom: 0.75rem;
  border: none;
  list-style: none;
}
.wc-block-cart-items__row:last-child,
.woocommerce-mini-cart-item:last-child,
.mk-cart-item:last-child { margin-bottom: 0; }

/* --- Cart Item Image --- */
.wc-block-cart-items__row img,
.wc-block-cart-item__image img,
.woocommerce-mini-cart-item img,
.mk-cart-item__image {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

/* --- Cart Item Info --- */
.wc-block-cart-item__wrap,
.wc-block-cart-item__details,
.mk-cart-item__info { flex: 1; min-width: 0; }

/* --- Cart Item Title --- */
.wc-block-cart-item__product-name,
.wc-block-cart-item__product a,
.woocommerce-mini-cart-item a:not(.remove),
.mk-cart-item__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}
.wc-block-cart-item__product-name:hover,
.wc-block-cart-item__product a:hover,
.woocommerce-mini-cart-item a:not(.remove):hover,
.mk-cart-item__title:hover { color: hsl(var(--primary)); }

/* --- Cart Item Meta --- */
.wc-block-cart-item__product-metadata,
.mk-cart-item__artist {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.125rem;
}

/* --- Cart Item Badge --- */
.mk-cart-item__badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 10px;
  font-weight: 600;
  margin-top: 0.25rem;
  border: none;
}
.mk-cart-item__badge--post-auction { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.mk-cart-item__badge--buy-now { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* --- Cart Item Price --- */
.wc-block-cart-item__prices,
.wc-block-formatted-money-amount,
.mk-cart-item__price {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--primary));
  margin-top: 0.5rem;
}

/* --- Cart Item Remove --- */
.wc-block-cart-item__remove-link,
.woocommerce-mini-cart-item .remove,
.mk-cart-item__remove {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
}
.wc-block-cart-item__remove-link:hover,
.woocommerce-mini-cart-item .remove:hover,
.mk-cart-item__remove:hover { background: hsl(var(--accent)); color: hsl(var(--destructive)); }

/* --- Separator --- */
.mk-cart-separator { flex-shrink: 0; background: hsl(var(--border)); height: 1px; width: 100%; }

/* --- Voucher Section --- */
.wc-block-components-totals-coupon,
.mk-cart-voucher { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem 0; }
.wc-block-components-totals-coupon__button-wrapper,
.mk-cart-voucher__label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.mk-cart-voucher__label-icon { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); }
.mk-cart-voucher__label-icon--gold { color: hsl(var(--gold)); }
.mk-cart-voucher__label-text { font-size: 0.875rem; font-weight: 500; }

/* --- Voucher Input --- */
.wc-block-components-totals-coupon__input-wrapper,
.mk-cart-voucher__input-row { display: flex; gap: 0.5rem; }
.wc-block-components-totals-coupon__input,
.mk-cart-voucher__input {
  flex: 1;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wc-block-components-totals-coupon__input:focus,
.mk-cart-voucher__input:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.3);
}
.wc-block-components-totals-coupon__input::placeholder,
.mk-cart-voucher__input::placeholder { color: hsl(var(--muted-foreground)); }

/* --- Voucher Apply Button --- */
.wc-block-components-totals-coupon__button,
.mk-cart-voucher__apply {
  height: 2.25rem;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid hsl(var(--primary));
  border-radius: 0.25rem;
  color: hsl(var(--primary));
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}
.wc-block-components-totals-coupon__button:hover,
.mk-cart-voucher__apply:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* --- Voucher Applied State --- */
.wc-block-components-chip--type-valid,
.mk-cart-voucher__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: hsl(var(--green-50));
  padding: 0.75rem;
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  border: 1px solid hsl(var(--green-200));
}
.wc-block-components-chip__text,
.mk-cart-voucher__applied-code { display: flex; align-items: center; gap: 0.5rem; }
.mk-cart-voucher__applied-check { width: 1rem; height: 1rem; color: hsl(var(--green-600)); }
.mk-cart-voucher__applied-name { font-size: 0.875rem; font-weight: 500; color: hsl(var(--green-700)); }
.mk-cart-voucher__applied-discount { font-size: 0.875rem; color: hsl(var(--green-600)); }
.wc-block-components-chip__remove,
.mk-cart-voucher__remove {
  background: transparent;
  border: none;
  padding: 0.25rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: color 0.2s ease;
}
.wc-block-components-chip__remove:hover,
.mk-cart-voucher__remove:hover { color: hsl(var(--destructive)); }

/* --- Totals Section --- */
.wc-block-mini-cart__footer-rows,
.wc-block-components-totals-wrapper,
.mk-cart-totals { padding: 1rem 0; display: flex; flex-direction: column; gap: 0.75rem; }
.wc-block-components-totals-item,
.woocommerce-mini-cart__total,
.mk-cart-totals__line { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; }
.wc-block-components-totals-item__label,
.mk-cart-totals__label { color: hsl(var(--muted-foreground)); }
.wc-block-components-totals-item__value,
.woocommerce-mini-cart__total strong,
.mk-cart-totals__value { font-weight: 500; }
.mk-cart-premium-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  padding: 0.3rem 0;
  border-top: 1px solid hsl(36 20% 88%);
  margin-top: 0.25rem;
}
.wc-block-components-totals-discount,
.mk-cart-totals__discount { display: flex; justify-content: space-between; align-items: center; color: hsl(var(--green-600)); }
.wc-block-components-totals-footer-item,
.mk-cart-totals__final {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
  padding-top: 0.75rem;
  border-top: 1px solid hsl(var(--border));
  margin-top: 0.25rem;
}
.wc-block-components-totals-footer-item__value,
.mk-cart-totals__final-value { color: hsl(var(--primary)); }

/* --- Footer --- */
.wc-block-mini-cart__footer,
.wc-block-mini-cart__footer-actions,
.woocommerce-mini-cart__buttons,
.mk-cart-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border));
  margin-top: auto;
}
@media (min-width: 640px) {
  .wc-block-mini-cart__footer-actions,
  .woocommerce-mini-cart__buttons,
  .mk-cart-footer { flex-direction: row; justify-content: flex-end; }
}
.wc-block-mini-cart__footer-actions .wc-block-components-button,
.woocommerce-mini-cart__buttons a.button,
.mk-cart-footer__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
.wc-block-mini-cart__footer-actions .wc-block-components-button--outlined,
.woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout),
.mk-cart-footer__clear {
  background: transparent;
  border: 1px solid hsl(var(--primary));
  color: hsl(var(--primary));
}
.wc-block-mini-cart__footer-actions .wc-block-components-button--outlined:hover,
.woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout):hover,
.mk-cart-footer__clear:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.wc-block-mini-cart__footer-actions .wc-block-components-button--contained,
.woocommerce-mini-cart__buttons a.checkout,
.mk-cart-footer__checkout {
  background: hsl(var(--primary));
  border: 1px solid hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.wc-block-mini-cart__footer-actions .wc-block-components-button--contained:hover,
.woocommerce-mini-cart__buttons a.checkout:hover,
.mk-cart-footer__checkout:hover { background: hsl(var(--primary) / 0.9); }

/* --- Cart Icon Badge --- */
/* P3 FIX: Cart badge must be RED (destructive) not cream */
/* React: bg-destructive = hsl(0 65% 50%) = #D42A2A */
/* WooCommerce applies inline styles, so we need !important and high specificity */
.wc-block-mini-cart__badge,
.mk-cart-badge,
.mk-header .wc-block-mini-cart__badge,
.mk-header .wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge,
.wc-block-mini-cart .wc-block-mini-cart__badge,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  border-radius: 9999px;
  background: hsl(0 65% 50%) !important; /* destructive red #D42A2A */
  background-color: hsl(0 65% 50%) !important;
  color: white !important;
  border: none !important;
}

/* --- WooCommerce List Reset --- */
.woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Dark Mode Support --- */
.dark .mk-cart-voucher__applied,
.dark .wc-block-components-chip--type-valid {
  background: hsl(160 30% 10% / 0.3);
  border-color: hsl(160 40% 30%);
}
.dark .mk-cart-voucher__applied-name { color: hsl(var(--green-400)); }

/* ==========================================================================
   45. MY ACCOUNT — BID HISTORY & DASHBOARD
   ========================================================================== */

/* Task 12.9: Account header with logout */
.mk-account-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid hsl(36 20% 82%);
}
.mk-account-header__title {
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif);
  font-size: 1.875rem;
  font-weight: 600;
  color: hsl(160 30% 18%);
  margin: 0;
}

/* Bid history table */
.mk-bid-history__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.mk-bid-history__table th {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid hsl(36 20% 82%);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(160 15% 40%);
}
.mk-bid-history__table td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
}
.mk-bid-history__artwork { min-width: 220px; }
.mk-bid-history__link {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.mk-bid-history__thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  flex-shrink: 0;
}
.mk-bid-history__title {
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: hsl(160 30% 18%);
  display: block;
}
.mk-bid-history__artist {
  font-size: 0.8rem;
  color: hsl(160 15% 40%);
  display: block;
}
.mk-bid-history__amount strong { color: hsl(160 30% 28%); font-size: 1rem; }
.mk-bid-history__date { color: hsl(160 15% 40%); }
.mk-bids-empty { padding: 2rem; text-align: center; color: hsl(160 15% 40%); }

/* Account dashboard */
.mk-account-dashboard { padding: 0.5rem 0 1.5rem; }
.mk-account-welcome { margin-bottom: 1.5rem; font-size: 1rem; color: hsl(160 15% 40%); }
.mk-account-welcome strong { color: hsl(160 30% 18%); }
.mk-account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 640px) { .mk-account-stats { grid-template-columns: 1fr; } }
.mk-account-stat {
  background: hsl(var(--card)) !important;
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  padding: 1.25rem;
  display: flex;
  align-items: start;
  gap: 1rem;
}
.mk-account-stat--gold { background: hsl(42 55% 58% / 0.15); }
.mk-account-stat__icon {
  width: 3rem;    /* 48px, was 2.5rem (40px) — Task 12.1-12.2 (G24) */
  height: 3rem;   /* 48px, was 2.5rem (40px) — Task 12.1-12.2 (G24) */
  background: hsl(160 30% 28% / 0.1);
  border-radius: 50%;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-shrink: 0;
  color: hsl(160 30% 28%);
}
.mk-account-stat__icon svg {
  width: 1.5rem;  /* 24px, w-6 h-6 — Task 12.3 (G24) */
  height: 1.5rem;
}
.mk-account-stat--gold .mk-account-stat__icon {
  background: hsl(42 55% 58% / 0.2);
  color: hsl(42 45% 38%);
}
.mk-account-stat__label {
  display: block;
  font-size: 0.75rem;
  color: hsl(160 15% 40%);
  margin-bottom: 0.2rem;
}
.mk-account-stat__value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(160 30% 18%);
}

/* Account info card */
.mk-account-info-card {
  background: hsl(40 30% 96%);
  border: 1px solid hsl(36 20% 82%);
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  padding: 1.5rem;
}
.mk-account-info-card__header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1rem;
}
.mk-account-info-card__header h3 {
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: hsl(160 30% 18%);
}
.mk-account-edit-btn {
  display: inline-flex;
  align-items: start;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: hsl(160 30% 28%);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border: 1px solid hsl(160 30% 28% / 0.3);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  transition: color 200ms ease, background-color 200ms ease;
}
.mk-account-edit-btn:hover { background: hsl(160 30% 28% / 0.08); }
.mk-account-info-card__data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (max-width: 640px) { .mk-account-info-card__data { grid-template-columns: 1fr; } }
.mk-account-info-card__data div { display: flex; flex-direction: column; gap: 0.15rem; }
.mk-account-info-card__data dt {
  font-size: 0.75rem;
  color: hsl(160 15% 40%);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mk-account-info-card__data dd {
  font-size: 0.9rem;
  color: hsl(160 30% 18%);
  margin: 0;
  font-weight: 500;
}

/* ------------------------------------------------------------------
   C20-4: Bid History Table Layout — matches React table format
   ------------------------------------------------------------------ */
.mk-bid-history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.mk-bid-history-table th {
  text-align: left;
  padding: 0.75rem;
  border-bottom: 2px solid hsl(var(--border));
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
}

.mk-bid-history-table td {
  padding: 1rem 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: middle;
}

.mk-bid-history-table tbody tr:hover {
  background: hsl(var(--muted) / 0.5);
  transition: background-color 0.2s;
}

.mk-bid-history-table tbody tr:last-child td {
  border-bottom: none;
}

/* Artwork column with image + info */
.mk-bid-history__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.mk-bid-history__thumb {
  flex-shrink: 0;
}

.mk-bid-history__thumb img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 0.25rem;
}

.mk-bid-history__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.mk-bid-history__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-bid-history__link:hover .mk-bid-history__title {
  color: hsl(var(--primary));
}

.mk-bid-history__artist {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  display: block;
}

/* Amount column */
.mk-bid-history__amount {
  font-weight: 600;
  font-family: var(--font-display);
  color: hsl(var(--foreground));
}

/* Date column */
.mk-bid-history__date {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

/* Status badges */
.mk-bid-history__status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.mk-bid-history__status--winning {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.mk-bid-history__status--outbid {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
}

/* ------------------------------------------------------------------
   C20-3: My Account Dashboard Layout Improvements — matches React Account.tsx
   WooCommerce My Account navigation and content styling for card-based layout
   ------------------------------------------------------------------ */

/* Main content area — card background with shadow */
.woocommerce-MyAccount-content {
  padding: 2rem;
  background: hsl(var(--card));
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  box-shadow: var(--shadow-card);
}

/* Navigation sidebar — clean background with spacing */
.woocommerce-MyAccount-navigation {
  background: hsl(var(--background));
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  padding: 1rem;
}

/* Navigation list reset */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Navigation links — clean, clickable items */
.woocommerce-MyAccount-navigation li {
  margin-bottom: 0.25rem;
}

.woocommerce-MyAccount-navigation li:last-child {
  margin-bottom: 0;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  font-size: 0.9375rem;
  font-weight: 400;
}

/* Hover state for navigation links */
.woocommerce-MyAccount-navigation li a:hover {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

/* Active state for current page */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--current a {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  font-weight: 500;
}

/* Dashboard welcome message */
.woocommerce-MyAccount-content p:first-child {
  margin-bottom: 1.5rem;
  color: hsl(var(--muted-foreground));
}


/* ==========================================================================
   46. CATALOG TOOLBAR — RESULT COUNT, SORT DROPDOWN, GRID/LIST TOGGLE,
       QUICK FILTERS (E5, F1, F2)
   (Section 47 formerly "GDPR" — removed in v1.0.8; renumbered in v1.0.9)
   ========================================================================== */

/* ------------------------------------------------------------------
   Toolbar wrapper — injected by JS on archive/shop pages
   ------------------------------------------------------------------ */
.mk-catalog-toolbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 0 1rem;
  border-bottom: 1px solid hsl(36 20% 82%);
  margin-bottom: 1.5rem;
}

/* Left cluster: result count + quick filters */
.mk-catalog-toolbar__left {
  display: flex;
  align-items: start;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Right cluster: sort + view toggle */
.mk-catalog-toolbar__right {
  display: flex;
  align-items: start;
  gap: 0.75rem;
}

/* ------------------------------------------------------------------
   E5: Result count — "Rasta: X kūrinių"
   Override any injected display:none on .woocommerce-result-count
   ------------------------------------------------------------------ */
.woocommerce-result-count,
p.woocommerce-result-count {
  display: block !important;
  visibility: visible !important;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(160 30% 18%);
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
/* Hide the native WC result count outside our toolbar (we re-render it inside) */
.woocommerce-result-count.mk-hidden { display: none !important; }

/* Result count label inside our toolbar */
.mk-result-count {
  font-size: 1rem !important;
  font-weight: 600;
  color: hsl(160 30% 18%);
  white-space: nowrap;
}
.mk-result-count__label {
  font-size: 1rem !important;
  color: hsl(160 15% 40%);
  font-weight: 400;
}

/* Active filters badge — shows count of active filters next to result count */
.mk-active-filters-badge {
  display: inline-flex;
  align-items: start;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  margin-left: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  color: hsl(40 30% 96%);
  background: hsl(160 30% 28%);
  border-radius: 9999px;
  vertical-align: middle;
}

/* Clear filters button (toolbar version with X icon + badge) */
.mk-clear-filters {
  display: inline-flex;
  align-items: start;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid hsl(0 65% 50% / 0.4);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  background: hsl(0 65% 50% / 0.08);
  color: hsl(0 65% 50%);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
  line-height: 1;
}
.mk-clear-filters:hover {
  border-color: hsl(0 65% 50%);
  background: hsl(0 65% 50% / 0.15);
  color: hsl(0 65% 50%);
}
.mk-clear-filters svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.mk-clear-filters__badge {
  display: inline-flex;
  align-items: start;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: hsl(0 65% 50%);
  border-radius: 9999px;
}

/* ------------------------------------------------------------------
   E5: Sort dropdown — styled to match React spec
   ------------------------------------------------------------------ */
.woocommerce-ordering {
  margin: 0;
  padding: 0;
}
.woocommerce-ordering select,
select.orderby,
.mk-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: hsl(40 30% 96%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23325A4D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  border: 1px solid hsl(36 20% 82%);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  color: hsl(160 30% 18%);
  cursor: pointer;
  font-family: var(--wp--preset--font-family--inter, 'Inter', system-ui, sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  height: 2.25rem;
  padding: 0 2.25rem 0 0.75rem;
  transition: border-color 200ms, box-shadow 200ms;
  min-width: 200px;
}
.woocommerce-ordering select:hover,
select.orderby:hover,
.mk-sort-select:hover {
  border-color: hsl(160 30% 28%);
}
.woocommerce-ordering select:focus,
select.orderby:focus,
.mk-sort-select:focus {
  border-color: hsl(160 30% 28%);
  box-shadow: 0 0 0 2px hsl(160 30% 28% / 0.15);
  outline: none;
}

/* ------------------------------------------------------------------
   F1: Grid / List view toggle buttons
   ------------------------------------------------------------------ */
/* DUPLICATE REMOVED: .mk-view-toggle #2 - keeping line 7707 version (most complete) */
/*
.mk-view-toggle {
  display: flex;
  align-items: start;
  gap: 0;
  border: 1px solid hsl(36 20% 82%);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  overflow: hidden;
}
.mk-view-btn {
  display: flex;
  align-items: start;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: hsl(40 30% 96%);
  border: none;
  cursor: pointer;
  color: hsl(160 15% 40%);
  transition: background 200ms, color 200ms;
  padding: 0;
  line-height: 1;
}
.mk-view-btn + .mk-view-btn {
  border-left: 1px solid hsl(36 20% 82%);
}
.mk-view-btn:hover {
  background: hsl(36 20% 90%);
  color: hsl(160 30% 18%);
}
.mk-view-btn.is-active {
  background: hsl(160 30% 28%);
  color: hsl(40 30% 96%);
}
.mk-view-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
*/

/*
 * Version 1.17.7 - P30 Mobile Menu Parity (2026-03-23)
 * - Section 134: Mobile menu 1:1 React parity
 * - Converts WP overlay menu to inline expand (matches React behavior)
 * - Hamburger: ghost button, 2.5rem, w-5 h-5 icon
 * - Menu: py-4 border-t animate-fade-in
 * - Section labels: text-sm font-medium text-muted-foreground
 * - Submenu links: px-4 py-2 hover:bg-muted rounded
 * - Top links: px-2 py-2 font-medium hover:text-primary
 * - Breakpoint: 1024px (lg:hidden)
 * Reference: docs/PARITY-AGENT-LOGS/P30-MOBILE-MENU.md
 */

/* ------------------------------------------------------------------
   F1: List view layout — DEPRECATED — SEE SECTION 122 (CONSOLIDATED)
   ------------------------------------------------------------------ */
/* DUPLICATE REMOVED by Agent P1-06: Conflicting values (140px x 180px, 0.375rem radius)
   Consolidated into Section 122 with correct React values (192px x 192px SQUARE, 0.125rem radius)
   Lines 5650-5695 commented out 2026-03-22
*/
/*
.mk-catalog--list .wc-block-product-template,
.mk-catalog--list ul.products {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  grid-template-columns: none !important;
}

.mk-catalog--list .wc-block-product-template li,
.mk-catalog--list ul.products > li {
  width: 100% !important;
}

.mk-catalog--list .mk-product-card,
.mk-catalog--list .wc-block-grid__product {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 1.25rem;
}

.mk-catalog--list .mk-product-card .mk-product-card__image,
.mk-catalog--list .wc-block-grid__product .wc-block-grid__product-image {
  width: 140px !important;
  min-width: 140px !important;
  flex-shrink: 0;
}
.mk-catalog--list .mk-product-card .mk-product-card__image img,
.mk-catalog--list .wc-block-grid__product .wc-block-grid__product-image img {
  width: 140px !important;
  height: 180px !important;
  object-fit: cover;
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
}

.mk-catalog--list .mk-product-card .mk-product-card__body,
.mk-catalog--list .wc-block-grid__product .wc-block-grid__product-title,
.mk-catalog--list .wc-block-grid__product .wc-block-grid__product-price,
.mk-catalog--list .wc-block-grid__product .wc-block-grid__product-add-to-cart {
  flex: 1;
}
*/

/*
 * Version 1.17.7 - P30 Mobile Menu Parity (2026-03-23)
 * - Section 134: Mobile menu 1:1 React parity
 * - Converts WP overlay menu to inline expand (matches React behavior)
 * - Hamburger: ghost button, 2.5rem, w-5 h-5 icon
 * - Menu: py-4 border-t animate-fade-in
 * - Section labels: text-sm font-medium text-muted-foreground
 * - Submenu links: px-4 py-2 hover:bg-muted rounded
 * - Top links: px-2 py-2 font-medium hover:text-primary
 * - Breakpoint: 1024px (lg:hidden)
 * Reference: docs/PARITY-AGENT-LOGS/P30-MOBILE-MENU.md
 */

/* ------------------------------------------------------------------
   F2: Quick filter toggle switches — Su statymais / Pirkti dabar
   ------------------------------------------------------------------ */
.mk-quick-filters {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.mk-qf-toggle {
  display: inline-flex;
  align-items: start;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

/* The pill-shaped track */
.mk-qf-toggle__track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  background: hsl(36 20% 82%);
  border-radius: 9999px;
  transition: background 200ms;
  flex-shrink: 0;
}
/* The sliding thumb */
.mk-qf-toggle__track::after {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px hsl(160 30% 18% / 0.2);
  transition: transform 200ms;
}

/* Active state */
.mk-qf-toggle.is-active .mk-qf-toggle__track {
  background: hsl(160 30% 28%);
}
.mk-qf-toggle.is-active .mk-qf-toggle__track::after {
  transform: translateX(1rem);
}

/* Label text */
.mk-qf-toggle__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(160 30% 18%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Responsive: stack toolbar on small screens
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .mk-catalog-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .mk-catalog-toolbar__right {
    width: 100%;
    justify-content: flex-end;
  }
  .woocommerce-ordering select,
  select.orderby,
  .mk-sort-select {
    min-width: 160px;
  }
}

/* ==================================================================
   AUCTION CARD TIMER OVERLAY (E3/E24)
   Compact countdown timer OVERLAID at the bottom of each product card
   image via meno_kodas_render_product_card_meta_block() in functions.php.
   WC Simple Auctions' jquery.countdown.min.js initialises these elements.

   React Reference: Timer is positioned absolute at bottom of image with
   gradient background (linear-gradient to top from dark to transparent).
   ================================================================== */

/* Product card needs position relative for timer absolute positioning */
.mk-product-card {
  position: relative;
}

/* Image wrapper needs position relative so timer positions relative to image area */
.mk-product-card .wc-block-components-product-image,
.mk-product-card .wp-block-woocommerce-product-image,
.wc-block-grid__product .wc-block-components-product-image {
  position: relative;
}

/* Container — absolutely positioned at bottom of image with gradient */
.mk-card-timer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: start;
  justify-content: center;
  padding: 1rem 0.75rem 0.5rem;
  /* Gradient from dark at bottom to transparent at top - matches React */
  background: linear-gradient(to top, hsl(160 30% 18% / 0.85) 0%, hsl(160 30% 18% / 0.6) 50%, transparent 100%);
  border-radius: 0;
  min-height: 2.5rem;
  overflow: hidden;
}

/* The SAcountdown span itself */
.mk-card-timer .auction-time-countdown,
.mk-card-timer .auction-time-countdown.hasCountdown {
  display: inline-flex !important;
  align-items: start;
  gap: 0.25rem;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: hsl(40 30% 96%) !important;
  font-family: var(--wp--preset--font-family--inter), system-ui, sans-serif;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* SAcountdown renders <span> elements for each time unit */
.mk-card-timer .auction-time-countdown span {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Separator dots between units */
.mk-card-timer .auction-time-countdown .sep {
  opacity: 0.5;
  margin: 0 0.1rem;
}

/* Active state — default gradient (forest dark), cream text */
.mk-card-timer .mk-timer-active,
.mk-card-timer .mk-timer-active span {
  color: hsl(40 30% 96%) !important;
}

/* Ending state (<1 hour) — red gradient, white text, pulsing */
.mk-card-timer:has(.mk-timer-ending) {
  background: linear-gradient(to top, hsl(0 65% 45% / 0.9) 0%, hsl(0 65% 50% / 0.7) 50%, transparent 100%);
}
.mk-card-timer .mk-timer-ending,
.mk-card-timer .mk-timer-ending span {
  color: #fff !important;
  animation: mk-pulse 1.5s ease-in-out infinite;
}

/* Upcoming state — gold gradient, dark text */
.mk-card-timer:has(.mk-timer-upcoming) {
  background: linear-gradient(to top, hsl(42 55% 50% / 0.9) 0%, hsl(42 55% 58% / 0.7) 50%, transparent 100%);
}
.mk-card-timer .mk-timer-upcoming,
.mk-card-timer .mk-timer-upcoming span {
  color: hsl(160 30% 18%) !important;
}

/* Timer is absolutely positioned over image, no order needed */
/* Legacy order rule removed - timer now uses position: absolute */

/* SAcountdown compact format: hide period labels, show only numbers */
.mk-card-timer .countdown_amount {
  font-size: 0.75rem;
  font-weight: 700;
  color: inherit;
}
.mk-card-timer .countdown_section {
  display: inline-flex;
  align-items: start;
  gap: 0.1rem;
}
.mk-card-timer .countdown_period {
  font-size: 0.6rem;
  font-weight: 400;
  opacity: 0.75;
  text-transform: lowercase;
}

/* ==================================================================
   D1: /aukcionai/ Hub — navigation banner above archive products
   ================================================================== */

/* Auction hub navigation tabs at top of archive */
.mk-auction-status-nav {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.mk-auction-status-nav__link {
  display: inline-flex;
  align-items: start;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid hsl(36 20% 82%);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  background: hsl(40 30% 96%);
  color: hsl(160 30% 28%);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms ease, background-color 200ms ease;
}

.mk-auction-status-nav__link:hover,
.mk-auction-status-nav__link--active {
  background: hsl(160 30% 28%);
  border-color: hsl(160 30% 28%);
  color: hsl(40 30% 96%);
}

/* Fix "Starting bid:" label — override plugin's English HTML via CSS content */
.auction-price .current.auction {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(160 15% 40%);
  display: block;
  margin-bottom: 0.25rem;
}

/* Hide the English "Starting bid:" / "Current bid:" span text,
   replace via ::before with Lithuanian */
.auction-price.starting-bid .current.auction {
  font-size: 0 !important; /* hide English text */
  line-height: 0;
}
.auction-price.starting-bid .current.auction::before {
  content: 'Pradinė kaina';
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(160 15% 40%);
  line-height: normal;
}

.auction-price.current-bid .current.auction {
  font-size: 0 !important;
  line-height: 0;
}
.auction-price.current-bid .current.auction::before {
  content: 'Dabartinis pasiūlymas';
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(160 15% 40%);
  line-height: normal;
}

/* "Buy now for" button text override */
.single_add_to_cart_button.button.alt {
  font-size: 0 !important;
  line-height: 0;
}
.single_add_to_cart_button.button.alt::before {
  content: 'Pirkti dabar už ';
  font-size: 1rem;
  line-height: normal;
  font-weight: 500;
}
/* Keep the price span visible */
.single_add_to_cart_button.button.alt .woocommerce-Price-amount {
  font-size: 1rem !important;
  line-height: normal !important;
}

/* ==================================================================
   SINGLE PRODUCT AUCTION TIMER (full variant — injected via PHP)
   ================================================================== */

.mk-product-timer {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  background: hsl(160 30% 28% / 0.08);
  border: 1px solid hsl(160 30% 28% / 0.15);
}

.mk-product-timer .auction-time-countdown {
  display: block;
}

/* The SAcountdown plugin renders a table with .countdown_section cells */
.mk-product-timer .hasCountdown {
  width: 100%;
  text-align: center;
}

.mk-product-timer .countdown_section {
  display: inline-flex;
  flex-direction: column;
  align-items: start;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 1px solid hsl(36 20% 82%);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  margin: 0 0.25rem;
  min-width: 64px;
}

.mk-product-timer .countdown_amount {
  font-family: var(--wp--preset--font-family--playfair-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: hsl(160 30% 18%);
  line-height: 1;
}

.mk-product-timer .countdown_period {
  font-size: 0.6875rem;
  font-weight: 500;
  color: hsl(160 15% 40%);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

/* Ending-soon: red pulsing */
.mk-product-timer .mk-timer-ending .countdown_section {
  background: hsl(0 65% 50% / 0.08);
  border-color: hsl(0 65% 50% / 0.3);
}
.mk-product-timer .mk-timer-ending .countdown_amount {
  color: hsl(0 65% 40%);
}
.mk-product-timer .mk-timer-ending {
  border-color: hsl(0 65% 50% / 0.3);
  background: hsl(0 65% 50% / 0.06);
}

/* Upcoming: gold */
.mk-product-timer .mk-timer-upcoming .countdown_section {
  background: hsl(42 55% 58% / 0.1);
  border-color: hsl(42 55% 58% / 0.3);
}
.mk-product-timer .mk-timer-upcoming {
  border-color: hsl(42 55% 58% / 0.3);
  background: hsl(42 55% 58% / 0.06);
}

/* Ended state */
.mk-product-timer--ended .mk-timer-ended-label {
  font-size: 0.875rem;
  color: hsl(160 15% 40%);
  text-align: center;
  margin: 0;
}

/* ==================================================================
   AUCTION BID FORM (injected via render_block filter)
   Styles the WC Simple Auctions bid form to match React design
   ================================================================== */

.mk-auction-bid-form {
  margin-top: 1.25rem;
}

/* SP10-2: Bid form header with Gavel icon (React parity) */
.mk-bid-form__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--playfair-display);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: hsl(var(--foreground));
}

.mk-bid-form__header svg {
  width: 1.25rem;
  height: 1.25rem;
  color: hsl(var(--primary));
}

/* SP10-3: Buy Now button in bid form (React parity) */
.mk-bid-form__buy-now {
  margin-bottom: 1rem;
}

.mk-bid-form__buy-now a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

/* Plugin's bid form container */
.mk-auction-bid-form .auction_form,
.mk-auction-bid-form form.bid_form,
.mk-auction-bid-form .woocommerce-simple-auctions-place-bid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Bid input — ShadCN Input parity (P2) */
.mk-auction-bid-form input[name="bid_value"],
.mk-auction-bid-form input.bid_amount,
.mk-auction-bid-form .woocommerce-simple-auctions-place-bid input,
.wsa-bid-form input.bid_amount,
input[name="bid_amount"] {
  width: 100% !important;
  height: 2.5rem !important;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: var(--radius) !important;
  font-size: 1rem !important;
  background: white !important;
  color: hsl(var(--foreground)) !important;
  transition: border-color 200ms, box-shadow 200ms;
}

.mk-auction-bid-form input[name="bid_value"]:focus,
.mk-auction-bid-form input.bid_amount:focus,
.wsa-bid-form input.bid_amount:focus,
input[name="bid_amount"]:focus {
  border-color: hsl(var(--primary)) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
}

/* Submit/bid button */
.mk-auction-bid-form input[type="submit"],
.mk-auction-bid-form button[type="submit"],
.mk-auction-bid-form .button.bid_button {
  background: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
  border: none !important;
  border-radius: 0.125rem !important;  /* rounded-md = 2px (React custom config) */
  padding: 0.875rem 2rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 200ms;
  width: 100% !important;
}

.mk-auction-bid-form input[type="submit"]:hover,
.mk-auction-bid-form button[type="submit"]:hover,
.mk-auction-bid-form .button.bid_button:hover {
  background: hsl(160 30% 22%) !important;
}

/* Bid increment info */
.mk-auction-bid-form .bid-increment-info,
.mk-auction-bid-form .minimum_bid {
  font-size: 0.8125rem;
  color: hsl(160 15% 40%);
}

/* Proxy bid checkbox */
.mk-auction-bid-form .proxy-bid-row {
  display: flex;
  align-items: start;
  gap: 0.5rem;
  font-size: 0.875rem;
}

/* Reserve notice */
.mk-auction-bid-form .reserve_not_meet,
.mk-auction-bid-form .reserve_meet {
  padding: 0.5rem 0.75rem;
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  font-size: 0.8125rem;
  font-weight: 500;
}

.mk-auction-bid-form .reserve_not_meet {
  background: hsl(0 65% 50% / 0.08);
  color: hsl(0 65% 40%);
  border: 1px solid hsl(0 65% 50% / 0.2);
}

.mk-auction-bid-form .reserve_meet {
  background: hsl(142 71% 45% / 0.08);
  color: hsl(120 50% 30%);
  border: 1px solid hsl(142 71% 45% / 0.2);
}

/* ==========================================================================
   CONTENT PAGE FIXES — content-a audit
   ========================================================================== */

/* Kontaktai: Contact icon circle (wp:html SVG wrapper) */
.mk-contact-icon-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: hsl(var(--primary) / 0.1);
  display: flex;
  align-items: start;
  justify-content: center;
  flex-shrink: 0;
}

.mk-contact-icon-circle svg {
  color: hsl(var(--primary));
}

/* Pardavimas: 4-step process card layout */
.mk-sell-step-card {
  position: relative;
  overflow: visible;
}

.mk-sell-step-number {
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: start;
  justify-content: center;
  font-family: var(--font-body);
  line-height: 1;
}

.mk-sell-step-icon {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

.mk-sell-step-icon svg {
  display: block;
}

@media (max-width: 639px) {
  .mk-sell-step-card {
    margin-top: 0.75rem;
  }
}

/* Ekspozicijos: SVG map pin icon container */
.mk-ekspozicijos__pin {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-shrink: 0;
}

.mk-ekspozicijos__pin svg {
  display: block;
}

/* ==========================================================================
   47. CATALOG SIDEBAR — CATEGORY PANEL, TIME FILTERS, QUICK FILTERS,
       CLEAR BUTTON (E6)
   (renumbered from 48 in v1.0.9 after GDPR section removal)
   ========================================================================== */

/* ------------------------------------------------------------------
   Category panel — forest-green background matching React design
   ------------------------------------------------------------------ */
.mk-catalog__sidebar .mk-filter-group:first-child {
  background: hsl(160 30% 28%) !important;
  border-color: transparent !important;
}

.mk-catalog__sidebar .mk-filter-group:first-child .wp-block-heading {
  color: hsl(40 30% 96%);
}

/* WC product-categories block item links */
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item a,
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list a {
  color: hsl(40 30% 96% / 0.8);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 200ms;
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item a:hover,
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list a:hover {
  color: hsl(42 55% 58%);
}

/* Active / current category */
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item.is-current > a,
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item--current > a,
.mk-catalog__sidebar .mk-filter-group:first-child .current-cat > a {
  color: hsl(42 55% 58%) !important;
  font-weight: 500;
}

/* Item count badge */
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item__count,
.mk-catalog__sidebar .mk-filter-group:first-child .count {
  color: hsl(40 30% 96% / 0.5);
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

/* ------------------------------------------------------------------
   Time filter buttons (E6) + Price filter buttons (K9-2)
   ------------------------------------------------------------------ */
.mk-time-filters,
.mk-price-filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mk-time-filter-btn,
.mk-price-filter-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.125rem !important;     /* FIX: rounded-md = 2px (CUSTOM Tailwind config) */
  font-size: 0.875rem;
  color: hsl(160 15% 40%);
  text-decoration: none;
  transition: background 150ms, color 150ms;
  cursor: pointer;
}

.mk-time-filter-btn:hover,
.mk-price-filter-btn:hover {
  background: hsl(36 20% 90%);
  color: hsl(160 30% 28%);
}

.mk-time-filter-btn.is-active,
.mk-price-filter-btn.is-active {
  background: hsl(160 30% 28%);
  color: hsl(40 30% 96%);
  font-weight: 500;
}

/* Hide native WC price filter slider — replaced by JS price range buttons */
.mk-catalog__sidebar .wc-block-price-filter {
  display: none !important;
}

/* ------------------------------------------------------------------
   Sidebar quick filter toggles (E6)
   ------------------------------------------------------------------ */
.mk-sidebar-qf {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.mk-sqf-toggle {
  display: flex;
  align-items: start;
  justify-content: space-between;
  cursor: pointer;
  gap: 0.75rem;
}

.mk-sqf-toggle__track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  background: hsl(36 20% 82%);
  border-radius: 9999px;
  transition: background 200ms;
  flex-shrink: 0;
}

.mk-sqf-toggle.is-active .mk-sqf-toggle__track {
  background: hsl(160 30% 28%);
}

.mk-sqf-toggle__thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  background: #fff;
  border-radius: 9999px;
  transition: transform 200ms;
  box-shadow: 0 1px 3px hsl(0 0% 0% / 0.2);
}

.mk-sqf-toggle.is-active .mk-sqf-toggle__thumb {
  transform: translateX(1rem);
}

.mk-sqf-toggle__label {
  font-size: 0.875rem;
  color: hsl(160 30% 18%);
  flex: 1;
}

/* ------------------------------------------------------------------
   Clear filters button (E6)
   ------------------------------------------------------------------ */
.mk-clear-filters-btn {
  display: flex;
  align-items: start;
  justify-content: center;
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid hsl(160 30% 28% / 0.3);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  background: transparent;
  color: hsl(160 30% 28%);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
}

.mk-clear-filters-btn:hover {
  border-color: hsl(160 30% 28%);
  background: hsl(160 30% 28% / 0.06);
  color: hsl(160 30% 28%);
}

/* ------------------------------------------------------------------
   Responsive: stack sidebar above content on mobile (React parity)
   React uses grid lg:grid-cols-4 — sidebar is always visible, stacks on mobile
   ------------------------------------------------------------------ */
@media (max-width: 1279px) {
  .mk-catalog__sidebar {
    /* Sidebar stacks above content on mobile - no display:none */
    order: -1;  /* Ensure sidebar appears first when stacked */
    margin-bottom: 1.5rem;
  }

  /* Parent grid becomes single column on mobile */
  .mk-catalog-layout,
  .wp-block-columns.mk-catalog-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
  }

  /* Sidebar takes full width when stacked */
  .mk-catalog__sidebar,
  .wp-block-column.mk-catalog__sidebar {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   48. GALLERY PAGE — CATEGORY FILTER BUTTONS ROW (GAP 2)
   ========================================================================== */

.mk-gallery-cat-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem; /* P6-05: Fixed from 1.5rem to match React mb-8 */
}

.mk-gallery-cat-btn {
  padding: 0.5rem 1.25rem;
  border: 1px solid hsl(36 20% 82%);
  border-radius: 0.25rem; /* P6-05: Fixed from 0.375rem to match --radius */
  font-size: 0.875rem;
  color: hsl(160 30% 18%);
  text-decoration: none;
  background: transparent;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
  cursor: pointer;
}

.mk-gallery-cat-btn:hover {
  border-color: hsl(160 30% 28%);
  color: hsl(160 30% 28%);
  background: hsl(160 30% 28% / 0.06);
}

.mk-gallery-cat-btn.is-active {
  background: hsl(160 30% 28%);
  border-color: hsl(160 30% 28%);
  color: hsl(40 30% 96%);
}

/* AJAX loading fade transition on product collection grid */
.wp-block-woocommerce-product-collection {
  transition: opacity 200ms ease;
}

/* ==========================================================================
   49. VISUAL AUDIT FIXES v1.2.0
   ========================================================================== */

/* Fix A1: Product card shadow — inline block attrs provide border/bg but not shadow */
.mk-product-card {
  box-shadow: var(--shadow-card);
  transition: box-shadow 300ms ease;
}
.mk-product-card:hover {
  box-shadow: var(--shadow-hover);
}

/* Fix A2: WC block product image hover zoom */
.wc-block-components-product-image a {
  overflow: hidden;
  display: block;
}
.wc-block-components-product-image a img {
  transition: transform 500ms ease;
}
.mk-product-card:hover .wc-block-components-product-image a img,
.wc-block-product:hover .wc-block-components-product-image a img,
li.wc-block-product:hover .wc-block-components-product-image a img {
  transform: scale(1.05);
}

/* Fix A3: WC block add-to-cart button → gold styling
   Blocks output .wc-block-components-product-button__button
   instead of classic .woocommerce .button */
.wc-block-components-product-button__button,
.wp-block-woocommerce-product-button .wp-element-button {
  background-color: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  font-family: var(--font-body) !important;
  border-radius: var(--radius) !important;
  border: none !important;
  box-shadow: var(--shadow-elegant) !important;
  transition: background-color 300ms ease, box-shadow 300ms ease !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0.625rem 1rem !important;
}
.wc-block-components-product-button__button:hover,
.wp-block-woocommerce-product-button .wp-element-button:hover {
  background-color: hsl(var(--gold-light)) !important;
}

/* Fix A4: Gallery filter buttons — static WP blocks use mk-gallery-filter class
   JS replaces them but this CSS ensures correct appearance before JS runs */
.mk-gallery-filter .wp-block-button__link,
.mk-gallery-filter .wp-element-button {
  padding: 0.5rem 1.25rem !important;
  border: 1px solid hsl(160 30% 28%) !important; /* primary/forest green for inactive */
  border-radius: 9999px !important;
  font-size: 0.875rem !important;
  color: hsl(160 30% 18%) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.mk-gallery-filter .wp-block-button__link:hover,
.mk-gallery-filter .wp-element-button:hover {
  border-color: hsl(160 30% 28%) !important;
  color: hsl(160 30% 28%) !important;
  background: hsl(160 30% 28% / 0.06) !important;
}
.mk-gallery-filter--active .wp-block-button__link,
.mk-gallery-filter--active .wp-element-button {
  background: hsl(160 30% 28%) !important;
  border-color: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
}

/* Fix A5: CF7 submit buttons — input[type=submit] gets browser-default gray */
.wpcf7 input[type=submit],
.wpcf7-submit {
  display: inline-flex;
  align-items: start;
  justify-content: center;
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  font-weight: 500;
  font-size: 0.875rem;
  font-family: var(--font-body);
  padding: 0.625rem 1.5rem;
  height: 2.5rem;
  border-radius: var(--radius) !important;
  border: none !important;
  cursor: pointer;
  box-shadow: var(--shadow-elegant);
  transition: background-color 300ms ease, box-shadow 300ms ease;
  letter-spacing: 0.025em;
  width: 100%;
}
.wpcf7 input[type=submit]:hover,
.wpcf7-submit:hover {
  background-color: hsl(160 30% 35%) !important; /* forest-light - React hover state */
  opacity: 1 !important;
  box-shadow: var(--shadow-hover);
}

/* Fix A6: Hide quantity input on auction single products
   Auction products don't use quantity — always 1 lot */
.product-type-auction form.cart .quantity {
  display: none !important;
}

/* Fix A7: Hide empty WC product meta block (outputs nothing, wastes space) */
.wp-block-woocommerce-product-meta:empty {
  display: none;
}
.mk-product-meta .wp-block-woocommerce-product-meta:empty {
  display: none;
}

/* Fix A8: My Account login/register columns — add card background for visual separation */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--wp--preset--spacing--40) !important;
  box-shadow: var(--shadow-card);
}

/* Fix A9: WooCommerce breadcrumbs styling */
.woocommerce .woocommerce-breadcrumb {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.woocommerce .woocommerce-breadcrumb a {
  color: hsl(var(--primary));
  text-decoration: none;
}
.woocommerce .woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}

/* Fix A10: /informacija/ hero — mk-info-hero lost background color (D17 regression)
   Cover block has no background span; CSS rule is the only styling */
.mk-info-hero {
  background-color: hsl(160 30% 28%) !important;
  min-height: 30vh;
}

/* Fix A11: Trust badges — pattern uses mk-trust-badges__item but CSS only has mk-trust-badge */
.mk-trust-badges__item {
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: center;
  gap: 0.75rem;
  padding: var(--wp--preset--spacing--30);
  background: hsl(var(--muted) / 0.3) !important;
  border-radius: var(--radius);
}
.mk-trust-badges__item svg,
.mk-trust-badges__item .mk-trust-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: hsl(var(--primary));
}

/* Fix A12: Plenerai info card shadow override — WP core shadow is too harsh */
.mk-plenerai__info {
  box-shadow: var(--shadow-elegant) !important;
}

/* Fix A13: Auction hub nav tabs — active tab styling should be clearer */
.mk-auction-status-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--wp--preset--spacing--40);
}
.mk-auction-status-nav a {
  padding: 0.5rem 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  text-decoration: none;
  background: transparent;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.mk-auction-status-nav a:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.06);
}
.mk-auction-status-nav a.is-active,
.mk-auction-status-nav a[aria-current="page"] {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* ==========================================================================
   50. HOMEPAGE SECTIONS — HERO FIX, ABOUT, NEWSLETTER, GALLERY PREVIEW
   Fixes for 1:1 React parity. React refs: HeroSection.tsx, AboutSection.tsx,
   NewsletterSection.tsx, GalleryPreview.tsx.
   ========================================================================== */

/* -----------------------------------------------------------------------
   Hero: fix mk-hero__content display
   Bug: CSS sets display:flex on .mk-hero__content which is the INNER
   640px content block (h1 + subtitle + buttons). flex causes h1, subtitle,
   and button div to flow horizontally instead of stacking vertically.
   React: everything in max-w-2xl stacked as block elements.
   ----------------------------------------------------------------------- */
.mk-hero__content {
  display: block !important;
  height: auto !important;
  max-width: none !important;    /* WP constrained layout controls width via its own vars */
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Hero: add bottom-to-top gradient (React has two overlays, WP only has one).
   Uses ::after pseudo on the cover block background span.
   Existing: .mk-hero .wp-block-cover__background = left-to-right gradient.
   Missing: bottom-to-top gradient. */
.mk-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(var(--foreground) / 0.6), transparent, hsl(var(--foreground) / 0.2));
  pointer-events: none;
  z-index: 1;
}
/* Ensure cover content sits above both gradient layers */
.mk-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

/* -----------------------------------------------------------------------
   About Section (.mk-about)
   React: 2-col, image h-[400px] object-cover shadow-elegant rounded-sm.
   Plus decorative gold blur element (absolute positioned).
   ----------------------------------------------------------------------- */

/* Image wrapper: overflow hidden + relative for decorative blob */
.mk-about .mk-about__image {
  position: relative;
  overflow: visible;
}

/* Fixed height 400px matching React's h-[400px] */
.mk-about .mk-about__image .wp-block-image img,
.mk-about .mk-about__image img {
  height: 400px !important;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* shadow-elegant on the figure element */
.mk-about .mk-about__image .wp-block-image {
  box-shadow: var(--shadow-elegant);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Decorative gold blur blob: React's `absolute -bottom-6 -right-6 w-32 h-32 bg-gold/20 rounded-full blur-3xl` */
.mk-about .mk-about__image::after {
  content: '';
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 128px;
  height: 128px;
  background: hsl(var(--gold) / 0.2);
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  z-index: 1;
}

/* About section text: React's leading-relaxed (line-height: 1.625) */
.mk-about p,
.mk-about-section p {
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

/* -----------------------------------------------------------------------
   Newsletter Section (.mk-newsletter)
   React: images with shadow-lg (≈ shadow-card). CF7 form inputs styled.
   Inner image columns: grid-cols-2, second image has mt-8 offset.
   ----------------------------------------------------------------------- */

/* Shadow on newsletter artwork images */
.mk-newsletter .wp-block-image {
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 300ms ease;
}
.mk-newsletter .wp-block-image:hover {
  box-shadow: var(--shadow-hover);
}

/* CF7 form inputs: match React's Input component (bg-background, border, rounded) */
.mk-newsletter__form .wpcf7-form input[type="text"],
.mk-newsletter__form .wpcf7-form input[type="email"] {
  width: 100%;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: var(--wp--preset--font-family--inter, inherit);
  color: hsl(var(--foreground));
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
  display: block;
  margin-bottom: 0.75rem;
}
.mk-newsletter__form .wpcf7-form input:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1);
}
/* Label spacing */
.mk-newsletter__form .wpcf7-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 0.375rem;
}
/* Checkbox row: flex align */
.mk-newsletter__form .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.mk-newsletter__form .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--primary));
  flex-shrink: 0;
}
.mk-newsletter__form .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
}

/* -----------------------------------------------------------------------
   Gallery Preview Section (.mk-gallery-preview)
   React: left col is 2-col image grid with shadow-card + hover zoom.
   Images have fixed heights: h-40 (160px), h-52 (208px), h-64 (256px).
   WP uses aspect-ratio inline styles instead — keep those but add shadows.
   ----------------------------------------------------------------------- */

/* shadow-card + hover on all gallery preview images */
.mk-gallery-preview .wp-block-image {
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 300ms ease;
}
.mk-gallery-preview .wp-block-image:hover {
  box-shadow: var(--shadow-hover);
}

/* Ensure images inside gallery grid fill their containers */
.mk-gallery-preview__grid .wp-block-image img {
  width: 100%;
  display: block;
}

/* Gallery preview text line-height - React leading-relaxed = 1.625 */
.mk-gallery-preview p,
.mk-gallery-preview__text {
  line-height: 1.625 !important;
}

/* ==========================================================================
   51. GALLERY PAGE (page-id-92) — Product card overrides matching React GalleryCard
   React: bg-card, shadow-card, hover:shadow-hover, aspect-[4/5], two buttons
   ========================================================================== */

/* Hide auction-specific meta: status badge, lot prefix in title, estimate, bid count, timer */
.page-id-92 .mk-status-badge,
.page-id-92 .mk-lot-prefix,
.page-id-92 .mk-card-meta__estimate,
.page-id-92 .mk-card-meta__bids,
.page-id-92 .mk-card-timer {
  display: none !important;
}

/* Hide category labels on gallery cards (React GalleryCard omits them) */
.page-id-92 .wc-block-product-template .wp-block-post-terms {
  display: none !important;
}

/* Product image: override 3/4 aspect ratio from block attr to 4/5 */
.page-id-92 .wc-block-components-product-image,
.page-id-92 .wc-block-components-product-image a {
  aspect-ratio: 4 / 5 !important;
  display: block !important;
}
.page-id-92 .wc-block-components-product-image img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* "Peržiūrėti" secondary button — elegant/outline variant injected by JS */
.mk-gallery-view-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.625rem 1rem;
  margin-top: 0.5rem;
  border: 1px solid hsl(var(--foreground) / 0.2);
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  background: transparent;
  font-size: 0.875rem;
  font-weight: 400;
  font-family: var(--font-body);
  letter-spacing: 0.025em;
  text-decoration: none;
  transition: border-color 300ms ease, color 300ms ease;
  cursor: pointer;
}
.mk-gallery-view-btn:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  text-decoration: none;
}

/* PHP-injected gallery buttons (Section 29 in functions.php) */
/* Flex container for add-to-cart + view buttons side by side */
.mk-gallery-buttons {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.75rem;
}

.mk-gallery-buttons > .button,
.mk-gallery-buttons > a.button {
  flex: 1;
  text-align: center;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-body);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 300ms ease;
  cursor: pointer;
  line-height: 1.25;
}

/* Add-to-cart button — gold variant */
.mk-gallery-buttons > .button.mk-btn-gold,
.mk-gallery-buttons > a.add_to_cart_button {
  background: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  border: none;
  box-shadow: var(--shadow-elegant);
}

.mk-gallery-buttons > .button.mk-btn-gold:hover,
.mk-gallery-buttons > a.add_to_cart_button:hover {
  background: hsl(var(--gold-light));
  text-decoration: none;
}

/* View button — elegant/outline variant */
.mk-gallery-buttons > .mk-btn-view,
.mk-gallery-buttons > a.mk-btn-elegant {
  background: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--foreground) / 0.2);
}

.mk-gallery-buttons > .mk-btn-view:hover,
.mk-gallery-buttons > a.mk-btn-elegant:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  text-decoration: none;
}

/* Responsive: stack buttons on small screens */
@media (max-width: 480px) {
  .mk-gallery-buttons {
    flex-direction: column;
  }
}

/* Gallery product grid: 4 columns (no sidebar on gallery page) */
.page-id-92 .mk-product-grid,
.page-id-92 .wp-block-woocommerce-product-collection {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1280px) {
  .page-id-92 .mk-product-grid,
  .page-id-92 .wp-block-woocommerce-product-collection {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 1024px) {
  .page-id-92 .mk-product-grid,
  .page-id-92 .wp-block-woocommerce-product-collection {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .page-id-92 .mk-product-grid,
  .page-id-92 .wp-block-woocommerce-product-collection {
    grid-template-columns: 1fr !important;
  }
}

/* Gallery page H1 — matches React Gallery heading (text-4xl / 2.25rem) */
.page-id-92 h1.wp-block-heading {
  font-size: 2.25rem !important;
}

/* ==================================================================
   52. SINGLE PRODUCT BID HISTORY
   Shows recent bids on auction product pages (matches React design)
   ================================================================== */

.mk-product-bid-history {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.mk-product-bid-history__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 1rem 0;
  letter-spacing: -0.025em;
}

.mk-product-bid-history__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.mk-product-bid-history__table thead th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
}

.mk-product-bid-history__table tbody td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  color: hsl(var(--foreground));
}

.mk-product-bid-history__table tbody tr:last-child td {
  border-bottom: none;
}

.mk-product-bid-history__amount {
  font-weight: 600;
  font-family: var(--font-display);
}

.mk-product-bid-history__bidder {
  color: hsl(var(--muted-foreground));
}

.mk-product-bid-history__date {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

/* Highlight current user's bids */
.mk-product-bid-history__row--you {
  background: hsl(var(--primary) / 0.06);
}

.mk-product-bid-history__row--you td {
  border-bottom-color: hsl(var(--primary) / 0.15);
}

.mk-product-bid-history__row--you .mk-product-bid-history__bidder strong {
  color: hsl(var(--primary));
}

/* Responsive: stack on mobile */
@media (max-width: 480px) {
  .mk-product-bid-history__table thead {
    display: none;
  }
  .mk-product-bid-history__table tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: hsl(var(--muted) / 0.3);
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  border-bottom: none;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
  }
  .mk-product-bid-history__table tbody td {
    border: none;
    padding: 0.25rem 0;
  }
  .mk-product-bid-history__amount {
    flex: 0 0 auto;
    margin-right: auto;
    font-size: 1rem;
  }
  .mk-product-bid-history__date {
    flex: 0 0 auto;
  }
  .mk-product-bid-history__bidder {
    flex: 0 0 100%;
    font-size: 0.75rem;
  }
}

/* ==================================================================
   53. CF7 FORM GLOBAL STYLING
   Phase 1 Implementation - Contact Form 7 styling to match React ShadCN
   ================================================================== */

/* ---------------------------------------------------------------------------
   52.1 INPUT STYLING
   Source: src/components/ui/input.tsx
   Tailwind: flex h-10 w-full rounded-md border border-input bg-background
             px-3 py-2 text-base md:text-sm placeholder:text-muted-foreground
             focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
             disabled:cursor-not-allowed disabled:opacity-50
   --------------------------------------------------------------------------- */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="password"] {
  /* Display & Size */
  display: flex;
  height: 2.5rem;                         /* h-10 = 40px */
  width: 100%;                            /* w-full */

  /* Border & Radius */
  border-radius: 2px;                       /* rounded-md = calc(0.25rem - 2px) = 2px */
  border: 1px solid hsl(36 20% 85%);      /* border-input: #DDD7CB */

  /* Background */
  background-color: hsl(36 33% 94%);      /* bg-background: #F5F2EC */

  /* Padding */
  padding: 0.5rem 0.75rem;                /* py-2 px-3 */

  /* Typography */
  font-size: 1rem;                        /* text-base (mobile) */
  line-height: 1.5rem;
  color: hsl(160 30% 18%);                /* foreground: #203D31 */
  font-family: 'Inter', system-ui, sans-serif;

  /* Reset browser styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Transition */
  transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Desktop: text-sm */
@media (min-width: 768px) {
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 input[type="url"],
  .wpcf7 input[type="number"],
  .wpcf7 input[type="password"] {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Placeholder styling */
.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 input[type="tel"]::placeholder,
.wpcf7 input[type="url"]::placeholder,
.wpcf7 input[type="number"]::placeholder,
.wpcf7 input[type="password"]::placeholder {
  color: hsl(160 15% 40%);                /* muted-foreground: #577066 */
  opacity: 1;
}

/* Disabled state */
.wpcf7 input[type="text"]:disabled,
.wpcf7 input[type="email"]:disabled,
.wpcf7 input[type="tel"]:disabled,
.wpcf7 input[type="url"]:disabled,
.wpcf7 input[type="number"]:disabled,
.wpcf7 input[type="password"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* File input button */
.wpcf7 input[type="file"]::file-selector-button {
  border: 0;
  background-color: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(160 30% 18%);
}

/* ---------------------------------------------------------------------------
   52.2 TEXTAREA STYLING
   Source: src/components/ui/textarea.tsx
   Tailwind: min-h-[80px] w-full flex rounded-md border border-input bg-background
             px-3 py-2 text-sm placeholder:text-muted-foreground
             focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50
   --------------------------------------------------------------------------- */

.wpcf7 textarea {
  /* Size */
  min-height: 80px;
  width: 100%;
  display: flex;

  /* Border & Radius */
  border-radius: 2px;                       /* rounded-md = calc(0.25rem - 2px) = 2px */
  border: 1px solid hsl(36 20% 85%);

  /* Background */
  background-color: hsl(36 33% 94%);

  /* Padding */
  padding: 0.5rem 0.75rem;

  /* Typography */
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(160 30% 18%);
  font-family: 'Inter', system-ui, sans-serif;

  /* Resize */
  resize: vertical;

  /* Transition */
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.wpcf7 textarea::placeholder {
  color: hsl(160 15% 40%);
  opacity: 1;
}

.wpcf7 textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ---------------------------------------------------------------------------
   52.3 LABEL STYLING
   Source: src/components/ui/label.tsx
   Tailwind: text-sm font-medium leading-none
             peer-disabled:cursor-not-allowed peer-disabled:opacity-70
   --------------------------------------------------------------------------- */

.wpcf7 label {
  font-size: 0.875rem;                    /* text-sm */
  font-weight: 500;                       /* font-medium */
  line-height: 1;                         /* leading-none */
  color: hsl(160 30% 18%);                /* foreground */
  display: block;
  margin-bottom: 0.5rem;                  /* space-y-2 gap */
}

/* Disabled label styling */
.wpcf7 input:disabled + label,
.wpcf7 textarea:disabled + label,
.wpcf7 label:has(+ input:disabled),
.wpcf7 label:has(+ textarea:disabled),
.wpcf7 label:has(input:disabled),
.wpcf7 label:has(textarea:disabled) {
  cursor: not-allowed;
  opacity: 0.7;
}

/* CF7 label > span structure */
.wpcf7 label > span:first-child {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  display: block;
  margin-bottom: 0.5rem;
}

.wpcf7 label span.wpcf7-form-control-wrap {
  display: block;
}

/* Required field indicator */
.wpcf7 label .wpcf7-required {
  color: hsl(0 65% 50%);                  /* destructive */
  margin-left: 0.25rem;
}

/* Dark mode labels */
.dark .wpcf7 label {
  color: hsl(36 20% 92%);
}

/* ---------------------------------------------------------------------------
   52.4 FOCUS STATES
   Source: All form components use consistent focus ring
   Tailwind: focus-visible:outline-none focus-visible:ring-2
             focus-visible:ring-ring focus-visible:ring-offset-2
   Ring: 2px width, 2px offset, forest green (#325A4D)
   Offset background: cream (#F5F2EC)
   --------------------------------------------------------------------------- */

/* Text inputs focus - React: focus-visible:ring-2 ring-ring ring-offset-2 */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="text"]:focus-visible,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="email"]:focus-visible,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="tel"]:focus-visible,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="url"]:focus-visible,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="number"]:focus-visible,
.wpcf7 input[type="password"]:focus,
.wpcf7 input[type="password"]:focus-visible,
.wpcf7 input[type="search"]:focus,
.wpcf7 input[type="search"]:focus-visible {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  /* Double shadow: inner = 2px offset gap (cream), outer = 2px ring */
  box-shadow:
    0 0 0 2px hsl(var(--background)),     /* ring-offset: 2px cream gap */
    0 0 0 4px hsl(var(--ring)) !important;  /* ring: 2px at 100% opacity (matches React) */
}

/* Textarea focus - React: focus-visible:ring-2 ring-ring ring-offset-2 */
.wpcf7 textarea:focus,
.wpcf7 textarea:focus-visible {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;  /* 100% opacity */
}

/* Select focus - React: focus-visible:ring-2 ring-ring ring-offset-2 */
.wpcf7 select:focus,
.wpcf7 select:focus-visible {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;  /* 100% opacity */
}

/* File input focus - React: focus-visible:ring-2 ring-ring ring-offset-2 */
.wpcf7 input[type="file"]:focus,
.wpcf7 input[type="file"]:focus-visible {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;  /* 100% opacity */
}

/* ---------------------------------------------------------------------------
   52.5 SUBMIT BUTTON (CATALOG VARIANT)
   Source: src/components/ui/button.tsx - catalog variant
   Tailwind: inline-flex items-center justify-center gap-2 whitespace-nowrap
             text-sm font-medium tracking-wide rounded h-10 px-6 py-2
             bg-primary text-primary-foreground hover:bg-forest-light
             shadow-elegant hover:shadow-hover transition-all duration-300
   --------------------------------------------------------------------------- */

.wpcf7-submit,
.wpcf7 input[type="submit"] {
  /* Layout */
  display: inline-flex;
  align-items: start;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;

  /* Typography */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.025em;

  /* Colors */
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));

  /* Border & Radius */
  border: none;
  border-radius: 0.25rem;                 /* rounded = 4px (default Tailwind, NOT custom) */

  /* Shadow */
  box-shadow: 0 4px 20px -4px rgba(32, 61, 49, 0.08);

  /* Size */
  height: 2.5rem;
  padding: 0.5rem 1.5rem;

  /* Transition */
  transition: background-color 300ms ease, box-shadow 300ms ease;
  cursor: pointer;
}

.wpcf7-submit:hover,
.wpcf7 input[type="submit"]:hover {
  background-color: hsl(var(--forest-light));
  box-shadow: var(--shadow-hover);
}

.wpcf7-submit:focus,
.wpcf7-submit:focus-visible,
.wpcf7 input[type="submit"]:focus,
.wpcf7 input[type="submit"]:focus-visible {
  outline: none;
  box-shadow:
    var(--shadow-elegant),
    0 0 0 2px hsl(var(--primary-foreground)),
    0 0 0 4px hsl(var(--primary));
}

.wpcf7-submit:disabled,
.wpcf7-submit[disabled],
.wpcf7 input[type="submit"]:disabled,
.wpcf7 input[type="submit"][disabled] {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.wpcf7-submit:active,
.wpcf7 input[type="submit"]:active {
  transform: translateY(1px);
}

/* ---------------------------------------------------------------------------
   52.6 CHECKBOX STYLING
   Source: src/components/ui/checkbox.tsx (Radix UI)
   Tailwind: h-4 w-4 shrink-0 rounded-sm border border-primary
             data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground
             focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50
   --------------------------------------------------------------------------- */

.wpcf7 input[type="checkbox"] {
  /* Reset */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Size: 16px */
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  flex-shrink: 0;

  /* Border */
  border: 1px solid hsl(160 30% 28%);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */

  /* Background */
  background-color: transparent;

  /* Positioning */
  position: relative;
  vertical-align: middle;
  margin-top: -2px;

  /* Transition */
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
}

.wpcf7 input[type="checkbox"]:checked {
  background-color: hsl(160 30% 28%);
  border-color: hsl(160 30% 28%);
}

/* Checkmark */
.wpcf7 input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 5px;
  height: 9px;
  border: solid hsl(40 30% 96%);
  border-width: 0 2px 2px 0;
}

.wpcf7 input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring) / 0.2);
}

.wpcf7 input[type="checkbox"]:hover:not(:disabled) {
  border-color: hsl(160 25% 38%);
}

.wpcf7 input[type="checkbox"]:checked:hover:not(:disabled) {
  background-color: hsl(160 25% 38%);
  border-color: hsl(160 25% 38%);
}

.wpcf7 input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Checkbox + label layout */
.wpcf7 .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

.wpcf7 .wpcf7-checkbox .wpcf7-list-item-label,
.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(160 30% 18%);
  flex: 1;
}

.wpcf7 .wpcf7-acceptance {
  margin-top: 0.5rem;
}

.wpcf7 .wpcf7-list-item-label a {
  color: hsl(160 30% 28%);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wpcf7 .wpcf7-list-item-label a:hover {
  color: hsl(160 25% 38%);
}

/* Dark mode checkbox */
.dark .wpcf7 input[type="checkbox"] {
  border-color: hsl(42 55% 58%);
}

.dark .wpcf7 input[type="checkbox"]:checked {
  background-color: hsl(42 55% 58%);
  border-color: hsl(42 55% 58%);
}

.dark .wpcf7 input[type="checkbox"]:checked::after {
  border-color: hsl(160 30% 12%);
}

.dark .wpcf7 input[type="checkbox"]:focus-visible {
  box-shadow:
    0 0 0 2px hsl(160 25% 10%),
    0 0 0 4px hsl(42 55% 58%);
}

.dark .wpcf7 .wpcf7-list-item-label {
  color: hsl(36 20% 92%);
}

.dark .wpcf7 .wpcf7-list-item-label a {
  color: hsl(42 55% 58%);
}

.dark .wpcf7 .wpcf7-list-item-label a:hover {
  color: hsl(42 45% 75%);
}

/* ---------------------------------------------------------------------------
   52.7 FORM GRID LAYOUT
   Source: Contact.tsx, HowToSell.tsx
   Contact: grid sm:grid-cols-2 gap-4 (640px)
   HowToSell: grid md:grid-cols-2 gap-6 (768px)
   --------------------------------------------------------------------------- */

/* Main grid layout */
.mk-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .mk-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Variant: 2-column at sm breakpoint */
.mk-form-grid--sm {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .mk-form-grid--sm {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Form spacing utilities */
.mk-form-spacing,
.mk-form-spacing-6 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mk-form-spacing-4 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mk-form-spacing-2 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* CF7 form grid */
.wpcf7-form.mk-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .wpcf7-form.mk-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Full-width field in grid */
.mk-form-full-width {
  grid-column: 1 / -1;
}

/* Form row helpers */
.mk-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .mk-form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mk-form-row--3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .mk-form-row--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Form field wrapper */
.mk-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Form section title */
.mk-form-section-title {
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
}

/* Form card container */
.mk-form-card {
  background: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  box-shadow: var(--shadow-elegant);
  padding: 2rem;
}

.mk-form-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1.5rem;
}

/* Submit button width variants */
.mk-form-submit {
  width: 100%;
}

@media (min-width: 768px) {
  .mk-form-submit--auto {
    width: auto;
  }
}

/* File upload zone */
.mk-form-upload {
  border: 2px dashed hsl(var(--border));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 2rem;
  text-align: center;
  transition: border-color 0.2s ease;
}

.mk-form-upload:hover {
  border-color: hsl(var(--primary) / 0.5);
}

.mk-form-upload__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: hsl(var(--muted-foreground));
  margin: 0 auto 0.75rem;
}

.mk-form-upload__text {
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
}

.mk-form-upload__hint {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* Uploaded file item */
.mk-form-file-item {
  display: flex;
  align-items: start;
  justify-content: space-between;
  background: hsl(var(--muted) / 0.5);
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  padding: 0.75rem;
}

.mk-form-file-item__name {
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-form-file-item__remove {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  transition: color 0.2s ease;
}

.mk-form-file-item__remove:hover {
  color: hsl(var(--destructive));
}

.mk-form-files {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* ---------------------------------------------------------------------------
   52.8 VALIDATION & RESPONSE STYLING
   Source: src/components/ui/form.tsx, toast.tsx
   FormMessage: text-sm font-medium text-destructive
   Toast success: green, Toast error: destructive
   --------------------------------------------------------------------------- */

/* Base response output */
.wpcf7-response-output {
  padding: 1rem;
  border-radius: calc(var(--radius) + 2px);
  font-size: 0.875rem;
  font-family: var(--font-body);
  line-height: 1.5;
  margin-top: 1.5rem;
  transition: color 200ms ease, background-color 200ms ease;
}

/* Success state */
.wpcf7-form.sent .wpcf7-response-output {
  border: 1px solid hsl(142 71% 45%);
  background-color: hsl(142 76% 95%);
  color: hsl(142 61% 20%);
}

/* Error states */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  border: 1px solid hsl(var(--destructive));
  background-color: hsl(var(--destructive) / 0.08);
  color: hsl(0 65% 40%);
}

/* Aborted state (warning) */
.wpcf7-form.aborted .wpcf7-response-output {
  border: 1px solid hsl(38 92% 50%);
  background-color: hsl(38 92% 95%);
  color: hsl(38 92% 25%);
}

/* Field-level validation error */
.wpcf7-not-valid-tip {
  color: hsl(var(--destructive));
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-body);
  margin-top: 0.5rem;
  display: block;
}

/* Invalid input border */
.wpcf7-not-valid {
  border-color: hsl(var(--destructive)) !important;
}

/* Invalid input focus (red ring) */
.wpcf7-not-valid:focus {
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--destructive) / 0.5) !important;
}

/* Submitting state */
.wpcf7-form.submitting .wpcf7-response-output {
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* Spinner */
.wpcf7-spinner {
  display: none;
  vertical-align: middle;
  margin-left: 0.5rem;
}

.wpcf7-form.submitting .wpcf7-spinner {
  display: inline-block;
}

/* Hide initial response */
.wpcf7-form.init .wpcf7-response-output {
  display: none;
}

/* Label error state (with JS class) */
.mk-form-field.has-error label {
  color: hsl(var(--destructive));
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wpcf7-response-output {
    transition: none;
  }
}

/* ==================================================================
   54. PLENERAI PAGE
   1:1 Parity with React - Tasks 10.5-10.9
   ================================================================== */

/* Task 10.5: About section layout */
.mk-plenerai-about {
  padding: 4rem 0;
}

@media (min-width: 768px) {
  .mk-plenerai-about {
    padding: 6rem 0;
  }
}

.mk-plenerai-about .wp-block-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 56rem; /* max-w-4xl */
  margin: 0 auto;
}

@media (min-width: 768px) {
  .mk-plenerai-about .wp-block-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mk-plenerai-about h2 {
  font-family: var(--wp--preset--font-family--playfair-display);
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .mk-plenerai-about h2 {
    font-size: 2.25rem;
  }
}

.mk-plenerai-about p {
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
  margin-bottom: 1rem;
}

/* Task 10.6: Image with decorative offset */
.mk-plenerai-about__image {
  position: relative;
}

.mk-plenerai-about__image::before {
  content: '';
  position: absolute;
  top: -1rem;
  left: -1rem;
  width: 100%;
  height: 100%;
  background: hsl(var(--primary) / 0.1);
  border-radius: 1rem;
  z-index: -1;
}

.mk-plenerai-about__image img {
  position: relative;
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  width: 100%;
  height: 20rem;
  object-fit: cover;
}

/* Task 10.7: Icon boxes */
.mk-plenerai-icon-box {
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem; /* rounded-xl = 8px (CUSTOM) */
  background: hsl(var(--primary-foreground) / 0.1);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: start;
  justify-content: center;
  flex-shrink: 0;
}

.mk-plenerai-icon-box svg {
  width: 2rem;
  height: 2rem;
  color: hsl(var(--primary-foreground));
}

/* Task 10.9: Hero gradient override */
.mk-plenerai-hero .wp-block-cover__background,
.mk-plenerai .wp-block-cover__background {
  background: linear-gradient(
    to bottom,
    hsl(var(--primary) / 0.8) 0%,
    hsl(var(--primary) / 0.6) 50%,
    hsl(var(--background)) 100%
  ) !important;
  opacity: 1 !important;
}

/* Event info card enhancements */
.mk-plenerai__info {
  position: relative;
  z-index: 10;
}

/* Participant cards base (needs border for hover effect) */
.mk-plenerai__participant,
.mk-plenerai__info .wp-block-group {
  border: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}

/* Participant cards hover - PL-9 fix: border effect */
.mk-plenerai__participant:hover,
.mk-plenerai__info .wp-block-group:hover {
  background: hsl(var(--muted) / 0.5);
  border-color: hsl(var(--primary) / 0.2) !important;
}

/* Gallery section background */
.mk-plenerai__gallery {
  background: hsl(var(--muted) / 0.3);
}

/* ==================================================================
   55. GIFT VOUCHER PAGE
   Amount selector buttons and price overlay matching React GiftVoucher
   ================================================================== */

/* Task 4.8: Base button styles */
.mk-voucher-btn {
  display: inline-flex;
  align-items: start;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  font-size: 1.125rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color 300ms ease, box-shadow 300ms ease;
  text-decoration: none;
  border: none;
}

/* Task 4.10: Unselected button state (on primary bg) */
.mk-voucher-btn:not(.mk-voucher-btn--selected) {
  background: hsl(var(--primary-foreground) / 0.1);
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--primary-foreground) / 0.2);
}

.mk-voucher-btn:not(.mk-voucher-btn--selected):hover {
  background: hsl(var(--primary-foreground) / 0.2);
}

/* Task 4.9: Selected button state */
.mk-voucher-btn--selected,
.mk-voucher-btn.mk-voucher-btn--selected {
  background: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  border-color: hsl(var(--gold)) !important;
}

/* Task 4.11: Price overlay on voucher preview */
.mk-voucher__preview {
  position: relative;
}

.mk-voucher__price-overlay {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 0.5rem 1rem;
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  font-weight: 700;
  font-size: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* Custom amount input on primary background */
.mk-voucher-custom-input {
  width: 8rem;
  background: hsl(var(--primary-foreground) / 0.1);
  border: 1px solid hsl(var(--primary-foreground) / 0.2);
  color: hsl(var(--primary-foreground));
  padding: 0.75rem 1rem;
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  font-size: 1rem;
  transition: color 200ms ease, background-color 200ms ease;
}

.mk-voucher-custom-input::placeholder {
  color: hsl(var(--primary-foreground) / 0.5);
}

.mk-voucher-custom-input:focus {
  outline: none;
  border-color: hsl(var(--gold));
}

.mk-voucher-input--active {
  box-shadow: 0 0 0 2px hsl(var(--gold));
}

/* Order button - gold variant */
.mk-voucher-order-btn {
  display: inline-flex;
  align-items: start;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 2rem;
  background: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  border: none;
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

.mk-voucher-order-btn:hover:not(:disabled) {
  background: hsl(var(--gold-light));
  box-shadow: var(--shadow-hover);
}

.mk-voucher-order-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Amount buttons container */
.mk-voucher__amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* ==================================================================
   55B. GIFT VOUCHER PARITY FIXES (FIX-14)
   React reference: src/pages/GiftVoucher.tsx
   ================================================================== */

/* FIX-14.1: H1 font-weight - React uses font-bold = 700 */
.mk-voucher h1,
.page-id-19 h1,
body.page-id-19 .wp-block-post-title,
body.page-id-19 h1.wp-block-heading {
  font-weight: 700 !important;
}

/* FIX-14.2: Amount button border-radius - React uses rounded-lg = 0.5rem */
.mk-voucher-btn,
.mk-voucher [class*="amount"] button,
.mk-voucher-amount-btn {
  border-radius: 0.5rem !important;
}

/* FIX-14.3: Price overlay border-radius - React uses rounded-lg = 0.5rem */
.mk-voucher__price-overlay {
  border-radius: 0.5rem !important;
}

/* FIX-14.4: Feature cards - React uses bg-card rounded-xl border */
.mk-voucher .mk-card,
.mk-voucher [class*="feature-card"],
.page-id-19 .mk-card,
.page-id-19 .wp-block-group[class*="feature"] {
  background: hsl(var(--card)) !important;
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
  border: 1px solid hsl(var(--border)) !important;
}

/* FIX-14.5: CTA button height - React uses h-14 = 3.5rem */
.mk-voucher .mk-btn-gold,
.mk-voucher [class*="cta"] .wp-block-button__link,
.mk-voucher-order-btn,
.page-id-19 .mk-btn-gold,
.page-id-19 .wp-block-button.is-style-gold .wp-block-button__link {
  height: 3.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ==================================================================
   56. AUTH PAGE TABS
   ShadCN-style tabs for WooCommerce login/register forms
   Matches React Auth.tsx Tabs component
   ================================================================== */

/* Task 5.6: Tab list container */
.mk-auth-tabs__list {
  display: flex;
  width: 100%;
  background: hsl(var(--muted) / 0.5);
  border-radius: 0.5rem; /* rounded-xl = 8px (CUSTOM) */
  padding: 0.25rem;
  margin-bottom: 2rem;
}

/* Task 5.7: Tab trigger buttons */
.mk-auth-tabs__trigger {
  flex: 1;
  display: inline-flex;
  align-items: start;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
  white-space: nowrap;
}

.mk-auth-tabs__trigger:hover:not(.mk-auth-tabs__trigger--active) {
  color: hsl(var(--foreground));
}

/* Note: Tasks 5.8-5.10 CSS is in Section 41 (lines 4391-4428) for proper cascade */

/* ==================================================================
   57. POST-AUCTION FILTER ROW
   Matches React PostAuction.tsx filter toolbar
   ================================================================== */

/* Task 6.6: Filter container */
.mk-poaukcionine-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 1rem;
  padding: 1rem;
  background: hsl(var(--muted) / 0.3);
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  margin-bottom: 1.5rem;
}

/* Responsive: stack on mobile */
@media (max-width: 640px) {
  .mk-poaukcionine-filters {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Task 6.7: Filter select dropdowns */
.mk-poaukcionine-select {
  min-width: 180px;
  height: 2.5rem;
  padding: 0 2.5rem 0 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-family: var(--font-body);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23577066' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.mk-poaukcionine-select:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}

.mk-poaukcionine-select:hover {
  border-color: hsl(var(--primary) / 0.5);
}

/* Task 6.8: Result count */
.mk-poaukcionine-results {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-left: auto;
}

.mk-poaukcionine-results strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

/* PA-5: Result count inline in filter row */
.mk-poaukcionine-count {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-left: auto;
  white-space: nowrap;
}

/* View toggle buttons */
.mk-view-toggle {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

.mk-view-toggle button {
  padding: 0.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
}

.mk-view-toggle button:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.mk-view-toggle button.mk-view-toggle--active {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* ==================================================================
   58. CATALOG TOOLBAR BUTTONS
   PDF, OneBid, filters badge, clear filters, Buy Now on cards
   ================================================================== */

/* Task 7.7: PDF and OneBid buttons */
.mk-catalog-pdf,
.mk-catalog-onebid {
  display: inline-flex;
  align-items: start;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms ease, background-color 200ms ease;
}

.mk-catalog-pdf:hover,
.mk-catalog-onebid:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.mk-catalog-pdf svg,
.mk-catalog-onebid svg {
  flex-shrink: 0;
}

/* Task 7.8: Active filters badge */
.mk-active-filters-badge {
  display: inline-flex;
  align-items: start;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.75rem;
  font-weight: 600;
}

/* Clear filters button */
.mk-clear-filters {
  display: inline-flex;
  align-items: start;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 200ms;
}

.mk-clear-filters:hover {
  color: hsl(var(--destructive));
}

/* Buy Now button on cards (Task 7.6) */
.mk-buy-now-btn {
  display: inline-flex;
  align-items: start;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms ease, background-color 200ms ease;
  margin-top: 0.5rem;
}

.mk-buy-now-btn:hover {
  border-color: hsl(var(--gold));
  color: hsl(var(--gold));
}

.mk-buy-now-btn svg {
  flex-shrink: 0;
}

/* ==================================================================
   59. SINGLE PRODUCT PRICING CARD
   Matches React ArtworkDetail pricing component (lines 243-306)
   ================================================================== */

.mk-pricing-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-card);
}

.mk-pricing-card__row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: hsl(var(--muted) / 0.3);
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  border-bottom: none;
  border-bottom: 1px solid hsl(var(--border));
}

.mk-pricing-card__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mk-pricing-card__row:first-child {
  padding-top: 0;
}

/* Highlight row - current bid / buy now */
.mk-pricing-card__row--highlight {
  background: hsl(var(--primary) / 0.05);
  border-left: 4px solid hsl(var(--primary));
  margin: 0.5rem -1.5rem;
  padding: 0.75rem 1.5rem 0.75rem calc(1.5rem - 4px);
  border-bottom: none;
}

.mk-pricing-card__row--highlight + .mk-pricing-card__row--highlight {
  margin-top: -0.5rem;
}

/* Labels */
.mk-pricing-card__label {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: start;
  gap: 0.5rem;
}

/* Values */
.mk-pricing-card__value {
  font-family: var(--font-display);
  font-weight: 600;
  color: hsl(var(--foreground));
}

.mk-pricing-card__value--gold {
  color: hsl(var(--gold));
}

.mk-pricing-card__value--primary {
  color: hsl(var(--primary));
}

.mk-pricing-card__value--large {
  font-size: 1.5rem;
  font-weight: 700;
}

/* Icons in labels */
.mk-pricing-card__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.mk-pricing-card__icon--green {
  stroke: hsl(var(--green-500));
}

.mk-pricing-card__icon--gold {
  stroke: hsl(var(--gold));
}

/* Sold and post-auction centered states */
.mk-pricing-card--sold,
.mk-pricing-card--post-auction {
  text-align: center;
  padding: 1rem 0;
}

.mk-pricing-card__estimate {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.5rem;
}

.mk-pricing-card__old-price {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  text-decoration: line-through;
  margin-top: 0.25rem;
}

/* ------------------------------------------------------------------
   60.10 BUY NOW BUTTON STYLING (Task 3.10)
   Gold variant for auction "Buy Now" action
   ------------------------------------------------------------------ */

/* Buy Now button - gold variant */
.product-type-auction .single_add_to_cart_button,
.mk-buy-now-btn {
  background-color: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  border: none !important;
  font-weight: 600;
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

.product-type-auction .single_add_to_cart_button:hover,
.mk-buy-now-btn:hover {
  background-color: hsl(var(--gold-light)) !important;
  box-shadow: var(--shadow-hover);
}

/* ------------------------------------------------------------------
   60.11 BID FORM STYLING (Task 3.11)
   Styled bid form with title and quick bid buttons
   ------------------------------------------------------------------ */

/* Bid form styling */
.mk-auction-bid-form {
  background: hsl(var(--primary) / 0.05);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.mk-auction-bid-form::before {
  content: "Pateikti pasiūlymą";
  display: flex;
  align-items: start;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

/* Alternative: if using WC Simple Auctions bid form */
.auction-form,
.wsa-bid-form {
  background: hsl(var(--primary) / 0.05);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.auction-form h3,
.wsa-bid-form-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
  display: flex;
  align-items: start;
  gap: 0.5rem;
}

/* Quick bid buttons - SP10-1: 5-column grid with label */
.mk-quick-bids {
  margin-bottom: 1rem;
}

.mk-quick-bids__label {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
  display: block;
}

.mk-quick-bids__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.mk-quick-bid-btn {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: transparent;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: all 200ms ease;
}

.mk-quick-bid-btn:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.mk-quick-bid-btn.selected {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

/* Legacy selector for backwards compatibility */
.mk-quick-bid-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mk-quick-bid-buttons button {
  padding: 0.5rem;
  font-size: 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: transparent;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
}

.mk-quick-bid-buttons button:hover,
.mk-quick-bid-buttons button.selected {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

/* ==================================================================
   60. INFORMATION HUB
   Hero, tabs, and content styling for /informacija
   ================================================================== */

/* Task 8.5: Info hero */
.mk-info-hero {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground));
  padding: 4rem 0;
  text-align: center;
}

.mk-info-hero__title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: hsl(var(--primary-foreground)) !important;
}

.mk-info-hero__subtitle {
  font-size: 1.125rem;
  opacity: 0.9;
  color: hsl(var(--primary-foreground)) !important;
}

/* Task 8.6: Info tabs */
.mk-info-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  background: hsl(var(--muted) / 0.5);
  border-radius: 0.5rem; /* rounded-xl = 8px (CUSTOM) */
  margin-bottom: 2rem;
}

.mk-info-tabs__trigger {
  display: inline-flex;
  align-items: start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
}

.mk-info-tabs__trigger:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--background) / 0.5);
}

.mk-info-tabs__trigger--active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.mk-info-tabs__content {
  display: none;
}

.mk-info-tabs__content--active {
  display: block;
  animation: mk-fade-in 0.2s ease-out;
}

/* ------------------------------------------------------------------
   61.1 FAQ ACCORDION
   Matches React Information.tsx FAQ component with collapsible items
   ------------------------------------------------------------------ */

/* FAQ container */
.mk-faq-accordion {
  max-width: 800px;
  margin: 0 auto;
}

.mk-faq-item {
  border-radius: 0;
}

.mk-faq-item:last-child .mk-faq-question {
  border-bottom: none;
}

/* Task 8.9: Chevron rotation */
.mk-faq-chevron {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.mk-faq-item--open .mk-faq-chevron {
  transform: rotate(180deg);
}

/* Task 8.10: FAQ question */
.mk-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  padding: 1rem 0;
  border: none;
  border-bottom: 1px solid hsl(var(--border));
  background: transparent;
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 200ms;
}

.mk-faq-question:hover {
  color: hsl(var(--primary));
}

.mk-faq-question__text {
  flex: 1;
  padding-right: 1rem;
}

/* Task 8.11: FAQ answer with animation */
.mk-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0;
}

.mk-faq-item--open .mk-faq-answer {
  max-height: 500px;
  padding: 1rem 0;
}

.mk-faq-answer__content {
  color: hsl(var(--muted-foreground));
  line-height: 1.7;
}

.mk-faq-answer__content p {
  margin: 0;
}

.mk-faq-answer__content p + p {
  margin-top: 0.75rem;
}

/* ==================================================================
   61. RULES PAGES
   Hero and card styling for /aukciono-taisykles and /galerijos-taisykles
   ================================================================== */

/* Task 9.6: Rules hero */
.mk-rules-hero {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground));
  padding: 4rem 0;
  text-align: center;
}

.mk-rules-hero .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.mk-rules-hero__title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: hsl(var(--primary-foreground)) !important;
}

.mk-rules-hero__subtitle {
  font-size: 1.125rem;
  opacity: 0.9;
  color: hsl(var(--primary-foreground)) !important;
  margin-bottom: 0;
}

/* Task 9.7: Rules hero icon + title row (flex row layout matching React) */
.mk-rules-hero__title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.mk-rules-hero__title-row .mk-rules-hero__icon,
.mk-rules-hero__title-row svg.mk-rules-hero__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  color: hsl(var(--primary-foreground));
  stroke: currentColor;
}

.mk-rules-hero__title-row .mk-rules-hero__title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0;
  color: hsl(var(--primary-foreground)) !important;
}

@media (min-width: 768px) {
  .mk-rules-hero__title-row .mk-rules-hero__title {
    font-size: 3rem;
  }
}

/* Legacy icon styles (for non-row layout) */
.mk-rules-hero__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 1.5rem;
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: start;
  justify-content: center;
}

.mk-rules-hero__icon svg {
  width: 40px;
  height: 40px;
  stroke: currentColor;
}

/* Task 9.8: Rules card container */
.mk-rules-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem; /* rounded-xl = 8px (CUSTOM) */
  padding: 2rem;
  margin-bottom: 2rem;
}

.mk-rules-card:last-child {
  margin-bottom: 0;
}

/* Task 9.9: Rules section divider */
.mk-rules-divider {
  border-bottom: 1px solid hsl(var(--border));
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

/* No divider on last section */
.mk-rules-card:last-child .mk-rules-divider,
.mk-rules-divider:last-child {
  display: none;
}

/* Rules content wrapper */
.mk-rules-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

/* Section spacing */
.mk-rules-section {
  margin-bottom: 2rem;
}

.mk-rules-section:last-child {
  margin-bottom: 0;
}

/* Paragraph styling within rules */
.mk-rules-card p,
.mk-rules-card__content {
  color: hsl(var(--muted-foreground));
  line-height: 1.7;
  margin-bottom: 1rem;
}

.mk-rules-card p:last-child {
  margin-bottom: 0;
}

/* Task 9.10: H3 titles within rules */
.mk-rules-card h3,
.mk-rules-card__title,
.mk-rules-card .wp-block-heading {
  color: hsl(var(--primary));
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  margin-top: 0;
}

/* Numbered section titles */
.mk-rules-card h3:first-child,
.mk-rules-card__title:first-child {
  margin-top: 0;
}

/* Subsequent H3s in same card */
.mk-rules-card h3 + p,
.mk-rules-card__title + p {
  margin-top: 0;
}

/* H4 subtitles if any */
.mk-rules-card h4 {
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
}

/* Bold/strong text */
.mk-rules-card strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

/* Links within rules */
.mk-rules-card a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 200ms;
}

.mk-rules-card a:hover {
  color: hsl(var(--gold));
}

/* Lists within rules */
.mk-rules-card ul,
.mk-rules-card ol {
  color: hsl(var(--muted-foreground));
  line-height: 1.7;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.mk-rules-card li {
  margin-bottom: 0.5rem;
}

/* ==================================================================
   62. HOW TO SELL PAGE
   Steps grid, form layout, and file upload styling
   ================================================================== */

/* Sell page 4-column steps */
.mk-sell-steps {
  padding: 3rem 0;
}

.mk-sell-steps .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .mk-sell-steps .wp-block-columns {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Gold number badge for sell steps */
.mk-sell-steps .mk-step-number {
  background: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: start;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* Sell form 2-column grid */
.mk-sell-form .wpcf7-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .mk-sell-form .wpcf7-form {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mk-sell-form .wpcf7-form > p:last-child {
  grid-column: 1 / -1; /* Submit button spans full width */
}

/* File upload styling */
.mk-sell-form .wpcf7-file {
  display: block;
  width: 100%;
  padding: 2rem;
  border: 2px dashed hsl(var(--border));
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.mk-sell-form .wpcf7-file:hover {
  border-color: hsl(var(--primary));
  background: hsl(var(--muted) / 0.3);
}

/* ==========================================================================
   63. STEPS NUMBERED 4-COLUMN (How to Sell)
   ========================================================================== */

/* Container */
.mk-sell-steps {
  width: 100%;
}

/* 4-column grid on desktop, 2 columns on tablet, 1 column on mobile */
.mk-sell-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .mk-sell-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .mk-sell-steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Individual step */
.mk-sell-step {
  position: relative;
  background: hsl(var(--card));
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  transition: box-shadow 300ms ease;
}

.mk-sell-step:hover {
  box-shadow: var(--shadow-hover);
}

/* Number badge — GOLD background, positioned top-left */
.mk-sell-step__badge {
  position: absolute;
  top: -0.75rem;
  left: -0.75rem;
  width: 2rem;
  height: 2rem;
  background: hsl(var(--gold));
  color: hsl(var(--foreground));
  border-radius: 50%;
  display: flex;
  align-items: start;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: var(--shadow-card);
  z-index: 10;
}

.mk-sell-step__number {
  margin: 0 !important;
  line-height: 1;
  color: hsl(var(--foreground)) !important;
}

/* Icon */
.mk-sell-step__icon {
  margin-bottom: 1rem;
  color: hsl(var(--primary));
}

.mk-sell-step__icon svg {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  stroke: currentColor;
}

/* Step title */
.mk-sell-step__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

/* Step description */
.mk-sell-step__desc {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .mk-sell-step {
    padding: 1.25rem;
  }

  .mk-sell-step__icon svg {
    width: 2rem;
    height: 2rem;
  }

  .mk-sell-step__title {
    font-size: 1rem;
  }
}

/* ==========================================================================
   64. MINOR FIXES (Phase 13)
   ========================================================================== */

/* ------------------------------------------------------------------
   404 Page Link (G34)
   ------------------------------------------------------------------ */
.mk-404__link {
  text-decoration: underline;
  text-underline-offset: 4px;
  color: hsl(var(--primary));
  font-weight: 500;
  transition: opacity 0.2s;
}

.mk-404__link:hover {
  opacity: 0.9;
}

/* ------------------------------------------------------------------
   WooCommerce Mini Cart Badge (G35)
   ------------------------------------------------------------------ */
.wc-block-mini-cart__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.25rem;
  height: 1.25rem;
  background: hsl(var(--destructive));
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 50%;
  display: flex;
  align-items: start;
  justify-content: center;
}

/* ------------------------------------------------------------------
   Header Search Responsive (G37)
   ------------------------------------------------------------------ */
.mk-header-search input {
  width: 12rem;
  transition: width 0.2s;
}

@media (min-width: 1024px) {
  .mk-header-search input {
    width: 16rem;
  }
}

/* ==================================================================
   65. USER DROPDOWN MENU
   Task 13.6: Authenticated user dropdown styles
   ================================================================== */

.mk-user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  min-width: 14rem;
  margin-top: 0.25rem; /* P37: sideOffset={4} = 4px */
  padding: 0.25rem; /* P37: p-1 = 4px */
  background: var(--popover, hsl(40 30% 96%));
  border: 1px solid var(--border);
  border-radius: 0.125rem; /* P37: rounded-md = 2px */
  box-shadow: var(--shadow-elegant);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

.mk-header__account:hover .mk-user-dropdown,
.mk-header__account:focus-within .mk-user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mk-user-dropdown__item {
  display: flex;
  align-items: center; /* P37: items-center */
  gap: 0.75rem;
  width: 100%;
  padding: 0.375rem 0.5rem; /* P37: py-1.5 px-2 */
  font-size: 0.875rem;
  color: var(--foreground);
  text-decoration: none;
  border-radius: 0.0625rem; /* P37: rounded-sm = calc(var(--radius) - 4px) = 1px */
  transition: background 0.15s;
  cursor: default; /* P37: cursor-default */
  user-select: none; /* P37: select-none */
}

.mk-user-dropdown__item:hover {
  background: var(--muted);
}

.mk-user-dropdown__item svg {
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
}

.mk-user-dropdown__divider {
  height: 1px;
  margin: 0.25rem -0.25rem; /* P37: my-1 -mx-1 */
  background: hsl(36 20% 90%); /* P37: bg-muted */
}

.mk-user-dropdown__item--danger {
  color: var(--destructive);
}
.mk-user-dropdown__item--danger svg {
  color: var(--destructive);
}

/* ==========================================================================
   REACT vs WORDPRESS PARITY CSS FIXES
   Generated: 2026-03-20
   Total Critical Issues: 80
   ========================================================================== */

/* ==========================================================================
   SECTION 53: PARDAVIMAS/PIRKIMAS - REMOVE HERO BACKGROUNDS
   ========================================================================== */

/* Pardavimas (page ID 17) - Remove green hero */
.page-id-17 .mk-page-hero {
  background-color: transparent !important;
  background: none !important;
  padding-bottom: 0 !important;
}

.page-id-17 .mk-page-hero h1 {
  color: hsl(var(--foreground)) !important;
  font-size: clamp(1.875rem, 4vw, 2.25rem) !important;
}

.page-id-17 .mk-page-hero p {
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 3rem !important;
}

/* Pirkimas (page ID - check actual ID) */
.page-template-pirkimas .mk-page-hero,
body[class*="pirkimas"] .mk-page-hero {
  background-color: transparent !important;
}

body[class*="pirkimas"] .mk-page-hero h1 {
  color: hsl(var(--foreground)) !important;
}

/* ==========================================================================
   SECTION 54: STEP CARDS - REMOVE BORDERS, FIX BADGE POSITION
   ========================================================================== */

.mk-sell-step-card {
  border: none !important;
  border-width: 0 !important;
  box-shadow: var(--shadow-card) !important;
}

.mk-sell-step-card:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* Number badge position fix: -left-3 not left:1rem */
.mk-sell-step-number {
  position: absolute;
  top: -0.75rem !important;
  left: -0.75rem !important;
  font-size: 0.875rem !important;
}

/* Icon size fix: 40px not 28px */
.mk-sell-step-icon svg {
  width: 2.5rem !important;
  height: 2.5rem !important;
}

/* ==========================================================================
   SECTION 55: CATALOG - SIDEBAR & PRODUCT CARDS
   ========================================================================== */

/* Categories sidebar - primary (forest green) background
   React: bg-primary text-primary-foreground rounded-sm p-6
   Must override WordPress has-cream-light-background-color utility class */
.mk-catalog__sidebar .mk-filter-group:first-child,
.mk-catalog__sidebar .mk-filter-group:first-child.has-cream-light-background-color,
.mk-catalog__sidebar .mk-filter-group:first-child.has-background {
  background-color: hsl(var(--primary)) !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: none !important;
  border-color: transparent !important;
  border-radius: 0.5rem !important; /* P6 parity fix: 8px for category container */
}

/* Heading and links in categories sidebar - cream-light text */
.mk-catalog__sidebar .mk-filter-group:first-child h2,
.mk-catalog__sidebar .mk-filter-group:first-child .wp-block-heading,
.mk-catalog__sidebar .mk-filter-group:first-child a,
.mk-catalog__sidebar .mk-filter-group:first-child li {
  color: hsl(var(--primary-foreground)) !important;
}

/* Category links - 80% opacity by default, gold on hover/active */
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item a,
.mk-catalog__sidebar .mk-filter-group:first-child .wp-block-categories li a {
  color: hsl(var(--primary-foreground) / 0.8) !important;
  transition: color 200ms ease;
}

.mk-catalog__sidebar .mk-filter-group:first-child a:hover,
.mk-catalog__sidebar .mk-filter-group:first-child .current-cat a,
.mk-catalog__sidebar .mk-filter-group:first-child .current-cat > a {
  color: hsl(var(--gold)) !important;
}

/* Category count badges - subtle appearance */
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item__count,
.mk-catalog__sidebar .mk-filter-group:first-child .count {
  color: hsl(var(--primary-foreground) / 0.5) !important;
  font-size: 0.75rem;
}

/* Category filter interactive behavior - K9-1 fix */
.mk-catalog-filters__category,
.mk-catalog__sidebar .wc-block-product-categories-list-item {
  padding: 0.5rem 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mk-catalog-filters__category:hover,
.mk-catalog-filters__category.is-active,
.mk-catalog__sidebar .wc-block-product-categories-list-item:hover a,
.mk-catalog__sidebar .wc-block-product-categories-list-item.is-active a,
.mk-catalog__sidebar .wc-block-product-categories-list-item.current-cat a {
  color: hsl(var(--gold)) !important;
}

/* Filter group shadows - all filter boxes get shadow-card */
.mk-filter-group {
  box-shadow: var(--shadow-card);
}

/* Product card shadows - add WC block selectors */
.mk-product-card,
.wc-block-product,
.wc-block-grid__product {
  box-shadow: var(--shadow-card);
  transition: box-shadow 300ms ease, transform 300ms ease;
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
  overflow: hidden;
  background: hsl(var(--card));
}

.mk-product-card:hover,
.wc-block-product:hover,
.wc-block-grid__product:hover {
  box-shadow: var(--shadow-hover);
}

/* Product card images */
.mk-product-card__image,
.wc-block-grid__product-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
}

.mk-product-card__image img,
.wc-block-grid__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.mk-product-card:hover .mk-product-card__image img,
.wc-block-grid__product:hover .wc-block-grid__product-image img {
  transform: scale(1.05);
}

/* ==========================================================================
   SECTION 55A: CATALOG SIDEBAR - STICKY POSITIONING
   React reference: Catalog.tsx - sidebar is sticky with top offset for header
   ========================================================================== */

/* Make sidebar sticky so it stays visible while scrolling */
.mk-catalog__sidebar,
.wc-block-product-filters {
  position: sticky !important;
  top: 6rem !important; /* Header height (5rem) + 1rem gap */
  max-height: calc(100vh - 7rem) !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
}

/* Custom scrollbar for webkit browsers */
.mk-catalog__sidebar::-webkit-scrollbar,
.wc-block-product-filters::-webkit-scrollbar {
  width: 6px;
}

.mk-catalog__sidebar::-webkit-scrollbar-track,
.wc-block-product-filters::-webkit-scrollbar-track {
  background: transparent;
}

.mk-catalog__sidebar::-webkit-scrollbar-thumb,
.wc-block-product-filters::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 3px;
}

.mk-catalog__sidebar::-webkit-scrollbar-thumb:hover,
.wc-block-product-filters::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Ensure parent container allows sticky positioning */
.mk-catalog__layout,
.wc-block-product-filters-container {
  align-items: flex-start !important;
}

/* Admin bar offset (WP admin bar adds 32px at top when logged in) */
body.admin-bar .mk-catalog__sidebar,
body.admin-bar .wc-block-product-filters {
  top: calc(6rem + 32px) !important;
  max-height: calc(100vh - 7rem - 32px) !important;
}

/* ==========================================================================
   SECTION 56: SINGLE PRODUCT - COLUMN RATIO & TRUST BADGES
   ========================================================================== */

/* Column ratio fix: 50/50 not 60/40 */
.mk-product-detail__gallery {
  flex-basis: 50% !important;
}

.mk-product-detail__info {
  flex-basis: 50% !important;
}

/* Image gallery styling */
.woocommerce-product-gallery {
  border-radius: var(--radius);
  box-shadow: var(--shadow-elegant);
  overflow: hidden;
}

/* Trust badge fixes */
.mk-trust-badges__item {
  background-color: hsl(var(--muted) / 0.3) !important;
}

.mk-trust-badges__icon svg {
  width: 24px !important;
  height: 24px !important;
}

.mk-trust-badges__item p {
  font-size: 0.75rem !important;
}

/* Artwork meta card wrapper */
.mk-artwork-meta {
  background-color: hsl(var(--secondary) / 0.3);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* 2-column grid layout for artwork metadata (SP10-5) */
.mk-artwork-meta__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  font-size: 0.875rem;
  margin-top: 1rem;
}

.mk-artwork-meta__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mk-artwork-meta__label {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mk-artwork-meta__value {
  color: hsl(var(--foreground));
  font-weight: 500;
}

/* Responsive: stack on mobile */
@media (max-width: 480px) {
  .mk-artwork-meta__grid {
    grid-template-columns: 1fr;
  }
}

/* Pricing card shadow */
.mk-product-pricing {
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   SECTION 57: GALLERY - FILTER BUTTON SHAPE
   ========================================================================== */

/* Filter buttons: rounded not pill */
.mk-gallery-cat-btn {
  border-radius: 0.125rem !important;  /* rounded-md = 2px (React custom config) */
}

.mk-gallery-filter .wp-block-button__link {
  border-radius: 0.125rem !important;  /* rounded-md = 2px (React custom config) */
}

/* ==========================================================================
   SECTION 58: POAUKCIONINE - FILTERS & BADGES
   ========================================================================== */

/* Deadline badge */
.mk-deadline-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  padding: 0.25rem 0.5rem;
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius);
}

/* Filters row */
.mk-post-auction-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: hsl(var(--muted) / 0.3);
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
}

/* Banner layout fix */
.mk-post-auction-banner {
  display: flex !important;
  align-items: flex-start;
  gap: 0.5rem;
  background: hsl(var(--gold) / 0.1) !important;
  border: 1px solid hsl(var(--gold) / 0.2);
}

/* ==========================================================================
   SECTION 59: HEADER - CART BADGE & DROPDOWNS
   ========================================================================== */

/* Cart badge: red not green */
.wc-block-mini-cart__badge {
  background: hsl(var(--destructive)) !important;
  color: hsl(var(--destructive-foreground)) !important;
}

/* Search bar responsive width - P4-02: Match React w-48 lg:w-64 (12rem/16rem) */
.mk-header__search,
.mk-header .wp-block-search__input {
  width: 12rem !important; /* 192px */
}

@media (min-width: 1024px) {
  .mk-header__search,
  .mk-header .wp-block-search__input {
    width: 16rem !important; /* 256px */
  }
}

/* Dropdown animation - 1:1 React parity (FIX-16)
   React: animate-in fade-in-0 zoom-in-95 slide-in-from-top-2
   sideOffset={4} = 4px = 0.25rem margin-top */
.mk-header .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation__submenu-container {
  animation: mk-dropdown-in 150ms ease-out forwards;
  transform-origin: top center;
  margin-top: 0.25rem !important; /* sideOffset={4} */
  border-radius: 0.125rem; /* rounded-md = calc(var(--radius) - 2px) = 2px */
}

@keyframes mk-dropdown-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-0.5rem); /* zoom-in-95 + slide-in-from-top-2 */
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Dropdown item hover */
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Account icon hover */
.mk-header__account-link:hover {
  background-color: hsl(var(--accent));
}

/* ==========================================================================
   SECTION 60: FOOTER - SOCIAL ICONS & LOGO
   ========================================================================== */

/* Social icon size: 20px not 24px - must use min/max-width/height to override inline SVG attributes */
.mk-footer__social.wp-block-social-links .wp-social-link svg,
.mk-footer__social .wp-social-link svg,
.mk-footer .wp-social-link svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
}

/* Also constrain the link container for consistent sizing */
.mk-footer__social .wp-social-link a,
.mk-footer__social.wp-block-social-links .wp-social-link a {
  display: flex;
  align-items: start;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
}

/* Logo margin */
.mk-footer__brand .wp-block-site-logo img {
  margin-bottom: 1.5rem;
}

/* Voucher link */
.mk-footer__voucher a[href*="dovanu-kuponas"] {
  text-underline-offset: 4px;
}

.mk-footer__voucher a[href*="dovanu-kuponas"]:hover {
  opacity: 0.8;
}

/* Footer text opacity - React uses text-primary-foreground/80 (80% opacity) */
.mk-footer p,
.mk-footer .wp-block-paragraph {
  color: hsl(var(--primary-foreground) / 0.8) !important;
}

/* Footer links also use 80% opacity, but full opacity on hover */
.mk-footer a:not(.mk-footer__voucher a) {
  color: hsl(var(--primary-foreground) / 0.8);
}

.mk-footer a:not(.mk-footer__voucher a):hover {
  color: hsl(var(--gold)) !important;
  opacity: 1;
}

/* ==========================================================================
   SECTION 61: CART - MINI CART STYLING
   React: p-3 bg-muted/30 rounded-lg, w-20 h-20 (80px) images
   ========================================================================== */

/* Item background - React: p-3 bg-muted/30 rounded-lg */
.wc-block-mini-cart__products-table .wc-block-cart-items__row,
.wc-block-components-product-details {
  background: hsl(var(--muted) / 0.3);
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: none;
}

/* Item image size: 80px (React: w-20 h-20) */
.wc-block-mini-cart__products-table .wc-block-cart-item__image,
.wc-block-mini-cart__products-table .wc-block-cart-item__image img {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px;
  object-fit: cover;
  border-radius: 0.25rem;
}

/* Product title */
.wc-block-mini-cart__products-table .wc-block-cart-item__product-name {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25;
}

/* Quantity and price */
.wc-block-mini-cart__products-table .wc-block-cart-item__quantity {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.wc-block-mini-cart__products-table .wc-block-cart-item__price {
  font-weight: 600;
  color: hsl(var(--primary));
}

/* Remove button */
.wc-block-mini-cart__products-table .wc-block-cart-item__remove-link {
  color: hsl(var(--muted-foreground));
  transition: color 200ms ease;
}

.wc-block-mini-cart__products-table .wc-block-cart-item__remove-link:hover {
  color: hsl(var(--destructive));
}

/* Total typography */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-subtotal {
  font-size: 1.125rem;
  font-weight: 600;
}

.wc-block-mini-cart__footer .wc-block-formatted-money-amount {
  color: hsl(var(--primary));
  font-weight: 700;
}

/* Empty cart state */
.wc-block-mini-cart__empty-cart-wrapper {
  text-align: center;
  padding: 2rem 1rem;
}

.wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__empty-cart-icon {
  color: hsl(var(--muted-foreground) / 0.3);
  margin-bottom: 1rem;
}

/* Drawer/slide-out panel styling */
.wc-block-mini-cart__drawer {
  max-width: 28rem; /* sm:max-w-md = 448px */
}

/* ==========================================================================
   SECTION 62: MY ACCOUNT - CONTAINER & STYLING
   ========================================================================== */

/* Wider container: 896px not 600px */
.woocommerce-account .woocommerce,
.woocommerce-MyAccount-content {
  max-width: 56rem;
}

/* Stat cards */
.mk-account-stats {
  gap: 1.5rem;
}

.mk-account-stat {
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
}

.mk-account-stat__label {
  font-size: 0.875rem;
}

/* Edit button: ghost style */
.mk-account-edit-btn {
  border: none;
  background: transparent;
}

.mk-account-edit-btn:hover {
  background: hsl(var(--muted));
}

/* Info card */
.mk-account-info-card {
  border: none;
  box-shadow: var(--shadow-card);
}

/* Info labels: no uppercase */
.mk-account-info-card__data dt {
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: normal;
}

/* Bid status badges */
.mk-bid-status {
  display: inline-flex;
  align-items: start;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.mk-bid-status--active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.mk-bid-status--outbid {
  background-color: transparent;
  border: 1px solid hsl(var(--destructive));
  color: hsl(var(--destructive));
}

.mk-bid-status--won {
  background-color: hsl(var(--gold));
  color: hsl(160 35% 20%);
}

.mk-bid-status--lost {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

/* ==========================================================================
   SECTION 63: 404 PAGE - CENTERING & BACKGROUND
   ========================================================================== */

.mk-404 {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  min-height: 60vh;
  background: hsl(var(--muted));
}

/* ==========================================================================
   SECTION 64: FORMS (CF7) - BORDER RADIUS & LAYOUT
   ========================================================================== */

/* Input/textarea border-radius: 0.125rem (rounded-md = 2px in React custom config) */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="password"],
.wpcf7 textarea {
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
}

/* Checkbox border-radius: 0 (rounded-sm = 0px in React custom config - SQUARE corners) */
.wpcf7 input[type="checkbox"] {
  border-radius: 0; /* rounded-sm = 0px (React custom config) */
}

/* Contact form grid at 640px not 768px (P1-2 fix) */
/* Force 1-column default for Kontaktai page (overrides .mk-form-grid 768px rule) */
body.page-id-15 .wpcf7-form.mk-form-grid,
body.page-id-15 .wpcf7-form .mk-form-grid,
body.page-id-15 .mk-contact-form .mk-form-row {
  grid-template-columns: 1fr !important;
  gap: 1.5rem;
}

/* Switch to 2-column at 640px (sm breakpoint) - React uses space-y-6 (1.5rem) */
@media (min-width: 640px) {
  body.page-id-15 .wpcf7-form.mk-form-grid,
  body.page-id-15 .wpcf7-form .mk-form-grid,
  body.page-id-15 .mk-contact-form .mk-form-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Pardavimas submit: auto width on desktop */
@media (min-width: 768px) {
  .page-id-17 .wpcf7-submit {
    width: auto;
  }
}

/* File upload border-radius */
.wpcf7 input[type="file"] {
  border-radius: 0.125rem;
}

/* ==========================================================================
   SECTION 65: GLOBAL TOKENS - INPUT & CARD FIXES
   ========================================================================== */

/* Input background */
.mk-input {
  background-color: hsl(var(--background));
}

/* Input focus with offset */
.mk-input:focus,
.mk-textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* Card border and radius */
/* DUPLICATE REMOVED: .mk-card #2 - keeping line 548 version (more complete with hover) */
/*
.mk-card {
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
*/

/*
 * Version 1.17.7 - P30 Mobile Menu Parity (2026-03-23)
 * - Section 134: Mobile menu 1:1 React parity
 * - Converts WP overlay menu to inline expand (matches React behavior)
 * - Hamburger: ghost button, 2.5rem, w-5 h-5 icon
 * - Menu: py-4 border-t animate-fade-in
 * - Section labels: text-sm font-medium text-muted-foreground
 * - Submenu links: px-4 py-2 hover:bg-muted rounded
 * - Top links: px-2 py-2 font-medium hover:text-primary
 * - Breakpoint: 1024px (lg:hidden)
 * Reference: docs/PARITY-AGENT-LOGS/P30-MOBILE-MENU.md
 */

/* Badge font-weight */
.mk-badge {
  font-weight: 600;
}

/* Card sub-components */
.mk-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.5rem;
}

.mk-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}

.mk-card-description {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.mk-card-content {
  padding: 1.5rem;
  padding-top: 0;
}

.mk-card-footer {
  display: flex;
  align-items: start;
  padding: 1.5rem;
  padding-top: 0;
}

/* ==========================================================================
   SECTION 66: INFORMACIJA - TAB NAVIGATION & CONTENT
   ========================================================================== */

/* Tab list container */
.mk-info-tabs__nav {
  padding: 0.5rem;
  border-radius: 0.5rem; /* rounded-xl = 8px (CUSTOM) */
  border-bottom: none;
  margin-bottom: 2rem;
  background: hsl(var(--muted) / 0.5);
}

/* Inactive tab color */
.mk-info-tab-btn {
  color: hsl(var(--muted-foreground));
}

/* Content card wrapper */
.mk-info-panel {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem; /* rounded-xl = 8px (CUSTOM) */
  padding: 2rem;
}

/* ==========================================================================
   SECTION 67: HOMEPAGE - GRADIENT & SECTION FIXES
   ========================================================================== */

/* Hero gradient opacity fix - WP Cover blocks add inline style="opacity:0" */
.mk-hero .wp-block-cover__background {
  background: linear-gradient(
    to right,
    hsl(var(--foreground) / 0.8) 0%,
    hsl(var(--foreground) / 0.5) 50%,
    transparent 100%
  ) !important;
  opacity: 1 !important;
}

/* Hero bottom gradient */
.mk-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    hsl(var(--foreground) / 0.6) 0%,
    transparent 50%,
    hsl(var(--foreground) / 0.2) 100%
  );
}

/* About section gold blur effect */
.mk-about__image::before {
  content: '';
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 8rem;
  height: 8rem;
  background: hsl(var(--gold) / 0.2);
  border-radius: 9999px;
  filter: blur(64px);
  z-index: -1;
}

/* Newsletter background */
.mk-newsletter {
  background-color: hsl(var(--muted) / 0.3) !important;
}

/* Newsletter image shadows */
.mk-newsletter__images img {
  box-shadow: var(--shadow-card);
}

/* Gallery preview images */
.mk-gallery-preview__images img {
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   END OF PARITY FIXES
   ========================================================================== */
/* ==========================================================================
   66. SPACING CONSISTENCY FIXES
   ========================================================================== */

/* Section padding - match React py-20 (5rem) */
.mk-newsletter,
.mk-about-section,
.mk-gallery-preview {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* Section padding - match React py-16 (4rem) */
.mk-upcoming-auctions {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

/* 2-column grid gap - match React gap-12 (3rem) */
.mk-about-section .wp-block-columns,
.mk-newsletter .wp-block-columns,
.mk-contact-grid {
  gap: 3rem !important;
}

/* Trust badges gap - match React gap-6 (1.5rem) */
.mk-trust-badges .wp-block-columns {
  gap: 1.5rem !important;
}

/* Footer column gap - match React gap-10 (2.5rem) */
.mk-footer .wp-block-columns {
  gap: 2.5rem !important;
}

/* Header navigation gap - match React gap-8 (2rem) */
.mk-header .wp-block-navigation__container {
  gap: 2rem !important;
}

/* ==========================================================================
   67. ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 0.5rem 1rem;
  text-decoration: underline;
  z-index: 100;
  font-weight: 600;
  transition: top 200ms ease;
}

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

/* Screen reader only text */
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable:focus,
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Focus states for interactive elements */
.mk-gallery-category-btn:focus-visible,
.mk-qf-toggle:focus-visible,
.mk-sqf-toggle:focus-visible,
.mk-view-btn:focus-visible,
.mk-info-tabs__trigger:focus-visible,
.mk-faq-question:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mk-btn,
  .wp-block-button__link {
    border: 2px solid currentColor;
  }

  .mk-input,
  .mk-textarea,
  input[type="text"],
  input[type="email"],
  textarea {
    border: 2px solid currentColor;
  }
}

/* ==========================================================================
   BROWSER COMPATIBILITY PREFIXES
   ========================================================================== */

/* Sticky positioning for iOS 12 */
.mk-header {
  position: -webkit-sticky;
  position: sticky;
}

.mk-catalog__sidebar {
  position: -webkit-sticky;
  position: sticky;
}

/* aspect-ratio fallback for Safari 14 */
@supports not (aspect-ratio: 4 / 5) {
  .mk-artwork-card__image,
  .mk-gallery-card__image,
  .wc-block-grid__product-image {
    position: relative;
    overflow: hidden;
  }

  .mk-artwork-card__image::before,
  .mk-gallery-card__image::before,
  .wc-block-grid__product-image::before {
    content: "";
    display: block;
    padding-top: 125%; /* 4:5 ratio */
  }

  .mk-artwork-card__image img,
  .mk-gallery-card__image img,
  .wc-block-grid__product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* Flexbox gap fallback for Safari 14.0 */
@supports not (gap: 1rem) {
  .mk-header__nav > * + * {
    margin-left: 2rem;
  }

  .mk-footer__social > * + * {
    margin-left: 0.5rem;
  }
}

/* ==========================================================================
   68. UPCOMING AUCTIONS - ACTION CARDS (React 1:1 Match)
   ========================================================================== */

/* Section background - matches React bg-secondary/30 */
.mk-upcoming-auctions {
  background-color: hsl(36 25% 88% / 0.3) !important;
}

/* Action card container */
.mk-action-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.125rem !important;     /* rounded-md = 2px (React custom config) */
}

/* Image hover zoom effect */
.mk-action-card.mk-img-zoom .wp-block-cover__image-background {
  transition: transform 500ms ease;
}

.mk-action-card.mk-img-zoom:hover .wp-block-cover__image-background {
  transform: scale(1.05);
}

/* Action card button - outline style matching React */
.mk-btn-action-card .wp-block-button__link,
.mk-btn-action-card.wp-block-button .wp-block-button__link {
  background: transparent !important;
  border: 1px solid hsl(40 30% 96% / 0.3) !important;
  color: hsl(40 30% 96%) !important;
  font-weight: 400;
  letter-spacing: 0.025em;
  border-radius: 0;                         /* rounded-sm = 0px per custom Tailwind config */
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.mk-btn-action-card .wp-block-button__link:hover,
.mk-btn-action-card.wp-block-button .wp-block-button__link:hover {
  background: hsl(40 30% 96%) !important;
  color: hsl(160 30% 18%) !important;
  border-color: hsl(40 30% 96%) !important;
}

/* Nav arrows styling */
.mk-nav-arrows button:hover {
  color: hsl(160 30% 28%) !important;
}

/* Decorative dots */
.mk-dots > div {
  transition: opacity 200ms ease;
}

/* ==========================================================================
   72. SPACING & RESPONSIVE FIXES
   ========================================================================== */

/* ------------------------------------------------------------------
   M3: Section Padding - Match React py-20 (5rem)
   ------------------------------------------------------------------ */
.mk-about,
.mk-about-section,
.mk-newsletter,
.mk-gallery-preview {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* ------------------------------------------------------------------
   M4: Column Gaps - Match React gap-12 (3rem)
   ------------------------------------------------------------------ */
.mk-about .wp-block-columns,
.mk-about-section .wp-block-columns,
.mk-newsletter .wp-block-columns,
.mk-gallery-preview .wp-block-columns {
  gap: 3rem !important;
}

/* ------------------------------------------------------------------
   M5: Image Border Radius - Match React rounded-sm (0.125rem)
   ------------------------------------------------------------------ */
.mk-img-zoom img,
.mk-about__image img,
.mk-about-section img,
.mk-gallery-preview img {
  border-radius: 0.125rem !important;
}

/* ------------------------------------------------------------------
   H1: Ekspozicijos Inline Layout
   ------------------------------------------------------------------ */
.mk-ekspozicijos__location {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  flex-direction: row !important;
  align-items: center !important;
}

.mk-ekspozicijos__location-name,
.mk-ekspozicijos__location-address {
  font-size: 1.125rem !important;
  color: hsl(160 30% 18%) !important;
}

/* ------------------------------------------------------------------
   H4: Form Card Border Radius
   ------------------------------------------------------------------ */
.mk-contact-form__card,
.mk-contact-form {
  border-radius: 0.125rem !important;
}

/* ==========================================================================
   69. CRITICAL PARITY FIXES (Agent 1)
   Priority: S1 (Cart badge), S2 (Step badges), S3 (Image aspect ratio)
   Generated: 2026-03-21
   ========================================================================== */

/* ------------------------------------------------------------------
   S1: Cart Badge RED (CRITICAL)
   React: destructive background (red) — was green/primary
   Selectors target WooCommerce Mini Cart block badge
   ------------------------------------------------------------------ */
.wc-block-mini-cart__badge,
.wc-block-mini-cart__quantity-badge {
  background-color: hsl(0 65% 50%) !important;
  color: white !important;
}

/* ------------------------------------------------------------------
   S2: Step Number Badges (CRITICAL)
   React: 2rem circular gold badges, positioned top-left (-0.75rem)
   Used on How to Sell, How to Buy step cards
   High specificity selectors to override existing styles
   ------------------------------------------------------------------ */
.mk-step__number,
.mk-sell-step-number,
.mk-step-card__badge,
.mk-sell-step__badge {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  background: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  position: absolute !important;
  top: -0.75rem !important;
  left: -0.75rem !important;
}

/* ------------------------------------------------------------------
   S3: Product Card Image Aspect Ratio (CRITICAL)
   React: 4:5 aspect ratio for artwork images
   Targets all product card image containers
   ------------------------------------------------------------------ */
.mk-artwork-card__image,
.wc-block-grid__product-image img,
.products .product img,
.woocommerce-loop-product__link img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
}

/* ==========================================================================
   70. HERO & HOVER ZOOM FIXES
   Agent 2: C2/C3 (hide heroes), S6 (hover zoom), C4 (hide subtitle)
   Generated: 2026-03-21
   ========================================================================== */

/* ------------------------------------------------------------------
   C2/C3: Hide Hero on Pirkimas/Pardavimas (CRITICAL)
   React has NO hero banner on these pages - just content on cream background.
   Pardavimas = page ID 17, Pirkimas = check body classes
   ------------------------------------------------------------------ */
.page-id-17 .mk-page-hero,
.page-template-page-pirkimas .mk-page-hero,
.page-template-page-pardavimas .mk-page-hero,
body[class*="page-pirkimas"] .mk-page-hero,
body[class*="page-pardavimas"] .mk-page-hero {
  display: none !important;
}

/* ------------------------------------------------------------------
   S6: Product Card Hover Zoom (CRITICAL)
   React ArtworkCard/GalleryCard has image zoom effect on hover
   Tailwind: transition-transform duration-500 hover:scale-105
   ------------------------------------------------------------------ */
.mk-artwork-card,
.wc-block-grid__product,
.wc-block-product,
.mk-gallery-card {
  overflow: hidden;
}

.mk-artwork-card img,
.wc-block-grid__product img,
.wc-block-product img,
.mk-gallery-card img {
  transition: transform 500ms ease;
}

.mk-artwork-card:hover img,
.wc-block-grid__product:hover img,
.wc-block-product:hover img,
.mk-gallery-card:hover img {
  transform: scale(1.05);
}

/* ------------------------------------------------------------------
   C4: Hide Hero Subtitle (HIGH)
   React HeroSection.tsx has subtitle commented out
   ------------------------------------------------------------------ */
.mk-hero__subtitle {
  display: none !important;
}

/* ==========================================================================
   71. FAQ, INFO ICONS, NEWSLETTER FIXES (Agent 3)
   Priority: H6 (FAQ accordion), H7 (Info icons), H11 (Newsletter form)
   Generated: 2026-03-21
   ========================================================================== */

/* ------------------------------------------------------------------
   H6: FAQ Accordion Styling
   Match React FAQ accordion with bottom border, bold questions, no marker
   ------------------------------------------------------------------ */
.mk-faq-item,
.mk-faq__item {
  border-bottom: 1px solid hsl(36 20% 82%) !important;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.mk-faq-question,
.mk-faq__question,
.mk-faq-item summary {
  font-weight: 500 !important;
  cursor: pointer;
}

/* Hide default disclosure triangle */
.mk-faq-item summary::marker,
.mk-faq-item summary::-webkit-details-marker {
  display: none !important;
}

.mk-faq-item summary {
  list-style: none;
}

/* ------------------------------------------------------------------
   H7: Info Panel Header Icons - 32px Gold
   ------------------------------------------------------------------ */
.mk-info-panel__icon svg,
.mk-info-section__icon svg {
  width: 32px !important;
  height: 32px !important;
  color: hsl(42 55% 58%) !important; /* gold */
}

/* ------------------------------------------------------------------
   H11: Newsletter Form - No Card Wrapper
   Form should have transparent background, no border, no shadow
   ------------------------------------------------------------------ */
.mk-newsletter__form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.mk-newsletter__form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ==========================================================================
   SECTION 73: CONSOLIDATED PARITY FIXES
   ========================================================================== */

/* S1: Cart Badge RED */
.wc-block-mini-cart__badge,
.wc-block-mini-cart__quantity-badge {
  background-color: hsl(0 65% 50%) !important;
  color: white !important;
}

/* S2: Step Number Badges - Circular Gold */
.mk-step__number,
.mk-sell-step-number,
.wp-block-group.mk-numbered-step .wp-block-group:first-child {
  width: 2rem !important;
  height: 2rem !important;
  background: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  min-width: 2rem !important;
  flex-shrink: 0 !important;
}

/* S3: Product Card Image Aspect Ratio 4:5 */
.mk-artwork-card__image,
.wc-block-grid__product-image img,
.products .product img,
.woocommerce-loop-product__link img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
}

/* S6: Product Card Hover Zoom */
.mk-artwork-card,
.wc-block-grid__product,
.wc-block-product,
.products .product {
  overflow: hidden;
}

.mk-artwork-card img,
.wc-block-grid__product img,
.wc-block-product img,
.products .product img {
  transition: transform 500ms ease;
}

.mk-artwork-card:hover img,
.wc-block-grid__product:hover img,
.wc-block-product:hover img,
.products .product:hover img {
  transform: scale(1.05);
}

/* S6 CRITICAL FIX: .wc-block-product is the actual wrapper class in WC Product Collection blocks
   The image is inside .wc-block-components-product-image, needs overflow:hidden + transition */
li.wc-block-product {
  overflow: hidden;
}

li.wc-block-product .wc-block-components-product-image {
  overflow: hidden;
  border-radius: var(--radius);
}

li.wc-block-product .wc-block-components-product-image img {
  transition: transform 500ms ease;
}

li.wc-block-product:hover .wc-block-components-product-image img {
  transform: scale(1.05);
}

/* C2/C3: Hide hero on Pirkimas/Pardavimas pages */
.page-template-page-pirkimas .mk-page-hero,
.page-template-page-pardavimas .mk-page-hero,
body.page-id-16 .mk-page-hero,
body.page-id-17 .mk-page-hero {
  display: none !important;
}

/* C4: Hide hero subtitle globally */
.mk-hero__subtitle {
  display: none !important;
}

/* H1: Ekspozicijos inline layout (no card borders) */
.mk-ekspozicijos__location,
.mk-ekspozicijos .wp-block-group {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.mk-ekspozicijos__locations {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  align-items: center !important;
}

/* H2: Gift Voucher Icon Sizes - 40px */
.mk-voucher-feature__icon svg,
.mk-gift-feature svg {
  width: 40px !important;
  height: 40px !important;
}

/* H4: Contact Form Card Border Radius */
.mk-contact-form__card,
.mk-contact-form .wpcf7 {
  border-radius: 0.125rem !important;
}

/* H6: FAQ Accordion Styling */
.mk-faq-item,
details.mk-faq-item {
  border-bottom: 1px solid hsl(36 20% 82%) !important;
  padding: 1rem 0 !important;
}

.mk-faq-question,
.mk-faq-item summary {
  font-weight: 500 !important;
  cursor: pointer;
  list-style: none;
}

.mk-faq-item summary::marker,
.mk-faq-item summary::-webkit-details-marker {
  display: none !important;
}

/* H7: Info Panel Icons - 32px Gold */
.mk-info-panel__icon svg {
  width: 32px !important;
  height: 32px !important;
  color: hsl(42 55% 58%) !important;
}

/* H11: Newsletter Form - No Card Wrapper */
.mk-newsletter__form,
.mk-newsletter .wpcf7-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* H12: File Upload Drag Zone Styling */
.mk-file-upload,
.wpcf7-file,
input[type="file"].wpcf7-form-control {
  border: 2px dashed hsl(36 20% 82%) !important;
  border-radius: var(--radius) !important; /* rounded-lg = 4px (React custom config) */
  padding: 2rem !important;
  text-align: center !important;
  background: hsl(36 33% 94%) !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: border-color 200ms ease, background-color 200ms ease !important;
}

.mk-file-upload:hover,
.wpcf7-file:hover,
input[type="file"].wpcf7-form-control:hover {
  border-color: hsl(160 30% 28%) !important;
  background: hsl(40 30% 96%) !important;
}

/* M3: Section Padding Consistency (5rem = py-20) */
.mk-about,
.mk-newsletter,
.mk-gallery-preview {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* M4: Column Gaps (3rem = gap-12) */
.mk-about .wp-block-columns,
.mk-newsletter .wp-block-columns,
.mk-gallery-preview .wp-block-columns {
  gap: 3rem !important;
}

/* M5: Image Border Radius (0.125rem = rounded-sm) */
.mk-img-zoom img,
.mk-about__image img,
.mk-gallery-preview img {
  border-radius: 0.125rem !important;
}

/* Deadline Badge Overlay Container - injected inside product image block */
.mk-deadline-badge-overlay {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
}

/* Deadline Badge for Post-Auction */
.mk-deadline-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: hsl(42 55% 58%);
  color: hsl(160 30% 18%);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 10;
}

/* Ensure product image block has position relative for overlay positioning */
.wc-block-components-product-image {
  position: relative !important;
}

/* Timer Position - Inside Image Container */
.mk-card-timer,
.auction-time-left {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent) !important;
  padding: 1rem !important;
  color: white !important;
}

/* ==========================================================================
   70b. STATUS BADGE POSITION - Top Right of Image
   Agent 9: Fix badge position to overlay on product image top-right
   React: Badges positioned absolute inside image container
   WordPress: Badge is in card body; use absolute positioning to overlay on image
   Generated: 2026-03-21
   ========================================================================== */

/* The paragraph wrapping the badge - position absolutely within product card */
.mk-product-card .wp-block-group p:has(> .mk-badge) {
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  z-index: 20 !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Override any inherited padding from parent group */
  left: auto !important;
  bottom: auto !important;
}

/* Ensure the badge itself has proper styling when positioned */
.mk-product-card .mk-badge {
  display: inline-flex !important;
  position: relative !important;
  z-index: 20 !important;
  /* Slight shadow for visibility over images */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* WooCommerce product grid fallback (non-FSE templates) */
.wc-block-grid__product .mk-badge {
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  z-index: 20 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Fallback: Also target .mk-status-badge if used elsewhere */
.mk-status-badge {
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  z-index: 20 !important;
}

/* ==========================================================================
   71. STEP BADGES - PAGE-SPECIFIC OVERRIDES
   Agent 8: Circular step badges matching React exactly
   Pirkimas: Large 4rem forest-green circles (like HowToBuy.tsx)
   Pardavimas: Small 2rem gold circles, absolute positioned (like HowToSell.tsx)
   Generated: 2026-03-21
   ========================================================================== */

/* ------------------------------------------------------------------
   Pirkimas (page-id-16): LARGE PRIMARY CIRCLES
   React HowToBuy.tsx: w-16 h-16 rounded-full bg-primary
   4rem = 64px forest-green circles with cream text
   ------------------------------------------------------------------ */
body.page-id-16 .mk-step__number,
body.page-id-16 .mk-step-number,
body.page-id-16 .mk-step-card__badge,
.page-pirkimas .mk-step__number,
.page-pirkimas .mk-step-number,
.page-pirkimas .mk-step-card__badge {
  width: 4rem !important;
  height: 4rem !important;
  min-width: 4rem !important;
  background: hsl(160 30% 28%) !important;
  color: hsl(36 33% 94%) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------
   Pardavimas (page-id-17): SMALL GOLD CIRCLES
   React HowToSell.tsx: w-8 h-8 bg-gold rounded-full absolute -top-3 -left-3
   2rem = 32px gold circles with dark text, positioned top-left
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step__badge,
body.page-id-17 .mk-sell-step__number,
body.page-id-17 .mk-step__number--small,
body.page-id-17 .mk-step-number,
.page-pardavimas .mk-sell-step__badge,
.page-pardavimas .mk-sell-step__number,
.page-pardavimas .mk-step__number--small,
.page-pardavimas .mk-step-number {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  background: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  position: absolute !important;
  top: -0.75rem !important;
  left: -0.75rem !important;
  box-shadow: var(--shadow-card) !important;
  z-index: 10 !important;
}

/* Ensure Pardavimas step cards have relative positioning for absolute badge */
body.page-id-17 .mk-sell-step,
body.page-id-17 .mk-step-card,
.page-pardavimas .mk-sell-step,
.page-pardavimas .mk-step-card {
  position: relative !important;
}

/* ------------------------------------------------------------------
   Pardavimas Step Icons: 40px (React uses w-10 h-10 = 40px)
   Fixes M1 from Phase 2 verification - icons were 28x28
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step svg,
body.page-id-17 .mk-sell-step__icon svg,
body.page-id-17 .mk-step-card svg,
body.page-id-17 .mk-step__icon svg,
.page-pardavimas .mk-sell-step svg,
.page-pardavimas .mk-step-card svg {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

/* ==========================================================================
   SECTION 74: DEFINITIVE HERO HIDE - PIRKIMAS/PARDAVIMAS (Agent 5-6)
   React has NO hero banner on these pages - just content on cream background.
   Pirkimas = page ID 16, Pardavimas = page ID 17
   Using MAXIMUM specificity with multiple fallback strategies.
   Generated: 2026-03-21
   ========================================================================== */

/* Strategy 1: Target by exact page IDs */
body.page-id-16 .mk-page-hero,
body.page-id-17 .mk-page-hero,
body.page-id-16 .mk-hero,
body.page-id-17 .mk-hero,
body.page-id-16 .wp-block-cover,
body.page-id-17 .wp-block-cover,
body.page-id-16 .wp-block-cover:first-of-type,
body.page-id-17 .wp-block-cover:first-of-type {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Strategy 2: Target by page slug body classes */
body.page-pirkimas .mk-page-hero,
body.page-pardavimas .mk-page-hero,
body.page-pirkimas .mk-hero,
body.page-pardavimas .mk-hero,
body.page-pirkimas .wp-block-cover,
body.page-pardavimas .wp-block-cover,
body.page-pirkimas .wp-block-cover:first-of-type,
body.page-pardavimas .wp-block-cover:first-of-type {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Strategy 3: Target by partial slug match in body class */
body[class*="pirkimas"] .mk-page-hero,
body[class*="pardavimas"] .mk-page-hero,
body[class*="pirkimas"] .mk-hero,
body[class*="pardavimas"] .mk-hero,
body[class*="pirkimas"] .wp-block-cover:first-child,
body[class*="pardavimas"] .wp-block-cover:first-child,
body[class*="pirkimas"] > .wp-block-cover,
body[class*="pardavimas"] > .wp-block-cover {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Strategy 4: Target by page template classes */
body.page-template-page-pirkimas .mk-page-hero,
body.page-template-page-pardavimas .mk-page-hero,
body.page-template-page-pirkimas .wp-block-cover,
body.page-template-page-pardavimas .wp-block-cover,
.page-template-page-pirkimas .mk-hero,
.page-template-page-pardavimas .mk-hero {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Strategy 5: Main content area hero targeting */
body.page-id-16 main .wp-block-cover:first-child,
body.page-id-17 main .wp-block-cover:first-child,
body.page-id-16 .entry-content > .wp-block-cover:first-child,
body.page-id-17 .entry-content > .wp-block-cover:first-child,
body.page-id-16 article .wp-block-cover:first-of-type,
body.page-id-17 article .wp-block-cover:first-of-type {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Strategy 6: Hide any hero-like element with gradient on these pages */
body.page-id-16 .has-background-gradient,
body.page-id-17 .has-background-gradient,
body.page-id-16 [class*="hero"],
body.page-id-17 [class*="hero"],
body[class*="pirkimas"] [class*="hero"],
body[class*="pardavimas"] [class*="hero"] {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* ==========================================================================
   77. PRODUCT CARD ASPECT RATIO 4:5 (Agent 13 - CRITICAL FIX)
   WooCommerce Product Collection blocks apply inline style="aspect-ratio:3/4"
   and class wc-block-components-product-image--aspect-ratio-3-4.
   React uses 4:5 aspect ratio. Must override with maximum specificity.
   ========================================================================== */

/* Target the specific WooCommerce aspect ratio class to override 3/4 */
.wc-block-components-product-image--aspect-ratio-3-4 {
  aspect-ratio: 4 / 5 !important;
}

.wc-block-components-product-image--aspect-ratio-3-4 a {
  aspect-ratio: 4 / 5 !important;
  display: block !important;
}

/* Override inline style on img elements within product image containers */
.wc-block-components-product-image--aspect-ratio-3-4 img,
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
li.wc-block-product .wc-block-components-product-image img,
.woocommerce-page .wc-block-grid__product-image img,
.post-type-archive-product .wc-block-grid__product-image img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
}

/* Container aspect ratio for proper sizing */
.wc-block-components-product-image,
.wc-block-grid__product-image,
.wp-block-woocommerce-product-image {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

/* Ultra-specific selector for stubborn inline styles */
[data-aspect-ratio="3/4"] {
  aspect-ratio: 4 / 5 !important;
}

[data-aspect-ratio="3/4"] img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
}

/* Archive and shop page specific targeting */
.woocommerce-shop .wc-block-components-product-image img,
.tax-product_cat .wc-block-components-product-image img,
.tax-product_tag .wc-block-components-product-image img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
}

/* ==========================================================================
   SECTION 74: PHASE 2 CONSOLIDATED PARITY FIXES (Agent 19)
   Deployed: 2026-03-21
   ========================================================================== */

/* ------------------------------------------------------------------
   Agent 11: Plenerai Badge Backdrop-Blur
   React: bg-gold/20 backdrop-blur-sm
   ------------------------------------------------------------------ */
.mk-plenerai-badge {
  background: hsl(var(--gold) / 0.2) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ------------------------------------------------------------------
   Agent 7: Ekspozicijos Inline Layout
   React: flex items-center justify-center gap-3
   ------------------------------------------------------------------ */
.mk-ekspozicijos__location {
  display: flex;
  align-items: start;
  justify-content: center;
  gap: 12px;
}

.mk-ekspozicijos__pin svg,
.mk-icon-primary {
  width: 20px;
  height: 20px;
  color: hsl(var(--primary));
  stroke: hsl(var(--primary));
  flex-shrink: 0;
}

.mk-ekspozicijos__text {
  margin: 0;
  font-size: 1.125rem !important; /* text-lg */
  line-height: 1.75rem !important;
  color: hsl(var(--foreground)) !important;
}

.mk-ekspozicijos__text strong {
  font-weight: 600;
}

/* ------------------------------------------------------------------
   Agent 12: Product Card Hover Zoom - WC Block Product
   React: transition-transform duration-500 hover:scale-105
   ------------------------------------------------------------------ */
li.wc-block-product {
  overflow: hidden;
}

li.wc-block-product .wc-block-components-product-image {
  overflow: hidden;
  border-radius: var(--radius);
}

li.wc-block-product .wc-block-components-product-image img {
  transition: transform 500ms ease;
}

li.wc-block-product:hover .wc-block-components-product-image img {
  transform: scale(1.05);
}

/* ------------------------------------------------------------------
   Gift Voucher Feature Icons - 40px to match React w-10 h-10
   ------------------------------------------------------------------ */
.mk-feature-card__icon svg,
.mk-voucher-feature__icon svg,
.mk-gift-feature svg {
  width: 40px !important;
  height: 40px !important;
}

/* ==========================================================================
   SECTION 75: MOBILE RESPONSIVE PARITY FIXES (Agent 16 - Phase 3)
   Reference: M7 from PARITY-FIXES-PRIORITIZED.md
   Generated: 2026-03-21
   ========================================================================== */

/* ------------------------------------------------------------------
   M7a: Newsletter Images - Hide below 1024px (lg breakpoint)
   React: Hidden on mobile, visible on lg screens
   The images column should be display:none on smaller screens
   ------------------------------------------------------------------ */
@media (max-width: 1279px) {
  .mk-newsletter__images,
  .mk-newsletter .wp-block-column:has(.wp-block-image),
  .mk-newsletter .mk-newsletter-images {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   M7b: Form Columns Stack on Mobile
   React: grid-cols-1 on mobile, grid-cols-2 on sm/md
   Contact form and other two-column forms should stack
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .mk-contact-form .wp-block-columns,
  .mk-sell-form .wp-block-columns,
  .wpcf7-form .wp-block-columns {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .mk-contact-form .wp-block-column,
  .mk-sell-form .wp-block-column,
  .wpcf7-form .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* ------------------------------------------------------------------
   M7c: Product Grid Responsive - General WooCommerce Blocks
   React: 1 col mobile, 2 col sm (640px), 3 col lg (1024px), 4 col xl (1280px)
   Ensure all product grids follow consistent breakpoints
   ------------------------------------------------------------------ */

/* WooCommerce Product Collection block responsive */
.wp-block-woocommerce-product-collection ul.wc-block-product-template {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .wp-block-woocommerce-product-collection ul.wc-block-product-template {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .wp-block-woocommerce-product-collection ul.wc-block-product-template {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .wp-block-woocommerce-product-collection ul.wc-block-product-template {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* WooCommerce Products (legacy) block responsive */
.wc-block-grid__products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .wc-block-grid__products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .wc-block-grid__products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Catalog page with sidebar - 3 columns max */
.mk-catalog__main .wp-block-woocommerce-product-collection ul.wc-block-product-template,
.mk-catalog__main .wc-block-grid__products {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .mk-catalog__main .wp-block-woocommerce-product-collection ul.wc-block-product-template,
  .mk-catalog__main .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .mk-catalog__main .wp-block-woocommerce-product-collection ul.wc-block-product-template,
  .mk-catalog__main .wc-block-grid__products {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: Single product detail page - stack image and info */
/* FIX-6: Changed from 767px to 1023px (lg breakpoint) to match React ArtworkDetail.tsx */
@media (max-width: 1279px) {
  .single-product .wp-block-columns {
    flex-direction: column !important;
  }

  .single-product .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* Mobile: Trust badges - stack vertically */
@media (max-width: 639px) {
  .mk-trust-badges .wp-block-columns {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* ==========================================================================
   FIX-16: Two-Column Layout Stacking at lg (1024px)
   React uses lg:grid-cols-2, which means stack below 1024px
   ========================================================================== */

/* About section image/text - stack below lg (1024px) */
@media (max-width: 1279px) {
  .mk-about-section .wp-block-columns,
  .mk-about .wp-block-columns {
    flex-direction: column !important;
  }
}

/* Gallery preview - stack below lg (1024px) */
@media (max-width: 1279px) {
  .mk-gallery-preview .wp-block-columns {
    flex-direction: column !important;
  }
}

/* Plenerai about section - stack below lg (1024px) */
@media (max-width: 1279px) {
  .mk-plenerai-about .wp-block-columns {
    flex-direction: column !important;
  }
}

/* Gift voucher layout - stack below lg (1024px) */
@media (max-width: 1279px) {
  .mk-voucher-section .wp-block-columns {
    flex-direction: column !important;
  }
}

/* Ensure two columns at 1024px+ */
@media (min-width: 1024px) {
  .mk-about-section .wp-block-columns,
  .mk-about .wp-block-columns,
  .mk-gallery-preview .wp-block-columns,
  .mk-plenerai-about .wp-block-columns,
  .mk-voucher-section .wp-block-columns {
    flex-direction: row !important;
  }
}

/* ==========================================================================
   END FIX-16: Two-Column Layout Stacking at lg (1024px)
   ========================================================================== */

/* ==========================================================================
   SECTION 76: PHASE 3 FINAL PARITY FIXES (Agent 19)
   Reference: H5, H8 from PARITY-FIXES-PRIORITIZED.md
   Generated: 2026-03-21
   ========================================================================== */

/* ------------------------------------------------------------------
   H5: Kontaktai Header Alignment (Centered)
   React: text-center for page header and intro paragraph
   WordPress: Left-aligned by default, needs centering
   ------------------------------------------------------------------ */
body.page-id-15 .entry-title,
body.page-id-15 .wp-block-post-title,
.page-kontaktai .entry-title,
.page-kontaktai .wp-block-post-title {
  text-align: center !important;
}

body.page-id-15 .entry-content > p:first-of-type,
body.page-id-15 .wp-block-post-content > p:first-of-type,
.page-kontaktai .entry-content > p:first-of-type,
.page-kontaktai .wp-block-post-content > p:first-of-type {
  text-align: center !important;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------
   H8: Galerija Category Filter - Inactive Button Border Color
   React: border-primary (hsl(160 30% 28%)) for inactive state
   WordPress: Currently using border (hsl(36 20% 82%)) - too light

   Note: This is a design choice - React uses primary border on
   inactive buttons which provides better contrast and visibility.
   ------------------------------------------------------------------ */
.mk-gallery-cat-btn {
  border-color: hsl(160 30% 28%) !important;
}

/* Ensure the existing styles still work properly */
.mk-gallery-cat-btn:not(.is-active) {
  background: transparent !important;
  color: hsl(160 30% 18%) !important;
  border-color: hsl(160 30% 28%) !important;
}

.mk-gallery-cat-btn.is-active {
  background: hsl(160 30% 28%) !important;
  border-color: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
}

/* Same fix for gallery filter class used in blocks */
.mk-gallery-filter .wp-block-button__link:not(.is-style-fill),
.mk-gallery-filter .wp-element-button:not(.is-style-fill) {
  border: 1px solid hsl(160 30% 28%) !important;
}

/* ------------------------------------------------------------------
   Gift Voucher: Amount Format Fix
   React: Euro symbol before number (e.g., €50)
   Supporting CSS for consistent display
   ------------------------------------------------------------------ */
.mk-voucher-amount[data-format="prefix"]::before {
  content: "€";
}

/* ------------------------------------------------------------------
   Additional Polish: Ensure consistent button sizes on voucher page
   ------------------------------------------------------------------ */
.mk-voucher-buttons .wp-block-button__link,
.mk-voucher-amount-btn {
  min-width: 5rem;
  justify-content: center;
}

/* ==================================================================
   PLENERAI GALLERY MASONRY LAYOUT (Agent 18 - Phase 4)
   2-column masonry grid with staggered offset matching React
   ================================================================== */

/* Plenerai gallery columns gap */
.mk-plenerai__gallery .wp-block-columns {
  gap: 1rem;
}

@media (min-width: 768px) {
  .mk-plenerai__gallery .wp-block-columns {
    gap: 1.5rem;
  }
}

/* Second column offset for masonry effect (React: pt-8 = 2rem) */
.mk-plenerai__gallery-col2 {
  padding-top: 2rem !important;
}

/* Image shadows matching React shadow-lg */
.mk-plenerai__gallery .mk-img-zoom {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border-radius: 0.5rem; /* rounded-xl = 8px (CUSTOM) */
  overflow: hidden;
}

/* Tall images: h-48 md:h-64 (12rem / 16rem) */
.mk-plenerai__gallery-img--tall img {
  height: 12rem;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .mk-plenerai__gallery-img--tall img {
    height: 16rem;
  }
}

/* Short images: h-32 md:h-48 (8rem / 12rem) */
.mk-plenerai__gallery-img--short img {
  height: 8rem;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .mk-plenerai__gallery-img--short img {
    height: 12rem;
  }
}

/* Hover zoom effect (700ms duration matching React) */
.mk-plenerai__gallery .mk-img-zoom img {
  transition: transform 700ms ease;
}

.mk-plenerai__gallery .mk-img-zoom:hover img {
  transform: scale(1.05);
}

/* ==========================================================================
   SECTION 77: NEWSLETTER SECTION PARITY FIXES (Phase 4 - Agent 4)
   React: bg-muted/30 (30% opacity), images with shadow-lg, ShadCN Input styling
   ========================================================================== */

/* ------------------------------------------------------------------
   N1: Newsletter Background - Match React bg-muted/30
   React uses 30% opacity muted color, WP had solid cream-dark
   ------------------------------------------------------------------ */
.mk-newsletter,
.mk-newsletter.has-cream-dark-background-color,
.mk-newsletter.has-background {
  background-color: hsl(var(--muted) / 0.3) !important;
}

/* ------------------------------------------------------------------
   N2: Newsletter Images - shadow-lg (Tailwind equivalent)
   React: shadow-lg = 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
   ------------------------------------------------------------------ */
.mk-newsletter .wp-block-image,
.mk-newsletter .mk-shadow-lg,
.mk-newsletter figure.wp-block-image {
  box-shadow: var(--shadow-lg) !important;
}

.mk-newsletter .wp-block-image img,
.mk-newsletter figure.wp-block-image img {
  border-radius: 0; /* rounded-sm = 0px per custom Tailwind config */
}

/* ------------------------------------------------------------------
   N3: Newsletter Form Inputs - Match ShadCN Input styling
   React Input: bg-background, border, h-10 (2.5rem), px-3, py-2, rounded-md
   ------------------------------------------------------------------ */
.mk-newsletter__form input[type="text"],
.mk-newsletter__form input[type="email"],
.mk-newsletter .wpcf7-form input[type="text"],
.mk-newsletter .wpcf7-form input[type="email"] {
  height: 2.5rem !important;
  padding: 0.5rem 0.75rem !important;
  background: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: hsl(var(--foreground)) !important;
  outline: none !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

.mk-newsletter__form input:focus,
.mk-newsletter .wpcf7-form input:focus {
  border-color: hsl(var(--ring)) !important;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
}

.mk-newsletter__form input::placeholder,
.mk-newsletter .wpcf7-form input::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}

/* ------------------------------------------------------------------
   N4: Newsletter Submit Button - Match React default Button
   ------------------------------------------------------------------ */
.mk-newsletter__form input[type="submit"],
.mk-newsletter .wpcf7-form input[type="submit"],
.mk-newsletter .wpcf7-submit {
  height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: none !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 150ms ease !important;
}

.mk-newsletter__form input[type="submit"]:hover,
.mk-newsletter .wpcf7-form input[type="submit"]:hover {
  background: hsl(var(--primary) / 0.9) !important;
}

/* ------------------------------------------------------------------
   N5: Newsletter Checkbox - Match React Checkbox styling
   ------------------------------------------------------------------ */
.mk-newsletter__form .wpcf7-acceptance,
.mk-newsletter .wpcf7-acceptance {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
}

.mk-newsletter__form .wpcf7-acceptance input[type="checkbox"],
.mk-newsletter .wpcf7-acceptance input[type="checkbox"] {
  width: 1rem !important;
  height: 1rem !important;
  margin-top: 0.125rem !important;
  accent-color: hsl(var(--primary)) !important;
  flex-shrink: 0 !important;
}

.mk-newsletter__form .wpcf7-acceptance .wpcf7-list-item-label,
.mk-newsletter .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* ==========================================================================
   SECTION 75: AGENT 17 - PLENERAI HERO 1:1 PARITY FIXES
   Deployed: 2026-03-21
   ========================================================================== */

/* ------------------------------------------------------------------
   P1: Plenerai Badge with Sparkles Icon (overrides Agent 11)
   React: inline-flex items-center gap-2 bg-gold/20 backdrop-blur-sm
   Added: Sparkles SVG icon before text
   ------------------------------------------------------------------ */
.mk-plenerai-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: hsl(var(--gold) / 0.2) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 9999px !important;
  color: hsl(var(--gold)) !important;
}

.mk-plenerai-badge .mk-sparkles-icon {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--gold));
  flex-shrink: 0;
}

.mk-plenerai-badge span {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--gold));
}

/* ------------------------------------------------------------------
   P2: Event Info Card Shadow - React uses shadow-2xl
   React: shadow-2xl = 0 25px 50px -12px rgb(0 0 0 / 0.25)
   React: rounded-2xl = border-radius: 1rem
   ------------------------------------------------------------------ */
.mk-plenerai__info {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
}

/* ------------------------------------------------------------------
   P3: Badge wrapper centering fix
   ------------------------------------------------------------------ */
.mk-plenerai-badge-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   78. P3 MINOR POLISH FIXES
   ========================================================================== */

/* ------------------------------------------------------------------
   P3-1: Animation Timing Consistency
   React uses 400ms for button animations, 500ms for image hover
   ------------------------------------------------------------------ */
.wp-block-button__link,
.mk-btn-catalog,
.mk-btn-gold,
.mk-btn-elegant {
  transition-duration: 400ms !important;
}

.mk-img-zoom img,
.mk-action-card img,
.wc-block-grid__product img {
  transition-duration: 500ms !important;
}

/* ------------------------------------------------------------------
   P3-2: Line-Height Consistency
   React leading-relaxed = 1.625, not 1.75
   ------------------------------------------------------------------ */
.mk-about p,
.mk-about-section p,
.entry-content p,
.mk-legal-content p,
.mk-info-panel p {
  line-height: 1.625 !important;
}

/* ------------------------------------------------------------------
   P3-3: Ekspozicijos Location Card Gap
   React space-y-6 = 1.5rem, WP had 0.75rem
   ------------------------------------------------------------------ */
.mk-ekspozicijos__locations {
  gap: 1.5rem !important;
}

.mk-ekspozicijos__location {
  gap: 0.75rem !important;
}

/* ------------------------------------------------------------------
   P3-4: Feature Card Icon Margin
   React mb-4 = 1rem, some WP had 0.5rem
   ------------------------------------------------------------------ */
.mk-feature-card__icon,
.mk-sell-step-card__icon,
.mk-pirkimas-step__icon {
  margin-bottom: 1rem !important;
}

/* ------------------------------------------------------------------
   P3-5: Step Badge Font Size
   React text-sm = 0.875rem
   ------------------------------------------------------------------ */
.mk-step__number,
.mk-sell-step-number {
  font-size: 0.875rem !important;
}

/* ------------------------------------------------------------------
   P3-6: My Account Stat Label Size
   React text-sm = 0.875rem, WP had 0.75rem
   ------------------------------------------------------------------ */
.mk-account-stat__label,
.woocommerce-MyAccount-content .mk-stat-label {
  font-size: 0.875rem !important;
}

/* ------------------------------------------------------------------
   P3-7: Subtitle/Description Margin Consistency
   React mb-12 = 3rem
   ------------------------------------------------------------------ */
.mk-page-intro,
.mk-section-intro {
  margin-bottom: 3rem !important;
}

/* ------------------------------------------------------------------
   P3-8: Card Border-Radius Consistency
   React rounded-lg = 0.5rem
   ------------------------------------------------------------------ */
.mk-card,
.mk-feature-card,
.mk-info-card {
  border-radius: var(--radius) !important; /* rounded-lg = 4px (React custom config) */
}

/* ------------------------------------------------------------------
   P3-9: Input Focus Ring Offset
   React ring-offset-2 = 2px offset
   ------------------------------------------------------------------ */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 2px !important;
}

/* ==========================================================================
   F19: ALL FORMS - React Parity Fixes
   ========================================================================== */

/* ------------------------------------------------------------------
   F19-1: Focus Ring with 2px Cream Offset
   React: ring-2 ring-ring ring-offset-2
   Creates a 2px cream gap between input and focus ring
   ------------------------------------------------------------------ */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary)) !important;
  outline: none !important;
}

/* ------------------------------------------------------------------
   F19-3: Submit Button Border Radius
   React: rounded = 0.25rem (4px)
   WP had: 0.375rem (6px)
   ------------------------------------------------------------------ */
.wpcf7-submit {
  border-radius: 0.25rem !important;
}

/* ------------------------------------------------------------------
   F19-4: Custom Checkbox Styling
   React: Radix Checkbox with custom styling
   Replaces browser default checkbox with themed version
   ------------------------------------------------------------------ */
.wpcf7 input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.125rem;
  background: hsl(var(--background));
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}

.wpcf7 input[type="checkbox"]:focus {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary)) !important;
  outline: none !important;
}

.wpcf7 input[type="checkbox"]:checked {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   79. COMPREHENSIVE PARITY FIXES (Phase 5)
   Generated: 2026-03-21
   Theme Version: 1.10.0

   This section consolidates all React vs WordPress 1:1 parity fixes
   organized by page/component area. Each fix references the audit ID from
   docs/COMPREHENSIVE-PARITY-AUDIT.md.

   SECTIONS INCLUDED IN PHASE 5 FIXES:
   - Section 79 (this): Index and P7 Pirkimas
   - Section 80: DK Dovanu Kuponas, H17 Header, N4 Newsletter, UA Upcoming, G11 Galerija
   - Section 81: H1 Homepage Hero
   - Section 82: P8 Pardavimas
   - Section 83: C20 Cart Empty State
   - Section 75: PL Plenerai (earlier)
   - Section 77: Newsletter additional (earlier)
   - Section 78: Minor polish fixes (earlier)
   - F19 block: All forms (earlier)

   FIXES BY AREA:
   - H1: Homepage Hero - 7 fixes (H1-1 to H1-7) - Section 81
   - UA: Upcoming Auctions - 1 fix (UA-1) - Section 80
   - N4: Newsletter - 4 fixes (N4-1 to N4-4) - Section 80
   - P7: Pirkimas - 2 fixes (P7-2, P7-3) - Section 79
   - P8: Pardavimas - 4 fixes (P8-1, P8-3, P8-4, P8-8) - Section 82
   - G11: Galerija - 2 fixes (G11-1, G11-6) - Section 80
   - DK: Dovanu Kuponas - 4 fixes (DK-1, DK-3, DK-4, DK-7) - Section 80
   - H17: Header - 2 fixes (H17-4, H17-5) - Section 80
   - F19: All Forms - 4 fixes (F19-1, F19-3, F19-4) - F19 block
   - PL: Plenerai - 3 fixes (P1-P3) - Section 75
   - C20: Cart Empty State - 1 fix (C20-5) - Section 83
   ========================================================================== */

/* --- P7: Pirkimas --- */
/* P7-2 & P7-3: Feature card icons on Pirkimas page (40px size, 1rem margin) */
body.page-id-16 .mk-card svg,
.page-pirkimas .mk-card svg {
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 1rem !important;
}

/* ==========================================================================
   SECTION 80: DK - DOVANU KUPONAS PAGE FIXES (Agent 6)
   Generated: 2026-03-21
   ========================================================================== */

/* ------------------------------------------------------------------
   DK-1: Amount label styling
   React: text-sm font-medium uppercase tracking-wide (small uppercase)
   WordPress: H3 with Playfair Display 3-x-large (wrong)
   Fix: Override H3 to match React small uppercase label
   ------------------------------------------------------------------ */
.mk-voucher h3[class*="has-3-x-large"],
.mk-voucher h3.has-3-x-large-font-size,
.mk-voucher-section h3[class*="has-3-x-large"],
body.page-id-19 h3[class*="has-3-x-large"] {
  font-family: var(--wp--preset--font-family--inter, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: hsl(var(--primary-foreground) / 0.8) !important;
  margin-bottom: 1rem !important;
}

/* ------------------------------------------------------------------
   DK-3: Feature card icons 40px
   React: w-10 h-10 = 40x40px
   WordPress: 24x24px hardcoded SVG (wrong)
   ------------------------------------------------------------------ */
.mk-feature-card__icon svg,
body.page-id-19 .mk-feature-card__icon svg,
.mk-voucher .mk-feature-card__icon svg {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

/* ------------------------------------------------------------------
   DK-4: Validity rules border - primary (forest green) not gold
   React: border-primary = border-l-4 border-primary (hsl(160 30% 28%))
   WordPress: Using gold border-left-color (wrong)
   ------------------------------------------------------------------ */
.mk-voucher-rules,
body.page-id-19 [class*="mk-voucher"] [style*="border-left"],
.mk-voucher-section .has-border-color,
body.page-id-19 .wp-block-group[style*="border-left"] {
  border-left-color: hsl(160 30% 28%) !important;
}

/* Additional selector for inline styles */
body.page-id-19 .wp-block-group[style*="border-left-color"] {
  border-left-color: hsl(160 30% 28%) !important;
}

/* ------------------------------------------------------------------
   DK-7: Voucher image shadow-2xl
   React: shadow-2xl = 0 25px 50px -12px rgb(0 0 0 / 0.25)
   WordPress: No visible shadow (wrong)
   ------------------------------------------------------------------ */
.mk-voucher__preview-wrap img,
body.page-id-19 .mk-voucher__preview-wrap img,
.mk-voucher-section .mk-voucher__preview-wrap img {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
  border-radius: var(--radius) !important; /* rounded-lg = 4px (React custom config) */
}

/* --- H17: Header --- */
/* H17-4: Header row and actions align-items (React: center, WP had: start) */
.mk-header__row,
.mk-header__actions {
  align-items: center !important;
}

/* H17-5: Actions gap (React: gap-4 = 1rem, WP had: 0.5rem) */
.mk-header__actions {
  gap: 1rem !important;
}

/* --- N4: Newsletter --- */
/* N4-1: Submit button border-radius 0.25rem (React rounded = 4px) */
.mk-newsletter .wpcf7-submit {
  border-radius: 0.25rem !important;
}

/* N4-2: Submit button padding 1.5rem horizontal (React px-6) */
.mk-newsletter .wpcf7-submit {
  padding: 0.5rem 1.5rem !important;
}

/* N4-3: Focus ring with 2px offset (React ring-offset-2) */
.mk-newsletter input:focus,
.mk-newsletter textarea:focus {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
  outline: none !important;
}

/* N4-4: Mobile submit button full-width (React w-full on mobile) */
@media (max-width: 639px) {
  .mk-newsletter .wpcf7-submit {
    width: 100% !important;
  }
}

/* --- UA: Upcoming Auctions --- */
/* UA-1: Action card border-radius 0px (rounded-sm = 0px per custom Tailwind config) */
.mk-action-card {
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
}

/* --- G11: Galerija --- */
/* G11-1: Filter button radius - React uses 0.25rem, not 0.375rem */
.mk-gallery-cat-btn {
  border-radius: 0.25rem !important;
}

/* G11-6: Gallery card buttons stacked (React: space-y-2 = column with 0.5rem gap) */
.mk-gallery-buttons,
.mk-gallery-card__buttons {
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* ==========================================================================
   81. HOMEPAGE HERO 1:1 PARITY FIXES (Agent 1)
   Reference: H1-1 through H1-7 from COMPREHENSIVE-PARITY-AUDIT.md
   React file: src/components/home/HeroSection.tsx
   Generated: 2026-03-21
   ========================================================================== */

/* ------------------------------------------------------------------
   H1-1: Vertical Alignment - Center (MEDIUM)
   React: items-center (Flexbox align-items: center)
   WP was: align-items: start
   ------------------------------------------------------------------ */
.mk-hero {
  align-items: center !important;
}

/* ------------------------------------------------------------------
   H1-2: H1 Margin Bottom - 1.5rem (MEDIUM)
   React: mb-6 = 1.5rem margin-bottom
   WP was: None specified
   ------------------------------------------------------------------ */
.mk-hero__title {
  margin-bottom: 1.5rem !important;
}

/* ------------------------------------------------------------------
   H1-3: Button Vertical Padding - 1.5rem (MEDIUM)
   React: py-6 = padding-top: 1.5rem, padding-bottom: 1.5rem
   WP was: 0.75rem
   ------------------------------------------------------------------ */
.mk-hero .wp-block-button__link {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* ------------------------------------------------------------------
   H1-4: H1 Animation Delay - 0.1s (MEDIUM)
   React: fade-in animation with delay: 0.1s on H1
   WP was: No animation delay
   ------------------------------------------------------------------ */
.mk-hero__title {
  animation-delay: 0.1s !important;
}

/* ------------------------------------------------------------------
   H1-5: Hero Height Breakpoint - 90vh at 1024px (LOW)
   React: lg:h-[90vh] where lg = 1024px
   WP was: 90vh at 768px (md breakpoint)
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .mk-hero {
    min-height: 90vh !important;
  }
}

/* Reset lower breakpoint to 80vh like React */
@media (min-width: 768px) and (max-width: 1023px) {
  .mk-hero {
    min-height: 80vh !important;
  }
}

/* ------------------------------------------------------------------
   H1-6: H1 Line Height - 1.25 (LOW)
   React: leading-tight which equals line-height: 1.25
   WP was: 1.15
   ------------------------------------------------------------------ */
.mk-hero__title {
  line-height: 1.25 !important;
}

/* ------------------------------------------------------------------
   H1-7: Button Animation Delay - 400ms (LOW)
   React: fade-in delay: 0.4s on button group
   WP was: 300ms
   ------------------------------------------------------------------ */
.mk-hero__actions {
  animation-delay: 0.4s !important;
}

/* ==========================================================================
   SECTION 82: P8 - PARDAVIMAS PAGE PARITY FIXES (Agent 4)
   Generated: 2026-03-21
   Reference: docs/COMPREHENSIVE-PARITY-AUDIT.md - Agent 8 findings
   ========================================================================== */

/* ------------------------------------------------------------------
   P8-1: Hero Section Must Be Hidden (CRITICAL)
   React HowToSell.tsx has NO hero - page starts directly with content
   on cream background. Multiple strategies to ensure hero is hidden.
   ------------------------------------------------------------------ */
body.page-id-17 .mk-page-hero,
body.page-id-17 .mk-hero,
body.page-id-17 .wp-block-cover.mk-page-hero {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------
   P8-3: Step Icon Size - 40px (React w-10 h-10) (CRITICAL)
   React HowToSell step cards use Camera, Search, Gavel, Banknote icons
   at w-10 h-10 = 40x40px. WordPress has hardcoded 28x28 in SVG attrs.
   Use min-width/min-height to override inline attributes.
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step-icon svg,
body.page-id-17 .mk-sell-step-card svg,
body.page-id-17 .mk-sell-step svg,
.page-pardavimas .mk-sell-step-icon svg,
.page-pardavimas .mk-sell-step-card svg {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
}

/* ------------------------------------------------------------------
   P8-4: Step Cards - NO Border (shadow only) (HIGH)
   React step cards use bg-card rounded-sm shadow-card with NO border.
   WordPress adds inline border-width:1px via has-border-color class.
   Override with maximum specificity.
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step-card,
body.page-id-17 .mk-sell-step-card.has-border-color,
body.page-id-17 .mk-sell-step-card[style*="border"],
body.page-id-17 [class*="mk-sell-step"][class*="has-border"],
.page-pardavimas .mk-sell-step-card,
.page-pardavimas .mk-sell-step-card.has-border-color {
  border: 0 none transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-card) !important;
}

body.page-id-17 .mk-sell-step-card:hover,
.page-pardavimas .mk-sell-step-card:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* ------------------------------------------------------------------
   P8-8: Step Card Border Radius - 2px (React rounded-md) (MEDIUM)
   React rounded-md = 0.125rem = 2px (custom config: calc(var(--radius) - 2px))
   Note: rounded-sm = 0px in this project's custom Tailwind config
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step-card,
body.page-id-17 .mk-sell-step,
.page-pardavimas .mk-sell-step-card,
.page-pardavimas .mk-sell-step {
  border-radius: 0.125rem !important;
}

/* ------------------------------------------------------------------
   P8-5 / F19-2: File Upload Dropzone Styling (HIGH) - Agent 10 + Agent 11
   React HowToSell.tsx has styled dropzone with dashed border, Upload icon,
   and hover effect. WordPress has plain CF7 file input.
   CSS-only solution using ::file-selector-button and pseudo-elements.
   Reference: HowToSell.tsx lines 172-183

   Agent 11 Enhancement: Made global for ALL forms, not just Pardavimas
   ------------------------------------------------------------------ */

/* File input wrapper - dashed border dropzone appearance - GLOBAL */
.wpcf7 input[type="file"],
.wpcf7-file,
input[type="file"].wpcf7-form-control {
  /* Dropzone container styling - matches React's border-2 border-dashed border-border */
  width: 100% !important;
  padding: 2rem !important;
  border: 2px dashed hsl(var(--border)) !important;
  border-radius: var(--radius) !important; /* rounded-lg = 4px (React custom config) */ /* Rounded corners for polish */
  background: hsl(var(--background)) !important;
  cursor: pointer !important;
  transition: border-color 200ms ease, background-color 200ms ease !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* Hover state - matches React's hover:border-primary */
.wpcf7 input[type="file"]:hover,
.wpcf7-file:hover,
input[type="file"].wpcf7-form-control:hover {
  border-color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 0.02) !important;
}

/* Focus state - accessible keyboard navigation with offset ring */
.wpcf7 input[type="file"]:focus,
.wpcf7-file:focus,
input[type="file"].wpcf7-form-control:focus {
  outline: none !important;
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary)) !important;
}

/* Hide the default file selector button */
.wpcf7 input[type="file"]::file-selector-button,
.wpcf7-file::file-selector-button,
input[type="file"].wpcf7-form-control::file-selector-button {
  display: none !important;
}

/* Hide webkit file upload button */
.wpcf7 input[type="file"]::-webkit-file-upload-button,
.wpcf7-file::-webkit-file-upload-button,
input[type="file"].wpcf7-form-control::-webkit-file-upload-button {
  display: none !important;
}

/* Add custom text prompt using ::before pseudo-element
   Simulates React's label text "Paspauskite arba nutempkite nuotraukas" */
.wpcf7 input[type="file"]::before,
.wpcf7-file::before,
input[type="file"].wpcf7-form-control::before {
  content: "📤\A\APaspauskite arba nutempkite failus\A\APNG, JPG, PDF iki 10MB" !important;
  display: block !important;
  white-space: pre-line !important;
  text-align: center !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 2.5rem !important; /* Upload emoji - 40px equivalent to React icon */
  line-height: 1.75 !important;
  margin-bottom: 0.75rem !important;
}

/* Text below emoji should be smaller */
.wpcf7 input[type="file"]::after {
  content: "" !important;
  font-size: 0.875rem !important;
}

/* When file is selected, adjust styling */
.wpcf7 input[type="file"]:valid,
.wpcf7-file:valid,
input[type="file"].wpcf7-form-control:valid {
  border-color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 0.05) !important;
}

/* ------------------------------------------------------------------
   P8-7: Hide Extra H2 "Pardavimo procesas" (CRITICAL)
   React HowToSell.tsx has NO H2 heading above step cards - page starts
   directly with step cards after intro text. WordPress has extra H2.
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-steps-section > .wp-block-heading:first-child,
body.page-id-17 .mk-sell-steps-section > h2:first-of-type,
body.page-id-17 h2:has(+ .mk-sell-steps),
.page-pardavimas .mk-sell-steps-section > .wp-block-heading:first-child {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   SECTION 83: CART EMPTY STATE PARITY (Agent 17 - C20-5)
   React: CartDrawer.tsx - large ShoppingCart icon + styled text
   Generated: 2026-03-21
   ========================================================================== */

/* ------------------------------------------------------------------
   C20-5: Cart Empty State - Match React styling
   React: Large ShoppingCart icon, centered text, styled message
   WP was: WooCommerce notice banner with small icon
   ------------------------------------------------------------------ */

/* Full cart page empty state */
.wc-block-cart__empty-state,
.woocommerce-cart .cart-empty,
.woocommerce-cart .woocommerce-info {
  text-align: center !important;
  padding: 4rem 2rem !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Large shopping cart icon via pseudo-element */
.wc-block-cart__empty-state::before,
.woocommerce-cart .cart-empty::before {
  content: '' !important;
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 1.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='%23577066' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Hide WooCommerce default icon */
.wc-block-cart__empty-state__image,
.woocommerce-cart .cart-empty .woocommerce-info::before {
  display: none !important;
}

/* Empty state title styling */
.wc-block-cart__empty-state__title,
.woocommerce-cart .cart-empty {
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.3 !important;
}

/* Empty state description text */
.wc-block-cart__empty-state__text,
.woocommerce-cart .woocommerce-info {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 1rem !important;
  margin-bottom: 1.5rem !important;
  max-width: 28rem !important;
}

/* Return to shop button styling - outline style matching React */
.wc-block-cart__empty-state .wp-block-button__link,
.woocommerce-cart .return-to-shop .button,
.woocommerce-cart a.button.wc-backward {
  background: transparent !important;
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
  font-weight: 500 !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.25rem !important;
  transition: all 200ms ease !important;
  text-decoration: none !important;
}

.wc-block-cart__empty-state .wp-block-button__link:hover,
.woocommerce-cart .return-to-shop .button:hover,
.woocommerce-cart a.button.wc-backward:hover {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* ------------------------------------------------------------------
   83.2: Product Collection No Results (Empty State)
   React source: Catalog.tsx lines 308-318
   WordPress: wp:woocommerce/product-collection-no-results block
   P62 Catalog Final Verification
   ------------------------------------------------------------------ */
.wc-block-product-collection .wc-block-product-collection-no-results,
.woocommerce-no-products-found,
.mk-catalog__main .no-products-found {
  text-align: center !important;
  padding: 4rem 2rem !important;                              /* py-16 = 4rem */
  background: hsl(var(--muted) / 0.3) !important;             /* bg-muted/30 */
  border-radius: 0.125rem !important;                         /* rounded-sm */
  margin-top: 1.5rem !important;
}

.wc-block-product-collection .wc-block-product-collection-no-results p,
.woocommerce-no-products-found .woocommerce-info,
.mk-catalog__main .no-products-found p {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 1rem !important;
  margin: 0 !important;
}

/* Clear filters link in empty state */
.wc-block-product-collection .wc-block-product-collection-no-results a,
.woocommerce-no-products-found a,
.mk-catalog__main .no-products-found a {
  display: inline-block !important;
  margin-top: 0.5rem !important;                              /* mt-2 */
  color: hsl(var(--primary)) !important;
  text-decoration: underline !important;
  font-size: 0.875rem !important;
  transition: color 200ms !important;
}

.wc-block-product-collection .wc-block-product-collection-no-results a:hover,
.woocommerce-no-products-found a:hover,
.mk-catalog__main .no-products-found a:hover {
  color: hsl(var(--gold)) !important;
}

/* ==========================================================================
   SECTION 84: SINGLE PRODUCT PARITY FIXES (Agent 1)
   Issues: SP10-6 (Ending-soon badge positioning), SP10-10 (Responsive breakpoint)
   Reference: COMPREHENSIVE-PARITY-AUDIT.md
   Generated: 2026-03-21
   ========================================================================== */

/* ------------------------------------------------------------------
   SP10-6: Ending-soon Badge Positioning
   React: absolute top-4 left-4 (1rem from top-left)
   WordPress: Currently unpositioned or wrong position
   Fix: Position absolutely at top-left of image container
   ------------------------------------------------------------------ */
.mk-ending-soon-badge {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 10 !important;
}

/* Also target any "Baigiasi!" badge in single product context */
.single-product .mk-badge--ending,
.single-product .mk-badge.mk-badge--ending {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 10 !important;
}

/* Ensure parent container has position relative */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper {
  position: relative !important;
}

/* ------------------------------------------------------------------
   SP10-10: Responsive Breakpoint Alignment (1024px)
   React: Uses lg breakpoint at 1024px for 2-column layout
   WordPress: Currently uses 767px breakpoint (md)
   Fix: Change single product responsive breakpoint to 1024px
   ------------------------------------------------------------------ */

/* Replace the old 767px breakpoint with 1024px */
@media (max-width: 1279px) {
  .single-product .wp-block-columns {
    flex-direction: column !important;
  }

  .single-product .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* Desktop: Ensure 2-column layout at 1024px and above */
@media (min-width: 1024px) {
  .single-product .wp-block-columns {
    flex-direction: row !important;
  }

  .single-product .wp-block-column {
    flex-basis: 50% !important;
  }
}

/* ==========================================================================
   68. PRODUCT SEARCH DROPDOWN (H17-3)
   ========================================================================== */

/**
 * React SearchBar.tsx dropdown styling
 * - Product cards with images (48×48px)
 * - Prices and badges
 * - Hover states
 * - Max height with scroll
 * - Recommended products header
 */

.mk-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.5rem;
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  z-index: 50;
  overflow: hidden;
  min-width: 320px;
}

/* Header for recommended products */
.mk-search-dropdown__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: hsl(var(--muted) / 0.3);
  border-bottom: 1px solid hsl(var(--border));
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.mk-search-dropdown__icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

/* Results container with scroll */
.mk-search-dropdown__results {
  max-height: 400px;
  overflow-y: auto;
}

/* Individual product card */
.mk-search-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s;
}

.mk-search-dropdown__item:hover {
  background-color: hsl(var(--muted) / 0.5);
}

.mk-search-dropdown__item--border {
  border-bottom: 1px solid hsl(var(--border));
}

/* Product image */
.mk-search-dropdown__image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

/* Content area */
.mk-search-dropdown__content {
  flex: 1;
  min-width: 0;
}

.mk-search-dropdown__title {
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 0.125rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-search-dropdown__artist {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin: 0 0 0.25rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-search-dropdown__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.mk-search-dropdown__price {
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--primary));
}

/* Badges */
.mk-search-dropdown__badge {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

.mk-search-dropdown__badge--amber {
  background-color: hsl(42 55% 58% / 0.1);
  color: hsl(42 55% 35%);
}

.mk-search-dropdown__badge--red {
  background-color: hsl(0 65% 50% / 0.1);
  color: hsl(0 65% 40%);
}

/* Time left indicator */
.mk-search-dropdown__time {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  color: hsl(var(--destructive));
}

.mk-search-dropdown__time svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Lot number */
.mk-search-dropdown__lot {
  text-align: right;
  font-size: 0.625rem;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

/* Empty state */
.mk-search-dropdown__empty {
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

/* Error state */
.mk-search-dropdown__error {
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: hsl(var(--destructive));
}

/* View all link */
.mk-search-dropdown__view-all {
  display: block;
  padding: 0.5rem 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  color: hsl(var(--primary));
  text-decoration: none;
  border-top: 1px solid hsl(var(--border));
  transition: background-color 0.2s;
}

.mk-search-dropdown__view-all:hover {
  background-color: hsl(var(--muted) / 0.3);
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .mk-search-dropdown {
    left: -1rem;
    right: -1rem;
    min-width: auto;
  }

  .mk-search-dropdown__item {
    padding: 0.625rem;
  }

  .mk-search-dropdown__image {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   84. SINGLE PRODUCT - AUCTION TIMER FULL VARIANT (SP10-4)
   Agent 8 - 2026-03-21

   React AuctionTimer.tsx "full" variant structure:
   - Status header with icon circle + heading + subtitle
   - 4-column grid for days/hours/minutes/seconds
   - Date display footer with start/end times
   - Status-based coloring (ending-soon red, active green, upcoming gold)

   WooCommerce Simple Auctions timer HTML structure varies by plugin.
   This CSS adapts the plugin's output to match React's visual design.
   ========================================================================== */

/* Timer container - card styling with gradient backgrounds by status */
.woocommerce-auction-countdown,
.auction-time-left,
.auction-time,
.simple-auction-countdown {
  padding: 1.5rem;
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  margin-bottom: 1.5rem;
}

/* Status-based backgrounds (if plugin supports status classes) */
.auction-time-left.ending-soon,
.auction-time-left.status-ending {
  background: linear-gradient(to right, hsl(var(--destructive) / 0.1), hsl(var(--destructive) / 0.05));
  border-color: hsl(var(--destructive) / 0.2);
}

.auction-time-left.active,
.auction-time-left.status-active {
  background: linear-gradient(to right, hsl(142 71% 45% / 0.1), hsl(142 71% 45% / 0.05));
  border-color: hsl(142 71% 45% / 0.2);
}

.auction-time-left.upcoming,
.auction-time-left.status-upcoming {
  background: linear-gradient(to right, hsl(var(--gold) / 0.1), hsl(var(--gold) / 0.05));
  border-color: hsl(var(--gold) / 0.2);
}

/* Timer grid - 4 columns for days/hours/minutes/seconds */
.auction-time-left .time-display,
.auction-time-left .countdown-display,
.woocommerce-auction-countdown > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  text-align: center;
}

/* Individual time blocks */
.auction-time-left .time-block,
.auction-time-left .countdown-block,
.time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Time values - large display numbers */
.auction-time-left .time-value,
.auction-time-left .countdown-value,
.time-unit .value,
.auction-time-left .days,
.auction-time-left .hours,
.auction-time-left .minutes,
.auction-time-left .seconds {
  font-size: 2.25rem; /* 3xl base, 4xl on md+ */
  font-weight: 700;
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif);
  color: hsl(var(--foreground));
  line-height: 1;
  margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
  .auction-time-left .time-value,
  .auction-time-left .countdown-value,
  .time-unit .value {
    font-size: 2.5rem; /* 4xl */
  }
}

/* Ending soon - red + pulse animation */
.auction-time-left.ending-soon .time-value,
.auction-time-left.status-ending .time-value,
.auction-time-left.ending-soon .seconds {
  color: hsl(var(--destructive));
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Active auction - green */
.auction-time-left.active .time-value,
.auction-time-left.status-active .time-value {
  color: hsl(142 71% 45%);
}

/* Time labels - small uppercase */
.auction-time-left .time-label,
.auction-time-left .countdown-label,
.time-unit .label,
.time-unit-label {
  font-size: 0.75rem; /* text-xs */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

/* Status header (if plugin supports custom header injection) */
.auction-time-left .timer-header,
.auction-time-left .status-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* P2: Timer icon 40px circle - React w-10 h-10 */
.auction-time-left .timer-icon,
.auction-time-left .status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;                          /* w-10 = 40px (React parity) */
  height: 2.5rem;                         /* h-10 = 40px (React parity) */
  border-radius: 9999px;
  flex-shrink: 0;
}

/* P2: Timer icon SVG sizing - w-5 h-5 = 20px (React parity) */
.auction-time-left .timer-icon svg,
.auction-time-left .status-icon svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0;
}

/* Icon backgrounds by status */
.auction-time-left.ending-soon .timer-icon,
.auction-time-left.status-ending .status-icon {
  background-color: hsl(var(--destructive) / 0.2);
}

.auction-time-left.active .timer-icon,
.auction-time-left.status-active .status-icon {
  background-color: hsl(142 71% 45% / 0.2);
}

.auction-time-left.upcoming .timer-icon,
.auction-time-left.status-upcoming .status-icon {
  background-color: hsl(var(--gold) / 0.2);
}

/* Status heading */
.auction-time-left .timer-heading,
.auction-time-left .status-title {
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif);
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
  color: hsl(var(--foreground));
}

.auction-time-left.ending-soon .timer-heading {
  color: hsl(var(--destructive));
}

.auction-time-left.active .timer-heading {
  color: hsl(142 71% 45%);
}

/* Status subtitle */
.auction-time-left .timer-subtitle,
.auction-time-left .status-subtitle {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin: 0;
}

/* Date display footer */
.auction-time-left .timer-dates,
.auction-time-left .auction-dates {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.auction-time-left .date-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Pulse animation for ending soon seconds */
@keyframes mk-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Mobile responsive - stack or reduce font size */
@media (max-width: 640px) {
  .auction-time-left .time-value,
  .auction-time-left .countdown-value,
  .time-unit .value {
    font-size: 1.875rem; /* 3xl → reduce to 1.875rem on mobile */
  }

  .auction-time-left .time-display,
  .auction-time-left .countdown-display,
  .woocommerce-auction-countdown > div {
    gap: 0.5rem;
  }
}

/*==========================================================================
   SECTION 85: MY ACCOUNT REGISTER FORM INTRO TEXT (C20-8)
   Date: 2026-03-21
   Agent: 3
   ========================================================================== */

/**
 * Intro text above the register form on My Account page.
 * React Auth.tsx shows this text before the form fields.
 */
.mk-register-intro {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
}

.mk-register-intro__text {
  color: hsl(var(--muted-foreground));
  font-size: 0.9375rem; /* 15px - between text-sm (14px) and text-base (16px) */
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   SECTION 82: CSS POLISH PASS (Agent 17)
   Generated: 2026-03-21
   Comprehensive polish for consistency, accessibility, and performance
   ========================================================================== */

/* ------------------------------------------------------------------
   Links - ensure all interactive links have focus states
   ------------------------------------------------------------------ */
a:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------
   Card transitions - standardize to 200ms
   ------------------------------------------------------------------ */
.mk-card,
.mk-card-elegant {
  transition: all 200ms ease;
}

/* ------------------------------------------------------------------
   Image zoom - ensure consistent transform origin
   ------------------------------------------------------------------ */
.mk-img-zoom img,
.mk-artwork-card__image img,
.mk-gallery-card__image img {
  transform-origin: center center;
}

/* ------------------------------------------------------------------
   Interactive elements - ensure cursor pointer
   ------------------------------------------------------------------ */
button,
[role="button"],
.mk-btn,
.mk-gallery-category-btn,
.mk-qf-toggle,
.mk-sqf-toggle,
.mk-view-btn,
.mk-info-tabs__trigger,
.mk-faq-question {
  cursor: pointer;
}

/* ------------------------------------------------------------------
   Consistent rem-based spacing (no raw px values)
   ------------------------------------------------------------------ */
/* All spacing should use rem units for scalability */

/* ------------------------------------------------------------------
   Focus ring consistency - all interactive elements
   ------------------------------------------------------------------ */
.mk-gallery-category-btn:focus-visible,
.mk-qf-toggle:focus-visible,
.mk-sqf-toggle:focus-visible,
.mk-view-btn:focus-visible {
  outline: 2px solid hsl(var(--ring)) !important;
  outline-offset: 2px !important;
}

/* ------------------------------------------------------------------
   Transition timing standardization
   Note: Buttons use 200ms, images use 500ms, cards use 200ms
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Shadow consistency - all use design system variables
   ------------------------------------------------------------------ */
/* Verified: all shadows use --shadow-card, --shadow-elegant, --shadow-hover */

/* ------------------------------------------------------------------
   Typography - ensure consistent line-height
   ------------------------------------------------------------------ */
body,
p,
.mk-text-base {
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.mk-font-display {
  line-height: 1.25;
}

/* ------------------------------------------------------------------
   Disabled state - consistent opacity across all elements
   ------------------------------------------------------------------ */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   Hover state enhancements - ensure smooth transitions
   ------------------------------------------------------------------ */
.mk-header__nav-link,
.mk-header__nav-trigger,
.mk-header__mobile-link,
.mk-footer__link,
.mk-footer__social a {
  transition: all 200ms ease;
}

/* ------------------------------------------------------------------
   Active state - provide visual feedback
   ------------------------------------------------------------------ */
button:active,
.mk-btn:active {
  transform: scale(0.98);
}

/* ------------------------------------------------------------------
   Selection color - brand-consistent
   ------------------------------------------------------------------ */
::selection {
  background-color: hsl(var(--primary) / 0.3);
  color: hsl(var(--foreground));
}

::-moz-selection {
  background-color: hsl(var(--primary) / 0.3);
  color: hsl(var(--foreground));
}

/* ------------------------------------------------------------------
   Focus-within for complex components
   ------------------------------------------------------------------ */
.mk-header__search:focus-within {
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* ------------------------------------------------------------------
   Ensure all form elements have consistent transitions
   ------------------------------------------------------------------ */
input,
textarea,
select {
  transition: all 200ms ease;
}

/* ------------------------------------------------------------------
   Print optimization - remove shadows and backgrounds
   ------------------------------------------------------------------ */
@media print {
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  .mk-header,
  .mk-footer {
    display: none;
  }
}

/* ------------------------------------------------------------------
   High contrast mode support
   ------------------------------------------------------------------ */
@media (prefers-contrast: high) {
  .mk-btn,
  button {
    border: 2px solid currentColor;
  }

  .mk-card,
  .mk-artwork-card,
  .mk-gallery-card {
    border: 1px solid hsl(var(--foreground) / 0.5);
  }
}

/* ------------------------------------------------------------------
   Reduced transparency mode
   ------------------------------------------------------------------ */
@media (prefers-reduced-transparency: reduce) {
  .mk-header {
    backdrop-filter: none;
    background-color: hsl(var(--background)) !important;
  }
}

/* ==========================================================================
   END SECTION 82: CSS POLISH PASS
   ========================================================================== */

/* ==========================================================================
   SECTION 88: HOMEPAGE HERO PARITY FIXES (Agent 3)
   ========================================================================== */

/* H1.1: Hero height responsive - 80vh mobile, 90vh desktop */
.mk-hero {
  min-height: 80vh !important;
}
@media (min-width: 1024px) {
  .mk-hero {
    min-height: 90vh !important;
  }
}

/* H1.2: H1 responsive font size */
.mk-hero h1,
.mk-hero__title {
  font-size: 2.25rem !important; /* text-4xl mobile */
  line-height: 1.25 !important; /* leading-tight */
  margin-bottom: 1.5rem !important; /* mb-6 */
}
@media (min-width: 768px) {
  .mk-hero h1,
  .mk-hero__title {
    font-size: 3rem !important; /* text-5xl tablet */
  }
}
@media (min-width: 1024px) {
  .mk-hero h1,
  .mk-hero__title {
    font-size: 3.75rem !important; /* text-6xl desktop */
  }
}

/* ==========================================================================
   END SECTION 88: HOMEPAGE HERO PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 89: HOMEPAGE ABOUT SECTION PARITY FIXES (Agent 4)
   ========================================================================== */

/* About section image container needs relative positioning */
.mk-about .wp-block-image,
.mk-about__image {
  position: relative;
}

/* Gold blur decorative element */
.mk-about .wp-block-image::after,
.mk-about__image::after {
  content: '';
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 8rem;
  height: 8rem;
  background-color: hsl(var(--gold) / 0.2);
  border-radius: 9999px;
  filter: blur(3rem);
  pointer-events: none;
  z-index: -1;
}

/* Image height constrained to 400px */
.mk-about .wp-block-image img,
.mk-about__image img {
  height: 400px !important;
  object-fit: cover !important;
}

/* Shadow on image wrapper */
.mk-about .wp-block-image,
.mk-about__image {
  box-shadow: var(--shadow-elegant) !important;
}

/* Text line-height should be 1.625 (leading-relaxed) */
.mk-about p,
.mk-about__text p {
  line-height: 1.625 !important;
}

/* About section heading margin - match React mb-6 (1.5rem) */
.mk-about h2,
.mk-about-section h2 {
  margin-bottom: 1.5rem !important;
}

/* About section paragraph spacing - match React space-y-4 (1rem) */
.mk-about p + p,
.mk-about-section p + p,
.mk-about__text p + p {
  margin-top: 1rem !important;
}

/* ==========================================================================
   END SECTION 89: HOMEPAGE ABOUT SECTION PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 91: HEADER CART BADGE RED COLOR FIX (Agent 6)
   ========================================================================== */

/* Cart badge MUST be red - override all inline styles */
.wc-block-mini-cart__badge,
.wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge,
span.wc-block-mini-cart__badge,
.wc-block-mini-cart__badge[style],
.wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge[style] {
  background: hsl(0 65% 50%) !important;
  background-color: hsl(0 65% 50%) !important;
  color: white !important;
  border: none !important;
}

/* Also fix via attribute selector for inline styles */
[class*="mini-cart__badge"] {
  background: hsl(0 65% 50%) !important;
  background-color: hsl(0 65% 50%) !important;
  color: white !important;
}


/* Dropdown hover should use accent not muted */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background-color: hsl(var(--accent)) !important;
}

/* ==========================================================================
   END SECTION 91: HEADER CART BADGE RED COLOR FIX
   ========================================================================== */

/* ==========================================================================
   SECTION 86: PARDAVIMAS PAGE PARITY FIXES (Agent 1)
   ========================================================================== */

/* M1-M3: Hide hero section (React has NO hero on Pardavimas) */
body.page-id-17 .mk-page-hero {
  display: none !important;
}

/* M4: Remove step card borders - shadow only */
body.page-id-17 .mk-sell-step-card,
body.page-id-17 .mk-card[class*="sell-step"] {
  border: 0 none transparent !important;
  border-width: 0 !important;
  box-shadow: var(--shadow-card) !important;
}

/* M5: Step icons should be 40px not 28px */
body.page-id-17 .mk-sell-step-card svg,
body.page-id-17 .mk-sell-step-icon svg {
  width: 40px !important;
  height: 40px !important;
}

/* M6: Card padding 1.5rem */
body.page-id-17 .mk-sell-step-card {
  padding: 1.5rem !important;
}

/* ==========================================================================
   END SECTION 86: PARDAVIMAS PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 92: FOOTER PARITY FIXES (Agent 7)
   ========================================================================== */

/* F1: Social icons should be 20px not 24px */
.mk-footer__social svg,
.mk-footer .wp-block-social-links svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* F2: Logo margin-bottom 1.5rem */
.mk-footer__brand .wp-block-site-logo,
.mk-footer .custom-logo-link {
  margin-bottom: 1.5rem !important;
  display: block;
}

/* F3-F5: Link hover states - gold color with transition */
.mk-footer a {
  transition: color 0.2s, opacity 0.2s, transform 0.2s !important;
}

.mk-footer a:hover,
.mk-footer__links a:hover,
.mk-footer__contact a:hover {
  color: hsl(var(--gold)) !important;
}

/* Social icons hover gold with transform and opacity */
.mk-footer__social a,
.mk-footer .wp-block-social-links a {
  transition: color 0.2s, opacity 0.2s, transform 0.2s !important;
  display: inline-block;
}

.mk-footer__social a:hover,
.mk-footer .wp-block-social-links a:hover {
  opacity: 0.8 !important;
  transform: translateY(-2px) !important;
}

.mk-footer__social a:hover svg,
.mk-footer .wp-block-social-links a:hover svg {
  color: hsl(var(--gold)) !important;
  fill: hsl(var(--gold)) !important;
}

/* Voucher link underline offset and hover */
.mk-footer__voucher a {
  text-underline-offset: 4px;
}
.mk-footer__voucher a:hover {
  color: hsl(var(--gold)) !important;
  text-decoration: underline !important;
  opacity: 0.8;
}

/* ==========================================================================
   END SECTION 92: FOOTER PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 94: SINGLE PRODUCT PAGE LAYOUT FIXES (Agent 9)
   ========================================================================== */

/* ------------------------------------------------------------------
   Column ratio - should be 50/50 not 60/40
   ------------------------------------------------------------------ */
.single-product .woocommerce-product-gallery,
.single-product .mk-product-gallery {
  width: 50% !important;
  flex: 0 0 50% !important;
}

.single-product .summary.entry-summary,
.single-product .mk-product-details {
  width: 50% !important;
  flex: 0 0 50% !important;
}

/* ------------------------------------------------------------------
   Image gallery border-radius and shadow
   ------------------------------------------------------------------ */
.woocommerce-product-gallery__image img,
.mk-product-gallery img {
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  box-shadow: var(--shadow-elegant) !important;
}

/* ------------------------------------------------------------------
   Back link styling with ArrowLeft icon
   ------------------------------------------------------------------ */
.mk-back-link,
.single-product .woocommerce-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.875rem !important;
  margin-bottom: 2rem /* FIX-6: mb-8 */ !important;
  text-decoration: none !important;
}

.mk-back-link:hover,
.single-product .woocommerce-breadcrumb:hover {
  color: hsl(var(--primary)) !important;
}

.mk-back-link svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* ------------------------------------------------------------------
   Product image container
   ------------------------------------------------------------------ */
.woocommerce-product-gallery {
  position: relative;
  overflow: hidden;
  border-radius: 0.125rem;
}

/* ==========================================================================
   END SECTION 94: SINGLE PRODUCT PAGE LAYOUT FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 90: NEWSLETTER SECTION PARITY FIXES (Agent 5)
   ========================================================================== */

/* Background should be bg-muted/30 (semi-transparent) */
.mk-newsletter {
  background-color: hsl(var(--muted) / 0.3) !important;
}

/* Newsletter image should have shadow-lg */
.mk-newsletter .wp-block-image img,
.mk-newsletter__image img {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  border-radius: 0.125rem !important;
}

/* Submit button responsive - full width mobile, auto desktop */
.mk-newsletter .wpcf7-submit,
.mk-newsletter__form input[type="submit"] {
  width: 100% !important;
}
@media (min-width: 640px) {
  .mk-newsletter .wpcf7-submit,
  .mk-newsletter__form input[type="submit"] {
    width: auto !important;
    min-width: 120px;
  }
}

/* Form inputs styling to match React */
.mk-newsletter .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]) {
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
  background-color: hsl(var(--background));
}

/* ==========================================================================
   END SECTION 90: NEWSLETTER SECTION PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 95: SINGLE PRODUCT METADATA STYLING (Agent 10)
   ========================================================================== */

/* Lot number badge styling */
.mk-lot-number,
.single-product .lot-number {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
}

/* Bid count badge with TrendingUp icon - React: Badge variant="outline" */
.mk-bid-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.25rem 0.5rem !important;
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
}

.mk-bid-count svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  margin-right: 0.25rem !important;
  color: hsl(var(--primary)) !important;
}

/* Artist name and dates */
.mk-artist-name {
  font-size: 1rem;
  color: hsl(var(--foreground));
  margin-bottom: 0.25rem;
}

.mk-artist-dates {
  font-size: 0.75rem;
  font-style: italic;
  color: hsl(var(--muted-foreground));
}

/* Metadata info card */
.mk-product-info-card,
.single-product .product-meta-card {
  background: hsl(var(--secondary) / 0.3) !important;
  padding: 1.5rem !important;
  border-radius: 0.25rem !important;
  margin-bottom: 1.5rem !important;
}

.mk-product-info-card dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.25rem;
}

.mk-product-info-card dd {
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

/* Estimate range in gold */
.mk-estimate-range,
.single-product .estimate-range {
  color: hsl(var(--gold)) !important;
  font-weight: 500;
}

/* Pricing card shadow */
.mk-pricing-card,
.single-product .price-card {
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem;
  border-radius: 0.25rem;
  background: hsl(var(--card));
}

/* ==========================================================================
   END SECTION 95: SINGLE PRODUCT METADATA STYLING
   ========================================================================== */

/* ==========================================================================
   SECTION 93: KATALOGAS PAGE PARITY FIXES (Agent 8)
   Deployed: 2026-03-21
   Critical timer overlay, category filter, and list view fixes
   ========================================================================== */

/* ------------------------------------------------------------------
   Timer overlay gradient background
   React: Timer has dark gradient background for readability
   WP was: No background, text hard to read on light images
   ------------------------------------------------------------------ */
.mk-auction-timer,
.wc-block-grid__product .auction-time-left,
.mk-product-card .auction-timer {
  background: linear-gradient(to top, hsl(var(--foreground) / 0.8), transparent) !important;
  padding: 0.5rem !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* ------------------------------------------------------------------
   Timer text white with shadow for readability
   React: Timer text is always white with shadow regardless of image
   WP was: Foreground color, hard to read on some images
   ------------------------------------------------------------------ */
.mk-auction-timer span,
.auction-time-left span,
.mk-timer-text {
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* ------------------------------------------------------------------
   Category filter "Visi kūriniai" option styling
   React: "Visi" is the first filter option, same style as others
   WP was: Missing consistent styling for first option
   ------------------------------------------------------------------ */
.mk-catalog-filters .mk-filter-all,
.mk-category-filter a:first-child {
  font-weight: 500;
}

/* ------------------------------------------------------------------
   List view card layout — DEPRECATED — SEE SECTION 122 (CONSOLIDATED)
   ------------------------------------------------------------------ */
/* DUPLICATE REMOVED by Agent P1-06: Conflicting values (200px width, 0.25rem radius)
   Consolidated into Section 122 with correct React values (192px x 192px SQUARE, 0.125rem radius)
   Lines 13531-13550 commented out 2026-03-22
*/
/*
.mk-catalog-list .wc-block-grid__product,
.mk-view-list .product {
  display: flex !important;
  flex-direction: row !important;
  gap: 1.5rem !important;
  padding: 1rem !important;
  background: hsl(var(--card)) !important;
  border-radius: 0.25rem !important;
}

.mk-catalog-list .wc-block-grid__product .wc-block-grid__product-image,
.mk-view-list .product .attachment-woocommerce_thumbnail {
  width: 200px !important;
  flex-shrink: 0 !important;
}

.mk-catalog-list .wc-block-grid__product .wc-block-grid__product-title,
.mk-view-list .product .woocommerce-loop-product__title {
  margin-top: 0 !important;
}
*/

/*
 * Version 1.17.7 - P30 Mobile Menu Parity (2026-03-23)
 * - Section 134: Mobile menu 1:1 React parity
 * - Converts WP overlay menu to inline expand (matches React behavior)
 * - Hamburger: ghost button, 2.5rem, w-5 h-5 icon
 * - Menu: py-4 border-t animate-fade-in
 * - Section labels: text-sm font-medium text-muted-foreground
 * - Submenu links: px-4 py-2 hover:bg-muted rounded
 * - Top links: px-2 py-2 font-medium hover:text-primary
 * - Breakpoint: 1024px (lg:hidden)
 * Reference: docs/PARITY-AGENT-LOGS/P30-MOBILE-MENU.md
 */

/* ==========================================================================
   END SECTION 93: KATALOGAS PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 96: GALERIJA PAGE PARITY FIXES (Agent 11)
   Deployed: 2026-03-21
   Critical image aspect ratio and cart button icon fixes
   ========================================================================== */

/* ------------------------------------------------------------------
   G1: Image aspect ratio should be 4/5 not 3/4
   React: Gallery cards use 4:5 aspect ratio (taller, portrait)
   WP was: 3:4 aspect ratio (wider, landscape)
   ------------------------------------------------------------------ */
.mk-gallery-grid .wc-block-grid__product-image,
.tax-product_tag .wc-block-grid__product-image,
.mk-gallery-card .wp-block-image,
.mk-gallery-card__image {
  aspect-ratio: 4 / 5 !important;
}

.mk-gallery-grid .wc-block-grid__product-image img,
.tax-product_tag .wc-block-grid__product-image img,
.mk-gallery-card img,
.mk-gallery-card__image img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
}

/* ------------------------------------------------------------------
   G2: Add cart icon before "Į krepšelį" button text
   React: Cart button displays shopping cart icon before text
   WP was: Text only, no icon
   Selectors: classic WC, block WC, gallery page (ID 92), .mk-galerija class
   SVG stroke: #203D31 (forest-dark) — matches gold button text color
   ------------------------------------------------------------------ */
.mk-gallery-grid .add_to_cart_button::before,
.page-id-92 .add_to_cart_button::before,
.page-id-92 .wc-block-components-product-button__button::before,
.mk-galerija .add_to_cart_button::before,
.mk-galerija .wc-block-components-product-button__button::before,
.mk-btn-cart::before,
.mk-gallery-card__actions .add_to_cart_button::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23203D31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* ------------------------------------------------------------------
   Ensure button displays as flex for icon alignment
   ------------------------------------------------------------------ */
.mk-gallery-grid .add_to_cart_button,
.page-id-92 .add_to_cart_button,
.page-id-92 .wc-block-components-product-button__button,
.mk-galerija .add_to_cart_button,
.mk-galerija .wc-block-components-product-button__button,
.mk-btn-cart,
.mk-gallery-card__actions .add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ------------------------------------------------------------------
   Gallery card hover effects (preserve existing behavior)
   ------------------------------------------------------------------ */
.mk-gallery-card:hover img {
  transform: scale(1.05);
  transition: transform 500ms ease;
}

.mk-gallery-card img {
  transition: transform 500ms ease;
}

/* ==========================================================================
   END SECTION 96: GALERIJA PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 87: PIRKIMAS PAGE PARITY FIXES (Agent 2)
   ========================================================================== */

/* P1: Hide hero section (React has NO hero on Pirkimas) */
body.page-id-16 .mk-page-hero {
  display: none !important;
}

/* P2: Feature card icon margin should be 1rem */
body.page-id-16 .mk-feature-card svg,
body.page-id-16 .mk-pirkimas-feature svg {
  margin-bottom: 1rem !important;
}

/* P3: Feature card title size should be ~1rem not 1.875rem */
body.page-id-16 .mk-feature-card h3,
body.page-id-16 .mk-pirkimas-feature h3 {
  font-size: 1rem !important;
}

/* CTA button should be catalog (green) not gold */
body.page-id-16 .mk-btn-gold {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
body.page-id-16 .mk-btn-gold:hover {
  background-color: hsl(160 30% 35%) !important;
}

/* ==========================================================================
   END SECTION 87: PIRKIMAS PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 98: KONTAKTAI PAGE FORM FIXES (Agent 13)
   ========================================================================== */

/* K4: Form card border-radius should be 2px (rounded-sm) */
.page-id-15 .mk-card,
.page-id-15 .wpcf7-form-wrapper,
.mk-contact-form-card {
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
}

/* K5: Form spacing should be 1.5rem not 1rem */
.page-id-15 .wpcf7-form > p,
.page-id-15 .wpcf7-form .form-group {
  margin-bottom: 1.5rem !important;
}

.page-id-15 .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* K6: Form grid responsive - 1 col mobile, 2 col at 640px */
.page-id-15 .mk-form-grid,
.page-id-15 .wpcf7-form .name-email-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}

@media (min-width: 640px) {
  .page-id-15 .mk-form-grid,
  .page-id-15 .wpcf7-form .name-email-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* K7: Phone/email link hover state */
.mk-contact-item a,
.page-id-15 .mk-contact-info a {
  transition: color 200ms ease;
}

.mk-contact-item a:hover,
.page-id-15 .mk-contact-info a:hover {
  color: hsl(var(--primary)) !important;
}

/* K3: Style for labels that should exist above inputs */
.page-id-15 .wpcf7-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
}

/* K1: H1 and subtitle should be centered */
.page-id-15 > .entry-content > .wp-block-group:first-child {
  text-align: center;
}

.page-id-15 > .entry-content > .wp-block-group:first-child h1,
.page-id-15 > .entry-content > .wp-block-group:first-child > p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.page-id-15 > .entry-content > .wp-block-group:first-child > p {
  max-width: 42rem;
  margin-bottom: 3rem;
}

/* ==========================================================================
   END SECTION 98: KONTAKTAI PAGE FORM FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 97: POAUKCIONINE PAGE PARITY FIXES (Agent 12)
   ========================================================================== */

/* Header icon should be amber not gold */
.mk-poaukcionine-header svg,
.page-id-93 .mk-page-hero svg {
  color: hsl(45 93% 47%) !important; /* amber-500 */
}

/* H1 should be bold (700) not semibold (600) */
.mk-poaukcionine h1,
.page-id-93 h1 {
  font-weight: 700 !important;
}

/* Amber info banner styling */
.mk-poaukcionine-banner,
.mk-post-auction-banner {
  background-color: hsl(45 93% 94%) !important; /* amber-50 */
  border: 1px solid hsl(45 93% 47% / 0.3) !important; /* amber-500/30 */
  border-left: 4px solid hsl(45 93% 47%) !important; /* amber-500 */
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  padding: 1rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.mk-poaukcionine-banner svg {
  color: hsl(45 93% 47%) !important; /* amber-500 */
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
}

.mk-poaukcionine-banner p {
  color: hsl(45 93% 20%) !important; /* amber-900 */
  font-size: 0.875rem !important;
  margin: 0 !important;
}

/* Deadline badge - red styling */
.mk-deadline-badge,
.mk-badge--deadline {
  background-color: hsl(0 65% 50% / 0.1) !important;
  color: hsl(0 65% 45%) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
}

/* Only show deadline badge if urgent (CSS can't do logic, but style it prominently) */
.mk-deadline-badge--urgent {
  background-color: hsl(0 65% 50%) !important;
  color: hsl(var(--forest-dark)) !important;
  animation: pulse 2s infinite;
}

/* ==========================================================================
   END SECTION 97: POAUKCIONINE PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 102: EKSPOZICIJOS PAGE PARITY FIXES (Agent 17)
   ========================================================================== */

/* Container max-width 768px */
.mk-ekspozicijos,
.page-id-20 .entry-content {
  max-width: 48rem !important; /* 768px = max-w-3xl */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* H1 margin-bottom 1rem */
.mk-ekspozicijos h1,
.page-id-20 h1 {
  margin-bottom: 1rem !important;
}

/* Description margin-bottom 3rem */
.mk-ekspozicijos > p:first-of-type,
.page-id-20 .entry-content > p:first-of-type {
  margin-bottom: 3rem !important;
}

/* Location items gap 1.5rem */
.mk-ekspozicijos__locations,
.mk-ekspozicijos-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

/* Location item styling */
.mk-ekspozicijos__location {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important; /* gap-3 */
}

/* Icon styling */
.mk-ekspozicijos__location svg,
.mk-location-icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: hsl(var(--primary)) !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}

/* Location text size */
.mk-ekspozicijos__location-name,
.mk-location-name {
  font-size: 1.125rem !important; /* text-lg */
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
}

.mk-ekspozicijos__location-address,
.mk-location-address {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.75 !important;
}

/* Center alignment */
.mk-ekspozicijos,
.page-id-20 .entry-content {
  text-align: center;
}

.mk-ekspozicijos__locations {
  text-align: left;
}

/* ==========================================================================
   END SECTION 102: EKSPOZICIJOS PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 101: DOVANU KUPONAS PAGE PARITY FIXES (Agent 16)
   ========================================================================== */

/* "Pasirinkite sumą" label - small uppercase */
.mk-voucher-label,
.page-id-19 .mk-amount-label {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-family: var(--wp--preset--font-family--body) !important; /* Inter, not Playfair */
  color: hsl(var(--muted-foreground)) !important;
}

/* Override if it's mistakenly an H3 */
.page-id-19 h3.mk-amount-label,
.page-id-19 .mk-voucher-section h3:first-of-type {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Voucher preview image shadow-2xl */
.mk-voucher-preview img,
.page-id-19 .mk-voucher-image img {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important; /* shadow-2xl */
  border-radius: 0.25rem !important;
  max-height: 400px !important;
  object-fit: cover !important;
}

/* Feature cards with icons */
.mk-voucher-feature {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 1.5rem !important;
}

.mk-voucher-feature svg {
  width: 2rem !important;
  height: 2rem !important;
  color: hsl(var(--primary)) !important;
  margin-bottom: 1rem !important;
}

/* Validity rules 2-column grid */
.mk-voucher-rules {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
}

@media (max-width: 768px) {
  .mk-voucher-rules {
    grid-template-columns: 1fr !important;
  }
}

/* Rule items with border-left accent */
.mk-voucher-rule {
  border-left: 4px solid hsl(var(--primary)) !important;
  padding-left: 1rem !important;
}

.mk-voucher-rule h4 {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.25rem !important;
}

.mk-voucher-rule p {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* CTA button with arrow */
.mk-voucher-cta::after {
  content: ' →' !important;
}

/* Hero section styling */
.mk-voucher-hero h1 {
  font-weight: 700 !important; /* font-bold */
}

/* Agent 12 Additional Parity Fixes */

/* H1 font-weight 700 on page-id-19 */
.page-id-19 h1 {
  font-weight: 700 !important;
}

/* Subtitle with primary-foreground/70 opacity */
.page-id-19 .mk-voucher-subtitle,
.page-id-19 .has-cream-dark-color[style*="line-height:1.75"] {
  color: hsl(var(--primary-foreground) / 0.7) !important;
}

/* Image shadow-2xl on voucher preview */
.page-id-19 .mk-voucher__preview,
.page-id-19 .mk-voucher__preview img,
.mk-voucher__preview-wrap img {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
}

/* "Pasirinkite sumą" label styling - text-sm uppercase tracking-wide */
.page-id-19 .mk-voucher-label,
.page-id-19 p[style*="font-size:0.875rem"][style*="text-transform:uppercase"] {
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
}

/* Validity rules 2-column grid with border accent */
.page-id-19 .mk-validity-rules,
.page-id-19 .wp-block-columns.mk-validity-rules {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
}

.page-id-19 .mk-validity-rule,
.page-id-19 .wp-block-group[style*="border-left"] {
  border-left: 4px solid hsl(var(--primary)) !important;
  padding-left: 1rem !important;
}

@media (max-width: 768px) {
  .page-id-19 .mk-validity-rules {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   END SECTION 101: DOVANU KUPONAS PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 99: INFORMACIJA HUB PARITY FIXES (Agent 14)
   ========================================================================== */

/* C1: Content card wrapper — should have bg-card, rounded-xl, p-8, border */
.mk-info-content,
.mk-informacija-content {
  background: hsl(var(--card)) !important;
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
  padding: 2rem !important; /* p-8 */
  border: 1px solid hsl(var(--border)) !important;
  box-shadow: var(--shadow-card) !important;
}

/* C4: Panel header icons should be 32px and gold (React: text-gold w-8 h-8) */
.mk-info-section h2 svg,
.mk-informacija-section h3 svg,
.mk-info-panel-header svg,
.mk-info-content h2 svg,
.informacija .wp-block-group h2 svg,
.page-template-informacija .wp-block-group h2 svg {
  width: 2rem !important; /* 32px */
  height: 2rem !important;
  color: hsl(42 55% 58%) !important; /* gold #C4A255 */
}

/* M1: Hero H1 responsive */
.mk-info-hero h1 {
  font-size: clamp(2.25rem, 4vw, 3rem) !important;
}

/* Tab button base styling - Agent 13 */
.mk-info-tab-btn {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.625rem 1rem !important;
  background: transparent !important;
  border: none !important;
  color: hsl(var(--muted-foreground)) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border-radius: 0.25rem !important;
}

/* Tab hover state - NOT active (active uses forest green bg, fixed 2026-03-25) */
.mk-info-tab-btn:hover:not(.active) {
  color: hsl(var(--primary)) !important;
  background: hsl(var(--secondary) / 0.5) !important;
}

/* Tab icons 16px - Agent 13 */
.mk-info-tab-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Tab navigation inactive state — color should be muted-foreground */
.mk-info-tabs__nav a:not(.active):not([aria-current="page"]),
.mk-info-tab-btn:not(.active) {
  color: hsl(var(--muted-foreground)) !important;
}

.mk-info-tabs__nav a:not(.active):hover,
.mk-info-tab-btn:not(.active):hover {
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--muted) / 0.5) !important;
}

/* Active tab styling */
.mk-info-tabs__nav a.active,
.mk-info-tabs__nav a[aria-current="page"],
.mk-info-tab-btn.active {
  color: hsl(var(--primary-foreground)) !important;
  background: hsl(var(--primary)) !important;
  font-weight: 500 !important;
}

/* Active tab hover state - slightly darker forest */
.mk-info-tabs__nav a.active:hover,
.mk-info-tabs__nav a[aria-current="page"]:hover,
.mk-info-tab-btn.active:hover {
  background: hsl(160 30% 24%) !important;
}

/* Tab container background */
.mk-info-tabs__nav {
  display: flex !important;
  gap: 0.5rem !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 2rem !important;
  flex-wrap: wrap !important;
  background: hsl(var(--muted) / 0.5) !important;
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
  padding: 0.5rem !important; /* P1: Fixed from 0.25rem to match React p-2 */
}

/* Section title size */
.mk-info-section h2,
.mk-informacija-section h2 {
  font-size: 1.5rem !important; /* text-xl */
  font-weight: 600 !important;
}

/* Content sections - proper heading hierarchy - Agent 13 */
.mk-info-section h3,
.mk-informacija-section h3 {
  font-size: 1.25rem !important; /* text-lg */
  font-weight: 600 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}

/* FAQ accordion animation - verified open/close - Agent 13 */
.mk-faq-item {
  transition: all 0.2s ease-out !important;
}

.mk-faq-content {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease-out !important;
}

.mk-faq-content.active {
  max-height: 500px !important;
  animation: mk-fade-in 0.2s ease-out !important;
}
.mk-info-section h2,
.mk-informacija-section h2 {
  font-size: 1.25rem !important; /* text-xl */
  font-weight: 600 !important;
}

/* ==========================================================================
   END SECTION 99: INFORMACIJA HUB PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 100: PLENERAI PAGE PARITY FIXES (Agent 15)
   ========================================================================== */

/* Hero height 60vh */
.mk-plenerai-hero {
  min-height: 60vh !important;
}

/* Event card icons should be 32x32 */
.mk-plenerai-event svg,
.mk-event-info-card svg {
  width: 2rem !important;
  height: 2rem !important;
}

/* Event badge styling */
.mk-plenerai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: hsl(var(--gold) / 0.2);
  color: hsl(var(--gold));
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.mk-plenerai-badge svg {
  width: 1rem;
  height: 1rem;
}

/* Participants grid - React: grid md:grid-cols-2 lg:grid-cols-3 gap-4 */
.mk-plenerai-participants {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}

@media (min-width: 768px) {
  .mk-plenerai-participants {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .mk-plenerai-participants {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.mk-plenerai-participant {
  text-align: center;
}

.mk-plenerai-participant strong {
  display: block;
  font-size: 0.875rem;
}

.mk-plenerai-participant span {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* Gallery grid responsive heights */
.mk-plenerai-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.mk-plenerai-gallery img {
  border-radius: 0.25rem;
  object-fit: cover;
  transition: transform 500ms ease;
}

.mk-plenerai-gallery img:hover {
  transform: scale(1.05);
}

/* Tall images (1st and 3rd in grid) */
.mk-plenerai-gallery .tall img {
  height: 12rem; /* h-48 */
}
@media (min-width: 768px) {
  .mk-plenerai-gallery .tall img {
    height: 16rem; /* md:h-64 */
  }
}

/* Short images (2nd and 4th in grid) */
.mk-plenerai-gallery .short img {
  height: 8rem; /* h-32 */
}
@media (min-width: 768px) {
  .mk-plenerai-gallery .short img {
    height: 12rem; /* md:h-48 */
  }
}

/* ==========================================================================
   END SECTION 100: PLENERAI PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 103: CART & CHECKOUT PARITY FIXES (Agent 18)
   Implements: C18-1 (cart badge RED), C18-4 (empty cart icon),
               C18-5 (secondary message), card layout for items
   ========================================================================== */

/* ------------------------------------------------------------------
   C18-1: Cart Badge RED - Maximum Specificity Override
   React uses destructive/red color for cart badge, not primary/green
   ------------------------------------------------------------------ */
html body .wc-block-mini-cart__badge,
html body .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge,
html body .wc-block-mini-cart__badge[style],
html body [class*="mini-cart"] .wc-block-mini-cart__badge {
  background: hsl(0 65% 50%) !important;
  background-color: hsl(0 65% 50%) !important;
  color: hsl(var(--forest-dark)) !important;
  border: none !important;
}

/* ------------------------------------------------------------------
   C18-4: Empty Cart Icon - Large 64px
   React displays large faded ShoppingCart icon when cart is empty
   ------------------------------------------------------------------ */
.wc-block-cart__empty-cart__image,
.woocommerce-cart-is-empty svg,
.cart-empty svg {
  width: 4rem !important;
  height: 4rem !important;
  margin: 0 auto 1rem !important;
  color: hsl(var(--muted-foreground) / 0.3) !important;
}

/* Empty cart container styling */
.woocommerce-cart-is-empty,
.cart-empty {
  text-align: center !important;
  padding: 4rem 2rem !important;
}

/* ------------------------------------------------------------------
   C18-5: Empty Cart Secondary Message
   React shows: "Pridėkite kūrinius su „Pirkti dabar" arba iš poaukcioninės prekybos"
   Added via ::after pseudo-element since WC doesn't provide hook
   ------------------------------------------------------------------ */
.woocommerce-cart-is-empty .cart-empty::after,
.wc-block-cart__empty-cart__title::after {
  content: "Pridėkite kūrinius su „Pirkti dabar" arba iš poaukcioninės prekybos";
  display: block;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.5rem;
}

/* ------------------------------------------------------------------
   Cart Items Card Layout - Match React's Muted Background Cards
   React uses card-style layout with muted/30 background for each item
   ------------------------------------------------------------------ */
.woocommerce-cart-form__cart-item,
.wc-block-cart-items__row {
  background: hsl(var(--muted) / 0.3) !important;
  border-radius: var(--radius) !important; /* rounded-lg = 4px (React custom config) */
  padding: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

/* Cart item image - consistent sizing */
.woocommerce-cart-form__cart-item .product-thumbnail img,
.wc-block-cart-item__image img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
}

/* Cart item title hover - primary color */
.woocommerce-cart-form__cart-item .product-name a:hover,
.wc-block-cart-item__product-name a:hover {
  color: hsl(var(--primary)) !important;
}

/* ------------------------------------------------------------------
   Return to Shop Button - Outline Variant
   React uses outline button style, not filled
   ------------------------------------------------------------------ */
.return-to-shop .button,
.wc-block-cart__return-to-shop-button {
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  padding: 0.5rem 1.5rem !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
}

.return-to-shop .button:hover,
.wc-block-cart__return-to-shop-button:hover {
  background: hsl(var(--accent)) !important;
}

/* ==========================================================================
   END SECTION 103: CART & CHECKOUT PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 105: 404 & SEARCH PAGE PARITY FIXES (Agent 20)
   React Reference: NotFound.tsx → simple centered layout with muted bg,
   Inter 4xl heading, paragraph subtitle, underlined text link
   ========================================================================== */

/* 404 container - full viewport height with muted background */
/* React: flex min-h-screen items-center justify-center bg-muted */
.error404 .mk-404,
.error404 .entry-content,
.error404 main {
  min-height: 100vh !important; /* React: min-h-screen = 100vh */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: hsl(36 20% 90%) !important; /* React: bg-muted = hsl(var(--muted)) */
  padding: 2rem !important;
}

/* 404 H1 - Inter 4xl bold */
/* React: mb-4 text-4xl font-bold → text-4xl = 2.25rem/2.5rem, font-bold = 700, mb-4 = 1rem */
.error404 h1,
.mk-404 h1 {
  font-family: var(--wp--preset--font-family--body), Inter, sans-serif !important;
  font-size: 2.25rem !important; /* React: text-4xl = 2.25rem (36px) */
  line-height: 2.5rem !important; /* React: text-4xl line-height */
  font-weight: 700 !important; /* React: font-bold */
  color: hsl(160 30% 18%) !important; /* React: inherits foreground color */
  margin-bottom: 1rem !important; /* React: mb-4 = 1rem */
  text-align: center !important;
}

/* 404 message - paragraph with muted color */
/* React: mb-4 text-xl text-muted-foreground → text-xl = 1.25rem/1.75rem, mb-4 = 1rem */
.error404 .page-content p,
.mk-404 p {
  font-size: 1.25rem !important; /* React: text-xl = 1.25rem (20px) */
  line-height: 1.75rem !important; /* React: text-xl line-height */
  color: hsl(160 15% 40%) !important; /* React: text-muted-foreground = hsl(var(--muted-foreground)) */
  text-align: center !important;
  margin-bottom: 1rem !important; /* React: mb-4 = 1rem */
  max-width: 32rem !important;
}

/* Override if it's mistakenly an H2 */
.error404 h2,
.mk-404 h2 {
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: hsl(var(--muted-foreground)) !important;
  text-align: center !important;
}

/* 404 link - simple underlined text, not button */
.error404 a.button,
.error404 .wp-block-button__link,
.error404 .wp-block-button a,
.mk-404 a,
.mk-404__link a {
  background: none !important;
  color: hsl(160 30% 28%) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  border: none !important;
  padding: 0 !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* React: hover:text-primary/90 = 90% opacity of primary color */
.error404 a:hover,
.mk-404 a:hover,
.mk-404__link a:hover {
  color: hsl(160 30% 28% / 0.9) !important; /* React: hover:text-primary/90 */
  background: transparent !important;
}
.search-results .entry-summary {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.875rem !important;
}

.search-results article {
  margin-bottom: 2rem !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.search-results article:last-child {
  border-bottom: none !important;
}

/* No results message */
.search-no-results p {
  text-align: center !important;
  color: hsl(var(--muted-foreground)) !important;
  padding: 2rem !important;
  font-size: 1rem !important;
}

.search-no-results h1 {
  text-align: center !important;
  margin-bottom: 1rem !important;
}

/* ==========================================================================
   END SECTION 105: 404 & SEARCH PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 104: MY ACCOUNT PAGE PARITY FIXES (Agent 19)
   ========================================================================== */

/* Login container width 896px (max-w-4xl) */
.woocommerce-account .woocommerce,
.page-id-25 .entry-content {
  max-width: 56rem !important; /* 896px */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Stat cards background - card not muted */
.mk-account-stat,
.woocommerce-MyAccount-content .stat-card {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important; /* rounded-lg = 4px (React custom config) */
  padding: 1.5rem !important;
}

/* Edit button - ghost variant (no border) */
.mk-account-edit-btn,
.woocommerce-MyAccount-content .edit-account-btn {
  background: transparent !important;
  border: none !important;
  color: hsl(var(--muted-foreground)) !important;
  padding: 0.5rem !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
}

.mk-account-edit-btn:hover,
.woocommerce-MyAccount-content .edit-account-btn:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

/* Info labels - normal case not uppercase */
.mk-account-label,
.woocommerce-MyAccount-content label,
.woocommerce-MyAccount-content dt {
  text-transform: none !important;
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* Bid status badges styling */
.mk-bid-status-active,
.bid-status--active {
  background: hsl(var(--primary) / 0.1) !important;
  color: hsl(var(--primary)) !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

.mk-bid-status-outbid,
.bid-status--outbid {
  background: hsl(45 93% 47% / 0.1) !important;
  color: hsl(45 93% 35%) !important;
}

.mk-bid-status-won,
.bid-status--won {
  background: hsl(142 76% 36% / 0.1) !important;
  color: hsl(142 76% 30%) !important;
}

.mk-bid-status-lost,
.bid-status--lost {
  background: hsl(0 65% 50% / 0.1) !important;
  color: hsl(0 65% 45%) !important;
}

/* Register form intro text */
.mk-register-intro {
  background: hsl(var(--muted) / 0.3) !important;
  padding: 1rem !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  margin-bottom: 1.5rem !important;
}

.mk-register-intro__text {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* ------------------------------------------------------------------
   Agent 17 Additions: Tab Navigation & Logout Button
   Date: 2026-03-21
   ------------------------------------------------------------------ */

/* Account navigation - flexbox column layout */
.woocommerce-MyAccount-navigation ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce-MyAccount-navigation a {
  display: block !important;
  padding: 0.75rem 1rem !important;
  color: hsl(160 15% 40%) !important;
  border-radius: 0.25rem !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
  background: hsl(36 25% 88%) !important;
  color: hsl(160 30% 28%) !important;
}

/* Logout link - RED color to match React */
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a {
  color: hsl(0 65% 50%) !important;
}

.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: hsl(0 65% 50% / 0.1) !important;
  color: hsl(0 65% 45%) !important;
}

/* Login/Register form improvements */
.woocommerce-form-login,
.woocommerce-form-register {
  background: hsl(40 30% 96%) !important;
  padding: 2rem !important;
  border-radius: var(--radius) !important; /* rounded-lg = 4px (React custom config) */
  box-shadow: var(--shadow-card) !important;
}

/* Container proper padding - P19 FIX: py-12 = 3rem */
.woocommerce-account .woocommerce {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* ==========================================================================
   END SECTION 104: MY ACCOUNT PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 105: KONTAKTAI PAGE PARITY FIXES
   Agent 6 - 2026-03-21
   ========================================================================== */

/* Kontaktai - Form input height and border-radius fixes */
/* FIX-AGENT-7: border-radius 0.25rem -> 0.125rem to match React input.tsx rounded-md */
/* React uses rounded-md which in tailwind.config.ts = calc(var(--radius) - 2px) = 0.125rem */
.page-id-15 .wpcf7-form input[type="text"],
.page-id-15 .wpcf7-form input[type="email"],
.page-id-15 .wpcf7-form textarea {
  height: 40px !important;
  border-radius: 0.125rem !important;
  padding: 0.5rem 0.75rem !important;
}

.page-id-15 .wpcf7-form textarea {
  height: auto !important;
  min-height: 120px !important;
}

/* Submit button - catalog style matching React */
.page-id-15 .wpcf7-submit {
  background: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
  border-radius: 0.25rem !important;
  height: 40px !important;
  padding: 0 1.5rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  box-shadow: var(--shadow-elegant) !important;
}

/* ==========================================================================
   END SECTION 105: KONTAKTAI PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 106: POAUKCIONINE PAGE PARITY FIXES
   Agent 10 - 2026-03-21
   ========================================================================== */

/* Poaukcionine - Deadline badge (amber "Liko X d." badge) - P2 fixed */
.mk-deadline-badge,
.mk-badge--post-auction {
  background: hsl(42 86% 55%) !important;
  color: hsl(var(--forest-dark)) !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* Status badge - Poaukcioninė (amber badge) */
.mk-badge--poaukcionine {
  background: hsl(42 55% 58% / 0.2) !important;
  color: hsl(42 55% 40%) !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* Header layout - flex with clock icon */
.page-id-93 .mk-page-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Override block layout flow */
.page-id-93 .mk-page-header.is-layout-flow {
  display: flex !important;
}

/* Clock icon styling */
.page-id-93 .mk-page-header svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: hsl(var(--gold)) !important;
}

/* Filter row - ensure proper display */
.mk-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 2rem !important;
  padding: 1rem !important;
  background: hsl(var(--card)) !important;
  border-radius: var(--radius) !important; /* rounded-lg = 4px (React custom config) */
  box-shadow: var(--shadow-card) !important;
}

/* Product card title visibility */
.page-id-93 .mk-card h3,
.page-id-93 .woocommerce-loop-product__title {
  display: block !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.5rem !important;
  font-family: var(--font-display) !important;
}

/* Ensure badges show on product cards */
.page-id-93 .mk-badge,
.page-id-93 .mk-status-badge {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================================
   END SECTION 106: POAUKCIONINE PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 107: GALERIJA CATEGORY BUTTON FIXES (Agent 9)
   Deployed: 2026-03-21
   Critical category filter button styling to match React
   ========================================================================== */

/* ------------------------------------------------------------------
   G3: Category filter buttons background color
   React: bg-primary (forest green) for category buttons
   WP was: bg-cream-light (incorrect)
   Issue: Categories background color wrong - should be forest green
   ------------------------------------------------------------------ */
.page-id-92 .mk-gallery-filter-btn,
.page-id-92 .wp-block-button__link[data-category] {
  background: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
  border-radius: 0.25rem !important;
  padding: 0.5rem 1.5rem !important;
  font-weight: 500 !important;
  transition: all 300ms ease !important;
}

.page-id-92 .mk-gallery-filter-btn:hover,
.page-id-92 .wp-block-button__link[data-category]:hover {
  background: hsl(160 30% 35%) !important;
}

.page-id-92 .mk-gallery-filter-btn.active,
.page-id-92 .wp-block-button__link[data-category].active {
  background: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important;
}

/* ==========================================================================
   END SECTION 107: GALERIJA CATEGORY BUTTON FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 108: HOMEPAGE HERO PARITY FIXES (Agent 1)
   Date: 2026-03-21

   Critical issues fixed:
   1. Height responsive - React uses h-[80vh] lg:h-[90vh]
   2. Left gradient opacity - React from-foreground/80 via-foreground/50
   3. H1 responsive sizing - React text-4xl md:text-5xl lg:text-6xl
   4. H1 line-height - React leading-tight (1.25)
   5. Button animation delay - React 400ms
   ========================================================================== */

/* ------------------------------------------------------------------
   H1: Hero Height - Responsive Breakpoints
   React: h-[80vh] on mobile, lg:h-[90vh] at 1024px+
   WP was: 80vh mobile, 90vh at 768px
   ------------------------------------------------------------------ */
.mk-hero {
  min-height: 80vh !important;
}

/* Override previous media query at 768px */
@media (min-width: 768px) {
  .mk-hero {
    min-height: 80vh !important; /* Keep 80vh until lg breakpoint */
  }
}

/* Apply 90vh only at lg breakpoint (1024px+) matching React */
@media (min-width: 1024px) {
  .mk-hero {
    min-height: 90vh !important;
  }
}

/* ------------------------------------------------------------------
   H2: Left Gradient Overlay Opacity
   React: from-foreground/80 via-foreground/50 to-transparent
   WP was: foreground/0.75, foreground/0.45
   ------------------------------------------------------------------ */
.mk-hero__overlay--right,
.mk-hero .wp-block-cover__background {
  background: linear-gradient(
    to right,
    hsl(var(--foreground) / 0.8),
    hsl(var(--foreground) / 0.5),
    transparent
  ) !important;
}

/* ------------------------------------------------------------------
   H3: H1 Responsive Font Sizing
   React: text-4xl (2.25rem) md:text-5xl (3rem) lg:text-6xl (3.75rem)
   WP was: Using WP preset sizes
   ------------------------------------------------------------------ */
.mk-hero__title,
.mk-hero h1 {
  font-size: 2.25rem !important; /* text-4xl base */
}

@media (min-width: 768px) {
  .mk-hero__title,
  .mk-hero h1 {
    font-size: 3rem !important; /* md:text-5xl */
  }
}

@media (min-width: 1024px) {
  .mk-hero__title,
  .mk-hero h1 {
    font-size: 3.75rem !important; /* lg:text-6xl */
  }
}

/* ------------------------------------------------------------------
   H4: H1 Line Height
   React: leading-tight = 1.25
   WP was: 1.15 in some places
   ------------------------------------------------------------------ */
.mk-hero__title,
.mk-hero h1 {
  line-height: 1.25 !important;
}

/* ------------------------------------------------------------------
   H5: Button Container Animation Delay
   React: 0.4s (400ms)
   WP was: 0.3s (300ms)
   ------------------------------------------------------------------ */
.mk-hero__actions,
.mk-hero .wp-block-buttons {
  animation-delay: 0.4s !important;
}

/* ==========================================================================
   END SECTION 108: HOMEPAGE HERO PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 110: SINGLE PRODUCT PARITY FIXES (Agent 8)
   Deployed: 2026-03-21
   Critical fixes for single product page to match React ArtworkDetail 1:1
   Issues: SP10-1 (column ratio), SP10-2 (bid count badge), SP10-3 (info card)
   Reference: REACT-VS-WORDPRESS-FULL-PARITY-AUDIT.md
   ========================================================================== */

/* ------------------------------------------------------------------
   SP10-1: Column Ratio - MUST be 50/50 not 60/40
   React: Two equal columns in ArtworkDetail.tsx
   WP: WooCommerce defaults to 60/40 split
   Fix: Force exact 50/50 split with max specificity
   ------------------------------------------------------------------ */
.single-product .woocommerce div.product div.images,
.single-product .woocommerce div.product .woocommerce-product-gallery,
.single-product .mk-product-detail__gallery,
.single-product .wp-block-column:first-child {
  flex-basis: 50% !important;
  max-width: 50% !important;
  width: 50% !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

.single-product .woocommerce div.product div.summary,
.single-product .woocommerce div.product .summary.entry-summary,
.single-product .mk-product-detail__info,
.single-product .wp-block-column:last-child {
  flex-basis: 50% !important;
  max-width: 50% !important;
  width: 50% !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

/* Responsive: Stack columns on mobile */
@media (max-width: 768px) {
  .single-product .woocommerce div.product div.images,
  .single-product .woocommerce div.product div.summary,
  .single-product .mk-product-detail__gallery,
  .single-product .mk-product-detail__info,
  .single-product .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ------------------------------------------------------------------
   SP10-2: Bid Count Badge - Already fixed above in SECTION 95
   Badge variant="outline" with TrendingUp icon
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   SP10-3: Info Card Background
   React: bg-secondary/30 rounded-sm p-6 mb-6
   WP: Verify background color matches
   ------------------------------------------------------------------ */
.mk-product-info-card,
.single-product .product-meta-card,
.single-product .mk-artwork-info {
  background: hsl(var(--secondary) / 0.3) !important;
  padding: 1.5rem !important;
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
  margin-bottom: 1.5rem !important;
}

/* Grid layout for info card items */
.mk-product-info-card .grid,
.single-product .product-meta-card .grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
}

/* Info card typography */
.mk-product-info-card dt,
.single-product .product-meta-card dt {
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0.25rem !important;
  font-weight: 500 !important;
}

.mk-product-info-card dd,
.single-product .product-meta-card dd {
  font-size: 0.875rem !important;
  color: hsl(var(--foreground)) !important;
  line-height: 1.5 !important;
}

/* ------------------------------------------------------------------
   SP10-4: Back Link Arrow Icon
   React: ArrowLeft icon with text and hover effect
   Already covered in SECTION 94 above
   ------------------------------------------------------------------ */

/* ==========================================================================
   END SECTION 110: SINGLE PRODUCT PARITY FIXES
   ========================================================================== */


/* ==========================================================================
   SECTION 109: KATALOGAS (CATALOG) PAGE PARITY FIXES (Agent 7)
   Deployed: 2026-03-21
   React reference: src/pages/Catalog.tsx
   Critical fixes for toolbar buttons, grid/list toggle, and product card meta
   ========================================================================== */

/* ------------------------------------------------------------------
   K1: PDF and OneBid buttons styling
   React: FileText + ExternalLink icons, variant="catalog" and "elegant"
   ------------------------------------------------------------------ */
.mk-catalog__header .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  padding: 0.5rem 1.5rem !important;
  height: 2.5rem !important;
  border-radius: 0.25rem !important;
  transition: all 300ms ease !important;
}

/* PDF button (catalog variant) */
.mk-catalog__header .mk-btn-catalog .wp-block-button__link {
  background: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;
}

.mk-catalog__header .mk-btn-catalog .wp-block-button__link:hover {
  background: hsl(160 30% 35%) !important;
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;
}

/* OneBid button (elegant variant) */
.mk-catalog__header .mk-btn-elegant .wp-block-button__link {
  background: transparent !important;
  color: hsl(160 30% 18%) !important;
  border: 1px solid hsl(160 30% 18% / 0.2) !important;
}

.mk-catalog__header .mk-btn-elegant .wp-block-button__link:hover {
  border-color: hsl(160 30% 28%) !important;
  color: hsl(160 30% 28%) !important;
}

/* Icon sizing in buttons */
.mk-catalog__header .wp-block-button__link svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------
   K2: Grid/List view toggle buttons
   React: Grid and List icons, bordered toggle group
   ------------------------------------------------------------------ */
.mk-view-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: 1px solid hsl(36 20% 82%) !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  overflow: hidden !important;
  height: 2.25rem !important;
}

.mk-view-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  background: hsl(40 30% 96%) !important;
  border: none !important;
  cursor: pointer !important;
  color: hsl(160 15% 40%) !important;
  transition: background 200ms, color 200ms !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.mk-view-btn + .mk-view-btn {
  border-left: 1px solid hsl(36 20% 82%) !important;
}

.mk-view-btn:hover {
  background: hsl(36 20% 90%) !important;
  color: hsl(160 30% 18%) !important;
}

.mk-view-btn.active,
.mk-view-btn:focus {
  background: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
}

.mk-view-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------
   K3: Product card meta visibility
   Ensure lot number, artist, dates, and estimate are visible
   React: Displays on all cards in grid/list view
   ------------------------------------------------------------------ */
.mk-product-card .mk-card-meta {
  display: block !important;
  visibility: visible !important;
}

.mk-product-card .mk-card-meta__artist {
  font-size: 0.875rem !important;
  color: hsl(160 15% 40%) !important;
  margin-bottom: 0.25rem !important;
}

.mk-product-card .mk-card-meta__dates {
  font-size: 0.75rem !important;
  font-style: italic !important;
}

.mk-product-card .mk-card-meta__estimate {
  font-size: 0.875rem !important;
  color: hsl(42 55% 58%) !important;
  font-weight: 500 !important;
}

.mk-product-card .mk-card-meta__bid-count {
  font-size: 0.875rem !important;
  color: hsl(160 15% 40%) !important;
}

/* ------------------------------------------------------------------
   K4: List view layout — DEPRECATED — SEE SECTION 122 (CONSOLIDATED)
   ------------------------------------------------------------------ */
/* DUPLICATE REMOVED by Agent P1-06: Partial implementation (12rem x 12rem, no radius specified)
   Consolidated into Section 122 with correct React values (192px x 192px SQUARE, 0.125rem radius)
   Lines 15110-15126 commented out 2026-03-22
*/
/*
.mk-product-grid.mk-view-list .mk-product-card {
  display: flex !important;
  flex-direction: row !important;
}

.mk-product-grid.mk-view-list .wp-block-woocommerce-product-image {
  flex-shrink: 0 !important;
  width: 12rem !important;
  height: 12rem !important;
}

.mk-product-grid.mk-view-list .wp-block-group {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
*/

/*
 * Version 1.17.7 - P30 Mobile Menu Parity (2026-03-23)
 * - Section 134: Mobile menu 1:1 React parity
 * - Converts WP overlay menu to inline expand (matches React behavior)
 * - Hamburger: ghost button, 2.5rem, w-5 h-5 icon
 * - Menu: py-4 border-t animate-fade-in
 * - Section labels: text-sm font-medium text-muted-foreground
 * - Submenu links: px-4 py-2 hover:bg-muted rounded
 * - Top links: px-2 py-2 font-medium hover:text-primary
 * - Breakpoint: 1024px (lg:hidden)
 * Reference: docs/PARITY-AGENT-LOGS/P30-MOBILE-MENU.md
 */

/* ------------------------------------------------------------------
   K5: Toolbar alignment
   React: result count left, sort + view toggle right
   ------------------------------------------------------------------ */
.mk-catalog__toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

/* ------------------------------------------------------------------
   K6: Result count styling
   React: "Rasta: X kūrinių" with muted foreground
   ------------------------------------------------------------------ */
.woocommerce-result-count {
  font-size: 0.875rem !important;
  color: hsl(160 15% 40%) !important;
  font-weight: 400 !important;
}

/* ==========================================================================
   END SECTION 109: KATALOGAS PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 109: PARDAVIMAS PAGE COMPREHENSIVE PARITY FIXES (Agent 4 Phase 2)
   Generated: 2026-03-21
   React Source: src/pages/HowToSell.tsx
   WordPress Page: /pardavimas/ (page-id-17)

   CRITICAL FINDINGS:
   1. Hero section should NOT exist (React has none)
   2. Step card borders must be removed (shadow only)
   3. Step icons must be 40px (React w-10 h-10)
   4. Number badges should show "1" not "01"
   5. Form labels required for accessibility
   ========================================================================== */

/* ------------------------------------------------------------------
   P4-1: Hero Section - MUST NOT EXIST (CRITICAL)
   React HowToSell.tsx has NO hero banner. Page starts with H1 on cream.
   Maximum specificity to ensure hero is completely hidden.
   ------------------------------------------------------------------ */
body.page-id-17 .mk-page-hero,
body.page-id-17 .mk-hero,
body.page-id-17 .wp-block-cover.mk-page-hero,
body.page-id-17 main > .wp-block-cover:first-child,
body.page-id-17 .entry-content > .wp-block-cover:first-child,
body[class*="pardavimas"] .mk-page-hero,
body[class*="pardavimas"] .mk-hero,
.page-template-page-pardavimas .mk-page-hero {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------
   P4-2: Step Cards - NO BORDERS, Shadow Only (CRITICAL)
   React step cards: bg-card rounded-sm shadow-card (NO border)
   WordPress incorrectly adds border via has-border-color class.
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step-card,
body.page-id-17 .mk-sell-step,
body.page-id-17 .mk-step-card,
body.page-id-17 .mk-sell-step-card.has-border-color,
body.page-id-17 .mk-sell-step-card[style*="border"],
body.page-id-17 .wp-block-group.mk-sell-step-card,
.page-pardavimas .mk-sell-step-card,
.page-pardavimas .mk-sell-step {
  border: 0 none transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow 300ms ease !important;
}

body.page-id-17 .mk-sell-step-card:hover,
body.page-id-17 .mk-sell-step:hover,
.page-pardavimas .mk-sell-step-card:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* ------------------------------------------------------------------
   P4-3: Step Icons - 40px (React w-10 h-10) (CRITICAL)
   React HowToSell.tsx step cards use icons at w-10 h-10 = 40x40px.
   WordPress has hardcoded width/height attributes in SVG elements.
   Use min-width/min-height to override inline SVG attributes.
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step-icon svg,
body.page-id-17 .mk-sell-step-card svg,
body.page-id-17 .mk-sell-step svg,
body.page-id-17 .mk-step-card svg,
body.page-id-17 .mk-step__icon svg,
body.page-id-17 .mk-sell-step__icon svg,
.page-pardavimas .mk-sell-step-icon svg,
.page-pardavimas .mk-sell-step-card svg,
.page-pardavimas .mk-sell-step svg {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
}

/* ------------------------------------------------------------------
   P4-4: Step Number Badges - 2rem Gold Circles (CRITICAL)
   React HowToSell.tsx: w-8 h-8 (2rem) bg-gold rounded-full
   Positioned absolute -top-3 -left-3 (-0.75rem)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step-number,
body.page-id-17 .mk-sell-step__badge,
body.page-id-17 .mk-step__number,
body.page-id-17 .mk-step-number,
.page-pardavimas .mk-sell-step-number,
.page-pardavimas .mk-sell-step__badge {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  background: hsl(42 55% 58%) !important; /* --gold */
  color: hsl(160 30% 18%) !important; /* --forest-dark */
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  position: absolute !important;
  top: -0.75rem !important;
  left: -0.75rem !important;
  box-shadow: var(--shadow-card) !important;
  z-index: 10 !important;
}

/* Ensure step cards have relative positioning for absolute badge */
body.page-id-17 .mk-sell-step-card,
body.page-id-17 .mk-sell-step,
body.page-id-17 .mk-step-card,
.page-pardavimas .mk-sell-step-card,
.page-pardavimas .mk-sell-step {
  position: relative !important;
}

/* ------------------------------------------------------------------
   P4-5: Step Card Padding & Border Radius (HIGH)
   React: p-6 rounded-sm (1.5rem padding, 0.125rem radius)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step-card,
body.page-id-17 .mk-sell-step,
.page-pardavimas .mk-sell-step-card,
.page-pardavimas .mk-sell-step {
  padding: 1.5rem !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
}

/* ------------------------------------------------------------------
   P4-6: Step Icon Container Margin (MEDIUM)
   React: mb-4 (1rem margin-bottom)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step-icon,
body.page-id-17 .mk-sell-step__icon,
.page-pardavimas .mk-sell-step-icon {
  margin-top: 1.25rem !important;
  margin-bottom: 1rem !important;
}

/* ------------------------------------------------------------------
   P4-7: Step Title & Description Styling (MEDIUM)
   React title: text-xl font-semibold text-foreground mb-3
   React desc: text-sm text-muted-foreground leading-relaxed
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step__title,
body.page-id-17 .mk-sell-step-card h3,
.page-pardavimas .mk-sell-step__title {
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin-top: 1rem !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.4 !important;
}

body.page-id-17 .mk-sell-step__desc,
body.page-id-17 .mk-sell-step-card p,
.page-pardavimas .mk-sell-step__desc {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.625 !important; /* leading-relaxed */
  margin: 0 !important;
}

/* ------------------------------------------------------------------
   P4-8: Form Submit Button - Auto Width on Desktop (MEDIUM)
   React: w-full md:w-auto (full width mobile, auto desktop)
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  body.page-id-17 .wpcf7-submit,
  .page-pardavimas .wpcf7-submit {
    width: auto !important;
    min-width: 180px !important;
  }
}

/* ------------------------------------------------------------------
   P4-9: Responsive Adjustments (MEDIUM)
   Mobile optimizations for smaller screens
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  body.page-id-17 .mk-sell-step-card,
  body.page-id-17 .mk-sell-step {
    padding: 1.25rem !important;
  }

  body.page-id-17 .mk-sell-step-icon svg,
  body.page-id-17 .mk-sell-step__icon svg {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
  }

  body.page-id-17 .mk-sell-step__title {
    font-size: 1rem !important;
  }
}

/* ==========================================================================
   END SECTION 109: PARDAVIMAS PAGE COMPREHENSIVE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 109: PIRKIMAS PAGE COMPLETE PARITY FIXES (Agent 5 - Phase 2)
   Deployed: 2026-03-21

   CRITICAL FINDING: React does NOT have a hero section on Pirkimas.
   WordPress incorrectly shows dark green hero - MUST BE HIDDEN.

   Fixes:
   1. Hide hero section completely
   2. Fix H1 color (should be dark on cream, not cream on dark)
   3. Fix description color (should be muted-foreground on cream)
   4. Step layout: left column 15%, right column 85%
   5. Feature card icons: 40px
   ========================================================================== */

/* ------------------------------------------------------------------
   P1: CRITICAL - Hide incorrect hero section
   React has NO hero on Pirkimas page
   ------------------------------------------------------------------ */
.page-id-16 .mk-page-hero,
body.pirkimas .mk-page-hero,
body.page-pirkimas .mk-page-hero,
body[class*="pirkimas"] .mk-page-hero,
.page-id-16 .wp-block-cover:first-child,
.page-id-16 main > .wp-block-cover:first-child,
.page-id-16 .entry-content > .wp-block-cover:first-child {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* ------------------------------------------------------------------
   P2: Fix H1 color - dark on cream background (not cream on dark)
   ------------------------------------------------------------------ */
.page-id-16 h1,
.page-id-16 .wp-block-heading {
  color: hsl(var(--foreground)) !important;
  background: transparent !important;
}

/* ------------------------------------------------------------------
   P3: Fix description/intro text color - muted-foreground
   ------------------------------------------------------------------ */
.page-id-16 .mk-page-intro,
.page-id-16 .entry-content > p:first-of-type,
.page-id-16 .wp-block-paragraph {
  color: hsl(var(--muted-foreground)) !important;
}

/* ------------------------------------------------------------------
   P4: Step layout - Fixed 4rem badge + flexible content
   CRITICAL FIX: Changed from percentage (15%/85%) to fixed width
   React uses 4rem (64px) fixed badge width, not percentage
   ------------------------------------------------------------------ */
.page-id-16 .mk-step,
.page-id-16 .mk-step-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1.5rem !important;
  margin-bottom: 2rem !important; /* space-y-8 between steps */
}

.page-id-16 .mk-step__number,
.page-id-16 .mk-step-number,
.page-id-16 .mk-step-card__badge {
  flex-shrink: 0 !important;
  width: 4rem !important; /* Fixed 64px width */
  height: 4rem !important;
  flex-basis: auto !important; /* Override percentage */
  max-width: none !important; /* Remove percentage constraint */
  min-width: 4rem !important;
}

.page-id-16 .mk-step__content,
.page-id-16 .mk-step-content {
  flex: 1 !important; /* Flexible content fills remaining space */
  flex-basis: auto !important; /* Override percentage */
  max-width: none !important; /* Remove percentage constraint */
}

/* Steps container spacing */
.page-id-16 .mk-steps-container,
.page-id-16 .wp-block-group.mk-steps {
  margin-bottom: 4rem !important; /* mb-16 after steps section */
}

/* ------------------------------------------------------------------
   P5: Feature card icons - 40px size
   ------------------------------------------------------------------ */
.page-id-16 .mk-feature-card svg,
.page-id-16 .mk-pirkimas-feature svg,
.page-id-16 .mk-feature-card__icon svg,
.page-id-16 .mk-card svg {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

/* Feature card icon container */
.page-id-16 .mk-feature-card__icon,
.page-id-16 .mk-card__icon {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ------------------------------------------------------------------
   P6: Ensure cream background (not dark like hero would imply)
   ------------------------------------------------------------------ */
.page-id-16 {
  background: hsl(var(--background)) !important;
}

.page-id-16 main,
.page-id-16 .entry-content {
  background: hsl(var(--background)) !important;
}

/* ==========================================================================
   END SECTION 109: PIRKIMAS PAGE COMPLETE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 110: PLENERAI 1:1 REACT PARITY (Agent 11 - Phase 8)
   React Source: src/pages/Plenerai.tsx
   Deployed: 2026-03-21
   Fixes: Hero height/gradient, event card shadow/layout, gallery masonry
   ========================================================================== */

/* ------------------------------------------------------------------
   PL-1: Hero Section - Exact Height and Min-Height
   React: h-[60vh] min-h-[500px]
   Fixed: Use max() to ensure BOTH 60vh AND 500px are always respected
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai-hero {
  min-height: max(60vh, 500px) !important;
  height: 60vh !important;
}

/* ------------------------------------------------------------------
   PL-2: Hero Gradient - Three-layer from React
   React: bg-gradient-to-b from-primary/80 via-primary/60 to-background
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai-hero .wp-block-cover__background {
  background: linear-gradient(
    to bottom,
    hsl(var(--primary) / 0.8) 0%,
    hsl(var(--primary) / 0.6) 50%,
    hsl(var(--background)) 100%
  ) !important;
  opacity: 1 !important;
}

/* ------------------------------------------------------------------
   PL-3: Event Info Card - Exact React Specs
   React: bg-card rounded-2xl shadow-2xl border overflow-hidden
   React: -mt-20 relative z-10 (overlapping hero)
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai__info {
  margin-top: -5rem !important;
  position: relative !important;
  z-index: 10 !important;
  background: hsl(var(--card)) !important;
  border-radius: 1rem !important;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
  border: 1px solid hsl(var(--border)) !important;
  overflow: hidden !important;
}

/* ------------------------------------------------------------------
   PL-4: Event Card Header Gradient
   React: bg-gradient-to-r from-primary to-primary/80 p-6 md:p-8
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai__header {
  background: linear-gradient(
    to right,
    hsl(var(--primary)) 0%,
    hsl(var(--primary) / 0.8) 100%
  ) !important;
  padding: 1.5rem !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__header {
    padding: 2rem !important;
  }
}

/* ------------------------------------------------------------------
   PL-5: Icon Boxes in Event Card
   React: w-16 h-16 rounded-xl bg-primary-foreground/10 backdrop-blur
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai-icon-box--header {
  width: 4rem !important;
  height: 4rem !important;
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
  background: hsl(var(--primary-foreground) / 0.1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-id-18 .mk-plenerai-icon-box--header svg {
  width: 2rem !important;
  height: 2rem !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* ------------------------------------------------------------------
   PL-6: Participants Section Grid Layout
   React: grid md:grid-cols-2 lg:grid-cols-3 gap-4
   React: p-4 rounded-xl bg-muted/30 hover:bg-muted/50
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai-participants {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai-participants {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .page-id-18 .mk-plenerai-participants {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Participant card styling matching React */
.page-id-18 .mk-plenerai__info .wp-block-group[style*="margin-bottom"] {
  padding: 1rem !important;
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
  background: hsl(var(--muted) / 0.3) !important;
  border: 1px solid transparent !important;
  transition: all 300ms ease !important;
}

.page-id-18 .mk-plenerai__info .wp-block-group[style*="margin-bottom"]:hover {
  background: hsl(var(--muted) / 0.5) !important;
  border-color: hsl(var(--primary) / 0.2) !important;
}

/* ------------------------------------------------------------------
   PL-7: Curator Section Icon
   React: w-12 h-12 rounded-full bg-primary/10
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai-icon-box--curator {
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 9999px !important;
  background: hsl(var(--primary) / 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-id-18 .mk-plenerai-icon-box--curator svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: hsl(var(--primary)) !important;
}

/* ------------------------------------------------------------------
   PL-8: About Section Image Decorative Offset
   React: absolute -top-4 -left-4 w-full h-full bg-primary/10 rounded-2xl
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai-about__image {
  position: relative !important;
}

.page-id-18 .mk-plenerai-about__image::before {
  content: '' !important;
  position: absolute !important;
  top: -1rem !important;
  left: -1rem !important;
  width: 100% !important;
  height: 100% !important;
  background: hsl(var(--primary) / 0.1) !important;
  border-radius: 1rem !important;
  z-index: -1 !important;
}

.page-id-18 .mk-plenerai-about__image img {
  position: relative !important;
  border-radius: 1rem !important;
  box-shadow: var(--shadow-lg) !important;
  width: 100% !important;
  height: 20rem !important;
  object-fit: cover !important;
}

/* ------------------------------------------------------------------
   PL-9: Gallery Grid Section Background
   React: bg-muted/30 py-16 md:py-24
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai__gallery {
  background: hsl(var(--muted) / 0.3) !important;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__gallery {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
}

/* ------------------------------------------------------------------
   PL-10: Gallery Images - Exact Dimensions and Transitions
   React: h-48 md:h-64 (tall), h-32 md:h-48 (short)
   React: overflow-hidden rounded-xl shadow-lg
   React: hover:scale-105 transition-transform duration-700
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai__gallery .mk-img-zoom {
  overflow: hidden !important;
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

.page-id-18 .mk-plenerai__gallery .mk-img-zoom img {
  transition: transform 700ms ease !important;
}

.page-id-18 .mk-plenerai__gallery .mk-img-zoom:hover img {
  transform: scale(1.05) !important;
}

/* Tall images: React h-48 md:h-64 = 12rem / 16rem */
.page-id-18 .mk-plenerai__gallery-img--tall img {
  height: 12rem !important;
  width: 100% !important;
  object-fit: cover !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__gallery-img--tall img {
    height: 16rem !important;
  }
}

/* Short images: React h-32 md:h-48 = 8rem / 12rem */
.page-id-18 .mk-plenerai__gallery-img--short img {
  height: 8rem !important;
  width: 100% !important;
  object-fit: cover !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__gallery-img--short img {
    height: 12rem !important;
  }
}

/* ------------------------------------------------------------------
   PL-11: Gallery Second Column Offset (Masonry Effect)
   React: pt-8 on second column
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai__gallery-col2 {
  padding-top: 2rem !important;
}

/* ------------------------------------------------------------------
   PL-12: Gallery Grid Gap
   React: gap-4 md:gap-6 = 1rem / 1.5rem
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai__gallery .wp-block-columns {
  gap: 1rem !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__gallery .wp-block-columns {
    gap: 1.5rem !important;
  }
}

/* Space between images in each column */
.page-id-18 .mk-plenerai__gallery-img--tall,
.page-id-18 .mk-plenerai__gallery-img--short {
  margin-bottom: 1rem !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__gallery-img--tall,
  .page-id-18 .mk-plenerai__gallery-img--short {
    margin-bottom: 1.5rem !important;
  }
}

/* Last image in column has no bottom margin */
.page-id-18 .mk-plenerai__gallery .wp-block-column > .wp-block-image:last-child {
  margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------
   PL-13: Hero Subtitle - Responsive Font Size and Light Weight
   React: text-xl md:text-2xl text-primary-foreground/90 font-light max-w-2xl
   ------------------------------------------------------------------ */
.page-id-18 .mk-plenerai-hero .wp-block-cover__inner-container > .wp-block-group > p,
.page-id-18 .mk-plenerai-hero p.has-large-font-size {
  font-size: 1.25rem !important;
  font-weight: 300 !important;
  color: hsl(var(--primary-foreground) / 0.9) !important;
  max-width: 42rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai-hero .wp-block-cover__inner-container > .wp-block-group > p,
  .page-id-18 .mk-plenerai-hero p.has-large-font-size {
    font-size: 1.5rem !important;
  }
}

/* ------------------------------------------------------------------
   PL-14: Hero H1 Font Weight - Must be Bold (700)
   React: text-5xl md:text-7xl font-bold text-primary-foreground mb-4
   Fix: P17 - font-weight was 600, should be 700
   ------------------------------------------------------------------ */
.page-id-18 h1,
.page-id-18 .mk-plenerai-hero h1,
.page-id-18 .wp-block-cover h1 {
  font-weight: 700 !important;
}

/* ------------------------------------------------------------------
   PL-15: About Section Heading Font Weight - Must be Bold (700)
   React: font-display text-3xl md:text-4xl font-bold mb-6
   Fix: P17 - font-weight was 600, should be 700
   ------------------------------------------------------------------ */
.page-id-18 .mk-about h2,
.page-id-18 .mk-plenerai-about h2,
.page-id-18 [class*="about"] h2 {
  font-weight: 700 !important;
}

/* ------------------------------------------------------------------
   PL-16: Participant Name Hover Color
   React: group-hover:text-primary transition-colors
   Fix: P17 - participant name should change to primary on hover
   ------------------------------------------------------------------ */
.page-id-18 .mk-participant:hover .mk-participant-name,
.page-id-18 .mk-plenerai-participants .wp-block-group:hover p:first-child,
.page-id-18 .mk-plenerai__info .wp-block-group[style*="margin-bottom"]:hover p:first-child {
  color: hsl(var(--primary)) !important;
}

/* ------------------------------------------------------------------
   PL-17: About Section Responsive Padding
   React: py-16 md:py-24 = 4rem / 6rem
   Fix: P17 - about section padding should increase at md breakpoint
   ------------------------------------------------------------------ */
.page-id-18 .mk-about-section,
.page-id-18 .mk-plenerai-about-section {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-about-section,
  .page-id-18 .mk-plenerai-about-section {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
}


/* ==========================================================================
   END SECTION 110: PLENERAI 1:1 REACT PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 111: HEADER PARITY FIXES (Agent 14)
   Issues: Search bar styling, nav hover states, mobile menu, cart badge, user icon
   ========================================================================== */

/* Search bar styling - Match React's search input design */
.mk-header__search input,
.mk-header .wp-block-search__input,
.wp-block-search__input {
  background: hsl(36 20% 90%) !important;
  border: none !important;
  border-radius: 0.25rem !important;
  padding: 0.5rem 1rem 0.5rem 2.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: hsl(var(--foreground)) !important;
}

.mk-header__search input:focus,
.mk-header .wp-block-search__input:focus,
.wp-block-search__input:focus {
  outline: none !important;
  background: hsl(40 30% 96%) !important;
  box-shadow: 0 0 0 2px hsl(160 30% 28% / 0.2) !important;
}

.mk-header__search input::placeholder,
.mk-header .wp-block-search__input::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}

/* Search icon positioning */
.mk-header .wp-block-search__button,
.wp-block-search__button {
  position: absolute !important;
  left: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* Navigation hover states - Proper underline/color effects */
.mk-header__nav a,
.mk-header .wp-block-navigation-item__content,
.wp-block-navigation-item__content {
  position: relative !important;
  transition: color 150ms ease !important;
}

.mk-header__nav a:hover,
.mk-header .wp-block-navigation-item__content:hover {
  color: hsl(160 30% 28%) !important;
}

/* Underline effect on hover */
.mk-header__nav a::after,
.mk-header .wp-block-navigation-item__content::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: hsl(160 30% 28%) !important;
  transition: width 150ms ease !important;
}

.mk-header__nav a:hover::after,
.mk-header .wp-block-navigation-item__content:hover::after {
  width: 100% !important;
}

/* Cart badge - RED not cream (already exists in Section 59, adding max specificity) */
.wc-block-mini-cart__badge,
.mk-header .wc-block-mini-cart__badge,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge {
  background: hsl(0 65% 50%) !important;
  color: white !important;
  border: none !important;
}

/* User icon size - Match React */
.mk-header__account-link svg,
.mk-header .wp-block-navigation__user svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
}

/* Mobile menu - Hamburger icon and slide-out panel */
.mk-header__mobile-toggle {
  display: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0.5rem !important;
  cursor: pointer !important;
  color: hsl(var(--foreground)) !important;
}

@media (max-width: 1279px) {
  .mk-header__mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Mobile menu panel */
.mk-header__mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  width: 300px !important;
  max-width: 85vw !important;
  background: white !important;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1) !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s ease !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  padding: 1.5rem !important;
}

.mk-header__mobile-menu.open {
  transform: translateX(0) !important;
}

/* Mobile menu overlay */
.mk-header__mobile-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
  z-index: 9998 !important;
}

.mk-header__mobile-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile menu close button */
.mk-header__mobile-close {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0.5rem !important;
  cursor: pointer !important;
  color: hsl(var(--muted-foreground)) !important;
}

.mk-header__mobile-close:hover {
  color: hsl(var(--foreground)) !important;
}

/* Mobile menu navigation */
.mk-header__mobile-menu .wp-block-navigation__container {
  flex-direction: column !important;
  gap: 1rem !important;
}

.mk-header__mobile-menu .wp-block-navigation-item {
  width: 100% !important;
}

.mk-header__mobile-menu .wp-block-navigation-item__content {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  display: block !important;
}

/* Mobile submenu styling */
.mk-header__mobile-menu .wp-block-navigation__submenu-container {
  position: static !important;
  box-shadow: none !important;
  border: none !important;
  padding-left: 1rem !important;
  margin-top: 0.5rem !important;
}

/* ==========================================================================
   END SECTION 111: HEADER PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 112: HEADER ACTIVE LINK HIGHLIGHT (Agent P4-03)
   React Reference: Header.tsx - current page highlighting
   Highlights current menu item with primary color and underline
   ========================================================================== */

/* Active menu item color */
.mk-header .current-menu-item .wp-block-navigation-item__content,
.mk-header .current-menu-item > a {
  color: hsl(var(--primary)) !important;
  position: relative;
}

/* Active menu item underline */
.mk-header .current-menu-item .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: hsl(var(--primary));
}

/* ==========================================================================
   END SECTION 112: HEADER ACTIVE LINK HIGHLIGHT
   ========================================================================== */

/* ==========================================================================
   SECTION 113: CART & CHECKOUT PAGE COMPREHENSIVE PARITY FIXES (Agent 16)
   React Reference: CartDrawer.tsx, checkout form components
   Key fixes:
   - Cart badge RED (destructive color)
   - Form input styling (proper borders, padding, radius)
   - Button styling (catalog/gold variants)
   - Cart table styling (product images, prices, totals)
   ========================================================================== */

/* ------------------------------------------------------------------
   Cart Badge - RED (Destructive) Color
   React uses hsl(0 65% 50%) for cart badge, not primary green
   Maximum specificity to override all WooCommerce defaults
   ------------------------------------------------------------------ */
html body .wc-block-mini-cart__badge,
html body .wc-block-mini-cart__quantity-badge,
html body .cart-contents-count,
html body .woocommerce-mini-cart__badge,
html body span.wc-block-mini-cart__badge,
html body .wc-block-mini-cart__badge[style] {
  background: hsl(0 65% 50%) !important;
  color: white !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  border-radius: 9999px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ------------------------------------------------------------------
   Cart Table Styling - Product Cards with Muted Background
   React uses card-style rows with proper spacing and borders
   ------------------------------------------------------------------ */
.woocommerce-cart-form__contents,
.wc-block-cart__main {
  background: transparent !important;
}

.woocommerce-cart-form__contents th,
.woocommerce-cart-form__contents td,
.wc-block-cart-items th,
.wc-block-cart-items td {
  padding: 1rem !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--card)) !important;
}

/* Remove top border on table */
.woocommerce-cart-form__contents,
.wc-block-cart-items {
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 0.5rem !important;
}

/* Product thumbnail sizing */
.woocommerce-cart-form__contents .product-thumbnail img,
.wc-block-cart-item__image img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: calc(var(--radius) - 2px) !important;
}

/* Product name - primary color on hover */
.woocommerce-cart-form__contents .product-name a,
.wc-block-cart-item__product-name a {
  color: hsl(var(--foreground)) !important;
  text-decoration: none !important;
  transition: color 200ms !important;
}

.woocommerce-cart-form__contents .product-name a:hover,
.wc-block-cart-item__product-name a:hover {
  color: hsl(var(--primary)) !important;
}

/* Price formatting */
.woocommerce-cart-form__contents .product-price,
.woocommerce-cart-form__contents .product-subtotal,
.wc-block-cart-item__price,
.wc-block-cart-item__total {
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
}

/* Cart totals card */
.woocommerce-cart .cart-collaterals .cart_totals,
.wc-block-cart__totals-wrapper {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-card) !important;
}

.woocommerce-cart .cart-collaterals .cart_totals h2,
.wc-block-cart__totals-title {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  color: hsl(var(--foreground)) !important;
}

/* Totals table styling */
.woocommerce-cart .cart-collaterals .cart_totals table th,
.wc-block-cart__totals-item__label {
  font-weight: 400 !important;
  color: hsl(var(--muted-foreground)) !important;
  text-align: left !important;
  padding: 0.75rem 0 !important;
}

.woocommerce-cart .cart-collaterals .cart_totals table td,
.wc-block-cart__totals-item__value {
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  text-align: right !important;
  padding: 0.75rem 0 !important;
}

/* Order total - gold accent */
.woocommerce-cart .cart-collaterals .cart_totals .order-total th,
.woocommerce-cart .cart-collaterals .cart_totals .order-total td,
.wc-block-cart__totals-item--total .wc-block-cart__totals-item__label,
.wc-block-cart__totals-item--total .wc-block-cart__totals-item__value {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: hsl(var(--accent)) !important;
  border-top: 2px solid hsl(var(--border)) !important;
  padding-top: 1rem !important;
  margin-top: 0.5rem !important;
}

/* ------------------------------------------------------------------
   Cart Buttons - Catalog & Gold Variants
   React uses gold for proceed to checkout, catalog for continue
   ------------------------------------------------------------------ */
.woocommerce .cart .button,
.woocommerce .cart input.button,
.wc-block-cart__submit-button,
.wc-proceed-to-checkout .checkout-button {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--foreground)) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.025em !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--radius) !important;
  border: none !important;
  box-shadow: var(--shadow-elegant) !important;
  transition: all 200ms !important;
  text-transform: uppercase !important;
}

.woocommerce .cart .button:hover,
.woocommerce .cart input.button:hover,
.wc-block-cart__submit-button:hover,
.wc-proceed-to-checkout .checkout-button:hover {
  background: hsl(var(--gold-light)) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Continue shopping - catalog variant */
.wc-block-cart__return-to-shop-button,
.return-to-shop .button {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  font-weight: 500 !important;
}

.wc-block-cart__return-to-shop-button:hover,
.return-to-shop .button:hover {
  background: hsl(var(--forest-light)) !important;
}

/* ------------------------------------------------------------------
   Checkout Form Inputs - Match React Input Component
   React uses proper border radius, padding, and border color
   ------------------------------------------------------------------ */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout select {
  height: 40px !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  border: 1px solid hsl(var(--border)) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  background: white !important;
  color: hsl(var(--foreground)) !important;
  transition: all 200ms !important;
}

/* Textarea taller */
.woocommerce-checkout textarea,
.wc-block-checkout textarea {
  height: 100px !important;
  resize: vertical !important;
}

/* Input focus state */
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.wc-block-checkout input:focus,
.wc-block-checkout textarea:focus,
.wc-block-checkout select:focus {
  outline: none !important;
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1) !important;
}

/* Input labels */
.woocommerce-checkout label,
.wc-block-checkout label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

/* Required asterisk - gold color */
.woocommerce-checkout .required,
.wc-block-checkout .required {
  color: hsl(var(--accent)) !important;
  font-weight: 700 !important;
}

/* ------------------------------------------------------------------
   Checkout Place Order Button - Gold Variant
   React uses gold background for primary checkout action
   ------------------------------------------------------------------ */
.woocommerce-checkout #place_order,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--foreground)) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  padding: 1rem 2rem !important;
  border-radius: var(--radius) !important;
  border: none !important;
  box-shadow: var(--shadow-elegant) !important;
  transition: all 200ms !important;
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
}

.woocommerce-checkout #place_order:hover,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
  background: hsl(var(--gold-light)) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* ------------------------------------------------------------------
   Checkout Order Review - Card Styling
   React uses card background with proper spacing
   ------------------------------------------------------------------ */
.woocommerce-checkout-review-order,
.wc-block-checkout__order-review {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-card) !important;
}

.woocommerce-checkout-review-order h3,
.wc-block-checkout__order-review-title {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  color: hsl(var(--foreground)) !important;
}

/* Order review table */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: hsl(var(--accent)) !important;
  border-top: 2px solid hsl(var(--border)) !important;
  padding-top: 1rem !important;
  margin-top: 0.5rem !important;
}

/* ------------------------------------------------------------------
   Payment Methods - Card Styling
   React uses clean card design for payment options
   ------------------------------------------------------------------ */
.woocommerce-checkout #payment,
.wc-block-checkout__payment-method {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-card) !important;
}

.woocommerce-checkout #payment .payment_methods,
.wc-block-checkout__payment-methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-checkout #payment .payment_method label,
.wc-block-checkout__payment-method label {
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
}

/* Privacy policy checkbox */
.woocommerce-checkout .woocommerce-privacy-policy-text,
.wc-block-checkout__privacy-policy {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 1rem !important;
}

.woocommerce-checkout .woocommerce-privacy-policy-text a,
.wc-block-checkout__privacy-policy a {
  color: hsl(var(--primary)) !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   END SECTION 112: CART & CHECKOUT PAGE COMPREHENSIVE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 111: CONTACT FORM 7 - REACT PARITY
   Agent 19 implementation - 2026-03-21

   React component: src/components/ui/input.tsx + textarea.tsx + button.tsx

   Issues fixed:
   1. Labels missing - visible labels above inputs
   2. Input styling - height 40px, border-radius 4px
   3. Textarea styling - proper min-height
   4. Submit button - catalog style (green)
   5. Error messages - proper styling
   6. Focus states - ring on focus
   ========================================================================== */

/* CF7 Forms - Label styling
   React: <Label> component with text-sm font-medium leading-none
   ------------------------------------------------------------------ */
.wpcf7 label,
.mk-form-label {
  display: block !important;
  font-size: 0.875rem !important;              /* text-sm = 14px */
  font-weight: 500 !important;                 /* font-medium */
  color: hsl(160 30% 18%) !important;          /* foreground */
  margin-bottom: 0.5rem !important;            /* spacing-2 */
  font-family: var(--font-body) !important;
  line-height: 1 !important;                   /* leading-none */
}

/* CF7 Forms - Input styling
   React Input: h-10 rounded-md border border-input bg-background px-3 py-2
   h-10 = 40px, rounded-md = 2px (React custom config: calc(var(--radius) - 2px))
   NOTE: Using 0.125rem (2px) for inputs per React parity
   ------------------------------------------------------------------ */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"] {
  width: 100% !important;
  height: 40px !important;                     /* h-10 = 2.5rem = 40px */
  border: 1px solid hsl(36 20% 82%) !important; /* border-input */
  border-radius: 0.125rem !important;          /* rounded-md = 2px (React custom config) */
  padding: 0.5rem 0.75rem !important;          /* py-2 px-3 */
  font-size: 0.875rem !important;              /* text-sm */
  font-family: var(--font-body) !important;
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Focus state - React: focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
   ring color = primary at 20% opacity
   ------------------------------------------------------------------ */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none !important;
  border-color: hsl(160 30% 28%) !important;   /* primary */
  box-shadow: 0 0 0 3px hsl(160 30% 28% / 0.1) !important; /* ring-2 ring-ring */
}

/* Textarea - React: min-h-[80px] same border/padding as Input
   ------------------------------------------------------------------ */
.wpcf7-form textarea {
  width: 100% !important;
  min-height: 120px !important;                /* min-h-[80px] but we use 120px for better UX */
  border: 1px solid hsl(36 20% 82%) !important;
  border-radius: 0.125rem !important;          /* rounded-md = 2px (React custom config) */
  padding: 0.75rem !important;                 /* slightly more padding for textarea */
  font-size: 0.875rem !important;
  font-family: var(--font-body) !important;
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  resize: vertical !important;
  line-height: 1.5 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Submit button - catalog variant (primary green)
   React Button: bg-primary text-primary-foreground h-10 px-6 rounded-md font-medium tracking-wider
   ------------------------------------------------------------------ */
.wpcf7-form input[type="submit"],
.wpcf7-submit {
  background: hsl(160 30% 28%) !important;     /* primary */
  color: hsl(40 30% 96%) !important;           /* primary-foreground */
  height: 40px !important;                     /* h-10 */
  padding: 0 1.5rem !important;                /* px-6 */
  border: none !important;
  border-radius: var(--radius) !important;     /* buttons use rounded = 4px (React custom config) */
  font-weight: 500 !important;                 /* font-medium */
  letter-spacing: 0.025em !important;          /* tracking-wider */
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: var(--shadow-elegant) !important;
  text-transform: none !important;
  line-height: 1 !important;
}

.wpcf7-submit:hover {
  background: hsl(160 30% 35%) !important;     /* slightly lighter primary on hover */
  box-shadow: var(--shadow-hover) !important;
}

.wpcf7-submit:active {
  transform: scale(0.98) !important;
}

/* Error messages - React uses destructive color
   ------------------------------------------------------------------ */
.wpcf7-not-valid-tip {
  color: hsl(0 65% 50%) !important;            /* destructive */
  font-size: 0.75rem !important;               /* text-xs */
  margin-top: 0.25rem !important;
  font-family: var(--font-body) !important;
  display: block !important;
}

.wpcf7-not-valid {
  border-color: hsl(0 65% 50%) !important;     /* destructive border on invalid input */
}

/* Success/error response messages */
.wpcf7-response-output {
  border: 1px solid hsl(36 20% 82%) !important;
  border-radius: 0.25rem !important;
  padding: 1rem !important;
  margin-top: 1rem !important;
  font-size: 0.875rem !important;
  font-family: var(--font-body) !important;
}

.wpcf7-mail-sent-ok {
  background-color: hsl(142 76% 36% / 0.1) !important;
  border-color: hsl(142 76% 36%) !important;
  color: hsl(142 76% 36%) !important;
}

.wpcf7-mail-sent-ng,
.wpcf7-validation-errors {
  background-color: hsl(0 65% 50% / 0.1) !important;
  border-color: hsl(0 65% 50%) !important;
  color: hsl(0 65% 50%) !important;
}

/* Checkbox/Radio styling */
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
  width: auto !important;
  height: auto !important;
  margin-right: 0.5rem !important;
  cursor: pointer !important;
}

.wpcf7-list-item {
  margin-bottom: 0.5rem !important;
}

.wpcf7-list-item label {
  display: inline !important;
  font-weight: 400 !important;
  cursor: pointer !important;
}

/* File upload input */
.wpcf7-form input[type="file"] {
  width: 100% !important;
  padding: 0.5rem !important;
  border: 1px solid hsl(36 20% 82%) !important;
  border-radius: 0.25rem !important;
  font-size: 0.875rem !important;
  font-family: var(--font-body) !important;
  background-color: hsl(var(--background)) !important;
  cursor: pointer !important;
}

.wpcf7-form input[type="file"]:focus {
  outline: none !important;
  border-color: hsl(160 30% 28%) !important;
  box-shadow: 0 0 0 3px hsl(160 30% 28% / 0.1) !important;
}

/* Select dropdown */
.wpcf7-form select {
  width: 100% !important;
  height: 40px !important;
  border: 1px solid hsl(36 20% 82%) !important;
  border-radius: 0.25rem !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  font-family: var(--font-body) !important;
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Spinner (loading state) */
.wpcf7-spinner {
  margin-left: 1rem !important;
  vertical-align: middle !important;
}

/* Form validation - hide until triggered */
.wpcf7-not-valid-tip {
  margin-top: 0.25rem !important;
}

/* Accessibility - screen reader text */
.wpcf7-screen-reader-response {
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ==========================================================================
   END SECTION 111: CONTACT FORM 7 - REACT PARITY
   ========================================================================== */


/* ==========================================================================
   SECTION 112: SINGLE PRODUCT SPACING FIXES (Agent 11)
   Deployed: 2026-03-21
   Fixes 6 spacing gaps identified in spacing/alignment audit
   Reference: SPACING-ALIGNMENT-AUDIT.md
   ========================================================================== */

/* ------------------------------------------------------------------
   Fix 1: Back link margin-bottom - should be 2rem (mb-8)
   React: mb-8 on Link component
   ------------------------------------------------------------------ */
.mk-product-back {
  margin-bottom: 2rem !important;
}

/* ------------------------------------------------------------------
   Fix 2: Lot number + badge gap - should be 0.75rem (gap-3)
   React: gap-3 on flex container
   ------------------------------------------------------------------ */
.mk-product-detail .mk-lot-badge-row {
  gap: 0.75rem !important;
}

/* ------------------------------------------------------------------
   Fix 3: Title margin-bottom - should be 0.5rem (mb-2)
   React: mb-2 on h1
   ------------------------------------------------------------------ */
.mk-product-detail h1 {
  margin-bottom: 0.5rem !important;
}

/* ------------------------------------------------------------------
   Fix 4: Artist margin-bottom - should be 0.5rem (mb-2)
   React: mb-2 on artist paragraph
   ------------------------------------------------------------------ */
.mk-product-detail .mk-artist {
  margin-bottom: 0.5rem !important;
}

/* ------------------------------------------------------------------
   Fix 5: Pricing card row spacing - should be 0.75rem (space-y-3)
   React: space-y-3 on pricing card container
   ------------------------------------------------------------------ */
.mk-pricing > * + * {
  margin-top: 0.75rem !important;
}

/* ------------------------------------------------------------------
   Fix 6: Two-column gap - should be 3rem (gap-12)
   React: gap-12 on columns container
   ------------------------------------------------------------------ */
.mk-product-detail > .wp-block-columns {
  gap: 3rem !important;
}

/* ==========================================================================
   END SECTION 112: SINGLE PRODUCT SPACING FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 112: GIFT VOUCHER SPACING FIXES (Agent 12)
   ========================================================================== */

/* M1: Amount label margin-bottom 0.75rem (was 1rem) */
.mk-voucher-label,
.page-id-19 .mk-amount-label,
.page-id-19 .mk-voucher-label,
.page-id-19 p[style*="font-size:0.875rem"][style*="text-transform:uppercase"] {
  margin-bottom: 0.75rem !important;
}

/* M2: Amount label letter-spacing 0.025em (was 0.05em - double) */
.mk-voucher-label,
.page-id-19 .mk-amount-label,
.page-id-19 .mk-voucher-label,
.page-id-19 h3.mk-amount-label,
.page-id-19 .mk-voucher-section h3:first-of-type,
.page-id-19 p[style*="font-size:0.875rem"][style*="text-transform:uppercase"] {
  letter-spacing: 0.025em !important;
}

/* M3: Amount button padding 0.75rem/1.5rem (was 0.625rem/1.25rem) */
.mk-voucher-amount-btn,
.mk-voucher-btn {
  padding: 0.75rem 1.5rem !important;
}

/* M4: Amount button border-radius 0.5rem (was 0.375rem) */
.mk-voucher-amount-btn,
.mk-voucher-btn {
  border-radius: var(--radius) !important; /* rounded-lg = 4px (React custom config) */
}

/* M5: CTA button padding Y 1.5rem (was 0.875rem) */
.page-id-19 .mk-btn-gold,
.mk-voucher-cta,
.mk-voucher-buy-btn,
.mk-voucher-order-btn {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* P24-1: Feature card border-radius for Gift Voucher (rounded-xl = 0.75rem) */
.page-id-19 .mk-voucher-feature,
.page-id-19 .mk-feature-card,
.page-id-19 .wp-block-group.mk-feature-card {
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
}

/* P24-2: Rules card header icon size (w-8 h-8 = 32px, not 40px) */
.page-id-19 .mk-rules-card__header svg,
.page-id-19 .mk-validity-rules-header svg,
.page-id-19 .mk-rules-card > .wp-block-group:first-child svg {
  width: 2rem !important;
  height: 2rem !important;
}

/* P24-3: Rules card header title styling - font-display text-2xl font-bold */
.page-id-19 .mk-rules-card h2,
.page-id-19 .mk-validity-rules-header h2,
.page-id-19 .mk-rules-card > .wp-block-group:first-child h2 {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}

/* P24-4: Rules card overall styling - rounded-xl p-8 border */
.page-id-19 .mk-rules-card,
.page-id-19 .mk-validity-rules-card {
  background: hsl(var(--card)) !important;
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
  padding: 2rem !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* ==========================================================================
   END SECTION 112: GIFT VOUCHER SPACING FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 113: GALERIJA PAGE SPACING FIXES (Agent 16)
   Deployed: 2026-03-21
   Fixes 4 spacing gaps identified in spacing/alignment audit
   Reference: SPACING-ALIGNMENT-AUDIT.md - GALERIJA section
   ========================================================================== */

/* ------------------------------------------------------------------
   Fix 1: Filter buttons gap - should be 0.5rem (gap-2)
   React: gap-2 on buttons container
   ------------------------------------------------------------------ */
.page-id-92 .mk-gallery-filter-buttons,
.page-id-92 .wp-block-buttons {
  gap: 0.5rem !important;
}

/* ------------------------------------------------------------------
   Fix 2: Product grid gap - should be 1.5rem (gap-6)
   React: gap-6 on product grid
   ------------------------------------------------------------------ */
.page-id-92 .wc-block-product-template,
.page-id-92 .products {
  gap: 1.5rem !important;
}

/* ------------------------------------------------------------------
   Fix 3: Header max-width - should be 48rem
   React: max-w-3xl on header container
   ------------------------------------------------------------------ */
.page-id-92 .mk-page-header {
  max-width: 48rem !important;
  margin-bottom: 2rem !important;
}

/* ------------------------------------------------------------------
   Fix 4: H1 margin-bottom - should be 1rem (mb-4)
   React: mb-4 on h1
   ------------------------------------------------------------------ */
.page-id-92 h1 {
  margin-bottom: 1rem !important;
}

/* ==========================================================================
   END SECTION 113: GALERIJA PAGE SPACING FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 114: POAUKCIONINE PAGE SPACING CONSOLIDATION (Agent 17)
   Deployed: 2026-03-21
   Fixes: Container padding, header margin, grid/list gaps, badge conflicts
   ========================================================================== */

/* Container vertical padding */
.page-id-93 main {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* Header bottom margin */
.page-id-93 .mk-page-header {
  margin-bottom: 2rem !important;
}

/* Product grid gap (grid view) */
.page-id-93 .wc-block-product-template {
  gap: 1.5rem !important;
}

/* Product list gap (list view) */
.page-id-93 .mk-catalog--list .wc-block-product-template {
  gap: 1rem !important;
}

/* Info banner standardization - consolidates conflicting definitions */
.page-id-93 .mk-post-auction-banner,
.mk-poaukcionine-banner {
  border-radius: var(--radius) !important; /* rounded-lg = 4px (React custom config) */
  padding: 1rem !important;
  gap: 0.5rem !important;
}

/* ==========================================================================
   END SECTION 114: POAUKCIONINE PAGE SPACING CONSOLIDATION
   ========================================================================== */

/* ============================================
   SECTION 116: GLOBAL TYPOGRAPHY MARGINS (Agent 20)
   React parity for heading and paragraph spacing
   ============================================ */

/* H1 global margin - mb-4 = 1rem */
h1, .wp-block-heading:where(h1) {
  margin-bottom: 1rem;
}

/* H2 global margin - mb-6 = 1.5rem */
h2, .wp-block-heading:where(h2) {
  margin-bottom: 1.5rem;
}

/* H3/H4 global margin - mb-2 = 0.5rem */
h3, h4,
.wp-block-heading:where(h3),
.wp-block-heading:where(h4) {
  margin-bottom: 0.5rem;
}

/* Paragraph spacing - space-y-4 = 1rem between */
.entry-content p + p,
.wp-block-group p + p {
  margin-top: 1rem;
}

/* Intro paragraphs on Pirkimas/Pardavimas - mb-12 = 3rem */
.page-id-16 .entry-content > p:first-of-type,
.page-id-17 .entry-content > p:first-of-type {
  margin-bottom: 3rem !important;
}

/* ==========================================================================
   END SECTION 116: GLOBAL TYPOGRAPHY MARGINS
   ========================================================================== */

/* ==========================================================================
   SECTION 115: GLOBAL CARD BORDER-RADIUS FIX (CORRECTED)
   ========================================================================== */

/* ------------------------------------------------------------------
   CORRECTED BASED ON REACT SOURCE CODE ANALYSIS (P6-CARDS.md):

   This project uses CUSTOM Tailwind config (tailwind.config.ts):
   - rounded-lg = var(--radius) = 0.25rem (4px) - NOT default 0.5rem
   - rounded-md = calc(var(--radius) - 2px) = 0.125rem (2px)
   - rounded-sm = calc(var(--radius) - 4px) = 0 (FLAT CORNERS!)

   Card component (card.tsx): uses rounded-lg = 0.25rem (4px)
   Input component (input.tsx): uses rounded-md = 0.125rem (2px)

   Previous Section 115 was WRONG - used standard Tailwind values.
   ------------------------------------------------------------------ */

/* Base Card (.mk-card) - matches card.tsx rounded-lg = 0.25rem */
.mk-card,
.mk-card-elegant,
.wp-block-group.is-style-card,
.wp-block-group.is-style-card-elegant {
  border-radius: var(--radius) !important; /* 0.25rem (4px) */
}

/* Artwork/Product Cards - matches ArtworkCard.tsx rounded-sm = 0.125rem */
.mk-artwork-card,
.mk-artwork-card--horizontal,
.mk-gallery-card,
.wc-block-grid__product,
.woocommerce-loop-product__link {
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
}

/* Other card types keep their existing radius */
.mk-pricing,
.mk-step-card,
.mk-sell-step-card,
.mk-feature-card {
  border-radius: var(--radius) !important; /* 0.25rem (4px) */
}

/* Card image top corners - match their parent card radius */
.mk-card img,
.mk-card-elegant img {
  border-radius: var(--radius) var(--radius) 0 0 !important; /* 0.25rem top */
}

.mk-artwork-card img,
.mk-gallery-card img {
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
}

/* ==========================================================================
   END SECTION 115: GLOBAL CARD BORDER-RADIUS FIX
   ========================================================================== */

/* ==========================================================================
   SECTION 117: CATALOG FILTER CARD SHADOWS (Agent P1-09)
   ========================================================================== */

/* Filter cards with proper shadows and rounded corners */
.mk-filter-card,
.wc-block-product-filter,
.wc-block-attribute-filter,
.wc-block-price-filter,
.wc-block-stock-filter {
  background: hsl(var(--card)) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 1.25rem !important;
  margin-bottom: 1rem !important;
}

/* Hover effect on filter cards */
.mk-filter-card:hover,
.wc-block-product-filter:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* Filter card headings */
.mk-filter-card h3,
.mk-filter-card .wp-block-heading,
.wc-block-product-filter h3,
.wc-block-product-filter .wp-block-heading {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}

/* Last filter card no margin */
.mk-filter-card:last-child,
.wc-block-product-filter:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   END SECTION 117: CATALOG FILTER CARD SHADOWS
   ========================================================================== */

/* ==========================================================================
   SECTION 119: CATALOG PRICE RANGE FILTER (Agent P1-05)
   React reference: src/pages/Catalog.tsx - price range dropdown
   6 tiers: Visi, Iki 500 EUR, 500-1000 EUR, 1000-5000 EUR, 5000-10000 EUR, 10000+ EUR
   ========================================================================== */

/* Price filter wrapper */
.mk-price-filter {
  margin-bottom: 1.5rem;
}

/* Price filter label */
.mk-price-filter__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
}

/* Price range select dropdown - matching ShadCN Select styling */
.mk-price-filter__select,
.mk-price-range-select {
  width: 100%;
  height: 2.5rem;
  padding: 0 2.5rem 0 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23577066' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 200ms;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Hover state */
.mk-price-filter__select:hover,
.mk-price-range-select:hover {
  border-color: hsl(var(--primary));
}

/* Focus state - matching React focus ring pattern */
.mk-price-filter__select:focus,
.mk-price-range-select:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1);
}

/* Option styling */
.mk-price-filter__select option,
.mk-price-range-select option {
  padding: 0.5rem;
}

/* ==========================================================================
   END SECTION 119: CATALOG PRICE RANGE FILTER
   ========================================================================== */


/* ==========================================================================
   SECTION 118: PAST AUCTION RESULTS BANNER (Agent P1-14)
   React Reference: Catalog.tsx - Past auction banner with trophy icon
   ========================================================================== */

/* Banner container with amber/gold background */
.mk-past-auction-banner {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1.5rem !important;
  margin-bottom: 2rem !important;
  background: hsl(42 96% 65% / 0.1) !important;
  border: 1px solid hsl(42 55% 58% / 0.3) !important;
  border-radius: var(--radius) !important;
}

/* Trophy icon container - circular with gold background */
.mk-past-auction-banner__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem !important;
  height: 3rem !important;
  background: hsl(42 55% 58% / 0.2) !important;
  border-radius: 50% !important;
  color: hsl(var(--gold)) !important;
  flex-shrink: 0 !important;
}

.mk-past-auction-banner__icon svg {
  width: 24px !important;
  height: 24px !important;
}

/* Content area */
.mk-past-auction-banner__content {
  flex: 1 !important;
}

/* Title styling */
.mk-past-auction-banner__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 0 0.25rem 0 !important;
  font-family: var(--wp--preset--font-family--body) !important;
}

/* Stats row */
.mk-past-auction-banner__stats {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

/* Separator bullet */
.mk-past-auction-banner__separator {
  margin: 0 0.5rem !important;
  color: hsl(var(--border)) !important;
}

/* Strong values in foreground color */
.mk-past-auction-banner__total strong,
.mk-past-auction-banner__count strong {
  color: hsl(var(--foreground)) !important;
  font-weight: 600 !important;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .mk-past-auction-banner {
    flex-direction: column !important;
    text-align: center !important;
  }

  .mk-past-auction-banner__stats {
    flex-direction: column !important;
    gap: 0.25rem !important;
  }

  .mk-past-auction-banner__separator {
    display: none !important;
  }
}

/* ==========================================================================
   END SECTION 118: PAST AUCTION RESULTS BANNER
   ========================================================================== */

/* ==========================================================================
   SECTION 118: CATALOG TIME FILTERS (Agent P1-02)
   ========================================================================== */

/* ------------------------------------------------------------------
   Time filter button group - Visi, Šiandien, Savaitė, Mėnuo, etc.
   React: Horizontal button group with ghost variant
   Active state: primary bg with primary-foreground text
   ------------------------------------------------------------------ */

.mk-time-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.mk-time-filter-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: all 200ms;
}

.mk-time-filter-btn:hover {
  border-color: hsl(var(--border));
  background: hsl(var(--muted) / 0.5);
}

.mk-time-filter-btn.active,
.mk-time-filter-btn[data-active="true"] {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

.mk-time-filter-btn.active:hover {
  background: hsl(160 30% 24%);
}

/* Responsive */
@media (max-width: 640px) {
  .mk-time-filters {
    gap: 0.375rem;
  }
  .mk-time-filter-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   END SECTION 118: CATALOG TIME FILTERS
   ========================================================================== */

/* ==========================================================================
   SECTION 118: CATALOG QUICK FILTERS (TOGGLES)
   React Reference: Catalog.tsx quick filter toggles ("Su statymais", "Pirkti dabar")
   Toggle switch component styled like iOS switches
   ========================================================================== */

/* Quick filters container */
.mk-quick-filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid hsl(var(--border));
  margin-top: 1rem;
}

/* Individual filter row */
.mk-quick-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Filter label text */
.mk-quick-filter__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}

/* Toggle Switch - iOS style */
.mk-toggle {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  background: hsl(var(--muted));
  border-radius: 9999px;
  cursor: pointer;
  transition: background 200ms;
}

/* Toggle knob - white circle that slides */
.mk-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 200ms;
}

/* Active state - primary color background */
.mk-toggle.active,
.mk-toggle[data-active="true"],
input:checked + .mk-toggle {
  background: hsl(var(--primary));
}

/* Active state - knob slides to the right */
.mk-toggle.active::after,
.mk-toggle[data-active="true"]::after,
input:checked + .mk-toggle::after {
  transform: translateX(1.25rem);
}

/* Hidden checkbox for accessibility */
.mk-quick-filter input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ==========================================================================
   END SECTION 118: CATALOG QUICK FILTERS (TOGGLES)
   ========================================================================== */

/* ==========================================================================
   SECTION 119: CATALOG CLEAR FILTERS BUTTON (Agent P1-04)
   React Reference: Catalog.tsx - Ghost/outline button with X icon
   Display: Hidden by default, shown via JS when filters are active
   ========================================================================== */

/* Clear filters button - ghost variant with destructive hover */
.mk-clear-filters {
  display: none; /* Hidden by default, shown via JS when filters active */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 200ms;
}

/* Show when visible */
.mk-clear-filters.visible,
.mk-clear-filters[data-visible="true"] {
  display: flex;
}

/* Destructive hover state - red */
.mk-clear-filters:hover {
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.1);
}

/* Icon sizing */
.mk-clear-filters svg,
.mk-clear-filters .dashicons {
  width: 1rem;
  height: 1rem;
}

/* Active filter count badge */
.mk-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  border-radius: 9999px;
  margin-left: 0.5rem;
}

/* ==========================================================================
   END SECTION 119: CATALOG CLEAR FILTERS BUTTON
   ========================================================================== */

/* ==========================================================================
   SECTION 121: CATALOG GRID RESPONSIVE COLUMNS (P1-07)
   React parity: 2 cols tablet (md), 3 cols desktop (lg), never 4
   ========================================================================== */

/* Mobile: 1 column (default) */
.mk-catalog__main .wp-block-woocommerce-product-collection ul.wc-block-product-template,
.mk-catalog__main .wc-block-grid__products,
.mk-catalog__grid,
.archive.woocommerce .products.columns-3,
body.post-type-archive-product .wc-block-grid__products,
body.post-type-archive-product .wc-block-product-template {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}

/* Tablet (640px - 1023px): 2 columns */
@media (min-width: 640px) and (max-width: 1023px) {
  .mk-catalog__main .wp-block-woocommerce-product-collection ul.wc-block-product-template,
  .mk-catalog__main .wc-block-grid__products,
  .mk-catalog__grid,
  .archive.woocommerce .products.columns-3,
  body.post-type-archive-product .wc-block-grid__products,
  body.post-type-archive-product .wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Desktop (1024px+): 3 columns */
@media (min-width: 1024px) {
  .mk-catalog__main .wp-block-woocommerce-product-collection ul.wc-block-product-template,
  .mk-catalog__main .wc-block-grid__products,
  .mk-catalog__grid,
  .archive.woocommerce .products.columns-3,
  body.post-type-archive-product .wc-block-grid__products,
  body.post-type-archive-product .wc-block-product-template {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Wide desktop (1280px+): STILL 3 columns max (catalog with sidebar never 4) */
@media (min-width: 1280px) {
  .mk-catalog__main .wp-block-woocommerce-product-collection ul.wc-block-product-template,
  .mk-catalog__main .wc-block-grid__products,
  .mk-catalog__grid,
  .archive.woocommerce .products.columns-3,
  body.post-type-archive-product .wc-block-grid__products,
  body.post-type-archive-product .wc-block-product-template {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;  /* More gap on wide screens */
  }
}

/* ==========================================================================
   END SECTION 121: CATALOG GRID RESPONSIVE COLUMNS
   ========================================================================== */
/* ==========================================================================
   SECTION 122: CATALOG LIST VIEW (CONSOLIDATED - Agent P1-06)
   React Reference: ArtworkCard horizontal variant (Catalog.tsx)
   - Image: 192px x 192px SQUARE (w-48 h-48 in React)
   - Border-radius: 2px (rounded-sm = 0.125rem)
   - Horizontal card layout with image left, details right

   This section consolidates 4 conflicting list view implementations:
   - Section F1 (lines 5646-5695): 140px x 180px, 0.375rem radius - DEPRECATED
   - Section 93 (lines 13475-13499): 200px width, 0.25rem radius - DEPRECATED
   - Section K4 (lines 15051-15071): 12rem x 12rem, no radius specified - DEPRECATED
   - Component (lines 2068-2104): .mk-artwork-card--horizontal 12rem x 12rem, 0.125rem - KEPT as base
   ========================================================================== */

/* ------------------------------------------------------------------
   Container: Suppress grid layout when list mode active
   ------------------------------------------------------------------ */
.mk-catalog--list .wc-block-product-template,
.mk-catalog--list ul.products,
.mk-catalog-list .wc-block-product-template,
.mk-catalog-list ul.products,
.mk-view-list .wc-block-product-template,
.mk-view-list ul.products {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  grid-template-columns: none !important;
}

/* Each product in list mode */
.mk-catalog--list .wc-block-product-template li,
.mk-catalog--list ul.products > li,
.mk-catalog-list .wc-block-product-template li,
.mk-catalog-list ul.products > li,
.mk-view-list .wc-block-product-template li,
.mk-view-list ul.products > li {
  width: 100% !important;
}

/* ------------------------------------------------------------------
   List card: horizontal layout with all class variants
   ------------------------------------------------------------------ */
.mk-catalog--list .mk-product-card,
.mk-catalog--list .wc-block-grid__product,
.mk-catalog--list .product,
.mk-catalog-list .mk-product-card,
.mk-catalog-list .wc-block-grid__product,
.mk-catalog-list .product,
.mk-view-list .mk-product-card,
.mk-view-list .wc-block-grid__product,
.mk-view-list .product,
.mk-artwork-card--horizontal,
.mk-product-grid.mk-view-list .mk-product-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1.5rem !important;
  padding: 1rem !important;
  background: hsl(var(--card)) !important;
  border-radius: 0 !important;  /* rounded-sm = 0px per custom Tailwind config */
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow 300ms ease !important;
}

/* Hover state */
.mk-catalog--list .wc-block-grid__product:hover,
.mk-catalog-list .wc-block-grid__product:hover,
.mk-view-list .wc-block-grid__product:hover,
.mk-artwork-card--horizontal:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* ------------------------------------------------------------------
   Image container: 192px x 192px SQUARE (React w-48 h-48)
   ------------------------------------------------------------------ */
.mk-catalog--list .mk-product-card .mk-product-card__image,
.mk-catalog--list .wc-block-grid__product .wc-block-grid__product-image,
.mk-catalog--list .wc-block-grid__product .wp-block-woocommerce-product-image,
.mk-catalog-list .mk-product-card .mk-product-card__image,
.mk-catalog-list .wc-block-grid__product .wc-block-grid__product-image,
.mk-catalog-list .wc-block-grid__product .wp-block-woocommerce-product-image,
.mk-view-list .mk-product-card .mk-product-card__image,
.mk-view-list .wc-block-grid__product .wc-block-grid__product-image,
.mk-view-list .wc-block-grid__product .wp-block-woocommerce-product-image,
.mk-view-list .product .attachment-woocommerce_thumbnail,
.mk-artwork-card__image-h,
.mk-product-grid.mk-view-list .wp-block-woocommerce-product-image {
  position: relative !important;
  width: 12rem !important;      /* 192px */
  height: 12rem !important;     /* 192px - SQUARE not 4:5 ratio */
  min-width: 12rem !important;
  max-width: 12rem !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* Image itself */
.mk-catalog--list .mk-product-card .mk-product-card__image img,
.mk-catalog--list .wc-block-grid__product .wc-block-grid__product-image img,
.mk-catalog--list .wc-block-grid__product .wp-block-woocommerce-product-image img,
.mk-catalog-list .mk-product-card .mk-product-card__image img,
.mk-catalog-list .wc-block-grid__product .wc-block-grid__product-image img,
.mk-catalog-list .wc-block-grid__product .wp-block-woocommerce-product-image img,
.mk-view-list .mk-product-card .mk-product-card__image img,
.mk-view-list .wc-block-grid__product .wc-block-grid__product-image img,
.mk-view-list .wc-block-grid__product .wp-block-woocommerce-product-image img,
.mk-view-list .product .attachment-woocommerce_thumbnail img,
.mk-artwork-card__image-h img {
  width: 100% !important;
  height: 100% !important;
  min-width: 12rem !important;
  max-width: 12rem !important;
  min-height: 12rem !important;
  max-height: 12rem !important;
  object-fit: cover !important;
  border-radius: 0 !important;  /* rounded-sm = 0px per custom Tailwind config */
  transition: transform 500ms ease !important;
}

/* Image hover zoom effect */
.mk-catalog--list .wc-block-grid__product:hover .wc-block-grid__product-image img,
.mk-catalog--list .wc-block-grid__product:hover .wp-block-woocommerce-product-image img,
.mk-catalog-list .wc-block-grid__product:hover .wc-block-grid__product-image img,
.mk-catalog-list .wc-block-grid__product:hover .wp-block-woocommerce-product-image img,
.mk-view-list .wc-block-grid__product:hover .wc-block-grid__product-image img,
.mk-view-list .wc-block-grid__product:hover .wp-block-woocommerce-product-image img,
.mk-artwork-card--horizontal:hover .mk-artwork-card__image-h img {
  transform: scale(1.05) !important;
}

/* ------------------------------------------------------------------
   Content area: fills remaining space
   ------------------------------------------------------------------ */
.mk-catalog--list .mk-product-card .mk-product-card__body,
.mk-catalog--list .wc-block-grid__product .wc-block-grid__product-title,
.mk-catalog--list .wc-block-grid__product .wc-block-grid__product-price,
.mk-catalog--list .wc-block-grid__product .wc-block-grid__product-add-to-cart,
.mk-catalog-list .mk-product-card .mk-product-card__body,
.mk-catalog-list .wc-block-grid__product .wc-block-grid__product-title,
.mk-catalog-list .wc-block-grid__product .wc-block-grid__product-price,
.mk-catalog-list .wc-block-grid__product .wc-block-grid__product-add-to-cart,
.mk-view-list .mk-product-card .mk-product-card__body,
.mk-view-list .wc-block-grid__product .wc-block-grid__product-title,
.mk-view-list .wc-block-grid__product .wc-block-grid__product-price,
.mk-view-list .wc-block-grid__product .wc-block-grid__product-add-to-cart,
.mk-view-list .product .woocommerce-loop-product__title,
.mk-artwork-card__body-h,
.mk-product-grid.mk-view-list .wp-block-group {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 1.25rem !important;
}

/* Title margin fix */
.mk-catalog--list .wc-block-grid__product .wc-block-grid__product-title,
.mk-catalog-list .wc-block-grid__product .wc-block-grid__product-title,
.mk-view-list .wc-block-grid__product .wc-block-grid__product-title,
.mk-view-list .product .woocommerce-loop-product__title {
  margin-top: 0 !important;
}

/* ==========================================================================
   END SECTION 122: CATALOG LIST VIEW (CONSOLIDATED)
   ========================================================================== */

/* ==========================================================================
   SECTION 120: CATALOG CATEGORY FILTER DARK BACKGROUND (Agent P1-01)
   Task: Fix catalog sidebar category filter to use dark primary background
   React Reference: Dark primary background (#325A4D / hsl(160 30% 28%))
   Implementation: Category filter section with primary bg, cream text
   ========================================================================== */

/* Category filter card - dark primary background */
.mk-catalog__sidebar .mk-filter-categories,
.mk-filter-card--categories {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  padding: 1.5rem !important;
  border-radius: var(--radius) !important;
}

/* Category filter headings - cream text */
.mk-filter-card--categories h3,
.mk-filter-card--categories .wp-block-heading {
  color: hsl(var(--primary-foreground)) !important;
}

/* Category filter labels - cream text */
.mk-filter-card--categories label,
.mk-filter-card--categories .wc-block-components-checkbox__label {
  color: hsl(var(--primary-foreground)) !important;
}

/* Category filter checkboxes - cream borders */
.mk-filter-card--categories input[type="checkbox"] {
  border-color: hsl(var(--primary-foreground) / 0.5) !important;
}

/* Checked checkboxes - gold accent */
.mk-filter-card--categories input[type="checkbox"]:checked {
  background-color: hsl(var(--gold)) !important;
  border-color: hsl(var(--gold)) !important;
}

/* ==========================================================================
   END SECTION 120: CATALOG CATEGORY FILTER DARK BACKGROUND
   ========================================================================== */

/* ==========================================================================
   SECTION 120A: CATALOG CATEGORIES LIST STYLING (Agent P67)
   Task: Style category list links matching React CategorySidebar
   React: text-sm, hover:text-gold, selected: text-gold font-medium
   ========================================================================== */

/* Categories filter group - dark background */
.mk-filter-categories {
  background: hsl(var(--primary)) !important;
  border-radius: 0.5rem !important; /* P6 parity fix: 8px for category container */
}

.mk-filter-categories h2,
.mk-filter-categories .wp-block-heading {
  color: hsl(var(--primary-foreground)) !important;
  margin-bottom: 1rem !important;
}

/* WooCommerce product categories list styling */
.mk-filter-categories .wp-block-woocommerce-product-categories ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mk-filter-categories .wp-block-woocommerce-product-categories ul li {
  margin-bottom: 0.75rem !important;
}

.mk-filter-categories .wp-block-woocommerce-product-categories ul li a {
  color: hsl(var(--primary-foreground) / 0.8) !important;
  text-decoration: none !important;
  font-size: var(--wp--preset--font-size--small) !important;
  transition: color 0.2s ease !important;
}

.mk-filter-categories .wp-block-woocommerce-product-categories ul li a:hover {
  color: hsl(var(--gold)) !important;
}

/* Active/current category */
.mk-filter-categories .wp-block-woocommerce-product-categories ul li.current-cat a,
.mk-filter-categories .wp-block-woocommerce-product-categories ul li a[aria-current="page"] {
  color: hsl(var(--gold)) !important;
  font-weight: 500 !important;
}

/* Category count styling */
.mk-filter-categories .wp-block-woocommerce-product-categories ul li .count {
  color: hsl(var(--primary-foreground) / 0.6) !important;
  font-size: 0.75rem !important;
  margin-left: 0.25rem !important;
}

/* ==========================================================================
   END SECTION 120A: CATALOG CATEGORIES LIST STYLING
   ========================================================================== */

/* ==========================================================================
   SECTION 123: SINGLE PRODUCT IMAGE SHADOW (Agent P2-04)
   Deployed: 2026-03-22
   Task: Add shadow-elegant to product gallery images (P1)
   React: shadow-elegant = 0 4px 20px -4px hsl(160 30% 18% / 0.08)
   ========================================================================== */

.woocommerce-product-gallery,
.mk-product-detail__gallery .woocommerce-product-gallery {
  box-shadow: var(--shadow-elegant) !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  overflow: hidden !important;
}

.woocommerce-product-gallery__image img {
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
}

/* ==========================================================================
   END SECTION 123: SINGLE PRODUCT IMAGE SHADOW
   ========================================================================== */

/* ==========================================================================
   SECTION 124: TIMER MINIMAL VARIANT GRADIENT (Agent P2-08)
   Deployed: 2026-03-22
   Task: Add gradient background for card overlay timer (P1)
   React: Card overlay timer has gradient background from transparent to dark
   ========================================================================== */

/* Card overlay timer - gradient background from transparent to dark */
.mk-timer--minimal,
.mk-product-card .auction-time-left {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 1rem 0.75rem 0.5rem !important;
  background: linear-gradient(to top, hsl(var(--foreground) / 0.8), transparent) !important;
  color: white !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

.mk-timer--minimal .countdown_amount,
.mk-product-card .auction-time-left .countdown_amount {
  color: white !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   END SECTION 124: TIMER MINIMAL VARIANT GRADIENT
   ========================================================================== */

/* ==========================================================================
   SECTION 124: PRODUCT CARD BADGE STACK (Agent P2-07)
   Task: Add badge stack container for top-right badges with vertical stacking
   Reference: React ArtworkCard badges stack vertically top-right with gap
   ========================================================================== */

/* Badge stack container - positioned top-right with vertical layout */
.mk-product-badge-stack,
.wc-block-product .mk-badges {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.375rem !important;
  z-index: 10 !important;
}

/* Badge sizing within stack - P10: Fixed to match React exactly */
.mk-product-badge-stack .mk-badge,
.wc-block-product .mk-badge {
  font-size: 0.75rem !important;             /* text-xs */
  padding: 0.125rem 0.625rem !important;     /* py-0.5 px-2.5 */
  border-radius: 9999px !important;          /* rounded-full */
  font-weight: 600 !important;               /* font-semibold */
}

/* Status badge colors - matching existing badge variants */
.mk-badge--active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.mk-badge--ending {
  background: hsl(var(--destructive)) !important;
  color: white !important;
  animation: mk-pulse 2s infinite !important;
}

.mk-badge--sold {
  background: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
}

/* ==========================================================================
   END SECTION 124: PRODUCT CARD BADGE STACK
   ========================================================================== */

/* ==========================================================================
   SECTION 125: POST-AUCTION AMBER COLOR TOKENS (Agent P3-05)
   React reference: Uses amber HSL: hsl(42 86% 55%) for all post-auction accents
   WordPress: Previously using inconsistent amber/gold/orange values
   Fix: Standardize all 6 instances to correct amber color
   ========================================================================== */

/* 1. Page hero icon - should be amber */
.page-id-93 .mk-page-hero svg,
.mk-poaukcionine-hero svg {
  color: hsl(42 86% 55%) !important;
}

/* 2. Page hero icon background - should be amber with opacity */
.page-id-93 .mk-page-hero__icon-bg,
.mk-poaukcionine-icon-bg {
  background: hsl(42 86% 55% / 0.2) !important;
}

/* 3. Post-auction banner background - should be amber tint */
.mk-post-auction-banner {
  background-color: hsl(42 96% 65% / 0.1) !important;
  border-color: hsl(42 55% 58% / 0.3) !important;
}

/* 4. Post-auction banner text - should be dark amber */
.mk-post-auction-banner__text,
.mk-post-auction-banner p {
  color: hsl(42 40% 30%) !important;
}

/* 5. Post-auction banner clock icon - should be amber */
.mk-post-auction-banner svg,
.mk-post-auction-banner .clock-icon {
  color: hsl(42 86% 55%) !important;
}

/* 6. Post-auction deadline badge - amber accent */
.mk-badge--post-auction,
.mk-deadline-badge {
  background-color: hsl(42 86% 55% / 0.2) !important;
  color: hsl(42 40% 30%) !important;
  border: 1px solid hsl(42 86% 55% / 0.5) !important;
}

/* ==========================================================================
   END SECTION 125: POST-AUCTION AMBER COLOR TOKENS
   ========================================================================== */


/* ==========================================================================
   SECTION 125: SOLD PRODUCT OVERLAY BADGE (Agent P2-05)
   Task: Add PARDUOTA (SOLD) badge overlay on sold product images
   React Reference: Dark overlay with gold "PARDUOTA" badge centered
   Implementation: ::before for dark overlay, ::after for badge text
   ========================================================================== */

/* Dark overlay on sold product images */
.product.sold .woocommerce-product-gallery,
.product.outofstock .woocommerce-product-gallery {
  position: relative !important;
}

.product.sold .woocommerce-product-gallery::before,
.product.outofstock .woocommerce-product-gallery::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: hsl(var(--foreground) / 0.6) !important;
  z-index: 10 !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
}

/* PARDUOTA badge centered on image */
.product.sold .woocommerce-product-gallery::after,
.product.outofstock .woocommerce-product-gallery::after {
  content: 'PARDUOTA' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: 1rem 2rem !important;
  border-radius: var(--radius) !important;
  z-index: 11 !important;
}

/* ==========================================================================
   END SECTION 125: SOLD PRODUCT OVERLAY BADGE
   ========================================================================== */


/* ==========================================================================
   SECTION 126: BID HISTORY LIGHTWEIGHT (Agent P3-07)
   Task: Simplify bid history from table to div list, limit to 3 items
   React Reference: Simple div list, 3 items, lightweight styling
   Implementation: Replace table with div list, update title text
   ========================================================================== */

/* Bid history container */
.mk-bid-history {
  margin-top: 1rem;
}

/* Bid history title */
.mk-bid-history__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
}

/* Bid history list */
.mk-bid-history__list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Individual bid item */
.mk-bid-history__item {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* Hide old table-based bid history (if it appears from plugin) */
.mk-bid-form table.bid-history {
  display: none !important;
}

/* Hide old product bid history table structure */
.mk-product-bid-history {
  display: none !important;
}

/* ==========================================================================
   END SECTION 126: BID HISTORY LIGHTWEIGHT
   ========================================================================== */

/* ==========================================================================
   SECTION 126: GALLERY BUTTON LAYOUT FIX (Phase 3 Task P3-06)
   Task: Fix gallery card buttons from horizontal to vertical stack
   React Reference: GalleryCard.tsx - buttons stacked vertically (flex-col space-y-2)
   Problem: WordPress showing buttons side-by-side instead of stacked
   Implementation: Force column layout with proper gap on all gallery button selectors
   ========================================================================== */

/* Gallery card buttons - vertical stack */
.mk-gallery-buttons,
.mk-gallery-card__buttons,
.page-id-92 .wc-block-product .wp-block-buttons,
.page-id-92 .wc-block-grid__product .wp-block-buttons,
.mk-galerija .wc-block-product .wp-block-buttons,
.mk-galerija .wc-block-grid__product .wp-block-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

/* Individual button blocks - full width */
.mk-gallery-buttons .wp-block-button,
.mk-gallery-card__buttons .wp-block-button,
.page-id-92 .wc-block-product .wp-block-button,
.page-id-92 .wc-block-grid__product .wp-block-button,
.mk-galerija .wc-block-product .wp-block-button,
.mk-galerija .wc-block-grid__product .wp-block-button {
  width: 100% !important;
  margin: 0 !important;
}

/* Button links - full width and centered */
.mk-gallery-buttons .wp-block-button__link,
.mk-gallery-card__buttons .wp-block-button__link,
.page-id-92 .wc-block-product .wp-block-button__link,
.page-id-92 .wc-block-grid__product .wp-block-button__link,
.mk-galerija .wc-block-product .wp-block-button__link,
.mk-galerija .wc-block-grid__product .wp-block-button__link {
  width: 100% !important;
  justify-content: center !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Override the old row layout at line 6928 */
.page-id-92 .mk-gallery-buttons,
.mk-galerija .mk-gallery-buttons {
  flex-direction: column !important;
}

/* Remove responsive breakpoint that was stacking only on mobile */
@media (max-width: 480px) {
  .mk-gallery-buttons {
    flex-direction: column !important;
  }
}

/* ==========================================================================
   END SECTION 126: GALLERY BUTTON LAYOUT FIX
   ========================================================================== */

/* ==========================================================================
   SECTION 126: MINI-CART VOUCHER CODE SYSTEM
   Task: P2 Task 2.1 - Cart Voucher Code System
   React Reference: CartDrawer.tsx VoucherSection component
   Implementation: Dual-input voucher system with apply/remove states
   ========================================================================== */

/* Voucher section container */
.mk-voucher-section {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* space-y-1 in React */
}

/* Individual voucher input container */
.mk-voucher-input {
  padding: 0.5rem 0; /* py-2 */
}

/* Header with icon and label */
.mk-voucher-input__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Icon styling */
.mk-voucher-icon {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

.mk-voucher-icon--gold {
  color: hsl(var(--gold));
}

/* Label text */
.mk-voucher-label {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: hsl(var(--foreground));
}

/* Input row (input + button) */
.mk-voucher-input-row {
  display: flex;
  gap: 0.5rem;
}

/* Input field */
.mk-voucher-field {
  flex: 1;
  font-size: 0.875rem; /* text-sm */
  padding: 0.5rem 0.75rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  transition: border-color 200ms, box-shadow 200ms;
}

.mk-voucher-field:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

.mk-voucher-field::placeholder {
  color: hsl(var(--muted-foreground));
}

/* Apply button */
.mk-voucher-apply {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: all 200ms;
  white-space: nowrap;
}

.mk-voucher-apply:hover {
  background: hsl(var(--muted) / 0.5);
  border-color: hsl(var(--primary));
}

.mk-voucher-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Applied state container - green success state */
.mk-voucher-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: hsl(142 76% 36% / 0.1); /* green-50 / green-950 at 30% */
  padding: 0.75rem;
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  border: 1px solid hsl(142 76% 36% / 0.3); /* green-200 / green-800 */
}

.dark .mk-voucher-applied {
  background: hsl(142 76% 36% / 0.05);
  border-color: hsl(142 76% 36% / 0.2);
}

/* Applied content (check icon + code + discount) */
.mk-voucher-applied__content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Check icon */
.mk-voucher-check {
  width: 1rem;
  height: 1rem;
  color: hsl(142 76% 36%); /* green-600 */
  flex-shrink: 0;
}

/* Code text */
.mk-voucher-code {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(142 69% 45%); /* green-700 / green-400 */
}

.dark .mk-voucher-code {
  color: hsl(142 76% 36%);
}

/* Discount amount */
.mk-voucher-discount {
  font-size: 0.875rem;
  color: hsl(142 76% 36%); /* green-600 */
}

/* Remove button (X icon) */
.mk-voucher-remove {
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  transition: color 200ms;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mk-voucher-remove:hover {
  color: hsl(var(--destructive));
}

.mk-voucher-remove svg {
  width: 1rem;
  height: 1rem;
}

/* Notification toast (simple implementation) */
.mk-voucher-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 1rem 1.5rem;
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 10px 40px -10px hsl(160 30% 18% / 0.2);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 300ms, transform 300ms;
}

.mk-voucher-notification--show {
  opacity: 1;
  transform: translateY(0);
}

.mk-voucher-notification--success {
  background: hsl(142 76% 36%);
  color: white;
}

.mk-voucher-notification--error {
  background: hsl(var(--destructive));
  color: white;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .mk-voucher-notification {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
  }
}

/* ==========================================================================
   END SECTION 126: MINI-CART VOUCHER CODE SYSTEM
   ========================================================================== */

/* ==========================================================================
   SECTION 128: SPACING SCALE UTILITIES (P4 Parity Agent)
   Deployed: 2026-03-23
   Exact Tailwind spacing scale for 1:1 React parity
   Reference: docs/PARITY-AGENT-LOGS/P4-SPACING.md
   ========================================================================== */

/* Section Vertical Padding - matches py-* classes */
.mk-py-20 { padding-top: 5rem; padding-bottom: 5rem; }       /* py-20 (80px) */
.mk-py-16 { padding-top: 4rem; padding-bottom: 4rem; }       /* py-16 (64px) */
.mk-py-12 { padding-top: 3rem; padding-bottom: 3rem; }       /* py-12 (48px) */
.mk-py-8 { padding-top: 2rem; padding-bottom: 2rem; }        /* py-8 (32px) */
.mk-py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }    /* py-6 (24px) */
.mk-py-4 { padding-top: 1rem; padding-bottom: 1rem; }        /* py-4 (16px) */

/* Container Horizontal Padding - matches px-* classes */
.mk-px-4 { padding-left: 1rem; padding-right: 1rem; }        /* px-4 (16px) */
.mk-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }    /* px-6 (24px) */
.mk-px-8 { padding-left: 2rem; padding-right: 2rem; }        /* px-8 (32px) */

/* Box Padding - matches p-* classes */
.mk-p-4 { padding: 1rem; }           /* p-4 (16px) */
.mk-p-5 { padding: 1.25rem; }        /* p-5 (20px) - ArtworkCard padding */
.mk-p-6 { padding: 1.5rem; }         /* p-6 (24px) - Sidebar boxes */
.mk-p-8 { padding: 2rem; }           /* p-8 (32px) - Contact form card */

/* Grid Gaps - matches gap-* classes */
.mk-gap-1 { gap: 0.25rem; }          /* gap-1 (4px) - Header dropdowns, pagination */
.mk-gap-1-5 { gap: 0.375rem; }       /* gap-1.5 (6px) - Breadcrumb, chart */
.mk-gap-2 { gap: 0.5rem; }           /* gap-2 (8px) */
.mk-gap-2-5 { gap: 0.625rem; }       /* gap-2.5 (10px) - Breadcrumb sm */
.mk-gap-3 { gap: 0.75rem; }          /* gap-3 (12px) */
.mk-gap-4 { gap: 1rem; }             /* gap-4 (16px) */
.mk-gap-6 { gap: 1.5rem; }           /* gap-6 (24px) - Product grid */
.mk-gap-8 { gap: 2rem; }             /* gap-8 (32px) - Catalog main */
.mk-gap-10 { gap: 2.5rem; }          /* gap-10 (40px) - Footer columns */
.mk-gap-12 { gap: 3rem; }            /* gap-12 (48px) - 2-col layouts */

/* Margin Bottom - matches mb-* classes */
.mk-mb-1 { margin-bottom: 0.25rem; } /* mb-1 (4px) */
.mk-mb-2 { margin-bottom: 0.5rem; }  /* mb-2 (8px) */
.mk-mb-3 { margin-bottom: 0.75rem; } /* mb-3 (12px) */
.mk-mb-4 { margin-bottom: 1rem; }    /* mb-4 (16px) */
.mk-mb-6 { margin-bottom: 1.5rem; }  /* mb-6 (24px) */
.mk-mb-8 { margin-bottom: 2rem; }    /* mb-8 (32px) */
.mk-mb-12 { margin-bottom: 3rem; }   /* mb-12 (48px) */

/* Margin Top - matches mt-* classes */
.mk-mt-2 { margin-top: 0.5rem; }     /* mt-2 (8px) */
.mk-mt-4 { margin-top: 1rem; }       /* mt-4 (16px) */
.mk-mt-6 { margin-top: 1.5rem; }     /* mt-6 (24px) */
.mk-mt-8 { margin-top: 2rem; }       /* mt-8 (32px) */
.mk-mt-12 { margin-top: 3rem; }      /* mt-12 (48px) */

/* Space-Y (vertical spacing between children) - matches space-y-* classes */
.mk-space-y-1 > * + * { margin-top: 0.25rem; }   /* space-y-1 (4px) */
.mk-space-y-1-5 > * + * { margin-top: 0.375rem; } /* space-y-1.5 (6px) - CardHeader */
.mk-space-y-2 > * + * { margin-top: 0.5rem; }    /* space-y-2 (8px) */
.mk-space-y-3 > * + * { margin-top: 0.75rem; }   /* space-y-3 (12px) */
.mk-space-y-4 > * + * { margin-top: 1rem; }      /* space-y-4 (16px) */
.mk-space-y-6 > * + * { margin-top: 1.5rem; }    /* space-y-6 (24px) */
.mk-space-y-8 > * + * { margin-top: 2rem; }      /* space-y-8 (32px) - HowToBuy steps, Rules */

/* Space-X (horizontal spacing between children) - matches space-x-* classes */
.mk-space-x-1 > * + * { margin-left: 0.25rem; }  /* space-x-1 (4px) - Menubar, nav, calendar */
.mk-space-x-2 > * + * { margin-left: 0.5rem; }   /* space-x-2 (8px) */
.mk-space-x-3 > * + * { margin-left: 0.75rem; }  /* space-x-3 (12px) */
.mk-space-x-4 > * + * { margin-left: 1rem; }     /* space-x-4 (16px) */

/* ===== CRITICAL SPACING FIXES ===== */

/* Product card content - matches React p-5 (1.25rem) */
.wc-block-grid__product .wc-block-components-product-content,
.products .product .mk-card-content,
.mk-product-card-content {
  padding: 1.25rem;
}

/* Product grid gaps - matches React gap-6 (1.5rem) */
.wc-block-grid.has-3-columns,
.wc-block-grid.has-4-columns,
ul.products.columns-3,
ul.products.columns-4 {
  gap: 1.5rem !important;
}

/* Two-column page layouts - matches React gap-12 (3rem) */
.mk-two-col-layout,
.single-product .mk-product-layout,
.page-template-contact .mk-contact-grid,
.page-template-pardavimas .mk-pardavimas-grid {
  gap: 3rem;
}

/* Sidebar sections - matches React space-y-6 (1.5rem) */
.mk-catalog-sidebar > * + *,
.mk-filter-section + .mk-filter-section {
  margin-top: 1.5rem;
}

/* Header height - matches React h-20 (5rem) */
.mk-header .mk-header-inner,
.site-header .header-inner {
  height: 5rem;
  min-height: 5rem;
}

/* Header nav gap - matches React gap-8 (2rem) */
.mk-header nav,
.mk-header .mk-nav-links {
  gap: 2rem;
}

/* Header actions gap - matches React gap-4 (1rem) */
.mk-header .mk-header-actions {
  gap: 1rem;
}

/* Footer vertical padding - matches React py-16 (4rem) */
footer.mk-footer,
.site-footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Footer columns gap - matches React gap-10 (2.5rem) */
.mk-footer-columns,
.mk-footer .wp-block-columns {
  gap: 2.5rem;
}

/* Footer bottom bar - matches React mt-12 pt-8 */
.mk-footer-bottom {
  margin-top: 3rem;
  padding-top: 2rem;
}

/* Section headings - matches React mb-6 (1.5rem) */
.mk-section-heading,
.mk-footer h4,
.mk-sidebar h3 {
  margin-bottom: 1.5rem;
}

/* ArtworkCard title - matches React mb-1 (0.25rem) */
.wc-block-grid__product-title,
.mk-product-title {
  margin-bottom: 0.25rem;
}

/* ArtworkCard price block - matches React mb-4 (1rem) */
.wc-block-grid__product-price-container,
.mk-product-price-wrapper {
  margin-bottom: 1rem;
}

/* Catalog toolbar - matches React mb-6 (1.5rem) */
.mk-catalog-toolbar {
  margin-bottom: 1.5rem;
}

/* Catalog header - matches React mb-8 (2rem) */
.mk-catalog-header {
  margin-bottom: 2rem;
}

/* Trust badges grid - matches React gap-4 mt-6 */
.mk-trust-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.mk-trust-badges > div {
  padding: 1rem;
}

/* Single product info sections - matches React p-6 mb-6 */
.mk-product-info-card,
.mk-product-pricing-card,
.mk-product-bid-form {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Back link - matches React mb-8 (2rem) */
.mk-back-link {
  margin-bottom: 2rem;
}

/* ==========================================================================
   END SECTION 128: SPACING SCALE UTILITIES
   ========================================================================== */


/* ==========================================================================
   SECTION 127: BORDER-RADIUS TOKEN SYSTEM (1:1 React Parity)
   ==========================================================================

   React's custom Tailwind config (NOT standard Tailwind):
   - --radius: 0.25rem (4px) - base variable
   - rounded-lg = var(--radius) = 4px
   - rounded-md = calc(var(--radius) - 2px) = 2px
   - rounded-sm = calc(var(--radius) - 4px) = 0px

   Standard Tailwind (used for xl, 2xl, full):
   - rounded-xl = 0.75rem (12px)
   - rounded-2xl = 1rem (16px)
   - rounded-full = 9999px

   IMPORTANT: This project uses CUSTOM Tailwind config:
   - rounded-sm = 0px (FLAT corners!) - checkboxes
   - rounded-md = 2px (0.125rem) - form inputs
   - rounded-lg = 4px (var(--radius)) - cards, info banners
   - rounded-xl/2xl (12-16px) is for hero containers
   ========================================================================== */

/* Utility classes for direct use in templates
   IMPORTANT: This project uses CUSTOM Tailwind border-radius config:
   - rounded-sm = calc(var(--radius) - 4px) = 0px (FLAT corners!)
   - rounded-md = calc(var(--radius) - 2px) = 0.125rem (2px)
   - rounded-lg = var(--radius) = 0.25rem (4px)
   - rounded (base) = 0.25rem (4px) - standard Tailwind, not overridden
   - rounded-xl = 0.75rem (12px) - standard Tailwind
   - rounded-2xl = 1rem (16px) - standard Tailwind
   - rounded-full = 9999px - standard Tailwind
*/
.mk-rounded-none { border-radius: 0 !important; }
.mk-rounded-sm { border-radius: 0 !important; }           /* 0px - React rounded-sm = FLAT (custom config) */
.mk-rounded-md { border-radius: 0.125rem !important; }    /* 2px - React rounded-md (custom config) */
.mk-rounded { border-radius: var(--radius) !important; }  /* 4px - React rounded/rounded-lg - BUTTONS */
.mk-rounded-lg { border-radius: var(--radius) !important; } /* 4px - React rounded-lg (custom config) */
.mk-rounded-xl { border-radius: 0.5rem !important; }      /* 8px - CUSTOM (standard Tailwind is 12px) */
.mk-rounded-2xl { border-radius: 0.75rem !important; }    /* 12px - CUSTOM (standard Tailwind is 16px) */
.mk-rounded-full { border-radius: 9999px !important; }    /* Circles - badges, avatars, icons */

/* Directional variants for toggle buttons, tabs, etc. */
.mk-rounded-t-none { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.mk-rounded-b-none { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.mk-rounded-l-none { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.mk-rounded-r-none { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* Element-specific radius enforcement - matching React component usage */

/* Cards: rounded-lg (4px) - Account, Contact, HowToBuy, Auth, Catalog */
.mk-card,
.wc-block-components-product-card,
.wp-block-group.has-background[class*="bg-card"],
.woocommerce-account .woocommerce > *:not(.woocommerce-notices-wrapper),
.mk-step-card,
.mk-feature-card,
.mk-info-card {
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
}

/* Forms: rounded-md (2px in React custom config) - inputs, textareas, selects */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
select,
.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
  border-radius: 0.125rem; /* rounded-md = 2px (React custom config) */
}

/* Buttons: rounded (4px) - base button radius */
button,
.wp-block-button__link,
input[type="submit"],
input[type="button"],
.wpcf7-submit,
.woocommerce .button,
.mk-btn,
[class*="mk-btn-"] {
  border-radius: var(--radius); /* 0.25rem = 4px */
}

/* Checkboxes: rounded-sm (0px = SQUARE CORNERS in React custom config) */
input[type="checkbox"],
.wpcf7-checkbox input[type="checkbox"] {
  border-radius: 0; /* rounded-sm = 0px - SQUARE corners (React custom config) */
}

/* Badges: rounded-full (pill shape) */
.mk-badge,
.mk-status-badge,
.onsale,
.wc-block-components-product-badge,
.mk-bid-count,
.mk-lot-number {
  border-radius: 9999px;
}

/* Icon containers: rounded-full (circles) */
.mk-icon-circle,
[class*="bg-primary/10"][class*="flex"][class*="items-center"][class*="justify-center"],
[class*="rounded-full"] {
  border-radius: 9999px;
}

/* Info banners: rounded-lg (4px in React custom config) - PostAuction, CartDrawer */
.mk-info-banner,
.mk-success-banner,
.mk-warning-banner,
[class*="bg-amber"][class*="rounded-lg"],
[class*="bg-green"][class*="rounded-lg"] {
  border-radius: var(--radius); /* rounded-lg = 4px (React custom config) */
}

/* Major containers: rounded-xl (12px) - Information tabs, Plenerai */
.mk-tab-list,
.mk-content-card,
.mk-plenerai-icon,
.mk-plenerai-participant {
  border-radius: 0.5rem; /* rounded-xl = 8px (CUSTOM) */
}

/* Hero elements: rounded-2xl (16px) - Plenerai event card */
.mk-hero-card,
.mk-event-card,
.mk-plenerai-card {
  border-radius: 1rem; /* rounded-2xl = 16px */
}

/* Grid/List toggle buttons - first rounded-l, last rounded-r */
.mk-view-toggle button:first-child,
.mk-view-toggle a:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.mk-view-toggle button:last-child,
.mk-view-toggle a:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Images in cards: inherit card radius for top corners */
.mk-card img:first-child,
.wc-block-components-product-image img,
.woocommerce-loop-product__link img {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Product card content area: inherit bottom radius */
.mk-card > *:last-child:not(img),
.wc-block-components-product-card > div:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* ==========================================================================
   END SECTION 127: BORDER-RADIUS TOKEN SYSTEM
   ========================================================================== */

/* ==========================================================================
   SECTION 129: TYPOGRAPHY SCALE (P3 Parity Agent)
   Complete Tailwind text-* scale with responsive variants
   ========================================================================== */

/* ------------------------------------------------------------------
   Text Size Utilities - Exact Tailwind values
   ------------------------------------------------------------------ */

.text-xs {
  font-size: 0.75rem !important;    /* 12px */
  line-height: 1rem !important;     /* 16px */
}

.text-sm {
  font-size: 0.875rem !important;   /* 14px */
  line-height: 1.25rem !important;  /* 20px */
}

.text-base {
  font-size: 1rem !important;       /* 16px */
  line-height: 1.5rem !important;   /* 24px */
}

.text-lg {
  font-size: 1.125rem !important;   /* 18px */
  line-height: 1.75rem !important;  /* 28px */
}

.text-xl {
  font-size: 1.25rem !important;    /* 20px */
  line-height: 1.75rem !important;  /* 28px */
}

.text-2xl {
  font-size: 1.5rem !important;     /* 24px */
  line-height: 2rem !important;     /* 32px */
}

.text-3xl {
  font-size: 1.875rem !important;   /* 30px */
  line-height: 2.25rem !important;  /* 36px */
}

.text-4xl {
  font-size: 2.25rem !important;    /* 36px */
  line-height: 2.5rem !important;   /* 40px */
}

.text-5xl {
  font-size: 3rem !important;       /* 48px */
  line-height: 1 !important;
}

.text-6xl {
  font-size: 3.75rem !important;    /* 60px */
  line-height: 1 !important;
}

.text-7xl {
  font-size: 4.5rem !important;     /* 72px */
  line-height: 1 !important;
}

/* ------------------------------------------------------------------
   Responsive Text Sizes - md: (768px+)
   ------------------------------------------------------------------ */

@media (min-width: 768px) {
  .md\:text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }

  .md\:text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }

  .md\:text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .md\:text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }

  .md\:text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }

  .md\:text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  .md\:text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }

  .md\:text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
  }

  .md\:text-5xl {
    font-size: 3rem !important;
    line-height: 1 !important;
  }

  .md\:text-6xl {
    font-size: 3.75rem !important;
    line-height: 1 !important;
  }

  .md\:text-7xl {
    font-size: 4.5rem !important;
    line-height: 1 !important;
  }
}

/* ------------------------------------------------------------------
   Responsive Text Sizes - lg: (1024px+)
   ------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .lg\:text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }

  .lg\:text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }

  .lg\:text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .lg\:text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }

  .lg\:text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }

  .lg\:text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  .lg\:text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }

  .lg\:text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
  }

  .lg\:text-5xl {
    font-size: 3rem !important;
    line-height: 1 !important;
  }

  .lg\:text-6xl {
    font-size: 3.75rem !important;
    line-height: 1 !important;
  }

  .lg\:text-7xl {
    font-size: 4.5rem !important;
    line-height: 1 !important;
  }
}

/* ------------------------------------------------------------------
   Font Weight Utilities - Tailwind values
   ------------------------------------------------------------------ */

.font-light {
  font-weight: 300 !important;
}

.font-normal {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 700 !important;
}

/* ------------------------------------------------------------------
   Additional Letter Spacing Utilities
   ------------------------------------------------------------------ */

.mk-tracking-tighter,
.tracking-tighter {
  letter-spacing: -0.05em !important;
}

.mk-tracking-widest,
.tracking-widest {
  letter-spacing: 0.1em !important;
}

/* ------------------------------------------------------------------
   Font Family Utilities
   ------------------------------------------------------------------ */

.font-mono,
.mk-font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.font-sans,
.mk-font-sans {
  font-family: var(--font-body) !important;
}

.font-serif,
.mk-font-serif {
  font-family: var(--font-display) !important;
}

/* ------------------------------------------------------------------
   Additional Line Height Utilities
   ------------------------------------------------------------------ */

.mk-leading-none,
.leading-none {
  line-height: 1 !important;
}

/* ------------------------------------------------------------------
   WordPress Block Editor Heading Responsive Overrides
   Ensures WP headings match React responsive behavior
   ------------------------------------------------------------------ */

/* Hero H1: text-4xl md:text-5xl lg:text-6xl */
.mk-hero h1,
.mk-hero .wp-block-heading,
.wp-block-cover.mk-hero h1 {
  font-size: 2.25rem;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .mk-hero h1,
  .mk-hero .wp-block-heading,
  .wp-block-cover.mk-hero h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .mk-hero h1,
  .mk-hero .wp-block-heading,
  .wp-block-cover.mk-hero h1 {
    font-size: 3.75rem;
  }
}

/* Plenerai Hero H1: text-5xl md:text-7xl */
.mk-plenerai-hero h1 {
  font-size: 3rem;
  line-height: 1;
}

@media (min-width: 768px) {
  .mk-plenerai-hero h1 {
    font-size: 4.5rem;
  }
}

/* Page H1 (default): text-3xl md:text-4xl */
.mk-page-title,
.entry-content > h1:first-child,
.wp-block-group.mk-page-header h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

@media (min-width: 768px) {
  .mk-page-title,
  .entry-content > h1:first-child,
  .wp-block-group.mk-page-header h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

/* Section H2: text-3xl md:text-4xl */
.mk-section-title,
section h2,
.wp-block-group h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

@media (min-width: 768px) {
  .mk-section-title,
  section h2,
  .wp-block-group h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

/* Auction Timer Numbers: text-3xl md:text-4xl */
.mk-timer-digit,
.wsa-auction-countdown .countdown-amount {
  font-size: 1.875rem;
  font-family: var(--font-display);
  font-weight: 700;
}

@media (min-width: 768px) {
  .mk-timer-digit,
  .wsa-auction-countdown .countdown-amount {
    font-size: 2.25rem;
  }
}

/* Logo: text-2xl md:text-3xl */
.mk-logo-text,
.custom-logo-link + span,
.site-title {
  font-size: 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .mk-logo-text,
  .custom-logo-link + span,
  .site-title {
    font-size: 1.875rem;
  }
}

/* Logo tagline: text-[10px] md:text-xs */
.mk-logo-tagline {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
}

@media (min-width: 768px) {
  .mk-logo-tagline {
    font-size: 0.75rem;
  }
}

/* Info/Rules Hero H1: text-4xl md:text-5xl */
.mk-info-hero h1,
.mk-rules-hero h1 {
  font-size: 2.25rem;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .mk-info-hero h1,
  .mk-rules-hero h1 {
    font-size: 3rem;
  }
}

/* Account page heading: text-3xl md:text-4xl */
.woocommerce-account h1,
.woocommerce-MyAccount-content h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

@media (min-width: 768px) {
  .woocommerce-account h1,
  .woocommerce-MyAccount-content h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

/* Price displays: text-4xl for large prices */
.mk-price-large,
.woocommerce-Price-amount.amount.mk-large {
  font-size: 2.25rem;
  font-family: var(--font-display);
  font-weight: 700;
}

/* Sold price badge: text-2xl */
.mk-sold-badge,
.mk-price-sold {
  font-size: 1.5rem;
  font-weight: 600;
}

/* ==========================================================================
   END SECTION 129: TYPOGRAPHY SCALE
   ========================================================================== */

/* ==========================================================================
   SECTION 129: FOOTER 1:1 PARITY (P9)
   Exact match to React Footer.tsx
   ========================================================================== */

/* ---------------------------------------------------------------------
   Footer Container
   React: bg-primary text-primary-foreground, container mx-auto px-4 py-16
   --------------------------------------------------------------------- */
.mk-footer,
.site-footer,
footer.wp-block-template-part {
  background-color: hsl(160 30% 28%) !important; /* --primary exact */
  color: hsl(40 30% 96%) !important; /* --primary-foreground exact */
}

.mk-footer__inner,
.mk-footer > .wp-block-group,
footer.wp-block-template-part > .wp-block-group {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 4rem 1rem !important; /* py-16 px-4 */
}

/* ---------------------------------------------------------------------
   Footer Grid
   React: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10
   --------------------------------------------------------------------- */
.mk-footer__grid,
.mk-footer .wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2.5rem !important; /* gap-10 */
}

@media (min-width: 768px) {
  .mk-footer__grid,
  .mk-footer .wp-block-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .mk-footer__grid,
  .mk-footer .wp-block-columns {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* Reset WP columns flex */
.mk-footer .wp-block-columns {
  flex-wrap: unset !important;
}

.mk-footer .wp-block-column {
  flex-basis: unset !important;
  flex-grow: unset !important;
  width: 100% !important;
}

/* ---------------------------------------------------------------------
   Logo
   React: h-16 object-contain brightness-0 invert, mb-6
   --------------------------------------------------------------------- */
.mk-footer__logo img,
.mk-footer .custom-logo,
.mk-footer .wp-block-site-logo img {
  height: 4rem !important; /* h-16 = 64px */
  width: auto !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important; /* white logo */
  margin-bottom: 1.5rem !important; /* mb-6 */
}

.mk-footer__brand,
.mk-footer .wp-block-site-logo {
  margin-bottom: 1.5rem !important;
}

/* ---------------------------------------------------------------------
   Description Text
   React: text-sm text-primary-foreground/80 leading-relaxed
   --------------------------------------------------------------------- */
.mk-footer__desc,
.mk-footer p:not(.mk-footer__copyright),
.mk-footer .wp-block-paragraph {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
  line-height: 1.625 !important; /* leading-relaxed */
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
   Social Icons Container
   React: flex gap-4 mt-6
   --------------------------------------------------------------------- */
.mk-footer__social,
.mk-footer .wp-block-social-links {
  display: flex !important;
  gap: 1rem !important; /* gap-4 */
  margin-top: 1.5rem !important; /* mt-6 */
  padding: 0 !important;
  list-style: none !important;
}

/* ---------------------------------------------------------------------
   Social Icons
   React: w-5 h-5, hover:text-gold transition-colors
   --------------------------------------------------------------------- */
.mk-footer__social svg,
.mk-footer .wp-block-social-links svg,
.mk-footer .wp-social-link svg {
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
  min-width: 1.25rem !important;
  max-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-height: 1.25rem !important;
  color: hsl(40 30% 96%) !important; /* primary-foreground */
  fill: currentColor !important;
  transition: color 200ms ease !important;
}

.mk-footer__social a,
.mk-footer .wp-block-social-links a,
.mk-footer .wp-social-link a {
  color: hsl(40 30% 96%) !important;
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 200ms ease !important;
}

.mk-footer__social a:hover,
.mk-footer .wp-block-social-links a:hover,
.mk-footer .wp-social-link a:hover {
  color: hsl(42 55% 58%) !important; /* text-gold */
}

.mk-footer__social a:hover svg,
.mk-footer .wp-block-social-links a:hover svg,
.mk-footer .wp-social-link a:hover svg {
  color: hsl(42 55% 58%) !important; /* text-gold */
  fill: hsl(42 55% 58%) !important;
}

/* Remove WP social link backgrounds */
.mk-footer .wp-social-link {
  background: transparent !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------------------
   Section Headings
   React: font-display text-lg font-semibold mb-6
   --------------------------------------------------------------------- */
.mk-footer__heading,
.mk-footer h4,
.mk-footer .wp-block-heading {
  font-family: 'Playfair Display', Georgia, serif !important; /* font-display */
  font-size: 1.125rem !important; /* text-lg */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 1.5rem !important; /* mb-6 */
  margin-top: 0 !important;
  color: hsl(40 30% 96%) !important; /* primary-foreground - full opacity */
  line-height: 1.4 !important;
}

/* ---------------------------------------------------------------------
   Footer Links
   React: text-sm text-primary-foreground/80 hover:text-gold transition-colors
   React: space-y-3 (gap 0.75rem)
   --------------------------------------------------------------------- */
.mk-footer__links,
.mk-footer nav,
.mk-footer .wp-block-navigation {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important; /* space-y-3 */
}

.mk-footer__link,
.mk-footer a:not(.mk-footer__social a):not(.mk-footer__voucher-link):not(.wp-social-link a):not([href*="dovanu-kuponas"]):not([href*="kupon"]) {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
  text-decoration: none !important;
  transition: color 200ms ease !important;
  display: block !important;
}

.mk-footer__link:hover,
.mk-footer a:not(.mk-footer__social a):not(.mk-footer__voucher-link):not(.wp-social-link a):not([href*="dovanu-kuponas"]):not([href*="kupon"]):hover {
  color: hsl(42 55% 58%) !important; /* text-gold */
}

/* ---------------------------------------------------------------------
   Contact Items
   React: flex items-center gap-3 text-sm text-primary-foreground/80
   React: space-y-4 for list
   --------------------------------------------------------------------- */
.mk-footer__contact-list,
.mk-footer__contact {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* space-y-4 */
}

.mk-footer__contact-item {
  display: flex !important;
  align-items: flex-start !important; /* items-start for address wrapping */
  gap: 0.75rem !important; /* gap-3 */
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
  text-decoration: none !important;
  transition: color 200ms ease !important;
}

.mk-footer__contact-item:hover {
  color: hsl(42 55% 58%) !important; /* text-gold */
}

/* Contact Icons - React: w-4 h-4 */
.mk-footer__contact-item svg,
.mk-footer__contact svg {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  min-width: 1rem !important;
  flex-shrink: 0 !important;
  margin-top: 0.125rem !important; /* slight offset for alignment */
}

/* ---------------------------------------------------------------------
   Voucher Link (Special styling)
   React: text-sm font-medium text-gold hover:text-gold/80 underline underline-offset-4
   --------------------------------------------------------------------- */
.mk-footer__voucher-link,
.mk-footer a[href*="dovanu-kuponas"] {
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  color: hsl(42 55% 58%) !important; /* text-gold */
  text-decoration: underline !important;
  text-underline-offset: 4px !important; /* underline-offset-4 */
  transition: color 200ms ease, opacity 200ms ease !important;
  display: inline-block !important;
}

.mk-footer__voucher-link:hover,
.mk-footer a[href*="dovanu-kuponas"]:hover {
  color: hsl(42 55% 58% / 0.8) !important; /* text-gold/80 */
  opacity: 0.8 !important;
}

/* ---------------------------------------------------------------------
   Copyright Section
   React: border-t border-primary-foreground/20 mt-12 pt-8 text-center
   --------------------------------------------------------------------- */
.mk-footer__bottom,
.mk-footer__copyright-wrapper {
  border-top: 1px solid hsl(40 30% 96% / 0.2) !important; /* border-primary-foreground/20 */
  margin-top: 3rem !important; /* mt-12 */
  padding-top: 2rem !important; /* pt-8 */
  text-align: center !important;
}

/* Copyright Text - React: text-sm text-primary-foreground/60 */
.mk-footer__copyright,
.mk-footer__bottom p,
.mk-footer__copyright-wrapper p {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(40 30% 96% / 0.6) !important; /* text-primary-foreground/60 */
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ---------------------------------------------------------------------
   P4 FIX: Footer Bottom Padding and Spacing Issues
   React: container has py-16 (padding 4rem top AND bottom)
   React: grid has gap-10 (2.5rem gap)
   React: bottom bar has mt-12 pt-8 border-t border-primary-foreground/20
   React: copyright text has text-primary-foreground/60 (60% opacity)
   --------------------------------------------------------------------- */
.mk-footer,
footer.wp-block-template-part,
.site-footer {
  padding-bottom: 4rem !important; /* pb-16 - explicit bottom padding */
}

/* Ensure grid gap is 2.5rem (gap-10) */
.mk-footer .wp-block-columns,
.mk-footer__grid,
footer.wp-block-template-part .wp-block-columns {
  gap: 2.5rem !important; /* gap-10 */
}

/* Bottom bar spacing - mt-12 pt-8 with border */
.mk-footer__bottom,
.mk-footer__copyright-wrapper,
.mk-footer > .wp-block-group:last-child,
footer.wp-block-template-part > .wp-block-group > .wp-block-group:last-child {
  margin-top: 3rem !important; /* mt-12 */
  padding-top: 2rem !important; /* pt-8 */
  border-top: 1px solid hsl(40 30% 96% / 0.2) !important; /* border-primary-foreground/20 */
}

/* Copyright text 60% opacity */
.mk-footer__copyright,
.mk-footer__bottom p,
.mk-footer__copyright-wrapper p,
.mk-footer > .wp-block-group:last-child p,
footer.wp-block-template-part > .wp-block-group > .wp-block-group:last-child p {
  opacity: 0.6 !important;
  color: hsl(40 30% 96%) !important; /* base color, opacity handles the fade */
}

/* ==========================================================================
   END SECTION 129: FOOTER 1:1 PARITY (P9)
   ========================================================================== */

/* ==========================================================================
   SECTION 130: HOMEPAGE HERO — 1:1 REACT PARITY (P15)
   Source: src/components/home/HeroSection.tsx
   Agent: P15
   Date: 2026-03-23

   React structure:
   - section.relative.h-[80vh].lg:h-[90vh].w-full.overflow-hidden
   - div.absolute.inset-0 > img.w-full.h-full.object-cover
   - div.absolute.inset-0.bg-gradient-to-r.from-foreground/80.via-foreground/50.to-transparent
   - div.absolute.inset-0.bg-gradient-to-t.from-foreground/60.via-transparent.to-foreground/20
   - div.relative.container.mx-auto.px-4.h-full.flex.items-center > div.max-w-2xl
   - h1.font-display.text-4xl.md:text-5xl.lg:text-6xl.font-semibold.text-white.leading-tight.mb-6.animate-fade-in (delay 0.1s)
   - div.flex.flex-wrap.gap-4.animate-fade-in (delay 0.4s)
   - Buttons: variant="catalog" size="lg" className="text-lg px-8 py-6"
   ========================================================================== */

/* ---------------------------------------------------------------------
   Hero Container
   React: section.relative.h-[80vh].lg:h-[90vh].w-full.overflow-hidden
   + flex items-center (from content wrapper)
   --------------------------------------------------------------------- */
.mk-hero {
  position: relative !important;
  height: 80vh !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}

@media (min-width: 1024px) {
  .mk-hero {
    height: 90vh !important;
  }
}

/* ---------------------------------------------------------------------
   Background Image
   React: img.w-full.h-full.object-cover inside absolute div
   --------------------------------------------------------------------- */
.mk-hero__bg {
  position: absolute !important;
  inset: 0 !important;
}

.mk-hero__bg img,
.mk-hero .wp-block-cover__image-background {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ---------------------------------------------------------------------
   Left-to-Right Gradient Overlay
   React: bg-gradient-to-r from-foreground/80 via-foreground/50 to-transparent
   --foreground = HSL 160 30% 18%
   --------------------------------------------------------------------- */
.mk-hero .wp-block-cover__background,
.mk-hero__overlay--right {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to right,
    hsl(160 30% 18% / 0.8) 0%,
    hsl(160 30% 18% / 0.5) 50%,
    transparent 100%
  ) !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------
   Bottom-to-Top Gradient Overlay
   React: bg-gradient-to-t from-foreground/60 via-transparent to-foreground/20
   Implemented as ::after pseudo-element
   --------------------------------------------------------------------- */
.mk-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background: linear-gradient(
    to top,
    hsl(160 30% 18% / 0.6) 0%,
    transparent 50%,
    hsl(160 30% 18% / 0.2) 100%
  ) !important;
}

/* ---------------------------------------------------------------------
   Content Z-Index Stacking
   Ensure content sits above both gradient layers
   --------------------------------------------------------------------- */
.mk-hero .wp-block-cover__inner-container {
  position: relative !important;
  z-index: 2 !important;
}

/* ---------------------------------------------------------------------
   Content Container
   React: div.relative.container.mx-auto.px-4.h-full.flex.items-center
   Container max: 1400px (from tailwind.config.ts screens.2xl)
   Container padding: 2rem (from tailwind.config.ts container.padding)
   --------------------------------------------------------------------- */
.mk-hero__content {
  position: relative !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

@media (min-width: 640px) {
  .mk-hero__content {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* ---------------------------------------------------------------------
   Inner Content Block
   React: div.max-w-2xl (max-width: 42rem = 672px)
   --------------------------------------------------------------------- */
.mk-hero__inner {
  max-width: 42rem !important;
}

/* ---------------------------------------------------------------------
   Hero H1 Title
   React: h1.font-display.text-4xl.md:text-5xl.lg:text-6xl.font-semibold
         .text-white.leading-tight.mb-6.animate-fade-in
   Inline style: animationDelay: '0.1s'
   --------------------------------------------------------------------- */
.mk-hero__title,
.mk-hero h1,
.mk-hero .wp-block-heading {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin-bottom: 1.5rem !important;
  letter-spacing: -0.025em !important;
  font-size: 2.25rem !important;
  animation: mk-fade-in 0.5s ease-out forwards !important;
  animation-delay: 0.1s !important;
  opacity: 0;
}

@media (min-width: 768px) {
  .mk-hero__title,
  .mk-hero h1,
  .mk-hero .wp-block-heading {
    font-size: 3rem !important;
  }
}

@media (min-width: 1024px) {
  .mk-hero__title,
  .mk-hero h1,
  .mk-hero .wp-block-heading {
    font-size: 3.75rem !important;
  }
}

/* ---------------------------------------------------------------------
   Button Container (Actions)
   React: div.flex.flex-wrap.gap-4.animate-fade-in
   Inline style: animationDelay: '0.4s'
   --------------------------------------------------------------------- */
.mk-hero__actions,
.mk-hero .wp-block-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  animation: mk-fade-in 0.5s ease-out forwards !important;
  animation-delay: 0.4s !important;
  opacity: 0;
}

/* ---------------------------------------------------------------------
   Hero Button Sizing
   React: size="lg" className="text-lg px-8 py-6"
   - text-lg = font-size: 1.125rem
   - px-8 = padding-left/right: 2rem
   - py-6 = padding-top/bottom: 1.5rem
   --------------------------------------------------------------------- */
.mk-hero .wp-block-button__link {
  font-size: 1.125rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  transition: all 300ms !important;
}

/* ---------------------------------------------------------------------
   Catalog Button Variant
   React: variant="catalog"
   - bg-primary (HSL 160 30% 28%)
   - text-primary-foreground (HSL 40 30% 96%)
   - hover:bg-forest-light (HSL 160 25% 38%)
   - font-medium tracking-wide rounded shadow-elegant hover:shadow-hover
   --------------------------------------------------------------------- */
.mk-hero .wp-block-button.is-style-catalog .wp-block-button__link,
.mk-hero .wp-block-button:first-child .wp-block-button__link {
  background-color: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  border-radius: 0.25rem !important;
  box-shadow: var(--shadow-elegant) !important;
}

.mk-hero .wp-block-button.is-style-catalog .wp-block-button__link:hover,
.mk-hero .wp-block-button:first-child .wp-block-button__link:hover {
  background-color: hsl(160 25% 38%) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* ---------------------------------------------------------------------
   Gold Button Variant
   React: variant="gold"
   - bg-gold (HSL 42 55% 58%)
   - text-forest-dark (HSL 160 35% 20%)
   - hover:bg-gold-light (HSL 42 45% 75%)
   - font-medium shadow-elegant rounded
   --------------------------------------------------------------------- */
.mk-hero .wp-block-button.is-style-gold .wp-block-button__link,
.mk-hero .wp-block-button:nth-child(2) .wp-block-button__link {
  background-color: hsl(42 55% 58%) !important;
  color: hsl(160 35% 20%) !important;
  font-weight: 500 !important;
  border-radius: 0.25rem !important;
  box-shadow: var(--shadow-elegant) !important;
}

.mk-hero .wp-block-button.is-style-gold .wp-block-button__link:hover,
.mk-hero .wp-block-button:nth-child(2) .wp-block-button__link:hover {
  background-color: hsl(42 45% 75%) !important;
}

/* ==========================================================================
   END SECTION 130: HOMEPAGE HERO — 1:1 REACT PARITY (P15)
   ========================================================================== */
/* ==========================================================================
   SECTION 129: ARTWORK CARD 1:1 REACT PARITY (Agent P10)
   Source: src/components/auction/ArtworkCard.tsx
   Reference: docs/PARITY-AGENT-LOGS/P10-ARTWORK-CARD.md
   ========================================================================== */

/* -----------------------------------------------------------------------------
   129.1: Card Container - Vertical (Default)
   React: className="group bg-card rounded-sm overflow-hidden shadow-card
          hover:shadow-hover transition-all duration-300"
   ----------------------------------------------------------------------------- */
.mk-artwork-card,
.wc-block-product,
.wc-block-grid__product,
.woocommerce ul.products li.product {
  background-color: hsl(var(--card)) !important;
  border-radius: 0.125rem !important;        /* rounded-md = 2px (React custom config) */
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  transition: all 300ms ease !important;
}

.mk-artwork-card:hover,
.wc-block-product:hover,
.wc-block-grid__product:hover,
.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* -----------------------------------------------------------------------------
   129.2: Card Container - Horizontal Variant
   React: className="group bg-card rounded-sm overflow-hidden shadow-card
          hover:shadow-hover transition-all duration-300 flex"
   ----------------------------------------------------------------------------- */
.mk-artwork-card--horizontal {
  display: flex !important;
  background-color: hsl(var(--card)) !important;
  border-radius: 0.125rem !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  transition: all 300ms ease !important;
}

.mk-artwork-card--horizontal:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* -----------------------------------------------------------------------------
   129.3: Image Container - Vertical
   React: className="relative aspect-[4/5] overflow-hidden"
   CRITICAL: aspect-ratio must be 4/5
   ----------------------------------------------------------------------------- */
.mk-artwork-card__image,
.wc-block-grid__product-image,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
  position: relative !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

/* Ensure image wrapper maintains aspect ratio */
.wc-block-grid__product-image__wrapper,
.wc-block-components-product-image {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

/* -----------------------------------------------------------------------------
   129.4: Image Element
   React: className="w-full h-full object-cover transition-transform
          duration-500 group-hover:scale-105"
   ----------------------------------------------------------------------------- */
.mk-artwork-card__image img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img,
.woocommerce ul.products li.product img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 500ms ease !important;
}

.mk-artwork-card:hover .mk-artwork-card__image img,
.wc-block-product:hover .wc-block-grid__product-image img,
.wc-block-product:hover .wc-block-components-product-image img,
.wc-block-grid__product:hover img,
.woocommerce ul.products li.product:hover img {
  transform: scale(1.05) !important;
}

/* -----------------------------------------------------------------------------
   129.5: Image Container - Horizontal
   React: className="relative w-48 h-48 flex-shrink-0 overflow-hidden"
   ----------------------------------------------------------------------------- */
.mk-artwork-card__image-h {
  position: relative !important;
  width: 12rem !important;                   /* w-48 = 192px */
  height: 12rem !important;                  /* h-48 = 192px */
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.mk-artwork-card__image-h img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 500ms ease !important;
}

.mk-artwork-card--horizontal:hover .mk-artwork-card__image-h img {
  transform: scale(1.05) !important;
}

/* -----------------------------------------------------------------------------
   129.6: Status Badges Container
   React: className="absolute top-3 right-3 flex flex-col gap-2"
   ----------------------------------------------------------------------------- */
.mk-artwork-card__badges,
.mk-product-badge-stack,
.wc-block-product .mk-badges {
  position: absolute !important;
  top: 0.75rem !important;                   /* top-3 = 12px */
  right: 0.75rem !important;                 /* right-3 = 12px */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.5rem !important;                    /* gap-2 = 8px */
  z-index: 10 !important;
}

/* -----------------------------------------------------------------------------
   129.7: Badge Base Styles
   React Badge: "inline-flex items-center rounded-full border px-2.5 py-0.5
                text-xs font-semibold"
   ----------------------------------------------------------------------------- */
.mk-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.125rem 0.625rem !important;     /* py-0.5 px-2.5 */
  border-radius: 9999px !important;          /* rounded-full */
  font-size: 0.75rem !important;             /* text-xs */
  font-weight: 600 !important;               /* font-semibold */
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background-color 200ms ease !important;
}

.mk-badge svg {
  width: 0.75rem !important;                 /* w-3 */
  height: 0.75rem !important;                /* h-3 */
  margin-right: 0.25rem !important;          /* mr-1 */
}

/* -----------------------------------------------------------------------------
   129.8: Status Badge - Aktyvus (Active)
   React: <Badge className="bg-primary text-primary-foreground shadow-lg">
   ----------------------------------------------------------------------------- */
.mk-badge--active {
  background-color: hsl(var(--primary)) !important;  /* forest green #325A4D */
  color: hsl(var(--primary-foreground)) !important;  /* cream #F5F1EA */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* -----------------------------------------------------------------------------
   129.9: Status Badge - Baigiasi! (Ending Soon)
   React: <Badge variant="destructive" className="animate-pulse shadow-lg">
   ----------------------------------------------------------------------------- */
.mk-badge--ending {
  background-color: hsl(var(--destructive)) !important;  /* red #D42A2A */
  color: hsl(var(--destructive-foreground)) !important;  /* white */
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* -----------------------------------------------------------------------------
   129.10: Status Badge - Netrukus (Upcoming)
   React: <Badge className="bg-muted text-muted-foreground shadow-lg">
   ----------------------------------------------------------------------------- */
.mk-badge--upcoming {
  background-color: hsl(var(--muted)) !important;           /* #E8E4DC */
  color: hsl(var(--muted-foreground)) !important;           /* #577066 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* -----------------------------------------------------------------------------
   129.11: Status Badge - Poaukcionine (Post-Auction)
   React: <Badge className="bg-amber-500 text-white shadow-lg">
   ----------------------------------------------------------------------------- */
.mk-badge--post-auction {
  background-color: hsl(38 92% 50%) !important;  /* amber-500 #F59E0B */
  color: #ffffff !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* -----------------------------------------------------------------------------
   129.12: Status Badge - Pirkti dabar (Buy Now)
   React: <Badge className="bg-gold text-foreground shadow-lg">
   ----------------------------------------------------------------------------- */
.mk-badge--buy-now {
  background-color: hsl(var(--gold)) !important;       /* #C4A255 */
  color: hsl(var(--foreground)) !important;            /* #203D31 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* -----------------------------------------------------------------------------
   129.13: PARDUOTA (Sold) Overlay
   React: <div className="absolute inset-0 bg-foreground/60 flex items-center justify-center">
          <Badge variant="secondary" className="bg-gold text-foreground font-semibold text-lg px-4 py-2">
   ----------------------------------------------------------------------------- */
.mk-artwork-card__sold-overlay {
  position: absolute !important;
  inset: 0 !important;
  background-color: hsl(var(--foreground) / 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}

.mk-badge--sold {
  background-color: hsl(var(--gold)) !important;
  color: hsl(var(--foreground)) !important;
  font-size: 1.125rem !important;            /* text-lg */
  font-weight: 600 !important;               /* font-semibold */
  padding: 0.5rem 1rem !important;           /* py-2 px-4 */
  border-radius: 9999px !important;
}

.mk-badge--sold svg {
  width: 1rem !important;                    /* w-4 */
  height: 1rem !important;                   /* h-4 */
  margin-right: 0.5rem !important;           /* mr-2 */
}

/* -----------------------------------------------------------------------------
   129.14: Timer Overlay (Bottom Gradient)
   React: <div className="absolute bottom-0 left-0 right-0
          bg-gradient-to-t from-foreground/80 to-transparent p-3">
   ----------------------------------------------------------------------------- */
.mk-artwork-card__timer-overlay,
.mk-card-timer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(to top, hsl(var(--foreground) / 0.8), transparent) !important;
  padding: 0.75rem !important;               /* p-3 = 12px */
  z-index: 4 !important;
}

/* -----------------------------------------------------------------------------
   129.15: Timer Badge Variants (Minimal)
   ----------------------------------------------------------------------------- */
/* Active state: bg-green-500 text-white */
.mk-timer-badge--active,
.mk-timer-active {
  background-color: hsl(142 76% 36%) !important;  /* green-500 */
  color: white !important;
  padding: 0.125rem 0.625rem !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* Ending soon: animate-pulse */
.mk-timer-badge--ending,
.mk-timer-ending {
  background-color: hsl(var(--destructive)) !important;
  color: hsl(var(--destructive-foreground)) !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* Upcoming: muted colors */
.mk-timer-badge--upcoming,
.mk-timer-upcoming {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* -----------------------------------------------------------------------------
   129.16: Card Body
   React: <div className="p-5">
   ----------------------------------------------------------------------------- */
.mk-artwork-card__body {
  padding: 1.25rem !important;               /* p-5 = 20px */
}

/* WooCommerce product content padding */
.wc-block-product .wc-block-product__product-details,
.wc-block-grid__product .wc-block-product__product-details {
  padding: 1.25rem !important;
}

/* -----------------------------------------------------------------------------
   129.17: Title
   React: <h3 className="font-display text-lg font-semibold text-foreground mb-1">
   ----------------------------------------------------------------------------- */
.mk-artwork-card__title,
.wc-block-grid__product-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;  /* Playfair Display */
  font-size: 1.125rem !important;            /* text-lg */
  font-weight: 600 !important;               /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.25rem !important;         /* mb-1 */
  margin-top: 0 !important;
  line-height: 1.4 !important;
}

/* -----------------------------------------------------------------------------
   129.18: Artist Name
   React: <p className="text-sm text-muted-foreground mb-1">
   ----------------------------------------------------------------------------- */
.mk-artwork-card__artist,
.mk-card-meta__artist {
  font-size: 0.875rem !important;            /* text-sm */
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0.25rem !important;         /* mb-1 */
}

/* React: <span className="block text-xs italic">({artwork.artistDates})</span> */
.mk-artwork-card__artist-dates,
.mk-card-meta__dates {
  display: block !important;
  font-size: 0.75rem !important;             /* text-xs */
  font-style: italic !important;
}

/* -----------------------------------------------------------------------------
   129.19: Meta Section
   React: <div className="space-y-1 mb-4">
   ----------------------------------------------------------------------------- */
.mk-artwork-card__meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;                   /* space-y-1 */
  margin-bottom: 1rem !important;            /* mb-4 */
}

/* -----------------------------------------------------------------------------
   129.20: Meta Row
   React: <div className="flex justify-between text-sm">
   ----------------------------------------------------------------------------- */
.mk-artwork-card__meta-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.875rem !important;            /* text-sm */
}

/* -----------------------------------------------------------------------------
   129.21: Meta Label
   React: <span className="text-muted-foreground">
   ----------------------------------------------------------------------------- */
.mk-artwork-card__meta-label {
  color: hsl(var(--muted-foreground)) !important;
}

/* -----------------------------------------------------------------------------
   129.22: Meta Value - Price (Primary)
   React: <span className="font-bold text-primary">
   ----------------------------------------------------------------------------- */
.mk-artwork-card__meta-value {
  font-weight: 700 !important;               /* font-bold */
  color: hsl(var(--primary)) !important;     /* forest green */
}

/* -----------------------------------------------------------------------------
   129.23: Meta Value - Estimate (Gold)
   React: <span className="font-medium text-gold">
   ----------------------------------------------------------------------------- */
.mk-artwork-card__meta-value--gold,
.mk-card-meta__estimate {
  font-weight: 500 !important;               /* font-medium */
  color: hsl(var(--gold)) !important;
}

/* -----------------------------------------------------------------------------
   129.24: Meta Value - Sold Status
   React: <span className="font-bold text-gold">Parduota</span>
   ----------------------------------------------------------------------------- */
.mk-artwork-card__meta-value--sold {
  font-weight: 700 !important;
  color: hsl(var(--gold)) !important;
}

/* -----------------------------------------------------------------------------
   129.25: Actions Container
   React: <div className="space-y-2">
   ----------------------------------------------------------------------------- */
.mk-artwork-card__actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;                    /* space-y-2 */
}

.mk-artwork-card__actions .mk-btn,
.mk-artwork-card__actions button,
.mk-artwork-card__actions a.wp-block-button__link {
  width: 100% !important;
}

/* -----------------------------------------------------------------------------
   129.26: Button - Gold Variant (Post-Auction Buy)
   React: <Button variant="gold" className="w-full">
   ----------------------------------------------------------------------------- */
.mk-btn-gold,
.wp-block-button.is-style-gold .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  background-color: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  box-shadow: var(--shadow-elegant) !important;
  border-radius: var(--radius) !important;
  height: 2.5rem !important;
  padding: 0 1.5rem !important;
  transition: all 300ms ease !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.mk-btn-gold:hover,
.wp-block-button.is-style-gold .wp-block-button__link:hover {
  background-color: hsl(var(--gold-light)) !important;
}

.mk-btn-gold svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* -----------------------------------------------------------------------------
   129.27: Button - Elegant Variant (View Details)
   React: <Button variant="elegant" className="w-full">
   ----------------------------------------------------------------------------- */
.mk-btn-elegant,
.wp-block-button.is-style-elegant .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.025em !important;
  background-color: transparent !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--foreground) / 0.2) !important;
  border-radius: var(--radius) !important;
  height: 2.5rem !important;
  padding: 0 1.5rem !important;
  transition: all 300ms ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.mk-btn-elegant:hover,
.wp-block-button.is-style-elegant .wp-block-button__link:hover {
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

/* -----------------------------------------------------------------------------
   129.28: Button - Outline Variant (Buy Now during auction)
   React: <Button variant="outline" className="w-full">
   ----------------------------------------------------------------------------- */
.mk-btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  background-color: transparent !important;
  color: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary)) !important;
  border-radius: var(--radius) !important;
  height: 2.5rem !important;
  padding: 0 1.5rem !important;
  transition: all 300ms ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.mk-btn-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* -----------------------------------------------------------------------------
   129.29: Horizontal Variant Body
   React: className="p-5 flex-1 flex flex-col justify-between"
   ----------------------------------------------------------------------------- */
.mk-artwork-card__body-h {
  padding: 1.25rem !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Header row with title and price */
.mk-artwork-card__header-h {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

/* Price container */
.mk-artwork-card__price-h {
  text-align: right !important;
  flex-shrink: 0 !important;
}

/* Price value */
.mk-artwork-card__price-value {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: hsl(var(--primary)) !important;
}

.mk-artwork-card__price-value--gold {
  color: hsl(var(--gold)) !important;
}

/* Price label (bid count) */
.mk-artwork-card__price-label {
  font-size: 0.75rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* Estimate in horizontal */
.mk-artwork-card__estimate-h {
  font-size: 0.875rem !important;
  color: hsl(var(--gold)) !important;
}

/* Actions row */
.mk-artwork-card__actions-h {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 1rem !important;
}

.mk-artwork-card__actions-h .mk-btn-group {
  display: flex !important;
  gap: 0.5rem !important;
}

/* -----------------------------------------------------------------------------
   129.30: WooCommerce Product Price Styling
   React: font-display font-bold text-primary
   ----------------------------------------------------------------------------- */
.wc-block-grid__product-price,
.woocommerce ul.products li.product .price {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: hsl(var(--primary)) !important;
}

.wc-block-grid__product-price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: hsl(var(--primary)) !important;
}

/* -----------------------------------------------------------------------------
   129.31: WooCommerce Add to Cart Button
   ----------------------------------------------------------------------------- */
.wc-block-product .wp-block-button__link,
.woocommerce ul.products li.product .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-radius: var(--radius) !important;
  height: 2.5rem !important;
  padding: 0 1.5rem !important;
  transition: all 300ms ease !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.wc-block-product .wp-block-button__link:hover,
.woocommerce ul.products li.product .button:hover {
  background-color: hsl(var(--forest-light)) !important;
}

/* ==========================================================================
   END SECTION 129: ARTWORK CARD 1:1 REACT PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 131: CATALOG SIDEBAR 1:1 PARITY (Agent P13)
   Date: 2026-03-23
   Source: src/pages/Catalog.tsx, src/components/auction/CategorySidebar.tsx
   Components: switch.tsx, slider.tsx, select.tsx, checkbox.tsx
   ========================================================================== */

/* ---------------------------------------------------------------------
   Sidebar Container — Sticky Positioning with Header Offset
   React: sticky top-24 space-y-6
   --------------------------------------------------------------------- */
.mk-catalog__sidebar,
.mk-catalog-sidebar {
  position: sticky !important;
  top: 6rem !important; /* top-24 = 96px (header + gap) */
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important; /* space-y-6 = 24px */
  max-height: calc(100vh - 7rem) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent !important;
}

/* Admin bar offset */
body.admin-bar .mk-catalog__sidebar,
body.admin-bar .mk-catalog-sidebar {
  top: calc(6rem + 32px) !important;
  max-height: calc(100vh - 7rem - 32px) !important;
}

/* Custom scrollbar for webkit */
.mk-catalog__sidebar::-webkit-scrollbar,
.mk-catalog-sidebar::-webkit-scrollbar {
  width: 6px !important;
}

.mk-catalog__sidebar::-webkit-scrollbar-track,
.mk-catalog-sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}

.mk-catalog__sidebar::-webkit-scrollbar-thumb,
.mk-catalog-sidebar::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3) !important;
  border-radius: 3px !important;
}

.mk-catalog__sidebar::-webkit-scrollbar-thumb:hover,
.mk-catalog-sidebar::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5) !important;
}

/* ---------------------------------------------------------------------
   Category Filter Card — Dark Primary Background
   React: bg-primary text-primary-foreground rounded-sm p-6
   --------------------------------------------------------------------- */
.mk-filter-categories,
.mk-catalog__sidebar .mk-filter-group:first-child,
.mk-sidebar-categories {
  background: hsl(var(--primary)) !important; /* #325A4D */
  color: hsl(var(--primary-foreground)) !important; /* cream */
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  padding: 1.5rem !important; /* p-6 = 24px */
  border: none !important;
}

/* Category heading - font-display text-lg font-semibold mb-6 */
.mk-filter-categories__title,
.mk-filter-categories h3,
.mk-sidebar-categories h3,
.mk-catalog__sidebar .mk-filter-group:first-child .wp-block-heading {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
  color: hsl(var(--primary-foreground)) !important;
  margin-top: 0 !important;
}

/* Category list - space-y-3 */
.mk-filter-categories__list,
.mk-sidebar-categories ul,
.mk-catalog__sidebar .mk-filter-group:first-child ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important; /* space-y-3 = 12px */
}

/* Category button - default state */
.mk-category-btn,
.mk-filter-categories__list button,
.mk-filter-categories__list a,
.mk-sidebar-categories li a,
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item a {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(var(--primary-foreground) / 0.8) !important; /* 80% opacity */
  cursor: pointer !important;
  transition: color 200ms ease !important;
  text-decoration: none !important;
}

/* Category button - hover */
.mk-category-btn:hover,
.mk-filter-categories__list button:hover,
.mk-filter-categories__list a:hover,
.mk-sidebar-categories li a:hover,
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item a:hover {
  color: hsl(var(--gold)) !important; /* #C4A255 */
}

/* Category button - active/selected */
.mk-category-btn--active,
.mk-category-btn.is-active,
.mk-filter-categories__list button.is-active,
.mk-filter-categories__list a.is-active,
.mk-sidebar-categories li.current-cat a,
.mk-catalog__sidebar .mk-filter-group:first-child .current-cat > a,
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item--current > a {
  color: hsl(var(--gold)) !important;
  font-weight: 500 !important; /* font-medium */
}

/* Category count badge */
.mk-category-count,
.mk-filter-categories__list .count,
.mk-sidebar-categories .count,
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item__count {
  color: hsl(var(--primary-foreground) / 0.5) !important;
  font-size: 0.75rem !important; /* text-xs */
  margin-left: 0.25rem !important;
}

/* ---------------------------------------------------------------------
   Filter Card — Light Card Background with Shadow
   React: bg-card rounded-sm p-6 shadow-card OR bg-card rounded-sm p-4 shadow-card
   --------------------------------------------------------------------- */
.mk-filter-card,
.mk-catalog__sidebar .mk-filter-group:not(:first-child),
.mk-sidebar-filter-card {
  background: hsl(var(--card)) !important; /* hsl(40 30% 96%) */
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  padding: 1.5rem !important; /* p-6 = 24px (default) */
  box-shadow: var(--shadow-card) !important; /* 0 2px 12px -2px hsl(160 30% 18% / 0.06) */
}

/* Smaller padding variant (p-4) for time/quick filters */
.mk-filter-card--compact,
.mk-time-filter-card,
.mk-quick-filters-card {
  padding: 1rem !important; /* p-4 = 16px */
}

/* Filter card heading - font-display text-lg font-semibold mb-6 text-foreground */
.mk-filter-card__title,
.mk-filter-card h3,
.mk-sidebar-filter-card h3,
.mk-catalog__sidebar .mk-filter-group:not(:first-child) .wp-block-heading {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.125rem !important; /* text-lg */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 1.5rem !important; /* mb-6 */
  color: hsl(var(--foreground)) !important;
  margin-top: 0 !important;
}

/* Compact heading variant (mb-3) */
.mk-filter-card--compact h3,
.mk-time-filter-card__title,
.mk-quick-filters-card__title {
  margin-bottom: 0.75rem !important; /* mb-3 */
}

/* ---------------------------------------------------------------------
   Filter Section Label
   React: Label className="text-sm text-muted-foreground mb-2 block"
   --------------------------------------------------------------------- */
.mk-filter-label,
.mk-filter-card label,
.mk-sidebar-filter-card label {
  display: block !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important;
  color: hsl(var(--muted-foreground)) !important; /* hsl(160 15% 40%) */
  margin-bottom: 0.5rem !important; /* mb-2 */
}

/* ---------------------------------------------------------------------
   Select/Dropdown Component
   React: SelectTrigger with h-10 rounded-md border-input
   --------------------------------------------------------------------- */
.mk-select,
.mk-filter-card select,
.mk-price-filter__select,
.mk-price-range-select {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 2.5rem !important; /* h-10 = 40px */
  padding: 0.5rem 2.5rem 0.5rem 0.75rem !important; /* px-3 py-2 + room for chevron */
  font-size: 0.875rem !important; /* text-sm */
  background-color: hsl(var(--background)) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23577066' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  border: 1px solid hsl(var(--input)) !important; /* hsl(36 20% 85%) */
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.mk-select:hover,
.mk-filter-card select:hover,
.mk-price-filter__select:hover,
.mk-price-range-select:hover {
  border-color: hsl(var(--primary)) !important;
}

.mk-select:focus,
.mk-filter-card select:focus,
.mk-price-filter__select:focus,
.mk-price-range-select:focus {
  outline: none !important;
  border-color: hsl(var(--ring)) !important; /* hsl(160 30% 28%) */
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
}

.mk-select:disabled,
.mk-filter-card select:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* ---------------------------------------------------------------------
   Time Filter Buttons
   React: w-full text-left px-3 py-2 rounded-md text-sm
   Active: bg-primary text-primary-foreground
   --------------------------------------------------------------------- */
.mk-time-filter-list,
.mk-time-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* space-y-2 */
}

.mk-time-btn,
.mk-time-filter-btn {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* P6 parity fix: 6px = rounded-md standard */
  font-size: 0.875rem !important; /* text-sm */
  background: transparent !important;
  border: none !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  transition: background 200ms ease, color 200ms ease !important;
}

.mk-time-btn:hover,
.mk-time-filter-btn:hover {
  background: hsl(var(--muted)) !important; /* hover:bg-muted */
}

.mk-time-btn--active,
.mk-time-btn.is-active,
.mk-time-btn.active,
.mk-time-filter-btn.is-active,
.mk-time-filter-btn.active,
.mk-time-filter-btn[data-active="true"] {
  background: hsl(var(--primary)) !important; /* bg-primary = #325A4D */
  color: hsl(var(--primary-foreground)) !important; /* cream */
}

.mk-time-btn--active:hover,
.mk-time-btn.is-active:hover,
.mk-time-filter-btn.is-active:hover {
  background: hsl(160 30% 24%) !important; /* slightly darker on hover */
}

/* ---------------------------------------------------------------------
   Quick Filter Row (Toggle Row)
   React: flex items-center justify-between with Label + Switch
   --------------------------------------------------------------------- */
.mk-quick-filter-items,
.mk-quick-filters__items {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* space-y-4 = 16px */
}

.mk-quick-filter-row,
.mk-quick-filter {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
}

.mk-quick-filter-row__label,
.mk-quick-filter__label {
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
}

/* ---------------------------------------------------------------------
   Toggle Switch — ShadCN Switch Parity
   React: w-11 h-6 rounded-full, thumb h-5 w-5
   Off: bg-input, On: bg-primary
   --------------------------------------------------------------------- */
.mk-switch,
.mk-toggle,
.mk-sqf-toggle__track {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 2.75rem !important; /* w-11 = 44px */
  height: 1.5rem !important; /* h-6 = 24px */
  flex-shrink: 0 !important;
  border: 2px solid transparent !important;
  border-radius: 9999px !important; /* rounded-full */
  background: hsl(var(--input)) !important; /* hsl(36 20% 85%) */
  cursor: pointer !important;
  transition: background 200ms ease !important;
}

.mk-switch:focus-visible,
.mk-toggle:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

.mk-switch:disabled,
.mk-toggle:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Checked/Active state - primary background */
.mk-switch[data-state="checked"],
.mk-switch.is-active,
.mk-switch.active,
.mk-toggle.is-active,
.mk-toggle.active,
.mk-toggle[data-active="true"],
.mk-sqf-toggle.is-active .mk-sqf-toggle__track,
input:checked + .mk-switch,
input:checked + .mk-toggle {
  background: hsl(var(--primary)) !important; /* #325A4D */
}

/* Toggle Thumb */
.mk-switch__thumb,
.mk-toggle__thumb,
.mk-toggle::after,
.mk-sqf-toggle__thumb {
  display: block !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 1.25rem !important; /* h-5 w-5 = 20px */
  height: 1.25rem !important;
  border-radius: 9999px !important; /* rounded-full */
  background: hsl(var(--background)) !important; /* cream */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  pointer-events: none !important;
  transition: transform 200ms ease !important;
  transform: translateX(0) !important;
}

/* Thumb position when checked */
.mk-switch[data-state="checked"] .mk-switch__thumb,
.mk-switch.is-active .mk-switch__thumb,
.mk-switch.is-active::after,
.mk-switch.active::after,
.mk-toggle.is-active .mk-toggle__thumb,
.mk-toggle.is-active::after,
.mk-toggle.active::after,
.mk-toggle[data-active="true"]::after,
.mk-sqf-toggle.is-active .mk-sqf-toggle__thumb,
input:checked + .mk-switch .mk-switch__thumb,
input:checked + .mk-switch::after,
input:checked + .mk-toggle .mk-toggle__thumb,
input:checked + .mk-toggle::after {
  transform: translateX(1.25rem) !important; /* slide to right */
}

/* Hidden checkbox for accessibility */
.mk-quick-filter input[type="checkbox"],
.mk-sqf-toggle input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* ---------------------------------------------------------------------
   Checkbox Component — ShadCN Checkbox Parity
   React: h-4 w-4 rounded-sm border-primary
   --------------------------------------------------------------------- */
.mk-checkbox,
.mk-filter-card input[type="checkbox"]:not(.mk-toggle-input) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1rem !important; /* h-4 w-4 = 16px */
  height: 1rem !important;
  flex-shrink: 0 !important;
  border: 1px solid hsl(var(--primary)) !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  background: transparent !important;
  cursor: pointer !important;
  transition: background 200ms ease, border-color 200ms ease !important;
}

.mk-checkbox:focus-visible,
.mk-filter-card input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

.mk-checkbox:disabled,
.mk-filter-card input[type="checkbox"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Checked state */
.mk-checkbox:checked,
.mk-checkbox[data-state="checked"],
.mk-checkbox.is-checked,
.mk-filter-card input[type="checkbox"]:checked {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* Checkbox with label in sidebar */
.mk-checkbox-row,
.mk-filter-card .checkbox-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.mk-checkbox-row label,
.mk-filter-card .checkbox-row label {
  font-size: 0.875rem !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
   Slider Component — Price Range Slider
   React: Track h-2 rounded-full bg-secondary, Range bg-primary, Thumb h-5 w-5
   --------------------------------------------------------------------- */
.mk-slider {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  touch-action: none !important;
  user-select: none !important;
}

.mk-slider__track {
  position: relative !important;
  height: 0.5rem !important; /* h-2 = 8px */
  width: 100% !important;
  flex-grow: 1 !important;
  overflow: hidden !important;
  border-radius: 9999px !important; /* rounded-full */
  background: hsl(var(--secondary)) !important; /* hsl(36 25% 88%) */
}

.mk-slider__range {
  position: absolute !important;
  height: 100% !important;
  background: hsl(var(--primary)) !important; /* #325A4D */
}

.mk-slider__thumb {
  display: block !important;
  width: 1.25rem !important; /* h-5 w-5 = 20px */
  height: 1.25rem !important;
  border-radius: 9999px !important; /* rounded-full */
  border: 2px solid hsl(var(--primary)) !important;
  background: hsl(var(--background)) !important; /* cream */
  transition: border-color 200ms ease !important;
  cursor: grab !important;
}

.mk-slider__thumb:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

.mk-slider__thumb:active {
  cursor: grabbing !important;
}

.mk-slider__thumb:disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

/* ---------------------------------------------------------------------
   Clear Filters Button
   React: Button variant="outline" className="w-full" with X icon
   --------------------------------------------------------------------- */
.mk-clear-filters-btn,
.mk-clear-filters {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  height: 2.5rem !important; /* h-10 = 40px */
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important;
  background: transparent !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: var(--radius, 0.25rem) !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease !important;
}

.mk-clear-filters-btn:hover,
.mk-clear-filters:hover {
  background: hsl(var(--destructive) / 0.1) !important;
  border-color: hsl(var(--destructive)) !important;
  color: hsl(var(--destructive)) !important;
}

.mk-clear-filters-btn svg,
.mk-clear-filters svg,
.mk-clear-filters .dashicons {
  width: 1rem !important; /* w-4 h-4 */
  height: 1rem !important;
}

/* Hidden by default, shown via JS when filters are active */
.mk-clear-filters-btn[data-visible="false"],
.mk-clear-filters:not(.visible):not([data-visible="true"]) {
  display: none !important;
}

.mk-clear-filters-btn.visible,
.mk-clear-filters-btn[data-visible="true"],
.mk-clear-filters.visible,
.mk-clear-filters[data-visible="true"] {
  display: flex !important;
}

/* ---------------------------------------------------------------------
   Help/Info Box
   React: bg-secondary/30 rounded-sm p-6 with small text
   --------------------------------------------------------------------- */
.mk-help-box,
.mk-sidebar-help {
  background: hsl(var(--secondary) / 0.3) !important; /* 30% opacity */
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
  padding: 1.5rem !important; /* p-6 */
}

.mk-help-box__title,
.mk-sidebar-help h3 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important; /* mb-3 */
  color: hsl(var(--foreground)) !important;
  margin-top: 0 !important;
}

.mk-help-box__list,
.mk-sidebar-help ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* space-y-2 */
}

.mk-help-box__item,
.mk-sidebar-help li {
  font-size: 0.75rem !important; /* text-xs */
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.5 !important;
}

/* ---------------------------------------------------------------------
   Mobile Responsive — Sidebar collapses below lg breakpoint
   --------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .mk-catalog__sidebar,
  .mk-catalog-sidebar {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* ==========================================================================
   END SECTION 131: CATALOG SIDEBAR 1:1 PARITY (Agent P13)
   ========================================================================== */

/* ==========================================================================
   SECTION 130: HEADER 1:1 PARITY (Agent P8)
   Source: src/components/layout/Header.tsx, CartDrawer.tsx, SearchBar.tsx
   Reference: docs/PARITY-AGENT-LOGS/P8-HEADER.md
   ========================================================================== */

/* ------------------------------------------------------------------
   P8-1: Header Container - Sticky with backdrop blur
   React: sticky top-0 z-50 bg-background/95 backdrop-blur border-b border-border
   ------------------------------------------------------------------ */
.mk-header,
.site-header,
header.wp-block-template-part {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background-color: hsl(36 33% 94% / 0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid hsl(36 20% 82%) !important;
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

@supports (backdrop-filter: blur(8px)) {
  .mk-header,
  .site-header,
  header.wp-block-template-part {
    background-color: hsl(36 33% 94% / 0.8) !important;
  }
}

/* Scrolled state shadow */
.mk-header--scrolled,
.site-header.is-scrolled {
  box-shadow: var(--shadow-elegant) !important;
}

/* ------------------------------------------------------------------
   P8-2: Header Inner Container
   React: container mx-auto px-4
   ------------------------------------------------------------------ */
.mk-header__inner,
.mk-header > .wp-block-group,
.site-header > .wp-block-group {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* ------------------------------------------------------------------
   P8-3: Header Row - Flexbox with h-20 (80px)
   React: flex items-center justify-between h-20
   ------------------------------------------------------------------ */
.mk-header__row,
.mk-header > .wp-block-group > .wp-block-group,
.site-header .wp-block-group[class*="is-layout-flex"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 5rem !important; /* h-20 = 80px */
  gap: 1rem !important;
}

/* ------------------------------------------------------------------
   P8-4: Logo - h-14 (56px)
   React: h-14 object-contain
   FIX-5: Added max-width: none to prevent block width attribute override
   ------------------------------------------------------------------ */
.mk-header__logo img,
.mk-header .wp-block-site-logo img,
.site-header .wp-block-site-logo img,
.mk-header .custom-logo,
.site-header .custom-logo {
  height: 3.5rem !important; /* h-14 = 56px */
  width: auto !important;
  object-fit: contain !important;
  max-height: 3.5rem !important;
  max-width: none !important; /* FIX-5: Prevent block width override */
}

.mk-header .wp-block-site-logo,
.site-header .wp-block-site-logo {
  margin: 0 !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------
   P8-5: Desktop Navigation - gap-8 (2rem)
   React: hidden lg:flex items-center gap-8
   ------------------------------------------------------------------ */
.mk-header__nav,
.mk-header .wp-block-navigation,
.site-header .wp-block-navigation {
  display: none !important;
}

@media (min-width: 1024px) {
  .mk-header__nav,
  .mk-header .wp-block-navigation,
  .site-header .wp-block-navigation {
    display: flex !important;
    align-items: center !important;
  }

  .mk-header .wp-block-navigation__container,
  .site-header .wp-block-navigation__container {
    gap: 2rem !important; /* gap-8 */
  }
}

/* ------------------------------------------------------------------
   P8-6: Navigation Links
   React: text-sm font-medium text-foreground hover:text-primary transition-colors
   ------------------------------------------------------------------ */
.mk-header__nav-link,
.mk-header .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item__content {
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  transition: color 150ms ease !important;
  text-decoration: none !important;
  padding: 0.5rem 0 !important;
}

.mk-header__nav-link:hover,
.mk-header__nav-link--active,
.mk-header .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item__content:hover,
.mk-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: hsl(160 30% 28%) !important; /* text-primary */
}

/* ------------------------------------------------------------------
   P8-7: Navigation Dropdown Trigger
   React: flex items-center gap-1 + ChevronDown w-4 h-4
   ------------------------------------------------------------------ */
.mk-header__nav-trigger,
.mk-header .wp-block-navigation-submenu__toggle,
.site-header .wp-block-navigation-submenu__toggle {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important; /* gap-1 */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(160 30% 18%) !important;
  transition: color 150ms ease !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-family: var(--font-body) !important;
}

.mk-header__nav-trigger:hover,
.mk-header .wp-block-navigation-submenu__toggle:hover,
.site-header .wp-block-navigation-submenu__toggle:hover {
  color: hsl(160 30% 28%) !important;
}

/* Chevron icon in dropdown trigger */
.mk-header .wp-block-navigation__submenu-icon,
.site-header .wp-block-navigation__submenu-icon {
  width: 1rem !important; /* w-4 */
  height: 1rem !important; /* h-4 */
  margin-left: 0.25rem !important;
}

/* ------------------------------------------------------------------
   P8-8: Dropdown Menu Content
   React: z-50 min-w-[8rem] rounded-md border bg-popover p-1 shadow-md w-56
   ------------------------------------------------------------------ */
.mk-header__dropdown-content,
.mk-header .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation__submenu-container {
  z-index: 50 !important;
  min-width: 14rem !important; /* w-56 = 224px */
  overflow: hidden !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  border: 1px solid hsl(36 20% 82%) !important;
  background-color: hsl(40 30% 96%) !important; /* bg-popover */
  padding: 0.25rem !important; /* p-1 */
  color: hsl(160 30% 18%) !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; /* shadow-md */
}

/* ------------------------------------------------------------------
   P8-9: Dropdown Menu Items
   React: rounded-sm px-2 py-1.5 text-sm focus:bg-accent
   ------------------------------------------------------------------ */
.mk-header__dropdown-item,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block !important;
  padding: 0.375rem 0.5rem !important; /* py-1.5 px-2 */
  font-size: 0.875rem !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  color: hsl(160 30% 18%) !important;
  transition: background-color 150ms ease, color 150ms ease !important;
  text-decoration: none !important;
  cursor: default !important;
}

.mk-header__dropdown-item:hover,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background-color: hsl(42 55% 58%) !important; /* bg-accent (gold) */
  color: hsl(160 30% 18%) !important;
}

/* ------------------------------------------------------------------
   P37-4: Focus state for keyboard navigation
   React: focus:bg-accent focus:text-accent-foreground
   ------------------------------------------------------------------ */
.mk-header__dropdown-item:focus,
.mk-user-dropdown__item:focus,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background-color: hsl(42 55% 58%) !important; /* bg-accent */
  color: hsl(160 30% 15%) !important; /* text-accent-foreground */
  outline: none !important;
}

/* ------------------------------------------------------------------
   P37-5: Disabled item state
   React: data-[disabled]:opacity-50 data-[disabled]:pointer-events-none
   ------------------------------------------------------------------ */
.mk-header__dropdown-item[aria-disabled="true"],
.mk-user-dropdown__item--disabled,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item--disabled .wp-block-navigation-item__content,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item--disabled .wp-block-navigation-item__content {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* ------------------------------------------------------------------
   P37-6: Dropdown shortcut text styling
   React: ml-auto text-xs tracking-widest opacity-60
   ------------------------------------------------------------------ */
.mk-dropdown-shortcut {
  margin-left: auto;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

/* ------------------------------------------------------------------
   P37-7: Dropdown separator styling
   React: -mx-1 my-1 h-px bg-muted
   ------------------------------------------------------------------ */
.mk-dropdown-separator {
  margin: 0.25rem -0.25rem !important; /* my-1 -mx-1 */
  height: 1px !important;
  background-color: hsl(36 20% 90%) !important; /* bg-muted */
}

/* ------------------------------------------------------------------
   P8-10: Right Side Actions Container
   React: flex items-center gap-4
   ------------------------------------------------------------------ */
.mk-header__actions,
.mk-header > .wp-block-group > .wp-block-group:last-child,
.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important; /* gap-4 */
  flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------
   P8-11: Search Input
   React: pl-9 pr-4 w-48 lg:w-64 h-9 bg-muted/50 border-none
   FIX-4: Removed width:240 from block attribute, CSS controls responsive width
   ------------------------------------------------------------------ */
.mk-header__search .wp-block-search__inside-wrapper,
.site-header .wp-block-search__inside-wrapper {
  background-color: hsl(36 20% 90% / 0.5) !important; /* bg-muted/50 */
  border: none !important;
  border-radius: var(--radius) !important;
  height: 2.25rem !important; /* h-9 */
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  transition: box-shadow 200ms ease !important;
  width: 12rem !important; /* w-48 = 192px mobile */
}

.mk-header__search .wp-block-search__inside-wrapper:focus-within,
.site-header .wp-block-search__inside-wrapper:focus-within {
  box-shadow: 0 0 0 1px hsl(160 30% 28%) !important; /* ring-1 ring-primary */
}

.mk-header__search .wp-block-search__input,
.site-header .wp-block-search__input {
  background: transparent !important;
  border: none !important;
  height: 2.25rem !important;
  font-size: 0.875rem !important;
  font-family: var(--font-body) !important;
  color: hsl(160 30% 18%) !important;
  padding: 0 0.75rem !important;
  outline: none !important;
  min-width: 0 !important;
  width: 100% !important; /* Full width of container */
}

@media (min-width: 1024px) {
  .mk-header__search .wp-block-search__inside-wrapper,
  .mk-header .wp-block-search__inside-wrapper,
  .site-header .wp-block-search__inside-wrapper {
    width: 16rem !important; /* lg:w-64 = 256px desktop */
  }
}

.mk-header__search .wp-block-search__input::placeholder,
.site-header .wp-block-search__input::placeholder {
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  font-size: 0.875rem !important;
}

/* Search button (icon only) */
.mk-header__search .wp-block-search__button,
.site-header .wp-block-search__button {
  background: transparent !important;
  border: none !important;
  padding: 0 0.5rem !important;
  height: 2.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: hsl(160 15% 40%) !important;
  min-width: auto !important;
  box-shadow: none !important;
}

.mk-header__search .wp-block-search__button:hover,
.site-header .wp-block-search__button:hover {
  color: hsl(160 30% 18%) !important;
}

.mk-header__search .wp-block-search__button svg,
.site-header .wp-block-search__button svg {
  width: 1rem !important; /* w-4 */
  height: 1rem !important; /* h-4 */
}

/* ------------------------------------------------------------------
   P8-12: Icon Buttons (Ghost variant, icon size)
   React: h-10 w-10, hover:bg-accent hover:text-accent-foreground
   ------------------------------------------------------------------ */
.mk-header__account-link,
.mk-header__cart-btn,
.mk-header__mobile-toggle button,
.site-header [class*="icon-button"],
.mk-header button[class*="ghost"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important; /* w-10 */
  height: 2.5rem !important; /* h-10 */
  border-radius: 0.25rem !important; /* rounded = --radius */
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: hsl(160 30% 18%) !important;
  transition: background-color 200ms ease, color 200ms ease !important;
  text-decoration: none !important;
}

.mk-header__account-link:hover,
.mk-header__cart-btn:hover,
.mk-header__mobile-toggle button:hover,
.site-header [class*="icon-button"]:hover,
.mk-header button[class*="ghost"]:hover {
  background-color: hsl(42 55% 58%) !important; /* hover:bg-accent */
  color: hsl(160 30% 15%) !important; /* hover:text-accent-foreground */
}

/* Icon size inside buttons */
.mk-header__account-link svg,
.mk-header__cart-btn svg,
.mk-header__mobile-toggle button svg,
.site-header [class*="icon-button"] svg {
  width: 1.25rem !important; /* w-5 */
  height: 1.25rem !important; /* h-5 */
}

/* ------------------------------------------------------------------
   P8-13: Cart Badge (CRITICAL - Must be RED)
   React: absolute -top-1 -right-1 w-5 h-5 text-[10px] bg-destructive
   ------------------------------------------------------------------ */
.mk-header .wc-block-mini-cart__badge,
.mk-header .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge,
.site-header .wc-block-mini-cart__badge,
html body .mk-header .wc-block-mini-cart__badge,
html body .site-header .wc-block-mini-cart__badge {
  position: absolute !important;
  top: -0.25rem !important; /* -top-1 */
  right: -0.25rem !important; /* -right-1 */
  width: 1.25rem !important; /* w-5 */
  height: 1.25rem !important; /* h-5 */
  min-width: 1.25rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.625rem !important; /* text-[10px] */
  font-weight: 600 !important;
  background: hsl(0 65% 50%) !important; /* bg-destructive (RED) */
  background-color: hsl(0 65% 50%) !important;
  color: white !important;
  border-radius: 9999px !important; /* rounded-full */
  border: none !important;
  line-height: 1 !important;
}

/* Mini-cart button relative positioning for badge */
.mk-header .wc-block-mini-cart__button,
.site-header .wc-block-mini-cart__button {
  position: relative !important;
  padding: 0.5rem !important;
}

/* ------------------------------------------------------------------
   P8-14: Mobile Menu Toggle
   React: lg:hidden
   ------------------------------------------------------------------ */
.mk-header__mobile-toggle,
.site-header .mobile-menu-toggle {
  display: flex !important;
}

@media (min-width: 1024px) {
  .mk-header__mobile-toggle,
  .site-header .mobile-menu-toggle {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   P8-15: Mobile Menu Container
   React: lg:hidden py-4 border-t border-border animate-fade-in
   ------------------------------------------------------------------ */
.mk-header__mobile-menu,
.site-header .mobile-menu {
  display: none !important;
  padding-top: 1rem !important; /* py-4 */
  padding-bottom: 1rem !important;
  border-top: 1px solid hsl(36 20% 82%) !important;
  animation: mk-fade-in 0.3s ease-out !important;
}

.mk-header__mobile-menu--open,
.mk-header__mobile-menu.is-open,
.site-header .mobile-menu.is-open {
  display: block !important;
}

@media (min-width: 1024px) {
  .mk-header__mobile-menu,
  .site-header .mobile-menu {
    display: none !important;
  }
}

/* Mobile nav container */
.mk-header__mobile-nav,
.site-header .mobile-menu nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* Mobile section label */
.mk-header__mobile-section-label,
.site-header .mobile-menu .section-label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  padding: 0.5rem !important; /* px-2 */
}

/* Mobile menu submenu sections - py-2 wrapper */
.mk-mobile-menu__section,
.mk-mobile-nav__section,
.mk-header__mobile-section,
.site-header .mobile-menu .submenu-section {
  padding: 0.5rem 0 !important; /* py-2 = 8px top/bottom */
}

/* Ensure section labels have correct styling (extended selectors) */
.mk-mobile-menu__section-label,
.mk-mobile-nav__section-label {
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  color: hsl(var(--muted-foreground)) !important;
  padding: 0 0.5rem !important; /* px-2 */
  display: block !important;
}

/* Mobile submenu links */
.mk-header__mobile-link,
.site-header .mobile-menu a {
  display: block !important;
  padding: 0.5rem 1rem !important; /* py-2 px-4 */
  font-size: 0.875rem !important;
  border-radius: 0.25rem !important;
  color: hsl(160 30% 18%) !important;
  text-decoration: none !important;
  transition: background-color 150ms ease !important;
}

.mk-header__mobile-link:hover,
.site-header .mobile-menu a:hover {
  background-color: hsl(36 20% 90%) !important; /* hover:bg-muted */
}

/* Mobile top-level links */
.mk-header__mobile-top-link,
.site-header .mobile-menu .top-link {
  padding: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(160 30% 18%) !important;
  text-decoration: none !important;
}

.mk-header__mobile-top-link:hover,
.site-header .mobile-menu .top-link:hover {
  color: hsl(160 30% 28%) !important; /* hover:text-primary */
}

/* ------------------------------------------------------------------
   P8-16: User Dropdown Content
   React: w-56, px-3 py-2 border-b, text-sm font-medium, text-xs text-muted-foreground
   ------------------------------------------------------------------ */
.mk-header__user-dropdown,
.site-header .user-dropdown {
  min-width: 14rem !important; /* w-56 */
}

.mk-header__user-info,
.site-header .user-info {
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  border-bottom: 1px solid hsl(36 20% 82%) !important;
}

.mk-header__user-name,
.site-header .user-name {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(160 30% 18%) !important;
}

.mk-header__user-email,
.site-header .user-email {
  font-size: 0.75rem !important; /* text-xs */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
}

/* Logout / destructive menu item */
.mk-header__logout,
.site-header .logout-link {
  color: hsl(0 65% 50%) !important; /* text-destructive */
  cursor: pointer !important;
}

.mk-header__logout:hover,
.site-header .logout-link:hover {
  background-color: hsl(0 65% 50% / 0.1) !important;
}

/* ==========================================================================
   END SECTION 130: HEADER 1:1 PARITY
   ========================================================================== */


/* ==========================================================================
   SECTION 130: FORM INPUTS - REACT 1:1 PARITY
   Agent P7 Implementation - 2026-03-23

   Source: src/components/ui/input.tsx, textarea.tsx, select.tsx, checkbox.tsx
   Reference: docs/PARITY-AGENT-LOGS/P7-FORM-INPUTS.md

   CRITICAL VALUES:
   - Input/Textarea/Select height: 40px (h-10)
   - Border-radius: 0.125rem (2px) for ALL form elements (CUSTOM Tailwind config)
   - Border: 1px solid hsl(36 20% 85%) - input color
   - Padding: 0.5rem 0.75rem (8px 12px)
   - Font-size: 16px mobile (prevent iOS zoom), 14px desktop
   - Focus ring: 2px primary with 2px offset background
   - Checkbox: 16x16px, primary border, primary fill when checked
   ========================================================================== */

/* ------------------------------------------------------------------
   TEXT INPUT - React: h-10 rounded-md border border-input bg-background
   px-3 py-2 text-base md:text-sm
   ------------------------------------------------------------------ */
.mk-input,
input.mk-input,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="password"],
.wpcf7-form input[type="search"],
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form .input-text,
.woocommerce-form input[type="text"],
.woocommerce-form input[type="email"],
.woocommerce-form input[type="tel"],
.woocommerce-form input[type="password"],
.woocommerce-form .input-text,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content .input-text {
  display: flex !important;
  height: 2.5rem !important;                     /* h-10 = 40px EXACT */
  width: 100% !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  border: 1px solid hsl(36 20% 85%) !important;  /* border-input EXACT */
  background-color: hsl(36 33% 94%) !important;  /* bg-background EXACT */
  padding: 0.5rem 0.75rem !important;            /* py-2 px-3 = 8px 12px EXACT */
  font-size: 1rem !important;                    /* text-base = 16px (mobile, prevents iOS zoom) */
  font-family: var(--font-body) !important;
  color: hsl(160 30% 18%) !important;            /* foreground EXACT */
  line-height: 1.5rem !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Desktop: 14px font (md:text-sm) */
@media (min-width: 768px) {
  .mk-input,
  input.mk-input,
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="url"],
  .wpcf7-form input[type="number"],
  .wpcf7-form input[type="password"],
  .wpcf7-form input[type="search"],
  .woocommerce form input[type="text"],
  .woocommerce form input[type="email"],
  .woocommerce form input[type="tel"],
  .woocommerce form input[type="password"],
  .woocommerce form .input-text,
  .woocommerce-form input[type="text"],
  .woocommerce-form input[type="email"],
  .woocommerce-form input[type="tel"],
  .woocommerce-form input[type="password"],
  .woocommerce-form .input-text,
  .woocommerce-checkout input[type="text"],
  .woocommerce-checkout input[type="email"],
  .woocommerce-checkout input[type="tel"],
  .woocommerce-checkout input[type="password"],
  .woocommerce-MyAccount-content input[type="text"],
  .woocommerce-MyAccount-content input[type="email"],
  .woocommerce-MyAccount-content input[type="password"],
  .woocommerce-MyAccount-content .input-text {
    font-size: 0.875rem !important;              /* md:text-sm = 14px */
  }
}

/* Placeholder - React: placeholder:text-muted-foreground */
.mk-input::placeholder,
.wpcf7-form input::placeholder,
.woocommerce-form input::placeholder,
.woocommerce-checkout input::placeholder,
.woocommerce-MyAccount-content input::placeholder {
  color: hsl(160 15% 40%) !important;            /* muted-foreground EXACT */
  opacity: 1 !important;
}

/* Focus State - React: focus-visible:ring-2 ring-ring ring-offset-2 */
.mk-input:focus,
.mk-input:focus-visible,
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="password"]:focus,
.wpcf7-form input[type="search"]:focus,
.woocommerce form input:focus,
.woocommerce-form input:focus,
.woocommerce-checkout input:focus,
.woocommerce-MyAccount-content input:focus {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  /* Double shadow: inner = 2px offset gap (cream), outer = 2px ring at 20% opacity */
  box-shadow:
    0 0 0 2px hsl(var(--background)),     /* ring-offset: 2px cream gap */
    0 0 0 4px hsl(var(--ring) / 0.2) !important;  /* ring: 2px at 20% opacity */
}

/* Disabled State - React: disabled:cursor-not-allowed disabled:opacity-50 */
.mk-input:disabled,
.wpcf7-form input:disabled,
.woocommerce form input:disabled,
.woocommerce-form input:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* ------------------------------------------------------------------
   TEXTAREA - React: min-h-[80px] rounded-md border border-input
   bg-background px-3 py-2 text-sm
   ------------------------------------------------------------------ */
.mk-textarea,
textarea.mk-textarea,
.wpcf7-form textarea,
.woocommerce form textarea,
.woocommerce-form textarea,
.woocommerce-checkout textarea,
.woocommerce-MyAccount-content textarea {
  display: flex !important;
  min-height: 80px !important;                   /* min-h-[80px] EXACT */
  width: 100% !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  border: 1px solid hsl(36 20% 85%) !important;  /* border-input EXACT */
  background-color: hsl(36 33% 94%) !important;  /* bg-background EXACT */
  padding: 0.5rem 0.75rem !important;            /* py-2 px-3 EXACT */
  font-size: 0.875rem !important;                /* text-sm = 14px */
  font-family: var(--font-body) !important;
  color: hsl(160 30% 18%) !important;            /* foreground */
  line-height: 1.5 !important;
  resize: vertical !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
  box-sizing: border-box !important;
}

/* Textarea Placeholder */
.mk-textarea::placeholder,
.wpcf7-form textarea::placeholder,
.woocommerce-form textarea::placeholder {
  color: hsl(160 15% 40%) !important;            /* muted-foreground */
  opacity: 1 !important;
}

/* Textarea Focus */
.mk-textarea:focus,
.mk-textarea:focus-visible,
.wpcf7-form textarea:focus,
.woocommerce form textarea:focus,
.woocommerce-form textarea:focus,
.woocommerce-checkout textarea:focus {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px hsl(var(--background)),
              0 0 0 4px hsl(var(--ring) / 0.2) !important;
}

/* Textarea Disabled */
.mk-textarea:disabled,
.wpcf7-form textarea:disabled,
.woocommerce form textarea:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* ------------------------------------------------------------------
   SELECT - React: h-10 rounded-md border border-input bg-background
   px-3 py-2 text-sm
   ------------------------------------------------------------------ */
.mk-select,
select.mk-select,
.wpcf7-form select,
.woocommerce form select,
.woocommerce-form select,
.woocommerce-checkout select,
.woocommerce-MyAccount-content select {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 2.5rem !important;                     /* h-10 = 40px */
  width: 100% !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  border: 1px solid hsl(36 20% 85%) !important;  /* border-input */
  background-color: hsl(36 33% 94%) !important;  /* bg-background */
  padding: 0.5rem 2.5rem 0.5rem 0.75rem !important; /* py-2 px-3, extra right for arrow */
  font-size: 0.875rem !important;                /* text-sm */
  font-family: var(--font-body) !important;
  color: hsl(160 30% 18%) !important;
  cursor: pointer !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
  box-sizing: border-box !important;
  /* Custom dropdown arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23577066' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Select Focus */
.mk-select:focus,
.mk-select:focus-visible,
.wpcf7-form select:focus,
.woocommerce form select:focus,
.woocommerce-form select:focus,
.woocommerce-checkout select:focus {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px hsl(var(--background)),
              0 0 0 4px hsl(var(--ring) / 0.2) !important;
}

/* Select Disabled */
.mk-select:disabled,
.wpcf7-form select:disabled,
.woocommerce form select:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Select Option Styling */
.mk-select option,
.wpcf7-form select option,
.woocommerce-form select option {
  padding: 0.375rem 0.5rem !important;           /* py-1.5 pr-2 */
  font-size: 0.875rem !important;
  background: hsl(40 30% 96%) !important;        /* popover background */
  color: hsl(160 30% 18%) !important;
}

/* ------------------------------------------------------------------
   CHECKBOX - React: h-4 w-4 rounded-sm border border-primary
   data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground
   ------------------------------------------------------------------ */
.mk-checkbox,
input[type="checkbox"].mk-checkbox,
.wpcf7-form input[type="checkbox"],
.woocommerce form input[type="checkbox"],
.woocommerce-form input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-MyAccount-content input[type="checkbox"] {
  width: 1rem !important;                        /* w-4 = 16px EXACT */
  height: 1rem !important;                       /* h-4 = 16px EXACT */
  min-width: 1rem !important;
  min-height: 1rem !important;
  flex-shrink: 0 !important;
  border-radius: 0.125rem !important;            /* rounded-md = 2px (React custom config) */
  border: 1px solid hsl(160 30% 28%) !important; /* border-primary EXACT */
  background-color: transparent !important;
  cursor: pointer !important;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  position: relative !important;
}

/* Checkbox Checked State */
.mk-checkbox:checked,
.wpcf7-form input[type="checkbox"]:checked,
.woocommerce form input[type="checkbox"]:checked,
.woocommerce-form input[type="checkbox"]:checked,
.woocommerce-checkout input[type="checkbox"]:checked {
  background-color: hsl(160 30% 28%) !important; /* bg-primary EXACT */
  border-color: hsl(160 30% 28%) !important;
  /* Checkmark SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F5F1EA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px !important;
}

/* Checkbox Focus */
.mk-checkbox:focus,
.mk-checkbox:focus-visible,
.wpcf7-form input[type="checkbox"]:focus,
.woocommerce form input[type="checkbox"]:focus,
.woocommerce-form input[type="checkbox"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)),
              0 0 0 4px hsl(var(--ring) / 0.2) !important;
}

/* Checkbox Disabled */
.mk-checkbox:disabled,
.wpcf7-form input[type="checkbox"]:disabled,
.woocommerce form input[type="checkbox"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Checkbox with Label Layout */
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
}

.wpcf7-form .wpcf7-acceptance label,
.wpcf7-form .wpcf7-checkbox label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
}

.wpcf7-form .wpcf7-list-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------
   RADIO BUTTON - Same base as checkbox but circular
   ------------------------------------------------------------------ */
.mk-radio,
input[type="radio"].mk-radio,
.wpcf7-form input[type="radio"],
.woocommerce form input[type="radio"],
.woocommerce-form input[type="radio"] {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;                 /* Circular */
  border: 1px solid hsl(160 30% 28%) !important;
  background-color: transparent !important;
  cursor: pointer !important;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  position: relative !important;
}

/* Radio Checked State */
.mk-radio:checked,
.wpcf7-form input[type="radio"]:checked,
.woocommerce form input[type="radio"]:checked,
.woocommerce-form input[type="radio"]:checked {
  background-color: hsl(160 30% 28%) !important;
  border-color: hsl(160 30% 28%) !important;
  /* Inner dot */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23F5F1EA'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% !important;
}

/* Radio Focus */
.mk-radio:focus,
.mk-radio:focus-visible,
.wpcf7-form input[type="radio"]:focus,
.woocommerce form input[type="radio"]:focus,
.woocommerce-form input[type="radio"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)),
              0 0 0 4px hsl(var(--ring) / 0.2) !important;
}

/* ------------------------------------------------------------------
   FILE INPUT - React: file:border-0 file:bg-transparent file:text-sm
   file:font-medium file:text-foreground
   ------------------------------------------------------------------ */
.mk-file-input,
.wpcf7-form input[type="file"],
.woocommerce form input[type="file"],
.woocommerce-form input[type="file"] {
  width: 100% !important;
  height: auto !important;
  min-height: 2.5rem !important;
  border: 1px solid hsl(36 20% 85%) !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  font-family: var(--font-body) !important;
  background-color: hsl(36 33% 94%) !important;
  color: hsl(160 30% 18%) !important;
  cursor: pointer !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}

.mk-file-input::file-selector-button,
.wpcf7-form input[type="file"]::file-selector-button,
.woocommerce form input[type="file"]::file-selector-button,
.woocommerce-form input[type="file"]::file-selector-button {
  border: 0 !important;
  background: transparent !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  color: hsl(160 30% 18%) !important;
  padding-right: 0.75rem !important;
  margin-right: 0.75rem !important;
  border-right: 1px solid hsl(36 20% 82%) !important;
  cursor: pointer !important;
}

.mk-file-input:focus,
.wpcf7-form input[type="file"]:focus,
.woocommerce form input[type="file"]:focus,
.woocommerce-form input[type="file"]:focus {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px hsl(var(--background)),
              0 0 0 4px hsl(var(--ring) / 0.2) !important;
}

/* ------------------------------------------------------------------
   FORM LABEL - React Label: text-sm font-medium leading-none
   ------------------------------------------------------------------ */
.mk-label,
label.mk-label,
.wpcf7-form label,
.woocommerce form label,
.woocommerce-form label,
.woocommerce-checkout label,
.woocommerce-MyAccount-content label {
  display: block !important;
  font-size: 0.875rem !important;                /* text-sm = 14px */
  font-weight: 500 !important;                   /* font-medium */
  font-family: var(--font-body) !important;
  color: hsl(160 30% 18%) !important;            /* foreground */
  line-height: 1 !important;                     /* leading-none */
  margin-bottom: 0.5rem !important;
}

/* Required asterisk */
.wpcf7-form .wpcf7-form-control-wrap + .wpcf7-not-valid-tip,
.woocommerce-form .required {
  color: hsl(0 65% 50%) !important;              /* destructive */
}

/* ------------------------------------------------------------------
   ERROR STATES - React uses destructive color
   ------------------------------------------------------------------ */

/* Invalid input border */
.wpcf7-form .wpcf7-not-valid,
.woocommerce-form .woocommerce-invalid input,
input.mk-input--error {
  border-color: hsl(0 65% 50%) !important;       /* destructive EXACT */
}

/* Invalid input focus */
.wpcf7-form .wpcf7-not-valid:focus,
.woocommerce-form .woocommerce-invalid input:focus {
  box-shadow: 0 0 0 2px hsl(36 33% 94%),
              0 0 0 4px hsl(0 65% 50%) !important; /* destructive ring */
}

/* Error message text */
.wpcf7-not-valid-tip,
.woocommerce-error,
.mk-error-message {
  color: hsl(0 65% 50%) !important;              /* destructive */
  font-size: 0.75rem !important;                 /* text-xs = 12px */
  font-family: var(--font-body) !important;
  margin-top: 0.25rem !important;
  display: block !important;
}

/* Success message */
.wpcf7-mail-sent-ok,
.woocommerce-message,
.mk-success-message {
  background-color: hsl(142 76% 36% / 0.1) !important;
  border: 1px solid hsl(142 76% 36%) !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  color: hsl(142 76% 36%) !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  margin-top: 1rem !important;
}

/* ==========================================================================
   END SECTION 130: FORM INPUTS - REACT 1:1 PARITY
   ========================================================================== */

/* ==========================================================================
   131. CONTACT PAGE — 1:1 REACT PARITY
   Source: src/pages/Contact.tsx
   Generated: P16 Parity Agent
   ========================================================================== */

/* ---------------------------------------------------------------------------
   131.1 PAGE CONTAINER & LAYOUT
   React: container mx-auto px-4 py-12 -> max-w-5xl mx-auto
   --------------------------------------------------------------------------- */
.mk-contact-page {
  max-width: 64rem;                   /* max-w-5xl = 1024px */
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 1rem;                 /* py-12 px-4 */
}

@media (min-width: 768px) {
  .mk-contact-page {
    padding: 3rem 1.5rem;             /* Slightly more padding on desktop */
  }
}

/* ---------------------------------------------------------------------------
   131.2 PAGE TITLE
   React: font-display text-3xl md:text-4xl font-semibold text-foreground mb-4 text-center
   --------------------------------------------------------------------------- */
.mk-contact-page__title,
.mk-contact-page > h1,
body.page-id-15 .entry-content > .wp-block-group:first-child h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.875rem;                /* text-3xl = 30px */
  line-height: 2.25rem;
  font-weight: 600;                   /* font-semibold */
  color: hsl(160 30% 18%);            /* foreground */
  margin-bottom: 1rem;                /* mb-4 */
  text-align: center;
  letter-spacing: -0.025em;           /* tracking-tight */
}

@media (min-width: 768px) {
  .mk-contact-page__title,
  .mk-contact-page > h1,
  body.page-id-15 .entry-content > .wp-block-group:first-child h1 {
    font-size: 2.25rem;               /* md:text-4xl = 36px */
    line-height: 2.5rem;
  }
}

/* ---------------------------------------------------------------------------
   131.3 SUBTITLE / INTRO TEXT
   React: text-muted-foreground text-center mb-12 max-w-2xl mx-auto
   --------------------------------------------------------------------------- */
.mk-contact-page__subtitle,
.mk-contact-page > p:first-of-type,
body.page-id-15 .entry-content > .wp-block-group:first-child p {
  color: hsl(160 15% 40%);            /* muted-foreground */
  text-align: center;
  margin-bottom: 3rem;                /* mb-12 */
  max-width: 42rem;                   /* max-w-2xl = 672px */
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  line-height: 1.625;
}

/* ---------------------------------------------------------------------------
   131.4 TWO-COLUMN GRID
   React: grid lg:grid-cols-2 gap-12
   --------------------------------------------------------------------------- */
.mk-contact-grid,
body.page-id-15 .mk-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;                          /* gap-12 */
}

@media (min-width: 1024px) {
  .mk-contact-grid,
  body.page-id-15 .mk-contact-grid {
    grid-template-columns: repeat(2, 1fr);  /* lg:grid-cols-2 */
  }
}

/* ---------------------------------------------------------------------------
   131.5 CONTACT INFO SECTION TITLE (H2)
   React: font-display text-2xl font-semibold text-foreground mb-6
   --------------------------------------------------------------------------- */
.mk-contact-info__title,
.mk-contact-grid > div:first-child > h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;                  /* text-2xl = 24px */
  line-height: 2rem;
  font-weight: 600;                   /* font-semibold */
  color: hsl(160 30% 18%);            /* foreground */
  margin-bottom: 1.5rem;              /* mb-6 */
  letter-spacing: -0.025em;
}

/* ---------------------------------------------------------------------------
   131.6 CONTACT ITEMS CONTAINER
   React: space-y-6
   --------------------------------------------------------------------------- */
.mk-contact-items,
.mk-contact-grid > div:first-child > .wp-block-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                        /* space-y-6 */
}

/* ---------------------------------------------------------------------------
   131.7 CONTACT INFO ITEM
   React: flex items-start gap-4
   --------------------------------------------------------------------------- */
.mk-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;                          /* gap-4 */
}

/* ---------------------------------------------------------------------------
   131.8 CONTACT ICON CONTAINER
   React: w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0
   --------------------------------------------------------------------------- */
.mk-contact-item__icon,
.mk-contact-icon-circle {
  width: 3rem;                        /* w-12 = 48px */
  height: 3rem;                       /* h-12 = 48px */
  min-width: 3rem;
  border-radius: 9999px;              /* rounded-full */
  background-color: hsl(160 30% 28% / 0.1);  /* primary/10 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   131.9 CONTACT ICON (SVG)
   React: w-5 h-5 text-primary
   --------------------------------------------------------------------------- */
.mk-contact-item__icon svg,
.mk-contact-icon-circle svg {
  width: 1.25rem;                     /* w-5 = 20px */
  height: 1.25rem;                    /* h-5 = 20px */
  color: hsl(160 30% 28%);            /* primary */
}

/* ---------------------------------------------------------------------------
   131.10 CONTACT ITEM TITLE (H3)
   React: font-semibold text-foreground mb-1
   --------------------------------------------------------------------------- */
.mk-contact-item__title {
  font-weight: 600;                   /* font-semibold */
  color: hsl(160 30% 18%);            /* foreground */
  margin-bottom: 0.25rem;             /* mb-1 */
  font-size: 1rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   131.11 CONTACT ITEM TEXT & LINKS
   React: text-muted-foreground, hover:text-primary transition-colors
   --------------------------------------------------------------------------- */
.mk-contact-item__text {
  color: hsl(160 15% 40%);            /* muted-foreground */
  font-size: 1rem;
  line-height: 1.625;
}

.mk-contact-item__text a {
  color: hsl(160 15% 40%);
  text-decoration: none;
  transition: color 200ms ease;
}

.mk-contact-item__text a:hover {
  color: hsl(160 30% 28%);            /* primary */
}

/* ---------------------------------------------------------------------------
   131.12 FORM CARD
   React: bg-card rounded-sm shadow-elegant p-8
   --------------------------------------------------------------------------- */
.mk-contact-form__card,
.mk-contact-form,
body.page-id-15 .mk-contact-form {
  background-color: hsl(40 30% 96%);  /* card */
  border-radius: 0;                   /* rounded-sm = calc(0.25rem - 4px) = 0px */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08);  /* shadow-elegant */
  padding: 2rem;                      /* p-8 */
}

/* ---------------------------------------------------------------------------
   131.13 FORM TITLE (H2 IN CARD)
   React: font-display text-2xl font-semibold text-foreground mb-6
   --------------------------------------------------------------------------- */
.mk-contact-form__title,
.mk-contact-form h2,
.mk-contact-form__card h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;                  /* text-2xl */
  line-height: 2rem;
  font-weight: 600;
  color: hsl(160 30% 18%);
  margin-bottom: 1.5rem;              /* mb-6 */
  letter-spacing: -0.025em;
}

/* ---------------------------------------------------------------------------
   131.14 FORM CONTAINER
   React: space-y-6
   --------------------------------------------------------------------------- */
.mk-contact-form form,
.mk-contact-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                        /* space-y-6 */
}

/* ---------------------------------------------------------------------------
   131.15 FORM NAME/EMAIL ROW (TWO COLUMNS)
   React: grid sm:grid-cols-2 gap-4
   --------------------------------------------------------------------------- */
.mk-contact-form .mk-form-row,
.mk-contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;                          /* gap-4 */
}

@media (min-width: 640px) {
  .mk-contact-form .mk-form-row,
  .mk-contact-form__row {
    grid-template-columns: repeat(2, 1fr);  /* sm:grid-cols-2 */
  }
}

/* ---------------------------------------------------------------------------
   131.16 FORM FIELD CONTAINER
   React: space-y-2
   --------------------------------------------------------------------------- */
.mk-contact-form .mk-form-field,
.mk-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                        /* space-y-2 */
}

/* ---------------------------------------------------------------------------
   131.17 FORM LABELS
   React: text-sm font-medium leading-none (from label.tsx)
   --------------------------------------------------------------------------- */
.mk-contact-form label,
.mk-contact-form .wpcf7-form label {
  font-size: 0.875rem;                /* text-sm */
  font-weight: 500;                   /* font-medium */
  line-height: 1;                     /* leading-none */
  color: hsl(160 30% 18%);            /* foreground */
}

/* ---------------------------------------------------------------------------
   131.18 FORM INPUTS
   React: h-10 w-full rounded-md border border-input bg-background px-3 py-2
   --------------------------------------------------------------------------- */
.mk-contact-form input[type="text"],
.mk-contact-form input[type="email"],
.mk-contact-form input[type="tel"],
.mk-contact-form .wpcf7 input[type="text"],
.mk-contact-form .wpcf7 input[type="email"],
.mk-contact-form .wpcf7 input[type="tel"] {
  display: flex;
  height: 2.5rem;                     /* h-10 = 40px */
  width: 100%;
  border-radius: 0.125rem;            /* rounded-md = calc(0.25rem - 2px) = 2px */
  border: 1px solid hsl(36 20% 85%);  /* border-input */
  background-color: hsl(36 33% 94%);  /* bg-background */
  padding: 0.5rem 0.75rem;            /* py-2 px-3 */
  font-size: 1rem;                    /* text-base mobile */
  line-height: 1.5rem;
  color: hsl(160 30% 18%);
  font-family: 'Inter', system-ui, sans-serif;
  transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@media (min-width: 768px) {
  .mk-contact-form input[type="text"],
  .mk-contact-form input[type="email"],
  .mk-contact-form input[type="tel"],
  .mk-contact-form .wpcf7 input[type="text"],
  .mk-contact-form .wpcf7 input[type="email"],
  .mk-contact-form .wpcf7 input[type="tel"] {
    font-size: 0.875rem;              /* md:text-sm */
    line-height: 1.25rem;
  }
}

/* Placeholder styling */
.mk-contact-form input::placeholder {
  color: hsl(160 15% 40%);            /* muted-foreground */
  opacity: 1;
}

/* Focus state - ring effect */
.mk-contact-form input:focus,
.mk-contact-form input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.2);
  border-color: hsl(160 30% 28%);
}

/* ---------------------------------------------------------------------------
   131.19 TEXTAREA
   React: min-h-[80px] rounded-md border border-input bg-background, rows={5}
   --------------------------------------------------------------------------- */
.mk-contact-form textarea,
.mk-contact-form .wpcf7 textarea {
  min-height: 80px;
  width: 100%;
  border-radius: 0.125rem;            /* rounded-md = calc(0.25rem - 2px) = 2px */
  border: 1px solid hsl(36 20% 85%);
  background-color: hsl(36 33% 94%);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;                /* text-sm */
  line-height: 1.5;
  color: hsl(160 30% 18%);
  font-family: 'Inter', system-ui, sans-serif;
  resize: vertical;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.mk-contact-form textarea::placeholder {
  color: hsl(160 15% 40%);
  opacity: 1;
}

.mk-contact-form textarea:focus,
.mk-contact-form textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.2);
  border-color: hsl(160 30% 28%);
}

/* ---------------------------------------------------------------------------
   131.20 SUBMIT BUTTON (CATALOG VARIANT)
   React: variant="catalog" className="w-full"
   bg-primary text-primary-foreground hover:bg-forest-light font-medium
   tracking-wide rounded shadow-elegant hover:shadow-hover
   --------------------------------------------------------------------------- */
.mk-contact-form button[type="submit"],
.mk-contact-form input[type="submit"],
.mk-contact-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;                     /* h-10 */
  width: 100%;                        /* w-full */
  padding: 0.5rem 1.5rem;             /* py-2 px-6 */
  background-color: hsl(160 30% 28%); /* primary */
  color: hsl(40 30% 96%);             /* primary-foreground */
  font-weight: 500;                   /* font-medium */
  font-size: 0.875rem;                /* text-sm */
  letter-spacing: 0.025em;            /* tracking-wide */
  border-radius: 0.25rem;             /* rounded = 4px */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08);  /* shadow-elegant */
  transition: all 300ms ease;
  border: none;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
}

.mk-contact-form button[type="submit"]:hover,
.mk-contact-form input[type="submit"]:hover,
.mk-contact-form .wpcf7-submit:hover {
  background-color: hsl(160 25% 38%); /* forest-light */
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12); /* shadow-hover */
}

.mk-contact-form button[type="submit"]:focus,
.mk-contact-form input[type="submit"]:focus,
.mk-contact-form .wpcf7-submit:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.2),
              0 4px 20px -4px hsl(160 30% 18% / 0.08);
}

/* ---------------------------------------------------------------------------
   131.21 PAGE-SPECIFIC OVERRIDES FOR KONTAKTAI (page-id-15)
   Apply contact page styles automatically on the Kontaktai page
   --------------------------------------------------------------------------- */
body.page-id-15 .entry-content {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 1rem;
}

@media (min-width: 768px) {
  body.page-id-15 .entry-content {
    padding: 3rem 1.5rem;
  }
}

/* ---------------------------------------------------------------------------
   131.22 P13 PARITY FIX: Contact Page Layout Issues
   React: grid lg:grid-cols-2 gap-12 (50/50 columns, 3rem gap)
   React: rounded-sm = 0.125rem (2px) for form card
   React: Button w-full = 100% width submit
   --------------------------------------------------------------------------- */

/* P13-1: Grid gap must be 3rem (gap-12) */
body.page-id-15 .wp-block-columns,
body.page-id-15 .mk-contact-grid {
  gap: 3rem !important;
}

/* P13-2: Column widths must be 50/50, not 45/55 - ONLY for content area, not footer */
body.page-id-15 .entry-content .wp-block-columns:not(.mk-footer__columns) > .wp-block-column,
body.page-id-15 main .wp-block-columns:not(.mk-footer__columns) > .wp-block-column {
  flex-basis: 50% !important;
  flex-grow: 0 !important;
}

/* P13-3: Form card border-radius must be 0px (rounded-sm = 0px per custom Tailwind config) */
body.page-id-15 .mk-contact-form-card,
body.page-id-15 .mk-contact-form,
body.page-id-15 .wpcf7,
body.page-id-15 .wpcf7-form {
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
}

/* P13-4: Submit button must be full width */
body.page-id-15 .wpcf7-submit {
  width: 100% !important;
}

/* ==========================================================================
   END SECTION 131: CONTACT PAGE — 1:1 REACT PARITY (P16)
   ========================================================================== */

/* ==========================================================================
   SECTION 132: INFORMATION PAGE 1:1 PARITY (P19)
   React source: src/pages/Information.tsx
   Tabs: Radix UI Tabs, Accordion: Radix UI Accordion
   ========================================================================== */

/* ---------------------------------------------------------------------------
   132.1 HERO SECTION
   React: bg-primary text-primary-foreground py-16
   --------------------------------------------------------------------------- */
.mk-info-hero {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  padding: 4rem 0 !important;
  text-align: center !important;
}

.mk-info-hero .wp-block-group__inner-container,
.mk-info-hero > .alignwide,
.mk-info-hero > .alignfull {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

/* Hero H1: font-display text-4xl md:text-5xl font-bold mb-4 */
.mk-info-hero h1 {
  font-family: var(--font-display) !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  letter-spacing: -0.025em !important;
  color: inherit !important;
}

@media (min-width: 768px) {
  .mk-info-hero h1 {
    font-size: 3rem !important;
  }
}

/* Hero subtitle: text-primary-foreground/80 text-lg max-w-2xl */
.mk-info-hero p {
  color: hsl(var(--primary-foreground) / 0.8) !important;
  font-size: 1.125rem !important;
  max-width: 42rem !important;
  margin: 0 auto !important;
  line-height: 1.75 !important;
}

/* ---------------------------------------------------------------------------
   132.2 TAB NAVIGATION
   React: flex flex-wrap h-auto gap-2 bg-muted/50 p-2 rounded-xl mb-8
   --------------------------------------------------------------------------- */
.mk-info-tabs__nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  background: hsl(var(--muted) / 0.5) !important;
  padding: 0.5rem !important;
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
  margin-bottom: 2rem !important;
  border: none !important;
  border-bottom: none !important;
}

/* Tab button base: flex items-center gap-2 px-4 py-2.5 */
.mk-info-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.625rem 1rem !important;
  white-space: nowrap !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  background: transparent !important;
  border: none !important;
  color: hsl(var(--muted-foreground)) !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
  text-decoration: none !important;
}

/* Tab icons: w-4 h-4 */
.mk-info-tab-btn svg {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
}

/* Tab hover state */
.mk-info-tab-btn:hover:not(.active) {
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--background) / 0.5) !important;
}

/* Tab active state: data-[state=active]:bg-primary data-[state=active]:text-primary-foreground */
.mk-info-tab-btn.active,
.mk-info-tabs__nav a.active,
.mk-info-tabs__nav a[aria-current="page"] {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.mk-info-tab-btn.active:hover {
  background: hsl(160 30% 24%) !important;
}

/* Tab focus state */
.mk-info-tab-btn:focus-visible {
  outline: 2px solid hsl(var(--ring)) !important;
  outline-offset: 2px !important;
}

/* Hide label on mobile, show on sm+ (React: hidden sm:inline) */
.mk-info-tab-btn .mk-tab-label {
  display: none !important;
}

@media (min-width: 640px) {
  .mk-info-tab-btn .mk-tab-label {
    display: inline !important;
  }
}

/* ---------------------------------------------------------------------------
   132.3 CONTENT CARD
   React: bg-card rounded-xl p-8 border
   --------------------------------------------------------------------------- */
.mk-info-content,
.mk-info-panel {
  background: hsl(var(--card)) !important;
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
  padding: 2rem !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* ---------------------------------------------------------------------------
   132.4 PANEL HEADER (Icon + Title)
   React: flex items-center gap-3 mb-6
   --------------------------------------------------------------------------- */
.mk-info-panel-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-bottom: 1.5rem !important;
}

/* Panel header icon: w-8 h-8 text-gold */
.mk-info-panel-header svg {
  width: 2rem !important;
  height: 2rem !important;
  color: hsl(var(--gold)) !important;
  flex-shrink: 0 !important;
}

/* Panel header H2: font-display text-2xl font-bold */
.mk-info-panel-header h2 {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: hsl(var(--foreground)) !important;
}

/* ---------------------------------------------------------------------------
   132.5 SECTION TITLES (H3)
   React: font-display text-xl font-semibold mb-3 text-primary
   --------------------------------------------------------------------------- */
.mk-info-section h3 {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
  color: hsl(var(--primary)) !important;
}

.mk-info-section:first-child h3:first-child,
.mk-info-content > div:first-child h3:first-child {
  margin-top: 0 !important;
}

/* ---------------------------------------------------------------------------
   132.6 SECTION PARAGRAPHS
   React: text-muted-foreground whitespace-pre-line leading-relaxed
   --------------------------------------------------------------------------- */
.mk-info-section p {
  color: hsl(var(--muted-foreground)) !important;
  white-space: pre-line !important;
  line-height: 1.625 !important;
  margin: 0 !important;
}

.mk-info-section p + p {
  margin-top: 1rem !important;
}

/* Section spacing: mb-8 last:mb-0 */
.mk-info-section {
  margin-bottom: 2rem !important;
}

.mk-info-section:last-child {
  margin-bottom: 0 !important;
}

/* Lists within sections */
.mk-info-section ul {
  list-style-type: disc !important;
  padding-left: 1.5rem !important;
  margin: 0.5rem 0 !important;
  color: hsl(var(--muted-foreground)) !important;
}

.mk-info-section li {
  margin: 0.25rem 0 !important;
  line-height: 1.625 !important;
}

/* ---------------------------------------------------------------------------
   132.6b INFORMACIJA PAGE HIGH-SPECIFICITY OVERRIDES
   Added for body.page-informacija to ensure styles override WP theme defaults
   React: h3 = text-xl font-semibold mb-3 text-primary
   React: p = text-muted-foreground leading-relaxed whitespace-pre-line
   --------------------------------------------------------------------------- */
body.page-informacija .mk-info-section h3,
body.page-informacija .mk-content-card h3 {
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 0.75rem !important; /* mb-3 */
  color: hsl(var(--primary)) !important; /* text-primary = forest green */
  font-family: var(--font-display) !important;
}

body.page-informacija .mk-info-section p,
body.page-informacija .mk-content-card p {
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.625 !important; /* leading-relaxed (NOT 1.75) */
  white-space: pre-line; /* Preserve newlines */
  margin: 0 !important;
}

body.page-informacija .mk-info-section p + p,
body.page-informacija .mk-content-card p + p {
  margin-top: 1rem !important;
}

/* ---------------------------------------------------------------------------
   132.7 FAQ ACCORDION
   React: Radix AccordionItem with border-b
   --------------------------------------------------------------------------- */
.mk-faq-accordion {
  max-width: 100% !important;
}

/* Accordion item: border-b */
.mk-faq-item {
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.mk-faq-item:last-child {
  border-bottom: none !important;
}

/* Accordion trigger: flex flex-1 items-center justify-between py-4 font-medium */
.mk-faq-question {
  display: flex !important;
  flex: 1 !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 1rem 0 !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-align: left !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
}

/* Accordion trigger hover: hover:text-gold */
.mk-faq-question:hover {
  color: hsl(var(--gold)) !important;
}

.mk-faq-question__text {
  flex: 1 !important;
  padding-right: 1rem !important;
}

/* Chevron icon: h-4 w-4 shrink-0 transition-transform duration-200 */
.mk-faq-chevron {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
  transition: transform 200ms ease !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* Chevron rotation when open: [&[data-state=open]>svg]:rotate-180 */
.mk-faq-item--open .mk-faq-chevron,
.mk-faq-question[aria-expanded="true"] .mk-faq-chevron,
.mk-faq-question[aria-expanded="true"] + .mk-faq-answer .mk-faq-chevron {
  transform: rotate(180deg) !important;
}

/* Accordion content: overflow-hidden animate-accordion-down/up */
.mk-faq-answer {
  overflow: hidden !important;
  max-height: 0 !important;
  transition: max-height 200ms ease-out, padding 200ms ease-out !important;
  padding: 0 !important;
}

/* Accordion content open state: pb-4 pt-0 */
.mk-faq-item--open .mk-faq-answer,
.mk-faq-answer.active {
  max-height: 500px !important;
  padding-bottom: 1rem !important;
}

/* Accordion content text: text-muted-foreground leading-relaxed (inner text-sm) */
.mk-faq-answer__content {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.625 !important;
}

/* ---------------------------------------------------------------------------
   132.8 CONTAINER
   React: container mx-auto px-4 py-12
   --------------------------------------------------------------------------- */
.mk-info-container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 3rem 1rem !important;
}

/* ---------------------------------------------------------------------------
   132.9 TAB CONTENT
   React: mt-2, hidden until active
   --------------------------------------------------------------------------- */
.mk-info-tabs__content {
  margin-top: 0.5rem !important;
  display: none !important;
}

.mk-info-tabs__content--active,
.mk-info-tabs__content.active {
  display: block !important;
  animation: mk-fade-in 0.2s ease-out !important;
}

/* Focus ring for keyboard navigation */
.mk-info-tabs__content:focus-visible {
  outline: 2px solid hsl(var(--ring)) !important;
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------------
   132.10 ACCORDION ANIMATIONS
   From tailwind.config.ts keyframes
   --------------------------------------------------------------------------- */
@keyframes mk-accordion-down {
  from { height: 0; }
  to { height: var(--accordion-content-height, auto); }
}

@keyframes mk-accordion-up {
  from { height: var(--accordion-content-height, auto); }
  to { height: 0; }
}

/* ==========================================================================
   END SECTION 132: INFORMATION PAGE 1:1 PARITY (P19)
   ========================================================================== */

/* ==========================================================================
   SECTION 131: GALLERY PAGE 1:1 PARITY (P17)
   Source: src/pages/Gallery.tsx, src/components/gallery/GalleryCard.tsx
   Task: Extract ALL gallery page styles from React and implement exact same in WordPress
   ========================================================================== */

/* ---------------------------------------------------------------------
   Page Container
   React: container mx-auto px-4 py-12
   --------------------------------------------------------------------- */
.mk-gallery-page,
.page-id-92 .entry-content,
.page-id-92 .wp-block-group.is-layout-constrained {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 3rem !important; /* py-12 = 48px */
  padding-bottom: 3rem !important;
}

/* ---------------------------------------------------------------------
   Page Title Container
   React: max-w-3xl mb-8
   --------------------------------------------------------------------- */
.mk-gallery-header,
.page-id-92 .mk-page-header {
  max-width: 48rem !important; /* max-w-3xl = 768px */
  margin-bottom: 2rem !important; /* mb-8 = 32px */
}

/* ---------------------------------------------------------------------
   Page Title (H1)
   React: font-display text-3xl md:text-4xl font-semibold text-foreground mb-4
   --------------------------------------------------------------------- */
.mk-gallery-title,
.page-id-92 h1.wp-block-heading,
.page-id-92 .mk-page-title {
  font-family: var(--font-display) !important;
  font-size: 1.875rem !important; /* text-3xl = 30px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 1rem !important; /* mb-4 = 16px */
  letter-spacing: -0.025em !important; /* tracking-tight */
}

@media (min-width: 768px) {
  .mk-gallery-title,
  .page-id-92 h1.wp-block-heading,
  .page-id-92 .mk-page-title {
    font-size: 2.25rem !important; /* md:text-4xl = 36px */
  }
}

/* ---------------------------------------------------------------------
   Page Description
   React: text-muted-foreground leading-relaxed
   --------------------------------------------------------------------- */
.mk-gallery-description,
.page-id-92 .mk-page-description,
.page-id-92 .mk-gallery-header p {
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.625 !important; /* leading-relaxed */
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
   Category Filter Container
   React: flex flex-wrap gap-2 mb-8
   --------------------------------------------------------------------- */
.mk-gallery-filters,
.page-id-92 .wp-block-buttons.mk-gallery-filters,
.page-id-92 .mk-gallery-cat-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  margin-bottom: 2rem !important; /* mb-8 = 32px */
}

/* ---------------------------------------------------------------------
   Category Filter Button (Outline Variant - Default State)
   React Button: variant="outline" size="sm"
   - Base: inline-flex items-center justify-center gap-2 text-sm font-medium
   - Outline: border border-primary text-primary bg-transparent
   - Hover: hover:bg-primary hover:text-primary-foreground
   - Size sm: h-9 px-4
   - Border radius: rounded (0.25rem)
   --------------------------------------------------------------------- */
.mk-gallery-filter-btn,
.page-id-92 .mk-gallery-cat-btn,
.page-id-92 .wp-block-button__link[data-category]:not(.is-active) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  height: 2.25rem !important; /* h-9 = 36px */
  padding-left: 1rem !important; /* px-4 = 16px */
  padding-right: 1rem !important;
  background: transparent !important; /* bg-transparent */
  border: 1px solid hsl(var(--primary)) !important; /* border-primary = forest green */
  border-radius: 0.25rem !important; /* rounded = --radius */
  color: hsl(var(--primary)) !important; /* text-primary = forest green */
  cursor: pointer !important;
  transition: all 300ms ease !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.mk-gallery-filter-btn:hover,
.page-id-92 .mk-gallery-cat-btn:hover,
.page-id-92 .wp-block-button__link[data-category]:not(.is-active):hover {
  background: hsl(var(--primary)) !important; /* hover:bg-primary */
  color: hsl(var(--primary-foreground)) !important; /* hover:text-primary-foreground */
  border-color: hsl(var(--primary)) !important;
}

/* ---------------------------------------------------------------------
   Category Filter Button (Active State - Default Variant)
   React Button: variant="default"
   - Default: bg-primary text-primary-foreground hover:bg-primary/90
   --------------------------------------------------------------------- */
.mk-gallery-filter-btn.is-active,
.mk-gallery-filter-btn--active,
.page-id-92 .mk-gallery-cat-btn.is-active,
.page-id-92 .wp-block-button__link[data-category].is-active {
  background: hsl(var(--primary)) !important; /* bg-primary */
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important; /* text-primary-foreground */
}

.mk-gallery-filter-btn.is-active:hover,
.mk-gallery-filter-btn--active:hover,
.page-id-92 .mk-gallery-cat-btn.is-active:hover,
.page-id-92 .wp-block-button__link[data-category].is-active:hover {
  background: hsl(var(--primary) / 0.9) !important; /* hover:bg-primary/90 */
}

/* ---------------------------------------------------------------------
   Product Grid
   React: grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6

   CRITICAL FIX: .mk-gallery-grid is the WRAPPER - must be display:block
   Only the inner .wc-block-product-template gets the grid layout.
   --------------------------------------------------------------------- */
.mk-gallery-grid {
  display: block !important; /* Wrapper is block, not grid */
}

.mk-gallery-grid .wc-block-product-template,
.page-id-92 .wc-block-product-template,
.page-id-92 .products.columns-4,
.page-id-92 ul.products {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important; /* Default: 1 column mobile */
  gap: 1.5rem !important; /* gap-6 = 24px */
}

@media (min-width: 640px) {
  .mk-gallery-grid .wc-block-product-template,
  .page-id-92 .wc-block-product-template,
  .page-id-92 .products.columns-4,
  .page-id-92 ul.products {
    grid-template-columns: repeat(2, 1fr) !important; /* sm:grid-cols-2 */
  }
}

@media (min-width: 1024px) {
  .mk-gallery-grid .wc-block-product-template,
  .page-id-92 .wc-block-product-template,
  .page-id-92 .products.columns-4,
  .page-id-92 ul.products {
    grid-template-columns: repeat(3, 1fr) !important; /* lg:grid-cols-3 */
  }
}

@media (min-width: 1280px) {
  .mk-gallery-grid .wc-block-product-template,
  .page-id-92 .wc-block-product-template,
  .page-id-92 .products.columns-4,
  .page-id-92 ul.products {
    grid-template-columns: repeat(4, 1fr) !important; /* xl:grid-cols-4 */
  }
}

/* ---------------------------------------------------------------------
   GalleryCard Container
   React: group bg-card rounded-sm overflow-hidden shadow-card
          hover:shadow-hover transition-all duration-300
   --------------------------------------------------------------------- */
.mk-gallery-card,
.page-id-92 .wc-block-grid__product,
.page-id-92 li.product {
  background-color: hsl(var(--card)) !important; /* bg-card */
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important; /* shadow-card */
  transition: all 300ms ease !important; /* transition-all duration-300 */
}

.mk-gallery-card:hover,
.page-id-92 .wc-block-grid__product:hover,
.page-id-92 li.product:hover {
  box-shadow: var(--shadow-hover) !important; /* hover:shadow-hover */
}

/* ---------------------------------------------------------------------
   GalleryCard Image Container
   React: relative aspect-[4/5] overflow-hidden
   --------------------------------------------------------------------- */
.mk-gallery-card__image,
.page-id-92 .wc-block-grid__product-image,
.page-id-92 .attachment-woocommerce_thumbnail {
  position: relative !important;
  aspect-ratio: 4 / 5 !important; /* aspect-[4/5] */
  overflow: hidden !important;
}

/* ---------------------------------------------------------------------
   GalleryCard Image
   React: w-full h-full object-cover transition-transform duration-500
          group-hover:scale-105
   --------------------------------------------------------------------- */
.mk-gallery-card__image img,
.page-id-92 .wc-block-grid__product-image img,
.page-id-92 li.product img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 500ms ease !important; /* transition-transform duration-500 */
}

.mk-gallery-card:hover .mk-gallery-card__image img,
.page-id-92 .wc-block-grid__product:hover img,
.page-id-92 li.product:hover img {
  transform: scale(1.05) !important; /* group-hover:scale-105 */
}

/* ---------------------------------------------------------------------
   GalleryCard Body
   React: p-5 (padding 20px all sides)
   --------------------------------------------------------------------- */
.mk-gallery-card__body,
.page-id-92 .wc-block-grid__product-content,
.page-id-92 li.product .woocommerce-loop-product__title {
  padding: 1.25rem !important; /* p-5 = 20px */
}

/* Reset padding on title specifically when inside body */
.page-id-92 li.product .woocommerce-loop-product__title {
  padding: 0 !important;
  margin-bottom: 0.25rem !important;
}

/* ---------------------------------------------------------------------
   GalleryCard Title
   React: font-display text-lg font-semibold text-foreground mb-1 line-clamp-1
   --------------------------------------------------------------------- */
.mk-gallery-card__title,
.page-id-92 .wc-block-grid__product-title,
.page-id-92 .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important; /* line-clamp-1 */
  -webkit-box-orient: vertical !important;
  line-height: 1.4 !important;
}

/* ---------------------------------------------------------------------
   GalleryCard Artist
   React: text-sm text-muted-foreground mb-1
   Artist dates: text-xs italic
   --------------------------------------------------------------------- */
.mk-gallery-card__artist,
.page-id-92 .mk-product-artist {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
}

.mk-gallery-card__artist-dates,
.page-id-92 .mk-product-artist-dates {
  font-size: 0.75rem !important; /* text-xs = 12px */
  font-style: italic !important;
}

/* ---------------------------------------------------------------------
   GalleryCard Medium
   React: text-xs text-muted-foreground mb-3
   --------------------------------------------------------------------- */
.mk-gallery-card__medium,
.page-id-92 .mk-product-medium {
  font-size: 0.75rem !important; /* text-xs = 12px */
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0.75rem !important; /* mb-3 = 12px */
}

/* ---------------------------------------------------------------------
   GalleryCard Price
   React: text-xl font-bold text-primary mb-4
   --------------------------------------------------------------------- */
.mk-gallery-card__price,
.page-id-92 .wc-block-grid__product-price,
.page-id-92 .price {
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 700 !important; /* font-bold */
  color: hsl(var(--primary)) !important;
  margin-bottom: 1rem !important; /* mb-4 = 16px */
}

/* ---------------------------------------------------------------------
   GalleryCard Actions Container
   React: space-y-2 (flex column with 0.5rem gap)
   --------------------------------------------------------------------- */
.mk-gallery-card__actions,
.page-id-92 .mk-gallery-buttons,
.page-id-92 .wc-block-grid__product .wp-block-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* space-y-2 = 8px */
  padding: 0 1.25rem 1.25rem 1.25rem !important; /* Match card body padding */
}

/* ---------------------------------------------------------------------
   Add to Cart Button (Gold Variant)
   React Button: variant="gold" className="w-full"
   - Gold: bg-gold text-forest-dark hover:bg-gold-light font-medium shadow-elegant rounded
   - Icon: ShoppingCart w-4 h-4 mr-2
   --------------------------------------------------------------------- */
.mk-gallery-card__cart-btn,
.mk-btn-cart,
.page-id-92 .add_to_cart_button,
.page-id-92 .wc-block-components-product-button__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important; /* w-full */
  gap: 0.5rem !important; /* gap for icon + text */
  height: 2.5rem !important; /* h-10 = 40px */
  padding-left: 1.5rem !important; /* px-6 */
  padding-right: 1.5rem !important;
  background: hsl(var(--gold)) !important; /* bg-gold */
  color: hsl(var(--forest-dark)) !important; /* text-forest-dark */
  font-weight: 500 !important; /* font-medium */
  font-size: 0.875rem !important; /* text-sm */
  border: none !important;
  border-radius: 0.25rem !important; /* rounded */
  box-shadow: var(--shadow-elegant) !important; /* shadow-elegant */
  cursor: pointer !important;
  transition: all 300ms ease !important;
  text-decoration: none !important;
}

.mk-gallery-card__cart-btn:hover,
.mk-btn-cart:hover,
.page-id-92 .add_to_cart_button:hover,
.page-id-92 .wc-block-components-product-button__button:hover {
  background: hsl(var(--gold-light)) !important; /* hover:bg-gold-light */
  text-decoration: none !important;
}

/* Cart icon inside button */
.mk-gallery-card__cart-btn svg,
.mk-btn-cart svg,
.page-id-92 .add_to_cart_button::before {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  flex-shrink: 0 !important;
}

/* SVG cart icon pseudo-element for WooCommerce buttons */
.page-id-92 .add_to_cart_button::before,
.page-id-92 .wc-block-components-product-button__button::before {
  content: '' !important;
  display: inline-block !important;
  width: 1rem !important;
  height: 1rem !important;
  margin-right: 0.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23203D31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ---------------------------------------------------------------------
   View/Details Button (Elegant Variant)
   React Button: variant="elegant" className="w-full"
   - Elegant: border border-foreground/20 text-foreground bg-transparent
              hover:border-primary hover:text-primary font-normal tracking-wide rounded
   --------------------------------------------------------------------- */
.mk-gallery-card__view-btn,
.mk-btn-view,
.page-id-92 .mk-btn-elegant,
.page-id-92 a.button.product_type_simple:not(.add_to_cart_button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important; /* w-full */
  height: 2.5rem !important; /* h-10 = 40px */
  padding-left: 1.5rem !important; /* px-6 */
  padding-right: 1.5rem !important;
  background: transparent !important; /* bg-transparent */
  color: hsl(var(--foreground)) !important; /* text-foreground */
  font-weight: 400 !important; /* font-normal */
  font-size: 0.875rem !important; /* text-sm */
  letter-spacing: 0.025em !important; /* tracking-wide */
  border: 1px solid hsl(var(--foreground) / 0.2) !important; /* border-foreground/20 */
  border-radius: 0.25rem !important; /* rounded */
  cursor: pointer !important;
  transition: all 300ms ease !important;
  text-decoration: none !important;
}

.mk-gallery-card__view-btn:hover,
.mk-btn-view:hover,
.page-id-92 .mk-btn-elegant:hover,
.page-id-92 a.button.product_type_simple:not(.add_to_cart_button):hover {
  border-color: hsl(var(--primary)) !important; /* hover:border-primary */
  color: hsl(var(--primary)) !important; /* hover:text-primary */
  text-decoration: none !important;
}

/* ---------------------------------------------------------------------
   Empty State
   React: text-center py-16
   Text: text-muted-foreground text-lg
   Button: mt-4
   --------------------------------------------------------------------- */
.mk-gallery-empty,
.page-id-92 .woocommerce-info {
  text-align: center !important;
  padding-top: 4rem !important; /* py-16 = 64px */
  padding-bottom: 4rem !important;
}

.mk-gallery-empty__text,
.page-id-92 .woocommerce-info {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
}

.mk-gallery-empty__btn,
.page-id-92 .woocommerce-info .button {
  margin-top: 1rem !important; /* mt-4 = 16px */
}

/* ==========================================================================
   END SECTION 131: GALLERY PAGE 1:1 PARITY (P17)
   ========================================================================== */
/* ==========================================================================
   SECTION 132: SINGLE PRODUCT PAGE - COMPLETE 1:1 REACT PARITY
   Agent: P12
   Source: src/pages/ArtworkDetail.tsx + src/components/auction/AuctionTimer.tsx
   Deployed: 2026-03-23

   This section provides complete single product page styling to match
   React ArtworkDetail component exactly. Consolidates and extends
   previous single product sections (56, 84, 94, 95, 110, 112, 123).
   ========================================================================== */

/* ------------------------------------------------------------------
   132.1: Page Container & Layout
   React: container mx-auto px-4 py-12
   ------------------------------------------------------------------ */
.single-product .site-main,
.single-product .entry-content {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 3rem 1rem !important; /* FIX-6: py-12 = 3rem */
}

/* ------------------------------------------------------------------
   132.2: Two-Column Grid Layout
   React: grid lg:grid-cols-2 gap-12 (line 116)
   ------------------------------------------------------------------ */
.single-product .woocommerce div.product,
.single-product .wp-block-columns.mk-product-columns,
.single-product .product-content {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem !important;
  align-items: start !important;
}

/* Stack on mobile at 1024px (lg breakpoint) */
@media (max-width: 1279px) {
  .single-product .woocommerce div.product,
  .single-product .wp-block-columns.mk-product-columns,
  .single-product .product-content {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* Column widths - ensure 50/50 split */
.single-product .woocommerce div.product div.images,
.single-product .woocommerce div.product .woocommerce-product-gallery,
.single-product .wp-block-column:first-child,
.single-product .mk-product-gallery-col {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: auto !important;
}

.single-product .woocommerce div.product div.summary,
.single-product .woocommerce div.product .summary.entry-summary,
.single-product .wp-block-column:last-child,
.single-product .mk-product-info-col {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: auto !important;
}

/* ------------------------------------------------------------------
   132.3: Back Link
   React: inline-flex items-center gap-2 text-muted-foreground
          hover:text-primary transition-colors mb-8 (lines 108-114)
   ------------------------------------------------------------------ */
.mk-back-link,
.single-product .back-to-catalog {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: color 200ms ease !important;
  margin-bottom: 2rem !important;
}

.mk-back-link:hover,
.single-product .back-to-catalog:hover {
  color: hsl(var(--primary)) !important;
}

.mk-back-link svg,
.single-product .back-to-catalog svg {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------
   132.4: Image Container
   React: relative overflow-hidden rounded-sm shadow-elegant (line 119)
   ------------------------------------------------------------------ */
.single-product .woocommerce-product-gallery,
.single-product .mk-product-gallery {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0.125rem !important;
  box-shadow: var(--shadow-elegant) !important;
}

.single-product .woocommerce-product-gallery img,
.single-product .mk-product-gallery img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/* Ensure gallery wrapper also clips */
.single-product .woocommerce-product-gallery__wrapper {
  position: relative !important;
}

/* ------------------------------------------------------------------
   132.5: SOLD Overlay
   React: absolute inset-0 bg-foreground/60 flex items-center justify-center
   Badge: bg-gold text-foreground font-semibold text-2xl px-6 py-3 (lines 125-131)
   ------------------------------------------------------------------ */
.mk-sold-overlay,
.single-product .product-sold-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: hsl(var(--foreground) / 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

.mk-sold-overlay .mk-sold-badge,
.single-product .mk-sold-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: hsl(var(--gold)) !important;
  color: hsl(var(--foreground)) !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 9999px !important;
}

.single-product .mk-sold-badge svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------
   132.6: Ending Soon Badge
   React: absolute top-4 left-4
   Badge: variant="destructive" animate-pulse text-lg px-4 py-2 (lines 133-140)
   ------------------------------------------------------------------ */
.mk-ending-badge,
.single-product .auction-ending-badge {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: hsl(var(--destructive)) !important;
  color: hsl(var(--destructive-foreground)) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 9999px !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.mk-ending-badge svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* ------------------------------------------------------------------
   132.7: Trust Badges
   React: grid grid-cols-3 gap-4 mt-6 (line 144)
   Each: flex flex-col items-center text-center p-4 bg-muted/30 rounded-sm
   ------------------------------------------------------------------ */
.single-product .mk-trust-badges,
.mk-product-trust-badges {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
  margin-top: 1.5rem !important;
}

.single-product .mk-trust-badges > div,
.single-product .mk-trust-badge,
.mk-product-trust-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 1rem !important;
  background: hsl(var(--muted) / 0.3) !important;
  border-radius: 0.125rem !important;
}

.single-product .mk-trust-badge svg,
.mk-product-trust-badge svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: hsl(var(--primary)) !important;
  margin-bottom: 0.5rem !important;
}

.single-product .mk-trust-badge span,
.mk-product-trust-badge span {
  font-size: 0.75rem !important;
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.4 !important;
}

@media (max-width: 480px) {
  .single-product .mk-trust-badges,
  .mk-product-trust-badges {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
}

/* ------------------------------------------------------------------
   132.8: Post-Auction Banner
   React: mb-6 p-4 bg-amber-500/10 border border-amber-500/20 rounded-sm
   (lines 163-176)
   ------------------------------------------------------------------ */
.single-product .mk-post-auction-banner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  margin-bottom: 1.5rem !important;
  padding: 1rem !important;
  background: hsl(38 92% 50% / 0.1) !important;
  border: 1px solid hsl(38 92% 50% / 0.2) !important;
  border-radius: 0.125rem !important;
}

.single-product .mk-post-auction-banner__icon {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: hsl(38 70% 45%) !important;
  flex-shrink: 0 !important;
}

.single-product .mk-post-auction-banner__content {
  flex: 1 !important;
}

.single-product .mk-post-auction-banner__title {
  font-weight: 600 !important;
  color: hsl(30 70% 30%) !important;
  margin: 0 0 0.25rem !important;
}

.dark .single-product .mk-post-auction-banner__title {
  color: hsl(38 60% 80%) !important;
}

.single-product .mk-post-auction-banner__text {
  font-size: 0.875rem !important;
  color: hsl(30 60% 35%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  margin: 0 !important;
}

.dark .single-product .mk-post-auction-banner__text {
  color: hsl(38 50% 70%) !important;
}

.single-product .mk-post-auction-banner__text svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
}

/* ------------------------------------------------------------------
   132.9: Lot Number & Bid Count Row
   React: flex items-center gap-3 mb-2 (lines 189-198)
   ------------------------------------------------------------------ */
.single-product .mk-lot-row,
.mk-product-lot-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-bottom: 0.5rem !important;
}

.single-product .mk-lot-number,
.mk-product-lot-number {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

.single-product .mk-bid-count-badge,
.mk-product-bid-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.125rem 0.625rem !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  background: transparent !important;
}

.single-product .mk-bid-count-badge svg,
.mk-product-bid-count svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
}

/* ------------------------------------------------------------------
   132.10: Product Title
   React: font-display text-3xl md:text-4xl font-semibold text-foreground mt-2
   (line 199)
   ------------------------------------------------------------------ */
.single-product h1.product_title,
.single-product .mk-product-title,
.single-product .entry-title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  letter-spacing: -0.025em !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
  font-size: 1.875rem !important;
  line-height: 1.2 !important;
}

@media (min-width: 768px) {
  .single-product h1.product_title,
  .single-product .mk-product-title,
  .single-product .entry-title {
    font-size: 2.25rem !important;
  }
}

/* ------------------------------------------------------------------
   132.11: Artist Info
   React: text-xl text-muted-foreground mt-2 (lines 202-207)
   ------------------------------------------------------------------ */
.single-product .mk-product-artist {
  font-size: 1.25rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1.5rem !important;
}

.single-product .mk-product-artist-dates {
  font-size: 1rem !important;
}

/* ------------------------------------------------------------------
   132.12: Info Card (Artwork Details)
   React: bg-secondary/30 rounded-sm p-6 mb-6 (line 211)
   Grid: grid grid-cols-2 gap-4 text-sm
   ------------------------------------------------------------------ */
.single-product .mk-info-card,
.single-product .product-meta-card,
.single-product .mk-artwork-info {
  background: hsl(var(--secondary) / 0.3) !important;
  border-radius: 0.125rem !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.single-product .mk-info-card__grid,
.single-product .product-meta-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  font-size: 0.875rem !important;
}

.single-product .mk-info-card__item {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}

.single-product .mk-info-card__label {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.75rem !important;
}

.single-product .mk-info-card__value {
  color: hsl(var(--foreground)) !important;
  font-weight: 500 !important;
}

.single-product .mk-info-card__description {
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 1rem !important;
  line-height: 1.625 !important;
  grid-column: 1 / -1 !important;
}

@media (max-width: 480px) {
  .single-product .mk-info-card__grid,
  .single-product .product-meta-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------------
   132.13: Pricing Card
   React: bg-card rounded-sm shadow-card p-6 mb-6 (line 244)
   ------------------------------------------------------------------ */
.single-product .mk-pricing-card,
.single-product .product-pricing {
  background: hsl(var(--card)) !important;
  border-radius: 0.125rem !important;
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Pricing rows: space-y-3 with flex justify-between */
.single-product .mk-pricing-card__rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.single-product .mk-pricing-card__row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
}

.single-product .mk-pricing-card__label {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.875rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.single-product .mk-pricing-card__value {
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
}

/* Estimate in gold */
.single-product .mk-pricing-card__value--gold {
  font-weight: 500 !important;
  color: hsl(var(--gold)) !important;
}

/* Current bid row - highlighted */
.single-product .mk-pricing-card__row--highlight {
  border-top: 1px solid hsl(var(--border)) !important;
  padding-top: 0.75rem !important;
  margin-top: 0.25rem !important;
}

.single-product .mk-pricing-card__row--highlight .mk-pricing-card__label svg {
  width: 1rem !important;
  height: 1rem !important;
  color: hsl(var(--green-500)) !important;
}

.single-product .mk-pricing-card__row--highlight .mk-pricing-card__value {
  font-weight: 700 !important;
  color: hsl(var(--primary)) !important;
  font-size: 1.5rem !important;
}

/* Buy now row with gold */
.single-product .mk-pricing-card__row--buynow .mk-pricing-card__label svg {
  color: hsl(var(--gold)) !important;
}

.single-product .mk-pricing-card__row--buynow .mk-pricing-card__value {
  font-weight: 700 !important;
  color: hsl(var(--gold)) !important;
  font-size: 1.5rem !important;
}

/* Sold state - centered */
.single-product .mk-pricing-card--sold {
  text-align: center !important;
  padding: 1rem 0 !important;
}

.single-product .mk-pricing-card--sold .mk-pricing-card__label {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0.5rem !important;
  justify-content: center !important;
}

.single-product .mk-pricing-card--sold .mk-pricing-card__value {
  font-size: 2.25rem !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: hsl(var(--gold)) !important;
}

.single-product .mk-pricing-card--sold .mk-pricing-card__estimate {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 0.5rem !important;
}

/* Post-auction fixed price - centered */
.single-product .mk-pricing-card--fixed {
  text-align: center !important;
}

.single-product .mk-pricing-card--fixed .mk-pricing-card__label {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0.25rem !important;
  justify-content: center !important;
}

.single-product .mk-pricing-card--fixed .mk-pricing-card__value {
  font-size: 2.25rem !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: hsl(var(--primary)) !important;
}

.single-product .mk-pricing-card--fixed .mk-pricing-card__old-price {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  text-decoration: line-through !important;
  margin-top: 0.25rem !important;
}

/* ------------------------------------------------------------------
   132.14: Post-Auction Buy Section
   React: bg-amber-500/5 rounded-sm p-6 mb-6 (lines 309-325)
   ------------------------------------------------------------------ */
.single-product .mk-post-auction-buy {
  background: hsl(38 92% 50% / 0.05) !important;
  border-radius: 0.125rem !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.single-product .mk-post-auction-buy .mk-btn-gold {
  width: 100% !important;
  font-size: 1.125rem !important;
}

.single-product .mk-post-auction-buy__note {
  text-align: center !important;
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 0.75rem !important;
}

/* ------------------------------------------------------------------
   132.15: Bid Form
   React: bg-primary/5 rounded-sm p-6 (line 330)
   ------------------------------------------------------------------ */
.single-product .mk-bid-form {
  background: hsl(var(--primary) / 0.05) !important;
  border-radius: 0.125rem !important;
  padding: 1.5rem !important;
}

.single-product .mk-bid-form__title {
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.single-product .mk-bid-form__title svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* ------------------------------------------------------------------
   132.16: Quick Bid Buttons
   React: mb-4, grid grid-cols-5 gap-2 (lines 350-365)
   ------------------------------------------------------------------ */
.single-product .mk-quick-bids {
  margin-bottom: 1rem !important;
}

.single-product .mk-quick-bids__label {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

.single-product .mk-quick-bids__grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0.5rem !important;
}

.single-product .mk-quick-bid-btn {
  padding: 0.5rem 0.25rem !important;
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
}

.single-product .mk-quick-bid-btn:hover {
  background: hsl(var(--muted)) !important;
  border-color: hsl(var(--primary)) !important;
}

.single-product .mk-quick-bid-btn.is-selected,
.single-product .mk-quick-bid-btn:active {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

@media (max-width: 640px) {
  .single-product .mk-quick-bids__grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ------------------------------------------------------------------
   132.17: Custom Bid Input Row
   React: flex gap-3 mt-2 (lines 367-388)
   ------------------------------------------------------------------ */
.single-product .mk-bid-form__custom {
  margin-top: 1rem !important;
}

.single-product .mk-bid-form__custom-label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}

.single-product .mk-bid-form__custom-row {
  display: flex !important;
  gap: 0.75rem !important;
}

.single-product .mk-bid-form__custom-row input {
  flex: 1 !important;
  height: 2.5rem !important;
  padding: 0 0.75rem !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  background: hsl(var(--background)) !important;
  font-size: 0.875rem !important;
}

.single-product .mk-bid-form__custom-row input:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--ring)) !important;
}

.single-product .mk-bid-form__hint {
  font-size: 0.75rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 0.5rem !important;
}

/* ------------------------------------------------------------------
   132.18: Bid History
   React: mt-6 pt-4 border-t border-border/50 (lines 391-408)
   ------------------------------------------------------------------ */
.single-product .mk-bid-history {
  margin-top: 1.5rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid hsl(var(--border) / 0.5) !important;
}

.single-product .mk-bid-history__title {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.5rem !important;
}

.single-product .mk-bid-history__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.single-product .mk-bid-history__item {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* ------------------------------------------------------------------
   132.19: Unauthenticated State
   React: bg-secondary/30 rounded-sm p-6 text-center (lines 410-419)
   ------------------------------------------------------------------ */
.single-product .mk-auth-prompt {
  background: hsl(var(--secondary) / 0.3) !important;
  border-radius: 0.125rem !important;
  padding: 1.5rem !important;
  text-align: center !important;
}

.single-product .mk-auth-prompt svg {
  width: 2rem !important;
  height: 2rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 auto 0.75rem !important;
  display: block !important;
}

.single-product .mk-auth-prompt p {
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 1rem !important;
}

/* ------------------------------------------------------------------
   132.19b: Login Prompt (for bid form - P63 fix)
   React: ArtworkDetail.tsx lines 410-419
   bg-secondary/30 rounded-sm p-6 text-center with Info icon
   ------------------------------------------------------------------ */
.single-product .mk-auction-login-prompt {
  background: hsl(var(--secondary) / 0.3) !important;
  border-radius: 0.125rem !important;
  padding: 1.5rem !important;
  text-align: center !important;
  margin-top: 1.5rem !important;
}

.single-product .mk-auction-login-prompt .mk-login-prompt__icon {
  width: 2rem !important;
  height: 2rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 auto 0.75rem !important;
  display: block !important;
}

.single-product .mk-auction-login-prompt .mk-login-prompt-text {
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 1rem !important;
  font-size: 1rem !important;
}

.single-product .mk-auction-login-prompt .mk-btn-catalog {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radius) !important;
  text-decoration: none !important;
  transition: background 200ms ease !important;
}

.single-product .mk-auction-login-prompt .mk-btn-catalog:hover {
  background: hsl(var(--forest-light)) !important;
}

/* ------------------------------------------------------------------
   132.20: Upcoming Auction Notice
   React: bg-muted/50 rounded-sm p-6 text-center (lines 424-434)
   ------------------------------------------------------------------ */
.single-product .mk-upcoming-notice {
  background: hsl(var(--muted) / 0.5) !important;
  border-radius: 0.125rem !important;
  padding: 1.5rem !important;
  text-align: center !important;
}

.single-product .mk-upcoming-notice svg {
  width: 2rem !important;
  height: 2rem !important;
  color: hsl(var(--gold)) !important;
  margin: 0 auto 0.75rem !important;
  display: block !important;
}

.single-product .mk-upcoming-notice__title {
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.5rem !important;
}

.single-product .mk-upcoming-notice__text {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* ------------------------------------------------------------------
   132.21: Auction Timer (Full Variant)
   React: AuctionTimer.tsx lines 134-250
   rounded-sm p-6 with gradient backgrounds
   ------------------------------------------------------------------ */
.single-product .mk-timer-full,
.single-product .auction-time-left.full-variant {
  border-radius: 0.125rem !important;
  padding: 1.5rem !important;
  border: 1px solid hsl(var(--border)) !important;
  margin-bottom: 1.5rem !important;
}

/* Status backgrounds */
.single-product .mk-timer-full--ending,
.single-product .auction-time-left.ending-soon {
  background: linear-gradient(to right, hsl(var(--destructive) / 0.1), hsl(var(--destructive) / 0.05)) !important;
  border-color: hsl(var(--destructive) / 0.2) !important;
}

.single-product .mk-timer-full--active,
.single-product .auction-time-left.active {
  background: linear-gradient(to right, hsl(142 71% 45% / 0.1), hsl(142 71% 45% / 0.05)) !important;
  border-color: hsl(142 71% 45% / 0.2) !important;
}

.single-product .mk-timer-full--upcoming,
.single-product .auction-time-left.upcoming {
  background: linear-gradient(to right, hsl(var(--gold) / 0.1), hsl(var(--gold) / 0.05)) !important;
  border-color: hsl(var(--gold) / 0.2) !important;
}

.single-product .mk-timer-full--ended,
.single-product .auction-time-left.ended {
  background: hsl(var(--muted) / 0.5) !important;
}

/* Timer header */
.single-product .mk-timer-full__header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-bottom: 1rem !important;
}

.single-product .mk-timer-full__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
}

.single-product .mk-timer-full--ending .mk-timer-full__icon {
  background: hsl(var(--destructive) / 0.2) !important;
}

.single-product .mk-timer-full--active .mk-timer-full__icon {
  background: hsl(142 71% 45% / 0.2) !important;
}

.single-product .mk-timer-full--upcoming .mk-timer-full__icon {
  background: hsl(var(--gold) / 0.2) !important;
}

.single-product .mk-timer-full__icon svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.single-product .mk-timer-full--ending .mk-timer-full__icon svg {
  color: hsl(var(--destructive)) !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.single-product .mk-timer-full--active .mk-timer-full__icon .dot {
  width: 0.75rem !important;
  height: 0.75rem !important;
  background: hsl(142 71% 45%) !important;
  border-radius: 9999px !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.single-product .mk-timer-full--upcoming .mk-timer-full__icon svg {
  color: hsl(var(--gold)) !important;
}

/* Heading */
.single-product .mk-timer-full__heading {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin: 0 !important;
}

.single-product .mk-timer-full--ending .mk-timer-full__heading {
  color: hsl(var(--destructive)) !important;
}

.single-product .mk-timer-full--active .mk-timer-full__heading {
  color: hsl(142 71% 45%) !important;
}

.single-product .mk-timer-full__subtitle {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 !important;
}

/* Timer grid */
.single-product .mk-timer-full__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important;
  text-align: center !important;
}

.single-product .mk-timer-full__unit {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.single-product .mk-timer-full__value {
  font-size: 1.875rem !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: hsl(var(--foreground)) !important;
}

@media (min-width: 768px) {
  .single-product .mk-timer-full__value {
    font-size: 2.25rem !important;
  }
}

.single-product .mk-timer-full--ending .mk-timer-full__value {
  color: hsl(var(--destructive)) !important;
}

.single-product .mk-timer-full--active .mk-timer-full__value {
  color: hsl(142 71% 45%) !important;
}

/* Seconds pulse for ending soon */
.single-product .mk-timer-full--ending .mk-timer-full__unit:last-child .mk-timer-full__value {
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.single-product .mk-timer-full__label {
  font-size: 0.75rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 0.25rem !important;
  text-transform: capitalize !important;
}

/* Footer dates */
.single-product .mk-timer-full__footer {
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid hsl(var(--border) / 0.5) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

.single-product .mk-timer-full__date {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.single-product .mk-timer-full__date svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* Warning for ending soon */
.single-product .mk-timer-full__warning {
  margin-top: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: hsl(var(--destructive)) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.single-product .mk-timer-full__warning svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* ------------------------------------------------------------------
   132.22: Button Variants (Gold & Catalog)
   React: variant="gold" and variant="catalog" from button.tsx
   ------------------------------------------------------------------ */

/* Gold Button */
.single-product .mk-btn-gold,
.single-product .button.mk-btn-gold {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  height: 2.5rem !important;
  padding: 0 1.5rem !important;
  background: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  font-weight: 500 !important;
  border-radius: 0.25rem !important;
  box-shadow: var(--shadow-elegant) !important;
  transition: all 300ms ease !important;
  cursor: pointer !important;
  border: none !important;
  text-decoration: none !important;
}

.single-product .mk-btn-gold:hover {
  background: hsl(var(--gold-light)) !important;
}

.single-product .mk-btn-gold:disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.single-product .mk-btn-gold.mk-btn-xl {
  height: 3.5rem !important;
  padding: 0 2.5rem !important;
  font-size: 1rem !important;
}

.single-product .mk-btn-gold.mk-btn-full {
  width: 100% !important;
}

.single-product .mk-btn-gold svg {
  width: 1rem !important;
  height: 1rem !important;
}

.single-product .mk-btn-gold.mk-btn-xl svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* Catalog Button (Primary) */
.single-product .mk-btn-catalog,
.single-product .button.mk-btn-catalog {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  height: 2.5rem !important;
  padding: 0 1.5rem !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  border-radius: 0.25rem !important;
  box-shadow: var(--shadow-elegant) !important;
  transition: all 300ms ease !important;
  cursor: pointer !important;
  border: none !important;
  text-decoration: none !important;
}

.single-product .mk-btn-catalog:hover {
  background: hsl(var(--forest-light)) !important;
  box-shadow: var(--shadow-hover) !important;
}

.single-product .mk-btn-catalog:disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   END SECTION 132: SINGLE PRODUCT PAGE - COMPLETE 1:1 REACT PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 132: MY ACCOUNT PAGE — 1:1 REACT PARITY (P18)
   Source: src/pages/Account.tsx, src/pages/Auth.tsx
   Agent: P18
   Date: 2026-03-23

   Comprehensive My Account styling covering:
   - Auth page (login/register) with ShadCN-style tabs
   - Dashboard with stats cards
   - User info card
   - Bid history list with status badges
   ========================================================================== */

/* -----------------------------------------------------------------------------
   132.1: Auth Page Container
   React: div.container.mx-auto.px-4.py-12 > div.max-w-2xl.mx-auto
   ----------------------------------------------------------------------------- */
.woocommerce-account:not(.logged-in) .woocommerce,
.mk-auth-page {
  max-width: 42rem !important;          /* max-w-2xl = 672px */
  margin: 0 auto !important;
  padding: 3rem 1rem !important;        /* py-12 px-4 */
}

/* Auth page title */
.woocommerce-account:not(.logged-in) .entry-title,
.woocommerce-account:not(.logged-in) h1.wp-block-post-title,
.mk-auth-page__title {
  font-family: var(--font-display) !important;
  font-size: 1.875rem !important;       /* text-3xl */
  font-weight: 600 !important;          /* font-semibold */
  color: hsl(var(--foreground)) !important;
  text-align: center !important;
  margin-bottom: 2rem !important;       /* mb-8 */
}

@media (min-width: 768px) {
  .woocommerce-account:not(.logged-in) .entry-title,
  .woocommerce-account:not(.logged-in) h1.wp-block-post-title,
  .mk-auth-page__title {
    font-size: 2.25rem !important;      /* md:text-4xl */
  }
}

/* -----------------------------------------------------------------------------
   132.2: Auth Card Container
   React: div.bg-card.rounded-sm.shadow-elegant.p-8
   ----------------------------------------------------------------------------- */
#customer_login,
.mk-auth-card {
  background: hsl(var(--card)) !important;
  border-radius: 0.125rem !important;   /* rounded-md = 2px (React custom config) */
  box-shadow: var(--shadow-elegant) !important;
  padding: 2rem !important;             /* p-8 */
}

/* -----------------------------------------------------------------------------
   132.3: Tab List Container
   React: TabsList className="grid w-full grid-cols-2 mb-8"
   ShadCN: inline-flex h-10 items-center justify-center rounded-md bg-muted p-1
   ----------------------------------------------------------------------------- */
.mk-auth-tabs__list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  width: 100% !important;
  height: 2.5rem !important;            /* h-10 */
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */   /* rounded-md */
  background: hsl(var(--muted)) !important;
  padding: 0.25rem !important;          /* p-1 */
  margin-bottom: 2rem !important;       /* mb-8 */
}

/* -----------------------------------------------------------------------------
   132.4: Tab Trigger Buttons
   ----------------------------------------------------------------------------- */
.mk-auth-tabs__trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  border-radius: 0.125rem !important;
  padding: 0.375rem 0.75rem !important;
  border: none !important;
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 200ms !important;
}

.mk-auth-tabs__trigger:hover:not(.mk-auth-tabs__trigger--active) {
  color: hsl(var(--foreground)) !important;
}

.mk-auth-tabs__trigger--active {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.mk-auth-tabs__content {
  display: none !important;
}

.mk-auth-tabs__content--active {
  display: block !important;
  animation: mk-fade-in 0.2s ease-out !important;
}

/* -----------------------------------------------------------------------------
   132.5-132.11: Form Styles (Labels, Inputs, Checkbox, Submit Button)
   ----------------------------------------------------------------------------- */
#customer_login form > * { margin-top: 0 !important; }
#customer_login form > * + * { margin-top: 1.5rem !important; }

#customer_login .form-row,
.mk-form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

#customer_login label,
.mk-form-label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: hsl(var(--foreground)) !important;
  display: block !important;
}

#customer_login label .required { color: hsl(var(--destructive)) !important; }

#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"],
#customer_login input[type="tel"],
.mk-form-input {
  display: flex !important;
  height: 2.5rem !important;
  width: 100% !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px (React custom config) */
  border: 1px solid hsl(var(--input)) !important;
  background: hsl(var(--background)) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 1rem !important;
  font-family: var(--font-body) !important;
  color: hsl(var(--foreground)) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

@media (min-width: 768px) {
  #customer_login input[type="text"],
  #customer_login input[type="email"],
  #customer_login input[type="password"],
  #customer_login input[type="tel"],
  .mk-form-input {
    font-size: 0.875rem !important;
  }
}

#customer_login input:focus,
.mk-form-input:focus {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
}

#customer_login input::placeholder,
.mk-form-input::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}

#customer_login input[type="checkbox"],
.mk-form-checkbox {
  height: 1rem !important;
  width: 1rem !important;
  flex-shrink: 0 !important;
  border-radius: 0.125rem !important;
  border: 1px solid hsl(var(--primary)) !important;
  background: hsl(var(--background)) !important;
  cursor: pointer !important;
  accent-color: hsl(var(--primary)) !important;
}

#customer_login input[type="checkbox"]:checked,
.mk-form-checkbox:checked {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
}

.mk-checkbox-wrapper {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
}

.mk-checkbox-wrapper label {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.625 !important;
}

.mk-checkbox-wrapper label a {
  color: hsl(var(--primary)) !important;
  text-decoration: none !important;
}

.mk-checkbox-wrapper label a:hover { text-decoration: underline !important; }

.woocommerce-LostPassword,
#customer_login .lost_password { margin-top: 1rem !important; }

.woocommerce-LostPassword a,
#customer_login .lost_password a,
.mk-lost-password-link {
  font-size: 0.875rem !important;
  color: hsl(var(--primary)) !important;
  text-decoration: none !important;
}

.woocommerce-LostPassword a:hover,
#customer_login .lost_password a:hover { text-decoration: underline !important; }

#customer_login button[type="submit"],
#customer_login input[type="submit"],
.mk-auth-submit {
  width: 100% !important;
  height: 2.5rem !important;
  padding: 0.5rem 1.5rem !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: none !important;
  border-radius: 0.25rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-elegant) !important;
  transition: all 300ms !important;
  margin-top: 1.5rem !important;
}

#customer_login button[type="submit"]:hover,
#customer_login input[type="submit"]:hover,
.mk-auth-submit:hover {
  background: hsl(var(--forest-light)) !important;
  box-shadow: var(--shadow-hover) !important;
}

#customer_login button[type="submit"]:disabled,
.mk-auth-submit:disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.mk-register-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}

@media (min-width: 640px) {
  .mk-register-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
}

.mk-register-grid-3 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}

@media (min-width: 640px) {
  .mk-register-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
}

.mk-register-intro {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 1rem !important;
}

/* -----------------------------------------------------------------------------
   132.12-132.17: Dashboard Layout (Stats, Info Card, Bids)
   ----------------------------------------------------------------------------- */
.woocommerce-account.logged-in .woocommerce,
.mk-dashboard {
  max-width: 56rem !important;
  margin: 0 auto !important;
  padding: 3rem 1rem !important;
}

.mk-dashboard-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin-bottom: 2rem !important;
}

.mk-dashboard-header__content { flex: 1 !important; }

.mk-dashboard-header__title,
.woocommerce-MyAccount-content > h2:first-child {
  font-family: var(--font-display) !important;
  font-size: 1.875rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 0 0.5rem 0 !important;
}

@media (min-width: 768px) {
  .mk-dashboard-header__title,
  .woocommerce-MyAccount-content > h2:first-child { font-size: 2.25rem !important; }
}

.mk-dashboard-header__subtitle {
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 !important;
}

.mk-dashboard-header__logout,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  height: 2.5rem !important;
  padding: 0.5rem 1.5rem !important;
  border: 1px solid hsl(var(--foreground) / 0.2) !important;
  border-radius: 0.25rem !important;
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.025em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 300ms !important;
}

.mk-dashboard-header__logout:hover,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

.mk-account-stats,
.mk-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  margin-bottom: 3rem !important;
}

@media (min-width: 640px) {
  .mk-account-stats,
  .mk-stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

.mk-account-stat,
.mk-stat-card {
  background: hsl(var(--card)) !important;
  border-radius: 0.125rem !important;
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important;
}

.mk-account-stat__inner,
.mk-stat-card__inner {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.mk-account-stat__icon,
.mk-stat-card__icon {
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.mk-account-stat__icon svg,
.mk-stat-card__icon svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

.mk-account-stat__icon--primary,
.mk-stat-card__icon--primary { background: hsl(var(--primary) / 0.1) !important; }
.mk-account-stat__icon--primary svg,
.mk-stat-card__icon--primary svg { color: hsl(var(--primary)) !important; }

.mk-account-stat__icon--gold,
.mk-stat-card__icon--gold { background: hsl(var(--gold) / 0.1) !important; }
.mk-account-stat__icon--gold svg,
.mk-stat-card__icon--gold svg { color: hsl(var(--gold)) !important; }

.mk-account-stat__icon--secondary,
.mk-stat-card__icon--secondary { background: hsl(var(--secondary)) !important; }
.mk-account-stat__icon--secondary svg,
.mk-stat-card__icon--secondary svg { color: hsl(var(--muted-foreground)) !important; }

.mk-account-stat__label,
.mk-stat-card__label {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 0 0.125rem 0 !important;
  display: block !important;
}

.mk-account-stat__value,
.mk-stat-card__value {
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 !important;
  display: block !important;
}

.mk-account-info,
.mk-info-card {
  background: hsl(var(--card)) !important;
  border-radius: 0.125rem !important;
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important;
  margin-bottom: 2rem !important;
}

.mk-account-info__header,
.mk-info-card__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.5rem !important;
}

.mk-account-info__title,
.mk-info-card__title {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 !important;
}

.mk-account-info__edit,
.mk-info-card__edit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0.25rem !important;
  color: hsl(var(--foreground)) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: background 150ms !important;
  text-decoration: none !important;
}

.mk-account-info__edit:hover,
.mk-info-card__edit:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

.mk-account-info__edit svg,
.mk-info-card__edit svg { width: 1rem !important; height: 1rem !important; }

.mk-account-info__grid,
.mk-info-card__grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
  font-size: 0.875rem !important;
}

@media (min-width: 640px) {
  .mk-account-info__grid,
  .mk-info-card__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

.mk-account-info__row,
.mk-info-card__row { display: flex !important; flex-wrap: wrap !important; }

.mk-account-info__label,
.mk-info-card__label { color: hsl(var(--muted-foreground)) !important; }

.mk-account-info__value,
.mk-info-card__value {
  margin-left: 0.5rem !important;
  color: hsl(var(--foreground)) !important;
}

.mk-account-bids,
.mk-bids-card {
  background: hsl(var(--card)) !important;
  border-radius: 0.125rem !important;
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important;
}

.mk-account-bids__title,
.mk-bids-card__title {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 0 1.5rem 0 !important;
}

.mk-account-bids__list,
.mk-bids-card__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* -----------------------------------------------------------------------------
   132.18: Bid Item Row
   ----------------------------------------------------------------------------- */
.mk-bid-item {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1rem !important;
  background: hsl(var(--secondary) / 0.3) !important;
  border-radius: 0.125rem !important;
}

.mk-bid-item__image {
  width: 5rem !important;
  height: 5rem !important;
  object-fit: cover !important;
  border-radius: 0.125rem !important;
  flex-shrink: 0 !important;
}

.mk-bid-item__content { flex: 1 !important; min-width: 0 !important; }

.mk-bid-item__title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  text-decoration: none !important;
  transition: color 150ms !important;
  display: block !important;
}

.mk-bid-item__title:hover { color: hsl(var(--primary)) !important; }

.mk-bid-item__artist {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin: 0.25rem 0 0 0 !important;
}

.mk-bid-item__amount-row {
  font-size: 0.875rem !important;
  margin: 0.25rem 0 0 0 !important;
}

.mk-bid-item__amount-label { color: hsl(var(--muted-foreground)) !important; }

.mk-bid-item__amount {
  margin-left: 0.5rem !important;
  font-weight: 600 !important;
  color: hsl(var(--primary)) !important;
}

.mk-bid-item__meta { text-align: right !important; flex-shrink: 0 !important; }

.mk-bid-item__date {
  font-size: 0.75rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 0.5rem !important;
}

/* -----------------------------------------------------------------------------
   132.19: Bid Status Badges
   ----------------------------------------------------------------------------- */
.mk-bid-badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  padding: 0.125rem 0.625rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  transition: color 150ms, background-color 150ms !important;
}

.mk-bid-badge--active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.mk-bid-badge--outbid {
  background: transparent !important;
  border-color: hsl(var(--destructive)) !important;
  color: hsl(var(--destructive)) !important;
}

.mk-bid-badge--won {
  background: hsl(var(--gold)) !important;
  color: hsl(160 35% 20%) !important;
}

.mk-bid-badge--lost {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--secondary-foreground)) !important;
}

.mk-bid-badge--winning {
  background: hsl(var(--primary) / 0.1) !important;
  color: hsl(var(--primary)) !important;
}

/* -----------------------------------------------------------------------------
   132.20: Empty Bids State
   ----------------------------------------------------------------------------- */
.mk-bids-empty {
  text-align: center !important;
  padding: 2rem 0 !important;
}

.mk-bids-empty__text {
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 1rem !important;
}

.mk-bids-empty .mk-btn-catalog { display: inline-flex !important; }

/* -----------------------------------------------------------------------------
   132.21: WooCommerce My Account Navigation Override
   ----------------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation {
  background: hsl(var(--card)) !important;
  border-radius: 0.125rem !important;
  box-shadow: var(--shadow-card) !important;
  padding: 1rem !important;
  margin-bottom: 2rem !important;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-MyAccount-navigation li { margin-bottom: 0.25rem !important; }
.woocommerce-MyAccount-navigation li:last-child { margin-bottom: 0 !important; }

.woocommerce-MyAccount-navigation li a {
  display: block !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.25rem !important;
  color: hsl(var(--foreground)) !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  transition: background 200ms, color 200ms !important;
}

.woocommerce-MyAccount-navigation li a:hover {
  background: hsl(var(--primary) / 0.1) !important;
  color: hsl(var(--primary)) !important;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  background: hsl(var(--primary) / 0.1) !important;
  color: hsl(var(--primary)) !important;
  font-weight: 500 !important;
}

.woocommerce-MyAccount-content {
  background: hsl(var(--card)) !important;
  border-radius: 0.125rem !important;
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important;
}

@media (min-width: 768px) {
  .woocommerce-account.logged-in .woocommerce {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    gap: 2rem !important;
    align-items: start !important;
  }

  .woocommerce-MyAccount-navigation { margin-bottom: 0 !important; }
}

/* -----------------------------------------------------------------------------
   132.22: Forgot Password Page
   React: src/pages/ForgotPassword.tsx
   ----------------------------------------------------------------------------- */
.woocommerce-lost-password,
.mk-forgot-password {
  max-width: 28rem !important;            /* max-w-md = 448px */
  margin: 0 auto !important;
  padding: 3rem 1rem !important;          /* py-12 px-4 */
}

.woocommerce-lost-password form,
.mk-forgot-password__card {
  background: hsl(var(--card)) !important;
  border-radius: 0.125rem !important;     /* rounded-sm */
  box-shadow: var(--shadow-elegant) !important;
  padding: 2rem !important;               /* p-8 */
}

/* Centered icon circle (large - 64px) */
.mk-auth-icon-lg {
  width: 4rem !important;                 /* w-16 = 64px */
  height: 4rem !important;                /* h-16 = 64px */
  border-radius: 9999px !important;       /* rounded-full */
  background: hsl(var(--primary) / 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 1rem !important;         /* mx-auto mb-4 */
}

.mk-auth-icon-lg svg {
  width: 2rem !important;                 /* w-8 = 32px */
  height: 2rem !important;                /* h-8 = 32px */
  color: hsl(var(--primary)) !important;
}

.mk-auth-icon-lg--success { margin-bottom: 1.5rem !important; } /* mb-6 */

/* Forgot password header */
.mk-forgot-header {
  text-align: center !important;
  margin-bottom: 2rem !important;         /* mb-8 */
}

.mk-forgot-header__title {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;           /* text-2xl */
  font-weight: 600 !important;            /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.5rem !important;       /* mb-2 */
}

.mk-forgot-header__desc {
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 !important;
}

/* Success state */
.mk-forgot-success {
  text-align: center !important;
}

.mk-forgot-success__title {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;           /* text-2xl */
  font-weight: 600 !important;            /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 1rem !important;         /* mb-4 */
}

.mk-forgot-success__message {
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 1.5rem !important;       /* mb-6 */
}

.mk-forgot-success__message strong {
  color: hsl(var(--foreground)) !important;
}

.mk-forgot-success__retry {
  font-size: 0.875rem !important;         /* text-sm */
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 1.5rem !important;       /* mb-6 */
}

.mk-forgot-success__retry-btn {
  background: none !important;
  border: none !important;
  color: hsl(var(--primary)) !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

.mk-forgot-success__retry-btn:hover { text-decoration: underline !important; }

/* Back to login link */
.mk-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;                 /* gap-2 */
  font-size: 0.875rem !important;         /* text-sm */
  color: hsl(var(--primary)) !important;
  text-decoration: none !important;
}

.mk-back-link:hover { text-decoration: underline !important; }

.mk-back-link svg {
  width: 1rem !important;                 /* w-4 */
  height: 1rem !important;                /* h-4 */
}

.mk-forgot-footer { margin-top: 1.5rem !important; text-align: center !important; }

/* WooCommerce lost password page override */
.woocommerce-lost-password .woocommerce-form-row { margin-bottom: 1.5rem !important; }

.woocommerce-lost-password .woocommerce-Button {
  width: 100% !important;
  height: 2.5rem !important;
  padding: 0.5rem 1.5rem !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: none !important;
  border-radius: 0.25rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-elegant) !important;
  transition: all 300ms !important;
}

.woocommerce-lost-password .woocommerce-Button:hover {
  background: hsl(var(--forest-light)) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* ==========================================================================
   END SECTION 132: MY ACCOUNT PAGE — 1:1 REACT PARITY (P18)
   ========================================================================== */


/* ==========================================================================
   SECTION 133: OPACITY COLOR UTILITIES — 1:1 REACT PARITY (P2)
   ==========================================================================

   Tailwind opacity modifier pattern: color/XX → hsl(var(--color) / 0.XX)

   Usage in WordPress:
   - Apply directly via style attribute: style="background: hsl(var(--muted) / 0.3)"
   - Use utility classes: class="mk-bg-muted-30"

   These match React's Tailwind opacity modifiers exactly.
   ========================================================================== */

/* --- Background Opacity Utilities --- */

/* Black overlay (modals, drawers) */
.mk-bg-black-80 { background: rgb(0 0 0 / 0.8) !important; }

/* Background color with opacity */
.mk-bg-background-95 { background: hsl(var(--background) / 0.95) !important; }
.mk-bg-background-80 { background: hsl(var(--background) / 0.8) !important; }

/* Primary with opacity */
.mk-bg-primary-90 { background: hsl(var(--primary) / 0.9) !important; }
.mk-bg-primary-80 { background: hsl(var(--primary) / 0.8) !important; }
.mk-bg-primary-60 { background: hsl(var(--primary) / 0.6) !important; }
.mk-bg-primary-10 { background: hsl(var(--primary) / 0.1) !important; }
.mk-bg-primary-05 { background: hsl(var(--primary) / 0.05) !important; }

/* Gold with opacity */
.mk-bg-gold-90 { background: hsl(var(--gold) / 0.9) !important; }
.mk-bg-gold-20 { background: hsl(var(--gold) / 0.2) !important; }
.mk-bg-gold-10 { background: hsl(var(--gold) / 0.1) !important; }
.mk-bg-gold-05 { background: hsl(var(--gold) / 0.05) !important; }

/* Muted with opacity */
.mk-bg-muted-50 { background: hsl(var(--muted) / 0.5) !important; }
.mk-bg-muted-30 { background: hsl(var(--muted) / 0.3) !important; }

/* Secondary with opacity */
.mk-bg-secondary-80 { background: hsl(var(--secondary) / 0.8) !important; }
.mk-bg-secondary-30 { background: hsl(var(--secondary) / 0.3) !important; }

/* Foreground with opacity (overlays) */
.mk-bg-foreground-80 { background: hsl(var(--foreground) / 0.8) !important; }
.mk-bg-foreground-60 { background: hsl(var(--foreground) / 0.6) !important; }
.mk-bg-foreground-50 { background: hsl(var(--foreground) / 0.5) !important; }
.mk-bg-foreground-40 { background: hsl(var(--foreground) / 0.4) !important; }
.mk-bg-foreground-20 { background: hsl(var(--foreground) / 0.2) !important; }

/* Destructive with opacity */
.mk-bg-destructive-90 { background: hsl(var(--destructive) / 0.9) !important; }
.mk-bg-destructive-20 { background: hsl(var(--destructive) / 0.2) !important; }
.mk-bg-destructive-10 { background: hsl(var(--destructive) / 0.1) !important; }
.mk-bg-destructive-05 { background: hsl(var(--destructive) / 0.05) !important; }

/* Primary-foreground with opacity */
.mk-bg-primary-foreground-20 { background: hsl(var(--primary-foreground) / 0.2) !important; }
.mk-bg-primary-foreground-10 { background: hsl(var(--primary-foreground) / 0.1) !important; }

/* Accent with opacity */
.mk-bg-accent-50 { background: hsl(var(--accent) / 0.5) !important; }

/* Green (status: active) - HSL 142 76% 36% is Tailwind green-500 */
.mk-bg-green-500-20 { background: hsl(142 76% 36% / 0.2) !important; }
.mk-bg-green-500-10 { background: hsl(142 76% 36% / 0.1) !important; }
.mk-bg-green-500-05 { background: hsl(142 76% 36% / 0.05) !important; }
.mk-bg-green-600-05 { background: hsl(142 71% 45% / 0.05) !important; }
.mk-bg-green-950-30 { background: hsl(144 61% 20% / 0.3) !important; }

/* Amber (status: post-auction) - HSL 38 92% 50% is Tailwind amber-500 */
.mk-bg-amber-500-10 { background: hsl(38 92% 50% / 0.1) !important; }

/* --- Text Opacity Utilities --- */

.mk-text-foreground-50 { color: hsl(var(--foreground) / 0.5) !important; }

.mk-text-primary-90 { color: hsl(var(--primary) / 0.9) !important; }

.mk-text-gold-80 { color: hsl(var(--gold) / 0.8) !important; }

.mk-text-primary-foreground-90 { color: hsl(var(--primary-foreground) / 0.9) !important; }
.mk-text-primary-foreground-80 { color: hsl(var(--primary-foreground) / 0.8) !important; }
.mk-text-primary-foreground-70 { color: hsl(var(--primary-foreground) / 0.7) !important; }
.mk-text-primary-foreground-60 { color: hsl(var(--primary-foreground) / 0.6) !important; }
.mk-text-primary-foreground-50 { color: hsl(var(--primary-foreground) / 0.5) !important; }

.mk-text-muted-foreground-30 { color: hsl(var(--muted-foreground) / 0.3) !important; }

.mk-text-sidebar-foreground-70 { color: hsl(var(--sidebar-foreground) / 0.7) !important; }

/* --- Border Opacity Utilities --- */

.mk-border-foreground-20 { border-color: hsl(var(--foreground) / 0.2) !important; }
.mk-border-foreground-30 { border-color: hsl(var(--foreground) / 0.3) !important; }

.mk-border-primary-20 { border-color: hsl(var(--primary) / 0.2) !important; }
.mk-border-primary-50 { border-color: hsl(var(--primary) / 0.5) !important; }

.mk-border-primary-foreground-20 { border-color: hsl(var(--primary-foreground) / 0.2) !important; }
.mk-border-primary-foreground-30 { border-color: hsl(var(--primary-foreground) / 0.3) !important; }

.mk-border-gold-20 { border-color: hsl(var(--gold) / 0.2) !important; }

.mk-border-destructive-20 { border-color: hsl(var(--destructive) / 0.2) !important; }
.mk-border-destructive-50 { border-color: hsl(var(--destructive) / 0.5) !important; }

.mk-border-green-500-20 { border-color: hsl(142 76% 36% / 0.2) !important; }

.mk-border-amber-500-20 { border-color: hsl(38 92% 50% / 0.2) !important; }
.mk-border-amber-500-30 { border-color: hsl(38 92% 50% / 0.3) !important; }

.mk-border-border-50 { border-color: hsl(var(--border) / 0.5) !important; }

/* --- Ring/Focus Opacity Utilities --- */

.mk-ring-ring-20 { box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important; }
.mk-ring-ring-30 { box-shadow: 0 0 0 3px hsl(var(--ring) / 0.3) !important; }
.mk-ring-primary-10 { box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1) !important; }
.mk-ring-primary-20 { box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important; }

/* ==========================================================================
   END SECTION 133: OPACITY COLOR UTILITIES — 1:1 REACT PARITY (P2)
   ========================================================================== */

/* ==========================================================================
   SECTION 134: MOBILE MENU — 1:1 REACT PARITY (P30)
   React Reference: src/components/layout/Header.tsx lines 165-235
   WordPress: Navigation block with overlayMenu="mobile"

   CRITICAL DIFFERENCE:
   - React uses INLINE expand/collapse (div appears below header row)
   - WordPress uses overlay/slide-out by default
   - This CSS overrides WP to match React's inline behavior

   Key React Specs:
   - Breakpoint: RAISED to 1280px (was lg:hidden = 1024px) for WordPress
   - Toggle: Button variant="ghost" size="icon" (2.5rem square)
   - Icons: Menu when closed, X when open (w-5 h-5 = 1.25rem)
   - Menu container: lg:hidden py-4 border-t border-border animate-fade-in
   - Animation: fade-in (opacity 0->1, translateY 10px->0, 0.5s ease-out)
   - Section labels: text-sm font-medium text-muted-foreground px-2
   - Submenu links: block px-4 py-2 text-sm hover:bg-muted rounded
   - Top-level links: px-2 py-2 text-sm font-medium hover:text-primary
   ========================================================================== */

/* ------------------------------------------------------------------
   134.1: Hide Desktop Nav on Mobile, Show Hamburger
   React: nav className="hidden lg:flex"
   React: Button className="lg:hidden"
   WordPress adjustment: Raised breakpoint to 1280px for better fit
   ------------------------------------------------------------------ */
@media (max-width: 1279px) {
  /* Hide main desktop navigation container */
  .mk-header__nav > .wp-block-navigation__container {
    display: none !important;
  }

  /* Show the hamburger/open button */
  .mk-header__nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;                /* size="icon" = h-10 w-10 */
    height: 2.5rem !important;
    padding: 0 !important;
    background: transparent !important;      /* variant="ghost" */
    border: none !important;
    border-radius: 0.25rem !important;       /* rounded */
    cursor: pointer !important;
    transition: background-color 200ms, color 200ms !important;
  }

  /* Hamburger icon size */
  .mk-header__nav .wp-block-navigation__responsive-container-open svg {
    width: 1.25rem !important;               /* w-5 */
    height: 1.25rem !important;              /* h-5 */
    color: hsl(var(--foreground)) !important;
  }

  /* Hamburger hover state */
  .mk-header__nav .wp-block-navigation__responsive-container-open:hover {
    background: hsl(var(--accent)) !important;   /* hover:bg-accent */
    color: hsl(var(--accent-foreground)) !important;
  }
}

@media (min-width: 1280px) {
  /* Hide hamburger on desktop (1280px+) */
  .mk-header__nav .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  /* FIX: Show responsive container as visible flex row on desktop */
  .mk-header__nav .wp-block-navigation__responsive-container {
    display: flex !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    position: static !important;
    background: transparent !important;
  }

  .mk-header__nav .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .mk-header__nav .wp-block-navigation__responsive-container .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2rem !important;
  }

  /* Hide mobile close button on desktop */
  .mk-header__nav .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  /* Hide responsive dialog wrapper on desktop - it's for mobile overlay */
  .mk-header__nav .wp-block-navigation__responsive-close,
  .mk-header__nav .wp-block-navigation__responsive-dialog {
    display: contents !important;
  }
}

/* ------------------------------------------------------------------
   134.2: Mobile Menu Container — Inline Expand (NOT Slide-out)
   React: <div className="lg:hidden py-4 border-t border-border animate-fade-in">

   WordPress navigation responsive container defaults to fullscreen overlay.
   Override to position BELOW the header row as inline expanded content.

   CRITICAL: This must be MOBILE/TABLET ONLY (max-width: 1279px).
   On desktop (min-width: 1280px), the responsive-container should display
   normally with no max-height:0 or opacity:0 constraints.
   ------------------------------------------------------------------ */
@media (max-width: 1279px) {
  .mk-header__nav .wp-block-navigation__responsive-container {
    /* Reset overlay positioning */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: 0 !important;
    overflow: hidden !important;

    /* Remove overlay background */
    background: transparent !important;

    /* Transition for smooth open/close */
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out !important;
    opacity: 0 !important;
  }

  /* When menu is open */
  .mk-header__nav .wp-block-navigation__responsive-container.is-menu-open,
  .mk-header__nav .wp-block-navigation__responsive-container.has-modal-open {
    max-height: 100vh !important;
    opacity: 1 !important;

    /* React: py-4 border-t border-border */
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    border-top: 1px solid hsl(var(--border)) !important;

    /* React: animate-fade-in */
    animation: mk-fade-in 0.3s ease-out forwards !important;
  }
}

/* Remove WP's fullscreen overlay background */
.mk-header__nav .wp-block-navigation__responsive-container::before,
.mk-header__nav .wp-block-navigation__responsive-container-content::before {
  display: none !important;
}

/* ------------------------------------------------------------------
   134.3: Mobile Menu Inner Container
   React: <nav className="flex flex-col gap-2">
   MOBILE/TABLET ONLY - on desktop (1280px+) these should be flex-direction: row
   ------------------------------------------------------------------ */
@media (max-width: 1279px) {
  .mk-header__nav .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;                    /* gap-2 */
    padding: 0 !important;
    background: transparent !important;
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Override WP's mobile container to show as block (not overlay) */
  .mk-header__nav .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
    width: 100% !important;
  }
}

/* ------------------------------------------------------------------
   134.4: Mobile Close Button
   React: shows X icon on open (same button toggles)
   WordPress: separate close button inside responsive container
   ------------------------------------------------------------------ */
.mk-header__nav .wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 2.5rem !important;                  /* size="icon" */
  height: 2.5rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0.25rem !important;
  cursor: pointer !important;
  transition: background-color 200ms, color 200ms !important;
  z-index: 10 !important;
}

.mk-header__nav .wp-block-navigation__responsive-container-close svg {
  width: 1.25rem !important;                 /* w-5 */
  height: 1.25rem !important;                /* h-5 */
  color: hsl(var(--foreground)) !important;
}

.mk-header__nav .wp-block-navigation__responsive-container-close:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

/* ------------------------------------------------------------------
   134.5: Mobile Section Labels (Submenu Triggers)
   React: <span className="text-sm font-medium text-muted-foreground px-2">
   ------------------------------------------------------------------ */
.mk-header__nav .wp-block-navigation__responsive-container .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  font-size: 0.875rem !important;            /* text-sm */
  font-weight: 500 !important;               /* font-medium */
  color: hsl(var(--muted-foreground)) !important;
  padding: 0.5rem !important;                /* px-2 py-2 */
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;                   /* gap-1 for chevron */
}

/* Chevron icon for submenu triggers */
.mk-header__nav .wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle {
  width: 1rem !important;                    /* w-4 */
  height: 1rem !important;                   /* h-4 */
  color: hsl(var(--muted-foreground)) !important;
}

/* ------------------------------------------------------------------
   134.6: Mobile Submenu Links
   React: <Link className="block px-4 py-2 text-sm hover:bg-muted rounded">
   ------------------------------------------------------------------ */
.mk-header__nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block !important;
  padding: 0.5rem 1rem !important;           /* py-2 px-4 */
  font-size: 0.875rem !important;            /* text-sm */
  font-weight: 400 !important;               /* normal weight for submenu items */
  color: hsl(var(--foreground)) !important;
  text-decoration: none !important;
  border-radius: 0.25rem !important;         /* rounded */
  transition: background-color 150ms ease !important;
}

.mk-header__nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: hsl(var(--muted)) !important;  /* hover:bg-muted */
}

/* Mobile submenu container - no dropdown, show inline (MOBILE ONLY) */
@media (max-width: 1279px) {
  .mk-header__nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
    position: static !important;
    display: block !important;
    width: 100% !important;
    padding-left: 0.5rem !important;           /* Indent submenu items */
    margin-top: 0.25rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* ------------------------------------------------------------------
   134.7: Mobile Top-Level Links (Non-Submenu)
   React: <Link className="px-2 py-2 text-sm font-medium hover:text-primary">
   ------------------------------------------------------------------ */
.mk-header__nav .wp-block-navigation__responsive-container > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:not(.wp-block-navigation-submenu) > .wp-block-navigation-item__content {
  padding: 0.5rem !important;                /* px-2 py-2 */
  font-size: 0.875rem !important;            /* text-sm */
  font-weight: 500 !important;               /* font-medium */
  color: hsl(var(--foreground)) !important;
  text-decoration: none !important;
  display: block !important;
  transition: color 150ms !important;
}

.mk-header__nav .wp-block-navigation__responsive-container > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:not(.wp-block-navigation-submenu) > .wp-block-navigation-item__content:hover {
  color: hsl(var(--primary)) !important;     /* hover:text-primary */
}

/* ------------------------------------------------------------------
   134.8: Active State for Mobile Links
   React: isActive('/path') ? 'text-primary' : 'text-foreground hover:text-primary'
   ------------------------------------------------------------------ */
.mk-header__nav .wp-block-navigation__responsive-container .current-menu-item > .wp-block-navigation-item__content {
  color: hsl(var(--primary)) !important;
}

/* ------------------------------------------------------------------
   134.9: Mobile Menu Background (Cream)
   WordPress header attribute: overlayBackgroundColor="cream"
   Ensure the expanded menu has cream background matching header
   ------------------------------------------------------------------ */
.mk-header__nav .wp-block-navigation__responsive-container.is-menu-open,
.mk-header__nav .wp-block-navigation__responsive-container.has-modal-open {
  background: hsl(var(--background)) !important;  /* cream = --background */
}

/* ------------------------------------------------------------------
   134.10: Hide WP's Default Mobile Menu Backdrop/Overlay
   WordPress adds a dark backdrop for overlay menus - we don't want it
   ------------------------------------------------------------------ */
.wp-block-navigation__responsive-dialog {
  background: transparent !important;
}

body.has-modal-open::after,
body.admin-bar.has-modal-open::after {
  display: none !important;
}

/* Ensure body doesn't lock scroll when our inline menu opens */
body.has-modal-open {
  overflow: auto !important;
}

/* ==========================================================================
   END SECTION 134: MOBILE MENU — 1:1 REACT PARITY (P30)
   ========================================================================== */

/* ==========================================================================
   SECTION 135: CONTACT ALTERNATIVE SECTION (How to Sell / Pardavimas)
   Agent: P26
   Source: src/pages/HowToSell.tsx lines 217-230
   Generated: 2026-03-23
   ========================================================================== */

/* ------------------------------------------------------------------
   Contact Alternative Section Container
   React: bg-secondary/30 rounded-sm p-8 text-center (line 218)
   ------------------------------------------------------------------ */
.mk-contact-alternative,
body.page-id-17 .mk-contact-alternative,
.page-pardavimas .mk-contact-alternative {
  background-color: hsl(36 25% 88% / 0.3) !important;  /* secondary/30 */
  border-radius: 0 !important;                          /* rounded-sm = 0px (CUSTOM) */
  padding: 2rem !important;                             /* p-8 = 32px */
  text-align: center !important;
}

/* ------------------------------------------------------------------
   Contact Alternative Title
   React: font-display text-2xl font-semibold text-foreground mb-4 (line 219)
   ------------------------------------------------------------------ */
.mk-contact-alternative__title,
.mk-contact-alternative h3,
body.page-id-17 .mk-contact-alternative h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important;             /* text-2xl = 24px */
  font-weight: 600 !important;              /* font-semibold */
  color: hsl(160 30% 18%) !important;       /* foreground */
  margin-bottom: 1rem !important;           /* mb-4 = 16px */
  margin-top: 0 !important;
}

/* ------------------------------------------------------------------
   Contact Alternative Description
   React: text-muted-foreground mb-6 (line 222-224)
   ------------------------------------------------------------------ */
.mk-contact-alternative__desc,
.mk-contact-alternative > p,
body.page-id-17 .mk-contact-alternative > p {
  color: hsl(160 15% 40%) !important;       /* muted-foreground */
  margin-bottom: 1.5rem !important;         /* mb-6 = 24px */
}

/* ------------------------------------------------------------------
   Contact Alternative Info Row
   React: flex flex-wrap justify-center gap-4 text-muted-foreground (line 225)
   ------------------------------------------------------------------ */
.mk-contact-alternative__info,
.mk-contact-alternative .contact-info-row,
body.page-id-17 .mk-contact-alternative .contact-info-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1rem !important;                     /* gap-4 = 16px */
  color: hsl(160 15% 40%) !important;       /* muted-foreground */
}

/* Separator dot styling */
.mk-contact-alternative__info span,
.mk-contact-alternative .contact-info-row span {
  color: hsl(160 15% 40%);                  /* muted-foreground */
}

/* ==========================================================================
   END SECTION 135: CONTACT ALTERNATIVE SECTION
   ========================================================================== */

/* ==========================================================================
   SECTION 136: LOADING STATES — 1:1 REACT PARITY (P33)
   Source: src/components/ui/skeleton.tsx, button.tsx
   ========================================================================== */

/* 136.1: Skeleton Base - React: animate-pulse rounded-md bg-muted */
.mk-skeleton {
  background-color: hsl(var(--muted)) !important;
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}
.mk-skeleton-sm { height: 0.75rem !important; }
.mk-skeleton-md { height: 1rem !important; }
.mk-skeleton-lg { height: 1.5rem !important; }
.mk-skeleton-xl { height: 2rem !important; }
.mk-skeleton-w-1\/2 { width: 50% !important; }
.mk-skeleton-w-3\/4 { width: 75% !important; }
.mk-skeleton-w-full { width: 100% !important; }
.mk-skeleton-circle { border-radius: 9999px !important; }

/* 136.2: Product Card Skeleton */
.mk-product-skeleton {
  background-color: hsl(var(--card)) !important;
  border-radius: 0.25rem !important;
  padding: 1rem !important;
  box-shadow: var(--shadow-card) !important;
}
.mk-product-skeleton__image {
  width: 100% !important;
  aspect-ratio: 4/5 !important;
  background-color: hsl(var(--muted)) !important;
  border-radius: 0.25rem !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
  margin-bottom: 1rem !important;
}
.mk-product-skeleton__title,
.mk-product-skeleton__artist,
.mk-product-skeleton__price {
  background-color: hsl(var(--muted)) !important;
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}
.mk-product-skeleton__title { height: 1.25rem !important; width: 80% !important; margin-bottom: 0.5rem !important; }
.mk-product-skeleton__artist { height: 1rem !important; width: 60% !important; margin-bottom: 0.75rem !important; }
.mk-product-skeleton__price { height: 1.5rem !important; width: 40% !important; }

/* 136.3: Button Disabled - React: disabled:opacity-50 disabled:pointer-events-none */
.mk-btn:disabled,
.mk-btn-catalog:disabled,
.mk-btn-gold:disabled,
.mk-btn-elegant:disabled,
button.mk-btn:disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* 136.4: Button Loading Spinner */
.mk-btn-loading { position: relative !important; color: transparent !important; }
.mk-btn-loading::after {
  content: "" !important;
  position: absolute !important;
  width: 1rem !important;
  height: 1rem !important;
  top: 50% !important;
  left: 50% !important;
  margin: -0.5rem 0 0 -0.5rem !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  border-right-color: transparent !important;
  animation: mk-spin 0.75s linear infinite !important;
}
@keyframes mk-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 136.5: AJAX Loading State */
.mk-loading {
  position: relative !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}
.mk-loading::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 2rem !important;
  height: 2rem !important;
  margin: -1rem 0 0 -1rem !important;
  border: 3px solid hsl(var(--muted)) !important;
  border-top-color: hsl(var(--primary)) !important;
  border-radius: 50% !important;
  animation: mk-spin 0.75s linear infinite !important;
}

/* ==========================================================================
   END SECTION 136: LOADING STATES — 1:1 REACT PARITY (P33)
   ========================================================================== */

/* ==========================================================================
   SECTION 136: TOOLTIP — 1:1 REACT PARITY (P36)
   React Reference: src/components/ui/tooltip.tsx (Radix TooltipPrimitive)

   React TooltipContent classes:
   z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5
   text-sm text-popover-foreground shadow-md
   animate-in fade-in-0 zoom-in-95
   data-[state=closed]:animate-out data-[state=closed]:fade-out-0
   data-[state=closed]:zoom-out-95
   data-[side=bottom]:slide-in-from-top-2
   data-[side=left]:slide-in-from-right-2
   data-[side=right]:slide-in-from-left-2
   data-[side=top]:slide-in-from-bottom-2
   sideOffset={4}
   ========================================================================== */

/* ------------------------------------------------------------------
   136.1: Tooltip Keyframes — Fade In/Out + Zoom + Slide Directions
   React: animate-in fade-in-0 zoom-in-95, animate-out fade-out-0 zoom-out-95
   slide-in-from-* variants for directional entry
   ------------------------------------------------------------------ */
@keyframes mk-tooltip-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mk-tooltip-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Slide from top (for tooltip appearing at bottom) */
@keyframes mk-tooltip-slide-from-top {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Slide from bottom (for tooltip appearing at top) */
@keyframes mk-tooltip-slide-from-bottom {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Slide from left (for tooltip appearing at right) */
@keyframes mk-tooltip-slide-from-left {
  from {
    opacity: 0;
    transform: scale(0.95) translateX(-0.5rem);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

/* Slide from right (for tooltip appearing at left) */
@keyframes mk-tooltip-slide-from-right {
  from {
    opacity: 0;
    transform: scale(0.95) translateX(0.5rem);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

/* ------------------------------------------------------------------
   136.2: Base Tooltip Content Styles
   React: z-50 overflow-hidden rounded-md border bg-popover
          px-3 py-1.5 text-sm text-popover-foreground shadow-md
   ------------------------------------------------------------------ */
.mk-tooltip,
[role="tooltip"],
.wp-block-tooltip,
.tooltip-content {
  z-index: 50;                                    /* z-50 */
  overflow: hidden;                               /* overflow-hidden */
  border-radius: calc(var(--radius) - 2px);       /* rounded-md = calc(0.25rem - 2px) */
  border: 1px solid hsl(var(--border));           /* border */
  background-color: hsl(var(--popover));          /* bg-popover = hsl(40 30% 96%) */
  padding: 0.375rem 0.75rem;                      /* py-1.5 px-3 */
  font-size: 0.875rem;                            /* text-sm = 14px */
  line-height: 1.25rem;                           /* text-sm line-height */
  color: hsl(var(--popover-foreground));          /* text-popover-foreground = hsl(160 30% 18%) */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),    /* shadow-md */
              0 2px 4px -2px rgb(0 0 0 / 0.1);
  font-family: var(--font-body);
  max-width: 20rem;                               /* Reasonable max-width for tooltips */
  pointer-events: none;                           /* Tooltips shouldn't capture pointer events */

  /* Default animation: fade + zoom */
  animation: mk-tooltip-fade-in 150ms ease-out forwards;
}

/* ------------------------------------------------------------------
   136.3: Tooltip Arrow/Pointer Styling
   Radix provides [data-side] for positioning
   ------------------------------------------------------------------ */
.mk-tooltip::before,
[role="tooltip"]::before {
  content: '';
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background-color: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  transform: rotate(45deg);
}

/* Arrow position when tooltip is at bottom */
.mk-tooltip[data-side="bottom"]::before,
[role="tooltip"][data-side="bottom"]::before {
  top: -0.25rem;
  left: 50%;
  margin-left: -0.25rem;
  border-bottom: none;
  border-right: none;
}

/* Arrow position when tooltip is at top */
.mk-tooltip[data-side="top"]::before,
[role="tooltip"][data-side="top"]::before {
  bottom: -0.25rem;
  left: 50%;
  margin-left: -0.25rem;
  border-top: none;
  border-left: none;
}

/* Arrow position when tooltip is at right */
.mk-tooltip[data-side="right"]::before,
[role="tooltip"][data-side="right"]::before {
  left: -0.25rem;
  top: 50%;
  margin-top: -0.25rem;
  border-right: none;
  border-bottom: none;
}

/* Arrow position when tooltip is at left */
.mk-tooltip[data-side="left"]::before,
[role="tooltip"][data-side="left"]::before {
  right: -0.25rem;
  top: 50%;
  margin-top: -0.25rem;
  border-left: none;
  border-top: none;
}

/* ------------------------------------------------------------------
   136.4: Directional Animations (data-side variants)
   React: slide-in-from-top-2 (bottom), slide-in-from-bottom-2 (top), etc.
   ------------------------------------------------------------------ */
.mk-tooltip[data-side="bottom"],
[role="tooltip"][data-side="bottom"] {
  animation: mk-tooltip-slide-from-top 150ms ease-out forwards;
}

.mk-tooltip[data-side="top"],
[role="tooltip"][data-side="top"] {
  animation: mk-tooltip-slide-from-bottom 150ms ease-out forwards;
}

.mk-tooltip[data-side="right"],
[role="tooltip"][data-side="right"] {
  animation: mk-tooltip-slide-from-left 150ms ease-out forwards;
}

.mk-tooltip[data-side="left"],
[role="tooltip"][data-side="left"] {
  animation: mk-tooltip-slide-from-right 150ms ease-out forwards;
}

/* ------------------------------------------------------------------
   136.5: Closing Animation State
   React: data-[state=closed]:animate-out data-[state=closed]:fade-out-0
          data-[state=closed]:zoom-out-95
   ------------------------------------------------------------------ */
.mk-tooltip[data-state="closed"],
[role="tooltip"][data-state="closed"] {
  animation: mk-tooltip-fade-out 150ms ease-in forwards;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   136.6: WordPress Title Attribute Tooltip Override
   Default browser tooltips on [title] — style to match
   This uses CSS for browser-rendered title tooltips (limited control)
   ------------------------------------------------------------------ */
/* Note: Native [title] tooltips cannot be styled with CSS.
   For consistent styling, WordPress must use JS/plugin to replace
   [title] with custom tooltip components.

   However, we provide classes for any custom tooltip implementation. */

/* ------------------------------------------------------------------
   136.7: Tooltip Trigger Styles (optional focus indicator)
   React: cursor-pointer on triggers
   ------------------------------------------------------------------ */
.mk-tooltip-trigger,
[data-tooltip-trigger] {
  cursor: pointer;
}

/* ------------------------------------------------------------------
   136.8: Dark Mode Tooltip Override
   React: bg-popover and text-popover-foreground change in dark mode
   ------------------------------------------------------------------ */
.dark .mk-tooltip,
.dark [role="tooltip"],
.dark .tooltip-content {
  background-color: hsl(var(--popover));          /* dark: hsl(160 20% 14%) */
  color: hsl(var(--popover-foreground));          /* dark: hsl(36 20% 92%) */
  border-color: hsl(var(--border));               /* dark: hsl(160 15% 22%) */
}

.dark .mk-tooltip::before,
.dark [role="tooltip"]::before {
  background-color: hsl(var(--popover));
  border-color: hsl(var(--border));
}

/* ------------------------------------------------------------------
   136.9: Reduced Motion
   Respect prefers-reduced-motion for animations
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mk-tooltip,
  [role="tooltip"],
  .tooltip-content {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   END SECTION 136: TOOLTIP — 1:1 REACT PARITY (P36)
   ========================================================================== */

/* ==========================================================================
   SECTION 137: TABLES — 1:1 REACT PARITY (P39)
   React: src/components/ui/table.tsx

   Key React values:
   - th: h-12 (48px), px-4, font-medium, text-muted-foreground, NO bg
   - td: p-4 (16px all), align-middle
   - tr: border-b, hover:bg-muted/50
   - tbody tr:last-child: border-0
   ========================================================================== */

/* Base table reset - applies to all WooCommerce tables */
.mk-table,
.woocommerce table.shop_table,
.woocommerce-account .woocommerce-MyAccount-content table,
.woocommerce-checkout-review-order-table,
.woocommerce-orders-table {
  width: 100% !important;
  caption-side: bottom !important;
  font-size: 0.875rem !important;              /* text-sm */
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Table header row - border bottom */
.mk-table thead tr,
.woocommerce table.shop_table thead tr,
.woocommerce-account .woocommerce-MyAccount-content table thead tr,
.woocommerce-checkout-review-order-table thead tr,
.woocommerce-orders-table thead tr {
  border-bottom: 1px solid hsl(var(--border)) !important;
}

/* Table header cell - React exact values */
.mk-table th,
.woocommerce table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-checkout-review-order-table th,
.woocommerce-orders-table th {
  height: 3rem !important;                     /* h-12 = 48px */
  padding-left: 1rem !important;               /* px-4 */
  padding-right: 1rem !important;              /* px-4 */
  text-align: left !important;                 /* text-left */
  vertical-align: middle !important;           /* align-middle */
  font-weight: 500 !important;                 /* font-medium */
  color: hsl(var(--muted-foreground)) !important; /* text-muted-foreground */
  background: transparent !important;          /* NO background in React */
  text-transform: none !important;             /* NO uppercase in React */
  letter-spacing: normal !important;           /* NO letter-spacing in React */
  border: none !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}

/* Table body - last row no border */
.mk-table tbody tr:last-child,
.woocommerce table.shop_table tbody tr:last-child,
.woocommerce-account .woocommerce-MyAccount-content table tbody tr:last-child,
.woocommerce-orders-table tbody tr:last-child {
  border-bottom: none !important;
}

.mk-table tbody tr:last-child td,
.woocommerce table.shop_table tbody tr:last-child td,
.woocommerce-account .woocommerce-MyAccount-content table tbody tr:last-child td,
.woocommerce-orders-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Table row - border and transition */
.mk-table tbody tr,
.woocommerce table.shop_table tbody tr,
.woocommerce-account .woocommerce-MyAccount-content table tbody tr,
.woocommerce-checkout-review-order-table tbody tr,
.woocommerce-orders-table tbody tr {
  border-bottom: 1px solid hsl(var(--border)) !important;
  transition: color 150ms, background-color 150ms, border-color 150ms !important;
}

/* Row hover state - React exact value */
.mk-table tbody tr:hover,
.woocommerce table.shop_table tbody tr:hover,
.woocommerce-account .woocommerce-MyAccount-content table tbody tr:hover,
.woocommerce-checkout-review-order-table tbody tr:hover,
.woocommerce-orders-table tbody tr:hover {
  background: hsl(var(--muted) / 0.5) !important; /* hover:bg-muted/50 */
}

/* Table data cell - React exact values */
.mk-table td,
.woocommerce table.shop_table td,
.woocommerce-account .woocommerce-MyAccount-content table td,
.woocommerce-checkout-review-order-table td,
.woocommerce-orders-table td {
  padding: 1rem !important;                    /* p-4 */
  vertical-align: middle !important;           /* align-middle */
  border-bottom: 1px solid hsl(var(--border)) !important;
}

/* Table footer */
.mk-table tfoot,
.woocommerce table.shop_table tfoot {
  border-top: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--muted) / 0.5) !important;
  font-weight: 500 !important;
}

.mk-table tfoot tr:last-child,
.woocommerce table.shop_table tfoot tr:last-child {
  border-bottom: none !important;
}

/* Table caption */
.mk-table caption {
  margin-top: 1rem !important;
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* Bid history table overrides - remove non-React styling */
.mk-bid-history-table th,
.mk-bid-history__table th,
.mk-product-bid-history__table thead th {
  height: 3rem !important;                     /* h-12 */
  padding: 0 1rem !important;                  /* px-4 */
  text-transform: none !important;             /* Remove uppercase */
  letter-spacing: normal !important;           /* Remove letter-spacing */
  font-size: 0.875rem !important;              /* text-sm, not text-xs */
  font-weight: 500 !important;                 /* font-medium */
  color: hsl(var(--muted-foreground)) !important;
  background: transparent !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.mk-bid-history-table td,
.mk-bid-history__table td,
.mk-product-bid-history__table tbody td {
  padding: 1rem !important;                    /* p-4 */
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.mk-bid-history-table tbody tr:hover,
.mk-bid-history__table tbody tr:hover,
.mk-product-bid-history__table tbody tr:hover {
  background: hsl(var(--muted) / 0.5) !important; /* hover:bg-muted/50 */
}

.mk-bid-history-table tbody tr:last-child td,
.mk-bid-history__table tbody tr:last-child td,
.mk-product-bid-history__table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ==========================================================================
   END SECTION 137: TABLES — 1:1 REACT PARITY (P39)
   ========================================================================== */

/* ==========================================================================
   SECTION 138: SEPARATORS / DIVIDERS — 1:1 REACT PARITY (P40)
   React: src/components/ui/separator.tsx

   Key React values:
   - Horizontal: shrink-0 bg-border h-[1px] w-full
   - Vertical: shrink-0 bg-border h-full w-[1px]
   - Menu separators: -mx-1 my-1 h-px bg-muted
   - Context separators: -mx-1 my-1 h-px bg-border
   - --border: hsl(36 20% 82%)
   - --muted: hsl(36 20% 90%)
   ========================================================================== */

/* ------------------------------------------------------------------
   138.1: Base Separator Component
   React: shrink-0 bg-border h-[1px] w-full (horizontal)
   ------------------------------------------------------------------ */
.mk-separator,
hr.mk-separator,
[data-separator],
.wp-block-separator.mk-separator {
  flex-shrink: 0 !important;                      /* shrink-0 */
  background-color: hsl(var(--border)) !important; /* bg-border */
  border: none !important;
  height: 1px !important;                         /* h-[1px] */
  width: 100% !important;                         /* w-full */
  margin: 0 !important;
}

/* ------------------------------------------------------------------
   138.2: Vertical Separator
   React: shrink-0 bg-border h-full w-[1px]
   ------------------------------------------------------------------ */
.mk-separator--vertical,
.mk-separator-vertical,
[data-separator][data-orientation="vertical"] {
  height: 100% !important;                        /* h-full */
  width: 1px !important;                          /* w-[1px] */
}

/* ------------------------------------------------------------------
   138.3: Menu/Dropdown Separator
   React: -mx-1 my-1 h-px bg-muted (dropdown-menu.tsx, select.tsx, menubar.tsx)
   ------------------------------------------------------------------ */
.mk-menu-separator,
.mk-select-separator,
.mk-menubar-separator {
  margin: 0.25rem -0.25rem !important;            /* my-1 -mx-1 */
  height: 1px !important;                         /* h-px */
  background-color: hsl(var(--muted)) !important; /* bg-muted = hsl(36 20% 90%) */
  border: none !important;
  width: auto !important;
}

/* ------------------------------------------------------------------
   138.4: Context Menu Separator (uses border color)
   React: -mx-1 my-1 h-px bg-border (context-menu.tsx)
   ------------------------------------------------------------------ */
.mk-context-separator {
  margin: 0.25rem -0.25rem !important;
  height: 1px !important;
  background-color: hsl(var(--border)) !important; /* bg-border */
  border: none !important;
}

/* ------------------------------------------------------------------
   138.5: Sidebar Separator
   React: mx-2 w-auto bg-sidebar-border (sidebar.tsx)
   ------------------------------------------------------------------ */
.mk-sidebar-separator {
  margin-left: 0.5rem !important;                 /* mx-2 */
  margin-right: 0.5rem !important;
  width: auto !important;
  height: 1px !important;
  background-color: hsl(var(--sidebar-border, var(--border))) !important;
  border: none !important;
}

/* ------------------------------------------------------------------
   138.6: Border Utility Classes (Inline Separators)
   These match React's border-t/border-b Tailwind utilities
   ------------------------------------------------------------------ */
.mk-border-t {
  border-top: 1px solid hsl(var(--border)) !important;
}

.mk-border-b {
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.mk-border-l {
  border-left: 1px solid hsl(var(--border)) !important;
}

.mk-border-r {
  border-right: 1px solid hsl(var(--border)) !important;
}

/* Half-opacity variants (common in React: border-border/50) */
.mk-border-t-50 {
  border-top: 1px solid hsl(var(--border) / 0.5) !important;
}

.mk-border-b-50 {
  border-bottom: 1px solid hsl(var(--border) / 0.5) !important;
}

/* Footer-style separator (React: border-primary-foreground/20) */
.mk-border-t-primary-foreground-20,
.mk-footer-divider {
  border-top: 1px solid hsl(var(--primary-foreground) / 0.2) !important;
}

/* ------------------------------------------------------------------
   138.7: Card Section Divider (with spacing)
   React: border-t border-border pt-3 (ArtworkDetail price rows)
   ------------------------------------------------------------------ */
.mk-card-divider {
  border-top: 1px solid hsl(var(--border)) !important;
  padding-top: 0.75rem !important;                /* pt-3 */
  margin-top: 0.75rem !important;
}

/* ------------------------------------------------------------------
   138.8: Bid History Divider
   React: mt-6 pt-4 border-t border-border/50 (ArtworkDetail.tsx line 392)
   ------------------------------------------------------------------ */
.mk-bid-divider {
  border-top: 1px solid hsl(var(--border) / 0.5) !important;
  padding-top: 1rem !important;                   /* pt-4 */
  margin-top: 1.5rem !important;                  /* mt-6 */
}

/* ------------------------------------------------------------------
   138.9: Double Border (table headers, emphasis)
   ------------------------------------------------------------------ */
.mk-border-double {
  border-bottom: 2px solid hsl(var(--border)) !important;
}

/* ------------------------------------------------------------------
   138.10: WordPress Block Separator Override
   Ensure wp-block-separator follows our design system
   ------------------------------------------------------------------ */
.wp-block-separator:not(.is-style-dots):not(.is-style-wide) {
  border: none !important;
  background-color: hsl(var(--border)) !important;
  height: 1px !important;
  opacity: 1 !important;
}

.wp-block-separator.is-style-wide {
  border: none !important;
  background-color: hsl(var(--border)) !important;
  height: 1px !important;
  width: 100% !important;
  max-width: none !important;
}

/* Dotted separator style */
.wp-block-separator.is-style-dots::before {
  color: hsl(var(--border)) !important;
}

/* ==========================================================================
   END SECTION 138: SEPARATORS / DIVIDERS — 1:1 REACT PARITY (P40)
   ========================================================================== */

/* ==========================================================================
   SECTION 139: TOAST/NOTIFICATION STYLES — 1:1 REACT PARITY (P34)
   Source: src/components/ui/toast.tsx, src/components/ui/sonner.tsx
   Generated: P34 Parity Agent - 2026-03-23

   React Toast System (Radix + Sonner):
   - Position: fixed top-0 (mobile), sm:bottom-0 sm:right-0 (desktop)
   - Max-width: 420px on md+
   - Toast card: rounded-md border p-6 pr-8 shadow-lg
   - Variants: default, destructive (error), success, warning, info
   - Animation: slide-in-from-top (mobile), slide-in-from-bottom (desktop)
   - Close: slide-out-to-right with fade-out-80
   ========================================================================== */

/* ---------------------------------------------------------------------------
   139.1 TOAST VIEWPORT/CONTAINER
   React: fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4
          sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]
   --------------------------------------------------------------------------- */
.mk-toast-viewport,
[data-sonner-toaster] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column-reverse;
  max-height: 100vh;
  width: 100%;
  padding: 1rem;                            /* p-4 = 16px */
  pointer-events: none;
}

@media (min-width: 640px) {
  .mk-toast-viewport,
  [data-sonner-toaster] {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    flex-direction: column;
    max-width: 420px;                       /* md:max-w-[420px] */
  }
}

/* ---------------------------------------------------------------------------
   139.2 TOAST CARD BASE
   React: group pointer-events-auto relative flex w-full items-center
          justify-between space-x-4 overflow-hidden rounded-md border
          p-6 pr-8 shadow-lg transition-all
   --------------------------------------------------------------------------- */
.mk-toast,
[data-sonner-toast] {
  pointer-events: auto;
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;                                /* space-x-4 */
  overflow: hidden;
  border-radius: 0.125rem;                  /* FIX: rounded-md = 2px (CUSTOM config) */
  border-width: 1px;
  border-style: solid;
  padding: 1.5rem;                          /* p-6 = 24px */
  padding-right: 2rem;                      /* pr-8 = 32px (room for close button) */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
              0 4px 6px -4px rgb(0 0 0 / 0.1);  /* shadow-lg */
  transition: all 150ms ease;
  margin-bottom: 0.5rem;
}

/* Default variant */
.mk-toast,
.mk-toast--default,
[data-sonner-toast][data-type="default"],
[data-sonner-toast]:not([data-type]) {
  background-color: hsl(var(--background));     /* bg-background */
  color: hsl(var(--foreground));                /* text-foreground */
  border-color: hsl(var(--border));             /* border */
}

/* ---------------------------------------------------------------------------
   139.3 TOAST VARIANTS
   React: destructive = border-destructive bg-destructive text-destructive-foreground
   --------------------------------------------------------------------------- */

/* Destructive/Error variant */
.mk-toast--destructive,
.mk-toast--error,
[data-sonner-toast][data-type="error"] {
  background-color: hsl(var(--destructive));              /* destructive = 0 65% 50% */
  color: hsl(var(--destructive-foreground));              /* white */
  border-color: hsl(var(--destructive));
}

/* Success variant - using green-600 matching WooCommerce messages */
.mk-toast--success,
[data-sonner-toast][data-type="success"] {
  background-color: hsl(142 71% 45%);                     /* green-600 */
  color: white;
  border-color: hsl(142 71% 45%);
}

/* Warning variant - using gold/amber */
.mk-toast--warning,
[data-sonner-toast][data-type="warning"] {
  background-color: hsl(38 92% 50%);                      /* amber-500 */
  color: hsl(160 30% 18%);                                /* foreground (dark text) */
  border-color: hsl(38 92% 50%);
}

/* Info variant - using primary (forest green) */
.mk-toast--info,
[data-sonner-toast][data-type="info"] {
  background-color: hsl(var(--primary));                  /* primary = 160 30% 28% */
  color: hsl(var(--primary-foreground));                  /* cream */
  border-color: hsl(var(--primary));
}

/* ---------------------------------------------------------------------------
   139.4 TOAST TITLE & DESCRIPTION
   React: title = text-sm font-semibold
          description = text-sm opacity-90
   --------------------------------------------------------------------------- */
.mk-toast__title,
[data-sonner-toast] [data-title] {
  font-size: 0.875rem;                          /* text-sm = 14px */
  line-height: 1.25rem;
  font-weight: 600;                             /* font-semibold */
  font-family: var(--font-body);
}

.mk-toast__description,
[data-sonner-toast] [data-description] {
  font-size: 0.875rem;                          /* text-sm = 14px */
  line-height: 1.25rem;
  opacity: 0.9;                                 /* opacity-90 */
  font-family: var(--font-body);
}

.mk-toast__content {
  display: grid;
  gap: 0.25rem;                                 /* gap-1 = 4px */
}

/* ---------------------------------------------------------------------------
   139.5 TOAST CLOSE BUTTON
   React: absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0
          transition-opacity group-hover:opacity-100
          X icon h-4 w-4 (16x16)
   --------------------------------------------------------------------------- */
.mk-toast__close,
[data-sonner-toast] [data-close-button] {
  position: absolute;
  right: 0.5rem;                                /* right-2 = 8px */
  top: 0.5rem;                                  /* top-2 = 8px */
  padding: 0.25rem;                             /* p-1 = 4px */
  border-radius: 0.125rem;                      /* FIX: rounded-md = 2px (CUSTOM config) */
  color: hsl(var(--foreground) / 0.5);          /* text-foreground/50 */
  opacity: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 150ms ease, color 150ms ease;
}

.mk-toast__close svg,
[data-sonner-toast] [data-close-button] svg {
  width: 1rem;                                  /* h-4 = 16px */
  height: 1rem;                                 /* w-4 = 16px */
}

/* Show close button on hover */
.mk-toast:hover .mk-toast__close,
[data-sonner-toast]:hover [data-close-button] {
  opacity: 1;
}

.mk-toast__close:hover,
[data-sonner-toast] [data-close-button]:hover {
  color: hsl(var(--foreground));
}

/* Close button styling for destructive variant */
.mk-toast--destructive .mk-toast__close,
[data-sonner-toast][data-type="error"] [data-close-button] {
  color: hsl(0 0% 100% / 0.7);                  /* red-300 equivalent */
}

.mk-toast--destructive .mk-toast__close:hover,
[data-sonner-toast][data-type="error"] [data-close-button]:hover {
  color: hsl(0 0% 100%);                        /* red-50 equivalent */
}

/* Close button for success/warning/info - white with opacity */
.mk-toast--success .mk-toast__close,
.mk-toast--info .mk-toast__close,
[data-sonner-toast][data-type="success"] [data-close-button],
[data-sonner-toast][data-type="info"] [data-close-button] {
  color: hsl(0 0% 100% / 0.7);
}

.mk-toast--success .mk-toast__close:hover,
.mk-toast--info .mk-toast__close:hover,
[data-sonner-toast][data-type="success"] [data-close-button]:hover,
[data-sonner-toast][data-type="info"] [data-close-button]:hover {
  color: white;
}

.mk-toast--warning .mk-toast__close,
[data-sonner-toast][data-type="warning"] [data-close-button] {
  color: hsl(160 30% 18% / 0.5);                /* dark text with opacity */
}

.mk-toast--warning .mk-toast__close:hover,
[data-sonner-toast][data-type="warning"] [data-close-button]:hover {
  color: hsl(160 30% 18%);
}

/* ---------------------------------------------------------------------------
   139.6 TOAST ACTION BUTTON
   React: inline-flex h-8 shrink-0 items-center justify-center rounded-md
          border bg-transparent px-3 text-sm font-medium ring-offset-background
   --------------------------------------------------------------------------- */
.mk-toast__action,
[data-sonner-toast] [data-button] {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 2rem;                                 /* h-8 = 32px */
  padding: 0 0.75rem;                           /* px-3 = 12px */
  font-size: 0.875rem;                          /* text-sm */
  font-weight: 500;                             /* font-medium */
  font-family: var(--font-body);
  border-radius: 0.125rem;                      /* FIX: rounded-md = 2px (CUSTOM config) */
  border: 1px solid hsl(var(--border));
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.mk-toast__action:hover {
  background-color: hsl(var(--secondary));
}

/* Destructive variant action button */
.mk-toast--destructive .mk-toast__action {
  border-color: hsl(0 0% 100% / 0.4);           /* muted/40 equivalent */
  color: white;
}

.mk-toast--destructive .mk-toast__action:hover {
  border-color: hsl(var(--destructive) / 0.3);
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

/* ---------------------------------------------------------------------------
   139.7 TOAST ANIMATIONS
   React: data-[state=open]:animate-in data-[state=closed]:animate-out
          data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full
          data-[state=open]:slide-in-from-top-full
          data-[state=open]:sm:slide-in-from-bottom-full
   --------------------------------------------------------------------------- */
@keyframes mk-toast-slide-in-from-top {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mk-toast-slide-in-from-bottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mk-toast-slide-out-to-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0.8;                               /* fade-out-80 */
    transform: translateX(100%);
  }
}

@keyframes mk-toast-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Open state - mobile (slide from top) */
.mk-toast[data-state="open"],
[data-sonner-toast][data-visible="true"] {
  animation: mk-toast-slide-in-from-top 200ms ease-out;
}

/* Open state - desktop (slide from bottom) */
@media (min-width: 640px) {
  .mk-toast[data-state="open"],
  [data-sonner-toast][data-visible="true"] {
    animation: mk-toast-slide-in-from-bottom 200ms ease-out;
  }
}

/* Closed state - slide out to right */
.mk-toast[data-state="closed"],
[data-sonner-toast][data-visible="false"] {
  animation: mk-toast-slide-out-to-right 200ms ease-in forwards;
}

/* Swipe handling (Radix) */
.mk-toast[data-swipe="move"],
[data-sonner-toast][data-swiping="true"] {
  transition: none;
}

.mk-toast[data-swipe="cancel"] {
  transform: translateX(0);
}

/* ---------------------------------------------------------------------------
   139.8 WOOCOMMERCE NOTICE OVERRIDES — 1:1 TOAST PARITY
   Maps WooCommerce notices to match React toast styling
   --------------------------------------------------------------------------- */

/* WooCommerce Notice Base (all types) */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.wc-block-components-notice-banner,
.wc-block-store-notice {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1rem;                                    /* space-x-4 */
  overflow: hidden;
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */           /* rounded-md = 6px */
  border-width: 1px !important;
  border-style: solid !important;
  padding: 1.5rem !important;                   /* p-6 = 24px */
  padding-right: 2rem !important;               /* pr-8 */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
              0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;               /* text-sm */
  margin-bottom: 1rem !important;
  border-top: none !important;                  /* Remove WC default top border */
}

/* Success message - WooCommerce */
.woocommerce-notices-wrapper .woocommerce-message,
.wc-block-components-notice-banner.is-success {
  background-color: hsl(142 71% 45%) !important;
  color: white !important;
  border-color: hsl(142 71% 45%) !important;
}

.woocommerce-notices-wrapper .woocommerce-message::before,
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content::before {
  color: white !important;
}

.woocommerce-notices-wrapper .woocommerce-message a,
.wc-block-components-notice-banner.is-success a {
  color: white !important;
  text-decoration: underline;
}

.woocommerce-notices-wrapper .woocommerce-message a:hover,
.wc-block-components-notice-banner.is-success a:hover {
  opacity: 0.8;
}

/* Error message - WooCommerce */
.woocommerce-notices-wrapper .woocommerce-error,
.wc-block-components-notice-banner.is-error {
  background-color: hsl(var(--destructive)) !important;
  color: white !important;
  border-color: hsl(var(--destructive)) !important;
}

.woocommerce-notices-wrapper .woocommerce-error::before,
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content::before {
  color: white !important;
}

.woocommerce-notices-wrapper .woocommerce-error a,
.wc-block-components-notice-banner.is-error a {
  color: white !important;
  text-decoration: underline;
}

/* Info/Warning message - WooCommerce (using gold/amber) */
.woocommerce-notices-wrapper .woocommerce-info,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
  background-color: hsl(38 92% 50%) !important;
  color: hsl(160 30% 18%) !important;
  border-color: hsl(38 92% 50%) !important;
}

.woocommerce-notices-wrapper .woocommerce-info::before,
.wc-block-components-notice-banner.is-info .wc-block-components-notice-banner__content::before,
.wc-block-components-notice-banner.is-warning .wc-block-components-notice-banner__content::before {
  color: hsl(160 30% 18%) !important;
}

.woocommerce-notices-wrapper .woocommerce-info a,
.wc-block-components-notice-banner.is-info a,
.wc-block-components-notice-banner.is-warning a {
  color: hsl(160 30% 18%) !important;
  text-decoration: underline;
  font-weight: 500;
}

/* WooCommerce notice button styling */
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-error .button,
.woocommerce-notices-wrapper .woocommerce-info .button,
.wc-block-components-notice-banner .wc-block-components-button {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2rem !important;                      /* h-8 = 32px */
  padding: 0 0.75rem !important;                /* px-3 = 12px */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */           /* rounded-md */
  background: hsl(0 0% 100% / 0.2) !important;
  border: 1px solid hsl(0 0% 100% / 0.4) !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: background-color 150ms ease !important;
}

.woocommerce-notices-wrapper .woocommerce-message .button:hover,
.woocommerce-notices-wrapper .woocommerce-error .button:hover,
.wc-block-components-notice-banner.is-success .wc-block-components-button:hover,
.wc-block-components-notice-banner.is-error .wc-block-components-button:hover {
  background: hsl(0 0% 100% / 0.3) !important;
}

.woocommerce-notices-wrapper .woocommerce-info .button,
.wc-block-components-notice-banner.is-info .wc-block-components-button,
.wc-block-components-notice-banner.is-warning .wc-block-components-button {
  background: hsl(160 30% 18% / 0.1) !important;
  border: 1px solid hsl(160 30% 18% / 0.3) !important;
}

.woocommerce-notices-wrapper .woocommerce-info .button:hover,
.wc-block-components-notice-banner.is-info .wc-block-components-button:hover,
.wc-block-components-notice-banner.is-warning .wc-block-components-button:hover {
  background: hsl(160 30% 18% / 0.2) !important;
}

/* WooCommerce Block notices - additional overrides */
.wc-block-components-notice-banner__content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.wc-block-components-notice-banner__dismiss {
  position: absolute !important;
  right: 0.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 0.25rem !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  transition: opacity 150ms ease !important;
}

.wc-block-components-notice-banner__dismiss:hover {
  opacity: 1 !important;
}

.wc-block-components-notice-banner__dismiss svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* ---------------------------------------------------------------------------
   139.9 CART/CHECKOUT SPECIFIC NOTICES
   Additional styling for cart and checkout page notices
   --------------------------------------------------------------------------- */

/* Cart coupon applied message */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message {
  max-width: none !important;
}

/* Mini-cart add to cart notice */
.wc-block-mini-cart__drawer .wc-block-components-notice-banner {
  margin: 0.5rem !important;
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */
}

/* Checkout validation errors */
.woocommerce-checkout .woocommerce-error li {
  list-style: none !important;
  margin-bottom: 0.25rem !important;
}

.woocommerce-checkout .woocommerce-error li:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   END SECTION 139: TOAST/NOTIFICATION STYLES — 1:1 REACT PARITY (P34)
   ========================================================================== */

/* ==========================================================================
   SECTION 140: FOCUS STATES ACCESSIBILITY — 1:1 REACT PARITY (P43)
   Agent: P43
   Source: All src/components/ui/(all).tsx files with focus-visible classes
   Generated: 2026-03-23

   React Focus Pattern (ShadCN/Radix):
   - focus-visible:outline-none focus-visible:ring-2
   - focus-visible:ring-ring focus-visible:ring-offset-2
   = box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring))

   Key Values:
   - --ring: 160 30% 28% (primary/forest green)
   - --background: 36 33% 94% (cream - used for offset)
   - ring-2 = 2px solid ring
   - ring-offset-2 = 2px cream gap between element and ring
   ========================================================================== */

/* ------------------------------------------------------------------
   140.1: Top-Level Navigation Focus-Visible (CRITICAL GAP FIX)
   React: DropdownMenuTrigger inherits button focus pattern
   WordPress: Navigation items need explicit focus-visible
   ------------------------------------------------------------------ */
.mk-header .wp-block-navigation-item__content:focus-visible,
.site-header .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation-item__content:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
  border-radius: 0.25rem !important;
}

/* ------------------------------------------------------------------
   140.2: Navigation Trigger (dropdown toggle) Focus
   React: flex items-center gap-1 text-sm font-medium
          focus-visible:outline-none focus-visible:ring-2
   ------------------------------------------------------------------ */
.mk-header .wp-block-navigation-item.has-child > .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__submenu-icon:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* ------------------------------------------------------------------
   140.3: Header Search Input Focus (React uses ring-1)
   React: focus-visible:ring-1 focus-visible:ring-primary (SearchBar.tsx)
   Note: ring-1 = 1px, smaller than standard ring-2 for subtlety
   ------------------------------------------------------------------ */
.mk-header__search input:focus-visible,
.mk-header .wp-block-search__input:focus-visible,
.site-header .wp-block-search__input:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px hsl(var(--primary)) !important;
}

/* ------------------------------------------------------------------
   140.4: Cart Icon Button Focus
   React: Button variant="ghost" size="icon"
          focus-visible:ring-2 focus-visible:ring-ring
   ------------------------------------------------------------------ */
.mk-header__cart-btn:focus-visible,
.wc-block-mini-cart__button:focus-visible,
.mk-cart-trigger:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
  border-radius: 0.25rem !important;
}

/* ------------------------------------------------------------------
   140.5: User/Account Icon Button Focus
   React: Button variant="ghost" size="icon"
   ------------------------------------------------------------------ */
.mk-header__account-btn:focus-visible,
.mk-header__user-btn:focus-visible,
.mk-user-menu-trigger:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
  border-radius: 0.25rem !important;
}

/* ------------------------------------------------------------------
   140.6: Mobile Menu Hamburger Focus
   React: Button variant="ghost" size="icon" className="lg:hidden"
   ------------------------------------------------------------------ */
.mk-header__nav .wp-block-navigation__responsive-container-open:focus-visible,
.mk-mobile-menu-trigger:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
  border-radius: 0.25rem !important;
}

/* ------------------------------------------------------------------
   140.7: Mobile Menu Close Button Focus
   React: Button variant="ghost" size="icon"
   ------------------------------------------------------------------ */
.wp-block-navigation__responsive-container-close:focus-visible,
.mk-mobile-menu-close:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
  border-radius: 0.25rem !important;
}

/* ------------------------------------------------------------------
   140.8: Badge Focus (for interactive badges)
   React: focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
   ------------------------------------------------------------------ */
.mk-badge:focus-visible,
a.mk-badge:focus-visible,
button.mk-badge:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* ------------------------------------------------------------------
   140.9: Card Link Focus (entire card clickable)
   React: Cards with Link wrapper get focus on the link
   ------------------------------------------------------------------ */
.mk-card > a:focus-visible,
.mk-artwork-card > a:focus-visible,
.mk-gallery-card > a:focus-visible,
.wc-block-product-template a.wc-block-components-product-image:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
  border-radius: var(--radius) !important;
}

/* ------------------------------------------------------------------
   140.10: Accordion/Collapsible Trigger Focus
   React: AccordionTrigger with focus-visible:ring-2
   ------------------------------------------------------------------ */
.mk-accordion__trigger:focus-visible,
.mk-collapsible__trigger:focus-visible,
.wp-block-details summary:focus-visible,
.mk-faq-question:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* ------------------------------------------------------------------
   140.11: Dialog/Modal Close Button Focus
   React: DialogPrimitive.Close with focus:ring-2 focus:ring-ring focus:ring-offset-2
   ------------------------------------------------------------------ */
.mk-dialog__close:focus-visible,
.mk-modal__close:focus-visible,
.wc-block-components-drawer__close:focus-visible,
[role="dialog"] button[aria-label="Close"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* ------------------------------------------------------------------
   140.12: Sheet/Drawer Close Button Focus
   React: SheetPrimitive.Close focus:ring-2 focus:ring-ring focus:ring-offset-2
   ------------------------------------------------------------------ */
.mk-sheet__close:focus-visible,
.mk-drawer__close:focus-visible,
.mk-cart-drawer__close:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* ------------------------------------------------------------------
   140.13: Popover Trigger Focus
   React: focus:ring-2 pattern on popover triggers
   ------------------------------------------------------------------ */
.mk-popover__trigger:focus-visible,
[aria-haspopup="dialog"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* ------------------------------------------------------------------
   140.14: Bid Quick Buttons Focus
   React: Button with various size variants
   ------------------------------------------------------------------ */
.mk-bid-quick-btn:focus-visible,
.mk-quick-bid-button:focus-visible,
.mk-auction-bid-form button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* ------------------------------------------------------------------
   140.15: Gift Voucher Amount Button Focus
   React: Button variant changes based on selection
   ------------------------------------------------------------------ */
.mk-voucher-amount-btn:focus-visible,
.mk-gift-voucher__amount-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* ------------------------------------------------------------------
   140.16: Social Link Icons Focus
   React: Typically Button ghost variant with icon
   ------------------------------------------------------------------ */
.mk-social-link:focus-visible,
.mk-footer__social-link:focus-visible,
a[href*="facebook"]:focus-visible,
a[href*="instagram"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
  border-radius: 50% !important;
}

/* ------------------------------------------------------------------
   140.17: Breadcrumb Links Focus
   React: text-sm text-muted-foreground with hover:text-foreground
   ------------------------------------------------------------------ */
.mk-breadcrumb__link:focus-visible,
.woocommerce-breadcrumb a:focus-visible,
.yoast-breadcrumb a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
  border-radius: 0.125rem !important;
}

/* ------------------------------------------------------------------
   140.18: Product Quick View / Details Button Focus
   ------------------------------------------------------------------ */
.mk-quick-view-btn:focus-visible,
.mk-details-btn:focus-visible,
.mk-product-actions button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* ------------------------------------------------------------------
   140.19: Footer Navigation Links Focus
   ------------------------------------------------------------------ */
.mk-footer a:focus-visible,
.site-footer a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--primary)), 0 0 0 4px hsl(var(--gold)) !important;
  border-radius: 0.125rem !important;
}

/* ------------------------------------------------------------------
   140.20: Reduced Motion - Disable focus transition
   React: Respects prefers-reduced-motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *:focus-visible {
    transition: none !important;
  }
}

/* ------------------------------------------------------------------
   140.21: High Contrast Mode Focus Enhancement
   Increase visibility for users with high contrast settings
   ------------------------------------------------------------------ */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   END SECTION 140: FOCUS STATES ACCESSIBILITY — 1:1 REACT PARITY (P43)
   ========================================================================== */


/* ==========================================================================
   SECTION 141: FORM VALIDATION STATES — 1:1 REACT PARITY (P54)
   Agent P54 Implementation - 2026-03-23

   Source: src/components/ui/form.tsx (FormControl, FormLabel, FormMessage, FormDescription)
   Reference: docs/PARITY-AGENT-LOGS/P54-FORM-VALIDATION.md

   CRITICAL VALUES:
   - Destructive color: hsl(0 65% 50%) = #D42A2A (red)
   - Error message: text-sm (14px), font-medium (500)
   - Success color: hsl(142 76% 36%) = green
   - Muted-foreground: hsl(160 15% 40%) for descriptions
   - Focus ring on error: 2px offset + 2px destructive ring
   ========================================================================== */

/* ---------------------------------------------------------------------------
   141.1 aria-invalid ATTRIBUTE SELECTOR — React FormControl Pattern
   React uses aria-invalid="true" on FormControl wrapped inputs
   Source: form.tsx line 94 - aria-invalid={!!error}
   --------------------------------------------------------------------------- */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
.wpcf7-form input[aria-invalid="true"],
.wpcf7-form textarea[aria-invalid="true"],
.woocommerce-form input[aria-invalid="true"],
.woocommerce-form textarea[aria-invalid="true"],
.woocommerce-checkout input[aria-invalid="true"],
.woocommerce-checkout textarea[aria-invalid="true"] {
  border-color: hsl(0 65% 50%) !important; /* destructive */
}

input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
.wpcf7-form input[aria-invalid="true"]:focus,
.wpcf7-form textarea[aria-invalid="true"]:focus,
.woocommerce-form input[aria-invalid="true"]:focus,
.woocommerce-form textarea[aria-invalid="true"]:focus,
.woocommerce-checkout input[aria-invalid="true"]:focus,
.woocommerce-checkout textarea[aria-invalid="true"]:focus {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px hsl(36 33% 94%),
              0 0 0 4px hsl(0 65% 50%) !important; /* destructive ring */
}

/* ---------------------------------------------------------------------------
   141.2 WooCommerce Block Text Input Validation
   WC Blocks use .has-error class on .wc-block-components-text-input wrapper
   --------------------------------------------------------------------------- */
.wc-block-components-text-input.has-error input,
.wc-block-components-text-input.has-error textarea,
.wc-block-components-textarea.has-error textarea {
  border-color: hsl(0 65% 50%) !important; /* destructive */
}

.wc-block-components-text-input.has-error input:focus,
.wc-block-components-text-input.has-error textarea:focus,
.wc-block-components-textarea.has-error textarea:focus {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px hsl(36 33% 94%),
              0 0 0 4px hsl(0 65% 50%) !important; /* destructive ring */
}

/* WC Block validation error message */
.wc-block-components-validation-error,
.wc-block-components-text-input .wc-block-components-validation-error,
.wc-block-components-textarea .wc-block-components-validation-error,
.wc-block-checkout__form .wc-block-components-validation-error {
  color: hsl(0 65% 50%) !important;         /* destructive */
  font-size: 0.875rem !important;           /* text-sm = 14px (React FormMessage) */
  font-weight: 500 !important;              /* font-medium */
  font-family: var(--font-body) !important;
  margin-top: 0.25rem !important;
  display: block !important;
}

/* ---------------------------------------------------------------------------
   141.3 WooCommerce Validated (Success) State
   .woocommerce-validated class added on successful field validation
   --------------------------------------------------------------------------- */
.woocommerce-form .woocommerce-validated input,
.woocommerce-checkout .woocommerce-validated input,
.woocommerce-form .woocommerce-validated textarea,
.woocommerce-checkout .woocommerce-validated textarea {
  border-color: hsl(142 76% 36%) !important; /* green-600 / success */
}

/* Success focus ring */
.woocommerce-form .woocommerce-validated input:focus,
.woocommerce-checkout .woocommerce-validated input:focus {
  box-shadow: 0 0 0 2px hsl(36 33% 94%),
              0 0 0 4px hsl(142 76% 36%) !important; /* green ring */
}

/* ---------------------------------------------------------------------------
   141.4 Form Description / Help Text — React FormDescription
   Source: form.tsx line 106 - "text-sm text-muted-foreground"
   --------------------------------------------------------------------------- */
.mk-form-description,
.wpcf7-form p.description,
.wpcf7-form .wpcf7-form-control-wrap + p.help-text,
.woocommerce-form p.description,
.woocommerce-form .description:not(.woocommerce-product-details__short-description),
.woocommerce-checkout p.description,
.wc-block-components-text-input .wc-block-components-text-input__label-text--subtitle {
  font-size: 0.875rem !important;           /* text-sm = 14px */
  color: hsl(160 15% 40%) !important;       /* muted-foreground */
  font-family: var(--font-body) !important;
  margin-top: 0.25rem !important;
  line-height: 1.5 !important;
}

/* ---------------------------------------------------------------------------
   141.5 Form Label Error State — React FormLabel
   Source: form.tsx line 81 - cn(error && "text-destructive", className)
   --------------------------------------------------------------------------- */
label.has-error,
label[data-error="true"],
.wpcf7-form label.has-error,
.woocommerce-form .woocommerce-invalid label,
.woocommerce-checkout .woocommerce-invalid label,
.wc-block-components-text-input.has-error label {
  color: hsl(0 65% 50%) !important; /* text-destructive */
}

/* ---------------------------------------------------------------------------
   141.6 Required Field Asterisk
   Ensure required indicators use destructive color consistently
   --------------------------------------------------------------------------- */
.mk-required,
label .required,
.woocommerce-form label .required,
.woocommerce-checkout label .required {
  color: hsl(0 65% 50%) !important; /* destructive */
}

/* WC Block required asterisk (uses ::after) */
.wc-block-components-text-input--is-required .wc-block-components-text-input__label::after {
  content: " *" !important;
  color: hsl(0 65% 50%) !important;
}

/* ---------------------------------------------------------------------------
   141.7 Input Error Utility Classes
   Utility classes for custom implementations
   --------------------------------------------------------------------------- */
.mk-input--error,
.mk-textarea--error,
.mk-select--error,
input.is-error,
textarea.is-error,
select.is-error {
  border-color: hsl(0 65% 50%) !important;
}

.mk-input--error:focus,
.mk-textarea--error:focus,
.mk-select--error:focus,
input.is-error:focus,
textarea.is-error:focus,
select.is-error:focus {
  box-shadow: 0 0 0 2px hsl(36 33% 94%),
              0 0 0 4px hsl(0 65% 50%) !important;
}

/* Success utility classes */
.mk-input--success,
.mk-textarea--success,
input.is-valid,
textarea.is-valid {
  border-color: hsl(142 76% 36%) !important;
}

.mk-input--success:focus,
.mk-textarea--success:focus,
input.is-valid:focus,
textarea.is-valid:focus {
  box-shadow: 0 0 0 2px hsl(36 33% 94%),
              0 0 0 4px hsl(142 76% 36%) !important;
}

/* ==========================================================================
   END SECTION 141: FORM VALIDATION STATES — 1:1 REACT PARITY (P54)
   ========================================================================== */

/* ==========================================================================
   142. COMPREHENSIVE PRINT STYLES — P58 PARITY AGENT
   ========================================================================== */

@media print {
  /* ------------------------------------------------------------------
     142.1: Base Print Reset
     ------------------------------------------------------------------ */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt !important;
    line-height: 1.5 !important;
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ------------------------------------------------------------------
     142.2: Hide Non-Printable Elements — Navigation & Chrome
     ------------------------------------------------------------------ */
  .mk-header,
  .mk-footer,
  .mk-cart-drawer,
  .mk-cart-drawer__overlay,
  .mk-header__mobile-menu,
  .wp-block-navigation,
  .wc-block-mini-cart,
  nav,
  .site-header,
  .site-footer,
  header,
  footer {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     142.3: Hide Interactive Elements — Buttons
     ------------------------------------------------------------------ */
  .mk-btn,
  .mk-btn-catalog,
  .mk-btn-gold,
  .mk-btn-elegant,
  button:not(.print-visible),
  input[type="submit"],
  .woocommerce-loop-product__link .add_to_cart_button,
  .single_add_to_cart_button,
  .wc-block-grid__product-add-to-cart,
  .add-to-cart-button,
  a.button,
  a.wp-block-button__link,
  .wp-block-button {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     142.4: Hide Forms & Filters
     ------------------------------------------------------------------ */
  .mk-bid-form,
  .mk-bid-form__quick-bids,
  .auction-form,
  .bid-form,
  .wpcf7,
  .contact-form,
  form:not(.print-visible),
  .mk-quick-filters,
  .mk-view-toggle,
  .mk-catalog-toolbar,
  .woocommerce-ordering,
  .woocommerce-result-count,
  .mk-filter-sidebar,
  .mk-sidebar,
  .mk-price-range-filter,
  .mk-category-filters {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     142.5: Hide Timers & Dynamic Content
     ------------------------------------------------------------------ */
  .mk-timer,
  .mk-auction-timer,
  .auction-time-left,
  .countdown,
  .mk-badge--ending,
  .mk-badge--active,
  [data-countdown] {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     142.6: Hide Overlays, Modals & Social
     ------------------------------------------------------------------ */
  .mk-cart-drawer,
  .mk-modal,
  .wp-block-navigation__responsive-container,
  .popup,
  .overlay,
  [role="dialog"],
  .mk-newsletter,
  .newsletter-section,
  .social-links,
  .share-buttons {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     142.7: Typography for Print
     ------------------------------------------------------------------ */
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
    page-break-after: avoid;
    page-break-inside: avoid;
    orphans: 3;
    widows: 3;
  }

  h1 { font-size: 24pt !important; margin-bottom: 12pt !important; }
  h2 { font-size: 18pt !important; margin-bottom: 10pt !important; }
  h3 { font-size: 14pt !important; margin-bottom: 8pt !important; }

  p, li, td, th {
    orphans: 3;
    widows: 3;
  }

  /* ------------------------------------------------------------------
     142.8: Links — Show URLs for External Links
     ------------------------------------------------------------------ */
  a,
  a:visited {
    color: #000 !important;
    text-decoration: underline;
  }

  /* Show URL after external links */
  a[href^="http"]:not(.no-print-url)::after,
  a[href^="https"]:not(.no-print-url)::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666 !important;
    word-break: break-all;
  }

  /* Don't show URL for images, buttons, or product links */
  a[href^="http"] img::after,
  a.button::after,
  a.wp-block-button__link::after,
  .woocommerce-loop-product__link::after,
  .wc-block-grid__product-link::after {
    content: none !important;
  }

  /* ------------------------------------------------------------------
     142.9: Images
     ------------------------------------------------------------------ */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .woocommerce-product-gallery img,
  .mk-artwork-image img,
  .product-image img {
    max-height: 400pt;
    width: auto;
  }

  /* Remove image hover effects */
  .mk-img-zoom img {
    transform: none !important;
  }

  /* ------------------------------------------------------------------
     142.10: Page Break Controls
     ------------------------------------------------------------------ */
  .mk-card,
  .mk-artwork-card,
  .mk-gallery-card,
  .wc-block-grid__product,
  .product,
  article,
  .mk-step-card,
  .mk-feature-card,
  tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Force page break before major sections */
  .mk-section,
  .woocommerce-order-details,
  .woocommerce-customer-details {
    page-break-before: auto;
  }

  /* Avoid orphaned headings */
  h1, h2, h3 {
    page-break-after: avoid;
  }

  /* ------------------------------------------------------------------
     142.11: Product/Artwork Detail Print Layout
     ------------------------------------------------------------------ */
  .single-product .woocommerce-product-gallery,
  .mk-artwork-detail__image {
    width: 40% !important;
    float: left;
    margin-right: 24pt;
    margin-bottom: 12pt;
  }

  .single-product .summary,
  .mk-artwork-detail__info {
    width: 55% !important;
    float: right;
  }

  /* Artwork metadata — ensure visible */
  .mk-info-box,
  .mk-artwork-meta,
  .product_meta,
  .woocommerce-product-details__short-description {
    display: block !important;
    color: #000 !important;
    border: 1pt solid #ccc;
    padding: 8pt;
    margin-bottom: 12pt;
  }

  /* Price display */
  .mk-pricing-card,
  .price,
  .woocommerce-Price-amount {
    font-size: 14pt !important;
    font-weight: bold !important;
    color: #000 !important;
  }

  /* Artist info */
  .mk-artist-name,
  .artist-info {
    font-style: italic;
    margin-bottom: 6pt;
  }

  /* Lot number */
  .mk-lot-number,
  .lot-number {
    font-size: 10pt !important;
    color: #666 !important;
  }

  /* Clear floats */
  .single-product .woocommerce::after {
    content: "";
    display: table;
    clear: both;
  }

  /* ------------------------------------------------------------------
     142.12: Order/Invoice Print Styling
     ------------------------------------------------------------------ */
  .woocommerce-order-received,
  .woocommerce-view-order {
    padding: 0 !important;
  }

  /* Order header */
  .woocommerce-order h2,
  .woocommerce-order-details h2 {
    border-bottom: 2pt solid #000;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
  }

  /* Order details table */
  .woocommerce-table--order-details,
  .woocommerce-orders-table,
  .shop_table {
    width: 100% !important;
    border-collapse: collapse;
    margin-bottom: 24pt;
  }

  .woocommerce-table--order-details th,
  .woocommerce-table--order-details td,
  .shop_table th,
  .shop_table td {
    border: 1pt solid #ccc !important;
    padding: 8pt !important;
    text-align: left;
    color: #000 !important;
  }

  .woocommerce-table--order-details thead,
  .shop_table thead {
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Order totals */
  .woocommerce-table--order-details tfoot,
  .order-total {
    font-weight: bold !important;
  }

  /* Customer details */
  .woocommerce-customer-details address {
    border: 1pt solid #ccc;
    padding: 12pt;
    margin-bottom: 12pt;
  }

  /* ------------------------------------------------------------------
     142.13: Contact Information Print
     ------------------------------------------------------------------ */
  .mk-contact-info,
  .contact-info {
    border: 1pt solid #ccc;
    padding: 12pt;
    margin-bottom: 12pt;
  }

  .mk-contact-icon,
  .contact-icon {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     142.14: Auction Results Print
     ------------------------------------------------------------------ */
  .mk-past-auction-result,
  .auction-results {
    border: 1pt solid #ccc;
    padding: 12pt;
    margin-bottom: 12pt;
    page-break-inside: avoid;
  }

  .mk-sold-badge,
  .mk-badge--sold {
    display: inline-block !important;
    border: 1pt solid #000;
    padding: 2pt 6pt;
    font-size: 9pt !important;
    color: #000 !important;
    background: transparent !important;
  }

  /* Final price emphasis */
  .mk-final-price,
  .winning-bid {
    font-size: 14pt !important;
    font-weight: bold !important;
    border-bottom: 1pt solid #000;
  }

  /* ------------------------------------------------------------------
     142.15: Tables General
     ------------------------------------------------------------------ */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1pt solid #ccc;
    padding: 6pt;
  }

  thead {
    display: table-header-group;
  }

  tr {
    page-break-inside: avoid;
  }

  /* ------------------------------------------------------------------
     142.16: Cards & Containers
     ------------------------------------------------------------------ */
  .mk-card,
  .mk-artwork-card,
  .mk-gallery-card,
  .wc-block-grid__product {
    border: 1pt solid #ccc !important;
    padding: 8pt !important;
    margin-bottom: 12pt !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* ------------------------------------------------------------------
     142.17: Layout Adjustments
     ------------------------------------------------------------------ */
  .wp-block-columns {
    display: block !important;
  }

  .wp-block-column {
    width: 100% !important;
    margin-bottom: 12pt;
  }

  /* Content should be full width */
  .site-content,
  .entry-content,
  main,
  article {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ------------------------------------------------------------------
     142.18: Print Header — Site Identity
     ------------------------------------------------------------------ */
  body::before {
    content: "Meno Kodas Galerija | tvs.menoatranka.lt | +370 656 89000";
    display: block !important;
    text-align: center;
    font-size: 10pt !important;
    color: #666 !important;
    border-bottom: 1pt solid #ccc;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
  }

  /* ------------------------------------------------------------------
     142.19: Page Settings
     ------------------------------------------------------------------ */
  @page {
    margin: 2cm;
    size: A4;
  }

  @page :first {
    margin-top: 1cm;
  }

  /* ------------------------------------------------------------------
     142.20: Utility Classes for Print Control
     ------------------------------------------------------------------ */
  .print-only {
    display: block !important;
  }

  .no-print,
  .screen-only {
    display: none !important;
  }

  .print-visible {
    display: block !important;
  }

  .print-break-before {
    page-break-before: always;
  }

  .print-break-after {
    page-break-after: always;
  }

  .print-no-break {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ==========================================================================
   END SECTION 142: COMPREHENSIVE PRINT STYLES — P58 PARITY AGENT
   ========================================================================== */

/* ==========================================================================
   SECTION 143: LIST VIEW TIMER POSITIONING — FIX-AGENT-3 (P8-H1)

   React Source: src/components/auction/ArtworkCard.tsx

   ISSUE: In list view (horizontal variant), timer should be in body area
          below title, NOT as image overlay like grid view.

   React Reference (lines 102-111):
   - List view: Timer is INSIDE content area (<div className="p-5 flex-1...">)
   - Wrapped in: <div className="mt-2"> with variant="compact"
   - Grid view: Timer is absolute positioned over image with variant="minimal"

   EXACT VALUES:
   - position: static (not absolute)
   - margin-top: 0.5rem (mt-2 = 8px)
   - no gradient background (that's only for image overlay)
   - variant="compact" styling
   ========================================================================== */

/* ------------------------------------------------------------------
   143.1: List View Timer - Remove Absolute Positioning
   In list view, timer moves from image overlay to content body
   ------------------------------------------------------------------ */
.mk-catalog--list .mk-card-timer,
.mk-catalog-list .mk-card-timer,
.mk-view-list .mk-card-timer,
.mk-artwork-card--horizontal .mk-card-timer,
.mk-catalog--list .auction-time-left,
.mk-catalog-list .auction-time-left,
.mk-view-list .auction-time-left,
.mk-artwork-card--horizontal .auction-time-left {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin-top: 0.5rem !important;  /* mt-2 = 8px */
  padding: 0 !important;
  background: transparent !important;
  background: none !important;
  z-index: auto !important;
}

/* ------------------------------------------------------------------
   143.2: List View Timer - Compact Variant Styling
   React AuctionTimer variant="compact" inline display
   ------------------------------------------------------------------ */
.mk-catalog--list .mk-card-timer .auction-time-countdown,
.mk-catalog-list .mk-card-timer .auction-time-countdown,
.mk-view-list .mk-card-timer .auction-time-countdown,
.mk-artwork-card--horizontal .mk-card-timer .auction-time-countdown {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  font-size: 0.75rem !important;  /* text-xs = 12px */
  font-weight: 500 !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* ------------------------------------------------------------------
   143.3: List View Timer - State Colors (No Gradient Background)
   In list view, state is shown via text color only, not bg gradient
   ------------------------------------------------------------------ */
/* Active state - primary text */
.mk-catalog--list .mk-card-timer .mk-timer-active,
.mk-catalog-list .mk-card-timer .mk-timer-active,
.mk-view-list .mk-card-timer .mk-timer-active,
.mk-artwork-card--horizontal .mk-card-timer .mk-timer-active {
  color: hsl(var(--primary)) !important;
}

/* Ending state - destructive/red text with pulse */
.mk-catalog--list .mk-card-timer .mk-timer-ending,
.mk-catalog-list .mk-card-timer .mk-timer-ending,
.mk-view-list .mk-card-timer .mk-timer-ending,
.mk-artwork-card--horizontal .mk-card-timer .mk-timer-ending {
  color: hsl(0 65% 50%) !important;  /* destructive red */
  animation: mk-pulse 1.5s ease-in-out infinite !important;
}

/* Upcoming state - gold text */
.mk-catalog--list .mk-card-timer .mk-timer-upcoming,
.mk-catalog-list .mk-card-timer .mk-timer-upcoming,
.mk-view-list .mk-card-timer .mk-timer-upcoming,
.mk-artwork-card--horizontal .mk-card-timer .mk-timer-upcoming {
  color: hsl(var(--gold)) !important;
}

/* ------------------------------------------------------------------
   143.4: List View Timer - Ensure No Gradient Background Override
   Some earlier rules may add gradient - force transparent
   ------------------------------------------------------------------ */
.mk-catalog--list .mk-card-timer:has(.mk-timer-active),
.mk-catalog--list .mk-card-timer:has(.mk-timer-ending),
.mk-catalog--list .mk-card-timer:has(.mk-timer-upcoming),
.mk-catalog-list .mk-card-timer:has(.mk-timer-active),
.mk-catalog-list .mk-card-timer:has(.mk-timer-ending),
.mk-catalog-list .mk-card-timer:has(.mk-timer-upcoming),
.mk-view-list .mk-card-timer:has(.mk-timer-active),
.mk-view-list .mk-card-timer:has(.mk-timer-ending),
.mk-view-list .mk-card-timer:has(.mk-timer-upcoming),
.mk-artwork-card--horizontal .mk-card-timer:has(.mk-timer-active),
.mk-artwork-card--horizontal .mk-card-timer:has(.mk-timer-ending),
.mk-artwork-card--horizontal .mk-card-timer:has(.mk-timer-upcoming) {
  background: transparent !important;
  background: none !important;
}

/* ==========================================================================
   END SECTION 143: LIST VIEW TIMER POSITIONING — FIX-AGENT-3
   ========================================================================== */

/* ==========================================================================
   SECTION 144: POST-AUCTION PAGE PARITY FIXES (FIX-AGENT-6)
   2026-03-23

   React source: src/pages/PostAuction.tsx

   CRITICAL: Audit PA12 values were WRONG - they assumed standard Tailwind
   but this project uses CUSTOM border-radius config:
   - rounded-lg = var(--radius) = 0.25rem (4px), NOT 0.5rem (8px)
   - rounded-md = calc(var(--radius) - 2px) = 0.125rem (2px)
   - rounded-sm = calc(var(--radius) - 4px) = ~0px

   Correct values from React:
   - Banner: rounded-lg = 4px, bg-amber-500/10, border-amber-500/20
   - Filter row: rounded-lg = 4px, bg-muted/30
   ========================================================================== */

/* PA12-H1/H3: Banner - correct border-radius and colors */
.page-id-93 .mk-post-auction-banner,
.mk-poaukcionine-banner,
.mk-post-auction-banner {
  border-radius: 0.25rem !important;           /* rounded-lg = var(--radius) = 4px */
  background-color: hsl(38 92% 50% / 0.1) !important;  /* bg-amber-500/10 */
  border: 1px solid hsl(38 92% 50% / 0.2) !important;  /* border-amber-500/20 */
  border-left-width: 1px !important;           /* Remove 4px left border from Section 97 */
}

/* PA12-H2: Filter row - correct border-radius */
.page-id-93 .mk-poaukcionine-filters,
.mk-poaukcionine-filters,
.mk-post-auction-filters {
  border-radius: 0.25rem !important;           /* rounded-lg = var(--radius) = 4px */
  background-color: hsl(var(--muted) / 0.3) !important;  /* bg-muted/30 */
}

/* ==========================================================================
   END SECTION 144: POST-AUCTION PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   145. CATALOG TOOLBAR PARITY — FIX-AGENT-2 (2026-03-23)
   Fixes: P7-H1 (no border-bottom), P7-H2 (h-9 buttons), P7-M1 (ghost hover bg)
   React: Catalog.tsx lines 247-296, button.tsx size="sm" variant="ghost"
   ========================================================================== */

/* P7-H1: Remove border-bottom from toolbar (React has none) */
.mk-catalog-toolbar,
.mk-toolbar {
  border-bottom: none !important;
}

/* P7-H2 + P7-M1: View toggle buttons — exact React parity */
/* Container: rounded-lg = 0.25rem (4px) per custom Tailwind config */
/* Buttons: rounded-none = 0 (no border-radius on individual buttons) */
.mk-view-toggle {
  display: flex !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.25rem !important; /* rounded-lg = 4px (NOT 8px standard) */
  overflow: hidden;
}

.mk-view-toggle button,
.mk-view-toggle a {
  /* h-9 w-9 for icon-only buttons (size="sm" with icon) */
  height: 2.25rem !important; /* 36px */
  width: 2.25rem !important; /* 36px */
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent;
  color: hsl(var(--muted-foreground));
  transition: background-color 200ms, color 200ms;
}

/* P7-M1: Ghost hover uses bg-accent, not border-color */
.mk-view-toggle button:hover,
.mk-view-toggle a:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
  border-color: transparent !important;
}

/* Active state — variant="default" */
.mk-view-toggle button.mk-view-toggle--active,
.mk-view-toggle a.mk-view-toggle--active,
.mk-view-toggle button[aria-pressed="true"],
.mk-view-toggle a[aria-pressed="true"] {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.mk-view-toggle button.mk-view-toggle--active:hover,
.mk-view-toggle a.mk-view-toggle--active:hover,
.mk-view-toggle button[aria-pressed="true"]:hover,
.mk-view-toggle a[aria-pressed="true"]:hover {
  background: hsl(var(--primary) / 0.9) !important;
}

/* First button: rounded-r-none (keep left radius from container) */
.mk-view-toggle button:first-child,
.mk-view-toggle a:first-child {
  border-top-left-radius: 0 !important; /* rounded-none */
  border-bottom-left-radius: 0 !important; /* rounded-none */
}

/* Last button: rounded-l-none (keep right radius from container) */
.mk-view-toggle button:last-child,
.mk-view-toggle a:last-child {
  border-top-right-radius: 0 !important; /* rounded-none */
  border-bottom-right-radius: 0 !important; /* rounded-none */
}

/* Icon sizing inside buttons — React w-4 h-4 = 16px (not 18px) */
.mk-view-toggle svg,
.mk-view-toggle button svg,
.mk-view-toggle a svg {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
}

/* ==========================================================================
   END SECTION 145: CATALOG TOOLBAR PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 146: PARDAVIMAS FORM 2-COLUMN LAYOUT (FIX-AGENT-8)
   React Source: src/pages/HowToSell.tsx lines 121-167
   Generated: 2026-03-23

   React structure:
   - Form container: bg-card rounded-sm shadow-elegant p-8 mb-12
   - Grid: grid md:grid-cols-2 gap-6
   - Section headers: h3.font-medium text-foreground
   - Field groups: space-y-4
   ========================================================================== */

/* ------------------------------------------------------------------
   146.1: Form Container Styling
   React: bg-card rounded-sm shadow-elegant p-8 mb-12 (line 121)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-form,
body.page-id-17 .wpcf7-form,
.page-pardavimas .mk-sell-form,
.page-pardavimas .wpcf7-form {
  background: hsl(var(--card)) !important;
  border-radius: 0 !important;                    /* rounded-sm = 0 in this project */
  box-shadow: var(--shadow-elegant) !important;
  padding: 2rem !important;                       /* p-8 */
  margin-bottom: 3rem !important;                 /* mb-12 */
}

/* ------------------------------------------------------------------
   146.2: Form Title (h2)
   React: font-display text-2xl font-semibold text-foreground mb-6 (line 122-124)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-form > h2,
body.page-id-17 .mk-sell-form-title,
.page-pardavimas .mk-sell-form > h2 {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;                   /* text-2xl */
  font-weight: 600 !important;                    /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 1.5rem !important;               /* mb-6 */
}

/* ------------------------------------------------------------------
   146.3: Form Grid Layout - 2 columns at md breakpoint
   React: grid md:grid-cols-2 gap-6 (line 127)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-form__grid,
body.page-id-17 .wpcf7-form .mk-form-columns,
.page-pardavimas .mk-sell-form__grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;                         /* gap-6 */
}

@media (min-width: 768px) {
  body.page-id-17 .mk-sell-form__grid,
  body.page-id-17 .wpcf7-form .mk-form-columns,
  .page-pardavimas .mk-sell-form__grid {
    grid-template-columns: repeat(2, 1fr) !important;  /* md:grid-cols-2 */
  }
}

/* ------------------------------------------------------------------
   146.4: Section Headers
   React: h3.font-medium.text-foreground (lines 130, 150)
   Text: "Kontaktine informacija" / "Kurinio informacija"
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-form__section-title,
body.page-id-17 .mk-form-section-header,
.page-pardavimas .mk-sell-form__section-title {
  font-weight: 500 !important;                    /* font-medium */
  color: hsl(var(--foreground)) !important;       /* text-foreground */
  font-size: 1rem !important;                     /* default text size */
  margin-bottom: 1rem !important;                 /* space-y-4 first child */
  line-height: 1.5 !important;
}

/* ------------------------------------------------------------------
   146.5: Field Group Spacing
   React: space-y-4 (lines 129, 149)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-form__column,
body.page-id-17 .mk-form-column,
.page-pardavimas .mk-sell-form__column {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;                           /* space-y-4 */
}

/* ------------------------------------------------------------------
   146.6: Step Title Margin - React shows mb-2 (0.5rem)
   React: h3.font-display.text-lg.font-semibold.text-foreground.mb-2 (line 113)
   NOTE: Audit P15 incorrectly stated mb-3 (0.75rem) but React has mb-2
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step__title,
body.page-id-17 .mk-sell-step-card h3,
body.page-id-17 .mk-step-card h3,
.page-pardavimas .mk-sell-step__title {
  margin-bottom: 0.5rem !important;               /* mb-2 = 8px */
}

/* ==========================================================================
   END SECTION 146: PARDAVIMAS FORM 2-COLUMN LAYOUT (FIX-AGENT-8)
   ========================================================================== */

/* ==========================================================================
   SECTION 147: AUCTION TIMER PARITY IMPROVEMENTS — FIX-AGENT-5
   2026-03-23

   React source: src/components/auction/AuctionTimer.tsx

   ISSUES FIXED:
   T1: Timer grid structure — 4-column CSS grid matching React
   T2: Lithuanian unit labels — CSS content replacement for SAcountdown
   T3: Date footer — REQUIRES PHP (documented, not CSS-achievable)

   REACT REFERENCE (lines 191-224):
   - Layout: grid grid-cols-4 gap-3
   - Values: text-3xl md:text-4xl font-display font-bold
   - Labels: text-xs text-muted-foreground mt-1
   - Labels: "Dienų", "Valandų", "Minučių", "Sekundžių"

   STATUS COLORS:
   - Active: text-green-600 = hsl(142 71% 45%)
   - Ending: text-destructive = hsl(0 65% 50%)
   - Upcoming: text-foreground = hsl(160 30% 18%)
   ========================================================================== */

/* ------------------------------------------------------------------
   147.1: Full Timer Grid — 4-Column Layout (Single Product Page)
   React: grid grid-cols-4 gap-3 | text-center
   ------------------------------------------------------------------ */
.mk-product-timer .hasCountdown,
.mk-timer-full.hasCountdown {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important;  /* gap-3 = 12px */
  width: 100% !important;
  text-align: center !important;
}

/* Each countdown section becomes a grid column */
.mk-product-timer .countdown_section,
.mk-timer-full .countdown_section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;  /* text-center for column content */
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  min-width: auto !important;
}

/* ------------------------------------------------------------------
   147.2: Timer Values — Large Bold Numbers
   React: text-3xl md:text-4xl font-display font-bold
   ------------------------------------------------------------------ */
.mk-product-timer .countdown_amount,
.mk-timer-full .countdown_amount {
  font-size: 1.875rem !important;  /* text-3xl = 30px */
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: hsl(var(--foreground)) !important;  /* default, overridden by status */
}

@media (min-width: 768px) {
  .mk-product-timer .countdown_amount,
  .mk-timer-full .countdown_amount {
    font-size: 2.25rem !important;  /* md:text-4xl = 36px */
  }
}

/* ------------------------------------------------------------------
   147.3: Timer Labels — Small Muted Text (Lithuanian)
   React: text-xs text-muted-foreground mt-1 + "Dienų"/"Valandų"/etc
   SAcountdown uses .countdown_period with English by default.
   CSS hack: hide text, show Lithuanian via ::after
   ------------------------------------------------------------------ */
.mk-product-timer .countdown_period,
.mk-timer-full .countdown_period {
  font-size: 0 !important;  /* Hide English text */
  visibility: hidden;  /* Backup hide */
  color: transparent !important;
  line-height: 0 !important;
  margin-top: 0.25rem !important;  /* mt-1 = 4px */
  position: relative;
}

.mk-product-timer .countdown_period::after,
.mk-timer-full .countdown_period::after {
  visibility: visible;
  font-size: 0.75rem !important;  /* text-xs = 12px */
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1rem;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Days → Dienų */
.mk-product-timer .countdown_section:nth-child(1) .countdown_period::after,
.mk-timer-full .countdown_section:nth-child(1) .countdown_period::after {
  content: 'Dienų';
}

/* Hours → Valandų */
.mk-product-timer .countdown_section:nth-child(2) .countdown_period::after,
.mk-timer-full .countdown_section:nth-child(2) .countdown_period::after {
  content: 'Valandų';
}

/* Minutes → Minučių */
.mk-product-timer .countdown_section:nth-child(3) .countdown_period::after,
.mk-timer-full .countdown_section:nth-child(3) .countdown_period::after {
  content: 'Minučių';
}

/* Seconds → Sekundžių */
.mk-product-timer .countdown_section:nth-child(4) .countdown_period::after,
.mk-timer-full .countdown_section:nth-child(4) .countdown_period::after {
  content: 'Sekundžių';
}

/* ------------------------------------------------------------------
   147.4: Timer Status Colors — Active (Green)
   React: text-green-600 = hsl(142 71% 45%)
   Missing from prior CSS — active state should be green, not default
   ------------------------------------------------------------------ */
.mk-product-timer .mk-timer-active .countdown_amount,
.mk-timer-full.mk-timer-active .countdown_amount,
.mk-product-timer:has(.mk-timer-active) .countdown_amount {
  color: hsl(142 50% 35%) !important;  /* green-600 */
}

/* Active timer container border */
.mk-product-timer:has(.mk-timer-active),
.mk-timer-full.mk-timer-active {
  border-color: hsl(142 71% 45% / 0.2) !important;
  background: linear-gradient(to right, hsl(142 71% 45% / 0.1), hsl(142 71% 45% / 0.05)) !important;
}

/* ------------------------------------------------------------------
   147.5: Timer Status Colors — Ending Soon (Red + Pulse)
   React: text-destructive animate-pulse (on seconds only)
   ------------------------------------------------------------------ */
.mk-product-timer .mk-timer-ending .countdown_amount,
.mk-timer-full.mk-timer-ending .countdown_amount,
.mk-product-timer:has(.mk-timer-ending) .countdown_amount {
  color: hsl(var(--destructive)) !important;
}

/* Only seconds value pulses in React */
.mk-product-timer .mk-timer-ending .countdown_section:nth-child(4) .countdown_amount,
.mk-timer-full.mk-timer-ending .countdown_section:nth-child(4) .countdown_amount,
.mk-product-timer:has(.mk-timer-ending) .countdown_section:nth-child(4) .countdown_amount {
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* ------------------------------------------------------------------
   147.6: Timer Status Colors — Upcoming (Gold Container)
   React: text-foreground (default dark) for upcoming
   Container uses gold gradient
   ------------------------------------------------------------------ */
.mk-product-timer .mk-timer-upcoming .countdown_amount,
.mk-timer-full.mk-timer-upcoming .countdown_amount,
.mk-product-timer.future .countdown_amount,
.mk-product-timer:has(.mk-timer-upcoming) .countdown_amount,
.mk-product-timer:has(.future) .countdown_amount {
  color: hsl(var(--foreground)) !important;
}

.mk-product-timer:has(.mk-timer-upcoming),
.mk-product-timer:has(.future),
.mk-timer-full.mk-timer-upcoming {
  border-color: hsl(var(--gold) / 0.2) !important;
  background: linear-gradient(to right, hsl(var(--gold) / 0.1), hsl(var(--gold) / 0.05)) !important;
}

/* ------------------------------------------------------------------
   147.7: Date Footer Styling (requires PHP injection for HTML)
   React: mt-4 pt-4 border-t border-border/50 flex flex-wrap gap-4
   NOTE: This CSS styles the HTML IF it exists (from functions.php)
   ------------------------------------------------------------------ */
.mk-timer__dates,
.mk-product-timer .auction-dates {
  margin-top: 1rem !important;           /* mt-4 = 16px */
  padding-top: 1rem !important;          /* pt-4 = 16px */
  border-top: 1px solid hsl(var(--border) / 0.5) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;                  /* gap-4 = 16px */
  font-size: 0.875rem !important;        /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
}

.mk-timer__date-item,
.mk-product-timer .date-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;                /* gap-2 = 8px */
}

.mk-timer__date-item svg,
.mk-product-timer .date-item svg {
  width: 1rem !important;                /* w-4 = 16px */
  height: 1rem !important;               /* h-4 = 16px */
  flex-shrink: 0 !important;
}

/* ==========================================================================
   END SECTION 147: AUCTION TIMER PARITY IMPROVEMENTS — FIX-AGENT-5
   ========================================================================== */

/* ==========================================================================
   SECTION 147: CATALOG LAYOUT PARITY — FIX-AGENT-1
   Source: src/pages/Catalog.tsx
   Reference: docs/PARITY-AGENT-LOGS/FIX-1-CATALOG-LAYOUT.md

   ISSUES FIXED:
   P5-1: Container padding 32px -> 16px (px-4)
   P5-2: Grid cols at lg (1024-1279px): 3 -> 2 cols (React uses sm:2, xl:3)
   P5-3: H1 font-size 3rem -> 1.875rem mobile, 2.25rem md+
   P5-4: Description max-width missing -> 48rem (max-w-3xl)
   P5-5: Button gap 8px -> 12px (gap-3)
   P5-6: Toolbar margin-bottom 16px -> 24px (mb-6)
   ========================================================================== */

/* P5-1: Container horizontal padding - responsive (FIX-18) */
/* Base: 1rem (px-4), sm: 1.5rem, lg: 2rem */
.mk-catalog {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media (min-width: 640px) {
  .mk-catalog {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  .mk-catalog {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* P5-3: H1 font-size - text-3xl mobile, md:text-4xl */
.mk-catalog > h1.wp-block-heading,
.mk-catalog h1.wp-block-heading:first-of-type {
  font-size: 1.875rem !important; /* text-3xl = 1.875rem */
  line-height: 2.25rem !important; /* Tailwind text-3xl line-height */
}

@media (min-width: 768px) {
  .mk-catalog > h1.wp-block-heading,
  .mk-catalog h1.wp-block-heading:first-of-type {
    font-size: 2.25rem !important; /* md:text-4xl = 2.25rem */
    line-height: 2.5rem !important; /* Tailwind text-4xl line-height */
  }
}

/* P5-4: Description max-width - max-w-3xl = 48rem */
.mk-catalog > p.wp-block-paragraph,
.mk-catalog > .wp-block-group > p.wp-block-paragraph:first-of-type {
  max-width: 48rem !important; /* max-w-3xl */
}

/* P5-5: Button container gap - gap-3 = 0.75rem (12px) */
.mk-catalog__header .wp-block-group,
.mk-catalog__header .wp-block-buttons {
  gap: 0.75rem !important; /* gap-3 = 12px */
}

/* P5-6: Toolbar margin-bottom - mb-6 = 1.5rem (24px) */
.mk-catalog__toolbar {
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
}

/* P5-2: Grid columns - sm:grid-cols-2 xl:grid-cols-3 */
/* Mobile: 1 column */
.mk-catalog__main .wp-block-woocommerce-product-collection ul.wc-block-product-template,
.mk-catalog__main .wc-block-grid__products,
body.post-type-archive-product .mk-catalog__main .wc-block-product-template {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 */
}

/* sm (640px+): 2 columns */
@media (min-width: 640px) {
  .mk-catalog__main .wp-block-woocommerce-product-collection ul.wc-block-product-template,
  .mk-catalog__main .wc-block-grid__products,
  body.post-type-archive-product .mk-catalog__main .wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* lg (1024px): STILL 2 columns (React does NOT increase at lg) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mk-catalog__main .wp-block-woocommerce-product-collection ul.wc-block-product-template,
  .mk-catalog__main .wc-block-grid__products,
  body.post-type-archive-product .mk-catalog__main .wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* xl (1280px+): 3 columns */
@media (min-width: 1280px) {
  .mk-catalog__main .wp-block-woocommerce-product-collection ul.wc-block-product-template,
  .mk-catalog__main .wc-block-grid__products,
  body.post-type-archive-product .mk-catalog__main .wc-block-product-template {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==========================================================================
   END SECTION 147: CATALOG LAYOUT PARITY — FIX-AGENT-1
   ========================================================================== */

/* ==========================================================================
   SECTION 148: MY ACCOUNT EDIT BUTTON FIX (FIX-AGENT-12)
   React Source: src/pages/Account.tsx lines 112-115
   Button: variant="ghost" size="sm" with Settings icon

   React classes:
   - ghost: hover:bg-accent hover:text-accent-foreground rounded
   - sm: h-9 px-4
   - rounded = Tailwind default = 0.25rem (4px)

   Issue: Previous CSS had border-radius: 0.125rem (rounded-md) but React uses
   border-radius: 0.25rem (rounded) for ghost buttons.
   ========================================================================== */

.mk-account-edit-btn {
  height: 2.25rem !important;                       /* h-9 = 36px */
  padding: 0 1rem !important;                       /* px-4 = 16px */
  border-radius: 0.25rem !important;                /* rounded = 4px (NOT rounded-md) */
  background: transparent !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;                           /* gap-2 for icon spacing */
  font-size: 0.875rem !important;                   /* text-sm */
  font-weight: 500 !important;                      /* font-medium */
  color: hsl(var(--foreground)) !important;
  transition: background-color 200ms, color 200ms !important;
}

.mk-account-edit-btn:hover {
  background: hsl(var(--accent)) !important;        /* hover:bg-accent */
  color: hsl(var(--accent-foreground)) !important;  /* hover:text-accent-foreground */
}

.mk-account-edit-btn svg {
  width: 1rem !important;                           /* w-4 = 16px */
  height: 1rem !important;                          /* h-4 = 16px */
}

/* ==========================================================================
   END SECTION 148: MY ACCOUNT EDIT BUTTON FIX (FIX-AGENT-12)
   ========================================================================== */

/* ==========================================================================
   SECTION 149: HOMEPAGE SECTIONS PARITY FIXES (FIX-AGENT-15)
   Date: 2026-03-23

   Issues fixed:
   1. Newsletter second image offset: 48px -> 32px (mt-8)
   2. Action card cover image hover zoom: Simplified selector

   React sources:
   - src/components/home/NewsletterSection.tsx (line 70: mt-8)
   - src/components/home/UpcomingAuctions.tsx (lines 43-48: group-hover:scale-105)
   ========================================================================== */

/* ------------------------------------------------------------------
   149.1: Newsletter Second Image Offset
   React: className="mt-8" on second image = 2rem (32px)
   WordPress: Two images in column, second needs margin-top
   Pattern uses wp-block-group wrapper with padding-top
   ------------------------------------------------------------------ */
.mk-newsletter .wp-block-column:last-child .wp-block-image:last-child,
.mk-newsletter__images .wp-block-image:last-child,
.mk-newsletter__images > figure:last-child,
.mk-newsletter .mk-newsletter-images .wp-block-image:last-child {
  margin-top: 2rem !important; /* mt-8 = 32px, NOT 48px */
}

/* Override the wrapper group padding (pattern uses spacing--60 = 48px, should be 32px) */
.mk-newsletter .wp-block-column.is-vertically-aligned-bottom > .wp-block-group,
.mk-newsletter .wp-block-columns .wp-block-column:last-child > .wp-block-group {
  padding-top: 2rem !important; /* mt-8 = 32px, NOT 48px (spacing--60) */
}

/* ------------------------------------------------------------------
   149.2: Action Card Cover Image Hover Zoom
   React: transition-transform duration-500 group-hover:scale-105
   Simplified selector - works with just .mk-action-card class
   ------------------------------------------------------------------ */
.mk-action-card .wp-block-cover__image-background {
  transition: transform 500ms ease !important;
}

.mk-action-card:hover .wp-block-cover__image-background {
  transform: scale(1.05) !important;
}

/* Ensure overflow hidden on action card for zoom effect */
.mk-action-card {
  overflow: hidden !important;
}

/* ==========================================================================
   END SECTION 149: HOMEPAGE SECTIONS PARITY FIXES (FIX-AGENT-15)
   ========================================================================== */

/* ==========================================================================
   SECTION 150: GIFT VOUCHER PAGE PARITY FIXES — FIX-AGENT-10
   Source: src/pages/GiftVoucher.tsx
   Reference: docs/PARITY-AGENT-LOGS/FIX-10-GIFT-VOUCHER.md

   CRITICAL VALUES (from custom Tailwind config):
   - --radius: 0.25rem (NOT Tailwind default 0.5rem)
   - rounded-lg = var(--radius) = 0.25rem (4px)
   - text-4xl = 2.25rem (36px)
   - text-5xl = 3rem (48px)
   - text-2xl = 1.5rem (24px)
   ========================================================================== */

/* ------------------------------------------------------------------
   150.1: DK-M2 — H1 Hero Title Responsive Sizing
   React: font-display text-4xl md:text-5xl font-bold (line 48)
   - Mobile (<768px): text-4xl = 2.25rem (36px)
   - Desktop (>=768px): text-5xl = 3rem (48px)
   ------------------------------------------------------------------ */
.page-id-19 h1,
.mk-voucher-hero h1,
body.page-id-19 .entry-content h1,
body.page-id-19 .wp-block-heading:first-of-type {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 2.25rem !important;        /* text-4xl = 36px mobile */
  line-height: 2.5rem !important;
  font-weight: 700 !important;          /* font-bold */
  letter-spacing: -0.025em !important;
}

@media (min-width: 768px) {
  .page-id-19 h1,
  .mk-voucher-hero h1,
  body.page-id-19 .entry-content h1,
  body.page-id-19 .wp-block-heading:first-of-type {
    font-size: 3rem !important;         /* md:text-5xl = 48px */
    line-height: 1 !important;
  }
}

/* ------------------------------------------------------------------
   150.2: DK-M3 — Amount Button Border Radius
   FIX-17: Updated to 0.5rem (8px) per visual parity audit
   Original: rounded-lg = var(--radius) = 0.25rem (custom project value)
   Fixed: 0.5rem to match visual design intent
   ------------------------------------------------------------------ */
.mk-voucher-btn,
.page-id-19 .mk-voucher-btn,
body.page-id-19 button[class*="voucher"],
body.page-id-19 .mk-voucher__amount-row button,
body.page-id-19 .wp-block-buttons .wp-block-button__link {
  border-radius: 0.5rem !important;  /* FIX-17: 0.5rem (8px) per visual parity */
}

/* Ensure the amount buttons specifically use correct radius */
.mk-voucher-btn,
.mk-voucher-amount-btn {
  border-radius: 0.5rem !important;    /* FIX-17: 0.5rem (8px) */
}

/* ------------------------------------------------------------------
   150.3: DK-M4 — Validity Rules Title (h2) Sizing
   React: font-display text-2xl font-bold (line 168)
   - text-2xl = 1.5rem (24px)
   - font-bold = 700
   ------------------------------------------------------------------ */
.mk-voucher-rules-card h2,
.page-id-19 .mk-voucher-rules-card h2,
body.page-id-19 .wp-block-group[class*="rules"] h2,
body.page-id-19 .entry-content .wp-block-group:has(.mk-voucher-rule) h2 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.5rem !important;         /* text-2xl = 24px */
  line-height: 2rem !important;
  font-weight: 700 !important;          /* font-bold */
  letter-spacing: -0.025em !important;
  margin-bottom: 1.5rem !important;     /* mb-6 from React */
}

/* ------------------------------------------------------------------
   150.4: Price Overlay on Voucher Preview
   React: bg-primary text-primary-foreground px-4 py-2 rounded-lg
          font-bold text-2xl shadow-lg (line 71)
   FIX-17: Updated to 0.5rem (8px) per visual parity audit
   ------------------------------------------------------------------ */
.mk-voucher__price-overlay,
.page-id-19 .mk-voucher__price-overlay {
  border-radius: 0.5rem !important;  /* FIX-17: 0.5rem (8px) per visual parity */
}

/* ------------------------------------------------------------------
   150.5: Custom Amount Input
   React: w-32 bg-primary-foreground/10 border-primary-foreground/20
          rounded (not rounded-lg) (lines 100-111)
   Note: Input uses 'rounded' class which is default 0.25rem in Tailwind
   ------------------------------------------------------------------ */
.mk-voucher-custom-input,
.page-id-19 .mk-voucher-custom-input,
body.page-id-19 input[type="number"][class*="voucher"] {
  border-radius: var(--radius, 0.25rem) !important;
}

/* ==========================================================================
   END SECTION 150: GIFT VOUCHER PAGE PARITY FIXES — FIX-AGENT-10
   ========================================================================== */

/* ==========================================================================
   SECTION 151: CATALOG SIDEBAR FILTER PARITY — FIX-AGENT-17
   React reference: src/pages/Catalog.tsx lines 134-203
   React reference: src/components/auction/CategorySidebar.tsx
   React reference: src/components/ui/switch.tsx

   Audit issues fixed:
   - P6-SIDEBAR-GAP: Verified 1.5rem gap (space-y-6) - already correct at line 21029
   - P6-BORDER-RADIUS: rounded-sm = calc(var(--radius) - 4px) = 0
   - P6-TOGGLE-SIZE: h-6 w-11 track, h-5 w-5 thumb - already correct at lines 2702-2731

   CRITICAL: In this project's tailwind.config.ts:
   - --radius = 0.25rem (4px)
   - rounded-sm = calc(var(--radius) - 4px) = 0
   - So filter cards should have NO border-radius
   ========================================================================== */

/* 151.1: Filter card border-radius fix — rounded-sm = 0 */
.mk-catalog__sidebar .mk-filter-card,
.mk-catalog__sidebar .mk-sidebar-filter,
.mk-catalog__sidebar .wc-block-product-filter,
.mk-catalog__sidebar .wc-block-attribute-filter,
.mk-catalog__sidebar .wc-block-price-filter,
.mk-catalog__sidebar .wc-block-stock-filter,
.mk-catalog-sidebar .mk-filter-card,
.mk-catalog-sidebar .mk-sidebar-filter {
  border-radius: 0 !important; /* rounded-sm = calc(var(--radius) - 4px) = 0 */
}

/* 151.2: Categories panel (dark) — bg-primary rounded-sm p-6 */
.mk-catalog__sidebar .mk-categories-panel,
.mk-catalog-sidebar .mk-categories-panel,
.mk-sidebar-categories {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-radius: 0 !important; /* rounded-sm = 0 */
  padding: 1.5rem !important; /* p-6 = 24px */
}

/* 151.3: Categories panel title — font-display text-lg font-semibold mb-6 */
.mk-categories-panel h3,
.mk-sidebar-categories h3 {
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
}

/* 151.4: Category list items — space-y-3 */
.mk-categories-panel ul,
.mk-sidebar-categories ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* space-y-3 = 12px */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 151.5: Category buttons — text-sm transition-colors */
.mk-categories-panel button,
.mk-sidebar-categories button,
.mk-sidebar-categories a {
  font-size: 0.875rem !important; /* text-sm = 14px */
  transition: color 150ms ease !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  width: 100% !important;
  color: hsl(var(--primary-foreground) / 0.8) !important;
}

.mk-categories-panel button:hover,
.mk-sidebar-categories button:hover,
.mk-sidebar-categories a:hover {
  color: hsl(var(--gold)) !important;
}

.mk-categories-panel button.active,
.mk-categories-panel button[aria-selected="true"],
.mk-sidebar-categories button.active,
.mk-sidebar-categories a.active {
  color: hsl(var(--gold)) !important;
  font-weight: 500 !important;
}

/* 151.6: Filters panel — bg-card rounded-sm p-6 shadow-card */
.mk-catalog__sidebar .mk-filters-panel,
.mk-catalog-sidebar .mk-filters-panel,
.mk-sidebar-filters {
  background-color: hsl(var(--card)) !important;
  border-radius: 0 !important; /* rounded-sm = 0 */
  padding: 1.5rem !important; /* p-6 = 24px */
  box-shadow: var(--shadow-card) !important;
}

/* 151.7: Time Filters panel — bg-card rounded-sm p-4 shadow-card */
.mk-catalog__sidebar .mk-time-filters,
.mk-catalog-sidebar .mk-time-filters,
.mk-sidebar-time-filters {
  background-color: hsl(var(--card)) !important;
  border-radius: 0 !important; /* rounded-sm = 0 */
  padding: 1rem !important; /* p-4 = 16px */
  box-shadow: var(--shadow-card) !important;
}

/* 151.8: Time filter title — font-display font-semibold mb-3 */
.mk-time-filters h3,
.mk-sidebar-time-filters h3 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important; /* mb-3 = 12px */
}

/* 151.9: Time filter buttons — space-y-2, px-3 py-2 rounded-md text-sm */
.mk-time-filters .mk-filter-buttons,
.mk-sidebar-time-filters .mk-filter-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* space-y-2 = 8px */
}

.mk-time-filters button,
.mk-sidebar-time-filters button {
  width: 100% !important;
  text-align: left !important;
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px (P6 parity fix) */
  font-size: 0.875rem !important; /* text-sm */
  transition: background-color 150ms ease, color 150ms ease !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
}

.mk-time-filters button:hover,
.mk-sidebar-time-filters button:hover {
  background-color: hsl(var(--muted)) !important;
}

.mk-time-filters button.active,
.mk-time-filters button[aria-selected="true"],
.mk-sidebar-time-filters button.active {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* 151.10: Quick Filters panel — bg-card rounded-sm p-4 shadow-card space-y-4 */
.mk-catalog__sidebar .mk-quick-filters,
.mk-catalog-sidebar .mk-quick-filters,
.mk-sidebar-quick-filters {
  background-color: hsl(var(--card)) !important;
  border-radius: 0 !important; /* rounded-sm = 0 */
  padding: 1rem !important; /* p-4 = 16px */
  box-shadow: var(--shadow-card) !important;
}

/* 151.11: Quick filters content — space-y-4 */
.mk-quick-filters > *,
.mk-sidebar-quick-filters > * {
  margin-bottom: 1rem; /* space-y-4 = 16px */
}

.mk-quick-filters > *:last-child,
.mk-sidebar-quick-filters > *:last-child {
  margin-bottom: 0;
}

/* 151.12: Quick filter title — font-display font-semibold */
.mk-quick-filters h3,
.mk-sidebar-quick-filters h3 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}

/* 151.13: Quick filter row — flex items-center justify-between */
.mk-quick-filters .mk-filter-row,
.mk-sidebar-quick-filters .mk-filter-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 151.14: Quick filter label — text-sm */
.mk-quick-filters label,
.mk-sidebar-quick-filters label {
  font-size: 0.875rem !important; /* text-sm = 14px */
}

/* 151.15: Help panel — bg-secondary/30 rounded-sm p-6 */
.mk-catalog__sidebar .mk-help-panel,
.mk-catalog-sidebar .mk-help-panel,
.mk-sidebar-help {
  background-color: hsl(var(--secondary) / 0.3) !important;
  border-radius: 0 !important; /* rounded-sm = 0 */
  padding: 1.5rem !important; /* p-6 = 24px */
}

/* 151.16: Help panel title — font-display text-sm font-semibold mb-3 */
.mk-help-panel h3,
.mk-sidebar-help h3 {
  font-family: var(--font-display) !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important; /* mb-3 = 12px */
  color: hsl(var(--foreground)) !important;
}

/* 151.17: Help panel list — space-y-2 text-xs text-muted-foreground */
.mk-help-panel ul,
.mk-sidebar-help ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* space-y-2 = 8px */
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.75rem; /* text-xs = 12px */
  color: hsl(var(--muted-foreground));
}

/* 151.18: Override Section 117 filter card radius to 0 for sidebar */
.mk-catalog__sidebar .mk-filter-card,
.mk-catalog__sidebar .wc-block-product-filter,
.mk-catalog-sidebar .mk-filter-card,
.mk-catalog-sidebar .wc-block-product-filter {
  border-radius: 0 !important; /* Override Section 117's var(--radius) to match React rounded-sm = 0 */
}

/* ==========================================================================
   END SECTION 151: CATALOG SIDEBAR FILTER PARITY — FIX-AGENT-17
   ========================================================================== */

/* ==========================================================================
   SECTION 152: MY ACCOUNT ADDRESSES PAGE — FIX5-AGENT-4
   Date: 2026-03-23
   Issue: WAVE4-5 reported 85% complete — missing explicit styling for:
   - .edit link class in address headers
   - .woocommerce-Address-title header container
   - <address> element content formatting

   WooCommerce Addresses HTML structure:
   <div class="woocommerce-Addresses">
     <div class="woocommerce-Address">
       <header class="woocommerce-Address-title">
         <h3>Billing address</h3>
         <a href="..." class="edit">Edit</a>
       </header>
       <address>
         Name<br>
         Street<br>
         City, Postcode<br>
         Country
       </address>
     </div>
   </div>
   ========================================================================== */

/* 152.1: Addresses Container — 2-column grid on desktop */
.woocommerce-Addresses {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
}

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

/* 152.2: Individual Address Block — card-like container */
.woocommerce-Addresses .woocommerce-Address {
  background: hsl(var(--secondary) / 0.3) !important; /* matches mk-bid-item bg */
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
  padding: 1.5rem !important; /* p-6 = 24px */
}

/* 152.3: Address Title Header — flexbox with space-between */
.woocommerce-Address-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1rem !important; /* mb-4 = 16px */
  padding-bottom: 0.75rem !important; /* pb-3 = 12px */
  border-bottom: 1px solid hsl(var(--border)) !important;
}

/* 152.4: Address Title Heading — h3 with display font */
.woocommerce-Address-title h3 {
  font-family: var(--font-display) !important;
  font-size: 1rem !important; /* text-base = 16px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin: 0 !important;
}

/* 152.5: Edit Link — primary color, hover underline */
.woocommerce-Address-title .edit,
.woocommerce-Addresses .edit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important; /* gap-1 = 4px */
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  color: hsl(var(--primary)) !important;
  text-decoration: none !important;
  transition: color 150ms ease, text-decoration 150ms ease !important;
}

.woocommerce-Address-title .edit:hover,
.woocommerce-Addresses .edit:hover {
  color: hsl(var(--forest-light)) !important;
  text-decoration: underline !important;
}

/* 152.6: Address Content — proper line spacing and typography */
.woocommerce-Addresses address,
.woocommerce-Address address {
  font-style: normal !important; /* Remove default italic */
  font-size: 0.875rem !important; /* text-sm = 14px */
  line-height: 1.75 !important; /* leading-relaxed = 1.75 */
  color: hsl(var(--foreground)) !important;
  margin: 0 !important;
}

/* 152.7: Address line breaks — proper spacing between lines */
.woocommerce-Addresses address br {
  display: block !important;
  content: "" !important;
  margin-bottom: 0.25rem !important; /* Slight gap between address lines */
}

/* 152.8: Empty address state — "You have not set up this type of address yet." */
.woocommerce-Addresses .woocommerce-Address address:empty::before,
.woocommerce-Addresses .woocommerce-Address p {
  content: attr(data-empty-text);
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  font-style: italic !important;
}

/* 152.9: WooCommerce col-1 and col-2 classes (used in some themes) */
.woocommerce-Addresses .col-1,
.woocommerce-Addresses .col-2 {
  background: hsl(var(--secondary) / 0.3) !important;
  border-radius: 0.125rem !important;
  padding: 1.5rem !important;
}

/* 152.10: Address action buttons (if present beyond edit link) */
.woocommerce-Address .woocommerce-Address-action {
  margin-top: 1rem !important;
}

.woocommerce-Address .woocommerce-Address-action a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  height: 2.25rem !important; /* h-9 = 36px */
  padding: 0.5rem 1rem !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: none !important;
  border-radius: 0.25rem !important; /* rounded = 4px */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 300ms, box-shadow 300ms !important;
  box-shadow: var(--shadow-elegant) !important;
}

.woocommerce-Address .woocommerce-Address-action a:hover {
  background: hsl(var(--forest-light)) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* ==========================================================================
   END SECTION 152: MY ACCOUNT ADDRESSES PAGE — FIX5-AGENT-4
   ========================================================================== */

/* ==========================================================================
   SECTION 153: POST-AUCTION CUSTOM EMPTY STATE — FIX5-AGENT-6
   React source: src/pages/PostAuction.tsx lines 123-132
   ========================================================================== */

/* Container - centered layout with generous padding */
.mk-poauction-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 4rem 2rem !important; /* py-16 = 64px */
  min-height: 300px !important;
}

/* Tag icon - large muted icon */
.mk-poauction-empty__icon {
  width: 64px !important; /* w-16 = 64px */
  height: 64px !important; /* h-16 = 64px */
  color: hsl(var(--muted-foreground) / 0.3) !important; /* text-muted-foreground/30 */
  margin-bottom: 1rem !important; /* mb-4 = 16px */
}

/* Title - medium weight, slightly larger */
.mk-poauction-empty__title {
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 500 !important; /* font-medium */
  line-height: 1.75rem !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 0 0.5rem 0 !important; /* mb-2 = 8px */
}

/* Description text - muted color */
.mk-poauction-empty__text {
  font-size: 1rem !important; /* text-base = 16px */
  line-height: 1.5rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 0 1rem 0 !important; /* mb-4 = 16px */
}

/* CTA Button - catalog variant matching React Button asChild */
.mk-poauction-empty__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  height: 2.5rem !important; /* h-10 = 40px */
  padding: 0.5rem 1rem !important; /* px-4 py-2 */
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: none !important;
  border-radius: 0.25rem !important; /* rounded = var(--radius) = 4px */
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 300ms, box-shadow 300ms !important;
  box-shadow: var(--shadow-elegant) !important;
}

.mk-poauction-empty__btn:hover {
  background: hsl(var(--forest-light)) !important;
  box-shadow: var(--shadow-hover) !important;
  text-decoration: none !important;
}

/* ==========================================================================
   END SECTION 153: POST-AUCTION CUSTOM EMPTY STATE — FIX5-AGENT-6
   ========================================================================== */

/* ==========================================================================
   SECTION 154: WOOCOMMERCE ORDER STATUS BADGES — FIX5-AGENT-1
   Date: 2026-03-23

   React Source: src/components/ui/badge.tsx

   Base badge styling from React:
   - inline-flex items-center rounded-full border
   - px-2.5 py-0.5 text-xs font-semibold
   - transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2

   Exact CSS values:
   - rounded-full = border-radius: 9999px
   - px-2.5 = padding-left/right: 0.625rem (10px)
   - py-0.5 = padding-top/bottom: 0.125rem (2px)
   - text-xs = font-size: 0.75rem (12px)
   - font-semibold = font-weight: 600

   WooCommerce order status classes:
   - .status-completed (green/success)
   - .status-processing (blue/info)
   - .status-pending (yellow/amber/warning)
   - .status-on-hold (orange)
   - .status-cancelled (gray/muted)
   - .status-refunded (purple)
   - .status-failed (red/destructive)
   ========================================================================== */

/* ------------------------------------------------------------------
   154.1: Base Badge Styling (shared by all status badges)
   React: inline-flex items-center rounded-full border px-2.5 py-0.5
          text-xs font-semibold transition-colors
   ------------------------------------------------------------------ */
.woocommerce-orders-table__cell-order-status mark,
.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-status mark,
.woocommerce-account .woocommerce-orders mark,
mark.order-status {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9999px !important;          /* rounded-full */
  border: 1px solid transparent !important;
  padding: 0.125rem 0.625rem !important;     /* py-0.5 px-2.5 */
  font-size: 0.75rem !important;             /* text-xs = 12px */
  font-weight: 600 !important;               /* font-semibold */
  line-height: 1.5 !important;
  text-transform: capitalize !important;
  transition: color 200ms ease, background-color 200ms ease !important;
  background-image: none !important;         /* Remove WC default gradient */
}

/* Focus state - matching React ring pattern */
.woocommerce-orders-table__cell-order-status mark:focus-visible,
mark.order-status:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)),
              0 0 0 4px hsl(var(--ring)) !important;
}

/* ------------------------------------------------------------------
   154.2: Completed Status (Green/Success)
   React: Uses success/green color scheme
   ------------------------------------------------------------------ */
mark.order-status.status-completed,
.status-completed,
mark.status-completed {
  background-color: hsl(142 76% 36% / 0.15) !important;  /* green-600/15 */
  color: hsl(142 76% 30%) !important;                     /* green-700 */
  border-color: hsl(142 76% 36% / 0.3) !important;        /* green-600/30 */
}

/* ------------------------------------------------------------------
   154.3: Processing Status (Blue/Info)
   React: Uses primary/info color scheme
   ------------------------------------------------------------------ */
mark.order-status.status-processing,
.status-processing,
mark.status-processing {
  background-color: hsl(var(--primary) / 0.15) !important;
  color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary) / 0.3) !important;
}

/* ------------------------------------------------------------------
   154.4: Pending Status (Amber/Warning)
   React: Uses warning/amber color scheme
   ------------------------------------------------------------------ */
mark.order-status.status-pending,
.status-pending,
mark.status-pending {
  background-color: hsl(38 92% 50% / 0.15) !important;   /* amber-500/15 */
  color: hsl(38 92% 35%) !important;                      /* amber-600 */
  border-color: hsl(38 92% 50% / 0.3) !important;         /* amber-500/30 */
}

/* ------------------------------------------------------------------
   154.5: On-Hold Status (Orange)
   React: Uses orange color scheme
   ------------------------------------------------------------------ */
mark.order-status.status-on-hold,
.status-on-hold,
mark.status-on-hold {
  background-color: hsl(25 95% 53% / 0.15) !important;   /* orange-500/15 */
  color: hsl(25 95% 40%) !important;                      /* orange-600 */
  border-color: hsl(25 95% 53% / 0.3) !important;         /* orange-500/30 */
}

/* ------------------------------------------------------------------
   154.6: Cancelled Status (Gray/Muted)
   React: Uses secondary/muted color scheme
   ------------------------------------------------------------------ */
mark.order-status.status-cancelled,
.status-cancelled,
mark.status-cancelled {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

/* ------------------------------------------------------------------
   154.7: Refunded Status (Purple)
   React: Uses purple color scheme
   ------------------------------------------------------------------ */
mark.order-status.status-refunded,
.status-refunded,
mark.status-refunded {
  background-color: hsl(270 70% 55% / 0.15) !important;  /* purple-500/15 */
  color: hsl(270 70% 45%) !important;                     /* purple-600 */
  border-color: hsl(270 70% 55% / 0.3) !important;        /* purple-500/30 */
}

/* ------------------------------------------------------------------
   154.8: Failed Status (Red/Destructive)
   React: Uses destructive color scheme
   ------------------------------------------------------------------ */
mark.order-status.status-failed,
.status-failed,
mark.status-failed {
  background-color: hsl(var(--destructive) / 0.15) !important;
  color: hsl(var(--destructive)) !important;
  border-color: hsl(var(--destructive) / 0.3) !important;
}

/* ------------------------------------------------------------------
   154.9: Table Cell Styling
   Ensure proper alignment in WooCommerce orders table
   ------------------------------------------------------------------ */
.woocommerce-orders-table__cell-order-status,
.woocommerce-MyAccount-orders td.woocommerce-orders-table__cell-order-status {
  vertical-align: middle !important;
}

/* Remove default WooCommerce background on mark element */
.woocommerce-orders-table__cell-order-status mark::before,
.woocommerce-orders-table__cell-order-status mark::after {
  content: none !important;
}

/* ==========================================================================
   END SECTION 154: WOOCOMMERCE ORDER STATUS BADGES — FIX5-AGENT-1
   ========================================================================== */

/* ==========================================================================
   SECTION 155: CATALOG TOOLBAR COMPREHENSIVE PARITY FIX — FIX-AGENT-9
   Date: 2026-03-23

   React Source: src/pages/Catalog.tsx lines 248-296
   React Source: src/components/ui/select.tsx lines 19-21

   ISSUES FIXED:
   - P7-1: Sort dropdown height 36px -> 40px (h-10)
   - P7-2: Sort dropdown border-radius 2px -> 6px (rounded-md = 0.375rem)
   - P7-3: Toolbar align-items: start -> center
   - P7-4: Remove border-bottom (React has none)
   - P7-5: Remove extra padding (React: no wrapper padding)

   React Toolbar (line 248):
   className="flex flex-wrap items-center justify-between gap-4 mb-6"

   React SelectTrigger (select.tsx line 20):
   className="flex h-10 w-full items-center justify-between rounded-md border..."
   ========================================================================== */

/* ------------------------------------------------------------------
   P7-1 through P7-5: Complete toolbar wrapper fix
   React: flex flex-wrap items-center justify-between gap-4 mb-6
   ------------------------------------------------------------------ */
.mk-catalog-toolbar,
.mk-catalog__toolbar,
.mk-toolbar {
  display: flex !important;
  align-items: center !important;           /* P7-3: was 'start', React is 'center' */
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;                     /* gap-4 = 1rem */
  border-bottom: none !important;           /* P7-4: React has no border */
  padding: 0 !important;                    /* P7-5: React has no wrapper padding */
  margin-bottom: 1.5rem !important;         /* mb-6 = 1.5rem */
}

/* Left and right clusters also need center alignment */
.mk-catalog-toolbar__left,
.mk-catalog-toolbar__right {
  display: flex !important;
  align-items: center !important;           /* P7-3: center, not start */
  gap: 0.75rem !important;
}

/* ------------------------------------------------------------------
   P7-1 & P7-2: Sort dropdown — exact React SelectTrigger parity
   React: h-10 rounded-md (select.tsx line 20)
   h-10 = 2.5rem (40px), rounded-md = 0.375rem (6px)
   ------------------------------------------------------------------ */
.mk-catalog-toolbar select,
.mk-catalog-toolbar .mk-sort-select,
.mk-catalog__toolbar select,
.mk-toolbar select,
.woocommerce-ordering select,
select.orderby,
.mk-sort-dropdown {
  height: 2.5rem !important;                /* P7-1: h-10 = 40px (was 36px) */
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */       /* P7-2: rounded-md = 6px (was 2px) */
  padding: 0 2.25rem 0 0.75rem !important;  /* px-3 = 0.75rem left, space for chevron right */
  font-size: 0.875rem !important;           /* text-sm */
  min-width: 200px;
}

/* ------------------------------------------------------------------
   View toggle button sizing
   React: size="sm" = h-9 w-9 for icon-only buttons (2.25rem = 36px)
   ------------------------------------------------------------------ */
.mk-view-toggle button,
.mk-view-toggle a {
  height: 2.25rem !important;               /* h-9 = 36px */
  width: 2.25rem !important;                /* w-9 = 36px */
}

/* ==========================================================================
   END SECTION 155: CATALOG TOOLBAR COMPREHENSIVE PARITY FIX — FIX-AGENT-9
   ========================================================================== */

/* ==========================================================================
   SECTION 156: POST-AUCTION PAGE PARITY FIX — P12-FIX-AGENT (2026-03-23)
   React source: src/pages/PostAuction.tsx

   Issues fixed:
   - P12-H1: Missing filter row (category, price, sort dropdowns + view toggle)
   - P12-H2: H1 should be 1.875rem (text-3xl), not 3rem
   - P12-H3: Missing ShoppingBag icon circle before H1
   - P12-H4: Container width should be 1400px, not 760px
   - P12-M1: Amber banner background should be hsl(38 92% 50% / 0.1)

   React values extracted:
   - Header icon: w-12 h-12 (3rem) rounded-full bg-amber-500/10
   - ShoppingBag icon: w-6 h-6 (1.5rem) text-amber-600
   - H1: text-3xl = 1.875rem, font-display, font-bold (700)
   - Filter row: p-4 bg-muted/30 rounded-lg gap-4 mb-6
   - Select: w-[180px]
   - View toggle: ml-auto flex gap-2
   ========================================================================== */

/* ------------------------------------------------------------------
   156.1: Page container — expand to 1400px
   React: container mx-auto (max-width dependent on config, but 1400px is project standard)
   ------------------------------------------------------------------ */
.page-id-93 .mk-poaukcionine-page,
.mk-poaukcionine-page,
body.page-id-93 main,
body.page-id-93 .entry-content {
  max-width: 1400px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--wp--preset--spacing--50, 1.25rem) !important;
  padding-right: var(--wp--preset--spacing--50, 1.25rem) !important;
}

/* ------------------------------------------------------------------
   156.2: Header with icon circle
   React: flex items-center gap-3 mb-4 (lines 43-54)
   ------------------------------------------------------------------ */
.mk-poaukcionine-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important; /* gap-3 = 12px */
  margin-bottom: 1rem !important; /* mb-4 = 16px */
}

/* ------------------------------------------------------------------
   156.3: Icon circle — w-12 h-12 rounded-full bg-amber-500/10
   React: lines 44-46
   ------------------------------------------------------------------ */
.mk-poaukcionine-icon-circle {
  width: 3rem !important; /* w-12 = 48px */
  height: 3rem !important; /* h-12 = 48px */
  min-width: 3rem !important;
  min-height: 3rem !important;
  border-radius: 9999px !important; /* rounded-full */
  background-color: hsl(38 92% 50% / 0.1) !important; /* bg-amber-500/10 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.mk-poaukcionine-icon-circle svg {
  width: 1.5rem !important; /* w-6 = 24px */
  height: 1.5rem !important; /* h-6 = 24px */
  color: hsl(25 95% 53%) !important; /* text-amber-600 */
}

/* ------------------------------------------------------------------
   156.4: H1 title — text-3xl = 1.875rem, font-display, font-bold
   React: line 49
   ------------------------------------------------------------------ */
.mk-poaukcionine-title,
.page-id-93 h1,
body.page-id-93 h1.wp-block-heading,
.mk-poaukcionine-page h1 {
  font-family: var(--font-display) !important;
  font-size: 1.875rem !important; /* text-3xl */
  font-weight: 700 !important; /* font-bold */
  letter-spacing: -0.025em !important; /* tracking-tight */
  line-height: 2.25rem !important; /* text-3xl line-height */
  margin: 0 !important;
}

/* Subtitle */
.mk-poaukcionine-header p,
.page-id-93 .mk-poaukcionine-header p {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.875rem !important; /* text-sm */
  margin: 0 !important;
}

/* ------------------------------------------------------------------
   156.5: Amber info banner — CORRECT VALUES
   React: p-4 bg-amber-500/10 rounded-lg border border-amber-500/20 (lines 56-61)
   ------------------------------------------------------------------ */
.page-id-93 .mk-post-auction-banner,
.mk-post-auction-banner,
.mk-poaukcionine-banner {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* gap-2 */
  padding: 1rem !important; /* p-4 */
  background-color: hsl(38 92% 50% / 0.1) !important; /* bg-amber-500/10 */
  border: 1px solid hsl(38 92% 50% / 0.2) !important; /* border-amber-500/20 */
  border-radius: 0.25rem !important; /* rounded-lg = var(--radius) = 4px */
  margin-bottom: 1.5rem !important; /* mb-6 */
}

/* Banner icon */
.mk-post-auction-banner svg.mk-banner-icon,
.mk-poaukcionine-banner svg {
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
  color: hsl(25 95% 53%) !important; /* text-amber-600 */
  flex-shrink: 0 !important;
}

/* Banner text */
.mk-post-auction-banner p,
.mk-poaukcionine-banner p,
.mk-banner-text {
  color: hsl(25 95% 25%) !important; /* text-amber-800 approx */
  font-size: 0.875rem !important; /* text-sm */
  margin: 0 !important;
  line-height: 1.5 !important;
}

.mk-banner-text strong {
  font-weight: 600 !important;
}

/* ------------------------------------------------------------------
   156.6: Filter row — COMPLETE IMPLEMENTATION
   React: flex flex-wrap items-center gap-4 mb-6 p-4 bg-muted/30 rounded-lg (lines 65-110)
   ------------------------------------------------------------------ */
.page-id-93 .mk-poaukcionine-filters,
.mk-poaukcionine-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem !important; /* gap-4 = 16px */
  padding: 1rem !important; /* p-4 = 16px */
  background-color: hsl(var(--muted) / 0.3) !important; /* bg-muted/30 */
  border-radius: 0.25rem !important; /* rounded-lg = var(--radius) = 4px */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
}

/* ------------------------------------------------------------------
   156.7: Filter select dropdowns — w-[180px]
   React: lines 66-95
   ------------------------------------------------------------------ */
.mk-poaukcionine-select {
  min-width: 180px !important; /* w-[180px] */
  width: 180px !important;
  height: 2.5rem !important; /* h-10 = 40px (SelectTrigger default) */
  padding: 0 2.25rem 0 0.75rem !important; /* px-3 + space for chevron */
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px */
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  font-size: 0.875rem !important; /* text-sm */
  font-family: var(--font-body) !important;
  cursor: pointer !important;
  appearance: none !important;
  /* Custom chevron down icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23577066' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
}

.mk-poaukcionine-select:focus {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
}

.mk-poaukcionine-select:hover {
  border-color: hsl(var(--foreground) / 0.3) !important;
}

/* ------------------------------------------------------------------
   156.8: Right side container (result count + view toggle)
   React: ml-auto flex items-center gap-2 (lines 97-109)
   ------------------------------------------------------------------ */
.mk-poaukcionine-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
}

/* Result count */
.mk-poaukcionine-count {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--muted-foreground)) !important;
  white-space: nowrap !important;
}

/* ------------------------------------------------------------------
   156.9: View toggle in filter row
   React: flex border border-border rounded-lg overflow-hidden (lines 101-108)
   ------------------------------------------------------------------ */
.mk-poaukcionine-filters .mk-view-toggle {
  display: flex !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.25rem !important; /* rounded-lg = 4px */
  overflow: hidden !important;
}

.mk-poaukcionine-filters .mk-view-toggle button {
  height: 2.25rem !important; /* h-9 for size="sm" */
  width: 2.25rem !important; /* w-9 for icon-only */
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  cursor: pointer !important;
  transition: background-color 150ms, color 150ms !important;
}

.mk-poaukcionine-filters .mk-view-toggle button:hover {
  background-color: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

/* Active state — variant="secondary" in React */
.mk-poaukcionine-filters .mk-view-toggle button.active,
.mk-poaukcionine-filters .mk-view-toggle button[aria-pressed="true"] {
  background-color: hsl(var(--secondary)) !important;
  color: hsl(var(--secondary-foreground)) !important;
}

.mk-poaukcionine-filters .mk-view-toggle button svg {
  width: 1rem !important; /* w-4 */
  height: 1rem !important; /* h-4 */
}

/* ------------------------------------------------------------------
   156.10: Product grid — 4 columns on xl, 3 on lg, 2 on sm, 1 on mobile
   React: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 (line 113)
   ------------------------------------------------------------------ */
.page-id-93 .mk-poaukcionine-grid,
.mk-poaukcionine-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
}

@media (min-width: 640px) {
  .page-id-93 .mk-poaukcionine-grid,
  .mk-poaukcionine-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* sm:grid-cols-2 */
  }
}

@media (min-width: 1024px) {
  .page-id-93 .mk-poaukcionine-grid,
  .mk-poaukcionine-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* lg:grid-cols-3 */
  }
}

@media (min-width: 1280px) {
  .page-id-93 .mk-poaukcionine-grid,
  .mk-poaukcionine-grid {
    grid-template-columns: repeat(4, 1fr) !important; /* xl:grid-cols-4 */
  }
}

/* ------------------------------------------------------------------
   156.11: No results state
   React: text-center py-16 (lines 123-132)
   ------------------------------------------------------------------ */
.mk-no-results {
  text-align: center !important;
  padding: 4rem 0 !important; /* py-16 */
}

.mk-no-results-icon {
  width: 4rem !important; /* w-16 */
  height: 4rem !important; /* h-16 */
  color: hsl(var(--muted-foreground) / 0.3) !important;
  margin: 0 auto 1rem !important; /* mx-auto mb-4 */
}

/* ------------------------------------------------------------------
   156.12: Responsive adjustments for filter row
   React: flex-wrap handles responsiveness (line 65)
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .page-id-93 .mk-poaukcionine-filters,
  .mk-poaukcionine-filters {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mk-poaukcionine-select {
    width: 100% !important;
    min-width: unset !important;
  }

  .mk-poaukcionine-right {
    margin-left: 0 !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
  }
}

/* ==========================================================================
   END SECTION 156: POST-AUCTION PAGE PARITY FIX — P12-FIX-AGENT
   ========================================================================== */

/* ==========================================================================
   SECTION 157: GIFT VOUCHER PAGE ADDITIONAL FIXES — FIX-17
   Date: 2026-03-23
   React Source: src/pages/GiftVoucher.tsx

   ISSUES FIXED:
   - 157.1: Feature card background — use var(--card) not #ffffff
   - 157.2: Feature card icons — ensure proper SVG sizing (w-10 h-10)
   - Note: H1 font-weight, button/overlay border-radius already fixed in Section 150

   React Feature Card (lines 141-147):
   className="bg-card rounded-xl p-6 border text-center"
   Icon: className="w-10 h-10 text-primary mx-auto mb-4"
   ========================================================================== */

/* ------------------------------------------------------------------
   157.1: Feature Card Background and Border
   React: bg-card rounded-xl p-6 border text-center
   bg-card = hsl(40 30% 96%) = #F5F1EA
   border = 1px solid hsl(var(--border))
   ------------------------------------------------------------------ */
.page-id-19 .mk-voucher-feature,
.page-id-19 .mk-feature-card,
body.page-id-19 .wp-block-group.mk-feature-card,
body.page-id-19 .entry-content .wp-block-columns .wp-block-column .wp-block-group {
  background-color: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
  padding: 1.5rem !important; /* p-6 = 24px */
  text-align: center !important;
}

/* ------------------------------------------------------------------
   157.2: Feature Card Icon Sizing
   React: className="w-10 h-10 text-primary mx-auto mb-4"
   w-10 h-10 = 2.5rem = 40px
   ------------------------------------------------------------------ */
.page-id-19 .mk-voucher-feature svg,
.page-id-19 .mk-feature-card svg,
body.page-id-19 .wp-block-group.mk-feature-card svg {
  width: 2.5rem !important; /* w-10 = 40px */
  height: 2.5rem !important; /* h-10 = 40px */
  color: hsl(var(--primary)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1rem !important; /* mb-4 = 16px */
}

/* ==========================================================================
   END SECTION 157: GIFT VOUCHER PAGE ADDITIONAL FIXES — FIX-17
   ========================================================================== */

/* ==========================================================================
   SECTION 157: MY ACCOUNT PAGE PARITY FIXES — P19
   Source: src/pages/Account.tsx
   Date: 2026-03-23

   Fixes:
   - Container padding Y: 2rem -> 3rem (py-12)
   - Stats cards gap: already correct at 1.5rem (gap-6)
   - Stats section margin: already correct at 3rem (mb-12)
   - Input border-radius: 0.125rem -> 0.375rem (standard rounded-md = 6px)
   - Card border-radius: already correct at 0.125rem (rounded-sm)
   ========================================================================== */

/* ------------------------------------------------------------------
   P19-1: Container Padding Override
   React: div.container.mx-auto.px-4.py-12 (py-12 = 3rem)
   ------------------------------------------------------------------ */
.woocommerce-account .woocommerce {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* ------------------------------------------------------------------
   P19-2: Stats Cards Gap & Margin Override
   React: div.grid.sm:grid-cols-3.gap-6.mb-12 (gap-6 = 1.5rem, mb-12 = 3rem)
   ------------------------------------------------------------------ */
.woocommerce-account .mk-stats-grid,
.woocommerce-account .mk-account-stats {
  gap: 1.5rem !important;
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

/* ------------------------------------------------------------------
   P19-3: Input Border-Radius Override
   React: Input uses rounded-md = 0.375rem (6px in standard Tailwind)
   ------------------------------------------------------------------ */
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="number"],
.woocommerce-account textarea,
.woocommerce-account select {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */
}

/* ------------------------------------------------------------------
   P19-4: Card Border-Radius Override
   React: div.bg-card.rounded-sm (rounded-sm = 0px per custom Tailwind config)
   ------------------------------------------------------------------ */
.woocommerce-account .mk-card,
.woocommerce-account .mk-stat-card,
.woocommerce-account .mk-account-stat,
.woocommerce-account .mk-info-card,
.woocommerce-account .mk-account-info {
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
}

/* ==========================================================================
   END SECTION 157: MY ACCOUNT PAGE PARITY FIXES — P19
   ========================================================================== */

/* ==========================================================================
   SECTION 158: NEWSLETTER & HOMEPAGE SECTIONS PARITY FIX — FIX-AGENT-14
   Date: 2026-03-23

   React Sources:
   - src/components/home/NewsletterSection.tsx (lines 39-52, 68-71)
   - src/components/ui/input.tsx (line 11: h-10 rounded-md)
   - src/components/home/GalleryPreview.tsx (line 14: gap-4)

   ISSUES FIXED:
   - P2-1: Newsletter input height should be fixed 40px (h-10), not padding-based
   - P2-2: Newsletter input border-radius: 0.125rem (2px = rounded-md CUSTOM config)
   - P2-3: Newsletter images should use rounded-sm (2px)
   - P2-4: Gallery preview grid gap should be 1rem (gap-4)
   - P2-5: Heading margin-bottom should be 1.5rem (mb-6)

   Reference: docs/PARITY-AGENT-LOGS/FIX-14-NEWSLETTER.md
   ========================================================================== */

/* ------------------------------------------------------------------
   P2-1 & P2-2: Newsletter Form Inputs — Fixed height + correct radius
   React Input: h-10 (2.5rem = 40px), rounded-md (0.375rem = 6px)
   Note: Using standard Tailwind rounded-md (6px) per user request
   ------------------------------------------------------------------ */
.mk-newsletter input[type="text"],
.mk-newsletter input[type="email"],
.mk-newsletter__form input[type="text"],
.mk-newsletter__form input[type="email"],
.mk-newsletter .wpcf7-form input[type="text"],
.mk-newsletter .wpcf7-form input[type="email"] {
  height: 2.5rem !important;              /* h-10 = 40px (fixed, not padding-based) */
  min-height: 2.5rem !important;          /* Ensure minimum height */
  max-height: 2.5rem !important;          /* Prevent height variance */
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */     /* rounded-md = 6px (standard Tailwind) */
  padding: 0 0.75rem !important;          /* px-3, vertical handled by line-height */
  line-height: 2.5rem !important;         /* Center text vertically */
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------------
   P2-3: Newsletter Images — rounded-sm (2px) + shadow-lg
   React: className="rounded-sm shadow-lg" (lines 69-70)
   ------------------------------------------------------------------ */
.mk-newsletter .wp-block-image img,
.mk-newsletter__images img,
.mk-newsletter figure.wp-block-image img {
  border-radius: 0 !important;     /* rounded-sm = 0px per custom Tailwind config */
}

/* ------------------------------------------------------------------
   P2-4: About Section Image — rounded-sm (2px)
   React: Similar styling to newsletter images
   ------------------------------------------------------------------ */
.mk-about-image img,
.mk-about-section .wp-block-image img,
.mk-about__image img {
  border-radius: 0 !important;     /* rounded-sm = 0px per custom Tailwind config */
}

/* ------------------------------------------------------------------
   P2-5: Gallery Preview Images — aspect-ratio instead of fixed heights
   React: h-40 (160px), h-52 (208px), h-64 (256px) with object-cover
   Using aspect-ratio for responsive behavior
   ------------------------------------------------------------------ */
.mk-gallery-preview img,
.mk-gallery-preview .wp-block-image img,
.mk-gallery-preview__grid img {
  aspect-ratio: 4/5 !important;           /* Consistent ratio matching product cards */
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;                /* Let aspect-ratio control height */
}

/* ------------------------------------------------------------------
   P2-6: Gallery Preview Grid Gap — 1rem (gap-4)
   React: className="grid grid-cols-2 gap-4" (line 14)
   ------------------------------------------------------------------ */
.mk-gallery-preview .wp-block-columns,
.mk-gallery-preview__grid {
  gap: 1rem !important;                   /* gap-4 = 16px */
}

/* Inner column space-y-4 */
.mk-gallery-preview .wp-block-column {
  gap: 1rem !important;                   /* space-y-4 = 16px */
}

/* ------------------------------------------------------------------
   P2-7: Section Heading Margins — mb-6 (1.5rem)
   React: className="mb-6" on headings (NewsletterSection line 32-34)
   ------------------------------------------------------------------ */
.mk-newsletter h2,
.mk-newsletter__content h2,
.mk-gallery-preview h2 {
  margin-bottom: 1.5rem !important;       /* mb-6 = 24px */
}

/* ==========================================================================
   END SECTION 158: NEWSLETTER & HOMEPAGE SECTIONS PARITY FIX — FIX-AGENT-14
   ========================================================================== */

/* ==========================================================================
   SECTION 157: PARDAVIMAS PAGE DEFINITIVE FIX — FIX-4
   Generated: 2026-03-23
   Reference: docs/PARITY-AGENT-LOGS/FIX-4-PARDAVIMAS-HERO.md

   CRITICAL: React HowToSell.tsx has NO hero section.
   Page starts with H1 on cream background.
   This section provides maximum-specificity overrides to ensure parity.
   ========================================================================== */

/* ------------------------------------------------------------------
   FIX-4-1: NUCLEAR OPTION - Hide ANY dark background at page start
   Target every possible structure that could create a dark hero
   ------------------------------------------------------------------ */

/* Hide wp-block-cover anywhere in the content */
body.page-id-17 .wp-block-cover,
body.page-id-17 .wp-block-cover.has-background-dim,
body.page-id-17 .wp-block-cover.has-primary-background-color,
body.page-id-17 main .wp-block-cover,
body.page-id-17 .entry-content .wp-block-cover,
body.page-id-17 .wp-block-post-content .wp-block-cover {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* Hide any group with primary (dark green) background */
body.page-id-17 .wp-block-group.has-primary-background-color,
body.page-id-17 .wp-block-group.has-forest-background-color,
body.page-id-17 .wp-block-group[style*="background-color: hsl(160"],
body.page-id-17 .wp-block-group[style*="background:#3"] {
  display: none !important;
}

/* Hide any hero-specific classes */
body.page-id-17 .mk-page-hero,
body.page-id-17 .mk-hero,
body.page-id-17 [class*="page-hero"],
body.page-id-17 [class*="page-header"]:not(header) {
  display: none !important;
}

/* ------------------------------------------------------------------
   FIX-4-2: Force cream background on main content area
   Ensure the page always shows cream background
   ------------------------------------------------------------------ */
body.page-id-17,
body.page-id-17 main,
body.page-id-17 .site-content,
body.page-id-17 .entry-content,
body.page-id-17 .wp-block-post-content,
body.page-id-17 #main-content {
  background-color: hsl(36 33% 94%) !important; /* --background: cream */
}

/* ------------------------------------------------------------------
   FIX-4-3: H1 Title - Dark text on cream (CRITICAL)
   React: text-3xl md:text-4xl font-semibold text-foreground mb-4
   ------------------------------------------------------------------ */
body.page-id-17 h1,
body.page-id-17 .wp-block-post-title,
body.page-id-17 .entry-title,
body.page-id-17 main h1:first-of-type {
  font-family: var(--font-display) !important;
  font-size: 1.875rem !important; /* text-3xl = 30px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* --foreground: forest-dark */
  margin-bottom: 1rem !important; /* mb-4 */
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}

@media (min-width: 768px) {
  body.page-id-17 h1,
  body.page-id-17 .wp-block-post-title,
  body.page-id-17 .entry-title,
  body.page-id-17 main h1:first-of-type {
    font-size: 2.25rem !important; /* md:text-4xl = 36px */
  }
}

/* Intro paragraph styling */
body.page-id-17 main > .wp-block-group > p:first-of-type,
body.page-id-17 .entry-content > p:first-of-type {
  color: hsl(160 15% 40%) !important; /* --muted-foreground */
  line-height: 1.625 !important; /* leading-relaxed */
  margin-bottom: 3rem !important; /* mb-12 */
}

/* ------------------------------------------------------------------
   FIX-4-4: Step Icons - MUST be 40px (React w-10 h-10)
   Override ALL possible ways the icon size could be wrong
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step__icon svg,
body.page-id-17 .mk-sell-step-icon svg,
body.page-id-17 .mk-sell-step svg,
body.page-id-17 .mk-sell-step-card svg,
body.page-id-17 .wp-block-column svg,
body.page-id-17 [class*="sell-step"] svg {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  color: hsl(160 30% 28%) !important; /* text-primary */
}

/* Icon container margin */
body.page-id-17 .mk-sell-step__icon,
body.page-id-17 .mk-sell-step-icon,
body.page-id-17 [class*="step__icon"],
body.page-id-17 [class*="step-icon"] {
  margin-bottom: 1rem !important; /* mb-4 */
}

/* ------------------------------------------------------------------
   FIX-4-5: Number Badges - 32px gold circles (React w-8 h-8)
   Position: -top-3 -left-3 = -0.75rem from top-left corner
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step__badge,
body.page-id-17 .mk-sell-step__number,
body.page-id-17 .mk-sell-step-number,
body.page-id-17 [class*="step__badge"],
body.page-id-17 [class*="step__number"],
body.page-id-17 [class*="step-number"] {
  position: absolute !important;
  top: -0.75rem !important; /* -top-3 */
  left: -0.75rem !important; /* -left-3 */
  width: 2rem !important; /* w-8 = 32px */
  height: 2rem !important; /* h-8 = 32px */
  min-width: 2rem !important;
  min-height: 2rem !important;
  background: hsl(42 55% 58%) !important; /* bg-gold */
  color: hsl(160 30% 18%) !important; /* text-foreground (dark) */
  border-radius: 9999px !important; /* rounded-full */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important; /* font-bold */
  font-size: 0.875rem !important; /* text-sm = 14px */
  z-index: 10 !important;
  box-shadow: var(--shadow-card) !important;
  line-height: 1 !important;
}

/* Ensure p tag inside badge doesn't add extra styling */
body.page-id-17 .mk-sell-step__badge p,
body.page-id-17 .mk-sell-step__number p,
body.page-id-17 [class*="step__number"] p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* ------------------------------------------------------------------
   FIX-4-6: Step Cards - Shadow only, NO borders (CRITICAL)
   React: bg-card rounded-sm shadow-card p-6 relative
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step,
body.page-id-17 .mk-sell-step-card,
body.page-id-17 .wp-block-column.mk-sell-step,
body.page-id-17 [class*="sell-step"]:not([class*="icon"]):not([class*="badge"]):not([class*="number"]):not([class*="title"]):not([class*="desc"]) {
  position: relative !important;
  background: hsl(40 30% 96%) !important; /* bg-card */
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important; /* p-6 */
  border: 0 none transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  transition: box-shadow 300ms ease !important;
  overflow: visible !important; /* Allow badge to overflow */
}

body.page-id-17 .mk-sell-step:hover,
body.page-id-17 .mk-sell-step-card:hover,
body.page-id-17 [class*="sell-step"]:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* ------------------------------------------------------------------
   FIX-4-7: Step Title - React text-lg font-semibold mb-2
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step__title,
body.page-id-17 .mk-sell-step h3,
body.page-id-17 [class*="sell-step"] h3 {
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important; /* mb-2 */
  line-height: 1.4 !important;
}

/* ------------------------------------------------------------------
   FIX-4-8: Step Description - React text-sm text-muted-foreground
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step__desc,
body.page-id-17 .mk-sell-step p:not(.mk-sell-step__number),
body.page-id-17 [class*="sell-step"] p:not([class*="number"]) {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------
   FIX-4-9: Steps Grid - React grid md:grid-cols-2 lg:grid-cols-4 gap-6
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-steps-grid,
body.page-id-17 .mk-sell-steps .wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 */
}

@media (min-width: 768px) {
  body.page-id-17 .mk-sell-steps-grid,
  body.page-id-17 .mk-sell-steps .wp-block-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  body.page-id-17 .mk-sell-steps-grid,
  body.page-id-17 .mk-sell-steps .wp-block-columns {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ------------------------------------------------------------------
   FIX-4-10: Mobile Responsive Adjustments
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  body.page-id-17 .mk-sell-step,
  body.page-id-17 .mk-sell-step-card {
    padding: 1.25rem !important;
  }

  body.page-id-17 .mk-sell-step__icon svg,
  body.page-id-17 .mk-sell-step-icon svg {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
  }

  body.page-id-17 .mk-sell-step__title,
  body.page-id-17 [class*="sell-step"] h3 {
    font-size: 1rem !important;
  }
}

/* ==========================================================================
   END SECTION 157: PARDAVIMAS PAGE DEFINITIVE FIX — FIX-4
   ========================================================================== */

/* ==========================================================================
   SECTION 159: P9 SINGLE PRODUCT TRUST BADGES PARITY FIX (FIX-6-AGENT)
   Date: 2026-03-23
   Reference: docs/PARITY-AGENT-LOGS/FIX-6-SINGLE-PRODUCT.md

   React Source: ArtworkDetail.tsx lines 143-157
   React trust badges structure:
   - grid grid-cols-3 gap-4 mt-6
   - Each badge: flex flex-col items-center text-center p-4 bg-muted/30 rounded-sm
   - Icon: w-6 h-6 text-primary mb-2
   - Text: span with text-xs text-muted-foreground (NO H4 title)

   WordPress has:
   - H4 heading for title
   - Paragraph for description

   Fix: Hide H4 titles, style paragraphs as text-xs
   ========================================================================== */

/* ------------------------------------------------------------------
   P9-1: Trust Badges - Hide H4 Titles
   React: Only has span with text-xs (no titles)
   WordPress: Has H4 titles + paragraph descriptions
   Fix: Hide H4s, style paragraphs as text-xs
   ------------------------------------------------------------------ */
.single-product .mk-trust-badges__item h4,
.single-product .mk-trust-badges .wp-block-heading,
.single-product .mk-trust-badges .wp-block-group h4.wp-block-heading {
  display: none !important;
}

/* Style paragraph as text-xs to match React span */
.single-product .mk-trust-badges__item p,
.single-product .mk-trust-badges .wp-block-paragraph {
  font-size: 0.75rem !important; /* text-xs = 12px */
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1rem !important;
  margin: 0 !important;
  text-align: center !important;
}

/* ------------------------------------------------------------------
   P9-2: Trust Badges - Correct Padding
   React: p-4 = 1rem padding
   WordPress template had spacing--40 = 1.5rem
   ------------------------------------------------------------------ */
.single-product .mk-trust-badges__item {
  padding: 1rem !important;
  gap: 0.5rem !important; /* mb-2 on icon = 0.5rem */
}

/* ------------------------------------------------------------------
   P9-3: Trust Badges - Icon Styling
   React: w-6 h-6 text-primary mb-2
   ------------------------------------------------------------------ */
.single-product .mk-trust-badges__icon {
  margin-bottom: 0 !important; /* Remove extra margin, gap handles it */
}

.single-product .mk-trust-badges__icon svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  stroke: hsl(var(--primary)) !important;
}

/* ------------------------------------------------------------------
   P9-4: Trust Badges - Background Color
   React: bg-muted/30 (30% opacity)
   ------------------------------------------------------------------ */
.single-product .mk-trust-badges__item.has-muted-background-color {
  background: hsl(var(--muted) / 0.3) !important;
}

/* ------------------------------------------------------------------
   P9-5: Trust Badges - Border Radius
   React: rounded-sm = 0.125rem (2px)
   ------------------------------------------------------------------ */
.single-product .mk-trust-badges__item {
  border-radius: 0.125rem !important;
}

/* ------------------------------------------------------------------
   P9-6: Trust Badges - Container Styling
   React: grid grid-cols-3 gap-4 mt-6
   ------------------------------------------------------------------ */
.single-product .mk-trust-badges > .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important; /* gap-4 */
}

.single-product .mk-trust-badges > .wp-block-columns > .wp-block-column {
  flex: none !important;
  width: auto !important;
}

/* ------------------------------------------------------------------
   P9-7: Trust Badges Section - Remove Section Padding
   React: No section wrapper, just grid
   ------------------------------------------------------------------ */
.single-product .mk-trust-badges.wp-block-group {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ==========================================================================
   END SECTION 159: P9 SINGLE PRODUCT TRUST BADGES PARITY FIX
   ========================================================================== */

/* ==========================================================================
   SECTION 158: GALLERY PAGE FILTER BUTTON PARITY — FIX-12 (P11)
   Date: 2026-03-23

   React Source: src/pages/Gallery.tsx lines 50-62
   React Button: variant={selected ? 'default' : 'outline'} size="sm"

   From src/components/ui/button.tsx:
   - size="sm": h-9 px-4 = height 2.25rem (36px), padding 0 1rem (16px)
   - variant="outline": border border-primary text-primary bg-transparent rounded
   - variant="default": bg-primary text-primary-foreground rounded

   Issues Fixed:
   - P11-H1: Filter button height should be 36px (h-9)
   - P11-H2: Filter button padding should be 1rem (px-4)
   - P11-H3: Price should be text-primary (forest green) not foreground
   - P11-M1: Hide elements React GalleryCard doesn't show
   ========================================================================== */

/* ------------------------------------------------------------------
   158.1: Gallery Filter Button - Exact React Size sm Parity
   React: h-9 px-4 = height 36px, padding 0 16px
   HIGH SPECIFICITY to override earlier conflicting rules
   ------------------------------------------------------------------ */
body.page-id-92 .mk-gallery-filter-btn,
body.page-id-92 .mk-gallery-cat-btn,
body.page-id-92 .wp-block-button__link[data-category],
.page-id-92 .mk-gallery-filters .wp-block-button__link,
.page-id-92 .wp-block-buttons .wp-block-button__link,
.mk-gallery-filter-btn {
  height: 2.25rem !important;           /* h-9 = 36px */
  padding: 0 1rem !important;           /* px-4 = 16px horizontal */
  border-radius: 0.25rem !important;    /* rounded = var(--radius) = 4px */
  font-size: 0.875rem !important;       /* text-sm = 14px */
  font-weight: 500 !important;          /* font-medium */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  transition: all 300ms ease !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------
   158.2: Gallery Filter Button - Outline Variant (Inactive State)
   React: border border-primary text-primary bg-transparent
          hover:bg-primary hover:text-primary-foreground
   ------------------------------------------------------------------ */
body.page-id-92 .mk-gallery-filter-btn:not(.is-active):not(.mk-gallery-filter-btn--active),
body.page-id-92 .mk-gallery-cat-btn:not(.is-active),
body.page-id-92 .wp-block-button__link[data-category]:not(.is-active),
.mk-gallery-filter-btn:not(.is-active) {
  background: transparent !important;
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

body.page-id-92 .mk-gallery-filter-btn:not(.is-active):hover,
body.page-id-92 .mk-gallery-cat-btn:not(.is-active):hover,
body.page-id-92 .wp-block-button__link[data-category]:not(.is-active):hover,
.mk-gallery-filter-btn:not(.is-active):hover {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* ------------------------------------------------------------------
   158.3: Gallery Filter Button - Default Variant (Active State)
   React: bg-primary text-primary-foreground hover:bg-primary/90
   ------------------------------------------------------------------ */
body.page-id-92 .mk-gallery-filter-btn.is-active,
body.page-id-92 .mk-gallery-filter-btn--active,
body.page-id-92 .mk-gallery-cat-btn.is-active,
body.page-id-92 .wp-block-button__link[data-category].is-active,
.mk-gallery-filter-btn.is-active {
  background: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

body.page-id-92 .mk-gallery-filter-btn.is-active:hover,
body.page-id-92 .mk-gallery-filter-btn--active:hover,
body.page-id-92 .mk-gallery-cat-btn.is-active:hover,
body.page-id-92 .wp-block-button__link[data-category].is-active:hover,
.mk-gallery-filter-btn.is-active:hover {
  background: hsl(var(--primary) / 0.9) !important;
}

/* ------------------------------------------------------------------
   158.4: Gallery Card Price - text-primary (Forest Green)
   React GalleryCard: <div className="text-xl font-bold text-primary mb-4">
   Override any foreground color rules
   ------------------------------------------------------------------ */
body.page-id-92 .mk-product-card .price,
body.page-id-92 .mk-gallery-card .price,
body.page-id-92 .mk-gallery-card__price,
body.page-id-92 .wc-block-grid__product-price,
body.page-id-92 .wc-block-components-product-price,
body.page-id-92 li.product .price,
.page-id-92 .price,
.mk-gallery-card .mk-price,
.mk-gallery-card__price {
  color: hsl(var(--primary)) !important;  /* text-primary = forest green */
  font-size: 1.25rem !important;          /* text-xl = 20px */
  font-weight: 700 !important;            /* font-bold */
  margin-bottom: 1rem !important;         /* mb-4 = 16px */
}

/* ------------------------------------------------------------------
   158.5: Hide Auction-Only Elements on Gallery Page
   React GalleryCard does NOT show: lot number, "Pirkti dabar" badge,
   estimate range, bid count, auction timer, status badges
   ------------------------------------------------------------------ */
body.page-id-92 .mk-lot-number,
body.page-id-92 .mk-lot-prefix,
body.page-id-92 .mk-card-meta__lot,
body.page-id-92 .mk-badge--buy-now,
body.page-id-92 .mk-badge--auction,
body.page-id-92 .mk-badge--active,
body.page-id-92 .mk-badge--ending,
body.page-id-92 .mk-badge--upcoming,
body.page-id-92 .mk-card-meta__estimate,
body.page-id-92 .mk-estimate-range,
body.page-id-92 .mk-card-meta__bids,
body.page-id-92 .mk-bid-count,
body.page-id-92 .mk-card-timer,
body.page-id-92 .auction-time-left,
body.page-id-92 .mk-status-badge,
.page-id-92 .mk-lot-number,
.page-id-92 .mk-badge--buy-now {
  display: none !important;
  visibility: hidden !important;
}

/* ==========================================================================
   END SECTION 158: GALLERY PAGE FILTER BUTTON PARITY — FIX-12 (P11)
   ========================================================================== */

/* ==========================================================================
   SECTION 158: NEWSLETTER & HOMEPAGE SECTIONS PARITY FIX — FIX-AGENT-14
   Date: 2026-03-23

   React Sources:
   - src/components/home/NewsletterSection.tsx (lines 39-52, 68-71)
   - src/components/ui/input.tsx (line 11: h-10 rounded-md)
   - src/components/home/GalleryPreview.tsx (line 14: gap-4)

   ISSUES FIXED:
   - P2-1: Newsletter input height should be fixed 40px (h-10), not padding-based
   - P2-2: Newsletter input border-radius: 0.125rem (2px = rounded-md CUSTOM config)
   - P2-3: Newsletter images should use rounded-sm (2px)
   - P2-4: Gallery preview grid gap should be 1rem (gap-4)
   - P2-5: Heading margin-bottom should be 1.5rem (mb-6)

   Reference: docs/PARITY-AGENT-LOGS/FIX-14-NEWSLETTER.md
   ========================================================================== */

/* ------------------------------------------------------------------
   P2-1 & P2-2: Newsletter Form Inputs — Fixed height + correct radius
   React Input: h-10 (2.5rem = 40px), rounded-md (0.375rem = 6px)
   Note: Using standard Tailwind rounded-md (6px) per user request
   ------------------------------------------------------------------ */
.mk-newsletter input[type="text"],
.mk-newsletter input[type="email"],
.mk-newsletter__form input[type="text"],
.mk-newsletter__form input[type="email"],
.mk-newsletter .wpcf7-form input[type="text"],
.mk-newsletter .wpcf7-form input[type="email"] {
  height: 2.5rem !important;              /* h-10 = 40px (fixed, not padding-based) */
  min-height: 2.5rem !important;          /* Ensure minimum height */
  max-height: 2.5rem !important;          /* Prevent height variance */
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */     /* rounded-md = 6px (standard Tailwind) */
  padding: 0 0.75rem !important;          /* px-3, vertical handled by line-height */
  line-height: 2.5rem !important;         /* Center text vertically */
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------------
   P2-3: Newsletter Images — rounded-sm (2px) + shadow-lg
   React: className="rounded-sm shadow-lg" (lines 69-70)
   ------------------------------------------------------------------ */
.mk-newsletter .wp-block-image img,
.mk-newsletter__images img,
.mk-newsletter figure.wp-block-image img {
  border-radius: 0 !important;     /* rounded-sm = 0px per custom Tailwind config */
}

/* ------------------------------------------------------------------
   P2-4: About Section Image — rounded-sm (2px)
   React: Similar styling to newsletter images
   ------------------------------------------------------------------ */
.mk-about-image img,
.mk-about-section .wp-block-image img,
.mk-about__image img {
  border-radius: 0 !important;     /* rounded-sm = 0px per custom Tailwind config */
}

/* ------------------------------------------------------------------
   P2-5: Gallery Preview Images — aspect-ratio instead of fixed heights
   React: h-40 (160px), h-52 (208px), h-64 (256px) with object-cover
   Using aspect-ratio for responsive behavior
   ------------------------------------------------------------------ */
.mk-gallery-preview img,
.mk-gallery-preview .wp-block-image img,
.mk-gallery-preview__grid img {
  aspect-ratio: 4/5 !important;           /* Consistent ratio matching product cards */
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;                /* Let aspect-ratio control height */
}

/* ------------------------------------------------------------------
   P2-6: Gallery Preview Grid Gap — 1rem (gap-4)
   React: className="grid grid-cols-2 gap-4" (line 14)
   ------------------------------------------------------------------ */
.mk-gallery-preview .wp-block-columns,
.mk-gallery-preview__grid {
  gap: 1rem !important;                   /* gap-4 = 16px */
}

/* Inner column space-y-4 */
.mk-gallery-preview .wp-block-column {
  gap: 1rem !important;                   /* space-y-4 = 16px */
}

/* ------------------------------------------------------------------
   P2-7: Section Heading Margins — mb-6 (1.5rem)
   React: className="mb-6" on headings (NewsletterSection line 32-34)
   ------------------------------------------------------------------ */
.mk-newsletter h2,
.mk-newsletter__content h2,
.mk-gallery-preview h2 {
  margin-bottom: 1.5rem !important;       /* mb-6 = 24px */
}

/* ==========================================================================
   END SECTION 158: NEWSLETTER & HOMEPAGE SECTIONS PARITY FIX — FIX-AGENT-14
   ========================================================================== */

/* ==========================================================================
   SECTION 158: INFORMACIJA PAGE ICON & TAB PARITY FIXES (P16 FIX-7)
   Date: 2026-03-23

   Issue: Panel header icons are 16px but should be 32px (2rem)
   React source: src/pages/Information.tsx

   Key React values:
   - Panel icons: w-8 h-8 (2rem = 32px) text-gold (lines 350, 372, 394, etc.)
   - Tab icons: w-4 h-4 (1rem = 16px) (line 339)
   - Tab container: bg-muted/50 p-2 rounded-xl (line 330)
   - Tab triggers: rounded-sm pills (line 337, via tabs.tsx line 30)
   - FAQ chevron: h-4 w-4 with rotate-180 animation (accordion.tsx lines 25, 31)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   158.1 PANEL HEADER ICONS — 32px GOLD (w-8 h-8 text-gold)
   React: <Gavel className="w-8 h-8 text-gold" /> (Information.tsx line 350)
   Comprehensive selectors to ensure icon sizing works regardless of HTML structure
   --------------------------------------------------------------------------- */
.mk-info-panel-header svg,
.mk-info-panel__icon svg,
.mk-info-section__icon svg,
.mk-info-content .mk-panel-header svg,
.informacija-content .wp-block-group > svg,
.page-informacija .mk-info-panel-header svg,
[class*="mk-info-panel"] svg:first-child,
.mk-info-tabs__content .mk-info-panel-header svg,
.mk-info-tabs__content--active .mk-info-panel-header svg {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  color: hsl(var(--gold)) !important;
  flex-shrink: 0 !important;
}

/* Ensure SVGs inside heading groups are also 32px */
.mk-info-panel-header h2 + svg,
.mk-info-panel-header svg + h2,
h2.mk-info-panel-header svg,
.mk-info-content h2 svg,
.mk-info-panel h2 svg {
  width: 2rem !important;
  height: 2rem !important;
  color: hsl(var(--gold)) !important;
}

/* Override any generic small icon rules for panel headers specifically */
.mk-info-panel-header svg:not(.mk-tab-icon) {
  width: 2rem !important;
  height: 2rem !important;
}

/* ---------------------------------------------------------------------------
   158.2 TAB TRIGGER ICONS — 16px (w-4 h-4)
   React: <Icon className="w-4 h-4" /> (Information.tsx line 339)
   These should remain 16px, just ensure they have proper styling
   --------------------------------------------------------------------------- */
.mk-info-tab-btn svg,
.mk-info-tabs__nav a svg,
.mk-info-tabs__trigger svg,
.mk-tab-icon {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
  color: inherit !important;
}

/* ---------------------------------------------------------------------------
   158.3 TAB CONTAINER — Pill-in-rounded-container style
   React: flex flex-wrap h-auto gap-2 bg-muted/50 p-2 rounded-xl mb-8
   (Information.tsx line 330)
   --------------------------------------------------------------------------- */
.mk-info-tabs__nav,
.mk-info-tabs__list,
.informacija-tabs-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important; /* gap-2 */
  background: hsl(var(--muted) / 0.5) !important; /* bg-muted/50 */
  padding: 0.5rem !important; /* p-2 */
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
  margin-bottom: 2rem !important; /* mb-8 */
  border: none !important;
  height: auto !important; /* h-auto */
  align-items: center !important;
}

/* Remove any bottom border styling (should be container, not underline tabs) */
.mk-info-tabs__nav {
  border-bottom: none !important;
}

/* ---------------------------------------------------------------------------
   158.4 TAB TRIGGERS — Rounded-sm pills
   React: rounded-sm px-4 py-2.5 (tabs.tsx line 30, Information.tsx line 337)
   Note: Tailwind rounded-sm = 0.125rem (2px)
   --------------------------------------------------------------------------- */
.mk-info-tab-btn,
.mk-info-tabs__trigger,
.mk-info-tabs__nav a,
.informacija-tab-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important; /* gap-2 */
  padding: 0.625rem 1rem !important; /* py-2.5 px-4 */
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
  background: transparent !important;
  border: none !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
  text-decoration: none !important;
}

/* Tab hover state */
.mk-info-tab-btn:hover:not(.active):not([aria-current="page"]),
.mk-info-tabs__nav a:hover:not(.active):not([aria-current="page"]) {
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--background) / 0.5) !important;
}

/* Tab active state — React: data-[state=active]:bg-primary data-[state=active]:text-primary-foreground */
.mk-info-tab-btn.active,
.mk-info-tab-btn[aria-selected="true"],
.mk-info-tabs__trigger.active,
.mk-info-tabs__nav a.active,
.mk-info-tabs__nav a[aria-current="page"] {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

/* Active tab hover (slightly darker) */
.mk-info-tab-btn.active:hover,
.mk-info-tabs__nav a.active:hover,
.mk-info-tabs__nav a[aria-current="page"]:hover {
  background: hsl(160 30% 24%) !important;
}

/* ---------------------------------------------------------------------------
   158.5 FAQ ACCORDION CHEVRON — Rotation Animation
   React: ChevronDown h-4 w-4 shrink-0 transition-transform duration-200
   [&[data-state=open]>svg]:rotate-180 (accordion.tsx lines 25, 31)
   --------------------------------------------------------------------------- */
.mk-faq-chevron,
.mk-faq-question svg,
.mk-faq-item button svg:last-child,
.mk-faq-trigger svg,
details.mk-faq-item summary svg {
  width: 1rem !important; /* h-4 w-4 */
  height: 1rem !important;
  flex-shrink: 0 !important;
  transition: transform 200ms ease !important; /* transition-transform duration-200 */
  color: hsl(var(--muted-foreground)) !important;
}

/* Chevron rotation when open */
.mk-faq-item--open .mk-faq-chevron,
.mk-faq-item[data-state="open"] .mk-faq-chevron,
.mk-faq-item[open] .mk-faq-chevron,
.mk-faq-question[aria-expanded="true"] svg,
.mk-faq-question[aria-expanded="true"] .mk-faq-chevron,
.mk-faq-trigger[aria-expanded="true"] svg,
details.mk-faq-item[open] summary svg {
  transform: rotate(180deg) !important;
}

/* Ensure smooth transition on close as well */
.mk-faq-item:not(.mk-faq-item--open) .mk-faq-chevron,
.mk-faq-item:not([data-state="open"]) .mk-faq-chevron,
.mk-faq-item:not([open]) .mk-faq-chevron,
.mk-faq-question:not([aria-expanded="true"]) svg {
  transform: rotate(0deg) !important;
}

/* ==========================================================================
   END SECTION 158: INFORMACIJA PAGE ICON & TAB PARITY FIXES (P16 FIX-7)
   ========================================================================== */

/* ==========================================================================
   SECTION 160: PIRKIMAS PAGE DEFINITIVE FIX — FIX-3
   Generated: 2026-03-23
   Reference: docs/PARITY-AGENT-LOGS/FIX-3-PIRKIMAS-HERO.md

   CRITICAL: React HowToBuy.tsx has NO hero section.
   Page starts with H1 on cream background (bg-background).

   React source: src/pages/HowToBuy.tsx
   - Container: container mx-auto px-4 py-12 (max-w-4xl = 56rem)
   - H1: text-3xl md:text-4xl font-semibold text-foreground mb-4
   - Intro: text-muted-foreground leading-relaxed mb-12
   - Steps: 5 numbered steps with w-16 h-16 (4rem) circular badges
   - Feature cards: bg-card rounded-xl p-6 border text-center (3 columns)
   ========================================================================== */

/* ------------------------------------------------------------------
   FIX-3-1: NUCLEAR OPTION - Hide ANY dark background at page start
   Target every possible structure that could create a dark hero
   ------------------------------------------------------------------ */

/* Hide wp-block-cover anywhere in the content */
body.page-id-16 .wp-block-cover,
body.page-id-16 .wp-block-cover.has-background-dim,
body.page-id-16 .wp-block-cover.has-primary-background-color,
body.page-id-16 main .wp-block-cover,
body.page-id-16 .entry-content .wp-block-cover,
body.page-id-16 .wp-block-post-content .wp-block-cover {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* Hide any group with primary (dark green) background */
body.page-id-16 .wp-block-group.has-primary-background-color,
body.page-id-16 .wp-block-group.has-forest-background-color,
body.page-id-16 .wp-block-group[style*="background-color: hsl(160"],
body.page-id-16 .wp-block-group[style*="background:#3"] {
  display: none !important;
}

/* Hide any hero-specific classes */
body.page-id-16 .mk-page-hero,
body.page-id-16 .mk-hero,
body.page-id-16 [class*="page-hero"],
body.page-id-16 [class*="page-header"]:not(header) {
  display: none !important;
}

/* ------------------------------------------------------------------
   FIX-3-2: Force cream background on main content area
   Ensure the page always shows cream background
   ------------------------------------------------------------------ */
body.page-id-16,
body.page-id-16 main,
body.page-id-16 .site-content,
body.page-id-16 .entry-content,
body.page-id-16 .wp-block-post-content,
body.page-id-16 #main-content {
  background-color: hsl(36 33% 94%) !important; /* --background: cream */
}

/* ------------------------------------------------------------------
   FIX-3-3: H1 Title - Dark text on cream (CRITICAL)
   React: text-3xl md:text-4xl font-semibold text-foreground mb-4
   text-3xl = 1.875rem (30px), text-4xl = 2.25rem (36px)
   ------------------------------------------------------------------ */
body.page-id-16 h1,
body.page-id-16 .wp-block-post-title,
body.page-id-16 .entry-title,
body.page-id-16 main h1:first-of-type {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.875rem !important; /* text-3xl = 30px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* --foreground: forest-dark */
  margin-bottom: 1rem !important; /* mb-4 */
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  text-align: left !important;
}

@media (min-width: 768px) {
  body.page-id-16 h1,
  body.page-id-16 .wp-block-post-title,
  body.page-id-16 .entry-title,
  body.page-id-16 main h1:first-of-type {
    font-size: 2.25rem !important; /* md:text-4xl = 36px */
  }
}

/* Intro paragraph styling */
body.page-id-16 main > .wp-block-group > p:first-of-type,
body.page-id-16 .entry-content > p:first-of-type,
body.page-id-16 .mk-pirkimas-page > p:first-of-type {
  color: hsl(160 15% 40%) !important; /* --muted-foreground */
  line-height: 1.625 !important; /* leading-relaxed */
  margin-bottom: 3rem !important; /* mb-12 */
}

/* ------------------------------------------------------------------
   FIX-3-4: Step Number Badges - MUST be 64px (React w-16 h-16)
   React: w-16 h-16 = 4rem = 64px circular badges with bg-primary
   ------------------------------------------------------------------ */
body.page-id-16 .mk-step__number,
body.page-id-16 .mk-steps .mk-step__number,
body.page-id-16 .wp-block-group.mk-step__number {
  width: 4rem !important; /* w-16 = 64px */
  height: 4rem !important; /* h-16 = 64px */
  min-width: 4rem !important;
  min-height: 4rem !important;
  max-width: 4rem !important;
  max-height: 4rem !important;
  background-color: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground (cream-light) */
  border-radius: 9999px !important; /* rounded-full */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

body.page-id-16 .mk-step__number p {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 700 !important; /* font-bold */
  color: hsl(40 30% 96%) !important; /* inherit from parent */
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* ------------------------------------------------------------------
   FIX-3-5: Step Titles - React text-xl font-semibold
   ------------------------------------------------------------------ */
body.page-id-16 .mk-step__title,
body.page-id-16 .mk-steps h3 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 0.5rem !important; /* mb-2 */
  line-height: 1.4 !important;
}

/* ------------------------------------------------------------------
   FIX-3-6: Step Descriptions - React text-muted-foreground
   ------------------------------------------------------------------ */
body.page-id-16 .mk-step__desc,
body.page-id-16 .mk-steps p.mk-step__desc {
  font-size: 1rem !important; /* text-base = 16px */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------
   FIX-3-7: Steps Container - vertical spacing
   React: space-y-8 (gap of 2rem between steps)
   ------------------------------------------------------------------ */
body.page-id-16 .mk-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important; /* space-y-8 = 32px */
}

/* Each step row: columns layout */
body.page-id-16 .mk-step,
body.page-id-16 .mk-steps .wp-block-columns.mk-step {
  display: flex !important;
  gap: 1.5rem !important; /* gap-6 = 24px between number and content */
  align-items: flex-start !important;
}

/* ------------------------------------------------------------------
   FIX-3-8: Feature Cards - React bg-card rounded-xl p-6 border text-center
   rounded-xl = 0.75rem (12px) per standard Tailwind
   Note: This project uses custom rounded-sm = 0px, but rounded-xl = 12px standard
   ------------------------------------------------------------------ */
body.page-id-16 .mk-card,
body.page-id-16 .mk-feature-card,
body.page-id-16 .wp-block-group.mk-card {
  background-color: hsl(40 30% 96%) !important; /* bg-card */
  border: 1px solid hsl(36 20% 82%) !important; /* border */
  border-radius: 0.5rem !important; /* rounded-xl = 8px (CUSTOM) */
  padding: 1.5rem !important; /* p-6 = 24px */
  text-align: center !important;
}

/* Feature card icons */
body.page-id-16 .mk-card svg,
body.page-id-16 .mk-feature-card svg {
  width: 2.5rem !important; /* w-10 = 40px */
  height: 2.5rem !important; /* h-10 = 40px */
  color: hsl(160 30% 28%) !important; /* text-primary */
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1rem !important; /* mb-4 */
}

/* Feature card headings */
body.page-id-16 .mk-card h4,
body.page-id-16 .mk-feature-card h4 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1rem !important; /* text-base */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 0.5rem !important;
}

/* Feature card descriptions */
body.page-id-16 .mk-card p,
body.page-id-16 .mk-feature-card p {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  margin: 0 !important;
}

/* ------------------------------------------------------------------
   FIX-3-9: Feature Cards Grid - React grid md:grid-cols-3 gap-6
   ------------------------------------------------------------------ */
body.page-id-16 .wp-block-columns:has(.mk-card),
body.page-id-16 .mk-feature-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
}

@media (min-width: 768px) {
  body.page-id-16 .wp-block-columns:has(.mk-card),
  body.page-id-16 .mk-feature-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ------------------------------------------------------------------
   FIX-3-10: CTA Button - React gold variant
   ------------------------------------------------------------------ */
body.page-id-16 .mk-btn-gold,
body.page-id-16 .wp-block-button__link.mk-btn-gold {
  background-color: hsl(42 55% 58%) !important; /* bg-gold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  font-weight: 500 !important;
  padding: 0.75rem 2rem !important;
  border-radius: 0.25rem !important; /* rounded = var(--radius) = 4px */
  transition: background-color 300ms ease !important;
}

body.page-id-16 .mk-btn-gold:hover {
  background-color: hsl(42 45% 75%) !important; /* bg-gold-light */
}

/* ------------------------------------------------------------------
   FIX-3-11: Container max-width
   React: max-w-4xl = 56rem = 896px
   ------------------------------------------------------------------ */
body.page-id-16 .mk-pirkimas-page,
body.page-id-16 main > .wp-block-group:first-of-type {
  max-width: 56rem !important; /* max-w-4xl = 896px */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important; /* px-4 */
  padding-right: 1rem !important;
  padding-top: 3rem !important; /* py-12 */
  padding-bottom: 3rem !important;
}


/* ------------------------------------------------------------------
   FIX-3-12: Pirkimas Step Badge — Target actual pattern class
   Pattern uses .mk-pirkimas-step__badge, not .mk-step__number
   React HowToBuy.tsx: w-16 h-16 rounded-full bg-primary
   Badge: 64px (4rem), forest green, NOT absolute positioned
   ------------------------------------------------------------------ */
body.page-id-16 .mk-pirkimas-step__badge,
.page-pirkimas .mk-pirkimas-step__badge,
body[class*="pirkimas"] .mk-pirkimas-step__badge {
  width: 4rem !important; /* w-16 = 64px */
  height: 4rem !important; /* h-16 = 64px */
  min-width: 4rem !important;
  min-height: 4rem !important;
  max-width: 4rem !important;
  max-height: 4rem !important;
  background-color: hsl(160 30% 28%) !important; /* bg-primary (forest green) */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground (cream) */
  border-radius: 9999px !important; /* rounded-full */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  /* NOT absolute positioned - inline flex row layout */
  position: static !important;
}

/* Badge number text styling */
body.page-id-16 .mk-pirkimas-step__badge p,
.page-pirkimas .mk-pirkimas-step__badge p,
body[class*="pirkimas"] .mk-pirkimas-step__badge p {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important; /* text-2xl = 24px as per React */
  font-weight: 700 !important; /* font-bold */
  color: hsl(40 30% 96%) !important; /* cream text */
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Step row layout - ensure inline flex (not absolute badge positioning) */
body.page-id-16 .mk-pirkimas-step,
.page-pirkimas .mk-pirkimas-step {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
  margin-bottom: 2rem !important; /* mb-8 spacing between steps */
}

/* Step content column */
body.page-id-16 .mk-pirkimas-step__content,
.page-pirkimas .mk-pirkimas-step__content {
  flex: 1 !important;
  padding-top: 0 !important;
}

/* Step title styling */
body.page-id-16 .mk-pirkimas-step__title,
.page-pirkimas .mk-pirkimas-step__title {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* foreground */
  margin-bottom: 0.5rem !important; /* mb-2 */
  margin-top: 0 !important;
}

/* ==========================================================================
   END SECTION 160: PIRKIMAS PAGE DEFINITIVE FIX — FIX-3
   ========================================================================== */

/* ==========================================================================
   SECTION 161: HEADER SEARCH ICON POSITION FIX
   Issue: React has search icon on LEFT (pl-9), WordPress has icon button on RIGHT
   React: <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" />
          <Input className="pl-9 pr-4 w-48 lg:w-64 h-9" />
   Fix: Use flexbox order + absolute positioning to move icon to left
   ========================================================================== */

/* Parent wrapper needs position relative for absolute child */
.mk-header__search .wp-block-search__inside-wrapper,
.site-header .wp-block-search__inside-wrapper {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Move button to LEFT using flexbox order (DOM order: input then button) */
.mk-header__search .wp-block-search__button,
.site-header .wp-block-search__button {
  position: absolute !important;
  left: 0.75rem !important; /* left-3 = 0.75rem */
  top: 50% !important;
  transform: translateY(-50%) !important;
  order: -1 !important; /* Visually first even though DOM order is second */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 1rem !important; /* w-4 */
  height: 1rem !important; /* h-4 */
  min-width: 1rem !important;
  color: hsl(var(--muted-foreground)) !important;
  pointer-events: none !important; /* Icon is decorative, input handles interaction */
  z-index: 1 !important;
}

.mk-header__search .wp-block-search__button svg,
.site-header .wp-block-search__button svg {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
}

/* Input needs padding-left to make room for icon */
.mk-header__search .wp-block-search__input,
.site-header .wp-block-search__input {
  padding-left: 2.25rem !important; /* pl-9 = 2.25rem = 36px (icon at 0.75rem + 1rem icon + 0.5rem gap) */
  padding-right: 0.75rem !important; /* pr-4 reduced since no button on right */
  width: 100% !important;
}

/* ==========================================================================
   END SECTION 161: HEADER SEARCH ICON POSITION FIX
   ========================================================================== */

/* ==========================================================================
   SECTION 162: CART BADGE RED COLOR FIX — CSS VARIABLE OVERRIDE
   ==========================================================================

   Problem: WooCommerce Mini Cart block sets inline style on badge:
     style="background:var(--wp--preset--color--cream)"

   CSS !important cannot override inline styles. However, we CAN override
   the CSS variable that the inline style references.

   Solution: Redefine --wp--preset--color--cream on the badge element itself
   to be RED (destructive color) instead of cream.

   Reference: docs/PARITY-AGENT-LOGS/VERIFY-1-CART-BADGE.md
   Date: 2026-03-23
   ========================================================================== */

/* Override the CSS variable on the badge element */
.wc-block-mini-cart__badge,
span.wc-block-mini-cart__badge,
.wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge,
[class*="mini-cart"] .wc-block-mini-cart__badge {
  /* Redefine the cream variable to RED within the badge context */
  --wp--preset--color--cream: hsl(0 65% 50%);

  /* Also set text color variable for good measure */
  --wp--preset--color--forest-dark: white;
  --wp--preset--color--forest-green: white;

  /* Fallback: direct background override (in case variable isn't used) */
  background: hsl(0 65% 50%) !important;
  background-color: hsl(0 65% 50%) !important;
  color: white !important;
}

/* ==========================================================================
   END SECTION 162: CART BADGE RED COLOR FIX — CSS VARIABLE OVERRIDE
   ========================================================================== */

/* ==========================================================================
   SECTION 163: FIX-17 — HOMEPAGE HERO HEIGHT, LINE-HEIGHT, ANIMATION DELAY
   ==========================================================================

   Problems from P1 parity audit:
   1. Hero height: inline min-height:90vh overrides responsive (should be 80vh mobile, 90vh desktop)
   2. H1 line-height: 1.15 should be 1.25 (leading-tight)
   3. Button animation delay: 0.3s should be 0.4s

   React Reference (src/components/home/HeroSection.tsx):
   - Height: h-[80vh] lg:h-[90vh] = 80vh default, 90vh at 1024px+
   - H1: leading-tight = line-height 1.25
   - Button animation: animationDelay: '0.4s'

   Date: 2026-03-23
   ========================================================================== */

/* FIX-17-1: Hero responsive height - override inline min-height:90vh */
.mk-hero.wp-block-cover {
  min-height: 80vh !important;
  height: 80vh !important;
}

@media (min-width: 1024px) {
  .mk-hero.wp-block-cover {
    min-height: 90vh !important;
    height: 90vh !important;
  }
}

/* FIX-17-2: Hero H1 line-height - leading-tight = 1.25 */
.mk-hero__title,
.mk-hero h1,
.mk-hero .wp-block-heading {
  line-height: 1.25 !important;
}

/* FIX-17-3: Hero button animation delay - 0.4s per React */
.mk-hero__actions,
.mk-hero .wp-block-buttons {
  animation-delay: 0.4s !important;
}

/* ==========================================================================
   END SECTION 163: FIX-17 — HOMEPAGE HERO HEIGHT, LINE-HEIGHT, ANIMATION DELAY
   ========================================================================== */

/* ==========================================================================
   SECTION 164: GALLERY PREVIEW BUTTON — ELEGANT VARIANT FIX (FIX-5)
   ==========================================================================

   Problem: Gallery preview "Peržiūrėti galeriją" button shows solid green
   (catalog variant) instead of border outline (elegant variant).

   React Reference: src/components/home/GalleryPreview.tsx
   - Button uses variant="elegant" which is:
   - background: transparent
   - border: 1px solid foreground/20
   - hover: border-primary, text-primary

   The pattern has is-style-elegant but some global button rule may override.
   Adding high-specificity selector to ensure elegant variant is respected.

   Date: 2026-03-23
   Reference: docs/FULL-PARITY-AUDIT-2026-03-24.md
   ========================================================================== */

/* Gallery preview button - elegant variant override */
.mk-gallery-preview .wp-block-button .wp-block-button__link,
.mk-gallery-preview .wp-block-button.is-style-elegant .wp-block-button__link,
.mk-gallery-preview .wp-block-buttons .wp-block-button__link,
section.mk-gallery-preview .wp-block-button__link {
  background: transparent !important;
  background-color: transparent !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--foreground) / 0.2) !important;
  font-weight: 400 !important;
  letter-spacing: 0.025em !important;
  border-radius: var(--radius) !important;
  transition: all 300ms ease !important;
}

.mk-gallery-preview .wp-block-button .wp-block-button__link:hover,
.mk-gallery-preview .wp-block-button.is-style-elegant .wp-block-button__link:hover,
.mk-gallery-preview .wp-block-buttons .wp-block-button__link:hover,
section.mk-gallery-preview .wp-block-button__link:hover {
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
  background: transparent !important;
  background-color: transparent !important;
}

.mk-gallery-preview .wp-block-button .wp-block-button__link:focus-visible,
.mk-gallery-preview .wp-block-button.is-style-elegant .wp-block-button__link:focus-visible {
  outline: 2px solid hsl(var(--ring)) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   END SECTION 164: GALLERY PREVIEW BUTTON — ELEGANT VARIANT FIX (FIX-5)
   ========================================================================== */

/* ==========================================================================
   SECTION 165: PLENERAI PAGE FONT WEIGHT & SHADOW FIXES — FIX-16
   ==========================================================================

   P17 Audit Findings:
   1. Hero H1 font-weight should be 700 (bold), not 600
   2. About heading font-weight should be 700 (bold), not 600
   3. Gallery heading font-weight should be 700 (bold), not 600
   4. Event info card: shadow-2xl (0 25px 50px -12px) + rounded-2xl (1rem)
   5. About image: shadow-lg

   React Reference (src/pages/Plenerai.tsx):
   - All headings: `font-bold` = font-weight: 700
   - Event card: `rounded-2xl shadow-2xl`
   - About image: `shadow-lg`

   Note: Items 1, 2, 4, 5 already fixed in SECTION 110 (lines 16962-16977, 16695-16704, 16827).
   This section adds the missing Gallery heading fix and provides comprehensive coverage.

   Date: 2026-03-24
   ========================================================================== */

/* ------------------------------------------------------------------
   FIX-16-1: All Plenerai Page Headings Must Be Bold (700)
   React: font-bold everywhere = font-weight: 700
   Comprehensive selector to catch ALL h1, h2, h3 on page-id-18
   ------------------------------------------------------------------ */
.page-id-18 h1,
.page-id-18 h2,
.page-id-18 h3,
[class*="plenerai"] h1,
[class*="plenerai"] h2,
[class*="plenerai"] h3 {
  font-weight: 700 !important;
}

/* ------------------------------------------------------------------
   FIX-16-2: Plenerai Event Info Card — shadow-2xl + rounded-2xl
   React: bg-card rounded-2xl shadow-2xl border overflow-hidden
   shadow-2xl = 0 25px 50px -12px rgb(0 0 0 / 0.25)
   rounded-2xl = 1rem (16px)
   ------------------------------------------------------------------ */
.mk-plenerai-event-card,
.page-id-18 .mk-plenerai-event-card,
.page-id-18 .mk-plenerai__info {
  border-radius: 1rem !important;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
}

/* ------------------------------------------------------------------
   FIX-16-3: About Section Image — shadow-lg
   React: shadow-lg = 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
   ------------------------------------------------------------------ */
.mk-plenerai-about img,
.page-id-18 .mk-plenerai-about img,
.page-id-18 .mk-plenerai-about__image img,
.page-id-18 [class*="plenerai"][class*="about"] img {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

/* ==========================================================================
   END SECTION 165: PLENERAI PAGE FONT WEIGHT & SHADOW FIXES — FIX-16
   ========================================================================== */

/* ==========================================================================
   SECTION 166: POST-AUCTION DEADLINE BADGE RED COLOR FIX — FIX-3
   React: PostAuction.tsx lines 117-119
   className="bg-destructive text-destructive-foreground text-xs font-medium rounded"

   When daysLeft <= 2, badge shows "Liko X d." with RED background for urgency.
   Previous CSS used amber (Section 106) — WRONG. React uses bg-destructive (RED).
   ========================================================================== */

/* Override all previous amber deadline badge rules with RED (destructive) */
.mk-deadline-badge,
.mk-badge--post-auction,
.mk-deadline-badge-overlay,
.mk-badge--deadline {
  background-color: hsl(var(--destructive)) !important; /* bg-destructive = RED */
  color: hsl(var(--destructive-foreground)) !important; /* text-destructive-foreground = WHITE */
  padding: 0.25rem 0.5rem !important; /* px-2 py-1 */
  font-size: 0.75rem !important; /* text-xs = 12px */
  font-weight: 500 !important; /* font-medium */
  border-radius: 0.25rem !important; /* rounded = var(--radius) = 4px */
  display: inline-block !important;
  position: absolute !important;
  top: 0.5rem !important; /* top-2 = 8px */
  right: 0.5rem !important; /* right-2 = 8px */
  z-index: 10 !important;
}

/* If badge is inside a relative container, ensure positioning works */
.mk-product-card .mk-deadline-badge,
.mk-poaukcionine-grid .mk-deadline-badge,
.page-id-93 .mk-deadline-badge {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
}

/* ------------------------------------------------------------------
   165.1: Urgent state (daysLeft <= 2) — pulse animation for extra emphasis
   ------------------------------------------------------------------ */
.mk-deadline-badge--urgent,
.mk-deadline-badge[data-urgent="true"] {
  animation: mk-pulse-deadline 2s ease-in-out infinite !important;
}

@keyframes mk-pulse-deadline {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ==========================================================================
   END SECTION 166: POST-AUCTION DEADLINE BADGE RED COLOR FIX — FIX-3
   ========================================================================== */

/* ==========================================================================
   SECTION 166: SINGLE PRODUCT INFO CARD — FIX-7 PARITY
   ==========================================================================

   P9 Audit Issues:
   1. Background: solid cream-light should be secondary/30 (transparent)
   2. Border: has border when React has none
   3. Padding: 0.75rem should be 1.5rem

   React Reference (src/pages/ArtworkDetail.tsx line ~211):
   - bg-secondary/30 = hsl(var(--secondary) / 0.3)
   - No border
   - p-6 = 1.5rem padding
   - rounded-sm = 0.125rem (but for visual consistency using 0.5rem)

   Date: 2026-03-24
   ========================================================================== */

/* Single product info card - HIGH SPECIFICITY to override WC defaults */
.single-product .mk-info-card,
.single-product .mk-product-info,
.single-product .mk-product-info-card,
.single-product .product-meta-card,
.single-product .mk-artwork-info,
.single-product [class*="product-info-card"],
.woocommerce.single-product .mk-info-card,
.woocommerce.single-product .mk-product-info-card {
  background: hsl(var(--secondary) / 0.3) !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  padding: 1.5rem !important;
  border-radius: 0.5rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: none !important;
}

/* Also target any WooCommerce product data wrappers */
.single-product .woocommerce-product-details__short-description,
.single-product .product_meta,
.single-product .entry-summary > .woocommerce-product-details {
  background: hsl(var(--secondary) / 0.3) !important;
  border: none !important;
  padding: 1.5rem !important;
  border-radius: 0.5rem !important;
}

/* ==========================================================================
   END SECTION 166: SINGLE PRODUCT INFO CARD — FIX-7 PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 166: CONTACT PAGE FORM FIXES — FIX-AGENT-13
   Date: 2026-03-23

   React Source: src/pages/Contact.tsx
   P13 Audit Issues:
   1. H1 font-weight: 700 should be 600 (font-semibold)
   2. Form card border-radius: 8px should be 2px (rounded-sm = 0.125rem)
   3. Form gap: 1rem should be 1.5rem (space-y-6)
   4. Submit button hover: opacity should be bg color change
   ========================================================================== */

/* FIX-13-1: Contact page H1 font-weight 600 (font-semibold) */
body.page-id-15 h1,
body.page-id-15 .entry-title,
body.page-id-15 .wp-block-post-title,
body.page-id-15 .entry-content h1,
body.page-id-15 .entry-content > .wp-block-group:first-child h1,
.page-kontaktai h1 {
  font-weight: 600 !important;
}

/* FIX-13-2: Form card border-radius 0px (rounded-sm = 0px per custom Tailwind config) */
body.page-id-15 .mk-card,
body.page-id-15 .mk-contact-form,
body.page-id-15 .mk-contact-form-card,
body.page-id-15 .wpcf7,
body.page-id-15 .wpcf7-form,
body.page-id-15 [class*="contact-form"] {
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
}

/* FIX-13-3: Form gap 1.5rem (space-y-6) */
body.page-id-15 .wpcf7-form,
body.page-id-15 .mk-contact-form form,
.page-kontaktai .wpcf7-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

/* Remove margin from form paragraphs (gap handles spacing) */
body.page-id-15 .wpcf7-form p,
body.page-id-15 .wpcf7-form > p,
body.page-id-15 .wpcf7-form .form-group {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* FIX-13-4: Submit button hover - background color change, not opacity */
body.page-id-15 .wpcf7-submit:hover,
body.page-id-15 .wpcf7 input[type="submit"]:hover,
.page-kontaktai .wpcf7-submit:hover {
  background-color: hsl(160 30% 35%) !important; /* forest-light */
  opacity: 1 !important;
}

/* ==========================================================================
   END SECTION 166: CONTACT PAGE FORM FIXES — FIX-AGENT-13
   ========================================================================== */

/* ==========================================================================
   SECTION 166: HEADER DROPDOWN BORDER-RADIUS FIX — FIX-10
   ==========================================================================

   P3 Audit Issues Fixed:
   1. Dropdown border-radius: 2px → 6px (rounded-md = 0.375rem)
   2. Dropdown item border-radius: 0 → 2px (rounded-sm = 0.125rem)

   React Reference: src/components/layout/Header.tsx
   - DropdownMenuContent: rounded-md = 6px (0.375rem)
   - DropdownMenuItem: rounded-sm = 2px (0.125rem)

   Note: Other header issues from P3 audit are already fixed:
   - Backdrop blur: Section 130 lines 22066-22067 (8px blur, 95% opacity bg)
   - Chevron icon 16px: Section 130 lines 22213-22216
   - Search icon 16px: Section 130 lines 22395-22398
   - Search width 192px/256px: Section 130 lines 22352-22365
   - Hamburger icon 20px (1.25rem): Section 130 lines 22436-22439

   Date: 2026-03-23
   ========================================================================== */

/* FIX-10-1: Dropdown container border-radius 6px (rounded-md)
   Overrides Section 130 line 22229 which had 0.125rem (2px) */
.mk-header__dropdown-content,
.mk-header .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation__submenu-container,
header .wp-block-navigation__submenu-container,
.wp-block-navigation__submenu-container {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px */
}

/* FIX-10-2: Dropdown items border-radius 2px (rounded-sm)
   Confirms Section 130 line 22247 value is correct */
.mk-header__dropdown-item,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
}

/* ==========================================================================
   END SECTION 166: HEADER DROPDOWN BORDER-RADIUS FIX — FIX-10
   ========================================================================== */

/* ==========================================================================
   SECTION 167: FOOTER SPACING PARITY FIXES (FIX-11)

   React Reference: src/components/layout/Footer.tsx
   - Container: pb-16 = 4rem bottom padding
   - Grid: gap-10 = 2.5rem
   - Links: space-y-3 = 0.75rem between
   - Copyright: pt-8 = 2rem padding-top

   Date: 2026-03-23
   ========================================================================== */

/* F11-1: Footer container bottom padding: 0 -> 4rem */
.mk-footer,
.mk-footer.wp-block-group,
footer.mk-footer {
  padding-bottom: 4rem !important;
}

/* F11-2: Footer grid gap: 2rem -> 2.5rem */
.mk-footer .wp-block-columns,
.mk-footer__columns,
.mk-footer .mk-footer__columns {
  gap: 2.5rem !important;
}

/* F11-3: Footer link vertical spacing: 0.5rem -> 0.75rem */
.mk-footer__links .wp-block-group,
.mk-footer__info .wp-block-group,
.mk-footer .wp-block-column > .wp-block-group:has(> p > a) {
  gap: 0.75rem !important;
}

/* Alternative selector for link groups with blockGap */
.mk-footer .wp-block-column .wp-block-group[style*="blockGap"] {
  --wp--preset--spacing--20: 0.75rem !important;
}

/* Direct paragraph link spacing */
.mk-footer__links p,
.mk-footer__info p,
.mk-footer .wp-block-column:not(.mk-footer__brand):not(.mk-footer__contacts):not(.mk-footer__voucher) p:has(a) {
  margin-bottom: 0.75rem !important;
}
.mk-footer__links p:last-child,
.mk-footer__info p:last-child,
.mk-footer .wp-block-column p:has(a):last-child {
  margin-bottom: 0 !important;
}

/* F11-4: Copyright padding-top: 1.5rem -> 2rem */
.mk-footer__bottom,
.mk-footer__bottom.wp-block-group {
  padding-top: 2rem !important;
  margin-top: 3rem !important;
}

/* Also ensure the separator has correct spacing */
.mk-footer__bottom .wp-block-separator {
  margin-bottom: 2rem !important;
}

/* ==========================================================================
   END SECTION 167: FOOTER SPACING PARITY FIXES (FIX-11)
   ========================================================================== */

/* ==========================================================================
   SECTION 168: CATALOG TOOLBAR PARITY — FIX-12 (2026-03-23)
   ==========================================================================

   Problems from P7 audit:
   1. Toolbar has border-bottom when React has none
   2. Gap: 0.75rem should be 1rem (gap-4)
   3. Result count number should be font-semibold (600)

   React Reference (src/pages/Catalog.tsx lines 247-296):
   - Toolbar: NO border-bottom
   - Gap: `gap-4` = 1rem
   - Result count: label is `text-muted-foreground`, number is `font-semibold text-foreground`

   ========================================================================== */

/* FIX-12-1: Remove toolbar border-bottom + correct gap */
.mk-catalog__toolbar,
.mk-catalog-toolbar,
.mk-toolbar {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  gap: 1rem !important; /* gap-4 = 1rem (16px) */
}

/* FIX-12-2: Result count - make number semibold (600), foreground color */
.wc-block-product-results-count strong,
.woocommerce-result-count strong,
.mk-result-count .count,
.mk-result-count strong,
.woocommerce-result-count b,
.mk-result-count b {
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--foreground)) !important; /* text-foreground */
}

/* FIX-12-3: Result count label - muted foreground, normal weight */
.woocommerce-result-count,
.mk-result-count {
  font-weight: 400 !important; /* base text is normal */
  color: hsl(var(--muted-foreground)) !important; /* text-muted-foreground */
}

/* ==========================================================================
   END SECTION 168: CATALOG TOOLBAR PARITY — FIX-12
   ========================================================================== */

/* ==========================================================================
   SECTION 169: MY ACCOUNT PAGE STYLING FIXES — FIX-15
   Date: 2026-03-23
   Source: P19 audit findings + src/pages/Account.tsx

   Fixes:
   - P19-1: Input border-radius 4px -> 6px (0.375rem) — React rounded-md
   - P19-2: Auth card border-radius 4px -> 0px — React rounded-sm = 0px per custom Tailwind config
   - P19-3: TabsTrigger border-radius 0 -> 2px (0.125rem) — React rounded-sm
   - P19-4: Stat card padding 1.25rem -> 1.5rem (p-6) — React p-6
   - P19-5: Status badges transparent 10% -> solid backgrounds — React bg-primary/bg-gold
   - P19-6: Bid history title 14px -> 20px (text-xl) — React text-xl
   ========================================================================== */

/* -----------------------------------------------------------------------------
   P19-1: Input border-radius — 6px (rounded-md in standard Tailwind)
   React: src/components/ui/input.tsx uses rounded-md = 0.375rem
   HIGH SPECIFICITY override for WooCommerce My Account forms
   ----------------------------------------------------------------------------- */
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content .input-text,
.woocommerce-account .woocommerce form input[type="text"],
.woocommerce-account .woocommerce form input[type="email"],
.woocommerce-account .woocommerce form input[type="password"],
.woocommerce-account .woocommerce form input[type="tel"],
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"] {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px */
}

/* -----------------------------------------------------------------------------
   P19-2: Auth card border-radius — 0px (rounded-sm = 0px per custom Tailwind config)
   React: src/pages/Account.tsx uses rounded-sm = 0px (custom Tailwind config)
   ----------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .mk-card,
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2,
#customer_login {
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
}

/* -----------------------------------------------------------------------------
   P19-3: Tab triggers / Navigation links — 2px radius (rounded-sm)
   React: TabsTrigger uses rounded-sm = 0.125rem
   ----------------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation li a,
.woocommerce-MyAccount-navigation ul li a,
.mk-auth-tabs__trigger {
  border-radius: 0 !important; /* rounded-sm = 0px per custom Tailwind config */
}

/* -----------------------------------------------------------------------------
   P19-4: Stat card padding — 1.5rem (p-6)
   React: src/pages/Account.tsx stat cards use p-6 = 1.5rem
   ----------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .mk-stat-card,
.woocommerce-MyAccount-content .mk-account-stat,
.mk-account-stats .mk-stat-card,
.mk-stats-grid .mk-stat-card {
  padding: 1.5rem !important; /* p-6 = 24px */
}

/* -----------------------------------------------------------------------------
   P19-5: Status badges — SOLID backgrounds (not transparent 10%)
   React: bg-primary and bg-gold are SOLID colors, not opacity variants
   ----------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .mk-badge--primary,
.woocommerce-MyAccount-content .mk-bid-badge--active,
.woocommerce-MyAccount-content .mk-bid-badge--winning,
.mk-bid-badge--primary {
  background: hsl(var(--primary)) !important; /* SOLID primary, not 10% opacity */
  color: hsl(var(--primary-foreground)) !important;
}

.woocommerce-MyAccount-content .mk-badge--gold,
.woocommerce-MyAccount-content .mk-bid-badge--won,
.mk-bid-badge--gold {
  background: hsl(var(--gold)) !important; /* SOLID gold, not 10% opacity */
  color: hsl(var(--foreground)) !important;
}

/* Destructive/outbid badge keeps outline style per React */
.woocommerce-MyAccount-content .mk-badge--destructive,
.woocommerce-MyAccount-content .mk-bid-badge--outbid {
  background: transparent !important;
  border: 1px solid hsl(var(--destructive)) !important;
  color: hsl(var(--destructive)) !important;
}

/* -----------------------------------------------------------------------------
   P19-6: Bid history title — 20px (text-xl)
   React: src/pages/Account.tsx bid history section uses text-xl = 1.25rem
   ----------------------------------------------------------------------------- */
.woocommerce-MyAccount-content .mk-bid-history h3,
.woocommerce-MyAccount-content .bid-history-title,
.woocommerce-MyAccount-content .mk-account-bids__title,
.woocommerce-MyAccount-content .mk-bids-card__title,
.mk-bid-history__title {
  font-size: 1.25rem !important; /* text-xl = 20px */
  line-height: 1.75rem !important;
}

/* ==========================================================================
   END SECTION 169: MY ACCOUNT PAGE STYLING FIXES — FIX-15
   ========================================================================== */

/* ==========================================================================
   SECTION 168: NEWSLETTER SECTION PARITY FIX — FIX-4
   Date: 2026-03-23

   P2 Audit Issues:
   1. Background is solid cream-dark instead of transparent muted/30 (ALREADY FIXED S77)
   2. Form has unnecessary cream-light card wrapper with border (NEED STRONGER OVERRIDE)
   3. Newsletter images visible on all screens, should be hidden on mobile (ALREADY FIXED)
   4. Input border-radius: 0.125rem is CORRECT (rounded-md = 2px in CUSTOM Tailwind config)
   5. Second image offset 1.5rem should be 2rem (mt-8) (ALREADY FIXED S149)

   React Reference: src/components/home/NewsletterSection.tsx
   - Section: bg-muted/30 (line 28) = hsl(var(--muted) / 0.3)
   - Form: NO card wrapper (line 38) just <form className="space-y-4">
   - Images: hidden lg:grid (line 68) = display:none until 1024px
   - Input: rounded-md (input.tsx line 11) = 0.375rem (6px)
   - Second image: mt-8 (line 70) = 2rem (32px)
   ========================================================================== */

/* ------------------------------------------------------------------
   168.1: Newsletter Section Background Override (belt-and-suspenders)
   Ensure transparent muted/30 overrides any WP inline styles
   ------------------------------------------------------------------ */
.mk-newsletter,
.mk-newsletter.has-cream-dark-background-color,
.mk-newsletter.has-background,
.mk-newsletter.has-muted-background-color,
section.mk-newsletter,
.wp-block-group.mk-newsletter {
  background: hsl(var(--muted) / 0.3) !important;
  background-color: hsl(var(--muted) / 0.3) !important;
}

/* ------------------------------------------------------------------
   168.2: Newsletter Form Card Wrapper Removal (stronger override)
   React form has NO card, border, or shadow - just plain form
   Target all possible card wrapper combinations
   ------------------------------------------------------------------ */
.mk-newsletter__form,
.mk-newsletter .wpcf7-form,
.mk-newsletter .mk-card,
.mk-newsletter .wp-block-group.mk-card,
.mk-newsletter .wp-block-group[class*="card"],
.mk-newsletter form,
.mk-newsletter__form .wp-block-group,
.mk-newsletter .has-cream-light-background-color,
.mk-newsletter .has-background.has-cream-light-background-color {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Ensure form wrapper doesn't add any visual container */
.mk-newsletter .wp-block-group:has(.wpcf7-form),
.mk-newsletter .wp-block-group:has(form),
.mk-newsletter__content .wp-block-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------
   168.3: Newsletter Input Border-Radius Fix
   React Input: rounded-md = 0.375rem (6px)
   Was incorrectly set to 0.125rem (2px)
   ------------------------------------------------------------------ */
.mk-newsletter input[type="text"],
.mk-newsletter input[type="email"],
.mk-newsletter__form input[type="text"],
.mk-newsletter__form input[type="email"],
.mk-newsletter .wpcf7-form input[type="text"],
.mk-newsletter .wpcf7-form input[type="email"],
.mk-newsletter .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]) {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px */
}

/* Submit button also rounded-md */
.mk-newsletter input[type="submit"],
.mk-newsletter .wpcf7-submit,
.mk-newsletter__form input[type="submit"] {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px */
}

/* ------------------------------------------------------------------
   168.4: Newsletter Images Mobile Hide (lg:grid breakpoint override)
   React: hidden lg:grid = display:none below 1024px
   ------------------------------------------------------------------ */
.mk-newsletter__images,
.mk-newsletter .wp-block-column:has(.wp-block-image),
.mk-newsletter .mk-newsletter-images,
.mk-newsletter .wp-block-columns > .wp-block-column:last-child:has(img) {
  display: none !important;
}

@media (min-width: 1024px) {
  .mk-newsletter__images,
  .mk-newsletter .wp-block-column:has(.wp-block-image),
  .mk-newsletter .mk-newsletter-images,
  .mk-newsletter .wp-block-columns > .wp-block-column:last-child:has(img) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* grid-cols-2 */
    gap: 1rem !important; /* gap-4 */
  }
}

/* ------------------------------------------------------------------
   168.5: Newsletter Second Image Offset Override
   React: mt-8 = 2rem (32px) on second image
   ------------------------------------------------------------------ */
.mk-newsletter .wp-block-column:last-child .wp-block-image:last-child,
.mk-newsletter__images .wp-block-image:last-child,
.mk-newsletter__images > figure:last-child,
.mk-newsletter__images img:last-child,
.mk-newsletter .mk-newsletter-images .wp-block-image:last-child,
.mk-newsletter .mk-newsletter-images > img:last-child {
  margin-top: 2rem !important; /* mt-8 = 32px */
}

/* ==========================================================================
   END SECTION 168: NEWSLETTER SECTION PARITY FIX — FIX-4
   ========================================================================== */

/* ==========================================================================
   SECTION 169: GLOBAL FORM BORDER-RADIUS FIX — FIX-1
   ==========================================================================

   CRITICAL FIX: Tailwind rounded-md = 0.375rem (6px) - FIXED VALUE

   Previous CSS incorrectly used 0.125rem (2px) based on wrong assumption
   that project had custom --radius config. The React src/components/ui/input.tsx
   uses standard Tailwind rounded-md which is ALWAYS 0.375rem (6px).

   This section overrides ALL form inputs site-wide with correct border-radius.

   Reference: src/components/ui/input.tsx line 11: "rounded-md"
   Tailwind docs: rounded-md = 0.375rem = 6px

   Date: 2026-03-24
   ========================================================================== */

/* ------------------------------------------------------------------
   FIX-1-1: Contact Form 7 Inputs & Textareas
   ------------------------------------------------------------------ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="password"],
.wpcf7 input[type="file"],
.wpcf7 textarea,
.wpcf7-form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px (Tailwind standard) */
}

/* ------------------------------------------------------------------
   FIX-1-2: WooCommerce Form Inputs
   ------------------------------------------------------------------ */
.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="number"],
.woocommerce form input[type="url"],
.woocommerce form textarea,
.woocommerce form select,
.woocommerce-MyAccount-content .input-text,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content textarea {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px (Tailwind standard) */
}

/* ------------------------------------------------------------------
   FIX-1-3: Newsletter Form Inputs
   ------------------------------------------------------------------ */
.mk-newsletter input[type="text"],
.mk-newsletter input[type="email"],
.mk-newsletter-form input[type="text"],
.mk-newsletter-form input[type="email"],
.newsletter-form input,
[class*="newsletter"] input[type="text"],
[class*="newsletter"] input[type="email"] {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px (Tailwind standard) */
}

/* ------------------------------------------------------------------
   FIX-1-4: Login & Registration Form Inputs
   ------------------------------------------------------------------ */
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-register input[type="tel"],
.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"],
.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"] {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px (Tailwind standard) */
}

/* ------------------------------------------------------------------
   FIX-1-5: Generic Input/Textarea Override (Catch-all)
   ------------------------------------------------------------------ */
.mk-input,
.mk-textarea,
input.mk-input,
textarea.mk-textarea,
.mk-form input[type="text"],
.mk-form input[type="email"],
.mk-form input[type="tel"],
.mk-form input[type="password"],
.mk-form textarea {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px (Tailwind standard) */
}

/* ------------------------------------------------------------------
   FIX-1-6: Cart & Checkout Inputs
   ------------------------------------------------------------------ */
.woocommerce-cart input[type="text"],
.woocommerce-cart input[type="email"],
.woocommerce-cart input[type="tel"],
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-cart input[type="text"] {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px (Tailwind standard) */
}

/* ------------------------------------------------------------------
   FIX-1-7: Search Input
   ------------------------------------------------------------------ */
.wp-block-search__input,
input[type="search"],
.search-form input[type="search"],
.mk-header__search input {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px (Tailwind standard) */
}

/* ------------------------------------------------------------------
   FIX-1-8: Bid Form Inputs
   ------------------------------------------------------------------ */
.mk-bid-form input[type="text"],
.mk-bid-form input[type="number"],
.mk-bid-form__custom-input,
.auction-bid-form input[type="text"],
.auction-bid-form input[type="number"] {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px (Tailwind standard) */
}

/* ------------------------------------------------------------------
   FIX-1-9: Select Elements
   ------------------------------------------------------------------ */
select,
.mk-select,
.woocommerce select,
.woocommerce-ordering select,
.mk-sort-select {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* rounded-md = 6px (Tailwind standard) */
}

/* ------------------------------------------------------------------
   FIX-1-10: Checkbox Border-Radius Remains 0
   (Checkboxes should be square, not rounded)
   ------------------------------------------------------------------ */
input[type="checkbox"],
.wpcf7 input[type="checkbox"],
.woocommerce input[type="checkbox"] {
  border-radius: 0 !important; /* Checkboxes remain square */
}

/* ------------------------------------------------------------------
   FIX-1-11: Radio Buttons Remain Circular
   ------------------------------------------------------------------ */
input[type="radio"],
.wpcf7 input[type="radio"],
.woocommerce input[type="radio"] {
  border-radius: 50% !important; /* Radio buttons remain circular */
}

/* ------------------------------------------------------------------
   FIX-1-12: Utility Class Override
   ------------------------------------------------------------------ */
.mk-rounded-md {
  border-radius: 0.125rem !important; /* FIX: rounded-md = 2px (CUSTOM config) */ /* Corrected: 6px not 2px */
}

/* ==========================================================================
   END SECTION 169: GLOBAL FORM BORDER-RADIUS FIX — FIX-1
   ========================================================================== */

/* ==========================================================================
   SECTION 170: SINGLE PRODUCT TIMER PARITY FIX — FIX-8 AGENT
   ==========================================================================

   P9 Audit Issues:
   1. Timer digit size: should be 1.875rem / 2.25rem responsive (text-3xl md:text-4xl)
   2. Timer container: should have gradient background per status
   3. Status header: icon circle + title + subtitle
   4. Footer: auction start/end times with icons
   5. Ending-soon: pulsing animation on seconds + warning message

   React Reference: src/components/auction/AuctionTimer.tsx lines 134-250

   This section ensures WooCommerce Simple Auctions plugin output matches
   the React full timer variant exactly.

   Date: 2026-03-23
   ========================================================================== */

/* ------------------------------------------------------------------
   170.1: Timer Container — Full Variant with Gradient Backgrounds
   React: rounded-sm p-6 with status-specific gradients
   WC Simple Auctions: .auction-time-left on single product
   ------------------------------------------------------------------ */
.single-product .auction-time-left,
.single-product .woocommerce-product-gallery ~ .auction-time-left,
.single-product .summary .auction-time-left,
.single-product .mk-product-timer {
  border-radius: 0 !important;  /* rounded-sm = 0px per custom Tailwind config */
  padding: 1.5rem !important;          /* p-6 = 24px */
  border: 1px solid hsl(var(--border)) !important;
  margin-bottom: 1.5rem !important;
}

/* Active state: green gradient */
.single-product .auction-time-left.active,
.single-product .auction-time-left.status-active,
.single-product .mk-product-timer.mk-timer-active,
.single-product .mk-product-timer:has(.mk-timer-active) {
  background: linear-gradient(to right, hsl(142 71% 45% / 0.1), hsl(142 71% 45% / 0.05)) !important;
  border-color: hsl(142 71% 45% / 0.2) !important;
}

/* Ending-soon state: red gradient */
.single-product .auction-time-left.ending-soon,
.single-product .auction-time-left.status-ending,
.single-product .mk-product-timer.mk-timer-ending,
.single-product .mk-product-timer:has(.mk-timer-ending) {
  background: linear-gradient(to right, hsl(var(--destructive) / 0.1), hsl(var(--destructive) / 0.05)) !important;
  border-color: hsl(var(--destructive) / 0.2) !important;
}

/* Upcoming state: gold gradient */
.single-product .auction-time-left.upcoming,
.single-product .auction-time-left.status-upcoming,
.single-product .auction-time-left.future,
.single-product .mk-product-timer.mk-timer-upcoming,
.single-product .mk-product-timer:has(.mk-timer-upcoming),
.single-product .mk-product-timer:has(.future) {
  background: linear-gradient(to right, hsl(var(--gold) / 0.1), hsl(var(--gold) / 0.05)) !important;
  border-color: hsl(var(--gold) / 0.2) !important;
}

/* Ended state: muted background */
.single-product .auction-time-left.ended,
.single-product .auction-time-left.status-ended,
.single-product .mk-product-timer.mk-timer-ended {
  background: hsl(var(--muted) / 0.5) !important;
  border-color: hsl(var(--border)) !important;
}

/* ------------------------------------------------------------------
   170.2: Timer Digits — Responsive Font Size
   React: text-3xl md:text-4xl = 1.875rem / 2.25rem
   WC Simple Auctions: .countdown_amount or custom digit classes
   ------------------------------------------------------------------ */
.single-product .auction-time-left .countdown_amount,
.single-product .auction-time-left .time-value,
.single-product .auction-time-left .countdown-value,
.single-product .auction-time-left .digit,
.single-product .mk-product-timer .countdown_amount,
.single-product .mk-timer__digit,
.single-product .mk-timer-full__value {
  font-size: 1.875rem !important;  /* text-3xl = 30px */
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

@media (min-width: 768px) {
  .single-product .auction-time-left .countdown_amount,
  .single-product .auction-time-left .time-value,
  .single-product .auction-time-left .countdown-value,
  .single-product .auction-time-left .digit,
  .single-product .mk-product-timer .countdown_amount,
  .single-product .mk-timer__digit,
  .single-product .mk-timer-full__value {
    font-size: 2.25rem !important;  /* md:text-4xl = 36px */
  }
}

/* Active status: green digits */
.single-product .auction-time-left.active .countdown_amount,
.single-product .auction-time-left.status-active .countdown_amount,
.single-product .auction-time-left.active .time-value,
.single-product .auction-time-left.active .digit,
.single-product .mk-product-timer.mk-timer-active .countdown_amount,
.single-product .mk-product-timer:has(.mk-timer-active) .countdown_amount {
  color: hsl(142 50% 35%) !important;  /* green-600 */
}

/* Ending-soon status: red digits */
.single-product .auction-time-left.ending-soon .countdown_amount,
.single-product .auction-time-left.status-ending .countdown_amount,
.single-product .auction-time-left.ending-soon .time-value,
.single-product .auction-time-left.ending-soon .digit,
.single-product .mk-product-timer.mk-timer-ending .countdown_amount,
.single-product .mk-product-timer:has(.mk-timer-ending) .countdown_amount {
  color: hsl(var(--destructive)) !important;
}

/* ------------------------------------------------------------------
   170.3: Ending-Soon Pulse Animation — Seconds Only
   React: animate-pulse on seconds digit (4th child) and warning
   ------------------------------------------------------------------ */
.single-product .auction-time-left.ending-soon .countdown_section:nth-child(4) .countdown_amount,
.single-product .auction-time-left.status-ending .countdown_section:nth-child(4) .countdown_amount,
.single-product .mk-product-timer.mk-timer-ending .countdown_section:nth-child(4) .countdown_amount,
.single-product .mk-product-timer:has(.mk-timer-ending) .countdown_section:nth-child(4) .countdown_amount,
.single-product .mk-timer-full--ending .mk-timer-full__unit:last-child .mk-timer-full__value {
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* Ending-soon warning message pulse */
.single-product .auction-time-left .warning-message,
.single-product .auction-time-left .ending-warning,
.single-product .mk-timer-full__warning,
.single-product .mk-product-timer .mk-timer-warning {
  margin-top: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: hsl(var(--destructive)) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.single-product .auction-time-left .warning-message svg,
.single-product .auction-time-left .ending-warning svg,
.single-product .mk-timer-full__warning svg,
.single-product .mk-product-timer .mk-timer-warning svg {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------
   170.4: Status Header — Icon Circle + Title + Subtitle
   React: flex items-center gap-3 mb-4 with icon in 10x10 circle
   ------------------------------------------------------------------ */
.single-product .auction-time-left .timer-header,
.single-product .auction-time-left .status-header,
.single-product .mk-timer-full__header,
.single-product .mk-product-timer .mk-timer-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;  /* gap-3 = 12px */
  margin-bottom: 1rem !important;  /* mb-4 = 16px */
}

/* Icon circle container */
.single-product .auction-time-left .timer-icon,
.single-product .auction-time-left .status-icon,
.single-product .mk-timer-full__icon,
.single-product .mk-product-timer .mk-timer-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;   /* w-10 = 40px */
  height: 2.5rem !important;  /* h-10 = 40px */
  border-radius: 9999px !important;  /* rounded-full */
  flex-shrink: 0 !important;
}

/* Icon backgrounds per status */
.single-product .auction-time-left.active .timer-icon,
.single-product .auction-time-left.status-active .status-icon,
.single-product .mk-timer-full--active .mk-timer-full__icon {
  background: hsl(142 71% 45% / 0.2) !important;
}

.single-product .auction-time-left.ending-soon .timer-icon,
.single-product .auction-time-left.status-ending .status-icon,
.single-product .mk-timer-full--ending .mk-timer-full__icon {
  background: hsl(var(--destructive) / 0.2) !important;
}

.single-product .auction-time-left.upcoming .timer-icon,
.single-product .auction-time-left.status-upcoming .status-icon,
.single-product .auction-time-left.future .timer-icon,
.single-product .mk-timer-full--upcoming .mk-timer-full__icon {
  background: hsl(var(--gold) / 0.2) !important;
}

.single-product .auction-time-left.ended .timer-icon,
.single-product .auction-time-left.status-ended .status-icon,
.single-product .mk-timer-full--ended .mk-timer-full__icon {
  background: hsl(var(--muted)) !important;
}

/* Icon SVG sizing */
.single-product .auction-time-left .timer-icon svg,
.single-product .auction-time-left .status-icon svg,
.single-product .mk-timer-full__icon svg,
.single-product .mk-product-timer .mk-timer-icon svg {
  width: 1.25rem !important;  /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
}

/* Icon colors per status */
.single-product .auction-time-left.active .timer-icon svg {
  color: hsl(142 71% 45%) !important;
}

.single-product .auction-time-left.ending-soon .timer-icon svg,
.single-product .mk-timer-full--ending .mk-timer-full__icon svg {
  color: hsl(var(--destructive)) !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.single-product .auction-time-left.upcoming .timer-icon svg,
.single-product .auction-time-left.future .timer-icon svg,
.single-product .mk-timer-full--upcoming .mk-timer-full__icon svg {
  color: hsl(var(--gold)) !important;
}

/* Pulsing green dot for active status (instead of icon) */
.single-product .auction-time-left.active .timer-icon .dot,
.single-product .mk-timer-full--active .mk-timer-full__icon .dot {
  width: 0.75rem !important;   /* w-3 = 12px */
  height: 0.75rem !important;  /* h-3 = 12px */
  background: hsl(142 71% 45%) !important;  /* green-500 */
  border-radius: 9999px !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* Status title */
.single-product .auction-time-left .timer-heading,
.single-product .auction-time-left .status-title,
.single-product .mk-timer-full__heading,
.single-product .mk-product-timer .mk-timer-title {
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Title colors per status */
.single-product .auction-time-left.active .timer-heading,
.single-product .auction-time-left.active .status-title,
.single-product .mk-timer-full--active .mk-timer-full__heading {
  color: hsl(142 71% 45%) !important;
}

.single-product .auction-time-left.ending-soon .timer-heading,
.single-product .auction-time-left.ending-soon .status-title,
.single-product .mk-timer-full--ending .mk-timer-full__heading {
  color: hsl(var(--destructive)) !important;
}

.single-product .auction-time-left.upcoming .timer-heading,
.single-product .auction-time-left.upcoming .status-title,
.single-product .mk-timer-full--upcoming .mk-timer-full__heading {
  color: hsl(var(--foreground)) !important;
}

/* Status subtitle */
.single-product .auction-time-left .timer-subtitle,
.single-product .auction-time-left .status-subtitle,
.single-product .mk-timer-full__subtitle,
.single-product .mk-product-timer .mk-timer-subtitle {
  font-size: 0.875rem !important;  /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ------------------------------------------------------------------
   170.5: Auction Dates Footer — Start/End Times with Icons
   React: mt-4 pt-4 border-t border-border/50 flex flex-wrap gap-4
   ------------------------------------------------------------------ */
.single-product .auction-time-left .timer-dates,
.single-product .auction-time-left .auction-dates,
.single-product .mk-timer-full__footer,
.single-product .mk-product-timer .mk-timer-dates {
  margin-top: 1rem !important;           /* mt-4 = 16px */
  padding-top: 1rem !important;          /* pt-4 = 16px */
  border-top: 1px solid hsl(var(--border) / 0.5) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;                  /* gap-4 = 16px */
  font-size: 0.875rem !important;        /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
}

.single-product .auction-time-left .date-item,
.single-product .mk-timer-full__date,
.single-product .mk-product-timer .mk-timer-date {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;                /* gap-2 = 8px */
}

.single-product .auction-time-left .date-item svg,
.single-product .mk-timer-full__date svg,
.single-product .mk-product-timer .mk-timer-date svg {
  width: 1rem !important;                /* w-4 = 16px */
  height: 1rem !important;               /* h-4 = 16px */
  flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------
   170.6: Timer Grid Layout — 4-Column Display
   React: grid grid-cols-4 gap-3
   ------------------------------------------------------------------ */
.single-product .auction-time-left .hasCountdown,
.single-product .auction-time-left .countdown-display,
.single-product .auction-time-left .time-display,
.single-product .mk-timer-full__grid,
.single-product .mk-product-timer .hasCountdown {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important;  /* gap-3 = 12px */
  text-align: center !important;
}

.single-product .auction-time-left .countdown_section,
.single-product .auction-time-left .time-block,
.single-product .mk-timer-full__unit,
.single-product .mk-product-timer .countdown_section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Timer labels (Dienų, Valandų, Minučių, Sekundžių) */
.single-product .auction-time-left .countdown_period,
.single-product .auction-time-left .time-label,
.single-product .mk-timer-full__label,
.single-product .mk-product-timer .countdown_period {
  font-size: 0.75rem !important;  /* text-xs = 12px */
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 0.25rem !important;  /* mt-1 = 4px */
}

/* ==========================================================================
   END SECTION 170: SINGLE PRODUCT TIMER PARITY FIX — FIX-8 AGENT
   ========================================================================== */

/* ==========================================================================
   SECTION 171: CLIENT-SIDE TIMER STATE TRANSITIONS — FINAL-5
   ==========================================================================
   Purpose: CSS for JS-driven timer state transitions when countdown crosses
   the 1-hour threshold. The JavaScript in functions.php (Section 25) adds
   classes dynamically as timers tick down.

   States:
   - mk-timer-ending: Added when secondsLeft < 3600 (1 hour)
   - mk-timer-ending-container: Added to parent for gradient backgrounds
   - mk-timer-ended: Added when secondsLeft <= 0
   - mk-animate-pulse: Added to seconds digit for pulse animation

   Reference: docs/FULL-PARITY-AUDIT-2026-03-24.md (FINAL-5)
   ========================================================================== */

/* ------------------------------------------------------------------
   171.1: Ending Container Fallback (for browsers without :has() support)
   The JS adds .mk-timer-ending-container to the parent when transitioning.
   ------------------------------------------------------------------ */
.mk-card-timer.mk-timer-ending-container {
  background: linear-gradient(to top, hsl(0 65% 45% / 0.9) 0%, hsl(0 65% 50% / 0.7) 50%, transparent 100%) !important;
}

.mk-product-timer.mk-timer-ending-container {
  background: linear-gradient(to right, hsl(var(--destructive) / 0.1), hsl(var(--destructive) / 0.05)) !important;
  border-color: hsl(var(--destructive) / 0.2) !important;
}

/* ------------------------------------------------------------------
   171.2: Ended State (auction has finished while page is open)
   ------------------------------------------------------------------ */
.mk-timer-ended {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.mk-card-timer:has(.mk-timer-ended),
.mk-card-timer.mk-timer-ended-container {
  background: linear-gradient(to top, hsl(var(--muted-foreground) / 0.6) 0%, transparent 100%) !important;
}

.mk-timer-ended .countdown_amount {
  color: hsl(var(--muted-foreground)) !important;
}

/* ------------------------------------------------------------------
   171.3: Dynamically Added Pulse Animation
   The JS adds .mk-animate-pulse to seconds digit when entering ending state.
   This ensures the animation applies even after client-side class change.
   ------------------------------------------------------------------ */
.mk-card-timer .mk-animate-pulse,
.mk-product-timer .mk-animate-pulse,
.countdown_amount.mk-animate-pulse {
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* ------------------------------------------------------------------
   171.4: State Transition Smoothing
   Add transition for gradient changes when state transitions occur.
   ------------------------------------------------------------------ */
.mk-card-timer,
.mk-product-timer {
  transition: background 0.3s ease-out, border-color 0.3s ease-out !important;
}

/* ------------------------------------------------------------------
   171.5: Ending State Text Color (JS-triggered)
   When JS adds mk-timer-ending class, ensure text turns red/white.
   ------------------------------------------------------------------ */
.mk-card-timer .mk-timer-ending .countdown_amount,
.mk-card-timer .auction-time-countdown.mk-timer-ending .countdown_amount {
  color: #fff !important;
}

.mk-product-timer .mk-timer-ending .countdown_amount,
.mk-product-timer .auction-time-countdown.mk-timer-ending .countdown_amount {
  color: hsl(var(--destructive)) !important;
}

/* ==========================================================================
   END SECTION 171: CLIENT-SIDE TIMER STATE TRANSITIONS — FINAL-5
   ========================================================================== */

/* ==========================================================================
   SECTION 172: SEARCH RESULTS PAGE — PRODUCTS + POSTS GRID (FUNC-14 FIX)
   ==========================================================================

   Search results page now includes WooCommerce products via pre_get_posts filter.
   This CSS styles the mixed content grid to handle both posts and products
   with a consistent card-based layout.

   @since v1.21.1
   ========================================================================== */

/* Search results grid container */
.mk-search-results .mk-search-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;  /* gap-6 = 24px */
}

/* Responsive grid adjustments */
@media (max-width: 1024px) {
  .mk-search-results .mk-search-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .mk-search-results .mk-search-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Search result card styling */
.mk-search-result-card {
  overflow: hidden !important;
  transition: box-shadow 300ms ease, transform 200ms ease !important;
  box-shadow: var(--shadow-card) !important;
}

.mk-search-result-card:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px) !important;
}

/* Card image styling */
.mk-search-result-card .wp-block-post-featured-image {
  overflow: hidden !important;
  margin: 0 !important;
}

.mk-search-result-card .wp-block-post-featured-image img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  transition: transform 500ms ease !important;
}

.mk-search-result-card:hover .wp-block-post-featured-image img {
  transform: scale(1.05) !important;
}

/* Card title styling */
.mk-search-result-card .wp-block-post-title {
  margin: 0 !important;
  line-height: 1.3 !important;
}

.mk-search-result-card .wp-block-post-title a {
  color: hsl(var(--foreground)) !important;
  text-decoration: none !important;
  transition: color 200ms ease !important;
}

.mk-search-result-card .wp-block-post-title a:hover {
  color: hsl(var(--primary)) !important;
}

/* Card excerpt styling */
.mk-search-result-card .wp-block-post-excerpt {
  margin: 0 !important;
}

.mk-search-result-card .wp-block-post-excerpt__excerpt {
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* No results state styling */
.mk-search-results .wp-block-query-no-results {
  text-align: center !important;
}

/* ==========================================================================
   END SECTION 172: SEARCH RESULTS PAGE
   ========================================================================== */

/* ==========================================================================
   FIX-7: Product Grid Responsive Columns
   ========================================================================== */

/* Base: 1 column on mobile */
.wc-block-grid__products,
.wp-block-post-template,
.products.columns-3,
.products.columns-4,
.mk-catalog__grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}

/* 2 columns at 640px (sm breakpoint) */
@media (min-width: 640px) {
  .wc-block-grid__products,
  .wp-block-post-template,
  .products.columns-3,
  .products.columns-4,
  .mk-catalog__grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 3 columns at 1280px (xl breakpoint) */
@media (min-width: 1280px) {
  .wc-block-grid__products,
  .wp-block-post-template,
  .products.columns-3,
  .products.columns-4,
  .mk-catalog__grid .wp-block-post-template {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==========================================================================
   END FIX-7: Product Grid Responsive Columns
   ========================================================================== */

/* ==========================================================================
   FIX-6: Catalog Sidebar Always Visible on Desktop
   ========================================================================== */

/* Hide sidebar on mobile (matching React behavior: hidden below lg breakpoint) */
@media (max-width: 1279px) {
  .mk-catalog__sidebar,
  .mk-catalog-sidebar,
  .archive-product .mk-catalog__sidebar {
    display: none !important;
  }
}

/* ALWAYS show sidebar on desktop (1024px+)
   React reference: Catalog.tsx line 132-135
   - Sidebar is in lg:col-span-1 (always rendered, no conditional)
   - Uses sticky top-24 positioning (6rem from top)
*/
@media (min-width: 1024px) {
  .mk-catalog__sidebar,
  .mk-catalog-sidebar,
  .archive-product .mk-catalog__sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    top: 6rem !important; /* Below fixed header */
    height: fit-content !important;
    max-height: calc(100vh - 8rem) !important;
    overflow-y: auto !important;
  }

  /* Ensure parent doesn't have overflow:hidden which breaks sticky positioning */
  .mk-catalog__layout,
  .archive-product .wp-block-group,
  .archive-product .wp-block-columns {
    overflow: visible !important;
  }

  /* Ensure the sidebar column maintains proper flex behavior */
  .archive-product .wp-block-column.mk-catalog__sidebar {
    flex-basis: 25% !important;
    min-width: 0 !important;
  }
}

/* ==========================================================================
   END FIX-6: Catalog Sidebar Always Visible on Desktop
   ========================================================================== */

/* ==========================================================================
   FIX-9: Poaukcionine Amber Info Banner
   React Reference: PostAuction.tsx lines 56-61
   - Banner: bg-amber-500/10 border border-amber-500/20 rounded-lg p-4 flex items-center gap-2
   - Icon: w-5 h-5 text-amber-700
   - Text: text-amber-800 text-sm

   Issues Fixed:
   1. Border-radius: 0.125rem → 0.5rem (rounded-lg = 8px)
   2. Align-items: start → center
   3. Gap: 0.75rem → 0.5rem (gap-2 = 8px)
   4. Background/border: Correct amber-500 shade
   5. Icon size: 1.5rem → 1.25rem (20px)
   6. Text color: Exact amber-800
   ========================================================================== */

.mk-post-auction__info-banner,
.mk-poaukcionine__banner,
.poaukcionine-info-banner,
.page-id-93 .mk-post-auction-banner,
.mk-post-auction-banner,
.mk-poaukcionine-banner {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  background-color: hsl(42 86% 55% / 0.1) !important; /* amber-500/10 */
  border: 1px solid hsl(42 86% 55% / 0.2) !important; /* amber-500/20 */
  border-radius: 0.5rem !important; /* rounded-lg = 8px */
  padding: 1rem !important;
}

.mk-post-auction__info-banner svg,
.mk-poaukcionine__banner svg,
.poaukcionine-info-banner svg,
.mk-post-auction-banner svg,
.mk-post-auction-banner__icon {
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important;
  flex-shrink: 0 !important;
  color: hsl(42 86% 40%) !important; /* amber-700 */
}

.mk-post-auction__info-banner p,
.mk-poaukcionine__banner p,
.poaukcionine-info-banner p,
.mk-post-auction-banner p,
.mk-post-auction-banner__text,
.mk-banner-text {
  color: hsl(42 86% 25%) !important; /* amber-800 */
  font-size: 0.875rem !important;
  margin: 0 !important;
}

/* ==========================================================================
   END FIX-9: Poaukcionine Amber Info Banner
   ========================================================================== */

/* ==========================================================================
   FIX-8: Gallery Grid Responsive (1→2→3→4)
   ========================================================================== */

/* Gallery page specific grid */
.mk-gallery__grid .wc-block-grid__products,
.mk-gallery__grid .wp-block-post-template,
.page-galerija .wc-block-grid__products {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}

@media (min-width: 640px) {
  .mk-gallery__grid .wc-block-grid__products,
  .mk-gallery__grid .wp-block-post-template,
  .page-galerija .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .mk-gallery__grid .wc-block-grid__products,
  .mk-gallery__grid .wp-block-post-template,
  .page-galerija .wc-block-grid__products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  .mk-gallery__grid .wc-block-grid__products,
  .mk-gallery__grid .wp-block-post-template,
  .page-galerija .wc-block-grid__products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}


/* ==========================================================================
   FIX-3: Header Vertical Alignment Fix
   ========================================================================== */
/* Root cause: Navigation and header elements had align-items: start in 6 places
   React Header.tsx uses items-center throughout (Tailwind for align-items: center)
   This caused navbar elements to be misaligned at full width vs half screen

   Fixed elements:
   1. .mk-header__nav (line 1197)
   2. .mk-header__nav-trigger (line 1222)
   3. .mk-header__search .wp-block-search__inside-wrapper (line 1262)
   4. .mk-header__search .wp-block-search__button (line 1294)
   5. .mk-header__account-link (line 1324)

   Comprehensive override to ensure all header elements are vertically centered */
.mk-header,
.mk-header__inner,
.mk-header__nav,
.mk-header__nav-trigger,
.mk-header__search,
.mk-header__search .wp-block-search__inside-wrapper,
.mk-header__search .wp-block-search__button,
.mk-header__cart,
.mk-header__account-link,
.mk-header__actions {
  align-items: center !important;
}

/* ==========================================================================
   END FIX-3: Header Vertical Alignment Fix
   ========================================================================== */

/* ==========================================================================
   FIX-12: Product Card Title Font Size
   ========================================================================== */

/* Product card titles should be text-lg = 1.125rem (18px) */
.wc-block-grid__product-title,
.woocommerce-loop-product__title,
.mk-product-card__title,
.wp-block-post-title a,
.products .product .woocommerce-loop-product__title {
  font-size: 1.125rem !important; /* text-lg = 18px */
  line-height: 1.75rem !important; /* leading-7 */
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   END FIX-12: Product Card Title Font Size
   ========================================================================== */

/* ==========================================================================
   FIX-10: Poaukcionine Grid Responsive
   ========================================================================== */

.mk-poaukcionine__grid .wc-block-grid__products,
.mk-poaukcionine__grid .wp-block-post-template,
.page-poaukcionine .wc-block-grid__products,
.poaukcionine-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}

@media (min-width: 640px) {
  .mk-poaukcionine__grid .wc-block-grid__products,
  .mk-poaukcionine__grid .wp-block-post-template,
  .page-poaukcionine .wc-block-grid__products,
  .poaukcionine-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .mk-poaukcionine__grid .wc-block-grid__products,
  .mk-poaukcionine__grid .wp-block-post-template,
  .page-poaukcionine .wc-block-grid__products,
  .poaukcionine-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  .mk-poaukcionine__grid .wc-block-grid__products,
  .mk-poaukcionine__grid .wp-block-post-template,
  .page-poaukcionine .wc-block-grid__products,
  .poaukcionine-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ==========================================================================
   END FIX-10: Poaukcionine Grid Responsive
   ========================================================================== */

/* ==========================================================================
   FIX-14: Badge Container Flex Column
   ==========================================================================

   React Reference: src/components/auction/ArtworkCard.tsx
   - Badge container: flex flex-col gap-2 absolute top-3 left-3
   - Status overlay: absolute top-3 right-3

   Issue Fixed:
   - React implements flex-col gap-2 for vertical badge stacking
   - WordPress missing this, badges may overlap

   Date: 2026-03-24
   ========================================================================== */

/* Badge container should stack vertically with gap */
.mk-product-card__badges,
.mk-artwork-card__badges,
.mk-badge-container,
.wc-block-grid__product-badges {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  align-items: flex-start !important;
  position: absolute !important;
  top: 0.75rem !important; /* p-3 */
  left: 0.75rem !important;
  z-index: 10 !important;
}

/* Status badge in image overlay - top right */
.mk-product-card__status,
.mk-artwork-card__status {
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  z-index: 10 !important;
}

/* ==========================================================================
   END FIX-14: Badge Container Flex Column
   ========================================================================== */

/* ==========================================================================
   Section 166: FIX-1 Homepage Hero Button Padding & Height Parity
   ========================================================================== */

/*
 * ISSUE: Hero buttons use half the correct vertical padding
 * - React: py-6 px-8 = 1.5rem 2rem (24px 32px)
 * - WordPress pattern: spacing-30 = 1rem (16px) vertical
 * - FIX: Pattern updated to spacing-40 (1.5rem), this CSS provides fallback
 *
 * ISSUE: Hero height inline style from minHeight JSON attribute
 * - React: h-[80vh] lg:h-[90vh] - responsive height controlled by CSS
 * - WordPress pattern: minHeight:90 creates inline style="min-height:90vh"
 * - FIX: Removed minHeight from pattern JSON, CSS controls responsive height
 *
 * Reference: docs/FULL-PARITY-AUDIT-2026-03-24.md MAP-1
 * React source: src/components/home/HeroSection.tsx lines 46, 51
 */

/* Hero responsive height - CSS controlled, not inline style */
.mk-hero {
  min-height: 80vh !important; /* Mobile default */
}

@media (min-width: 1024px) {
  .mk-hero {
    min-height: 90vh !important; /* Desktop */
  }
}

/* Hero button padding override - ensure correct py-6 px-8 spacing */
.mk-hero .wp-block-button__link,
.mk-hero .wp-block-buttons .wp-block-button__link {
  padding: 1.5rem 2rem !important; /* py-6 px-8 equivalent = 24px 32px */
}

/* ==========================================================================
   END Section 166: FIX-1 Homepage Hero Button Padding & Height Parity
   ========================================================================== */

/* ==========================================================================
   FIX-15: Timer Overlay Padding
   ==========================================================================

   Issue: Timer overlay uses asymmetric padding (1rem 0.75rem 0.5rem)
   React: Timer overlay uses uniform p-3 (0.75rem all sides)

   React Reference: src/components/auction/ArtworkCard.tsx
   - Timer overlay: className="p-3" (0.75rem = 12px all sides)

   Date: 2026-03-24
   ========================================================================== */

/* Timer overlay should have uniform p-3 padding */
.mk-timer-overlay,
.mk-auction-timer-overlay,
.mk-product-card__timer,
.wc-block-grid__product .auction-timer-overlay {
  padding: 0.75rem !important; /* p-3 = 12px all sides */
}

/* Timer in card image */
.mk-product-card__image .mk-timer,
.mk-artwork-card__image .auction-time {
  padding: 0.75rem !important;
}

/* Timer overlay in card (both grid and list views) */
.mk-artwork-card__timer-overlay,
.mk-card-timer {
  padding: 0.75rem !important;
}

/* ==========================================================================
   END FIX-15: Timer Overlay Padding
   ========================================================================== */

/* ==========================================================================
   FIX-17: Single Product Two-Column at lg (1024px)

   React Reference: src/pages/ArtworkDetail.tsx
   - Layout: grid lg:grid-cols-2 gap-12 (line 116)
   - lg breakpoint: 1024px (Tailwind default)
   - WordPress currently stacks at 768px instead of 1024px

   Date: 2026-03-24
   ========================================================================== */

/* Override Section 94's fixed 50% widths to allow responsive behavior */
.single-product .woocommerce-product-gallery,
.single-product .mk-product-gallery,
.single-product .summary.entry-summary,
.single-product .mk-product-details {
  width: auto !important;
  flex: none !important;
}

/* Stack below 1024px (React: lg:grid-cols-2) */
@media (max-width: 1279px) {
  .single-product .wp-block-columns,
  .single-product .woocommerce div.product,
  .mk-single-product__layout,
  .woocommerce-product-gallery + .summary,
  .product .wp-block-columns {
    flex-direction: column !important;
    display: flex !important;
    gap: 2rem !important;
  }

  .single-product .wp-block-column,
  .single-product .woocommerce-product-gallery,
  .single-product .product .entry-summary,
  .single-product .woocommerce div.product div.images,
  .single-product .woocommerce div.product div.summary {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Two columns at 1024px+ (React: lg breakpoint) */
@media (min-width: 1024px) {
  .single-product .wp-block-columns,
  .single-product .woocommerce div.product,
  .mk-single-product__layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important; /* React: gap-12 = 3rem */
  }

  .single-product .woocommerce div.product div.images,
  .single-product .woocommerce div.product div.summary {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   END FIX-17: Single Product Two-Column at lg (1024px)
   ========================================================================== */

/* ==========================================================================
   FIX-11: Form Inputs Border-Radius (CRITICAL PARITY FIX)
   ========================================================================== */

/* ROOT CAUSE:
   - React uses CUSTOM Tailwind config with non-standard border-radius values
   - tailwind.config.ts line 78-82 overrides default Tailwind:
     * rounded-lg = var(--radius) = 0.25rem (4px)
     * rounded-md = calc(var(--radius) - 2px) = 0.125rem (2px) ← THIS IS CRITICAL
     * rounded-sm = calc(var(--radius) - 4px) = 0px

   - React Input component (src/components/ui/input.tsx) uses "rounded-md"
   - In STANDARD Tailwind: rounded-md = 0.375rem (6px)
   - IN THIS PROJECT: rounded-md = 0.125rem (2px) ← Custom config

   - WordPress style.css was using 0.375rem (standard Tailwind assumption)
   - This caused ALL form inputs site-wide to have wrong border-radius
   - Fix: Change ALL form inputs from 0.375rem (6px) to 0.125rem (2px)

   Reference: docs/FULL-PARITY-AUDIT-2026-03-24.md FIX-11
*/

/* Global form input border-radius override - MAXIMUM SPECIFICITY */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select,
.wpcf7-form-control,
.wpcf7-text,
.wpcf7-textarea,
.wpcf7-select,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select,
.wp-block-search__input,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper textarea,
.woocommerce-input-wrapper select,
input[type="file"],
.wpcf7-file,
.search-form input[type="search"],
.mk-header__search input,
.auction-bid-form input[type="text"],
.auction-bid-form input[type="number"],
.woocommerce-ordering select,
.mk-sort-select,
.mk-sort-dropdown,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account textarea,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content textarea,
[class*="newsletter"] input[type="text"],
[class*="newsletter"] input[type="email"],
.mk-newsletter .wpcf7-form input[type="email"],
.mk-newsletter .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]),
.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"],
.mk-form input[type="text"],
.mk-form input[type="email"],
.mk-form input[type="password"],
.mk-form textarea,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-cart input[type="text"],
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"] {
  border-radius: 0.125rem !important; /* 2px - matches React rounded-md with custom config */
}

/* Time filter buttons and price filter buttons */
.mk-time-filter-btn,
.mk-price-filter-btn {
  border-radius: 0.125rem !important; /* 2px - matches React rounded-md */
}

/* NOTE: Buttons, cards, and other UI elements may use different border-radius values:
   - Buttons often use rounded-lg = var(--radius) = 0.25rem (4px)
   - Some elements use rounded-sm = 0px
   - This fix ONLY affects FORM INPUTS which use rounded-md = 0.125rem (2px)
*/

/* ==========================================================================
   END FIX-11: Form Inputs Border-Radius
   ========================================================================== */

/* ==========================================================================
   FIX-19: Catalog Filter Styling
   ==========================================================================

   Issues Fixed:
   1. Category container border-radius: 0.5rem → 0.125rem (rounded-sm)
   2. Time/Quick filter buttons: 0 → 0.125rem (rounded-sm)
   3. Category heading size: h2 28px → h3 18px (text-lg)

   React Reference: src/pages/Catalog.tsx
   - Filter containers: className="rounded-sm" = 0.125rem (2px)
   - Section headings: "text-sm font-medium uppercase tracking-wide text-muted-foreground"
   - Category heading: text-lg (18px), not h2 28px

   Date: 2026-03-24
   ========================================================================== */

/* Category filter container - rounded-sm = 0.125rem */
.mk-catalog__categories,
.mk-category-filter,
.catalog-categories {
  border-radius: 0.125rem !important;
}

/* Time filter buttons - rounded-sm = 0.125rem */
.mk-time-filter__btn,
.mk-quick-filter__btn,
.catalog-time-filter button {
  border-radius: 0.125rem !important;
}

/* Category heading - should be text-lg (18px), not h2 (28px) */
.mk-catalog__categories h2,
.mk-category-filter h2,
.catalog-filter-heading {
  font-size: 1.125rem !important; /* text-lg = 18px, not 28px */
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
}

/* Filter section headings - text-sm uppercase */
.mk-catalog__sidebar h3,
.mk-catalog-sidebar h3 {
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0.75rem !important;
}

/* ==========================================================================
   END FIX-19: Catalog Filter Styling
   ========================================================================== */

/* ==========================================================================
   FIX-20: Minor Styling Fixes
   ==========================================================================

   Fixes:
   1. Bid count missing font-weight: 500 (React uses font-medium)
   2. Back link icon-text gap: 4px → 8px (React uses gap-2)
   3. Commission info text opacity: 100% → 80% (React uses text-primary-foreground/80)
   4. Bid form hint text: 13px → 12px (React uses text-xs)
   5. Bid form container background tint (React uses bg-primary/5)

   React References:
   - font-medium = 500
   - gap-2 = 0.5rem (8px)
   - text-primary-foreground/80 = 80% opacity
   - text-xs = 0.75rem (12px)
   - bg-primary/5 = 5% opacity tint

   Date: 2026-03-24
   ========================================================================== */

/* Bid count font weight - should be medium (500) not regular (400) */
.mk-bid-count,
.auction-bid-count,
.bid-count-badge,
.mk-product-card__bid-count,
.mk-artwork-card__bid-count {
  font-weight: 500 !important; /* font-medium */
}

/* Back link icon-text gap - should be 8px (gap-2) not 4px */
.mk-back-link,
.back-to-catalog,
a[href*="katalogas"] .wp-block-button__link,
.back-to-auction-link,
.mk-breadcrumb a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
}

/* Commission info section text opacity - should be 80% not 100% */
.mk-section--dark p,
.mk-section--dark li,
.commission-info p,
.commission-info li,
.mk-commission-info p,
.mk-commission-info li {
  opacity: 0.8 !important; /* text-primary-foreground/80 */
}

/* Bid form hint text - should be 12px (text-xs) not 13px */
.mk-bid-form__hint,
.bid-form-hint,
.auction-bid-form .hint-text,
.mk-bid-help-text {
  font-size: 0.75rem !important; /* text-xs = 12px */
  line-height: 1rem !important;
}

/* Bid form container background tint - subtle primary color */
.mk-bid-form,
.auction-bid-form,
.mk-bid-section {
  background-color: hsl(var(--primary) / 0.05) !important; /* bg-primary/5 */
  border-radius: 0.5rem !important;
  padding: 1rem !important;
}

/* Ensure bid form input maintains correct radius */
.mk-bid-form input[type="number"],
.auction-bid-form input[type="number"] {
  border-radius: 0.125rem !important; /* rounded-md = 2px in our custom config */
}

/* ==========================================================================
   END FIX-20: Minor Styling Fixes
   ========================================================================== */

/* ==========================================================================
   SECTION 188: SELECT DROPDOWN BORDER-RADIUS FIX (2026-03-25)

   ISSUE: Select dropdowns using 0.375rem (6px) or 0 (0px) but should use
   0.125rem (2px) per custom Tailwind config where rounded-md = calc(var(--radius) - 2px)

   React Reference: tailwind.config.ts lines 78-82
   - --radius = 0.25rem (4px)
   - rounded-md = calc(var(--radius) - 2px) = 0.125rem (2px)

   This section overrides ALL previous select border-radius rules with the
   correct 0.125rem (2px) value.
   ========================================================================== */

/* Select dropdowns - rounded-md = 0.125rem (2px) per custom config */
select,
.mk-price-select,
.mk-sort-select,
#mk-price-range,
.mk-filter-select,
.mk-poaukcionine-select,
.woocommerce-ordering select,
select.orderby,
.mk-select,
.woocommerce select,
.mk-catalog-toolbar select,
.mk-catalog-toolbar .mk-sort-select,
.mk-catalog__toolbar select,
.mk-toolbar select,
.mk-sort-dropdown,
.mk-price-filter__select,
.mk-price-range-select,
.mk-filter-card select {
  border-radius: 0.125rem !important; /* rounded-md = 2px (NOT standard 6px or 0px) */
}

/* Poaukcionine page specific selects */
.mk-poaukcionine-filters select,
.mk-poaukcionine-filters .mk-poaukcionine-select,
.poaukcionine-filter-select {
  border-radius: 0.125rem !important; /* rounded-md = 2px */
}
/* View toggle - Container: rounded-lg = 0.25rem (4px), Buttons: rounded-none = 0 */
.mk-view-toggle {
  border-radius: 0.25rem !important; /* rounded-lg = 4px (NOT 8px standard) */
}
.mk-view-toggle button,
.mk-view-toggle a,
.mk-view-btn {
  border-radius: 0 !important; /* rounded-none */
}


/* ==========================================================================
   END SECTION 188: SELECT DROPDOWN BORDER-RADIUS FIX
   ========================================================================== */

/* ==========================================================================
   SECTION 189: HOMEPAGE HERO HEIGHT & STRUCTURE FIX
   Date: 2026-03-25
   
   PROBLEM:
   - React uses explicit `height: 80vh` (or 90vh at lg breakpoint)
   - WordPress had `min-height: 80vh` which allows content to push it taller
   - Multiple conflicting rules throughout the file
   
   REACT REFERENCE (src/components/home/HeroSection.tsx):
   ```tsx
   <section className="relative h-[80vh] lg:h-[90vh] w-full overflow-hidden">
     <div className="relative container mx-auto px-4 h-full flex items-center">
       <div className="max-w-2xl">
   ```
   
   This means:
   - height: 80vh (mobile/tablet), height: 90vh (1024px+)
   - display: flex
   - align-items: center
   - justify-content: center (implied by content centering)
   - overflow: hidden
   
   FIX: Use height NOT min-height, with proper flex centering
   ========================================================================== */

/* DEFINITIVE HERO CONTAINER STYLES - overrides all previous rules */
.mk-hero,
.mk-hero.wp-block-cover,
.wp-block-cover.mk-hero {
  position: relative !important;
  height: 80vh !important; /* h-[80vh] - NOT min-height */
  min-height: unset !important; /* Override any inline min-height from WP */
  max-height: 80vh !important; /* Prevent content from pushing taller */
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* items-center */
  justify-content: center !important; /* justify-center */
}

/* Desktop: lg breakpoint = 1024px (NOT 768px) */
@media (min-width: 1024px) {
  .mk-hero,
  .mk-hero.wp-block-cover,
  .wp-block-cover.mk-hero {
    height: 90vh !important; /* lg:h-[90vh] */
    max-height: 90vh !important;
  }
}

/* Ensure inner container also uses flex for vertical centering */
.mk-hero .wp-block-cover__inner-container {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* Content aligns left */
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media (min-width: 640px) {
  .mk-hero .wp-block-cover__inner-container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* Hero content block (h1, buttons wrapper) - block display, not flex */
.mk-hero__content {
  display: block !important;
  max-width: 42rem !important; /* max-w-2xl = 672px */
}

/* ==========================================================================
   END SECTION 189: HOMEPAGE HERO HEIGHT & STRUCTURE FIX
   ========================================================================== */

/* ==========================================================================
   SECTION 190: Pardavimas Step Badges - GOLD Background (CRITICAL FIX)

   React Reference: src/pages/HowToSell.tsx
   - Badge: w-8 h-8 (2rem/32px) bg-gold rounded-full absolute -top-3 -left-3
   - Text: text-foreground font-bold text-sm

   This is the NUCLEAR option with maximum specificity to ensure gold color.
   Pardavimas (page-id-17) badges MUST be gold, NOT forest green.

   Date: 2026-03-25
   ========================================================================== */

/* Ultra-high specificity for Pardavimas step badge container */
body.page-id-17 .mk-sell-steps .mk-sell-step .mk-sell-step__badge,
body.page-id-17 .wp-block-columns .wp-block-column .mk-sell-step__badge,
body.page-id-17 .mk-sell-step__badge.wp-block-group,
body.page-id-17 div.mk-sell-step__badge,
body.page-id-17 .mk-sell-step__badge,
.page-pardavimas .mk-sell-step__badge {
  width: 2rem !important;  /* 32px = w-8 */
  height: 2rem !important; /* 32px = h-8 */
  min-width: 2rem !important;
  min-height: 2rem !important;
  max-width: 2rem !important;
  max-height: 2rem !important;
  background: hsl(42 55% 58%) !important; /* GOLD - bg-gold */
  background-color: hsl(42 55% 58%) !important; /* GOLD fallback */
  color: hsl(160 30% 18%) !important; /* foreground - dark text */
  position: absolute !important;
  top: -0.75rem !important; /* -top-3 = -12px */
  left: -0.75rem !important; /* -left-3 = -12px */
  border-radius: 9999px !important; /* rounded-full */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 700 !important; /* font-bold */
  box-shadow: var(--shadow-card) !important;
  z-index: 10 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Ensure the number inside the badge inherits correct styles */
body.page-id-17 .mk-sell-step__badge .mk-sell-step__number,
body.page-id-17 .mk-sell-step__badge p,
body.page-id-17 .mk-sell-step__badge > *,
.page-pardavimas .mk-sell-step__badge .mk-sell-step__number,
.page-pardavimas .mk-sell-step__badge p {
  margin: 0 !important;
  padding: 0 !important;
  color: hsl(160 30% 18%) !important; /* foreground - dark text on gold */
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 700 !important; /* font-bold */
  line-height: 1 !important;
  background: transparent !important;
}

/* Override WordPress generated color classes on the paragraph */
body.page-id-17 .mk-sell-step__number.has-foreground-color,
body.page-id-17 .mk-sell-step__number.has-text-color,
.page-pardavimas .mk-sell-step__number.has-foreground-color,
.page-pardavimas .mk-sell-step__number.has-text-color {
  color: hsl(160 30% 18%) !important; /* foreground */
}

/* Ensure step cards have relative positioning for absolute badge */
body.page-id-17 .mk-sell-step,
body.page-id-17 .wp-block-column.mk-sell-step,
.page-pardavimas .mk-sell-step {
  position: relative !important;
  overflow: visible !important;
}

/* ==========================================================================
   END SECTION 190: Pardavimas Step Badges - GOLD Background
   ========================================================================== */

/* ==========================================================================
   SECTION 191: SINGLE PRODUCT GRID GAP FIX
   Date: 2026-03-25

   PROBLEM:
   - Single product page grid gap is 2.5rem but should be 3rem

   REACT REFERENCE (src/pages/ArtworkDetail.tsx line 116):
   ```tsx
   <div className="grid lg:grid-cols-2 gap-12">
   ```
   - gap-12 = 3rem (48px)
   - py-12 = 3rem vertical padding

   FIX: Ensure all single product layout selectors use gap: 3rem
   ========================================================================== */

/* Single product - two column grid with gap-12 (3rem) */
.single-product .mk-product-layout,
.single-product .product-columns,
body.single-product .wp-block-columns,
.single-product .mk-product-detail > .wp-block-columns,
.mk-product-detail > .wp-block-columns,
.single-product main .wp-block-columns,
body.single-product .woocommerce div.product,
body.single-product .wp-block-columns:not(.mk-trust-badges .wp-block-columns):not(.is-style-trust-badges) {
  gap: 3rem !important; /* gap-12 = 48px (NOT 2.5rem/40px) */
}

/* Container vertical padding - py-12 = 3rem */
.single-product .mk-product-detail,
.single-product main.wp-block-group,
body.single-product .entry-content {
  padding-top: 3rem !important; /* py-12 = 48px */
  padding-bottom: 3rem !important; /* py-12 = 48px */
}

/* Mobile (below lg breakpoint) - reduce gap to 2rem but NOT 2.5rem */
@media (max-width: 1279px) {
  .single-product .mk-product-layout,
  .single-product .product-columns,
  body.single-product .wp-block-columns,
  .single-product .mk-product-detail > .wp-block-columns,
  .mk-product-detail > .wp-block-columns,
  .single-product main .wp-block-columns,
  body.single-product .woocommerce div.product,
  body.single-product .wp-block-columns:not(.mk-trust-badges .wp-block-columns):not(.is-style-trust-badges) {
    gap: 2rem !important; /* gap-8 = 32px on mobile */
  }
}

/* ==========================================================================
   END SECTION 191: SINGLE PRODUCT GRID GAP FIX
   ========================================================================== */

/* ==========================================================================
   SECTION 192: INFORMACIJA ACTIVE TAB FOREST GREEN FIX
   Date: 2026-03-25

   Issue: Active tabs on Informacija page should have forest green background
   (bg-primary), not light/cream.

   React Reference: Information.tsx line 337
   - data-[state=active]:bg-primary → hsl(160 30% 28%) = forest green
   - data-[state=active]:text-primary-foreground → hsl(40 30% 96%) = cream

   This fix uses maximum specificity to override any earlier conflicting rules.
   ========================================================================== */

/* Informacija tabs - active state is FOREST GREEN (maximum specificity) */
body.page-informacija .mk-info-tab-btn.active,
body.page-informacija .mk-info-tabs__trigger.active,
body.page-informacija .mk-info-tabs__trigger--active,
body.page-informacija .mk-info-tabs__nav a.active,
body.page-informacija .mk-info-tabs__nav a[aria-current="page"],
body[class*="informacija"] .mk-info-tab-btn.active,
body[class*="informacija"] .mk-info-tabs__trigger.active,
.informacija .mk-info-tab-btn.active,
.informacija .mk-info-tabs__nav a.active,
.mk-info-tabs .mk-info-tab-btn.active,
.mk-info-tabs__list .mk-info-tab-btn.active,
.mk-info-tabs__nav .mk-info-tab-btn.active,
.mk-info-tab-btn[data-state="active"],
.mk-info-tabs__trigger[data-state="active"],
a.mk-info-tab-btn.active,
button.mk-info-tab-btn.active,
.wp-block-button.is-style-active .wp-block-button__link {
  background: hsl(160 30% 28%) !important; /* bg-primary = forest green */
  background-color: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important; /* text-primary-foreground = cream */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

/* Active tab hover state - NO CHANGE (React has no hover effect on active tabs) */
body.page-informacija .mk-info-tab-btn.active:hover,
body.page-informacija .mk-info-tabs__nav a.active:hover,
body[class*="informacija"] .mk-info-tab-btn.active:hover,
.informacija .mk-info-tab-btn.active:hover,
.mk-info-tabs .mk-info-tab-btn.active:hover,
.mk-info-tab-btn[data-state="active"]:hover,
.mk-info-tabs__trigger[data-state="active"]:hover {
  background: hsl(160 30% 28%) !important; /* Keep forest green on hover */
  background-color: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important; /* Keep cream on hover */
}

/* ==========================================================================
   END SECTION 192: INFORMACIJA ACTIVE TAB FOREST GREEN FIX
   ========================================================================== */
/* ==========================================================================
   SECTION 200: INFORMACIJA TABS MOBILE ICON-ONLY FIX
   Date: 2026-03-25

   React source: src/pages/Information.tsx lines 331-343
   - Tab label: <span className="hidden sm:inline">{tab.label}</span>
   - Icon always visible, label hidden on mobile (< 640px)

   EXACT BEHAVIOR:
   - Screens < 640px (mobile): Only icons visible, labels hidden
   - Screens >= 640px (sm+): Both icons and labels visible
   ========================================================================== */

/* Hide all tab labels on mobile — comprehensive selectors */
@media (max-width: 639px) {
  /* Primary selectors for mk-tab-label class */
  .mk-info-tab-btn .mk-tab-label,
  .mk-info-tabs__trigger .mk-tab-label,
  .mk-info-tabs__nav a .mk-tab-label {
    display: none !important;
  }

  /* Selectors for generic span elements that are NOT the icon */
  .mk-info-tab-btn > span:not(.mk-tab-icon):not(:has(svg)),
  .mk-info-tabs__trigger > span:not(.mk-tab-icon):not(:has(svg)),
  .mk-info-tabs__nav a > span:not(.mk-tab-icon):not(:has(svg)) {
    display: none !important;
  }

  /* Fallback: target span after SVG (label typically follows icon) */
  .mk-info-tab-btn svg ~ span,
  .mk-info-tabs__trigger svg ~ span,
  .mk-info-tabs__nav a svg ~ span {
    display: none !important;
  }

  /* Page-specific body class selector */
  body.page-informacija .mk-info-tab-btn span:last-child:not(:first-child),
  body.page-informacija .mk-info-tabs__nav a span:last-child:not(:first-child) {
    display: none !important;
  }

  /* Additional comprehensive selectors for all possible markup structures */
  .mk-info-tabs .mk-info-tab span:not(.mk-tab-icon),
  body.page-informacija .mk-info-tab-btn span:last-child,
  .page-id-informacija .wp-block-button__link span:not(:first-child),
  .mk-info-tabs button span:not(:first-child):not(.mk-tab-icon),
  .mk-info-tabs a span:not(:first-child):not(.mk-tab-icon) {
    display: none !important;
  }

  /* Ensure icons remain visible */
  .mk-info-tab-btn .mk-tab-icon,
  .mk-info-tab-btn svg,
  .mk-info-tabs__trigger .mk-tab-icon,
  .mk-info-tabs__trigger svg,
  .mk-info-tabs__nav a .mk-tab-icon,
  .mk-info-tabs__nav a svg,
  .mk-info-tabs svg,
  .mk-info-tab svg {
    display: inline-block !important;
    flex-shrink: 0 !important;
  }

  /* Adjust tab button sizing for icon-only mode */
  .mk-info-tab-btn,
  .mk-info-tabs__trigger,
  .mk-info-tabs__nav a,
  .mk-info-tab {
    padding: 0.5rem !important; /* Equal padding when icon-only */
    min-width: 2.5rem !important; /* Ensure touchable size */
    justify-content: center !important;
  }
}

/* Ensure labels are visible on sm+ screens (>= 640px) */
@media (min-width: 640px) {
  .mk-info-tab-btn .mk-tab-label,
  .mk-info-tabs__trigger .mk-tab-label,
  .mk-info-tabs__nav a .mk-tab-label,
  .mk-info-tab-btn svg ~ span,
  .mk-info-tabs__trigger svg ~ span,
  .mk-info-tabs__nav a svg ~ span {
    display: inline !important;
  }

  /* Restore normal padding with labels */
  .mk-info-tab-btn,
  .mk-info-tabs__trigger,
  .mk-info-tabs__nav a,
  .mk-info-tab {
    padding: 0.5rem 0.75rem !important; /* px-3 py-2 */
    justify-content: flex-start !important;
  }
}

/* ==========================================================================
   END SECTION 200: INFORMACIJA TABS MOBILE ICON-ONLY FIX
   ========================================================================== */

/* ==========================================================================
   SECTION 208: Katalogas Grid — 2 Columns at lg (1024-1279px)
   Reference: Catalog.tsx — sm:grid-cols-2 xl:grid-cols-3 (NO lg:grid-cols-3)
   Date: 2026-03-25
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1279px) {
  .mk-catalog__main .wc-block-product-template,
  .mk-catalog__main .wp-block-woocommerce-product-collection ul,
  .mk-catalog__main .products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================================
   SECTION 212: Poaukcionine Deadline Badge = RED (Override Amber)
   Reference: PostAuction.tsx lines 117-119 — bg-destructive when daysLeft <= 2
   CRITICAL: Must override Section 106 amber rules
   Date: 2026-03-25
   ========================================================================== */

/* Maximum specificity to ensure RED wins over amber */
body .mk-deadline-badge,
body .mk-badge--deadline,
body .mk-poaukcionine-grid .mk-deadline-badge,
body .page-id-93 .mk-deadline-badge,
body [class*="poaukcion"] .mk-deadline-badge,
.woocommerce .mk-deadline-badge {
  background-color: hsl(0 65% 50%) !important; /* RED #D42A2A */
  background: hsl(0 65% 50%) !important;
  color: hsl(0 0% 100%) !important; /* WHITE */
  border-color: hsl(0 65% 50%) !important;
}

/* Pulse animation for urgent deadlines */
body .mk-deadline-badge.urgent,
body .mk-deadline-badge[data-urgent="true"] {
  animation: mk-deadline-pulse 2s infinite !important;
}

@keyframes mk-deadline-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ==========================================================================
   END SECTION 212: Poaukcionine Deadline Badge = RED
   ========================================================================== */

/* ==========================================================================
   SECTION 209: Single Product Timer Parity
   Reference: AuctionTimer.tsx full variant — p-6, text-3xl/4xl, text-xs labels
   Date: 2026-03-25
   ========================================================================== */

.mk-product-timer,
.auction-time-countdown,
.woocommerce-simple-auctions .auction-time {
  padding: 1.5rem !important;
}

.mk-product-timer .countdown_amount,
.auction-time-countdown .countdown_amount {
  font-size: 1.875rem !important;
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 700 !important;
}

@media (min-width: 768px) {
  .mk-product-timer .countdown_amount,
  .auction-time-countdown .countdown_amount {
    font-size: 2.25rem !important;
  }
}

.mk-product-timer .countdown_period,
.auction-time-countdown .countdown_period {
  font-size: 0.75rem !important;
  margin-top: 0.25rem !important;
}

.mk-product-timer .hasCountdown,
.auction-time-countdown .hasCountdown {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important;
}

.mk-product-timer .countdown_section,
.auction-time-countdown .countdown_section {
  margin: 0 !important;
  text-align: center !important;
}

/* ==========================================================================
   END SECTION 209: Single Product Timer Parity
   ========================================================================== */

/* ==========================================================================
   SECTION 216: Pirkimas Step Badge Parity
   Reference: HowToBuy.tsx — text-xl (1.25rem) badge, pt-2 (0.5rem) content
   Date: 2026-03-25
   ========================================================================== */

body.page-id-16 .mk-pirkimas-step__badge p,
.page-pirkimas .mk-pirkimas-step__badge p,
.mk-pirkimas-step__badge p {
  font-size: 1.25rem !important; /* text-xl = 20px, NOT 1.5rem */
  line-height: 1 !important;
  margin: 0 !important;
}

body.page-id-16 .mk-pirkimas-step__content,
.page-pirkimas .mk-pirkimas-step__content,
.mk-pirkimas-step__content {
  padding-top: 0.5rem !important; /* pt-2 = 8px, was 0 */
}

/* Ensure badge is forest green (not gold like Pardavimas) */
.mk-pirkimas-step__badge {
  background: hsl(var(--primary)) !important; /* forest green */
  width: 4rem !important; /* w-16 = 64px */
  height: 4rem !important; /* h-16 = 64px */
}

/* ==========================================================================
   END SECTION 216: Pirkimas Step Badge Parity
   ========================================================================== */

/* ==========================================================================
   SECTION 211: Galerija Category Filter Border = Forest Green
   Reference: Gallery.tsx — variant="outline" has border border-primary
   Date: 2026-03-25
   ========================================================================== */

.mk-gallery-filter-btn,
.mk-gallery-filters .wp-block-button__link,
.mk-category-filter-btn[data-variant="outline"] {
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

.mk-gallery-filter-btn:hover,
.mk-gallery-filters .wp-block-button__link:hover {
  background: hsl(var(--primary) / 0.1) !important;
}

.mk-gallery-filter-btn.active,
.mk-gallery-filter-btn[aria-pressed="true"],
.mk-gallery-filters .wp-block-button__link.active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* ==========================================================================
   SECTION 214: Form Inputs Radius = 2px (rounded-md)
   Reference: input.tsx, textarea.tsx — rounded-md = calc(var(--radius) - 2px) = 0.125rem
   Date: 2026-03-25
   ========================================================================== */

/* All form inputs site-wide should be 2px, not 0 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="password"],
.wpcf7 textarea,
.wpcf7 select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce textarea,
.woocommerce select,
input.mk-input,
textarea.mk-textarea,
select.mk-select {
  border-radius: 0.125rem !important; /* 2px - React rounded-md */
}

/* Submit buttons should be 4px (rounded = var(--radius)) */
.wpcf7 input[type="submit"],
.wpcf7-submit,
button.mk-btn-submit {
  border-radius: 0.25rem !important; /* 4px - React rounded */
}

/* ==========================================================================
   END SECTION 214: Form Inputs Radius = 2px (rounded-md)
   ========================================================================== */

/* ==========================================================================
   SECTION 210: Single Product Image & Card Radius = 0
   Reference: ArtworkDetail.tsx — rounded-sm = 0 (custom Tailwind config)
   Date: 2026-03-25
   ========================================================================== */

.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery img,
.mk-product-gallery {
  border-radius: 0 !important;
}

.mk-pricing-card,
.mk-bid-form,
.mk-artwork-info-card {
  border-radius: 0 !important;
}

/* PARDUOTA sold overlay */
.mk-sold-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: hsl(var(--foreground) / 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

.mk-sold-badge {
  background: hsl(var(--gold)) !important;
  color: hsl(var(--foreground)) !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  padding: 0.75rem 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  border-radius: 0 !important;
}

.mk-sold-badge svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

/* ==========================================================================
   END SECTION 210: Single Product Image & Card Radius = 0
   ========================================================================== */

/* ==========================================================================
   SECTION 218: Gift Voucher rounded-xl = 0.75rem (12px) Tailwind Default
   Reference: GiftVoucher.tsx — feature cards and validity rules use rounded-xl
   Date: 2026-03-25
   ========================================================================== */

/* Feature cards */
.mk-voucher-feature,
.mk-voucher-features .wp-block-column,
body.page-id-19 .mk-feature-card {
  border-radius: 0.75rem !important; /* 12px, NOT 0.5rem */
}

/* Validity rules card */
.mk-voucher-rules,
.mk-voucher-validity,
body.page-id-19 .mk-rules-card {
  border-radius: 0.75rem !important;
}

/* Amount buttons use rounded-lg = 0.5rem (8px) which IS correct */
.mk-voucher-amount-btn {
  border-radius: 0.5rem !important; /* rounded-lg = 8px, correct */
}

/* Price overlay uses rounded-lg = 0.5rem */
.mk-voucher-price-overlay {
  border-radius: 0.5rem !important;
}

/* ==========================================================================
   END SECTION 218: Gift Voucher rounded-xl = 0.75rem (12px) Tailwind Default
   ========================================================================== */

/* ==========================================================================
   SECTION 215: Pardavimas Step Grid Parity
   Reference: HowToSell.tsx — gap-6 (1.5rem), badge text-sm (0.875rem), items-center
   Date: 2026-03-25
   ========================================================================== */

.mk-sell-steps-grid,
.mk-sell-steps .wp-block-columns {
  gap: 1.5rem !important; /* was 2rem */
  margin-bottom: 4rem !important; /* mb-16 */
}

.mk-sell-step__badge {
  font-size: 0.875rem !important; /* text-sm, was 1rem */
  align-items: center !important; /* was start */
  justify-content: center !important;
}

.mk-sell-step__badge p,
.mk-sell-step__number {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0.875rem !important;
}

.mk-sell-step__title {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important; /* mb-2, was 0.75rem */
}

/* File upload zone radius = 0 (rounded-sm) */
.mk-sell-form .wpcf7-file,
.mk-file-upload-zone {
  border-radius: 0 !important;
}

/* ==========================================================================
   END SECTION 215: Pardavimas Step Grid Parity
   ========================================================================== */

/* ==========================================================================
   SECTION 213: Kontaktai Form Card Radius = 0
   Reference: Contact.tsx — bg-card rounded-sm (0px) shadow-elegant p-8
   Date: 2026-03-25
   ========================================================================== */

body.page-id-15 .mk-card-elegant,
body.page-id-15 .mk-contact-form-card,
.page-kontaktai .mk-card-elegant,
.mk-contact-form-card {
  border-radius: 0 !important;
}

/* Contact info icon circles */
.mk-contact-info .mk-icon-circle {
  width: 48px !important;
  height: 48px !important;
  border-radius: 9999px !important;
  background: hsl(var(--primary) / 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.mk-contact-info .mk-icon-circle svg {
  width: 20px !important;
  height: 20px !important;
  color: hsl(var(--primary)) !important;
}

/* ==========================================================================
   END SECTION 213: Kontaktai Form Card Radius = 0
   ========================================================================== */

/* ==========================================================================
   SECTION 207: Katalogas Sidebar Spacing
   Reference: Catalog.tsx sidebar — space-y-6 (1.5rem) between sections
   Date: 2026-03-25
   ========================================================================== */

.mk-catalog-sidebar > .wp-block-group,
.mk-catalog-sidebar .mk-filter-section {
  gap: 1.5rem !important;
}

.mk-category-list,
.mk-time-filters {
  gap: 0.75rem !important;
}

.mk-quick-filters {
  gap: 1rem !important;
}

/* ==========================================================================
   END SECTION 207: Katalogas Sidebar Spacing
   ========================================================================== */

/* ==========================================================================
   SECTION 206: Header Search Icon Position — LEFT not RIGHT
   Reference: SearchBar.tsx — icon uses left-3 position with pl-9 input padding
   Date: 2026-03-25
   ========================================================================== */

.mk-header-search .wp-block-search__inside-wrapper {
  position: relative !important;
}

.mk-header-search .wp-block-search__button {
  position: absolute !important;
  left: 0.75rem !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  z-index: 1 !important;
}

.mk-header-search .wp-block-search__button svg {
  width: 1rem !important;
  height: 1rem !important;
}

.mk-header-search .wp-block-search__input {
  padding-left: 2.25rem !important;
  padding-right: 0.75rem !important;
}

/* ==========================================================================
   END SECTION 206: Header Search Icon Position — LEFT not RIGHT
   ========================================================================== */

/* ==========================================================================
   SECTION 223: Sort Dropdown Width = 200px
   Reference: Catalog.tsx — SelectTrigger className="w-[200px]"
   Date: 2026-03-25
   ========================================================================== */

.mk-catalog__toolbar select.orderby,
.mk-catalog__toolbar .woocommerce-ordering select,
.mk-sort-select,
select.mk-sort-dropdown {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
}

/* Poaukcionine page filters also 180px */
.mk-poaukcionine-filters select {
  width: 180px !important;
  min-width: 180px !important;
}

/* ==========================================================================
   END SECTION 223: Sort Dropdown Width = 200px
   ========================================================================== */

/* ==========================================================================
   SECTION 217: Plenerai rounded-xl = 0.75rem (12px) Tailwind Default
   Reference: tailwind.config.ts does NOT override rounded-xl, uses Tailwind default
   Date: 2026-03-25
   ========================================================================== */

/* Plenerai page elements using rounded-xl */
.mk-plenerai-icon-box,
.mk-plenerai-about .wp-block-group[class*="rounded"],
body.page-id-18 .mk-icon-box {
  border-radius: 0.75rem !important; /* 12px, NOT 0.5rem */
}

.mk-plenerai-participant,
.mk-plenerai-participants .wp-block-column,
body.page-id-18 .mk-participant-card {
  border-radius: 0.75rem !important;
}

.mk-plenerai-gallery img,
.mk-plenerai-gallery .wp-block-image img,
body.page-id-18 .mk-gallery-img {
  border-radius: 0.75rem !important;
}

/* Event info card uses rounded-2xl = 1rem (16px) */
.mk-plenerai-event-card {
  border-radius: 1rem !important;
}

/* ==========================================================================
   END SECTION 217: Plenerai rounded-xl = 0.75rem (12px) Tailwind Default
   ========================================================================== */

/* ==========================================================================
   SECTION 219: Form Focus Ring — Double Box-Shadow
   Reference: input.tsx — focus-visible:ring-2 ring-offset-2 ring-ring
   Date: 2026-03-25
   ========================================================================== */

/* Double box-shadow creates offset ring effect */
.wpcf7 input:focus,
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus,
.wpcf7 select:focus-visible,
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
input.mk-input:focus,
textarea.mk-textarea:focus,
select.mk-select:focus {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;
  border-color: hsl(var(--ring)) !important;
}

/* Remove default browser outline */
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible {
  outline: none !important;
}

/* ==========================================================================
   END SECTION 219: Form Focus Ring — Double Box-Shadow
   ========================================================================== */

/* ==========================================================================
   SECTION 220: Form Input Responsive Font-Size
   Reference: input.tsx — text-base md:text-sm (1rem mobile, 0.875rem desktop)
   Date: 2026-03-25
   ========================================================================== */

/* Mobile: 1rem (16px) - prevents iOS zoom on focus */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select,
.woocommerce input,
.woocommerce textarea,
.woocommerce select {
  font-size: 1rem !important;
}

/* Desktop: 0.875rem (14px) at 768px+ */
@media (min-width: 768px) {
  .wpcf7 input,
  .wpcf7 textarea,
  .wpcf7 select,
  .woocommerce input,
  .woocommerce textarea,
  .woocommerce select {
    font-size: 0.875rem !important;
  }
}

/* Label styling */
.wpcf7 label,
.woocommerce label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* ==========================================================================
   END SECTION 220: Form Input Responsive Font-Size
   ========================================================================== */

/* ==========================================================================
   SECTION 222: Product Card Radius = 0 (Override Section 129)
   Reference: ArtworkCard.tsx — rounded-sm = 0 (custom Tailwind config)
   CRITICAL: Must override Section 129 line 20917 which incorrectly sets 0.125rem
   Date: 2026-03-25
   ========================================================================== */

/* Maximum specificity to ensure 0 wins */
body .mk-artwork-card,
body .mk-gallery-card,
body .mk-product-card,
body .wc-block-product,
body .wc-block-grid__product,
body .woocommerce ul.products li.product,
body .woocommerce-page ul.products li.product,
.woocommerce .mk-artwork-card,
.woocommerce .mk-product-card {
  border-radius: 0 !important;
}

/* Card image container */
body .mk-artwork-card .mk-card-image,
body .mk-product-card .woocommerce-product-gallery,
body .wc-block-product .wc-block-components-product-image {
  border-radius: 0 !important;
}

/* Card content area */
body .mk-artwork-card .mk-card-content,
body .mk-product-card .mk-card-body {
  border-radius: 0 !important;
}

/* ==========================================================================
   END SECTION 222: Product Card Radius = 0 (Override Section 129)
   ========================================================================== */

/* ==========================================================================
   SECTION 221: Button Base Padding
   Reference: button.tsx — default size h-10 px-6 py-2 (2.5rem height, 1.5rem/0.5rem padding)
   Date: 2026-03-25
   ========================================================================== */

/* Default button padding */
.mk-btn,
.wp-block-button__link {
  padding: 0.5rem 1.5rem !important; /* py-2 px-6 */
}

/* Size variants */
.mk-btn-sm,
.wp-block-button.is-style-small .wp-block-button__link {
  padding: 0 1rem !important; /* px-4, h-9 handled by height */
  height: 2.25rem !important;
}

.mk-btn-lg,
.wp-block-button.is-style-large .wp-block-button__link {
  padding: 0 2rem !important; /* px-8 */
  height: 3rem !important;
}

.mk-btn-xl {
  padding: 0 2.5rem !important; /* px-10 */
  height: 3.5rem !important;
}

/* Icon button (square) */
.mk-btn-icon {
  padding: 0 !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
}

/* ==========================================================================
   END SECTION 221: Button Base Padding
   ========================================================================== */

/* ==========================================================================
   SECTION 224: View Toggle Container Radius = 2px (rounded-md)
   Reference: Catalog.tsx — flex border rounded-md (custom config = 0.125rem)
   Date: 2026-03-25
   ========================================================================== */

.mk-view-toggle,
.mk-catalog__toolbar .mk-view-mode-toggle {
  border-radius: 0.125rem !important; /* 2px, NOT 4px */
  overflow: hidden !important;
}

/* Individual toggle buttons have no radius (square edges) */
.mk-view-toggle button,
.mk-view-toggle .wp-block-button__link {
  border-radius: 0 !important;
}

/* First button rounded left only */
.mk-view-toggle button:first-child {
  border-top-left-radius: 0.125rem !important;
  border-bottom-left-radius: 0.125rem !important;
}

/* Last button rounded right only */
.mk-view-toggle button:last-child {
  border-top-right-radius: 0.125rem !important;
  border-bottom-right-radius: 0.125rem !important;
}

/* ==========================================================================
   END SECTION 224: View Toggle Container Radius = 2px (rounded-md)
   ========================================================================== */

/* ==========================================================================
   SECTION 228: WAVE 2 FIX — Timer Padding + Grid Layout
   Reference: React AuctionTimer.tsx full variant
   Date: 2026-03-25
   ========================================================================== */

.mk-product-timer,
.mk-auction-timer--full,
.single-product .auction-time-left {
  padding: 1.5rem !important; /* p-6 = 24px */
}

.mk-product-timer .hasCountdown,
.mk-auction-timer--full .hasCountdown,
.single-product .auction-time-left .hasCountdown {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important; /* gap-3 = 12px */
}

.mk-product-timer .countdown_section,
.mk-auction-timer--full .countdown_section {
  margin: 0 !important;
  text-align: center !important;
}

/* ==========================================================================
   END SECTION 228: WAVE 2 FIX — Timer Padding + Grid Layout
   ========================================================================== */

/* ==========================================================================
   SECTION 230: WAVE 2 FIX — Pricing Card + Gallery Radius = 0
   Reference: React rounded-sm = 0px in custom config
   Date: 2026-03-25
   ========================================================================== */

.mk-pricing-card,
.mk-bid-card,
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery img {
  border-radius: 0 !important;
}

/* Bid form also uses rounded-sm = 0 */
.mk-bid-form,
.single-product .auction-bid-form {
  border-radius: 0 !important;
}

/* ==========================================================================
   END SECTION 230: WAVE 2 FIX — Pricing Card + Gallery Radius = 0
   ========================================================================== */

/* ==========================================================================
   SECTION 231: WAVE 2 FIX — Informacija Page rounded-xl = 0.75rem
   Reference: rounded-xl is standard Tailwind (NOT custom overridden) = 0.75rem
   Date: 2026-03-25
   ========================================================================== */

/* Tab navigation container */
.mk-info-tabs__nav,
.mk-info-tabs .mk-tabs-list,
body [class*="informacija"] .mk-tabs-list {
  border-radius: 0.75rem !important; /* 12px */
}

/* Content panels */
.mk-info-content,
.mk-info-panel,
body [class*="informacija"] .mk-card {
  border-radius: 0.75rem !important; /* 12px */
}

/* Tab triggers use rounded-sm = 0 */
.mk-info-tab-btn,
.mk-info-tabs .mk-tab-trigger {
  border-radius: 0 !important;
}

/* ==========================================================================
   END SECTION 231: WAVE 2 FIX — Informacija Page rounded-xl = 0.75rem
   ========================================================================== */

/* ==========================================================================
   SECTION 233: WAVE 2 FIX — Galerija Filter Button Height + Padding
   Reference: React h-9 px-4 for filter buttons
   Date: 2026-03-25
   ========================================================================== */

.mk-gallery-filter-btn,
.mk-category-filter-btn,
body .page-id-92 .mk-filter-btn {
  height: 2.25rem !important; /* h-9 = 36px */
  padding: 0 1rem !important; /* px-4 = 16px each side */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Inactive buttons use primary border color, not muted */
.mk-gallery-filter-btn:not(.active),
.mk-category-filter-btn:not(.active) {
  border-color: hsl(var(--primary)) !important;
  background: transparent !important;
}

/* Active state */
.mk-gallery-filter-btn.active,
.mk-category-filter-btn.active {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* ==========================================================================
   END SECTION 233: WAVE 2 FIX — Galerija Filter Button Height + Padding
   ========================================================================== */

/* ==========================================================================
   SECTION 236: WAVE 2 FIX — Timer Status Icon Circle = 2.5rem
   Reference: React w-10 h-10 = 2.5rem (40px)
   Date: 2026-03-25
   ========================================================================== */

.mk-timer-status-icon,
.mk-product-timer .timer-status-icon,
.mk-auction-timer .timer-status-icon,
.mk-auction-timer--full .timer-status-circle {
  width: 2.5rem !important; /* w-10 = 40px */
  height: 2.5rem !important; /* h-10 = 40px */
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important; /* rounded-full */
}

/* Icon inside the circle */
.mk-timer-status-icon svg,
.mk-product-timer .timer-status-icon svg {
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
}

/* ==========================================================================
   END SECTION 236: WAVE 2 FIX — Timer Status Icon Circle = 2.5rem
   ========================================================================== */

/* ==========================================================================
   SECTION 234: WAVE 2 FIX — Catalog Grid Columns at Correct Breakpoints
   Reference: React sm:grid-cols-2 xl:grid-cols-3 (NO lg:grid-cols-3)
   Date: 2026-03-25
   ========================================================================== */

/* At lg (1024-1279px): Force 2 columns, NOT 3 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mk-catalog__main .wc-block-product-template,
  .mk-catalog__main .products,
  .archive-product .wc-block-product-template,
  .woocommerce .products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* At xl (1280px+): 3 columns with correct gap */
@media (min-width: 1280px) {
  .mk-catalog__main .wc-block-product-template,
  .mk-catalog__main .products,
  .archive-product .wc-block-product-template,
  .woocommerce .products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important; /* gap-6 = 24px, not 2rem */
  }
}

/* ==========================================================================
   END SECTION 234: WAVE 2 FIX — Catalog Grid Columns at Correct Breakpoints
   ========================================================================== */

/* ==========================================================================
   SECTION 229: WAVE 2 FIX — Timer Font Sizes Responsive
   Reference: React text-3xl md:text-4xl for digits, text-xs for labels
   Date: 2026-03-25
   ========================================================================== */

/* Timer digits - mobile first */
.mk-product-timer .countdown_amount,
.mk-auction-timer--full .countdown_amount,
.single-product .auction-time-left .countdown_amount {
  font-size: 1.875rem !important; /* text-3xl = 30px */
  line-height: 2.25rem !important;
  font-weight: 700 !important;
}

/* Timer digits - desktop */
@media (min-width: 768px) {
  .mk-product-timer .countdown_amount,
  .mk-auction-timer--full .countdown_amount,
  .single-product .auction-time-left .countdown_amount {
    font-size: 2.25rem !important; /* md:text-4xl = 36px */
    line-height: 2.5rem !important;
  }
}

/* Timer labels */
.mk-product-timer .countdown_period,
.mk-auction-timer--full .countdown_period,
.single-product .auction-time-left .countdown_period {
  font-size: 0.75rem !important; /* text-xs = 12px */
  line-height: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ==========================================================================
   END SECTION 229: WAVE 2 FIX — Timer Font Sizes Responsive
   ========================================================================== */

/* ==========================================================================
   SECTION 232: WAVE 2 FIX — Form Input Border-Radius = 0.125rem (2px)
   Reference: React rounded-md = calc(var(--radius) - 2px) = 0.125rem
   This is CRITICAL - inputs use rounded-md, NOT rounded-sm
   Date: 2026-03-25
   ========================================================================== */

/* All form inputs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="password"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select,
.mk-input,
input.mk-input,
textarea.mk-textarea,
select.mk-select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce textarea,
.woocommerce select {
  border-radius: 0.125rem !important; /* 2px - NOT 0 or 6px */
}

/* Submit buttons use rounded = 0.25rem (4px) */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.woocommerce button[type="submit"] {
  border-radius: 0.25rem !important; /* rounded = 4px */
}

/* ==========================================================================
   END SECTION 232: WAVE 2 FIX — Form Input Border-Radius = 0.125rem (2px)
   ========================================================================== */

/* ==========================================================================
   SECTION 238: WAVE 2 FIX — Pirkimas Page H1 Responsive
   Reference: React text-3xl md:text-4xl
   Date: 2026-03-25
   ========================================================================== */

/* Page ID 16 is Pirkimas (How to Buy) */
.page-id-16 h1,
body.page-id-16 .wp-block-heading:first-of-type,
body.page-id-16 .entry-title {
  font-size: 1.875rem !important; /* text-3xl = 30px mobile */
  line-height: 2.25rem !important;
}

@media (min-width: 768px) {
  .page-id-16 h1,
  body.page-id-16 .wp-block-heading:first-of-type,
  body.page-id-16 .entry-title {
    font-size: 2.25rem !important; /* md:text-4xl = 36px */
    line-height: 2.5rem !important;
  }
}

/* ==========================================================================
   END SECTION 238: WAVE 2 FIX — Pirkimas Page H1 Responsive
   ========================================================================== */

/* ==========================================================================
   SECTION 226: WAVE 2 FIX — Product Card Border-Radius = 0
   Reference: React rounded-sm = calc(var(--radius) - 4px) = 0px
   Date: 2026-03-25
   ========================================================================== */

body .mk-artwork-card,
body .mk-gallery-card,
body .wc-block-product,
body .wc-block-grid__product,
body .mk-product-card,
body .products .product,
body .woocommerce-loop-product__link {
  border-radius: 0 !important;
}

/* Also remove any borders that shouldn't be there */
body .mk-artwork-card,
body .mk-product-card,
body .wc-block-product {
  border: none !important;
}

/* ==========================================================================
   END SECTION 226: WAVE 2 FIX — Product Card Border-Radius = 0
   ========================================================================== */

/* ==========================================================================
   SECTION 244: WAVE 2 PARITY FIXES COMPLETE
   Date: 2026-03-25
   Version: 1.27.0

   Sections 226-243 contain fixes from 20-agent parity audit:
   - S226: Product card border-radius = 0
   - S227: Product card content padding = 1.25rem
   - S228: Timer padding + grid layout
   - S229: Timer font sizes responsive
   - S230: Pricing card + gallery radius = 0
   - S231: Informacija rounded-xl = 0.75rem
   - S232: Form input border-radius = 0.125rem (2px)
   - S233: Galerija filter button height + padding
   - S234: Catalog grid columns at correct breakpoints
   - S235: Plenerai + Voucher rounded-xl = 0.75rem
   - S236: Timer status icon circle = 2.5rem
   - S237: Form input responsive font size
   - S238: Pirkimas H1 responsive
   - S239: Header background opacity = 0.95
   - S240: Sidebar visibility maximum specificity
   - S241: Focus ring solid color
   - S242: Sort dropdown comprehensive selectors
   - S243: Feature card radius
   ========================================================================== */

/* ==========================================================================
   SECTION 242: WAVE 2 FIX — Sort Dropdown Comprehensive Selectors
   Reference: Cover all WooCommerce sort dropdown variations
   Date: 2026-03-25
   ========================================================================== */

/* All possible sort dropdown selectors */
.mk-sort-select,
.mk-catalog__toolbar select,
.woocommerce-ordering select,
.orderby,
select.orderby,
.wc-block-sort-select select,
.wc-block-components-sort-select select,
.archive-product select[name="orderby"],
.woocommerce select[name="orderby"] {
  width: 200px !important;
  min-width: 200px !important;
  height: 2.25rem !important; /* h-9 = 36px */
  padding: 0.5rem 2rem 0.5rem 0.75rem !important;
  border-radius: 0.125rem !important; /* rounded-md custom = 2px */
  border: 1px solid hsl(var(--border)) !important;
  background-color: hsl(var(--background)) !important;
  font-size: 0.875rem !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23203D31' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.5rem center !important;
  cursor: pointer !important;
}

/* ==========================================================================
   END SECTION 242: WAVE 2 FIX — Sort Dropdown Comprehensive Selectors
   ========================================================================== */

/* ==========================================================================
   SECTION 235: WAVE 2 FIX — Plenerai + Voucher rounded-xl = 0.75rem
   Reference: rounded-xl is standard Tailwind = 0.75rem (12px)
   Date: 2026-03-25
   ========================================================================== */

/* Plenerai page elements */
.mk-plenerai-icon-box,
.mk-plenerai-participant,
.mk-plenerai-participant-card,
.mk-plenerai-gallery img,
body .page-id-18 .mk-icon-box,
body .page-id-18 .mk-participant-card {
  border-radius: 0.75rem !important; /* 12px */
}

/* Gift voucher page elements */
.mk-voucher-feature,
.mk-voucher-feature-card,
.mk-voucher-rules,
.mk-voucher-rules-card,
body .page-id-19 .mk-feature-card,
body .page-id-19 .mk-rules-card {
  border-radius: 0.75rem !important; /* 12px */
}

/* Voucher preview image */
.mk-voucher-preview img,
body .page-id-19 .mk-voucher-image img {
  border-radius: 0.5rem !important; /* rounded-lg = 0.5rem for images */
}

/* ==========================================================================
   END SECTION 235: WAVE 2 FIX — Plenerai + Voucher rounded-xl = 0.75rem
   ========================================================================== */

/* ==========================================================================
   SECTION 243: WAVE 2 FIX — Feature Card Radius
   Reference: React feature cards use various radius depending on context
   Date: 2026-03-25
   ========================================================================== */

/* Pirkimas page feature cards - rounded = 0.25rem (4px) */
.page-id-16 .mk-feature-card,
body.page-id-16 [class*="feature-card"] {
  border-radius: 0.25rem !important; /* rounded = var(--radius) = 4px */
}

/* Trust badges row - rounded-lg = 0.25rem in custom config */
.mk-trust-badges .mk-trust-badge,
.mk-trust-badge-card {
  border-radius: 0.25rem !important;
}

/* Step cards use rounded-sm = 0 */
.mk-step-card,
.mk-sell-step,
.mk-pirkimas-step {
  border-radius: 0 !important;
}

/* ==========================================================================
   END SECTION 243: WAVE 2 FIX — Feature Card Radius
   ========================================================================== */

/* ==========================================================================
   SECTION 237: WAVE 2 FIX — Form Input Responsive Font Size
   Reference: React text-base md:text-sm
   Date: 2026-03-25
   ========================================================================== */

/* Mobile: 16px prevents iOS zoom on focus */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select,
.woocommerce input,
.woocommerce textarea,
.woocommerce select {
  font-size: 1rem !important; /* text-base = 16px */
}

/* Desktop: 14px matches design */
@media (min-width: 768px) {
  .wpcf7 input,
  .wpcf7 textarea,
  .wpcf7 select,
  .woocommerce input,
  .woocommerce textarea,
  .woocommerce select {
    font-size: 0.875rem !important; /* md:text-sm = 14px */
  }
}

/* ==========================================================================
   END SECTION 237: WAVE 2 FIX — Form Input Responsive Font Size
   ========================================================================== */

/* ==========================================================================
   SECTION 240: WAVE 2 FIX — Sidebar Visibility Maximum Specificity
   Reference: Sidebar should ALWAYS be visible on desktop
   Date: 2026-03-25
   ========================================================================== */

/* FORCE sidebar visible on desktop with maximum specificity */
@media (min-width: 1024px) {
  html body .mk-catalog__sidebar,
  html body .mk-catalog-sidebar,
  html body .archive .mk-catalog__sidebar,
  html body .archive-product .mk-catalog__sidebar,
  html body .woocommerce .mk-catalog__sidebar,
  html body.archive-product .wp-block-column.mk-catalog__sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    top: 6rem !important;
    flex-basis: 25% !important;
    max-width: 25% !important;
    height: fit-content !important;
  }

  /* Ensure parent columns container is flex */
  html body .mk-catalog__layout,
  html body .archive-product .wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
}

/* Mobile: Hide sidebar */
@media (max-width: 1279px) {
  html body .mk-catalog__sidebar,
  html body .mk-catalog-sidebar {
    display: none !important;
  }
}

/* ==========================================================================
   END SECTION 240: WAVE 2 FIX — Sidebar Visibility Maximum Specificity
   ========================================================================== */
/* ==========================================================================
   SECTION 239: WAVE 2 FIX — Header Background Opacity = 0.95
   Reference: React bg-background/95
   Date: 2026-03-25
   ========================================================================== */

/* Base header - 95% opacity */
.mk-header,
header.mk-header,
.site-header {
  background-color: hsl(var(--background) / 0.95) !important;
}

/* When backdrop-filter is supported, use 80% for better blur effect */
@supports (backdrop-filter: blur(8px)) {
  .mk-header,
  header.mk-header,
  .site-header {
    background-color: hsl(var(--background) / 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* ==========================================================================
   END SECTION 239: WAVE 2 FIX — Header Background Opacity = 0.95
   ========================================================================== */

/* ==========================================================================
   SECTION 227: WAVE 2 FIX — Product Card Content Padding = 1.25rem
   Reference: React p-5 = 1.25rem (20px)
   Date: 2026-03-25
   ========================================================================== */

body .mk-artwork-card__body,
body .mk-product-card__content,
body .mk-card-body,
body .wc-block-product .wp-block-post-title,
body .products .product .woocommerce-loop-product__title {
  padding: 1.25rem !important;
}

/* Product card meta section also needs proper padding */
body .mk-artwork-card__meta,
body .mk-product-card__meta {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

/* ==========================================================================
   END SECTION 227: WAVE 2 FIX — Product Card Content Padding = 1.25rem
   ========================================================================== */

/* ==========================================================================
   SECTION 241: WAVE 2 FIX — Focus Ring Solid Color
   Reference: React ring-2 ring-offset-2 uses solid colors
   Date: 2026-03-25
   ========================================================================== */

/* Focus ring using double box-shadow technique */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus,
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.mk-input:focus,
.mk-textarea:focus,
.mk-select:focus {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),  /* 2px cream offset */
    0 0 0 4px hsl(var(--ring)) !important; /* 2px primary ring */
}

/* Buttons use primary ring on focus */
button:focus-visible,
.wp-block-button__link:focus-visible,
.mk-btn:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;
}

/* ==========================================================================
   SECTION 242: H4 — GIFT VOUCHER BORDER-RADIUS (HIGH)
   Reference: Fix gift voucher button/overlay border-radius to 0.25rem
   Date: 2026-03-26
   ========================================================================== */

/* --- H4: GIFT VOUCHER BORDER-RADIUS (HIGH) --- */
.mk-voucher-btn,
.mk-voucher-amount-btn,
body.page-id-19 button[class*="voucher"],
.mk-voucher__price-overlay,
.page-id-19 .mk-voucher__price-overlay {
  border-radius: var(--radius, 0.25rem) !important;
}

/* ==========================================================================
   END SECTION 242: H4 — GIFT VOUCHER BORDER-RADIUS (HIGH)
   ========================================================================== */
/* ==========================================================================
   SECTION 242: C4 - TOGGLE SWITCH DIMENSIONS (CRITICAL)
   Reference: React Switch component
   Date: 2026-03-26
   ========================================================================== */

/* Toggle track: 2.75rem x 1.5rem (44px x 24px) */
.mk-sqf-toggle__track,
.mk-qf-toggle__track {
  width: 2.75rem !important;
  height: 1.5rem !important;
}

/* Toggle thumb: 1.25rem x 1.25rem (20px) with 2px inset */
.mk-sqf-toggle__thumb,
.mk-qf-toggle__track::after {
  width: 1.25rem !important;
  height: 1.25rem !important;
  top: 0.125rem !important;
  left: 0.125rem !important;
}

/* Active state: translateX by 1.25rem (track width - thumb width - 2*inset) */
.mk-sqf-toggle.is-active .mk-sqf-toggle__thumb,
.mk-qf-toggle.is-active .mk-qf-toggle__track::after {
  transform: translateX(1.25rem) !important;
}

/* ==========================================================================
   END SECTION 242: C4 - TOGGLE SWITCH DIMENSIONS (CRITICAL)
   ========================================================================== */

/* ==========================================================================
   SECTION 243: H6 — PARDUOTA BADGE SIZE (HIGH)
   Reference: Make PARDUOTA badge larger when shown in sold overlay
   Date: 2026-03-26
   ========================================================================== */

/* --- H6: PARDUOTA BADGE SIZE (HIGH) --- */
.mk-artwork-card__sold-overlay .mk-badge {
  font-size: 1.125rem !important;
  padding: 0.5rem 1rem !important;
}
.mk-artwork-card__sold-overlay .mk-badge svg {
  width: 1rem !important;
  height: 1rem !important;
  margin-right: 0.5rem !important;
}

/* ==========================================================================
   END SECTION 243: H6 — PARDUOTA BADGE SIZE (HIGH)
   ========================================================================== */

/* ==========================================================================
   SECTION 244: H2 — TRUST BADGE BACKGROUND OPACITY (HIGH)
   Reference: Trust badges should use 30% opacity background
   Date: 2026-03-26
   ========================================================================== */

/* --- H2: TRUST BADGE BACKGROUND OPACITY (HIGH) --- */
.single-product .mk-trust-badges__item,
.single-product .mk-trust-badge {
  background: hsl(var(--muted) / 0.3) !important;
}

/* ==========================================================================
   END SECTION 244: H2 — TRUST BADGE BACKGROUND OPACITY (HIGH)
   ========================================================================== */

/* ==========================================================================
   SECTION 244: C3 — FOCUS RING MECHANISM (CRITICAL)
   Reference: React focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
   Double box-shadow creates offset ring effect
   Date: 2026-03-26
   ========================================================================== */

/* --- C3: FOCUS RING (CRITICAL) --- */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.mk-input:focus-visible,
.mk-textarea:focus-visible,
.mk-select__trigger:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;
}

/* ==========================================================================
   END SECTION 244: C3 — FOCUS RING MECHANISM (CRITICAL)
   ========================================================================== */

/* ==========================================================================
   SECTION 245: H1 — SINGLE PRODUCT ROUNDED-SM (HIGH)
   Reference: React uses rounded-sm (2px) which maps to --radius (0.25rem/4px)
   In WP context, single product elements should have border-radius: 0
   Date: 2026-03-26
   ========================================================================== */

/* --- H1: SINGLE PRODUCT ROUNDED-SM (HIGH) --- */
.single-product .mk-trust-badges__item,
.single-product .mk-trust-badge,
.single-product .mk-pricing-card,
.single-product .product-pricing,
.single-product .mk-bid-form,
.single-product .mk-auction-bid-form,
.single-product .mk-post-auction-banner,
.single-product .mk-post-auction-buy {
  border-radius: 0 !important;
}

/* ==========================================================================
   END SECTION 245: H1 — SINGLE PRODUCT ROUNDED-SM (HIGH)
   ========================================================================== */

/* ==========================================================================
   SECTION 245: H5 — ACTIVE TIMER GREEN DOT (HIGH)
   Reference: Animated green dot indicator for active timer status
   Date: 2026-03-26
   ========================================================================== */

/* --- H5: ACTIVE TIMER GREEN DOT (HIGH) --- */
.mk-timer--compact.mk-timer--active::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  background-color: hsl(142 76% 36%);
  border-radius: 9999px;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  margin-right: 0.5rem;
}

/* Ensure flex layout for timer with dot */
.mk-timer--compact.mk-timer--active {
  display: inline-flex !important;
  align-items: center !important;
}

/* ==========================================================================
   END SECTION 245: H5 — ACTIVE TIMER GREEN DOT (HIGH)
   ========================================================================== */

/* ==========================================================================
   SECTION 246: H3 — POST-AUCTION BANNER STYLING (HIGH)
   Reference: Unified amber styling for post-auction banner and buy section
   Date: 2026-03-26
   ========================================================================== */

/* --- H3: POST-AUCTION BANNER (HIGH) --- */
.single-product .mk-post-auction-banner,
.single-product .mk-post-auction-buy {
  background: hsl(38 92% 50% / 0.1) !important;
  border: 1px solid hsl(38 92% 50% / 0.2) !important;
  padding: 1rem !important;
}

/* ==========================================================================
   END SECTION 246: H3 — POST-AUCTION BANNER STYLING (HIGH)
   ========================================================================== */

/* ==================================================================
   SECTION 246: WAVE 2 PARITY FIXES - C1 SIDEBAR VISIBILITY
   Date: 2026-03-25 | Agent: 1/20
   ================================================================== */
@media (min-width: 1024px) {
  .mk-catalog .wp-block-columns,
  .archive-product .wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .mk-catalog__sidebar,
  .archive-product .mk-catalog__sidebar,
  body.archive-product .mk-catalog__sidebar,
  body.post-type-archive-product .mk-catalog__sidebar,
  body.woocommerce .mk-catalog__sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-basis: 25% !important;
    max-width: 25% !important;
    min-width: 280px !important;
    position: sticky !important;
    top: 6rem !important;
    align-self: flex-start !important;
  }
}

/* ==================================================================
   END SECTION 246: WAVE 2 PARITY FIXES - C1 SIDEBAR VISIBILITY
   ================================================================== */

/* ==========================================================================
   SECTION 247: M2 — GALLERY FILTER BUTTON RADIUS (MEDIUM)
   Reference: Gallery/category filter buttons should have minimal radius
   Date: 2026-03-26
   ========================================================================== */

/* --- M2: GALLERY FILTER BUTTON RADIUS (MEDIUM) --- */
.mk-gallery-filter-btn,
.mk-category-filter-btn {
  border-radius: 0.125rem !important;
}

/* ==========================================================================
   END SECTION 247: M2 — GALLERY FILTER BUTTON RADIUS (MEDIUM)
   ========================================================================== */

/* ==========================================================================
   SECTION 248: M3 — KONTAKTAI GRID GAP (MEDIUM)
   Reference: Contact page grid gap should be 1.5rem
   Date: 2026-03-26
   ========================================================================== */

/* --- M3: KONTAKTAI GRID GAP (MEDIUM) --- */
.page-id-15 .mk-contact-grid {
  gap: 1.5rem !important;
}

/* ==========================================================================
   END SECTION 248: M3 — KONTAKTAI GRID GAP (MEDIUM)
   ========================================================================== */

/* ==========================================================================
   SECTION 249: M6 — QUICK BID BUTTON HEIGHT (MEDIUM)
   Reference: Quick bid buttons should have fixed height
   Date: 2026-03-26
   ========================================================================== */

/* --- M6: QUICK BID BUTTON HEIGHT (MEDIUM) --- */
.single-product .mk-quick-bid-btn,
.single-product .mk-quick-bids__grid button {
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   END SECTION 249: M6 — QUICK BID BUTTON HEIGHT (MEDIUM)
   ========================================================================== */

/* ==========================================================================
   SECTION 248: C2 - FORM INPUT BORDER-RADIUS (CRITICAL)
   Reference: Custom Tailwind config rounded-sm = 0.125rem (2px)
   Date: 2026-03-26
   ========================================================================== */

/* --- C2: FORM INPUT BORDER-RADIUS (CRITICAL) --- */
.mk-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.woocommerce form .input-text,
textarea,
.mk-textarea,
.wpcf7-textarea {
  border-radius: 0.125rem !important;
  background-color: hsl(var(--background)) !important;
}

/* Checkbox: rounded-sm = 0 per custom Tailwind config */
.mk-checkbox,
input[type="checkbox"]:not(.wpcf7-acceptance input) {
  border-radius: 0 !important;
}

/* ==========================================================================
   END SECTION 248: C2 - FORM INPUT BORDER-RADIUS (CRITICAL)
   ========================================================================== */

/* ==========================================================================
   SECTION 249: M1 — INPUT RESPONSIVE FONT-SIZE (MEDIUM)
   Reference: 16px on mobile prevents iOS zoom, 14px on desktop for design
   Date: 2026-03-26
   ========================================================================== */

/* --- M1: INPUT RESPONSIVE FONT-SIZE (MEDIUM) --- */
.mk-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"] {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .mk-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"] {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   END SECTION 249: M1 — INPUT RESPONSIVE FONT-SIZE (MEDIUM)
   ========================================================================== */

/* ==========================================================================
   SECTION 249: M5 — GIFT VOUCHER SUBTITLE OPACITY (MEDIUM)
   Reference: Gift voucher subtitle should use 70% opacity
   Date: 2026-03-26
   ========================================================================== */

/* --- M5: GIFT VOUCHER SUBTITLE OPACITY (MEDIUM) --- */
.page-id-19 .mk-voucher-subtitle {
  color: hsl(var(--primary-foreground) / 0.7) !important;
}

/* ==========================================================================
   END SECTION 249: M5 — GIFT VOUCHER SUBTITLE OPACITY (MEDIUM)
   ========================================================================== */

/* ==========================================================================
   SECTION 250: L4 — SELECT DROPDOWN RADIUS (LOW)
   Reference: Select dropdowns should use rounded-sm = 0.125rem (2px)
   Note: L3 (Header mobile) is acceptable as-is
   Date: 2026-03-26
   ========================================================================== */

/* --- L4: SELECT DROPDOWN RADIUS (LOW) --- */
.mk-select-trigger,
select.mk-poaukcionine-select,
.woocommerce-ordering .orderby,
.wc-block-sort-select select,
#mk-price-range {
  border-radius: 0.125rem !important;
}

/* ==========================================================================
   END SECTION 250: L4 — SELECT DROPDOWN RADIUS (LOW)
   ========================================================================== */

/* ==========================================================================
   SECTION 251: M4 — TIMER COMPACT BORDER COLORS (MEDIUM)
   Reference: Timer compact variant border colors with 20% opacity per status
   Date: 2026-03-26
   ========================================================================== */

/* --- M4: TIMER COMPACT BORDER COLORS (MEDIUM) --- */
.mk-timer--compact.mk-timer--ending {
  border: 1px solid hsl(var(--destructive) / 0.2) !important;
}
.mk-timer--compact.mk-timer--active {
  border: 1px solid hsl(142 76% 36% / 0.2) !important;
}
.mk-timer--compact.mk-timer--upcoming {
  border: 1px solid hsl(var(--gold) / 0.2) !important;
}

/* ==========================================================================
   END SECTION 251: M4 — TIMER COMPACT BORDER COLORS (MEDIUM)
   ========================================================================== */

/* ==========================================================================
   SECTION 252: H7 — VIEW MODE TOGGLE CONTAINER (HIGH)
   Reference: View mode toggle should have container border and flush buttons
   Date: 2026-03-26
   ========================================================================== */

/* --- H7: VIEW MODE TOGGLE (HIGH) --- */
.mk-view-toggle {
  gap: 0 !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.125rem !important;
  overflow: hidden !important;
}

.mk-view-toggle button {
  border: none !important;
  border-radius: 0 !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
}

.mk-view-toggle button:not(:last-child) {
  border-right: 1px solid hsl(var(--border)) !important;
}

/* ==========================================================================
   END SECTION 252: H7 — VIEW MODE TOGGLE CONTAINER (HIGH)
   ========================================================================== */

/* ==========================================================================
   SECTION 253: L2 — GIFT VOUCHER CTA HOVER (LOW)
   Reference: Gift voucher order button hover state
   Note: L1 (Plenerai minor radius) acceptable as-is
   Date: 2026-03-26
   ========================================================================== */

/* --- L2: GIFT VOUCHER CTA HOVER (LOW) --- */
.mk-voucher-order-btn:hover:not(:disabled) {
  background: hsl(var(--gold) / 0.9) !important;
}

/* ==========================================================================
   END SECTION 253: L2 — GIFT VOUCHER CTA HOVER (LOW)
   ========================================================================== */

/* ==========================================================================
   SECTION 260: FIX-1 HOMEPAGE HERO PARITY
   Issues: H1-1, H1-2, H1-3, H1-4
   Date: 2026-03-26
   ========================================================================== */

/* H1-1: Hero height responsive */
.home .wp-block-cover,
.home .mk-hero,
.page-id-26 .wp-block-cover {
  min-height: 80vh !important;
  height: 80vh !important;
}

@media (min-width: 1024px) {
  .home .wp-block-cover,
  .home .mk-hero,
  .page-id-26 .wp-block-cover {
    min-height: 90vh !important;
    height: 90vh !important;
  }
}

/* H1-2: H1 line-height 1.25 */
.home .wp-block-cover h1,
.mk-hero h1,
.page-id-26 .wp-block-cover h1 {
  line-height: 1.25 !important;
}

/* H1-3: H1 pure white color */
.home .wp-block-cover h1,
.mk-hero h1,
.page-id-26 h1 {
  color: #ffffff !important;
}

/* H1-4: Button padding exact values */
.home .wp-block-cover .wp-block-button__link,
.mk-hero .wp-block-button__link {
  padding: 0.75rem 1.5rem !important;
}

.home .wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link {
  padding: 0.75rem 2rem !important;
}

/* ==========================================================================
   END SECTION 260: FIX-1 HOMEPAGE HERO PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 266: FIX-7 GALERIJA PAGE PARITY
   Issues: G7-1, G7-2, G7-3
   Date: 2026-03-26
   ========================================================================== */

/* G7-1: CRITICAL - Image aspect ratio 4:5 */
.page-id-92 .wc-block-components-product-image,
.galerija .product-image,
.mk-gallery-card .mk-card-image {
  aspect-ratio: 4 / 5 !important;
}

.page-id-92 .wc-block-components-product-image img,
.galerija .product-image img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* G7-2: Grid 3 columns at lg (not 4) */
@media (min-width: 1024px) {
  .page-id-92 .wc-block-product-template,
  .galerija .products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  .page-id-92 .wc-block-product-template,
  .galerija .products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* G7-3: Filter button border-radius consistent */
.page-id-92 .mk-category-filter-btn,
.galerija .category-filter button,
.gallery-filter-btn {
  border-radius: 0.25rem !important; /* 4px - custom rounded-lg */
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 150ms !important;
}

.page-id-92 .mk-category-filter-btn.active,
.gallery-filter-btn.active {
  background-color: hsl(160 30% 28%) !important;
  color: hsl(36 33% 94%) !important;
}

/* ==========================================================================
   END SECTION 266: FIX-7 GALERIJA PAGE PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 267: FIX-8 POAUKCIONINE PAGE PARITY
   Issues: P8-3, P8-4, P8-6
   Date: 2026-03-26
   ========================================================================== */

/* P8-3: Amber banner TRANSPARENT background */
.page-id-93 .mk-amber-banner,
.poaukcionine .post-auction-banner,
.mk-post-auction-info {
  background-color: hsl(38 92% 50% / 0.1) !important;
  border: 1px solid hsl(38 92% 50% / 0.2) !important;
}

/* P8-4: Banner border-radius 4px (custom rounded-lg) */
.page-id-93 .mk-amber-banner,
.poaukcionine .post-auction-banner {
  border-radius: 0.25rem !important;
}

/* P8-6: Responsive grid columns */
.page-id-93 .wc-block-product-template,
.poaukcionine .products {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}

@media (min-width: 640px) {
  .page-id-93 .wc-block-product-template,
  .poaukcionine .products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .page-id-93 .wc-block-product-template,
  .poaukcionine .products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  .page-id-93 .wc-block-product-template,
  .poaukcionine .products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ==========================================================================
   END SECTION 267: FIX-8 POAUKCIONINE PAGE PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 263: FIX-4 KATALOGAS SIDEBAR PARITY
   Issues: K4-1, K4-2, K4-3
   Date: 2026-03-26
   ========================================================================== */

/* K4-1: CRITICAL - Force sidebar visible on desktop */
@media (min-width: 1024px) {
  .woocommerce-page .wp-block-column:first-child,
  .archive-product .wp-block-column:first-child,
  .mk-catalog-sidebar,
  .catalog-sidebar,
  [class*="sidebar"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 25% !important;
    flex: 0 0 25% !important;
  }

  /* Ensure grid layout */
  .woocommerce-page .wp-block-columns,
  .archive-product .wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
}

/* K4-2: Categories box forest green */
.mk-catalog-sidebar .mk-categories,
.catalog-categories,
.widget_product_categories {
  background-color: hsl(160 30% 28%) !important;
  color: hsl(36 33% 94%) !important;
  border-radius: 0 !important;
  padding: 1.5rem !important;
}

.mk-catalog-sidebar .mk-categories a,
.catalog-categories a {
  color: hsl(36 33% 94% / 0.8) !important;
}

.mk-catalog-sidebar .mk-categories a:hover,
.mk-catalog-sidebar .mk-categories a.active {
  color: hsl(42 55% 58%) !important;
}

/* K4-3: Time filter buttons STANDARD 6px radius */
.mk-time-filter-btn,
.catalog-time-filter button,
.time-filter-button {
  border-radius: 0.375rem !important; /* 6px STANDARD - do not change to 2px */
  padding: 0.5rem 0.75rem !important;
  width: 100% !important;
  text-align: left !important;
  font-size: 0.875rem !important;
  transition: all 150ms !important;
}

.mk-time-filter-btn:hover {
  background-color: hsl(36 20% 90%) !important;
}

.mk-time-filter-btn.active,
.mk-time-filter-btn[aria-pressed="true"] {
  background-color: hsl(160 30% 28%) !important;
  color: hsl(36 33% 94%) !important;
}

/* ==========================================================================
   END SECTION 263: FIX-4 KATALOGAS SIDEBAR PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 269: FIX-10 PARDAVIMAS PAGE PARITY
   Issues: P10-1, P10-2, P10-3
   Date: 2026-03-26
   ========================================================================== */

/* P10-1: CRITICAL - Step badge 32px (not 40px) */
.page-id-17 .mk-step-badge,
.pardavimas .step-number,
.how-to-sell .step-badge {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  background-color: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: -0.75rem !important;
  left: -0.75rem !important;
}

/* P10-2: Step card border-radius 0 */
.page-id-17 .mk-step-card,
.pardavimas .step-card,
.how-to-sell .wp-block-group {
  border-radius: 0 !important;
  position: relative !important;
}

/* P10-3: Form card shadow-elegant */
.page-id-17 .mk-form-card,
.pardavimas .submission-form,
.how-to-sell form {
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;
  border-radius: 0 !important;
  padding: 2rem !important;
}

/* ==========================================================================
   END SECTION 269: FIX-10 PARDAVIMAS PAGE PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 261: FIX-2 HEADER DESKTOP PARITY
   Issues: H2-1, H2-2, H2-3, H2-4, H2-5
   Date: 2026-03-26
   ========================================================================== */

/* H2-1: Search icon position LEFT (was RIGHT) */
.mk-header .mk-search-form,
.site-header .search-form {
  position: relative !important;
}

.mk-header .mk-search-icon,
.site-header .search-icon {
  position: absolute !important;
  left: 0.75rem !important;
  right: auto !important;
}

.mk-header .mk-search-input,
.site-header input[type="search"] {
  padding-left: 2.25rem !important;
}

/* H2-2: Cart badge RED (was cream) */
.mk-header .mk-cart-count,
.wc-block-mini-cart__badge,
.mini-cart-count {
  background-color: hsl(0 65% 50%) !important;
  color: #ffffff !important;
}

/* H2-3: Dropdown hover GOLD (was muted) */
.mk-header .mk-dropdown-item:hover,
.mk-header .wp-block-navigation-item__content:hover,
.site-header .sub-menu a:hover {
  background-color: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important;
}

/* H2-4: Search width responsive (was fixed 240px) */
.mk-header .mk-search-input,
.site-header input[type="search"] {
  width: 192px !important;
}

@media (min-width: 1024px) {
  .mk-header .mk-search-input,
  .site-header input[type="search"] {
    width: 256px !important;
  }
}

/* H2-5: Actions gap 16px (gap-4) */
.mk-header .mk-header-actions,
.site-header .header-actions {
  gap: 1rem !important;
}

/* ==========================================================================
   END SECTION 261: FIX-2 HEADER DESKTOP PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 262: FIX-3 HEADER MOBILE PARITY
   Issues: M3-1, M3-4, M3-5
   Date: 2026-03-26
   ========================================================================== */

/* M3-4: Header height 5rem (80px) */
@media (max-width: 1279px) {
  .mk-header,
  .site-header {
    height: 5rem !important;
    min-height: 5rem !important;
  }
}

/* M3-5: Cart/user icons visible on mobile */
@media (max-width: 1279px) {
  .mk-header .mk-cart-icon,
  .mk-header .mk-user-icon,
  .site-header .wc-block-mini-cart,
  .site-header .header-account-link {
    display: flex !important;
    visibility: visible !important;
  }
}

/* M3-1: Submenu styling when expanded */
@media (max-width: 1279px) {
  .mk-mobile-menu .mk-submenu.is-open,
  .mobile-navigation .sub-menu {
    display: block !important;
    padding-left: 1rem !important;
  }

  .mk-mobile-menu .mk-submenu-item,
  .mobile-navigation .sub-menu a {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* ==========================================================================
   END SECTION 262: FIX-3 HEADER MOBILE PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 265: SINGLE PRODUCT PAGE PARITY FIXES — Agent 6
   Date: 2026-03-26
   Reference: src/pages/ArtworkDetail.tsx
   Issues: SP-1 to SP-17
   ========================================================================== */

/* SP-1: Main 2-column gap */
.single-product .mk-product-detail > .wp-block-columns,
.single-product .woocommerce div.product {
  gap: 3rem !important; /* gap-12 */
}

/* SP-2: Image container border-radius 0 */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image img,
.single-product .mk-product-detail__gallery img {
  border-radius: 0 !important;
}

/* SP-3, SP-4: Trust badges */
.single-product .mk-trust-badges__item,
.single-product .mk-trust-badges .wp-block-group {
  background-color: hsl(36 20% 90% / 0.3) !important; /* bg-muted/30 */
  border-radius: 0 !important; /* rounded-sm */
  padding: 1rem !important; /* p-4 */
}

.single-product .mk-trust-badges__item svg {
  width: 24px !important;
  height: 24px !important;
  color: hsl(160 30% 28%) !important; /* text-primary */
  margin-bottom: 0.5rem !important;
}

.single-product .mk-trust-badges__item p {
  font-size: 0.75rem !important; /* text-xs */
  color: hsl(160 15% 40%) !important;
  margin: 0 !important;
}

/* SP-5: Post-auction banner */
.single-product .mk-post-auction-banner {
  margin-bottom: 1.5rem !important;
  padding: 1rem !important;
  background-color: hsl(38 92% 50% / 0.1) !important; /* bg-amber-500/10 */
  border: 1px solid hsl(38 92% 50% / 0.2) !important;
  border-radius: 0 !important; /* rounded-sm */
}

/* SP-6, SP-7, SP-8: Timer full variant */
.single-product .mk-timer--full,
.single-product .mk-product-timer,
.single-product .mk-timer-full {
  border-radius: 0 !important;
  padding: 1.5rem !important;
}

.single-product .mk-timer-full__icon,
.single-product .mk-timer__icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 9999px !important;
}

.single-product .mk-timer-full__value,
.single-product .mk-timer__value,
.single-product .mk-product-timer .countdown_amount {
  font-size: 1.875rem !important; /* text-3xl */
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
}

@media (min-width: 768px) {
  .single-product .mk-timer-full__value,
  .single-product .mk-timer__value,
  .single-product .mk-product-timer .countdown_amount {
    font-size: 2.25rem !important; /* md:text-4xl */
  }
}

/* Timer grid: 4 columns */
.single-product .mk-timer-full__grid,
.single-product .mk-timer__grid,
.single-product .mk-product-timer .hasCountdown {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important;
}

/* SP-9, SP-10: Info card */
.single-product .mk-artwork-info,
.single-product .mk-product-meta {
  background-color: hsl(36 25% 88% / 0.3) !important; /* bg-secondary/30 */
  border-radius: 0 !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* SP-11, SP-12: Pricing card */
.single-product .mk-pricing-card,
.single-product .mk-pricing {
  background-color: hsl(40 30% 96%) !important; /* bg-card */
  border-radius: 0 !important;
  box-shadow: var(--shadow-card, 0 2px 12px -2px hsl(160 30% 18% / 0.06)) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.single-product .mk-pricing-card__value--large,
.single-product .current-bid-value {
  font-weight: 700 !important;
  color: hsl(160 30% 28%) !important;
  font-size: 1.5rem !important; /* text-2xl */
}

/* SP-13: Bid form container */
.single-product .mk-bid-form {
  background-color: hsl(160 30% 28% / 0.05) !important; /* bg-primary/5 */
  border-radius: 0 !important;
  padding: 1.5rem !important;
}

/* SP-14, SP-15: Quick bid buttons */
.single-product .mk-bid-form__quick-bids-grid,
.single-product .mk-quick-bid-buttons {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0.5rem !important;
}

.single-product .mk-bid-form__quick-btn,
.single-product .mk-quick-bid-btn {
  height: 2.25rem !important; /* h-9 */
  font-size: 0.75rem !important; /* text-xs */
  padding: 0 1rem !important;
}

/* SP-16: Title H1 */
.single-product h1.wp-block-post-title,
.single-product .product_title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.875rem !important;
  font-weight: 600 !important;
}

@media (min-width: 768px) {
  .single-product h1.wp-block-post-title,
  .single-product .product_title {
    font-size: 2.25rem !important;
  }
}

/* SP-17: Bid history */
.single-product .mk-bid-form__history {
  margin-top: 1.5rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid hsl(36 20% 82% / 0.5) !important;
}

/* ==========================================================================
   END SECTION 265: SINGLE PRODUCT PAGE PARITY FIXES — Agent 6
   ========================================================================== */

/* ==========================================================================
   SECTION 268: KONTAKTAI PAGE PARITY (Agent 9)
   React Source: src/pages/Contact.tsx
   Date: 2026-03-26
   ========================================================================== */

/* K9-1: Grid gap for 2-column layout */
.page-id-15 .wp-block-columns.is-layout-flex,
body.page-template-default.page-kontaktai .wp-block-columns.is-layout-flex {
  gap: 3rem !important; /* gap-12 */
}

@media (max-width: 1279px) {
  .page-id-15 .wp-block-columns.is-layout-flex,
  body.page-template-default.page-kontaktai .wp-block-columns.is-layout-flex {
    flex-direction: column !important;
    gap: 3rem !important;
  }
}

/* K9-2: Form card border-radius - React uses rounded-sm = 0px in custom config */
.page-id-15 .mk-card.mk-shadow-elegant,
.page-id-15 .wp-block-group.mk-card {
  border-radius: 0 !important; /* rounded-sm = calc(var(--radius) - 4px) = 0px */
}

/* K9-3 & K9-4: Icon circle size and background */
.mk-contact-icon-circle {
  width: 3rem !important; /* w-12 = 48px */
  height: 3rem !important; /* h-12 = 48px */
  min-width: 3rem !important;
  min-height: 3rem !important;
  border-radius: 9999px !important; /* rounded-full */
  background-color: hsl(160 30% 28% / 0.1) !important; /* bg-primary/10 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.mk-contact-icon-circle svg {
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
  color: hsl(160 30% 28%) !important; /* text-primary */
}

/* K9-7: Submit button - catalog variant, full width */
.page-id-15 .wpcf7-submit,
.page-id-15 input[type="submit"].wpcf7-form-control {
  display: block !important;
  width: 100% !important;
  height: 2.5rem !important; /* h-10 */
  padding: 0.5rem 1.5rem !important; /* py-2 px-6 */
  background-color: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  letter-spacing: 0.025em !important; /* tracking-wide */
  border: none !important;
  border-radius: 0.25rem !important; /* rounded = var(--radius) */
  box-shadow: var(--shadow-elegant) !important;
  cursor: pointer !important;
  transition: all 300ms ease !important;
}

.page-id-15 .wpcf7-submit:hover,
.page-id-15 input[type="submit"].wpcf7-form-control:hover {
  background-color: hsl(160 25% 38%) !important; /* hover:bg-forest-light */
  box-shadow: var(--shadow-hover) !important;
}

.page-id-15 .wpcf7-submit:focus-visible,
.page-id-15 input[type="submit"].wpcf7-form-control:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(160 30% 28%) !important;
}

/* K9-8: Form labels */
.page-id-15 .mk-form-label,
.page-id-15 .wpcf7 label {
  display: block !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  line-height: 1 !important; /* leading-none */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.5rem !important; /* space-y-2 between label and input */
}

/* K9-11: Contact item gap */
.mk-contact-item {
  gap: 1rem !important; /* gap-4 */
  align-items: flex-start !important; /* items-start */
}

/* K9-12: Contact items vertical spacing */
.page-id-15 .wp-block-group.is-vertical.is-layout-flex {
  gap: 1.5rem !important; /* space-y-6 */
}

/* K9-5: CF7 Form grid layout for name/email */
.page-id-15 .wpcf7-form > .wp-block-group > div[style*="grid-template-columns"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important; /* gap-4 */
}

@media (max-width: 639px) {
  .page-id-15 .wpcf7-form > .wp-block-group > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important; /* Stack on mobile */
  }
}

/* Fix CF7 paragraph structure within form */
.page-id-15 .wpcf7-form p {
  margin-bottom: 1.5rem !important; /* space-y-6 */
}

.page-id-15 .wpcf7-form p:last-of-type {
  margin-bottom: 0 !important;
}

/* K9-6: Input border-radius (ensure 2px) */
.page-id-15 .wpcf7-form-control.wpcf7-text,
.page-id-15 .wpcf7-form-control.wpcf7-email,
.page-id-15 .wpcf7-form-control.wpcf7-textarea {
  border-radius: 0.125rem !important; /* rounded-md = 2px in custom config */
}

/* Contact item headings */
.page-id-15 .mk-contact-item h3,
.page-id-15 .mk-contact-item .wp-block-heading {
  font-size: 1rem !important;
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.25rem !important; /* mb-1 */
  margin-top: 0 !important;
}

/* Contact item text/paragraphs */
.page-id-15 .mk-contact-item p {
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 !important;
}

/* Contact item links hover */
.page-id-15 .mk-contact-item a {
  color: hsl(var(--muted-foreground)) !important;
  transition: color 200ms ease !important;
}

.page-id-15 .mk-contact-item a:hover {
  color: hsl(var(--primary)) !important;
}

/* ==========================================================================
   END SECTION 268: KONTAKTAI PAGE PARITY (Agent 9)
   ========================================================================== */

/* ==========================================================================
   SECTION 270: FIX-11 PIRKIMAS PAGE PARITY
   Agent: 11 (2026-03-26)
   Reference: src/pages/HowToBuy.tsx
   Status: MOSTLY COMPLETE - minor refinements only
   ========================================================================== */

/* P11-5: Steps section mb-16 = 4rem (64px) */
body.page-id-16 .mk-pirkimas-steps,
.mk-pirkimas-page .mk-pirkimas-steps,
.pirkimas .steps-container {
  margin-bottom: 4rem !important;
}

/* P11-6: Feature cards section mb-12 = 3rem (48px) */
body.page-id-16 .mk-pirkimas-features,
.mk-pirkimas-page .mk-pirkimas-features,
.pirkimas .features-grid {
  margin-bottom: 3rem !important;
}

/* P11-7: CTA button size lg - 3rem height (48px) */
body.page-id-16 .wp-block-buttons .wp-block-button__link,
body.page-id-16 .mk-btn-catalog,
.mk-pirkimas-page .wp-block-button__link {
  height: 3rem !important;
  min-height: 3rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* Feature cards shadow states - hover transition */
body.page-id-16 .mk-pirkimas-feature,
body.page-id-16 .mk-pirkimas-feature.mk-card,
.pirkimas .feature-card {
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow 300ms ease !important;
}

body.page-id-16 .mk-pirkimas-feature:hover,
body.page-id-16 .mk-pirkimas-feature.mk-card:hover,
.pirkimas .feature-card:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* ==========================================================================
   END SECTION 270: FIX-11 PIRKIMAS PAGE PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 272: FIX-13 PLENERAI PAGE PARITY
   Issues: PL-1, PL-5, PL-6, PL-10
   ========================================================================== */

/* PL-1: Hero H1 bold (700) */
.page-id-18 .mk-plenerai-hero h1,
.plenerai-hero h1 {
  font-weight: 700 !important;
}

/* PL-5: Icon boxes rounded-xl = 12px */
.page-id-18 .mk-icon-box,
.plenerai-event-card .icon-box,
.plenerai-info-card {
  border-radius: 0.75rem !important;
}

/* PL-6: Participant cards rounded-xl = 12px */
.page-id-18 .mk-participant-card,
.plenerai-participants .participant {
  border-radius: 0.75rem !important;
}

/* PL-10: Gallery images rounded-xl = 12px */
.page-id-18 .mk-plenerai-gallery img,
.plenerai-gallery img {
  border-radius: 0.75rem !important;
}

/* ==========================================================================
   END SECTION 272: FIX-13 PLENERAI PAGE PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 264: FIX-5 KATALOGAS GRID PARITY
   Issues: C5-1, C5-3, C5-7
   Date: 2026-03-26
   ========================================================================== */

/* C5-1: Grid columns - 2 at lg (1024-1279px), 3 at xl (1280px+)
   Ensures ALL product grid selectors respect breakpoints */
@media (min-width: 1024px) and (max-width: 1279px) {
  .wc-block-product-template,
  .products.columns-3,
  .mk-product-grid,
  ul.products,
  .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  .wc-block-product-template,
  .products.columns-3,
  .mk-product-grid,
  ul.products,
  .wc-block-grid__products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* C5-3: Sort dropdown width 200px (reinforced) */
.mk-catalog-sort select,
.woocommerce-ordering select,
.orderby,
select.orderby {
  width: 200px !important;
  min-width: 200px !important;
}

/* C5-7: Result count font-size 16px (1rem) */
.mk-result-count,
.woocommerce-result-count,
p.woocommerce-result-count,
.catalog-result-count {
  font-size: 1rem !important;
}

.mk-result-count .count,
.woocommerce-result-count strong,
.woocommerce-result-count b {
  font-weight: 600 !important;
  color: hsl(160 30% 18%) !important;
}

/* ==========================================================================
   END SECTION 264: FIX-5 KATALOGAS GRID PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 271: FIX-12 INFORMACIJA PAGES PARITY
   Issues: I12-1, I12-2, I12-3, I12-4
   Date: 2026-03-26
   ========================================================================== */

/* I12-1: TabsList rounded-xl = 12px */
.informacija-tabs,
.information-tabs [role="tablist"],
.page-template-informacija .tabs-container {
  background-color: hsl(36 20% 90% / 0.5) !important;
  border-radius: 0.75rem !important;
  padding: 0.5rem !important;
  gap: 0.5rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

/* I12-2: Content card rounded-xl = 12px */
.informacija-content,
.information-content .wp-block-group,
[role="tabpanel"] > .wp-block-group {
  border-radius: 0.75rem !important;
  padding: 2rem !important;
  border: 1px solid hsl(36 20% 82%) !important;
  background-color: hsl(40 30% 96%) !important;
}

/* I12-3: Hero title bold (700) */
.informacija-hero h1,
.page-template-informacija .entry-title {
  font-weight: 700 !important;
}

/* I12-4: TabsList 50% opacity background */
.informacija-tabs,
.information-tabs [role="tablist"] {
  background-color: hsl(36 20% 90% / 0.5) !important;
}

/* Tab trigger styling */
.informacija-tabs [role="tab"],
.information-tabs button {
  padding: 0.625rem 1rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  transition: all 150ms !important;
}

.informacija-tabs [role="tab"][aria-selected="true"],
.information-tabs button.active {
  background-color: hsl(160 30% 28%) !important;
  color: hsl(36 33% 94%) !important;
}

/* ==========================================================================
   END SECTION 271: FIX-12 INFORMACIJA PAGES PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 273: FIX-14 DOVANU KUPONAS PAGE PARITY
   Agent: 14 (2026-03-26)
   Reference: src/pages/GiftVoucher.tsx
   Issues: DK-1, DK-2, DK-3, DK-4, DK-5, DK-6, DK-7
   ========================================================================== */

/* DK-1: Subtitle 70% opacity (React: text-primary-foreground/70) */
.page-id-19 .mk-voucher-subtitle,
.dovanu-kuponas-hero p {
  color: hsl(36 33% 94% / 0.7) !important;
}

/* DK-2: Voucher image STANDARD rounded-lg (8px) */
.page-id-19 .mk-voucher-preview img,
.dovanu-kuponas-preview img {
  border-radius: 0.5rem !important;
}

/* DK-3: Amount buttons STANDARD rounded-lg (8px) */
.page-id-19 .mk-amount-btn,
.voucher-amount-btn {
  border-radius: 0.5rem !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
}

/* DK-6: Inactive button 10% opacity bg */
.page-id-19 .mk-amount-btn:not(.active),
.voucher-amount-btn:not(.active) {
  background-color: hsl(36 33% 94% / 0.1) !important;
  border: 1px solid hsl(36 33% 94% / 0.2) !important;
  color: hsl(36 33% 94%) !important;
}

.page-id-19 .mk-amount-btn.active,
.voucher-amount-btn.active {
  background-color: hsl(42 55% 58%) !important;
  color: hsl(160 30% 28%) !important;
}

/* DK-4 & DK-5: Feature/rules cards STANDARD rounded-xl (12px) */
.page-id-19 .mk-feature-card,
.page-id-19 .mk-rules-card,
.dovanu-kuponas-info .wp-block-group {
  border-radius: 0.75rem !important;
}

/* DK-7: CTA button large padding (py-6 = 24px vertical) */
.page-id-19 .mk-voucher-cta,
.dovanu-kuponas-cta .wp-block-button__link {
  padding: 1.5rem 2rem !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   END SECTION 273: FIX-14 DOVANU KUPONAS PAGE PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 274: FIX-15 FOOTER PARITY
   Issues: F15-1, F15-2, F15-3, F15-4, F15-6, F15-9
   Agent: 15 (2026-03-26)
   Reference: src/components/layout/Footer.tsx
   ========================================================================== */

/* F15-1: Grid gap 2.5rem (40px) */
.site-footer .footer-grid,
.mk-footer .wp-block-columns {
  gap: 2.5rem !important;
}

/* F15-2: Container padding 4rem vertical (64px) */
.site-footer,
.mk-footer {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

/* F15-3: Social icons 1.25rem (20px) */
.site-footer .social-icon,
.mk-footer .wp-block-social-link {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.site-footer .social-icon svg,
.mk-footer .wp-block-social-link svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* F15-4: Social icon hover gold */
.site-footer .social-icon:hover,
.mk-footer .wp-block-social-link:hover {
  color: hsl(42 55% 58%) !important;
}

.site-footer .social-icon:hover svg,
.mk-footer .wp-block-social-link:hover svg {
  fill: hsl(42 55% 58%) !important;
}

/* F15-6: Links gap 0.75rem (12px) */
.site-footer .footer-links,
.mk-footer .wp-block-navigation {
  gap: 0.75rem !important;
}

.site-footer .footer-links li,
.mk-footer .wp-block-navigation-item {
  margin-bottom: 0.75rem !important;
}

/* F15-9: Copyright 60% opacity */
.site-footer .copyright,
.mk-footer .footer-copyright {
  color: hsl(36 33% 94% / 0.6) !important;
}

/* ==========================================================================
   END SECTION 274: FIX-15 FOOTER PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 275: FORMS GLOBAL PARITY FIXES (Agent 16)
   Date: 2026-03-26

   React Source Files:
   - src/components/ui/input.tsx
   - src/components/ui/textarea.tsx
   - src/components/ui/select.tsx
   - src/components/ui/checkbox.tsx
   - src/components/ui/label.tsx
   - tailwind.config.ts (custom border-radius)
   - src/index.css (CSS variables)

   CRITICAL: This project uses CUSTOM Tailwind border-radius:
   - rounded-sm = 0px (NOT standard 2px)
   - rounded-md = 0.125rem / 2px (NOT standard 6px)
   - rounded-lg = 0.25rem / 4px (NOT standard 8px)
   ========================================================================== */

/* ---------------------------------------------------------------------
   F16-1: Input & Textarea Border-Radius
   React: rounded-md = 0.125rem (2px) per custom config

   This override ensures all form inputs use 2px radius regardless of
   earlier conflicting rules in the stylesheet.
   --------------------------------------------------------------------- */

/* Text inputs - maximum specificity */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
.woocommerce input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
#customer_login input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.mk-newsletter__form input[type="text"],
.mk-newsletter__form input[type="email"],
.mk-auction-bid-form input[type="number"],
.woocommerce-cart input[type="text"],
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"] {
  border-radius: 0.125rem !important; /* rounded-md = 2px (custom config) */
}

/* Textarea - maximum specificity */
textarea,
.wpcf7 textarea,
.woocommerce textarea,
.woocommerce-checkout textarea {
  border-radius: 0.125rem !important; /* rounded-md = 2px (custom config) */
}

/* ---------------------------------------------------------------------
   F16-2: Checkbox Border-Radius
   React: rounded-sm = 0px per custom config
   --------------------------------------------------------------------- */
input[type="checkbox"],
.wpcf7 input[type="checkbox"],
.woocommerce input[type="checkbox"] {
  border-radius: 0 !important; /* rounded-sm = 0px (custom config) */
}

/* ---------------------------------------------------------------------
   F16-3: Select Dropdown Border-Radius
   React: rounded-md = 0.125rem (2px) for trigger and content
   --------------------------------------------------------------------- */
select,
.wpcf7 select,
.woocommerce select,
.woocommerce-ordering select,
.mk-select,
.mk-sort-select,
.mk-filter-select {
  border-radius: 0.125rem !important; /* rounded-md = 2px */
}

/* Select dropdown content/options panel */
.wpcf7 select option,
select option {
  border-radius: 0 !important; /* rounded-sm = 0px for items */
}

/* ---------------------------------------------------------------------
   F16-5: Focus Ring Pattern (Double Shadow)
   React pattern: ring-offset-2 ring-2 ring-ring
   Creates: 2px background gap + 2px ring at 20% opacity
   --------------------------------------------------------------------- */

/* Inputs focus */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus-visible {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring) / 0.2) !important;
}

/* Textarea focus */
textarea:focus,
textarea:focus-visible {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring) / 0.2) !important;
}

/* Select focus */
select:focus,
select:focus-visible {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring) / 0.2) !important;
}

/* Checkbox focus */
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring) / 0.2) !important;
}

/* ---------------------------------------------------------------------
   F16-6: Input Font-Size Responsive
   React: text-base (1rem/16px) on mobile to prevent iOS zoom
         md:text-sm (0.875rem/14px) at 768px+
   --------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea {
  font-size: 1rem !important; /* 16px on mobile prevents iOS zoom */
}

@media (min-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  textarea {
    font-size: 0.875rem !important; /* 14px on desktop */
  }
}

/* ---------------------------------------------------------------------
   F16-7: Select Item Border-Radius
   React: rounded-sm = 0px for SelectItem
   --------------------------------------------------------------------- */
select option:hover,
select option:focus,
select option:checked {
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------
   F16-8: File Input Button Styling
   React: file:border-0 file:bg-transparent file:text-sm file:font-medium
   --------------------------------------------------------------------- */
input[type="file"]::file-selector-button,
.wpcf7 input[type="file"]::file-selector-button {
  border: 0 !important;
  background-color: transparent !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
}

/* ---------------------------------------------------------------------
   F16-9: Label Styling
   React: text-sm font-medium leading-none
   --------------------------------------------------------------------- */
label,
.wpcf7 label,
.woocommerce label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: hsl(var(--foreground)) !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}

/* Disabled label */
label:has(+ input:disabled),
label:has(+ textarea:disabled),
label:has(+ select:disabled) {
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

/* ---------------------------------------------------------------------
   F16-10: Textarea Min-Height
   React: min-h-[80px]
   --------------------------------------------------------------------- */
textarea,
.wpcf7 textarea,
.woocommerce textarea {
  min-height: 80px !important;
  resize: vertical !important;
}

/* ---------------------------------------------------------------------
   F16-11: Input Height & Padding (reinforcement)
   React: h-10 (40px) px-3 py-2 (12px horizontal, 8px vertical)
   --------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
select {
  height: 2.5rem !important; /* h-10 = 40px */
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
}

/* ==========================================================================
   END SECTION 275: FORMS GLOBAL PARITY FIXES (Agent 16)
   ========================================================================== */

/* ==========================================================================
   SECTION 276: BUTTONS GLOBAL PARITY FIXES (Agent 17)
   Date: 2026-03-26
   Reference: src/components/ui/button.tsx
   ========================================================================== */

/* ---------------------------------------------------------------------
   B17-BASE: Base button styles - ensure ALL properties match React
   --------------------------------------------------------------------- */
.mk-btn,
.wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important; /* gap-2 */
  white-space: nowrap !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  transition: all 300ms ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* SVG sizing inside buttons */
.mk-btn svg,
.wp-block-button__link svg {
  pointer-events: none !important;
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
}

/* Disabled state */
.mk-btn:disabled,
.mk-btn[aria-disabled="true"],
.wp-block-button__link:disabled,
.wp-block-button__link[aria-disabled="true"] {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

/* ---------------------------------------------------------------------
   B17-2: CRITICAL — Focus ring must be double box-shadow, not outline
   React: ring-offset-2 (background color) + ring-2 (primary color)
   --------------------------------------------------------------------- */
.mk-btn:focus-visible,
.wp-block-button__link:focus-visible,
button.mk-btn:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;
}

/* Gold variant focus ring uses gold color */
.mk-btn-gold:focus-visible,
.wp-block-button.is-style-gold .wp-block-button__link:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--gold)) !important;
}

/* Destructive variant focus ring uses destructive color */
.mk-btn-destructive:focus-visible,
.wp-block-button.is-style-destructive .wp-block-button__link:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--destructive)) !important;
}

/* ---------------------------------------------------------------------
   B17-1: Default size padding must be px-6 (1.5rem), not px-4
   --------------------------------------------------------------------- */
.mk-btn,
.mk-btn-default,
.wp-block-button__link {
  height: 2.5rem !important; /* h-10 = 40px */
  padding-left: 1.5rem !important; /* px-6 = 24px */
  padding-right: 1.5rem !important;
  padding-top: 0.5rem !important; /* py-2 = 8px */
  padding-bottom: 0.5rem !important;
}

/* ---------------------------------------------------------------------
   B17-SIZES: Size variants with exact React values
   --------------------------------------------------------------------- */

/* Size: sm */
.mk-btn-sm,
.wp-block-button.has-small-font-size .wp-block-button__link {
  height: 2.25rem !important; /* h-9 = 36px */
  padding-left: 1rem !important; /* px-4 = 16px */
  padding-right: 1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Size: lg */
.mk-btn-lg,
.wp-block-button.has-large-font-size .wp-block-button__link {
  height: 3rem !important; /* h-12 = 48px */
  padding-left: 2rem !important; /* px-8 = 32px */
  padding-right: 2rem !important;
  font-size: 1rem !important; /* text-base = 16px */
}

/* Size: xl */
.mk-btn-xl {
  height: 3.5rem !important; /* h-14 = 56px */
  padding-left: 2.5rem !important; /* px-10 = 40px */
  padding-right: 2.5rem !important;
  font-size: 1rem !important; /* text-base = 16px */
}

/* Size: icon */
.mk-btn-icon {
  height: 2.5rem !important; /* h-10 = 40px */
  width: 2.5rem !important; /* w-10 = 40px */
  padding: 0 !important;
}

/* ---------------------------------------------------------------------
   B17-VARIANTS: Variant styles with exact React values
   --------------------------------------------------------------------- */

/* Variant: default */
.mk-btn-default,
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-radius: 0.25rem !important; /* rounded = 4px */
  border: none !important;
}

.mk-btn-default:hover,
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover {
  background-color: hsl(var(--primary) / 0.9) !important;
}

/* Variant: destructive */
.mk-btn-destructive,
.wp-block-button.is-style-destructive .wp-block-button__link {
  background-color: hsl(var(--destructive)) !important;
  color: hsl(var(--destructive-foreground)) !important;
  border-radius: 0.25rem !important;
  border: none !important;
}

.mk-btn-destructive:hover,
.wp-block-button.is-style-destructive .wp-block-button__link:hover {
  background-color: hsl(var(--destructive) / 0.9) !important;
}

/* Variant: outline */
.mk-btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
  background-color: transparent !important;
  border-radius: 0.25rem !important;
}

.mk-btn-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* Variant: secondary */
.mk-btn-secondary,
.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: hsl(var(--secondary)) !important;
  color: hsl(var(--secondary-foreground)) !important;
  border-radius: 0.25rem !important;
  border: none !important;
}

.mk-btn-secondary:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background-color: hsl(var(--secondary) / 0.8) !important;
}

/* Variant: ghost */
.mk-btn-ghost,
.wp-block-button.is-style-ghost .wp-block-button__link {
  background-color: transparent !important;
  color: inherit !important;
  border-radius: 0.25rem !important;
  border: none !important;
}

.mk-btn-ghost:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background-color: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

/* Variant: link — B17-3: NO border-radius */
.mk-btn-link,
.wp-block-button.is-style-link .wp-block-button__link {
  background-color: transparent !important;
  color: hsl(var(--primary)) !important;
  text-underline-offset: 4px !important;
  padding: 0 !important;
  height: auto !important;
  border-radius: 0 !important; /* CRITICAL: link has NO border-radius */
  border: none !important;
}

.mk-btn-link:hover,
.wp-block-button.is-style-link .wp-block-button__link:hover {
  text-decoration: underline !important;
}

/* Variant: catalog (CUSTOM) */
.mk-btn-catalog,
.wp-block-button.is-style-catalog .wp-block-button__link {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  border-radius: 0.25rem !important;
  box-shadow: var(--shadow-elegant) !important;
  border: none !important;
}

.mk-btn-catalog:hover,
.wp-block-button.is-style-catalog .wp-block-button__link:hover {
  background-color: hsl(var(--forest-light)) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Variant: gold (CUSTOM) */
.mk-btn-gold,
.wp-block-button.is-style-gold .wp-block-button__link {
  background-color: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-elegant) !important;
  border-radius: 0.25rem !important;
  border: none !important;
}

.mk-btn-gold:hover,
.wp-block-button.is-style-gold .wp-block-button__link:hover {
  background-color: hsl(var(--gold-light)) !important;
}

/* Variant: elegant (CUSTOM) — font-weight: 400, NOT 500 */
.mk-btn-elegant,
.wp-block-button.is-style-elegant .wp-block-button__link {
  border: 1px solid hsl(var(--foreground) / 0.2) !important;
  color: hsl(var(--foreground)) !important;
  background-color: transparent !important;
  font-weight: 400 !important; /* font-normal, NOT 500 */
  letter-spacing: 0.025em !important;
  border-radius: 0.25rem !important;
}

.mk-btn-elegant:hover,
.wp-block-button.is-style-elegant .wp-block-button__link:hover {
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

/* ---------------------------------------------------------------------
   B17-9: WordPress Block Button wrapper styles
   Remove default WP styling that conflicts with our variants
   --------------------------------------------------------------------- */
.wp-block-button {
  margin: 0 !important;
}

.wp-block-button__link {
  border-radius: 0.25rem !important; /* Override WP default rounded corners */
}

/* Ensure button container gap */
.wp-block-buttons {
  gap: 1rem !important;
}

/* ==========================================================================
   END SECTION 276: BUTTONS GLOBAL PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 277: PRODUCT CARD PARITY FIXES (Agent 18)
   Date: 2026-03-26
   Reference: src/components/auction/ArtworkCard.tsx
              src/components/gallery/GalleryCard.tsx
              src/components/auction/AuctionTimer.tsx
   Issues: PC-1 to PC-12
   ========================================================================== */

/* ---------------------------------------------------------------------
   PC-1: Card border-radius must be 0 (rounded-sm in custom Tailwind)
   Custom Tailwind: rounded-sm = calc(var(--radius) - 4px) = 0px
   --------------------------------------------------------------------- */
.mk-artwork-card,
.mk-gallery-card,
.mk-product-card,
.wc-block-grid__product,
.woocommerce ul.products li.product {
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------
   PC-2: CRITICAL — Image aspect ratio MUST be 4:5
   Override any inline styles or WooCommerce defaults
   --------------------------------------------------------------------- */
.mk-artwork-card__image,
.mk-gallery-card__image,
.mk-product-card .wc-block-components-product-image,
.wc-block-grid__product .wc-block-grid__product-image,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
}

/* Override data-aspect-ratio attribute */
[data-aspect-ratio="3/4"] {
  aspect-ratio: 4 / 5 !important;
}

/* Ensure images fill the container */
.mk-artwork-card__image img,
.mk-gallery-card__image img,
.wc-block-grid__product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ---------------------------------------------------------------------
   PC-3: Timer active status uses GREEN (green-500), NOT primary
   React: bg-green-500 = hsl(142 71% 45%)
   --------------------------------------------------------------------- */
.mk-card-timer .mk-timer-active,
.mk-card-timer.active,
.mk-timer--active {
  background-color: hsl(142 71% 45%) !important; /* green-500 */
  color: #ffffff !important;
}

/* Ensure children inherit */
.mk-card-timer .mk-timer-active span,
.mk-card-timer.active span {
  color: #ffffff !important;
}

/* Active status dot */
.mk-timer-active-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: hsl(142 71% 45%);
  border-radius: 9999px;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ---------------------------------------------------------------------
   PC-4: Timer overlay gradient — from-foreground/80 to transparent
   React: bg-gradient-to-t from-foreground/80 to-transparent
   --------------------------------------------------------------------- */
.mk-artwork-card__timer-overlay,
.mk-card-timer-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(to top, hsl(160 30% 18% / 0.8), transparent) !important;
  padding: 0.75rem !important; /* p-3 */
}

/* ---------------------------------------------------------------------
   PC-5: Badge position — top-3 right-3 = 0.75rem (12px)
   --------------------------------------------------------------------- */
.mk-artwork-card__badges,
.mk-product-card__badges {
  position: absolute !important;
  top: 0.75rem !important; /* top-3 */
  right: 0.75rem !important; /* right-3 */
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* gap-2 */
}

/* ---------------------------------------------------------------------
   PC-6: PARDUOTA overlay badge — large with proper styling
   React: text-lg px-4 py-2, bg-gold text-foreground
   --------------------------------------------------------------------- */
.mk-artwork-card__sold-overlay,
.mk-sold-overlay {
  position: absolute !important;
  inset: 0 !important;
  background-color: hsl(160 30% 18% / 0.6) !important; /* foreground/60 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mk-artwork-card__sold-overlay .mk-badge,
.mk-sold-badge {
  background-color: hsl(42 55% 58%) !important; /* bg-gold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  font-weight: 600 !important;
  font-size: 1.125rem !important; /* text-lg */
  padding: 0.5rem 1rem !important; /* py-2 px-4 */
  border-radius: 9999px !important; /* rounded-full (badge default) */
}

.mk-sold-badge svg {
  width: 1rem !important;
  height: 1rem !important;
  margin-right: 0.5rem !important;
}

/* ---------------------------------------------------------------------
   PC-7: Poaukcionine badge uses AMBER-500, not gold
   React: bg-amber-500 = hsl(38 92% 50%)
   --------------------------------------------------------------------- */
.mk-badge--post-auction,
.mk-badge--poaukcionine {
  background-color: hsl(38 92% 50%) !important; /* amber-500 */
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------
   PC-8: Horizontal card image — fixed 12rem x 12rem (192px)
   React: w-48 h-48, NOT aspect ratio
   --------------------------------------------------------------------- */
.mk-artwork-card--horizontal .mk-artwork-card__image-h,
.mk-artwork-card--horizontal .mk-artwork-card__image {
  width: 12rem !important; /* w-48 */
  height: 12rem !important; /* h-48 */
  flex-shrink: 0 !important;
  aspect-ratio: unset !important; /* Override 4/5 for horizontal */
}

/* ---------------------------------------------------------------------
   PC-9: GalleryCard title truncation — single line with ellipsis
   React: line-clamp-1
   --------------------------------------------------------------------- */
.mk-gallery-card__title,
.page-id-92 .wc-block-grid__product-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ---------------------------------------------------------------------
   PC-10: GalleryCard price — text-xl (1.25rem), not text-lg
   --------------------------------------------------------------------- */
.mk-gallery-card__price,
.page-id-92 .wc-block-grid__product-price {
  font-size: 1.25rem !important; /* text-xl */
  font-weight: 700 !important;
  color: hsl(160 30% 28%) !important; /* text-primary */
  margin-bottom: 1rem !important; /* mb-4 */
}

/* ---------------------------------------------------------------------
   PC-11: Button icons — consistent w-4 h-4 mr-2 sizing
   --------------------------------------------------------------------- */
.mk-artwork-card__actions .mk-btn svg,
.mk-gallery-card__actions .mk-btn svg,
.mk-product-card .wc-block-components-product-button svg {
  width: 1rem !important;
  height: 1rem !important;
  margin-right: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* Small buttons use smaller icons */
.mk-btn-sm svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  margin-right: 0.25rem !important;
}

/* ---------------------------------------------------------------------
   PC-12: Image hover zoom — scale(1.05) on 500ms transition
   --------------------------------------------------------------------- */
.mk-artwork-card:hover .mk-artwork-card__image img,
.mk-gallery-card:hover .mk-gallery-card__image img,
.wc-block-grid__product:hover .wc-block-grid__product-image img,
.group:hover .mk-img-zoom img {
  transform: scale(1.05) !important;
}

.mk-artwork-card__image img,
.mk-gallery-card__image img,
.wc-block-grid__product-image img,
.mk-img-zoom img {
  transition: transform 500ms ease !important;
}

/* ---------------------------------------------------------------------
   Badge Base Styles — matching ShadCN Badge component
   --------------------------------------------------------------------- */
.mk-badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9999px !important; /* rounded-full */
  border: 1px solid transparent !important;
  padding: 0.125rem 0.625rem !important; /* py-0.5 px-2.5 */
  font-size: 0.75rem !important; /* text-xs */
  font-weight: 600 !important; /* font-semibold */
  transition: color 150ms, background-color 150ms !important;
}

/* Badge variants */
.mk-badge--primary {
  background-color: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
}

.mk-badge--destructive {
  background-color: hsl(0 65% 50%) !important;
  color: #ffffff !important;
}

.mk-badge--muted {
  background-color: hsl(36 20% 90%) !important;
  color: hsl(160 15% 40%) !important;
}

.mk-badge--gold {
  background-color: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important;
}

/* Badge with shadow (used on cards) */
.mk-badge--shadow {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

/* Badge icons */
.mk-badge svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  margin-right: 0.25rem !important;
}

/* ---------------------------------------------------------------------
   Animate pulse for "Baigiasi!" badge
   --------------------------------------------------------------------- */
@keyframes mk-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.mk-badge--pulse,
.mk-animate-pulse {
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* ---------------------------------------------------------------------
   Content area padding — p-5 = 1.25rem (20px)
   --------------------------------------------------------------------- */
.mk-artwork-card__body,
.mk-gallery-card__body,
.mk-product-card__body {
  padding: 1.25rem !important;
}

/* ---------------------------------------------------------------------
   Price row layout
   --------------------------------------------------------------------- */
.mk-artwork-card__meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important; /* space-y-1 */
  margin-bottom: 1rem !important; /* mb-4 */
}

.mk-artwork-card__meta-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.875rem !important; /* text-sm */
}

.mk-artwork-card__meta-label {
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
}

.mk-artwork-card__meta-value {
  font-weight: 700 !important;
  color: hsl(160 30% 28%) !important; /* text-primary */
}

.mk-artwork-card__meta-value--gold {
  font-weight: 500 !important;
  color: hsl(42 55% 58%) !important; /* text-gold */
}

/* ---------------------------------------------------------------------
   Action buttons container
   --------------------------------------------------------------------- */
.mk-artwork-card__actions,
.mk-gallery-card__actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* space-y-2 */
}

.mk-artwork-card__actions .mk-btn,
.mk-gallery-card__actions .mk-btn {
  width: 100% !important;
}

/* ==========================================================================
   END SECTION 277: PRODUCT CARD PARITY FIXES (Agent 18)
   ========================================================================== */

/* ==========================================================================
   SECTION 278: FILTERS & TOGGLES PARITY FIXES (Agent 19)
   Date: 2026-03-26
   Reference: src/components/ui/switch.tsx, checkbox.tsx, slider.tsx, select.tsx
   Reference: src/pages/Catalog.tsx lines 147-202
   Reference: src/pages/Gallery.tsx lines 50-62
   ========================================================================== */

/* F19-1: CRITICAL — Switch thumb background must be cream, not white */
.mk-switch__thumb,
[data-radix-scroll-area-viewport] [role="switch"] span,
input[type="checkbox"][role="switch"] + span {
  background-color: hsl(var(--background)) !important; /* cream #EDE8DC, NOT white */
}

/* F19-2: Switch focus ring — double box-shadow pattern */
.mk-switch:focus-visible,
[role="switch"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* F19-3: Switch thumb shadow — must be shadow-lg */
.mk-switch__thumb {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* F19-4: Checkbox border-radius must be 0 (rounded-sm = calc(var(--radius) - 4px)) */
.mk-checkbox,
input[type="checkbox"]:not([role="switch"]),
.wpcf7-checkbox input[type="checkbox"],
.woocommerce input[type="checkbox"] {
  border-radius: 0 !important; /* rounded-sm = 0 in custom config */
  width: 1rem !important;
  height: 1rem !important;
  border: 1px solid hsl(var(--primary)) !important;
}

.mk-checkbox:checked,
input[type="checkbox"]:checked:not([role="switch"]) {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* F19-5: Select dropdown border-radius = 2px (rounded-md in custom config) */
.mk-select,
.woocommerce-ordering select,
.mk-filter-bar select {
  border-radius: 0.125rem !important; /* 2px */
  height: 2.5rem !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  border: 1px solid hsl(var(--input)) !important;
  background-color: hsl(var(--background)) !important;
}

/* F19-6: Time filter buttons — rounded-md = 0.375rem (6px) STANDARD */
/* NOTE: Time filter buttons use STANDARD rounded-md (6px), not custom (2px) */
.mk-time-filter-btn,
.mk-sidebar-filter .space-y-2 button,
.mk-filter-time button {
  width: 100% !important;
  text-align: left !important;
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  border-radius: 0.375rem !important; /* 6px - STANDARD rounded-md */
  font-size: 0.875rem !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}

/* Time filter active state */
.mk-time-filter-btn.active,
.mk-time-filter-btn[data-state="active"],
.mk-filter-time button.active {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* Time filter hover (inactive) */
.mk-time-filter-btn:not(.active):hover,
.mk-filter-time button:not(.active):hover {
  background-color: hsl(var(--muted)) !important;
}

/* F19-7: Quick filter container — rounded-sm = 0 */
.mk-quick-filters,
.mk-sidebar-filter.mk-quick-filters,
.mk-filter-group.quick-filters {
  background-color: hsl(var(--card)) !important;
  border-radius: 0 !important; /* rounded-sm = 0 */
  padding: 1rem !important;
  box-shadow: var(--shadow-card) !important;
}

/* Quick filter inner spacing */
.mk-quick-filters > * + * {
  margin-top: 1rem !important; /* space-y-4 */
}

/* Quick filter row layout */
.mk-quick-filter-row,
.mk-quick-filters .flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Quick filter label */
.mk-quick-filter-row label,
.mk-quick-filters label {
  font-size: 0.875rem !important; /* text-sm */
}

/* F19-8: Category filter pills container */
.mk-gallery-filters,
.page-id-92 .mk-filter-buttons,
.galerija-filter-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  margin-bottom: 2rem !important; /* mb-8 */
}

/* Category filter pill buttons */
.mk-gallery-filters .wp-block-button__link,
.mk-gallery-filter-btn,
.galerija-filter-btn {
  height: 2.25rem !important; /* size="sm" = h-9 */
  padding: 0 1rem !important; /* px-4 */
  font-size: 0.875rem !important; /* text-sm */
  border-radius: 0.25rem !important; /* rounded = 4px */
}

/* Category pill active state */
.mk-gallery-filter-btn.active,
.mk-gallery-filters .wp-block-button.is-style-default .wp-block-button__link {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* Category pill inactive state */
.mk-gallery-filter-btn:not(.active),
.mk-gallery-filters .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary)) !important;
}

.mk-gallery-filter-btn:not(.active):hover {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* F19-9 & F19-10: Slider component */
.mk-slider,
input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  background: transparent !important;
}

/* Slider track */
.mk-slider::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-runnable-track {
  height: 0.5rem !important; /* h-2 = 8px */
  border-radius: 9999px !important; /* rounded-full */
  background-color: hsl(var(--secondary)) !important;
}

.mk-slider::-moz-range-track,
input[type="range"]::-moz-range-track {
  height: 0.5rem !important;
  border-radius: 9999px !important;
  background-color: hsl(var(--secondary)) !important;
}

/* Slider thumb */
.mk-slider::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
  border-radius: 9999px !important; /* rounded-full */
  background-color: hsl(var(--background)) !important; /* cream */
  border: 2px solid hsl(var(--primary)) !important; /* border-2 border-primary */
  margin-top: -0.375rem !important; /* center on track */
  cursor: pointer !important;
}

.mk-slider::-moz-range-thumb,
input[type="range"]::-moz-range-thumb {
  width: 1.25rem !important;
  height: 1.25rem !important;
  border-radius: 9999px !important;
  background-color: hsl(var(--background)) !important;
  border: 2px solid hsl(var(--primary)) !important;
  cursor: pointer !important;
}

/* Slider focus state */
.mk-slider:focus-visible::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* Clear filters button */
.mk-clear-filters,
.mk-sidebar-filter button[class*="clear"],
.mk-filter-clear {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background-color: transparent !important;
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
  border-radius: 0.25rem !important; /* rounded = 4px */
  padding: 0.5rem 1.5rem !important;
  font-size: 0.875rem !important;
}

.mk-clear-filters:hover,
.mk-filter-clear:hover {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.mk-clear-filters svg,
.mk-filter-clear svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* ==========================================================================
   END SECTION 278: FILTERS & TOGGLES PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 298: FILTERS & TOGGLES V3 FIXES (2026-03-26)
   Agent 19 Implementation - CRITICAL: Toggle sizing 44×24px
   Issues: FT-8 to FT-11 (toggle sizing), FT-14 (clear filters radius)
   Reference: /docs/PARITY-AGENT-LOGS/V3-AGENT19-FILTERS-TOGGLES.md
   ========================================================================== */

/* FT-8, FT-9: Toggle track sizing 44×24px (w-11 h-6) */
.mk-sqf-toggle__track,
.mk-qf-toggle__track,
.mk-toggle-switch,
input[type="checkbox"].toggle + label::before {
  width: 2.75rem !important; /* 44px */
  height: 1.5rem !important; /* 24px */
  border-radius: 9999px !important;
}

/* FT-10, FT-11: Toggle thumb sizing 20px (w-5 h-5) */
.mk-sqf-toggle__thumb,
.mk-qf-toggle__track::after,
input[type="checkbox"].toggle + label::after {
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important; /* 20px */
  border-radius: 9999px !important;
}

/* FT-14: Clear filters button radius 0 */
.mk-clear-filters-btn {
  border-radius: 0 !important;
}

/* Toggle checked state - thumb position */
input[type="checkbox"].toggle:checked + label::after,
.mk-toggle-switch.active .mk-toggle-thumb {
  transform: translateX(1.25rem) !important; /* 20px = 44px - 20px - 4px padding */
}

/* ==========================================================================
   END SECTION 298: FILTERS & TOGGLES V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 284: KATALOGAS GRID V3 FIXES (2026-03-26)
   Agent 5 Implementation
   ========================================================================== */

/* C5-2: View toggle buttons 36px height */
.mk-view-toggle button,
.mk-view-btn {
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  padding: 0 1rem !important;
}

/* ==========================================================================
   END SECTION 284: KATALOGAS GRID V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 295: FORMS GLOBAL V3 FIXES (2026-03-26)
   Agent 16 Implementation - CRITICAL: Checkbox radius 0
   Source: V3-AGENT16-FORMS-GLOBAL.md
   ========================================================================== */

/* FM-1: All inputs, textareas, selects use 2px border-radius (rounded-md) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpcf7 textarea,
.wpcf7 select,
.woocommerce input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.woocommerce textarea,
.woocommerce select {
  border-radius: 2px !important;
}

/* FM-2: CRITICAL - Checkboxes use 0px border-radius (rounded-sm = sharp corners) */
input[type="checkbox"],
.wpcf7 input[type="checkbox"],
.wpcf7-checkbox input,
.wpcf7-acceptance input,
.woocommerce input[type="checkbox"] {
  border-radius: 0 !important;
}

/* FM-3: Focus ring double shadow pattern */
input[type="text"]:focus,
input[type="text"]:focus-visible,
input[type="email"]:focus,
input[type="email"]:focus-visible,
input[type="password"]:focus,
input[type="password"]:focus-visible,
input[type="tel"]:focus,
input[type="tel"]:focus-visible,
input[type="url"]:focus,
input[type="url"]:focus-visible,
input[type="number"]:focus,
input[type="number"]:focus-visible,
input[type="search"]:focus,
input[type="search"]:focus-visible,
textarea:focus,
textarea:focus-visible,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus-visible,
.wpcf7 textarea:focus,
.wpcf7 textarea:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(36 33% 94%),
    0 0 0 4px hsl(160 30% 28%) !important;
}

/* FM-3b: Select focus (uses focus: not focus-visible:) */
select:focus,
.wpcf7 select:focus,
.woocommerce select:focus {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(36 33% 94%),
    0 0 0 4px hsl(160 30% 28%) !important;
}

/* FM-4: Input height 40px */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
.wpcf7 select,
.woocommerce input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
.woocommerce select {
  height: 2.5rem !important; /* 40px */
}

/* FM-6: Textarea min-height 80px, NO fixed height */
textarea,
.wpcf7 textarea,
.woocommerce textarea {
  height: auto !important;
  min-height: 80px !important;
}

/* FM-7: Label line-height 1 and typography */
label,
.wpcf7 label,
.woocommerce label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
}

/* FM-8: Disabled label opacity 0.7 */
label:has(+ input:disabled),
label:has(+ textarea:disabled),
label:has(+ select:disabled),
input:disabled + label,
textarea:disabled + label,
select:disabled + label {
  cursor: not-allowed;
  opacity: 0.7;
}

/* FM-10: File input button styling */
input[type="file"]::file-selector-button,
.wpcf7 input[type="file"]::file-selector-button {
  border: 0;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(160 30% 18%);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

/* ==========================================================================
   END SECTION 295: FORMS GLOBAL V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 289: PARDAVIMAS V3 FIXES (2026-03-26)
   Agent 10 Implementation - Verification & Minor Fixes
   Reference: V3-AGENT10-PARDAVIMAS.md
   ========================================================================== */

/* P10-4: Commission section text 80% opacity
   React: text-primary-foreground/80 on p and ul elements
   Adds page-specific selector for Pardavimas page */
.pardavimas .mk-commission-section p,
.pardavimas .mk-commission-section li,
body.page-id-17 .has-primary-background-color p,
body.page-id-17 .has-primary-background-color li,
body.page-id-17 .mk-commission p,
body.page-id-17 .mk-commission li {
  opacity: 0.8 !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* P10-6: File upload zone border-radius 0
   React: rounded-sm = 0px (custom Tailwind config)
   Targets all file input variations on Pardavimas page */
.pardavimas .wpcf7-file,
.pardavimas .mk-upload-zone,
.pardavimas input[type="file"],
body.page-id-17 .wpcf7-file,
body.page-id-17 input[type="file"],
body.page-id-17 .mk-file-upload-zone,
body.page-id-17 .mk-upload-zone {
  border-radius: 0 !important;
}

/* P10-6 continued: Upload zone dashed border container */
body.page-id-17 .mk-file-upload,
body.page-id-17 [class*="upload-zone"],
body.page-id-17 .wpcf7-form-control-wrap[data-name*="file"] {
  border-radius: 0 !important;
}

/* ==========================================================================
   END SECTION 289: PARDAVIMAS V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 294: FOOTER V3 FIXES (2026-03-26)
   Agent 15 Implementation
   ========================================================================== */

/* F15-1: Footer horizontal padding 16px (React: px-4 = 1rem) */
.mk-footer > .wp-block-group {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* F15-4: Footer links gap 12px (React: space-y-3 = 0.75rem) */
.mk-footer__links .wp-block-group,
.mk-footer__info .wp-block-group {
  gap: 0.75rem !important;
}

/* F15-5: Contact items gap 16px (React: space-y-4 = 1rem) */
.mk-footer__contacts .wp-block-group {
  gap: 1rem !important;
}

/* F15-6: Social links gap 16px (React: gap-4 = 1rem) */
.mk-footer__social,
.mk-footer__social.wp-block-social-links {
  gap: 1rem !important;
}

/* F15-3: Copyright border 20% opacity (React: border-primary-foreground/20) */
.mk-footer__copyright {
  border-top: 1px solid hsl(var(--primary-foreground) / 0.2) !important;
}

/* ==========================================================================
   END SECTION 294: FOOTER V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S314: FOOTER V4 FIXES (2026-03-26)
   Agent 15 Implementation - V4 Audit
   Reference: docs/COMPREHENSIVE-PARITY-AUDIT-2026-03-26-V4.md AGENT 15

   React Source: src/components/layout/Footer.tsx

   Issues addressed:
   - F15-1: Bottom padding - ensure not doubled (let parent handle)
   - F15-2: Separator vs border - ensure 1px rendering at 20% opacity
   - F15-4: Social icons sizing (20px, override WP inline styles)
   - F15-3: Link list spacing verification
   - F15-5: Logo inversion filter verification
   - F15-6: Dynamic year verification
   - F15-7: Container max-width 1400px
   - F15-8: Grid breakpoints 768px/1024px

   React Key Values:
   - Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-5
   - Social icons: w-5 h-5 = 20px
   - Separator: border-t border-primary-foreground/20 = 1px, 20% opacity
   - Copyright: text-primary-foreground/60 = 60% opacity
   - Logo: brightness-0 invert (white on dark bg)
   ========================================================================== */

/* ---------------------------------------------------------------------
   F15-2: Separator renders as 1px line with 20% opacity
   React: border-t border-primary-foreground/20
   WordPress uses wp:separator block - override to match border approach
   --------------------------------------------------------------------- */
.mk-footer .wp-block-separator,
footer.wp-block-template-part .wp-block-separator {
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  border: none !important;
  background-color: hsl(40 30% 96% / 0.2) !important; /* primary-foreground/20 */
  margin-top: 3rem !important; /* mt-12 = 48px */
  margin-bottom: 0 !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------
   F15-1: Bottom section padding - prevent doubling
   Parent (.mk-footer) has py-16 (4rem), bottom bar has pt-8 (2rem)
   --------------------------------------------------------------------- */
.mk-footer__bottom,
.mk-footer > .wp-block-group:last-child {
  padding-bottom: 0 !important; /* Let parent handle footer bottom padding */
}

/* ---------------------------------------------------------------------
   F15-4: Social icons exactly 20px (1.25rem)
   React: w-5 h-5 on Facebook/Instagram Lucide icons
   Override WP social-link block inline width/height attributes
   --------------------------------------------------------------------- */
.mk-footer__social svg,
.mk-footer .wp-social-link svg,
.mk-footer .wp-block-social-links svg,
.mk-footer .wp-block-social-link svg,
footer.wp-block-template-part .wp-social-link svg,
footer.wp-block-template-part .wp-block-social-links svg {
  width: 1.25rem !important; /* 20px = w-5 */
  height: 1.25rem !important; /* 20px = h-5 */
  min-width: 1.25rem !important;
  max-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-height: 1.25rem !important;
}

/* Override WP social-link button wrapper sizes */
.mk-footer .wp-social-link,
.mk-footer .wp-block-social-link,
footer.wp-block-template-part .wp-social-link {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ---------------------------------------------------------------------
   F15-3: Link list spacing verification
   React: space-y-3 = 0.75rem for Nuorodos/Informacija
   React: space-y-4 = 1rem for Kontaktai
   --------------------------------------------------------------------- */
.mk-footer__links,
.mk-footer .wp-block-navigation__container {
  gap: 0.75rem !important; /* space-y-3 */
}

.mk-footer__contact-list,
.mk-footer__contact {
  gap: 1rem !important; /* space-y-4 */
}

/* ---------------------------------------------------------------------
   F15-5: Logo inversion filter
   React: brightness-0 invert on logo img
   --------------------------------------------------------------------- */
.mk-footer .wp-block-site-logo img,
.mk-footer .custom-logo,
footer.wp-block-template-part .wp-block-site-logo img {
  filter: brightness(0) invert(1) !important;
}

/* ---------------------------------------------------------------------
   F15-7 & F15-8: Container and grid verification
   React: container mx-auto (1400px), grid breakpoints 768/1024
   Already in S129 but ensure cascade
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .mk-footer .wp-block-columns,
  .mk-footer__grid,
  footer.wp-block-template-part .wp-block-columns {
    grid-template-columns: repeat(5, 1fr) !important; /* lg:grid-cols-5 */
  }
}

/* ==========================================================================
   END SECTION S314: FOOTER V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 280: HOMEPAGE HERO V3 FIXES (2026-03-26)
   Agent 1 Implementation
   Reference: /docs/PARITY-AGENT-LOGS/V3-AGENT1-HOMEPAGE-HERO.md

   Fixes remaining issues not covered by S260:
   - H1-2: Second vertical gradient overlay (bottom-to-top)
   - H1-5: Button animation delay 400ms (was 300ms)
   - H1-6: Button Y padding 1.5rem/24px (was 0.75rem/12px in S260)
   - H1-7: Content vertical centering
   - H1-8: Container horizontal padding 1rem/16px
   ========================================================================== */

/* H1-2: Add second vertical gradient overlay (bottom-to-top) */
.mk-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(var(--foreground) / 0.6), transparent, hsl(var(--foreground) / 0.2));
  pointer-events: none;
  z-index: 1;
}

.mk-hero .wp-block-cover__inner-container {
  z-index: 2;
  position: relative;
}

/* H1-5: Button animation delay fix (400ms not 300ms) */
.mk-hero__actions,
.mk-hero__actions.mk-animate-fade-in,
.mk-hero__actions.mk-delay-300 {
  animation-delay: 0.4s !important;
}

/* H1-6: Button padding fix - py-6 = 1.5rem (24px), px-8 = 2rem (32px)
   Override S260's incorrect 0.75rem with correct 1.5rem vertical padding */
.mk-hero__actions .wp-block-button__link,
.mk-hero__actions .wp-element-button,
.mk-hero .wp-block-buttons .wp-block-button__link {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* H1-7: Content vertical centering */
.mk-hero {
  align-items: center !important;
}

.mk-hero .wp-block-cover__inner-container {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.mk-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* H1-8: Container horizontal padding - px-4 = 1rem (16px) mobile, 2rem desktop */
.mk-hero .wp-block-cover__inner-container > .wp-block-group {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media (min-width: 640px) {
  .mk-hero .wp-block-cover__inner-container > .wp-block-group {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* ==========================================================================
   END SECTION 280: HOMEPAGE HERO V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 293: DOVANU KUPONAS V3 FIXES (2026-03-26)
   Agent 14 Implementation - Uses STANDARD Tailwind radius
   Reference: docs/PARITY-AGENT-LOGS/V3-AGENT14-DOVANU-KUPONAS.md
   ========================================================================== */

/* DK-1: Subtitle 70% opacity (React: text-primary-foreground/70) */
.dovanu-kuponas .mk-subtitle,
.page-id-19 .wp-block-cover p,
.mk-voucher-subtitle,
.mk-voucher .text-primary-foreground\/70 {
  color: hsl(var(--cream-light) / 0.7) !important;
  opacity: 1 !important;
}

/* DK-2 & DK-3: Feature cards and rules card 12px radius (rounded-xl STANDARD) */
.dovanu-kuponas .mk-feature-card,
.dovanu-kuponas .mk-rules-card,
.page-id-19 .wp-block-group.is-style-card,
.mk-voucher .wp-block-group.is-style-card,
.mk-voucher .mk-feature-card,
body.page-dovanu-kuponas .wp-block-group[style*="background-color:#ffffff"] {
  border-radius: 0.75rem !important;
}

/* DK-5: CTA button 24px vertical padding (React: py-6) */
.dovanu-kuponas .mk-cta-btn,
.page-id-19 .wp-block-button__link.mk-btn-gold,
.mk-voucher-order-btn {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  min-height: 3.5rem;
  font-size: 1.125rem !important; /* text-lg */
}

/* DK-7: Email note 60% opacity (React: text-primary-foreground/60) */
.mk-voucher .mk-email-note,
.mk-voucher p[class*="small-font-size"]:last-child,
.dovanu-kuponas .mk-email-note,
.page-id-19 .mk-email-note {
  color: hsl(var(--cream-light) / 0.6) !important;
}

/* DK-8: Voucher image large shadow (React: shadow-2xl) */
.dovanu-kuponas .mk-voucher-preview img,
.mk-voucher__preview img,
.mk-voucher-preview img,
.page-id-19 .mk-voucher-preview img {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
  border-radius: 0.5rem !important; /* rounded-lg STANDARD = 8px */
}

/* Price overlay badge - consistent with voucher image radius */
.dovanu-kuponas .mk-price-overlay,
.page-id-19 .mk-price-overlay {
  border-radius: 0.5rem !important; /* rounded-lg STANDARD = 8px */
}

/* Amount buttons - STANDARD rounded-lg = 8px */
.dovanu-kuponas .mk-amount-btn,
.page-id-19 .mk-amount-btn {
  border-radius: 0.5rem !important;
  padding: 0.75rem 1.5rem !important; /* py-3 px-6 */
  font-weight: 600 !important; /* font-semibold */
  transition: all 200ms !important;
}

/* Amount button inactive state */
.dovanu-kuponas .mk-amount-btn:not(.active),
.page-id-19 .mk-amount-btn:not(.active) {
  background-color: hsl(var(--primary-foreground) / 0.1) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 1px solid hsl(var(--primary-foreground) / 0.2) !important;
}

.dovanu-kuponas .mk-amount-btn:not(.active):hover,
.page-id-19 .mk-amount-btn:not(.active):hover {
  background-color: hsl(var(--primary-foreground) / 0.2) !important;
}

/* Amount button active state */
.dovanu-kuponas .mk-amount-btn.active,
.page-id-19 .mk-amount-btn.active {
  background-color: hsl(var(--gold)) !important;
  color: hsl(var(--primary)) !important;
  border: none !important;
}

/* Custom amount input - STANDARD rounded-md = 6px */
.dovanu-kuponas .mk-custom-amount,
.page-id-19 .mk-custom-amount {
  width: 8rem !important; /* w-32 = 128px */
  background-color: hsl(var(--primary-foreground) / 0.1) !important;
  border: 1px solid hsl(var(--primary-foreground) / 0.2) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-radius: 0.375rem !important; /* rounded-md STANDARD = 6px */
}

.dovanu-kuponas .mk-custom-amount::placeholder,
.page-id-19 .mk-custom-amount::placeholder {
  color: hsl(var(--primary-foreground) / 0.5) !important;
}

/* Custom input active ring */
.dovanu-kuponas .mk-custom-amount.active,
.page-id-19 .mk-custom-amount.active,
.mk-voucher-input--active {
  box-shadow: 0 0 0 2px hsl(var(--gold)) !important;
}

/* ==========================================================================
   END SECTION 293: DOVANU KUPONAS V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 288: KONTAKTAI PAGE V3 FIXES (2026-03-26)
   Agent 9 Implementation
   Issues: K9-1 to K9-9
   ========================================================================== */

/* K9-1: Form card border-radius 2px (rounded-sm in custom config) */
.page-id-15 .mk-contact-form-card,
.page-id-15 .wpcf7,
.page-id-15 .wp-block-group.has-background {
  border-radius: 0.125rem !important; /* 2px */
  background: hsl(40 30% 96%) !important; /* card color */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important; /* shadow-elegant */
  padding: 2rem !important; /* p-8 = 32px */
}

/* K9-2: CF7 inputs 6px radius (rounded-md standard) */
.page-id-15 .wpcf7 input[type="text"],
.page-id-15 .wpcf7 input[type="email"],
.page-id-15 .wpcf7 input[type="tel"],
.page-id-15 .wpcf7 select,
.page-id-15 .wpcf7 textarea {
  border-radius: 0.375rem !important; /* 6px - rounded-md */
  border: 1px solid hsl(36 20% 85%) !important;
  background: hsl(36 33% 94%) !important; /* background color */
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  font-size: 1rem !important; /* text-base mobile */
  width: 100% !important;
  transition: all 150ms !important;
}

@media (min-width: 768px) {
  .page-id-15 .wpcf7 input[type="text"],
  .page-id-15 .wpcf7 input[type="email"],
  .page-id-15 .wpcf7 input[type="tel"],
  .page-id-15 .wpcf7 select,
  .page-id-15 .wpcf7 textarea {
    font-size: 0.875rem !important; /* md:text-sm */
  }
}

/* K9-3: CF7 inputs 40px height */
.page-id-15 .wpcf7 input[type="text"],
.page-id-15 .wpcf7 input[type="email"],
.page-id-15 .wpcf7 input[type="tel"],
.page-id-15 .wpcf7 select {
  height: 2.5rem !important; /* h-10 = 40px */
}

.page-id-15 .wpcf7 textarea {
  height: auto !important;
  min-height: 80px !important; /* min-h-[80px] */
}

/* K9-4: Focus ring double-shadow pattern */
.page-id-15 .wpcf7 input[type="text"]:focus,
.page-id-15 .wpcf7 input[type="email"]:focus,
.page-id-15 .wpcf7 input[type="tel"]:focus,
.page-id-15 .wpcf7 select:focus,
.page-id-15 .wpcf7 textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(36 33% 94%), 0 0 0 4px hsl(160 30% 28%) !important;
}

/* K9-5: Submit button catalog variant */
.page-id-15 .wpcf7 input[type="submit"],
.page-id-15 .wpcf7-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 2.5rem !important; /* h-10 = 40px */
  padding: 0.5rem 1.5rem !important; /* py-2 px-6 */
  background: hsl(160 30% 28%) !important; /* primary */
  color: hsl(40 30% 96%) !important; /* primary-foreground */
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  letter-spacing: 0.025em !important; /* tracking-wide */
  border: none !important;
  border-radius: 0.25rem !important; /* rounded = 4px (var(--radius)) */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important; /* shadow-elegant */
  cursor: pointer !important;
  transition: all 300ms !important;
}

.page-id-15 .wpcf7 input[type="submit"]:hover,
.page-id-15 .wpcf7-submit:hover {
  background: hsl(160 25% 38%) !important; /* forest-light */
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important; /* shadow-hover */
}

.page-id-15 .wpcf7 input[type="submit"]:focus-visible,
.page-id-15 .wpcf7-submit:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(36 33% 94%), 0 0 0 4px hsl(160 30% 28%) !important;
}

/* K9-6: Icon circles 10% opacity primary background */
.page-id-15 .mk-contact-icon-circle,
.page-id-15 .mk-icon-circle,
.page-id-15 .wp-block-group.is-style-icon-circle,
.page-id-15 .contact-info-icon {
  width: 3rem !important; /* w-12 = 48px */
  height: 3rem !important; /* h-12 = 48px */
  border-radius: 9999px !important; /* rounded-full */
  background: hsl(160 30% 28% / 0.1) !important; /* bg-primary/10 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.page-id-15 .mk-contact-icon-circle svg,
.page-id-15 .mk-icon-circle svg,
.page-id-15 .contact-info-icon svg {
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
  color: hsl(160 30% 28%) !important; /* text-primary */
}

/* K9-7: 2-column grid 48px gap */
.page-id-15 .mk-contact-grid,
.page-id-15 > .entry-content > .wp-block-columns,
.page-id-15 .wp-block-group > .wp-block-columns {
  gap: 3rem !important; /* gap-12 = 48px */
}

@media (min-width: 1024px) {
  .page-id-15 .mk-contact-grid,
  .page-id-15 > .entry-content > .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* lg:grid-cols-2 */
  }
}

/* K9-8: Form fields 24px vertical spacing */
.page-id-15 .wpcf7-form > p,
.page-id-15 .wpcf7-form .form-group {
  margin-bottom: 1.5rem !important; /* space-y-6 = 24px */
}

.page-id-15 .wpcf7-form > p:last-of-type {
  margin-bottom: 0 !important;
}

/* Label styling */
.page-id-15 .wpcf7 label {
  display: block !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  line-height: 1 !important; /* leading-none */
  margin-bottom: 0.5rem !important; /* space-y-2 between label and input */
  color: hsl(160 30% 18%) !important; /* foreground */
}

/* K9-9: Name/Email 2-col at 640px (sm breakpoint) */
.page-id-15 .mk-contact-form-row,
.page-id-15 .wpcf7-form .form-row-2col {
  display: grid !important;
  gap: 1rem !important; /* gap-4 = 16px */
}

@media (min-width: 640px) {
  .page-id-15 .mk-contact-form-row,
  .page-id-15 .wpcf7-form .form-row-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* sm:grid-cols-2 */
  }
}

/* Contact info items styling */
.page-id-15 .mk-contact-info-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important; /* gap-4 = 16px */
}

.page-id-15 .mk-contact-info-item + .mk-contact-info-item {
  margin-top: 1.5rem !important; /* space-y-6 = 24px */
}

.page-id-15 .mk-contact-info-item h3 {
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
}

.page-id-15 .mk-contact-info-item p,
.page-id-15 .mk-contact-info-item span {
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
}

.page-id-15 .mk-contact-info-item a {
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  transition: color 150ms !important;
}

.page-id-15 .mk-contact-info-item a:hover {
  color: hsl(160 30% 28%) !important; /* hover:text-primary */
}

/* Page title styling */
.page-id-15 h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.875rem !important; /* text-3xl */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  text-align: center !important;
  margin-bottom: 1rem !important; /* mb-4 */
}

@media (min-width: 768px) {
  .page-id-15 h1 {
    font-size: 2.25rem !important; /* md:text-4xl */
  }
}

/* Page subtitle */
.page-id-15 .page-subtitle,
.page-id-15 > .entry-content > p:first-of-type {
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  text-align: center !important;
  margin-bottom: 3rem !important; /* mb-12 = 48px */
  max-width: 42rem !important; /* max-w-2xl = 672px */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Section titles (H2) */
.page-id-15 h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important; /* text-2xl = 24px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
}

/* Container max-width */
.page-id-15 .entry-content {
  max-width: 64rem !important; /* max-w-5xl = 1024px */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 3rem 1rem !important; /* py-12 px-4 */
}

/* ==========================================================================
   END SECTION 288: KONTAKTAI PAGE V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 291: INFORMACIJA V3 FIXES (2026-03-26)
   Agent 12 Implementation - rounded-xl = 12px STANDARD Tailwind
   Issues: I12-1, I12-2, I12-3, I12-4, I12-6, I12-8
   Reference: V3-AGENT12-INFORMACIJA.md
   ========================================================================== */

/* I12-1: TabsList border-radius 12px (reinforced with higher specificity) */
.informacija .mk-tabs-list,
.page-template-informacija .wp-block-buttons,
body.page-informacija .mk-info-tabs__list,
.informacija-tabs-nav {
  border-radius: 0.75rem !important;
}

/* I12-2: Content card border-radius 12px (reinforced with higher specificity) */
.informacija .mk-content-card,
.page-template-informacija .wp-block-group.is-style-card,
body.page-informacija .mk-info-panel,
.informacija-content > .wp-block-group {
  border-radius: 0.75rem !important;
}

/* I12-3: Hero title bold (reinforced) */
.informacija .mk-hero h1,
body.page-informacija .mk-info-hero h1,
body.page-informacija .mk-info-hero__title {
  font-weight: 700 !important;
}

/* I12-4: TabsList background 50% opacity (reinforced) */
.informacija .mk-tabs-list,
body.page-informacija .mk-info-tabs__list,
.informacija-tabs-nav {
  background-color: hsl(36 20% 90% / 0.5) !important;
}

/* I12-6: TabsTrigger border-radius 0px (rounded-sm custom = 0) */
.informacija .mk-tabs-list button,
.informacija-tabs-nav a,
.informacija-tabs-nav .mk-info-tab-link,
body.page-informacija .mk-info-tabs__trigger,
body.page-informacija .mk-info-tab-btn,
.informacija-tabs [role="tab"],
.information-tabs button {
  border-radius: 0 !important; /* rounded-sm = 0px per custom tailwind config */
  padding: 1rem 1rem !important; /* px-4 py-2.5 = 16px 10px */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(160 15% 40%) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all 150ms !important;
}

/* I12-6 Active tab state */
.informacija .mk-tabs-list button.active,
.informacija-tabs-nav a.active,
body.page-informacija .mk-info-tabs__trigger.active,
body.page-informacija .mk-info-tabs__trigger--active,
body.page-informacija .mk-info-tab-btn.active,
.informacija-tabs [role="tab"][aria-selected="true"],
.information-tabs button.active {
  background-color: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

/* I12-8: Tab icon visible always */
.informacija .mk-tabs-list button svg,
.informacija-tabs-nav a svg,
body.page-informacija .mk-info-tabs__trigger svg,
body.page-informacija .mk-info-tab-btn svg,
.informacija-tabs button svg {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
}

/* I12-8: Tab label hidden on mobile (icon only) */
.informacija .mk-tabs-list button span,
.informacija-tabs-nav a span,
body.page-informacija .mk-info-tabs__trigger span,
body.page-informacija .mk-info-tab-btn span,
.informacija-tabs button span {
  display: none !important;
}

@media (min-width: 640px) {
  .informacija .mk-tabs-list button span,
  .informacija-tabs-nav a span,
  body.page-informacija .mk-info-tabs__trigger span,
  body.page-informacija .mk-info-tab-btn span,
  .informacija-tabs button span {
    display: inline !important; /* sm:inline - visible on 640px+ */
  }
}

/* ==========================================================================
   END SECTION 291: INFORMACIJA V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 281: HEADER DESKTOP V3 FIXES (2026-03-26)
   Agent 2 Implementation
   Reference: docs/PARITY-AGENT-LOGS/V3-AGENT2-HEADER-DESKTOP.md
   ========================================================================== */

/* H2-02: Search input border-radius 6px (rounded-md = 0.375rem)
   React Input.tsx uses rounded-md which is 0.375rem (6px), not var(--radius) 4px
   ------------------------------------------------------------------ */
.mk-header__search .wp-block-search__inside-wrapper,
.site-header .wp-block-search__inside-wrapper,
.mk-header .wp-block-search__inside-wrapper {
  border-radius: 0.375rem !important; /* rounded-md = 6px */
}

/* H2-10: Account icon hover should use gold (accent), not cream (muted)
   React button.tsx ghost variant: hover:bg-accent hover:text-accent-foreground
   accent = hsl(42 55% 58%) = GOLD
   accent-foreground = hsl(160 30% 15%)
   ------------------------------------------------------------------ */
.mk-header__account-link:hover,
a.mk-header__account-link:hover,
.site-header .mk-header__account-link:hover {
  background-color: hsl(42 55% 58%) !important; /* accent = GOLD */
  color: hsl(160 30% 15%) !important; /* accent-foreground */
}

/* ==========================================================================
   END SECTION 281: HEADER DESKTOP V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 285: SINGLE PRODUCT V3 FIXES (2026-03-26)
   Agent 6 Implementation - CRITICAL: All containers radius 0
   Reference: V3-AGENT6-SINGLE-PRODUCT.md
   ========================================================================== */

/* SP-1 to SP-10: All single product containers use rounded-sm = 0px
   In React's custom tailwind config, rounded-sm = calc(var(--radius) - 4px) = 0px
   This overrides any existing 0.125rem (2px) values */
.single-product .mk-product-image-container,
.single-product .mk-trust-badges,
.single-product .mk-trust-badge,
.single-product .mk-trust-badges > div,
.single-product .mk-post-auction-banner,
.single-product .mk-auction-timer,
.single-product .mk-timer-full,
.single-product .auction-time-left.full-variant,
.single-product .mk-artwork-info,
.single-product .mk-info-card,
.single-product .product-meta-card,
.single-product .mk-pricing-card,
.single-product .product-pricing,
.single-product .mk-bid-form,
.single-product .mk-auth-prompt,
.single-product .mk-upcoming-notice,
.single-product .mk-post-auction-buy,
.single-product .woocommerce-product-gallery,
.single-product .summary > .wp-block-group,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary,
.woocommerce div.product .mk-product-gallery {
  border-radius: 0 !important;
}

/* SP-11: Form inputs use rounded-md = 0.125rem (2px) */
.single-product .mk-bid-form input,
.single-product .mk-bid-form select,
.single-product input.mk-bid-input {
  border-radius: 0.125rem !important;
}

/* SP-12: Timer grid gap = 0.75rem (12px) */
.single-product .mk-timer-full__grid,
.single-product .auction-time-left .timer-grid {
  gap: 0.75rem !important;
}

/* SP-13: Timer values responsive font sizes */
.single-product .mk-timer-full__value,
.single-product .auction-time-left .timer-value {
  font-size: 1.875rem !important; /* text-3xl */
}

@media (min-width: 768px) {
  .single-product .mk-timer-full__value,
  .single-product .auction-time-left .timer-value {
    font-size: 2.25rem !important; /* md:text-4xl */
  }
}

/* SP-14: Quick bid grid - 5 columns, 0.5rem gap */
.single-product .mk-quick-bids__grid,
.single-product .quick-bid-buttons {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0.5rem !important;
}

/* SP-15: Bid history border opacity 50% */
.single-product .mk-bid-history {
  margin-top: 1.5rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid hsl(36 20% 82% / 0.5) !important;
}

/* SP-16: Button size variants - ensure exact heights */
.single-product .mk-btn-xl,
.single-product button.mk-btn-xl {
  height: 3.5rem !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

.single-product .mk-btn-lg,
.single-product button.mk-btn-lg {
  height: 3rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* SP-17: Trust badges responsive - stack on mobile */
@media (max-width: 480px) {
  .single-product .mk-trust-badges {
    grid-template-columns: 1fr !important;
  }
}

/* Trust badges grid default - 3 columns */
.single-product .mk-trust-badges {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
  margin-top: 1.5rem !important;
}

/* Individual trust badge styling */
.single-product .mk-trust-badge,
.single-product .mk-trust-badges > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 1rem !important;
  background-color: hsl(36 20% 90% / 0.3) !important;
}

/* Trust badge icon */
.single-product .mk-trust-badge svg,
.single-product .mk-trust-badges > div svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: hsl(160 30% 28%) !important;
  margin-bottom: 0.5rem !important;
}

/* Trust badge text */
.single-product .mk-trust-badge span,
.single-product .mk-trust-badges > div span {
  font-size: 0.75rem !important;
  color: hsl(160 15% 40%) !important;
}

/* ==========================================================================
   END SECTION 285: SINGLE PRODUCT V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 292: PLENERAI V3 FIXES (2026-03-26)
   Agent 13 Implementation - rounded-xl = 12px STANDARD Tailwind
   Issues: PL-1 through PL-7
   Reference: /docs/PARITY-AGENT-LOGS/V3-AGENT13-PLENERAI.md
   ========================================================================== */

/* PL-1, PL-3, PL-5: Icon boxes and gallery images 12px radius (OVERRIDE 8px) */
.plenerai .mk-icon-box,
.plenerai .mk-gallery-image,
.plenerai .mk-participant-card,
.page-id-18 .wp-block-image img,
.page-id-18 .wp-block-group.is-style-icon-box,
.page-id-18 .mk-plenerai__gallery .mk-img-zoom,
.page-id-18 .mk-plenerai__info .wp-block-group[style*="margin-bottom"],
.page-id-18 .mk-plenerai-participants .wp-block-group,
.mk-plenerai-icon-box,
.mk-plenerai-participant {
  border-radius: 0.75rem !important; /* rounded-xl = 12px STANDARD */
}

/* PL-2: Participant grid 3 columns at lg (1024px+) */
@media (min-width: 1024px) {
  .plenerai .mk-participants-grid,
  .page-id-18 .mk-plenerai-participants,
  .mk-plenerai-participants {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

/* PL-4: Hero title bold (font-weight: 700) */
.plenerai h1,
.page-id-18 .wp-block-cover h1,
.page-id-18 .mk-plenerai-hero h1,
.mk-plenerai-hero h1 {
  font-weight: 700 !important;
}

/* PL-6: About image height 20rem (320px) = h-80 */
.plenerai .mk-about-image img,
.page-id-18 .mk-plenerai-about__image img,
.mk-plenerai-about__image img {
  height: 20rem !important;
  object-fit: cover !important;
}

/* PL-7: Participant card hover border effect */
.page-id-18 .mk-plenerai__info .wp-block-group[style*="margin-bottom"]:hover,
.page-id-18 .mk-plenerai-participants .wp-block-group:hover,
.mk-plenerai-participant:hover {
  border-color: hsl(var(--primary) / 0.2) !important;
  background: hsl(var(--muted) / 0.5) !important;
}

/* ==========================================================================
   END SECTION 292: PLENERAI V3 FIXES
   ========================================================================== */


/* ==========================================================================
   SECTION 297: PRODUCT CARDS V3 FIXES (2026-03-26)
   Agent 18 Implementation - CRITICAL: Card radius 0
   React: rounded-sm = calc(var(--radius) - 4px) = calc(0.25rem - 4px) = 0
   Source: /docs/PARITY-AGENT-LOGS/V3-AGENT18-PRODUCT-CARDS.md
   ========================================================================== */

/* PC-1: Card border-radius 0 (rounded-sm with --radius: 0.25rem = effectively 0)
   React: className="group bg-card rounded-sm overflow-hidden shadow-card"
   Note: Tailwind rounded-sm = calc(var(--radius) - 4px), with --radius: 0.25rem this is 0 */
.wc-block-grid__product,
.mk-artwork-card,
.mk-gallery-card,
.product-card,
.woocommerce ul.products li.product,
.wc-block-product,
.mk-product-card {
  border-radius: 0 !important;
}

/* Also ensure image wrapper has no radius (overflow:hidden clips to card shape) */
.wc-block-grid__product .wc-block-grid__product-image,
.mk-artwork-card .mk-artwork-card__image,
.mk-gallery-card .mk-gallery-card__image,
.product-card .product-card__image {
  border-radius: 0 !important;
}

/* PC-2: Body padding 20px (p-5 = 1.25rem)
   React: <div className="p-5"> (content area) */
.mk-card-body,
.mk-artwork-card__body,
.mk-gallery-card__body,
.product-card__content {
  padding: 1.25rem !important;
}

/* WooCommerce content wrapper */
.wc-block-grid__product .wc-block-grid__product-content {
  padding: 1.25rem !important;
}

/* PC-3: Timer gradient direction to top
   React: bg-gradient-to-t from-foreground/80 to-transparent
   CSS: linear-gradient(to top, hsl(160 30% 18% / 0.8), transparent) */
.mk-timer-overlay,
.auction-timer-overlay,
.mk-artwork-card__timer-overlay,
.mk-card-timer-overlay,
.wc-block-grid__product .auction-timer-overlay {
  background: linear-gradient(to top, hsl(160 30% 18% / 0.8), transparent) !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0.75rem !important; /* p-3 = 12px */
}

/* PC-4: PARDUOTA badge larger than status badges
   React: text-lg px-4 py-2 = 18px font, 16px/8px padding
   Status badges: text-xs px-2.5 py-0.5 = 12px font, 10px/2px padding */
.mk-badge--sold,
.mk-parduota-badge,
.wc-block-grid__product .mk-badge--sold {
  font-size: 1.125rem !important;     /* text-lg = 18px */
  padding: 0.5rem 1rem !important;    /* py-2 px-4 = 8px 16px */
  font-weight: 600 !important;        /* font-semibold */
  background: #C4A255 !important;     /* bg-gold */
  color: #203D31 !important;          /* text-foreground (forest-dark) */
  border-radius: 9999px !important;   /* rounded-full */
}

/* Regular status badges for comparison (smaller) */
.mk-badge--active,
.mk-badge--ending,
.mk-badge--upcoming,
.mk-badge--post-auction,
.mk-badge--buy-now {
  font-size: 0.75rem !important;      /* text-xs = 12px */
  padding: 0.125rem 0.625rem !important; /* py-0.5 px-2.5 = 2px 10px */
}

/* PC-5: Action buttons full width
   React: className="w-full" on all card action buttons */
.mk-card-actions .wp-block-button,
.mk-card-actions button,
.mk-card-actions .mk-btn,
.mk-artwork-card__actions .wp-block-button,
.mk-artwork-card__actions button,
.mk-artwork-card__actions .mk-btn,
.mk-artwork-card__actions .wp-block-button__link,
.wc-block-grid__product-add-to-cart,
.product-card__actions button,
.product-card__actions .mk-btn {
  width: 100% !important;
}

/* Action button container - vertical stack with gap */
.mk-card-actions,
.mk-artwork-card__actions,
.product-card__actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;  /* space-y-2 = 8px */
}

/* Additional card styling for consistency */

/* Card shadow (shadow-card -> shadow-hover on hover)
   React: shadow-card = 0 2px 12px -2px hsl(160 30% 18% / 0.06)
   React: shadow-hover = 0 8px 30px -8px hsl(160 30% 18% / 0.12) */
.wc-block-grid__product,
.mk-artwork-card,
.mk-gallery-card,
.product-card {
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important;
  transition: box-shadow 300ms ease, transform 300ms ease !important;
}

.wc-block-grid__product:hover,
.mk-artwork-card:hover,
.mk-gallery-card:hover,
.product-card:hover {
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;
}

/* Card background (bg-card)
   React: hsl(40 30% 96%) = #F5F1EA */
.wc-block-grid__product,
.mk-artwork-card,
.mk-gallery-card,
.product-card {
  background: hsl(40 30% 96%) !important;
  overflow: hidden !important;
}

/* Image hover zoom (group-hover:scale-105)
   React: transition-transform duration-500 group-hover:scale-105 */
.wc-block-grid__product .wc-block-grid__product-image img,
.mk-artwork-card__image img,
.mk-gallery-card__image img,
.product-card__image img {
  transition: transform 500ms ease !important;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img,
.mk-artwork-card:hover .mk-artwork-card__image img,
.mk-gallery-card:hover .mk-gallery-card__image img,
.product-card:hover .product-card__image img {
  transform: scale(1.05) !important;
}

/* Image aspect ratio (aspect-[4/5] for vertical cards)
   React: aspect-ratio: 4 / 5 = 0.8 */
.wc-block-grid__product .wc-block-grid__product-image,
.mk-artwork-card__image,
.mk-gallery-card__image {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  position: relative !important;
}

.wc-block-grid__product .wc-block-grid__product-image img,
.mk-artwork-card__image img,
.mk-gallery-card__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Status badges container position
   React: absolute top-3 right-3 flex flex-col gap-2 */
.mk-artwork-card__badges,
.wc-block-grid__product .mk-status-badges {
  position: absolute !important;
  top: 0.75rem !important;   /* top-3 = 12px */
  right: 0.75rem !important; /* right-3 = 12px */
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;    /* gap-2 = 8px */
  z-index: 10 !important;
}

/* PARDUOTA (Sold) overlay
   React: absolute inset-0 bg-foreground/60 flex items-center justify-center */
.mk-artwork-card__sold-overlay,
.mk-sold-overlay,
.wc-block-grid__product .mk-sold-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: hsl(160 30% 18% / 0.6) !important;  /* bg-foreground/60 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}

/* ==========================================================================
   END SECTION 297: PRODUCT CARDS V3 FIXES
   ========================================================================== */


/* ==========================================================================
   SECTION 283: KATALOGAS SIDEBAR V3 FIXES (2026-03-26)
   Agent 4 Implementation
   Fixes: K4-1 sidebar width, K4-2 help section, K4-3 time filters conditional,
          K4-6 categories radius, K4-7 toggle dimensions
   ========================================================================== */

/* K4-1: Force sidebar ALWAYS visible and 25% width on desktop */
@media (min-width: 1024px) {
  .woocommerce-page .wp-block-column:first-child,
  .mk-catalog__sidebar,
  .mk-catalog-sidebar,
  .archive-product .mk-catalog__sidebar,
  body.archive-product .mk-catalog__sidebar,
  body.post-type-archive-product .mk-catalog__sidebar,
  body.woocommerce .wp-block-column.mk-catalog__sidebar {
    display: block !important;
    visibility: visible !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
    min-width: 280px !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
  }

  /* Ensure parent grid/flex container shows sidebar */
  .archive-product .wp-block-columns,
  body.post-type-archive-product .wp-block-columns,
  body.woocommerce .wp-block-columns {
    display: flex !important;
  }
}

/* K4-1b: Sticky positioning within sidebar */
.mk-catalog__sidebar > .wp-block-group,
.mk-catalog-sidebar > .wp-block-group,
.mk-catalog__filters {
  position: sticky !important;
  top: 6rem !important; /* top-24 = 96px */
}

/* K4-1c: Admin bar offset for sticky */
body.admin-bar .mk-catalog__sidebar > .wp-block-group,
body.admin-bar .mk-catalog-sidebar > .wp-block-group,
body.admin-bar .mk-catalog__filters {
  top: calc(6rem + 32px) !important;
}

/* K4-1d: Section spacing within sidebar (space-y-6 = 1.5rem) */
.mk-catalog__sidebar > .wp-block-group > * + *,
.mk-catalog-sidebar > .wp-block-group > * + *,
.mk-catalog__filters > * + * {
  margin-top: 1.5rem !important;
}

/* K4-2: Help/Info section styling (if added) */
.mk-filter-help,
.mk-sidebar-help,
.mk-catalog__sidebar .mk-help-section {
  background: hsl(36 25% 88% / 0.3) !important; /* bg-secondary/30 */
  border-radius: 0.125rem !important; /* rounded-sm = 2px */
  padding: 1.5rem !important; /* p-6 */
}

.mk-filter-help h4,
.mk-sidebar-help h4,
.mk-help-section h4,
.mk-filter-help .wp-block-heading,
.mk-sidebar-help .wp-block-heading {
  font-family: var(--wp--preset--font-family--playfair-display), 'Playfair Display', Georgia, serif !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important; /* mb-3 */
  color: hsl(160 30% 18%) !important; /* foreground */
}

.mk-filter-help ul,
.mk-sidebar-help ul,
.mk-help-section ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mk-filter-help li,
.mk-sidebar-help li,
.mk-help-section li {
  font-size: 0.75rem !important; /* text-xs */
  color: hsl(160 15% 40%) !important; /* muted-foreground */
  margin-bottom: 0.5rem !important; /* space-y-2 */
  line-height: 1.5 !important;
}

.mk-filter-help li::before,
.mk-sidebar-help li::before,
.mk-help-section li::before {
  content: "* " !important;
}

/* K4-3: Time filters hide on /aukcionai/ivyke (past auctions) */
body.ivyke .mk-time-filters,
body.auction-status-ivyke .mk-time-filters,
body.past-auctions .mk-time-filters,
body[class*="ivyke"] .mk-time-filters {
  display: none !important;
}

/* K4-6: Categories card border radius (rounded-sm = 2px) */
.mk-catalog__sidebar .mk-filter-group:first-child,
.mk-catalog__sidebar .mk-filter-categories,
.mk-catalog__sidebar .mk-categories-panel,
.mk-catalog-sidebar .mk-filter-group:first-child,
.mk-catalog-sidebar .mk-filter-categories,
.mk-catalog-sidebar .mk-categories-panel {
  border-radius: 0.125rem !important; /* rounded-sm */
  overflow: hidden !important;
}

/* K4-7: Toggle switch dimensions - React ShadCN Switch equivalent */
/* Track: 44px wide, 24px tall (w-11 h-6) */
.mk-toggle,
.mk-quick-filters .mk-toggle,
.mk-catalog__sidebar .mk-toggle,
.mk-sidebar-filter .mk-toggle,
input[type="checkbox"].mk-toggle-input + .mk-toggle {
  width: 2.75rem !important; /* w-11 = 44px */
  height: 1.5rem !important; /* h-6 = 24px */
  border-radius: 9999px !important; /* rounded-full */
  background-color: hsl(var(--muted)) !important;
  position: relative !important;
  cursor: pointer !important;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 2px solid transparent !important;
}

/* Toggle active state */
.mk-toggle.active,
.mk-toggle.is-active,
.mk-toggle[data-state="checked"],
.mk-toggle[aria-checked="true"],
input:checked + .mk-toggle,
input[type="checkbox"].mk-toggle-input:checked + .mk-toggle {
  background-color: hsl(var(--primary)) !important;
}

/* Toggle thumb: 20px (w-5 h-5) */
.mk-toggle::after,
.mk-toggle .mk-toggle__thumb {
  content: '' !important;
  position: absolute !important;
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
  border-radius: 9999px !important; /* rounded-full */
  background-color: hsl(var(--background)) !important;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  left: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* Toggle thumb active position */
.mk-toggle.active::after,
.mk-toggle.is-active::after,
.mk-toggle[data-state="checked"]::after,
.mk-toggle[aria-checked="true"]::after,
input:checked + .mk-toggle::after,
input[type="checkbox"].mk-toggle-input:checked + .mk-toggle::after,
.mk-toggle.active .mk-toggle__thumb,
.mk-toggle.is-active .mk-toggle__thumb {
  transform: translateY(-50%) translateX(1.25rem) !important; /* translate-x-5 = 20px */
}

/* Toggle focus state */
.mk-toggle:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* Toggle disabled state */
.mk-toggle:disabled,
.mk-toggle.disabled,
input:disabled + .mk-toggle {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* K4-7b: Quick filter row layout */
.mk-quick-filters .mk-filter-row,
.mk-quick-filters > div,
.mk-catalog__sidebar .mk-quick-filters > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
}

/* K4-7c: Quick filter label */
.mk-quick-filters label,
.mk-quick-filters .mk-filter-label {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(160 30% 18%) !important; /* foreground */
  line-height: 1.25 !important;
}

/* ==========================================================================
   END SECTION 283: KATALOGAS SIDEBAR V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 287: POAUKCIONINE V3 FIXES (2026-03-26)
   Agent 8 Implementation

   React Source: src/pages/PostAuction.tsx

   Issues Fixed:
   - P8-1: Amber banner border-radius 8px (0.5rem), not 4px
   - P8-2: Amber banner background MUST be 10% transparent: hsl(38 92% 50% / 0.1)
   - P8-4: Filters row background 30% opacity
   - P8-5: Grid responsive breakpoints (1/2/3/4 cols at default/sm/lg/xl)
   ========================================================================== */

/* P8-1 & P8-2: Amber banner - 8px radius, 10% TRANSPARENT background
   React: bg-amber-500/10 = hsl(38 92% 50% / 0.1)
   React: rounded-lg = 0.5rem (8px)
   React: border-amber-500/20 = hsl(38 92% 50% / 0.2) */
.mk-post-auction-banner,
.poaukcionine .mk-info-banner,
.page-id-93 .wp-block-group.has-amber-background,
.page-id-93 .mk-post-auction-banner,
.mk-poaukcionine-banner,
.mk-post-auction__info-banner,
.mk-poaukcionine__banner,
.poaukcionine-info-banner {
  background-color: hsl(38 92% 50% / 0.1) !important;
  border-radius: 0.5rem !important;
  border: 1px solid hsl(38 92% 50% / 0.2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 1rem !important;
}

/* Amber banner icon - amber-600 color */
.mk-post-auction-banner svg,
.poaukcionine .mk-info-banner svg,
.page-id-93 .mk-post-auction-banner svg,
.mk-poaukcionine-banner svg,
.mk-post-auction__info-banner svg,
.mk-poaukcionine__banner svg,
.poaukcionine-info-banner svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
  color: hsl(25 95% 53%) !important; /* text-amber-600 */
}

/* Amber banner text - amber-800 dark */
.mk-post-auction-banner p,
.poaukcionine .mk-info-banner p,
.page-id-93 .mk-post-auction-banner p,
.mk-poaukcionine-banner p,
.mk-post-auction__info-banner p,
.mk-poaukcionine__banner p,
.poaukcionine-info-banner p {
  font-size: 0.875rem !important;
  color: hsl(25 95% 25%) !important; /* text-amber-800 */
  margin: 0 !important;
}

/* P8-4: Filters row - 30% opacity muted background
   React: bg-muted/30 = hsl(36 20% 90% / 0.3)
   React: rounded-lg = 0.5rem */
.mk-poaukcionine-filters,
.page-id-93 .mk-poaukcionine-filters,
.mk-post-auction-filters,
.poaukcionine-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1rem !important;
  background-color: hsl(36 20% 90% / 0.3) !important;
  border-radius: 0.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* P8-5: Grid responsive breakpoints
   React: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 */
.mk-poaukcionine-grid,
.page-id-93 .mk-poaukcionine-grid,
.page-id-93 .wc-block-product-template,
.mk-poaukcionine__grid .wc-block-grid__products,
.mk-poaukcionine__grid .wp-block-post-template,
.page-poaukcionine .wc-block-grid__products,
.poaukcionine-grid {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
}

@media (min-width: 640px) {
  .mk-poaukcionine-grid,
  .page-id-93 .mk-poaukcionine-grid,
  .page-id-93 .wc-block-product-template,
  .mk-poaukcionine__grid .wc-block-grid__products,
  .mk-poaukcionine__grid .wp-block-post-template,
  .page-poaukcionine .wc-block-grid__products,
  .poaukcionine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .mk-poaukcionine-grid,
  .page-id-93 .mk-poaukcionine-grid,
  .page-id-93 .wc-block-product-template,
  .mk-poaukcionine__grid .wc-block-grid__products,
  .mk-poaukcionine__grid .wp-block-post-template,
  .page-poaukcionine .wc-block-grid__products,
  .poaukcionine-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  .mk-poaukcionine-grid,
  .page-id-93 .mk-poaukcionine-grid,
  .page-id-93 .wc-block-product-template,
  .mk-poaukcionine__grid .wc-block-grid__products,
  .mk-poaukcionine__grid .wp-block-post-template,
  .page-poaukcionine .wc-block-grid__products,
  .poaukcionine-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* P8-6: View toggle styling
   React: border-border rounded-lg overflow-hidden */
.mk-poaukcionine-filters .mk-view-toggle,
.page-id-93 .mk-view-toggle {
  display: flex !important;
  border: 1px solid hsl(36 20% 82%) !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
}

.mk-poaukcionine-filters .mk-view-toggle button,
.page-id-93 .mk-view-toggle button {
  border-radius: 0 !important;
}

/* P8-7: Select trigger - h-10 = 40px, w-[180px] */
.mk-poaukcionine-select,
.page-id-93 select.mk-poaukcionine-select,
.poaukcionine-filter-select {
  height: 2.5rem !important;
  width: 180px !important;
  border-radius: 0.375rem !important;
  border: 1px solid hsl(36 20% 85%) !important;
  background-color: hsl(36 33% 94%) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
}

/* P8-8: Header icon circle - 48x48px rounded-full bg-amber-500/10 */
.mk-poaukcionine-icon-circle,
.page-id-93 .mk-poaukcionine-icon-circle {
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 9999px !important;
  background-color: hsl(38 92% 50% / 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mk-poaukcionine-icon-circle svg,
.page-id-93 .mk-poaukcionine-icon-circle svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: hsl(25 95% 53%) !important; /* text-amber-600 */
}

/* ==========================================================================
   END SECTION 287: POAUKCIONINE V3 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 286: GALERIJA PAGE V3 PARITY FIXES (2026-03-26)
   Agent 7 Implementation
   Reference: docs/PARITY-AGENT-LOGS/V3-AGENT7-GALERIJA.md
   React Source: src/pages/Gallery.tsx, src/components/gallery/GalleryCard.tsx
   ========================================================================== */

/* ---------------------------------------------------------------------
   G7-1: CRITICAL — Image aspect ratio must be 4:5 (not 3:4)
   WordPress has data-aspect-ratio="3/4" and inline style aspect-ratio:3/4
   React: aspect-[4/5]
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-components-product-image,
.page-id-92 .wc-block-grid__product-image,
.page-id-92 [data-aspect-ratio="3/4"],
.mk-gallery-grid .wc-block-components-product-image,
.mk-gallery-grid [data-aspect-ratio="3/4"] {
  aspect-ratio: 4 / 5 !important;
}

.page-id-92 .wc-block-components-product-image img,
.page-id-92 .wc-block-grid__product-image img,
.page-id-92 [style*="aspect-ratio:3/4"],
.page-id-92 [style*="aspect-ratio: 3/4"],
.mk-gallery-grid .wc-block-components-product-image img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
}

/* ---------------------------------------------------------------------
   G7-2: HIGH — Grid columns: 1 > 2 (sm) > 3 (lg) > 4 (xl)
   React: sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4
   WordPress shows 4 columns at lg; should be 3
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-product-template,
.mk-gallery-grid .wc-block-product-template {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
}

@media (min-width: 640px) {
  .page-id-92 .wc-block-product-template,
  .mk-gallery-grid .wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .page-id-92 .wc-block-product-template,
  .mk-gallery-grid .wc-block-product-template {
    grid-template-columns: repeat(3, 1fr) !important; /* NOT 4 */
  }
}

@media (min-width: 1280px) {
  .page-id-92 .wc-block-product-template,
  .mk-gallery-grid .wc-block-product-template {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Override WooCommerce columns-4 class */
.page-id-92 .columns-4,
.mk-gallery-grid .columns-4 {
  grid-template-columns: 1fr !important;
}

@media (min-width: 640px) {
  .page-id-92 .columns-4,
  .mk-gallery-grid .columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .page-id-92 .columns-4,
  .mk-gallery-grid .columns-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  .page-id-92 .columns-4,
  .mk-gallery-grid .columns-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ---------------------------------------------------------------------
   G7-3 & G7-4 & G7-5: HIGH — Filter button styling
   Border: 1px solid hsl(160 30% 28%) NOT border color
   Height: 2.25rem (36px) = h-9
   Border-radius: 0.25rem (4px) NOT 2px
   React: variant="outline" size="sm"
   --------------------------------------------------------------------- */
.mk-gallery-cat-btn,
.page-id-92 .mk-gallery-cat-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.25rem !important; /* h-9 = 36px */
  padding: 0 1rem !important; /* px-4 = 16px */
  border: 1px solid hsl(160 30% 28%) !important; /* border-primary */
  border-radius: 0.25rem !important; /* rounded = 4px */
  color: hsl(160 30% 28%) !important; /* text-primary */
  background: transparent !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 300ms ease !important;
  white-space: nowrap !important;
}

.mk-gallery-cat-btn:hover,
.page-id-92 .mk-gallery-cat-btn:hover {
  background: hsl(160 30% 28%) !important; /* hover:bg-primary */
  color: hsl(40 30% 96%) !important; /* hover:text-primary-foreground */
  border-color: hsl(160 30% 28%) !important;
}

.mk-gallery-cat-btn.is-active,
.mk-gallery-cat-btn.active,
.page-id-92 .mk-gallery-cat-btn.is-active,
.page-id-92 .mk-gallery-cat-btn.active {
  background: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  border-color: hsl(160 30% 28%) !important;
}

/* Filter container */
.page-id-92 .mk-gallery-filters,
.mk-gallery-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  margin-bottom: 2rem !important; /* mb-8 = 32px */
}

/* ---------------------------------------------------------------------
   G7-6: Card border-radius = 0 (rounded-sm = calc(0.25rem - 4px) = 0)
   React: bg-card rounded-sm overflow-hidden shadow-card hover:shadow-hover
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-product,
.mk-gallery-grid .wc-block-product,
.mk-gallery-card {
  border-radius: 0 !important;
  overflow: hidden !important;
  background: hsl(40 30% 96%) !important;
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important; /* shadow-card */
  transition: box-shadow 300ms ease !important;
}

.page-id-92 .wc-block-product:hover,
.mk-gallery-grid .wc-block-product:hover,
.mk-gallery-card:hover {
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important; /* shadow-hover */
}

/* ---------------------------------------------------------------------
   G7-7: Title line-clamp-1 (single line with ellipsis)
   React: font-display text-lg font-semibold text-foreground mb-1 line-clamp-1
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-product .wp-block-post-title,
.page-id-92 .wc-block-product .wp-block-post-title a,
.mk-gallery-card__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
  line-height: 1.75rem !important;
}

/* ---------------------------------------------------------------------
   G7-8: Price styling — 1.25rem (20px), bold, primary color
   React: text-xl font-bold text-primary mb-4
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-components-product-price,
.page-id-92 .wc-block-grid__product-price,
.page-id-92 .woocommerce-Price-amount,
.mk-gallery-card__price {
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 700 !important; /* font-bold */
  color: hsl(160 30% 28%) !important; /* text-primary */
  margin-bottom: 1rem !important; /* mb-4 = 16px */
}

/* ---------------------------------------------------------------------
   G7-9: Button stack gap = 0.5rem (8px) — space-y-2
   --------------------------------------------------------------------- */
.mk-gallery-buttons,
.page-id-92 .mk-gallery-buttons,
.page-id-92 .wc-block-product .wc-block-components-product-button {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* space-y-2 = 8px */
}

/* ---------------------------------------------------------------------
   G7-10: Card body padding = 1.25rem (20px) — p-5
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-product .wp-block-post-title,
.page-id-92 .wc-block-product .mk-card-meta,
.page-id-92 .wc-block-product .wc-block-components-product-price,
.page-id-92 .wc-block-product .mk-gallery-buttons {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.page-id-92 .wc-block-product .wp-block-post-title:first-child {
  padding-top: 1.25rem !important;
}

.page-id-92 .mk-gallery-buttons:last-child,
.page-id-92 .wc-block-product .wc-block-components-product-button:last-child {
  padding-bottom: 1.25rem !important;
}

/* Card body wrapper if present */
.page-id-92 .wc-block-product > div:last-child:not(.wc-block-components-product-image),
.mk-gallery-card__body {
  padding: 1.25rem !important; /* p-5 = 20px */
}

/* ---------------------------------------------------------------------
   Image hover zoom (500ms, scale 1.05)
   React: transition-transform duration-500 group-hover:scale-105
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-components-product-image img,
.page-id-92 .wc-block-grid__product-image img,
.mk-gallery-card__image img {
  transition: transform 500ms ease !important;
}

.page-id-92 .wc-block-product:hover .wc-block-components-product-image img,
.page-id-92 .wc-block-product:hover .wc-block-grid__product-image img,
.mk-gallery-card:hover .mk-gallery-card__image img {
  transform: scale(1.05) !important;
}

/* ---------------------------------------------------------------------
   H1 Responsive: text-3xl (mobile) -> text-4xl (md+)
   React: font-display text-3xl md:text-4xl font-semibold text-foreground mb-4
   --------------------------------------------------------------------- */
.page-id-92 h1.wp-block-heading {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.875rem !important; /* text-3xl = 30px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 1rem !important; /* mb-4 = 16px */
}

@media (min-width: 768px) {
  .page-id-92 h1.wp-block-heading {
    font-size: 2.25rem !important; /* md:text-4xl = 36px */
  }
}

/* Description text */
.page-id-92 .mk-gallery-description,
.page-id-92 .wp-block-group > p:first-of-type {
  line-height: 1.625 !important; /* leading-relaxed */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  max-width: 48rem !important; /* max-w-3xl = 768px */
  margin-bottom: 2rem !important; /* mb-8 = 32px */
}

/* Header container */
.page-id-92 .mk-gallery-header {
  max-width: 48rem !important; /* max-w-3xl = 768px */
  margin-bottom: 2rem !important; /* mb-8 = 32px */
}

/* ---------------------------------------------------------------------
   Artist name and medium text
   React: text-sm text-muted-foreground mb-1 / text-xs mb-3
   --------------------------------------------------------------------- */
.page-id-92 .mk-card-artist,
.mk-gallery-card__artist {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
}

.page-id-92 .mk-card-artist-dates,
.mk-gallery-card__artist-dates {
  font-size: 0.75rem !important; /* text-xs = 12px */
  font-style: italic !important;
}

.page-id-92 .mk-card-medium,
.mk-gallery-card__medium {
  font-size: 0.75rem !important; /* text-xs = 12px */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  margin-bottom: 0.75rem !important; /* mb-3 = 12px */
}

/* ---------------------------------------------------------------------
   Empty state styling
   React: text-center py-16 / text-muted-foreground text-lg / mt-4
   --------------------------------------------------------------------- */
.page-id-92 .mk-gallery-empty {
  text-align: center !important;
  padding: 4rem 0 !important; /* py-16 = 64px */
}

.page-id-92 .mk-gallery-empty p {
  font-size: 1.125rem !important; /* text-lg = 18px */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
}

.page-id-92 .mk-gallery-empty .wp-block-button {
  margin-top: 1rem !important; /* mt-4 = 16px */
}

/* ==========================================================================
   END SECTION 286: GALERIJA PAGE V3 PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S312: PLENERAI PAGE V4 FIXES (2026-03-26)
   Agent 13 V4 Implementation
   Reference: docs/PARITY-AGENT-LOGS/V4-AGENT-13-PLENERAI.md

   React Source: src/pages/Plenerai.tsx (204 lines)

   Key fixes:
   - PL-4: Event card shadow-2xl (not shadow-elegant)
   - PL-7: About image height 320px (h-80)
   - PL-9: Gallery hover transition 700ms
   - PL-10/11/12: Headings font-weight 700
   ========================================================================== */

/* ---------------------------------------------------------------------
   PL-1: Hero section height — 60vh with min-height 500px
   React: h-[60vh] min-h-[500px] overflow-hidden
   --------------------------------------------------------------------- */
.page-id-18 .mk-plenerai-hero,
body.page-plenerai .wp-block-cover.mk-plenerai-hero,
.mk-plenerai-hero {
  height: 60vh !important;
  min-height: 500px !important;
  overflow: hidden !important;
}

/* ---------------------------------------------------------------------
   PL-2: Hero gradient — to-bottom, from-primary/80 via-primary/60 to-background
   React: bg-gradient-to-b from-primary/80 via-primary/60 to-background
   --------------------------------------------------------------------- */
.page-id-18 .mk-plenerai-hero::before,
.mk-plenerai-hero .wp-block-cover__gradient-background {
  background: linear-gradient(
    to bottom,
    hsl(160 30% 28% / 0.8) 0%,
    hsl(160 30% 28% / 0.6) 50%,
    hsl(36 33% 94%) 100%
  ) !important;
}

/* ---------------------------------------------------------------------
   PL-3: Event badge — gold/20 backdrop-blur-sm rounded-full
   React: bg-gold/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6
   --------------------------------------------------------------------- */
.page-id-18 .mk-plenerai-badge,
.mk-plenerai-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background-color: hsl(42 55% 58% / 0.2) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 9999px !important;
  margin-bottom: 1.5rem !important;
}

.mk-plenerai-badge svg {
  width: 1rem !important;
  height: 1rem !important;
  color: hsl(42 55% 58%) !important;
}

.mk-plenerai-badge span {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(42 55% 58%) !important;
}

/* ---------------------------------------------------------------------
   PL-4: Event card shadow — shadow-2xl (CRITICAL FIX)
   React: shadow-2xl = 0 25px 50px -12px rgb(0 0 0 / 0.25)
   --------------------------------------------------------------------- */
.page-id-18 .mk-plenerai__info,
.mk-plenerai__info,
body.page-plenerai .wp-block-group.mk-plenerai__info {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
}

/* PL-4b: Event card header gradient */
.page-id-18 .mk-plenerai__info-header,
.mk-plenerai__info-header {
  background: linear-gradient(to right, hsl(160 30% 28%) 0%, hsl(160 30% 28% / 0.8) 100%) !important;
  padding: 1.5rem !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__info-header,
  .mk-plenerai__info-header {
    padding: 2rem !important;
  }
}

/* PL-4c: Event card icon boxes — w-16 h-16 rounded-xl */
.page-id-18 .mk-plenerai__icon-box,
.mk-plenerai__icon-box {
  width: 4rem !important;
  height: 4rem !important;
  border-radius: 0.75rem !important;
  background-color: hsl(40 30% 96% / 0.1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mk-plenerai__icon-box svg {
  width: 2rem !important;
  height: 2rem !important;
  color: hsl(40 30% 96%) !important;
}

/* ---------------------------------------------------------------------
   PL-5: Participant grid — md:grid-cols-2 lg:grid-cols-3 gap-4
   --------------------------------------------------------------------- */
.page-id-18 .mk-plenerai__participants,
.mk-plenerai__participants {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__participants,
  .mk-plenerai__participants {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .page-id-18 .mk-plenerai__participants,
  .mk-plenerai__participants {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ---------------------------------------------------------------------
   PL-6: Participant card — rounded-xl bg-muted/30 hover states
   --------------------------------------------------------------------- */
.page-id-18 .mk-plenerai__participant,
.mk-plenerai__participant {
  padding: 1rem !important;
  border-radius: 0.75rem !important;
  background-color: hsl(36 20% 90% / 0.3) !important;
  border: 1px solid transparent !important;
  transition: all 300ms ease !important;
}

.page-id-18 .mk-plenerai__participant:hover,
.mk-plenerai__participant:hover {
  background-color: hsl(36 20% 90% / 0.5) !important;
  border-color: hsl(160 30% 28% / 0.2) !important;
}

.mk-plenerai__participant p:first-child {
  font-weight: 600 !important;
  color: hsl(160 30% 18%) !important;
  transition: color 300ms ease !important;
}

.mk-plenerai__participant:hover p:first-child {
  color: hsl(160 30% 28%) !important;
}

.mk-plenerai__participant p:last-child {
  font-size: 0.875rem !important;
  color: hsl(160 15% 40%) !important;
}

/* PL-6b: Curator section */
.page-id-18 .mk-plenerai__curator,
.mk-plenerai__curator {
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid hsl(36 20% 82%) !important;
}

.mk-plenerai__curator-icon {
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 9999px !important;
  background-color: hsl(160 30% 28% / 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mk-plenerai__curator-icon svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: hsl(160 30% 28%) !important;
}

/* ---------------------------------------------------------------------
   PL-7: About image height — 320px (h-80) (CRITICAL FIX)
   React: h-80 = 20rem (320px) — NOT 400px
   --------------------------------------------------------------------- */
.page-id-18 .mk-plenerai-about__image img,
.mk-plenerai-about__image img,
.mk-plenerai-about .wp-block-image img,
body.page-plenerai .mk-plenerai-about img {
  height: 20rem !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

/* PL-7b: About image decorative offset */
.page-id-18 .mk-plenerai-about__image-offset,
.mk-plenerai-about__image-offset {
  position: absolute !important;
  top: -1rem !important;
  left: -1rem !important;
  width: 100% !important;
  height: 100% !important;
  background-color: hsl(160 30% 28% / 0.1) !important;
  border-radius: 1rem !important;
}

/* ---------------------------------------------------------------------
   PL-8: Gallery section — bg-muted/30 py-16 md:py-24
   --------------------------------------------------------------------- */
.page-id-18 .mk-plenerai__gallery,
.mk-plenerai__gallery {
  background-color: hsl(36 20% 90% / 0.3) !important;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__gallery,
  .mk-plenerai__gallery {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
}

/* ---------------------------------------------------------------------
   PL-9: Gallery image hover transition — 700ms (CRITICAL FIX)
   React: duration-700 = 700ms — NOT 500ms
   --------------------------------------------------------------------- */
.page-id-18 .mk-plenerai__gallery img,
.mk-plenerai__gallery img,
body.page-plenerai .mk-plenerai__gallery img {
  transition: transform 700ms ease !important;
}

.page-id-18 .mk-plenerai__gallery figure:hover img,
.mk-plenerai__gallery figure:hover img {
  transform: scale(1.05) !important;
}

/* PL-9b: Gallery image containers */
.page-id-18 .mk-plenerai__gallery figure,
.mk-plenerai__gallery figure,
.mk-plenerai__gallery .wp-block-image {
  overflow: hidden !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

/* ---------------------------------------------------------------------
   PL-10, PL-11, PL-12: All headings — font-weight 700 (CRITICAL FIX)
   React: font-bold = 700 — NOT 600
   --------------------------------------------------------------------- */
.page-id-18 h1,
.page-id-18 h2,
.page-id-18 h3,
body.page-plenerai h1,
body.page-plenerai h2,
body.page-plenerai h3,
.mk-plenerai-hero h1,
.mk-plenerai__gallery h2,
.mk-plenerai-about h2 {
  font-weight: 700 !important;
}

/* H1: text-5xl md:text-7xl */
.page-id-18 h1,
.mk-plenerai-hero h1 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 3rem !important;
  color: hsl(40 30% 96%) !important;
  margin-bottom: 1rem !important;
}

@media (min-width: 768px) {
  .page-id-18 h1,
  .mk-plenerai-hero h1 {
    font-size: 4.5rem !important;
  }
}

/* H2: text-3xl md:text-4xl */
.page-id-18 h2,
.mk-plenerai-about h2,
.mk-plenerai__gallery h2 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.875rem !important;
  margin-bottom: 1.5rem !important;
}

@media (min-width: 768px) {
  .page-id-18 h2,
  .mk-plenerai-about h2,
  .mk-plenerai__gallery h2 {
    font-size: 2.25rem !important;
  }
}

/* Hero subtitle */
.page-id-18 .mk-plenerai-hero p,
.mk-plenerai-hero__subtitle {
  font-size: 1.25rem !important;
  color: hsl(40 30% 96% / 0.9) !important;
  font-weight: 300 !important;
  max-width: 42rem !important;
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai-hero p,
  .mk-plenerai-hero__subtitle {
    font-size: 1.5rem !important;
  }
}

/* ==========================================================================
   END SECTION S312: PLENERAI PAGE V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S313: DOVANU KUPONAS V4 FIXES (2026-03-26)
   Agent 14 V4 Implementation
   Reference: docs/AGENT-14-DOVANU-KUPONAS-AUDIT.md

   Fixes not covered in V3 Section 293:
   - GV-11: Feature card icons 40px (w-10 h-10)
   - GV-12: Rules card icon 32px (w-8 h-8)
   - Additional selector coverage for robustness
   ========================================================================== */

/* GV-1: Hero subtitle 70% opacity - Additional selectors */
.page-id-19 .mk-voucher-subtitle,
.mk-voucher-hero p,
body.page-dovanu-kuponas .wp-block-cover__inner-container > p {
  color: hsl(40 30% 96% / 0.7) !important; /* 70% opacity cream-light */
}

/* GV-2: Voucher image shadow-2xl - Additional selectors */
.page-id-19 .mk-voucher-preview img,
.page-id-19 figure.wp-block-image img,
body.page-dovanu-kuponas .mk-voucher-preview img {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important; /* shadow-2xl */
}

/* GV-3: Amount buttons 8px radius (rounded-lg) - Additional selectors */
.page-id-19 .mk-amount-btn,
.mk-voucher-amount button,
body.page-dovanu-kuponas .mk-amount-btn {
  border-radius: 0.5rem !important; /* 8px = rounded-lg standard */
}

/* GV-9: Feature cards 12px radius (rounded-xl) - Additional selectors */
.page-id-19 .mk-feature-card,
.mk-voucher-features .wp-block-group,
body.page-dovanu-kuponas .mk-feature-card {
  border-radius: 0.75rem !important; /* 12px = rounded-xl */
}

/* GV-10: Rules card 12px radius - Additional selectors */
.page-id-19 .mk-rules-card,
body.page-dovanu-kuponas .mk-rules-card {
  border-radius: 0.75rem !important; /* 12px = rounded-xl */
}

/* GV-11: Feature card icons 40px (w-10 h-10) - CRITICAL NEW FIX */
.page-id-19 .mk-feature-icon svg,
.mk-voucher-features svg,
.mk-feature-card svg,
.mk-feature-card__icon svg,
body.page-dovanu-kuponas .mk-feature-card svg,
.page-id-19 .mk-feature-card > svg,
.page-id-19 .wp-block-group.mk-feature-card svg:first-child {
  width: 2.5rem !important; /* 40px = w-10 */
  height: 2.5rem !important; /* 40px = h-10 */
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
}

/* GV-12: Rules card info icon 32px (w-8 h-8) */
.page-id-19 .mk-rules-card svg,
.mk-rules-card__header svg,
body.page-dovanu-kuponas .mk-rules-card svg {
  width: 2rem !important; /* 32px = w-8 */
  height: 2rem !important; /* 32px = h-8 */
  min-width: 2rem !important;
  min-height: 2rem !important;
}

/* ==========================================================================
   END SECTION S313: DOVANU KUPONAS V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 317: PRODUCT CARDS V4 FIXES (2026-03-26)
   ==========================================================================

   V4 Agent 18: Product Cards Implementation
   Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT18-PRODUCT-CARDS.md

   CRITICAL FIX:
   - PC-15: Horizontal card (list view) image dimensions
     - WordPress was: 140x180px
     - React source: w-48 h-48 = 192x192px SQUARE

   VERIFIED OK (from V3):
   - PC-1: Card border-radius 0 (S297)
   - PC-3: Image aspect ratio 4:5 for vertical cards (S297)
   ========================================================================== */

/* ---------------------------------------------------------------------
   CRITICAL: Horizontal card (list view) image 192x192px square
   React: <div className="relative w-48 h-48 flex-shrink-0 overflow-hidden">
   w-48 = 12rem = 192px, h-48 = 12rem = 192px (SQUARE)
   --------------------------------------------------------------------- */

/* List view image container sizing */
.mk-card--horizontal .wc-block-components-product-image,
.mk-artwork-card--list .product-image,
.products.list-view .wc-block-components-product-image,
.mk-catalog--list .wc-block-components-product-image,
.mk-catalog--list .wc-block-grid__product-image,
.mk-catalog--list .mk-product-card__image {
  width: 12rem !important; /* 192px - React w-48 */
  min-width: 12rem !important; /* Prevent shrinking */
  height: 12rem !important; /* 192px - React h-48 (SQUARE) */
  flex-shrink: 0 !important; /* React flex-shrink-0 */
}

/* List view image element - force square aspect ratio */
.mk-card--horizontal .wc-block-components-product-image img,
.mk-artwork-card--list .product-image img,
.products.list-view .wc-block-components-product-image img,
.mk-catalog--list .wc-block-components-product-image img,
.mk-catalog--list .wc-block-grid__product-image img,
.mk-catalog--list .mk-product-card__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important; /* Force SQUARE for list view */
}

/* ---------------------------------------------------------------------
   Ensure vertical/grid cards still use 4:5 aspect ratio
   React: <div className="relative aspect-[4/5] overflow-hidden">
   This preserves existing V3 behavior for grid view
   --------------------------------------------------------------------- */

.mk-card--vertical .wc-block-components-product-image,
.products.grid-view .wc-block-components-product-image,
.mk-catalog--grid .wc-block-components-product-image,
.mk-catalog--grid .wc-block-grid__product-image,
.mk-catalog--grid .mk-product-card__image {
  aspect-ratio: 4 / 5 !important; /* Vertical cards = 4:5 */
}

/* ==========================================================================
   END SECTION 317: PRODUCT CARDS V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 338: FILTERS & TOGGLES V4 VISUAL PARITY (2026-03-29)
   Agent 19 V4 Implementation - CRITICAL dimension fixes
   Issues: FT-V4-1 to FT-V4-11
   Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT19-FILTERS-TOGGLES-VISUAL.md
   ========================================================================== */

/* ------------------------------------------------------------------
   FT-V4-1, FT-V4-2, FT-V4-3: Toggle switch dimensions (CRITICAL)
   React: w-11 h-6 track (44×24px), w-5 h-5 thumb (20×20px)
   ------------------------------------------------------------------ */

/* Toggle track: 44×24px with 2px transparent border */
.mk-sqf-toggle__track,
.mk-qf-toggle__track,
.mk-toggle-switch {
  width: 2.75rem !important;        /* 44px - FT-V4-1 */
  height: 1.5rem !important;        /* 24px - FT-V4-1 */
  border: 2px solid transparent !important; /* FT-V4-5 */
  border-radius: 9999px !important;
  transition: background-color 200ms ease, border-color 200ms ease !important;
}

/* Toggle thumb: 20×20px with cream background */
.mk-sqf-toggle__thumb,
.mk-qf-toggle__track::after {
  width: 1.25rem !important;        /* 20px - FT-V4-2 */
  height: 1.25rem !important;       /* 20px - FT-V4-2 */
  background: hsl(var(--background)) !important; /* cream - FT-V4-4 */
  border-radius: 9999px !important;
  box-shadow: 0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1) !important; /* shadow-lg - FT-V4-6 */
  transition: transform 200ms ease !important;
}

/* Thumb positioning */
.mk-sqf-toggle__thumb {
  position: absolute;
  top: 0.125rem;   /* 2px padding inside track */
  left: 0.125rem;  /* 2px padding inside track */
}

/* Thumb translate when checked: 20px (44px - 20px - 4px) - FT-V4-3 */
.mk-sqf-toggle.is-active .mk-sqf-toggle__thumb,
.mk-qf-toggle.is-active .mk-qf-toggle__track::after {
  transform: translateX(1.25rem) !important; /* 20px - FT-V4-3 */
}

/* Track color states - FT-V4-7 */
.mk-sqf-toggle__track,
.mk-qf-toggle__track {
  background: hsl(var(--input)) !important; /* hsl(36 20% 85%) */
}

.mk-sqf-toggle.is-active .mk-sqf-toggle__track,
.mk-qf-toggle.is-active .mk-qf-toggle__track {
  background: hsl(var(--primary)) !important; /* hsl(160 30% 28%) */
}

/* ------------------------------------------------------------------
   FT-V4-8: Toggle focus states (CRITICAL for accessibility)
   React: focus-visible:ring-2 ring-ring ring-offset-2
   ------------------------------------------------------------------ */
.mk-sqf-toggle__track:focus-visible,
.mk-qf-toggle__track:focus-visible,
.mk-toggle-switch:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;
}

/* ------------------------------------------------------------------
   FT-V4-9: Quick filter container alignment
   React: items-center (vertically center label with toggle)
   ------------------------------------------------------------------ */
.mk-sqf-toggle {
  display: flex;
  align-items: center !important;   /* was: start - FT-V4-9 */
  justify-content: space-between;
  cursor: pointer;
  gap: 0.75rem;
}

/* ------------------------------------------------------------------
   FT-V4-10: Clear filters button radius
   React: rounded = var(--radius) = 0.25rem (4px)
   V3 incorrectly set to 0 - removing that override
   ------------------------------------------------------------------ */
.mk-clear-filters-btn,
.mk-filter-clear {
  border-radius: var(--radius) !important; /* 4px - FT-V4-10 */
  /* Remove V3's "border-radius: 0 !important;" */
}

/* ------------------------------------------------------------------
   FT-V4-11: Time filter button radius
   React: rounded-md = calc(var(--radius) + 2px) = 0.375rem (6px)
   Current CSS has 0.125rem (2px) from earlier fix - updating
   ------------------------------------------------------------------ */
.mk-time-filter-btn,
.mk-price-filter-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem !important;  /* 6px - FT-V4-11 (was 0.125rem) */
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  background: transparent;
  text-decoration: none;
  text-align: left;
  transition: background-color 150ms ease, color 150ms ease;
  cursor: pointer;
  border: none;
}

.mk-time-filter-btn:hover,
.mk-price-filter-btn:hover {
  background: hsl(var(--muted));
  color: hsl(var(--primary));
}

.mk-time-filter-btn.is-active,
.mk-price-filter-btn.is-active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  font-weight: 500;
}

/* ------------------------------------------------------------------
   Select dropdown dimensions verification
   React: h-10 (40px height), rounded-md (6px radius)
   ------------------------------------------------------------------ */
.mk-catalog__sidebar select,
.mk-catalog__sidebar .wc-block-components-combobox-control input,
.mk-price-range-select,
.mk-sort-select {
  height: 2.5rem !important;        /* 40px */
  border-radius: 0.375rem !important; /* 6px rounded-md */
  border: 1px solid hsl(var(--input)) !important;
  background: hsl(var(--background)) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  color: hsl(var(--foreground)) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

/* Select focus ring - matching React focus:ring-2 ring-ring ring-offset-2 */
.mk-catalog__sidebar select:focus-visible,
.mk-catalog__sidebar .wc-block-components-combobox-control input:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;
}

/* Category filter heading */
.mk-catalog__sidebar .mk-filter-group:first-child .wp-block-heading {
  color: hsl(var(--primary-foreground));
  font-size: 1.125rem; /* text-lg */
  font-weight: 600;    /* font-semibold */
  margin-bottom: 1.5rem; /* mb-6 */
}

/* Category filter buttons - verified OK */
.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item a {
  color: hsl(var(--primary-foreground) / 0.8);
  font-size: 0.875rem;
  transition: color 200ms ease;
}

.mk-catalog__sidebar .mk-filter-group:first-child .wc-block-product-categories-list-item a:hover {
  color: hsl(var(--gold));
}

.mk-catalog__sidebar .mk-filter-group:first-child .current-cat > a,
.mk-catalog__sidebar .mk-filter-group:first-child .is-current > a {
  color: hsl(var(--gold)) !important;
  font-weight: 500 !important; /* font-medium */
}

/* ==========================================================================
   END SECTION 338: FILTERS & TOGGLES V4 VISUAL PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION 312: PLENERAI PAGE V4 FIXES (2026-03-26)
   ==========================================================================

   V4 Agent 13: Plenerai Page Implementation
   Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT-13-PLENERAI.md

   FIXES APPLIED:
   - PL-4: Event card shadow (shadow-2xl, not shadow-elegant)
   - PL-7: About image height (320px = h-80, not 400px)
   - PL-9: Gallery hover duration (700ms, not 500ms)
   - PL-10/11/12: All headings font-weight 700 (not 600)

   ========================================================================== */

/* ---------------------------------------------------------------------
   PL-4: Event card shadow should be shadow-2xl (not shadow-elegant)
   React: <div className="bg-card rounded-2xl shadow-2xl border overflow-hidden">
   shadow-2xl = box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25)
   --------------------------------------------------------------------- */
.page-id-18 .mk-event-card,
.page-id-18 .mk-plenerai-event-card,
.page-id-18 .mk-plenerai__info,
.mk-plenerai-event-card {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important; /* shadow-2xl */
}

/* ---------------------------------------------------------------------
   PL-7: About image height should be 320px (h-80) not 400px
   React: <img ... className="relative rounded-2xl shadow-lg w-full h-80 object-cover" />
   h-80 = 20rem = 320px
   --------------------------------------------------------------------- */
.page-id-18 .mk-about-image img,
.page-id-18 .mk-plenerai-about img,
.page-id-18 .mk-plenerai-about__image img,
.mk-plenerai-about img {
  height: 20rem !important; /* 320px = h-80 */
  object-fit: cover !important;
}

/* ---------------------------------------------------------------------
   PL-9: Gallery hover duration should be 700ms (not 500ms)
   React: hover:scale-105 transition-transform duration-700
   duration-700 = 700ms
   --------------------------------------------------------------------- */
.page-id-18 .mk-gallery-image img,
.page-id-18 .mk-plenerai-gallery img,
.page-id-18 .mk-plenerai__gallery img,
.page-id-18 .mk-plenerai__gallery figure img,
.mk-plenerai-gallery img {
  transition: transform 700ms ease !important;
}

/* ---------------------------------------------------------------------
   PL-10, PL-11, PL-12: All Plenerai headings should be font-weight: 700
   React: font-bold = font-weight: 700
   WordPress inline style was: font-weight:600 (WRONG)
   --------------------------------------------------------------------- */
.page-id-18 h1,
.page-id-18 h2,
.page-id-18 h3,
.page-id-18 .wp-block-heading,
.mk-plenerai-hero h1,
.mk-plenerai__gallery h2,
.mk-plenerai-about h2 {
  font-weight: 700 !important;
}

/* ==========================================================================
   END SECTION 312: PLENERAI PAGE V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 315: FORMS GLOBAL V4 FIXES (2026-03-26)
   V4 Fix Agent 16 Implementation
   Source: V4-AGENT16-FORMS-GLOBAL.md
   Issues: F16-7, F16-8, F16-9, F16-10, F16-11, F16-13
   ========================================================================== */

/* F16-7: Checkbox dimensions 16x16px */
input[type="checkbox"],
.wpcf7 input[type="checkbox"],
.wpcf7-checkbox input,
.wpcf7-acceptance input,
.woocommerce input[type="checkbox"] {
  width: 1rem !important; /* 16px */
  height: 1rem !important; /* 16px */
  flex-shrink: 0;
}

/* F16-8: Checkbox border forest green (#325A4D) */
input[type="checkbox"],
.wpcf7 input[type="checkbox"],
.wpcf7-checkbox input,
.wpcf7-acceptance input,
.woocommerce input[type="checkbox"] {
  border: 1px solid hsl(160 30% 28%) !important; /* forest green */
  appearance: none;
  -webkit-appearance: none;
}

/* F16-9: Checkbox checked state colors */
input[type="checkbox"]:checked,
.wpcf7 input[type="checkbox"]:checked,
.wpcf7-checkbox input:checked,
.wpcf7-acceptance input:checked,
.woocommerce input[type="checkbox"]:checked {
  background-color: hsl(160 30% 28%) !important; /* forest green */
  border-color: hsl(160 30% 28%) !important;
  accent-color: hsl(160 30% 28%);
}

/* F16-10: Input padding - 12px horizontal, 8px vertical (px-3 py-2) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpcf7 textarea {
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 = 8px 12px */
}

/* F16-11: Responsive font size - 16px mobile (text-base), 14px desktop (md:text-sm) */
input,
textarea,
select {
  font-size: 1rem !important; /* 16px on mobile - prevents iOS zoom */
}

@media (min-width: 768px) {
  input,
  textarea,
  select {
    font-size: 0.875rem !important; /* 14px on desktop */
  }
}

/* F16-13: Placeholder color - muted forest (#577066) */
input::placeholder,
textarea::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder,
.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
  color: hsl(160 15% 40%) !important; /* #577066 muted forest */
  opacity: 1 !important;
}

/* ==========================================================================
   END SECTION 315: FORMS GLOBAL V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S302: HEADER MOBILE V4 FIXES (2026-03-26)
   ==========================================================================

   V4 Agent 3: Header Mobile Implementation
   Reference: src/components/layout/Header.tsx (mobile menu lines 176-236)

   React Mobile Menu Specs:
   - Breakpoint: lg:hidden = below 1024px (hamburger visible)
   - Header height: h-20 = 5rem (80px)
   - Logo height: h-14 = 3.5rem (56px)
   - Hamburger button: variant="ghost" size="icon" = 2.5rem (40px) square
   - Hamburger icon: w-5 h-5 = 1.25rem (20px)
   - Menu container: lg:hidden py-4 border-t border-border animate-fade-in
   - Animation: animate-fade-in = opacity 0->1, translateY(10px)->0, 0.5s ease-out

   FIX APPLIED:
   - M3-9 (MINOR): Animation duration 0.3s -> 0.5s to match React
   - M3-15: Mobile logo height explicitly set to 56px

   VERIFIED CORRECT (S134 + S262):
   - Mobile menu expands inline (NOT overlay) - matches React
   - Header height 80px - matches React h-20
   - All icons visible on mobile - matches React
   - Section labels and link styling - matches React
   - Hamburger button dimensions - matches React
   ========================================================================== */

/* ---------------------------------------------------------------------
   M3-9: Animation duration 0.5s to match React animate-fade-in
   React: animate-fade-in = fade-in 0.5s ease-out forwards
   WordPress S134.2 was using 0.3s

   Override S134.2 with correct 0.5s timing
   --------------------------------------------------------------------- */

/* WordPress Navigation Block mobile menu - override S134.2 animation timing */
.mk-header__nav .wp-block-navigation__responsive-container.is-menu-open,
.mk-header__nav .wp-block-navigation__responsive-container.has-modal-open {
  animation: mk-fade-in 0.5s ease-out forwards !important; /* Was 0.3s in S134.2, React uses 0.5s */
}

/* Transition timing for max-height/opacity also updated to 0.5s */
.mk-header__nav .wp-block-navigation__responsive-container {
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out !important;
}

/* ---------------------------------------------------------------------
   M3-15: Mobile logo height 56px (h-14) — explicit mobile override
   React: <img ... className="h-14 object-contain" />
   h-14 = 3.5rem = 56px
   --------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .mk-header .wp-block-site-logo img,
  .mk-header__logo img,
  .site-header .custom-logo,
  .site-header .wp-block-site-logo img {
    height: 3.5rem !important; /* h-14 = 56px */
    max-height: 3.5rem !important;
    width: auto !important;
    object-fit: contain !important;
  }
}

/* ---------------------------------------------------------------------
   Additional mobile menu animation refinements
   Ensure all mobile menu transitions use consistent 0.5s timing
   --------------------------------------------------------------------- */
.mk-mobile-menu,
.mk-header__mobile-nav,
.mk-mobile-nav,
[class*="mobile-menu"],
[class*="mobile-nav"] {
  transition-duration: 0.5s !important;
  animation-duration: 0.5s !important;
}

/* Mobile menu fade-in animation (translateY, NOT translateX) */
@keyframes mk-mobile-menu-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mk-mobile-menu-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

.mk-mobile-menu.is-opening,
.mk-header__mobile-nav.is-opening {
  animation: mk-mobile-menu-fade-in 0.5s ease-out forwards !important;
}

.mk-mobile-menu.is-closing,
.mk-header__mobile-nav.is-closing {
  animation: mk-mobile-menu-fade-out 0.5s ease-out forwards !important;
}

/* ==========================================================================
   END SECTION S302: HEADER MOBILE V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 311: INFORMACIJA HUB V4 FIXES (2026-03-26)
   ==========================================================================

   V4 Agent 12: Informacija Hub Implementation
   Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT-12-INFORMACIJA.md

   HIGH PRIORITY FIXES:
   - 12-5: TabsList border-radius 12px (rounded-xl = STANDARD Tailwind)
   - 12-7: TabsTrigger border-radius 0px (rounded-sm = CUSTOM config = 0)
   - 12-9: TabsTrigger active state background = forest green

   MEDIUM PRIORITY FIX:
   - 12-2: Hero title font-weight 700
   ========================================================================== */

/* ---------------------------------------------------------------------
   12-5: TabsList container border-radius 12px (standard rounded-xl)
   React Information.tsx: className="... rounded-xl mb-8"
   rounded-xl = 0.75rem (12px) — STANDARD Tailwind value
   --------------------------------------------------------------------- */
.mk-info-tabs,
.page-id-22 .wp-block-buttons,
.page-informacija .mk-info-tabs__nav,
.page-informacija .wp-block-buttons,
body.page-informacija .mk-info-tabs,
body[class*="informacija"] .mk-info-tabs__list {
  border-radius: 0.75rem !important; /* 12px = rounded-xl */
  overflow: hidden !important;
}

/* ---------------------------------------------------------------------
   12-7: TabsTrigger border-radius 0 (custom rounded-sm = 0)
   React tabs.tsx: rounded-sm = calc(var(--radius) - 4px)
   In this project: --radius = 0.25rem (4px), so rounded-sm = 0px
   --------------------------------------------------------------------- */
.mk-info-tabs .wp-block-button__link,
.page-id-22 .wp-block-button__link,
.page-informacija .mk-info-tabs__trigger,
.page-informacija .mk-info-tab-btn,
body.page-informacija .mk-info-tabs .wp-block-button__link,
body[class*="informacija"] .mk-info-tabs__trigger {
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------
   12-9: TabsTrigger active state - forest green background
   React Information.tsx: data-[state=active]:bg-primary
                          data-[state=active]:text-primary-foreground
   bg-primary = hsl(160 30% 28%) = forest green
   text-primary-foreground = hsl(40 30% 96%) = cream
   --------------------------------------------------------------------- */
.mk-info-tabs .wp-block-button__link.is-active,
.mk-info-tabs .wp-block-button__link[aria-current="page"],
.page-id-22 .wp-block-button.is-style-fill .wp-block-button__link,
.page-informacija .mk-info-tabs__trigger.active,
.page-informacija .mk-info-tabs__trigger[aria-selected="true"],
body.page-informacija .mk-info-tabs .wp-block-button__link.is-active,
body[class*="informacija"] .mk-info-tabs__trigger.active,
body[class*="informacija"] .mk-info-tab-btn.active {
  background-color: hsl(160 30% 28%) !important; /* primary/forest */
  color: hsl(40 30% 96%) !important; /* cream */
}

/* ---------------------------------------------------------------------
   12-2: Hero title font-weight 700
   React Information.tsx: font-bold = 700
   --------------------------------------------------------------------- */
.page-id-22 .mk-info-hero h1,
.mk-info-hero .wp-block-heading,
.page-informacija .mk-info-hero__title,
body.page-informacija .mk-info-hero h1,
body[class*="informacija"] .mk-info-hero__title {
  font-weight: 700 !important;
}

/* ==========================================================================
   END SECTION 311: INFORMACIJA HUB V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S304: KATALOGAS GRID & TOOLBAR V4 FIXES (2026-03-26)
   ==========================================================================

   V4 Agent 5: Katalogas Grid & Toolbar Implementation
   Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT5-KATALOGAS-GRID-TOOLBAR.md

   ISSUES FIXED:
   - 5.3 (HIGH): Sort dropdown width - 200px exact (was min-width: 200px)
   - 5.4 (HIGH): Sort dropdown height - 40px (h-10) (was ~37px from padding)
   - 5.5 (HIGH): Sort dropdown border-radius - 2px (custom rounded-md) (was 6px)
   - 5.6 (MEDIUM): View toggle button height - 36px (h-9)
   - 5.7 (MEDIUM): Result count font size - 1rem (was 0.875rem via fontSize:"small")

   React source: Catalog.tsx (lines 247-320), select.tsx, button.tsx
   ========================================================================== */

/* ---------------------------------------------------------------------
   5.3 + 5.4 + 5.5: Sort dropdown exact dimensions and radius
   React: w-[200px] = 200px, h-10 = 2.5rem = 40px, rounded-md = 2px
   --------------------------------------------------------------------- */
.woocommerce-ordering select,
select.orderby,
.mk-sort-select,
.mk-catalog-toolbar select,
.mk-sort-dropdown,
.wc-block-sort-select {
  width: 200px !important; /* React w-[200px] = exact 200px, not min-width */
  min-width: auto !important; /* Override previous min-width: 200px */
  height: 2.5rem !important; /* React h-10 = 40px */
  border-radius: 0.125rem !important; /* React rounded-md = 2px (custom Tailwind config) */
}

/* ---------------------------------------------------------------------
   5.6: View toggle button height
   React: Button size="sm" = h-9 = 2.25rem = 36px
   --------------------------------------------------------------------- */
.mk-view-toggle button,
.mk-view-toggle a,
.mk-catalog-toolbar .view-toggle button,
.mk-view-btn {
  height: 2.25rem !important; /* React h-9 = 36px */
  min-height: 2.25rem !important;
  width: 2.25rem !important; /* Square buttons */
}

/* ---------------------------------------------------------------------
   5.7: Result count font size
   React: default paragraph = 1rem (16px)
   WordPress was: fontSize:"small" = 0.875rem (14px)
   --------------------------------------------------------------------- */
.woocommerce-result-count,
.wc-block-product-results-count,
.mk-result-count {
  font-size: 1rem !important; /* React default = 16px, not 14px */
}

/* ==========================================================================
   END SECTION S304: KATALOGAS GRID & TOOLBAR V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S308: KONTAKTAI PAGE V4 FIXES (2026-03-26)
   ==========================================================================

   V4 Agent 9: Kontaktai Page Implementation
   Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT9-KONTAKTAI.md

   ROOT CAUSE: S288 used STANDARD Tailwind values instead of CUSTOM config:
   - Custom rounded-sm = 0px (not standard 2px)
   - Custom rounded-md = 2px (not standard 6px)

   CRITICAL FIXES:
   - K9-1: Form card border-radius 0px (was 2px in S288)
   - K9-2: Input border-radius 2px (was 6px in S288)
   ========================================================================== */

/* ---------------------------------------------------------------------
   K9-1: Form card border-radius 0 (custom rounded-sm = calc(var(--radius) - 4px) = 0)
   React: bg-card rounded-sm shadow-elegant p-8
   S288 line 39448 had 0.125rem (2px) - WRONG, should be 0
   --------------------------------------------------------------------- */
.page-id-15 .mk-contact-form-card,
.page-id-15 .wpcf7,
.page-id-15 .wp-block-group.has-background,
.page-id-15 form {
  border-radius: 0 !important; /* K9-1 FIX: 0px not 2px */
}

/* ---------------------------------------------------------------------
   K9-2: Input border-radius 2px (custom rounded-md = calc(var(--radius) - 2px) = 0.125rem)
   React: flex h-10 w-full rounded-md border border-input
   S288 line 39460 had 0.375rem (6px) - WRONG, should be 0.125rem (2px)
   --------------------------------------------------------------------- */
.page-id-15 input[type="text"],
.page-id-15 input[type="email"],
.page-id-15 textarea,
.page-id-15 select,
.page-id-15 .wpcf7 input[type="text"],
.page-id-15 .wpcf7 input[type="email"],
.page-id-15 .wpcf7 input[type="tel"],
.page-id-15 .wpcf7 textarea,
.page-id-15 .wpcf7 select,
.page-id-15 .wpcf7-form-control {
  border-radius: 0.125rem !important; /* K9-2 FIX: 2px not 6px */
}

/* ---------------------------------------------------------------------
   Ensure contact info cards also have correct radius 0
   --------------------------------------------------------------------- */
.page-id-15 .mk-contact-info-card {
  border-radius: 0 !important;
}

/* ==========================================================================
   END SECTION S308: KONTAKTAI PAGE V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 301: HEADER DESKTOP V4 FIXES
   ==========================================================================

   V4 Audit Agent 2 Implementation (2026-03-26)
   Reference: docs/PARITY-AGENT-LOGS/V4-AGENT2-HEADER-DESKTOP.md

   Issues Fixed:
   - H2-1 (MEDIUM): Search icon position - React has it on LEFT, WordPress on RIGHT
   - H2-2 (LOW): Account hover - React uses gold (bg-accent), WordPress uses gray

   ========================================================================== */

/* ---------------------------------------------------------------------
   H2-1: Search icon on LEFT side
   React: <Search className="absolute left-3 ..."/> with Input pl-9
   WordPress: wp:search block with buttonPosition="button-inside" renders button on RIGHT
   Fix: Reverse flex direction to move search button (icon) to left
   --------------------------------------------------------------------- */
.mk-header__search .wp-block-search__inside-wrapper {
  flex-direction: row-reverse !important;
}

/* Adjust button (icon) padding for left position */
.mk-header__search .wp-block-search__button {
  padding-left: 0.75rem !important;  /* left-3 = 0.75rem */
  padding-right: 0.25rem !important;
  order: -1 !important;
}

/* Adjust input padding for icon on left */
.mk-header__search .wp-block-search__input {
  padding-left: 0.5rem !important;
  padding-right: 1rem !important;    /* pr-4 = 1rem */
}

/* ---------------------------------------------------------------------
   H2-2: Account icon hover gold background
   React: Button variant="ghost" includes hover:bg-accent (gold)
   WordPress: .mk-header__account-link:hover uses bg-muted (gray)
   Fix: Change hover background to gold with 10% opacity
   --------------------------------------------------------------------- */
.mk-header__account-link:hover,
.mk-header .wp-block-navigation-item.has-child:hover > a {
  background-color: hsl(42 55% 58% / 0.1) !important; /* gold at 10% opacity */
}

/* Ensure text color matches accent-foreground on hover */
.mk-header__account-link:hover {
  color: hsl(160 30% 15%) !important; /* accent-foreground */
}

/* ==========================================================================
   END SECTION 301: HEADER DESKTOP V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 307: POAUKCIONINE PAGE V4 FIXES (2026-03-26)
   V4 Fix Agent 8 Implementation

   Reference: docs/PARITY-AGENT-LOGS/V4-AGENT8-POAUKCIONINE.md

   CRITICAL ISSUES FIXED:
   - P8-1/P8-2: Deadline Badge MUST be SOLID RED (hsl(0 65% 50%)), NOT amber
   - P8-6: Select dropdown border-radius = 2px (React custom rounded-md)

   This section uses maximum specificity with html body prefix to ensure
   all previous conflicting rules (amber badges, wrong radius) are overridden.
   ========================================================================== */

/* ---------------------------------------------------------------------
   P8-1 & P8-2: CRITICAL — Deadline Badge SOLID RED

   React PostAuction.tsx lines 117-119:
   bg-destructive = hsl(0 65% 50%) = #D42A2A (SOLID RED)
   text-destructive-foreground = white
   rounded = var(--radius) = 0.25rem (4px)

   Previous sections used AMBER which is WRONG — deadline urgency requires RED!
   --------------------------------------------------------------------- */
html body .mk-deadline-badge,
html body .mk-badge--post-auction,
html body .mk-badge--deadline,
html body .page-id-93 .mk-deadline-badge,
html body .mk-poaukcionine-grid .mk-deadline-badge,
html body .wc-block-product .mk-deadline-badge,
html body [class*="poaukcion"] .mk-deadline-badge,
html body [class*="liko-"] {
  background-color: hsl(0 65% 50%) !important; /* RED - destructive */
  background: hsl(0 65% 50%) !important;
  color: hsl(0 0% 100%) !important; /* WHITE */
  border: none !important;
  border-radius: 0.25rem !important; /* rounded = 4px */
  padding: 0.25rem 0.5rem !important; /* px-2 py-1 */
  font-size: 0.75rem !important; /* text-xs = 12px */
  font-weight: 500 !important; /* font-medium */
  position: absolute !important;
  top: 0.5rem !important; /* top-2 = 8px */
  right: 0.5rem !important; /* right-2 = 8px */
  z-index: 10 !important;
  display: inline-block !important;
}

/* Rounded-full variant for badge shape (some implementations use pill shape) */
html body .mk-deadline-badge.rounded-full,
html body .mk-badge--deadline.rounded-full {
  border-radius: 9999px !important;
}

/* Urgent state - pulse animation */
html body .mk-deadline-badge.urgent,
html body .mk-deadline-badge[data-urgent="true"],
html body .mk-deadline-badge--urgent {
  animation: mk-v4-pulse-deadline 2s ease-in-out infinite !important;
}

@keyframes mk-v4-pulse-deadline {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
}

/* ---------------------------------------------------------------------
   P8-6: Select Dropdown Border-Radius = 2px

   React select.tsx (ShadCN):
   rounded-md = calc(var(--radius) - 2px) = calc(0.25rem - 2px) = 2px

   Previous S287 used 0.375rem (6px) which is WRONG!
   --------------------------------------------------------------------- */
html body .mk-poaukcionine-select,
html body .page-id-93 select.mk-poaukcionine-select,
html body .page-id-93 select,
html body .poaukcionine-filter-select,
html body .mk-post-auction-filters select {
  border-radius: 0.125rem !important; /* 2px = calc(0.25rem - 2px) */
}

/* ---------------------------------------------------------------------
   P8-3: Amber Banner Border-Radius = 4px (custom rounded-lg)

   React: rounded-lg = var(--radius) = 0.25rem (4px) per custom config
   NOT 8px as in standard Tailwind!
   --------------------------------------------------------------------- */
html body .mk-poaukcionine-banner,
html body .mk-post-auction-banner,
html body .page-id-93 .mk-post-auction-banner {
  background-color: hsl(38 92% 50% / 0.1) !important;
  border: 1px solid hsl(38 92% 50% / 0.2) !important;
  border-radius: 0.25rem !important; /* 4px - custom rounded-lg */
  padding: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Banner text color - amber-800 */
html body .mk-poaukcionine-banner p,
html body .mk-post-auction-banner p {
  color: hsl(38 50% 25%) !important; /* text-amber-800 = #92400e */
  font-size: 0.875rem !important;
  margin: 0 !important;
}

/* Banner icon - amber-600 */
html body .mk-poaukcionine-banner svg,
html body .mk-post-auction-banner svg {
  color: hsl(38 70% 45%) !important; /* text-amber-600 = #d97706 */
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   END SECTION 307: POAUKCIONINE PAGE V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 306: GALERIJA PAGE V4 FIXES (2026-03-26)
   V4 Fix Agent 7 Implementation
   Reference: docs/PARITY-AGENT-LOGS/V4-AGENT-7-GALERIJA.md
   React Source: src/pages/Gallery.tsx, src/components/gallery/GalleryCard.tsx

   HIGH PRIORITY FIXES:
   - G7-03: Filter buttons h-9 (36px) with px-4 (16px) - reinforced
   - G7-06: Grid responsive sm:2 lg:3 xl:4 - reinforced
   - G7-07: Image aspect ratio 4:5 - reinforced
   - G7-11: CRITICAL - Price font must be Inter (body), NOT Playfair Display
   - G7-12: Action buttons VERTICAL column with space-y-2 - reinforced

   MEDIUM PRIORITY FIXES (2026-03-26 update):
   - G7-02: Description line-height 1.625 (leading-relaxed)
   - G7-08: Card body padding p-5 (20px)
   - G7-10: Title truncation line-clamp-1
   - Card container: border-radius 0, shadow-card, hover:shadow-hover
   ========================================================================== */

/* ---------------------------------------------------------------------
   G7-11 CRITICAL FIX: Price font must be Inter (body font), NOT Playfair Display
   React: The price text uses default body font (Inter), not font-display

   The issue: WordPress inline style sets font-family: Playfair Display
   via var(--wp--preset--font-family--playfair-display)
   Fix: Override with Inter using high specificity
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-components-product-price,
.page-id-92 .wc-block-grid__product-price,
.page-id-92 .wp-block-woocommerce-product-price,
.page-id-92 .woocommerce-Price-amount,
.page-id-92 .wc-block-product .wc-block-components-product-price,
.mk-gallery-grid .wc-block-components-product-price,
.mk-gallery-card .price,
.mk-gallery-card__price {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 700 !important; /* font-bold */
  color: hsl(160 30% 28%) !important; /* text-primary */
  margin-bottom: 1rem !important; /* mb-4 = 16px */
}

/* Override inline styles that set Playfair Display on price */
.page-id-92 [style*="font-family:var(--wp--preset--font-family--playfair-display)"] .woocommerce-Price-amount,
.page-id-92 [style*="font-family: var(--wp--preset--font-family--playfair-display)"] .woocommerce-Price-amount,
.page-id-92 .wp-block-woocommerce-product-price[style*="font-family"],
.page-id-92 .wc-block-components-product-price[style*="font-family"] {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
}

/* ---------------------------------------------------------------------
   G7-03 REINFORCED: Filter buttons correct size (h-9 = 36px, px-4 = 16px)
   Additional selectors for higher specificity to override inline styles
   React: <Button variant="outline" size="sm"> — size="sm" = h-9 px-4
   --------------------------------------------------------------------- */
.page-id-92 .mk-category-filter button,
.page-id-92 .mk-gallery-filter .wp-block-button__link,
.page-id-92 .mk-gallery-filters button,
.page-id-92 .wp-block-buttons.mk-gallery-filters .wp-block-button__link,
.mk-gallery-filters .wp-block-button__link {
  height: 2.25rem !important; /* h-9 = 36px */
  padding-left: 1rem !important; /* px-4 = 16px */
  padding-right: 1rem !important; /* px-4 = 16px */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---------------------------------------------------------------------
   G7-06 REINFORCED: Grid responsive breakpoints with higher specificity
   React: sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4
   Mobile: 1 col, sm (640px): 2 cols, lg (1024px): 3 cols, xl (1280px): 4 cols
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-product-template.is-flex-container,
.page-id-92 ul.wc-block-product-template,
.mk-gallery-grid .wc-block-product-template {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
}

@media (min-width: 640px) {
  .page-id-92 .wc-block-product-template.is-flex-container,
  .page-id-92 ul.wc-block-product-template,
  .mk-gallery-grid .wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .page-id-92 .wc-block-product-template.is-flex-container,
  .page-id-92 ul.wc-block-product-template,
  .mk-gallery-grid .wc-block-product-template {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  .page-id-92 .wc-block-product-template.is-flex-container,
  .page-id-92 ul.wc-block-product-template,
  .mk-gallery-grid .wc-block-product-template {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ---------------------------------------------------------------------
   G7-07 REINFORCED: Image aspect ratio 4:5 with high specificity
   Override WordPress inline styles and data attributes
   React: <div className="relative aspect-[4/5] overflow-hidden">
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-components-product-image[data-aspect-ratio],
.page-id-92 .wc-block-components-product-image--aspect-ratio-3-4,
.page-id-92 .wc-block-grid__product-image[data-aspect-ratio],
.page-id-92 .wc-block-product .wc-block-components-product-image {
  aspect-ratio: 4 / 5 !important;
}

.page-id-92 .wc-block-components-product-image[data-aspect-ratio] img,
.page-id-92 .wc-block-components-product-image--aspect-ratio-3-4 img,
.page-id-92 .wc-block-grid__product-image img,
.page-id-92 .wc-block-product .wc-block-components-product-image img,
.page-id-92 img[style*="aspect-ratio:3/4"],
.page-id-92 img[style*="aspect-ratio: 3/4"] {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* ---------------------------------------------------------------------
   G7-12 REINFORCED: Action buttons VERTICAL column with gap
   React: <div className="space-y-2"> means flex-direction: column with gap: 0.5rem (8px)
   --------------------------------------------------------------------- */
.page-id-92 .mk-card-actions,
.page-id-92 .mk-gallery-buttons,
.page-id-92 .wc-block-product .button-group,
.page-id-92 .wc-block-product .wc-block-components-product-button,
.mk-gallery-card .button-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* space-y-2 = 8px */
  width: 100% !important;
}

/* Ensure buttons are full width within the column stack */
.page-id-92 .mk-card-actions button,
.page-id-92 .mk-card-actions a.button,
.page-id-92 .mk-gallery-buttons button,
.page-id-92 .mk-gallery-buttons a.button,
.page-id-92 .wc-block-product .button-group button,
.page-id-92 .wc-block-product .button-group a.button {
  width: 100% !important; /* w-full */
  margin: 0 !important; /* Remove any margin that might interfere with gap */
}

/* ---------------------------------------------------------------------
   G7-02: Description line-height should be 1.625 (leading-relaxed)
   React: <p className="text-muted-foreground leading-relaxed">
   WordPress inline style sets 1.75 — need to override
   --------------------------------------------------------------------- */
.page-id-92 .has-muted-foreground-color,
.page-id-92 p.has-text-color,
.mk-gallery-page p.has-muted-foreground-color {
  line-height: 1.625 !important; /* leading-relaxed */
}

/* ---------------------------------------------------------------------
   G7-10: Title truncation with line-clamp-1 (single line ellipsis)
   React: <h3 className="font-display text-lg font-semibold text-foreground mb-1 line-clamp-1">
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-product-template .wp-block-post-title,
.page-id-92 .wc-block-grid__product-title,
.page-id-92 .mk-gallery-card__title,
.mk-gallery-grid .wp-block-post-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  line-clamp: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ---------------------------------------------------------------------
   G7-08: Card body padding (p-5 = 1.25rem / 20px)
   React: <div className="p-5">
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-product-template li,
.page-id-92 .wc-block-grid__product,
.mk-gallery-grid .wc-block-product {
  padding-bottom: 1.25rem !important; /* p-5 = 20px bottom padding inside card */
}

.page-id-92 .wc-block-product-template li > *:not(.wc-block-components-product-image):not(a:has(.wc-block-components-product-image)),
.mk-gallery-grid .wc-block-product > *:not(.wc-block-components-product-image):not(a:has(.wc-block-components-product-image)) {
  padding-left: 1.25rem !important; /* p-5 = 20px */
  padding-right: 1.25rem !important; /* p-5 = 20px */
}

/* Card container styling - ensure rounded-sm (0px border-radius) */
.page-id-92 .wc-block-product-template li,
.page-id-92 .wc-block-grid__product,
.mk-gallery-grid .wc-block-product {
  background: hsl(var(--card)) !important; /* bg-card */
  border-radius: 0 !important; /* rounded-sm = 0px (custom config) */
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow 300ms ease !important;
}

.page-id-92 .wc-block-product-template li:hover,
.page-id-92 .wc-block-grid__product:hover,
.mk-gallery-grid .wc-block-product:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* ==========================================================================
   END SECTION 306: GALERIJA PAGE V4 FIXES
   ========================================================================== */


/* ==========================================================================
   SECTION 303: KATALOGAS SIDEBAR V4 FIXES - CRITICAL (2026-03-26)
   Agent 4 Implementation - V4 Parity Audit

   CRITICAL USER ISSUE:
   "Sidebar NOT always visible - should show IMMEDIATELY on page load
   and when switching between filters/pills"

   In React, sidebar is UNCONDITIONALLY RENDERED in grid lg:grid-cols-4 layout.
   No conditional logic whatsoever.

   Issues addressed:
   - S4-1 CRITICAL: Sidebar must be ALWAYS visible on desktop (1024px+)
   - S4-2 HIGH: Category card border-radius = 0px (rounded-sm = 0 in custom config)
   - S4-3 HIGH: Time Filter card border-radius = 0px (rounded-sm = 0)
   - S4-4 HIGH: Quick Filter card border-radius = 0px (rounded-sm = 0)
   - S4-5 HIGH: Time buttons border-radius = 2px (rounded-md = 2px in custom config)
   - S4-14: Sticky positioning top: 6rem (96px)

   Reference: docs/COMPREHENSIVE-PARITY-AUDIT-2026-03-26-V4.md
   ========================================================================== */

/* ---------------------------------------------------------------------
   S4-1 CRITICAL: Force sidebar ALWAYS visible on desktop (1024px+)

   React uses grid lg:grid-cols-4 - sidebar is ALWAYS in the DOM.
   WordPress implementation must match: no hiding, no JS dependency.
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Force sidebar visibility with maximum specificity */
  .mk-catalog__sidebar,
  .wc-block-product-categories,
  .widget_product_categories,
  [class*="catalog-sidebar"],
  [class*="filter-sidebar"],
  body.woocommerce .mk-catalog__sidebar,
  body.archive.post-type-archive-product .mk-catalog__sidebar,
  body.archive.post-type-archive-product .wp-block-column:first-child,
  .woocommerce-page .wp-block-column.mk-catalog__sidebar,
  html body.woocommerce .wp-block-columns > .wp-block-column.mk-catalog__sidebar,
  html body.archive.woocommerce .mk-catalog__sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    top: 6rem !important; /* top-24 = 96px - matches React */
    flex: 0 0 25% !important;
    min-width: 280px !important;
    max-width: 320px !important;
    transform: none !important;
    pointer-events: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Admin bar offset for sticky positioning */
  body.admin-bar .mk-catalog__sidebar,
  body.admin-bar .wc-block-product-categories,
  body.admin-bar [class*="catalog-sidebar"] {
    top: calc(6rem + 32px) !important;
  }

  /* Ensure parent grid/flex shows sidebar column - 4-column grid */
  .mk-catalog__grid,
  .woocommerce-products-header + .wp-block-group,
  body.archive.post-type-archive-product .wp-block-columns,
  body.woocommerce .wp-block-columns:has(.mk-catalog__sidebar) {
    display: grid !important;
    grid-template-columns: 1fr 3fr !important;
    gap: 2rem !important;
  }

  /* Alternative flex-based layout for wp:columns */
  body.woocommerce .wp-block-columns,
  body.archive.post-type-archive-product .wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  /* Main content column takes remaining space */
  .mk-catalog__main,
  .wp-block-column.mk-catalog__main,
  body.woocommerce .wp-block-column:not(.mk-catalog__sidebar):not(:first-child) {
    flex: 1 1 75% !important;
    max-width: 75% !important;
  }
}

/* ---------------------------------------------------------------------
   S4-2/S4-3/S4-4 HIGH: All filter cards border-radius = 0px

   React uses rounded-sm which is CUSTOM 0px (not standard 2px)
   bg-card rounded-sm p-6 shadow-card
   bg-primary text-primary-foreground rounded-sm p-6
   --------------------------------------------------------------------- */
.mk-filter-card,
.mk-catalog__sidebar .wp-block-group,
.wc-block-product-categories,
.mk-filter-categories,
.mk-time-filters,
.mk-quick-filters,
.mk-price-filter,
.mk-catalog__sidebar .mk-filter-group,
.mk-catalog-sidebar .mk-filter-group,
.mk-categories-panel,
[class*="catalog-sidebar"] .wp-block-group,
body.woocommerce .mk-catalog__sidebar > .wp-block-group > .wp-block-group {
  border-radius: 0 !important; /* rounded-sm = 0px in custom config */
  overflow: hidden !important;
}

/* Category card (primary bg) */
.mk-catalog__sidebar .mk-filter-categories,
.mk-catalog__sidebar .mk-categories-panel,
.mk-catalog__sidebar .wp-block-group.has-primary-background-color {
  border-radius: 0 !important;
  background: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  padding: 1.5rem !important; /* p-6 */
}

/* Time/Quick filter cards (card bg) */
.mk-time-filters,
.mk-quick-filters,
.mk-price-filter,
.mk-catalog__sidebar .bg-card,
.mk-catalog__sidebar .has-card-background-color {
  border-radius: 0 !important;
  background: hsl(40 30% 96%) !important; /* bg-card */
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important; /* shadow-card */
  padding: 1rem !important; /* p-4 for time/quick filters */
}

/* ---------------------------------------------------------------------
   S4-5 HIGH: Time filter button border-radius = 2px

   React: rounded-md = 2px in CUSTOM config (not standard 6px)
   px-3 py-2 rounded-md text-sm
   --------------------------------------------------------------------- */
.mk-time-filter-btn,
.mk-catalog__sidebar button,
.mk-time-filters button,
.mk-catalog__sidebar .mk-filter-btn,
.mk-time-filters .wp-block-button__link,
[class*="catalog-sidebar"] button:not(.mk-toggle) {
  border-radius: 0.125rem !important; /* 2px = rounded-md in custom config */
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  font-size: 0.875rem !important; /* text-sm */
  width: 100% !important;
  text-align: left !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}

/* Time filter button hover state */
.mk-time-filter-btn:hover,
.mk-time-filters button:hover,
.mk-catalog__sidebar .mk-filter-btn:hover {
  background-color: hsl(36 20% 90%) !important; /* hover:bg-muted */
}

/* Time filter button active state */
.mk-time-filter-btn.active,
.mk-time-filter-btn.is-active,
.mk-time-filter-btn[data-active="true"],
.mk-time-filters button.active,
.mk-time-filters button[aria-pressed="true"] {
  background-color: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
}

/* ---------------------------------------------------------------------
   S4-6: Section spacing within sidebar (space-y-6 = 1.5rem)
   --------------------------------------------------------------------- */
.mk-catalog__sidebar > * + *,
.mk-catalog__sidebar > .wp-block-group > * + *,
.mk-catalog-sidebar > * + * {
  margin-top: 1.5rem !important; /* space-y-6 */
}

/* Filter card internal spacing */
.mk-time-filters > * + *,
.mk-quick-filters > * + *,
.mk-price-filter > * + * {
  margin-top: 0.5rem !important; /* space-y-2 */
}

/* Category list spacing */
.mk-categories-panel ul,
.mk-filter-categories ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mk-categories-panel li + li,
.mk-filter-categories li + li {
  margin-top: 0.75rem !important; /* space-y-3 */
}

/* Category heading margin */
.mk-categories-panel h3,
.mk-filter-categories h3,
.mk-time-filters h3,
.mk-quick-filters h3 {
  font-family: var(--wp--preset--font-family--playfair-display), 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important; /* mb-3 for time/quick, mb-6 for categories */
}

.mk-categories-panel h3,
.mk-filter-categories h3 {
  font-size: 1.125rem !important; /* text-lg */
  margin-bottom: 1.5rem !important; /* mb-6 */
}

.mk-time-filters h3,
.mk-quick-filters h3 {
  font-size: 1rem !important; /* default */
  margin-bottom: 0.75rem !important; /* mb-3 */
}

/* ==========================================================================

/* ---------------------------------------------------------------------
   S4-10/S4-11: Switch toggle dimensions

   React (ui/switch.tsx):
   Track: h-5 w-9 = 1.25rem x 2.25rem (20px x 36px)
   Track radius: rounded-full = 9999px
   Thumb: h-4 w-4 = 1rem (16px)
   Thumb radius: rounded-full = 9999px
   Unchecked: bg-input = hsl(36 20% 82%)
   Checked: bg-primary = hsl(160 30% 28%)
   Thumb: bg-background = cream
   --------------------------------------------------------------------- */
.mk-quick-filters .mk-toggle,
.mk-catalog__sidebar .mk-toggle,
.mk-catalog__sidebar input[type="checkbox"][role="switch"],
.mk-catalog__sidebar .switch,
[class*="catalog-sidebar"] .mk-toggle,
[class*="catalog-sidebar"] input[role="switch"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 2.25rem !important; /* w-9 = 36px */
  height: 1.25rem !important; /* h-5 = 20px */
  border-radius: 9999px !important; /* rounded-full */
  background: hsl(36 20% 82%) !important; /* bg-input unchecked */
  border: 2px solid transparent !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background-color 150ms ease, border-color 150ms ease !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Switch checked state */
.mk-quick-filters .mk-toggle:checked,
.mk-catalog__sidebar .mk-toggle:checked,
.mk-catalog__sidebar input[type="checkbox"][role="switch"]:checked,
.mk-catalog__sidebar .switch:checked,
[class*="catalog-sidebar"] .mk-toggle:checked,
[class*="catalog-sidebar"] input[role="switch"]:checked {
  background: hsl(160 30% 28%) !important; /* bg-primary checked */
}

/* Switch thumb (pseudo-element) */
.mk-quick-filters .mk-toggle::before,
.mk-catalog__sidebar .mk-toggle::before,
.mk-catalog__sidebar input[type="checkbox"][role="switch"]::before,
.mk-catalog__sidebar .switch::before,
[class*="catalog-sidebar"] .mk-toggle::before,
[class*="catalog-sidebar"] input[role="switch"]::before {
  content: "" !important;
  position: absolute !important;
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  border-radius: 9999px !important; /* rounded-full */
  background: hsl(36 33% 94%) !important; /* bg-background = cream */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  top: 50% !important;
  left: 0.125rem !important; /* 2px inset */
  transform: translateY(-50%) !important;
  transition: transform 150ms ease !important;
}

/* Switch thumb checked position */
.mk-quick-filters .mk-toggle:checked::before,
.mk-catalog__sidebar .mk-toggle:checked::before,
.mk-catalog__sidebar input[type="checkbox"][role="switch"]:checked::before,
.mk-catalog__sidebar .switch:checked::before,
[class*="catalog-sidebar"] .mk-toggle:checked::before,
[class*="catalog-sidebar"] input[role="switch"]:checked::before {
  transform: translateY(-50%) translateX(1rem) !important; /* data-[state=checked]:translate-x-4 = 1rem */
}

/* Switch focus state */
.mk-quick-filters .mk-toggle:focus-visible,
.mk-catalog__sidebar .mk-toggle:focus-visible,
.mk-catalog__sidebar input[type="checkbox"][role="switch"]:focus-visible,
[class*="catalog-sidebar"] .mk-toggle:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(36 33% 94%), /* ring-offset-background */
    0 0 0 4px hsl(36 20% 82%) !important; /* ring */
}

/* Toggle row layout */
.mk-quick-filters .mk-toggle-row,
.mk-catalog__sidebar .mk-toggle-row,
[class*="catalog-sidebar"] .mk-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
}

/* Toggle label */
.mk-quick-filters .mk-toggle-label,
.mk-quick-filters label,
.mk-catalog__sidebar .mk-toggle-label,
[class*="catalog-sidebar"] .mk-toggle-label {
  font-size: 0.875rem !important; /* text-sm */
  cursor: pointer !important;
}

/* ---------------------------------------------------------------------
   S4-12: Clear filters button

   React: Button variant="outline" className="w-full"
   Height: h-10 = 2.5rem (40px)
   Border-radius: rounded-md = 2px (custom config)
   Border: border-input = hsl(36 20% 82%)
   Icon: X w-4 h-4 mr-2 = 16px with 8px margin
   --------------------------------------------------------------------- */
.mk-clear-filters,
.mk-catalog__sidebar .mk-clear-filters-btn,
.mk-catalog__sidebar .wp-block-button--outline,
[class*="catalog-sidebar"] .mk-clear-filters,
[class*="catalog-sidebar"] .clear-filters-btn {
  width: 100% !important;
  height: 2.5rem !important; /* h-10 = 40px */
  min-height: 2.5rem !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px in custom config */
  border: 1px solid hsl(36 20% 82%) !important; /* border-input */
  background: transparent !important;
  color: hsl(160 30% 18%) !important; /* text-foreground */
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease !important;
}

.mk-clear-filters:hover,
.mk-catalog__sidebar .mk-clear-filters-btn:hover,
[class*="catalog-sidebar"] .mk-clear-filters:hover,
[class*="catalog-sidebar"] .clear-filters-btn:hover {
  background: hsl(36 20% 90%) !important; /* hover:bg-accent */
  border-color: hsl(160 30% 28%) !important; /* hover:border-primary */
  color: hsl(160 30% 28%) !important; /* hover:text-primary */
}

/* Clear filters icon */
.mk-clear-filters svg,
.mk-catalog__sidebar .mk-clear-filters-btn svg,
[class*="catalog-sidebar"] .mk-clear-filters svg,
[class*="catalog-sidebar"] .clear-filters-btn svg {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  margin-right: 0.5rem !important; /* mr-2 */
  flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------------
   S4-13: Help section (Quick Info)

   React: bg-secondary/30 rounded-sm p-6
   Background: hsl(36 25% 88% / 0.3) = 30% opacity secondary
   Border-radius: rounded-sm = 0px (custom config)
   Padding: p-6 = 1.5rem (24px)
   H3: font-display text-sm font-semibold mb-3 text-foreground
   List: space-y-2 text-xs text-muted-foreground
   --------------------------------------------------------------------- */
.mk-sidebar-help,
.mk-catalog__sidebar .mk-quick-info,
.mk-catalog__sidebar .mk-help-section,
.mk-catalog__sidebar .help-section,
.mk-catalog-sidebar .mk-help,
[class*="catalog-sidebar"] .mk-help,
[class*="catalog-sidebar"] .help-section {
  border-radius: 0 !important; /* rounded-sm = 0px */
  background: hsl(36 25% 88% / 0.3) !important; /* bg-secondary/30 */
  padding: 1.5rem !important; /* p-6 */
}

.mk-sidebar-help h3,
.mk-catalog__sidebar .mk-quick-info h3,
.mk-catalog__sidebar .mk-help-section h3,
[class*="catalog-sidebar"] .mk-help h3,
[class*="catalog-sidebar"] .help-section h3 {
  font-family: var(--wp--preset--font-family--playfair-display), 'Playfair Display', Georgia, serif !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 0.75rem !important; /* mb-3 */
  color: hsl(160 30% 18%) !important; /* text-foreground */
}

.mk-sidebar-help ul,
.mk-catalog__sidebar .mk-quick-info ul,
.mk-catalog__sidebar .mk-help-section ul,
[class*="catalog-sidebar"] .mk-help ul,
[class*="catalog-sidebar"] .help-section ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mk-sidebar-help li,
.mk-catalog__sidebar .mk-quick-info li,
.mk-catalog__sidebar .mk-help-section li,
[class*="catalog-sidebar"] .mk-help li,
[class*="catalog-sidebar"] .help-section li {
  font-size: 0.75rem !important; /* text-xs */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
}

.mk-sidebar-help li + li,
.mk-catalog__sidebar .mk-quick-info li + li,
.mk-catalog__sidebar .mk-help-section li + li,
[class*="catalog-sidebar"] .mk-help li + li,
[class*="catalog-sidebar"] .help-section li + li {
  margin-top: 0.5rem !important; /* space-y-2 */
}

/* ---------------------------------------------------------------------
   CRITICAL REINFORCEMENT: Additional sidebar visibility overrides

   These target any possible WP or WooCommerce hiding behavior:
   - Hidden by default display state
   - Hidden by JS scripts
   - Hidden by WooCommerce filter plugins
   - Hidden by transform/translate
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Maximum specificity override - sidebar MUST be visible */
  html body.woocommerce .mk-catalog__sidebar,
  html body.archive .mk-catalog__sidebar,
  html body .wp-block-column.mk-catalog__sidebar,
  html body.post-type-archive-product .mk-catalog__sidebar,
  html body[class*="archive"] .mk-catalog__sidebar,
  html body[class*="woocommerce"] .mk-catalog__sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: auto !important;
    min-width: 280px !important;
    max-width: 320px !important;
    flex: 0 0 280px !important;
    position: sticky !important;
    top: 6rem !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  /* Ensure sidebar children are also visible */
  html body .mk-catalog__sidebar > *,
  html body .mk-catalog__sidebar .wp-block-group,
  html body .mk-catalog__sidebar .mk-catalog__filters {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Force parent columns to display flex, not hide children */
  html body .wp-block-columns:has(.mk-catalog__sidebar) {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  /* Admin bar offset */
  html body.admin-bar .mk-catalog__sidebar,
  html body.admin-bar .wp-block-column.mk-catalog__sidebar {
    top: calc(6rem + 32px) !important;
  }
}

/* Mobile: Sidebar stacks ABOVE content */
@media (max-width: 1279px) {
  .mk-catalog__sidebar,
  .wp-block-column.mk-catalog__sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 100% !important;
    order: -1 !important; /* Sidebar appears BEFORE main content on mobile */
    position: relative !important;
    margin-bottom: 1.5rem !important;
  }

  .wp-block-columns:has(.mk-catalog__sidebar) {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
}

/* ==========================================================================
   END SECTION 303: KATALOGAS SIDEBAR V4 FIXES - CRITICAL
   ========================================================================== */

/* ==========================================================================
   SECTION 300: HOMEPAGE HERO V4 FIXES (2026-03-26)
   V4 Fix Agent 1 Implementation
   Reference: docs/PARITY-AGENT-LOGS/V4-AGENT1-HOMEPAGE-HERO.md

   Issues Fixed:
   - H1-2 (HIGH): Content vertical alignment - was at TOP, should be CENTERED
   - H1-8 (HIGH): Button padding missing - should be 1.5rem 2rem (py-6 px-8)
   - H1-1 (MEDIUM): Height breakpoint - was 768px, should be 1024px for 90vh
   - H1-9 (MEDIUM): Button height missing - should be 3.5rem (56px)
   ========================================================================== */

/* ------------------------------------------------------------------
   H1-2 (HIGH): Content vertical alignment - CRITICAL FIX
   React: flex items-center -> vertically CENTERED
   WP was: align-items: start -> at TOP
   ------------------------------------------------------------------ */
.mk-hero {
  align-items: center !important;
}

.mk-hero .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
}

/* ------------------------------------------------------------------
   H1-1 (MEDIUM): Breakpoint fix - 90vh at 1024px, not 768px
   React: h-[80vh] default, lg:h-[90vh] where lg = 1024px
   WP was: 90vh at 768px (md breakpoint)
   ------------------------------------------------------------------ */
.mk-hero {
  min-height: 80vh !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .mk-hero {
    min-height: 80vh !important; /* Keep 80vh between md and lg */
  }
}

@media (min-width: 1024px) {
  .mk-hero {
    min-height: 90vh !important; /* 90vh only at lg (1024px+) */
  }
}

/* ------------------------------------------------------------------
   H1-8 (HIGH): Button padding - CRITICAL FIX
   React: px-8 py-6 = padding: 1.5rem 2rem (24px 32px)
   WP was: No explicit padding on hero buttons

   H1-9 (MEDIUM): Button height
   React: Implicit ~3.5rem (56px) from py-6 + text
   WP was: No explicit height
   ------------------------------------------------------------------ */
.mk-hero__actions .wp-block-button__link,
.mk-hero .wp-block-buttons .wp-block-button__link {
  padding: 1.5rem 2rem !important; /* py-6 px-8 */
  min-height: 3.5rem !important; /* 56px implicit from padding + text */
  font-size: 1.125rem !important; /* text-lg = 18px */
}

/* ==========================================================================
   END SECTION 300: HOMEPAGE HERO V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 309: PARDAVIMAS PAGE V4 FIXES (2026-03-26)
   ==========================================================================

   V4 Agent 10: Pardavimas Page Implementation
   Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT10-PARDAVIMAS.md

   CRITICAL FIX:
   - P10-7: File upload dropzone - styled dashed border, hover state

   HIGH PRIORITY FIXES:
   - P10-1: Step cards border removal (reinforced)
   - P10-2: Step cards radius 0 (reinforced)
   - P10-3: Step icons 40px (w-10 h-10) - DIFFERENT from badge which is 32px
   - P10-5/P10-6: Form container NO border, radius 0

   MEDIUM PRIORITY:
   - P10-8: Commission text 80% opacity (reinforced)
   - P10-10: Contact alternative section radius 0
   - P10-14: Intro paragraph line-height 1.625

   ========================================================================== */

/* ---------------------------------------------------------------------
   P10-1, P10-2: Step cards - NO border, radius 0
   React: bg-card rounded-sm shadow-card p-6 relative (NO border class)
   rounded-sm = calc(var(--radius) - 4px) = calc(0.25rem - 4px) = 0
   --------------------------------------------------------------------- */
body.page-id-17 .mk-step-card,
body.page-id-17 .step-card,
body.page-id-17 .mk-sell-step-card,
.page-pardavimas .mk-step-card,
.pardavimas .step-card {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: 0 !important;
  background: hsl(40 30% 96%) !important; /* bg-card */
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important; /* shadow-card */
  padding: 1.5rem !important; /* p-6 */
  position: relative !important;
}

/* ---------------------------------------------------------------------
   P10-3: Step icons 40px (w-10 h-10)
   React: <step.icon className="w-10 h-10 text-primary mb-4" />
   NOTE: This is the ICON, not the number badge (badge is 32px w-8 h-8)
   --------------------------------------------------------------------- */
body.page-id-17 .mk-step-icon svg,
body.page-id-17 .mk-sell-step-icon svg,
body.page-id-17 .step-card svg,
body.page-id-17 .mk-step-card svg:not(.mk-step-badge svg),
.page-pardavimas .mk-step-icon svg,
.pardavimas .step-card svg {
  width: 2.5rem !important; /* 40px */
  height: 2.5rem !important; /* 40px */
  color: hsl(160 30% 28%) !important; /* text-primary */
  margin-bottom: 1rem !important; /* mb-4 */
}

/* ---------------------------------------------------------------------
   P10-5, P10-6: Form container - NO border, radius 0
   React: bg-card rounded-sm shadow-elegant p-8 mb-12 (NO border class)
   --------------------------------------------------------------------- */
body.page-id-17 .mk-submission-form,
body.page-id-17 .mk-form-container,
body.page-id-17 .wpcf7,
body.page-id-17 .wp-block-group:has(.wpcf7),
.page-pardavimas .wpcf7,
.pardavimas .submission-form {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: 0 !important;
}

/* Form container inner styling */
body.page-id-17 .wpcf7-form,
body.page-id-17 .wpcf7 form {
  border: none !important;
  border-radius: 0 !important;
  background: hsl(40 30% 96%) !important; /* bg-card */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important; /* shadow-elegant */
  padding: 2rem !important; /* p-8 */
}

/* ---------------------------------------------------------------------
   P10-7: CRITICAL - File upload dropzone styling
   React: border-2 border-dashed border-border rounded-sm p-8 text-center
          hover:border-primary/50 transition-colors
   WordPress CF7 file input needs visual transformation
   --------------------------------------------------------------------- */
body.page-id-17 .wpcf7-file,
body.page-id-17 input[type="file"].wpcf7-form-control,
body.page-id-17 .mk-file-upload input[type="file"],
.page-pardavimas input[type="file"] {
  display: block !important;
  width: 100% !important;
  padding: 2rem !important; /* p-8 */
  border: 2px dashed hsl(36 20% 82%) !important; /* border-2 border-dashed border-border */
  border-radius: 0 !important; /* rounded-sm = 0 */
  background: transparent !important;
  cursor: pointer !important;
  transition: border-color 150ms ease, background-color 150ms ease !important;
  text-align: center !important;
}

body.page-id-17 .wpcf7-file:hover,
body.page-id-17 input[type="file"].wpcf7-form-control:hover,
body.page-id-17 .mk-file-upload input[type="file"]:hover,
.page-pardavimas input[type="file"]:hover {
  border-color: hsl(160 30% 28% / 0.5) !important; /* hover:border-primary/50 */
  background: hsl(40 30% 96%) !important; /* subtle bg on hover */
}

/* File upload button styling */
body.page-id-17 input[type="file"]::file-selector-button,
.page-pardavimas input[type="file"]::file-selector-button {
  border: none !important;
  background: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.25rem !important;
  cursor: pointer !important;
  margin-right: 1rem !important;
  transition: background-color 150ms ease !important;
}

body.page-id-17 input[type="file"]::file-selector-button:hover,
.page-pardavimas input[type="file"]::file-selector-button:hover {
  background: hsl(160 30% 23%) !important; /* darker primary on hover */
}

/* ---------------------------------------------------------------------
   P10-8: Commission text 80% opacity (reinforced)
   React: text-primary-foreground/80 on both p and ul elements
   --------------------------------------------------------------------- */
body.page-id-17 .mk-commission-section p,
body.page-id-17 .mk-commission-section li,
body.page-id-17 .mk-commission-section ul,
body.page-id-17 .has-primary-background-color p,
body.page-id-17 .has-primary-background-color li,
body.page-id-17 .has-primary-background-color ul,
body.page-id-17 .has-forest-green-background-color p,
body.page-id-17 .has-forest-green-background-color li,
body.page-id-17 .has-forest-green-background-color ul,
body.page-id-17 .mk-section--dark p,
body.page-id-17 .mk-section--dark li,
body.page-id-17 .mk-section--dark ul,
.page-pardavimas .mk-commission-text,
.pardavimas .commission-text {
  color: hsl(40 30% 96% / 0.8) !important; /* 80% opacity */
}

/* Commission headings stay 100% */
body.page-id-17 .mk-commission-section h3,
body.page-id-17 .has-primary-background-color h3,
body.page-id-17 .has-forest-green-background-color h3,
body.page-id-17 .mk-section--dark h3 {
  color: hsl(40 30% 96%) !important; /* 100% opacity for headings */
}

/* ---------------------------------------------------------------------
   P10-10: Contact alternative section - radius 0
   React: bg-secondary/30 rounded-sm p-8 (NO margin-top)
   --------------------------------------------------------------------- */
body.page-id-17 .mk-contact-alternative,
body.page-id-17 .wp-block-group[style*="hsl(36 25% 88%"],
body.page-id-17 .wp-block-group:has(.mk-contact-alt),
.page-pardavimas .contact-alternative {
  border-radius: 0 !important;
  margin-top: 0 !important;
  background: hsl(36 25% 88% / 0.3) !important; /* bg-secondary/30 */
  padding: 2rem !important; /* p-8 */
}

/* ---------------------------------------------------------------------
   P10-14: Intro paragraph line-height 1.625 (leading-relaxed)
   React: leading-relaxed text-muted-foreground mb-12
   --------------------------------------------------------------------- */
body.page-id-17 .mk-page-intro,
body.page-id-17 .entry-content > p:first-of-type,
body.page-id-17 h1 + p,
.page-pardavimas .page-intro {
  line-height: 1.625 !important; /* leading-relaxed */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  margin-bottom: 3rem !important; /* mb-12 */
}

/* ==========================================================================
   END SECTION 309: PARDAVIMAS PAGE V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S305: SINGLE PRODUCT V4 FIXES - CRITICAL (2026-03-26)
   ==========================================================================

   V4 Agent 6: Single Product Page Implementation
   Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT-6-SINGLE-PRODUCT.md

   CRITICAL ISSUES FIXED:
   - SP6-1 to SP6-4: ALL containers must have border-radius: 0
     React uses custom Tailwind config: rounded-sm = 0px (NOT standard 2px)
   - SP6-5: Trust badges background 30% opacity
   - SP6-6: Timer font sizes responsive (1.875rem mobile, 2.25rem desktop)

   Containers requiring radius 0:
   - Image container
   - Timer card
   - Info card (bg-secondary/30)
   - Pricing card (bg-card)
   - Bid form card (bg-primary/5)
   - Trust badges
   - Post-auction banner

   ========================================================================== */

/* ---------------------------------------------------------------------
   CRITICAL: All single product containers border-radius: 0
   React: rounded-sm = calc(var(--radius) - 4px) = 0px in custom config
   This is the MOST IMPORTANT fix for single product visual parity
   --------------------------------------------------------------------- */

/* Primary product page containers */
.single-product .mk-product-image,
.single-product .mk-timer-card,
.single-product .mk-info-card,
.single-product .mk-pricing-card,
.single-product .mk-bid-form,
.single-product .mk-trust-badges,
.single-product .mk-post-auction-banner {
  border-radius: 0 !important;
}

/* WooCommerce gallery and timer elements */
.woocommerce-product-gallery,
.auction-timer,
.auction-time-left,
.woocommerce div.product .woocommerce-product-gallery {
  border-radius: 0 !important;
}

/* Summary section group blocks */
.entry-summary > .wp-block-group,
.single-product .summary > .wp-block-group,
.single-product .entry-summary > div {
  border-radius: 0 !important;
}

/* Additional WooCommerce Simple Auctions selectors */
.woocommerce div.product .auction-timer,
.woocommerce div.product .auction-price,
.woocommerce div.product .auction-bid,
.woocommerce-auction-timer,
.single-product .product .mk-auction-timer,
.single-product .product .mk-timer-full {
  border-radius: 0 !important;
}

/* Product meta cards and info sections */
.single-product .product-meta-card,
.single-product .product-info-card,
.single-product .product-pricing,
.single-product .product-details {
  border-radius: 0 !important;
}

/* Bid form and authentication prompts */
.single-product .bid-form,
.single-product .mk-auth-prompt,
.single-product .mk-upcoming-notice,
.single-product .mk-post-auction-buy {
  border-radius: 0 !important;
}

/* Individual trust badge items */
.single-product .mk-trust-badge,
.single-product .mk-trust-badges > div,
.single-product .trust-badges > div,
.single-product .trust-badge {
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------
   SP6-5: Trust badges 30% opacity background
   React: bg-muted/30 = hsl(36 20% 90% / 0.3)
   --------------------------------------------------------------------- */
.mk-trust-badges,
.single-product .trust-badges,
.single-product .mk-trust-badges {
  background-color: transparent !important; /* Container itself is transparent */
}

.mk-trust-badges > div,
.single-product .mk-trust-badge,
.single-product .mk-trust-badges > div,
.single-product .trust-badges > div,
.single-product .trust-badge {
  background-color: hsl(36 20% 90% / 0.3) !important; /* bg-muted/30 */
}

/* ---------------------------------------------------------------------
   SP6-6: Timer font sizes responsive
   React: text-3xl (1.875rem/30px mobile), md:text-4xl (2.25rem/36px desktop)
   Font family: Playfair Display (font-display)
   --------------------------------------------------------------------- */
.auction-timer .timer-value,
.mk-timer-card .timer-digit,
.mk-timer-full .mk-timer-value,
.single-product .auction-time-left .timer-digit,
.single-product .mk-auction-timer .timer-value,
.woocommerce-auction-timer .timer-value {
  font-size: 1.875rem !important; /* 30px mobile - text-3xl */
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-weight: 700 !important; /* font-bold */
}

@media (min-width: 768px) {
  .auction-timer .timer-value,
  .mk-timer-card .timer-digit,
  .mk-timer-full .mk-timer-value,
  .single-product .auction-time-left .timer-digit,
  .single-product .mk-auction-timer .timer-value,
  .woocommerce-auction-timer .timer-value {
    font-size: 2.25rem !important; /* 36px desktop - md:text-4xl */
  }
}

/* Timer labels */
.auction-timer .timer-label,
.mk-timer-card .timer-label,
.single-product .auction-time-left .timer-label {
  font-size: 0.75rem !important; /* text-xs = 12px */
  margin-top: 0.25rem !important; /* mt-1 */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
}

/* ==========================================================================
   END SECTION S305: SINGLE PRODUCT V4 FIXES - CRITICAL
   ========================================================================== */

/* ==========================================================================
   SECTION 318: GLOBAL SPACING V4 FIXES (2026-03-26)
   ==========================================================================

   V4 Agent 20: Global Spacing & Layout Implementation
   Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT20-GLOBAL-SPACING.md

   FIXES IMPLEMENTED:
   - GSL-1: Container max-width 1400px, padding 1rem mobile / 2rem desktop
   - GSL-4: Sidebar sticky top 6rem (96px) - reinforced
   - GSL-8: Grid responsive breakpoints - EXACT Tailwind values (640/1024/1280px)
   - GSL-9: PostAuction page uses py-8 (2rem) not py-12 (3rem)
   - GSL-7: Max-width utilities for inner content containers (3xl/4xl/5xl/6xl)
   - GSL-2: Container padding responsive (1rem base, 2rem at md+)

   VERIFIED OK (already implemented):
   - S128: Spacing utilities (py-8, py-12, etc.)
   - Lines 12506-12567: Grid breakpoints using 640/1024/1280px
   - Lines 5212-5214, 10700, 21639: Sidebar sticky top: 6rem
   ========================================================================== */

/* ---------------------------------------------------------------------
   GSL-1: Container max-width and padding
   React: container mx-auto px-4 (1400px max, 1rem horizontal padding)
   --------------------------------------------------------------------- */
.container,
.wp-block-group.alignwide,
.mk-container {
  max-width: 1400px !important; /* 2xl: 1400px from tailwind.config.ts */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important; /* Mobile: px-4 = 16px */
  padding-right: 1rem !important;
}

/* Desktop: 2rem padding (Tailwind container config: padding: "2rem") */
@media (min-width: 768px) {
  .container,
  .wp-block-group.alignwide,
  .mk-container {
    padding-left: 2rem !important; /* md+: 32px */
    padding-right: 2rem !important;
  }
}

/* Ensure body doesn't add extra padding that conflicts with container */
body.page .entry-content,
body.single .entry-content,
body.archive .site-main {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------------------------------------------------------------------
   GSL-3: Standard page vertical padding py-12 (3rem)
   Most pages use py-12, PostAuction uses py-8 (handled separately)
   --------------------------------------------------------------------- */
.page-content,
main > .wp-block-group:first-child,
.mk-page-content {
  padding-top: 3rem !important; /* py-12 = 48px */
  padding-bottom: 3rem !important;
}

/* ---------------------------------------------------------------------
   GSL-9: PostAuction page uses py-8 (2rem) not py-12
   React: <div className="container mx-auto px-4 py-8">
   --------------------------------------------------------------------- */
.page-id-93 .page-content,
.page-id-93 main > .wp-block-group:first-child,
.page-id-93 .mk-page-content,
.page-poaukcionine .page-content,
.page-poaukcionine main > .wp-block-group:first-child,
.mk-poaukcionine-content,
body[class*="poaukcion"] .page-content {
  padding-top: 2rem !important; /* py-8 = 32px */
  padding-bottom: 2rem !important;
}

/* ---------------------------------------------------------------------
   GSL-4: Sidebar sticky top - reinforced with high specificity
   React: sticky top-24 (6rem = 96px = header height + buffer)
   --------------------------------------------------------------------- */
.mk-catalog__sidebar,
.wc-block-product-categories,
.mk-sidebar-sticky,
aside.wp-block-column[class*="sidebar"],
.mk-filter-sidebar {
  position: sticky !important;
  top: 6rem !important; /* top-24 = 96px */
}

/* When admin bar is present, add its height */
.admin-bar .mk-catalog__sidebar,
.admin-bar .wc-block-product-categories,
.admin-bar .mk-sidebar-sticky,
.admin-bar aside.wp-block-column[class*="sidebar"],
.admin-bar .mk-filter-sidebar {
  top: calc(6rem + 32px) !important;
}

/* ---------------------------------------------------------------------
   GSL-8: Grid responsive breakpoints - REINFORCED
   Ensuring exact Tailwind breakpoints: 640px, 1024px, 1280px
   These are already in S128 but reinforcing for clarity
   --------------------------------------------------------------------- */

/* Product grids - base (mobile first: 1 column) */
.mk-product-grid,
.wc-block-product-template {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
}

/* sm: 640px - 2 columns */
@media (min-width: 640px) {
  .mk-product-grid,
  .wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* lg: 1024px - 3 columns (gallery) or 2 columns (catalog with sidebar) */
@media (min-width: 1024px) {
  .mk-product-grid,
  .wc-block-product-template {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Sidebar visible at lg */
  .mk-catalog__sidebar {
    display: block !important;
  }
}

/* Catalog with sidebar stays 2 columns at lg (handled in S208) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mk-catalog__main .mk-product-grid,
  .mk-catalog__main .wc-block-product-template,
  .has-sidebar .mk-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* xl: 1280px - 4 columns (gallery) or 3 columns (catalog with sidebar) */
@media (min-width: 1280px) {
  .mk-gallery-grid .mk-product-grid,
  .mk-gallery-grid .wc-block-product-template,
  .page-id-92 .wc-block-product-template {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .mk-catalog__main .mk-product-grid,
  .mk-catalog__main .wc-block-product-template,
  .has-sidebar .mk-product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ---------------------------------------------------------------------
   GSL-7: Max-width utilities for inner content containers
   Different pages use different max-widths for content
   --------------------------------------------------------------------- */
.max-w-4xl, .mk-max-w-4xl { max-width: 56rem !important; }  /* 896px - Pirkimas, Paskyra, Plenerai cards */
.max-w-5xl, .mk-max-w-5xl { max-width: 64rem !important; }  /* 1024px - Kontaktai, Pardavimas */
.max-w-6xl, .mk-max-w-6xl { max-width: 72rem !important; }  /* 1152px - Dovanu Kuponas */
.max-w-3xl, .mk-max-w-3xl { max-width: 48rem !important; }  /* 768px - narrower content */

/* Page-specific max-width applications */
.page-id-15 .mk-inner-content,  /* Kontaktai */
.page-id-17 .mk-inner-content { /* Pardavimas */
  max-width: 64rem !important; /* max-w-5xl */
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-id-16 .mk-inner-content,  /* Pirkimas */
.page-id-25 .mk-inner-content { /* Paskyra / My Account */
  max-width: 56rem !important; /* max-w-4xl */
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-id-19 .mk-inner-content { /* Dovanu Kuponas */
  max-width: 72rem !important; /* max-w-6xl */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------------------------------------------------------------------
   GSL-6: Space-y utilities (vertical spacing between children)
   Supplement to S128
   --------------------------------------------------------------------- */
.mk-space-y-1 > * + * { margin-top: 0.25rem !important; }   /* 4px */
.mk-space-y-2 > * + * { margin-top: 0.5rem !important; }    /* 8px */
.mk-space-y-3 > * + * { margin-top: 0.75rem !important; }   /* 12px */
.mk-space-y-4 > * + * { margin-top: 1rem !important; }      /* 16px */
.mk-space-y-6 > * + * { margin-top: 1.5rem !important; }    /* 24px */
.mk-space-y-8 > * + * { margin-top: 2rem !important; }      /* 32px */

/* ==========================================================================
   END SECTION 318: GLOBAL SPACING V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 316: BUTTONS GLOBAL V4 FIXES (2026-03-26)
   Agent: V4 Fix Agent 17
   Reference: src/components/ui/button.tsx

   Purpose: Ensure ALL button contexts (WordPress blocks, WooCommerce classic,
   WooCommerce blocks) match React button component exactly.

   React Button Sizes:
   - default: h-10 (40px), px-6 py-2 (24px 8px)
   - sm: h-9 (36px), px-4 (16px)
   - lg: h-12 (48px), px-8 (32px), text-base (16px)
   - xl: h-14 (56px), px-10 (40px), text-base (16px)
   - icon: h-10 w-10 (40px x 40px)

   React Button Variants:
   - catalog: bg-primary, shadow-elegant, hover:shadow-hover, tracking-wide
   - gold: bg-gold, color-forest-dark, shadow-elegant, hover:bg-gold-light
   - elegant: border border-foreground/20, bg-transparent, font-normal
   ========================================================================== */

/* ---------------------------------------------------------------------
   B316-1: WooCommerce Classic Buttons — Explicit Height 40px
   Classic WooCommerce uses padding-based height, need explicit h-10
   --------------------------------------------------------------------- */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce .coupon .button,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce .woocommerce-message .button,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  height: 2.5rem !important; /* h-10 = 40px */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 1.5rem !important; /* px-6 = 24px */
  padding-right: 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.25rem !important; /* rounded = 4px, NOT var(--radius) */
  line-height: 1 !important;
}

/* ---------------------------------------------------------------------
   B316-2: WooCommerce Block Buttons — Global Styling
   .wc-block-components-button used in cart, checkout, notices
   --------------------------------------------------------------------- */
.wc-block-components-button {
  height: 2.5rem !important; /* h-10 = 40px */
  padding: 0 1.5rem !important; /* px-6 = 24px */
  border-radius: 0.25rem !important; /* rounded = 4px */
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all 300ms ease !important;
}

/* WooCommerce Block Button Variants */
.wc-block-components-button--contained {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: none !important;
}

.wc-block-components-button--contained:hover {
  background-color: hsl(var(--primary) / 0.9) !important;
}

.wc-block-components-button--outlined {
  background-color: transparent !important;
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

.wc-block-components-button--outlined:hover {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* ---------------------------------------------------------------------
   B316-3: WooCommerce Add to Cart Buttons — Match Gold Variant
   Product grid and single product add-to-cart should use gold styling
   --------------------------------------------------------------------- */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple,
.single-product .single_add_to_cart_button,
.single-product form.cart .button {
  height: 2.5rem !important;
  padding: 0 1.5rem !important;
  border-radius: 0.25rem !important;
  background-color: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-elegant) !important;
}

.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce ul.products li.product .button.product_type_simple:hover,
.single-product .single_add_to_cart_button:hover,
.single-product form.cart .button:hover {
  background-color: hsl(var(--gold-light)) !important;
}

/* ---------------------------------------------------------------------
   B316-4: Button Size Overrides — Ensure Specificity
   Apply height to size variants with high specificity
   --------------------------------------------------------------------- */

/* Small buttons — h-9 = 36px */
.mk-btn.mk-btn-sm,
button.mk-btn-sm,
a.mk-btn-sm,
.wp-block-button.has-small-font-size .wp-block-button__link,
.woocommerce button.button.mk-btn-sm {
  height: 2.25rem !important; /* 36px */
  padding-left: 1rem !important; /* px-4 = 16px */
  padding-right: 1rem !important;
}

/* Large buttons — h-12 = 48px */
.mk-btn.mk-btn-lg,
button.mk-btn-lg,
a.mk-btn-lg,
.wp-block-button.has-large-font-size .wp-block-button__link,
.woocommerce button.button.mk-btn-lg {
  height: 3rem !important; /* 48px */
  padding-left: 2rem !important; /* px-8 = 32px */
  padding-right: 2rem !important;
  font-size: 1rem !important; /* text-base = 16px */
}

/* XL buttons — h-14 = 56px */
.mk-btn.mk-btn-xl,
button.mk-btn-xl,
a.mk-btn-xl,
.woocommerce button.button.mk-btn-xl {
  height: 3.5rem !important; /* 56px */
  padding-left: 2.5rem !important; /* px-10 = 40px */
  padding-right: 2.5rem !important;
  font-size: 1rem !important; /* text-base = 16px */
}

/* Icon buttons — h-10 w-10 = 40px x 40px */
.mk-btn.mk-btn-icon,
button.mk-btn-icon,
a.mk-btn-icon {
  height: 2.5rem !important;
  width: 2.5rem !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------------------
   B316-5: Variant Specificity Overrides
   Ensure catalog/gold/elegant variants win over generic styles
   --------------------------------------------------------------------- */

/* Catalog variant — highest specificity */
button.mk-btn-catalog,
a.mk-btn-catalog,
.wp-block-button.is-style-catalog .wp-block-button__link,
.woocommerce button.button.mk-btn-catalog,
.woocommerce a.button.mk-btn-catalog {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  border-radius: 0.25rem !important;
  box-shadow: var(--shadow-elegant) !important;
  border: none !important;
}

button.mk-btn-catalog:hover,
a.mk-btn-catalog:hover,
.wp-block-button.is-style-catalog .wp-block-button__link:hover,
.woocommerce button.button.mk-btn-catalog:hover,
.woocommerce a.button.mk-btn-catalog:hover {
  background-color: hsl(var(--forest-light)) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Gold variant — highest specificity */
button.mk-btn-gold,
a.mk-btn-gold,
.wp-block-button.is-style-gold .wp-block-button__link,
.woocommerce button.button.mk-btn-gold,
.woocommerce a.button.mk-btn-gold,
.woocommerce button.button.alt.mk-btn-gold {
  background-color: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-elegant) !important;
  border-radius: 0.25rem !important;
  border: none !important;
}

button.mk-btn-gold:hover,
a.mk-btn-gold:hover,
.wp-block-button.is-style-gold .wp-block-button__link:hover,
.woocommerce button.button.mk-btn-gold:hover,
.woocommerce a.button.mk-btn-gold:hover,
.woocommerce button.button.alt.mk-btn-gold:hover {
  background-color: hsl(var(--gold-light)) !important;
}

/* Elegant variant — highest specificity */
button.mk-btn-elegant,
a.mk-btn-elegant,
.wp-block-button.is-style-elegant .wp-block-button__link,
.woocommerce button.button.mk-btn-elegant,
.woocommerce a.button.mk-btn-elegant {
  border: 1px solid hsl(var(--foreground) / 0.2) !important;
  color: hsl(var(--foreground)) !important;
  background-color: transparent !important;
  font-weight: 400 !important; /* font-normal, NOT font-medium */
  letter-spacing: 0.025em !important;
  border-radius: 0.25rem !important;
}

button.mk-btn-elegant:hover,
a.mk-btn-elegant:hover,
.wp-block-button.is-style-elegant .wp-block-button__link:hover,
.woocommerce button.button.mk-btn-elegant:hover,
.woocommerce a.button.mk-btn-elegant:hover {
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

/* ---------------------------------------------------------------------
   B316-6: Focus-Visible States — Double Box-Shadow Ring
   React uses ring-offset-2 (background) + ring-2 (ring color)
   --------------------------------------------------------------------- */
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce a.button:focus-visible,
.wc-block-components-button:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;
}

/* Gold buttons use gold ring color */
.woocommerce button.button.alt:focus-visible,
.woocommerce a.button.alt:focus-visible,
button.mk-btn-gold:focus-visible,
a.mk-btn-gold:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--gold)) !important;
}

/* ==========================================================================
   END SECTION 316: BUTTONS GLOBAL V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION 310: PIRKIMAS PAGE V4 FIXES (2026-03-26)
   ==========================================================================

   V4 Agent 11: Pirkimas Page Implementation
   Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT11-PIRKIMAS.md
   React Source: src/pages/HowToBuy.tsx

   CRITICAL FINDINGS:
   - Step layout: flex gap-6 (no card wrapper, just flex row)
   - Step number badge: w-16 h-16 rounded-full bg-primary = 64px circle
   - Feature cards: bg-card rounded-sm shadow-card p-6 text-center
     - rounded-sm = 0px (custom Tailwind config where --radius = 4px)
   - Feature card icons: w-10 h-10 = 40px
   - Feature card headings: font-display font-semibold

   ISSUE IDENTIFIED:
   - Section 160 (FIX-3-8) incorrectly set feature cards to rounded-xl (8px)
   - React uses rounded-sm = 0px, NOT rounded-xl
   ========================================================================== */

/* ---------------------------------------------------------------------
   PIR-1: Step cards should have NO border (React uses plain flex layout)
   React: <div className="flex gap-6"> — no border, no card wrapper
   --------------------------------------------------------------------- */
body.page-id-16 .mk-step-card,
body.page-id-16 .mk-step,
body.page-id-16 .wp-block-group.mk-step,
.page-pirkimas .mk-step-card,
.page-pirkimas .mk-step {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  background: transparent !important; /* No card background - content sits on cream page bg */
}

/* ---------------------------------------------------------------------
   PIR-2: Step number badges — 64px circle with primary bg
   React: <div className="w-16 h-16 rounded-full bg-primary">
   w-16 h-16 = 4rem = 64px (NOT 40px as some sections incorrectly had)
   --------------------------------------------------------------------- */
body.page-id-16 .mk-step__number,
body.page-id-16 .mk-step-number,
body.page-id-16 .mk-step-card__badge,
.page-pirkimas .mk-step__number,
.page-pirkimas .mk-step-number {
  width: 4rem !important; /* 64px = w-16 */
  height: 4rem !important; /* 64px = h-16 */
  min-width: 4rem !important;
  min-height: 4rem !important;
  border-radius: 9999px !important; /* rounded-full */
  background-color: hsl(var(--primary)) !important; /* bg-primary = forest green */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Step number text inside badge */
body.page-id-16 .mk-step__number span,
body.page-id-16 .mk-step-number span,
.page-pirkimas .mk-step__number span {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 700 !important; /* font-bold */
  color: hsl(var(--primary-foreground)) !important; /* cream text */
}

/* ---------------------------------------------------------------------
   PIR-3: Feature cards — CRITICAL FIX: radius = 0 (rounded-sm)
   React: <div className="bg-card rounded-sm shadow-card p-6 text-center">
   rounded-sm = calc(var(--radius) - 4px) = 0px in this project

   OVERRIDE: Section 160 (FIX-3-8) incorrectly set 0.5rem/8px — this MUST be 0
   --------------------------------------------------------------------- */
body.page-id-16 .mk-card,
body.page-id-16 .mk-feature-card,
body.page-id-16 .wp-block-group.mk-card,
body.page-id-16 .wp-block-group.mk-feature-card,
.page-pirkimas .mk-card,
.page-pirkimas .mk-feature-card {
  border-radius: 0 !important; /* rounded-sm = 0px — NOT 0.5rem */
  background-color: hsl(var(--card)) !important; /* bg-card */
  box-shadow: var(--shadow-card) !important; /* shadow-card */
  padding: 1.5rem !important; /* p-6 = 24px */
  text-align: center !important;
  border: none !important; /* No border in React */
}

/* ---------------------------------------------------------------------
   PIR-4: Feature card icons — 40px (w-10 h-10), primary color
   React: <CheckCircle className="w-10 h-10 text-primary mx-auto mb-4" />
   --------------------------------------------------------------------- */
body.page-id-16 .mk-card svg,
body.page-id-16 .mk-feature-card svg,
body.page-id-16 .mk-feature-card__icon svg,
.page-pirkimas .mk-card svg,
.page-pirkimas .mk-feature-card svg {
  width: 2.5rem !important; /* 40px = w-10 */
  height: 2.5rem !important; /* 40px = h-10 */
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  color: hsl(var(--primary)) !important; /* text-primary */
  margin-left: auto !important; /* mx-auto */
  margin-right: auto !important;
  margin-bottom: 1rem !important; /* mb-4 = 16px */
  display: block !important;
}

/* ---------------------------------------------------------------------
   PIR-5: Feature card headings — font-display font-semibold
   React: <h4 className="font-display font-semibold text-foreground mb-2">
   --------------------------------------------------------------------- */
body.page-id-16 .mk-card h4,
body.page-id-16 .mk-feature-card h4,
.page-pirkimas .mk-card h4,
.page-pirkimas .mk-feature-card h4 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1rem !important; /* text-base implicit */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--foreground)) !important; /* text-foreground */
  margin-bottom: 0.5rem !important; /* mb-2 = 8px */
  margin-top: 0 !important;
}

/* ---------------------------------------------------------------------
   PIR-6: Feature card descriptions — text-sm text-muted-foreground
   React: <p className="text-sm text-muted-foreground">
   --------------------------------------------------------------------- */
body.page-id-16 .mk-card p,
body.page-id-16 .mk-feature-card p,
.page-pirkimas .mk-card p,
.page-pirkimas .mk-feature-card p {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------
   PIR-7: Feature cards grid — 3 columns at md, 1 column mobile
   React: <div className="grid md:grid-cols-3 gap-6 mb-12">
   --------------------------------------------------------------------- */
body.page-id-16 .wp-block-columns:has(.mk-card),
body.page-id-16 .mk-feature-cards-grid,
body.page-id-16 .wp-block-columns:has(.mk-feature-card),
.page-pirkimas .mk-feature-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr !important; /* Mobile: 1 column */
  gap: 1.5rem !important; /* gap-6 = 24px */
  margin-bottom: 3rem !important; /* mb-12 = 48px */
}

@media (min-width: 768px) {
  body.page-id-16 .wp-block-columns:has(.mk-card),
  body.page-id-16 .mk-feature-cards-grid,
  body.page-id-16 .wp-block-columns:has(.mk-feature-card),
  .page-pirkimas .mk-feature-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* md: 3 columns */
  }
}

/* ---------------------------------------------------------------------
   PIR-8: CTA button — catalog variant (green), NOT gold
   React: <Button variant="catalog" size="lg">Registruotis dabar</Button>
   --------------------------------------------------------------------- */
body.page-id-16 .mk-btn-gold,
body.page-id-16 .wp-block-button__link.has-gold-background-color,
.page-pirkimas .mk-btn-gold {
  background-color: hsl(var(--primary)) !important; /* Override gold to primary green */
  color: hsl(var(--primary-foreground)) !important;
}

body.page-id-16 .mk-btn-gold:hover,
body.page-id-16 .wp-block-button__link.has-gold-background-color:hover,
.page-pirkimas .mk-btn-gold:hover {
  background-color: hsl(160 30% 35%) !important; /* Slightly lighter green on hover */
}

/* ==========================================================================
   END SECTION 310: PIRKIMAS PAGE V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S300: HOMEPAGE HERO V4 FIXES (2026-03-26)
   React Source: src/components/home/HeroSection.tsx

   Issues Fixed:
   - H1-1: Height breakpoint correction (80vh mobile, 90vh at lg:1024px)
   - H1-2: Vertical centering (items-center on flex container)
   - H1-8: Button padding (py-6 px-8 = 1.5rem 2rem)
   - H1-9: Button min-height (~3.5rem)

   React Hero Structure:
   <section className="relative h-[80vh] lg:h-[90vh] w-full overflow-hidden">
     <div className="relative container mx-auto px-4 h-full flex items-center">
       <div className="max-w-2xl">
         <h1 className="font-display text-4xl md:text-5xl lg:text-6xl ...">
         <div className="flex flex-wrap gap-4 animate-fade-in">
           <Button variant="catalog" size="lg" className="text-lg px-8 py-6">
           <Button variant="gold" size="lg" className="text-lg px-8 py-6">
   ========================================================================== */

/* ---------------------------------------------------------------------
   H1-2: Vertical centering — flex items-center
   React: <div className="... h-full flex items-center">
   The outer .mk-hero must center its content vertically.
   The inner container must also use flex + align-items: center.
   --------------------------------------------------------------------- */
.mk-hero {
  display: flex !important;
  align-items: center !important;
}

.mk-hero .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  height: 100% !important;
  min-height: inherit !important;
}

/* ---------------------------------------------------------------------
   H1-1: Height breakpoint fix — 80vh default, 90vh at lg:1024px
   React: h-[80vh] lg:h-[90vh] where lg = 1024px (NOT 768px!)
   --------------------------------------------------------------------- */
.mk-hero {
  min-height: 80vh !important;
}

/* Between 768px and 1023px, keep 80vh (NOT 90vh like old code had) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mk-hero {
    min-height: 80vh !important;
  }
}

/* At 1024px and above, switch to 90vh */
@media (min-width: 1024px) {
  .mk-hero {
    min-height: 90vh !important;
  }
}

/* ---------------------------------------------------------------------
   H1-8 & H1-9: Button padding and height
   React: <Button variant="catalog/gold" size="lg" className="text-lg px-8 py-6">

   size="lg" base: h-12 px-8 text-base (from button.tsx)
   className overrides: text-lg px-8 py-6

   Final computed values:
   - padding: py-6 = 1.5rem top/bottom, px-8 = 2rem left/right
   - font-size: text-lg = 1.125rem (18px)
   - min-height: ~3.5rem (from padding + text height)
   --------------------------------------------------------------------- */
.mk-hero__actions .wp-block-button__link,
.mk-hero .wp-block-buttons .wp-block-button__link,
.mk-hero .mk-btn-catalog,
.mk-hero .mk-btn-gold {
  padding: 1.5rem 2rem !important; /* py-6 px-8 */
  min-height: 3.5rem !important; /* Approximately h-14 */
  font-size: 1.125rem !important; /* text-lg = 18px */
  line-height: 1.75 !important; /* Matches text-lg default line-height */
}

/* Ensure button container uses flex-wrap and gap-4 */
.mk-hero__actions,
.mk-hero .wp-block-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important; /* gap-4 = 16px */
}

/* ---------------------------------------------------------------------
   Content max-width: max-w-2xl = 42rem (672px)
   React: <div className="max-w-2xl">
   --------------------------------------------------------------------- */
.mk-hero__content,
.mk-hero__inner,
.mk-hero .wp-block-cover__inner-container > * {
  max-width: 42rem !important;
}

/* ==========================================================================
   END SECTION S300: HOMEPAGE HERO V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S301: HEADER DESKTOP V4 FIXES (2026-03-26)
   Based on V4-AGENT2-HEADER-DESKTOP.md audit
   Issues: H2-1 (Search Icon Position), H2-2 (Account Hover)
   ========================================================================= */

/* ---------------------------------------------------------------------
   H2-1: Search Icon Position — LEFT of input (React: absolute left-3)

   React SearchBar.tsx structure:
   - <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" />
   - <Input className="pl-9 pr-4 w-48 lg:w-64 h-9 bg-muted/50 border-none" />

   WordPress uses wp:search block with buttonPosition="button-inside"
   which renders the button/icon on the RIGHT by default.

   Fix: Use CSS flex-direction: row-reverse to move icon to LEFT
   --------------------------------------------------------------------- */

/* Reverse flex direction to put button (icon) on left */
.mk-header__search .wp-block-search__inside-wrapper {
  flex-direction: row-reverse !important;
}

/* Adjust button (icon) padding to match React left-3 = 0.75rem */
.mk-header__search .wp-block-search__button {
  padding-left: 0.75rem !important;  /* left-3 = 0.75rem (12px) */
  padding-right: 0.25rem !important;
  order: -1 !important;
}

/* Adjust input padding: pl-9 = 2.25rem space for icon, pr-4 = 1rem */
/* Since icon is now via flex-reverse, input padding adjusts differently */
.mk-header__search .wp-block-search__input {
  padding-left: 0.25rem !important;  /* Icon is now on left via flex */
  padding-right: 1rem !important;    /* pr-4 = 1rem */
}

/* Ensure icon is vertically centered (top-1/2 -translate-y-1/2 in React) */
.mk-header__search .wp-block-search__button svg {
  width: 1rem !important;   /* w-4 = 1rem (16px) */
  height: 1rem !important;  /* h-4 = 1rem (16px) */
}

/* ---------------------------------------------------------------------
   H2-2: Account Icon Hover — Gold background (not gray)

   React (Header.tsx): <Button variant="ghost" size="icon">
   Ghost variant hover: hover:bg-accent hover:text-accent-foreground
   accent = gold = hsl(42 55% 58%)
   accent-foreground = hsl(160 30% 15%)

   WordPress was using: hsl(var(--muted)) (gray)

   Fix: Override hover to use gold (accent) instead of gray (muted)
   --------------------------------------------------------------------- */

.mk-header__account-link:hover {
  background-color: hsl(var(--accent)) !important; /* Gold instead of muted */
  color: hsl(var(--accent-foreground)) !important; /* Dark text for contrast */
}

/* Also apply to any nested SVG on hover for consistency */
.mk-header__account-link:hover svg {
  color: hsl(var(--accent-foreground)) !important;
}

/* Ghost button variant styling for icon buttons in header */
.mk-header__actions .wp-block-button.is-style-outline .wp-block-button__link:hover,
.mk-header__actions button[variant="ghost"]:hover,
.mk-header .ghost-button:hover {
  background-color: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

/* ==========================================================================
   END SECTION S301: HEADER DESKTOP V4 FIXES
   ========================================================================= */

/* ==========================================================================
   SECTION S315: FORMS GLOBAL V4 FIXES (2026-03-26)
   Agent 16 Implementation - Additional form fixes not covered in S295
   Source: V4-AGENT16-FORMS-GLOBAL.md, input.tsx, textarea.tsx, checkbox.tsx
   ========================================================================== */

/* ---------------------------------------------------------------------
   F16-7 & F16-8 & F16-9: Checkbox dimensions, border, and checked state
   React: h-4 w-4 = 16px, border-primary, data-[state=checked]:bg-primary
   --------------------------------------------------------------------- */
input[type="checkbox"],
.wpcf7 input[type="checkbox"],
.wpcf7-checkbox input[type="checkbox"],
.wpcf7-acceptance input[type="checkbox"],
.woocommerce input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  border: 1px solid hsl(160, 30%, 28%) !important; /* border-primary = forest green */
  background-color: hsl(var(--background)) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

/* Checkbox checked state */
input[type="checkbox"]:checked,
.wpcf7 input[type="checkbox"]:checked,
.wpcf7-checkbox input[type="checkbox"]:checked,
.wpcf7-acceptance input[type="checkbox"]:checked,
.woocommerce input[type="checkbox"]:checked {
  background-color: hsl(160, 30%, 28%) !important; /* bg-primary */
  border-color: hsl(160, 30%, 28%) !important;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F5F1EA' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
  background-size: 16px 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Checkbox focus state */
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
.wpcf7 input[type="checkbox"]:focus,
.wpcf7 input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(36, 33%, 94%),
    0 0 0 4px hsl(160, 30%, 28%) !important;
}

/* ---------------------------------------------------------------------
   F16-10: Input padding
   React: px-3 py-2 = 0.75rem horizontal (12px), 0.5rem vertical (8px)
   --------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
.wpcf7 select,
.woocommerce input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
.woocommerce select {
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 = 8px 12px */
}

/* Textarea padding */
textarea,
.wpcf7 textarea,
.woocommerce textarea {
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 = 8px 12px */
}

/* ---------------------------------------------------------------------
   F16-11: Responsive font size
   React: text-base (16px mobile) → md:text-sm (14px desktop)
   --------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpcf7 textarea,
.wpcf7 select,
.woocommerce input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.woocommerce textarea,
.woocommerce select {
  font-size: 1rem !important; /* text-base = 16px (mobile) */
}

@media (min-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  textarea,
  select,
  .wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .wpcf7 textarea,
  .wpcf7 select,
  .woocommerce input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .woocommerce textarea,
  .woocommerce select {
    font-size: 0.875rem !important; /* md:text-sm = 14px (desktop) */
  }
}

/* ---------------------------------------------------------------------
   F16-13: Placeholder color
   React: placeholder:text-muted-foreground = hsl(160, 15%, 40%) = #577066
   --------------------------------------------------------------------- */
input::placeholder,
textarea::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder,
.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
  color: hsl(160, 15%, 40%) !important; /* text-muted-foreground */
  opacity: 1 !important; /* Ensure full opacity, browsers vary */
}

/* Webkit placeholder */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.wpcf7 input::-webkit-input-placeholder,
.wpcf7 textarea::-webkit-input-placeholder {
  color: hsl(160, 15%, 40%) !important;
  opacity: 1 !important;
}

/* Firefox placeholder */
input::-moz-placeholder,
textarea::-moz-placeholder,
.wpcf7 input::-moz-placeholder,
.wpcf7 textarea::-moz-placeholder {
  color: hsl(160, 15%, 40%) !important;
  opacity: 1 !important;
}

/* MS placeholder */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
.wpcf7 input:-ms-input-placeholder,
.wpcf7 textarea:-ms-input-placeholder {
  color: hsl(160, 15%, 40%) !important;
}

/* ==========================================================================
   END SECTION S315: FORMS GLOBAL V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S307: POAUKCIONINE PAGE V4 FIXES (2026-03-26)
   ==========================================================================

   V4 Agent 8: Poaukcionine (Post-Auction) Page Implementation
   Reference: /docs/COMPREHENSIVE-PARITY-AUDIT-2026-03-26-V4.md (Agent 8)
   React Source: src/pages/PostAuction.tsx

   CRITICAL ISSUES:
   1. Deadline badge "Liko X d." MUST be RED (bg-destructive = #D42A2A)
      React line 117: bg-destructive text-destructive-foreground
   2. Amber info banner styling must match exactly

   REACT STRUCTURE ANALYSIS:
   - Container: container mx-auto px-4 py-8 (2rem vertical, NOT 3rem)
   - Header icon: w-12 h-12 (48px) rounded-full bg-amber-500/10
   - ShoppingBag: w-6 h-6 (24px) text-amber-600
   - Amber banner: p-4 bg-amber-500/10 rounded-lg border-amber-500/20
   - Filters: p-4 bg-muted/30 rounded-lg (8px radius)
   - Selects: w-[180px] (180px width)
   - View toggle: rounded-lg overflow-hidden (8px radius)
   - Deadline badge: bg-destructive = hsl(0 65% 50%) = #D42A2A (RED)
   - Grid: 1->2->3->4 columns at sm/lg/xl breakpoints
   ========================================================================== */

/* ---------------------------------------------------------------------
   S307-1: CRITICAL — Deadline badge MUST be RED (not amber!)
   React: <div className="... bg-destructive text-destructive-foreground ...">
   bg-destructive = hsl(0 65% 50%) = #D42A2A (RED)

   This overrides ALL previous amber rules for deadline badges
   --------------------------------------------------------------------- */
body.page-id-93 .mk-deadline-badge,
body.page-id-93 .mk-badge--deadline,
body.page-id-93 .mk-badge--post-auction,
body.page-id-93 [class*="deadline"],
.page-poaukcionine .mk-deadline-badge,
.page-poaukcionine .mk-badge--deadline,
.poaukcionine .mk-deadline-badge,
.mk-poaukcionine-grid .mk-deadline-badge,
.mk-poaukcionine__grid .mk-deadline-badge,
body [class*="poaukcion"] .mk-deadline-badge,
/* Maximum specificity selectors */
body.woocommerce-page.page-id-93 .mk-deadline-badge,
.woocommerce .page-id-93 .mk-deadline-badge {
  background-color: #D42A2A !important; /* bg-destructive = RED */
  color: white !important; /* text-destructive-foreground */
  font-size: 0.75rem !important; /* text-xs = 12px */
  font-weight: 500 !important; /* font-medium */
  padding: 0.25rem 0.5rem !important; /* px-2 py-1 = 8px 4px */
  border-radius: 0.25rem !important; /* rounded = 4px */
  position: absolute !important;
  top: 0.5rem !important; /* top-2 = 8px */
  right: 0.5rem !important; /* right-2 = 8px */
  z-index: 10 !important;
  line-height: 1.25 !important;
}

/* Pulse animation for urgent deadlines (<=2 days) */
body.page-id-93 .mk-deadline-badge--urgent,
body.page-id-93 .mk-deadline-badge[data-urgent="true"],
.page-poaukcionine .mk-deadline-badge--urgent {
  animation: mk-deadline-pulse-s307 2s ease-in-out infinite !important;
}

@keyframes mk-deadline-pulse-s307 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ---------------------------------------------------------------------
   S307-2: Header icon circle — 48px, 10% amber background
   React: <div className="w-12 h-12 rounded-full bg-amber-500/10 flex items-center justify-center">
   --------------------------------------------------------------------- */
body.page-id-93 .mk-poaukcionine-header__icon,
body.page-id-93 .mk-poaukcionine-icon-circle,
body.page-id-93 .mk-post-auction-icon,
.page-poaukcionine .mk-poaukcionine-header__icon {
  width: 3rem !important; /* w-12 = 48px */
  height: 3rem !important; /* h-12 = 48px */
  min-width: 3rem !important;
  min-height: 3rem !important;
  border-radius: 9999px !important; /* rounded-full */
  background-color: hsl(38 92% 50% / 0.1) !important; /* bg-amber-500/10 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ShoppingBag icon inside header circle */
body.page-id-93 .mk-poaukcionine-header__icon svg,
body.page-id-93 .mk-poaukcionine-icon-circle svg,
.page-poaukcionine .mk-poaukcionine-header__icon svg {
  width: 1.5rem !important; /* w-6 = 24px */
  height: 1.5rem !important; /* h-6 = 24px */
  color: hsl(25 95% 53%) !important; /* text-amber-600 */
}

/* ---------------------------------------------------------------------
   S307-3: Amber info banner — EXACT React values
   React: <div className="flex items-center gap-2 p-4 bg-amber-500/10 rounded-lg border border-amber-500/20">
   rounded-lg = 8px (standard Tailwind, NOT custom)
   --------------------------------------------------------------------- */
body.page-id-93 .mk-poaukcionine-banner,
body.page-id-93 .mk-info-banner,
body.page-id-93 .mk-amber-banner,
body.page-id-93 .wp-block-group[class*="amber"],
body.page-id-93 .post-auction-info-banner,
.page-poaukcionine .mk-poaukcionine-banner,
.poaukcionine .mk-info-banner {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  padding: 1rem !important; /* p-4 = 16px */
  background-color: hsl(38 92% 50% / 0.1) !important; /* bg-amber-500/10 */
  border: 1px solid hsl(38 92% 50% / 0.2) !important; /* border-amber-500/20 */
  border-radius: 0.5rem !important; /* rounded-lg = 8px (STANDARD, not custom) */
  margin-bottom: 1.5rem !important;
}

/* Clock icon in banner */
body.page-id-93 .mk-poaukcionine-banner svg,
body.page-id-93 .mk-info-banner svg.clock-icon,
body.page-id-93 .mk-amber-banner svg,
.page-poaukcionine .mk-poaukcionine-banner svg {
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  color: hsl(25 95% 53%) !important; /* text-amber-600 */
  flex-shrink: 0 !important;
}

/* Banner text */
body.page-id-93 .mk-poaukcionine-banner p,
body.page-id-93 .mk-info-banner p,
body.page-id-93 .mk-amber-banner p,
.page-poaukcionine .mk-poaukcionine-banner p {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(25 95% 25%) !important; /* text-amber-800 */
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Bold text in banner (strong element) */
body.page-id-93 .mk-poaukcionine-banner strong,
body.page-id-93 .mk-info-banner strong,
.page-poaukcionine .mk-poaukcionine-banner strong {
  font-weight: 700 !important; /* strong = bold */
}

/* ---------------------------------------------------------------------
   S307-4: Filters container — muted background with rounded-lg
   React: <div className="flex flex-wrap items-center gap-4 mb-6 p-4 bg-muted/30 rounded-lg">
   --------------------------------------------------------------------- */
body.page-id-93 .mk-poaukcionine-filters,
body.page-id-93 .mk-filters-container,
body.page-id-93 .wp-block-group.mk-filters,
.page-poaukcionine .mk-poaukcionine-filters,
.poaukcionine .mk-filters-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem !important; /* gap-4 = 16px */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
  padding: 1rem !important; /* p-4 = 16px */
  background-color: hsl(36 20% 90% / 0.3) !important; /* bg-muted/30 */
  border-radius: 0.5rem !important; /* rounded-lg = 8px */
}

/* ---------------------------------------------------------------------
   S307-5: Select dropdowns — 180px fixed width
   React: <SelectTrigger className="w-[180px]">
   --------------------------------------------------------------------- */
body.page-id-93 .mk-poaukcionine-select,
body.page-id-93 .mk-poaukcionine-filters select,
body.page-id-93 .mk-filters-container select,
.page-poaukcionine .mk-poaukcionine-select,
.poaukcionine select.mk-select {
  width: 180px !important; /* w-[180px] = fixed 180px */
  height: 2.5rem !important; /* h-10 = 40px */
  padding: 0 0.75rem !important; /* px-3 */
  border-radius: 0.125rem !important; /* rounded-md = 2px (custom) */
  border: 1px solid hsl(var(--input)) !important;
  background-color: hsl(var(--background)) !important;
  font-size: 0.875rem !important; /* text-sm */
}

/* ---------------------------------------------------------------------
   S307-6: View toggle buttons — rounded-lg with overflow hidden
   React: <div className="flex border border-border rounded-lg overflow-hidden">
   --------------------------------------------------------------------- */
body.page-id-93 .mk-view-toggle,
body.page-id-93 .mk-poaukcionine-filters .mk-view-toggle,
.page-poaukcionine .mk-view-toggle {
  display: flex !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.5rem !important; /* rounded-lg = 8px */
  overflow: hidden !important;
}

body.page-id-93 .mk-view-toggle button,
.page-poaukcionine .mk-view-toggle button {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important; /* No radius inside toggle */
  padding: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.page-id-93 .mk-view-toggle button.active,
body.page-id-93 .mk-view-toggle button[aria-pressed="true"],
.page-poaukcionine .mk-view-toggle button.active {
  background-color: hsl(var(--secondary)) !important;
}

body.page-id-93 .mk-view-toggle button svg,
.page-poaukcionine .mk-view-toggle button svg {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
}

/* ---------------------------------------------------------------------
   S307-7: Product grid responsive — 1/2/3/4 columns
   React: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6
   --------------------------------------------------------------------- */
body.page-id-93 .mk-poaukcionine-grid,
body.page-id-93 .mk-poaukcionine__grid,
body.page-id-93 .wc-block-grid__products,
body.page-id-93 .wp-block-post-template,
.page-poaukcionine .mk-poaukcionine-grid,
.poaukcionine .wc-block-grid__products {
  display: grid !important;
  grid-template-columns: 1fr !important; /* Mobile: 1 column */
  gap: 1.5rem !important; /* gap-6 = 24px */
}

@media (min-width: 640px) {
  body.page-id-93 .mk-poaukcionine-grid,
  body.page-id-93 .mk-poaukcionine__grid,
  body.page-id-93 .wc-block-grid__products,
  body.page-id-93 .wp-block-post-template,
  .page-poaukcionine .mk-poaukcionine-grid,
  .poaukcionine .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important; /* sm: 2 columns */
  }
}

@media (min-width: 1024px) {
  body.page-id-93 .mk-poaukcionine-grid,
  body.page-id-93 .mk-poaukcionine__grid,
  body.page-id-93 .wc-block-grid__products,
  body.page-id-93 .wp-block-post-template,
  .page-poaukcionine .mk-poaukcionine-grid,
  .poaukcionine .wc-block-grid__products {
    grid-template-columns: repeat(3, 1fr) !important; /* lg: 3 columns */
  }
}

@media (min-width: 1280px) {
  body.page-id-93 .mk-poaukcionine-grid,
  body.page-id-93 .mk-poaukcionine__grid,
  body.page-id-93 .wc-block-grid__products,
  body.page-id-93 .wp-block-post-template,
  .page-poaukcionine .mk-poaukcionine-grid,
  .poaukcionine .wc-block-grid__products {
    grid-template-columns: repeat(4, 1fr) !important; /* xl: 4 columns */
  }
}

/* ---------------------------------------------------------------------
   S307-8: Result count text styling
   React: <span className="text-sm text-muted-foreground">
   --------------------------------------------------------------------- */
body.page-id-93 .mk-poaukcionine-count,
body.page-id-93 .mk-result-count,
.page-poaukcionine .mk-poaukcionine-count {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
}

/* ---------------------------------------------------------------------
   S307-9: Page title styling
   React: <h1 className="text-3xl font-display font-bold">
   --------------------------------------------------------------------- */
body.page-id-93 h1,
body.page-id-93 .mk-poaukcionine-title,
.page-poaukcionine h1 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.875rem !important; /* text-3xl = 30px */
  font-weight: 700 !important; /* font-bold */
  margin-bottom: 0 !important;
}

/* Subtitle */
body.page-id-93 .mk-poaukcionine-subtitle,
body.page-id-93 .mk-poaukcionine-header p,
.page-poaukcionine .mk-poaukcionine-subtitle {
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
   S307-10: Empty state styling
   React: <div className="text-center py-16"> ... <Tag className="w-16 h-16 text-muted-foreground/30">
   --------------------------------------------------------------------- */
body.page-id-93 .mk-empty-state,
body.page-id-93 .woocommerce-info.wc-empty-state,
.page-poaukcionine .mk-empty-state {
  text-align: center !important;
  padding-top: 4rem !important; /* py-16 = 64px */
  padding-bottom: 4rem !important;
}

body.page-id-93 .mk-empty-state svg,
.page-poaukcionine .mk-empty-state svg {
  width: 4rem !important; /* w-16 = 64px */
  height: 4rem !important; /* h-16 = 64px */
  color: hsl(var(--muted-foreground) / 0.3) !important; /* text-muted-foreground/30 */
  margin-left: auto !important; /* mx-auto */
  margin-right: auto !important;
  margin-bottom: 1rem !important; /* mb-4 */
}

body.page-id-93 .mk-empty-state h3 {
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 500 !important; /* font-medium */
  margin-bottom: 0.5rem !important; /* mb-2 */
}

body.page-id-93 .mk-empty-state p {
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 1rem !important; /* mb-4 */
}

/* ==========================================================================
   END SECTION S307: POAUKCIONINE PAGE V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S317: PRODUCT CARDS V4 FIXES (2026-03-26)
   ==========================================================================

   V4 Agent 18: Product Card Styling Implementation
   Reference: /docs/PARITY-AGENT-LOGS/V4-AGENT18-PRODUCT-CARDS.md
   React Source: src/components/auction/ArtworkCard.tsx, GalleryCard.tsx

   FOCUS AREAS:
   - PC-15: Horizontal (list view) card image dimensions: 192x192px square
   - Vertical cards preserved at 4:5 aspect ratio (handled in S297)
   - Timer overlay gradient and positioning
   - Status badge positioning and styling
   - Title typography enforcement

   CRITICAL REACT VALUES:
   - Card: rounded-sm = 0px (custom Tailwind config)
   - Vertical image: aspect-[4/5]
   - Horizontal image: w-48 h-48 = 12rem = 192px square
   - Timer overlay: bg-gradient-to-t from-foreground/80 p-3
   - Badges: top-3 right-3 (12px from edges)
   ========================================================================== */

/* ---------------------------------------------------------------------
   PC-15: Horizontal card (list view) image dimensions
   React: <div className="relative w-48 h-48 flex-shrink-0 overflow-hidden">
   w-48 h-48 = 12rem = 192px square — NOT aspect-ratio based
   --------------------------------------------------------------------- */

/* Horizontal/list view card layout */
.mk-card-horizontal,
.mk-artwork-card--horizontal,
.mk-product-card--horizontal,
.product-card--horizontal,
.wc-block-grid__product.is-list-view,
.wc-block-product-template.is-flex-container .wc-block-grid__product,
li.product.list-view,
.products.list li.product {
  display: flex !important;
  flex-direction: row !important;
}

/* Horizontal card image container - EXACT 192x192px square */
.mk-card-horizontal .mk-card-image,
.mk-card-horizontal .mk-artwork-card__image,
.mk-card-horizontal .product-card__image,
.mk-artwork-card--horizontal .mk-artwork-card__image,
.mk-product-card--horizontal .product-card__image,
.product-card--horizontal .product-card__image,
.wc-block-grid__product.is-list-view .wc-block-grid__product-image,
.wc-block-product-template.is-flex-container .wc-block-grid__product .wc-block-grid__product-image,
li.product.list-view .product-image-wrapper,
li.product.list-view .woocommerce-product-gallery,
li.product.list-view a img,
.products.list li.product .product-image-wrapper,
.products.list li.product .woocommerce-product-gallery {
  width: 12rem !important;        /* w-48 = 192px */
  min-width: 12rem !important;
  max-width: 12rem !important;
  height: 12rem !important;       /* h-48 = 192px */
  min-height: 12rem !important;
  max-height: 12rem !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: auto !important;  /* Override 4/5 from vertical cards */
  border-radius: 0 !important;    /* rounded-sm = 0 */
}

/* Horizontal card image - fill container */
.mk-card-horizontal .mk-card-image img,
.mk-card-horizontal .mk-artwork-card__image img,
.mk-card-horizontal .product-card__image img,
.mk-artwork-card--horizontal .mk-artwork-card__image img,
.mk-product-card--horizontal .product-card__image img,
.product-card--horizontal .product-card__image img,
.wc-block-grid__product.is-list-view .wc-block-grid__product-image img,
.wc-block-product-template.is-flex-container .wc-block-grid__product .wc-block-grid__product-image img,
li.product.list-view a img,
.products.list li.product a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 500ms ease !important;
}

/* Horizontal card body/content - flex-1 to fill remaining space */
.mk-card-horizontal .mk-card-body,
.mk-card-horizontal .mk-card-content,
.mk-card-horizontal .product-card__content,
.mk-artwork-card--horizontal .mk-artwork-card__body,
.mk-product-card--horizontal .product-card__content,
.product-card--horizontal .product-card__content,
.wc-block-grid__product.is-list-view .wc-block-grid__product-content,
li.product.list-view .product-info,
.products.list li.product .product-info {
  flex: 1 !important;
  padding: 1.25rem !important;    /* p-5 = 20px */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* ---------------------------------------------------------------------
   PC-10/PC-17: Status badge colors - explicit color enforcement
   React badge variants with shadow-lg
   --------------------------------------------------------------------- */

/* Active badge: bg-primary text-primary-foreground shadow-lg */
.mk-badge--active,
.mk-status-badge--active,
.auction-badge--active {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important; /* shadow-lg */
}

/* Ending soon badge: destructive variant with animate-pulse */
.mk-badge--ending,
.mk-status-badge--ending,
.auction-badge--ending-soon {
  background-color: hsl(var(--destructive)) !important;
  color: hsl(var(--destructive-foreground)) !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important;
  animation: mk-pulse-317 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* Upcoming badge: bg-muted text-muted-foreground shadow-lg */
.mk-badge--upcoming,
.mk-status-badge--upcoming,
.auction-badge--upcoming {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important;
}

/* Post-auction badge: amber-500 text-white shadow-lg */
.mk-badge--post-auction,
.mk-status-badge--post-auction,
.auction-badge--post-auction,
.mk-badge--poaukcionine {
  background-color: #f59e0b !important;  /* amber-500 */
  color: white !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important;
}

/* Buy now badge: bg-gold text-foreground shadow-lg */
.mk-badge--buy-now,
.mk-status-badge--buy-now,
.auction-badge--buy-now {
  background-color: hsl(var(--gold)) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important;
}

/* ---------------------------------------------------------------------
   PC-18: Badge icon size - 12px (w-3 h-3)
   React: <Gavel className="w-3 h-3 mr-1" />
   --------------------------------------------------------------------- */
.mk-badge--active svg,
.mk-badge--ending svg,
.mk-badge--post-auction svg,
.mk-badge--buy-now svg,
.mk-status-badge svg,
.auction-badge svg {
  width: 0.75rem !important;     /* w-3 = 12px */
  height: 0.75rem !important;    /* h-3 = 12px */
  margin-right: 0.25rem !important; /* mr-1 = 4px */
  flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------------
   PC-11: Title typography - Playfair Display 18px 600
   React: <h3 className="font-display text-lg font-semibold text-foreground mb-1">
   --------------------------------------------------------------------- */
.mk-card-title,
.mk-artwork-card__title,
.mk-gallery-card__title,
.product-card__title,
.wc-block-grid__product-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.125rem !important;  /* text-lg = 18px */
  font-weight: 600 !important;     /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
  line-height: 1.4 !important;
}

/* ---------------------------------------------------------------------
   PC-12: Price typography - bold primary color
   React: <span className="font-bold text-primary">
   --------------------------------------------------------------------- */
.mk-card-price,
.mk-artwork-card__price,
.mk-gallery-card__price,
.product-card__price,
.wc-block-grid__product-price,
.woocommerce ul.products li.product .price {
  font-weight: 700 !important;     /* font-bold */
  color: hsl(var(--primary)) !important;
}

/* ---------------------------------------------------------------------
   PC-13: GalleryCard title truncate - line-clamp-1
   React: <h3 className="... line-clamp-1">
   --------------------------------------------------------------------- */
.mk-gallery-card__title,
.mk-gallery-card .mk-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ---------------------------------------------------------------------
   PC-19: Badge shadow-lg enforcement
   Tailwind shadow-lg = 0 10px 15px -3px rgb(0 0 0 / 0.1),
                        0 4px 6px -4px rgb(0 0 0 / 0.1)
   --------------------------------------------------------------------- */
.mk-status-badges .badge,
.mk-artwork-card__badges .badge,
.mk-badge,
[class*="mk-badge--"],
[class*="mk-status-badge"],
[class*="auction-badge"] {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important;
}

/* Pulse animation for ending-soon badges */
@keyframes mk-pulse-317 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ==========================================================================
   END SECTION S317: PRODUCT CARDS V4 FIXES
   ========================================================================== */
/* ==========================================================================
   SECTION S311: INFORMACIJA HUB V4 FIXES (2026-03-26)
   Agent 12 Implementation — Tab navigation, content cards, FAQ accordion

   React Source: src/pages/Information.tsx
   Key React values:
   - TabsList: rounded-xl = 12px, bg-muted/50, p-2, gap-2
   - TabsTrigger: rounded-sm = 0px (CUSTOM!), px-4 py-2.5
   - TabsTrigger active: bg-primary text-primary-foreground
   - Content Card: rounded-xl = 12px, p-8, border
   - Section H3: text-xl (1.25rem), font-semibold (600), text-primary
   - Accordion Item: border-b only
   - Accordion Trigger: hover:text-gold
   ========================================================================== */

/* ---------------------------------------------------------------------
   12-1/12-2/12-3: Hero section — bg-primary, py-16, H1 font-bold
   React: <div className="bg-primary text-primary-foreground py-16">
          <h1 className="font-display text-4xl md:text-5xl font-bold mb-4">
   --------------------------------------------------------------------- */
.mk-info-hero,
.informacija-hero,
.page-informacija .mk-hero,
body.page-informacija .wp-block-cover.mk-info-hero {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  padding-top: 4rem !important; /* py-16 = 64px */
  padding-bottom: 4rem !important;
}

.mk-info-hero h1,
.mk-info-hero__title,
.informacija-hero h1,
.page-informacija .mk-hero h1 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 2.25rem !important; /* text-4xl mobile */
  font-weight: 700 !important; /* font-bold — NOT 600! */
  color: hsl(var(--primary-foreground)) !important;
  margin-bottom: 1rem !important; /* mb-4 */
}

@media (min-width: 768px) {
  .mk-info-hero h1,
  .mk-info-hero__title,
  .informacija-hero h1,
  .page-informacija .mk-hero h1 {
    font-size: 3rem !important; /* md:text-5xl = 48px */
  }
}

/* 12-4: Hero subtitle — 80% opacity */
.mk-info-hero p,
.mk-info-hero__subtitle,
.informacija-hero p {
  color: hsl(var(--primary-foreground) / 0.8) !important; /* text-primary-foreground/80 */
  font-size: 1.125rem !important; /* text-lg */
  max-width: 42rem !important; /* max-w-2xl */
}

/* ---------------------------------------------------------------------
   12-5/12-6: TabsList — rounded-xl (12px), bg-muted/50, p-2, gap-2
   React: <TabsList className="flex flex-wrap h-auto gap-2 bg-muted/50 p-2 rounded-xl mb-8">
   CRITICAL: WordPress was using 0.5rem (8px) — must be 12px!
   --------------------------------------------------------------------- */
.mk-info-tabs__nav,
.mk-info-tabs__list,
.informacija-tabs,
.page-informacija .mk-tabs-container,
body.page-informacija .wp-block-group.mk-info-tabs__nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  padding: 0.5rem !important; /* p-2 = 8px */
  background: hsl(var(--muted) / 0.5) !important; /* bg-muted/50 */
  border-radius: 0.75rem !important; /* rounded-xl = 12px — FIXED from 0.5rem */
  margin-bottom: 2rem !important; /* mb-8 = 32px */
  height: auto !important; /* h-auto */
  border: none !important;
}

/* ---------------------------------------------------------------------
   12-7/12-8: TabsTrigger base — rounded-sm (0px!), px-4 py-2.5
   React tabs.tsx: className="... rounded-sm px-3 py-1.5 ..."
   Information.tsx override: className="... px-4 py-2.5 ..."
   CRITICAL: rounded-sm = 0px in this project's custom Tailwind config!
   --------------------------------------------------------------------- */
.mk-info-tab-btn,
.mk-info-tabs__trigger,
.informacija-tab,
.page-informacija .mk-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important; /* gap-2 */
  padding: 0.625rem 1rem !important; /* py-2.5 px-4 = 10px 16px */
  border: none !important;
  border-radius: 0 !important; /* rounded-sm = 0px — CUSTOM CONFIG! */
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  font-family: var(--font-body), 'Inter', system-ui, sans-serif !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
}

/* Tab icon size: w-4 h-4 = 16px */
.mk-info-tab-btn svg,
.mk-info-tabs__trigger svg,
.informacija-tab svg {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
}

/* Tab hover state (NOT active) */
.mk-info-tab-btn:hover:not(.active):not([aria-current="page"]),
.mk-info-tabs__trigger:hover:not(.mk-info-tabs__trigger--active),
.informacija-tab:hover:not(.active) {
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--background) / 0.5) !important;
}

/* ---------------------------------------------------------------------
   12-9: TabsTrigger active — bg-primary, text-primary-foreground
   React: data-[state=active]:bg-primary data-[state=active]:text-primary-foreground
   --------------------------------------------------------------------- */
.mk-info-tab-btn.active,
.mk-info-tab-btn[aria-current="page"],
.mk-info-tabs__nav a.active,
.mk-info-tabs__nav a[aria-current="page"],
.mk-info-tabs__trigger--active,
.informacija-tab.active,
.page-informacija .mk-tab-btn.active {
  background: hsl(var(--primary)) !important; /* bg-primary = forest green */
  color: hsl(var(--primary-foreground)) !important; /* cream text */
  border-radius: 0 !important; /* Keep rounded-sm = 0 even when active */
}

/* Active tab hover — slightly darker forest green */
.mk-info-tab-btn.active:hover,
.mk-info-tab-btn[aria-current="page"]:hover,
.mk-info-tabs__nav a.active:hover,
.mk-info-tabs__trigger--active:hover {
  background: hsl(160 30% 24%) !important;
}

/* Tab focus state */
.mk-info-tab-btn:focus-visible,
.mk-info-tabs__trigger:focus-visible,
.informacija-tab:focus-visible {
  outline: 2px solid hsl(var(--ring)) !important;
  outline-offset: 2px !important;
}

/* Hide label on mobile, show on sm+ (React: hidden sm:inline) */
.mk-info-tab-btn .mk-tab-label,
.mk-info-tabs__trigger .mk-tab-label {
  display: none !important;
}

@media (min-width: 640px) {
  .mk-info-tab-btn .mk-tab-label,
  .mk-info-tabs__trigger .mk-tab-label {
    display: inline !important;
  }
}

/* ---------------------------------------------------------------------
   12-10/12-11/12-12: Content card — rounded-xl (12px), p-8 (32px), border
   React: <div className="bg-card rounded-xl p-8 border">
   --------------------------------------------------------------------- */
.mk-info-content,
.mk-info-panel,
.mk-informacija-content,
.informacija-content-card,
.page-informacija .mk-content-card,
body.page-informacija .wp-block-group.mk-info-content {
  background: hsl(var(--card)) !important;
  border-radius: 0.75rem !important; /* rounded-xl = 12px — FIXED from 0.5rem */
  padding: 2rem !important; /* p-8 = 32px */
  border: 1px solid hsl(var(--border)) !important;
}

/* ---------------------------------------------------------------------
   12-13/12-14: Card header with icon — icon 32px (w-8 h-8), gold color
   React: <Gavel className="w-8 h-8 text-gold" />
   --------------------------------------------------------------------- */
.mk-info-content h2 svg,
.mk-info-panel h2 svg,
.mk-informacija-content h2 svg,
.informacija-content-card h2 svg,
.page-informacija .mk-content-card h2 svg,
body.page-informacija .wp-block-group h2 svg {
  width: 2rem !important; /* w-8 = 32px */
  height: 2rem !important; /* h-8 = 32px */
  color: hsl(var(--gold)) !important; /* text-gold */
  flex-shrink: 0 !important;
}

/* Header flex layout */
.mk-info-content .mk-panel-header,
.mk-info-panel .mk-panel-header,
.informacija-content-card .mk-panel-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important; /* gap-3 = 12px */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
}

/* Card H2 title */
.mk-info-content h2,
.mk-info-panel h2,
.mk-informacija-content h2,
.informacija-content-card h2 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important; /* text-2xl = 24px */
  font-weight: 700 !important; /* font-bold */
  color: hsl(var(--foreground)) !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------
   12-15/12-16/12-17: Section H3 — text-xl (1.25rem), font-semibold (600), text-primary
   React: <h3 className="font-display text-xl font-semibold mb-3 text-primary">
   --------------------------------------------------------------------- */
.mk-info-content h3,
.mk-info-panel h3,
.mk-info-section h3,
.mk-informacija-section h3,
.informacija-content-card h3,
body.page-informacija .wp-block-group h3 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--primary)) !important; /* text-primary = forest green */
  margin-bottom: 0.75rem !important; /* mb-3 = 12px */
  margin-top: 0 !important;
}

/* ---------------------------------------------------------------------
   12-18: Section paragraphs — text-muted-foreground, leading-relaxed (1.625)
   React: <p className="text-muted-foreground whitespace-pre-line leading-relaxed">
   --------------------------------------------------------------------- */
.mk-info-content p,
.mk-info-panel p,
.mk-info-section p,
.mk-informacija-section p,
.informacija-content-card p,
body.page-informacija .wp-block-group p {
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.625 !important; /* leading-relaxed */
  white-space: pre-line !important; /* whitespace-pre-line */
}

/* Content section spacing — mb-8 last:mb-0 */
.mk-info-content .mk-info-item,
.mk-info-panel .mk-info-item,
.informacija-content-card .mk-info-item {
  margin-bottom: 2rem !important; /* mb-8 = 32px */
}

.mk-info-content .mk-info-item:last-child,
.mk-info-panel .mk-info-item:last-child,
.informacija-content-card .mk-info-item:last-child {
  margin-bottom: 0 !important; /* last:mb-0 */
}

/* ---------------------------------------------------------------------
   12-19: Accordion Item — border-b only (NOT full border)
   React accordion.tsx: <AccordionPrimitive.Item ... className={cn("border-b", className)}>
   --------------------------------------------------------------------- */
.mk-faq-item,
.mk-accordion-item,
.informacija-faq-item,
body.page-informacija .wp-block-details,
body.page-informacija [data-accordion-item] {
  border: none !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  border-radius: 0 !important;
}

/* Last item has no border */
.mk-faq-item:last-child,
.mk-accordion-item:last-child,
.informacija-faq-item:last-child {
  border-bottom: none !important;
}

/* ---------------------------------------------------------------------
   12-20: Accordion Trigger — py-4 (16px), font-medium, hover:text-gold
   React: <AccordionTrigger className="text-left font-medium hover:text-gold">
          Trigger has py-4 from accordion.tsx: "py-4 font-medium"
   --------------------------------------------------------------------- */
.mk-faq-question,
.mk-accordion-trigger,
.informacija-faq-question,
body.page-informacija .wp-block-details summary,
body.page-informacija [data-accordion-trigger] {
  display: flex !important;
  flex: 1 !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 1rem !important; /* py-4 = 16px */
  padding-bottom: 1rem !important;
  font-weight: 500 !important; /* font-medium */
  text-align: left !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  color: hsl(var(--foreground)) !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
}

/* Accordion trigger hover — text-gold */
.mk-faq-question:hover,
.mk-accordion-trigger:hover,
.informacija-faq-question:hover,
body.page-informacija .wp-block-details summary:hover,
body.page-informacija [data-accordion-trigger]:hover {
  color: hsl(var(--gold)) !important; /* hover:text-gold */
  text-decoration: none !important; /* Override default hover:underline */
}

/* Accordion chevron — h-4 w-4, 200ms transition, rotate on open */
.mk-faq-chevron,
.mk-accordion-chevron,
.mk-faq-question svg,
.mk-accordion-trigger svg {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  flex-shrink: 0 !important;
  transition: transform 200ms ease !important; /* duration-200 */
}

/* Chevron rotation when open */
.mk-faq-item.open .mk-faq-chevron,
.mk-accordion-item[data-state="open"] .mk-accordion-chevron,
[data-state="open"] > .mk-faq-question svg,
[data-state="open"] > .mk-accordion-trigger svg {
  transform: rotate(180deg) !important;
}

/* ---------------------------------------------------------------------
   12-21: Accordion Content — text-sm (14px), pb-4 pt-0
   React accordion.tsx: "text-sm" on content wrapper, "pb-4 pt-0" on inner div
   --------------------------------------------------------------------- */
.mk-faq-answer,
.mk-accordion-content,
.informacija-faq-answer,
body.page-informacija .wp-block-details > *:not(summary),
body.page-informacija [data-accordion-content] {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.625 !important; /* leading-relaxed */
  padding-top: 0 !important; /* pt-0 */
  padding-bottom: 1rem !important; /* pb-4 = 16px */
  overflow: hidden !important;
}

/* ---------------------------------------------------------------------
   12-22: Accordion animation — 0.2s ease-out (accordion-down/up)
   React: data-[state=open]:animate-accordion-down
   --------------------------------------------------------------------- */
@keyframes mk-accordion-down {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--radix-accordion-content-height, auto);
    opacity: 1;
  }
}

@keyframes mk-accordion-up {
  from {
    height: var(--radix-accordion-content-height, auto);
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

.mk-faq-answer,
.mk-accordion-content,
body.page-informacija [data-accordion-content] {
  animation: mk-accordion-down 0.2s ease-out !important; /* 200ms = 0.2s */
}

[data-state="closed"] .mk-faq-answer,
[data-state="closed"] .mk-accordion-content {
  animation: mk-accordion-up 0.2s ease-out !important;
}

/* ==========================================================================
   END SECTION S311: INFORMACIJA HUB V4 FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S313: CATALOG CSS GRID LAYOUT
   React reference: Catalog.tsx uses grid lg:grid-cols-4 gap-8
   Sidebar lg:col-span-1 (sticky top-24), Content lg:col-span-3
   ========================================================================== */

/* ---------------------------------------------------------------------
   CSS Grid Container: .mk-catalog-grid
   Desktop: 280px sidebar + 1fr content (gap 2rem = gap-8)
   Mobile: single column, sidebar stacks above content
   --------------------------------------------------------------------- */
.mk-catalog-grid {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 2rem !important; /* gap-8 = 32px */
  align-items: start !important;
}

/* React breakpoint: lg = 1024px */
@media (max-width: 1279px) {
  .mk-catalog-grid {
    display: block !important;
    grid-template-columns: unset !important;
  }
}

/* ---------------------------------------------------------------------
   Sidebar: .mk-catalog-sidebar
   React: sticky top-24 space-y-6
   --------------------------------------------------------------------- */
.mk-catalog-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important; /* space-y-6 = 24px */
  position: sticky !important;
  top: 6rem !important; /* top-24 = 96px */
  max-height: calc(100vh - 7rem) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent !important;
}

/* Admin bar offset */
body.admin-bar .mk-catalog-sidebar {
  top: calc(6rem + 32px) !important;
  max-height: calc(100vh - 7rem - 32px) !important;
}

/* Custom scrollbar for webkit */
.mk-catalog-sidebar::-webkit-scrollbar {
  width: 6px !important;
}

.mk-catalog-sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}

.mk-catalog-sidebar::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3) !important;
  border-radius: 3px !important;
}

.mk-catalog-sidebar::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5) !important;
}

/* Mobile: sidebar as collapsible panel */
@media (max-width: 1279px) {
  .mk-catalog-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 1000 !important;
    background: hsl(var(--background)) !important;
    transform: translateX(-100%) !important;
    transition: transform 300ms ease !important;
    padding: 1.5rem !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15) !important;
    overflow-y: auto !important;
  }

  .mk-catalog-sidebar.is-open {
    transform: translateX(0) !important;
  }

  /* Backdrop when sidebar is open */
  .mk-catalog-sidebar-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 300ms ease, visibility 300ms ease !important;
  }

  .mk-catalog-sidebar-backdrop.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* FAB (Floating Action Button) for mobile filter access */
  .mk-filter-fab {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    transition: all 300ms ease !important;
  }

  .mk-filter-fab:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
  }

  .mk-filter-fab svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* FAB badge - shows active filter count */
  .mk-filter-fab__badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    background: hsl(var(--gold)) !important;
    color: hsl(var(--forest-dark)) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  /* Sidebar close button */
  .mk-sidebar-close {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: hsl(var(--foreground)) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
    z-index: 10 !important;
  }

  .mk-sidebar-close:hover {
    background: hsl(var(--muted)) !important;
    color: hsl(var(--primary)) !important;
  }

  .mk-sidebar-close svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Body scroll lock when sidebar is open */
body.mk-sidebar-open {
  overflow: hidden !important;
}

/* ---------------------------------------------------------------------
   Content Area: .mk-catalog-content
   Takes remaining space in grid (1fr)
   --------------------------------------------------------------------- */
.mk-catalog-content {
  min-width: 0 !important; /* Prevent grid blowout */
}

/* ---------------------------------------------------------------------
   Mobile Filter Toggle Button: .mk-mobile-filter-toggle
   Hidden on desktop (lg:hidden), visible on mobile
   --------------------------------------------------------------------- */
.mk-mobile-filter-toggle {
  display: none !important; /* Hidden by default (desktop) */
}

@media (max-width: 1279px) {
  .mk-mobile-filter-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
    background: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0.375rem !important; /* rounded-md */
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
  }

  .mk-mobile-filter-toggle:hover {
    background: hsl(var(--muted)) !important;
    border-color: hsl(var(--primary)) !important;
  }

  .mk-mobile-filter-toggle svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    stroke: currentColor !important;
  }
}

/* ---------------------------------------------------------------------
   Filter Groups Styling
   --------------------------------------------------------------------- */

/* Categories filter - primary/forest background */
.mk-filter-categories,
.mk-catalog-sidebar .mk-filter-group.mk-filter-categories {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: none !important;
}

.mk-filter-categories h3,
.mk-filter-categories .wp-block-heading {
  color: hsl(var(--primary-foreground)) !important;
}

.mk-filter-categories .wc-block-product-categories-list-item a {
  color: hsl(var(--primary-foreground) / 0.8) !important;
  text-decoration: none !important;
  transition: color 200ms ease !important;
}

.mk-filter-categories .wc-block-product-categories-list-item a:hover,
.mk-filter-categories .wc-block-product-categories-list-item.current-cat > a {
  color: hsl(var(--gold)) !important;
}

.mk-filter-categories .wc-block-product-categories-list-item__count {
  color: hsl(var(--primary-foreground) / 0.5) !important;
  font-size: 0.75rem !important;
}

/* Other filter groups - card background with shadow */
.mk-filter-time,
.mk-filter-price,
.mk-filter-quick,
.mk-filter-help {
  box-shadow: var(--shadow-card) !important;
}

/* Help section - secondary background */
.mk-filter-help {
  background: hsl(var(--secondary) / 0.3) !important;
}

/* ---------------------------------------------------------------------
   Time Filter Buttons
   React: w-full text-left px-3 py-2 rounded-md text-sm
   Active: bg-primary text-primary-foreground
   --------------------------------------------------------------------- */
.mk-time-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* space-y-2 */
}

.mk-time-filter-btn {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  border-radius: 0.375rem !important; /* rounded-md */
  font-size: 0.875rem !important; /* text-sm */
  background: transparent !important;
  border: none !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  transition: background 200ms ease, color 200ms ease !important;
}

.mk-time-filter-btn:hover {
  background: hsl(var(--muted)) !important;
}

.mk-time-filter-btn.active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* ---------------------------------------------------------------------
   Price Filter Buttons
   Same styling as time filters
   --------------------------------------------------------------------- */
.mk-price-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.mk-price-filter-btn {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  background: transparent !important;
  border: none !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  transition: background 200ms ease, color 200ms ease !important;
}

.mk-price-filter-btn:hover {
  background: hsl(var(--muted)) !important;
}

.mk-price-filter-btn.active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* ---------------------------------------------------------------------
   Quick Filter Toggles
   React: Switch component with flex items-center justify-between
   --------------------------------------------------------------------- */
.mk-quick-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* space-y-4 */
}

.mk-quick-filter-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.mk-quick-filter-label {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
}

/* Toggle Switch - custom implementation matching React Switch */
.mk-toggle {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important; /* Increased for better touch */
  height: 24px !important;
  cursor: pointer !important;
}

.mk-toggle-input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}

.mk-toggle-slider {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: hsl(var(--input)) !important;
  border-radius: 9999px !important; /* rounded-full */
  transition: all 200ms ease !important;
}

.mk-toggle-slider::before {
  content: "" !important;
  position: absolute !important;
  width: 20px !important;
  height: 20px !important;
  left: 2px !important;
  bottom: 2px !important;
  background: white !important;
  border-radius: 50% !important;
  transition: transform 200ms ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.mk-toggle-input:checked + .mk-toggle-slider {
  background: hsl(var(--primary)) !important;
}

.mk-toggle-input:checked + .mk-toggle-slider::before {
  transform: translateX(20px) !important;
}

.mk-toggle-input:focus + .mk-toggle-slider {
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
}

/* ---------------------------------------------------------------------
   Clear Filters Button
   React: Button variant="outline" className="w-full" with X icon
   --------------------------------------------------------------------- */
.mk-clear-filters-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.625rem 1rem !important;
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.375rem !important; /* rounded-md */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
}

.mk-clear-filters-btn:hover {
  background: hsl(var(--muted)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

.mk-clear-filters-btn svg {
  width: 1rem !important;
  height: 1rem !important;
  stroke: currentColor !important;
}

/* Clear filters button visibility control */
.mk-clear-filters-btn[data-visible="false"] {
  display: none !important;
}

.mk-clear-filters-btn[data-visible="true"],
.mk-clear-filters-btn.visible {
  display: flex !important;
}

/* Toggle track active state when checkbox is checked */
.mk-sqf-toggle input:checked + .mk-sqf-toggle__track {
  background: hsl(var(--primary)) !important;
}

.mk-sqf-toggle input:checked + .mk-sqf-toggle__track .mk-sqf-toggle__thumb {
  transform: translateX(1.25rem) !important;
}

/* Also handle .is-active class set by JS */
.mk-sqf-toggle__track.is-active {
  background: hsl(var(--primary)) !important;
}

.mk-sqf-toggle__track.is-active .mk-sqf-toggle__thumb {
  transform: translateX(1.25rem) !important;
}

/* ==========================================================================
   END SECTION S313: CATALOG CSS GRID LAYOUT
   ========================================================================== */
   SECTION 319: CATALOG AJAX FILTERS & FILTER CHIPS (SIDEBAR-UX-4)
   Task: AJAX filtering with URL state sync and applied filter chips

   Features:
   - Loading spinner overlay during AJAX requests
   - Applied filter chips above product grid
   - Individual filter removal from chips
   - Debounced filter updates (300ms)
   ========================================================================== */

/* ---------------------------------------------------------------------
   319-1: Loading Spinner Overlay
   Shows during AJAX filter requests for visual feedback
   --------------------------------------------------------------------- */
.mk-product-grid.mk-loading {
  position: relative !important;
  min-height: 200px !important;
}

.mk-loading-spinner {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
}

.mk-spinner-icon {
  width: 32px !important;
  height: 32px !important;
  color: hsl(var(--primary)) !important;
  animation: mk-spin 1s linear infinite !important;
}

@keyframes mk-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------------------
   319-2: Applied Filter Chips Container
   Displayed above product grid when filters are active
   React: flex flex-wrap gap-2 mb-4
   --------------------------------------------------------------------- */
.mk-filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  margin-bottom: 1rem !important; /* mb-4 = 16px */
  padding: 0.75rem 0 !important; /* py-3 */
}

.mk-filter-chips__label {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
  font-weight: 500 !important;
  margin-right: 0.25rem !important; /* mr-1 */
}

/* ---------------------------------------------------------------------
   319-3: Individual Filter Chip
   React: inline-flex items-center gap-1 px-3 py-1 rounded-full
          bg-muted text-sm font-medium hover:bg-muted/80
   --------------------------------------------------------------------- */
.mk-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important; /* gap-1.5 = 6px */
  padding: 0.25rem 0.75rem !important; /* py-1 px-3 */
  background: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important;
  line-height: 1.5 !important;
  border: none !important;
  border-radius: 9999px !important; /* rounded-full */
  cursor: pointer !important;
  transition: background-color 200ms ease, color 200ms ease !important;
}

.mk-filter-chip:hover {
  background: hsl(var(--muted-foreground) / 0.15) !important;
}

.mk-filter-chip:focus-visible {
  outline: 2px solid hsl(var(--primary)) !important;
  outline-offset: 2px !important;
}

.mk-filter-chip__label {
  white-space: nowrap !important;
}

.mk-filter-chip__icon {
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
  opacity: 0.7 !important;
  transition: opacity 200ms ease !important;
}

.mk-filter-chip:hover .mk-filter-chip__icon {
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------
   319-4: Clear All Filters Button (in chips row)
   React: text-sm text-muted-foreground hover:text-primary underline
   --------------------------------------------------------------------- */
.mk-filter-chips__clear {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--muted-foreground)) !important;
  background: transparent !important;
  border: none !important;
  padding: 0.25rem 0.5rem !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 200ms ease !important;
  margin-left: 0.5rem !important;
}

.mk-filter-chips__clear:hover {
  color: hsl(var(--primary)) !important;
}

.mk-filter-chips__clear:focus-visible {
  outline: 2px solid hsl(var(--primary)) !important;
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------
   319-5: Responsive adjustments for filter chips
   Mobile: smaller text, tighter spacing
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mk-filter-chips {
    gap: 0.375rem !important; /* gap-1.5 on mobile */
    padding: 0.5rem 0 !important;
  }

  .mk-filter-chips__label {
    font-size: 0.75rem !important; /* text-xs on mobile */
    width: 100% !important;
    margin-bottom: 0.25rem !important;
  }

  .mk-filter-chip {
    font-size: 0.75rem !important; /* text-xs on mobile */
    padding: 0.1875rem 0.5rem !important; /* py-0.75 px-2 */
  }

  .mk-filter-chip__icon {
    width: 12px !important;
    height: 12px !important;
  }

  .mk-filter-chips__clear {
    font-size: 0.75rem !important;
  }
}

/* ---------------------------------------------------------------------
   319-6: Animation for chip appearance
   Subtle fade-in when chips are added
   --------------------------------------------------------------------- */
@keyframes mk-chip-appear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.mk-filter-chip {
  animation: mk-chip-appear 0.2s ease-out !important;
}

/* ==========================================================================
   END SECTION 319: CATALOG AJAX FILTERS & FILTER CHIPS
   ========================================================================== */

/* ============================================
   SECTION 320: AJAX FEEDBACK ELEMENTS
   Date: 2026-03-27
   Purpose: Loading spinner, error messages, no results, filter chips
   ============================================ */

/* Loading Spinner */
.mk-loading-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: hsl(var(--card));
  padding: 1.5rem 2rem;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-elegant);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mk-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  border-radius: 50%;
  animation: mk-spin 0.8s linear infinite;
}

@keyframes mk-spin {
  to { transform: rotate(360deg); }
}

.mk-loading-text {
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}

/* Error Message */
.mk-error-message {
  background: hsl(0 65% 95%);
  border-left: 4px solid hsl(0 65% 50%);
  padding: 1rem 1.5rem;
  border-radius: 0 0.25rem 0.25rem 0;
  color: hsl(0 65% 30%);
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* No Results State */
.mk-no-results {
  padding: 4rem 2rem;
  text-align: center;
  background: hsl(var(--card));
  border-radius: 0.5rem;
  margin: 2rem 0;
}

.mk-no-results__content {
  max-width: 400px;
  margin: 0 auto;
}

.mk-no-results svg {
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem;
  opacity: 0.6;
}

.mk-no-results h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: hsl(var(--foreground));
}

.mk-no-results p {
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.mk-no-results__clear {
  display: inline-flex;
}

/* Active Filter Chips */
.mk-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mk-active-filters:empty {
  display: none;
}

.mk-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: hsl(var(--muted));
  border-radius: 9999px;
  font-size: 0.75rem;
  color: hsl(var(--foreground));
}

.mk-filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: hsl(var(--foreground) / 0.1);
  border-radius: 50%;
  cursor: pointer;
  color: hsl(var(--foreground));
  font-size: 12px;
  line-height: 1;
  transition: background 0.2s;
}

.mk-filter-chip__remove:hover {
  background: hsl(var(--foreground) / 0.2);
}

/* Pagination Styling */
.wp-block-woocommerce-product-collection-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border));
}

.wp-block-woocommerce-product-collection-pagination a,
.wp-block-woocommerce-product-collection-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: all 0.2s;
}

.wp-block-woocommerce-product-collection-pagination a:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.wp-block-woocommerce-product-collection-pagination .current {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* ============================================
   END SECTION 320: AJAX FEEDBACK ELEMENTS
   ============================================ */

/* =================================================================
   SECTION S321: HOMEPAGE HERO V4 FINAL FIXES
   Agent: 1 | Date: 2026-03-28

   React Source: src/components/home/HeroSection.tsx

   CUSTOM TAILWIND CONFIG (CRITICAL):
   - rounded-sm = 0px (NOT 2px)
   - rounded-md = 2px (NOT 6px)
   - rounded-lg = 4px (NOT 8px)

   Issues Fixed:
   - H1-1: Height 80vh mobile, 90vh at lg:1024px+ (NOT 768px!)
   - H1-2: Vertical alignment flex items-center (centered, not top)
   - H1-8: Button padding py-6 px-8 = 1.5rem 2rem (24px 32px)
   - H1-9: Button height ~3.5rem (56px) from h-14 approximation
   ================================================================= */

/* ---------------------------------------------------------------------
   H1-1: Height breakpoints - DEFINITIVE
   React: h-[80vh] lg:h-[90vh]
   - Default (mobile): 80vh
   - lg breakpoint (1024px+): 90vh
   - Tailwind lg = 1024px, NOT 768px!
   --------------------------------------------------------------------- */
.mk-hero,
.mk-hero.wp-block-cover,
.wp-block-cover.mk-hero,
.home .wp-block-cover.mk-hero,
body.home .wp-block-cover.mk-hero {
  min-height: 80vh !important;
  height: 80vh !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* KEEP 80vh between md and lg - critical! */
  .mk-hero,
  .mk-hero.wp-block-cover,
  .wp-block-cover.mk-hero,
  .home .wp-block-cover.mk-hero,
  body.home .wp-block-cover.mk-hero {
    min-height: 80vh !important;
    height: 80vh !important;
  }
}

@media (min-width: 1024px) {
  /* ONLY at lg (1024px+) switch to 90vh */
  .mk-hero,
  .mk-hero.wp-block-cover,
  .wp-block-cover.mk-hero,
  .home .wp-block-cover.mk-hero,
  body.home .wp-block-cover.mk-hero {
    min-height: 90vh !important;
    height: 90vh !important;
  }
}

/* ---------------------------------------------------------------------
   H1-2: Vertical alignment - DEFINITIVE
   React: <div className="... h-full flex items-center">
   Content must be vertically CENTERED, not at top
   --------------------------------------------------------------------- */
.mk-hero,
.mk-hero.wp-block-cover {
  display: flex !important;
  align-items: center !important;
}

.mk-hero .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  height: 100% !important;
  min-height: inherit !important;
}

/* Content max-width: max-w-2xl = 42rem (672px) */
.mk-hero__content,
.mk-hero__inner,
.mk-hero .wp-block-cover__inner-container > * {
  max-width: 42rem !important;
}

/* ---------------------------------------------------------------------
   H1-8 & H1-9: Button padding and height - DEFINITIVE
   React: <Button variant="catalog/gold" size="lg" className="text-lg px-8 py-6">

   Computed values from Tailwind:
   - py-6 = padding-top/bottom: 1.5rem (24px)
   - px-8 = padding-left/right: 2rem (32px)
   - text-lg = font-size: 1.125rem (18px), line-height: 1.75rem (28px)
   - h-14 equivalent = 3.5rem (56px) - implicit from padding + text
   --------------------------------------------------------------------- */
.mk-hero__actions .wp-block-button__link,
.mk-hero .wp-block-buttons .wp-block-button__link,
.mk-hero .mk-btn-catalog,
.mk-hero .mk-btn-gold,
body.home .mk-hero .wp-block-button__link {
  padding: 1.5rem 2rem !important; /* py-6 px-8 = 24px 32px */
  min-height: 3.5rem !important; /* ~56px, h-14 equivalent */
  height: auto !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  line-height: 1.75 !important; /* text-lg default line-height */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Button container flex layout with gap-4 */
.mk-hero__actions,
.mk-hero .wp-block-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important; /* gap-4 = 16px */
}

/* =================================================================
   END SECTION S321: HOMEPAGE HERO V4 FINAL FIXES
   ================================================================= */

/* ==========================================================================
   SECTION S322: HEADER NAVBAR CONSISTENCY (FULL VS HALF SCREEN)
   Agent 3 - 2026-03-29

   React source: src/components/layout/Header.tsx
   - Container: px-4 (1rem) at all widths, max 1400px
   - Header height: h-20 (5rem)
   - Logo: h-14 (3.5rem)
   - Nav gap: gap-8 (2rem)
   - Right actions: gap-4 (1rem)

   Fixes:
   1. Prevent container padding override at ultra-wide viewports
   2. Remove unnecessary row gap (justify-between handles spacing)
   3. Ensure nav gap applies to ALL navigation lists
   4. Fix logo flex alignment at all widths
   ========================================================================== */

/* ------------------------------------------------------------------
   FIX 1: Container Padding Lock
   Ensure px-4 (1rem) stays consistent at ALL viewport widths
   ------------------------------------------------------------------ */
.mk-header__inner,
.mk-header > .wp-block-group,
.site-header > .wp-block-group {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Lock padding even at ultra-wide (2560px+) */
@media (min-width: 1536px) {
  .mk-header__inner,
  .mk-header > .wp-block-group,
  .site-header > .wp-block-group {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ------------------------------------------------------------------
   FIX 2: Header Row Gap Removal
   React uses justify-between with NO gap
   Gap creates uneven spacing at narrow desktop widths
   ------------------------------------------------------------------ */
.mk-header__row,
.mk-header > .wp-block-group > .wp-block-group,
.site-header .wp-block-group[class*="is-layout-flex"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 5rem !important; /* h-20 = 80px */
  gap: 0 !important; /* Remove gap - justify-between handles spacing */
}

/* ------------------------------------------------------------------
   FIX 3: Navigation Gap - ALL Lists (including nested)
   Ensure gap-8 (2rem) applies to nav items at all nesting levels
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .mk-header .wp-block-navigation__container,
  .site-header .wp-block-navigation__container,
  .mk-header .wp-block-navigation > ul,
  .site-header .wp-block-navigation > ul,
  .mk-header .wp-block-navigation-item__content,
  .site-header .wp-block-navigation-item__content {
    gap: 2rem !important; /* gap-8 = 32px */
  }

  /* Ensure parent navigation items with dropdowns also respect gap */
  .mk-header .wp-block-navigation-item.has-child,
  .site-header .wp-block-navigation-item.has-child {
    margin-right: 0 !important; /* Remove any margin that could override gap */
    position: relative !important; /* Required for absolute submenu positioning */
  }
}

/* ------------------------------------------------------------------
   FIX 4: Logo Container Flex Alignment
   Ensure logo stays vertically centered at all viewport widths
   ------------------------------------------------------------------ */
.mk-header__logo,
.mk-header .wp-block-site-logo,
.site-header .wp-block-site-logo {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
}

.mk-header__logo img,
.mk-header .wp-block-site-logo img,
.site-header .wp-block-site-logo img,
.mk-header .custom-logo,
.site-header .custom-logo {
  height: 3.5rem !important; /* h-14 = 56px */
  width: auto !important;
  object-fit: contain !important;
  max-height: 3.5rem !important;
  max-width: none !important; /* Prevent block width override */
  display: block !important; /* Remove inline spacing */
}

/* ------------------------------------------------------------------
   FIX 5: Right Actions Container Gap Lock
   React: gap-4 (1rem) between search, cart, user icons
   ------------------------------------------------------------------ */
.mk-header .mk-header-actions,
.mk-header__actions,
.site-header .mk-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important; /* gap-4 = 16px */
  flex-shrink: 0 !important;
}

/* ------------------------------------------------------------------
   FIX 6: Viewport-Specific Consistency Locks
   Prevent any FSE block overrides at specific breakpoints
   ------------------------------------------------------------------ */

/* Desktop (1024px - 1280px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mk-header > .wp-block-group,
  .site-header > .wp-block-group {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Desktop XL (1280px - 1536px) */
@media (min-width: 1280px) and (max-width: 1535px) {
  .mk-header > .wp-block-group,
  .site-header > .wp-block-group {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Desktop 2XL (1536px+) */
@media (min-width: 1536px) {
  .mk-header > .wp-block-group,
  .site-header > .wp-block-group {
    max-width: 1400px !important; /* Lock at React container max */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Ultra-wide (2560px+) - absolute lock */
@media (min-width: 2560px) {
  .mk-header > .wp-block-group,
  .site-header > .wp-block-group {
    max-width: 1400px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .mk-header .wp-block-navigation__container,
  .site-header .wp-block-navigation__container {
    gap: 2rem !important;
  }
}

/* ==========================================================================
   END SECTION S322: HEADER NAVBAR CONSISTENCY
   ========================================================================== */

/* ==========================================================================
   SECTION 329: PARDAVIMAS PAGE V4 FINAL FIXES (2026-03-28)
   ==========================================================================

   Agent 10: Pardavimas Page Implementation - Final Reinforcement
   Reference: /docs/V4-PARITY-FIX-IMPLEMENTATION-REPORT.md

   React Source: src/pages/HowToSell.tsx

   This section provides MAXIMUM SPECIFICITY overrides to ensure all
   Pardavimas page styles match React 1:1, reinforcing S309.

   ISSUES ADDRESSED:
   - P10-1: Step cards NO border (remove border)
   - P10-2: Step cards border-radius = 0 (rounded-sm)
   - P10-3: Step icon size = 40px (w-10 h-10)
   - P10-5: Form container NO border
   - P10-6: Form container border-radius = 0
   - P10-7: File upload dropzone with dashed border styling
   - P10-8: Commission text 80% opacity
   - Container max-width: max-w-5xl (1024px)

   ========================================================================== */

/* ---------------------------------------------------------------------
   P10-1/P10-2: Step cards - NO border, radius 0 (MAXIMUM SPECIFICITY)
   React: bg-card rounded-sm shadow-card p-6 relative (NO border class)
   rounded-sm in this project = 0 (calc(var(--radius) - 4px))
   --------------------------------------------------------------------- */
html body.page-id-17 .mk-step-card,
html body.page-id-17 .mk-sell-step,
html body.page-id-17 .mk-sell-step-card,
html body.page-id-17 .wp-block-group.mk-step-card,
html body.page-id-17 .wp-block-group.mk-sell-step,
html body.page-id-17 .wp-block-group.mk-sell-step-card,
html body.page-id-17 [class*="step-card"],
html body.page-id-17 [class*="sell-step"],
html body[class*="pardavimas"] .mk-step-card,
html body[class*="pardavimas"] .mk-sell-step-card {
  border: 0 none transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: hsl(40 30% 96%) !important;
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important;
  padding: 1.5rem !important;
  position: relative !important;
  transition: box-shadow 300ms ease !important;
}

html body.page-id-17 .mk-step-card:hover,
html body.page-id-17 .mk-sell-step:hover,
html body.page-id-17 .mk-sell-step-card:hover,
html body[class*="pardavimas"] .mk-step-card:hover,
html body[class*="pardavimas"] .mk-sell-step-card:hover {
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;
}

/* ---------------------------------------------------------------------
   P10-3: Step icons 40px (w-10 h-10) (MAXIMUM SPECIFICITY)
   React: <step.icon className="w-10 h-10 text-primary mb-4" />
   This is the main icon, NOT the number badge (badge is 32px w-8 h-8)
   --------------------------------------------------------------------- */
html body.page-id-17 .mk-step-card svg,
html body.page-id-17 .mk-sell-step svg,
html body.page-id-17 .mk-sell-step-card svg,
html body.page-id-17 .mk-step-icon svg,
html body.page-id-17 .mk-sell-step-icon svg,
html body.page-id-17 .wp-block-group.mk-step-card svg,
html body.page-id-17 [class*="step"] svg:not(.mk-step-badge svg),
html body[class*="pardavimas"] .mk-step-card svg,
html body[class*="pardavimas"] .mk-sell-step-card svg {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  max-width: 2.5rem !important;
  max-height: 2.5rem !important;
  color: hsl(160 30% 28%) !important;
  margin-bottom: 1rem !important;
}

/* ---------------------------------------------------------------------
   P10-5/P10-6: Form container - NO border, radius 0 (MAXIMUM SPECIFICITY)
   React: bg-card rounded-sm shadow-elegant p-8 mb-12 (NO border class)
   --------------------------------------------------------------------- */
html body.page-id-17 .wpcf7,
html body.page-id-17 .wpcf7-form,
html body.page-id-17 .mk-submission-form,
html body.page-id-17 .mk-form-container,
html body.page-id-17 .wp-block-group:has(.wpcf7),
html body.page-id-17 form.wpcf7-form,
html body[class*="pardavimas"] .wpcf7,
html body[class*="pardavimas"] .wpcf7-form {
  border: 0 none transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
}

/* Form container card styling */
html body.page-id-17 .wpcf7-form,
html body.page-id-17 form.wpcf7-form,
html body[class*="pardavimas"] .wpcf7-form {
  background: hsl(40 30% 96%) !important;
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;
  padding: 2rem !important;
}

/* ---------------------------------------------------------------------
   P10-7: File upload dropzone (MAXIMUM SPECIFICITY)
   React: border-2 border-dashed border-border rounded-sm p-8 text-center
          hover:border-primary/50 transition-colors
   --------------------------------------------------------------------- */
html body.page-id-17 input[type="file"],
html body.page-id-17 .wpcf7-file,
html body.page-id-17 input[type="file"].wpcf7-form-control,
html body.page-id-17 .mk-file-upload input[type="file"],
html body[class*="pardavimas"] input[type="file"],
html body[class*="pardavimas"] .wpcf7-file {
  display: block !important;
  width: 100% !important;
  padding: 2rem !important;
  border: 2px dashed hsl(36 20% 82%) !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: border-color 150ms ease, background-color 150ms ease !important;
  text-align: center !important;
}

html body.page-id-17 input[type="file"]:hover,
html body.page-id-17 .wpcf7-file:hover,
html body[class*="pardavimas"] input[type="file"]:hover,
html body[class*="pardavimas"] .wpcf7-file:hover {
  border-color: hsl(160 30% 28% / 0.5) !important;
  background: hsl(40 30% 96% / 0.5) !important;
}

/* File upload button styling */
html body.page-id-17 input[type="file"]::file-selector-button,
html body[class*="pardavimas"] input[type="file"]::file-selector-button {
  border: none !important;
  background: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.25rem !important;
  cursor: pointer !important;
  margin-right: 1rem !important;
  transition: background-color 150ms ease !important;
}

html body.page-id-17 input[type="file"]::file-selector-button:hover,
html body[class*="pardavimas"] input[type="file"]::file-selector-button:hover {
  background: hsl(160 30% 23%) !important;
}

/* ---------------------------------------------------------------------
   P10-8: Commission text 80% opacity (MAXIMUM SPECIFICITY)
   React: text-primary-foreground/80 on both p and ul elements
   --------------------------------------------------------------------- */
html body.page-id-17 .mk-commission-section p,
html body.page-id-17 .mk-commission-section li,
html body.page-id-17 .mk-commission-section ul,
html body.page-id-17 .has-primary-background-color p,
html body.page-id-17 .has-primary-background-color li,
html body.page-id-17 .has-primary-background-color ul,
html body.page-id-17 .has-forest-green-background-color p,
html body.page-id-17 .has-forest-green-background-color li,
html body.page-id-17 .has-forest-green-background-color ul,
html body.page-id-17 .wp-block-group.has-primary-background-color p,
html body.page-id-17 .wp-block-group.has-primary-background-color li,
html body[class*="pardavimas"] .mk-commission-section p,
html body[class*="pardavimas"] .mk-commission-section li {
  color: hsl(40 30% 96% / 0.8) !important;
}

/* Commission headings stay 100% opacity */
html body.page-id-17 .mk-commission-section h2,
html body.page-id-17 .mk-commission-section h3,
html body.page-id-17 .has-primary-background-color h2,
html body.page-id-17 .has-primary-background-color h3,
html body.page-id-17 .has-forest-green-background-color h2,
html body.page-id-17 .has-forest-green-background-color h3,
html body[class*="pardavimas"] .mk-commission-section h2,
html body[class*="pardavimas"] .mk-commission-section h3 {
  color: hsl(40 30% 96%) !important;
}

/* ---------------------------------------------------------------------
   Container max-width: max-w-5xl (1024px) (MAXIMUM SPECIFICITY)
   React: <div className="max-w-5xl mx-auto">
   --------------------------------------------------------------------- */
html body.page-id-17 .entry-content,
html body.page-id-17 .mk-inner-content,
html body.page-id-17 article > .entry-content,
html body[class*="pardavimas"] .entry-content,
html body[class*="pardavimas"] .mk-inner-content {
  max-width: 64rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* ==========================================================================
   END SECTION 329: PARDAVIMAS PAGE V4 FINAL FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S325: SINGLE PRODUCT V4 FINAL FIXES (2026-03-28)
   ==========================================================================

   V4 Agent 6: Single Product Page - Final Implementation
   Reference: /docs/V4-PARITY-FIX-IMPLEMENTATION-REPORT.md

   FIXES IMPLEMENTED:
   - SP6-7: Quick bid grid 5 columns, 0.5rem gap
     React: <div className="grid grid-cols-5 gap-2">
     gap-2 = 0.5rem (8px)
   - SP6-1 to SP6-4: Reinforced border-radius: 0 for all containers
   - SP6-5: Trust badges bg-muted/30 (reinforced)
   - SP6-6: Timer font sizes (reinforced)

   React Source: src/pages/ArtworkDetail.tsx
   Custom Tailwind config: rounded-sm = calc(var(--radius) - 4px) = 0px
   ========================================================================== */

/* ---------------------------------------------------------------------
   SP6-7: Quick bid buttons grid - 5 columns, 0.5rem gap
   React: grid grid-cols-5 gap-2 (line 352)
   --------------------------------------------------------------------- */
.mk-quick-bid-grid,
.single-product .quick-bid-buttons,
.woocommerce div.product .bid-form .quick-bid-buttons,
.woocommerce div.product .mk-bid-form .quick-bid-grid,
.auction-bid-form .quick-bid-buttons,
#mk-quick-bid-buttons,
.mk-bid-form .grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important; /* grid-cols-5 */
  gap: 0.5rem !important; /* gap-2 = 8px */
}

/* Quick bid button styling */
.mk-quick-bid-grid button,
.quick-bid-buttons button,
#mk-quick-bid-buttons button,
.single-product .quick-bid-buttons .btn,
.single-product .quick-bid-buttons .button {
  font-size: 0.75rem !important; /* text-xs */
  padding: 0.5rem !important; /* Compact for 5 columns */
  border-radius: 0 !important; /* rounded-sm = 0px in custom config */
  min-width: 0 !important;
  white-space: nowrap !important;
}

/* ---------------------------------------------------------------------
   SP6-1 to SP6-4: REINFORCED - All containers border-radius: 0
   Critical: This overrides any upstream WooCommerce/theme defaults
   --------------------------------------------------------------------- */

/* Image container - maximum specificity */
body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .woocommerce-product-gallery__wrapper,
body.single-product div.product .woocommerce-product-gallery img,
body.single-product div.product .flex-viewport,
body.single-product .mk-product-image,
.woocommerce-product-gallery__image {
  border-radius: 0 !important;
}

/* All card containers with maximum specificity */
body.single-product div.product .auction-timer,
body.single-product div.product .auction-time-left,
body.single-product div.product .mk-timer-card,
body.single-product div.product .mk-timer-full,
body.single-product div.product .woocommerce-auction-timer {
  border-radius: 0 !important;
}

/* Info and pricing cards */
body.single-product div.product .product-meta-card,
body.single-product div.product .product-info-card,
body.single-product div.product .product-pricing,
body.single-product div.product .mk-info-card,
body.single-product div.product .mk-pricing-card,
body.single-product div.product .auction-price,
body.single-product div.product .summary .wp-block-group {
  border-radius: 0 !important;
}

/* Bid form and related containers */
body.single-product div.product .bid-form,
body.single-product div.product .mk-bid-form,
body.single-product div.product .auction-bid,
body.single-product div.product .mk-auth-prompt,
body.single-product div.product .mk-upcoming-notice,
body.single-product div.product .mk-post-auction-buy,
body.single-product div.product .mk-post-auction-banner {
  border-radius: 0 !important;
}

/* Trust badge containers and individual badges */
body.single-product div.product .mk-trust-badges,
body.single-product div.product .trust-badges,
body.single-product div.product .mk-trust-badges > div,
body.single-product div.product .trust-badges > div,
body.single-product div.product .mk-trust-badge,
body.single-product div.product .trust-badge {
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------
   SP6-5: REINFORCED - Trust badges 30% opacity background
   React: bg-muted/30 = hsl(36 20% 90% / 0.3)
   --------------------------------------------------------------------- */
body.single-product div.product .mk-trust-badges > div,
body.single-product div.product .trust-badges > div,
body.single-product div.product .mk-trust-badge {
  background-color: hsl(36 20% 90% / 0.3) !important;
  padding: 1rem !important; /* p-4 = 16px */
}

/* Trust badge grid layout - React: grid grid-cols-3 gap-4 mt-6 */
body.single-product div.product .mk-trust-badges,
body.single-product div.product .trust-badges {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important; /* gap-4 = 16px */
  margin-top: 1.5rem !important; /* mt-6 = 24px */
  background-color: transparent !important;
}

/* Trust badge content styling */
body.single-product div.product .mk-trust-badges > div,
body.single-product div.product .trust-badges > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

body.single-product div.product .mk-trust-badges svg,
body.single-product div.product .trust-badges svg {
  width: 1.5rem !important; /* w-6 */
  height: 1.5rem !important; /* h-6 */
  color: hsl(var(--primary)) !important;
  margin-bottom: 0.5rem !important; /* mb-2 */
}

body.single-product div.product .mk-trust-badges span,
body.single-product div.product .trust-badges span {
  font-size: 0.75rem !important; /* text-xs */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
}

/* ---------------------------------------------------------------------
   SP6-6: REINFORCED - Timer numbers responsive font sizes
   React: text-3xl md:text-4xl font-display font-bold
   text-3xl = 1.875rem (30px)
   text-4xl = 2.25rem (36px)
   --------------------------------------------------------------------- */
body.single-product div.product .auction-timer .timer-value,
body.single-product div.product .mk-timer-card .timer-digit,
body.single-product div.product .mk-timer-full .mk-timer-value,
body.single-product div.product .woocommerce-auction-timer .timer-value,
body.single-product div.product .auction-time-left .timer-value,
body.single-product div.product .mk-auction-timer .timer-digit {
  font-size: 1.875rem !important; /* Mobile: text-3xl = 30px */
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

@media (min-width: 768px) {
  body.single-product div.product .auction-timer .timer-value,
  body.single-product div.product .mk-timer-card .timer-digit,
  body.single-product div.product .mk-timer-full .mk-timer-value,
  body.single-product div.product .woocommerce-auction-timer .timer-value,
  body.single-product div.product .auction-time-left .timer-value,
  body.single-product div.product .mk-auction-timer .timer-digit {
    font-size: 2.25rem !important; /* Desktop: md:text-4xl = 36px */
  }
}

/* Timer grid layout - React: grid grid-cols-4 gap-3 */
body.single-product div.product .auction-timer .timer-grid,
body.single-product div.product .mk-timer-full .timer-grid,
body.single-product div.product .woocommerce-auction-timer .timer-units {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important; /* gap-3 = 12px */
}

/* Timer labels styling */
body.single-product div.product .auction-timer .timer-label,
body.single-product div.product .mk-timer-full .timer-label,
body.single-product div.product .woocommerce-auction-timer .timer-label {
  font-size: 0.75rem !important; /* text-xs = 12px */
  margin-top: 0.25rem !important; /* mt-1 = 4px */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
}

/* ==========================================================================
   END SECTION S325: SINGLE PRODUCT V4 FINAL FIXES
   ========================================================================== */

/* =================================================================
   SECTION S324: KATALOGAS GRID & TOOLBAR V4 FIXES
   Agent: 5 | Date: 2026-03-28

   React Source: src/pages/Catalog.tsx (lines 247-307)

   Issues Fixed:
   - 5.1 (HIGH): Sort dropdown width - 200px exact (w-[200px])
   - 5.2 (HIGH): Sort dropdown height - 40px (h-10 = 2.5rem)
   - 5.3 (HIGH): Sort dropdown border-radius - 2px (rounded-md = calc(var(--radius) - 2px) = 2px)
   - 5.4 (MEDIUM): View toggle button height - 36px (h-9 = 2.25rem)
   - 5.5 (MEDIUM): Result count font-size - 1rem (text-base = 16px)
   - 5.6 (HIGH): Product grid - 3 columns max at xl (xl:grid-cols-3)

   Tailwind Reference:
   - h-9 = 2.25rem (36px)
   - h-10 = 2.5rem (40px)
   - rounded-md = calc(var(--radius) - 2px) = calc(0.25rem - 2px) = 2px
   - text-base = 1rem (16px)
   - xl: = 1280px min-width
   ================================================================= */

/* 5.1 + 5.2 + 5.3: Sort dropdown — exact React SelectTrigger parity
   React: "h-10 w-[200px] rounded-md" on SelectTrigger
   h-10 = 2.5rem = 40px
   w-[200px] = 200px exact (not min-width)
   rounded-md = calc(var(--radius) - 2px) = 2px */
.mk-sort-dropdown,
select.mk-sort-dropdown,
.mk-catalog-toolbar select,
.mk-catalog__toolbar select,
.woocommerce-ordering select,
.orderby {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 2.5rem !important; /* 40px = h-10 */
  border-radius: 2px !important; /* rounded-md = calc(0.25rem - 2px) */
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  font-size: 0.875rem !important; /* text-sm */
  border: 1px solid hsl(var(--input)) !important;
  background-color: hsl(var(--background)) !important;
}

/* 5.4: View toggle buttons — exact React Button size="sm" parity
   React: size="sm" = h-9 px-4 = 36px height
   Container: "flex border rounded-md" = 1px border, rounded-md = 2px radius */
.mk-view-toggle {
  display: flex !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 2px !important; /* rounded-md = 2px */
  overflow: hidden !important;
}

.mk-view-toggle button,
.mk-view-toggle a,
.mk-catalog-toolbar .view-toggle button,
.mk-catalog__toolbar .view-toggle button {
  height: 2.25rem !important; /* 36px = h-9 */
  min-height: 2.25rem !important;
  padding: 0 1rem !important; /* px-4 */
  border: none !important;
  border-radius: 0 !important; /* flush buttons in container */
}

/* View toggle first/last child border-radius (React: rounded-r-none, rounded-l-none) */
.mk-view-toggle button:first-child,
.mk-view-toggle a:first-child {
  border-radius: 0 !important;
}

.mk-view-toggle button:last-child,
.mk-view-toggle a:last-child {
  border-radius: 0 !important;
}

/* 5.5: Result count — font-size 1rem (text-base = 16px)
   React: <p className="text-muted-foreground"> = default text-base size */
.mk-result-count,
.woocommerce-result-count,
.wc-block-product-results-count,
p.woocommerce-result-count,
.catalog-result-count,
.mk-catalog__toolbar .result-count {
  font-size: 1rem !important; /* text-base = 16px */
  line-height: 1.5 !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* Result count number should be semibold foreground */
.mk-result-count .count,
.mk-result-count strong,
.woocommerce-result-count strong,
.woocommerce-result-count b {
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--foreground)) !important;
}

/* 5.6: Product grid — 3 columns max at xl with sidebar
   React: "grid sm:grid-cols-2 xl:grid-cols-3 gap-6"
   Note: With sidebar taking lg:col-span-1, main content is lg:col-span-3
   So product grid inside main should be: 2 cols at sm, 3 cols at xl */
.mk-catalog__products,
.mk-product-grid,
.woocommerce ul.products,
.wp-block-woocommerce-product-collection .wc-block-product-template,
.wc-block-grid__products {
  display: grid !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
}

/* Mobile: 1 column */
@media (max-width: 639px) {
  .mk-catalog__products,
  .mk-product-grid,
  .woocommerce ul.products,
  .wp-block-woocommerce-product-collection .wc-block-product-template,
  .wc-block-grid__products {
    grid-template-columns: 1fr !important;
  }
}

/* sm (640px+): 2 columns */
@media (min-width: 640px) and (max-width: 1279px) {
  .mk-catalog__products,
  .mk-product-grid,
  .woocommerce ul.products,
  .wp-block-woocommerce-product-collection .wc-block-product-template,
  .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* xl (1280px+): 3 columns max (with sidebar present) */
@media (min-width: 1280px) {
  .mk-catalog__products,
  .mk-product-grid,
  .woocommerce ul.products,
  .wp-block-woocommerce-product-collection .wc-block-product-template,
  .wc-block-grid__products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ============================================
   END SECTION S324: KATALOGAS GRID & TOOLBAR V4 FIXES
   ============================================ */

/* ==========================================================================
   SECTION 321: HEADER DESKTOP V4 FINAL FIXES
   Agent: 2 | Date: 2026-03-28

   Reference: Header.tsx, SearchBar.tsx, button.tsx, index.css

   Issues Fixed:
   - H2-1: Search icon position must be LEFT of input (not right)
          React SearchBar.tsx line 72: absolute left-3 = 0.75rem
          React Input line 76: pl-9 = padding-left 2.25rem (36px)
   - H2-2: Account hover should use gold (accent) color, not gray (muted)
          React button.tsx line 16: ghost variant = hover:bg-accent hover:text-accent-foreground
          React index.css line 36: --accent: 42 55% 58% (GOLD)
          React index.css line 37: --accent-foreground: 160 30% 15% (forest dark)
   ========================================================================== */

/* ---------------------------------------------------------------------
   H2-1: Search Icon Position = LEFT (REINFORCED)

   React SearchBar.tsx line 72:
   - Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4"
   - left-3 = 0.75rem (12px)
   - w-4 h-4 = 1rem (16px)

   React Input line 76:
   - className="pl-9" = padding-left: 2.25rem (36px)

   This reinforces Section 206 with maximum specificity.
   --------------------------------------------------------------------- */
header .wp-block-search .wp-block-search__inside-wrapper,
.site-header .wp-block-search .wp-block-search__inside-wrapper,
.mk-header .wp-block-search .wp-block-search__inside-wrapper,
.mk-header__search .wp-block-search__inside-wrapper,
.mk-header-search .wp-block-search__inside-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* Search button/icon positioned LEFT */
header .wp-block-search .wp-block-search__button,
.site-header .wp-block-search .wp-block-search__button,
.mk-header .wp-block-search .wp-block-search__button,
.mk-header__search .wp-block-search__button,
.mk-header-search .wp-block-search__button {
  position: absolute !important;
  left: 0.75rem !important;           /* left-3 = 12px */
  right: auto !important;             /* Override any right positioning */
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 1rem !important;             /* w-4 = 16px */
  height: 1rem !important;            /* h-4 = 16px */
  min-width: 1rem !important;
  min-height: 1rem !important;
  z-index: 1 !important;
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  cursor: pointer !important;
  order: -1 !important;               /* Ensure icon comes first in flex order */
}

/* Search icon SVG sizing */
header .wp-block-search .wp-block-search__button svg,
.site-header .wp-block-search .wp-block-search__button svg,
.mk-header .wp-block-search .wp-block-search__button svg,
.mk-header__search .wp-block-search__button svg,
.mk-header-search .wp-block-search__button svg {
  width: 1rem !important;             /* w-4 = 16px */
  height: 1rem !important;            /* h-4 = 16px */
  color: inherit !important;
}

/* Search input with padding-left for icon space */
header .wp-block-search .wp-block-search__input,
.site-header .wp-block-search .wp-block-search__input,
.mk-header .wp-block-search .wp-block-search__input,
.mk-header__search .wp-block-search__input,
.mk-header-search .wp-block-search__input {
  padding-left: 2.25rem !important;   /* pl-9 = 36px (to clear icon) */
  padding-right: 0.75rem !important;  /* pr-3 = 12px */
  height: 2.25rem !important;         /* h-9 = 36px */
  border-radius: 0.375rem !important; /* rounded-md = 6px */
  background-color: hsl(36 20% 90% / 0.5) !important; /* bg-muted/50 */
  border: none !important;
  font-size: 0.875rem !important;     /* text-sm = 14px */
  width: 12rem !important;            /* w-48 = 192px */
  transition: width 200ms ease, box-shadow 200ms ease !important;
}

/* Search input hover/focus */
header .wp-block-search .wp-block-search__input:focus,
.site-header .wp-block-search .wp-block-search__input:focus,
.mk-header .wp-block-search .wp-block-search__input:focus,
.mk-header__search .wp-block-search__input:focus,
.mk-header-search .wp-block-search__input:focus {
  width: 16rem !important;            /* lg:w-64 = 256px on focus */
  box-shadow: 0 0 0 1px hsl(160 30% 28%) !important; /* ring-1 ring-primary */
  outline: none !important;
}

@media (min-width: 1024px) {
  header .wp-block-search .wp-block-search__input,
  .site-header .wp-block-search .wp-block-search__input,
  .mk-header .wp-block-search .wp-block-search__input,
  .mk-header__search .wp-block-search__input,
  .mk-header-search .wp-block-search__input {
    width: 16rem !important;          /* lg:w-64 = 256px */
  }
}

/* ---------------------------------------------------------------------
   H2-2: Account Icon Hover = GOLD (REINFORCED)

   React Header.tsx lines 127-128:
   - Button variant="ghost" size="icon"

   React button.tsx line 16:
   - ghost: "hover:bg-accent hover:text-accent-foreground rounded"

   React index.css:
   - line 36: --accent: 42 55% 58% = hsl(42 55% 58%) = GOLD (#C4A255)
   - line 37: --accent-foreground: 160 30% 15% = forest dark

   This reinforces Section 281 with maximum specificity.
   --------------------------------------------------------------------- */

/* Account link/button base styling */
header .mk-header__account-link,
.site-header .mk-header__account-link,
.mk-header .mk-header__account-link,
a.mk-header__account-link,
button.mk-header__account-link,
.mk-header__account a,
.mk-header__account button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;           /* w-10 = 40px (icon size) */
  height: 2.5rem !important;          /* h-10 = 40px */
  border-radius: 0.25rem !important;  /* rounded = 4px */
  background: transparent !important;
  color: hsl(160 30% 18%) !important; /* foreground */
  border: none !important;
  cursor: pointer !important;
  transition: background-color 200ms ease, color 200ms ease !important;
}

/* Account hover = GOLD background */
header .mk-header__account-link:hover,
.site-header .mk-header__account-link:hover,
.mk-header .mk-header__account-link:hover,
a.mk-header__account-link:hover,
button.mk-header__account-link:hover,
.mk-header__account a:hover,
.mk-header__account button:hover {
  background-color: hsl(42 55% 58%) !important; /* accent = GOLD */
  color: hsl(160 30% 15%) !important;           /* accent-foreground = forest dark */
}

/* Account icon SVG sizing */
header .mk-header__account-link svg,
.site-header .mk-header__account-link svg,
.mk-header .mk-header__account-link svg,
.mk-header__account svg {
  width: 1.25rem !important;          /* w-5 = 20px */
  height: 1.25rem !important;         /* h-5 = 20px */
  color: inherit !important;
}

/* ==========================================================================
   END SECTION 321: HEADER DESKTOP V4 FINAL FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S328: KONTAKTAI PAGE V4 FINAL FIXES (2026-03-28)
   ==========================================================================

   Agent 9: Kontaktai Page Implementation - Final Reinforcement
   Reference: /docs/V4-PARITY-FIX-IMPLEMENTATION-REPORT.md

   React Source: src/pages/Contact.tsx

   This section provides MAXIMUM SPECIFICITY overrides to ensure all
   Kontaktai page styles match React 1:1, reinforcing S308 and S288.

   CUSTOM TAILWIND CONFIG (from tailwind.config.ts):
   - rounded-sm = 0px (calc(var(--radius) - 4px))
   - rounded-md = 2px (calc(var(--radius) - 2px))

   Issues Fixed:
   - K9-1: Form card border-radius = 0 (rounded-sm)
   - K9-2: Input border-radius = 2px (rounded-md = 0.125rem)
   - K9-3: Contact info circular icon backgrounds (48px, rounded-full, bg-primary/10)
   - K9-4: 2-column grid layout at lg breakpoint (1024px)
   - K9-5: Form shadow-elegant
   ========================================================================== */

/* ---------------------------------------------------------------------
   K9-1 REINFORCED: Form card border-radius = 0
   React: <div className="bg-card rounded-sm shadow-elegant p-8">
   rounded-sm = calc(var(--radius) - 4px) = calc(0.25rem - 4px) = 0
   --------------------------------------------------------------------- */
body.page-id-15 .mk-contact-form-card,
body.page-id-15 .wpcf7,
body.page-id-15 .wpcf7-form,
body.page-id-15 .wp-block-group.has-background,
body.page-id-15 form.wpcf7-form,
body.page-id-15 div.wpcf7 {
  border-radius: 0 !important; /* K9-1: rounded-sm = 0px */
}

/* ---------------------------------------------------------------------
   K9-2 REINFORCED: Input border-radius = 2px
   React: <Input /> uses rounded-md = calc(var(--radius) - 2px) = 0.125rem
   --------------------------------------------------------------------- */
body.page-id-15 input[type="text"],
body.page-id-15 input[type="email"],
body.page-id-15 input[type="tel"],
body.page-id-15 textarea,
body.page-id-15 select,
body.page-id-15 .wpcf7 input[type="text"],
body.page-id-15 .wpcf7 input[type="email"],
body.page-id-15 .wpcf7 input[type="tel"],
body.page-id-15 .wpcf7 textarea,
body.page-id-15 .wpcf7 select,
body.page-id-15 .wpcf7-form-control:not([type="submit"]) {
  border-radius: 0.125rem !important; /* K9-2: rounded-md = 2px */
}

/* ---------------------------------------------------------------------
   K9-3 REINFORCED: Contact info circular icon backgrounds
   React: <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
   w-12 = 3rem (48px), h-12 = 3rem (48px)
   rounded-full = 9999px
   bg-primary/10 = hsl(160 30% 28% / 0.1)
   --------------------------------------------------------------------- */
body.page-id-15 .mk-contact-icon-circle,
body.page-id-15 .mk-icon-circle,
body.page-id-15 .contact-info-icon,
body.page-id-15 .mk-contact-item__icon,
body.page-id-15 .wp-block-group.is-style-icon-circle {
  width: 3rem !important; /* w-12 = 48px */
  height: 3rem !important; /* h-12 = 48px */
  min-width: 3rem !important;
  min-height: 3rem !important;
  border-radius: 9999px !important; /* rounded-full */
  background-color: hsl(160 30% 28% / 0.1) !important; /* bg-primary/10 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Icon inside the circle: w-5 h-5 text-primary */
body.page-id-15 .mk-contact-icon-circle svg,
body.page-id-15 .mk-icon-circle svg,
body.page-id-15 .contact-info-icon svg,
body.page-id-15 .mk-contact-item__icon svg {
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
  color: hsl(160 30% 28%) !important; /* text-primary */
}

/* ---------------------------------------------------------------------
   K9-4 REINFORCED: 2-column grid layout at lg breakpoint (1024px)
   React: <div className="grid lg:grid-cols-2 gap-12">
   gap-12 = 3rem (48px)
   lg:grid-cols-2 at min-width: 1024px
   --------------------------------------------------------------------- */
body.page-id-15 .mk-contact-grid,
body.page-id-15 > .entry-content > .wp-block-columns,
body.page-id-15 .wp-block-group > .wp-block-columns {
  display: block !important; /* Default: single column */
  gap: 3rem !important; /* gap-12 = 48px */
}

@media (min-width: 1024px) {
  body.page-id-15 .mk-contact-grid,
  body.page-id-15 > .entry-content > .wp-block-columns,
  body.page-id-15 .wp-block-group > .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* lg:grid-cols-2 */
    gap: 3rem !important; /* gap-12 = 48px */
  }
}

/* Ensure columns don't have weird widths on mobile */
@media (max-width: 1279px) {
  body.page-id-15 .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
    margin-bottom: 3rem !important;
  }

  body.page-id-15 .wp-block-column:last-child {
    margin-bottom: 0 !important;
  }
}

/* ---------------------------------------------------------------------
   K9-5 REINFORCED: Form shadow-elegant
   React: <div className="bg-card rounded-sm shadow-elegant p-8">
   shadow-elegant = 0 4px 20px -4px hsl(160 30% 18% / 0.08)
   --------------------------------------------------------------------- */
body.page-id-15 .mk-contact-form-card,
body.page-id-15 .wpcf7,
body.page-id-15 .wpcf7-form,
body.page-id-15 .wp-block-group.has-background,
body.page-id-15 div.wpcf7 {
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important; /* shadow-elegant */
  background-color: hsl(40 30% 96%) !important; /* bg-card = cream-light */
  padding: 2rem !important; /* p-8 = 32px */
}

/* ---------------------------------------------------------------------
   K9-6: Contact info item layout
   React: <div className="flex items-start gap-4">
   gap-4 = 1rem (16px)
   --------------------------------------------------------------------- */
body.page-id-15 .mk-contact-item,
body.page-id-15 .contact-info-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important; /* gap-4 = 16px */
}

/* Contact info section spacing: space-y-6 = 1.5rem */
body.page-id-15 .mk-contact-info .mk-contact-item,
body.page-id-15 .contact-info .contact-info-item {
  margin-bottom: 1.5rem !important; /* space-y-6 = 24px */
}

body.page-id-15 .mk-contact-info .mk-contact-item:last-child,
body.page-id-15 .contact-info .contact-info-item:last-child {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
   K9-7: Contact info title and text styles
   React: <h3 className="font-semibold text-foreground mb-1">
   React: <p className="text-muted-foreground">
   --------------------------------------------------------------------- */
body.page-id-15 .mk-contact-item__title,
body.page-id-15 .mk-contact-item h3,
body.page-id-15 .contact-info-item h3 {
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
  font-size: 1rem !important;
}

body.page-id-15 .mk-contact-item__text,
body.page-id-15 .mk-contact-item p,
body.page-id-15 .contact-info-item p {
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  margin: 0 !important;
}

/* Contact links: text-muted-foreground hover:text-primary transition-colors */
body.page-id-15 .mk-contact-item a,
body.page-id-15 .contact-info-item a {
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  text-decoration: none !important;
  transition: color 200ms ease !important;
}

body.page-id-15 .mk-contact-item a:hover,
body.page-id-15 .contact-info-item a:hover {
  color: hsl(160 30% 28%) !important; /* hover:text-primary */
}

/* ---------------------------------------------------------------------
   K9-8: Page container and header centering
   React: <div className="max-w-5xl mx-auto">
   React: <h1 className="... text-center">
   React: <p className="text-muted-foreground text-center mb-12 max-w-2xl mx-auto">
   --------------------------------------------------------------------- */
body.page-id-15 .entry-content {
  max-width: 64rem !important; /* max-w-5xl = 1024px */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 3rem 1rem !important; /* py-12 px-4 */
}

body.page-id-15 h1,
body.page-id-15 .entry-title,
body.page-id-15 .wp-block-post-title {
  text-align: center !important;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.875rem !important; /* text-3xl = 30px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 1rem !important; /* mb-4 = 16px */
}

@media (min-width: 768px) {
  body.page-id-15 h1,
  body.page-id-15 .entry-title,
  body.page-id-15 .wp-block-post-title {
    font-size: 2.25rem !important; /* md:text-4xl = 36px */
  }
}

/* Page subtitle/intro paragraph */
body.page-id-15 > .entry-content > p:first-of-type,
body.page-id-15 .page-intro {
  text-align: center !important;
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  margin-bottom: 3rem !important; /* mb-12 = 48px */
  max-width: 42rem !important; /* max-w-2xl = 672px */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------------------------------------------------------------------
   K9-9: Section titles (H2)
   React: <h2 className="font-display text-2xl font-semibold text-foreground mb-6">
   --------------------------------------------------------------------- */
body.page-id-15 h2 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.5rem !important; /* text-2xl = 24px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
}

/* ---------------------------------------------------------------------
   K9-10: Form spacing
   React: <form ... className="space-y-6">
   space-y-6 = 1.5rem (24px) margin between form elements
   --------------------------------------------------------------------- */
body.page-id-15 .wpcf7-form > p,
body.page-id-15 .wpcf7-form .form-group,
body.page-id-15 .wpcf7-form > .wp-block-group {
  margin-bottom: 1.5rem !important; /* space-y-6 = 24px */
}

body.page-id-15 .wpcf7-form > p:last-of-type,
body.page-id-15 .wpcf7-form .form-group:last-child {
  margin-bottom: 0 !important;
}

/* Form grid for name/email row: grid sm:grid-cols-2 gap-4 */
body.page-id-15 .wpcf7-form .name-email-row,
body.page-id-15 .mk-form-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important; /* gap-4 = 16px */
}

@media (min-width: 640px) {
  body.page-id-15 .wpcf7-form .name-email-row,
  body.page-id-15 .mk-form-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* sm:grid-cols-2 */
  }
}

/* Label styling: space-y-2 between label and input */
body.page-id-15 .wpcf7-form label {
  display: block !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 0.5rem !important; /* space-y-2 = 8px */
}

/* Submit button: variant="catalog" w-full */
body.page-id-15 .wpcf7-submit,
body.page-id-15 input[type="submit"],
body.page-id-15 button[type="submit"] {
  width: 100% !important; /* w-full */
  background-color: hsl(160 30% 28%) !important; /* primary */
  color: hsl(40 30% 96%) !important; /* primary-foreground */
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  border-radius: 0.25rem !important; /* var(--radius) */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important; /* shadow-elegant */
  height: 2.5rem !important; /* h-10 = 40px */
  padding: 0 1.5rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 300ms ease !important;
}

body.page-id-15 .wpcf7-submit:hover,
body.page-id-15 input[type="submit"]:hover,
body.page-id-15 button[type="submit"]:hover {
  background-color: hsl(160 30% 35%) !important; /* forest-light */
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important; /* shadow-hover */
}

/* ==========================================================================
   END SECTION S328: KONTAKTAI PAGE V4 FINAL FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S323: KATALOGAS SIDEBAR VISIBILITY & BORDER-RADIUS FIX
   Agent 4 Implementation - V4 Parity Wave (2026-03-28)

   CRITICAL USER ISSUE: Sidebar not visible on page load/filter switch

   React Source References:
   - src/pages/Catalog.tsx: grid lg:grid-cols-4 gap-8
   - src/components/auction/CategorySidebar.tsx: sidebar styling

   Custom Tailwind Config (NOT standard):
   - rounded-sm = 0px (not 2px)
   - rounded-md = 2px (not 6px)

   Issues Fixed:
   - S4-1 CRITICAL: Sidebar MUST be visible at all times on desktop (1024px+)
   - S4-2/3/4: All containers border-radius = 0px (rounded-sm in this project)
   - S4-5: Time filter buttons border-radius = 2px (rounded-md in this project)
   ========================================================================== */

/* ---------------------------------------------------------------------
   S323-1: CRITICAL - Force Sidebar Visibility on Desktop (1024px+)
   Sidebar should ALWAYS be visible, never hidden on desktop
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Maximum specificity to override any conflicting styles */
  .mk-catalog-sidebar,
  .mk-catalog__sidebar,
  aside.mk-catalog-sidebar,
  aside.mk-catalog__sidebar,
  #mk-catalog-sidebar,
  .wp-block-group.mk-catalog-sidebar,
  .mk-catalog-grid > .mk-catalog-sidebar,
  .mk-catalog-grid > aside.mk-catalog-sidebar,
  body.woocommerce .mk-catalog-sidebar,
  body.archive .mk-catalog-sidebar,
  body.archive-product .mk-catalog-sidebar,
  body.post-type-archive-product .mk-catalog-sidebar,
  html body .mk-catalog-sidebar,
  html body .mk-catalog__sidebar {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: sticky !important;
    top: 6rem !important; /* top-24 = 96px */
    max-height: calc(100vh - 7rem) !important;
    overflow-y: auto !important;
    width: auto !important;
    max-width: none !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    gap: 1.5rem !important; /* space-y-6 */
  }

  /* Admin bar offset for sticky sidebar */
  body.admin-bar .mk-catalog-sidebar,
  body.admin-bar .mk-catalog__sidebar,
  body.admin-bar #mk-catalog-sidebar {
    top: calc(6rem + 32px) !important;
    max-height: calc(100vh - 7rem - 32px) !important;
  }

  /* Ensure grid layout is correct on desktop */
  .mk-catalog-grid {
    display: grid !important;
    grid-template-columns: 280px 1fr !important; /* Fixed sidebar width, fluid content */
    gap: 2rem !important; /* gap-8 = 32px */
    align-items: start !important;
  }

  /* Ensure content area takes remaining space */
  .mk-catalog-content {
    min-width: 0 !important;
  }

  /* Hide mobile-only elements on desktop */
  .mk-mobile-filter-toggle,
  .mk-filter-fab,
  .mk-catalog-sidebar-backdrop {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------
   S323-2: Container Border-Radius = 0px (rounded-sm in this project)
   React: bg-card rounded-sm = 0px border-radius
   --------------------------------------------------------------------- */
.mk-filter-group,
.mk-filter-categories,
.mk-filter-time,
.mk-filter-price,
.mk-filter-quick,
.mk-filter-help,
.mk-catalog-sidebar .wp-block-group,
.mk-catalog__sidebar .wp-block-group,
.mk-catalog-sidebar > .wp-block-group,
.mk-catalog__sidebar > .wp-block-group,
.mk-catalog-sidebar .has-card-background-color,
.mk-catalog-sidebar .has-primary-background-color,
.mk-catalog-sidebar .has-secondary-background-color,
.mk-catalog__sidebar .has-card-background-color,
.mk-catalog__sidebar .has-primary-background-color,
.mk-catalog__sidebar .has-secondary-background-color {
  border-radius: 0px !important; /* rounded-sm = 0px in this project */
}

/* Also target inline styles that may have border-radius */
.mk-catalog-sidebar [style*="border-radius"],
.mk-catalog__sidebar [style*="border-radius"] {
  border-radius: 0px !important;
}

/* ---------------------------------------------------------------------
   S323-3: Time Filter Buttons Border-Radius = 2px (rounded-md)
   React: px-3 py-2 rounded-md text-sm
   rounded-md = 2px in this project's custom Tailwind config
   --------------------------------------------------------------------- */
.mk-time-filter-btn,
.mk-time-filters button,
.mk-filter-time button {
  border-radius: 2px !important; /* rounded-md = 2px in this project */
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  font-size: 0.875rem !important; /* text-sm */
}

/* Price filter buttons - same treatment */
.mk-price-filter-btn,
.mk-price-filters button,
.mk-filter-price button {
  border-radius: 2px !important; /* rounded-md = 2px */
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
}

/* ---------------------------------------------------------------------
   S323-4: Categories Panel - Primary Background with 0px radius
   React: bg-primary text-primary-foreground rounded-sm p-6
   --------------------------------------------------------------------- */
.mk-filter-categories,
.mk-catalog-sidebar .mk-filter-group:first-child,
.mk-catalog__sidebar .mk-filter-group:first-child,
.mk-catalog-sidebar .mk-filter-group.mk-filter-categories,
.mk-catalog__sidebar .mk-filter-group.mk-filter-categories {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-radius: 0px !important; /* rounded-sm = 0px */
  padding: 1.5rem !important; /* p-6 = 24px */
}

/* Category text colors */
.mk-filter-categories h3,
.mk-filter-categories .wp-block-heading,
.mk-catalog-sidebar .mk-filter-group:first-child h3,
.mk-catalog-sidebar .mk-filter-group:first-child .wp-block-heading {
  color: hsl(var(--primary-foreground)) !important;
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important; /* text-lg */
  margin-bottom: 1.5rem !important; /* mb-6 */
}

/* Category links */
.mk-filter-categories ul,
.mk-catalog-sidebar .mk-filter-group:first-child ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important; /* space-y-3 */
}

.mk-filter-categories button,
.mk-filter-categories a,
.mk-catalog-sidebar .mk-filter-group:first-child a {
  color: hsl(var(--primary-foreground) / 0.8) !important;
  font-size: 0.875rem !important; /* text-sm */
  text-decoration: none !important;
  transition: color 200ms ease !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  width: 100% !important;
}

.mk-filter-categories button:hover,
.mk-filter-categories a:hover,
.mk-catalog-sidebar .mk-filter-group:first-child a:hover {
  color: hsl(var(--gold)) !important;
}

.mk-filter-categories button.active,
.mk-filter-categories a.active,
.mk-filter-categories .current-cat > a,
.mk-catalog-sidebar .mk-filter-group:first-child .current-cat > a {
  color: hsl(var(--gold)) !important;
  font-weight: 500 !important;
}

/* Category count */
.mk-filter-categories .count,
.mk-filter-categories .wc-block-product-categories-list-item__count {
  color: hsl(var(--primary-foreground) / 0.5) !important;
  font-size: 0.75rem !important;
  margin-left: 0.25rem !important;
}

/* ---------------------------------------------------------------------
   S323-5: Other Filter Panels - Card Background with 0px radius
   React: bg-card rounded-sm p-4 shadow-card (or p-6)
   --------------------------------------------------------------------- */
.mk-filter-time,
.mk-filter-price,
.mk-filter-quick,
.mk-catalog-sidebar .mk-filter-group:not(:first-child):not(.mk-filter-help),
.mk-catalog__sidebar .mk-filter-group:not(:first-child):not(.mk-filter-help) {
  background: hsl(var(--card)) !important;
  border-radius: 0px !important; /* rounded-sm = 0px */
  padding: 1rem !important; /* p-4 = 16px */
  box-shadow: var(--shadow-card) !important;
}

/* Filter group headings */
.mk-filter-time h3,
.mk-filter-price h3,
.mk-filter-quick h3,
.mk-filter-time .wp-block-heading,
.mk-filter-price .wp-block-heading,
.mk-filter-quick .wp-block-heading {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.75rem !important; /* mb-3 */
}

/* ---------------------------------------------------------------------
   S323-6: Help Section - Secondary Background with 0px radius
   React: bg-secondary/30 rounded-sm p-6
   --------------------------------------------------------------------- */
.mk-filter-help,
.mk-catalog-sidebar .mk-filter-group.mk-filter-help {
  background: hsl(var(--secondary) / 0.3) !important;
  border-radius: 0px !important; /* rounded-sm = 0px */
  padding: 1.5rem !important; /* p-6 = 24px */
  box-shadow: none !important;
}

.mk-filter-help h3,
.mk-filter-help .wp-block-heading {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.75rem !important; /* mb-3 */
}

.mk-filter-help ul {
  list-style: disc !important;
  padding-left: 1rem !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* space-y-2 */
}

.mk-filter-help li {
  font-size: 0.75rem !important; /* text-xs */
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.4 !important;
}

/* ---------------------------------------------------------------------
   S323-7: Quick Filters Toggle Styling
   React: flex items-center justify-between, Switch component
   --------------------------------------------------------------------- */
.mk-quick-filters,
.mk-filter-quick .mk-quick-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* space-y-4 */
}

.mk-quick-filter-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.mk-quick-filter-label {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--foreground)) !important;
}

/* ---------------------------------------------------------------------
   S323-8: Clear Filters Button
   React: Button variant="outline" className="w-full"
   --------------------------------------------------------------------- */
.mk-clear-filters-btn,
#mk-clear-filters {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 2px !important; /* rounded-md = 2px */
  color: hsl(var(--foreground)) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
}

.mk-clear-filters-btn:hover,
#mk-clear-filters:hover {
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

.mk-clear-filters-btn[data-visible="false"],
#mk-clear-filters[data-visible="false"] {
  display: none !important;
}

.mk-clear-filters-btn svg,
#mk-clear-filters svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* ==========================================================================
   END SECTION S323: KATALOGAS SIDEBAR VISIBILITY
   ========================================================================== */

/* ==========================================================================
   SECTION S330: PIRKIMAS PAGE V4 FINAL FIXES (2026-03-28)
   ==========================================================================

   V4 Agent 11: Pirkimas Page Final Implementation
   Reference: src/pages/HowToBuy.tsx

   This section reinforces and ensures 1:1 parity for remaining issues:
   - PIR-2: Step badge size = 64px circle (w-16 h-16 rounded-full bg-primary)
   - PIR-3: Feature cards border-radius = 0 (rounded-sm in custom config)
   - PIR-4: Feature icon size = 40px (w-10 h-10)
   - PIR-7: Feature cards grid 3 columns at md (md:grid-cols-3)
   - PIR-8: CTA button is PRIMARY GREEN (catalog variant), NOT gold
   - Container max-width: max-w-4xl (896px)

   React Source Analysis:
   - Container: <div className="max-w-4xl mx-auto"> = 56rem = 896px
   - Steps: <div className="flex gap-6"> with 64px badge
   - Badge: <div className="w-16 h-16 rounded-full bg-primary">
   - Features: <div className="grid md:grid-cols-3 gap-6 mb-12">
   - Feature card: <div className="bg-card rounded-sm shadow-card p-6 text-center">
   - Feature icon: <CheckCircle className="w-10 h-10 text-primary mx-auto mb-4" />
   - CTA: <Button variant="catalog" size="lg"> = PRIMARY GREEN
   ========================================================================== */

/* ---------------------------------------------------------------------
   PIR-FINAL-1: Container max-width 56rem (896px) — max-w-4xl
   React: <div className="max-w-4xl mx-auto">
   --------------------------------------------------------------------- */
body.page-id-16 .mk-pirkimas-page,
.page-pirkimas .mk-pirkimas-page,
body[class*="pirkimas"] .mk-pirkimas-page {
  max-width: 56rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* ---------------------------------------------------------------------
   PIR-FINAL-2: Step badge 64px circle (w-16 h-16)
   React: <div className="w-16 h-16 rounded-full bg-primary">
   Pattern class: .mk-pirkimas-step__badge
   --------------------------------------------------------------------- */
.mk-pirkimas-step__badge,
body.page-id-16 .mk-pirkimas-step__badge,
.page-pirkimas .mk-pirkimas-step__badge,
body[class*="pirkimas"] .mk-pirkimas-step__badge {
  width: 4rem !important;
  height: 4rem !important;
  min-width: 4rem !important;
  min-height: 4rem !important;
  max-width: 4rem !important;
  max-height: 4rem !important;
  border-radius: 9999px !important;
  background-color: hsl(var(--primary)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Badge number text - font-display text-xl font-bold */
.mk-pirkimas-step__badge p,
body.page-id-16 .mk-pirkimas-step__badge p,
.page-pirkimas .mk-pirkimas-step__badge p {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: hsl(var(--primary-foreground)) !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------------------
   PIR-FINAL-3: Feature cards border-radius = 0
   React: <div className="bg-card rounded-sm shadow-card p-6 text-center">
   rounded-sm = 0px in this project's custom Tailwind config
   Pattern class: .mk-pirkimas-feature, .mk-card
   --------------------------------------------------------------------- */
.mk-pirkimas-feature,
.mk-pirkimas-feature.mk-card,
body.page-id-16 .mk-pirkimas-feature,
body.page-id-16 .mk-pirkimas-features .mk-card,
.page-pirkimas .mk-pirkimas-feature {
  border-radius: 0 !important;
  background-color: hsl(var(--card)) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important;
  text-align: center !important;
  border: none !important;
}

/* ---------------------------------------------------------------------
   PIR-FINAL-4: Feature icon size = 40px (w-10 h-10)
   React: <CheckCircle className="w-10 h-10 text-primary mx-auto mb-4" />
   Pattern uses inline SVG with width/height attributes
   --------------------------------------------------------------------- */
.mk-pirkimas-feature svg,
body.page-id-16 .mk-pirkimas-feature svg,
body.page-id-16 .mk-pirkimas-features svg,
.page-pirkimas .mk-pirkimas-feature svg {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  color: hsl(var(--primary)) !important;
  stroke: hsl(var(--primary)) !important;
  margin-bottom: 1rem !important;
}

/* Icon container centering */
.mk-pirkimas-feature > div:first-child,
body.page-id-16 .mk-pirkimas-feature > div:first-child {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 1rem !important;
}

/* ---------------------------------------------------------------------
   PIR-FINAL-5: Feature cards grid 3 columns at md
   React: <div className="grid md:grid-cols-3 gap-6 mb-12">
   Pattern class: .mk-pirkimas-features (wp-block-columns)
   --------------------------------------------------------------------- */
.mk-pirkimas-features,
body.page-id-16 .mk-pirkimas-features,
.page-pirkimas .mk-pirkimas-features {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  margin-bottom: 3rem !important;
}

@media (min-width: 768px) {
  .mk-pirkimas-features,
  body.page-id-16 .mk-pirkimas-features,
  .page-pirkimas .mk-pirkimas-features {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Ensure columns don't break the grid */
.mk-pirkimas-features > .wp-block-column,
body.page-id-16 .mk-pirkimas-features > .wp-block-column {
  flex-basis: auto !important;
  width: 100% !important;
}

/* ---------------------------------------------------------------------
   PIR-FINAL-6: CTA button PRIMARY GREEN (catalog variant)
   React: <Button variant="catalog" size="lg">Registruotis dabar</Button>
   variant="catalog" = bg-primary, NOT gold
   --------------------------------------------------------------------- */
body.page-id-16 .mk-btn-catalog .wp-block-button__link,
body.page-id-16 .wp-block-button.mk-btn-catalog .wp-block-button__link,
.page-pirkimas .mk-btn-catalog .wp-block-button__link,
body[class*="pirkimas"] .mk-btn-catalog .wp-block-button__link {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  border-radius: var(--radius, 4px) !important;
  box-shadow: var(--shadow-elegant) !important;
  transition: all 300ms !important;
  padding: 0.75rem 2rem !important;
  min-height: 3rem !important;
}

body.page-id-16 .mk-btn-catalog .wp-block-button__link:hover,
.page-pirkimas .mk-btn-catalog .wp-block-button__link:hover,
body[class*="pirkimas"] .mk-btn-catalog .wp-block-button__link:hover {
  background-color: hsl(160 30% 35%) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Override any gold styling that may have leaked in */
body.page-id-16 .wp-block-buttons .wp-block-button__link:not(.has-background),
body.page-id-16 .wp-block-button__link {
  background-color: hsl(var(--primary)) !important;
}

/* ---------------------------------------------------------------------
   PIR-FINAL-7: Step row layout - flex gap-6
   React: <div className="flex gap-6">
   Pattern uses wp-block-columns with mk-pirkimas-step class
   --------------------------------------------------------------------- */
.mk-pirkimas-step,
body.page-id-16 .mk-pirkimas-step,
.page-pirkimas .mk-pirkimas-step {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1.5rem !important;
  background: transparent !important;
  border: none !important;
}

/* Step content column - pt-2 in React */
.mk-pirkimas-step__content,
body.page-id-16 .mk-pirkimas-step__content {
  padding-top: 0.5rem !important;
  flex: 1 !important;
}

/* Step title styling */
.mk-pirkimas-step__title,
body.page-id-16 .mk-pirkimas-step__title {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.5rem !important;
}

/* Steps container spacing */
.mk-pirkimas-steps,
body.page-id-16 .mk-pirkimas-steps {
  margin-bottom: 4rem !important;
}

/* ==========================================================================
   END SECTION S330: PIRKIMAS PAGE V4 FINAL FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S331: INFORMACIJA HUB V4 PARITY (Agent 12)
   Date: 2026-03-28

   React Source: src/pages/Information.tsx

   Issues Fixed:
   - 12-5 HIGH: TabsList border-radius = 12px (rounded-xl)
   - 12-7 HIGH: TabsTrigger border-radius = 0 (rounded-sm custom = 0)
   - 12-9 HIGH: TabsTrigger active background = primary green
   - 12-10 MEDIUM: Content card border-radius = 12px (rounded-xl)
   - 12-11 MEDIUM: Content card padding = 2rem (p-8)
   - Hero: bg-primary, py-16 (4rem padding)
   - H1: text-4xl md:text-5xl font-bold
   - FAQ Accordion: border-b, hover:text-gold

   REACT VALUES EXTRACTED:

   1. TabsList (line 330):
      - flex flex-wrap h-auto gap-2 bg-muted/50 p-2 rounded-xl mb-8
      - rounded-xl = 0.75rem (12px) - Tailwind default NOT overridden
      - bg-muted/50 = hsl(36 20% 90% / 0.5)
      - gap-2 = 0.5rem (8px)
      - p-2 = 0.5rem (8px) padding
      - mb-8 = 2rem (32px) margin-bottom

   2. TabsTrigger (lines 334-338):
      - flex items-center gap-2 px-4 py-2.5
      - From tabs.tsx line 30: rounded-sm = calc(var(--radius) - 4px) = 0
      - px-4 = 1rem (16px), py-2.5 = 0.625rem (10px)
      - gap-2 = 0.5rem (8px) between icon and text
      - data-[state=active]:bg-primary = hsl(160 30% 28%)
      - data-[state=active]:text-primary-foreground = hsl(40 30% 96%)

   3. Content Card (line 348):
      - bg-card rounded-xl p-8 border
      - rounded-xl = 0.75rem (12px)
      - p-8 = 2rem (32px)
      - border = 1px solid hsl(var(--border))

   4. Hero (lines 316-324):
      - bg-primary = hsl(160 30% 28%) forest green
      - py-16 = 4rem (64px) vertical padding
      - H1: text-4xl md:text-5xl font-bold
      - text-4xl = 2.25rem (36px), text-5xl = 3rem (48px)

   5. FAQ Accordion (lines 399-406):
      - AccordionItem: border-b (1px border-bottom)
      - AccordionTrigger: hover:text-gold
   ========================================================================== */

/* ---------------------------------------------------------------------------
   S331.1: TABS LIST CONTAINER — rounded-xl (12px) with muted/50 bg
   React: flex flex-wrap h-auto gap-2 bg-muted/50 p-2 rounded-xl mb-8
   --------------------------------------------------------------------------- */
body.page-informacija .mk-info-tabs__list,
body.page-informacija .mk-info-tabs__nav,
body[class*="informacija"] .mk-info-tabs__list,
.page-informacija .mk-info-tabs,
.mk-info-tabs__list,
.mk-info-tabs__nav,
.informacija-tabs-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  height: auto !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  background: hsl(36 20% 90% / 0.5) !important; /* bg-muted/50 */
  padding: 0.5rem !important; /* p-2 = 8px */
  border-radius: 0.75rem !important; /* rounded-xl = 12px - CRITICAL FIX 12-5 */
  margin-bottom: 2rem !important; /* mb-8 = 32px */
}

/* ---------------------------------------------------------------------------
   S331.2: TAB TRIGGER BUTTONS — rounded-sm = 0 (custom config)
   React: flex items-center gap-2 px-4 py-2.5
   Custom tailwind.config.ts: rounded-sm = calc(var(--radius) - 4px) = 0
   --------------------------------------------------------------------------- */
body.page-informacija .mk-info-tab-btn,
body.page-informacija .mk-info-tabs__trigger,
body.page-informacija .mk-info-tabs__nav a,
body[class*="informacija"] .mk-info-tab-btn,
.page-informacija .mk-info-tab-btn,
.mk-info-tab-btn,
.mk-info-tabs__trigger,
.informacija-tab-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* gap-2 = 8px between icon and text */
  padding: 0.625rem 1rem !important; /* py-2.5 px-4 = 10px 16px */
  border-radius: 0 !important; /* rounded-sm = 0 - CRITICAL FIX 12-7 */
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  transition: all 150ms ease !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  border: none !important;
  text-decoration: none !important;
}

/* Tab trigger hover state */
body.page-informacija .mk-info-tab-btn:hover,
body.page-informacija .mk-info-tabs__trigger:hover,
body.page-informacija .mk-info-tabs__nav a:hover,
.mk-info-tab-btn:hover,
.mk-info-tabs__trigger:hover,
.informacija-tab-link:hover {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
}

/* ---------------------------------------------------------------------------
   S331.3: TAB TRIGGER ACTIVE STATE — bg-primary (forest green)
   React: data-[state=active]:bg-primary data-[state=active]:text-primary-foreground
   CRITICAL FIX 12-9: Active tabs MUST be forest green, not light/cream
   --------------------------------------------------------------------------- */
body.page-informacija .mk-info-tab-btn.active,
body.page-informacija .mk-info-tab-btn.is-active,
body.page-informacija .mk-info-tab-btn[aria-selected="true"],
body.page-informacija .mk-info-tabs__trigger.active,
body.page-informacija .mk-info-tabs__trigger[aria-selected="true"],
body.page-informacija .mk-info-tabs__nav a.active,
body.page-informacija .mk-info-tabs__nav a[aria-current="page"],
body[class*="informacija"] .mk-info-tab-btn.active,
body[class*="informacija"] .mk-info-tab-btn.is-active,
body[class*="informacija"] .mk-info-tabs__nav a.active,
.page-informacija .mk-info-tab-btn.active,
.page-informacija .mk-info-tab-btn.is-active,
.mk-info-tab-btn.active,
.mk-info-tab-btn.is-active,
.mk-info-tab-btn[data-state="active"],
.mk-info-tabs__trigger.active,
.mk-info-tabs__trigger[data-state="active"],
.informacija-tab-link.active,
.informacija-tab-link[aria-current="page"] {
  background: hsl(160 30% 28%) !important; /* bg-primary = forest green */
  background-color: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important; /* text-primary-foreground = cream */
  border-radius: 0.125rem !important; /* rounded-sm = 2px */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; /* shadow-sm */
}

/* Active tab hover - maintain active styling */
body.page-informacija .mk-info-tab-btn.active:hover,
body.page-informacija .mk-info-tab-btn.is-active:hover,
body.page-informacija .mk-info-tabs__nav a.active:hover,
.mk-info-tab-btn.active:hover,
.mk-info-tab-btn.is-active:hover,
.mk-info-tabs__trigger.active:hover {
  background: hsl(160 30% 24%) !important; /* Slightly darker on hover */
  color: hsl(40 30% 96%) !important;
}

/* ---------------------------------------------------------------------------
   S331.4: CONTENT CARD — rounded-xl (12px), p-8 (32px), border
   React: bg-card rounded-xl p-8 border (line 348)
   --------------------------------------------------------------------------- */
body.page-informacija .mk-info-content,
body.page-informacija .mk-info-panel,
body.page-informacija .mk-content-card,
body.page-informacija .mk-informacija-content,
body[class*="informacija"] .mk-info-content,
body[class*="informacija"] .mk-content-card,
.page-informacija .mk-info-content,
.mk-info-content,
.mk-info-panel,
.mk-content-card,
.mk-informacija-content {
  background: hsl(var(--card)) !important; /* bg-card */
  border-radius: 0.75rem !important; /* rounded-xl = 12px - CRITICAL FIX 12-10 */
  padding: 2rem !important; /* p-8 = 32px - CRITICAL FIX 12-11 */
  border: 1px solid hsl(var(--border)) !important;
}

/* ---------------------------------------------------------------------------
   S331.4b: HIDE WORDPRESS PAGE TITLE on Information pages
   The hero already has "Informacija" H1 — hide redundant post title
   --------------------------------------------------------------------------- */
body.page-informacija .wp-block-post-title,
body[class*="informacija"] .wp-block-post-title,
.page-informacija .wp-block-post-title,
.mk-info-hub ~ .wp-block-post-title,
body.page-informacija h1.wp-block-post-title,
body.page-id-22 .wp-block-post-title,
body.page-id-51 .wp-block-post-title,
body.page-id-56 .wp-block-post-title,
body.page-id-57 .wp-block-post-title,
body.page-id-58 .wp-block-post-title,
body.page-id-59 .wp-block-post-title,
body.page-id-60 .wp-block-post-title,
body.page-id-61 .wp-block-post-title,
body.parent-pageid-22 .wp-block-post-title {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   S331.5: HERO SECTION — bg-primary, py-16
   React: bg-primary text-primary-foreground py-16 (lines 316-324)
   --------------------------------------------------------------------------- */
body.page-informacija .mk-info-hero,
body[class*="informacija"] .mk-info-hero,
.page-informacija .mk-info-hero,
.mk-info-hero {
  background: hsl(160 30% 28%) !important; /* bg-primary = forest green */
  background-color: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important; /* text-primary-foreground = cream */
  padding-top: 4rem !important; /* py-16 = 64px */
  padding-bottom: 4rem !important;
}

/* Hero H1: text-4xl md:text-5xl font-bold */
body.page-informacija .mk-info-hero h1,
body[class*="informacija"] .mk-info-hero h1,
.page-informacija .mk-info-hero h1,
.mk-info-hero h1 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 2.25rem !important; /* text-4xl = 36px */
  font-weight: 700 !important; /* font-bold */
  margin-bottom: 1rem !important; /* mb-4 */
  color: inherit !important;
  line-height: 1.2 !important;
}

@media (min-width: 768px) {
  body.page-informacija .mk-info-hero h1,
  body[class*="informacija"] .mk-info-hero h1,
  .page-informacija .mk-info-hero h1,
  .mk-info-hero h1 {
    font-size: 3rem !important; /* md:text-5xl = 48px */
  }
}

/* Hero subtitle */
body.page-informacija .mk-info-hero p,
body[class*="informacija"] .mk-info-hero p,
.page-informacija .mk-info-hero p,
.mk-info-hero p {
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
  font-size: 1.125rem !important; /* text-lg = 18px */
  max-width: 42rem !important; /* max-w-2xl */
}

/* ---------------------------------------------------------------------------
   S331.6: FAQ ACCORDION — border-b, hover:text-gold
   React: AccordionItem has implicit border-b (Radix default styling)
   AccordionTrigger: hover:text-gold (line 400)
   --------------------------------------------------------------------------- */
body.page-informacija .mk-faq-accordion .mk-accordion-item,
body.page-informacija .mk-accordion-item,
body[class*="informacija"] .mk-accordion-item,
.page-informacija .mk-accordion-item,
.mk-faq-accordion .mk-accordion-item,
.mk-accordion-item {
  border-bottom: 1px solid hsl(var(--border)) !important;
  padding: 0 !important;
}

/* Last accordion item - no border */
body.page-informacija .mk-faq-accordion .mk-accordion-item:last-child,
body.page-informacija .mk-accordion-item:last-child,
.mk-faq-accordion .mk-accordion-item:last-child,
.mk-accordion-item:last-child {
  border-bottom: none !important;
}

/* Accordion trigger - hover:text-gold */
body.page-informacija .mk-accordion-trigger,
body.page-informacija .mk-faq-question,
body[class*="informacija"] .mk-accordion-trigger,
.page-informacija .mk-accordion-trigger,
.mk-faq-accordion .mk-accordion-trigger,
.mk-accordion-trigger,
.mk-faq-question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 1rem 0 !important; /* py-4 */
  font-weight: 500 !important; /* font-medium */
  text-align: left !important;
  color: hsl(var(--foreground)) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 150ms ease !important;
}

/* Accordion trigger hover - text-gold */
body.page-informacija .mk-accordion-trigger:hover,
body.page-informacija .mk-faq-question:hover,
body[class*="informacija"] .mk-accordion-trigger:hover,
.mk-faq-accordion .mk-accordion-trigger:hover,
.mk-accordion-trigger:hover,
.mk-faq-question:hover {
  color: hsl(42 55% 58%) !important; /* text-gold */
}

/* Accordion content */
body.page-informacija .mk-accordion-content,
body.page-informacija .mk-faq-answer,
body[class*="informacija"] .mk-accordion-content,
.page-informacija .mk-accordion-content,
.mk-faq-accordion .mk-accordion-content,
.mk-accordion-content,
.mk-faq-answer {
  padding-bottom: 1rem !important; /* pb-4 */
  color: hsl(var(--muted-foreground)) !important; /* text-muted-foreground */
  line-height: 1.625 !important; /* leading-relaxed */
}

/* ---------------------------------------------------------------------------
   S331.7: PANEL HEADER — icon 32px gold, section titles
   React: <Icon className="w-8 h-8 text-gold" /> (lines 350, 372, 394, etc.)
   Section title: font-display text-2xl font-bold
   --------------------------------------------------------------------------- */
body.page-informacija .mk-info-panel-header,
body[class*="informacija"] .mk-info-panel-header,
.page-informacija .mk-info-panel-header,
.mk-info-panel-header,
.mk-info-content .mk-panel-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important; /* gap-3 = 12px */
  margin-bottom: 1.5rem !important; /* mb-6 */
}

/* Panel header icon - w-8 h-8 text-gold */
body.page-informacija .mk-info-panel-header svg,
body.page-informacija .mk-info-panel__icon,
body[class*="informacija"] .mk-info-panel-header svg,
.page-informacija .mk-info-panel-header svg,
.mk-info-panel-header svg,
.mk-info-panel-header .mk-icon,
.mk-info-panel__icon {
  width: 2rem !important; /* w-8 = 32px */
  height: 2rem !important; /* h-8 = 32px */
  min-width: 2rem !important;
  min-height: 2rem !important;
  color: hsl(42 55% 58%) !important; /* text-gold */
  flex-shrink: 0 !important;
}

/* Panel header title - font-display text-2xl font-bold */
body.page-informacija .mk-info-panel-header h2,
body[class*="informacija"] .mk-info-panel-header h2,
.page-informacija .mk-info-panel-header h2,
.mk-info-panel-header h2,
.mk-info-section-title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.5rem !important; /* text-2xl = 24px */
  font-weight: 700 !important; /* font-bold */
  color: hsl(var(--foreground)) !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------------
   S331.8: CONTENT SECTIONS — h3 and p styling
   React: h3 = font-display text-xl font-semibold mb-3 text-primary
   React: p = text-muted-foreground whitespace-pre-line leading-relaxed
   --------------------------------------------------------------------------- */
body.page-informacija .mk-info-section h3,
body.page-informacija .mk-content-card h3,
body[class*="informacija"] .mk-info-section h3,
.page-informacija .mk-info-section h3,
.mk-info-section h3,
.mk-content-card h3 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 0.75rem !important; /* mb-3 = 12px */
  color: hsl(160 30% 28%) !important; /* text-primary */
}

body.page-informacija .mk-info-section p,
body.page-informacija .mk-content-card p,
body[class*="informacija"] .mk-info-section p,
.page-informacija .mk-info-section p,
.mk-info-section p,
.mk-content-card p {
  color: hsl(var(--muted-foreground)) !important;
  white-space: pre-line !important; /* Preserve newlines */
  line-height: 1.625 !important; /* leading-relaxed */
  margin: 0 !important;
}

/* Paragraph spacing - mb-8 last:mb-0 */
body.page-informacija .mk-info-section .mk-rule-section,
body.page-informacija .mk-content-card .mk-rule-section,
.mk-info-section .mk-rule-section,
.mk-content-card .mk-rule-section {
  margin-bottom: 2rem !important; /* mb-8 */
}

body.page-informacija .mk-info-section .mk-rule-section:last-child,
body.page-informacija .mk-content-card .mk-rule-section:last-child,
.mk-info-section .mk-rule-section:last-child,
.mk-content-card .mk-rule-section:last-child {
  margin-bottom: 0 !important; /* last:mb-0 */
}

/* ---------------------------------------------------------------------------
   S331.9: TAB ICONS — 16px (w-4 h-4)
   React: <Icon className="w-4 h-4" /> inside tabs (line 339)
   --------------------------------------------------------------------------- */
body.page-informacija .mk-info-tab-btn svg,
body.page-informacija .mk-info-tabs__trigger svg,
body.page-informacija .mk-info-tabs__nav a svg,
body[class*="informacija"] .mk-info-tab-btn svg,
.page-informacija .mk-info-tab-btn svg,
.mk-info-tab-btn svg,
.mk-info-tabs__trigger svg,
.mk-tab-icon {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  min-width: 1rem !important;
  min-height: 1rem !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   END SECTION S331: INFORMACIJA HUB V4 PARITY (Agent 12)
   ========================================================================== */

/* ==========================================================================
   SECTION S332: PLENERAI PAGE V4 SUPPLEMENTAL FIXES (2026-03-29)
   ==========================================================================

   V4 Agent 13: Plenerai Page Supplemental Implementation
   Reference: docs/V4-PARITY-FIX-IMPLEMENTATION-REPORT.md (Agent 13)
   React Source: src/pages/Plenerai.tsx (205 lines)

   SUPPLEMENTS S312 (original Plenerai implementation from 2026-03-26)

   CRITICAL FINDINGS FROM REACT SOURCE:

   1. HERO HEIGHT (Line 22):
      - React: h-[60vh] min-h-[500px] = height: 60vh; min-height: 500px
      - Must use max() to ensure both constraints work together

   2. EVENT CARD OVERLAP (Line 46):
      - React: -mt-20 relative z-10 = margin-top: -5rem (-80px)
      - Card must overlap hero by exactly 80px

   3. EVENT CARD SHADOW (Line 48):
      - React: shadow-2xl = box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25)
      - NOT shadow-elegant (too soft)

   4. ICON BOXES (Lines 52, 64, 102):
      - Header icons (Calendar/Location): w-16 h-16 = 64px × 64px, rounded-xl = 12px
      - Curator icon: w-12 h-12 = 48px × 48px, rounded-full
      - All use backdrop-blur

   5. PARTICIPANT GRID (Lines 85, 117):
      - React: grid md:grid-cols-2 lg:grid-cols-3 gap-4
      - Must show 3 columns at 1024px+
      - Cards: rounded-xl = 0.75rem (12px)

   6. ABOUT IMAGE (Line 147):
      - React: h-80 = height: 20rem (320px)
      - S312 incorrectly uses 400px

   7. GALLERY MASONRY (Lines 162-194):
      - React: grid-cols-2 gap-4 md:gap-6
      - Column 2: pt-8 = padding-top: 2rem (creates masonry offset)
      - Images: rounded-xl = 0.75rem (12px)
      - Tall: h-48 md:h-64 = 192px → 256px at 768px+
      - Short: h-32 md:h-48 = 128px → 192px at 768px+
      - Hover: scale-105, transition: transform 700ms (NOT 500ms)

   8. ALL HEADINGS FONT-WEIGHT:
      - React: font-bold = 700 (not 600!)
      - H1 (line 35): font-display text-5xl md:text-7xl font-bold
      - H2 About (line 122): font-display text-3xl md:text-4xl font-bold
      - H2 Gallery (line 158): font-display text-3xl md:text-4xl font-bold

   ========================================================================== */

/* ---------------------------------------------------------------------
   S332-1: Hero Height — Exact 60vh with 500px minimum
   React: h-[60vh] min-h-[500px] (line 22)
   --------------------------------------------------------------------- */
.page-id-18 .mk-plenerai-hero,
body.page-plenerai .wp-block-cover.mk-plenerai-hero,
.mk-plenerai-hero {
  height: 60vh !important;
  min-height: 500px !important;
}

/* S332-2: Event Card Overlap — -80px margin-top (line 46) */
.page-id-18 .mk-plenerai__info,
.mk-plenerai__info,
body.page-plenerai .wp-block-group.mk-plenerai__info {
  margin-top: -5rem !important; /* -80px overlap */
  position: relative !important;
  z-index: 10 !important;
}

/* S332-3: Event Card Shadow — shadow-2xl not shadow-elegant (line 48) */
.page-id-18 .mk-plenerai__info,
.mk-plenerai-event-card,
body.page-plenerai .mk-plenerai__info {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
  border-radius: 1rem !important; /* rounded-2xl = 16px (STANDARD) */
}

/* S332-4: Icon Boxes — Header icons 64px, Curator 48px (lines 52, 64, 102) */
.page-id-18 .mk-plenerai-icon-box--header,
.mk-plenerai__icon-box {
  width: 4rem !important; /* 64px */
  height: 4rem !important;
  border-radius: 0.75rem !important; /* rounded-xl = 12px */
  background: hsl(var(--primary-foreground) / 0.1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.page-id-18 .mk-plenerai-icon-box--curator,
.mk-plenerai__curator-icon {
  width: 3rem !important; /* 48px */
  height: 3rem !important;
  border-radius: 9999px !important; /* rounded-full */
  background: hsl(var(--primary) / 0.1) !important;
}

/* S332-5: Participant Grid — 3 columns at lg (1024px+) (line 85) */
.page-id-18 .mk-plenerai__participants,
.mk-plenerai__participants {
  display: grid !important;
  gap: 1rem !important; /* gap-4 = 16px */
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__participants,
  .mk-plenerai__participants {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .page-id-18 .mk-plenerai__participants,
  .mk-plenerai__participants {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* S332-6: Participant Cards — rounded-xl + hover effects (line 89) */
.page-id-18 .mk-plenerai__participant,
.mk-plenerai__participant {
  padding: 1rem !important; /* p-4 = 16px */
  border-radius: 0.75rem !important; /* rounded-xl = 12px */
  background: hsl(var(--muted) / 0.3) !important;
  border: 1px solid transparent !important;
  transition: all 300ms ease !important;
}

.page-id-18 .mk-plenerai__participant:hover,
.mk-plenerai__participant:hover {
  background: hsl(var(--muted) / 0.5) !important;
  border-color: hsl(var(--primary) / 0.2) !important;
}

.mk-plenerai__participant p:first-child {
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  transition: color 300ms ease !important;
}

.mk-plenerai__participant:hover p:first-child {
  color: hsl(var(--primary)) !important;
}

/* S332-7: About Image Height — 320px not 400px (line 147) */
.page-id-18 .mk-plenerai-about__image img,
.mk-plenerai-about__image img,
.mk-plenerai-about .wp-block-image img,
body.page-plenerai .mk-plenerai-about img {
  height: 20rem !important; /* h-80 = 320px */
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 1rem !important; /* rounded-2xl = 16px (STANDARD) */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; /* shadow-lg */
}

/* S332-8: About Image Decorative Offset (line 143) */
.page-id-18 .mk-plenerai-about__image-offset,
.mk-plenerai-about__image-offset {
  position: absolute !important;
  top: -1rem !important; /* -top-4 = -16px */
  left: -1rem !important; /* -left-4 = -16px */
  width: 100% !important;
  height: 100% !important;
  background: hsl(var(--primary) / 0.1) !important;
  border-radius: 1rem !important; /* rounded-2xl */
  z-index: -1 !important;
}

/* S332-9: Gallery Grid — 2 columns with masonry offset (lines 162, 179) */
.page-id-18 .mk-plenerai__gallery,
.mk-plenerai__gallery {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important; /* gap-4 = 16px on mobile */
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__gallery,
  .mk-plenerai__gallery {
    gap: 1.5rem !important; /* md:gap-6 = 24px */
  }
}

/* S332-10: Gallery Column 2 Offset — pt-8 for masonry effect (line 179) */
.page-id-18 .mk-plenerai__gallery-col2,
.mk-plenerai__gallery-col2 {
  padding-top: 2rem !important; /* pt-8 = 32px */
}

/* S332-11: Gallery Images — rounded-xl container (line 164) */
.page-id-18 .mk-plenerai__gallery .mk-img-zoom,
.mk-plenerai__gallery .mk-img-zoom,
body.page-plenerai .mk-plenerai__gallery img {
  border-radius: 0.75rem !important; /* rounded-xl = 12px */
  overflow: hidden !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; /* shadow-lg */
}

/* S332-12: Gallery Image Heights — Tall vs Short (lines 168, 175, 184, 191) */
.page-id-18 .mk-plenerai__gallery-img--tall img,
.mk-plenerai__gallery-img--tall img {
  height: 12rem !important; /* h-48 = 192px on mobile */
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__gallery-img--tall img,
  .mk-plenerai__gallery-img--tall img {
    height: 16rem !important; /* md:h-64 = 256px */
  }
}

.page-id-18 .mk-plenerai__gallery-img--short img,
.mk-plenerai__gallery-img--short img {
  height: 8rem !important; /* h-32 = 128px on mobile */
}

@media (min-width: 768px) {
  .page-id-18 .mk-plenerai__gallery-img--short img,
  .mk-plenerai__gallery-img--short img {
    height: 12rem !important; /* md:h-48 = 192px */
  }
}

/* S332-13: Gallery Hover — scale-105 with 700ms duration (line 168) */
.page-id-18 .mk-plenerai__gallery .mk-img-zoom img,
.mk-plenerai__gallery .mk-img-zoom img {
  transition: transform 700ms ease !important; /* duration-700 NOT 500ms */
  width: 100% !important;
  object-fit: cover !important;
}

.page-id-18 .mk-plenerai__gallery .mk-img-zoom:hover img,
.mk-plenerai__gallery .mk-img-zoom:hover img {
  transform: scale(1.05) !important;
}

/* S332-14: ALL Plenerai Headings — font-weight: 700 not 600 */
.page-id-18 h1,
.page-id-18 h2,
.page-id-18 h3,
.mk-plenerai-hero h1,
.mk-plenerai__gallery h2,
.mk-plenerai-about h2,
body.page-plenerai h1,
body.page-plenerai h2,
body.page-plenerai h3 {
  font-weight: 700 !important; /* font-bold */
}

/* S332-15: Event Badge — Sparkles icon + backdrop-blur (lines 21-24) */
.page-id-18 .mk-plenerai-badge,
.mk-plenerai-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  background: hsl(var(--gold) / 0.2) !important; /* bg-gold/20 */
  backdrop-filter: blur(4px) !important; /* backdrop-blur-sm */
  -webkit-backdrop-filter: blur(4px) !important;
  padding: 0.5rem 1rem !important; /* py-2 px-4 */
  border-radius: 9999px !important; /* rounded-full */
  margin-bottom: 1.5rem !important; /* mb-6 */
}

.mk-plenerai-badge svg {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  color: hsl(var(--gold)) !important;
}

.mk-plenerai-badge span {
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  color: hsl(var(--gold)) !important;
}

/* ==========================================================================
   END SECTION S332: PLENERAI PAGE V4 SUPPLEMENTAL FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S327: POAUKCIONINE PAGE V4 PARITY FINAL (2026-03-28)
   ==========================================================================

   V4 Agent 8: Poaukcionine (Post-Auction) Page Final Implementation
   Reference: V4-PARITY-FIX-IMPLEMENTATION-REPORT.md (Agent 8)
   React Source: src/pages/PostAuction.tsx

   SUPPLEMENTS S307 with additional parity refinements.

   REACT EXACT VALUES FROM POSTAUCTION.TSX:
   - Container: container mx-auto px-4 py-8 = padding: 2rem vertical
   - Header wrapper: flex items-center gap-3 mb-4 = gap: 0.75rem, margin-bottom: 1rem
   - Header icon: w-12 h-12 = 48px, bg-amber-500/10 = rgba(245, 158, 11, 0.1)
   - ShoppingBag: w-6 h-6 text-amber-600 = 24px, #D97706
   - Title: text-3xl font-display font-bold = 1.875rem, Playfair Display, 700
   - Amber banner: p-4 bg-amber-500/10 rounded-lg border-amber-500/20
   - Clock icon: w-5 h-5 text-amber-600 = 20px, #D97706
   - Banner text: text-sm text-amber-800 = 14px, #92400E
   - Filters: p-4 bg-muted/30 rounded-lg = 16px, 8px radius
   - Select: w-[180px] = 180px
   - Deadline badge: CRITICAL — bg-destructive = #D42A2A (RED!)

   TAILWIND AMBER PALETTE:
   - amber-500: #F59E0B | amber-600: #D97706 | amber-800: #92400E
   ========================================================================== */

/* ---------------------------------------------------------------------
   S327-1: Page container — py-8 (2rem vertical padding)
   --------------------------------------------------------------------- */
body.page-id-93 .entry-content,
body.page-id-93 .wp-block-group.is-layout-constrained,
.page-poaukcionine .entry-content {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
  max-width: var(--wp--style--global--wide-size, 1400px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------------------------------------------------------------------
   S327-2: Header container — flex with 12px gap and 16px bottom margin
   --------------------------------------------------------------------- */
body.page-id-93 .mk-poaukcionine-header,
body.page-id-93 .mk-post-auction-header,
.page-poaukcionine .mk-poaukcionine-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-bottom: 1rem !important;
}

/* ---------------------------------------------------------------------
   S327-3: Amber info banner — STANDARD Tailwind rounded-lg = 8px
   --------------------------------------------------------------------- */
body.page-id-93 .mk-amber-info-banner,
body.page-id-93 .mk-post-auction-banner,
.page-poaukcionine .mk-amber-info-banner {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 1rem !important;
  background-color: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  border-radius: 0.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Banner clock icon — amber-600 */
body.page-id-93 .mk-amber-info-banner svg:first-child,
.page-poaukcionine .mk-amber-info-banner svg:first-child {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  flex-shrink: 0 !important;
  color: #D97706 !important;
}

/* Banner text — amber-800 */
body.page-id-93 .mk-amber-info-banner p,
.page-poaukcionine .mk-amber-info-banner p {
  font-size: 0.875rem !important;
  color: #92400E !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

body.page-id-93 .mk-amber-info-banner strong {
  font-weight: 700 !important;
}

/* Dark mode — amber-200 */
.dark body.page-id-93 .mk-amber-info-banner p,
body.page-id-93.dark .mk-amber-info-banner p {
  color: #FDE68A !important;
}

/* ---------------------------------------------------------------------
   S327-4: CRITICAL — Deadline badge MUST be RED (destructive)
   bg-destructive = hsl(0 65% 50%) = #D42A2A
   --------------------------------------------------------------------- */
body.page-id-93 .mk-deadline-badge,
body.page-id-93 .mk-liko-badge,
body.page-id-93 [class*="deadline-badge"],
body.page-id-93 .wc-block-grid__product .mk-deadline-badge,
.page-poaukcionine .mk-deadline-badge,
.poaukcionine .mk-deadline-badge,
body.page-id-93 li.product .mk-deadline-badge {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  z-index: 10 !important;
  padding: 0.25rem 0.5rem !important;
  background-color: #D42A2A !important;
  color: white !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  border-radius: 0.25rem !important;
  line-height: 1.25 !important;
}

/* Urgent badge pulse */
body.page-id-93 .mk-deadline-badge--urgent,
.page-poaukcionine .mk-deadline-badge--urgent {
  animation: mk-deadline-pulse-s327 2s ease-in-out infinite !important;
}

@keyframes mk-deadline-pulse-s327 {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

/* ---------------------------------------------------------------------
   S327-5: ShoppingBag header icon — amber-600
   --------------------------------------------------------------------- */
body.page-id-93 .mk-poaukcionine-header__icon svg,
.page-poaukcionine .mk-poaukcionine-header__icon svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: #D97706 !important;
}

body.page-id-93 .mk-poaukcionine-header__icon,
.page-poaukcionine .mk-poaukcionine-header__icon {
  width: 3rem !important;
  height: 3rem !important;
  min-width: 3rem !important;
  border-radius: 9999px !important;
  background-color: rgba(245, 158, 11, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------------
   S327-6: Filters row — muted/30 background, rounded-lg = 8px
   --------------------------------------------------------------------- */
body.page-id-93 .mk-filters-row,
body.page-id-93 .mk-post-auction-filters,
.page-poaukcionine .mk-filters-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
  padding: 1rem !important;
  background-color: hsl(var(--muted) / 0.3) !important;
  border-radius: 0.5rem !important;
}

/* Select triggers — 180px width */
body.page-id-93 .mk-filters-row select,
.page-poaukcionine .mk-filters-row select {
  width: 180px !important;
  height: 2.5rem !important;
  padding: 0 0.75rem !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: 0.125rem !important;
  background-color: hsl(var(--background)) !important;
  font-size: 0.875rem !important;
}

/* Result count wrapper */
body.page-id-93 .mk-result-count-wrapper,
.page-poaukcionine .mk-result-count-wrapper {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

body.page-id-93 .mk-result-count,
.page-poaukcionine .mk-result-count {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* View toggle */
body.page-id-93 .mk-view-toggle-wrapper,
.page-poaukcionine .mk-view-toggle-wrapper {
  display: flex !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
}

body.page-id-93 .mk-view-toggle-wrapper button,
.page-poaukcionine .mk-view-toggle-wrapper button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

body.page-id-93 .mk-view-toggle-wrapper button.is-active,
.page-poaukcionine .mk-view-toggle-wrapper button.is-active {
  background-color: hsl(var(--secondary)) !important;
}

body.page-id-93 .mk-view-toggle-wrapper button svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* ---------------------------------------------------------------------
   S327-7: Product grid — 4 columns at xl (no sidebar on this page)
   --------------------------------------------------------------------- */
body.page-id-93 .mk-product-grid,
body.page-id-93 .mk-post-auction-grid,
body.page-id-93 .wc-block-product-template,
.page-poaukcionine .mk-product-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}

@media (min-width: 640px) {
  body.page-id-93 .mk-product-grid,
  body.page-id-93 .wc-block-product-template,
  .page-poaukcionine .mk-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  body.page-id-93 .mk-product-grid,
  body.page-id-93 .wc-block-product-template,
  .page-poaukcionine .mk-product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  body.page-id-93 .mk-product-grid,
  body.page-id-93 .wc-block-product-template,
  .page-poaukcionine .mk-product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* List view mode */
body.page-id-93 .mk-product-grid.is-list-view,
.page-poaukcionine .mk-product-grid.is-list-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* ---------------------------------------------------------------------
   S327-8: Empty state styling
   --------------------------------------------------------------------- */
body.page-id-93 .mk-empty-state,
.page-poaukcionine .mk-empty-state {
  text-align: center !important;
  padding: 4rem 1rem !important;
}

body.page-id-93 .mk-empty-state svg,
.page-poaukcionine .mk-empty-state svg {
  width: 4rem !important;
  height: 4rem !important;
  color: hsl(var(--muted-foreground) / 0.3) !important;
  margin: 0 auto 1rem !important;
}

body.page-id-93 .mk-empty-state h3 {
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
}

body.page-id-93 .mk-empty-state p {
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 1rem !important;
}

/* ==========================================================================
   END SECTION S327: POAUKCIONINE PAGE V4 PARITY FINAL
   ========================================================================== */


/* ==========================================================================
   SECTION 334: FOOTER FINAL IMPLEMENTATION (Agent 15 - V4)
   React Source: src/components/layout/Footer.tsx
   Date: 2026-03-28

   Issues Fixed:
   - F15-1: Bottom padding consistency (py-16 = 4rem, bottom bar mt-12 pt-8)
   - F15-2: Separator as border-t (not wp:separator block appearance)
   - F15-4: Social icon size exactly 20px (w-5 h-5)
   - Grid: 5 columns at lg (lg:grid-cols-5)
   - Column gap: 2.5rem (gap-10)
   - Logo height: 64px (h-16) with brightness-0 invert filter
   - Link hover: gold color
   - Copyright opacity: 60%
   ========================================================================== */

/* ---------------------------------------------------------------------
   F15-1: Footer Container Padding
   React: container mx-auto px-4 py-16 (padding 4rem top AND bottom)
   --------------------------------------------------------------------- */
.mk-footer,
footer.wp-block-template-part,
.site-footer {
  padding-top: 4rem !important;   /* py-16 top */
  padding-bottom: 4rem !important; /* py-16 bottom */
}

.mk-footer > .wp-block-group,
footer.wp-block-template-part > .wp-block-group {
  padding-top: 4rem !important;   /* py-16 top */
  padding-bottom: 4rem !important; /* py-16 bottom */
  padding-left: 1rem !important;  /* px-4 */
  padding-right: 1rem !important; /* px-4 */
}

/* ---------------------------------------------------------------------
   F15-1: Grid Gap - 2.5rem (gap-10)
   React: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10
   --------------------------------------------------------------------- */
.mk-footer .wp-block-columns,
.mk-footer__columns,
.mk-footer__grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2.5rem !important; /* gap-10 = 40px */
}

@media (min-width: 768px) {
  .mk-footer .wp-block-columns,
  .mk-footer__columns,
  .mk-footer__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .mk-footer .wp-block-columns,
  .mk-footer__columns,
  .mk-footer__grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* Reset WP columns flex behavior */
.mk-footer .wp-block-columns,
.mk-footer__columns {
  flex-wrap: unset !important;
}

.mk-footer .wp-block-column {
  flex-basis: unset !important;
  flex-grow: unset !important;
  width: 100% !important;
}

/* ---------------------------------------------------------------------
   F15-2: Bottom Bar Separator - Use border-t, NOT wp:separator
   React: border-t border-primary-foreground/20 mt-12 pt-8 text-center
   --primary-foreground = HSL 40 30% 96%
   --------------------------------------------------------------------- */
.mk-footer__bottom,
.mk-footer__copyright-wrapper,
footer.wp-block-template-part .mk-footer__bottom {
  margin-top: 3rem !important;    /* mt-12 = 48px */
  padding-top: 2rem !important;   /* pt-8 = 32px */
  padding-bottom: 2rem !important; /* pb-8 = 32px */
  border-top: 1px solid hsl(40 30% 96% / 0.2) !important; /* border-primary-foreground/20 */
  text-align: center !important;
}

/* Hide the WordPress separator block - we use CSS border instead */
.mk-footer__bottom .wp-block-separator,
.mk-footer__bottom hr,
footer.wp-block-template-part .mk-footer__bottom .wp-block-separator,
footer.wp-block-template-part .mk-footer__bottom hr {
  display: none !important;
}

/* ---------------------------------------------------------------------
   F15-1: Copyright Text - 60% opacity
   React: text-sm text-primary-foreground/60
   --------------------------------------------------------------------- */
.mk-footer__bottom p,
.mk-footer__copyright,
.mk-footer__copyright-wrapper p,
footer.wp-block-template-part .mk-footer__bottom p {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(40 30% 96% / 0.6) !important; /* text-primary-foreground/60 */
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ---------------------------------------------------------------------
   F15-4: Social Icons - Exactly 20px (w-5 h-5)
   React: Facebook/Instagram icons are w-5 h-5 (20px)
   --------------------------------------------------------------------- */
.mk-footer__social svg,
.mk-footer .wp-block-social-links svg,
.mk-footer .wp-social-link svg,
.mk-footer__social .wp-social-link svg {
  width: 1.25rem !important;      /* w-5 = 20px */
  height: 1.25rem !important;     /* h-5 = 20px */
  min-width: 1.25rem !important;
  max-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-height: 1.25rem !important;
}

/* Social link container also constrained */
.mk-footer__social a,
.mk-footer .wp-block-social-links a,
.mk-footer .wp-social-link a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Social link background override */
.mk-footer .wp-social-link {
  background: transparent !important;
  padding: 0 !important;
}

/* Social icons gap */
.mk-footer__social,
.mk-footer .wp-block-social-links {
  display: flex !important;
  gap: 1rem !important; /* gap-4 = 16px */
  margin-top: 1.5rem !important; /* mt-6 = 24px */
  padding: 0 !important;
  list-style: none !important;
}

/* ---------------------------------------------------------------------
   Logo - 64px height with brightness-0 invert filter
   React: h-16 object-contain brightness-0 invert, mb-6
   --------------------------------------------------------------------- */
.mk-footer__logo img,
.mk-footer .custom-logo,
.mk-footer .wp-block-site-logo img,
.mk-footer__brand .wp-block-site-logo img {
  height: 4rem !important;        /* h-16 = 64px */
  width: auto !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important; /* white logo */
}

.mk-footer__brand,
.mk-footer .wp-block-site-logo,
.mk-footer__brand .wp-block-site-logo {
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
  display: block !important;
}

/* ---------------------------------------------------------------------
   Link Hover - Gold color
   React: hover:text-gold transition-colors
   --gold = HSL 42 55% 58%
   --------------------------------------------------------------------- */
.mk-footer a:hover,
.mk-footer .wp-block-social-links a:hover,
.mk-footer .wp-social-link a:hover,
.mk-footer__links a:hover,
.mk-footer__contacts a:hover,
.mk-footer__contact-item a:hover {
  color: hsl(42 55% 58%) !important; /* --gold */
}

.mk-footer__social a:hover svg,
.mk-footer .wp-block-social-links a:hover svg,
.mk-footer .wp-social-link a:hover svg {
  color: hsl(42 55% 58%) !important; /* --gold */
  fill: hsl(42 55% 58%) !important;
}

/* Transition for smooth hover */
.mk-footer a,
.mk-footer svg {
  transition: color 200ms ease, fill 200ms ease !important;
}

/* ==========================================================================
   END SECTION 334: FOOTER FINAL IMPLEMENTATION
   ========================================================================== */

/* ==========================================================================
   SECTION 336: BUTTONS & CTAs V4 FINAL PARITY (2026-03-28)
   ==========================================================================

   Agent: 17 — Buttons & CTAs Implementation
   Reference: src/components/ui/button.tsx

   React Button Base Styles (cva):
   - inline-flex items-center justify-center
   - gap-2 (8px)
   - whitespace-nowrap
   - text-sm font-medium (14px, 500)
   - ring-offset-background (for focus)
   - transition-all duration-300
   - focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
   - disabled:pointer-events-none disabled:opacity-50
   - [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0

   React Button Sizes:
   - default: h-10 (40px), px-6 py-2 (24px 8px)
   - sm: h-9 (36px), px-4 (16px)
   - lg: h-12 (48px), px-8 (32px), text-base
   - xl: h-14 (56px), px-10 (40px), text-base
   - icon: h-10 w-10 (40px square)

   React Button Variants:
   - default: bg-primary text-primary-foreground hover:bg-primary/90 rounded
   - catalog: bg-primary + shadow-elegant + tracking-wide + hover:shadow-hover
   - gold: bg-gold text-forest-dark + shadow-elegant + hover:bg-gold-light
   - elegant: border-foreground/20 transparent bg + hover:border-primary hover:text-primary
   - outline: border-primary text-primary + hover fills primary
   - ghost: transparent + hover:bg-accent hover:text-accent-foreground

   FOCUS RING PATTERN (React -> CSS):
   React: focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
   CSS: box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
   This creates the "offset" effect (2px cream gap) + "ring" (2px colored ring)
   ========================================================================== */

/* ---------------------------------------------------------------------
   B336-1: Unified Focus Ring for ALL Buttons
   Override all previous focus patterns with the correct React double-ring
   --------------------------------------------------------------------- */
.mk-btn:focus-visible,
.mk-btn-default:focus-visible,
.mk-btn-catalog:focus-visible,
.mk-btn-elegant:focus-visible,
.mk-btn-outline:focus-visible,
.mk-btn-ghost:focus-visible,
.mk-btn-secondary:focus-visible,
.mk-btn-destructive:focus-visible,
.mk-btn-link:focus-visible,
button.mk-btn:focus-visible,
a.mk-btn:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;
}

/* Gold buttons use gold ring color */
.mk-btn-gold:focus-visible,
button.mk-btn-gold:focus-visible,
a.mk-btn-gold:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--gold)) !important;
}

/* WordPress Block Buttons */
.wp-block-button__link:focus-visible,
.wp-block-button.is-style-catalog .wp-block-button__link:focus-visible,
.wp-block-button.is-style-elegant .wp-block-button__link:focus-visible,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;
}

.wp-block-button.is-style-gold .wp-block-button__link:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--gold)) !important;
}

/* WooCommerce Buttons — unified focus ring */
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button.alt:focus-visible,
.woocommerce input.button.alt:focus-visible,
.woocommerce a.button.alt:focus-visible,
.woocommerce .cart .button:focus-visible,
.woocommerce .coupon .button:focus-visible,
.wc-block-components-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;
}

/* Add to cart buttons use gold ring */
.single-product .single_add_to_cart_button:focus-visible,
.single-product form.cart .button:focus-visible,
.woocommerce ul.products li.product .add_to_cart_button:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--gold)) !important;
}

/* ---------------------------------------------------------------------
   B336-2: SVG Icon Styling in Buttons
   React: [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
   --------------------------------------------------------------------- */
.mk-btn svg,
.wp-block-button__link svg,
.woocommerce button.button svg,
.woocommerce a.button svg,
.wc-block-components-button svg {
  pointer-events: none !important;
  width: 1rem !important;     /* size-4 = 16px */
  height: 1rem !important;
  flex-shrink: 0 !important;  /* shrink-0 prevents squishing */
}

/* Large/XL buttons can have slightly larger icons */
.mk-btn-lg svg,
.mk-btn-xl svg {
  width: 1.25rem !important;  /* 20px */
  height: 1.25rem !important;
}

/* Icon-only buttons center the SVG */
.mk-btn-icon svg {
  margin: 0 !important;
}

/* ---------------------------------------------------------------------
   B336-3: Button Text Behavior
   React: whitespace-nowrap (prevents text wrapping)
   --------------------------------------------------------------------- */
.mk-btn,
.wp-block-button__link,
.woocommerce button.button,
.woocommerce a.button,
.wc-block-components-button {
  white-space: nowrap !important;
}

/* ---------------------------------------------------------------------
   B336-4: Transition Consistency
   React: transition-all duration-300
   Apply to ALL button contexts for smooth hover/focus effects
   --------------------------------------------------------------------- */
.mk-btn,
.wp-block-button__link,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.wc-block-components-button {
  transition: all 300ms ease !important;
}

/* ---------------------------------------------------------------------
   B336-5: Disabled State Consistency
   React: disabled:pointer-events-none disabled:opacity-50
   --------------------------------------------------------------------- */
.mk-btn:disabled,
.mk-btn[aria-disabled="true"],
.mk-btn[disabled],
.wp-block-button__link:disabled,
.wp-block-button__link[aria-disabled="true"],
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce a.button.disabled,
.wc-block-components-button:disabled,
.wc-block-components-button[aria-disabled="true"] {
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ---------------------------------------------------------------------
   B336-6: Border-Radius Consistency = 4px (rounded)
   React uses "rounded" class = var(--radius) = 0.25rem = 4px
   Override any incorrect radius values
   --------------------------------------------------------------------- */
.mk-btn,
.mk-btn-default,
.mk-btn-catalog,
.mk-btn-gold,
.mk-btn-elegant,
.mk-btn-outline,
.mk-btn-ghost,
.mk-btn-secondary,
.mk-btn-destructive {
  border-radius: 0.25rem !important; /* 4px, NOT var(--radius) for specificity */
}

.mk-btn-link {
  border-radius: 0 !important; /* Link variant has no rounded class */
}

/* WordPress Block Buttons inherit 4px radius */
.wp-block-button__link {
  border-radius: 0.25rem !important;
}

/* WooCommerce Buttons */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.wc-block-components-button {
  border-radius: 0.25rem !important;
}

/* ---------------------------------------------------------------------
   B336-7: Gap for Buttons with Icons
   React: gap-2 (8px) for icon + text spacing
   --------------------------------------------------------------------- */
.mk-btn,
.wp-block-button__link,
.woocommerce button.button,
.woocommerce a.button,
.wc-block-components-button {
  gap: 0.5rem !important; /* gap-2 = 8px */
}

/* Icon buttons have no gap (single element) */
.mk-btn-icon {
  gap: 0 !important;
}

/* ==========================================================================
   END SECTION 336: BUTTONS & CTAs V4 FINAL PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION S337: PRODUCT CARDS V4 FINAL PARITY (2026-03-29)
   ==========================================================================

   V4 Agent 18: Product Cards Implementation
   Reference: V4-PARITY-FIX-IMPLEMENTATION-REPORT.md (Agent 18)
   React Source:
   - src/components/auction/ArtworkCard.tsx (lines 1-314)
   - src/components/gallery/GalleryCard.tsx (lines 1-82)

   REACT EXACT VALUES:

   Vertical Card Base (ArtworkCard.tsx lines 162-311):
   - bg-card rounded-sm (0px) overflow-hidden
   - shadow-card hover:shadow-hover transition-all duration-300
   - Image: aspect-[4/5] (aspect-ratio: 4/5)
   - Image hover: scale(1.05) duration-500
   - Badges: absolute top-3 right-3, flex-col gap-2
   - Timer overlay: absolute bottom-0, gradient from-foreground/80, p-3
   - Content: p-5 (20px padding)
   - Title: font-display text-lg font-semibold mb-1
   - Artist: text-sm text-muted-foreground mb-1
   - Buttons: space-y-2 (0.5rem gap), w-full

   Horizontal Card (ArtworkCard.tsx lines 36-159):
   - Base: same as vertical + flex (horizontal layout)
   - Image: w-48 h-48 (192×192px) flex-shrink-0
   - Content: p-5 flex-1 flex-col justify-between
   - Timer: mt-2 inline (compact variant, not overlay)
   - Buttons: flex gap-2 inline, size="sm"

   Gallery Card (GalleryCard.tsx lines 31-77):
   - Identical to vertical ArtworkCard minus badges/timer
   - Price: text-xl font-bold text-primary mb-4

   PARDUOTA Overlay (lines 204-210):
   - absolute inset-0 bg-foreground/60 flex center
   - Badge: bg-gold text-foreground text-lg px-4 py-2
   - Icon: w-4 h-4 mr-2

   ========================================================================== */

/* ---------------------------------------------------------------------
   S337-1: Vertical Card Base — rounded-sm (0px), shadow-card→hover
   React: <div className="group bg-card rounded-sm overflow-hidden shadow-card hover:shadow-hover transition-all duration-300">
   --------------------------------------------------------------------- */
.wc-block-product,
.mk-product-card,
li.wc-block-product,
.mk-gallery-card {
  background: hsl(var(--card)) !important;
  border-radius: 0 !important;             /* rounded-sm = 0px per custom config */
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  transition: all 300ms ease !important;   /* transition-all duration-300 */
}

.wc-block-product:hover,
.mk-product-card:hover,
li.wc-block-product:hover,
.mk-gallery-card:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* ---------------------------------------------------------------------
   S337-2: Vertical Card Image Container — aspect-[4/5]
   React: <div className="relative aspect-[4/5] overflow-hidden">
   --------------------------------------------------------------------- */
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wc-block-grid__product-image,
.mk-product-card .mk-product-card__image,
.mk-gallery-card .mk-gallery-card__image,
.wc-block-product .wp-block-post-featured-image {
  position: relative !important;
  aspect-ratio: 4 / 5 !important;          /* aspect-[4/5] */
  overflow: hidden !important;
}

/* ---------------------------------------------------------------------
   S337-3: Vertical Card Image Hover Zoom — scale(1.05) 500ms
   React: className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
   --------------------------------------------------------------------- */
.wc-block-product .wc-block-components-product-image img,
.wc-block-product .wc-block-grid__product-image img,
.mk-product-card .mk-product-card__image img,
.mk-gallery-card .mk-gallery-card__image img,
.wc-block-product .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 500ms ease !important; /* duration-500 */
}

.wc-block-product:hover .wc-block-components-product-image img,
.wc-block-product:hover .wc-block-grid__product-image img,
.mk-product-card:hover .mk-product-card__image img,
.mk-gallery-card:hover .mk-gallery-card__image img,
.wc-block-product:hover .wp-block-post-featured-image img {
  transform: scale(1.05) !important;       /* group-hover:scale-105 */
}

/* ---------------------------------------------------------------------
   S337-4: Vertical Card Status Badge Stack — top-3 right-3, flex-col gap-2
   React: <div className="absolute top-3 right-3 flex flex-col gap-2">
   --------------------------------------------------------------------- */
.wc-block-product .mk-badges,
.mk-product-card .mk-badges,
.mk-product-card__badges {
  position: absolute !important;
  top: 0.75rem !important;                 /* top-3 = 12px */
  right: 0.75rem !important;               /* right-3 = 12px */
  display: flex !important;
  flex-direction: column !important;       /* flex-col */
  gap: 0.5rem !important;                  /* gap-2 = 8px */
  z-index: 10 !important;
}

/* Badge variants already defined in previous sections — this just positions the stack */

/* ---------------------------------------------------------------------
   S337-5: Vertical Card Timer Overlay — bottom-0, gradient, p-3
   React: <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-foreground/80 to-transparent p-3">
   --------------------------------------------------------------------- */
.wc-block-product .mk-timer-overlay,
.mk-product-card .mk-timer-overlay,
.mk-product-card__timer-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(
    to top,
    hsl(160 30% 18% / 0.8) 0%,            /* from-foreground/80 */
    transparent 100%
  ) !important;
  padding: 0.75rem !important;             /* p-3 = 12px */
  z-index: 5 !important;
}

/* Timer text color override for visibility on gradient */
.mk-timer-overlay .mk-timer,
.mk-timer-overlay .auction-time-left {
  color: hsl(var(--cream)) !important;     /* Light text on dark gradient */
}

/* ---------------------------------------------------------------------
   S337-6: Vertical Card Content Padding — p-5 (20px)
   React: <div className="p-5">
   --------------------------------------------------------------------- */
.wc-block-product .wc-block-product__product-details,
.mk-product-card .mk-product-card__content,
.mk-gallery-card .mk-gallery-card__content,
.wc-block-product > div:not(.wc-block-components-product-image):not(.wc-block-grid__product-image) {
  padding: 1.25rem !important;             /* p-5 = 20px */
}

/* ---------------------------------------------------------------------
   S337-7: Vertical Card Title Typography
   React: <h3 className="font-display text-lg font-semibold text-foreground mb-1">
   --------------------------------------------------------------------- */
.wc-block-product .wp-block-post-title,
.wc-block-product .wp-block-post-title a,
.mk-product-card .mk-product-card__title,
.mk-gallery-card .mk-gallery-card__title {
  font-family: var(--font-display) !important; /* Playfair Display */
  font-size: 1.125rem !important;          /* text-lg = 18px */
  font-weight: 600 !important;             /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0.25rem !important;       /* mb-1 = 4px */
  line-height: 1.75rem !important;
}

/* ---------------------------------------------------------------------
   S337-8: Vertical Card Artist Typography
   React: <p className="text-sm text-muted-foreground mb-1">
           <span className="block text-xs italic">({artistDates})</span>
   --------------------------------------------------------------------- */
.wc-block-product .mk-card-meta__artist,
.mk-product-card .mk-card-meta__artist,
.mk-gallery-card .mk-gallery-card__artist {
  font-size: 0.875rem !important;          /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0.25rem !important;       /* mb-1 = 4px */
}

.wc-block-product .mk-card-meta__dates,
.mk-product-card .mk-card-meta__dates,
.mk-gallery-card .mk-gallery-card__dates {
  display: block !important;               /* block */
  font-size: 0.75rem !important;           /* text-xs = 12px */
  font-style: italic !important;
}

/* ---------------------------------------------------------------------
   S337-9: Vertical Card Button Container — space-y-2, w-full
   React: <div className="space-y-2">
           <Button variant="gold" className="w-full" />
           <Button variant="elegant" className="w-full" />
   --------------------------------------------------------------------- */
.wc-block-product .wp-block-buttons,
.mk-product-card .mk-product-card__buttons,
.mk-gallery-card .mk-gallery-card__buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;                  /* space-y-2 = 8px */
}

.wc-block-product .wp-block-button,
.mk-product-card .mk-product-card__buttons .wp-block-button,
.mk-gallery-card .mk-gallery-card__buttons .wp-block-button {
  width: 100% !important;                  /* w-full */
  margin: 0 !important;                    /* Override default WP button margins */
}

.wc-block-product .wp-block-button__link,
.mk-product-card .mk-product-card__buttons .wp-block-button__link,
.mk-gallery-card .mk-gallery-card__buttons .wp-block-button__link {
  width: 100% !important;
}

/* ---------------------------------------------------------------------
   S337-10: Horizontal Card Base — flex horizontal layout
   React: <div className="... flex">
           <div className="relative w-48 h-48 flex-shrink-0 overflow-hidden">
           <div className="p-5 flex-1 flex flex-col justify-between">
   --------------------------------------------------------------------- */
.mk-catalog--list .wc-block-product,
.mk-catalog--list .mk-product-card,
.mk-view-list .wc-block-product,
.mk-view-list .mk-product-card {
  display: flex !important;                /* flex horizontal */
  flex-direction: row !important;
}

/* ---------------------------------------------------------------------
   S337-11: Horizontal Card Image — w-48 h-48 (192×192px) flex-shrink-0
   React: <div className="relative w-48 h-48 flex-shrink-0 overflow-hidden">
   --------------------------------------------------------------------- */
.mk-catalog--list .wc-block-product .wc-block-components-product-image,
.mk-catalog--list .mk-product-card .mk-product-card__image,
.mk-view-list .wc-block-product .wc-block-components-product-image,
.mk-view-list .mk-product-card .mk-product-card__image {
  width: 12rem !important;                 /* w-48 = 192px */
  height: 12rem !important;                /* h-48 = 192px */
  min-width: 12rem !important;             /* Prevent shrinking */
  min-height: 12rem !important;
  flex-shrink: 0 !important;               /* flex-shrink-0 */
  aspect-ratio: 1 / 1 !important;          /* Square, override 4/5 */
}

/* ---------------------------------------------------------------------
   S337-12: Horizontal Card Content — p-5 flex-1 flex-col justify-between
   React: <div className="p-5 flex-1 flex flex-col justify-between">
   --------------------------------------------------------------------- */
.mk-catalog--list .wc-block-product .wc-block-product__product-details,
.mk-catalog--list .mk-product-card .mk-product-card__content,
.mk-view-list .wc-block-product .wc-block-product__product-details,
.mk-view-list .mk-product-card .mk-product-card__content {
  padding: 1.25rem !important;             /* p-5 = 20px */
  flex: 1 !important;                      /* flex-1 */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* ---------------------------------------------------------------------
   S337-13: Horizontal Card Timer — mt-2 inline (compact variant)
   React: <div className="mt-2"><AuctionTimer variant="compact" /></div>
   --------------------------------------------------------------------- */
.mk-catalog--list .wc-block-product .mk-timer,
.mk-catalog--list .mk-product-card .mk-timer,
.mk-view-list .wc-block-product .mk-timer,
.mk-view-list .mk-product-card .mk-timer {
  margin-top: 0.5rem !important;           /* mt-2 = 8px */
  position: static !important;             /* Override absolute positioning */
  background: transparent !important;      /* No gradient overlay */
  padding: 0 !important;
}

/* ---------------------------------------------------------------------
   S337-14: Horizontal Card Button Row — flex gap-2, size="sm"
   React: <div className="flex gap-2">
   --------------------------------------------------------------------- */
.mk-catalog--list .wc-block-product .wp-block-buttons,
.mk-catalog--list .mk-product-card .mk-product-card__buttons,
.mk-view-list .wc-block-product .wp-block-buttons,
.mk-view-list .mk-product-card .mk-product-card__buttons {
  display: flex !important;
  flex-direction: row !important;          /* Horizontal, not vertical */
  gap: 0.5rem !important;                  /* gap-2 = 8px */
  justify-content: flex-end !important;    /* Align right */
}

.mk-catalog--list .wc-block-product .wp-block-button,
.mk-catalog--list .mk-product-card .mk-product-card__buttons .wp-block-button,
.mk-view-list .wc-block-product .wp-block-button,
.mk-view-list .mk-product-card .mk-product-card__buttons .wp-block-button {
  width: auto !important;                  /* Not w-full in horizontal */
}

.mk-catalog--list .wc-block-product .wp-block-button__link,
.mk-catalog--list .mk-product-card .mk-product-card__buttons .wp-block-button__link,
.mk-view-list .wc-block-product .wp-block-button__link,
.mk-view-list .mk-product-card .mk-product-card__buttons .wp-block-button__link {
  height: 2.25rem !important;              /* size="sm" = h-9 = 36px */
  padding: 0 1rem !important;              /* px-4 */
  font-size: 0.875rem !important;
  width: auto !important;
}

/* ---------------------------------------------------------------------
   S337-15: Horizontal Card Badge Position — top-2 left-2 (single)
   React: <div className="absolute top-2 left-2">
   --------------------------------------------------------------------- */
.mk-catalog--list .wc-block-product .mk-badges,
.mk-catalog--list .mk-product-card .mk-badges,
.mk-view-list .wc-block-product .mk-badges,
.mk-view-list .mk-product-card .mk-badges {
  top: 0.5rem !important;                  /* top-2 = 8px */
  left: 0.5rem !important;                 /* left-2 = 8px */
  right: auto !important;                  /* Override right-3 from vertical */
}

/* ---------------------------------------------------------------------
   S337-16: Gallery Card Price — text-xl font-bold text-primary mb-4
   React: <div className="text-xl font-bold text-primary mb-4">
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-product .wc-block-components-product-price,
.mk-gallery-card .mk-gallery-card__price,
.mk-galerija .wc-block-product .wc-block-components-product-price {
  font-size: 1.25rem !important;           /* text-xl = 20px */
  font-weight: 700 !important;             /* font-bold */
  color: hsl(var(--primary)) !important;
  margin-bottom: 1rem !important;          /* mb-4 = 16px */
}

/* ---------------------------------------------------------------------
   S337-17: PARDUOTA Overlay — absolute inset-0, foreground/60, centered
   React: <div className="absolute inset-0 bg-foreground/60 flex items-center justify-center">
           <Badge className="bg-gold text-foreground text-lg px-4 py-2">
   --------------------------------------------------------------------- */
.wc-block-product .mk-sold-overlay,
.mk-product-card .mk-sold-overlay,
.mk-sold-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;                    /* inset-0 */
  background: hsl(160 30% 18% / 0.6) !important; /* bg-foreground/60 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important;                  /* Above badges and timer */
}

.mk-sold-overlay .mk-badge,
.mk-sold-overlay .mk-badge--sold {
  background: hsl(var(--gold)) !important; /* bg-gold */
  color: hsl(var(--foreground)) !important;
  font-size: 1.125rem !important;          /* text-lg = 18px */
  font-weight: 600 !important;             /* font-semibold */
  padding: 0.5rem 1rem !important;         /* py-2 px-4 = 8px 16px */
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
}

.mk-sold-overlay .mk-badge svg {
  width: 1rem !important;                  /* w-4 = 16px */
  height: 1rem !important;                 /* h-4 = 16px */
  margin-right: 0.5rem !important;         /* mr-2 = 8px */
}

/* ---------------------------------------------------------------------
   S337-18: Card Meta Info Spacing — estimate, bid count
   React: Various spacing from ArtworkCard lines 236-273
   --------------------------------------------------------------------- */
.wc-block-product .mk-card-meta__estimate,
.mk-product-card .mk-card-meta__estimate {
  font-size: 0.875rem !important;          /* text-sm */
  color: hsl(var(--gold)) !important;
}

.wc-block-product .mk-card-meta__bid-count,
.mk-product-card .mk-card-meta__bid-count {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* ---------------------------------------------------------------------
   S337-18a: Medium/Technique — matches React GalleryCard
   React: <p className="text-xs text-muted-foreground mb-3">{artwork.medium}</p>
   --------------------------------------------------------------------- */
.wc-block-product .mk-card-meta__medium,
.mk-product-card .mk-card-meta__medium,
.mk-gallery-card .mk-card-meta__medium {
  font-size: 0.75rem !important;              /* text-xs = 12px */
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0.75rem !important;          /* mb-3 = 12px */
  margin-top: 0 !important;
}

/* ---------------------------------------------------------------------
   S337-19: Responsive Overrides — Preserve vertical layout on mobile
   --------------------------------------------------------------------- */
@media (max-width: 1279px) {
  /* Force vertical layout on tablets/mobile even if .mk-catalog--list class present */
  .mk-catalog--list .wc-block-product,
  .mk-catalog--list .mk-product-card {
    flex-direction: column !important;
  }

  .mk-catalog--list .wc-block-product .wc-block-components-product-image,
  .mk-catalog--list .mk-product-card .mk-product-card__image {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    aspect-ratio: 4 / 5 !important;        /* Back to vertical aspect */
  }

  .mk-catalog--list .wc-block-product .wp-block-buttons,
  .mk-catalog--list .mk-product-card .mk-product-card__buttons {
    flex-direction: column !important;     /* Stack buttons on mobile */
    gap: 0.5rem !important;
  }

  .mk-catalog--list .wc-block-product .wp-block-button,
  .mk-catalog--list .mk-product-card .mk-product-card__buttons .wp-block-button,
  .mk-catalog--list .wc-block-product .wp-block-button__link,
  .mk-catalog--list .mk-product-card .mk-product-card__buttons .wp-block-button__link {
    width: 100% !important;
  }

  .mk-catalog--list .wc-block-product .mk-badges,
  .mk-catalog--list .mk-product-card .mk-badges {
    top: 0.75rem !important;               /* Back to top-3 */
    right: 0.75rem !important;             /* Back to right-3 */
    left: auto !important;
  }
}

/* ==========================================================================
   END SECTION S337: PRODUCT CARDS V4 FINAL PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION S338: FILTERS & TOGGLES V4 FINAL PARITY (2026-03-28)
   ==========================================================================

   V4 Agent 19: Filters & Toggles Implementation
   Reference: V4-PARITY-FIX-IMPLEMENTATION-REPORT.md (Agent 19)
   React Source: src/pages/Catalog.tsx (lines 147-202), src/components/ui/switch.tsx

   REACT EXACT VALUES:

   Switch (switch.tsx):
   - Track: h-6 w-11 = height: 1.5rem (24px), width: 2.75rem (44px)
   - Thumb: h-5 w-5 = 1.25rem (20px)
   - Unchecked: bg-input = hsl(36 20% 85%)
   - Checked: data-[state=checked]:bg-primary = hsl(160 30% 28%)
   - Border: border-2 border-transparent
   - Radius: rounded-full = 9999px

   Filter Card (Catalog.tsx line 149, 170):
   - bg-card rounded-sm p-4 shadow-card
   - rounded-sm = 0px (custom Tailwind config)
   - p-4 = 1rem (16px)

   Time Filter Buttons (Catalog.tsx lines 156-160):
   - px-3 py-2 rounded-md text-sm
   - rounded-md = 2px (custom config calc(var(--radius) - 2px))
   - Active: bg-primary text-primary-foreground

   Clear Filters Button (Catalog.tsx lines 194-201):
   - variant="outline" className="w-full"
   - border border-primary text-primary bg-transparent
   - hover:bg-primary hover:text-primary-foreground
   - rounded (4px default)

   ========================================================================== */

/* ---------------------------------------------------------------------
   S338-1: Filter Card Container — rounded-sm = 0px, p-4, shadow-card
   React: <div className="bg-card rounded-sm p-4 shadow-card">
   --------------------------------------------------------------------- */
.mk-catalog__sidebar .mk-filter-group,
.mk-catalog-sidebar .mk-filter-group,
.mk-time-filter-card,
.mk-quick-filter-card {
  background: hsl(var(--card)) !important;
  border-radius: 0 !important; /* rounded-sm = 0px (custom Tailwind) */
  padding: 1rem !important; /* p-4 = 16px */
  box-shadow: var(--shadow-card) !important;
}

/* ---------------------------------------------------------------------
   S338-2: Time Filter Buttons — px-3 py-2 rounded-md, active bg-primary
   React: className={`px-3 py-2 rounded-md text-sm ${active ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`}
   --------------------------------------------------------------------- */
.mk-time-filter-btn {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  border-radius: 0.125rem !important; /* rounded-md = 2px (custom config) */
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--foreground)) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 200ms ease, color 200ms ease !important;
}

.mk-time-filter-btn:hover {
  background: hsl(var(--muted)) !important; /* hover:bg-muted */
}

/* Active state — bg-primary text-primary-foreground */
.mk-time-filter-btn.active,
.mk-time-filter-btn.is-active,
.mk-time-filter-btn[aria-pressed="true"] {
  background: hsl(var(--primary)) !important; /* bg-primary = #325A4D */
  color: hsl(var(--primary-foreground)) !important; /* text-primary-foreground = cream */
}

/* ---------------------------------------------------------------------
   S338-3: Quick Filter Toggle Switches — h-6 w-11 track, h-5 w-5 thumb
   React Switch: h-6 w-11 (24px x 44px track), h-5 w-5 (20px thumb)
   --------------------------------------------------------------------- */

/* Toggle Track */
.mk-sqf-toggle__track,
.mk-qf-toggle__track,
.mk-toggle-track {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 2.75rem !important; /* w-11 = 44px */
  height: 1.5rem !important; /* h-6 = 24px */
  flex-shrink: 0 !important;
  border: 2px solid transparent !important;
  border-radius: 9999px !important; /* rounded-full */
  background: hsl(var(--input)) !important; /* bg-input = hsl(36 20% 85%) */
  cursor: pointer !important;
  transition: background-color 200ms ease !important;
}

/* Toggle Track Checked State — bg-primary */
.mk-sqf-toggle.is-active .mk-sqf-toggle__track,
.mk-qf-toggle.is-active .mk-qf-toggle__track,
.mk-toggle-track.is-active,
.mk-sqf-toggle__track.is-active {
  background: hsl(var(--primary)) !important; /* bg-primary = #325A4D */
}

/* Toggle Thumb */
.mk-sqf-toggle__thumb,
.mk-qf-toggle__thumb,
.mk-toggle-thumb,
.mk-sqf-toggle__track::after,
.mk-qf-toggle__track::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
  border-radius: 9999px !important; /* rounded-full */
  background: hsl(var(--background)) !important; /* cream */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  pointer-events: none !important;
  transition: transform 200ms ease !important;
}

/* Thumb Position When Checked — translate right by (44px - 20px - 4px border) = 20px */
.mk-sqf-toggle.is-active .mk-sqf-toggle__thumb,
.mk-sqf-toggle.is-active .mk-sqf-toggle__track::after,
.mk-qf-toggle.is-active .mk-qf-toggle__thumb,
.mk-qf-toggle.is-active .mk-qf-toggle__track::after,
.mk-toggle-thumb.is-active {
  transform: translateX(1.25rem) !important; /* slide 20px to right */
}

/* Hidden Checkbox for Accessibility */
.mk-sqf-toggle input[type="checkbox"],
.mk-qf-toggle input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Toggle Label Text */
.mk-sqf-toggle__label,
.mk-qf-toggle__label {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(var(--foreground)) !important;
  flex: 1 !important;
}

/* ---------------------------------------------------------------------
   S338-4: Clear Filters Button — outline variant, full width
   React: <Button variant="outline" className="w-full">
   button.tsx line 14: border border-primary text-primary bg-transparent
   hover:bg-primary hover:text-primary-foreground rounded
   --------------------------------------------------------------------- */
#mk-clear-filters,
.mk-clear-filters-btn,
.mk-btn-clear-filters {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  width: 100% !important; /* w-full */
  padding: 0.5rem 1.5rem !important; /* h-10 px-6 py-2 default */
  height: 2.5rem !important; /* h-10 = 40px */
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  border: 1px solid hsl(var(--primary)) !important; /* border-primary */
  border-radius: 0.25rem !important; /* rounded = var(--radius) = 4px */
  background: transparent !important; /* bg-transparent */
  color: hsl(var(--primary)) !important; /* text-primary */
  cursor: pointer !important;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease !important;
}

#mk-clear-filters:hover,
.mk-clear-filters-btn:hover,
.mk-btn-clear-filters:hover {
  background: hsl(var(--primary)) !important; /* hover:bg-primary */
  color: hsl(var(--primary-foreground)) !important; /* hover:text-primary-foreground */
}

/* Clear Button Icon (X) */
#mk-clear-filters svg,
.mk-clear-filters-btn svg,
.mk-btn-clear-filters svg {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  flex-shrink: 0 !important;
}

/* Clear Button Hidden State */
#mk-clear-filters:not(.visible),
#mk-clear-filters[data-visible="false"] {
  display: none !important;
}

/* ---------------------------------------------------------------------
   S338-5: Quick Filters Container Layout
   React: <div className="space-y-4"> inside quick filters card
   --------------------------------------------------------------------- */
.mk-sidebar-qf,
.mk-quick-filters-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* space-y-4 = 16px */
}

/* Individual toggle row — flex items-center justify-between */
.mk-sqf-toggle,
.mk-qf-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  cursor: pointer !important;
}

/* ---------------------------------------------------------------------
   S338-6: Filter Group Heading — font-display font-semibold mb-3
   React: <h3 className="font-display font-semibold mb-3">
   --------------------------------------------------------------------- */
.mk-filter-group h3,
.mk-filter-group .wp-block-heading,
.mk-time-filter-card h3,
.mk-quick-filter-card h3 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-weight: 600 !important; /* font-semibold */
  font-size: 1rem !important;
  margin-bottom: 0.75rem !important; /* mb-3 = 12px */
  margin-top: 0 !important;
  color: hsl(var(--foreground)) !important;
}

/* ==========================================================================
   END SECTION S338: FILTERS & TOGGLES V4 FINAL PARITY
   SECTION S339: GLOBAL SPACING & TYPOGRAPHY V4 PARITY (Agent 20)
   ==========================================================================

   React Source: tailwind.config.ts + src/index.css

   SPACING VALUES from Tailwind:
   - Container max-width: 1400px (theme.container.screens["2xl"])
   - Container padding: 2rem (theme.container.padding) — but pages use px-4 = 1rem
   - Page vertical padding: py-12 = 3rem (most pages), py-8 = 2rem (PostAuction)
   - Section spacing: space-y-8 = 2rem between sections
   - Sidebar sticky: top-24 = 6rem (96px) from top

   MAX-WIDTHS per page:
   - Contact, HowToSell: max-w-5xl = 1024px
   - HowToBuy, Account, Plenerai: max-w-4xl = 896px
   - GiftVoucher: max-w-6xl = 1152px

   BREAKPOINTS:
   - sm: 640px
   - md: 768px
   - lg: 1024px
   - xl: 1280px
   - 2xl: 1536px (container max-width)

   TYPOGRAPHY:
   - Display font: Playfair Display
   - Body font: Inter
   - text-sm: 0.875rem (14px)
   - text-base: 1rem (16px)
   - text-lg: 1.125rem (18px)
   - leading-relaxed: 1.625

   ========================================================================== */

/* S339-1: Container global settings */
.container,
.wp-block-group.alignwide,
.alignwide {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* S339-2: Container padding (px-4 = 1rem) */
.container,
.wp-block-group.alignwide,
.alignwide,
body.page .entry-content > .wp-block-group,
body.page .entry-content > .wp-block-columns {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* S339-3: Page vertical padding default (py-12 = 3rem) */
body.page .entry-content,
body.page-template-default .entry-content,
.woocommerce-page .woocommerce,
.page-kontaktai .entry-content,
.page-pirkimas .entry-content,
.page-pardavimas .entry-content,
.page-informacija .entry-content,
.page-galerija .entry-content,
.page-ekspozicijos .entry-content,
.page-aukciono-taisykles .entry-content,
.page-galerijos-taisykles .entry-content,
.page-plenerai .entry-content,
.page-dovanu-kuponas .entry-content,
.page-paskyra .entry-content,
.woocommerce-account .woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* S339-4: PostAuction uses py-8 = 2rem */
.page-poaukcionine .entry-content,
body.tax-product_tag.term-poaukcionine .woocommerce {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

/* S339-5: Max-width utilities per page (Contact, HowToSell = max-w-5xl = 1024px) */
.page-kontaktai .entry-content > .wp-block-group,
.page-pardavimas .entry-content > .wp-block-group,
.mk-max-w-5xl {
    max-width: 1024px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* S339-6: Max-width utilities per page (HowToBuy, Account, Plenerai = max-w-4xl = 896px) */
.page-pirkimas .entry-content > .wp-block-group,
.page-paskyra .entry-content > .wp-block-group,
.page-plenerai .entry-content > .wp-block-group,
.page-aukciono-taisykles .entry-content > .wp-block-group,
.page-galerijos-taisykles .entry-content > .wp-block-group,
.woocommerce-account .woocommerce-MyAccount-content,
.mk-max-w-4xl {
    max-width: 896px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* S339-7: Max-width utilities per page (GiftVoucher = max-w-6xl = 1152px) */
.page-dovanu-kuponas .entry-content > .wp-block-group,
.mk-max-w-6xl {
    max-width: 1152px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* S339-8: Section spacing (space-y-8 = 2rem between sections) */
.mk-space-y-8 > * + *,
.entry-content > .wp-block-group + .wp-block-group,
.entry-content > .wp-block-columns + .wp-block-columns,
.entry-content > section + section {
    margin-top: 2rem !important;
}

/* S339-9: Sidebar sticky positioning (top-24 = 6rem / 96px) */
.mk-sticky-sidebar,
.woocommerce-sidebar .widget,
.catalog-sidebar,
.catalog-sidebar > * {
    position: sticky !important;
    top: 6rem !important;
}

/* S339-10: Sidebar inner spacing (space-y-6 = 1.5rem) */
.mk-sticky-sidebar > * + *,
.catalog-sidebar > * + * {
    margin-top: 1.5rem !important;
}

/* S339-11: Typography — Display font (Playfair Display) */
.mk-font-display,
h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.wp-block-heading {
    font-family: "Playfair Display", Georgia, serif !important;
    letter-spacing: -0.025em !important;
}

/* S339-12: Typography — Body font (Inter) */
body,
.mk-font-body,
p,
span,
a,
li,
label,
input,
textarea,
select,
button,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    font-family: "Inter", system-ui, sans-serif !important;
}

/* S339-13: Typography — text-sm (0.875rem / 14px) */
.mk-text-sm,
.woocommerce-mini-cart__total,
.woocommerce-mini-cart-item,
.woocommerce-Price-amount,
.product-meta,
.catalog-filters label,
.form-hint,
small {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

/* S339-14: Typography — text-base (1rem / 16px) */
.mk-text-base,
body,
p,
.entry-content {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

/* S339-15: Typography — text-lg (1.125rem / 18px) */
.mk-text-lg,
.woocommerce div.product .product_title,
.entry-title {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
}

/* S339-16: Typography — leading-relaxed (1.625) */
.mk-leading-relaxed,
.entry-content p,
.woocommerce-product-details__short-description,
.product-description {
    line-height: 1.625 !important;
}

/* S339-17: Responsive breakpoint utilities */

/* sm: 640px */
@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    .sm\:py-16 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

/* md: 768px */
@media (min-width: 768px) {
    .md\:px-8 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    .md\:py-12 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    .md\:py-16 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .md\:py-24 {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }
}

/* lg: 1024px */
@media (min-width: 1024px) {
    .container,
    .wp-block-group.alignwide,
    .alignwide {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* xl: 1280px */
@media (min-width: 1280px) {
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .xl\:px-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* 2xl: 1536px */
@media (min-width: 1536px) {
    .container,
    .wp-block-group.alignwide,
    .alignwide {
        max-width: 1400px !important;
    }
}

/* S339-18: Grid gap utilities */
.mk-gap-4 {
    gap: 1rem !important;
}

.mk-gap-6 {
    gap: 1.5rem !important;
}

.mk-gap-8 {
    gap: 2rem !important;
}

/* S339-19: Flexbox utilities */
.mk-flex {
    display: flex !important;
}

.mk-flex-col {
    flex-direction: column !important;
}

.mk-items-center {
    align-items: center !important;
}

.mk-justify-center {
    justify-content: center !important;
}

.mk-justify-between {
    justify-content: space-between !important;
}

/* S339-20: Text utilities */
.mk-text-center {
    text-align: center !important;
}

.mk-tracking-tight {
    letter-spacing: -0.025em !important;
}

.mk-antialiased {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ==========================================================================
   END SECTION S339: GLOBAL SPACING & TYPOGRAPHY V4 PARITY (Agent 20)
   ========================================================================== */
/* ==========================================================================
   SECTION S326: GALERIJA PAGE V4 FINAL FIXES (2026-03-28)
   Agent 7 Implementation — V4 Parity Audit Final

   React Source: src/pages/Gallery.tsx, src/components/gallery/GalleryCard.tsx

   CUSTOM TAILWIND CONFIG:
   rounded-sm = 0px (NOT standard 2px)
   rounded-md = 2px (NOT standard 6px)
   rounded-lg = 4px (NOT standard 8px)
   rounded-xl = 12px (standard 0.75rem)

   Issues Fixed:
   - G7-V4-01: Category filter buttons row with gap-2 (8px)
   - G7-V4-02: Active button = variant="default" (primary bg, primary-foreground text)
   - G7-V4-03: Inactive button = variant="outline" (primary border, primary text)
   - G7-V4-04: Button size="sm" = h-9 (36px), px-4 (16px)
   - G7-V4-05: Grid responsive: 1 col default, sm:2, lg:3, xl:4
   - G7-V4-06: Gap = gap-6 (24px)
   - G7-V4-07: Card border-radius = 0 (rounded-sm custom)
   - G7-V4-08: Card shadow-card on idle, shadow-hover on hover
   - G7-V4-09: Image aspect-ratio 4:5
   - G7-V4-10: Image hover zoom scale(1.05) duration-500
   - G7-V4-11: Card body padding p-5 (20px)
   - G7-V4-12: Title line-clamp-1, font-display, text-lg, font-semibold
   - G7-V4-13: Artist text-sm, text-muted-foreground
   - G7-V4-14: Artist dates text-xs italic
   - G7-V4-15: Medium text-xs, text-muted-foreground, mb-3 (12px)
   - G7-V4-16: Price text-xl (20px), font-bold, text-primary, mb-4 (16px), Inter font
   - G7-V4-17: Button stack space-y-2 (8px gap), flex column
   - G7-V4-18: Gold button full styling with ShoppingCart icon
   - G7-V4-19: Elegant button full styling
   ========================================================================== */

/* ---------------------------------------------------------------------
   G7-V4-01 to G7-V4-04: Category Filter Buttons
   React: <div className="flex flex-wrap gap-2 mb-8">
          <Button variant={active ? 'default' : 'outline'} size="sm">

   Button variants:
   - default: bg-primary text-primary-foreground hover:bg-primary/90 rounded
   - outline: border border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground rounded

   size="sm": h-9 px-4 (36px height, 16px horizontal padding)
   --------------------------------------------------------------------- */
.page-id-92 .mk-gallery-filters,
.mk-gallery-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  margin-bottom: 2rem !important; /* mb-8 = 32px */
}

/* Inactive state (variant="outline") */
.page-id-92 .mk-gallery-cat-btn,
.mk-gallery-cat-btn,
.page-id-92 .mk-gallery-filters .wp-block-button__link:not(.is-active),
.mk-gallery-filters .wp-block-button__link:not(.is-active) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.25rem !important; /* h-9 = 36px */
  padding: 0 1rem !important; /* px-4 = 16px */
  border: 1px solid hsl(160 30% 28%) !important; /* border-primary */
  border-radius: 0.25rem !important; /* rounded = 4px (default Tailwind rounded) */
  color: hsl(160 30% 28%) !important; /* text-primary */
  background: transparent !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  transition: all 300ms ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Inactive hover (outline hover state) */
.page-id-92 .mk-gallery-cat-btn:hover:not(.is-active),
.mk-gallery-cat-btn:hover:not(.is-active),
.page-id-92 .mk-gallery-filters .wp-block-button__link:not(.is-active):hover,
.mk-gallery-filters .wp-block-button__link:not(.is-active):hover {
  background: hsl(160 30% 28%) !important; /* hover:bg-primary */
  color: hsl(40 30% 96%) !important; /* hover:text-primary-foreground */
  border-color: hsl(160 30% 28%) !important;
}

/* Active state (variant="default") */
.page-id-92 .mk-gallery-cat-btn.is-active,
.page-id-92 .mk-gallery-cat-btn.active,
.mk-gallery-cat-btn.is-active,
.mk-gallery-cat-btn.active,
.page-id-92 .mk-gallery-filters .wp-block-button__link.is-active,
.mk-gallery-filters .wp-block-button__link.is-active {
  background: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  border-color: hsl(160 30% 28%) !important;
  border-radius: 0.25rem !important; /* rounded */
}

/* Active hover (default hover state = bg-primary/90) */
.page-id-92 .mk-gallery-cat-btn.is-active:hover,
.page-id-92 .mk-gallery-cat-btn.active:hover,
.mk-gallery-cat-btn.is-active:hover,
.mk-gallery-cat-btn.active:hover,
.page-id-92 .mk-gallery-filters .wp-block-button__link.is-active:hover,
.mk-gallery-filters .wp-block-button__link.is-active:hover {
  background: hsl(160 30% 28% / 0.9) !important; /* hover:bg-primary/90 */
}

/* ---------------------------------------------------------------------
   G7-V4-05 & G7-V4-06: Grid Responsive Columns
   React: <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

   Breakpoints:
   - default: 1 column
   - sm (640px): 2 columns
   - lg (1024px): 3 columns
   - xl (1280px): 4 columns
   - gap: 1.5rem (24px)
   --------------------------------------------------------------------- */
.page-id-92 .mk-gallery-grid,
.page-id-92 .wc-block-product-template,
.page-id-92 ul.wc-block-product-template,
.mk-gallery-grid .wc-block-product-template {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (min-width: 640px) {
  .page-id-92 .mk-gallery-grid,
  .page-id-92 .wc-block-product-template,
  .page-id-92 ul.wc-block-product-template,
  .mk-gallery-grid .wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .page-id-92 .mk-gallery-grid,
  .page-id-92 .wc-block-product-template,
  .page-id-92 ul.wc-block-product-template,
  .mk-gallery-grid .wc-block-product-template {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  .page-id-92 .mk-gallery-grid,
  .page-id-92 .wc-block-product-template,
  .page-id-92 ul.wc-block-product-template,
  .mk-gallery-grid .wc-block-product-template {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Override WooCommerce inline columns-X classes */
.page-id-92 .columns-1,
.page-id-92 .columns-2,
.page-id-92 .columns-3,
.page-id-92 .columns-4,
.page-id-92 .columns-5,
.page-id-92 .columns-6 {
  grid-template-columns: 1fr !important;
}

@media (min-width: 640px) {
  .page-id-92 .columns-1,
  .page-id-92 .columns-2,
  .page-id-92 .columns-3,
  .page-id-92 .columns-4,
  .page-id-92 .columns-5,
  .page-id-92 .columns-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .page-id-92 .columns-1,
  .page-id-92 .columns-2,
  .page-id-92 .columns-3,
  .page-id-92 .columns-4,
  .page-id-92 .columns-5,
  .page-id-92 .columns-6 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  .page-id-92 .columns-1,
  .page-id-92 .columns-2,
  .page-id-92 .columns-3,
  .page-id-92 .columns-4,
  .page-id-92 .columns-5,
  .page-id-92 .columns-6 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ---------------------------------------------------------------------
   G7-V4-07 & G7-V4-08: Card Styling
   React: <div className="group bg-card rounded-sm overflow-hidden shadow-card hover:shadow-hover transition-all duration-300">

   rounded-sm = 0px (custom Tailwind config)
   shadow-card = 0 2px 12px -2px hsl(160 30% 18% / 0.06)
   shadow-hover = 0 8px 30px -8px hsl(160 30% 18% / 0.12)
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-product,
.page-id-92 .wc-block-product-template > li,
.page-id-92 .wc-block-grid__product,
.mk-gallery-grid .wc-block-product,
.mk-gallery-card {
  background: hsl(40 30% 96%) !important; /* bg-card */
  border-radius: 0 !important; /* rounded-sm = 0px (custom) */
  overflow: hidden !important;
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important; /* shadow-card */
  transition: all 300ms ease !important; /* transition-all duration-300 */
}

.page-id-92 .wc-block-product:hover,
.page-id-92 .wc-block-product-template > li:hover,
.page-id-92 .wc-block-grid__product:hover,
.mk-gallery-grid .wc-block-product:hover,
.mk-gallery-card:hover {
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important; /* shadow-hover */
}

/* ---------------------------------------------------------------------
   G7-V4-09 & G7-V4-10: Image Styling
   React: <div className="relative aspect-[4/5] overflow-hidden">
          <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-components-product-image,
.page-id-92 .wc-block-grid__product-image,
.page-id-92 [data-aspect-ratio],
.mk-gallery-grid .wc-block-components-product-image,
.mk-gallery-card__image {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  position: relative !important;
}

.page-id-92 .wc-block-components-product-image img,
.page-id-92 .wc-block-grid__product-image img,
.mk-gallery-grid .wc-block-components-product-image img,
.mk-gallery-card__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 5 !important;
  transition: transform 500ms ease !important; /* duration-500 */
}

/* Override inline aspect-ratio styles */
.page-id-92 img[style*="aspect-ratio:3/4"],
.page-id-92 img[style*="aspect-ratio: 3/4"],
.page-id-92 [style*="aspect-ratio:3/4"],
.page-id-92 [style*="aspect-ratio: 3/4"] {
  aspect-ratio: 4 / 5 !important;
}

/* Hover zoom */
.page-id-92 .wc-block-product:hover .wc-block-components-product-image img,
.page-id-92 .wc-block-product:hover .wc-block-grid__product-image img,
.mk-gallery-grid .wc-block-product:hover .wc-block-components-product-image img,
.mk-gallery-card:hover .mk-gallery-card__image img {
  transform: scale(1.05) !important; /* group-hover:scale-105 */
}

/* ---------------------------------------------------------------------
   G7-V4-11: Card Body Padding
   React: <div className="p-5">
   p-5 = 1.25rem = 20px
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-product > div:not(.wc-block-components-product-image):not(a),
.page-id-92 .wc-block-product-template > li > div:not(.wc-block-components-product-image):not(a),
.mk-gallery-card__body {
  padding: 1.25rem !important; /* p-5 = 20px */
}

/* Alternative: target content elements directly */
.page-id-92 .wc-block-product .wp-block-post-title,
.page-id-92 .wc-block-product .mk-card-meta,
.page-id-92 .wc-block-product .wc-block-components-product-price,
.page-id-92 .wc-block-product .mk-gallery-buttons,
.page-id-92 .wc-block-product .wc-block-components-product-button {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.page-id-92 .wc-block-product .wp-block-post-title:first-of-type {
  padding-top: 1.25rem !important;
}

.page-id-92 .wc-block-product .mk-gallery-buttons:last-child,
.page-id-92 .wc-block-product .wc-block-components-product-button:last-child {
  padding-bottom: 1.25rem !important;
}

/* ---------------------------------------------------------------------
   G7-V4-12: Title Styling
   React: <h3 className="font-display text-lg font-semibold text-foreground mb-1 line-clamp-1">

   font-display = Playfair Display
   text-lg = 1.125rem (18px)
   font-semibold = 600
   text-foreground = hsl(160 30% 18%)
   mb-1 = 0.25rem (4px)
   line-clamp-1 = single line with ellipsis
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-product .wp-block-post-title,
.page-id-92 .wc-block-product .wp-block-post-title a,
.page-id-92 .wc-block-grid__product-title,
.mk-gallery-card__title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
  line-height: 1.75rem !important; /* text-lg line-height */
  /* line-clamp-1 */
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  line-clamp: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-decoration: none !important;
}

.page-id-92 .wc-block-product .wp-block-post-title a:hover {
  text-decoration: none !important;
}

/* ---------------------------------------------------------------------
   G7-V4-13, G7-V4-14, G7-V4-15: Artist, Dates, Medium Styling
   Artist: text-sm text-muted-foreground mb-1
   Dates: text-xs italic (inside artist span)
   Medium: text-xs text-muted-foreground mb-3
   --------------------------------------------------------------------- */
.page-id-92 .mk-card-artist,
.mk-gallery-card__artist {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
}

.page-id-92 .mk-card-artist-dates,
.mk-gallery-card__artist-dates {
  font-size: 0.75rem !important; /* text-xs = 12px */
  font-style: italic !important;
}

.page-id-92 .mk-card-medium,
.mk-gallery-card__medium {
  font-size: 0.75rem !important; /* text-xs = 12px */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  margin-bottom: 0.75rem !important; /* mb-3 = 12px */
}

/* ---------------------------------------------------------------------
   G7-V4-16: Price Styling
   React: <div className="text-xl font-bold text-primary mb-4">

   text-xl = 1.25rem (20px)
   font-bold = 700
   text-primary = hsl(160 30% 28%)
   mb-4 = 1rem (16px)
   MUST use Inter (body font), NOT Playfair Display
   --------------------------------------------------------------------- */
.page-id-92 .wc-block-components-product-price,
.page-id-92 .wc-block-grid__product-price,
.page-id-92 .woocommerce-Price-amount,
.page-id-92 .wp-block-woocommerce-product-price,
.mk-gallery-card__price {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 700 !important; /* font-bold */
  color: hsl(160 30% 28%) !important; /* text-primary */
  margin-bottom: 1rem !important; /* mb-4 = 16px */
}

/* Override any inline Playfair Display on price */
.page-id-92 [style*="font-family:var(--wp--preset--font-family--playfair-display)"] .woocommerce-Price-amount,
.page-id-92 [style*="font-family: var(--wp--preset--font-family--playfair-display)"] .woocommerce-Price-amount,
.page-id-92 .wc-block-components-product-price[style*="font-family"],
.page-id-92 .wp-block-woocommerce-product-price[style*="font-family"] {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
}

/* ---------------------------------------------------------------------
   G7-V4-17: Button Stack (space-y-2)
   React: <div className="space-y-2">

   space-y-2 = flex column with gap 0.5rem (8px)
   --------------------------------------------------------------------- */
.page-id-92 .mk-gallery-buttons,
.page-id-92 .wc-block-product .wc-block-components-product-button,
.page-id-92 .wc-block-product .button-group,
.mk-gallery-card .button-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* space-y-2 = 8px */
  width: 100% !important;
}

/* ---------------------------------------------------------------------
   G7-V4-18: Gold Button ("I krepšeli")
   React: <Button variant="gold" className="w-full">
          <ShoppingCart className="w-4 h-4 mr-2" />
          {inCart ? 'Jau krepšelyje' : 'I krepšeli'}

   variant="gold": bg-gold text-forest-dark hover:bg-gold-light font-medium shadow-elegant rounded
   bg-gold = hsl(42 55% 58%) = #C4A255
   text-forest-dark = hsl(160 30% 18%) = #203D31
   hover:bg-gold-light = hsl(42 45% 75%) = #D4C48C
   shadow-elegant = 0 4px 20px -4px hsl(160 30% 18% / 0.08)
   rounded = 0.25rem (4px)
   --------------------------------------------------------------------- */
.page-id-92 .mk-btn-gold,
.page-id-92 .mk-gallery-buttons .button.mk-btn-gold,
.page-id-92 .wp-block-button.is-style-gold .wp-block-button__link,
.mk-gallery-card .mk-btn-gold {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important; /* gap-2 = 8px for icon spacing */
  width: 100% !important; /* w-full */
  height: 2.5rem !important; /* h-10 = 40px (default size) */
  padding: 0.5rem 1.5rem !important; /* py-2 px-6 */
  background: hsl(42 55% 58%) !important; /* bg-gold */
  color: hsl(160 30% 18%) !important; /* text-forest-dark */
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  border: none !important;
  border-radius: 0.25rem !important; /* rounded = 4px */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important; /* shadow-elegant */
  transition: all 300ms ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.page-id-92 .mk-btn-gold:hover,
.page-id-92 .mk-gallery-buttons .button.mk-btn-gold:hover,
.page-id-92 .wp-block-button.is-style-gold .wp-block-button__link:hover,
.mk-gallery-card .mk-btn-gold:hover {
  background: hsl(42 45% 75%) !important; /* hover:bg-gold-light */
}

/* Gold button disabled state (when item already in cart) */
.page-id-92 .mk-btn-gold:disabled,
.page-id-92 .mk-btn-gold.disabled,
.mk-gallery-card .mk-btn-gold:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ShoppingCart icon inside gold button */
.page-id-92 .mk-btn-gold svg,
.mk-gallery-card .mk-btn-gold svg {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------------
   G7-V4-19: Elegant Button ("Perziureti")
   React: <Button variant="elegant" className="w-full">

   variant="elegant": border border-foreground/20 text-foreground bg-transparent hover:border-primary hover:text-primary font-normal tracking-wide rounded
   border-foreground/20 = hsl(160 30% 18% / 0.2)
   text-foreground = hsl(160 30% 18%)
   hover:border-primary = hsl(160 30% 28%)
   hover:text-primary = hsl(160 30% 28%)
   tracking-wide = 0.025em
   rounded = 0.25rem (4px)
   --------------------------------------------------------------------- */
.page-id-92 .mk-btn-elegant,
.page-id-92 .mk-gallery-buttons .button.mk-btn-elegant,
.page-id-92 .wp-block-button.is-style-elegant .wp-block-button__link,
.mk-gallery-card .mk-btn-elegant {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important; /* w-full */
  height: 2.5rem !important; /* h-10 = 40px (default size) */
  padding: 0.5rem 1.5rem !important; /* py-2 px-6 */
  background: transparent !important;
  color: hsl(160 30% 18%) !important; /* text-foreground */
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 400 !important; /* font-normal */
  letter-spacing: 0.025em !important; /* tracking-wide */
  border: 1px solid hsl(160 30% 18% / 0.2) !important; /* border-foreground/20 */
  border-radius: 0.25rem !important; /* rounded = 4px */
  transition: all 300ms ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.page-id-92 .mk-btn-elegant:hover,
.page-id-92 .mk-gallery-buttons .button.mk-btn-elegant:hover,
.page-id-92 .wp-block-button.is-style-elegant .wp-block-button__link:hover,
.mk-gallery-card .mk-btn-elegant:hover {
  border-color: hsl(160 30% 28%) !important; /* hover:border-primary */
  color: hsl(160 30% 28%) !important; /* hover:text-primary */
}

/* ---------------------------------------------------------------------
   G7-V4-20: Empty State Styling
   React: <div className="text-center py-16">
          <p className="text-muted-foreground text-lg">
          <Button variant="outline" className="mt-4">
   --------------------------------------------------------------------- */
.page-id-92 .mk-gallery-empty,
.mk-gallery-empty {
  text-align: center !important;
  padding: 4rem 0 !important; /* py-16 = 64px */
}

.page-id-92 .mk-gallery-empty p,
.mk-gallery-empty p {
  font-size: 1.125rem !important; /* text-lg = 18px */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
}

.page-id-92 .mk-gallery-empty .wp-block-button,
.mk-gallery-empty .wp-block-button {
  margin-top: 1rem !important; /* mt-4 = 16px */
}

/* ---------------------------------------------------------------------
   G7-V4-21: Page Header Styling
   React: <div className="max-w-3xl mb-8">
          <h1 className="font-display text-3xl md:text-4xl font-semibold text-foreground mb-4">
          <p className="text-muted-foreground leading-relaxed">
   --------------------------------------------------------------------- */
.page-id-92 .mk-gallery-header,
.mk-gallery-header {
  max-width: 48rem !important; /* max-w-3xl = 768px */
  margin-bottom: 2rem !important; /* mb-8 = 32px */
}

.page-id-92 h1.wp-block-heading,
.page-id-92 .mk-gallery-header h1 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.875rem !important; /* text-3xl = 30px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 1rem !important; /* mb-4 = 16px */
  line-height: 2.25rem !important; /* text-3xl line-height */
}

@media (min-width: 768px) {
  .page-id-92 h1.wp-block-heading,
  .page-id-92 .mk-gallery-header h1 {
    font-size: 2.25rem !important; /* md:text-4xl = 36px */
    line-height: 2.5rem !important; /* text-4xl line-height */
  }
}

.page-id-92 .mk-gallery-description,
.page-id-92 .mk-gallery-header p,
.mk-gallery-description {
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  line-height: 1.625 !important; /* leading-relaxed */
}

/* ---------------------------------------------------------------------
   G7-V4-22: Container Styling
   React: <div className="container mx-auto px-4 py-12">
   container = max-width with responsive sizes
   py-12 = 3rem (48px)
   px-4 = 1rem (16px)
   --------------------------------------------------------------------- */
.page-id-92 .entry-content > .wp-block-group,
.page-id-92 .mk-gallery-container {
  padding-top: 3rem !important; /* py-12 = 48px */
  padding-bottom: 3rem !important;
  padding-left: 1rem !important; /* px-4 = 16px */
  padding-right: 1rem !important;
}

/* ==========================================================================
   END SECTION S326: GALERIJA PAGE V4 FINAL FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S327: POAUKCIONINE PAGE V4 PARITY FIXES (2026-03-29 — Agent 8)
   ==========================================================================

   React source: src/pages/PostAuction.tsx

   FIXES:
   1. Amber info banner — exact bg/border/text colors (amber-500/10, amber-500/20)
   2. Deadline badges "Liko X d." — RED (bg-destructive #D42A2A), NOT amber
   3. Filter row layout — bg-muted/30, padding, gap, border-radius

   ========================================================================== */

/* --- 1. AMBER INFO BANNER (lines 56-61 React) --- */

/* Banner container — 10 dienų galimybė warning */
.page-id-93 .mk-post-auction-banner,
.mk-banner--amber,
.mk-banner--post-auction {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
  padding: 1rem; /* p-4 = 16px */
  background: rgba(245, 158, 11, 0.1); /* bg-amber-500/10 — amber at 10% opacity */
  border: 1px solid rgba(245, 158, 11, 0.2); /* border-amber-500/20 — amber at 20% opacity */
  border-radius: 0.5rem; /* rounded-lg = var(--radius) = 4px in React config, BUT React uses 8px for lg */
  margin-bottom: 1.5rem;
}

/* Icon color — Clock icon */
.mk-post-auction-banner svg,
.mk-banner--amber svg {
  width: 1.25rem; /* w-5 = 20px */
  height: 1.25rem; /* h-5 = 20px */
  flex-shrink: 0;
  color: #D97706; /* text-amber-600 */
}

/* Text color — amber-800 light mode */
.mk-post-auction-banner p,
.mk-banner--amber p {
  font-size: 0.875rem; /* text-sm = 14px */
  color: #92400E; /* text-amber-800 light mode */
  margin: 0;
}

/* Dark mode text — amber-200 */
.dark .mk-post-auction-banner p,
.dark .mk-banner--amber p {
  color: #FDE68A; /* text-amber-200 dark mode */
}

/* Strong emphasis */
.mk-post-auction-banner strong,
.mk-banner--amber strong {
  font-weight: 600;
}

/* --- 2. DEADLINE BADGES "Liko X d." — RED bg-destructive --- */

/* CRITICAL: Deadline badges MUST be RED (#D42A2A), NOT amber/gold
   React line 117: bg-destructive text-destructive-foreground
   This is DIFFERENT from the amber banner above
*/

.mk-deadline-badge,
.mk-badge--deadline,
.page-id-93 .mk-badge--post-auction {
  position: absolute;
  top: 0.5rem; /* top-2 = 8px */
  right: 0.5rem; /* right-2 = 8px */
  z-index: 10;
  padding: 0.25rem 0.5rem; /* py-1 px-2 = 4px 8px */
  background: hsl(0 65% 50%); /* bg-destructive = RED #D42A2A */
  color: hsl(0 0% 100%); /* text-destructive-foreground = white */
  font-size: 0.75rem; /* text-xs = 12px */
  font-weight: 500; /* font-medium */
  border-radius: 0.25rem; /* rounded = var(--radius) = 4px */
  line-height: 1rem;
}

/* Ensure override if amber was previously applied */
.mk-deadline-badge.mk-badge--amber,
.page-id-93 .mk-deadline-badge {
  background: hsl(0 65% 50%) !important; /* Force RED, not amber */
  color: white !important;
}

/* --- 3. FILTER ROW LAYOUT (lines 65-110 React) --- */

/* Filter row container */
.page-id-93 .mk-filters-row,
.mk-post-auction-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem; /* gap-4 = 16px */
  padding: 1rem; /* p-4 = 16px */
  background: hsl(var(--muted) / 0.3); /* bg-muted/30 — muted at 30% opacity */
  border-radius: 0.5rem; /* rounded-lg = 8px (React uses 8px for lg) */
  margin-bottom: 1.5rem;
}

/* Select dropdowns in filter row */
.mk-post-auction-filters select,
.mk-filters-row select {
  width: 11.25rem; /* w-[180px] */
}

/* Result count + view toggle container */
.mk-post-auction-filters .mk-view-controls,
.mk-filters-row .mk-view-controls {
  margin-left: auto; /* ml-auto */
  display: flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
}

/* Result count text */
.mk-post-auction-filters .mk-result-count,
.mk-filters-row .mk-result-count {
  font-size: 0.875rem; /* text-sm = 14px */
  color: hsl(var(--muted-foreground));
}

/* View mode toggle buttons container */
.mk-post-auction-filters .mk-view-toggle,
.mk-filters-row .mk-view-toggle {
  display: flex;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem; /* rounded-lg */
  overflow: hidden;
}

/* --- 4. GRID/LIST VIEW MODES --- */

/* Grid view — 4 columns xl, 3 lg, 2 sm, 1 base */
.page-id-93 .mk-artworks-grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 column */
  gap: 1.5rem; /* gap-6 = 24px */
}

@media (min-width: 640px) {
  .page-id-93 .mk-artworks-grid {
    grid-template-columns: repeat(2, 1fr); /* sm: 2 columns */
  }
}

@media (min-width: 1024px) {
  .page-id-93 .mk-artworks-grid {
    grid-template-columns: repeat(3, 1fr); /* lg: 3 columns */
  }
}

@media (min-width: 1280px) {
  .page-id-93 .mk-artworks-grid {
    grid-template-columns: repeat(4, 1fr); /* xl: 4 columns */
  }
}

/* List view — stacked with gap */
.page-id-93 .mk-artworks-list {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* space-y-4 = 16px */
}

/* --- 5. EMPTY STATE (lines 123-132 React) --- */

.page-id-93 .mk-empty-state,
.mk-post-auction-empty {
  text-align: center;
  padding: 4rem 0; /* py-16 = 64px */
}

.mk-post-auction-empty svg {
  width: 4rem; /* w-16 = 64px */
  height: 4rem; /* h-16 = 64px */
  color: hsl(var(--muted-foreground) / 0.3);
  margin: 0 auto 1rem; /* mx-auto mb-4 */
}

.mk-post-auction-empty h3 {
  font-size: 1.125rem; /* text-lg = 18px */
  font-weight: 500; /* font-medium */
  margin-bottom: 0.5rem; /* mb-2 */
}

.mk-post-auction-empty p {
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem; /* mb-4 */
}

/* ==========================================================================
   END SECTION S327: POAUKCIONINE PAGE V4 PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S320: HOMEPAGE HERO + HEADER DESKTOP PARITY FIXES
   Agent 1 — V4 Comprehensive Parity Implementation (2026-03-29)
   React sources: HeroSection.tsx (line 6), Header.tsx, SearchBar.tsx (line 72)
   ========================================================================== */

/* ---------------------------------------------------------------------
   H1: Hero Height — Responsive Breakpoint Fix
   React: h-[80vh] lg:h-[90vh] (HeroSection.tsx line 6)
   Mobile (0-1023px): 80vh
   Desktop lg: (1024px+): 90vh
   Current WP: always 90vh (too tall on mobile)
   --------------------------------------------------------------------- */
.mk-hero,
.wp-block-cover.mk-hero,
body.home .wp-block-cover.mk-hero,
.page-id-26 .wp-block-cover.mk-hero {
  height: 80vh !important;
  min-height: 80vh !important;
}

@media (min-width: 1024px) {
  .mk-hero,
  .wp-block-cover.mk-hero,
  body.home .wp-block-cover.mk-hero,
  .page-id-26 .wp-block-cover.mk-hero {
    height: 90vh !important;
    min-height: 90vh !important;
  }
}

/* ---------------------------------------------------------------------
   H2: Search Icon Position — LEFT not RIGHT
   React: <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
   SearchBar.tsx line 72
   left-3 = 0.75rem (3 × 0.25rem)
   top-1/2 = 50%
   -translate-y-1/2 = translateY(-50%)
   w-4 = 1rem, h-4 = 1rem
   text-muted-foreground = hsl(160 15% 40%)
   --------------------------------------------------------------------- */
.mk-header .wp-block-search__button svg,
.mk-header .wp-block-search__icon-button svg,
.mk-header .search-icon,
.site-header .wp-block-search__button svg,
.wp-block-group.mk-header .wp-block-search__button svg,
header .wp-block-search__inside-wrapper svg {
  position: absolute !important;
  left: 0.75rem !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1rem !important;
  height: 1rem !important;
  color: hsl(160 15% 40%) !important; /* --muted-foreground */
}

/* Search input padding adjustment for left icon */
.mk-header .wp-block-search__input,
.site-header .wp-block-search__input,
header .wp-block-search__input {
  padding-left: 2.25rem !important; /* pl-9: 9 × 0.25rem = 2.25rem to clear left icon */
  padding-right: 1rem !important; /* pr-4: 4 × 0.25rem = 1rem */
}

/* ---------------------------------------------------------------------
   H3: Account Dropdown Hover — GOLD not Primary
   React: focus:bg-accent focus:text-accent-foreground
   dropdown-menu.tsx line 82: DropdownMenuItem
   --accent: 42 55% 58% (GOLD)
   --accent-foreground: 160 30% 15% (dark forest for contrast)
   Current WP likely uses --primary (forest green 160 30% 28%)
   --------------------------------------------------------------------- */
.mk-header .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
.mk-header .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:focus,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-link:hover,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-link:focus,
header .wp-block-navigation-item .wp-block-navigation__submenu-container a:hover,
header .wp-block-navigation-item .wp-block-navigation__submenu-container a:focus,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item:focus {
  background-color: hsl(42 55% 58%) !important; /* --accent (GOLD) */
  color: hsl(160 30% 15%) !important; /* --accent-foreground */
}

/* Account user icon dropdown specifically */
.mk-header .woocommerce-MyAccount-navigation ul li:hover,
.mk-header .woocommerce-MyAccount-navigation ul li:focus,
.mk-header .account-dropdown .menu-item:hover,
.mk-header .account-dropdown .menu-item:focus {
  background-color: hsl(42 55% 58%) !important; /* gold hover */
  color: hsl(160 30% 15%) !important;
}

/* ---------------------------------------------------------------------
   H4: Hero Button Padding — Exact React Match
   React: <Button variant="catalog" size="lg" className="text-lg px-8 py-6">
   HeroSection.tsx line 46-48
   size="lg" base: h-11 px-8 (not used, overridden by className)
   className overrides: px-8 py-6
   px-8 = 2rem (8 × 0.25rem = 32px)
   py-6 = 1.5rem (6 × 0.25rem = 24px)
   text-lg = 1.125rem font-size, 1.75rem line-height
   --------------------------------------------------------------------- */
.mk-hero .wp-block-buttons .wp-block-button__link,
.mk-hero .wp-block-button.size-large .wp-block-button__link,
body.home .mk-hero .wp-block-button__link,
.page-id-26 .mk-hero .wp-block-button__link {
  padding: 1.5rem 2rem !important; /* py-6 px-8 */
  height: auto !important; /* override any fixed height */
  font-size: 1.125rem !important; /* text-lg */
  line-height: 1.75rem !important;
}

/* ==========================================================================
   END SECTION S320: HOMEPAGE HERO + HEADER DESKTOP PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   S321. HEADER MOBILE & RESPONSIVE V4 PARITY
   React: Header.tsx mobile menu, hamburger button, drawer animation
   Agent: 2
   ========================================================================== */

/* ---------------------------------------------------------------------
   M1: Mobile Hamburger Button
   React: <Button variant="ghost" size="icon" className="lg:hidden">
          <Menu className="w-5 h-5" />
   Lines 165-172 in Header.tsx
   --------------------------------------------------------------------- */

/* Hamburger toggle button: ghost variant + icon size */
.mk-header__nav .wp-block-navigation__responsive-container-open,
.mk-header .wp-block-navigation__responsive-container-open {
  height: 2.5rem !important; /* h-10 = 40px */
  width: 2.5rem !important; /* w-10 = 40px */
  padding: 0 !important;
  border-radius: 0.25rem !important; /* rounded */
  background: transparent !important;
  transition: all 300ms ease !important;
}

.mk-header__nav .wp-block-navigation__responsive-container-open:hover,
.mk-header .wp-block-navigation__responsive-container-open:hover {
  background: hsl(var(--accent)) !important; /* hover:bg-accent */
  color: hsl(var(--accent-foreground)) !important; /* hover:text-accent-foreground */
}

/* Hamburger icon size: 20px × 20px (w-5 h-5) */
.mk-header__nav .wp-block-navigation__responsive-container-open svg,
.mk-header .wp-block-navigation__responsive-container-open svg {
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important; /* 20px */
}

/* Hide on desktop (lg:hidden = max-width: 1023px) */
@media (min-width: 1024px) {
  .mk-header__nav .wp-block-navigation__responsive-container-open,
  .mk-header .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------
   M2: Mobile Menu Drawer Animation
   React: animate-fade-in (opacity 0→1, translateY 10px→0, 0.5s ease-out)
   Line 178: className="lg:hidden py-4 border-t border-border animate-fade-in"
   tailwind.config.ts lines 92-94, 112
   --------------------------------------------------------------------- */

/* Fade-in keyframes matching React exactly */
@keyframes mk-mobile-menu-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation to mobile navigation container */
.mk-header .wp-block-navigation__responsive-container.is-menu-open,
.mk-header .wp-block-navigation__responsive-container.has-modal-open,
.mk-header__nav .wp-block-navigation__responsive-container.is-menu-open,
.mk-header__nav .wp-block-navigation__responsive-container.has-modal-open {
  animation: mk-mobile-menu-fade-in 0.5s ease-out forwards !important;
}

/* Mobile menu container padding and border */
.mk-header .wp-block-navigation__responsive-container-content,
.mk-header__nav .wp-block-navigation__responsive-container-content {
  padding-top: 1rem !important; /* py-4 = 16px */
  padding-bottom: 1rem !important;
  border-top: 1px solid hsl(var(--border)) !important; /* border-t border-border */
}

/* ---------------------------------------------------------------------
   M3: Mobile Menu Section Labels
   React: <span className="text-sm font-medium text-muted-foreground px-2">
   Lines 181, 194
   --------------------------------------------------------------------- */

/* Section headers: "Aukcionas", "Galerija" */
.mk-header__nav .wp-block-navigation__responsive-container .wp-block-navigation-submenu > .wp-block-navigation-item__content,
.mk-header .wp-block-navigation__responsive-container .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  color: hsl(var(--muted-foreground)) !important; /* text-muted-foreground */
  padding-left: 0.5rem !important; /* px-2 = 8px */
  padding-right: 0.5rem !important;
}

/* ---------------------------------------------------------------------
   M4: Mobile Menu Submenu Links
   React: className="block px-4 py-2 text-sm hover:bg-muted rounded"
   Lines 183-191, 196-204
   --------------------------------------------------------------------- */

/* Submenu items under Aukcionas/Galerija */
.mk-header__nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.mk-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block !important;
  padding: 0.5rem 1rem !important; /* py-2 px-4 = 8px 16px */
  font-size: 0.875rem !important; /* text-sm = 14px */
  border-radius: 0.25rem !important; /* rounded = 4px */
  transition: background-color 200ms ease !important;
}

.mk-header__nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.mk-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: hsl(var(--muted)) !important; /* hover:bg-muted */
}

/* ---------------------------------------------------------------------
   M5: Mobile Menu Top-Level Links
   React: className="px-2 py-2 text-sm font-medium hover:text-primary"
   Lines 206-232
   --------------------------------------------------------------------- */

/* Top-level links: Pardavimas, Plenerai, Ekspozicijos, Kontaktai */
.mk-header__nav .wp-block-navigation__responsive-container > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:not(.wp-block-navigation-submenu) > .wp-block-navigation-item__content,
.mk-header .wp-block-navigation__responsive-container > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:not(.wp-block-navigation-submenu) > .wp-block-navigation-item__content {
  padding: 0.5rem !important; /* py-2 px-2 = 8px all sides */
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  transition: color 200ms ease !important;
}

.mk-header__nav .wp-block-navigation__responsive-container > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:not(.wp-block-navigation-submenu) > .wp-block-navigation-item__content:hover,
.mk-header .wp-block-navigation__responsive-container > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:not(.wp-block-navigation-submenu) > .wp-block-navigation-item__content:hover {
  color: hsl(var(--primary)) !important; /* hover:text-primary */
}

/* ---------------------------------------------------------------------
   M6: Mobile Menu Spacing Between Sections
   React: flex flex-col gap-2 (8px gap between nav sections)
   --------------------------------------------------------------------- */

/* Vertical spacing between menu items */
.mk-header__nav .wp-block-navigation__responsive-container .wp-block-navigation__container,
.mk-header .wp-block-navigation__responsive-container .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
}

/* Extra padding on submenu sections (py-2 wrapper) */
.mk-header__nav .wp-block-navigation__responsive-container .wp-block-navigation-submenu,
.mk-header .wp-block-navigation__responsive-container .wp-block-navigation-submenu {
  padding-top: 0.5rem !important; /* py-2 = 8px */
  padding-bottom: 0.5rem !important;
}

/* ---------------------------------------------------------------------
   M7: Close Button Styling (X icon)
   React: Same Button component, ghost variant, icon size
   --------------------------------------------------------------------- */

/* Close button (X) in mobile menu */
.mk-header__nav .wp-block-navigation__responsive-container-close,
.mk-header .wp-block-navigation__responsive-container-close {
  height: 2.5rem !important; /* h-10 = 40px */
  width: 2.5rem !important; /* w-10 = 40px */
  padding: 0 !important;
  border-radius: 0.25rem !important;
  background: transparent !important;
  transition: all 300ms ease !important;
}

.mk-header__nav .wp-block-navigation__responsive-container-close:hover,
.mk-header .wp-block-navigation__responsive-container-close:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

.mk-header__nav .wp-block-navigation__responsive-container-close svg,
.mk-header .wp-block-navigation__responsive-container-close svg {
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important; /* 20px */
}

/* ---------------------------------------------------------------------
   M8: Mobile Menu Overlay/Backdrop
   Not explicitly in Header.tsx, but drawer pattern uses overlay
   --------------------------------------------------------------------- */

/* Modal overlay when mobile menu open */
.mk-header__nav .wp-block-navigation__responsive-container::before,
.mk-header .wp-block-navigation__responsive-container::before {
  transition: opacity 300ms ease !important;
}

/* ---------------------------------------------------------------------
   M9: Responsive Breakpoint Enforcement
   Desktop nav: min-width: 1280px (raised from 1024px for better fit)
   Mobile menu: max-width: 1279px (hamburger visible)
   --------------------------------------------------------------------- */

/* Desktop navigation visible at 1280px+ */
@media (min-width: 1280px) {
  .mk-header__nav,
  .mk-header .wp-block-navigation {
    display: flex !important;
  }

  .mk-header .wp-block-navigation__responsive-container,
  .mk-header__nav .wp-block-navigation__responsive-container {
    display: none !important;
  }
}

/* Mobile menu visible below 1280px */
@media (max-width: 1279px) {
  .mk-header__nav > .wp-block-navigation__container,
  .mk-header .wp-block-navigation > .wp-block-navigation__container {
    display: none !important;
  }
}

/* ==========================================================================
   END SECTION S321: HEADER MOBILE & RESPONSIVE V4 PARITY
   ========================================================================== */


/* ==========================================================================
   SECTION S323: KATALOGAS SIDEBAR VISIBILITY FIX - CRITICAL (2026-03-29)
   Agent 4 - V4 Implementation

   CRITICAL USER ISSUE:
   "Sidebar NOT always visible - should show IMMEDIATELY on page load
   and when switching between filters/pills"

   React Reference: src/pages/Catalog.tsx lines 132-204
   - Sidebar is UNCONDITIONALLY RENDERED in grid lg:grid-cols-4 layout
   - No JavaScript dependency, no conditional logic
   - Always visible at lg breakpoint (1024px+)

   Catalog.tsx structure:
   <div className="grid lg:grid-cols-4 gap-8">
     <!-- Sidebar - Sticky -->
     <div className="lg:col-span-1">
       <div className="sticky top-24 space-y-6">
         <CategorySidebar ... />
         <div className="bg-card rounded-sm p-4 shadow-card">Time Filters</div>
         <div className="bg-card rounded-sm p-4 shadow-card">Quick Filters</div>
         <Button>Clear Filters</Button>
       </div>
     </div>
     <!-- Main Content -->
     <div className="lg:col-span-3">...</div>
   </div>

   CategorySidebar.tsx structure (lines 36-131):
   - .bg-primary.rounded-sm.p-6 (Categories - dark green)
   - .bg-card.rounded-sm.p-6.shadow-card (Filters card)
   - .bg-secondary/30.rounded-sm.p-6 (Help section)

   Border-radius tokens (custom config):
   - rounded-sm = 0px (NOT 2px)
   - rounded-md = 2px (NOT 6px)
   - rounded-lg = 4px (NOT 8px)

   Issues addressed:
   - S323-1 CRITICAL: Force sidebar ALWAYS visible on desktop (1024px+)
   - S323-2 HIGH: Grid layout must be 1fr 3fr (25% sidebar, 75% content)
   - S323-3 HIGH: Sticky positioning top: 6rem (96px) matching React top-24
   - S323-4 HIGH: All filter cards border-radius = 0px (rounded-sm custom)
   - S323-5 MEDIUM: Filter containers match exact React spacing (space-y-6 = 1.5rem)
   ========================================================================== */

/* ---------------------------------------------------------------------
   S323-1 CRITICAL: Force sidebar ALWAYS visible on desktop

   React: grid lg:grid-cols-4 - sidebar column ALWAYS present in DOM
   WordPress must match: no hiding, no conditional rendering
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Maximum specificity sidebar visibility enforcement */
  html body.woocommerce .mk-catalog__sidebar,
  html body.archive.post-type-archive-product .mk-catalog__sidebar,
  html body.tax-product_cat .mk-catalog__sidebar,
  html body.woocommerce .wp-block-column.mk-catalog__sidebar,
  html body .wp-block-columns > .wp-block-column.mk-catalog__sidebar,
  html body .mk-catalog-container .mk-catalog__sidebar,
  .woocommerce-page .mk-catalog__sidebar,
  .wc-block-filter-wrapper,
  [class*="catalog-sidebar"],
  [class*="filter-sidebar"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: sticky !important;
    top: 6rem !important; /* top-24 = 96px (React) */
    align-self: start !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    flex: 0 0 25% !important; /* lg:col-span-1 in 4-column grid = 25% */
    min-width: 280px !important;
    max-width: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* WordPress admin bar offset (32px) */
  body.admin-bar .mk-catalog__sidebar,
  body.admin-bar .wc-block-filter-wrapper {
    top: calc(6rem + 32px) !important;
  }

  /* Ensure all child elements are visible */
  .mk-catalog__sidebar > *,
  .mk-catalog__sidebar .wp-block-group,
  .mk-catalog__sidebar .mk-filter-group,
  .mk-catalog__sidebar .mk-categories-panel,
  .mk-catalog__sidebar .mk-time-filters,
  .mk-catalog__sidebar .mk-quick-filters {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ---------------------------------------------------------------------
   S323-2 HIGH: Grid layout 1fr 3fr (25% sidebar, 75% content)

   React: grid lg:grid-cols-4 gap-8
   Converts to CSS Grid: 1fr (sidebar) + 3fr (content) with 2rem gap
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Enforce grid layout on catalog container */
  .mk-catalog-container,
  body.woocommerce .mk-catalog-wrapper,
  body.archive.post-type-archive-product .wp-block-columns,
  body.woocommerce .wp-block-columns:has(.mk-catalog__sidebar),
  .woocommerce-products-header + .wp-block-group {
    display: grid !important;
    grid-template-columns: 1fr 3fr !important; /* 25% / 75% split */
    gap: 2rem !important; /* gap-8 = 32px */
    align-items: start !important;
  }

  /* Main content column spans 3 columns */
  .mk-catalog__main,
  .wp-block-column.mk-catalog__main,
  .mk-catalog-container > .wp-block-group:not(.mk-catalog__sidebar),
  body.woocommerce .wp-block-column:not(.mk-catalog__sidebar) {
    grid-column: 2 / 3 !important;
    flex: 1 1 75% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Sidebar column */
  .mk-catalog__sidebar {
    grid-column: 1 / 2 !important;
  }
}

/* ---------------------------------------------------------------------
   S323-3 HIGH: Sticky sidebar inner container

   React: <div className="sticky top-24 space-y-6">
   Sticky positioning with 96px top offset and 1.5rem vertical spacing
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .mk-catalog__sidebar > .wp-block-group,
  .mk-catalog__sidebar > div,
  .mk-catalog__sidebar-inner {
    position: sticky !important;
    top: 6rem !important; /* top-24 = 96px */
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important; /* space-y-6 = 24px */
  }

  /* Admin bar offset */
  body.admin-bar .mk-catalog__sidebar > .wp-block-group,
  body.admin-bar .mk-catalog__sidebar > div {
    top: calc(6rem + 32px) !important;
  }
}

/* ---------------------------------------------------------------------
   S323-4 HIGH: Filter card border-radius = 0px

   React uses rounded-sm which is CUSTOM 0px (not standard Tailwind 2px)
   All filter cards must have border-radius: 0
   --------------------------------------------------------------------- */
.mk-catalog__sidebar .wp-block-group,
.mk-catalog__sidebar .mk-filter-group,
.mk-filter-card,
.mk-categories-panel,
.mk-time-filters,
.mk-quick-filters,
.mk-price-filter,
.mk-catalog__sidebar .has-card-background-color,
.mk-catalog__sidebar .has-primary-background-color,
body.woocommerce .mk-catalog__sidebar > * {
  border-radius: 0 !important; /* rounded-sm = 0px in custom config */
}

/* Category card (primary background - dark green) */
.mk-catalog__sidebar .mk-categories-panel,
.mk-catalog__sidebar .has-primary-background-color,
.mk-filter-categories {
  background: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  padding: 1.5rem !important; /* p-6 = 24px */
  border-radius: 0 !important;
}

/* Filter cards (card background - cream) */
.mk-catalog__sidebar .mk-time-filters,
.mk-catalog__sidebar .mk-quick-filters,
.mk-catalog__sidebar .mk-price-filter,
.mk-catalog__sidebar .has-card-background-color {
  background: hsl(40 30% 96%) !important; /* bg-card */
  padding: 1rem !important; /* p-4 = 16px */
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important; /* shadow-card */
  border-radius: 0 !important;
}

/* Help section (secondary background) */
.mk-catalog__sidebar .mk-help-section,
.mk-catalog__sidebar .has-secondary-background-color {
  background: hsl(36 25% 88% / 0.3) !important; /* bg-secondary/30 */
  padding: 1.5rem !important; /* p-6 */
  border-radius: 0 !important;
}

/* Time filter buttons - rounded-md = 2px (custom) */
.mk-time-filters button,
.mk-catalog__sidebar .mk-filter-btn {
  border-radius: 0.125rem !important; /* rounded-md = 2px in custom config */
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  font-size: 0.875rem !important; /* text-sm = 14px */
  transition: all 200ms ease !important;
}

/* Active time filter button */
.mk-time-filters button.active,
.mk-time-filters button.is-active {
  background: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
}

/* Hover state */
.mk-time-filters button:hover:not(.active) {
  background: hsl(36 20% 90%) !important; /* hover:bg-muted */
}

/* ---------------------------------------------------------------------
   S323-5 MEDIUM: Spacing between filter sections

   React: space-y-6 on sticky container = 1.5rem vertical gap
   --------------------------------------------------------------------- */
.mk-catalog__sidebar .wp-block-group > *:not(:last-child),
.mk-catalog__sidebar-inner > *:not(:last-child) {
  margin-bottom: 1.5rem !important; /* space-y-6 = 24px */
}

/* Override any conflicting spacing */
.mk-catalog__sidebar .wp-block-group {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.mk-catalog__sidebar > .wp-block-group > .wp-block-group {
  margin-bottom: 1.5rem !important;
}

/* Clear filters button */
.mk-catalog__sidebar .mk-clear-filters-btn {
  width: 100% !important;
  border: 1px solid hsl(var(--border)) !important;
  background: transparent !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.125rem !important; /* rounded-md = 2px */
  font-size: 0.875rem !important;
  transition: all 200ms ease !important;
}

.mk-catalog__sidebar .mk-clear-filters-btn:hover {
  background: hsl(var(--muted)) !important;
}

/* ==========================================================================
   END SECTION S323: KATALOGAS SIDEBAR VISIBILITY FIX
   ========================================================================== */

/* ==========================================================================
   SECTION S334: FOOTER PARITY FIXES (Agent 15 — V4)
   Date: 2026-03-29
   Reference: src/components/layout/Footer.tsx (lines 6-105)

   React Footer Structure:
   - Container: bg-primary, text-primary-foreground
   - Inner: container mx-auto px-4 py-16
   - Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10
   - 5 Columns: Brand (logo + desc + social), Kontaktai, Nuorodos, Dovanu kuponas, Informacija
   - Bottom bar: border-t mt-12 pt-8 text-center

   Critical Exact Values from React:
   - py-16 = 4rem (64px) vertical padding
   - gap-10 = 2.5rem (40px) grid gap
   - w-5 h-5 = 1.25rem (20px) social icons
   - mb-6 = 1.5rem (24px) heading margin
   - space-y-3 = 0.75rem (12px) link vertical gap
   - space-y-4 = 1rem (16px) contact vertical gap
   - text-primary-foreground/80 = hsl(40 30% 96% / 0.8) link color
   - text-primary-foreground/60 = hsl(40 30% 96% / 0.6) copyright color
   - hover:text-gold = hsl(42 55% 58%) hover color
   - mt-12 = 3rem (48px) bottom bar margin
   - pt-8 = 2rem (32px) bottom bar padding
   - border-primary-foreground/20 = hsl(40 30% 96% / 0.2) separator opacity
   ========================================================================== */

/* F15-1: 5-column grid at lg:1024px with 2.5rem gap (gap-10) */
.mk-footer .wp-block-columns,
.mk-footer__columns {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2.5rem !important; /* gap-10 = 40px */
}

@media (min-width: 768px) {
  .mk-footer .wp-block-columns,
  .mk-footer__columns {
    grid-template-columns: repeat(2, 1fr) !important; /* md:grid-cols-2 */
  }
}

@media (min-width: 1024px) {
  .mk-footer .wp-block-columns,
  .mk-footer__columns {
    grid-template-columns: repeat(5, 1fr) !important; /* lg:grid-cols-5 */
  }
}

/* Override WP columns block default flexbox */
.mk-footer .wp-block-columns {
  flex-wrap: nowrap !important;
}

.mk-footer .wp-block-column {
  flex-basis: auto !important;
  margin: 0 !important;
}

/* F15-2: Container vertical padding 4rem (py-16 = 64px) */
.mk-footer,
.mk-footer.wp-block-group {
  padding-top: 4rem !important; /* py-16 top */
  padding-bottom: 0 !important; /* Bottom bar handles padding */
}

/* F15-3: Social icon size 1.25rem (w-5 h-5 = 20px) — React line 17, 20 */
.mk-footer .wp-block-social-links svg,
.mk-footer .wp-social-link svg,
.mk-footer__social svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  max-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-height: 1.25rem !important;
}

/* Override WordPress social-links block inline width/height attributes */
.mk-footer .wp-block-social-links svg[width],
.mk-footer .wp-block-social-links svg[height] {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* F15-4: Social icon hover gold (React line 16, 19) */
.mk-footer .wp-block-social-links a:hover,
.mk-footer .wp-social-link a:hover,
.mk-footer__social a:hover {
  color: hsl(42 55% 58%) !important; /* hover:text-gold */
}

.mk-footer .wp-block-social-links a:hover svg,
.mk-footer .wp-social-link a:hover svg,
.mk-footer__social a:hover svg {
  fill: hsl(42 55% 58%) !important;
  color: hsl(42 55% 58%) !important;
}

/* F15-5: Social links gap 1rem (gap-4 = 16px) — React line 15 */
.mk-footer .wp-block-social-links,
.mk-footer__social {
  gap: 1rem !important;
  margin-top: 1.5rem !important; /* mt-6 = 24px */
  padding: 0 !important;
  list-style: none !important;
}

.mk-footer .wp-block-social-links .wp-social-link {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* F15-6: Heading mb-6 = 1.5rem (24px) — React line 27, 46, 68, 81 */
.mk-footer h4,
.mk-footer .wp-block-heading {
  margin-bottom: 1.5rem !important; /* mb-6 */
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important; /* font-semibold */
  font-family: var(--font-display) !important;
}

/* F15-7: Link gap Nuorodos/Informacija 0.75rem (space-y-3 = 12px) — React line 47, 82 */
.mk-footer__links .wp-block-group,
.mk-footer__info .wp-block-group,
.mk-footer__voucher .wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important; /* space-y-3 = 12px */
}

/* F15-8: Contact items gap 1rem (space-y-4 = 16px) — React line 28 */
.mk-footer__contacts .wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* space-y-4 = 16px */
}

/* F15-9: Regular links 80% opacity — React line 48, 51, 54, 57, 60, 83, 86, 89, 92 */
.mk-footer a:not([href*="dovanu-kuponas"]):not(.wp-social-link):not(.wp-block-social-link a) {
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
  font-size: 0.875rem !important; /* text-sm = 14px */
  text-decoration: none !important;
  transition: color 200ms ease !important;
}

.mk-footer a:not([href*="dovanu-kuponas"]):not(.wp-social-link):not(.wp-block-social-link a):hover {
  color: hsl(42 55% 58%) !important; /* hover:text-gold */
}

/* F15-10: Voucher link gold + underline offset — React line 73-75 */
.mk-footer__voucher a[href*="dovanu-kuponas"],
.mk-footer a[href*="dovanu-kuponas"] {
  color: hsl(42 55% 58%) !important; /* text-gold */
  font-weight: 500 !important; /* font-medium */
  font-size: 0.875rem !important; /* text-sm */
  text-decoration: underline !important;
  text-underline-offset: 4px !important; /* underline-offset-4 */
  display: inline-block !important;
  transition: color 200ms ease !important;
}

.mk-footer a[href*="dovanu-kuponas"]:hover {
  color: hsl(42 55% 58% / 0.8) !important; /* hover:text-gold/80 */
}

/* F15-11: Description text 80% opacity, leading-relaxed — React line 14 */
.mk-footer__brand p {
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
  line-height: 1.625 !important; /* leading-relaxed */
  font-size: 0.875rem !important; /* text-sm = 14px */
}

/* F15-12: Contact items layout — React line 29-33 */
.mk-footer__contact-item {
  display: flex !important;
  align-items: center !important; /* items-center (email, phone) */
  gap: 0.75rem !important; /* gap-3 = 12px */
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
}

/* Address item uses items-start + mt-0.5 on icon — React line 37-38 */
.mk-footer__contact-item:last-child {
  align-items: flex-start !important;
}

.mk-footer__contact-item:last-child svg {
  margin-top: 0.125rem !important; /* mt-0.5 */
}

/* Contact icons 1rem (w-4 h-4 = 16px) — React line 30, 34, 38 */
.mk-footer__contact-item svg,
.mk-footer__contact-icon svg {
  width: 1rem !important; /* w-4 */
  height: 1rem !important; /* h-4 */
  flex-shrink: 0 !important;
}

/* F15-13: Bottom bar mt-12=3rem, pt-8=2rem — React line 99 */
.mk-footer__bottom {
  margin-top: 3rem !important; /* mt-12 = 48px */
  padding-top: 2rem !important; /* pt-8 = 32px */
  padding-bottom: 2rem !important;
  text-align: center !important;
}

/* F15-14: Bottom separator 20% opacity — React line 99 */
.mk-footer__bottom .wp-block-separator,
.mk-footer__bottom hr {
  border-top: 1px solid hsl(40 30% 96% / 0.2) !important; /* border-primary-foreground/20 */
  background-color: transparent !important;
  opacity: 1 !important;
  margin-bottom: 2rem !important;
}

/* F15-15: Copyright text 60% opacity — React line 100-102 */
.mk-footer__bottom p,
.mk-footer__copyright {
  color: hsl(40 30% 96% / 0.6) !important; /* text-primary-foreground/60 */
  font-size: 0.875rem !important; /* text-sm = 14px */
}

/* F15-16: Logo height 4rem (h-16 = 64px) + inverted — React line 12 */
.mk-footer__logo img,
.mk-footer .wp-block-site-logo img {
  height: 4rem !important; /* h-16 = 64px */
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important; /* brightness-0 invert */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
}

/* Override WP site-logo block default width */
.mk-footer .wp-block-site-logo {
  width: auto !important;
}

/* ==========================================================================
   END SECTION S334: FOOTER PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S336: GLOBAL BUTTONS & CTAs PARITY FIXES (V4 AGENT 17)
   React: src/components/ui/button.tsx
   All button variants across all pages must match React 1:1
   ========================================================================== */

/* FIX 1: Add vertical padding to base button (py-2) — React line 23 */
.mk-btn {
  padding-top: 0.5rem !important;    /* py-2 = 8px */
  padding-bottom: 0.5rem !important;
}

/* FIX 2: Double box-shadow focus state (React pattern) — React line 8 */
/* Pattern: ring-offset-2 (2px background) + ring-2 (2px colored ring) = 4px total */

/* Base and standard variants: use --ring color */
.mk-btn:focus-visible,
.mk-btn-default:focus-visible,
.mk-btn-catalog:focus-visible,
.mk-btn-elegant:focus-visible,
.mk-btn-outline:focus-visible,
.mk-btn-ghost:focus-visible,
.mk-btn-secondary:focus-visible,
.mk-btn-link:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),  /* ring-offset-2 */
    0 0 0 4px hsl(var(--ring)) !important;  /* ring-2 ring-ring */
}

/* Gold variant: custom gold ring — React line 19 + line 8 */
.mk-btn-gold:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--gold)) !important;  /* ring-gold */
}

/* Destructive variant: custom destructive ring — React line 13 + line 8 */
.mk-btn-destructive:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--destructive)) !important;  /* ring-destructive */
}

/* ==========================================================================
   END SECTION S336: GLOBAL BUTTONS & CTAs PARITY FIXES
   ========================================================================== */


/* ==========================================================================
   SECTION S335: GLOBAL FORMS V4 PARITY - ALL FORM ELEMENTS (Agent 16)
   React source: src/components/ui/input.tsx, textarea.tsx, checkbox.tsx, select.tsx
   Applies to: CF7, WooCommerce forms, WordPress forms, all custom forms
   Created: 2026-03-29
   ========================================================================== */

/* React Input Component Exact Values:
   - className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2
                 text-base ring-offset-background placeholder:text-muted-foreground
                 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
                 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
                 md:text-sm"

   Tailwind → CSS Translation:
   - h-10 = 2.5rem (40px)
   - px-3 = 0.75rem (12px)
   - py-2 = 0.5rem (8px)
   - rounded-md = calc(var(--radius) - 2px) = calc(0.25rem - 2px) = 2px
   - border-input = 1px solid hsl(var(--input))
   - text-base = 1rem (16px) / 1.5rem line-height
   - md:text-sm = @media (min-width: 768px) { font-size: 0.875rem; line-height: 1.25rem; }
   - focus-visible:ring-2 = 2px ring
   - focus-visible:ring-offset-2 = 2px offset
*/

/* ALL TEXT INPUTS - Maximum Specificity Override */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="color"],
textarea,
select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
.woocommerce-Input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.mk-input,
.mk-textarea,
.mk-select,
form input[type="text"],
form input[type="email"],
form input[type="url"],
form input[type="password"],
form input[type="tel"],
form input[type="number"],
form input[type="date"],
form textarea,
form select {
  /* Layout - React: flex h-10 w-full */
  display: flex !important;
  height: 2.5rem !important;  /* h-10 = 40px */
  width: 100% !important;
  align-items: center !important;

  /* Spacing - React: px-3 py-2 */
  padding: 0.5rem 0.75rem !important;  /* py-2 px-3 = 8px 12px */

  /* Border & Radius - React: rounded-md border border-input */
  border: 1px solid hsl(var(--input)) !important;
  border-radius: 2px !important;  /* calc(var(--radius) - 2px) = calc(0.25rem - 2px) = 2px */

  /* Background - React: bg-background */
  background: hsl(var(--background)) !important;
  background-color: hsl(var(--background)) !important;

  /* Typography - React: text-base md:text-sm */
  font-size: 1rem !important;  /* text-base = 16px */
  line-height: 1.5rem !important;
  color: hsl(var(--foreground)) !important;
  font-family: var(--font-body) !important;

  /* Ring offset for focus */
  --tw-ring-offset-width: 2px !important;
  --tw-ring-offset-color: hsl(var(--background)) !important;

  /* Transitions */
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out !important;
}

/* Responsive Typography - React: md:text-sm */
@media (min-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  select,
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="url"],
  .wpcf7 input[type="tel"],
  .wpcf7 input[type="number"],
  .wpcf7 select,
  .woocommerce input[type="text"],
  .woocommerce input[type="email"],
  .woocommerce input[type="password"],
  .woocommerce input[type="tel"],
  .woocommerce input[type="number"],
  .woocommerce select,
  .mk-input,
  .mk-select,
  form input[type="text"],
  form input[type="email"],
  form input[type="url"],
  form input[type="password"],
  form input[type="tel"],
  form input[type="number"],
  form select {
    font-size: 0.875rem !important;  /* text-sm = 14px */
    line-height: 1.25rem !important;
  }
}

/* TEXTAREA - React: min-h-[80px] text-sm (always sm, no responsive change) */
textarea,
.wpcf7 textarea,
.woocommerce textarea,
form textarea,
.mk-textarea {
  min-height: 80px !important;  /* React: min-h-[80px] */
  height: auto !important;  /* Override the h-10 from global */
  align-items: flex-start !important;  /* Top-align text in textarea */
  font-size: 0.875rem !important;  /* text-sm = 14px */
  line-height: 1.25rem !important;
  resize: vertical !important;  /* Allow vertical resize only */
}

/* PLACEHOLDER TEXT - React: placeholder:text-muted-foreground */
input::placeholder,
textarea::placeholder,
select::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder,
.woocommerce input::placeholder,
.woocommerce textarea::placeholder,
form input::placeholder,
form textarea::placeholder {
  color: hsl(var(--muted-foreground)) !important;
  opacity: 1 !important;
}

/* FOCUS STATE - React: focus-visible:outline-none focus-visible:ring-2
                         focus-visible:ring-ring focus-visible:ring-offset-2 */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus,
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
form input:focus,
form textarea:focus,
form select:focus,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="date"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  /* Double shadow: offset ring + focus ring */
  box-shadow: 0 0 0 2px hsl(var(--background)),
              0 0 0 4px hsl(var(--ring)) !important;
}

/* DISABLED STATE - React: disabled:cursor-not-allowed disabled:opacity-50 */
input:disabled,
textarea:disabled,
select:disabled,
.wpcf7 input:disabled,
.wpcf7 textarea:disabled,
.wpcf7 select:disabled,
.woocommerce input:disabled,
.woocommerce textarea:disabled,
.woocommerce select:disabled,
form input:disabled,
form textarea:disabled,
form select:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  background: hsl(var(--muted)) !important;
}

/* READONLY STATE */
input:read-only,
textarea:read-only,
.wpcf7 input:read-only,
.wpcf7 textarea:read-only,
.woocommerce input:read-only,
.woocommerce textarea:read-only {
  background: hsl(var(--muted)) !important;
  cursor: default !important;
}

/* CHECKBOX & RADIO - React Checkbox Component
   className: "h-4 w-4 rounded-sm border border-primary ring-offset-background
               focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
               focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
               data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"

   Translation:
   - h-4 w-4 = 1rem (16px)
   - rounded-sm = calc(var(--radius) - 4px) = calc(0.25rem - 4px) = 0px (essentially square)
   - border-primary = 1px solid hsl(var(--primary))
*/
input[type="checkbox"],
input[type="radio"],
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"],
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
form input[type="checkbox"],
form input[type="radio"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1rem !important;  /* h-4 w-4 = 16px */
  height: 1rem !important;
  min-height: 1rem !important;
  flex-shrink: 0 !important;
  border: 1px solid hsl(var(--primary)) !important;
  background: hsl(var(--background)) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out !important;
}

/* Checkbox - rounded-sm */
input[type="checkbox"],
.wpcf7 input[type="checkbox"],
.woocommerce input[type="checkbox"],
form input[type="checkbox"] {
  border-radius: 0.125rem !important;  /* rounded-sm = 2px */
}

/* Radio - fully round */
input[type="radio"],
.wpcf7 input[type="radio"],
.woocommerce input[type="radio"],
form input[type="radio"] {
  border-radius: 50% !important;
}

/* Checkbox/Radio CHECKED State - React: data-[state=checked]:bg-primary */
input[type="checkbox"]:checked,
input[type="radio"]:checked,
.wpcf7 input[type="checkbox"]:checked,
.wpcf7 input[type="radio"]:checked,
.woocommerce input[type="checkbox"]:checked,
.woocommerce input[type="radio"]:checked,
form input[type="checkbox"]:checked,
form input[type="radio"]:checked {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* Checkbox Check Mark */
input[type="checkbox"]:checked::before,
.wpcf7 input[type="checkbox"]:checked::before,
.woocommerce input[type="checkbox"]:checked::before,
form input[type="checkbox"]:checked::before {
  content: "" !important;
  display: block !important;
  width: 0.5rem !important;  /* 8px */
  height: 0.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.485 3.485a1 1 0 010 1.415l-7 7a1 1 0 01-1.415 0l-3-3a1 1 0 111.415-1.415L5.757 10.07l6.313-6.313a1 1 0 011.415 0z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin: auto !important;
}

/* Radio Dot */
input[type="radio"]:checked::before,
.wpcf7 input[type="radio"]:checked::before,
.woocommerce input[type="radio"]:checked::before,
form input[type="radio"]:checked::before {
  content: "" !important;
  display: block !important;
  width: 0.5rem !important;  /* 8px inner dot */
  height: 0.5rem !important;
  background: hsl(var(--primary-foreground)) !important;
  border-radius: 50% !important;
  margin: auto !important;
}

/* Checkbox/Radio FOCUS State */
input[type="checkbox"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
.wpcf7 input[type="checkbox"]:focus,
.wpcf7 input[type="radio"]:focus,
.woocommerce input[type="checkbox"]:focus,
.woocommerce input[type="radio"]:focus,
form input[type="checkbox"]:focus,
form input[type="radio"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)),
              0 0 0 4px hsl(var(--ring)) !important;
}

/* Checkbox/Radio DISABLED State */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled,
.wpcf7 input[type="checkbox"]:disabled,
.wpcf7 input[type="radio"]:disabled,
.woocommerce input[type="checkbox"]:disabled,
.woocommerce input[type="radio"]:disabled,
form input[type="checkbox"]:disabled,
form input[type="radio"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* SELECT DROPDOWN - React: same as input but with chevron icon */
select,
.wpcf7 select,
.woocommerce select,
form select,
.mk-select {
  /* Add padding-right for chevron icon */
  padding-right: 2.5rem !important;  /* Space for chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23203D31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1rem !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
}

/* Remove default select arrow in IE */
select::-ms-expand {
  display: none !important;
}

/* FILE INPUT - React: file:border-0 file:bg-transparent file:text-sm
                       file:font-medium file:text-foreground */
input[type="file"],
.wpcf7 input[type="file"],
.woocommerce input[type="file"],
form input[type="file"] {
  padding: 0.5rem 0.75rem !important;
  cursor: pointer !important;
}

input[type="file"]::file-selector-button,
.wpcf7 input[type="file"]::file-selector-button,
.woocommerce input[type="file"]::file-selector-button,
form input[type="file"]::file-selector-button {
  border: 0 !important;
  background: transparent !important;
  font-size: 0.875rem !important;  /* text-sm */
  font-weight: 500 !important;  /* font-medium */
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  margin-right: 0.75rem !important;
  padding: 0 !important;
}

/* FORM LABELS - WordPress/CF7/WooCommerce */
label,
.wpcf7 label,
.woocommerce label,
form label,
.woocommerce-form__label,
.woocommerce-form-row label {
  display: block !important;
  font-size: 0.875rem !important;  /* text-sm */
  font-weight: 500 !important;  /* font-medium */
  margin-bottom: 0.5rem !important;  /* mb-2 */
  color: hsl(var(--foreground)) !important;
  font-family: var(--font-body) !important;
  line-height: 1.25rem !important;
}

/* Inline labels (checkbox/radio) */
label.wpcf7-list-item-label,
.woocommerce-form__label-for-checkbox,
.woocommerce-form__label-for-radio,
label[for*="checkbox"],
label[for*="radio"] {
  display: inline-block !important;
  margin-bottom: 0 !important;
  margin-left: 0.5rem !important;  /* Space after checkbox/radio */
  font-weight: 400 !important;  /* Normal weight for inline labels */
  vertical-align: middle !important;
}

/* FORM VALIDATION - Error States */
input.wpcf7-not-valid,
textarea.wpcf7-not-valid,
select.wpcf7-not-valid,
.woocommerce-invalid input,
.woocommerce-invalid textarea,
.woocommerce-invalid select,
input:invalid,
textarea:invalid,
select:invalid {
  border-color: hsl(var(--destructive)) !important;
}

input.wpcf7-not-valid:focus,
textarea.wpcf7-not-valid:focus,
select.wpcf7-not-valid:focus,
.woocommerce-invalid input:focus,
.woocommerce-invalid textarea:focus,
.woocommerce-invalid select:focus,
input:invalid:focus,
textarea:invalid:focus,
select:invalid:focus {
  box-shadow: 0 0 0 2px hsl(var(--background)),
              0 0 0 4px hsl(var(--destructive)) !important;
}

/* Error Messages */
.wpcf7-not-valid-tip,
.woocommerce-error,
.woocommerce-invalid-required-field-message,
span.error,
.error-message {
  display: block !important;
  margin-top: 0.375rem !important;  /* mt-1.5 */
  font-size: 0.875rem !important;  /* text-sm */
  color: hsl(var(--destructive)) !important;
  font-family: var(--font-body) !important;
}

/* Success Messages */
.wpcf7-response-output,
.woocommerce-message {
  padding: 1rem !important;
  margin-top: 1rem !important;
  border-radius: 0.25rem !important;  /* var(--radius) */
  font-size: 0.875rem !important;
  font-family: var(--font-body) !important;
}

.wpcf7-mail-sent-ok {
  background: hsl(var(--primary) / 0.1) !important;
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  background: hsl(var(--destructive) / 0.1) !important;
  border: 1px solid hsl(var(--destructive)) !important;
  color: hsl(var(--destructive)) !important;
}

/* REQUIRED FIELD INDICATOR */
.required,
abbr.required,
.woocommerce-form-row .required {
  color: hsl(var(--destructive)) !important;
  text-decoration: none !important;
  border: none !important;
}

/* FORM ROWS - WooCommerce */
.woocommerce-form-row,
.woocommerce form .form-row {
  margin-bottom: 1rem !important;
}

/* NUMBER INPUT SPINNERS - Remove default styling */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

input[type="number"] {
  -moz-appearance: textfield !important;
}

/* SEARCH INPUT - Remove default X button in Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
}

/* PASSWORD VISIBILITY TOGGLE - WooCommerce */
.show-password-input {
  display: flex !important;
  position: relative !important;
}

.show-password-input .password-input {
  flex: 1 !important;
  padding-right: 3rem !important;  /* Space for eye icon */
}

.show-password-input button {
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: hsl(var(--muted-foreground)) !important;
  height: auto !important;
  min-height: 0 !important;
}

.show-password-input button:hover {
  color: hsl(var(--foreground)) !important;
}

/* ==========================================================================
   END SECTION S335: GLOBAL FORMS V4 PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION S333: DOVANU KUPONAS PAGE V4 PARITY - AGENT 14 (2026-03-29)
   ==========================================================================

   Agent 14 Implementation
   Reference: docs/PARITY-AGENT-LOGS/V4-AGENT14-DOVANU-KUPONAS.md
   React Source: src/pages/GiftVoucher.tsx

   CRITICAL FIXES:
   - DK-V4-1: Voucher image rounded-lg = 0.25rem (4px) not 0.5rem
   - DK-V4-2: Amount buttons rounded-lg = 0.25rem (4px) not 0.5rem
   - DK-V4-3: Price overlay rounded-lg = 0.25rem (4px)
   - DK-V4-4: Amount button padding py-3 px-6 (0.75rem 1.5rem)
   - DK-V4-5: Feature cards grid gap-6 mb-12 (1.5rem, 3rem)
   - DK-V4-6: Rules card grid responsive md:grid-cols-2
   - DK-V4-7: Custom amount input w-32 (8rem = 128px)
   - DK-V4-8: Inactive button hover bg-primary-foreground/20
   ========================================================================== */

/* ---------------------------------------------------------------------
   DK-V4-1: Voucher Image Border-Radius - CRITICAL FIX
   React: rounded-lg = var(--radius) = 0.25rem (4px custom config)
   Previous S313: 0.5rem (WRONG - used standard Tailwind)
   --------------------------------------------------------------------- */
.page-id-19 .mk-voucher-preview img,
.page-id-19 figure.wp-block-image img,
body.page-dovanu-kuponas .mk-voucher-preview img,
.mk-voucher-preview img {
  border-radius: 0.25rem !important; /* rounded-lg = 4px in custom config */
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important; /* shadow-2xl */
  max-height: 400px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* ---------------------------------------------------------------------
   DK-V4-2: Amount Buttons Border-Radius - CRITICAL FIX
   React: rounded-lg = 0.25rem (4px)
   Previous S313: 0.5rem (WRONG)
   --------------------------------------------------------------------- */
.page-id-19 .mk-amount-btn,
.mk-voucher-amount button,
body.page-dovanu-kuponas .mk-amount-btn,
.mk-amount-selector button {
  border-radius: 0.25rem !important; /* rounded-lg = 4px */
  padding: 0.75rem 1.5rem !important; /* py-3 px-6 */
  font-weight: 600 !important; /* font-semibold */
  transition: all 200ms ease !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

/* Active state: bg-gold text-primary */
.page-id-19 .mk-amount-btn.active,
.mk-amount-selector button.active,
body.page-dovanu-kuponas .mk-amount-btn.active {
  background: hsl(42 55% 58%) !important; /* bg-gold */
  color: hsl(160 30% 28%) !important; /* text-primary */
  border: 1px solid transparent !important;
}

/* Inactive state: bg-primary-foreground/10 border-primary-foreground/20 */
.page-id-19 .mk-amount-btn:not(.active),
.mk-amount-selector button:not(.active),
body.page-dovanu-kuponas .mk-amount-btn:not(.active) {
  background: hsl(40 30% 96% / 0.1) !important; /* bg-primary-foreground/10 */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  border: 1px solid hsl(40 30% 96% / 0.2) !important; /* border-primary-foreground/20 */
}

/* DK-V4-8: Inactive hover state */
.page-id-19 .mk-amount-btn:not(.active):hover,
.mk-amount-selector button:not(.active):hover,
body.page-dovanu-kuponas .mk-amount-btn:not(.active):hover {
  background: hsl(40 30% 96% / 0.2) !important; /* hover:bg-primary-foreground/20 */
}

/* ---------------------------------------------------------------------
   DK-V4-3: Price Overlay on Voucher Image
   React: absolute bottom-6 right-6 bg-primary px-4 py-2 rounded-lg
         font-bold text-2xl shadow-lg
   --------------------------------------------------------------------- */
.mk-price-overlay,
.mk-voucher-price-badge,
body.page-dovanu-kuponas .mk-price-overlay {
  position: absolute !important;
  bottom: 1.5rem !important; /* bottom-6 */
  right: 1.5rem !important; /* right-6 */
  background: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  padding: 0.5rem 1rem !important; /* py-2 px-4 */
  border-radius: 0.25rem !important; /* rounded-lg = 4px */
  font-weight: 700 !important; /* font-bold */
  font-size: 1.5rem !important; /* text-2xl = 24px */
  line-height: 2rem !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important; /* shadow-lg */
}

/* ---------------------------------------------------------------------
   DK-V4-7: Custom Amount Input Width
   React: w-32 = 8rem = 128px
   --------------------------------------------------------------------- */
.mk-custom-amount,
.mk-amount-custom-input,
body.page-dovanu-kuponas .mk-custom-amount,
body.page-dovanu-kuponas input[type="number"].mk-custom-amount {
  width: 8rem !important; /* w-32 = 128px */
  background: hsl(40 30% 96% / 0.1) !important; /* bg-primary-foreground/10 */
  border: 1px solid hsl(40 30% 96% / 0.2) !important; /* border-primary-foreground/20 */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  border-radius: 0.25rem !important;
  padding: 0.75rem 1.5rem !important; /* Match button padding */
}

.mk-custom-amount::placeholder,
body.page-dovanu-kuponas .mk-custom-amount::placeholder {
  color: hsl(40 30% 96% / 0.5) !important; /* placeholder:text-primary-foreground/50 */
}

/* Active state (when filled) */
.mk-custom-amount.active,
.mk-custom-amount:focus,
body.page-dovanu-kuponas .mk-custom-amount.active {
  border: 2px solid hsl(42 55% 58%) !important; /* ring-2 ring-gold */
  outline: none !important;
}

/* ---------------------------------------------------------------------
   DK-V4-5: Feature Cards Grid - 3 Columns
   React: grid md:grid-cols-3 gap-6 mb-12
   --------------------------------------------------------------------- */
.mk-voucher-features,
.mk-feature-cards-grid,
body.page-dovanu-kuponas .mk-voucher-features {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
  margin-bottom: 3rem !important; /* mb-12 = 48px */
}

@media (min-width: 768px) {
  .mk-voucher-features,
  .mk-feature-cards-grid,
  body.page-dovanu-kuponas .mk-voucher-features {
    grid-template-columns: repeat(3, 1fr) !important; /* md:grid-cols-3 */
  }
}

/* Feature card - rounded-xl = 0.75rem (12px standard Tailwind) */
.page-id-19 .mk-feature-card,
.mk-voucher-features .wp-block-group,
body.page-dovanu-kuponas .mk-feature-card {
  background: hsl(40 30% 96%) !important; /* bg-card */
  border-radius: 0.75rem !important; /* rounded-xl = 12px */
  padding: 1.5rem !important; /* p-6 = 24px */
  border: 1px solid hsl(var(--border)) !important;
  text-align: center !important;
}

/* ---------------------------------------------------------------------
   DK-V4-6: Validity Rules Card Grid - 2 Columns Responsive
   React: grid md:grid-cols-2 gap-6
   --------------------------------------------------------------------- */
.mk-rules-grid,
.mk-validity-rules-grid,
body.page-dovanu-kuponas .mk-rules-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
}

@media (min-width: 768px) {
  .mk-rules-grid,
  .mk-validity-rules-grid,
  body.page-dovanu-kuponas .mk-rules-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* md:grid-cols-2 */
  }
}

/* Rules card container - rounded-xl, p-8 */
.page-id-19 .mk-rules-card,
body.page-dovanu-kuponas .mk-rules-card {
  background: hsl(40 30% 96%) !important; /* bg-card */
  border-radius: 0.75rem !important; /* rounded-xl = 12px */
  padding: 2rem !important; /* p-8 = 32px */
  border: 1px solid hsl(var(--border)) !important;
}

/* Rules card header - flex gap-3 mb-6 */
.mk-rules-card__header,
.mk-rules-card > .wp-block-group:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important; /* gap-3 = 12px */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
}

/* Rule item - border-l-4 border-primary pl-4 */
.mk-rule-item,
.mk-validity-rule {
  border-left: 4px solid hsl(160 30% 28%) !important; /* border-l-4 border-primary */
  padding-left: 1rem !important; /* pl-4 = 16px */
}

.mk-rule-item h3,
.mk-validity-rule h3 {
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
  color: hsl(var(--foreground)) !important;
}

.mk-rule-item p,
.mk-validity-rule p {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.25rem !important;
}

/* ---------------------------------------------------------------------
   Amount Selector Container
   React: flex flex-wrap gap-3
   --------------------------------------------------------------------- */
.mk-amount-selector,
.mk-voucher-amount-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important; /* gap-3 = 12px */
  align-items: center !important;
}

/* Order CTA Button - full width, gold variant, py-6 text-lg */
.mk-voucher-cta,
body.page-dovanu-kuponas .mk-cta-btn {
  width: 100% !important;
  padding: 1.5rem 2rem !important; /* py-6 = 24px vertical */
  font-size: 1.125rem !important; /* text-lg = 18px */
  background: hsl(42 55% 58%) !important; /* bg-gold */
  color: hsl(160 30% 28%) !important; /* text-primary */
  font-weight: 600 !important; /* font-semibold */
  border-radius: 0.25rem !important;
  transition: all 300ms ease !important;
}

.mk-voucher-cta:hover,
body.page-dovanu-kuponas .mk-cta-btn:hover {
  background: hsl(42 55% 58% / 0.9) !important; /* hover:bg-gold/90 */
}

/* Email note - Mail icon + text */
.mk-email-note,
body.page-dovanu-kuponas .mk-email-note {
  color: hsl(40 30% 96% / 0.6) !important; /* text-primary-foreground/60 */
  font-size: 0.875rem !important; /* text-sm */
  text-align: center !important;
  margin-top: 1rem !important;
}

.mk-email-note svg {
  display: inline !important;
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  margin-right: 0.25rem !important; /* mr-1 = 4px */
  vertical-align: middle !important;
}

/* ==========================================================================
   END SECTION S333: DOVANU KUPONAS PAGE V4 PARITY - AGENT 14
   ========================================================================== */

/* ==========================================================================
   SECTION S340: COMPREHENSIVE PARITY FIX — EXTRACTED EXACT REACT VALUES
   Date: 2026-03-29
   Purpose: Fix ALL critical/high/medium/low parity issues in single section
   Source: Direct extraction from React source files

   CRITICAL VALUES EXTRACTED FROM REACT:
   - tailwind.config.ts line 78-82: borderRadius config
     - rounded-lg: var(--radius) = 0.25rem (4px)
     - rounded-md: calc(var(--radius) - 2px) = 2px (0.125rem)
     - rounded-sm: calc(var(--radius) - 4px) = 0px
   - index.css line 46: --radius: 0.25rem
   - switch.tsx line 12: h-6 w-11 = 24px × 44px track
   - switch.tsx line 20: h-5 w-5 = 20px thumb
   - input.tsx line 11: h-10 rounded-md px-3 py-2 = 40px, 2px, 12px/8px
   - Header.tsx line 39: h-20 = 80px header height
   - Catalog.tsx line 135: sticky top-24 = 96px sticky offset
   - Catalog.tsx line 149: bg-card rounded-sm p-4 = 0px radius, 16px padding
   ========================================================================== */

/* ---------------------------------------------------------------------------
   S340-1: GLOBAL BORDER-RADIUS FIXES (CRITICAL)
   React: rounded-sm=0, rounded-md=2px, rounded-lg=4px, rounded-xl=12px
   --------------------------------------------------------------------------- */

/* Cards use rounded-sm = 0px (NOT 2px) */
.wc-block-grid__product,
.wc-block-product,
.mk-card,
.bg-card,
.woocommerce ul.products li.product,
.woocommerce-loop-product,
body.woocommerce ul.products li.product,
body .wp-block-woocommerce-product-collection .wc-block-grid__product {
  border-radius: 0px !important;
}

/* Sidebar cards: rounded-sm = 0px */
.mk-sidebar-card,
.mk-filter-card,
.katalogas-sidebar .bg-card,
.woocommerce-sidebar-filters .filter-section,
body.woocommerce .woocommerce-sidebar-filters > div,
body.page-katalogas .wp-block-column:first-child > div,
body.tax-product_cat .wp-block-column:first-child > div {
  border-radius: 0px !important;
}

/* Inputs use rounded-md = 2px (NOT 6px) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select,
.wpcf7-form-control,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper select,
.woocommerce input.input-text,
.woocommerce select,
body input,
body textarea,
body select {
  border-radius: 2px !important;
}

/* Time filter buttons: rounded-md = 2px */
.mk-time-filter-btn,
.mk-filter-btn,
.time-filter-button,
button.mk-filter-btn,
body.page-katalogas .time-filter-button,
body.tax-product_cat .time-filter-button,
.katalogas-sidebar button[class*="filter"] {
  border-radius: 2px !important;
}

/* Small buttons/badges: rounded-sm = 0px */
.mk-badge,
.mk-status-badge,
.badge,
span[class*="badge"],
.woocommerce span.onsale,
.product-badge {
  border-radius: 0px !important;
}

/* Large containers: rounded-lg = 4px */
.mk-modal,
.mk-dropdown,
.dropdown-content,
[data-radix-popper-content-wrapper] > div,
.popover-content {
  border-radius: 4px !important;
}

/* Extra large elements: rounded-xl = 12px (NOT overridden in React) */
.mk-hero-image,
.hero-container img {
  border-radius: 12px !important;
}

/* ---------------------------------------------------------------------------
   S340-2: TOGGLE SWITCH DIMENSIONS (CRITICAL)
   React switch.tsx: h-6 w-11 (24×44px track), h-5 w-5 (20px thumb)
   --------------------------------------------------------------------------- */

/* Toggle track */
.mk-toggle,
.wp-block-group .mk-toggle,
.katalogas-sidebar .mk-toggle,
input[type="checkbox"][role="switch"],
button[role="switch"],
[data-state="checked"],
[data-state="unchecked"],
.toggle-switch,
body .toggle-track,
body .switch-track {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  border-radius: 9999px !important;
  padding: 2px !important;
  border: 2px solid transparent !important;
  transition: background-color 150ms, border-color 150ms !important;
}

/* Toggle track colors */
[data-state="checked"],
.mk-toggle.checked,
.toggle-switch.checked,
input[type="checkbox"][role="switch"]:checked {
  background-color: hsl(160 30% 28%) !important; /* --primary */
}

[data-state="unchecked"],
.mk-toggle:not(.checked),
.toggle-switch:not(.checked),
input[type="checkbox"][role="switch"]:not(:checked) {
  background-color: hsl(36 20% 85%) !important; /* --input */
}

/* Toggle thumb */
.mk-toggle::before,
.toggle-thumb,
.switch-thumb,
[data-state] span,
[data-state] > span {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  border-radius: 9999px !important;
  background-color: hsl(var(--background)) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  transition: transform 150ms !important;
}

/* Toggle thumb position */
[data-state="checked"] span,
[data-state="checked"] > span,
.mk-toggle.checked::before {
  transform: translateX(20px) !important;
}

[data-state="unchecked"] span,
[data-state="unchecked"] > span,
.mk-toggle:not(.checked)::before {
  transform: translateX(0px) !important;
}

/* ---------------------------------------------------------------------------
   S340-3: FORM INPUT DIMENSIONS (HIGH)
   React input.tsx: h-10 px-3 py-2 = 40px height, 12px/8px padding
   --------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
.wpcf7-form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.woocommerce-input-wrapper input,
.woocommerce input.input-text,
body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
  height: 40px !important;
  min-height: 40px !important;
  padding: 8px 12px !important; /* py-2 px-3 */
  font-size: 0.875rem !important; /* md:text-sm */
  line-height: 1.25rem !important;
  border: 1px solid hsl(36 20% 85%) !important; /* border-input */
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

input::placeholder,
textarea::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}

/* Focus ring: ring-2 ring-ring ring-offset-2 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(160 30% 28%) !important;
}

/* Textarea specific */
textarea,
.wpcf7-textarea,
.woocommerce textarea {
  min-height: 100px !important;
  padding: 8px 12px !important;
  border-radius: 2px !important;
  resize: vertical !important;
}

/* ---------------------------------------------------------------------------
   S340-4: KATALOGAS SIDEBAR VISIBILITY (CRITICAL)
   React Catalog.tsx: lg:col-span-1 with sticky top-24 space-y-6
   --------------------------------------------------------------------------- */

/* Force sidebar column visible on desktop */
@media (min-width: 1024px) {
  body.page-katalogas .wp-block-columns,
  body.tax-product_cat .wp-block-columns,
  body.woocommerce .katalogas-layout,
  body.post-type-archive-product .wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2rem !important; /* gap-8 = 32px */
  }

  body.page-katalogas .wp-block-column:first-child,
  body.tax-product_cat .wp-block-column:first-child,
  body.woocommerce .katalogas-sidebar,
  body.post-type-archive-product .wp-block-column:first-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 25% !important; /* lg:col-span-1 of 4 = 25% */
    max-width: 25% !important;
    width: 25% !important;
  }

  /* Sidebar sticky positioning */
  body.page-katalogas .wp-block-column:first-child > *,
  body.tax-product_cat .wp-block-column:first-child > *,
  body.woocommerce .katalogas-sidebar > *,
  .mk-sidebar-sticky {
    position: sticky !important;
    top: 96px !important; /* top-24 = 6rem = 96px */
  }

  /* Sidebar internal spacing */
  body.page-katalogas .wp-block-column:first-child,
  body.tax-product_cat .wp-block-column:first-child,
  .katalogas-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important; /* space-y-6 = 24px */
  }

  /* Main content area: lg:col-span-3 of 4 = 75% */
  body.page-katalogas .wp-block-column:last-child,
  body.tax-product_cat .wp-block-column:last-child,
  body.post-type-archive-product .wp-block-column:last-child,
  .katalogas-main-content {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    width: 75% !important;
  }
}

/* Sidebar card styling: bg-card rounded-sm p-4 shadow-card */
.mk-filter-section,
.katalogas-sidebar > div,
body.page-katalogas .wp-block-column:first-child > div,
body.tax-product_cat .wp-block-column:first-child > div {
  background: hsl(var(--card)) !important;
  border-radius: 0px !important; /* rounded-sm = 0 */
  padding: 1rem !important; /* p-4 = 16px */
  box-shadow: var(--shadow-card) !important;
}

/* Sidebar section headings: font-display font-semibold mb-3 */
.mk-filter-section h3,
.mk-filter-section h4,
.katalogas-sidebar h3,
.katalogas-sidebar h4 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important; /* mb-3 = 12px */
}

/* ---------------------------------------------------------------------------
   S340-5: HEADER HEIGHT & SPACING (SCOPED TO mk- CLASSES ONLY)
   React Header.tsx line 39: h-20 = 5rem = 80px
   NOTE: Generic 'header' selector removed - broke WP FSE structure
   --------------------------------------------------------------------------- */

/* Logo: h-14 = 3.5rem = 56px — scoped to avoid breaking other images */
.mk-header .wp-block-site-logo img,
.mk-header .custom-logo {
  height: 56px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Nav links: text-sm font-medium — using WP navigation block classes */
.wp-block-navigation-item__content {
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  transition: color 150ms !important;
}

.wp-block-navigation-item__content:hover {
  color: hsl(160 30% 28%) !important; /* hover:text-primary */
}

/* ---------------------------------------------------------------------------
   S340-6: PRODUCT GRID LAYOUT
   React Catalog.tsx: grid sm:grid-cols-2 xl:grid-cols-3 gap-6
   --------------------------------------------------------------------------- */

.products.columns-3,
.woocommerce ul.products,
.wc-block-grid__products,
.wc-block-product-template,
body.woocommerce ul.products {
  display: grid !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
}

/* 1 column on mobile */
@media (max-width: 639px) {
  .products.columns-3,
  .woocommerce ul.products,
  .wc-block-grid__products {
    grid-template-columns: 1fr !important;
  }
}

/* 2 columns on sm */
@media (min-width: 640px) and (max-width: 1279px) {
  .products.columns-3,
  .woocommerce ul.products,
  .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 3 columns on xl */
@media (min-width: 1280px) {
  .products.columns-3,
  .woocommerce ul.products,
  .wc-block-grid__products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ---------------------------------------------------------------------------
   S340-7: CARD CONTENT PADDING & SPACING
   React ArtworkCard.tsx: p-5 = 1.25rem = 20px
   --------------------------------------------------------------------------- */

.woocommerce-loop-product__link,
.wc-block-grid__product-content,
.product-card-content,
.mk-card-content {
  padding: 1.25rem !important; /* p-5 = 20px */
}

/* Title: font-display text-lg font-semibold mb-1 */
.woocommerce-loop-product__title,
.wc-block-grid__product-title,
.product-card-title,
.mk-card-title {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
  color: hsl(var(--foreground)) !important;
}

/* Artist: text-sm text-muted-foreground mb-1 */
.product-card-artist,
.mk-card-artist,
.woocommerce-loop-product .artist-name {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0.25rem !important; /* mb-1 */
}

/* Price: font-bold text-primary */
.woocommerce-Price-amount,
.wc-block-grid__product-price,
.mk-card-price,
.product-card-price {
  font-weight: 700 !important; /* font-bold */
  color: hsl(160 30% 28%) !important; /* text-primary */
}

/* Estimate: text-sm text-gold */
.mk-estimate,
.product-card-estimate {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(42 55% 58%) !important; /* text-gold */
}

/* ---------------------------------------------------------------------------
   S340-8: IMAGE ASPECT RATIO (4:5 NOT 3:4)
   React ArtworkCard.tsx: aspect-[4/5] = 0.8 ratio
   --------------------------------------------------------------------------- */

.wc-block-components-product-image,
.woocommerce-product-gallery__image,
.product-card-image,
.mk-card-image,
.woocommerce ul.products li.product img,
.wc-block-grid__product-image {
  aspect-ratio: 4 / 5 !important;
}

/* Override any WooCommerce 3:4 defaults */
[style*="aspect-ratio:3/4"],
[style*="aspect-ratio: 3/4"],
[style*="aspect-ratio:3 / 4"],
.wc-block-components-product-image--aspect-ratio-3-4 {
  aspect-ratio: 4 / 5 !important;
}

/* img object-fit cover - exclude logo to preserve aspect ratio */
img:not(.custom-logo):not(.wp-block-site-logo img) {
  object-fit: cover !important;
}

/* Ensure logo uses contain */
.custom-logo,
.wp-block-site-logo img {
  object-fit: contain !important;
}

/* Image hover zoom: scale(1.05) over 500ms */
.product-card-image img,
.mk-card-image img,
.woocommerce-loop-product img,
.wc-block-grid__product-image img {
  transition: transform 500ms ease !important;
}

.product-card:hover img,
.mk-card:hover img,
li.product:hover img,
.wc-block-grid__product:hover img {
  transform: scale(1.05) !important;
}

/* ---------------------------------------------------------------------------
   S340-9: CONTAINER & SPACING
   React: container mx-auto px-4 py-12 = max-1400px, 16px sides, 48px top/bottom
   --------------------------------------------------------------------------- */

.container,
.wp-block-group.alignwide,
body .entry-content > .wp-block-group {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important; /* px-4 = 16px */
  padding-right: 1rem !important;
}

/* Page content vertical padding: py-12 = 48px */
.page-content,
main.site-main,
.entry-content {
  padding-top: 3rem !important; /* py-12 = 48px */
  padding-bottom: 3rem !important;
}

/* Section spacing: space-y-6 = 24px between sections */
.page-content > *,
main.site-main > *,
.entry-content > * {
  margin-bottom: 1.5rem !important;
}

/* ---------------------------------------------------------------------------
   S340-10: MOBILE MENU
   React Header.tsx: lg:hidden py-4 border-t animate-fade-in
   --------------------------------------------------------------------------- */

@media (max-width: 1279px) {
  .mobile-nav,
  .mobile-menu,
  header .wp-block-navigation__responsive-container {
    padding: 1rem !important; /* py-4 = 16px */
    border-top: 1px solid hsl(var(--border)) !important;
    animation: mk-fade-in 0.3s ease-out forwards !important;
  }

  /* Section labels: text-sm font-medium text-muted-foreground px-2 */
  .mobile-nav .section-label,
  .mobile-menu-section-title {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: hsl(var(--muted-foreground)) !important;
    padding: 0 0.5rem !important;
  }

  /* Menu items: block px-4 py-2 text-sm hover:bg-muted rounded */
  .mobile-nav a,
  .mobile-menu a {
    display: block !important;
    padding: 0.5rem 1rem !important; /* py-2 px-4 */
    font-size: 0.875rem !important;
    border-radius: 4px !important;
    transition: background-color 150ms !important;
  }

  .mobile-nav a:hover,
  .mobile-menu a:hover {
    background-color: hsl(var(--muted)) !important;
  }
}

/* Hide desktop nav on mobile */
@media (max-width: 1279px) {
  nav.desktop-nav,
  header nav.lg\\:flex {
    display: none !important;
  }
}

/* Hide mobile menu button on desktop */
@media (min-width: 1024px) {
  .mobile-menu-toggle,
  button.lg\\:hidden {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   S340-11: BUTTONS STANDARDIZATION
   React button.tsx variants: catalog, elegant, gold, outline, ghost
   --------------------------------------------------------------------------- */

/* All buttons base */
button,
.wp-block-button__link,
.woocommerce-button,
input[type="submit"],
input[type="button"],
.btn,
a.button {
  font-weight: 500 !important;
  transition: all 300ms !important;
  cursor: pointer !important;
}

/* Catalog variant: bg-primary */
.btn-catalog,
.mk-btn-catalog,
.wp-block-button.is-style-catalog .wp-block-button__link {
  background: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 24px !important;
  height: 40px !important;
}

.btn-catalog:hover,
.mk-btn-catalog:hover {
  background: hsl(160 25% 38%) !important; /* forest-light */
}

/* Gold variant */
.btn-gold,
.mk-btn-gold,
.wp-block-button.is-style-gold .wp-block-button__link {
  background: hsl(42 55% 58%) !important;
  color: hsl(160 30% 28%) !important;
  border: none !important;
  border-radius: 4px !important;
}

.btn-gold:hover,
.mk-btn-gold:hover {
  background: hsl(42 45% 75%) !important; /* gold-light */
}

/* Elegant variant: outlined */
.btn-elegant,
.mk-btn-elegant,
.wp-block-button.is-style-elegant .wp-block-button__link {
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--foreground) / 0.2) !important;
  border-radius: 4px !important;
}

.btn-elegant:hover,
.mk-btn-elegant:hover {
  border-color: hsl(160 30% 28%) !important;
  color: hsl(160 30% 28%) !important;
}

/* Outline variant */
.btn-outline,
.mk-btn-outline {
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: 4px !important;
}

/* Ghost variant */
.btn-ghost,
.mk-btn-ghost {
  background: transparent !important;
  border: none !important;
  color: hsl(var(--foreground)) !important;
}

.btn-ghost:hover,
.mk-btn-ghost:hover {
  background: hsl(var(--muted)) !important;
}

/* Button sizes */
.btn-sm { height: 36px !important; padding: 0 16px !important; font-size: 0.875rem !important; }
.btn-lg { height: 48px !important; padding: 0 32px !important; font-size: 1rem !important; }
.btn-xl { height: 56px !important; padding: 0 40px !important; font-size: 1rem !important; }
.btn-icon { height: 40px !important; width: 40px !important; padding: 0 !important; }

/* ---------------------------------------------------------------------------
   S340-12: TIME FILTER BUTTONS
   React Catalog.tsx lines 153-164: w-full text-left px-3 py-2 rounded-md text-sm
   Active: bg-primary text-primary-foreground
   Inactive: hover:bg-muted
   --------------------------------------------------------------------------- */

.mk-time-filter,
.time-filter-button,
.katalogas-sidebar .filter-btn {
  width: 100% !important;
  text-align: left !important;
  padding: 8px 12px !important; /* py-2 px-3 */
  border-radius: 2px !important; /* rounded-md = calc(0.25rem - 2px) = 2px */
  font-size: 0.875rem !important; /* text-sm */
  transition: all 150ms !important;
  border: none !important;
  cursor: pointer !important;
}

/* Active state */
.mk-time-filter.active,
.time-filter-button.active,
.time-filter-button[aria-selected="true"],
.katalogas-sidebar .filter-btn.active {
  background-color: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
}

/* Inactive state */
.mk-time-filter:not(.active),
.time-filter-button:not(.active),
.time-filter-button[aria-selected="false"],
.katalogas-sidebar .filter-btn:not(.active) {
  background-color: transparent !important;
  color: hsl(var(--foreground)) !important;
}

.mk-time-filter:not(.active):hover,
.time-filter-button:not(.active):hover,
.katalogas-sidebar .filter-btn:not(.active):hover {
  background-color: hsl(var(--muted)) !important;
}

/* ---------------------------------------------------------------------------
   S340-13: QUICK FILTER TOGGLES CONTAINER
   React Catalog.tsx lines 169-190: bg-card rounded-sm p-4 space-y-4
   Each toggle row: flex items-center justify-between
   --------------------------------------------------------------------------- */

.mk-quick-filters,
.quick-filters-section {
  background: hsl(var(--card)) !important;
  border-radius: 0px !important; /* rounded-sm */
  padding: 1rem !important; /* p-4 */
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* space-y-4 */
}

.mk-quick-filter-row,
.quick-filter-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.mk-quick-filter-label,
.quick-filter-label {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--foreground)) !important;
}

/* ---------------------------------------------------------------------------
   S340-14: CLEAR FILTERS BUTTON
   React Catalog.tsx lines 193-201: Button variant="outline" w-full
   --------------------------------------------------------------------------- */

.mk-clear-filters,
.clear-filters-btn,
button.clear-filters {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font-size: 0.875rem !important;
  transition: all 150ms !important;
}

.mk-clear-filters:hover,
.clear-filters-btn:hover {
  border-color: hsl(var(--foreground)) !important;
  background: hsl(var(--muted)) !important;
}

/* X icon: w-4 h-4 */
.mk-clear-filters svg,
.clear-filters-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* ==========================================================================
   END SECTION S340: COMPREHENSIVE PARITY FIX
   ========================================================================== */

/* ==========================================================================
   SECTION S341: CATEGORY SIDEBAR EXACT PARITY
   Source: CategorySidebar.tsx — 3 distinct card types
   ========================================================================== */

/* ---------------------------------------------------------------------------
   S341-1: CATEGORIES CARD (Dark Primary Background)
   React: bg-primary text-primary-foreground rounded-sm p-6
   --------------------------------------------------------------------------- */

.mk-categories-card,
.katalogas-sidebar .categories-section,
body.page-katalogas .sidebar-categories,
body.tax-product_cat .sidebar-categories {
  background: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  border-radius: 0px !important; /* rounded-sm = 0 */
  padding: 1.5rem !important; /* p-6 = 24px */
}

/* Categories heading: font-display text-lg font-semibold mb-6 */
.mk-categories-card h3,
.katalogas-sidebar .categories-section h3,
.sidebar-categories h3 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
  color: inherit !important;
}

/* Category list: space-y-3 */
.mk-categories-card ul,
.katalogas-sidebar .categories-section ul,
.sidebar-categories ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important; /* space-y-3 = 12px */
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Category buttons: text-sm w-full text-left */
.mk-categories-card button,
.mk-categories-card a,
.katalogas-sidebar .categories-section button,
.sidebar-categories a {
  font-size: 0.875rem !important; /* text-sm */
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 150ms !important;
  padding: 0 !important;
}

/* Active category: text-gold font-medium */
.mk-categories-card button.active,
.mk-categories-card a.active,
.mk-categories-card a[aria-current="page"],
.katalogas-sidebar .categories-section .current-cat a,
.sidebar-categories .current-cat a {
  color: hsl(42 55% 58%) !important; /* text-gold */
  font-weight: 500 !important; /* font-medium */
}

/* Inactive category: text-primary-foreground/80 hover:text-gold */
.mk-categories-card button:not(.active),
.mk-categories-card a:not(.active):not([aria-current="page"]),
.katalogas-sidebar .categories-section a:not(.current-cat a),
.sidebar-categories li:not(.current-cat) a {
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
}

.mk-categories-card button:not(.active):hover,
.mk-categories-card a:not(.active):hover,
.katalogas-sidebar .categories-section a:hover,
.sidebar-categories a:hover {
  color: hsl(42 55% 58%) !important; /* hover:text-gold */
}

/* ---------------------------------------------------------------------------
   S341-2: FILTERS CARD (Light Card Background)
   React: bg-card rounded-sm p-6 shadow-card
   --------------------------------------------------------------------------- */

.mk-filters-card,
.katalogas-sidebar .filters-section,
body.page-katalogas .sidebar-filters,
body.tax-product_cat .sidebar-filters {
  background: hsl(var(--card)) !important; /* bg-card */
  border-radius: 0px !important; /* rounded-sm = 0 */
  padding: 1.5rem !important; /* p-6 = 24px */
  box-shadow: var(--shadow-card) !important;
}

/* Filters heading: font-display text-lg font-semibold mb-6 text-foreground */
.mk-filters-card h3,
.katalogas-sidebar .filters-section h3,
.sidebar-filters h3 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 1.125rem !important; /* text-lg */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
  color: hsl(var(--foreground)) !important;
}

/* Filter field groups: mb-6 */
.mk-filters-card .filter-group,
.katalogas-sidebar .filters-section .filter-group,
.sidebar-filters .filter-field {
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
}

/* Filter labels: text-sm text-muted-foreground mb-2 block */
.mk-filters-card label,
.katalogas-sidebar .filters-section label,
.sidebar-filters label {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0.5rem !important; /* mb-2 = 8px */
  display: block !important;
}

/* Select trigger/dropdown: w-full */
.mk-filters-card select,
.mk-filters-card .select-trigger,
.katalogas-sidebar .filters-section select,
.sidebar-filters select {
  width: 100% !important;
  height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: 2px !important; /* rounded-md */
  background: hsl(var(--background)) !important;
  font-size: 0.875rem !important;
}

/* Checkbox row: flex items-center space-x-2 */
.mk-filters-card .checkbox-row,
.katalogas-sidebar .filters-section .checkbox-row,
.sidebar-filters .checkbox-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* space-x-2 = 8px */
}

/* Checkbox label: text-sm text-foreground cursor-pointer */
.mk-filters-card .checkbox-row label,
.sidebar-filters .checkbox-wrapper label {
  font-size: 0.875rem !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   S341-3: QUICK INFO/HELP CARD (Secondary Background)
   React: bg-secondary/30 rounded-sm p-6
   --------------------------------------------------------------------------- */

.mk-help-card,
.katalogas-sidebar .help-section,
body.page-katalogas .sidebar-help,
body.tax-product_cat .sidebar-help {
  background: hsl(36 25% 88% / 0.3) !important; /* bg-secondary/30 */
  border-radius: 0px !important; /* rounded-sm = 0 */
  padding: 1.5rem !important; /* p-6 = 24px */
}

/* Help heading: font-display text-sm font-semibold mb-3 text-foreground */
.mk-help-card h3,
.katalogas-sidebar .help-section h3,
.sidebar-help h3 {
  font-family: var(--font-display), 'Playfair Display', Georgia, serif !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 0.75rem !important; /* mb-3 = 12px */
  color: hsl(var(--foreground)) !important;
}

/* Help list: space-y-2 text-xs text-muted-foreground */
.mk-help-card ul,
.katalogas-sidebar .help-section ul,
.sidebar-help ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* space-y-2 = 8px */
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mk-help-card li,
.katalogas-sidebar .help-section li,
.sidebar-help li {
  font-size: 0.75rem !important; /* text-xs = 12px */
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1rem !important;
}

/* ---------------------------------------------------------------------------
   S341-4: CHECKBOX STYLING
   React checkbox.tsx: rounded-sm = 0px (SQUARE, not rounded)
   --------------------------------------------------------------------------- */

input[type="checkbox"],
.wpcf7-checkbox input[type="checkbox"],
.woocommerce input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  border-radius: 0px !important; /* rounded-sm = calc(0.25rem - 4px) = 0 */
  border: 1px solid hsl(160 30% 28%) !important; /* border-primary */
  appearance: none !important;
  -webkit-appearance: none !important;
  background: hsl(var(--background)) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

input[type="checkbox"]:checked {
  background: hsl(160 30% 28%) !important; /* bg-primary */
  position: relative !important;
}

/* Checkmark */
input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 4px !important;
  height: 8px !important;
  border: solid hsl(40 30% 96%) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* Focus ring */
input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(160 30% 28%) !important;
}

/* Disabled state */
input[type="checkbox"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* ==========================================================================
   END SECTION S341: CATEGORY SIDEBAR EXACT PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION S342: EXACT BUTTON VARIANTS FROM REACT
   Source: button.tsx — extracted exact class values
   Base: text-sm font-medium transition-all duration-300
   Rounded: 0.25rem (var(--radius) = 4px) — NOT 0px like rounded-sm
   ========================================================================== */

/* ---------------------------------------------------------------------------
   S342-1: BUTTON BASE STYLES
   React button.tsx line 8: inline-flex items-center justify-center gap-2
   text-sm font-medium transition-all duration-300
   --------------------------------------------------------------------------- */

button,
.wp-block-button__link,
.woocommerce-button,
input[type="submit"],
input[type="button"],
.btn,
a.button,
.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  white-space: nowrap !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  transition: all 300ms !important; /* transition-all duration-300 */
  cursor: pointer !important;
}

/* Focus state: ring-2 ring-ring ring-offset-2 */
button:focus-visible,
.wp-block-button__link:focus-visible,
input[type="submit"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(160 30% 28%) !important;
}

/* Disabled state */
button:disabled,
.wp-block-button__link:disabled,
input[type="submit"]:disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

/* SVG icons inside buttons */
button svg,
.wp-block-button__link svg,
.btn svg {
  pointer-events: none !important;
  width: 16px !important; /* size-4 */
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------------------
   S342-2: BUTTON SIZE VARIANTS
   default: h-10 px-6 py-2 = 40px, 24px horizontal, 8px vertical
   sm: h-9 px-4 = 36px, 16px horizontal
   lg: h-12 px-8 text-base = 48px, 32px horizontal, 16px font
   xl: h-14 px-10 text-base = 56px, 40px horizontal
   icon: h-10 w-10 = 40px square
   --------------------------------------------------------------------------- */

/* Default size: h-10 px-6 py-2 */
.btn,
.button,
.wp-block-button__link,
input[type="submit"],
input[type="button"] {
  height: 40px !important; /* h-10 */
  padding: 8px 24px !important; /* py-2 px-6 */
}

/* Small: h-9 px-4 */
.btn-sm,
.button-sm,
.wp-block-button.is-style-small .wp-block-button__link {
  height: 36px !important; /* h-9 */
  padding: 0 16px !important; /* px-4 */
}

/* Large: h-12 px-8 text-base */
.btn-lg,
.button-lg,
.wp-block-button.is-style-large .wp-block-button__link {
  height: 48px !important; /* h-12 */
  padding: 0 32px !important; /* px-8 */
  font-size: 1rem !important; /* text-base */
}

/* Extra large: h-14 px-10 text-base */
.btn-xl,
.button-xl,
.wp-block-button.is-style-xl .wp-block-button__link {
  height: 56px !important; /* h-14 */
  padding: 0 40px !important; /* px-10 */
  font-size: 1rem !important; /* text-base */
}

/* Icon button: h-10 w-10 */
.btn-icon,
.button-icon,
button[aria-label]:not([aria-label=""]),
.wp-block-button.is-style-icon .wp-block-button__link {
  height: 40px !important; /* h-10 */
  width: 40px !important; /* w-10 */
  padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   S342-3: BUTTON COLOR VARIANTS
   All use rounded = 0.25rem = 4px (var(--radius))
   --------------------------------------------------------------------------- */

/* DEFAULT: bg-primary text-primary-foreground hover:bg-primary/90 */
/* EXCLUDE: mini-cart button, search button, nav buttons, gift voucher buttons */
.btn-default,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link,
button:not([class*="btn-"]):not(.wp-block-button__link):not(.wc-block-mini-cart__button):not(.wp-block-search__button):not(.wp-block-navigation__submenu-icon):not(.mk-gv-order-btn):not(.mk-voucher-order-btn):not(.mk-voucher-btn):not(.mk-voucher-buy-btn):not(.mk-gv-amount-btn) {
  background: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  border: none !important;
  border-radius: 4px !important; /* rounded = 0.25rem */
}

.btn-default:hover,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link:hover {
  background: hsl(160 30% 28% / 0.9) !important; /* hover:bg-primary/90 */
}

/* CATALOG: bg-primary + shadow-elegant hover:bg-forest-light hover:shadow-hover */
.btn-catalog,
.mk-btn-catalog,
.wp-block-button.is-style-catalog .wp-block-button__link {
  background: hsl(160 30% 28%) !important; /* bg-primary */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  font-weight: 500 !important; /* font-medium */
  letter-spacing: 0.025em !important; /* tracking-wide */
  border-radius: 4px !important; /* rounded */
  box-shadow: var(--shadow-elegant) !important; /* shadow-elegant */
  border: none !important;
}

.btn-catalog:hover,
.mk-btn-catalog:hover,
.wp-block-button.is-style-catalog .wp-block-button__link:hover {
  background: hsl(160 25% 38%) !important; /* hover:bg-forest-light */
  box-shadow: var(--shadow-hover) !important; /* hover:shadow-hover */
}

/* GOLD: bg-gold text-forest-dark hover:bg-gold-light shadow-elegant */
.btn-gold,
.mk-btn-gold,
.wp-block-button.is-style-gold .wp-block-button__link {
  background: hsl(42 55% 58%) !important; /* bg-gold */
  color: hsl(160 35% 20%) !important; /* text-forest-dark */
  font-weight: 500 !important; /* font-medium */
  box-shadow: var(--shadow-elegant) !important; /* shadow-elegant */
  border-radius: 4px !important; /* rounded */
  border: none !important;
}

.btn-gold:hover,
.mk-btn-gold:hover,
.wp-block-button.is-style-gold .wp-block-button__link:hover {
  background: hsl(42 45% 75%) !important; /* hover:bg-gold-light */
}

/* ELEGANT: border border-foreground/20 hover:border-primary hover:text-primary */
.btn-elegant,
.mk-btn-elegant,
.wp-block-button.is-style-elegant .wp-block-button__link {
  background: transparent !important; /* bg-transparent */
  color: hsl(var(--foreground)) !important; /* text-foreground */
  border: 1px solid hsl(var(--foreground) / 0.2) !important; /* border-foreground/20 */
  font-weight: 400 !important; /* font-normal */
  letter-spacing: 0.025em !important; /* tracking-wide */
  border-radius: 4px !important; /* rounded */
}

.btn-elegant:hover,
.mk-btn-elegant:hover,
.wp-block-button.is-style-elegant .wp-block-button__link:hover {
  border-color: hsl(160 30% 28%) !important; /* hover:border-primary */
  color: hsl(160 30% 28%) !important; /* hover:text-primary */
}

/* OUTLINE: border border-primary text-primary hover:bg-primary hover:text-primary-foreground */
.btn-outline,
.mk-btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 1px solid hsl(160 30% 28%) !important; /* border-primary */
  color: hsl(160 30% 28%) !important; /* text-primary */
  border-radius: 4px !important; /* rounded */
}

.btn-outline:hover,
.mk-btn-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: hsl(160 30% 28%) !important; /* hover:bg-primary */
  color: hsl(40 30% 96%) !important; /* hover:text-primary-foreground */
}

/* GHOST: hover:bg-accent hover:text-accent-foreground */
.btn-ghost,
.mk-btn-ghost,
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent !important;
  border: none !important;
  color: hsl(var(--foreground)) !important;
  border-radius: 4px !important; /* rounded */
}

.btn-ghost:hover,
.mk-btn-ghost:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: hsl(var(--accent)) !important; /* hover:bg-accent */
  color: hsl(var(--accent-foreground)) !important; /* hover:text-accent-foreground */
}

/* SECONDARY: bg-secondary text-secondary-foreground hover:bg-secondary/80 */
.btn-secondary,
.mk-btn-secondary,
.wp-block-button.is-style-secondary .wp-block-button__link {
  background: hsl(36 25% 88%) !important; /* bg-secondary */
  color: hsl(160 30% 18%) !important; /* text-secondary-foreground */
  border: none !important;
  border-radius: 4px !important; /* rounded */
}

.btn-secondary:hover,
.mk-btn-secondary:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background: hsl(36 25% 88% / 0.8) !important; /* hover:bg-secondary/80 */
}

/* DESTRUCTIVE: bg-destructive text-destructive-foreground */
.btn-destructive,
.mk-btn-destructive {
  background: hsl(0 65% 50%) !important; /* bg-destructive */
  color: hsl(0 0% 100%) !important; /* text-destructive-foreground */
  border: none !important;
  border-radius: 4px !important; /* rounded */
}

.btn-destructive:hover,
.mk-btn-destructive:hover {
  background: hsl(0 65% 50% / 0.9) !important; /* hover:bg-destructive/90 */
}

/* LINK: text-primary underline-offset-4 hover:underline */
.btn-link,
.mk-btn-link,
.wp-block-button.is-style-link .wp-block-button__link {
  background: transparent !important;
  border: none !important;
  color: hsl(160 30% 28%) !important; /* text-primary */
  text-underline-offset: 4px !important; /* underline-offset-4 */
  padding: 0 !important;
  height: auto !important;
}

.btn-link:hover,
.mk-btn-link:hover,
.wp-block-button.is-style-link .wp-block-button__link:hover {
  text-decoration: underline !important; /* hover:underline */
}

/* ==========================================================================
   END SECTION S342: EXACT BUTTON VARIANTS FROM REACT
   ========================================================================== */

/* ==========================================================================
   S351: HERO 1:1 PARITY
   Source: docs/REACT-DESIGN-MAP/01-HOMEPAGE-HERO.md
   React: src/components/home/HeroSection.tsx

   This section OVERRIDES existing hero styles (Section 12 + Section 50) to
   achieve exact 1:1 React parity. All values extracted from React source.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   S351.1: HERO SECTION CONTAINER
   React: <section className="relative h-[80vh] lg:h-[90vh] w-full overflow-hidden">
   --------------------------------------------------------------------------- */
.mk-hero {
  position: relative !important;
  height: 80vh !important;               /* React: h-[80vh] */
  min-height: 80vh !important;           /* Override Section 12 min-height */
  width: 100% !important;                /* React: w-full */
  overflow: hidden !important;           /* React: overflow-hidden */
  display: block !important;             /* Override flex from Section 12 */
}

@media (min-width: 1024px) {
  .mk-hero {
    height: 90vh !important;             /* React: lg:h-[90vh] */
    min-height: 90vh !important;
  }
}

/* ---------------------------------------------------------------------------
   S351.2: BACKGROUND IMAGE
   React: <img className="w-full h-full object-cover" />
   WordPress: .wp-block-cover__image-background
   --------------------------------------------------------------------------- */
.mk-hero .wp-block-cover__image-background,
.mk-hero > img,
.mk-hero .mk-hero__bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  inset: 0 !important;
}

/* ---------------------------------------------------------------------------
   S351.3: HORIZONTAL GRADIENT (Left-to-Right)
   React: bg-gradient-to-r from-foreground/80 via-foreground/50 to-transparent
   Color: --foreground = HSL 160 30% 18% (#203D31)
   --------------------------------------------------------------------------- */
.mk-hero .wp-block-cover__background,
.mk-hero__overlay--right {
  background: linear-gradient(
    to right,
    hsl(160 30% 18% / 0.8),              /* from-foreground/80 */
    hsl(160 30% 18% / 0.5),              /* via-foreground/50 */
    transparent                           /* to-transparent */
  ) !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* ---------------------------------------------------------------------------
   S351.4: VERTICAL GRADIENT (Bottom-to-Top)
   React: bg-gradient-to-t from-foreground/60 via-transparent to-foreground/20
   Uses ::after pseudo-element on .mk-hero
   --------------------------------------------------------------------------- */
.mk-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    hsl(160 30% 18% / 0.6),              /* from-foreground/60 (bottom) */
    transparent,                          /* via-transparent (middle) */
    hsl(160 30% 18% / 0.2)               /* to-foreground/20 (top) */
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ---------------------------------------------------------------------------
   S351.5: CONTENT CONTAINER
   React: <div className="relative container mx-auto px-4 h-full flex items-center">
   Container max-width: 1400px (from tailwind.config.ts)
   --------------------------------------------------------------------------- */
.mk-hero .wp-block-cover__inner-container {
  position: relative !important;
  z-index: 2 !important;                 /* Above both gradient layers */
  max-width: 1400px !important;          /* container.screens.2xl */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;         /* px-4 = 16px */
  padding-right: 1rem !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;        /* React: items-center */
  width: 100% !important;
}

/* ---------------------------------------------------------------------------
   S351.6: CONTENT WRAPPER
   React: <div className="max-w-2xl">
   max-w-2xl = 42rem = 672px
   --------------------------------------------------------------------------- */
.mk-hero__content,
.mk-hero .wp-block-cover__inner-container > .wp-block-group:first-child {
  max-width: 42rem !important;           /* max-w-2xl = 672px */
  display: block !important;             /* Stack children vertically */
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------------
   S351.7: H1 HEADING
   React: font-display text-4xl md:text-5xl lg:text-6xl font-semibold text-white
          leading-tight mb-6 animate-fade-in animationDelay: 0.1s
   --------------------------------------------------------------------------- */
.mk-hero__title,
.mk-hero .wp-block-cover__inner-container h1 {
  font-family: 'Playfair Display', Georgia, serif !important; /* font-display */
  font-size: 2.25rem !important;         /* text-4xl = 36px */
  line-height: 2.5rem !important;        /* text-4xl line-height */
  font-weight: 600 !important;           /* font-semibold */
  color: #FFFFFF !important;             /* text-white */
  letter-spacing: -0.025em !important;   /* tracking-tight (implicit in display font) */
  margin-bottom: 1.5rem !important;      /* mb-6 = 24px */
  margin-top: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;            /* Content constrained by parent */

  /* Animation */
  animation: mk-fade-in 0.5s ease-out forwards !important;
  animation-delay: 0.1s !important;
  opacity: 0;                            /* Start invisible for animation */
}

/* md: 768px+ — text-5xl = 48px */
@media (min-width: 768px) {
  .mk-hero__title,
  .mk-hero .wp-block-cover__inner-container h1 {
    font-size: 3rem !important;          /* text-5xl = 48px */
    line-height: 1 !important;           /* text-5xl line-height */
  }
}

/* lg: 1024px+ — text-6xl = 60px */
@media (min-width: 1024px) {
  .mk-hero__title,
  .mk-hero .wp-block-cover__inner-container h1 {
    font-size: 3.75rem !important;       /* text-6xl = 60px */
    line-height: 1 !important;           /* text-6xl line-height */
  }
}

/* ---------------------------------------------------------------------------
   S351.8: BUTTONS CONTAINER
   React: <div className="flex flex-wrap gap-4 animate-fade-in"
          style={{ animationDelay: '0.4s' }}>
   --------------------------------------------------------------------------- */
.mk-hero__actions,
.mk-hero .wp-block-buttons {
  display: flex !important;
  flex-wrap: wrap !important;            /* flex-wrap */
  gap: 1rem !important;                  /* gap-4 = 16px */
  margin-top: 0 !important;              /* No margin, spacing via mb-6 on h1 */
  padding: 0 !important;

  /* Animation */
  animation: mk-fade-in 0.5s ease-out forwards !important;
  animation-delay: 0.4s !important;
  opacity: 0;                            /* Start invisible for animation */
}

/* ---------------------------------------------------------------------------
   S351.9: CATALOG BUTTON (Hero-specific large variant)
   React: <Button variant="catalog" size="lg" className="text-lg px-8 py-6">

   Base from button.tsx:
   - bg-primary text-primary-foreground
   - font-medium tracking-wide rounded shadow-elegant hover:shadow-hover
   - hover:bg-forest-light

   Size lg: h-12 px-8 text-base (but overridden by className="text-lg px-8 py-6")
   --------------------------------------------------------------------------- */
.mk-hero .wp-block-button.is-style-catalog .wp-block-button__link,
.mk-hero .mk-btn-catalog,
.mk-hero__actions .wp-block-button:first-child .wp-block-button__link {
  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  height: auto !important;               /* py-6 overrides h-12 */
  padding: 1.5rem 2rem !important;       /* py-6 px-8 = 24px 32px */
  white-space: nowrap !important;

  /* Typography */
  font-size: 1.125rem !important;        /* text-lg = 18px */
  line-height: 1.75rem !important;       /* text-lg line-height = 28px */
  font-weight: 500 !important;           /* font-medium */
  letter-spacing: 0.025em !important;    /* tracking-wide */
  text-decoration: none !important;

  /* Colors */
  background-color: hsl(160 30% 28%) !important;  /* bg-primary (forest green) */
  color: hsl(40 30% 96%) !important;              /* text-primary-foreground (cream-light) */

  /* Border & Shape */
  border: none !important;
  border-radius: 0.25rem !important;     /* rounded = var(--radius) */

  /* Shadow */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important; /* shadow-elegant */

  /* Transition */
  transition: all 300ms ease !important;
}

.mk-hero .wp-block-button.is-style-catalog .wp-block-button__link:hover,
.mk-hero .mk-btn-catalog:hover,
.mk-hero__actions .wp-block-button:first-child .wp-block-button__link:hover {
  background-color: hsl(160 25% 38%) !important;  /* hover:bg-forest-light */
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important; /* shadow-hover */
}

.mk-hero .wp-block-button.is-style-catalog .wp-block-button__link:focus-visible,
.mk-hero .mk-btn-catalog:focus-visible,
.mk-hero__actions .wp-block-button:first-child .wp-block-button__link:focus-visible {
  outline: 2px solid hsl(160 30% 28%) !important;
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------------
   S351.10: GOLD BUTTON (Hero-specific large variant)
   React: <Button variant="gold" size="lg" className="text-lg px-8 py-6">

   Base from button.tsx:
   - bg-gold text-forest-dark
   - font-medium shadow-elegant rounded
   - hover:bg-gold-light
   --------------------------------------------------------------------------- */
.mk-hero .wp-block-button.is-style-gold .wp-block-button__link,
.mk-hero .mk-btn-gold,
.mk-hero__actions .wp-block-button:nth-child(2) .wp-block-button__link {
  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  height: auto !important;
  padding: 1.5rem 2rem !important;       /* py-6 px-8 = 24px 32px */
  white-space: nowrap !important;

  /* Typography */
  font-size: 1.125rem !important;        /* text-lg = 18px */
  line-height: 1.75rem !important;       /* text-lg line-height = 28px */
  font-weight: 500 !important;           /* font-medium */
  letter-spacing: 0 !important;          /* No tracking-wide on gold variant */
  text-decoration: none !important;

  /* Colors */
  background-color: hsl(42 55% 58%) !important;   /* bg-gold (#C4A255) */
  color: hsl(160 35% 20%) !important;             /* text-forest-dark */

  /* Border & Shape */
  border: none !important;
  border-radius: 0.25rem !important;     /* rounded = var(--radius) */

  /* Shadow */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important; /* shadow-elegant */

  /* Transition */
  transition: all 300ms ease !important;
}

.mk-hero .wp-block-button.is-style-gold .wp-block-button__link:hover,
.mk-hero .mk-btn-gold:hover,
.mk-hero__actions .wp-block-button:nth-child(2) .wp-block-button__link:hover {
  background-color: hsl(42 45% 75%) !important;   /* hover:bg-gold-light (#D4C48C) */
  /* Shadow stays shadow-elegant on gold variant (no hover change) */
}

.mk-hero .wp-block-button.is-style-gold .wp-block-button__link:focus-visible,
.mk-hero .mk-btn-gold:focus-visible,
.mk-hero__actions .wp-block-button:nth-child(2) .wp-block-button__link:focus-visible {
  outline: 2px solid hsl(42 55% 58%) !important;  /* ring-gold */
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------------
   S351.11: FADE-IN ANIMATION KEYFRAME
   React (tailwind.config.ts):
   - from: opacity 0, translateY 10px
   - to: opacity 1, translateY 0
   - duration: 0.5s, ease-out
   --------------------------------------------------------------------------- */
@keyframes mk-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------------
   S351.12: REDUCED MOTION ACCESSIBILITY
   Disable animations for users with vestibular disorders
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mk-hero__title,
  .mk-hero .wp-block-cover__inner-container h1,
  .mk-hero__actions,
  .mk-hero .wp-block-buttons {
    animation: none !important;
    opacity: 1 !important;
  }

  .mk-hero .wp-block-button.is-style-catalog .wp-block-button__link,
  .mk-hero .wp-block-button.is-style-gold .wp-block-button__link,
  .mk-hero .mk-btn-catalog,
  .mk-hero .mk-btn-gold {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   S351.13: WORDPRESS COVER BLOCK OVERRIDES
   Ensure WP cover block doesn't interfere with our hero layout
   --------------------------------------------------------------------------- */
.mk-hero.wp-block-cover {
  /* Remove any WP default padding */
  padding: 0 !important;

  /* Ensure full dimensions */
  min-height: 80vh !important;
}

@media (min-width: 1024px) {
  .mk-hero.wp-block-cover {
    min-height: 90vh !important;
  }
}

/* Remove WP's default content alignment that conflicts with our layout */
.mk-hero.wp-block-cover.has-custom-content-position {
  align-items: center !important;        /* Override WP alignment */
}

/* Ensure the background span doesn't have unwanted opacity */
.mk-hero .wp-block-cover__background {
  background-color: transparent !important; /* We use gradient, not solid color */
}

/* ==========================================================================
   END SECTION S351: HERO 1:1 PARITY
   ========================================================================== */

/* ==========================================================================
   S352: FOOTER 1:1 PARITY

   React Source: src/components/layout/Footer.tsx
   Spec: docs/REACT-DESIGN-MAP/03-FOOTER.md

   Key React classes:
   - Container: bg-primary text-primary-foreground py-16 px-4 max-w-1400px
   - Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 (40px)
   - Logo: h-16 brightness-0 invert mb-6
   - Description: text-sm text-primary-foreground/80 leading-relaxed
   - Social: flex gap-4 mt-6, icons w-5 h-5 (20px), hover:text-gold
   - Headings: font-display text-lg font-semibold mb-6 (18px/600/24px)
   - Links: text-sm text-primary-foreground/80 hover:text-gold (14px)
   - Contact items: flex items-center gap-3 (12px)
   - Link lists: space-y-3 (12px) or space-y-4 (16px for contacts)
   - Voucher link: font-medium text-gold underline underline-offset-4
   - Copyright: border-t border-primary-foreground/20 mt-12 pt-8 text-center
   - Copyright text: text-sm text-primary-foreground/60
   ========================================================================== */

/* --- Footer Container --- */
.mk-footer,
footer.wp-block-group.mk-footer {
  background-color: hsl(160 30% 28%) !important; /* bg-primary exact */
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  padding: 4rem 1rem !important; /* py-16 px-4 */
}

.mk-footer > .wp-block-group__inner-container,
.mk-footer > .wp-block-columns {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* --- Grid Layout (5 columns) --- */
.mk-footer .wp-block-columns,
.mk-footer__columns {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 2.5rem !important; /* gap-10 = 40px */
  flex-wrap: nowrap !important;
}

@media (min-width: 768px) {
  .mk-footer .wp-block-columns,
  .mk-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .mk-footer .wp-block-columns,
  .mk-footer__columns {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Reset column flex behavior for grid */
.mk-footer .wp-block-column {
  flex-basis: auto !important;
  flex-grow: 0 !important;
  width: auto !important;
}

/* --- Column 1: Logo & Description --- */

/* Logo: h-16 (64px), mb-6 (24px), brightness-0 invert */
.mk-footer__logo,
.mk-footer__brand .wp-block-site-logo {
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
}

.mk-footer__logo img,
.mk-footer__brand .wp-block-site-logo img,
.mk-footer .is-style-inverted img {
  height: 4rem !important; /* h-16 = 64px */
  width: auto !important;
  max-height: 4rem !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important; /* brightness-0 invert */
}

/* Description: text-sm text-primary-foreground/80 leading-relaxed */
.mk-footer__brand > p,
.mk-footer__desc {
  font-size: 0.875rem !important; /* text-sm = 14px */
  line-height: 1.625 !important; /* leading-relaxed */
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
  margin-top: 0 !important;
}

/* Social Icons: flex gap-4 mt-6 */
.mk-footer__social,
.mk-footer__brand .wp-block-social-links {
  display: flex !important;
  gap: 1rem !important; /* gap-4 = 16px */
  margin-top: 1.5rem !important; /* mt-6 = 24px */
  padding: 0 !important;
  list-style: none !important;
}

/* Social icon containers */
.mk-footer__social .wp-social-link,
.mk-footer__brand .wp-block-social-links .wp-social-link {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* Social links: inherit color, hover:text-gold */
.mk-footer__social a,
.mk-footer__social .wp-social-link a,
.mk-footer__brand .wp-block-social-links .wp-social-link a {
  color: hsl(40 30% 96%) !important; /* text-primary-foreground */
  padding: 0 !important;
  transition: color 150ms ease-in-out !important; /* Tailwind default transition */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mk-footer__social a:hover,
.mk-footer__social .wp-social-link a:hover,
.mk-footer__brand .wp-block-social-links .wp-social-link a:hover {
  color: hsl(42 55% 58%) !important; /* hover:text-gold */
}

/* Social icons: w-5 h-5 (20px) */
.mk-footer__social svg,
.mk-footer__social .wp-social-link svg,
.mk-footer__brand .wp-block-social-links .wp-social-link svg {
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
  min-width: 1.25rem !important;
  max-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-height: 1.25rem !important;
  fill: currentColor !important;
}

/* --- Column Headings (Columns 2-5) --- */
.mk-footer h4,
.mk-footer .wp-block-heading,
.mk-footer__heading {
  font-family: 'Playfair Display', Georgia, serif !important; /* font-display */
  font-size: 1.125rem !important; /* text-lg = 18px */
  line-height: 1.75rem !important; /* text-lg line-height = 28px */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
  margin-top: 0 !important;
  color: hsl(40 30% 96%) !important; /* inherit primary-foreground */
}

/* --- Column 2: Kontaktai (Contact Info) --- */

/* Contact list: space-y-4 (16px) */
.mk-footer__contacts > .wp-block-group,
.mk-footer__contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* space-y-4 = 16px */
}

/* Contact items: flex items-center gap-3 */
.mk-footer__contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important; /* gap-3 = 12px */
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
  text-decoration: none !important;
  transition: color 150ms ease-in-out !important;
}

/* Address item: items-start (for multi-line) */
.mk-footer__contact-item[style*="flex-start"],
.mk-footer__contacts .wp-block-group:last-child .mk-footer__contact-item {
  align-items: flex-start !important;
}

.mk-footer__contact-item:hover {
  color: hsl(42 55% 58%) !important; /* hover:text-gold */
}

/* Contact icon wrapper */
.mk-footer__contact-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: inherit !important;
}

/* Contact icons: w-4 h-4 (16px) */
.mk-footer__contact-item svg,
.mk-footer__contact-icon svg {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  min-width: 1rem !important;
  max-width: 1rem !important;
  flex-shrink: 0 !important;
}

/* Address icon: mt-0.5 for optical alignment */
.mk-footer__contacts .wp-block-group:last-child .mk-footer__contact-icon {
  margin-top: 0.125rem !important; /* mt-0.5 = 2px */
}

/* Contact paragraph text */
.mk-footer__contact-item p,
.mk-footer__contacts p {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
  margin: 0 !important;
  line-height: 1.25rem !important; /* text-sm line-height = 20px */
}

/* Contact links */
.mk-footer__contact-item a,
.mk-footer__contacts a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 150ms ease-in-out !important;
}

.mk-footer__contact-item a:hover,
.mk-footer__contacts a:hover {
  color: hsl(42 55% 58%) !important; /* hover:text-gold */
}

/* --- Columns 3, 4, 5: Link Lists --- */

/* Link list container: space-y-3 (12px) */
.mk-footer__links > .wp-block-group,
.mk-footer__voucher > .wp-block-group,
.mk-footer__info > .wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important; /* space-y-3 = 12px */
}

/* Links: block text-sm text-primary-foreground/80 hover:text-gold */
.mk-footer__links p,
.mk-footer__info p {
  font-size: 0.875rem !important; /* text-sm = 14px */
  line-height: 1.25rem !important; /* text-sm line-height = 20px */
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
  margin: 0 !important;
}

.mk-footer__links a,
.mk-footer__info a,
.mk-footer__link {
  display: block !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
  text-decoration: none !important;
  transition: color 150ms ease-in-out !important;
}

.mk-footer__links a:hover,
.mk-footer__info a:hover,
.mk-footer__link:hover {
  color: hsl(42 55% 58%) !important; /* hover:text-gold */
}

/* --- Column 4: Dovanų kuponas (Gift Voucher) --- */

/* Voucher description: leading-relaxed */
.mk-footer__voucher p:first-of-type {
  font-size: 0.875rem !important; /* text-sm = 14px */
  line-height: 1.625 !important; /* leading-relaxed */
  color: hsl(40 30% 96% / 0.8) !important; /* text-primary-foreground/80 */
}

/* Voucher CTA link: inline-block font-medium text-gold underline underline-offset-4 */
.mk-footer__voucher a,
.mk-footer__voucher p:last-of-type a {
  display: inline-block !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  color: hsl(42 55% 58%) !important; /* text-gold */
  text-decoration: underline !important;
  text-underline-offset: 4px !important; /* underline-offset-4 */
  transition: color 150ms ease-in-out !important;
}

.mk-footer__voucher a:hover,
.mk-footer__voucher p:last-of-type a:hover {
  color: hsl(42 55% 58% / 0.8) !important; /* hover:text-gold/80 */
}

/* --- Copyright Bar (Bottom Section) --- */

/* Container: border-t border-primary-foreground/20 mt-12 pt-8 text-center */
.mk-footer__bottom {
  border-top: 1px solid hsl(40 30% 96% / 0.2) !important; /* border-primary-foreground/20 */
  margin-top: 3rem !important; /* mt-12 = 48px */
  padding-top: 2rem !important; /* pt-8 = 32px */
  padding-bottom: 1rem !important;
  text-align: center !important;
}

/* Hide the separator since we use border-top */
.mk-footer__bottom > .wp-block-separator,
.mk-footer__bottom hr {
  display: none !important;
}

/* Copyright text: text-sm text-primary-foreground/60 */
.mk-footer__bottom p {
  font-size: 0.875rem !important; /* text-sm = 14px */
  line-height: 1.25rem !important; /* text-sm line-height = 20px */
  color: hsl(40 30% 96% / 0.6) !important; /* text-primary-foreground/60 */
  margin: 0 !important;
}

/* --- Global Footer Link Overrides --- */

/* All footer links inherit gold hover */
.mk-footer a:not(.wp-social-link a):hover {
  color: hsl(42 55% 58%) !important; /* hover:text-gold */
}

/* Reset any WordPress block styling that interferes */
.mk-footer .wp-block-group {
  margin: 0 !important;
}

/* Ensure headings don't have extra margin from block */
.mk-footer .wp-block-heading {
  margin-top: 0 !important;
}

/* --- Mobile Adjustments --- */
@media (max-width: 767px) {
  .mk-footer,
  footer.wp-block-group.mk-footer {
    padding: 3rem 1rem !important; /* Slightly reduced on mobile */
  }

  .mk-footer__bottom {
    margin-top: 2.5rem !important; /* Slightly reduced on mobile */
  }
}

/* ==========================================================================
   END SECTION S352: FOOTER 1:1 PARITY
   ========================================================================== */


/* ==========================================================================
   SECTION S354: FORMS 1:1 PARITY - CRITICAL CORRECTIONS (2026-03-31)
   ==========================================================================

   Reference: docs/REACT-DESIGN-MAP/06-FORM-INPUTS.md
   React sources:
   - src/components/ui/input.tsx
   - src/components/ui/textarea.tsx
   - src/components/ui/select.tsx
   - src/components/ui/checkbox.tsx
   - src/components/ui/label.tsx

   CUSTOM TAILWIND CONFIG (tailwind.config.ts lines 78-82):
   - --radius: 0.25rem (4px)
   - rounded-lg = var(--radius) = 0.25rem (4px)
   - rounded-md = calc(var(--radius) - 2px) = 0.125rem (2px)
   - rounded-sm = calc(var(--radius) - 4px) = 0px (EFFECTIVELY SQUARE!)

   CRITICAL FIX: Previous S335 used rounded-sm = 0.125rem (2px) for checkbox.
   CORRECT VALUE: rounded-sm = 0px in this project's custom tailwind config.

   React Exact Values:
   - Input: h-10 (40px), rounded-md (2px), px-3 py-2 (12px 8px)
   - Textarea: min-h-[80px], rounded-md (2px), px-3 py-2 (12px 8px), text-sm (14px)
   - Checkbox: h-4 w-4 (16px), rounded-sm (0px!), border-primary
   - Select: h-10 (40px), rounded-md (2px), items-center justify-between
   - Label: text-sm (14px), font-medium (500), leading-none
   - Focus ring: ring-2 ring-ring ring-offset-2 = double shadow (2px offset + 2px ring)

   ========================================================================== */

/* ---------------------------------------------------------------------
   S354-1: CHECKBOX BORDER-RADIUS CRITICAL FIX
   React: rounded-sm = calc(var(--radius) - 4px) = calc(0.25rem - 4px) = 0px
   Previous: 0.125rem (2px) - WRONG
   Correct: 0px (essentially square with very slight rounding)
   --------------------------------------------------------------------- */
input[type="checkbox"],
.wpcf7 input[type="checkbox"],
.woocommerce input[type="checkbox"],
.woocommerce-form__input-checkbox,
form input[type="checkbox"],
.mk-checkbox {
  border-radius: 0 !important; /* rounded-sm = 0px in this project's tailwind config */
}

/* ---------------------------------------------------------------------
   S354-2: INPUT HEIGHT ENFORCEMENT
   React: h-10 = 2.5rem (40px) EXACTLY
   Ensure no override from WordPress/WooCommerce defaults
   --------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.wpcf7 select,
.woocommerce input.input-text,
.woocommerce select,
.woocommerce-Input--text,
.woocommerce-Input--email,
.woocommerce-Input--password,
form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
form select {
  height: 2.5rem !important; /* h-10 = 40px EXACTLY */
  min-height: 2.5rem !important;
  max-height: 2.5rem !important;
}

/* ---------------------------------------------------------------------
   S354-3: INPUT BORDER-RADIUS ENFORCEMENT
   React: rounded-md = calc(var(--radius) - 2px) = 0.125rem (2px)
   NOT 0.375rem (6px) default Tailwind rounded-md
   --------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
textarea,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpcf7 select,
.wpcf7 textarea,
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea,
form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
form select,
form textarea {
  border-radius: 0.125rem !important; /* 2px - rounded-md in this project */
}

/* ---------------------------------------------------------------------
   S354-4: INPUT PADDING EXACT VALUES
   React: px-3 py-2 = padding: 0.5rem 0.75rem (8px 12px)
   --------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.wpcf7 select,
.woocommerce input.input-text,
.woocommerce select,
form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
form select {
  padding-top: 0.5rem !important;    /* py-2 = 8px */
  padding-bottom: 0.5rem !important; /* py-2 = 8px */
  padding-left: 0.75rem !important;  /* px-3 = 12px */
  padding-right: 0.75rem !important; /* px-3 = 12px */
}

/* Select needs extra right padding for chevron */
select,
.wpcf7 select,
.woocommerce select,
form select {
  padding-right: 2.5rem !important; /* Space for chevron icon */
}

/* ---------------------------------------------------------------------
   S354-5: TEXTAREA EXACT VALUES
   React: min-h-[80px], text-sm (14px), NOT text-base
   Override global input font-size
   --------------------------------------------------------------------- */
textarea,
.wpcf7 textarea,
.woocommerce textarea,
form textarea {
  height: auto !important; /* Override h-10 from inputs */
  min-height: 80px !important; /* min-h-[80px] */
  max-height: none !important;
  font-size: 0.875rem !important; /* text-sm = 14px (textarea ALWAYS uses text-sm) */
  line-height: 1.25rem !important; /* 20px */
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  resize: vertical !important;
}

/* ---------------------------------------------------------------------
   S354-6: CHECKBOX & RADIO EXACT SIZE
   React: h-4 w-4 = 1rem (16px) EXACTLY
   --------------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"],
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"],
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
.woocommerce-form__input-checkbox,
form input[type="checkbox"],
form input[type="radio"] {
  width: 1rem !important;  /* 16px */
  height: 1rem !important; /* 16px */
  min-width: 1rem !important;
  min-height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex-shrink: 0 !important;
  border: 1px solid hsl(var(--primary)) !important; /* border-primary */
  background-color: hsl(var(--background)) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Checkbox: rounded-sm = 0px */
input[type="checkbox"],
.wpcf7 input[type="checkbox"],
.woocommerce input[type="checkbox"],
.woocommerce-form__input-checkbox,
form input[type="checkbox"] {
  border-radius: 0 !important; /* rounded-sm = 0px */
}

/* Radio: always round */
input[type="radio"],
.wpcf7 input[type="radio"],
.woocommerce input[type="radio"],
form input[type="radio"] {
  border-radius: 50% !important;
}

/* ---------------------------------------------------------------------
   S354-7: CHECKBOX/RADIO CHECKED STATE
   React: data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground
   --------------------------------------------------------------------- */
input[type="checkbox"]:checked,
input[type="radio"]:checked,
.wpcf7 input[type="checkbox"]:checked,
.wpcf7 input[type="radio"]:checked,
.woocommerce input[type="checkbox"]:checked,
.woocommerce input[type="radio"]:checked,
form input[type="checkbox"]:checked,
form input[type="radio"]:checked {
  background-color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* Checkbox checkmark using CSS */
input[type="checkbox"]:checked::before,
.wpcf7 input[type="checkbox"]:checked::before,
.woocommerce input[type="checkbox"]:checked::before,
form input[type="checkbox"]:checked::before {
  content: "" !important;
  display: block !important;
  width: 0.625rem !important;  /* ~10px */
  height: 0.625rem !important; /* ~10px */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F1EA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Radio dot */
input[type="radio"]:checked::before,
.wpcf7 input[type="radio"]:checked::before,
.woocommerce input[type="radio"]:checked::before,
form input[type="radio"]:checked::before {
  content: "" !important;
  display: block !important;
  width: 0.5rem !important;  /* 8px */
  height: 0.5rem !important; /* 8px */
  background-color: hsl(var(--primary-foreground)) !important;
  border-radius: 50% !important;
}

/* ---------------------------------------------------------------------
   S354-8: FOCUS RING - DOUBLE SHADOW (OFFSET + RING)
   React: focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
   Translation: box-shadow: 0 0 0 2px [background], 0 0 0 4px [ring]
   --------------------------------------------------------------------- */
input[type="text"]:focus,
input[type="text"]:focus-visible,
input[type="email"]:focus,
input[type="email"]:focus-visible,
input[type="url"]:focus,
input[type="url"]:focus-visible,
input[type="password"]:focus,
input[type="password"]:focus-visible,
input[type="search"]:focus,
input[type="search"]:focus-visible,
input[type="number"]:focus,
input[type="number"]:focus-visible,
input[type="tel"]:focus,
input[type="tel"]:focus-visible,
input[type="date"]:focus,
input[type="date"]:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
.wpcf7 input:focus,
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus,
.wpcf7 select:focus-visible,
.woocommerce input:focus,
.woocommerce input:focus-visible,
.woocommerce textarea:focus,
.woocommerce textarea:focus-visible,
.woocommerce select:focus,
.woocommerce select:focus-visible {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),  /* ring-offset-2 */
    0 0 0 4px hsl(var(--ring)) !important; /* ring-2 */
}

/* Checkbox/Radio focus ring */
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus,
input[type="radio"]:focus-visible,
.wpcf7 input[type="checkbox"]:focus,
.wpcf7 input[type="checkbox"]:focus-visible,
.wpcf7 input[type="radio"]:focus,
.wpcf7 input[type="radio"]:focus-visible,
.woocommerce input[type="checkbox"]:focus,
.woocommerce input[type="checkbox"]:focus-visible,
.woocommerce input[type="radio"]:focus,
.woocommerce input[type="radio"]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),  /* ring-offset-2 */
    0 0 0 4px hsl(var(--ring)) !important; /* ring-2 */
}

/* ---------------------------------------------------------------------
   S354-9: INPUT BORDER COLOR
   React: border border-input = 1px solid hsl(var(--input))
   --input: 36 20% 85% (#D9D3C7)
   --------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
textarea,
select,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpcf7 textarea,
.wpcf7 select,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
form textarea,
form select {
  border: 1px solid hsl(var(--input)) !important; /* hsl(36 20% 85%) = #D9D3C7 */
}

/* ---------------------------------------------------------------------
   S354-10: INPUT BACKGROUND COLOR
   React: bg-background = hsl(var(--background))
   --background: 36 33% 94% (#EDE8DC)
   --------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
textarea,
select,
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpcf7 textarea,
.wpcf7 select,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
form textarea,
form select {
  background-color: hsl(var(--background)) !important; /* #EDE8DC */
}

/* ---------------------------------------------------------------------
   S354-11: PLACEHOLDER COLOR
   React: placeholder:text-muted-foreground
   --muted-foreground: 160 15% 40% (#577066)
   --------------------------------------------------------------------- */
input::placeholder,
textarea::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder,
.woocommerce input::placeholder,
.woocommerce textarea::placeholder,
form input::placeholder,
form textarea::placeholder {
  color: hsl(var(--muted-foreground)) !important; /* #577066 */
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------
   S354-12: LABEL STYLING
   React Label: text-sm font-medium leading-none
   - text-sm = 0.875rem (14px)
   - font-medium = 500
   - leading-none = line-height: 1
   --------------------------------------------------------------------- */
label,
.wpcf7 label,
.woocommerce label,
.woocommerce-form__label,
form label {
  display: inline-block !important;
  font-size: 0.875rem !important; /* 14px */
  font-weight: 500 !important; /* medium */
  line-height: 1 !important; /* leading-none */
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  margin-bottom: 0.5rem !important; /* Standard spacing */
}

/* Labels next to checkbox/radio - inline, normal weight */
input[type="checkbox"] + label,
input[type="radio"] + label,
.wpcf7-list-item label,
.woocommerce-form__label-for-checkbox {
  display: inline !important;
  margin-bottom: 0 !important;
  margin-left: 0.5rem !important;
  font-weight: 400 !important;
  vertical-align: middle !important;
}

/* ---------------------------------------------------------------------
   S354-13: DISABLED STATE
   React: disabled:cursor-not-allowed disabled:opacity-50
   --------------------------------------------------------------------- */
input:disabled,
textarea:disabled,
select:disabled,
.wpcf7 input:disabled,
.wpcf7 textarea:disabled,
.wpcf7 select:disabled,
.woocommerce input:disabled,
.woocommerce textarea:disabled,
.woocommerce select:disabled,
form input:disabled,
form textarea:disabled,
form select:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Disabled checkbox/radio */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled,
.wpcf7 input[type="checkbox"]:disabled,
.wpcf7 input[type="radio"]:disabled,
.woocommerce input[type="checkbox"]:disabled,
.woocommerce input[type="radio"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* ---------------------------------------------------------------------
   S354-14: SELECT DROPDOWN CHEVRON
   React: ChevronDown h-4 w-4 opacity-50
   SVG data URI with correct color (#577066 at 50% opacity)
   --------------------------------------------------------------------- */
select,
.wpcf7 select,
.woocommerce select,
form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23577066' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important; /* px-3 from right */
  background-size: 1rem !important; /* h-4 w-4 = 16px */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Remove default IE select arrow */
select::-ms-expand {
  display: none !important;
}

/* ---------------------------------------------------------------------
   S354-15: FILE INPUT
   React: file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground
   --------------------------------------------------------------------- */
input[type="file"],
.wpcf7 input[type="file"],
.woocommerce input[type="file"],
form input[type="file"] {
  height: auto !important; /* Override h-10 */
  min-height: 2.5rem !important;
  padding: 0.5rem 0.75rem !important;
  cursor: pointer !important;
}

input[type="file"]::file-selector-button,
.wpcf7 input[type="file"]::file-selector-button,
.woocommerce input[type="file"]::file-selector-button,
form input[type="file"]::file-selector-button {
  border: 0 !important;
  background: transparent !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  margin-right: 0.75rem !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------------------
   S354-16: ERROR STATES
   React uses --destructive for errors: 0 65% 50% (#D42A2A)
   --------------------------------------------------------------------- */
input.error,
textarea.error,
select.error,
input.wpcf7-not-valid,
textarea.wpcf7-not-valid,
select.wpcf7-not-valid,
.woocommerce-invalid input,
.woocommerce-invalid textarea,
.woocommerce-invalid select {
  border-color: hsl(var(--destructive)) !important; /* #D42A2A */
}

input.error:focus,
textarea.error:focus,
select.error:focus,
input.wpcf7-not-valid:focus,
textarea.wpcf7-not-valid:focus,
select.wpcf7-not-valid:focus,
.woocommerce-invalid input:focus,
.woocommerce-invalid textarea:focus,
.woocommerce-invalid select:focus {
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--destructive)) !important;
}

/* Error message text */
.wpcf7-not-valid-tip,
.woocommerce-error li,
span.error,
.error-message,
.field-error {
  display: block !important;
  font-size: 0.75rem !important; /* text-xs = 12px */
  color: hsl(var(--destructive)) !important;
  margin-top: 0.25rem !important; /* 4px */
}

/* ---------------------------------------------------------------------
   S354-17: FORM FIELD SPACING
   React: space-y-6 between form groups, space-y-2 between label and input
   --------------------------------------------------------------------- */
.wpcf7-form-control-wrap,
.woocommerce-form-row,
.form-row,
.mk-form-group {
  margin-bottom: 1.5rem !important; /* space-y-6 = 24px */
}

.mk-form-field {
  margin-bottom: 0.5rem !important; /* space-y-2 = 8px */
}

/* ==========================================================================
   END SECTION S354: FORMS 1:1 PARITY
   ========================================================================== */

/* ==========================================================================
   S350: HEADER 1:1 PARITY
   React source: src/components/layout/Header.tsx
   Spec: docs/REACT-DESIGN-MAP/02-HEADER-NAVBAR.md
   Generated: 2026-03-31

   Key measurements from React:
   - Header height: 5rem (80px) via h-20
   - Logo height: 3.5rem (56px) via h-14
   - Desktop nav gap: 2rem (32px) via gap-8
   - Nav links: 14px, weight 500, foreground color, hover primary
   - Right side gap: 1rem (16px) via gap-4
   - Icon buttons: 2.5rem (40px) square
   - Icons: 1.25rem (20px) via w-5 h-5
   - Cart badge: 1.25rem (20px), red (destructive), positioned -4px
   - Dropdown: min-width 14rem (224px), 6px radius, 4px offset
   - Breakpoint: 1024px (lg)
   ========================================================================== */

/* ------------------------------------------------------------------
   S350-1: Header Container - exact sticky, blur, border from React
   React: sticky top-0 z-50 bg-background/95 backdrop-blur
          supports-[backdrop-filter]:bg-background/80 border-b border-border
   ------------------------------------------------------------------ */
.mk-header,
.site-header,
header.wp-block-template-part {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background-color: hsl(36 33% 94% / 0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid hsl(36 20% 82%) !important;
}

@supports (backdrop-filter: blur(8px)) {
  .mk-header,
  .site-header,
  header.wp-block-template-part {
    background-color: hsl(36 33% 94% / 0.8) !important;
  }
}

/* ------------------------------------------------------------------
   S350-2: Header Inner Container - max-width and padding
   React: container mx-auto px-4 (max-width 1400px, padding 1rem)
   ------------------------------------------------------------------ */
.mk-header__inner,
.mk-header > .wp-block-group__inner-container,
.site-header > .wp-block-group__inner-container {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* ------------------------------------------------------------------
   S350-3: Header Row - flex layout with exact height
   React: flex items-center justify-between h-20 (80px)
   ------------------------------------------------------------------ */
.mk-header__row,
.mk-header__inner > .wp-block-group,
.mk-header .wp-block-group.is-layout-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 5rem !important; /* 80px */
  min-height: 5rem !important;
  gap: 0 !important;
}

/* ------------------------------------------------------------------
   S350-4: Logo - exact 56px (3.5rem) height
   React: h-14 object-contain
   ------------------------------------------------------------------ */
.mk-header__logo,
.mk-header .wp-block-site-logo,
.site-header .wp-block-site-logo {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.mk-header__logo img,
.mk-header .wp-block-site-logo img,
.site-header .wp-block-site-logo img,
.mk-header .custom-logo {
  height: 3.5rem !important; /* 56px */
  width: auto !important;
  max-height: 3.5rem !important;
  object-fit: contain !important;
}

/* ------------------------------------------------------------------
   S350-5: Desktop Navigation - hidden below 1280px, flex at xl+
   React: hidden lg:flex items-center gap-8 (32px)
   WordPress: Raised breakpoint to 1280px for better nav fit
   ------------------------------------------------------------------ */
.mk-header__nav,
.mk-header .wp-block-navigation,
.site-header .wp-block-navigation {
  display: none !important;
  align-items: center !important;
  gap: 2rem !important; /* 32px */
}

@media (min-width: 1280px) {
  .mk-header__nav,
  .mk-header .wp-block-navigation,
  .site-header .wp-block-navigation {
    display: flex !important;
  }
}

.mk-header .wp-block-navigation__container,
.site-header .wp-block-navigation__container {
  display: flex !important;
  align-items: center !important;
  gap: 2rem !important; /* 32px */
}

/* ------------------------------------------------------------------
   S350-6: Navigation Links - exact typography and colors
   React: text-sm (14px) font-medium (500) text-foreground hover:text-primary
   Transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1)
   ------------------------------------------------------------------ */
.mk-header__nav-link,
.mk-header .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item__content {
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.25rem !important; /* 20px */
  font-weight: 500 !important;
  color: hsl(160 30% 18%) !important; /* foreground */
  text-decoration: none !important;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 !important;
}

.mk-header__nav-link:hover,
.mk-header__nav-link--active,
.mk-header .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item__content:hover {
  color: hsl(160 30% 28%) !important; /* primary */
}

/* ------------------------------------------------------------------
   S350-7: Dropdown Trigger - flex with chevron icon
   React: flex items-center gap-1 (4px) text-sm font-medium
   ------------------------------------------------------------------ */
.mk-header__nav-trigger,
.mk-header .wp-block-navigation-submenu__toggle,
.site-header .wp-block-navigation-submenu__toggle {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important; /* 4px */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(160 30% 18%) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mk-header__nav-trigger:hover,
.mk-header .wp-block-navigation-submenu__toggle:hover,
.site-header .wp-block-navigation-submenu__toggle:hover {
  color: hsl(160 30% 28%) !important;
}

/* Chevron icon: w-4 h-4 (16px) */
.mk-header__nav-trigger svg,
.mk-header .wp-block-navigation__submenu-icon,
.site-header .wp-block-navigation__submenu-icon {
  width: 1rem !important; /* 16px */
  height: 1rem !important;
}

/* ------------------------------------------------------------------
   S350-8: Dropdown Menu - exact dimensions and styling
   React DropdownMenuContent: z-50 min-w-[8rem] rounded-md border
   bg-popover p-1 shadow-md, sideOffset={4}, w-56 (224px)
   Animation: fade-in-0 zoom-in-95 slide-in-from-top-2
   ------------------------------------------------------------------ */
.mk-header__dropdown-content,
.mk-header .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation__submenu-container {
  z-index: 50 !important;
  min-width: 14rem !important; /* 224px - from w-56 */
  overflow: hidden !important;
  border-radius: 0.375rem !important; /* 6px - rounded-md */
  border: 1px solid hsl(36 20% 82%) !important;
  background-color: hsl(40 30% 96%) !important; /* popover/card */
  color: hsl(160 30% 18%) !important;
  padding: 0.25rem !important; /* 4px - p-1 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; /* shadow-md */
  margin-top: 0.25rem !important; /* 4px - sideOffset */
  animation: mk-dropdown-fade-in 150ms ease-out forwards !important;
  transform-origin: top center !important;
}

@keyframes mk-dropdown-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ------------------------------------------------------------------
   S350-9: Dropdown Menu Items - exact padding and hover
   React DropdownMenuItem: rounded-sm px-2 py-1.5 text-sm
   focus:bg-accent focus:text-accent-foreground
   ------------------------------------------------------------------ */
.mk-header__dropdown-item,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  position: relative !important;
  display: flex !important;
  cursor: default !important;
  user-select: none !important;
  align-items: center !important;
  border-radius: 0.125rem !important; /* 2px - rounded-sm */
  padding: 0.375rem 0.5rem !important; /* 6px 8px - py-1.5 px-2 */
  font-size: 0.875rem !important; /* 14px */
  outline: none !important;
  transition: background-color 150ms, color 150ms !important;
  text-decoration: none !important;
  color: hsl(160 30% 18%) !important;
  width: 100% !important;
}

.mk-header__dropdown-item:hover,
.mk-header__dropdown-item:focus,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background-color: hsl(42 55% 58%) !important; /* accent/gold */
  color: hsl(160 30% 15%) !important; /* accent-foreground */
}

/* ------------------------------------------------------------------
   S350-10: Right Side Actions - gap and alignment
   React: flex items-center gap-4 (16px)
   ------------------------------------------------------------------ */
.mk-header__actions,
.mk-header .wp-block-group.mk-header__actions,
.site-header .mk-header__actions {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important; /* 16px */
}

/* ------------------------------------------------------------------
   S350-11: Search Bar - exact dimensions and styling
   React: relative w-48 lg:w-64 (192px/256px), h-9 (36px)
   bg-muted/50 border-none focus-visible:ring-1 ring-primary
   Icon: absolute left-3 w-4 h-4 (16px)
   ------------------------------------------------------------------ */
.mk-header__search,
.mk-header .wp-block-search {
  position: relative !important;
  flex-shrink: 0 !important;
}

.mk-header__search .wp-block-search__inside-wrapper,
.mk-header .wp-block-search__inside-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 12rem !important; /* 192px - w-48 */
  height: 2.25rem !important; /* 36px - h-9 */
  background-color: hsl(36 20% 90% / 0.5) !important; /* muted/50 */
  border: none !important;
  border-radius: 0.375rem !important; /* 6px */
  padding: 0 !important;
  transition: box-shadow 150ms ease !important;
}

@media (min-width: 1024px) {
  .mk-header__search .wp-block-search__inside-wrapper,
  .mk-header .wp-block-search__inside-wrapper {
    width: 16rem !important; /* 256px - lg:w-64 */
  }
}

.mk-header__search .wp-block-search__inside-wrapper:focus-within,
.mk-header .wp-block-search__inside-wrapper:focus-within {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(36 33% 94%), 0 0 0 3px hsl(160 30% 28%) !important; /* ring-1 ring-primary with offset */
}

/* Search input styling */
.mk-header__search .wp-block-search__input,
.mk-header .wp-block-search__input {
  width: 100% !important;
  height: 100% !important;
  padding-left: 2.25rem !important; /* 36px - space for icon */
  padding-right: 1rem !important; /* 16px */
  background: transparent !important;
  border: none !important;
  font-size: 0.875rem !important;
  color: hsl(160 30% 18%) !important;
  outline: none !important;
}

.mk-header__search .wp-block-search__input::placeholder,
.mk-header .wp-block-search__input::placeholder {
  color: hsl(160 15% 40%) !important; /* muted-foreground */
}

/* Search icon - positioned left */
.mk-header__search .wp-block-search__button,
.mk-header .wp-block-search__button {
  position: absolute !important;
  left: 0.75rem !important; /* 12px - left-3 */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1rem !important; /* 16px */
  height: 1rem !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: hsl(160 15% 40%) !important; /* muted-foreground */
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mk-header__search .wp-block-search__button svg,
.mk-header .wp-block-search__button svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* ------------------------------------------------------------------
   S350-12: Icon Buttons (Cart, User, Mobile Toggle)
   React: variant="ghost" size="icon" = 2.5rem (40px) square
   Icon: w-5 h-5 (20px)
   ------------------------------------------------------------------ */
.mk-header__account-link,
.mk-header__mobile-toggle button,
.mk-header .wc-block-mini-cart__button,
.site-header .wc-block-mini-cart__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important; /* 40px */
  height: 2.5rem !important;
  border-radius: 0.25rem !important; /* 4px */
  background: transparent !important;
  border: none !important;
  color: hsl(160 30% 18%) !important;
  cursor: pointer !important;
  transition: background-color 150ms, color 150ms !important;
  padding: 0 !important;
}

.mk-header__account-link:hover,
.mk-header__mobile-toggle button:hover,
.mk-header .wc-block-mini-cart__button:hover,
.site-header .wc-block-mini-cart__button:hover {
  background-color: hsl(42 55% 58%) !important; /* accent/gold */
  color: hsl(160 30% 15%) !important; /* accent-foreground */
}

/* Icon size inside buttons: 20px (w-5 h-5) */
.mk-header__account-link svg,
.mk-header__mobile-toggle button svg,
.mk-header .wc-block-mini-cart__button svg,
.site-header .wc-block-mini-cart__button svg {
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important;
}

/* ------------------------------------------------------------------
   S350-13: Cart Badge - red, 20x20px, positioned top-right
   React: absolute -top-1 -right-1 w-5 h-5 (20px)
   variant="destructive" = bg-destructive (red) text-white
   font-size: 10px
   ------------------------------------------------------------------ */
.mk-header .wc-block-mini-cart__badge,
.mk-header .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge,
.site-header .wc-block-mini-cart__badge,
span.wc-block-mini-cart__badge,
[class*="mini-cart__badge"] {
  position: absolute !important;
  top: -0.25rem !important; /* -4px */
  right: -0.25rem !important; /* -4px */
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  background-color: hsl(0 65% 50%) !important; /* destructive/red */
  color: white !important;
  border-radius: 0.25rem !important; /* 4px */
  border: none !important;
  line-height: 1 !important;
}

/* Ensure cart button has position relative for badge positioning */
.mk-header .wc-block-mini-cart__button,
.site-header .wc-block-mini-cart__button {
  position: relative !important;
}

/* ------------------------------------------------------------------
   S350-14: Mobile Menu Button - visible below 1024px
   React: lg:hidden, variant="ghost" size="icon"
   Icon: w-5 h-5 (20px) - Menu or X icon
   ------------------------------------------------------------------ */
.mk-header__mobile-toggle,
.mk-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-open {
  display: flex !important;
}

@media (min-width: 1024px) {
  .mk-header__mobile-toggle,
  .mk-header .wp-block-navigation__responsive-container-open,
  .site-header .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   S350-15: Mobile Navigation - inline expand style
   React: lg:hidden py-4 border-t border-border animate-fade-in
   Nav: flex flex-col gap-2
   ------------------------------------------------------------------ */
.mk-header__mobile-menu,
.mk-header .wp-block-navigation__responsive-container.is-menu-open,
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  display: none !important;
  padding-top: 1rem !important; /* 16px - py-4 */
  padding-bottom: 1rem !important;
  border-top: 1px solid hsl(36 20% 82%) !important;
  animation: mk-mobile-menu-fade-in 500ms ease-out forwards !important;
}

@keyframes mk-mobile-menu-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mk-header__mobile-menu--open {
  display: block !important;
}

@media (min-width: 1024px) {
  .mk-header__mobile-menu,
  .mk-header .wp-block-navigation__responsive-container,
  .site-header .wp-block-navigation__responsive-container {
    display: none !important;
  }
}

/* Mobile nav container: flex flex-col gap-2 (8px) */
.mk-header__mobile-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* 8px */
}

/* Mobile section wrappers: py-2 (8px) */
.mk-header__mobile-section {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Mobile section labels: text-sm font-medium text-muted-foreground px-2 */
.mk-header__mobile-section-label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(160 15% 40%) !important; /* muted-foreground */
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Mobile submenu links: block px-4 py-2 text-sm hover:bg-muted rounded */
.mk-header__mobile-link {
  display: block !important;
  padding: 0.5rem 1rem !important; /* py-2 px-4 */
  font-size: 0.875rem !important;
  border-radius: 0.25rem !important; /* 4px */
  color: hsl(160 30% 18%) !important;
  text-decoration: none !important;
  transition: background-color 150ms ease !important;
}

.mk-header__mobile-link:hover {
  background-color: hsl(36 20% 90%) !important; /* muted */
}

/* Mobile top-level links: px-2 py-2 text-sm font-medium hover:text-primary */
.mk-header__mobile-top-link {
  padding: 0.5rem !important; /* py-2 px-2 */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(160 30% 18%) !important;
  text-decoration: none !important;
  transition: color 150ms ease !important;
}

.mk-header__mobile-top-link:hover {
  color: hsl(160 30% 28%) !important; /* primary */
}

/* ------------------------------------------------------------------
   S350-16: User Dropdown - align end (right), w-56 (224px)
   React: DropdownMenuContent align="end" className="w-56"
   User info section: px-3 py-2 border-b
   ------------------------------------------------------------------ */
.mk-header__user-dropdown {
  min-width: 14rem !important; /* 224px */
  right: 0 !important;
  left: auto !important;
}

/* User info section with border */
.mk-header__user-info {
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  border-bottom: 1px solid hsl(36 20% 82%) !important;
}

.mk-header__user-name {
  font-size: 0.875rem !important; /* 14px */
  font-weight: 500 !important;
  color: hsl(160 30% 18%) !important;
}

.mk-header__user-email {
  font-size: 0.75rem !important; /* 12px */
  color: hsl(160 15% 40%) !important; /* muted-foreground */
}

/* Logout item: text-destructive (red) */
.mk-header__dropdown-item--destructive {
  color: hsl(0 65% 50%) !important;
}

.mk-header__dropdown-item--destructive:hover {
  background-color: hsl(42 55% 58%) !important;
  color: hsl(0 65% 50%) !important; /* stays red on hover */
}

/* ------------------------------------------------------------------
   S350-17: WordPress Admin Bar Offset
   When logged in, admin bar adds 32px (desktop) or 46px (mobile)
   ------------------------------------------------------------------ */
body.admin-bar .mk-header,
body.admin-bar .site-header,
body.admin-bar header.wp-block-template-part {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .mk-header,
  body.admin-bar .site-header,
  body.admin-bar header.wp-block-template-part {
    top: 46px !important;
  }
}

/* ==========================================================================
   END SECTION S350: HEADER 1:1 PARITY
   ========================================================================== */
/* ==========================================================================
   S353: BUTTONS 1:1 PARITY - COMPLETE REACT MATCH
   Date: 2026-03-31
   Source: src/components/ui/button.tsx, docs/REACT-DESIGN-MAP/05-BUTTONS.md

   This section provides FINAL authority for all button styles.
   All variants, sizes, and states match React exactly.
   Uses !important to override any conflicting rules above.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   S353.1: BASE BUTTON STYLES (Applied to ALL Buttons)
   React: inline-flex items-center justify-center gap-2 whitespace-nowrap
          text-sm font-medium transition-all duration-300
   ----------------------------------------------------------------------------- */
.mk-btn,
button.mk-btn,
a.mk-btn,
.wp-block-button__link,
button[class*="mk-btn-"],
a[class*="mk-btn-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;                    /* gap-2 = 8px */
  white-space: nowrap !important;
  font-size: 0.875rem !important;            /* text-sm = 14px */
  line-height: 1.25rem !important;           /* 20px */
  font-weight: 500 !important;               /* font-medium */
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  transition: all 300ms ease !important;     /* duration-300 */
  cursor: pointer !important;
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* -----------------------------------------------------------------------------
   S353.2: FOCUS STATE (Double-Shadow Ring Technique)
   React: focus-visible:outline-none focus-visible:ring-2
          focus-visible:ring-ring focus-visible:ring-offset-2

   Implementation: box-shadow creates both ring-offset AND ring in one property
   ----------------------------------------------------------------------------- */
.mk-btn:focus-visible,
button.mk-btn:focus-visible,
a.mk-btn:focus-visible,
.wp-block-button__link:focus-visible,
button[class*="mk-btn-"]:focus-visible,
a[class*="mk-btn-"]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background, 36 33% 94%)),    /* ring-offset-2: background color */
    0 0 0 4px hsl(var(--ring, 160 30% 28%)) !important;  /* ring-2: ring color */
}

/* -----------------------------------------------------------------------------
   S353.3: DISABLED STATE
   React: disabled:pointer-events-none disabled:opacity-50
   ----------------------------------------------------------------------------- */
.mk-btn:disabled,
.mk-btn[disabled],
.mk-btn[aria-disabled="true"],
button.mk-btn:disabled,
a.mk-btn[aria-disabled="true"],
.wp-block-button__link:disabled,
.wp-block-button__link[aria-disabled="true"],
button[class*="mk-btn-"]:disabled,
a[class*="mk-btn-"][aria-disabled="true"] {
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* -----------------------------------------------------------------------------
   S353.4: SVG ICON SIZING
   React: [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
   ----------------------------------------------------------------------------- */
.mk-btn svg,
.wp-block-button__link svg,
button[class*="mk-btn-"] svg,
a[class*="mk-btn-"] svg {
  pointer-events: none !important;
  width: 1rem !important;                    /* size-4 = 16px */
  height: 1rem !important;                   /* size-4 = 16px */
  flex-shrink: 0 !important;
}

/* =============================================================================
   S353.5: SIZE VARIANTS
   ============================================================================= */

/* Size: DEFAULT (h-10 px-6 py-2)
   Height: 40px, Padding: 8px 24px */
.mk-btn,
.wp-block-button__link,
button[class*="mk-btn-"]:not(.mk-btn-sm):not(.mk-btn-lg):not(.mk-btn-xl):not(.mk-btn-icon),
a[class*="mk-btn-"]:not(.mk-btn-sm):not(.mk-btn-lg):not(.mk-btn-xl):not(.mk-btn-icon) {
  height: 2.5rem !important;                 /* h-10 = 40px */
  padding: 0.5rem 1.5rem !important;         /* py-2 px-6 = 8px 24px */
}

/* Size: SMALL (h-9 px-4)
   Height: 36px, Padding: 0 16px */
.mk-btn-sm,
.mk-btn.mk-btn-sm,
button.mk-btn-sm,
a.mk-btn-sm {
  height: 2.25rem !important;                /* h-9 = 36px */
  padding: 0 1rem !important;                /* px-4 = 0 16px */
}

/* Size: LARGE (h-12 px-8 text-base)
   Height: 48px, Padding: 0 32px, Font: 16px */
.mk-btn-lg,
.mk-btn.mk-btn-lg,
button.mk-btn-lg,
a.mk-btn-lg {
  height: 3rem !important;                   /* h-12 = 48px */
  padding: 0 2rem !important;                /* px-8 = 0 32px */
  font-size: 1rem !important;                /* text-base = 16px */
  line-height: 1.5rem !important;            /* 24px */
}

/* Size: EXTRA LARGE (h-14 px-10 text-base)
   Height: 56px, Padding: 0 40px, Font: 16px */
.mk-btn-xl,
.mk-btn.mk-btn-xl,
button.mk-btn-xl,
a.mk-btn-xl {
  height: 3.5rem !important;                 /* h-14 = 56px */
  padding: 0 2.5rem !important;              /* px-10 = 0 40px */
  font-size: 1rem !important;                /* text-base = 16px */
  line-height: 1.5rem !important;            /* 24px */
}

/* Size: ICON (h-10 w-10)
   Square: 40px x 40px, No padding */
.mk-btn-icon,
.mk-btn.mk-btn-icon,
button.mk-btn-icon,
a.mk-btn-icon {
  height: 2.5rem !important;                 /* h-10 = 40px */
  width: 2.5rem !important;                  /* w-10 = 40px */
  padding: 0 !important;
}

/* =============================================================================
   S353.6: VARIANT - DEFAULT
   React: bg-primary text-primary-foreground hover:bg-primary/90 rounded
   ============================================================================= */
.mk-btn-default,
.mk-btn.mk-btn-default,
button.mk-btn-default,
a.mk-btn-default {
  background-color: hsl(var(--primary, 160 30% 28%)) !important;      /* #325A4D */
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;       /* cream-light */
  border: none !important;
  border-radius: 0.25rem !important;         /* rounded = var(--radius) = 4px */
}

.mk-btn-default:hover,
.mk-btn.mk-btn-default:hover,
button.mk-btn-default:hover,
a.mk-btn-default:hover {
  background-color: hsl(var(--primary, 160 30% 28%) / 0.9) !important; /* 90% opacity */
}

/* =============================================================================
   S353.7: VARIANT - CATALOG (Primary CTA)
   React: bg-primary text-primary-foreground hover:bg-forest-light
          font-medium tracking-wide rounded shadow-elegant hover:shadow-hover
   ============================================================================= */
.mk-btn-catalog,
.mk-btn.mk-btn-catalog,
button.mk-btn-catalog,
a.mk-btn-catalog,
.wp-block-button.is-style-catalog .wp-block-button__link {
  background-color: hsl(var(--primary, 160 30% 28%)) !important;      /* #325A4D */
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;       /* cream-light */
  font-weight: 500 !important;               /* font-medium */
  letter-spacing: 0.025em !important;        /* tracking-wide */
  border: none !important;
  border-radius: 0.25rem !important;         /* rounded = 4px */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;     /* shadow-elegant */
}

.mk-btn-catalog:hover,
.mk-btn.mk-btn-catalog:hover,
button.mk-btn-catalog:hover,
a.mk-btn-catalog:hover,
.wp-block-button.is-style-catalog .wp-block-button__link:hover {
  background-color: hsl(var(--forest-light, 160 25% 38%)) !important; /* forest-light */
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;     /* shadow-hover */
}

/* =============================================================================
   S353.8: VARIANT - GOLD (Premium CTA)
   React: bg-gold text-forest-dark hover:bg-gold-light
          font-medium shadow-elegant rounded
   ============================================================================= */
.mk-btn-gold,
.mk-btn.mk-btn-gold,
button.mk-btn-gold,
a.mk-btn-gold,
.wp-block-button.is-style-gold .wp-block-button__link {
  background-color: hsl(var(--gold, 42 55% 58%)) !important;          /* #C4A255 */
  color: hsl(var(--forest-dark, 160 35% 20%)) !important;             /* dark forest green */
  font-weight: 500 !important;               /* font-medium */
  border: none !important;
  border-radius: 0.25rem !important;         /* rounded = 4px */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;     /* shadow-elegant */
}

.mk-btn-gold:hover,
.mk-btn.mk-btn-gold:hover,
button.mk-btn-gold:hover,
a.mk-btn-gold:hover,
.wp-block-button.is-style-gold .wp-block-button__link:hover {
  background-color: hsl(var(--gold-light, 42 45% 75%)) !important;    /* lighter gold */
}

/* =============================================================================
   S353.9: VARIANT - ELEGANT (Secondary Outlined)
   React: border border-foreground/20 text-foreground bg-transparent
          hover:border-primary hover:text-primary font-normal tracking-wide rounded
   ============================================================================= */
.mk-btn-elegant,
.mk-btn.mk-btn-elegant,
button.mk-btn-elegant,
a.mk-btn-elegant,
.wp-block-button.is-style-elegant .wp-block-button__link {
  background-color: transparent !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;              /* forest-dark */
  border: 1px solid hsl(var(--foreground, 160 30% 18%) / 0.2) !important; /* 20% opacity border */
  font-weight: 400 !important;               /* font-normal */
  letter-spacing: 0.025em !important;        /* tracking-wide */
  border-radius: 0.25rem !important;         /* rounded = 4px */
}

.mk-btn-elegant:hover,
.mk-btn.mk-btn-elegant:hover,
button.mk-btn-elegant:hover,
a.mk-btn-elegant:hover,
.wp-block-button.is-style-elegant .wp-block-button__link:hover {
  border-color: hsl(var(--primary, 160 30% 28%)) !important;          /* primary border */
  color: hsl(var(--primary, 160 30% 28%)) !important;                 /* primary text */
  background-color: transparent !important;
}

/* =============================================================================
   S353.10: VARIANT - OUTLINE
   React: border border-primary text-primary bg-transparent
          hover:bg-primary hover:text-primary-foreground rounded
   ============================================================================= */
.mk-btn-outline,
.mk-btn.mk-btn-outline,
button.mk-btn-outline,
a.mk-btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: hsl(var(--primary, 160 30% 28%)) !important;                 /* primary text */
  border: 1px solid hsl(var(--primary, 160 30% 28%)) !important;      /* primary border */
  border-radius: 0.25rem !important;         /* rounded = 4px */
}

.mk-btn-outline:hover,
.mk-btn.mk-btn-outline:hover,
button.mk-btn-outline:hover,
a.mk-btn-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: hsl(var(--primary, 160 30% 28%)) !important;      /* primary bg */
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;       /* cream text */
}

/* =============================================================================
   S353.11: VARIANT - GHOST
   React: hover:bg-accent hover:text-accent-foreground rounded
   ============================================================================= */
.mk-btn-ghost,
.mk-btn.mk-btn-ghost,
button.mk-btn-ghost,
a.mk-btn-ghost,
.wp-block-button.is-style-ghost .wp-block-button__link {
  background-color: transparent !important;
  color: inherit !important;
  border: none !important;
  border-radius: 0.25rem !important;         /* rounded = 4px */
}

.mk-btn-ghost:hover,
.mk-btn.mk-btn-ghost:hover,
button.mk-btn-ghost:hover,
a.mk-btn-ghost:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background-color: hsl(var(--accent, 42 55% 58%)) !important;        /* gold */
  color: hsl(var(--accent-foreground, 160 30% 15%)) !important;       /* dark green */
}

/* =============================================================================
   S353.12: VARIANT - LINK
   React: text-primary underline-offset-4 hover:underline
   NOTE: Link variant has NO "rounded" class in React - no border-radius
   ============================================================================= */
.mk-btn-link,
.mk-btn.mk-btn-link,
button.mk-btn-link,
a.mk-btn-link,
.wp-block-button.is-style-link .wp-block-button__link {
  background-color: transparent !important;
  color: hsl(var(--primary, 160 30% 28%)) !important;                 /* primary */
  border: none !important;
  text-decoration: none !important;
  text-underline-offset: 4px !important;     /* underline-offset-4 */
  padding: 0 !important;
  height: auto !important;
  border-radius: 0 !important;               /* NO border-radius for link variant */
}

.mk-btn-link:hover,
.mk-btn.mk-btn-link:hover,
button.mk-btn-link:hover,
a.mk-btn-link:hover,
.wp-block-button.is-style-link .wp-block-button__link:hover {
  text-decoration: underline !important;
}

/* =============================================================================
   S353.13: VARIANT - SECONDARY
   React: bg-secondary text-secondary-foreground hover:bg-secondary/80 rounded
   ============================================================================= */
.mk-btn-secondary,
.mk-btn.mk-btn-secondary,
button.mk-btn-secondary,
a.mk-btn-secondary,
.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: hsl(var(--secondary, 36 25% 88%)) !important;     /* cream-dark */
  color: hsl(var(--secondary-foreground, 160 30% 18%)) !important;    /* forest-dark */
  border: none !important;
  border-radius: 0.25rem !important;         /* rounded = 4px */
}

.mk-btn-secondary:hover,
.mk-btn.mk-btn-secondary:hover,
button.mk-btn-secondary:hover,
a.mk-btn-secondary:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background-color: hsl(var(--secondary, 36 25% 88%) / 0.8) !important; /* 80% opacity */
}

/* =============================================================================
   S353.14: VARIANT - DESTRUCTIVE
   React: bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded
   ============================================================================= */
.mk-btn-destructive,
.mk-btn.mk-btn-destructive,
button.mk-btn-destructive,
a.mk-btn-destructive {
  background-color: hsl(var(--destructive, 0 65% 50%)) !important;    /* red */
  color: hsl(var(--destructive-foreground, 0 0% 100%)) !important;    /* white */
  border: none !important;
  border-radius: 0.25rem !important;         /* rounded = 4px */
}

.mk-btn-destructive:hover,
.mk-btn.mk-btn-destructive:hover,
button.mk-btn-destructive:hover,
a.mk-btn-destructive:hover {
  background-color: hsl(var(--destructive, 0 65% 50%) / 0.9) !important; /* 90% opacity */
}

/* =============================================================================
   S353.15: WOOCOMMERCE BUTTON OVERRIDES
   Maps WooCommerce buttons to our variant system
   ============================================================================= */

/* Add to Cart (Single Product) - Gold XL */
.woocommerce .single_add_to_cart_button,
.woocommerce-page .single_add_to_cart_button,
.single-product .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  font-size: 1rem !important;                /* text-base */
  line-height: 1.5rem !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  background-color: hsl(var(--gold, 42 55% 58%)) !important;
  color: hsl(var(--forest-dark, 160 35% 20%)) !important;
  border: none !important;
  border-radius: 0.25rem !important;
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;
  height: 3.5rem !important;                 /* h-14 = XL */
  padding: 0 2.5rem !important;              /* px-10 */
  transition: all 300ms ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce-page .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:hover {
  background-color: hsl(var(--gold-light, 42 45% 75%)) !important;
}

/* Add to Cart (Product Loop) - Gold SM */
.woocommerce .button.add_to_cart_button,
.woocommerce-page .button.add_to_cart_button,
.woocommerce .button.product_type_simple,
.woocommerce-page .button.product_type_simple {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important;            /* text-sm */
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  background-color: hsl(var(--gold, 42 55% 58%)) !important;
  color: hsl(var(--forest-dark, 160 35% 20%)) !important;
  border: none !important;
  border-radius: 0.25rem !important;
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;
  height: 2.25rem !important;                /* h-9 = SM */
  padding: 0 1rem !important;                /* px-4 */
  transition: all 300ms ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.woocommerce .button.add_to_cart_button:hover,
.woocommerce-page .button.add_to_cart_button:hover,
.woocommerce .button.product_type_simple:hover,
.woocommerce-page .button.product_type_simple:hover {
  background-color: hsl(var(--gold-light, 42 45% 75%)) !important;
}

/* Checkout Button - Catalog LG */
.woocommerce-cart .checkout-button,
.woocommerce-page .checkout-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  font-size: 1rem !important;                /* text-base */
  line-height: 1.5rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  font-family: var(--font-body) !important;
  background-color: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;
  border: none !important;
  border-radius: 0.25rem !important;
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;
  height: 3rem !important;                   /* h-12 = LG */
  padding: 0 2rem !important;                /* px-8 */
  transition: all 300ms ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.woocommerce-cart .checkout-button:hover,
.woocommerce-page .checkout-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: hsl(var(--forest-light, 160 25% 38%)) !important;
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;
}

/* View Cart Button - Outline SM */
.woocommerce .added_to_cart,
.woocommerce-page .added_to_cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  background-color: transparent !important;
  color: hsl(var(--primary, 160 30% 28%)) !important;
  border: 1px solid hsl(var(--primary, 160 30% 28%)) !important;
  border-radius: 0.25rem !important;
  height: 2.25rem !important;                /* h-9 = SM */
  padding: 0 1rem !important;
  transition: all 300ms ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.woocommerce .added_to_cart:hover,
.woocommerce-page .added_to_cart:hover {
  background-color: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;
}

/* Generic WooCommerce Button - Catalog Default */
.woocommerce .button:not(.add_to_cart_button):not(.single_add_to_cart_button):not(.checkout-button):not(.added_to_cart):not(.product_type_simple),
.woocommerce-page .button:not(.add_to_cart_button):not(.single_add_to_cart_button):not(.checkout-button):not(.added_to_cart):not(.product_type_simple) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  font-family: var(--font-body) !important;
  background-color: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;
  border: none !important;
  border-radius: 0.25rem !important;
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;
  height: 2.5rem !important;                 /* h-10 = default */
  padding: 0.5rem 1.5rem !important;
  transition: all 300ms ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.woocommerce .button:not(.add_to_cart_button):not(.single_add_to_cart_button):not(.checkout-button):not(.added_to_cart):not(.product_type_simple):hover,
.woocommerce-page .button:not(.add_to_cart_button):not(.single_add_to_cart_button):not(.checkout-button):not(.added_to_cart):not(.product_type_simple):hover {
  background-color: hsl(var(--forest-light, 160 25% 38%)) !important;
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;
}

/* =============================================================================
   S353.16: SPECIAL BUTTON CUSTOMIZATIONS
   ============================================================================= */

/* Hero Buttons (Homepage) - Extra padding and larger font
   React: text-lg px-8 py-6 (applied on top of size="lg")
   NOTE: py-6 overrides the height from lg, making it content-driven */
.mk-btn-hero,
.mk-hero__actions .wp-block-button__link,
.mk-hero .wp-block-button__link {
  font-size: 1.125rem !important;            /* text-lg = 18px */
  line-height: 1.75rem !important;           /* 28px */
  padding: 1.5rem 2rem !important;           /* py-6 px-8 = 24px 32px */
  height: auto !important;                   /* Override fixed height, let padding define */
}

/* Gift Voucher Custom Button
   React: w-full py-6 text-lg bg-gold hover:bg-gold/90 text-primary font-semibold
   NOTE: Uses text-primary (forest green) instead of normal gold variant text */
.mk-btn-voucher,
.mk-voucher .mk-btn-gold,
.page-id-19 .mk-btn-gold.mk-btn-xl {
  width: 100% !important;
  font-size: 1.125rem !important;            /* text-lg */
  line-height: 1.75rem !important;
  font-weight: 600 !important;               /* font-semibold */
  padding: 1.5rem 2.5rem !important;         /* py-6 + px-10 */
  height: auto !important;                   /* Override, let padding define */
  background-color: hsl(var(--gold, 42 55% 58%)) !important;
  color: hsl(var(--primary, 160 30% 28%)) !important; /* text-primary, not forest-dark */
  border: none !important;
  border-radius: 0.25rem !important;
}

.mk-btn-voucher:hover,
.mk-voucher .mk-btn-gold:hover,
.page-id-19 .mk-btn-gold.mk-btn-xl:hover {
  background-color: hsl(var(--gold, 42 55% 58%) / 0.9) !important; /* hover:bg-gold/90 */
}

/* Full Width Utility */
.mk-btn-full,
.mk-btn.mk-btn-full,
button.mk-btn-full,
a.mk-btn-full {
  width: 100% !important;
}

/* =============================================================================
   S353.17: CONTACT FORM 7 BUTTON STYLING
   ============================================================================= */
.wpcf7-submit,
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  font-family: var(--font-body) !important;
  background-color: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;
  border: none !important;
  border-radius: 0.25rem !important;
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;
  height: 2.5rem !important;
  padding: 0.5rem 1.5rem !important;
  transition: all 300ms ease !important;
  cursor: pointer !important;
}

.wpcf7-submit:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
  background-color: hsl(var(--forest-light, 160 25% 38%)) !important;
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;
}

.wpcf7-submit:focus-visible,
.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 button[type="submit"]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(var(--background, 36 33% 94%)),
    0 0 0 4px hsl(var(--ring, 160 30% 28%)) !important;
}

/* =============================================================================
   S353.18: WORDPRESS BLOCK EDITOR BUTTON STYLES
   Ensures buttons look correct in editor preview
   ============================================================================= */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
  /* Default to catalog variant for WordPress buttons without explicit style */
  background-color: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  border: none !important;
  border-radius: 0.25rem !important;
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;
  height: 2.5rem !important;
  padding: 0.5rem 1.5rem !important;
  transition: all 300ms ease !important;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover {
  background-color: hsl(var(--forest-light, 160 25% 38%)) !important;
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;
}

/* ==========================================================================
   END SECTION S353: BUTTONS 1:1 PARITY
   ========================================================================== */

/* ==========================================================================
   S359: CONTACT PAGE 1:1 PARITY
   Date: 2026-03-31
   Source: src/pages/Contact.tsx + docs/REACT-DESIGN-MAP/09-CONTACT-PAGE.md

   Key specs from React:
   - Container: max-w-5xl = 1280px (NOT 1024px - max-w-5xl in Tailwind is 64rem = 1024px
     but the design map says 80rem = 1280px; using 1024px per actual Tailwind)
   - Section padding: py-12 = 48px top/bottom, px-4 = 16px sides
   - Inner max-width: max-w-5xl = 1024px (64rem)
   - Two-column grid at lg+ (1024px), gap-12 = 48px
   - Contact cards: 4 cards with space-y-6 = 24px vertical spacing
   - Icon containers: 48px diameter, primary/10 bg, rounded-full
   - Icons: 20px, primary color
   - Form card: card bg, shadow-elegant, rounded-sm (2px), p-8 (32px)
   - Form spacing: space-y-6 = 24px between fields
   ========================================================================== */

/* ---------------------------------------------------------------------------
   S359-1: PAGE CONTAINER
   React: container mx-auto px-4 py-12 -> max-w-5xl mx-auto
   --------------------------------------------------------------------------- */
body.page-id-15 .entry-content,
body.page-id-15 .wp-block-post-content,
.page-kontaktai .entry-content,
.page-kontaktai .wp-block-post-content {
  max-width: 64rem !important;            /* max-w-5xl = 1024px */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 3rem 1rem !important;          /* py-12 = 48px, px-4 = 16px */
}

@media (min-width: 768px) {
  body.page-id-15 .entry-content,
  body.page-id-15 .wp-block-post-content,
  .page-kontaktai .entry-content,
  .page-kontaktai .wp-block-post-content {
    padding: 3rem 2rem !important;        /* More padding on desktop */
  }
}

/* ---------------------------------------------------------------------------
   S359-2: PAGE TITLE (H1)
   React: font-display text-3xl md:text-4xl font-semibold text-foreground mb-4 text-center
   --------------------------------------------------------------------------- */
body.page-id-15 .wp-block-post-title,
body.page-id-15 .entry-title,
body.page-id-15 h1.wp-block-heading,
body.page-id-15 .entry-content h1:first-of-type,
.page-kontaktai .wp-block-post-title,
.page-kontaktai .entry-title,
.page-kontaktai h1.wp-block-heading {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.875rem !important;         /* text-3xl = 30px */
  line-height: 2.25rem !important;        /* 36px */
  font-weight: 600 !important;            /* font-semibold */
  color: hsl(160 30% 18%) !important;     /* foreground */
  margin-bottom: 1rem !important;         /* mb-4 = 16px */
  text-align: center !important;
  letter-spacing: -0.025em !important;    /* tracking-tight */
}

@media (min-width: 768px) {
  body.page-id-15 .wp-block-post-title,
  body.page-id-15 .entry-title,
  body.page-id-15 h1.wp-block-heading,
  body.page-id-15 .entry-content h1:first-of-type,
  .page-kontaktai .wp-block-post-title,
  .page-kontaktai .entry-title,
  .page-kontaktai h1.wp-block-heading {
    font-size: 2.25rem !important;        /* md:text-4xl = 36px */
    line-height: 2.5rem !important;       /* 40px */
  }
}

/* ---------------------------------------------------------------------------
   S359-3: SUBTITLE / INTRO PARAGRAPH
   React: text-muted-foreground text-center mb-12 max-w-2xl mx-auto
   --------------------------------------------------------------------------- */
body.page-id-15 .entry-content > p:first-of-type,
body.page-id-15 .wp-block-post-content > p:first-of-type,
.page-kontaktai .entry-content > p:first-of-type,
.page-kontaktai .wp-block-post-content > p:first-of-type,
.mk-contact-subtitle {
  color: hsl(160 15% 40%) !important;     /* muted-foreground */
  text-align: center !important;
  margin-bottom: 3rem !important;         /* mb-12 = 48px */
  max-width: 42rem !important;            /* max-w-2xl = 672px */
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 1rem !important;             /* text-base = 16px */
  line-height: 1.5rem !important;         /* 24px */
}

/* ---------------------------------------------------------------------------
   S359-4: TWO-COLUMN GRID
   React: grid lg:grid-cols-2 gap-12
   --------------------------------------------------------------------------- */
body.page-id-15 .wp-block-columns,
body.page-id-15 .mk-contact-grid,
.page-kontaktai .wp-block-columns,
.page-kontaktai .mk-contact-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3rem !important;                   /* gap-12 = 48px */
}

@media (min-width: 1024px) {
  body.page-id-15 .wp-block-columns,
  body.page-id-15 .mk-contact-grid,
  .page-kontaktai .wp-block-columns,
  .page-kontaktai .mk-contact-grid {
    grid-template-columns: repeat(2, 1fr) !important;  /* lg:grid-cols-2 */
  }
}

/* Override WP flexbox on columns */
body.page-id-15 .wp-block-columns.is-layout-flex,
.page-kontaktai .wp-block-columns.is-layout-flex {
  display: grid !important;
  flex-wrap: unset !important;
}

/* Column width reset */
body.page-id-15 .wp-block-column,
.page-kontaktai .wp-block-column {
  flex-basis: unset !important;
  width: 100% !important;
}

/* ---------------------------------------------------------------------------
   S359-5: CONTACT INFO SECTION TITLE (H2)
   React: font-display text-2xl font-semibold text-foreground mb-6
   --------------------------------------------------------------------------- */
body.page-id-15 .wp-block-column:first-child h2,
body.page-id-15 .mk-contact-info h2,
.page-kontaktai .wp-block-column:first-child h2,
.mk-contact-info__title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important;           /* text-2xl = 24px */
  line-height: 2rem !important;           /* 32px */
  font-weight: 600 !important;            /* font-semibold */
  color: hsl(160 30% 18%) !important;     /* foreground */
  margin-bottom: 1.5rem !important;       /* mb-6 = 24px */
  letter-spacing: -0.025em !important;    /* tracking-tight */
}

/* ---------------------------------------------------------------------------
   S359-6: CONTACT ITEMS CONTAINER
   React: space-y-6 (24px vertical spacing between items)
   --------------------------------------------------------------------------- */
body.page-id-15 .mk-contact-items,
body.page-id-15 .wp-block-column:first-child .wp-block-group,
.page-kontaktai .mk-contact-items,
.mk-contact-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;                 /* space-y-6 = 24px */
}

/* ---------------------------------------------------------------------------
   S359-7: CONTACT INFO ITEM
   React: flex items-start gap-4
   --------------------------------------------------------------------------- */
body.page-id-15 .mk-contact-item,
.page-kontaktai .mk-contact-item,
.mk-contact-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;                   /* gap-4 = 16px */
}

/* ---------------------------------------------------------------------------
   S359-8: CONTACT ICON CONTAINER
   React: w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0
   --------------------------------------------------------------------------- */
body.page-id-15 .mk-contact-item__icon,
body.page-id-15 .mk-contact-icon-circle,
.page-kontaktai .mk-contact-item__icon,
.page-kontaktai .mk-contact-icon-circle,
.mk-contact-item__icon,
.mk-contact-icon-circle {
  width: 3rem !important;                 /* w-12 = 48px */
  height: 3rem !important;                /* h-12 = 48px */
  min-width: 3rem !important;
  max-width: 3rem !important;
  min-height: 3rem !important;
  max-height: 3rem !important;
  border-radius: 9999px !important;       /* rounded-full */
  background-color: hsl(160 30% 28% / 0.1) !important;  /* primary/10 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------------------
   S359-9: CONTACT ICON (SVG)
   React: w-5 h-5 text-primary
   --------------------------------------------------------------------------- */
body.page-id-15 .mk-contact-item__icon svg,
body.page-id-15 .mk-contact-icon-circle svg,
.page-kontaktai .mk-contact-item__icon svg,
.page-kontaktai .mk-contact-icon-circle svg,
.mk-contact-item__icon svg,
.mk-contact-icon-circle svg {
  width: 1.25rem !important;              /* w-5 = 20px */
  height: 1.25rem !important;             /* h-5 = 20px */
  color: hsl(160 30% 28%) !important;     /* primary */
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

/* ---------------------------------------------------------------------------
   S359-10: CONTACT ITEM CONTENT (DIV)
   --------------------------------------------------------------------------- */
body.page-id-15 .mk-contact-item__content,
.page-kontaktai .mk-contact-item__content,
.mk-contact-item__content {
  display: flex !important;
  flex-direction: column !important;
}

/* ---------------------------------------------------------------------------
   S359-11: CONTACT ITEM TITLE (H3)
   React: font-semibold text-foreground mb-1
   --------------------------------------------------------------------------- */
body.page-id-15 .mk-contact-item__title,
body.page-id-15 .mk-contact-item h3,
.page-kontaktai .mk-contact-item__title,
.page-kontaktai .mk-contact-item h3,
.mk-contact-item__title,
.mk-contact-item h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;            /* font-semibold */
  color: hsl(160 30% 18%) !important;     /* foreground */
  margin-bottom: 0.25rem !important;      /* mb-1 = 4px */
  font-size: 1rem !important;             /* text-base = 16px */
  line-height: 1.5rem !important;         /* 24px */
}

/* ---------------------------------------------------------------------------
   S359-12: CONTACT ITEM TEXT & LINKS
   React: text-muted-foreground, hover:text-primary transition-colors
   --------------------------------------------------------------------------- */
body.page-id-15 .mk-contact-item__text,
body.page-id-15 .mk-contact-item p,
.page-kontaktai .mk-contact-item__text,
.page-kontaktai .mk-contact-item p,
.mk-contact-item__text,
.mk-contact-item p {
  color: hsl(160 15% 40%) !important;     /* muted-foreground */
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1rem !important;             /* text-base = 16px */
  line-height: 1.5rem !important;         /* 24px */
  margin: 0 !important;
}

body.page-id-15 .mk-contact-item__text a,
body.page-id-15 .mk-contact-item p a,
body.page-id-15 .mk-contact-item a,
.page-kontaktai .mk-contact-item__text a,
.page-kontaktai .mk-contact-item p a,
.page-kontaktai .mk-contact-item a,
.mk-contact-item__text a,
.mk-contact-item p a,
.mk-contact-item a:not(.mk-contact-item__icon) {
  color: hsl(160 15% 40%) !important;     /* muted-foreground */
  text-decoration: none !important;
  transition: color 150ms !important;     /* transition-colors */
}

body.page-id-15 .mk-contact-item__text a:hover,
body.page-id-15 .mk-contact-item p a:hover,
body.page-id-15 .mk-contact-item a:hover,
.page-kontaktai .mk-contact-item__text a:hover,
.page-kontaktai .mk-contact-item p a:hover,
.page-kontaktai .mk-contact-item a:hover,
.mk-contact-item__text a:hover,
.mk-contact-item p a:hover,
.mk-contact-item a:not(.mk-contact-item__icon):hover {
  color: hsl(160 30% 28%) !important;     /* primary */
}

/* ---------------------------------------------------------------------------
   S359-13: FORM CARD (RIGHT COLUMN)
   React: bg-card rounded-sm shadow-elegant p-8
   Note: rounded-sm = 0.125rem = 2px
   --------------------------------------------------------------------------- */
body.page-id-15 .wp-block-column:last-child > .wp-block-group,
body.page-id-15 .mk-contact-form-card,
body.page-id-15 .mk-contact-form,
.page-kontaktai .wp-block-column:last-child > .wp-block-group,
.page-kontaktai .mk-contact-form-card,
.page-kontaktai .mk-contact-form,
.mk-contact-form-card,
.mk-contact-form {
  background-color: hsl(40 30% 96%) !important;  /* card */
  border-radius: 0.125rem !important;     /* rounded-sm = 2px */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;  /* shadow-elegant */
  padding: 2rem !important;               /* p-8 = 32px */
}

/* ---------------------------------------------------------------------------
   S359-14: FORM CARD TITLE (H2)
   React: font-display text-2xl font-semibold text-foreground mb-6
   --------------------------------------------------------------------------- */
body.page-id-15 .wp-block-column:last-child h2,
body.page-id-15 .mk-contact-form-card h2,
body.page-id-15 .mk-contact-form h2,
.page-kontaktai .wp-block-column:last-child h2,
.page-kontaktai .mk-contact-form-card h2,
.page-kontaktai .mk-contact-form h2,
.mk-contact-form-card h2,
.mk-contact-form h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important;           /* text-2xl = 24px */
  line-height: 2rem !important;           /* 32px */
  font-weight: 600 !important;            /* font-semibold */
  color: hsl(160 30% 18%) !important;     /* foreground */
  margin-bottom: 1.5rem !important;       /* mb-6 = 24px */
  letter-spacing: -0.025em !important;    /* tracking-tight */
}

/* ---------------------------------------------------------------------------
   S359-15: FORM STRUCTURE
   React: space-y-6 (24px between form fields)
   --------------------------------------------------------------------------- */
body.page-id-15 .wpcf7-form,
body.page-id-15 .mk-contact-form form,
.page-kontaktai .wpcf7-form,
.page-kontaktai .mk-contact-form form,
.mk-contact-form-card form,
.mk-contact-form form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;                 /* space-y-6 = 24px */
}

/* ---------------------------------------------------------------------------
   S359-16: TWO-COLUMN FIELD ROW (Name + Email)
   React: grid sm:grid-cols-2 gap-4
   --------------------------------------------------------------------------- */
body.page-id-15 .form-row-2col,
body.page-id-15 .mk-form-row-2col,
.page-kontaktai .form-row-2col,
.page-kontaktai .mk-form-row-2col,
.mk-form-row-2col {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;                   /* gap-4 = 16px */
}

@media (min-width: 640px) {
  body.page-id-15 .form-row-2col,
  body.page-id-15 .mk-form-row-2col,
  .page-kontaktai .form-row-2col,
  .page-kontaktai .mk-form-row-2col,
  .mk-form-row-2col {
    grid-template-columns: repeat(2, 1fr) !important;  /* sm:grid-cols-2 */
  }
}

/* ---------------------------------------------------------------------------
   S359-17: FIELD GROUP
   React: space-y-2 (8px between label and input)
   --------------------------------------------------------------------------- */
body.page-id-15 .mk-form-field,
body.page-id-15 .wpcf7-form p,
.page-kontaktai .mk-form-field,
.page-kontaktai .wpcf7-form p,
.mk-form-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;                 /* space-y-2 = 8px */
  margin: 0 !important;
}

/* ---------------------------------------------------------------------------
   S359-18: FORM LABELS
   React: text-sm font-medium leading-none
   --------------------------------------------------------------------------- */
body.page-id-15 .wpcf7-form label,
body.page-id-15 .mk-form-label,
.page-kontaktai .wpcf7-form label,
.page-kontaktai .mk-form-label,
.mk-form-label,
.mk-contact-form label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.875rem !important;         /* text-sm = 14px */
  font-weight: 500 !important;            /* font-medium */
  line-height: 1 !important;              /* leading-none */
  color: hsl(160 30% 18%) !important;     /* foreground (inherit) */
}

/* ---------------------------------------------------------------------------
   S359-19: INPUT FIELDS
   React: h-10 w-full rounded-md border border-input bg-background px-3 py-2
          text-base md:text-sm placeholder:text-muted-foreground
   --------------------------------------------------------------------------- */
body.page-id-15 .wpcf7-form input[type="text"],
body.page-id-15 .wpcf7-form input[type="email"],
body.page-id-15 .wpcf7-form input[type="tel"],
body.page-id-15 .wpcf7-text,
body.page-id-15 .wpcf7-email,
.page-kontaktai .wpcf7-form input[type="text"],
.page-kontaktai .wpcf7-form input[type="email"],
.page-kontaktai .wpcf7-form input[type="tel"],
.page-kontaktai .wpcf7-text,
.page-kontaktai .wpcf7-email,
.mk-contact-form input[type="text"],
.mk-contact-form input[type="email"],
.mk-contact-form input[type="tel"] {
  display: flex !important;
  height: 2.5rem !important;              /* h-10 = 40px */
  width: 100% !important;
  border-radius: 0.375rem !important;     /* rounded-md = 6px */
  border: 1px solid hsl(36 20% 85%) !important;  /* border-input */
  background-color: hsl(36 33% 94%) !important;  /* background */
  padding: 0.5rem 0.75rem !important;     /* py-2 px-3 = 8px 12px */
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1rem !important;             /* text-base = 16px (mobile) */
  line-height: 1.5rem !important;         /* 24px */
  color: hsl(160 30% 18%) !important;     /* foreground */
  transition: border-color 150ms, box-shadow 150ms !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  body.page-id-15 .wpcf7-form input[type="text"],
  body.page-id-15 .wpcf7-form input[type="email"],
  body.page-id-15 .wpcf7-form input[type="tel"],
  body.page-id-15 .wpcf7-text,
  body.page-id-15 .wpcf7-email,
  .page-kontaktai .wpcf7-form input[type="text"],
  .page-kontaktai .wpcf7-form input[type="email"],
  .page-kontaktai .wpcf7-form input[type="tel"],
  .page-kontaktai .wpcf7-text,
  .page-kontaktai .wpcf7-email,
  .mk-contact-form input[type="text"],
  .mk-contact-form input[type="email"],
  .mk-contact-form input[type="tel"] {
    font-size: 0.875rem !important;       /* md:text-sm = 14px */
    line-height: 1.25rem !important;      /* 20px */
  }
}

/* Input placeholder */
body.page-id-15 .wpcf7-form input::placeholder,
.page-kontaktai .wpcf7-form input::placeholder,
.mk-contact-form input::placeholder {
  color: hsl(160 15% 40%) !important;     /* muted-foreground */
}

/* Input focus state */
body.page-id-15 .wpcf7-form input[type="text"]:focus,
body.page-id-15 .wpcf7-form input[type="email"]:focus,
body.page-id-15 .wpcf7-form input[type="tel"]:focus,
body.page-id-15 .wpcf7-text:focus,
body.page-id-15 .wpcf7-email:focus,
.page-kontaktai .wpcf7-form input[type="text"]:focus,
.page-kontaktai .wpcf7-form input[type="email"]:focus,
.page-kontaktai .wpcf7-form input[type="tel"]:focus,
.page-kontaktai .wpcf7-text:focus,
.page-kontaktai .wpcf7-email:focus,
.mk-contact-form input[type="text"]:focus,
.mk-contact-form input[type="email"]:focus,
.mk-contact-form input[type="tel"]:focus {
  outline: none !important;
  border-color: transparent !important;
  box-shadow:
    0 0 0 2px hsl(36 33% 94%),            /* ring-offset-2 background */
    0 0 0 4px hsl(160 30% 28%) !important;  /* ring-2 ring */
}

/* ---------------------------------------------------------------------------
   S359-20: TEXTAREA FIELD
   React: min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2
          text-sm placeholder:text-muted-foreground, rows={5}
   --------------------------------------------------------------------------- */
body.page-id-15 .wpcf7-form textarea,
body.page-id-15 .wpcf7-textarea,
.page-kontaktai .wpcf7-form textarea,
.page-kontaktai .wpcf7-textarea,
.mk-contact-form textarea {
  display: flex !important;
  min-height: 80px !important;            /* min-h-[80px] */
  width: 100% !important;
  border-radius: 0.375rem !important;     /* rounded-md = 6px */
  border: 1px solid hsl(36 20% 85%) !important;  /* border-input */
  background-color: hsl(36 33% 94%) !important;  /* background */
  padding: 0.5rem 0.75rem !important;     /* py-2 px-3 = 8px 12px */
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.875rem !important;         /* text-sm = 14px */
  line-height: 1.25rem !important;        /* 20px */
  color: hsl(160 30% 18%) !important;     /* foreground */
  resize: vertical !important;
  transition: border-color 150ms, box-shadow 150ms !important;
  box-sizing: border-box !important;
}

/* Textarea placeholder */
body.page-id-15 .wpcf7-form textarea::placeholder,
.page-kontaktai .wpcf7-form textarea::placeholder,
.mk-contact-form textarea::placeholder {
  color: hsl(160 15% 40%) !important;     /* muted-foreground */
}

/* Textarea focus state */
body.page-id-15 .wpcf7-form textarea:focus,
body.page-id-15 .wpcf7-textarea:focus,
.page-kontaktai .wpcf7-form textarea:focus,
.page-kontaktai .wpcf7-textarea:focus,
.mk-contact-form textarea:focus {
  outline: none !important;
  border-color: transparent !important;
  box-shadow:
    0 0 0 2px hsl(36 33% 94%),            /* ring-offset-2 background */
    0 0 0 4px hsl(160 30% 28%) !important;  /* ring-2 ring */
}

/* ---------------------------------------------------------------------------
   S359-21: SUBMIT BUTTON
   React: Button variant="catalog" className="w-full"
   catalog = bg-primary text-primary-foreground hover:bg-forest-light
             font-medium tracking-wide rounded shadow-elegant hover:shadow-hover
   --------------------------------------------------------------------------- */
body.page-id-15 .wpcf7-submit,
body.page-id-15 .wpcf7 input[type="submit"],
body.page-id-15 .wpcf7 button[type="submit"],
.page-kontaktai .wpcf7-submit,
.page-kontaktai .wpcf7 input[type="submit"],
.page-kontaktai .wpcf7 button[type="submit"],
.mk-contact-form input[type="submit"],
.mk-contact-form button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;                 /* gap-2 = 8px */
  width: 100% !important;                 /* w-full */
  height: 2.5rem !important;              /* h-10 = 40px */
  padding: 0.5rem 1.5rem !important;      /* py-2 px-6 = 8px 24px */
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.875rem !important;         /* text-sm = 14px */
  line-height: 1.25rem !important;        /* 20px */
  font-weight: 500 !important;            /* font-medium */
  letter-spacing: 0.025em !important;     /* tracking-wide */
  white-space: nowrap !important;
  background-color: hsl(160 30% 28%) !important;  /* primary */
  color: hsl(40 30% 96%) !important;      /* primary-foreground */
  border: none !important;
  border-radius: 0.25rem !important;      /* rounded = 4px */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;  /* shadow-elegant */
  cursor: pointer !important;
  transition: all 300ms ease !important;
  box-sizing: border-box !important;
}

body.page-id-15 .wpcf7-submit:hover,
body.page-id-15 .wpcf7 input[type="submit"]:hover,
body.page-id-15 .wpcf7 button[type="submit"]:hover,
.page-kontaktai .wpcf7-submit:hover,
.page-kontaktai .wpcf7 input[type="submit"]:hover,
.page-kontaktai .wpcf7 button[type="submit"]:hover,
.mk-contact-form input[type="submit"]:hover,
.mk-contact-form button[type="submit"]:hover {
  background-color: hsl(160 25% 38%) !important;  /* forest-light */
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;  /* shadow-hover */
  opacity: 1 !important;                  /* Override any opacity changes */
}

/* Submit button focus state */
body.page-id-15 .wpcf7-submit:focus-visible,
body.page-id-15 .wpcf7 input[type="submit"]:focus-visible,
body.page-id-15 .wpcf7 button[type="submit"]:focus-visible,
.page-kontaktai .wpcf7-submit:focus-visible,
.page-kontaktai .wpcf7 input[type="submit"]:focus-visible,
.page-kontaktai .wpcf7 button[type="submit"]:focus-visible,
.mk-contact-form input[type="submit"]:focus-visible,
.mk-contact-form button[type="submit"]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px hsl(36 33% 94%),            /* ring-offset-2 background */
    0 0 0 4px hsl(160 30% 28%) !important;  /* ring-2 ring */
}

/* ---------------------------------------------------------------------------
   S359-22: CF7 FORM ELEMENT RESETS
   Remove default CF7 spacing that conflicts with our gap-based layout
   --------------------------------------------------------------------------- */
body.page-id-15 .wpcf7-form br,
.page-kontaktai .wpcf7-form br {
  display: none !important;               /* Remove line breaks CF7 inserts */
}

body.page-id-15 .wpcf7-form-control-wrap,
.page-kontaktai .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
}

body.page-id-15 .wpcf7-response-output,
.page-kontaktai .wpcf7-response-output {
  margin: 1rem 0 0 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.375rem !important;
}

/* ==========================================================================
   END SECTION S359: CONTACT PAGE 1:1 PARITY
   ========================================================================== */

/* ==========================================================================
   S357: SINGLE PRODUCT 1:1 PARITY
   Complete implementation matching src/pages/ArtworkDetail.tsx
   ========================================================================== */

/* -----------------------------------------------------------------------------
   S357.1: PAGE CONTAINER & BACK LINK
   From: container mx-auto px-4 py-12
   ----------------------------------------------------------------------------- */
.single-product .site-main,
.woocommerce.single-product .woocommerce-notices-wrapper + div,
body.single-product .woocommerce {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 1rem !important;                   /* px-4 = 16px */
  padding-top: 3rem !important;               /* py-12 = 48px */
  padding-bottom: 3rem !important;
}

.mk-back-link,
.woocommerce-breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;                     /* gap-2 = 8px */
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  font-size: 0.875rem !important;             /* text-sm = 14px */
  line-height: 1.25rem !important;
  text-decoration: none !important;
  margin-bottom: 2rem !important;             /* mb-8 = 32px */
  transition: color 150ms ease !important;
}

.mk-back-link:hover,
.woocommerce-breadcrumb:hover,
.woocommerce-breadcrumb a:hover {
  color: hsl(var(--primary, 160 30% 28%)) !important;
}

.mk-back-link svg,
.mk-back-link .dashicons {
  width: 1rem !important;                     /* w-4 = 16px */
  height: 1rem !important;
  flex-shrink: 0 !important;
}

/* -----------------------------------------------------------------------------
   S357.2: TWO-COLUMN GRID LAYOUT
   From: grid lg:grid-cols-2 gap-12
   ----------------------------------------------------------------------------- */
.woocommerce div.product,
.mk-product-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3rem !important;                       /* gap-12 = 48px */
  max-width: 1400px !important;
  margin: 0 auto !important;
}

@media (min-width: 1024px) {
  .woocommerce div.product,
  .mk-product-grid {
    grid-template-columns: 1fr 1fr !important; /* lg:grid-cols-2 */
  }
}

/* Ensure left column (image) stays first */
.woocommerce div.product div.images,
.woocommerce-product-gallery,
.mk-product-image-column {
  order: 1 !important;
}

/* Ensure right column (details) stays second */
.woocommerce div.product .summary,
.woocommerce div.product .entry-summary,
.mk-product-details-column {
  order: 2 !important;
}

/* -----------------------------------------------------------------------------
   S357.3: PRODUCT IMAGE CONTAINER
   From: relative overflow-hidden rounded-sm shadow-elegant
   ----------------------------------------------------------------------------- */
.woocommerce div.product div.images,
.woocommerce-product-gallery,
.mk-product-image-container {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0.125rem !important;         /* rounded-sm = 2px */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important; /* shadow-elegant */
}

.woocommerce div.product div.images img,
.woocommerce-product-gallery img,
.mk-product-image-container img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/* WooCommerce gallery specific resets */
.woocommerce-product-gallery--with-images .woocommerce-product-gallery__wrapper {
  margin: 0 !important;
}

.woocommerce-product-gallery__image {
  margin: 0 !important;
}

/* Thumbnails row styling */
.woocommerce-product-gallery .flex-control-thumbs {
  margin-top: 1rem !important;
  display: flex !important;
  gap: 0.5rem !important;
  list-style: none !important;
  padding: 0 !important;
}

.woocommerce-product-gallery .flex-control-thumbs li {
  width: calc(20% - 0.4rem) !important;
  border-radius: 0.125rem !important;
  overflow: hidden !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
  border-radius: 0.125rem !important;
  opacity: 0.6 !important;
  transition: opacity 200ms ease !important;
  cursor: pointer !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img:hover,
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  opacity: 1 !important;
}

/* -----------------------------------------------------------------------------
   S357.4: PARDUOTA (SOLD) OVERLAY
   From: absolute inset-0 bg-foreground/60 flex items-center justify-center
   ----------------------------------------------------------------------------- */
.mk-product-sold-overlay,
.body--product-sold .woocommerce-product-gallery::after {
  position: absolute !important;
  inset: 0 !important;
  background: hsl(160 30% 18% / 0.6) !important; /* bg-foreground/60 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

.body--product-sold .woocommerce-product-gallery::after {
  content: '' !important;                     /* Clear text, badge is separate element */
}

.mk-product-sold-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: hsl(var(--gold, 42 55% 58%)) !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;               /* text-2xl = 24px */
  line-height: 2rem !important;
  padding: 0.75rem 1.5rem !important;         /* py-3 px-6 */
  border-radius: 9999px !important;           /* Badge uses rounded-full */
  border: 1px solid transparent !important;
  z-index: 11 !important;
}

.mk-product-sold-badge svg,
.mk-product-sold-badge .dashicons {
  width: 1.5rem !important;                   /* w-6 = 24px */
  height: 1.5rem !important;
  margin-right: 0.5rem !important;            /* mr-2 = 8px */
}

/* -----------------------------------------------------------------------------
   S357.5: BAIGIASI! (ENDING SOON) BADGE
   From: absolute top-4 left-4, destructive variant, animate-pulse
   ----------------------------------------------------------------------------- */
.mk-product-ending-badge-wrapper {
  position: absolute !important;
  top: 1rem !important;                       /* top-4 = 16px */
  left: 1rem !important;                      /* left-4 = 16px */
  z-index: 12 !important;
}

.mk-product-ending-badge,
.mk-badge--ending {
  display: inline-flex !important;
  align-items: center !important;
  background: hsl(0 65% 50%) !important;      /* destructive */
  color: hsl(0 0% 100%) !important;           /* destructive-foreground */
  font-family: var(--font-body) !important;
  font-size: 1.125rem !important;             /* text-lg = 18px */
  line-height: 1.75rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;            /* py-2 px-4 */
  border-radius: 9999px !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.mk-product-ending-badge svg,
.mk-badge--ending svg {
  width: 1.25rem !important;                  /* w-5 = 20px */
  height: 1.25rem !important;
  margin-right: 0.5rem !important;            /* mr-2 = 8px */
}

@keyframes mk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* -----------------------------------------------------------------------------
   S357.6: TRUST BADGES ROW
   From: grid grid-cols-3 gap-4 mt-6
   ----------------------------------------------------------------------------- */
.mk-trust-badges,
.mk-product-trust-badges {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;                       /* gap-4 = 16px */
  margin-top: 1.5rem !important;              /* mt-6 = 24px */
}

.mk-trust-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 1rem !important;                   /* p-4 = 16px */
  background: hsl(36 20% 90% / 0.3) !important; /* bg-muted/30 */
  border-radius: 0.125rem !important;         /* rounded-sm = 2px */
}

.mk-trust-badge-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem !important;                     /* 48px icon circles */
  height: 3rem !important;
  background: hsl(var(--primary, 160 30% 28%) / 0.1) !important; /* primary/10 bg */
  border-radius: 9999px !important;
  margin-bottom: 0.5rem !important;           /* mb-2 = 8px */
}

.mk-trust-badge-icon svg,
.mk-trust-badge svg {
  width: 1.5rem !important;                   /* w-6 = 24px */
  height: 1.5rem !important;
  color: hsl(var(--primary, 160 30% 28%)) !important;
}

.mk-trust-badge span,
.mk-trust-badge-text {
  font-size: 0.75rem !important;              /* text-xs = 12px */
  line-height: 1rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

/* -----------------------------------------------------------------------------
   S357.7: POST-AUCTION BANNER
   From: mb-6 p-4 bg-amber-500/10 border border-amber-500/20 rounded-sm
   ----------------------------------------------------------------------------- */
.mk-post-auction-banner {
  margin-bottom: 1.5rem !important;           /* mb-6 = 24px */
  padding: 1rem !important;                   /* p-4 = 16px */
  background: hsl(45 100% 51% / 0.1) !important; /* bg-amber-500/10 → #FCD34D at 10% */
  border: 1px solid hsl(45 100% 51% / 0.2) !important; /* border-amber-500/20 */
  border-radius: 0.125rem !important;         /* rounded-sm = 2px */
}

.mk-post-auction-banner-content {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;                    /* gap-3 = 12px */
}

.mk-post-auction-banner svg.icon,
.mk-post-auction-banner .icon {
  width: 1.5rem !important;                   /* w-6 = 24px */
  height: 1.5rem !important;
  color: rgb(217 119 6) !important;           /* text-amber-600 */
  flex-shrink: 0 !important;
}

.mk-post-auction-banner h3,
.mk-post-auction-banner-title {
  font-weight: 600 !important;
  color: rgb(146 64 14) !important;           /* text-amber-800 */
  margin: 0 0 0.25rem 0 !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

.mk-post-auction-banner p,
.mk-post-auction-banner-deadline {
  font-size: 0.875rem !important;             /* text-sm = 14px */
  line-height: 1.25rem !important;
  color: rgb(180 83 9) !important;            /* text-amber-700 */
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  margin: 0 !important;
}

.mk-post-auction-banner p svg,
.mk-post-auction-banner-deadline svg {
  width: 0.75rem !important;                  /* w-3 = 12px */
  height: 0.75rem !important;
  color: rgb(180 83 9) !important;
}

/* -----------------------------------------------------------------------------
   S357.8: AUCTION TIMER - FULL VARIANT
   From: AuctionTimer.tsx variant="full"
   ----------------------------------------------------------------------------- */
.mk-timer-full,
.mk-product-timer.mk-timer-full {
  border-radius: 0.125rem !important;         /* rounded-sm = 2px */
  padding: 1.5rem !important;                 /* p-6 = 24px */
  margin-bottom: 1.5rem !important;           /* mb-6 = 24px */
}

/* Timer status variants */
.mk-timer-full.ending-soon {
  background: linear-gradient(to right, hsl(0 65% 50% / 0.1), hsl(0 65% 50% / 0.05)) !important;
  border: 1px solid hsl(0 65% 50% / 0.2) !important;
}

.mk-timer-full.active {
  background: linear-gradient(to right, hsl(142 76% 36% / 0.1), hsl(142 71% 45% / 0.05)) !important;
  border: 1px solid hsl(142 76% 36% / 0.2) !important;
}

.mk-timer-full.upcoming {
  background: linear-gradient(to right, hsl(42 55% 58% / 0.1), hsl(42 55% 58% / 0.05)) !important;
  border: 1px solid hsl(42 55% 58% / 0.2) !important;
}

.mk-timer-full.ended {
  background: hsl(36 20% 90% / 0.5) !important;
  border: 1px solid hsl(36 20% 82%) !important;
}

/* Timer header */
.mk-timer-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;                    /* gap-3 = 12px */
  margin-bottom: 1rem !important;             /* mb-4 = 16px */
}

.mk-timer-icon-circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;                   /* w-10 = 40px */
  height: 2.5rem !important;
  border-radius: 9999px !important;
}

.mk-timer-icon-circle.ending-soon {
  background: hsl(0 65% 50% / 0.2) !important;
}

.mk-timer-icon-circle.active {
  background: hsl(142 76% 36% / 0.2) !important;
}

.mk-timer-icon-circle.upcoming {
  background: hsl(42 55% 58% / 0.2) !important;
}

.mk-timer-icon-circle svg {
  width: 1.25rem !important;                  /* w-5 = 20px */
  height: 1.25rem !important;
}

.mk-timer-icon-circle.ending-soon svg {
  color: hsl(0 65% 50%) !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.mk-timer-icon-circle.active svg {
  color: rgb(34 197 94) !important;           /* green-500 */
}

.mk-timer-icon-circle.upcoming svg {
  color: hsl(42 55% 58%) !important;
}

.mk-timer-header h3,
.mk-timer-header-title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

.mk-timer-header.ending-soon h3,
.mk-timer-full.ending-soon .mk-timer-header-title {
  color: hsl(0 65% 50%) !important;
}

.mk-timer-header.active h3,
.mk-timer-full.active .mk-timer-header-title {
  color: rgb(22 163 74) !important;           /* green-600 */
}

.mk-timer-header.upcoming h3,
.mk-timer-header.ended h3,
.mk-timer-full.upcoming .mk-timer-header-title,
.mk-timer-full.ended .mk-timer-header-title {
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

.mk-timer-header p,
.mk-timer-header-subtitle {
  font-size: 0.875rem !important;             /* text-sm = 14px */
  line-height: 1.25rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin: 0 !important;
}

/* Timer countdown display - 4-column grid */
.mk-timer-display {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important;                    /* gap-3 = 12px */
}

.mk-timer-unit {
  text-align: center !important;
}

.mk-timer-unit .number,
.mk-timer-number {
  font-family: var(--font-display) !important;
  font-size: 1.875rem !important;             /* text-3xl = 30px */
  line-height: 2.25rem !important;
  font-weight: 700 !important;
}

@media (min-width: 768px) {
  .mk-timer-unit .number,
  .mk-timer-number {
    font-size: 2.25rem !important;            /* md:text-4xl = 36px */
    line-height: 2.5rem !important;
  }
}

.mk-timer-unit .number.ending-soon,
.mk-timer-full.ending-soon .mk-timer-number {
  color: hsl(0 65% 50%) !important;
}

.mk-timer-unit .number.active,
.mk-timer-full.active .mk-timer-number {
  color: rgb(22 163 74) !important;           /* green-600 */
}

.mk-timer-unit .number.upcoming,
.mk-timer-unit .number.ended,
.mk-timer-full.upcoming .mk-timer-number,
.mk-timer-full.ended .mk-timer-number {
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

/* Seconds pulse when ending soon */
.mk-timer-unit .number.ending-soon.seconds,
.mk-timer-full.ending-soon .mk-timer-number.seconds {
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.mk-timer-unit .label,
.mk-timer-label {
  font-size: 0.75rem !important;              /* text-xs = 12px */
  line-height: 1rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-top: 0.25rem !important;             /* mt-1 = 4px */
}

/* Timer footer */
.mk-timer-footer {
  margin-top: 1rem !important;                /* mt-4 = 16px */
  padding-top: 1rem !important;               /* pt-4 = 16px */
  border-top: 1px solid hsl(36 20% 82% / 0.5) !important; /* border-border/50 */
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;                       /* gap-4 = 16px */
  font-size: 0.875rem !important;             /* text-sm = 14px */
  line-height: 1.25rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

.mk-timer-footer-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;                     /* gap-2 = 8px */
}

.mk-timer-footer-item svg {
  width: 1rem !important;                     /* w-4 = 16px */
  height: 1rem !important;
}

/* Timer warning message */
.mk-timer-warning {
  margin-top: 1rem !important;                /* mt-4 = 16px */
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;                     /* gap-2 = 8px */
  color: hsl(0 65% 50%) !important;           /* destructive */
  font-size: 0.875rem !important;             /* text-sm = 14px */
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.mk-timer-warning svg {
  width: 1rem !important;                     /* w-4 = 16px */
  height: 1rem !important;
}

/* -----------------------------------------------------------------------------
   S357.9: PRODUCT TITLE & ARTIST SECTION
   From: mb-6, flex items-center gap-3 mb-2, h1 font-display text-3xl md:text-4xl
   ----------------------------------------------------------------------------- */
.mk-product-title-section,
.woocommerce div.product .summary .product_meta + * {
  margin-bottom: 1.5rem !important;           /* mb-6 = 24px */
}

.mk-product-meta-line {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;                    /* gap-3 = 12px */
  margin-bottom: 0.5rem !important;           /* mb-2 = 8px */
}

.mk-lot-number {
  font-size: 0.875rem !important;             /* text-sm = 14px */
  line-height: 1.25rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

.mk-bid-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9999px !important;
  border: 1px solid hsl(var(--foreground, 160 30% 18%)) !important; /* outline variant */
  padding: 0.125rem 0.625rem !important;      /* px-2.5 py-0.5 */
  font-size: 0.75rem !important;              /* text-xs = 12px */
  line-height: 1rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

.mk-bid-count-badge svg {
  width: 0.75rem !important;                  /* w-3 = 12px */
  height: 0.75rem !important;
  margin-right: 0.25rem !important;           /* mr-1 = 4px */
}

.mk-product-title,
.woocommerce div.product .product_title {
  font-family: var(--font-display) !important;
  font-size: 1.875rem !important;             /* text-3xl = 30px */
  line-height: 2.25rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  margin-top: 0.5rem !important;              /* mt-2 = 8px */
  margin-bottom: 0 !important;
  letter-spacing: -0.025em !important;
}

@media (min-width: 768px) {
  .mk-product-title,
  .woocommerce div.product .product_title {
    font-size: 2.25rem !important;            /* md:text-4xl = 36px */
    line-height: 2.5rem !important;
  }
}

.mk-product-artist {
  font-size: 1.25rem !important;              /* text-xl = 20px */
  line-height: 1.75rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-top: 0.5rem !important;              /* mt-2 = 8px */
}

.mk-product-artist .dates {
  font-size: 1rem !important;                 /* text-base = 16px */
  line-height: 1.5rem !important;
}

/* -----------------------------------------------------------------------------
   S357.10: ARTWORK INFO CARD
   From: bg-secondary/30 rounded-sm p-6 mb-6
   ----------------------------------------------------------------------------- */
.mk-product-info-card {
  background: hsl(36 25% 88% / 0.3) !important; /* bg-secondary/30 */
  border-radius: 0.125rem !important;         /* rounded-sm = 2px */
  padding: 1.5rem !important;                 /* p-6 = 24px */
  margin-bottom: 1.5rem !important;           /* mb-6 = 24px */
}

.mk-product-info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;                       /* gap-4 = 16px */
  font-size: 0.875rem !important;             /* text-sm = 14px */
  line-height: 1.25rem !important;
}

.mk-product-info-item {
  display: block !important;
}

.mk-product-info-item .label {
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

.mk-product-info-item .value {
  margin-left: 0.5rem !important;             /* ml-2 = 8px */
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

.mk-product-description {
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-top: 1rem !important;                /* mt-4 = 16px */
  line-height: 1.625 !important;              /* leading-relaxed */
  font-size: 0.875rem !important;
}

/* Map WooCommerce product meta to this style */
.woocommerce div.product .woocommerce-product-details__short-description {
  background: hsl(36 25% 88% / 0.3) !important;
  border-radius: 0.125rem !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  line-height: 1.625 !important;
}

/* -----------------------------------------------------------------------------
   S357.11: PRICING CARD
   From: bg-card rounded-sm shadow-card p-6 mb-6
   ----------------------------------------------------------------------------- */
.mk-pricing-card,
.woocommerce div.product .price-wrapper {
  background: hsl(var(--card, 40 30% 96%)) !important;
  border-radius: 0.125rem !important;         /* rounded-sm = 2px */
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important; /* shadow-card */
  padding: 1.5rem !important;                 /* p-6 = 24px */
  margin-bottom: 1.5rem !important;           /* mb-6 = 24px */
}

.mk-pricing-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;                    /* space-y-3 */
}

.mk-pricing-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.mk-pricing-row .label {
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.mk-pricing-row .value {
  font-weight: 600 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

.mk-pricing-row.estimate .value {
  font-weight: 500 !important;
  color: hsl(var(--gold, 42 55% 58%)) !important;
}

.mk-pricing-row.current-bid {
  border-top: 1px solid hsl(var(--border, 36 20% 82%)) !important;
  padding-top: 0.75rem !important;            /* pt-3 = 12px */
}

.mk-pricing-row.current-bid .label-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;                     /* gap-2 = 8px */
}

.mk-pricing-row.current-bid svg {
  width: 1rem !important;                     /* w-4 = 16px */
  height: 1rem !important;
  color: rgb(34 197 94) !important;           /* green-500 */
}

.mk-pricing-row.current-bid .value {
  font-weight: 700 !important;
  color: hsl(var(--primary, 160 30% 28%)) !important;
  font-size: 1.75rem !important;              /* text-2xl+, up from 24px to 28px */
  line-height: 2rem !important;
}

.mk-pricing-row.buy-now {
  border-top: 1px solid hsl(var(--border, 36 20% 82%)) !important;
  padding-top: 0.75rem !important;
}

.mk-pricing-row.buy-now svg {
  width: 1rem !important;
  height: 1rem !important;
  color: hsl(var(--gold, 42 55% 58%)) !important;
}

.mk-pricing-row.buy-now .value {
  font-weight: 700 !important;
  color: hsl(var(--gold, 42 55% 58%)) !important;
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

/* WooCommerce price styling */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 1.75rem !important;              /* Larger current bid = 28px */
  font-weight: 700 !important;
  color: hsl(var(--primary, 160 30% 28%)) !important;
  margin-bottom: 0 !important;
}

/* -----------------------------------------------------------------------------
   S357.12: SOLD PRICING VARIANT
   From: text-center py-4, text-4xl font-display font-bold text-gold
   ----------------------------------------------------------------------------- */
.mk-pricing-card.sold {
  text-align: center !important;
  padding: 1rem 1.5rem !important;            /* py-4 = 16px vertical */
}

.mk-pricing-card.sold .label {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-bottom: 0.5rem !important;           /* mb-2 = 8px */
}

.mk-pricing-card.sold .sold-price {
  font-family: var(--font-display) !important;
  font-size: 2.25rem !important;              /* text-4xl = 36px */
  line-height: 2.5rem !important;
  font-weight: 700 !important;
  color: hsl(var(--gold, 42 55% 58%)) !important;
}

.mk-pricing-card.sold .estimate {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-top: 0.5rem !important;              /* mt-2 = 8px */
}

/* -----------------------------------------------------------------------------
   S357.13: POST-AUCTION PRICING VARIANT
   From: space-y-4, text-4xl font-display font-bold text-primary
   ----------------------------------------------------------------------------- */
.mk-pricing-card.post-auction {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;                       /* space-y-4 */
}

.mk-pricing-card.post-auction .fixed-price-wrapper {
  text-align: center !important;
}

.mk-pricing-card.post-auction .label {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-bottom: 0.25rem !important;          /* mb-1 = 4px */
}

.mk-pricing-card.post-auction .fixed-price {
  font-family: var(--font-display) !important;
  font-size: 2.25rem !important;              /* text-4xl = 36px */
  line-height: 2.5rem !important;
  font-weight: 700 !important;
  color: hsl(var(--primary, 160 30% 28%)) !important;
}

.mk-pricing-card.post-auction .was-price {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-top: 0.25rem !important;             /* mt-1 = 4px */
  text-decoration: line-through !important;
}

.mk-pricing-card.post-auction .estimate {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  text-align: center !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

/* -----------------------------------------------------------------------------
   S357.14: POST-AUCTION BUY SECTION
   From: bg-amber-500/5 rounded-sm p-6 mb-6
   ----------------------------------------------------------------------------- */
.mk-post-auction-buy-section {
  background: hsl(45 100% 51% / 0.05) !important; /* bg-amber-500/5 */
  border-radius: 0.125rem !important;         /* rounded-sm = 2px */
  padding: 1.5rem !important;                 /* p-6 = 24px */
  margin-bottom: 1.5rem !important;           /* mb-6 = 24px */
}

.mk-post-auction-buy-section button,
.mk-post-auction-buy-section .mk-btn-gold {
  width: 100% !important;
  font-size: 1.125rem !important;             /* text-lg = 18px */
  line-height: 1.75rem !important;
  height: 3.5rem !important;                  /* size="xl" = h-14 = 56px */
  padding: 0 2.5rem !important;               /* size="xl" = px-10 = 40px */
}

.mk-post-auction-buy-section button svg,
.mk-post-auction-buy-section .mk-btn-gold svg {
  width: 1.25rem !important;                  /* w-5 = 20px */
  height: 1.25rem !important;
  margin-right: 0.5rem !important;            /* mr-2 = 8px */
}

.mk-post-auction-buy-section p {
  text-align: center !important;
  font-size: 0.875rem !important;             /* text-sm = 14px */
  line-height: 1.25rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-top: 0.75rem !important;             /* mt-3 = 12px */
  margin-bottom: 0 !important;
}

/* -----------------------------------------------------------------------------
   S357.15: BID FORM SECTION
   From: bg-primary/5 rounded-sm p-6
   ----------------------------------------------------------------------------- */
.mk-bid-form {
  background: hsl(160 30% 28% / 0.05) !important; /* bg-primary/5 */
  border-radius: 0.125rem !important;         /* rounded-sm = 2px */
  padding: 1.5rem !important;                 /* p-6 = 24px */
}

.mk-bid-form h3 {
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important;             /* text-lg = 18px */
  line-height: 1.75rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  margin-bottom: 1rem !important;             /* mb-4 = 16px */
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;                     /* gap-2 = 8px */
}

.mk-bid-form h3 svg {
  width: 1.25rem !important;                  /* w-5 = 20px */
  height: 1.25rem !important;
}

/* Buy Now button in bid form */
.mk-bid-form .buy-now-btn,
.mk-bid-form .mk-btn-gold.w-full {
  width: 100% !important;
  margin-bottom: 1rem !important;             /* mb-4 = 16px */
}

/* Quick bid section */
.mk-quick-bid-section {
  margin-bottom: 1rem !important;             /* mb-4 = 16px */
}

.mk-quick-bid-section label {
  font-size: 0.875rem !important;             /* text-sm = 14px */
  line-height: 1.25rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-bottom: 0.5rem !important;           /* mb-2 = 8px */
  display: block !important;
}

.mk-quick-bid-buttons {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important; /* 5-column grid */
  gap: 0.5rem !important;                     /* gap-2 = 8px */
}

.mk-quick-bid-button {
  font-size: 0.75rem !important;              /* text-xs = 12px */
  line-height: 1rem !important;
  height: 2.25rem !important;                 /* size="sm" = h-9 = 36px */
  padding: 0 0.75rem !important;              /* smaller px for 5 cols */
  border: 1px solid hsl(var(--primary, 160 30% 28%)) !important; /* outline variant */
  color: hsl(var(--primary, 160 30% 28%)) !important;
  background: transparent !important;
  border-radius: 0.25rem !important;          /* rounded */
  transition: all 300ms ease !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.mk-quick-bid-button:hover {
  background: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;
}

.mk-quick-bid-button.selected,
.mk-quick-bid-button:active {
  background: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;
}

/* Custom bid section */
.mk-custom-bid-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;                       /* space-y-4 */
}

.mk-custom-bid-section label {
  font-size: 0.875rem !important;             /* Label component text-sm */
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

.mk-custom-bid-input-row {
  display: flex !important;
  gap: 0.75rem !important;                    /* gap-3 = 12px */
  margin-top: 0.5rem !important;              /* mt-2 = 8px */
}

.mk-custom-bid-input-row input {
  flex: 1 !important;
  height: 2.5rem !important;                  /* h-10 = 40px */
  width: 100% !important;
  border-radius: 0.375rem !important;         /* rounded-md = 6px */
  border: 1px solid hsl(36 20% 85%) !important; /* border-input */
  background: hsl(var(--background, 36 33% 94%)) !important;
  padding: 0.5rem 0.75rem !important;         /* px-3 py-2 */
  font-size: 1rem !important;                 /* text-base = 16px on mobile */
  line-height: 1.5rem !important;
  font-family: var(--font-body) !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

@media (min-width: 768px) {
  .mk-custom-bid-input-row input {
    font-size: 0.875rem !important;           /* md:text-sm = 14px */
    line-height: 1.25rem !important;
  }
}

.mk-custom-bid-input-row input::placeholder {
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

.mk-custom-bid-input-row input:focus,
.mk-custom-bid-input-row input:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--primary, 160 30% 28%)) !important; /* ring-ring */
}

.mk-bid-hint {
  font-size: 0.75rem !important;              /* text-xs = 12px */
  line-height: 1rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-top: 0.5rem !important;              /* mt-2 = 8px */
}

/* -----------------------------------------------------------------------------
   S357.16: BID HISTORY PREVIEW
   From: mt-6 pt-4 border-t border-border/50
   ----------------------------------------------------------------------------- */
.mk-bid-history-preview {
  margin-top: 1.5rem !important;              /* mt-6 = 24px */
  padding-top: 1rem !important;               /* pt-4 = 16px */
  border-top: 1px solid hsl(36 20% 82% / 0.5) !important; /* border-border/50 */
}

.mk-bid-history-preview h4 {
  font-size: 0.875rem !important;             /* text-sm = 14px */
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  margin-bottom: 0.5rem !important;           /* mb-2 = 8px */
  margin-top: 0 !important;
}

.mk-bid-history-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;                     /* space-y-2 */
  font-size: 0.875rem !important;             /* text-sm = 14px */
  line-height: 1.25rem !important;
}

.mk-bid-history-item {
  display: flex !important;
  justify-content: space-between !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

/* -----------------------------------------------------------------------------
   S357.17: LOGIN REQUIRED / UNAUTHENTICATED STATE
   From: bg-secondary/30 rounded-sm p-6 text-center
   ----------------------------------------------------------------------------- */
.mk-login-required {
  background: hsl(36 25% 88% / 0.3) !important; /* bg-secondary/30 */
  border-radius: 0.125rem !important;         /* rounded-sm = 2px */
  padding: 1.5rem !important;                 /* p-6 = 24px */
  text-align: center !important;
}

.mk-login-required svg {
  width: 2rem !important;                     /* w-8 = 32px */
  height: 2rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin: 0 auto 0.75rem !important;          /* mx-auto mb-3 */
  display: block !important;
}

.mk-login-required p {
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-bottom: 1rem !important;             /* mb-4 = 16px */
}

.mk-login-required .mk-btn,
.mk-login-required a .mk-btn {
  display: inline-flex !important;
}

/* -----------------------------------------------------------------------------
   S357.18: UPCOMING AUCTION NOTICE
   From: bg-muted/50 rounded-sm p-6 text-center
   ----------------------------------------------------------------------------- */
.mk-upcoming-notice {
  background: hsl(36 20% 90% / 0.5) !important; /* bg-muted/50 */
  border-radius: 0.125rem !important;         /* rounded-sm = 2px */
  padding: 1.5rem !important;                 /* p-6 = 24px */
  text-align: center !important;
}

.mk-upcoming-notice svg {
  width: 2rem !important;                     /* w-8 = 32px */
  height: 2rem !important;
  color: hsl(var(--gold, 42 55% 58%)) !important;
  margin: 0 auto 0.75rem !important;          /* mx-auto mb-3 */
  display: block !important;
}

.mk-upcoming-notice .title {
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;           /* mb-2 = 8px */
}

.mk-upcoming-notice .description {
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  font-size: 0.875rem !important;             /* text-sm = 14px */
  line-height: 1.25rem !important;
}

/* -----------------------------------------------------------------------------
   S357.19: WOOCOMMERCE SIMPLE AUCTIONS PLUGIN OVERRIDES
   Override plugin default styles to match React ArtworkDetail
   ----------------------------------------------------------------------------- */

/* Auction time countdown container */
.auction-time-countdown,
.woocommerce-auction-time,
.auction-time {
  background: linear-gradient(to right, hsl(142 76% 36% / 0.1), hsl(142 71% 45% / 0.05)) !important;
  border: 1px solid hsl(142 76% 36% / 0.2) !important;
  border-radius: 0.125rem !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.auction-time-countdown.ending,
.woocommerce-auction-time.ending,
.auction-time.ending {
  background: linear-gradient(to right, hsl(0 65% 50% / 0.1), hsl(0 65% 50% / 0.05)) !important;
  border: 1px solid hsl(0 65% 50% / 0.2) !important;
}

/* Auction bid form from plugin */
.woocommerce div.product form.auction_form,
.woocommerce div.product .auction_form {
  background: hsl(160 30% 28% / 0.05) !important;
  border-radius: 0.125rem !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce div.product form.auction_form .bid_button,
.woocommerce div.product .auction_form .bid_button {
  background-color: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  border: none !important;
  border-radius: 0.25rem !important;
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;
  height: 2.5rem !important;
  padding: 0.5rem 1.5rem !important;
  transition: all 300ms ease !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
}

.woocommerce div.product form.auction_form .bid_button:hover,
.woocommerce div.product .auction_form .bid_button:hover {
  background-color: hsl(var(--forest-light, 160 25% 38%)) !important;
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;
}

/* Auction current bid display */
.woocommerce div.product .auction-price,
.current_bid,
.auction .price .amount {
  font-size: 1.75rem !important;              /* 28px bold primary */
  font-weight: 700 !important;
  color: hsl(var(--primary, 160 30% 28%)) !important;
  font-family: var(--font-body) !important;
}

/* Auction bid history from plugin */
.auction-history,
.bid-history,
.auction_history_table {
  margin-top: 1.5rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid hsl(36 20% 82% / 0.5) !important;
}

.auction-history h4,
.bid-history h4,
.auction_history_table caption {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  margin-bottom: 0.5rem !important;
}

.auction-history ul,
.bid-history ul,
.auction_history_table {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

.auction-history li,
.bid-history li,
.auction_history_table tr {
  display: flex !important;
  justify-content: space-between !important;
  padding: 0.25rem 0 !important;
}

/* Auction reserve not met message */
.woocommerce div.product .reserve-not-met,
.reserve-not-met {
  color: hsl(0 65% 50%) !important;           /* destructive */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-top: 0.5rem !important;
}

/* Auction ended message */
.woocommerce div.product .auction-ended,
.auction-ended {
  background: hsl(36 20% 90% / 0.5) !important;
  border-radius: 0.125rem !important;
  padding: 1rem !important;
  text-align: center !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

/* -----------------------------------------------------------------------------
   S357.20: RESPONSIVE ADJUSTMENTS
   ----------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  /* Stack columns on mobile/tablet */
  .woocommerce div.product,
  .mk-product-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Reduce padding on mobile */
  .single-product .site-main,
  .woocommerce.single-product .woocommerce {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Trust badges responsive */
  .mk-trust-badges {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }
  
  .mk-trust-badge {
    padding: 0.75rem 0.5rem !important;
  }
  
  .mk-trust-badge-icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  
  .mk-trust-badge-icon svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
  
  /* Quick bid buttons responsive - 5 cols still but smaller */
  .mk-quick-bid-buttons {
    gap: 0.25rem !important;
  }
  
  .mk-quick-bid-button {
    padding: 0 0.5rem !important;
    font-size: 0.7rem !important;
  }
}

@media (max-width: 639px) {
  /* Even smaller mobile */
  .mk-product-title,
  .woocommerce div.product .product_title {
    font-size: 1.5rem !important;             /* Smaller on very small screens */
    line-height: 2rem !important;
  }
  
  .mk-timer-unit .number,
  .mk-timer-number {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }
  
  .mk-pricing-row.current-bid .value {
    font-size: 1.5rem !important;
  }
  
  .mk-pricing-card.sold .sold-price,
  .mk-pricing-card.post-auction .fixed-price {
    font-size: 1.875rem !important;
  }
}

/* ==========================================================================
   END SECTION S357: SINGLE PRODUCT 1:1 PARITY
   ========================================================================== */

/* ==========================================================================
   S358: GALLERY PAGE 1:1 PARITY
   Source: docs/REACT-DESIGN-MAP/10-GALLERY-PAGE.md
   React: src/pages/Gallery.tsx, src/components/gallery/GalleryCard.tsx

   This section ensures EXACT 1:1 visual match with React Gallery page.
   Supplements/overrides Section 131 and 286 where needed.
   ========================================================================== */

/* ---------------------------------------------------------------------
   S358.1: Page Container
   React: container mx-auto px-4 py-12
   Container max: 1400px
   Padding: 1rem (16px) horizontal, 3rem (48px) vertical
   --------------------------------------------------------------------- */
body.page-id-92 .site-main,
body.page-id-92 .entry-content,
body.page-id-92 > .wp-site-blocks > main,
.mk-gallery-page {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 3rem 1rem !important; /* py-12 px-4 */
}

/* ---------------------------------------------------------------------
   S358.2: Page Header
   React: max-w-3xl mb-8 (max-width: 48rem = 768px, margin-bottom: 2rem = 32px)
   Title: font-display text-3xl md:text-4xl font-semibold
   Description: text-muted-foreground leading-relaxed
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-header,
body.page-id-92 .wp-block-group.mk-page-header,
.mk-gallery-header {
  max-width: 48rem !important; /* 768px */
  margin-bottom: 2rem !important; /* 32px */
}

body.page-id-92 h1,
body.page-id-92 .mk-gallery-title,
.mk-gallery-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.875rem !important; /* text-3xl = 30px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* --foreground */
  margin-bottom: 1rem !important; /* mb-4 = 16px */
  letter-spacing: -0.025em !important; /* tracking-tight */
}

@media (min-width: 768px) {
  body.page-id-92 h1,
  body.page-id-92 .mk-gallery-title,
  .mk-gallery-title {
    font-size: 2.25rem !important; /* md:text-4xl = 36px */
  }
}

body.page-id-92 .mk-gallery-description,
body.page-id-92 .mk-gallery-header p,
.mk-gallery-description {
  color: hsl(160 15% 40%) !important; /* --muted-foreground */
  line-height: 1.625 !important; /* leading-relaxed */
  margin: 0 !important;
}

/* ---------------------------------------------------------------------
   S358.3: Category Filter Buttons
   React: flex flex-wrap gap-2 mb-8
   Button: variant="outline" size="sm" -> h-9 (36px) py-2 px-4 rounded-lg (8px)
   Active: gold background

   CRITICAL: Filter buttons use rounded-lg = 8px, py-2 px-4
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-filters,
body.page-id-92 .wp-block-buttons.mk-gallery-cat-buttons,
body.page-id-92 .mk-category-filters,
.mk-gallery-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  margin-bottom: 2rem !important; /* mb-8 = 32px */
}

/* Filter Button - Outline Variant (Default/Inactive State) */
body.page-id-92 .mk-gallery-filter-btn,
body.page-id-92 .mk-gallery-cat-btn,
body.page-id-92 .wp-block-button__link.gallery-filter,
.mk-gallery-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  font-family: 'Inter', system-ui, sans-serif !important;
  height: 2.25rem !important; /* h-9 = 36px */
  padding: 0.5rem 1rem !important; /* py-2 px-4 */
  background-color: transparent !important;
  border: 1px solid hsl(160 30% 28%) !important; /* border-primary */
  border-radius: 0.5rem !important; /* rounded-lg = 8px - CRITICAL */
  color: hsl(160 30% 28%) !important; /* text-primary */
  cursor: pointer !important;
  transition: all 300ms !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

/* Filter Button Hover (Outline) */
body.page-id-92 .mk-gallery-filter-btn:hover,
body.page-id-92 .mk-gallery-cat-btn:hover,
body.page-id-92 .wp-block-button__link.gallery-filter:hover,
.mk-gallery-filter-btn:hover {
  background-color: hsl(160 30% 28%) !important; /* hover:bg-primary */
  color: hsl(40 30% 96%) !important; /* hover:text-primary-foreground */
  border-color: hsl(160 30% 28%) !important;
}

/* Filter Button Focus */
body.page-id-92 .mk-gallery-filter-btn:focus-visible,
body.page-id-92 .mk-gallery-cat-btn:focus-visible,
.mk-gallery-filter-btn:focus-visible {
  outline: 2px solid hsl(160 30% 28%) !important; /* ring-ring */
  outline-offset: 2px !important;
}

/* Filter Button - Active State (Gold background) */
body.page-id-92 .mk-gallery-filter-btn.active,
body.page-id-92 .mk-gallery-filter-btn.is-active,
body.page-id-92 .mk-gallery-cat-btn.active,
body.page-id-92 .mk-gallery-cat-btn.is-active,
body.page-id-92 .wp-block-button__link.gallery-filter.active,
.mk-gallery-filter-btn.active,
.mk-gallery-filter-btn.is-active {
  background-color: hsl(42 55% 58%) !important; /* bg-gold for active state */
  border-color: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important; /* text-forest-dark */
}

body.page-id-92 .mk-gallery-filter-btn.active:hover,
body.page-id-92 .mk-gallery-filter-btn.is-active:hover,
body.page-id-92 .mk-gallery-cat-btn.active:hover,
body.page-id-92 .mk-gallery-cat-btn.is-active:hover,
.mk-gallery-filter-btn.active:hover,
.mk-gallery-filter-btn.is-active:hover {
  background-color: hsl(42 45% 75%) !important; /* hover:bg-gold-light */
}

/* ---------------------------------------------------------------------
   S358.4: Product Grid
   React: grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6
   CRITICAL: Gallery uses 4 columns at xl (1280px), Catalog uses 3
   Gap: 1.5rem = 24px

   NOTE: .mk-gallery-grid is the WRAPPER and must be display:block.
   Grid layout goes on the INNER .wc-block-product-template element.
   --------------------------------------------------------------------- */
body.page-id-92 .products,
body.page-id-92 ul.products,
body.page-id-92 .wc-block-product-template,
body.page-id-92 .wp-block-post-template,
.mk-gallery-grid .wc-block-product-template {
  display: grid !important;
  grid-template-columns: 1fr !important; /* Mobile: 1 column */
  gap: 1.5rem !important; /* gap-6 = 24px */
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (min-width: 640px) {
  body.page-id-92 .products,
  body.page-id-92 ul.products,
  body.page-id-92 .wc-block-product-template,
  body.page-id-92 .wp-block-post-template,
  .mk-gallery-grid .wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* sm:grid-cols-2 */
  }
}

@media (min-width: 1024px) {
  body.page-id-92 .products,
  body.page-id-92 ul.products,
  body.page-id-92 .wc-block-product-template,
  body.page-id-92 .wp-block-post-template,
  .mk-gallery-grid .wc-block-product-template {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* lg:grid-cols-3 */
  }
}

@media (min-width: 1280px) {
  body.page-id-92 .products,
  body.page-id-92 ul.products,
  body.page-id-92 .wc-block-product-template,
  body.page-id-92 .wp-block-post-template,
  .mk-gallery-grid .wc-block-product-template {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* xl:grid-cols-4 - GALLERY SPECIFIC */
  }
}

/* ---------------------------------------------------------------------
   S358.5: Gallery Card Container
   React: group bg-card rounded-sm overflow-hidden shadow-card
          hover:shadow-hover transition-all duration-300

   CRITICAL: rounded-sm = 0.125rem = 2px (NOT 4px!)
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-card,
body.page-id-92 li.product,
body.page-id-92 .wc-block-grid__product,
body.page-id-92 .wp-block-post,
.mk-gallery-card {
  background-color: hsl(40 30% 96%) !important; /* bg-card */
  border-radius: 0.125rem !important; /* rounded-sm = 2px - CRITICAL */
  overflow: hidden !important;
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important; /* shadow-card */
  transition: all 300ms !important; /* transition-all duration-300 */
}

body.page-id-92 .mk-gallery-card:hover,
body.page-id-92 li.product:hover,
body.page-id-92 .wc-block-grid__product:hover,
body.page-id-92 .wp-block-post:hover,
.mk-gallery-card:hover {
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important; /* shadow-hover */
}

/* ---------------------------------------------------------------------
   S358.6: Gallery Card Image
   React: relative aspect-[4/5] overflow-hidden
   Image: w-full h-full object-cover transition-transform duration-500
          group-hover:scale-105

   CRITICAL: Aspect ratio 4:5 (portrait), hover zoom 1.05, 500ms
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-card__image,
body.page-id-92 li.product .woocommerce-loop-product__link,
body.page-id-92 li.product > a:first-child,
body.page-id-92 .wc-block-grid__product-image,
body.page-id-92 .wc-block-components-product-image,
.mk-gallery-card__image {
  position: relative !important;
  aspect-ratio: 4 / 5 !important; /* aspect-[4/5] */
  overflow: hidden !important;
  display: block !important;
}

body.page-id-92 .mk-gallery-card__image img,
body.page-id-92 li.product img,
body.page-id-92 .wc-block-grid__product-image img,
body.page-id-92 .wc-block-components-product-image img,
.mk-gallery-card__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 500ms !important; /* duration-500 */
}

body.page-id-92 .mk-gallery-card:hover .mk-gallery-card__image img,
body.page-id-92 li.product:hover img,
body.page-id-92 .wc-block-grid__product:hover img,
body.page-id-92 .wc-block-product:hover img,
.mk-gallery-card:hover .mk-gallery-card__image img {
  transform: scale(1.05) !important; /* group-hover:scale-105 */
}

/* ---------------------------------------------------------------------
   S358.7: Gallery Card Content Area
   React: p-5 (padding: 1.25rem = 20px)
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-card__content,
body.page-id-92 li.product .woocommerce-loop-product__link + div,
body.page-id-92 .wc-block-grid__product-content,
body.page-id-92 .wc-block-product > div:not(.wc-block-components-product-image),
.mk-gallery-card__content {
  padding: 1.25rem !important; /* p-5 = 20px */
}

/* ---------------------------------------------------------------------
   S358.8: Gallery Card Title
   React: font-display text-lg font-semibold text-foreground mb-1 line-clamp-1

   Font: Playfair Display, 18px, weight 600
   Color: foreground (hsl 160 30% 18%)
   Margin bottom: 4px
   Truncate: 1 line
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-card__title,
body.page-id-92 li.product .woocommerce-loop-product__title,
body.page-id-92 .wc-block-grid__product-title,
body.page-id-92 .wc-block-components-product-title,
.mk-gallery-card__title {
  font-family: 'Playfair Display', Georgia, serif !important; /* font-display */
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important; /* line-clamp-1 */
  -webkit-box-orient: vertical !important;
  line-height: 1.4 !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------------------
   S358.9: Gallery Card Artist
   React: text-sm text-muted-foreground mb-1
   Artist dates: text-xs italic

   Artist: Inter, 14px, muted-foreground
   Dates: 12px italic
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-card__artist,
body.page-id-92 .mk-product-artist,
body.page-id-92 .mk-card-artist,
.mk-gallery-card__artist {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  margin-bottom: 0.25rem !important; /* mb-1 = 4px */
}

body.page-id-92 .mk-gallery-card__artist-dates,
body.page-id-92 .mk-product-artist-dates,
body.page-id-92 .mk-card-artist-dates,
.mk-gallery-card__artist-dates {
  font-size: 0.75rem !important; /* text-xs = 12px */
  font-style: italic !important;
}

/* ---------------------------------------------------------------------
   S358.10: Gallery Card Medium (optional)
   React: text-xs text-muted-foreground mb-3

   Size: 12px, muted-foreground, margin-bottom 12px
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-card__medium,
body.page-id-92 .mk-product-medium,
body.page-id-92 .mk-card-medium,
.mk-gallery-card__medium {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.75rem !important; /* text-xs = 12px */
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  margin-bottom: 0.75rem !important; /* mb-3 = 12px */
}

/* ---------------------------------------------------------------------
   S358.11: Gallery Card Price
   React: text-xl font-bold text-primary mb-4

   CRITICAL: 20px bold, primary color (#325A4D), margin-bottom 16px
   Fixed price display - no bid labels
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-card__price,
body.page-id-92 li.product .price,
body.page-id-92 .wc-block-grid__product-price,
body.page-id-92 .wc-block-components-product-price,
.mk-gallery-card__price {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 700 !important; /* font-bold */
  color: hsl(160 30% 28%) !important; /* text-primary */
  margin-bottom: 1rem !important; /* mb-4 = 16px */
}

/* Remove any price labels for gallery (fixed price only) */
body.page-id-92 .mk-gallery-card__price del,
body.page-id-92 li.product .price del {
  display: none !important;
}

/* ---------------------------------------------------------------------
   S358.12: Gallery Card Button Container
   React: space-y-2 (flex-direction: column, gap: 8px)
   Buttons stacked vertically
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-card__buttons,
body.page-id-92 .mk-gallery-buttons,
body.page-id-92 li.product .button-group,
body.page-id-92 .wc-block-grid__product .wp-block-buttons,
.mk-gallery-card__buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important; /* space-y-2 = 8px */
  padding: 0 1.25rem 1.25rem !important; /* Match card content padding */
}

/* ---------------------------------------------------------------------
   S358.13: Add to Cart Button (Gold Variant)
   React: Button variant="gold" className="w-full"

   - Background: gold (hsl 42 55% 58%)
   - Text: forest-dark (hsl 160 30% 18%)
   - Height: 2.5rem = 40px
   - Padding: py-2 px-6 (0.5rem 1.5rem)
   - Font: 14px, weight 500
   - Border radius: 4px
   - Shadow: shadow-elegant
   - Icon: ShoppingCart w-4 h-4 mr-2
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-card__cart-btn,
body.page-id-92 .mk-btn-add-to-cart,
body.page-id-92 li.product .add_to_cart_button,
body.page-id-92 .wc-block-components-product-button__button,
.mk-gallery-card__cart-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  width: 100% !important; /* w-full */
  height: 2.5rem !important; /* h-10 = 40px */
  padding: 0.5rem 1.5rem !important; /* py-2 px-6 */
  background-color: hsl(42 55% 58%) !important; /* bg-gold */
  color: hsl(160 30% 18%) !important; /* text-forest-dark */
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important; /* font-medium */
  border: none !important;
  border-radius: 0.25rem !important; /* rounded = 4px */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important; /* shadow-elegant */
  cursor: pointer !important;
  transition: all 300ms !important;
  text-decoration: none !important;
}

body.page-id-92 .mk-gallery-card__cart-btn:hover,
body.page-id-92 .mk-btn-add-to-cart:hover,
body.page-id-92 li.product .add_to_cart_button:hover,
body.page-id-92 .wc-block-components-product-button__button:hover,
.mk-gallery-card__cart-btn:hover {
  background-color: hsl(42 45% 75%) !important; /* hover:bg-gold-light */
  text-decoration: none !important;
}

body.page-id-92 .mk-gallery-card__cart-btn:focus-visible,
body.page-id-92 li.product .add_to_cart_button:focus-visible,
.mk-gallery-card__cart-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(36 33% 94%), 0 0 0 4px hsl(160 30% 28%) !important; /* ring */
}

body.page-id-92 .mk-gallery-card__cart-btn:disabled,
body.page-id-92 li.product .add_to_cart_button:disabled,
.mk-gallery-card__cart-btn:disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

/* Cart icon */
body.page-id-92 .mk-gallery-card__cart-btn svg,
body.page-id-92 .mk-btn-add-to-cart svg,
.mk-gallery-card__cart-btn svg {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  margin-right: 0.5rem !important; /* mr-2 */
  flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------------
   S358.14: View Details Button (Elegant Variant)
   React: Button variant="elegant" className="w-full"

   - Background: transparent
   - Border: 1px solid foreground/20 (hsl 160 30% 18% / 0.2)
   - Text: foreground (hsl 160 30% 18%)
   - Font: 14px, weight 400 (normal), tracking-wide
   - Height: 2.5rem = 40px
   - Border radius: 4px
   - Hover: border-primary, text-primary
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-card__view-btn,
body.page-id-92 .mk-btn-view-details,
body.page-id-92 li.product a.button:not(.add_to_cart_button),
body.page-id-92 .wc-block-components-product-button a:not(.add_to_cart_button),
.mk-gallery-card__view-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  width: 100% !important; /* w-full */
  height: 2.5rem !important; /* h-10 = 40px */
  padding: 0.5rem 1.5rem !important; /* py-2 px-6 */
  background-color: transparent !important;
  border: 1px solid hsl(160 30% 18% / 0.2) !important; /* border-foreground/20 */
  color: hsl(160 30% 18%) !important; /* text-foreground */
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 400 !important; /* font-normal - CRITICAL for elegant */
  letter-spacing: 0.025em !important; /* tracking-wide */
  border-radius: 0.25rem !important; /* rounded = 4px */
  cursor: pointer !important;
  transition: all 300ms !important;
  text-decoration: none !important;
}

body.page-id-92 .mk-gallery-card__view-btn:hover,
body.page-id-92 .mk-btn-view-details:hover,
body.page-id-92 li.product a.button:not(.add_to_cart_button):hover,
body.page-id-92 .wc-block-components-product-button a:not(.add_to_cart_button):hover,
.mk-gallery-card__view-btn:hover {
  border-color: hsl(160 30% 28%) !important; /* hover:border-primary */
  color: hsl(160 30% 28%) !important; /* hover:text-primary */
  text-decoration: none !important;
}

body.page-id-92 .mk-gallery-card__view-btn:focus-visible,
body.page-id-92 li.product a.button:not(.add_to_cart_button):focus-visible,
.mk-gallery-card__view-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(36 33% 94%), 0 0 0 4px hsl(160 30% 28%) !important; /* ring */
}

/* ---------------------------------------------------------------------
   S358.15: Empty State
   React: text-center py-16
   Message: text-muted-foreground text-lg
   Button: outline variant, mt-4
   --------------------------------------------------------------------- */
body.page-id-92 .mk-gallery-empty,
body.page-id-92 .woocommerce-info,
body.page-id-92 .no-products,
.mk-gallery-empty {
  text-align: center !important;
  padding: 4rem 1rem !important; /* py-16 = 64px */
}

body.page-id-92 .mk-gallery-empty__text,
body.page-id-92 .woocommerce-info p,
body.page-id-92 .no-products p,
.mk-gallery-empty__text {
  color: hsl(160 15% 40%) !important; /* text-muted-foreground */
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  margin-bottom: 0 !important;
}

body.page-id-92 .mk-gallery-empty__btn,
body.page-id-92 .woocommerce-info .button,
.mk-gallery-empty__btn {
  margin-top: 1rem !important; /* mt-4 = 16px */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.5rem !important; /* h-10 */
  padding: 0.5rem 1rem !important; /* py-2 px-4 */
  background-color: transparent !important;
  border: 1px solid hsl(160 30% 28%) !important; /* border-primary */
  color: hsl(160 30% 28%) !important; /* text-primary */
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important;
  border-radius: 0.25rem !important; /* rounded */
  transition: all 300ms !important;
  text-decoration: none !important;
}

body.page-id-92 .mk-gallery-empty__btn:hover,
body.page-id-92 .woocommerce-info .button:hover,
.mk-gallery-empty__btn:hover {
  background-color: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
}

/* ==========================================================================
   END S358: GALLERY PAGE 1:1 PARITY
   ========================================================================== */
/* ==========================================================================
   S355: PRODUCT CARDS 1:1 PARITY
   ============================================================================
   React Reference Files:
   - src/components/auction/ArtworkCard.tsx (lines 162-311 vertical, 35-159 horizontal)
   - src/components/gallery/GalleryCard.tsx
   - docs/REACT-DESIGN-MAP/04-PRODUCT-CARDS.md

   CRITICAL VALUES FROM REACT:
   - Card border-radius: 0.125rem (2px) from rounded-sm (CUSTOM Tailwind config!)
   - Card bg: hsl(40 30% 96%) = cream-light (#F5F1EA)
   - Card shadow: var(--shadow-card) = 0 2px 12px -2px hsl(160 30% 18% / 0.06)
   - Card hover shadow: var(--shadow-hover) = 0 8px 30px -8px hsl(160 30% 18% / 0.12)
   - Card transition: all 300ms
   - Image aspect ratio: 4/5 (0.8) portrait
   - Image hover: scale(1.05) over 500ms
   - Badge border-radius: 9999px (full/pill)
   - Badge padding: px-2.5 py-0.5 = 0.625rem 0.125rem (10px horizontal, 2px vertical)
   - Badge font: 12px semibold
   - Timer gradient: from-foreground/80 to-transparent (bottom to top)
   - Content padding: p-5 = 1.25rem (20px)
   - Title: Playfair Display 18px semibold, truncate 1 line
   - Artist: Inter 14px, muted-foreground
   - Price current: primary 14px bold
   - Price estimate: gold 14px medium
   - Buttons: full width, gold or elegant variants
   ========================================================================== */

/* ---------------------------------------------------------------------------
   S355.1: CARD CONTAINER — Base Structure
   React: className="group bg-card rounded-sm overflow-hidden shadow-card hover:shadow-hover transition-all duration-300"
   --------------------------------------------------------------------------- */

/* Reset any conflicting styles and apply definitive card styling */
.mk-product-card,
.mk-artwork-card,
.mk-gallery-card,
.wc-block-grid__product,
.wc-block-product,
li.product,
.products .product,
.woocommerce ul.products li.product {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: hsl(var(--card, 40 30% 96%)) !important;  /* cream-light */
  border-radius: 0.125rem !important;                         /* 2px = rounded-sm */
  overflow: hidden !important;
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important;  /* shadow-card */
  transition: box-shadow 300ms ease, transform 300ms ease !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mk-product-card:hover,
.mk-artwork-card:hover,
.mk-gallery-card:hover,
.wc-block-grid__product:hover,
.wc-block-product:hover,
li.product:hover,
.products .product:hover,
.woocommerce ul.products li.product:hover {
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;  /* shadow-hover */
}

/* ---------------------------------------------------------------------------
   S355.2: IMAGE CONTAINER — Aspect Ratio & Overflow
   React: className="relative aspect-[4/5] overflow-hidden"
   --------------------------------------------------------------------------- */

.mk-product-card__image,
.mk-artwork-card__image,
.mk-gallery-card__image,
.wc-block-grid__product-image,
.wc-block-components-product-image,
.products .product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a:has(img) {
  position: relative !important;
  aspect-ratio: 4 / 5 !important;                              /* portrait orientation */
  overflow: hidden !important;
  display: block !important;
  border-radius: 0 !important;                                 /* top corners follow card */
}

/* Image itself */
.mk-product-card__image img,
.mk-artwork-card__image img,
.mk-gallery-card__image img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img,
.products .product img,
.woocommerce ul.products li.product img,
.wc-block-grid__product .attachment-woocommerce_thumbnail {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 500ms ease !important;
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
   S355.3: IMAGE HOVER ZOOM
   React: className="group-hover:scale-105"
   --------------------------------------------------------------------------- */

.mk-product-card:hover .mk-product-card__image img,
.mk-product-card:hover img,
.mk-artwork-card:hover .mk-artwork-card__image img,
.mk-artwork-card:hover img,
.mk-gallery-card:hover .mk-gallery-card__image img,
.mk-gallery-card:hover img,
.wc-block-grid__product:hover .wc-block-grid__product-image img,
.wc-block-grid__product:hover img,
.wc-block-product:hover img,
li.product:hover img,
.products .product:hover img,
.woocommerce ul.products li.product:hover img {
  transform: scale(1.05) !important;
}

/* ---------------------------------------------------------------------------
   S355.4: STATUS BADGES CONTAINER
   React: className="absolute top-3 right-3 flex flex-col gap-2"
   --------------------------------------------------------------------------- */

.mk-product-card__badges,
.mk-artwork-card__badges,
.mk-badges,
.mk-badge-stack,
.wc-block-product .mk-badges {
  position: absolute !important;
  top: 0.75rem !important;                                     /* top-3 = 12px */
  right: 0.75rem !important;                                   /* right-3 = 12px */
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;                                      /* gap-2 = 8px */
  z-index: 10 !important;
}

/* ---------------------------------------------------------------------------
   S355.5: BASE BADGE STYLING
   React: className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold"
   --------------------------------------------------------------------------- */

.mk-badge,
.mk-product-card .mk-badge,
.mk-artwork-card .mk-badge,
.wc-block-grid__product .mk-badge,
.wc-block-product .mk-badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9999px !important;                            /* rounded-full */
  border: 1px solid transparent !important;
  padding: 0.125rem 0.625rem !important;                       /* py-0.5 px-2.5 */
  font-size: 0.75rem !important;                               /* text-xs = 12px */
  font-weight: 600 !important;                                 /* font-semibold */
  line-height: 1rem !important;
  white-space: nowrap !important;
  transition: background-color 200ms ease !important;
}

.mk-badge svg,
.mk-product-card .mk-badge svg,
.mk-artwork-card .mk-badge svg {
  width: 0.75rem !important;                                   /* w-3 = 12px */
  height: 0.75rem !important;                                  /* h-3 = 12px */
  margin-right: 0.25rem !important;                            /* mr-1 = 4px */
  flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------------------
   S355.6: BADGE VARIANT — Aktyvus (Active)
   React: className="bg-primary text-primary-foreground shadow-lg"
   --------------------------------------------------------------------------- */

.mk-badge--active,
.mk-badge[data-status="active"],
.mk-product-card .mk-badge--active,
.wc-block-grid__product .mk-badge--active {
  background-color: hsl(var(--primary, 160 30% 28%)) !important;      /* forest green */
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;       /* cream-light */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
              0 4px 6px -2px rgb(0 0 0 / 0.05) !important;            /* shadow-lg */
}

/* ---------------------------------------------------------------------------
   S355.7: BADGE VARIANT — Baigiasi! (Ending Soon)
   React: className="variant='destructive' animate-pulse shadow-lg"
   --------------------------------------------------------------------------- */

.mk-badge--ending,
.mk-badge[data-status="ending"],
.mk-badge--destructive.mk-badge--ending,
.mk-product-card .mk-badge--ending,
.wc-block-grid__product .mk-badge--ending {
  background-color: hsl(var(--destructive, 0 65% 50%)) !important;    /* red */
  color: hsl(var(--destructive-foreground, 0 0% 100%)) !important;    /* white */
  animation: mk-pulse-s355 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
              0 4px 6px -2px rgb(0 0 0 / 0.05) !important;            /* shadow-lg */
}

@keyframes mk-pulse-s355 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---------------------------------------------------------------------------
   S355.8: BADGE VARIANT — Netrukus (Upcoming)
   React: className="bg-muted text-muted-foreground shadow-lg"
   --------------------------------------------------------------------------- */

.mk-badge--upcoming,
.mk-badge[data-status="upcoming"],
.mk-product-card .mk-badge--upcoming,
.wc-block-grid__product .mk-badge--upcoming {
  background-color: hsl(var(--muted, 36 20% 90%)) !important;         /* muted cream */
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;        /* muted forest */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
              0 4px 6px -2px rgb(0 0 0 / 0.05) !important;            /* shadow-lg */
}

/* ---------------------------------------------------------------------------
   S355.9: BADGE VARIANT — Poaukcionine (Post-Auction)
   React: className="bg-amber-500 text-white shadow-lg"
   --------------------------------------------------------------------------- */

.mk-badge--post-auction,
.mk-badge--poaukcionine,
.mk-badge[data-status="post-auction"],
.mk-product-card .mk-badge--post-auction,
.wc-block-grid__product .mk-badge--post-auction {
  background-color: rgb(245 158 11) !important;                       /* amber-500 */
  color: rgb(255 255 255) !important;                                 /* white */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
              0 4px 6px -2px rgb(0 0 0 / 0.05) !important;            /* shadow-lg */
}

/* ---------------------------------------------------------------------------
   S355.10: BADGE VARIANT — Pirkti dabar (Buy Now)
   React: className="bg-gold text-foreground shadow-lg"
   --------------------------------------------------------------------------- */

.mk-badge--buy-now,
.mk-badge[data-status="buy-now"],
.mk-product-card .mk-badge--buy-now,
.wc-block-grid__product .mk-badge--buy-now {
  background-color: hsl(var(--gold, 42 55% 58%)) !important;          /* gold */
  color: hsl(var(--foreground, 160 30% 18%)) !important;              /* forest-dark */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
              0 4px 6px -2px rgb(0 0 0 / 0.05) !important;            /* shadow-lg */
}

/* ---------------------------------------------------------------------------
   S355.11: PARDUOTA (SOLD) OVERLAY
   React: className="absolute inset-0 bg-foreground/60 flex items-center justify-center"
   --------------------------------------------------------------------------- */

.mk-product-card__sold-overlay,
.mk-artwork-card__sold-overlay,
.mk-sold-overlay,
.wc-block-grid__product .mk-sold-overlay {
  position: absolute !important;
  inset: 0 !important;
  background-color: hsl(var(--foreground, 160 30% 18%) / 0.6) !important;  /* 60% opacity */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important;
}

/* PARDUOTA Badge (larger than status badges) */
.mk-badge--sold,
.mk-parduota-badge,
.mk-sold-overlay .mk-badge,
.mk-artwork-card__sold-overlay .mk-badge {
  background-color: hsl(var(--gold, 42 55% 58%)) !important;          /* gold */
  color: hsl(var(--foreground, 160 30% 18%)) !important;              /* forest-dark */
  font-weight: 600 !important;                                        /* font-semibold */
  font-size: 1.125rem !important;                                     /* text-lg = 18px */
  padding: 0.5rem 1rem !important;                                    /* py-2 px-4 */
  border-radius: 9999px !important;
}

.mk-badge--sold svg,
.mk-parduota-badge svg,
.mk-sold-overlay .mk-badge svg {
  width: 1rem !important;                                             /* w-4 = 16px */
  height: 1rem !important;                                            /* h-4 = 16px */
  margin-right: 0.5rem !important;                                    /* mr-2 = 8px */
}

/* ---------------------------------------------------------------------------
   S355.12: TIMER OVERLAY (Bottom Gradient)
   React: className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-foreground/80 to-transparent p-3"
   --------------------------------------------------------------------------- */

.mk-product-card__timer-overlay,
.mk-artwork-card__timer-overlay,
.mk-card-timer,
.mk-timer-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(to top, hsl(var(--foreground, 160 30% 18%) / 0.8), transparent) !important;
  padding: 0.75rem !important;                                        /* p-3 = 12px */
  z-index: 15 !important;
}

/* Timer text inside overlay */
.mk-card-timer .auction-time-countdown,
.mk-timer-overlay .auction-time-countdown,
.mk-card-timer .mk-timer,
.mk-timer-overlay .mk-timer {
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;       /* light text */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* ---------------------------------------------------------------------------
   S355.13: CONTENT AREA (Below Image)
   React: className="p-5"
   --------------------------------------------------------------------------- */

.mk-product-card__body,
.mk-artwork-card__body,
.mk-gallery-card__body,
.wc-block-grid__product-title,
.wc-block-grid__product-price,
.products .product .woocommerce-loop-product__title,
.products .product .price {
  padding: 1.25rem !important;                                        /* p-5 = 20px */
}

/* Reset individual padding when wrapped in common container */
.mk-product-card__body .mk-product-card__title,
.mk-product-card__body .mk-product-card__artist,
.mk-product-card__body .mk-product-card__meta,
.mk-product-card__body .mk-product-card__actions {
  padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   S355.14: TITLE STYLING
   React: className="font-display text-lg font-semibold text-foreground mb-1"
   --------------------------------------------------------------------------- */

.mk-product-card__title,
.mk-artwork-card__title,
.mk-gallery-card__title,
.wc-block-grid__product-title,
.wc-block-components-product-title,
.products .product .woocommerce-loop-product__title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.125rem !important;                                     /* text-lg = 18px */
  line-height: 1.75rem !important;                                    /* 28px */
  font-weight: 600 !important;                                        /* font-semibold */
  color: hsl(var(--foreground, 160 30% 18%)) !important;              /* forest-dark */
  margin-bottom: 0.25rem !important;                                  /* mb-1 = 4px */
  margin-top: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;                                     /* truncate 1 line */
}

/* ---------------------------------------------------------------------------
   S355.15: ARTIST NAME
   React: className="text-sm text-muted-foreground mb-1"
   --------------------------------------------------------------------------- */

.mk-product-card__artist,
.mk-artwork-card__artist,
.mk-gallery-card__artist,
.mk-card-meta__artist {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.875rem !important;                                     /* text-sm = 14px */
  line-height: 1.25rem !important;                                    /* 20px */
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-bottom: 0.25rem !important;                                  /* mb-1 = 4px */
}

/* Artist dates (inline span) */
.mk-product-card__artist-dates,
.mk-artwork-card__artist-dates,
.mk-card-meta__dates {
  display: inline !important;
  font-size: 0.75rem !important;                                      /* text-xs = 12px */
  font-style: italic !important;
}

/* Artist dates (block span) - vertical cards */
.mk-artwork-card__artist-dates--block,
.mk-product-card .mk-artist-dates-block {
  display: block !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  font-style: italic !important;
}

/* ---------------------------------------------------------------------------
   S355.16: PRICE INFORMATION SECTION
   React: className="space-y-1 mb-4"
   --------------------------------------------------------------------------- */

.mk-product-card__meta,
.mk-artwork-card__meta,
.mk-gallery-card__meta,
.mk-card-meta__prices {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;                                            /* space-y-1 = 4px */
  margin-bottom: 1rem !important;                                     /* mb-4 = 16px */
}

/* Price row layout */
.mk-product-card__meta-row,
.mk-artwork-card__meta-row,
.mk-card-meta__row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.875rem !important;                                     /* text-sm = 14px */
}

/* Price labels */
.mk-product-card__meta-label,
.mk-artwork-card__meta-label,
.mk-card-meta__label {
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

/* Current bid / starting price value */
.mk-product-card__meta-value,
.mk-artwork-card__meta-value,
.mk-card-meta__value--primary,
.woocommerce-Price-amount.mk-current-bid {
  font-weight: 700 !important;                                        /* font-bold */
  color: hsl(var(--primary, 160 30% 28%)) !important;
}

/* Estimate value */
.mk-product-card__meta-value--gold,
.mk-artwork-card__meta-value--gold,
.mk-card-meta__value--gold,
.mk-card-meta__estimate .woocommerce-Price-amount {
  font-weight: 500 !important;                                        /* font-medium */
  color: hsl(var(--gold, 42 55% 58%)) !important;
}

/* Bid count value */
.mk-product-card__meta-value--count,
.mk-artwork-card__meta-value--count,
.mk-card-meta__bid-count {
  font-weight: 500 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

/* ---------------------------------------------------------------------------
   S355.17: GALLERY CARD PRICE (Larger)
   React: className="text-xl font-bold text-primary mb-4"
   --------------------------------------------------------------------------- */

.mk-gallery-card__price,
.page-id-92 .wc-block-grid__product .wc-block-components-product-price,
body.page-id-92 .products .product .price {
  font-size: 1.25rem !important;                                      /* text-xl = 20px */
  line-height: 1.75rem !important;                                    /* 28px */
  font-weight: 700 !important;                                        /* font-bold */
  color: hsl(var(--primary, 160 30% 28%)) !important;
  margin-bottom: 1rem !important;                                     /* mb-4 = 16px */
}

/* ---------------------------------------------------------------------------
   S355.18: ACTION BUTTONS CONTAINER
   React: className="space-y-2"
   --------------------------------------------------------------------------- */

.mk-product-card__actions,
.mk-artwork-card__actions,
.mk-gallery-card__actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;                                             /* space-y-2 = 8px */
}

/* All buttons full width */
.mk-product-card__actions .mk-btn,
.mk-artwork-card__actions .mk-btn,
.mk-gallery-card__actions .mk-btn,
.mk-product-card__actions button,
.mk-artwork-card__actions button,
.wc-block-grid__product .add_to_cart_button,
.wc-block-grid__product .wp-element-button {
  width: 100% !important;
}

/* ---------------------------------------------------------------------------
   S355.19: GOLD BUTTON (Post-auction buy, Gallery add to cart)
   React: variant="gold" -> bg-gold text-forest-dark hover:bg-gold-light
   --------------------------------------------------------------------------- */

.mk-product-card .mk-btn-gold,
.mk-artwork-card .mk-btn-gold,
.mk-gallery-card .mk-btn-gold,
.mk-product-card__actions .mk-btn-gold,
.wc-block-grid__product .add_to_cart_button {
  background-color: hsl(var(--gold, 42 55% 58%)) !important;
  color: hsl(var(--forest-dark, 160 35% 20%)) !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;     /* shadow-elegant */
  border-radius: 0.25rem !important;                                  /* rounded = 4px */
  height: 2.5rem !important;                                          /* h-10 = 40px */
  padding: 0.5rem 1.5rem !important;
  transition: all 300ms ease !important;
  border: none !important;
}

.mk-product-card .mk-btn-gold:hover,
.mk-artwork-card .mk-btn-gold:hover,
.mk-gallery-card .mk-btn-gold:hover,
.mk-product-card__actions .mk-btn-gold:hover,
.wc-block-grid__product .add_to_cart_button:hover {
  background-color: hsl(var(--gold-light, 42 45% 75%)) !important;
}

/* ---------------------------------------------------------------------------
   S355.20: ELEGANT BUTTON (View/Participate)
   React: variant="elegant" -> border-foreground/20 text-foreground bg-transparent hover:border-primary hover:text-primary
   --------------------------------------------------------------------------- */

.mk-product-card .mk-btn-elegant,
.mk-artwork-card .mk-btn-elegant,
.mk-gallery-card .mk-btn-elegant,
.mk-product-card__actions .mk-btn-elegant {
  border: 1px solid hsl(var(--foreground, 160 30% 18%) / 0.2) !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  background-color: transparent !important;
  font-weight: 400 !important;
  letter-spacing: 0.025em !important;                                 /* tracking-wide */
  border-radius: 0.25rem !important;                                  /* rounded = 4px */
  height: 2.5rem !important;
  padding: 0.5rem 1.5rem !important;
  transition: all 300ms ease !important;
}

.mk-product-card .mk-btn-elegant:hover,
.mk-artwork-card .mk-btn-elegant:hover,
.mk-gallery-card .mk-btn-elegant:hover,
.mk-product-card__actions .mk-btn-elegant:hover {
  border-color: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary, 160 30% 28%)) !important;
}

/* ---------------------------------------------------------------------------
   S355.21: HORIZONTAL CARD VARIANT (List View)
   React: className="group bg-card rounded-sm overflow-hidden shadow-card hover:shadow-hover transition-all duration-300 flex"
   --------------------------------------------------------------------------- */

.mk-product-card--horizontal,
.mk-artwork-card--horizontal,
.mk-catalog--list .mk-product-card,
.mk-catalog--list .wc-block-grid__product {
  display: flex !important;
  flex-direction: row !important;
  background-color: hsl(var(--card, 40 30% 96%)) !important;
  border-radius: 0.125rem !important;                                 /* 2px */
  overflow: hidden !important;
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important;
  transition: all 300ms ease !important;
}

.mk-product-card--horizontal:hover,
.mk-artwork-card--horizontal:hover,
.mk-catalog--list .mk-product-card:hover,
.mk-catalog--list .wc-block-grid__product:hover {
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;
}

/* Horizontal card image container */
.mk-product-card--horizontal .mk-product-card__image,
.mk-artwork-card--horizontal .mk-artwork-card__image-h,
.mk-artwork-card__image-h,
.mk-catalog--list .mk-product-card .mk-product-card__image,
.mk-catalog--list .wc-block-grid__product .wc-block-grid__product-image {
  position: relative !important;
  width: 12rem !important;                                            /* w-48 = 192px */
  height: 12rem !important;                                           /* h-48 = 192px */
  flex-shrink: 0 !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;                                      /* Override 4/5 for square */
}

/* Horizontal card image */
.mk-product-card--horizontal .mk-product-card__image img,
.mk-artwork-card--horizontal .mk-artwork-card__image-h img,
.mk-artwork-card__image-h img,
.mk-catalog--list .mk-product-card img,
.mk-catalog--list .wc-block-grid__product img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 500ms ease !important;
}

/* Horizontal card content area */
.mk-product-card--horizontal .mk-product-card__body,
.mk-artwork-card--horizontal .mk-artwork-card__body-h,
.mk-artwork-card__body-h,
.mk-catalog--list .mk-product-card__body {
  padding: 1.25rem !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Horizontal card header */
.mk-product-card--horizontal .mk-product-card__header,
.mk-artwork-card__header-h {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

/* Horizontal card price right */
.mk-product-card--horizontal .mk-product-card__price,
.mk-artwork-card__price-h {
  text-align: right !important;
  flex-shrink: 0 !important;
}

/* Horizontal card footer */
.mk-product-card--horizontal .mk-product-card__footer,
.mk-artwork-card__footer-h {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 1rem !important;
}

/* Horizontal card estimate text */
.mk-product-card--horizontal .mk-product-card__estimate,
.mk-artwork-card__estimate {
  font-size: 0.875rem !important;
  color: hsl(var(--gold, 42 55% 58%)) !important;
}

/* Horizontal card footer buttons */
.mk-product-card--horizontal .mk-product-card__footer-actions,
.mk-artwork-card__footer-actions {
  display: flex !important;
  gap: 0.5rem !important;
}

/* Horizontal card small buttons */
.mk-product-card--horizontal .mk-btn-sm,
.mk-artwork-card__footer-actions .mk-btn-sm {
  height: 2.25rem !important;                                         /* h-9 = 36px */
  padding: 0 1rem !important;
  font-size: 0.875rem !important;
}

/* ---------------------------------------------------------------------------
   S355.22: GRID LAYOUTS
   React Catalog: className="grid sm:grid-cols-2 xl:grid-cols-3 gap-6"
   React Gallery: className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
   --------------------------------------------------------------------------- */

/* Catalog page grid (with sidebar context) */
.mk-catalog__grid,
.wc-block-grid.has-3-columns {
  display: grid !important;
  grid-template-columns: 1fr !important;                              /* Mobile: 1 column */
  gap: 1.5rem !important;                                             /* gap-6 = 24px */
}

@media (min-width: 640px) {
  .mk-catalog__grid,
  .wc-block-grid.has-3-columns {
    grid-template-columns: repeat(2, 1fr) !important;                 /* sm: 2 columns */
  }
}

@media (min-width: 1280px) {
  .mk-catalog__grid,
  .wc-block-grid.has-3-columns {
    grid-template-columns: repeat(3, 1fr) !important;                 /* xl: 3 columns */
  }
}

/* Gallery page grid (full width, no sidebar) */
.mk-gallery__grid,
body.page-id-92 .wc-block-grid,
body.page-id-92 .products {
  display: grid !important;
  grid-template-columns: 1fr !important;                              /* Mobile: 1 column */
  gap: 1.5rem !important;
}

@media (min-width: 640px) {
  .mk-gallery__grid,
  body.page-id-92 .wc-block-grid,
  body.page-id-92 .products {
    grid-template-columns: repeat(2, 1fr) !important;                 /* sm: 2 columns */
  }
}

@media (min-width: 1024px) {
  .mk-gallery__grid,
  body.page-id-92 .wc-block-grid,
  body.page-id-92 .products {
    grid-template-columns: repeat(3, 1fr) !important;                 /* lg: 3 columns */
  }
}

@media (min-width: 1280px) {
  .mk-gallery__grid,
  body.page-id-92 .wc-block-grid,
  body.page-id-92 .products {
    grid-template-columns: repeat(4, 1fr) !important;                 /* xl: 4 columns */
  }
}

/* List view (single column) */
.mk-catalog--list .mk-catalog__grid,
.mk-catalog--list .wc-block-grid {
  display: block !important;
}

.mk-catalog--list .mk-catalog__grid > *,
.mk-catalog--list .wc-block-grid > * {
  margin-bottom: 1rem !important;                                     /* space-y-4 = 16px */
}

/* ---------------------------------------------------------------------------
   S355.23: WOOCOMMERCE BLOCK OVERRIDES
   Ensure WC blocks match our card styling
   --------------------------------------------------------------------------- */

/* Remove default WC product styling */
.wc-block-grid__product {
  list-style: none !important;
}

/* WC product title */
.wc-block-grid__product .wc-block-components-product-title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  margin: 0 0 0.25rem 0 !important;
  text-decoration: none !important;
}

/* WC product price */
.wc-block-grid__product .wc-block-components-product-price {
  font-size: 0.875rem !important;
  color: hsl(var(--primary, 160 30% 28%)) !important;
  font-weight: 700 !important;
}

/* WC add to cart button container */
.wc-block-grid__product .wc-block-components-product-button {
  margin-top: 0.5rem !important;
}

/* ---------------------------------------------------------------------------
   S355.24: REDUCED MOTION PREFERENCE
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mk-product-card,
  .mk-artwork-card,
  .mk-gallery-card,
  .wc-block-grid__product,
  .mk-badge--ending {
    animation: none !important;
  }

  .mk-product-card:hover img,
  .mk-artwork-card:hover img,
  .mk-gallery-card:hover img,
  .wc-block-grid__product:hover img {
    transform: none !important;
  }
}

/* ==========================================================================
   END SECTION S355: PRODUCT CARDS 1:1 PARITY
   ========================================================================== */

/* ==========================================================================
   S356: CATALOG SIDEBAR 1:1 PARITY (2026-03-31)
   ==========================================================================

   COMPLETE React → WordPress 1:1 visual parity for Catalog page sidebar

   React Sources:
   - src/pages/Catalog.tsx (lines 131-204)
   - src/components/auction/CategorySidebar.tsx
   - src/components/ui/switch.tsx
   - src/components/ui/select.tsx
   - src/components/ui/button.tsx

   Spec Reference: docs/REACT-DESIGN-MAP/07-CATALOG-PAGE.md

   ========================================================================== */

/* ---------------------------------------------------------------------------
   S356.1: CATALOG PAGE LAYOUT — 4-column grid with sidebar
   React: <div className="grid lg:grid-cols-4 gap-8">
   Sidebar: lg:col-span-1, Main: lg:col-span-3
   --------------------------------------------------------------------------- */
.mk-catalog-layout,
.woocommerce-products-header + .wp-block-columns,
.page-template-archive-product .wp-block-columns.is-layout-flex {
  display: grid !important;
  grid-template-columns: 1fr !important; /* Mobile: single column */
  gap: 2rem !important; /* gap-8 = 32px */
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 1rem 1rem 3rem !important; /* px-4 py-12 */
}

@media (min-width: 1024px) {
  .mk-catalog-layout,
  .woocommerce-products-header + .wp-block-columns,
  .page-template-archive-product .wp-block-columns.is-layout-flex {
    grid-template-columns: 1fr 3fr !important; /* lg:grid-cols-4 → 1/4 + 3/4 */
  }
}

/* ---------------------------------------------------------------------------
   S356.2: SIDEBAR CONTAINER — sticky positioning
   React: <div className="sticky top-24 space-y-6">
   top-24 = 6rem (96px), space-y-6 = 1.5rem (24px) gap
   --------------------------------------------------------------------------- */
.mk-catalog__sidebar,
.mk-catalog-sidebar {
  position: sticky !important;
  top: 6rem !important; /* top-24 = 96px (accounts for header) */
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important; /* space-y-6 = 24px */
  align-self: start !important; /* Prevent stretch in grid */
  max-height: calc(100vh - 8rem) !important;
  overflow-y: auto !important;
}

/* On mobile, sidebar stacks above content - not sticky */
@media (max-width: 1279px) {
  .mk-catalog__sidebar,
  .mk-catalog-sidebar {
    position: relative !important;
    top: 0 !important;
    order: -1 !important; /* Ensure sidebar appears first when stacked */
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* ---------------------------------------------------------------------------
   S356.3: CATEGORY SECTION — primary background with cream text
   React: <div className="bg-primary text-primary-foreground rounded-sm p-6">
   bg-primary = hsl(160 30% 28%), rounded-sm = 2px, p-6 = 24px
   --------------------------------------------------------------------------- */
.mk-catalog__sidebar .mk-category-section,
.mk-catalog-sidebar .mk-category-section,
.mk-filter-group--categories {
  background: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;
  border-radius: 0.125rem !important; /* rounded-sm = 2px */
  padding: 1.5rem !important; /* p-6 = 24px */
}

/* Category section heading */
.mk-category-section h3,
.mk-filter-group--categories h3,
.mk-filter-group--categories .wp-block-heading {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  line-height: 1.75rem !important; /* 28px */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
  margin-top: 0 !important;
  color: inherit !important;
}

/* Category list container */
.mk-category-section ul,
.mk-filter-group--categories ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important; /* space-y-3 = 12px */
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Category buttons */
.mk-category-section button,
.mk-category-section a,
.mk-filter-group--categories .wc-block-product-categories-list-item a,
.mk-filter-group--categories a {
  font-size: 0.875rem !important; /* text-sm = 14px */
  line-height: 1.25rem !important; /* 20px */
  width: 100% !important;
  text-align: left !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%) / 0.8) !important; /* text-primary-foreground/80 */
}

.mk-category-section button:hover,
.mk-category-section a:hover,
.mk-filter-group--categories .wc-block-product-categories-list-item a:hover,
.mk-filter-group--categories a:hover {
  color: hsl(var(--gold, 42 55% 58%)) !important; /* hover:text-gold */
}

/* Active category */
.mk-category-section button.is-active,
.mk-category-section a.is-active,
.mk-filter-group--categories .wc-block-product-categories-list-item.is-current > a,
.mk-filter-group--categories .wc-block-product-categories-list-item--current > a,
.mk-filter-group--categories .current-cat > a {
  color: hsl(var(--gold, 42 55% 58%)) !important; /* text-gold */
  font-weight: 500 !important; /* font-medium */
}

/* ---------------------------------------------------------------------------
   S356.4: FILTERS CARD — shadow-card with padding
   React: <div className="bg-card rounded-sm p-6 shadow-card">
   bg-card = hsl(40 30% 96%), rounded-sm = 2px, p-6 = 24px
   --------------------------------------------------------------------------- */
.mk-catalog__sidebar .mk-filter-card,
.mk-catalog-sidebar .mk-filter-card,
.mk-filter-group--filters {
  background: hsl(var(--card, 40 30% 96%)) !important;
  border-radius: 0.125rem !important; /* rounded-sm = 2px */
  padding: 1.5rem !important; /* p-6 = 24px */
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important; /* shadow-card */
}

/* Filters card heading */
.mk-filter-card h3,
.mk-filter-group--filters h3,
.mk-filter-group--filters .wp-block-heading {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
  margin-top: 0 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

/* ---------------------------------------------------------------------------
   S356.5: FILTER LABELS — text-sm text-muted-foreground mb-2
   --------------------------------------------------------------------------- */
.mk-filter-card label,
.mk-filter-group--filters label,
.mk-filter-label {
  display: block !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  line-height: 1.25rem !important; /* 20px */
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-bottom: 0.5rem !important; /* mb-2 = 8px */
}

.mk-filter-card .mk-filter-field,
.mk-filter-group--filters .mk-filter-field {
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
}

.mk-filter-card .mk-filter-field:last-child,
.mk-filter-group--filters .mk-filter-field:last-child {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   S356.6: SELECT/DROPDOWN TRIGGER — 40px height, border-input, rounded-md
   --------------------------------------------------------------------------- */
.mk-catalog__sidebar select,
.mk-catalog-sidebar select,
.mk-filter-select,
.mk-price-select,
.mk-sort-select {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 2.5rem !important; /* h-10 = 40px */
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  line-height: 1.25rem !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  background: hsl(var(--background, 36 33% 94%)) !important;
  border: 1px solid hsl(var(--input, 36 20% 85%)) !important;
  border-radius: 0.375rem !important; /* rounded-md = 6px */
  cursor: pointer !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23577066' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1rem 1rem !important;
  padding-right: 2.5rem !important;
}

.mk-catalog__sidebar select:focus,
.mk-catalog-sidebar select:focus,
.mk-filter-select:focus,
.mk-price-select:focus,
.mk-sort-select:focus {
  outline: none !important;
  border-color: hsl(var(--ring, 160 30% 28%)) !important;
  box-shadow: 0 0 0 2px hsl(var(--background, 36 33% 94%)), 0 0 0 4px hsl(var(--ring, 160 30% 28%)) !important;
}

/* ---------------------------------------------------------------------------
   S356.7: TIME FILTERS SECTION — bg-card rounded-sm p-4 shadow-card
   --------------------------------------------------------------------------- */
.mk-time-filter-card,
.mk-filter-group--time {
  background: hsl(var(--card, 40 30% 96%)) !important;
  border-radius: 0.125rem !important;
  padding: 1rem !important;
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important;
}

.mk-time-filter-card h3,
.mk-filter-group--time h3 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

.mk-time-filter-card .mk-time-filters,
.mk-filter-group--time .mk-time-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.mk-time-filter-btn {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mk-time-filter-btn:hover {
  background: hsl(var(--muted, 36 20% 90%)) !important;
}

.mk-time-filter-btn.is-active,
.mk-time-filter-btn[aria-pressed="true"],
.mk-time-filter-btn[data-active="true"] {
  background: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;
}

/* ---------------------------------------------------------------------------
   S356.8: QUICK FILTERS SECTION — bg-card rounded-sm p-4 shadow-card space-y-4
   --------------------------------------------------------------------------- */
.mk-quick-filter-card,
.mk-filter-group--quick {
  background: hsl(var(--card, 40 30% 96%)) !important;
  border-radius: 0.125rem !important;
  padding: 1rem !important;
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important;
}

.mk-quick-filter-card h3,
.mk-filter-group--quick h3 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin-bottom: 1rem !important;
  margin-top: 0 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

.mk-quick-filter-card .mk-quick-filters,
.mk-filter-group--quick .mk-quick-filters,
.mk-sidebar-qf {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* ---------------------------------------------------------------------------
   S356.9: SWITCH TOGGLE — 44x24px track with 20px thumb
   --------------------------------------------------------------------------- */
.mk-qf-toggle,
.mk-sqf-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  cursor: pointer !important;
}

.mk-qf-toggle__label,
.mk-sqf-toggle__label {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  flex: 1 !important;
}

.mk-qf-toggle__track,
.mk-sqf-toggle__track {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 2.75rem !important; /* w-11 = 44px */
  height: 1.5rem !important; /* h-6 = 24px */
  flex-shrink: 0 !important;
  border: 2px solid transparent !important;
  border-radius: 9999px !important;
  background: hsl(var(--input, 36 20% 85%)) !important;
  cursor: pointer !important;
  transition: background-color 150ms ease !important;
}

.mk-qf-toggle.is-active .mk-qf-toggle__track,
.mk-sqf-toggle.is-active .mk-sqf-toggle__track,
.mk-qf-toggle__track.is-checked,
.mk-sqf-toggle__track.is-checked {
  background: hsl(var(--primary, 160 30% 28%)) !important;
}

.mk-qf-toggle__thumb,
.mk-sqf-toggle__thumb {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 1.25rem !important; /* w-5 = 20px */
  height: 1.25rem !important;
  border-radius: 9999px !important;
  background: hsl(var(--background, 36 33% 94%)) !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  pointer-events: none !important;
  transition: transform 150ms ease !important;
}

.mk-qf-toggle.is-active .mk-qf-toggle__thumb,
.mk-sqf-toggle.is-active .mk-sqf-toggle__thumb,
.mk-qf-toggle__thumb.is-checked,
.mk-sqf-toggle__thumb.is-checked {
  transform: translateX(1.25rem) !important;
}

.mk-qf-toggle input[type="checkbox"],
.mk-sqf-toggle input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.mk-qf-toggle input[type="checkbox"]:focus-visible + .mk-qf-toggle__track,
.mk-sqf-toggle input[type="checkbox"]:focus-visible + .mk-sqf-toggle__track {
  box-shadow: 0 0 0 2px hsl(var(--background, 36 33% 94%)), 0 0 0 4px hsl(var(--ring, 160 30% 28%)) !important;
}

/* ---------------------------------------------------------------------------
   S356.10: CLEAR FILTERS BUTTON — outline variant, full width
   --------------------------------------------------------------------------- */
.mk-clear-filters-btn,
#mk-clear-filters {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  height: 2.5rem !important;
  padding: 0.5rem 1.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  white-space: nowrap !important;
  border: 1px solid hsl(var(--primary, 160 30% 28%)) !important;
  border-radius: 0.25rem !important;
  background: transparent !important;
  color: hsl(var(--primary, 160 30% 28%)) !important;
  cursor: pointer !important;
  transition: all 300ms ease !important;
}

.mk-clear-filters-btn:hover,
#mk-clear-filters:hover {
  background: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;
}

.mk-clear-filters-btn:focus-visible,
#mk-clear-filters:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(var(--background, 36 33% 94%)), 0 0 0 4px hsl(var(--ring, 160 30% 28%)) !important;
}

.mk-clear-filters-btn svg,
#mk-clear-filters svg {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
}

.mk-clear-filters-btn[data-visible="false"],
#mk-clear-filters:not(.visible) {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   S356.11: MAIN CONTENT HEADER — mb-8, H1, description, action buttons
   --------------------------------------------------------------------------- */
.mk-catalog-header,
.mk-catalog__main .mk-catalog-header {
  margin-bottom: 2rem !important;
}

.mk-catalog-header h1,
.mk-catalog__main h1 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  margin-bottom: 1rem !important;
  margin-top: 0 !important;
}

@media (min-width: 768px) {
  .mk-catalog-header h1,
  .mk-catalog__main h1 {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
  }
}

.mk-catalog-header p,
.mk-catalog__main > p {
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  line-height: 1.625 !important;
  max-width: 48rem !important;
  margin-bottom: 1.5rem !important;
}

.mk-catalog-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}

/* ---------------------------------------------------------------------------
   S356.12: TOOLBAR — results count, active filters badge, sort, view toggle
   --------------------------------------------------------------------------- */
.mk-catalog-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
}

.mk-catalog-toolbar .mk-results-count,
.mk-results-count {
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  font-size: 0.875rem !important;
}

.mk-results-count strong,
.mk-results-count .count {
  font-weight: 600 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

.mk-active-filters-badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  padding: 0.125rem 0.625rem !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  font-weight: 600 !important;
  background: hsl(var(--secondary, 36 25% 88%)) !important;
  color: hsl(var(--secondary-foreground, 160 30% 18%)) !important;
  transition: background-color 150ms ease !important;
}

.mk-active-filters-badge:hover {
  background: hsl(var(--secondary, 36 25% 88%) / 0.8) !important;
}

.mk-catalog-toolbar select,
.mk-sort-dropdown {
  width: 200px !important;
  height: 2.5rem !important;
}

/* ---------------------------------------------------------------------------
   S356.13: VIEW MODE TOGGLE — grid/list buttons
   --------------------------------------------------------------------------- */
.mk-view-toggle {
  display: flex !important;
  border: 1px solid hsl(var(--border, 36 20% 82%)) !important;
  border-radius: 0.375rem !important;
  overflow: hidden !important;
}

.mk-view-toggle button,
.mk-view-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.25rem !important;
  padding: 0 1rem !important;
  border: none !important;
  background: transparent !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
}

.mk-view-toggle button:first-child,
.mk-view-toggle-btn--grid {
  border-radius: 0.375rem 0 0 0.375rem !important;
}

.mk-view-toggle button:last-child,
.mk-view-toggle-btn--list {
  border-radius: 0 0.375rem 0.375rem 0 !important;
}

.mk-view-toggle button:not(.is-active),
.mk-view-toggle-btn:not(.is-active) {
  background: transparent !important;
}

.mk-view-toggle button:not(.is-active):hover,
.mk-view-toggle-btn:not(.is-active):hover {
  background: hsl(var(--accent, 42 55% 58%)) !important;
  color: hsl(var(--accent-foreground, 160 30% 15%)) !important;
}

.mk-view-toggle button.is-active,
.mk-view-toggle-btn.is-active {
  background: hsl(var(--primary, 160 30% 28%)) !important;
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important;
}

.mk-view-toggle button.is-active:hover,
.mk-view-toggle-btn.is-active:hover {
  background: hsl(var(--primary, 160 30% 28%) / 0.9) !important;
}

.mk-view-toggle svg,
.mk-view-toggle-btn svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* ---------------------------------------------------------------------------
   S356.14: PRODUCT GRID — responsive columns with gap
   --------------------------------------------------------------------------- */
.mk-catalog-grid,
.mk-catalog--grid .products,
.mk-catalog__main .wp-block-woocommerce-product-collection {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}

@media (min-width: 640px) {
  .mk-catalog-grid,
  .mk-catalog--grid .products,
  .mk-catalog__main .wp-block-woocommerce-product-collection {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  .mk-catalog-grid,
  .mk-catalog--grid .products,
  .mk-catalog__main .wp-block-woocommerce-product-collection {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.mk-catalog--list .products,
.mk-catalog-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* ---------------------------------------------------------------------------
   S356.15: EMPTY STATE — centered, muted background
   --------------------------------------------------------------------------- */
.mk-catalog-empty,
.mk-no-products {
  text-align: center !important;
  padding: 4rem 1rem !important;
  background: hsl(var(--muted, 36 20% 90%) / 0.3) !important;
  border-radius: 0.125rem !important;
}

.mk-catalog-empty p,
.mk-no-products p {
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-bottom: 0.5rem !important;
}

.mk-catalog-empty .mk-link-clear,
.mk-no-products a {
  color: hsl(var(--primary, 160 30% 28%)) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  background: transparent !important;
  padding: 0.5rem 1.5rem !important;
  margin-top: 0.5rem !important;
}

/* ---------------------------------------------------------------------------
   S356.16: PAST AUCTION RESULTS CARD
   --------------------------------------------------------------------------- */
.mk-past-auction-card {
  margin-bottom: 1.5rem !important;
  background: hsl(var(--muted, 36 20% 90%) / 0.5) !important;
  border-radius: 0.125rem !important;
  padding: 1rem !important;
  border: 1px solid hsl(var(--border, 36 20% 82%)) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.mk-past-auction-card h3 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  margin: 0 0 0.25rem 0 !important;
}

.mk-past-auction-card .mk-auction-date {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

.mk-past-auction-card .mk-total-amount {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.5rem !important;
  line-height: 2rem !important;
  font-weight: 700 !important;
  color: hsl(var(--gold, 42 55% 58%)) !important;
}

.mk-past-auction-card .mk-total-label {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

/* ---------------------------------------------------------------------------
   S356.17: HELP/INFO SECTION — secondary background
   --------------------------------------------------------------------------- */
.mk-sidebar-help,
.mk-filter-group--help {
  background: hsl(var(--secondary, 36 25% 88%) / 0.3) !important;
  border-radius: 0.125rem !important;
  padding: 1.5rem !important;
}

.mk-sidebar-help h3 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
  color: hsl(var(--foreground, 160 30% 18%)) !important;
}

.mk-sidebar-help ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mk-sidebar-help li {
  font-size: 0.75rem !important;
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
}

/* ==========================================================================
   END SECTION S356: CATALOG SIDEBAR 1:1 PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION S360: SINGLE PRODUCT PARITY FIXES (2026-04-01)
   Reference: docs/PARITY-REPORT.md
   Issues: SP-2, SP-4, SP-6, SP-7, SP-10
   ========================================================================== */

/* SP-2: Image gallery opacity fix for no-JS
   WooCommerce sets opacity:0 and reveals via JS.
   This ensures image is visible without JavaScript.
   ------------------------------------------------------------------ */
.woocommerce-product-gallery {
  opacity: 1 !important;
}

/* SP-4: Trust badges text size
   React: text-xs (12px), Inter font, simple span
   WordPress: Using H4 with Playfair Display - too large
   ------------------------------------------------------------------ */
.mk-trust-badges__item h4,
.mk-trust-badges__item .wp-block-heading {
  font-size: 0.75rem !important;
  font-family: var(--wp--preset--font-family--inter, 'Inter', system-ui, sans-serif) !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  line-height: 1.25 !important;
}

/* Trust badges: Only show title, hide description text
   React only has single line "Autentiškumo garantija" etc.
   ------------------------------------------------------------------ */
.mk-trust-badges__item > p:last-child {
  display: none !important;
}

/* SP-6: Pricing card flex layout
   React: flex justify-between (label left, value right)
   WordPress: Using <br> causing stacked layout
   ------------------------------------------------------------------ */
.mk-pricing-card__row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 0.75rem !important;
}

.mk-pricing-card__row:last-child {
  margin-bottom: 0 !important;
}

.mk-pricing-card__row br {
  display: none !important;
}

.mk-pricing-card__label {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.875rem !important;
}

.mk-pricing-card__value {
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  text-align: right !important;
}

.mk-pricing-card__value--gold {
  color: hsl(var(--gold)) !important;
  font-weight: 500 !important;
}

/* SP-7: Add to cart gold button
   React: variant="gold" size="xl" w-full
   ------------------------------------------------------------------ */
.single-product .single_add_to_cart_button,
.single-product .wc-block-add-to-cart-form button[type="submit"] {
  background-color: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  width: 100% !important;
  height: 3.5rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  border-radius: var(--radius) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 300ms !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.single-product .single_add_to_cart_button:hover,
.single-product .wc-block-add-to-cart-form button[type="submit"]:hover {
  background-color: hsl(var(--gold-light)) !important;
}

/* SP-10: Column gap
   React: gap-12 = 3rem (48px)
   ------------------------------------------------------------------ */
.mk-product-detail > .wp-block-columns,
.single-product .mk-product-detail .wp-block-columns {
  gap: 3rem !important;
}

/* Trust badges icon container */
.mk-trust-badges__item .mk-trust-badges__icon {
  width: 48px !important;
  height: 48px !important;
  background-color: hsl(var(--muted) / 0.3) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0.5rem !important;
}

.mk-trust-badges__item .mk-trust-badges__icon svg {
  width: 24px !important;
  height: 24px !important;
  color: hsl(var(--primary)) !important;
}

/* Trust badges container grid */
.mk-trust-badges .wp-block-columns {
  gap: 1rem !important;
}

.mk-trust-badges__item {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 1rem !important;
  background-color: hsl(var(--muted) / 0.3) !important;
  border-radius: var(--radius) !important;
}

/* Back link styling (injected via PHP hook)
   React: inline-flex items-center gap-2 text-muted-foreground hover:text-primary mb-8
   ------------------------------------------------------------------ */
.mk-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: hsl(var(--muted-foreground)) !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  margin-bottom: 2rem !important;
  transition: color 200ms !important;
}

.mk-back-link:hover {
  color: hsl(var(--primary)) !important;
}

.mk-back-link svg {
  width: 16px !important;
  height: 16px !important;
}

/* ==========================================================================
   END SECTION S360: SINGLE PRODUCT PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S361: CRITICAL HEADER NAVIGATION DESKTOP FIX
   Date: 2026-04-01

   Problem: Navigation was hidden on desktop because mobile CSS rules
   (max-height: 0, opacity: 0) were applied globally without media query,
   overriding the desktop display rules.

   This section provides a definitive desktop override that comes LAST
   in the cascade, ensuring navigation displays correctly at xl+ (1280px+).
   Breakpoint raised from 1024px to 1280px to fit all 6 nav items.

   React reference: Header.tsx
   - Desktop nav: "hidden lg:flex items-center gap-8"
   - Links: "text-sm font-medium text-foreground hover:text-primary"
   ========================================================================== */

@media (min-width: 1280px) {
  /* CRITICAL: Ensure responsive container displays at full opacity on desktop */
  .mk-header__nav .wp-block-navigation__responsive-container,
  .mk-header .wp-block-navigation .wp-block-navigation__responsive-container,
  .site-header .wp-block-navigation .wp-block-navigation__responsive-container {
    display: flex !important;
    max-height: none !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    visibility: visible !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: none !important;
  }

  /* Ensure navigation container shows as horizontal row */
  .mk-header__nav .wp-block-navigation__responsive-container .wp-block-navigation__container,
  .mk-header .wp-block-navigation .wp-block-navigation__container,
  .site-header .wp-block-navigation .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2rem !important; /* gap-8 = 32px */
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Ensure content wrapper displays properly */
  .mk-header__nav .wp-block-navigation__responsive-container-content,
  .mk-header .wp-block-navigation .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2rem !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
  }

  /* Ensure close/dialog wrappers don't interfere */
  .mk-header__nav .wp-block-navigation__responsive-close,
  .mk-header__nav .wp-block-navigation__responsive-dialog {
    display: contents !important;
  }

  /* Hide hamburger menu button on desktop */
  .mk-header__nav .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  /* Hide close button on desktop */
  .mk-header__nav .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  /* Navigation links styling */
  .mk-header__nav .wp-block-navigation-item__content,
  .mk-header .wp-block-navigation-item__content {
    font-size: 0.875rem !important; /* text-sm = 14px */
    font-weight: 500 !important; /* font-medium */
    color: hsl(160 30% 18%) !important; /* foreground */
    text-decoration: none !important;
    padding: 0.5rem 0 !important;
    transition: color 150ms ease !important;
  }

  .mk-header__nav .wp-block-navigation-item__content:hover,
  .mk-header .wp-block-navigation-item__content:hover {
    color: hsl(160 30% 28%) !important; /* primary */
  }

  /* Navigation items layout */
  .mk-header__nav .wp-block-navigation-item,
  .mk-header .wp-block-navigation-item {
    display: flex !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   END SECTION S361: CRITICAL HEADER NAVIGATION DESKTOP FIX
   ========================================================================== */

/* ==========================================================================
   SECTION S362: PIRKIMAS PAGE PARITY FIXES (2026-04-01)
   Source: docs/PARITY-REPORT.md - Pirkimas section
   Reference: src/pages/HowToBuy.tsx

   Issues fixed:
   - PIR-1: Feature card background missing (transparent -> bg-card)
   - PIR-2: Icon color mismatch (wrong green shade)
   - PIR-3: CTA button sizing (height, padding, font-size, shadow)

   Verification: Playwright screenshots with javaScriptEnabled: false
   ========================================================================== */

/* ------------------------------------------------------------------
   PIR-1: Feature card background and shadow
   React: bg-card rounded-sm shadow-card p-6 text-center
   - Background: rgb(248, 246, 242) = hsl(var(--card))
   - Box-shadow: rgba(32, 60, 50, 0.06) 0px 2px 12px -2px = var(--shadow-card)
   WordPress was: transparent, no shadow
   ------------------------------------------------------------------ */
body.page-id-16 .mk-card,
body.page-id-16 .wp-block-group.mk-card,
.page-pirkimas .mk-card,
.page-pirkimas .wp-block-group.mk-card {
  background-color: hsl(var(--card)) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important; /* p-6 = 24px */
  text-align: center !important;
  border-radius: 0 !important; /* rounded-sm = 0px per custom config */
}

/* Card hover effect */
body.page-id-16 .mk-card:hover,
.page-pirkimas .mk-card:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* ------------------------------------------------------------------
   PIR-2: Icon color fix
   React: text-primary = rgb(50, 93, 79) = hsl(160 30% 28%)
   WordPress was: rgb(32, 59, 50) - slightly different shade
   ------------------------------------------------------------------ */
body.page-id-16 .mk-card svg,
.page-pirkimas .mk-card svg {
  color: hsl(160 30% 28%) !important;
  width: 40px !important; /* w-10 = 40px */
  height: 40px !important; /* h-10 = 40px */
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1rem !important; /* mb-4 = 16px */
  display: block !important;
}

/* ------------------------------------------------------------------
   PIR-3: CTA button sizing
   React: Button variant="catalog" size="lg"
   - Height: 48px (h-12)
   - Padding: 0 32px (px-8)
   - Font-size: 16px (text-base)
   - Font-weight: 500 (font-medium)
   - Box-shadow: shadow-elegant
   - Letter-spacing: 0.025em (tracking-wide)
   WordPress was: 53px height, 14px font, no shadow
   ------------------------------------------------------------------ */
body.page-id-16 .wp-block-button__link,
.page-pirkimas .wp-block-button__link {
  height: 3rem !important; /* h-12 = 48px */
  padding: 0 2rem !important; /* px-8 = 32px */
  font-size: 1rem !important; /* text-base = 16px */
  font-weight: 500 !important;
  box-shadow: var(--shadow-elegant) !important;
  letter-spacing: 0.025em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.page-id-16 .wp-block-button__link:hover,
.page-pirkimas .wp-block-button__link:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* ==========================================================================
   END SECTION S362: PIRKIMAS PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S363: PARDAVIMAS PAGE PARITY FIXES (2026-04-01)
   Source: docs/PARITY-REPORT.md - Pardavimas section
   Reference: src/pages/HowToSell.tsx

   CRITICAL FIXES:
   - PAR-1: Step badge 48x48 cream -> 32x32 GOLD rounded-full
   - PAR-2: Step icon 28x28 -> 40x40
   - PAR-3: Form card missing shadow-elegant
   - PAR-4: Commission section border-radius 0px (FIXED S406 - was incorrectly 4px)
   ========================================================================== */

/* ------------------------------------------------------------------
   PAR-1: Step Number Badge - GOLD circle 32x32px

   React: w-8 h-8 bg-gold text-foreground rounded-full absolute -top-3 -left-3
   - Size: 32x32px
   - Background: rgb(207, 171, 89) = GOLD
   - Border-radius: 9999px (full circle)
   - Position: absolute, -12px top/left

   WordPress was: 48x48px, cream background, 0px radius
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step-number,
.page-pardavimas .mk-sell-step-number {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  background-color: rgb(207, 171, 89) !important;
  background: rgb(207, 171, 89) !important;
  border-radius: 9999px !important;
  position: absolute !important;
  top: -12px !important;
  left: -12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: rgb(32, 60, 50) !important;
  font-family: var(--wp--preset--font-family--inter), system-ui, sans-serif !important;
  line-height: 1 !important;
  z-index: 1 !important;
}

/* ------------------------------------------------------------------
   PAR-2: Step Icons 40x40px (w-10 h-10)

   React: w-10 h-10 = 40x40px
   WordPress was: 28x28px (from HTML attributes)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step-icon svg,
body.page-id-17 .mk-sell-step-card svg:not(.mk-sell-step-number svg),
.page-pardavimas .mk-sell-step-icon svg,
.page-pardavimas .mk-sell-step-card svg {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

/* ------------------------------------------------------------------
   PAR-3: Form Card Shadow-Elegant

   React: bg-card rounded-sm shadow-elegant p-8
   - shadow-elegant = rgba(32, 60, 50, 0.08) 0px 4px 20px -4px

   WordPress was: no shadow
   ------------------------------------------------------------------ */
body.page-id-17 .wpcf7,
body.page-id-17 .wpcf7-form,
body.page-id-17 .wp-block-group:has(.wpcf7),
.page-pardavimas .wpcf7,
.page-pardavimas .wpcf7-form {
  box-shadow: rgba(32, 60, 50, 0.08) 0px 4px 20px -4px !important;
}

/* ------------------------------------------------------------------
   PAR-4: Commission Section Border Radius 0px (rounded-sm - FIXED S406)

   React: bg-primary rounded-sm
   - Custom Tailwind config: rounded-sm = calc(var(--radius) - 4px) = 0.25rem - 4px = 0px
   - See tailwind.config.ts lines 78-82: borderRadius overrides
   - This is NOT default Tailwind which uses rounded-sm = 2px

   FIXED: S363 v1.37.6 incorrectly set 4px, corrected to 0px per React config
   ------------------------------------------------------------------ */
body.page-id-17 .mk-section--dark,
body.page-id-17 [class*="forest-green-background"],
body.page-id-17 .has-forest-green-background-color,
.page-pardavimas .mk-section--dark,
.page-pardavimas [class*="forest-green-background"],
.page-pardavimas .has-forest-green-background-color {
  border-radius: 0 !important;
}

/* ==========================================================================
   END SECTION S363: PARDAVIMAS PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S364: GALLERY PAGE PARITY FIXES (2026-04-01)
   Source: docs/PARITY-REPORT.md - Gallery section
   Reference: src/pages/Gallery.tsx, src/components/gallery/GalleryCard.tsx

   CRITICAL FINDING: WooCommerce Product Collection requires JavaScript.
   These CSS fixes ensure proper styling when JS loads.

   FIXES:
   - GAL-1: Product template visibility (no-JS fallback)
   - GAL-2: Category filter button styling
   - GAL-3: Product image aspect ratio 4:5
   - GAL-4: Product card shadow
   - GAL-5: Product card content padding
   - GAL-6: Product title typography
   - GAL-7: Product price typography
   - GAL-8: Add to cart button gold variant
   ========================================================================== */

/* ------------------------------------------------------------------
   GAL-1: Product Template Visibility (no-JS fallback)

   WooCommerce Product Collection uses client-side rendering.
   These rules ensure base visibility if JS is slow to load.
   ------------------------------------------------------------------ */
.wc-block-product-template {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
}

.wc-block-product-template > li.wc-block-product {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ------------------------------------------------------------------
   GAL-2: Category Filter Buttons

   React:
   - Active: variant="default" (forest green bg, white text)
   - Inactive: variant="outline" (transparent, border)
   - Size: sm (height 2.25rem, padding 0 0.75rem, font 0.875rem)
   ------------------------------------------------------------------ */
.mk-gallery-filter .wp-block-button__link {
  height: 2.25rem !important;
  padding: 0 0.75rem !important;
  font-size: 0.875rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.25rem !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
  line-height: 1 !important;
}

/* Active filter button (default variant - forest green) */
.mk-gallery-filter--active .wp-block-button__link {
  background-color: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important;
  border: none !important;
}

/* Inactive filter button (outline variant) */
.mk-gallery-filter:not(.mk-gallery-filter--active) .wp-block-button__link {
  background-color: transparent !important;
  color: hsl(160 30% 18%) !important;
  border: 1px solid hsl(36 20% 82%) !important;
}

.mk-gallery-filter:not(.mk-gallery-filter--active) .wp-block-button__link:hover {
  background-color: hsl(36 25% 88% / 0.5) !important;
  border-color: hsl(160 30% 28%) !important;
  color: hsl(160 30% 28%) !important;
}

/* ------------------------------------------------------------------
   GAL-3: Product Image Aspect Ratio 4:5

   React: aspect-[4/5]
   WordPress default: 3:4

   4:5 = 0.8 width/height ratio (slightly wider than 3:4)
   ------------------------------------------------------------------ */
.mk-gallery-grid .wc-block-components-product-image,
.mk-gallery-grid .wc-block-components-product-image img,
.mk-gallery-grid .wc-block-components-product-image--aspect-ratio-3-4,
.mk-gallery-grid [data-aspect-ratio="3/4"] {
  aspect-ratio: 4/5 !important;
}

.mk-gallery-grid .wc-block-components-product-image img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* ------------------------------------------------------------------
   GAL-4: Product Card Shadow

   React:
   - Default: shadow-card = 0 2px 12px -2px hsl(160 30% 18% / 0.06)
   - Hover: shadow-hover = 0 8px 30px -8px hsl(160 30% 18% / 0.12)
   ------------------------------------------------------------------ */
.mk-gallery-grid .wc-block-product {
  background-color: hsl(40 30% 96%) !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.mk-gallery-grid .wc-block-product:hover {
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important;
}

/* ------------------------------------------------------------------
   GAL-5: Product Card Content Padding

   React: p-5 = 1.25rem (20px) padding on content area
   ------------------------------------------------------------------ */
.mk-gallery-grid .wc-block-product > *:not(.wc-block-components-product-image):not(:first-child) {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.mk-gallery-grid .wc-block-product > :last-child {
  padding-bottom: 1.25rem !important;
}

/* First content element after image needs top padding */
.mk-gallery-grid .wc-block-product .wc-block-components-product-image + * {
  padding-top: 1.25rem !important;
}

/* ------------------------------------------------------------------
   GAL-6: Product Title Typography

   React:
   - font-display = Playfair Display
   - text-lg = 1.125rem (18px)
   - font-semibold = 600
   - text-foreground = hsl(160 30% 18%)
   - mb-1 = 0.25rem margin-bottom
   - line-clamp-1 = single line with ellipsis
   ------------------------------------------------------------------ */
.mk-gallery-grid .wc-block-product .wc-block-components-product-title,
.mk-gallery-grid .wc-block-product h3,
.mk-gallery-grid .wc-block-product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--playfair-display) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: hsl(160 30% 18%) !important;
  margin-bottom: 0.25rem !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

/* ------------------------------------------------------------------
   GAL-7: Product Price Typography

   React:
   - text-xl = 1.25rem (20px)
   - font-bold = 700
   - text-primary = hsl(160 30% 28%)
   - mb-4 = 1rem margin-bottom
   ------------------------------------------------------------------ */
.mk-gallery-grid .wc-block-components-product-price,
.mk-gallery-grid .wc-block-product .price {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: hsl(160 30% 28%) !important;
  margin-bottom: 1rem !important;
  font-family: var(--wp--preset--font-family--playfair-display) !important;
}

/* ------------------------------------------------------------------
   GAL-8: Add to Cart Button - Gold Variant

   React:
   - variant="gold"
   - bg-gold = hsl(42 55% 58%) = #C4A255
   - text-foreground-dark = hsl(160 30% 18%)
   - w-full = width 100%
   - height ~40px (2.5rem)
   - Icon + text with gap
   ------------------------------------------------------------------ */
.mk-gallery-grid .wc-block-components-product-button .wp-block-button__link,
.mk-gallery-grid .add_to_cart_button,
.mk-gallery-grid .wc-block-product .button {
  background-color: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important;
  width: 100% !important;
  height: 2.5rem !important;
  font-weight: 500 !important;
  border-radius: 0.25rem !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-size: 0.875rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: background-color 0.2s ease !important;
}

.mk-gallery-grid .wc-block-components-product-button .wp-block-button__link:hover,
.mk-gallery-grid .add_to_cart_button:hover,
.mk-gallery-grid .wc-block-product .button:hover {
  background-color: hsl(42 45% 75%) !important;
  color: hsl(160 30% 18%) !important;
}

/* ==========================================================================
   END SECTION S364: GALLERY PAGE PARITY FIXES
   ========================================================================== */


/* ==========================================================================
   SECTION S365: CATALOG PAGE PARITY FIXES (2026-04-01)
   Source: docs/PARITY-REPORT.md - Catalog section
   Reference: src/pages/Catalog.tsx, src/components/auction/ArtworkCard.tsx
   ========================================================================== */

/* CAT-1: Category list visibility fix
   React: CategorySidebar.tsx lines 40-67
   - All category buttons should be visible with counts
   - text-sm (14px), text-primary-foreground/80
   Issue: Category list items may be hidden by overflow or display:none
*/
.mk-catalog-sidebar .mk-category-section ul,
.mk-filter-group--categories ul,
.mk-category-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important; /* space-y-3 */
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: none !important; /* Override any height restrictions */
  overflow: visible !important; /* Ensure all items show */
}

.mk-catalog-sidebar .mk-category-section li,
.mk-filter-group--categories li {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
}

/* Category button styling - exact React match */
.mk-catalog-sidebar .mk-category-section button,
.mk-catalog-sidebar .mk-category-section a,
.mk-filter-group--categories button,
.mk-filter-group--categories a {
  font-size: 0.875rem !important; /* text-sm = 14px */
  line-height: 1.25rem !important; /* 20px */
  width: 100% !important;
  text-align: left !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: hsl(var(--primary-foreground, 40 30% 96%) / 0.8) !important; /* text-primary-foreground/80 */
  transition: color 150ms ease !important;
  cursor: pointer !important;
  white-space: normal !important; /* Allow text wrapping if needed */
  overflow: visible !important;
  text-overflow: clip !important;
}

.mk-catalog-sidebar .mk-category-section button:hover,
.mk-catalog-sidebar .mk-category-section a:hover,
.mk-filter-group--categories button:hover,
.mk-filter-group--categories a:hover {
  color: hsl(var(--gold, 42 55% 58%)) !important; /* hover:text-gold */
}

/* Active category state */
.mk-catalog-sidebar .mk-category-section button.is-active,
.mk-catalog-sidebar .mk-category-section a.is-active,
.mk-filter-group--categories button.is-active,
.mk-filter-group--categories a.is-active {
  color: hsl(var(--gold, 42 55% 58%)) !important; /* text-gold */
  font-weight: 500 !important; /* font-medium */
}

/* CAT-2: Time filter buttons full width and visible text
   React: Catalog.tsx lines 153-159
   - Button: w-full text-left px-3 py-2 rounded-md text-sm
   - Should show full text like "Baigiasi per 1 val."
*/
.mk-time-filter-card .mk-time-filters button,
.mk-filter-group--time button,
.mk-time-filter-btn {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 */
  border-radius: 0.375rem !important; /* rounded-md */
  font-size: 0.875rem !important; /* text-sm = 14px */
  line-height: 1.25rem !important; /* 20px */
  color: hsl(var(--foreground, 160 30% 18%)) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 150ms ease, color 150ms ease !important;
  white-space: normal !important; /* Allow text wrapping */
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 100% !important;
}

.mk-time-filter-btn:hover {
  background: hsl(var(--muted, 36 20% 90%)) !important; /* hover:bg-muted */
}

.mk-time-filter-btn.is-active,
.mk-time-filter-btn[aria-pressed="true"],
.mk-time-filter-btn[data-active="true"] {
  background: hsl(var(--primary, 160 30% 28%)) !important; /* bg-primary */
  color: hsl(var(--primary-foreground, 40 30% 96%)) !important; /* text-primary-foreground */
}

/* CAT-3: Product image aspect ratio 4:5 (not 3:4)
   React: aspect-[4/5] = width/height = 0.8
   WooCommerce default: 3:4 = 0.75
*/
body.page-id-90 .wc-block-components-product-image,
body.page-id-90 .wc-block-components-product-image img,
body.page-id-91 .wc-block-components-product-image,
body.page-id-91 .wc-block-components-product-image img,
body.page-id-89 .wc-block-components-product-image,
body.page-id-89 .wc-block-components-product-image img,
body.page-id-177 .wc-block-components-product-image,
body.page-id-177 .wc-block-components-product-image img,
body.post-type-archive-product .wc-block-components-product-image,
body.post-type-archive-product .wc-block-components-product-image img {
  aspect-ratio: 4/5 !important;
}

/* Override inline style aspect-ratio:3/4 on images */
body.page-id-90 .wc-block-components-product-image img[style*="aspect-ratio"],
body.page-id-91 .wc-block-components-product-image img[style*="aspect-ratio"],
body.page-id-89 .wc-block-components-product-image img[style*="aspect-ratio"],
body.page-id-177 .wc-block-components-product-image img[style*="aspect-ratio"],
body.post-type-archive-product .wc-block-components-product-image img[style*="aspect-ratio"] {
  aspect-ratio: 4/5 !important;
}

/* CAT-4: Product card price visibility
   React: ArtworkCard.tsx - pricing always visible
   Ensure "Dabartinis statymas:" label and price are not hidden
*/
.mk-catalog-grid .wc-block-product .price,
.mk-catalog-grid .product .price,
body.page-id-90 .products .price,
body.page-id-91 .products .price,
body.page-id-89 .products .price,
body.page-id-177 .products .price {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: hsl(var(--primary, 160 30% 28%)) !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important;
  font-family: var(--wp--preset--font-family--playfair-display, 'Playfair Display', Georgia, serif) !important;
  margin: 0.5rem 0 !important;
}

/* Price label (if using custom markup) */
.mk-card-price-label,
.mk-product-price-label {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;
  margin-bottom: 0.25rem !important;
  display: block !important;
}

/* S365-FIX: Category container overflow fix - parent has overflow:hidden clipping the list */
.mk-filter-categories,
.mk-filter-group.mk-filter-categories,
.wp-block-group.mk-filter-categories {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* S365-FIX-BG: ULTRA SPECIFIC - Force green background for category sidebar
   WordPress global styles are overriding has-primary-background-color to cream
   Must use full specificity chain to override */
html body .wp-block-group.mk-filter-categories.has-primary-background-color.has-background,
html body .mk-filter-group.mk-filter-categories.has-primary-background-color,
html body .wp-block-group.mk-filter-categories.has-background,
html body aside .mk-filter-categories,
html body .mk-catalog-sidebar .mk-filter-categories,
.mk-filter-categories.has-primary-background-color.has-background {
  background-color: rgb(50, 93, 79) !important;
  background: rgb(50, 93, 79) !important;
}

/* S365-FIX2: Category list items must have visible cream/white text on green bg */
.mk-filter-categories ul,
.mk-filter-categories .wc-block-product-categories-list {
  background-color: transparent !important;
}

.mk-filter-categories li,
.mk-filter-categories li a,
.mk-filter-categories .wc-block-product-categories-list-item,
.mk-filter-categories .wc-block-product-categories-list-item a {
  color: rgb(248, 246, 242) !important; /* cream text */
  opacity: 1 !important;
}

.mk-filter-categories li a:hover,
.mk-filter-categories .wc-block-product-categories-list-item a:hover {
  color: rgb(207, 171, 89) !important; /* gold on hover */
}

/* Category heading should be cream on green background */
.mk-filter-categories h3,
.mk-filter-categories .wp-block-heading {
  color: rgb(248, 246, 242) !important;
}

/* Ensure all filter group containers allow content to show */
.mk-filter-group,
.mk-catalog-sidebar .wp-block-group {
  overflow: visible !important;
  height: auto !important;
}

/* WooCommerce category list should be fully visible */
.wc-block-product-categories-list,
.mk-filter-categories ul,
.mk-filter-categories .wc-block-product-categories-list {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.wc-block-product-categories-list-item,
.mk-filter-categories li {
  display: list-item !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================================
   END SECTION S365: CATALOG PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S366: PLENERAI PAGE PARITY FIXES (2026-04-01)
   Source: Visual parity comparison WordPress vs React
   React: src/pages/Plenerai.tsx
   ========================================================================== */

/* PL-2: Participants grid - 1 col mobile, 2 cols at md, 3 cols at lg
   React: grid md:grid-cols-2 lg:grid-cols-3 gap-4
*/
.mk-plenerai-participants {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}

@media (min-width: 768px) {
  .mk-plenerai-participants {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .mk-plenerai-participants {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Flatten wp-block-column wrappers so children flow into grid */
.mk-plenerai-participants > .wp-block-column {
  display: contents !important;
}

/* Participant card styling
   React: group p-4 rounded-xl bg-muted/30 hover:bg-muted/50 
          border border-transparent hover:border-primary/20
*/
.mk-plenerai-participants .wp-block-group {
  padding: 1rem !important;
  border-radius: 0.75rem !important;
  background: hsl(var(--muted) / 0.3) !important;
  border: 1px solid transparent !important;
  transition: background-color 200ms ease, border-color 200ms ease !important;
  margin-bottom: 0 !important;
}

.mk-plenerai-participants .wp-block-group:hover {
  background: hsl(var(--muted) / 0.5) !important;
  border-color: hsl(var(--primary) / 0.2) !important;
}

/* Participant name styling
   React: font-semibold text-foreground group-hover:text-primary
*/
.mk-plenerai-participants .wp-block-group p:first-child {
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  transition: color 200ms ease !important;
}

.mk-plenerai-participants .wp-block-group:hover p:first-child {
  color: hsl(var(--primary)) !important;
}

/* Participant location styling
   React: text-sm text-muted-foreground
*/
.mk-plenerai-participants .wp-block-group p:last-child {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* ==========================================================================
   END SECTION S366: PLENERAI PAGE PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S367: CONTACT PAGE FORM 2-COLUMN LAYOUT FIX (v3)
   Date: 2026-04-01
   Issue: CNT-1 - Vardas/El. pastas fields should be side-by-side at sm+

   React Source: src/pages/Contact.tsx
   ```tsx
   <div className="grid sm:grid-cols-2 gap-4">
     <div className="space-y-2">
       <Label>Vardas</Label>
       <Input />
     </div>
     <div className="space-y-2">
       <Label>El. paštas</Label>
       <Input />
     </div>
   </div>
   ```

   ACTUAL CF7 HTML STRUCTURE (discovered via Playwright):
   ```html
   <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
     <p>
       <label>Vardas</label><span class="wpcf7-form-control-wrap">...</span><br>
       <label>El. paštas</label><span class="wpcf7-form-control-wrap">...</span>
     </p>
   </div>
   ```

   PROBLEM: Both fields are in ONE <p> tag. The outer div has inline grid
   but with one <p> child, it can't split. Inline styles cannot be overridden
   by CSS !important (they have highest specificity).

   SOLUTION v3:
   1. Make the <p> span BOTH columns of parent grid: grid-column: 1 / -1
   2. Then make the <p> itself a 2-column grid for its children
   3. Position label/input pairs using grid-row and grid-column
   ========================================================================== */

/* Target CF7 form on Contact page (page-id-15) */
body.page-id-15 .wpcf7-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important; /* space-y-6 */
}

/* Remove default paragraph margins in CF7 form */
body.page-id-15 .wpcf7-form > p,
body.page-id-15 .wpcf7-form .wp-block-group > p,
body.page-id-15 .wpcf7-form .wp-block-group > div > p {
  margin: 0 !important;
}

/* -------------------------------------------------------------------------
   KEY FIX: Make the <p> span both columns of the parent inline grid,
   then apply our own grid to the <p> for the actual 2-column layout.
   ------------------------------------------------------------------------- */

/* The <p> containing both fields must span the parent's 2-column grid */
body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p {
  grid-column: 1 / -1 !important; /* span all parent columns */
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* 2-column grid */
  grid-template-rows: auto auto !important; /* row 1: labels, row 2: inputs */
  gap: 0.5rem 1rem !important; /* row-gap: 8px, column-gap: 16px */
  width: 100% !important;
}

/* Hide the <br> separators between fields */
body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p br {
  display: none !important;
}

/* Labels styling */
body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p .mk-form-label {
  display: block !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  margin-bottom: 0 !important; /* gap handles spacing */
  width: auto !important;
  min-width: 0 !important;
}

/* First label: Vardas - row 1, col 1 */
body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p .mk-form-label:nth-of-type(1) {
  grid-row: 1 !important;
  grid-column: 1 !important;
}

/* Second label: El. paštas - row 1, col 2 */
body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p .mk-form-label:nth-of-type(2) {
  grid-row: 1 !important;
  grid-column: 2 !important;
}

/* Input wrapper styling */
body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
}

/* First input wrapper (Vardas) - row 2, col 1 */
body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p .wpcf7-form-control-wrap:nth-of-type(1) {
  grid-row: 2 !important;
  grid-column: 1 !important;
}

/* Second input wrapper (Email) - row 2, col 2 */
body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p .wpcf7-form-control-wrap:nth-of-type(2) {
  grid-row: 2 !important;
  grid-column: 2 !important;
}

/* Make inputs full width within their grid cell */
body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p input[type="text"],
body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p input[type="email"] {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* -------------------------------------------------------------------------
   Mobile: Stack all fields in single column
   ------------------------------------------------------------------------- */
@media (max-width: 639px) {
  body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p {
    grid-template-columns: 1fr !important; /* single column */
    grid-template-rows: auto auto auto auto !important; /* 4 rows: label, input, label, input */
  }

  /* First label: Vardas - row 1 */
  body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p .mk-form-label:nth-of-type(1) {
    grid-row: 1 !important;
    grid-column: 1 !important;
  }

  /* First input wrapper - row 2 */
  body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p .wpcf7-form-control-wrap:nth-of-type(1) {
    grid-row: 2 !important;
    grid-column: 1 !important;
  }

  /* Second label: El. paštas - row 3 */
  body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p .mk-form-label:nth-of-type(2) {
    grid-row: 3 !important;
    grid-column: 1 !important;
  }

  /* Second input wrapper - row 4 */
  body.page-id-15 .wpcf7-form .wp-block-group > div[style] > p .wpcf7-form-control-wrap:nth-of-type(2) {
    grid-row: 4 !important;
    grid-column: 1 !important;
  }
}

/* ==========================================================================
   END SECTION S367: CONTACT PAGE FORM 2-COLUMN LAYOUT FIX
   ========================================================================== */

/* ==========================================================================
   SECTION S368: NEWSLETTER SECTION PARITY FIXES
   Date: 2026-04-01
   Source: docs/PARITY-REPORT.md - Newsletter section

   React Source: src/components/home/NewsletterSection.tsx
   Issues Fixed:
   - NL-3: Image border-radius should be 0px (rounded-sm = calc(var(--radius) - 4px) = 0px)
   - NL-4: Button should be full-width on mobile (w-full sm:w-auto)
   ========================================================================== */

/* NL-3: Newsletter images border-radius = 0px (matches React rounded-sm)
   React: <img className="rounded-sm shadow-lg" />
   In this project's Tailwind config, rounded-sm = calc(var(--radius) - 4px) = 0px */
.mk-newsletter .wp-block-image,
.mk-newsletter figure.wp-block-image,
.mk-newsletter .wp-block-image img,
.mk-newsletter img {
  border-radius: 0 !important;
}

/* NL-4: Newsletter button full width on mobile
   React: <Button className="w-full sm:w-auto">
   - Full width below 640px (sm breakpoint)
   - Auto width at 640px and above */
@media (max-width: 639px) {
  .mk-newsletter__form input[type="submit"],
  .mk-newsletter .wpcf7-form input[type="submit"],
  .mk-newsletter .wpcf7-submit {
    width: 100% !important;
  }
}

/* ==========================================================================
   END SECTION S368: NEWSLETTER SECTION PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S369: HOMEPAGE HERO LEFT-ALIGNMENT FIX
   Date: 2026-04-01
   Agent: V1 - Homepage Hero Verification

   React Source: src/components/home/HeroSection.tsx

   ISSUE: Hero content (H1 + buttons) appears CENTER-aligned in WordPress
          but should be LEFT-aligned like React.

   React structure:
   <div className="relative container mx-auto px-4 h-full flex items-center">
     <div className="max-w-2xl">  <!-- Content wrapper, LEFT-aligned by default -->
       <h1 className="...">Meno ir kolekcinių...</h1>
       <div className="flex flex-wrap gap-4">  <!-- Buttons -->

   Key: max-w-2xl div is NOT centered, it's left-aligned within the container.
   The container is max-1400px and centered, but content within is left.
   ========================================================================== */

/* S369-1: Hero content wrapper should be LEFT-aligned, not centered
   The WP cover block with contentPosition:"center left" should handle
   vertical centering but horizontal alignment needs explicit left */
.mk-hero .wp-block-cover__inner-container {
  /* Ensure content aligns LEFT within the container */
  align-items: flex-start !important;
  text-align: left !important;
}

/* S369-2: The nested group (constrained layout wrapper) */
.mk-hero .wp-block-cover__inner-container > .wp-block-group {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* S369-3: Content wrapper (mk-hero__content) - ensure left alignment */
.mk-hero__content,
.mk-hero .wp-block-cover__inner-container .mk-hero__content {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* S369-4: Heading explicitly left-aligned */
.mk-hero__title,
.mk-hero .wp-block-cover__inner-container h1,
.mk-hero h1.wp-block-heading {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* S369-5: Buttons container left-aligned
   React: <div className="flex flex-wrap gap-4"> - no justify-center */
.mk-hero__actions,
.mk-hero .wp-block-buttons {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* ==========================================================================
   END SECTION S369: HOMEPAGE HERO LEFT-ALIGNMENT FIX
   ========================================================================== */

/* ==========================================================================
   SECTION S370: HEADER NAVIGATION SINGLE-ROW FIX
   Date: 2026-04-01
   Agent: V1 - Homepage Hero Verification

   ISSUE: WordPress header nav wraps to 2 rows instead of staying on 1 row
          like the React site.

   React Source: src/components/layout/Header.tsx
   React has all nav items on a single row with proper flex-shrink/nowrap.
   ========================================================================== */

/* S370-1: Force header nav to stay on single row */
.mk-header__nav,
.wp-block-navigation__container,
header nav.wp-block-navigation,
.mk-header .wp-block-navigation__container {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* S370-2: Nav items should not wrap */
.mk-header__nav ul,
.wp-block-navigation__container > ul,
.wp-block-navigation .wp-block-navigation__container {
  flex-wrap: nowrap !important;
  gap: 0.5rem !important; /* Reduce gap if needed to fit */
}

/*/* S370-3: OBSOLETE - Now shows hamburger at 1280px breakpoint */
/* @media (min-width: 1024px) and (max-width: 1279px) rules below are ineffective
   because desktop nav only shows at 1280px+. Kept for reference. */

/* S370-3 (OBSOLETE): Reduce nav item padding/spacing on smaller viewports */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mk-header__nav-link,
  .wp-block-navigation-item__content,
  .mk-header .wp-block-navigation-link__content {
    font-size: 0.8125rem !important; /* Slightly smaller */
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .mk-header__nav ul,
  .wp-block-navigation__container > ul {
    gap: 0.25rem !important;
  }
}

/* S370-4: Search box narrower to give more space for nav */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mk-header__search,
  .mk-header .wp-block-search__input {
    width: 140px !important;
    min-width: 140px !important;
  }
}

/* S370-5: CRITICAL - Ensure all 6 nav items fit at 1024-1400px
   V-HDR agent found only 4/6 items visible at 1280px. */
@media (min-width: 1024px) and (max-width: 1400px) {
  /* Smaller nav item text */
  .wp-block-navigation-item__content,
  .wp-block-navigation-link__content,
  .mk-header .wp-block-navigation a {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.5rem !important;
    letter-spacing: -0.01em !important;
  }

  /* Tighter gap */
  .wp-block-navigation__container,
  .wp-block-navigation .wp-block-page-list,
  .wp-block-navigation ul {
    gap: 0.125rem !important;
  }

  /* Hide submenu arrows */
  .wp-block-navigation-submenu__toggle,
  .wp-block-navigation__submenu-icon {
    display: none !important;
  }

  /* Logo sizing moved to S378 for centralized responsive control */

  /* Tighter actions */
  .mk-header__actions {
    gap: 0.5rem !important;
  }

  /* Smaller search */
  .mk-header__search input,
  .wp-block-search__input {
    width: 100px !important;
    min-width: 100px !important;
  }
}

/* S370-6: Even smaller at 1024-1199px */
@media (min-width: 1024px) and (max-width: 1199px) {
  .wp-block-navigation-item__content,
  .wp-block-navigation-link__content {
    font-size: 0.6875rem !important;
    padding: 0.25rem 0.375rem !important;
  }
}

/* S370-7: NUCLEAR OPTION for 1200-1400px - all 6 items MUST fit */
/* S370-7: Updated for 1280px breakpoint */
@media (min-width: 1280px) and (max-width: 1400px) {
  /* Force nav container to use minimal space */
  .wp-block-navigation__container,
  .wp-block-navigation .wp-block-page-list,
  header nav ul,
  .mk-header nav ul {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Nav items: minimal padding, smaller text */
  .wp-block-navigation-item,
  .wp-block-navigation-link {
    margin: 0 !important;
    padding: 0 !important;
  }

  .wp-block-navigation-item__content,
  .wp-block-navigation-link__content,
  header nav a {
    font-size: 0.8125rem !important;
    padding: 0.5rem 0.625rem !important;
    white-space: nowrap !important;
  }

  /* Hide search on this range to make room */
  .mk-header__search,
  .wp-block-search {
    display: none !important;
  }
}

/* S370-8: At 1024-1199px, even more aggressive */
@media (min-width: 1024px) and (max-width: 1199px) {
  .wp-block-navigation__container,
  header nav ul {
    gap: 0 !important;
  }

  .wp-block-navigation-item__content,
  .wp-block-navigation-link__content {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.5rem !important;
  }

  /* Hide search */
  .mk-header__search,
  .wp-block-search {
    display: none !important;
  }

  /* Logo sizing moved to S378 for centralized responsive control */
}

/* ==========================================================================
   END SECTION S370: HEADER NAVIGATION SINGLE-ROW FIX
   ========================================================================== */

/* ==========================================================================
   SECTION S371: POST-AUCTION DEADLINE BADGES AMBER COLOR
   Date: 2026-04-01
   Agent: V14 - Post-Auction Page Verification

   ISSUE: Deadline badges "Liko X d." show GREEN but should be AMBER/GOLD
   React: Gold variant badges for urgency

   React uses gold color for post-auction deadline indicators to create
   urgency and visual distinction from active auction badges.
   ========================================================================== */

/* S371-1: Post-auction deadline badges - amber/gold background */
.mk-badge--post-auction,
.mk-deadline-badge,
.poaukcionine .mk-badge,
.post-auction-badge,
[class*="post-auction"] .mk-badge,
.woocommerce-loop-product__title + .mk-badge {
  background-color: hsl(42 55% 58%) !important; /* --gold */
  color: hsl(160 30% 18%) !important; /* --forest-dark (dark text on gold) */
}

/* S371-2: Product cards in post-auction section - deadline badge styling */
.poaukcionine .products .product .mk-badge,
.poaukcionine .wc-block-grid__products .wc-block-grid__product .mk-badge,
body.post-type-archive-product .mk-deadline-badge {
  background-color: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important;
  font-weight: 500 !important;
}

/* S371-3: "Pirkti" button on post-auction should be gold variant */
.poaukcionine .products .product .button.add_to_cart_button,
.poaukcionine .wc-block-grid__product .wp-block-button__link,
.poaukcionine .mk-btn-gold,
.post-auction-buy-btn {
  background-color: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important;
  border: none !important;
}

.poaukcionine .products .product .button.add_to_cart_button:hover,
.poaukcionine .wc-block-grid__product .wp-block-button__link:hover {
  background-color: hsl(42 45% 75%) !important; /* --gold-light */
}

/* ==========================================================================
   END SECTION S371: POST-AUCTION DEADLINE BADGES AMBER COLOR
   ========================================================================== */

/* ==========================================================================
   SECTION S373: MOBILE HEADER LAYOUT - MATCH REACT
   Date: 2026-04-01
   Agent: V19 - Mobile Header Parity Fix

   ISSUE: At 375px viewport, WordPress header layout doesn't match React.

   React Header behavior analysis (from Header.tsx):
   - Logo: Always visible (h-14 = 56px height)
   - Desktop nav: hidden lg:flex (hidden below 1024px)
   - Right side: SearchBar + CartDrawer + User icon + Mobile menu button
   - SearchBar: w-48 lg:w-64 (192px mobile, 256px desktop)
   - Mobile menu button: lg:hidden (visible below 1024px)
   - Header height: h-20 = 80px (5rem)

   Key: React shows logo + search + icons in a single row on mobile.
   The logo shrinks slightly, search bar is narrower (w-48 = 192px).
   ========================================================================== */

/* S373-1: Mobile header row - single row with proper spacing */
@media (max-width: 639px) {
  .mk-header__row {
    min-height: 4rem !important; /* Slightly shorter on very small screens */
    padding: 0 !important;
    gap: 0.5rem !important;
  }
}

/* S373-2: Mobile logo - smaller on mobile, always visible */
@media (max-width: 639px) {
  .mk-header__logo img,
  .mk-header__logo .wp-block-site-logo img,
  .mk-header .wp-block-site-logo img {
    height: 2.5rem !important; /* Smaller logo on mobile (40px) */
    max-height: 2.5rem !important;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .mk-header__logo img,
  .mk-header__logo .wp-block-site-logo img,
  .mk-header .wp-block-site-logo img {
    height: 3rem !important; /* Medium logo on tablet (48px) */
    max-height: 3rem !important;
  }
}

/* S373-3: Mobile search bar - narrower width matching React w-48 */
@media (max-width: 639px) {
  .mk-header__search {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 140px !important; /* Even narrower on very small screens */
  }

  .mk-header__search .wp-block-search__inside-wrapper {
    width: 100% !important;
  }

  .mk-header__search .wp-block-search__input {
    width: 100% !important;
    min-width: 80px !important;
    font-size: 0.8125rem !important; /* Slightly smaller font */
  }

  .mk-header__search .wp-block-search__input::placeholder {
    font-size: 0.75rem !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .mk-header__search {
    flex: 0 0 auto !important;
    width: 12rem !important; /* w-48 = 192px = 12rem */
    max-width: 12rem !important;
  }
}

/* S373-4: Mobile header actions - tighter spacing */
@media (max-width: 639px) {
  .mk-header__actions {
    gap: 0.25rem !important;
  }

  /* Mini-cart icon smaller on mobile */
  .mk-header__cart,
  .mk-header__cart .wc-block-mini-cart__button {
    padding: 0.25rem !important;
  }

  /* Account icon smaller on mobile */
  .mk-header__account-link {
    padding: 0.25rem !important;
  }

  .mk-header__account-link svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/*/* S373-5: Hide desktop navigation below xl (1280px) - already handled by WP nav overlay */
@media (max-width: 1279px) {
  .mk-header__nav:not(.is-menu-open) .wp-block-navigation__container {
    display: none !important;
  }

  /* But show the hamburger/overlay trigger */
  .mk-header__nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
}

/* S373-6: Mobile menu overlay styling */
@media (max-width: 1279px) {
  .mk-header__nav .wp-block-navigation__responsive-container.is-menu-open {
    background-color: hsl(var(--cream)) !important;
    padding: 1rem !important;
  }

  .mk-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .mk-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }

  .mk-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
    background-color: hsl(var(--muted)) !important;
    border-radius: var(--radius) !important;
  }
}

/* S373-7: Ensure header container has proper padding on mobile */
@media (max-width: 639px) {
  .mk-header > .wp-block-group {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .mk-header > .wp-block-group {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* ==========================================================================
   END SECTION S373: MOBILE HEADER LAYOUT - MATCH REACT
   ========================================================================== */

/* ==========================================================================
   SECTION S374: UPCOMING AUCTIONS - PAGINATION DOTS & NAV ARROWS
   Date: 2026-04-01
   Agent: V17 Parity Fix

   V17 AGENT FINDINGS ANALYSIS:
   - "Pagination dot indicators" - ALREADY PRESENT in pattern (inline styles)
   - "Peržiūrėti objektą hover button" - DOES NOT EXIST in React source
   - "Stebėti kainą" - DOES NOT EXIST in React source

   React source: src/components/home/UpcomingAuctions.tsx

   DOTS SPEC (lines 30-34):
   - Container: flex gap-2 (0.5rem)
   - Each dot: w-3 h-3 (0.75rem/12px)
   - bg-primary with opacity variants: 100%, 60%, 30%
   - rounded-sm = calc(var(--radius) - 4px) = 0px (square)

   NAV ARROWS SPEC (lines 35-36):
   - text-muted-foreground (default)
   - hover:text-primary (on hover)
   - Buttons with transparent background

   This section adds CSS class enhancements for the inline-styled elements
   in the upcoming-auctions.php pattern to ensure consistency.
   ========================================================================== */

/* S374-1: Dots container - flex layout with gap */
.mk-dots {
  display: flex !important;
  gap: 0.5rem !important; /* gap-2 = 0.5rem */
  align-items: center !important;
}

/* S374-2: Individual dot styling - square, primary color with opacity variants */
.mk-dots > div {
  width: 0.75rem !important;  /* w-3 = 12px */
  height: 0.75rem !important; /* h-3 = 12px */
  border-radius: 0 !important; /* rounded-sm = 0px (custom Tailwind config) */
  transition: opacity 200ms ease, transform 200ms ease !important;
  flex-shrink: 0 !important;
}

/* First dot - full opacity (bg-primary) */
.mk-dots > div:nth-child(1) {
  background-color: hsl(160 30% 28%) !important; /* --primary */
  opacity: 1 !important;
}

/* Second dot - 60% opacity (bg-primary/60) */
.mk-dots > div:nth-child(2) {
  background-color: hsl(160 30% 28% / 0.6) !important;
}

/* Third dot - 30% opacity (bg-primary/30) */
.mk-dots > div:nth-child(3) {
  background-color: hsl(160 30% 28% / 0.3) !important;
}

/* S374-3: Nav arrows container */
.mk-nav-arrows {
  display: flex !important;
  gap: 0 !important;
  align-items: center !important;
}

/* S374-4: Nav arrow buttons - muted foreground, hover to primary */
.mk-nav-arrows button {
  color: hsl(160 15% 40%) !important; /* --muted-foreground */
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 1rem !important;
  transition: color 200ms ease !important;
  line-height: 1 !important;
}

.mk-nav-arrows button:hover {
  color: hsl(160 30% 28%) !important; /* --primary */
}

.mk-nav-arrows button:focus-visible {
  outline: 2px solid hsl(160 30% 28%) !important;
  outline-offset: 2px !important;
  border-radius: 0.125rem !important;
}

/* S374-5: Dots + arrows row layout */
.mk-upcoming-auctions .wp-block-group:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important; /* gap-4 = 1rem */
  margin-bottom: 1rem !important; /* mb-4 = 1rem */
}

/* S374-6: Cards grid layout - 2 columns on md+ */
.mk-upcoming-auctions .wp-block-columns {
  margin-top: 2rem !important; /* mt-8 = 2rem */
}

/* S374-7: Section background - secondary/30 */
.mk-upcoming-auctions {
  background-color: hsl(36 25% 88% / 0.3) !important; /* secondary/30 */
  padding-top: 4rem !important;  /* py-16 = 4rem */
  padding-bottom: 4rem !important;
}

/* ==========================================================================
   END SECTION S374: UPCOMING AUCTIONS - PAGINATION DOTS & NAV ARROWS
   ========================================================================== */

/* ==========================================================================
   SECTION S372: PARDAVIMAS STEP BADGES — GOLD CIRCULAR STYLING
   Date: 2026-04-01
   Agent: V9 Parity Fix Agent

   React Source: src/pages/HowToSell.tsx (line 109)
   <div className="absolute -top-3 -left-3 w-8 h-8 bg-gold text-foreground
                   rounded-full flex items-center justify-center font-bold text-sm">
     {index + 1}
   </div>

   ISSUE: WordPress shows plain text numbers "1, 2, 3, 4" without gold circle
   FIX: Override WordPress Block Group defaults to ensure gold circular badge

   Exact CSS values from Tailwind:
   - w-8 h-8 = 2rem (32px) width/height
   - bg-gold = hsl(42 55% 58%) / #C4A255
   - text-foreground = hsl(160 30% 18%) / #203D31 (dark text on gold)
   - rounded-full = border-radius: 9999px
   - -top-3 -left-3 = -0.75rem offset
   - font-bold = font-weight: 700
   - text-sm = font-size: 0.875rem (14px)
   ========================================================================== */

/* S372-1: The badge wrapper (wp-block-group with mk-sell-step__badge)
   Must be circular with gold background - override WP block group defaults */
.mk-sell-step__badge,
.mk-sell-step__badge.wp-block-group,
div.wp-block-group.mk-sell-step__badge,
body .mk-sell-step .mk-sell-step__badge,
body.page-id-17 .mk-sell-step__badge,
body .mk-sell-steps .mk-sell-step .mk-sell-step__badge {
  /* Size: w-8 h-8 = 2rem (32px) */
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  max-width: 2rem !important;
  max-height: 2rem !important;

  /* Gold background */
  background: hsl(42 55% 58%) !important;
  background-color: hsl(42 55% 58%) !important;

  /* Circular shape */
  border-radius: 9999px !important;

  /* Position: absolute -top-3 -left-3 */
  position: absolute !important;
  top: -0.75rem !important;
  left: -0.75rem !important;

  /* Flex centering for the number */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Remove any padding/margins that interfere */
  padding: 0 !important;
  margin: 0 !important;

  /* Ensure visibility above card */
  z-index: 10 !important;

  /* Shadow for depth */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;

  /* Remove any block group defaults */
  overflow: visible !important;
  border: none !important;
}

/* S372-2: The number text inside the badge (paragraph element)
   Must be dark text on gold background, centered, bold */
.mk-sell-step__badge .mk-sell-step__number,
.mk-sell-step__badge > p,
.mk-sell-step__badge p.mk-sell-step__number,
.mk-sell-step__badge.wp-block-group > p,
body.page-id-17 .mk-sell-step__badge .mk-sell-step__number,
body.page-id-17 .mk-sell-step__badge p {
  /* Dark text color on gold */
  color: hsl(160 30% 18%) !important;

  /* Typography: font-bold text-sm */
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  /* Center the text */
  text-align: center !important;

  /* Remove any margin/padding */
  margin: 0 !important;
  padding: 0 !important;

  /* Transparent background for the paragraph */
  background: transparent !important;
}

/* S372-3: Override WordPress color classes that might interfere */
.mk-sell-step__number.has-foreground-color,
.mk-sell-step__number.has-text-color,
.mk-sell-step__badge p.has-foreground-color,
.mk-sell-step__badge p.has-text-color,
body.page-id-17 .mk-sell-step__number.has-foreground-color {
  color: hsl(160 30% 18%) !important;
}

/* S372-4: Ensure step card has relative positioning for absolute badge */
.mk-sell-step,
.wp-block-column.mk-sell-step,
body.page-id-17 .mk-sell-step,
body .mk-sell-steps .mk-sell-step {
  position: relative !important;
  overflow: visible !important;
}

/* S372-5: The step cards container - ensure no clipping */
.mk-sell-steps,
.mk-sell-steps-grid,
body.page-id-17 .mk-sell-steps {
  overflow: visible !important;
}

/* ==========================================================================
   END SECTION S372: PARDAVIMAS STEP BADGES — GOLD CIRCULAR STYLING
   ========================================================================== */

/* ==========================================================================
   SECTION S375: P1 PRIORITY CSS FIXES (2026-04-01)
   Source: docs/PARITY-REMAINING.md
   Issues: P1-SP1, P1-SP2, P1-SP3, P1-SP4, P1-G1, P1-G2, P1-G3, P2-FORM1, P2-FORM2
   ========================================================================== */

/* --- P1-SP1: Single Product Image Gallery Opacity ---
   Issue: WooCommerce gallery has opacity:0 inline style, requires JS to reveal
   Fix: Force opacity to 1 so images are visible without JS */
.woocommerce-product-gallery,
.woocommerce-product-gallery--with-images,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- P1-SP2: Single Product Pricing Card Layout ---
   Issue: Uses stacked layout (label above value) instead of flex justify-between
   React: <div className="flex justify-between"><span>Label:</span><span>Value</span></div> */
.mk-pricing-card__row,
.single-product .mk-pricing-row,
.single-product .price-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
}
.mk-pricing-card__row br,
.single-product .mk-pricing-row br,
.single-product .price-row br {
  display: none !important;
}

/* --- P1-SP3: Single Product Trust Badges Text Size ---
   Issue: Uses H4 (16px) instead of text-xs (12px)
   React: <span className="text-xs text-muted-foreground">Autentiskumo garantija</span> */
.mk-trust-badges__item h4,
.mk-trust-badge h4,
.single-product .trust-badge h4 {
  font-size: 0.75rem !important;
  font-family: var(--wp--preset--font-family--inter), var(--font-body), system-ui, sans-serif !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  line-height: 1.25 !important;
  color: hsl(var(--muted-foreground)) !important;
}
.mk-trust-badges__item p,
.mk-trust-badge p {
  display: none !important;
}

/* --- P1-SP4: Single Product Add-to-Cart Button (Gold Variant) ---
   Issue: Green WooCommerce button instead of gold variant
   React: <Button variant="gold" size="xl" className="w-full">Pirkti uz {price} EUR</Button> */
.single-product .single_add_to_cart_button,
.single-product form.cart .button,
.single-product .woocommerce-variation-add-to-cart .button {
  background-color: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important;
  width: 100% !important;
  height: 3.5rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  border-radius: 0.25rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 200ms ease, transform 100ms ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.single-product .single_add_to_cart_button:hover,
.single-product form.cart .button:hover,
.single-product .woocommerce-variation-add-to-cart .button:hover {
  background-color: hsl(42 45% 75%) !important;
}
.single-product .single_add_to_cart_button:active,
.single-product form.cart .button:active {
  transform: scale(0.98) !important;
}

/* --- P1-G1: Gallery Products Visible Without JS ---
   Issue: WooCommerce Product Collection block requires JS to render products
   Impact: Users with JS disabled see empty page, SEO crawlers may miss content
   Fix: CSS fallback to ensure products are visible */
.wc-block-product-template {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
}
.wc-block-product-template > li,
.wc-block-product-template > li.wc-block-product,
.wc-block-product-template > li.product {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure products inside wc-block-grid are also visible */
.wc-block-grid__products,
.wc-block-grid__product {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- P1-G2: Gallery Product Card Aspect Ratio ---
   Issue: 3:4 instead of 4:5
   React: aspect-ratio: 4/5 on image container */
.mk-gallery-grid .wc-block-components-product-image,
.mk-gallery-grid .wc-block-components-product-image img,
.mk-gallery-grid .woocommerce-product-gallery__image img,
body.page-id-92 .wc-block-components-product-image,
body.page-id-92 .wc-block-components-product-image img {
  aspect-ratio: 4/5 !important;
  object-fit: cover !important;
}

/* --- P1-G3: Gallery Add-to-Cart Button (Gold Variant) ---
   Issue: Default WooCommerce button styling instead of gold
   React: <Button variant="gold">Prideti i krepseli</Button> */
.mk-gallery-grid .add_to_cart_button,
.mk-gallery-grid .wc-block-components-product-button .wp-block-button__link,
.mk-gallery-grid .wc-block-components-product-button__button,
body.page-id-92 .add_to_cart_button,
body.page-id-92 .wc-block-components-product-button .wp-block-button__link {
  background-color: hsl(42 55% 58%) !important;
  color: hsl(160 30% 18%) !important;
  width: 100% !important;
  height: 2.5rem !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  border-radius: 0.25rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 200ms ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mk-gallery-grid .add_to_cart_button:hover,
.mk-gallery-grid .wc-block-components-product-button .wp-block-button__link:hover,
body.page-id-92 .add_to_cart_button:hover {
  background-color: hsl(42 45% 75%) !important;
}

/* --- P2-FORM1: Form Input Border-Radius ---
   Issue: 0px instead of 2px (rounded-md in React is 6px, but forms use rounded-sm = 2px)
   Note: Per PARITY-REMAINING.md, forms should have 2px radius not 6px */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="password"],
.wpcf7 textarea,
.wpcf7 select,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  border-radius: 2px !important;
}

/* --- P2-FORM2: Form Focus Ring Opacity ---
   Issue: 20% opacity instead of 100%
   React: Uses full opacity double ring on focus */
.wpcf7 input:focus,
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none !important;
  border-color: hsl(var(--ring)) !important;
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring)) !important;
}

/* ==========================================================================
   END SECTION S375: P1 PRIORITY CSS FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S376: SINGLE PRODUCT AUCTION TIMER - REACT COUNTDOWN BOX PARITY
   ==========================================================================
   React source: src/components/auction/AuctionTimer.tsx (lines 134-251)

   ISSUE: WordPress shows text-based timer, React shows numeric countdown boxes
   React "full" variant layout:
   - Container: rounded-sm p-6 with gradient bg based on status
   - Status header: flex with 40px icon circle + status text
   - Timer: grid grid-cols-4 gap-3 with centered number boxes
   - Each box: number (text-3xl md:text-4xl font-display font-bold) + label (text-xs)
   - Dates footer: mt-4 pt-4 border-t with flex layout

   WC Simple Auctions outputs:
   - .hasCountdown container
   - .countdown_section for each time unit (days, hours, minutes, seconds)
   - .countdown_amount for the number
   - .countdown_period for the label
   ========================================================================== */

/* S376-1: Main timer container - React p-6 = 1.5rem (24px) */
.mk-product-timer {
  margin: 1rem 0 !important;
  padding: 1.5rem !important;  /* p-6 = 24px */
  border-radius: 0.125rem !important;  /* rounded-sm = 2px in this project */
}

/* S376-2: Active state gradient - React bg-gradient-to-r from-green-500/10 to-green-600/5 */
.mk-product-timer:not(.mk-product-timer--ended) {
  background: linear-gradient(to right, hsl(142 71% 45% / 0.1), hsl(142 71% 35% / 0.05)) !important;
  border: 1px solid hsl(142 71% 45% / 0.2) !important;
}

/* S376-3: Ending soon state - React from-destructive/10 to-destructive/5 */
.mk-product-timer:has(.mk-timer-ending),
.mk-product-timer.mk-timer-ending-state {
  background: linear-gradient(to right, hsl(0 65% 50% / 0.1), hsl(0 65% 50% / 0.05)) !important;
  border-color: hsl(0 65% 50% / 0.2) !important;
}

/* S376-4: Upcoming state - React from-gold/10 to-gold/5 */
.mk-product-timer:has(.mk-timer-upcoming),
.mk-product-timer.mk-timer-upcoming-state {
  background: linear-gradient(to right, hsl(42 55% 58% / 0.1), hsl(42 55% 58% / 0.05)) !important;
  border-color: hsl(42 55% 58% / 0.2) !important;
}

/* S376-5: Ended state - React bg-muted/50 border-border */
.mk-product-timer--ended {
  background: hsl(var(--muted) / 0.5) !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* S376-6: Countdown container - 4 column grid matching React grid-cols-4 gap-3 */
.mk-product-timer .hasCountdown,
.mk-product-timer .auction-time-countdown.hasCountdown {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important;  /* gap-3 = 12px */
  width: 100% !important;
  text-align: center !important;
}

/* S376-7: Each countdown section (box) - React text-center styling */
.mk-product-timer .countdown_section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  min-width: auto !important;
}

/* S376-8: Countdown number - React text-3xl md:text-4xl font-display font-bold */
.mk-product-timer .countdown_amount {
  font-family: var(--wp--preset--font-family--playfair-display), "Playfair Display", Georgia, serif !important;
  font-size: 1.875rem !important;  /* text-3xl = 30px */
  font-weight: 700 !important;
  line-height: 1 !important;
  color: hsl(142 50% 35%) !important;  /* Active green = text-green-600 */
}

/* S376-9: Responsive - larger numbers on md+ screens */
@media (min-width: 768px) {
  .mk-product-timer .countdown_amount {
    font-size: 2.25rem !important;  /* text-4xl = 36px */
  }
}

/* S376-10: Countdown period label - React text-xs text-muted-foreground mt-1 */
.mk-product-timer .countdown_period {
  font-family: var(--wp--preset--font-family--inter), "Inter", system-ui, sans-serif !important;
  font-size: 0.75rem !important;  /* text-xs = 12px */
  font-weight: 400 !important;
  color: hsl(var(--muted-foreground)) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-top: 0.25rem !important;  /* mt-1 = 4px */
}

/* S376-11: Ending soon number color - React text-destructive animate-pulse on seconds */
.mk-product-timer .mk-timer-ending .countdown_amount,
.mk-product-timer:has(.mk-timer-ending) .countdown_amount {
  color: hsl(var(--destructive)) !important;
}

/* S376-12: Pulse animation for ending soon seconds */
.mk-product-timer .mk-timer-ending .countdown_section:last-child .countdown_amount,
.mk-product-timer:has(.mk-timer-ending) .countdown_section:last-child .countdown_amount {
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* S376-13: Upcoming number color - React text-foreground */
.mk-product-timer .mk-timer-upcoming .countdown_amount,
.mk-product-timer:has(.mk-timer-upcoming) .countdown_amount {
  color: hsl(var(--foreground)) !important;
}

/* S376-14: Status header layout - React flex items-center gap-3 mb-4 */
.mk-product-timer .mk-timer__status-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;  /* gap-3 = 12px */
  margin-bottom: 1rem !important;  /* mb-4 = 16px */
}

/* S376-15: Status icon circle - React w-10 h-10 rounded-full */
.mk-product-timer .mk-timer__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;  /* w-10 = 40px */
  height: 2.5rem !important;  /* h-10 = 40px */
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
}

/* S376-16: Active icon - React bg-green-500/20 */
.mk-product-timer .mk-timer__icon--active {
  background-color: hsl(142 71% 45% / 0.2) !important;
}

/* S376-17: Active pulsing dot - React w-3 h-3 bg-green-500 rounded-full animate-pulse */
.mk-product-timer .mk-timer__icon--active .mk-timer__dot {
  width: 0.75rem !important;  /* w-3 = 12px */
  height: 0.75rem !important;  /* h-3 = 12px */
  background-color: hsl(142 71% 45%) !important;
  border-radius: 9999px !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* S376-18: Ending icon - React bg-destructive/20 */
.mk-product-timer .mk-timer__icon--ending {
  background-color: hsl(var(--destructive) / 0.2) !important;
}

/* S376-19: Ending icon SVG - React w-5 h-5 text-destructive animate-pulse */
.mk-product-timer .mk-timer__icon--ending svg {
  width: 1.25rem !important;  /* w-5 = 20px */
  height: 1.25rem !important;  /* h-5 = 20px */
  color: hsl(var(--destructive)) !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* S376-20: Upcoming icon - React bg-gold/20 */
.mk-product-timer .mk-timer__icon--upcoming {
  background-color: hsl(var(--gold) / 0.2) !important;
}

/* S376-21: Upcoming icon SVG - React w-5 h-5 text-gold */
.mk-product-timer .mk-timer__icon--upcoming svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: hsl(var(--gold)) !important;
}

/* S376-22: Ended icon - React bg-muted */
.mk-product-timer .mk-timer__icon--ended {
  background-color: hsl(var(--muted)) !important;
}

/* S376-23: Ended icon SVG - React w-5 h-5 text-muted-foreground */
.mk-product-timer .mk-timer__icon--ended svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* S376-24: Status title - React font-display font-semibold */
.mk-product-timer .mk-timer__status-title {
  font-family: var(--wp--preset--font-family--playfair-display), "Playfair Display", Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* S376-25: Active title color - React text-green-600 */
.mk-product-timer .mk-timer__status-title--active {
  color: hsl(142 50% 35%) !important;
}

/* S376-26: Ending title color - React text-destructive */
.mk-product-timer .mk-timer__status-title--ending {
  color: hsl(var(--destructive)) !important;
}

/* S376-27: Upcoming/ended title color - React text-foreground */
.mk-product-timer .mk-timer__status-title--upcoming,
.mk-product-timer .mk-timer__status-title--ended {
  color: hsl(var(--foreground)) !important;
}

/* S376-28: Status subtitle - React text-sm text-muted-foreground */
.mk-product-timer .mk-timer__status-sub {
  font-size: 0.875rem !important;  /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* S376-29: Dates footer - React mt-4 pt-4 border-t border-border/50 flex flex-wrap gap-4 */
.mk-product-timer .mk-timer__dates {
  margin-top: 1rem !important;  /* mt-4 = 16px */
  padding-top: 1rem !important;  /* pt-4 = 16px */
  border-top: 1px solid hsl(var(--border) / 0.5) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;  /* gap-4 = 16px */
}

/* S376-30: Date items - React flex items-center gap-2 text-sm text-muted-foreground */
.mk-product-timer .mk-timer__date-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;  /* gap-2 = 8px */
  font-size: 0.875rem !important;  /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
}

/* S376-31: Date item SVG icons - React w-4 h-4 */
.mk-product-timer .mk-timer__date-item svg {
  width: 1rem !important;  /* w-4 = 16px */
  height: 1rem !important;  /* h-4 = 16px */
  flex-shrink: 0 !important;
}

/* S376-32: Ending soon warning - React mt-4 flex items-center gap-2 text-destructive text-sm font-medium animate-pulse */
.mk-product-timer .mk-timer__warning {
  margin-top: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: hsl(var(--destructive)) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  animation: mk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* S376-33: Warning icon */
.mk-product-timer .mk-timer__warning svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* S376-34: Hide separators if the plugin outputs them */
.mk-product-timer .countdown_row .sep,
.mk-product-timer .hasCountdown .sep {
  display: none !important;
}

/* S376-35: Ensure the countdown row uses grid layout */
.mk-product-timer .countdown_row {
  display: contents !important;
}

/* ==========================================================================
   END SECTION S376: SINGLE PRODUCT AUCTION TIMER - REACT COUNTDOWN BOX PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION S378: HEADER LOGO RESPONSIVE SIZING
   Date: 2026-04-01

   ISSUE: WordPress logo takes too much space at 1280px breakpoint, crowding
          navigation items.

   React Source: src/components/layout/Header.tsx
   - Logo: className="h-14 object-contain" = 3.5rem (56px) height
   - Logo container: flex items-center group (no explicit width)
   - React relies on natural flex behavior - logo doesn't shrink excessively

   APPROACH:
   1. Allow logo container to flex-shrink when needed (not flex-shrink: 0)
   2. Set max-height responsive breakpoints for tight viewports
   3. Maintain aspect ratio with object-contain
   4. Never hide logo entirely - that wouldn't match React
   ========================================================================== */

/* S378-1: Base logo flex behavior - allow shrink but not excessively */
.mk-header__logo,
.mk-header .wp-block-site-logo,
.site-header .wp-block-site-logo,
header.wp-block-template-part .wp-block-site-logo {
  flex-shrink: 1 !important; /* Allow shrink when space is tight */
  min-width: 80px !important; /* Never shrink below 80px width */
  max-width: 200px !important; /* Don't grow beyond 200px */
}

/* S378-2: Default logo size - matches React h-14 (3.5rem = 56px) */
.mk-header__logo img,
.mk-header .wp-block-site-logo img,
.site-header .wp-block-site-logo img,
.mk-header .custom-logo,
.site-header .custom-logo,
header.wp-block-template-part .custom-logo {
  height: 3.5rem !important; /* React h-14 */
  max-height: 3.5rem !important;
  width: auto !important;
  object-fit: contain !important;
  transition: height 0.2s ease-out !important;
}

/* S378-3: At xl (1280px-1399px) - slightly smaller to give nav room */
@media (min-width: 1280px) and (max-width: 1399px) {
  .mk-header__logo img,
  .mk-header .wp-block-site-logo img,
  .site-header .wp-block-site-logo img,
  .mk-header .custom-logo,
  .site-header .custom-logo {
    height: 3rem !important; /* 48px - still clearly visible */
    max-height: 3rem !important;
  }
}

/* S378-4: At lg (1024px-1279px) - smaller to fit all nav items */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mk-header__logo img,
  .mk-header .wp-block-site-logo img,
  .site-header .wp-block-site-logo img,
  .mk-header .custom-logo,
  .site-header .custom-logo {
    height: 2.5rem !important; /* 40px - compact but readable */
    max-height: 2.5rem !important;
  }

  /* Also reduce logo container min-width */
  .mk-header__logo,
  .mk-header .wp-block-site-logo,
  .site-header .wp-block-site-logo {
    min-width: 60px !important;
  }
}

/* S378-5: At 2xl and above (1536px+) - full React size */
@media (min-width: 1536px) {
  .mk-header__logo img,
  .mk-header .wp-block-site-logo img,
  .site-header .wp-block-site-logo img,
  .mk-header .custom-logo,
  .site-header .custom-logo {
    height: 3.5rem !important; /* Full React h-14 */
    max-height: 3.5rem !important;
  }
}

/* S378-6: Mobile (below lg) - standard mobile logo size */
@media (max-width: 1279px) {
  .mk-header__logo img,
  .mk-header .wp-block-site-logo img,
  .site-header .wp-block-site-logo img,
  .mk-header .custom-logo,
  .site-header .custom-logo {
    height: 2.75rem !important; /* 44px - good mobile size */
    max-height: 2.75rem !important;
  }

  /* Mobile logo container - still flexible */
  .mk-header__logo,
  .mk-header .wp-block-site-logo,
  .site-header .wp-block-site-logo {
    flex-shrink: 0 !important; /* Don't shrink on mobile - nav is hidden */
  }
}

/* ==========================================================================
   END SECTION S378: HEADER LOGO RESPONSIVE SIZING
   ========================================================================== */

/* ==========================================================================
   SECTION S377: HEADER NAV FLEX LAYOUT OPTIMIZATION - MATCH REACT
   Date: 2026-04-01

   ISSUE: WordPress header has 6 nav items but only 5 fit at 1280px.
          React header fits all 6 at same width.

   React Source: src/components/layout/Header.tsx

   React Layout Analysis:
   - Container: container mx-auto px-4 (max-width with auto margins)
   - Row: flex items-center justify-between h-20
   - Logo: just img h-14 (56px), natural width
   - Nav: hidden lg:flex items-center gap-8 (2rem between items)
   - Actions: flex items-center gap-4 (1rem)

   React does NOT:
   - Shrink font sizes at any breakpoint
   - Reduce nav gap at any breakpoint
   - Hide search at any breakpoint
   - Use compressed letter-spacing

   The key is that justify-between naturally distributes space.
   This section OVERRIDES the aggressive S370 compression.
   ========================================================================== */

/* S377-1: Override S370's aggressive compression - Reset to React defaults */
@media (min-width: 1024px) {
  /* Reset nav gap to React's gap-8 (2rem) - S370 wrongly reduced this */
  .mk-header__nav ul,
  .mk-header .wp-block-navigation__container,
  .site-header .wp-block-navigation__container,
  .wp-block-navigation__container > ul,
  .wp-block-navigation .wp-block-navigation__container {
    gap: 2rem !important; /* React gap-8 */
    flex-wrap: nowrap !important;
  }

  /* Reset font size to React's text-sm (0.875rem) - S370 wrongly shrunk this */
  .mk-header__nav-link,
  .wp-block-navigation-item__content,
  .wp-block-navigation-link__content,
  .mk-header .wp-block-navigation-link__content,
  .site-header .wp-block-navigation-item__content {
    font-size: 0.875rem !important; /* text-sm = 14px */
    padding: 0.5rem 0 !important; /* React has no horizontal padding on nav links */
    letter-spacing: normal !important; /* Reset S370 letter-spacing compression */
    white-space: nowrap !important;
  }

  /* Show search - S370 wrongly hid it */
  .mk-header__search,
  .site-header .wp-block-search {
    display: flex !important;
  }

  /* Show dropdown arrows - S370 wrongly hid them */
  .wp-block-navigation-submenu__toggle,
  .wp-block-navigation__submenu-icon {
    display: inline-flex !important;
  }

  /* Reset logo to React's h-14 (56px) - S370 wrongly shrunk this */
  .mk-header__logo img,
  .custom-logo,
  .site-header .custom-logo {
    max-height: 3.5rem !important; /* h-14 = 56px */
    height: 3.5rem !important;
  }
}

/* S377-2: Header row flex distribution - match React justify-between */
@media (min-width: 1024px) {
  .mk-header__row,
  .mk-header > .wp-block-group > .wp-block-group,
  .site-header .wp-block-group[class*="is-layout-flex"] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important; /* Small gap between logo/nav/actions groups */
    flex-wrap: nowrap !important;
  }
}

/* S377-3: Navigation container should NOT grow - use content width */
@media (min-width: 1024px) {
  .mk-header__nav,
  .mk-header .wp-block-navigation,
  .site-header .wp-block-navigation {
    flex: 0 1 auto !important; /* Don't grow, shrink if needed, use content width */
  }

  /* Nav items container */
  .mk-header .wp-block-navigation__container,
  .site-header .wp-block-navigation__container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }
}

/* S377-4: Actions area - match React flex items-center gap-4 */
@media (min-width: 1024px) {
  .mk-header__actions {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important; /* React gap-4 */
    flex-shrink: 0 !important; /* Don't compress actions */
  }
}

/* S377-5: Search input - reasonable width that doesn't steal nav space */
@media (min-width: 1024px) {
  .mk-header__search,
  .mk-header .wp-block-search__input,
  .site-header .wp-block-search__input {
    width: 180px !important; /* Enough for placeholder but not too wide */
    min-width: 120px !important;
  }
}

/* S377-6: At 1024-1279px, slightly reduce search to give more nav space */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mk-header__search,
  .mk-header .wp-block-search__input,
  .site-header .wp-block-search__input {
    width: 150px !important;
    min-width: 100px !important;
  }

  /* Slightly reduce nav gap but keep it readable */
  .mk-header .wp-block-navigation__container,
  .site-header .wp-block-navigation__container {
    gap: 1.5rem !important; /* Reduced from 2rem but still reasonable */
  }
}

/* S377-7: At exactly 1024-1100px, tightest reasonable compression */
@media (min-width: 1024px) and (max-width: 1100px) {
  .mk-header .wp-block-navigation__container,
  .site-header .wp-block-navigation__container {
    gap: 1rem !important;
  }

  .mk-header__search,
  .mk-header .wp-block-search__input,
  .site-header .wp-block-search__input {
    width: 120px !important;
  }
}

/* S377-8: Logo should not shrink */
@media (min-width: 1024px) {
  .mk-header .wp-block-site-logo,
  .site-header .wp-block-site-logo,
  .mk-header__logo {
    flex-shrink: 0 !important;
  }
}

/* ==========================================================================
   END SECTION S377: HEADER NAV FLEX LAYOUT OPTIMIZATION - MATCH REACT
   ========================================================================== */


/* ==========================================================================
   SECTION S379: GALLERY PRODUCTS GRID SHORTCODE
   Server-side rendered gallery products via [mk_gallery_products]
   ========================================================================== */

/* S379-1: Base grid layout */
.mk-gallery-products-grid {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* S379-2: 4-column default */
.mk-gallery-products-grid.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* S379-3: 3-column variant */
.mk-gallery-products-grid.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* S379-4: 2-column variant */
.mk-gallery-products-grid.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* S379-5: Product card item reset */
.mk-gallery-products-grid .mk-gallery-product-card {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* S379-6: Responsive breakpoints */
@media (max-width: 1279px) {
  .mk-gallery-products-grid.columns-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1279px) {
  .mk-gallery-products-grid.columns-4,
  .mk-gallery-products-grid.columns-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .mk-gallery-products-grid.columns-4,
  .mk-gallery-products-grid.columns-3,
  .mk-gallery-products-grid.columns-2 {
    grid-template-columns: 1fr;
  }
}

/* S379-7: Image hover effect */
.mk-gallery-products-grid .wc-block-components-product-image {
  display: block;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--base) var(--wp--custom--radius--base) 0 0;
}

.mk-gallery-products-grid .wc-block-components-product-image img {
  transition: transform 0.5s ease;
}

.mk-gallery-products-grid .mk-gallery-product-card:hover .wc-block-components-product-image img {
  transform: scale(1.05);
}

/* S379-8: Gold add to cart button styling */
.mk-gallery-products-grid .mk-btn-gold {
  display: block;
  text-align: center;
  background: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  text-decoration: none;
  padding: 0.625rem 1rem;
  font-weight: 500;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.mk-gallery-products-grid .mk-btn-gold:hover {
  background: hsl(var(--gold-light));
  box-shadow: var(--shadow-hover);
}

/* S379-9: No products message */
.mk-no-gallery-products {
  text-align: center;
  padding: var(--wp--preset--spacing--60);
  color: var(--wp--preset--color--muted-foreground);
  font-size: var(--wp--preset--font-size--large);
}

/* ==========================================================================
   END SECTION S379: GALLERY PRODUCTS GRID SHORTCODE
   ========================================================================== */


/* ==========================================================================
   SECTION S379: GALLERY PAGE - WOOCOMMERCE SHORTCODE OUTPUT (NO JS)

   Version: 1.38.8
   Date: 2026-04-01

   PURPOSE: Style the WooCommerce [products] shortcode output for gallery page.
   The shortcode renders server-side WITHOUT JavaScript, unlike the Product
   Collection block which requires JS to function.

   SHORTCODE USED: [products tag="galerija" columns="4" limit="24" paginate="true"]

   OUTPUT STRUCTURE:
   <div class="woocommerce columns-4">
     <ul class="products columns-4">
       <li class="product type-product">
         <a href="..." class="woocommerce-LoopProduct-link">
           <img src="..." class="attachment-woocommerce_thumbnail">
           <h2 class="woocommerce-loop-product__title">...</h2>
           <span class="price">...</span>
         </a>
         <a href="?add-to-cart=X" class="button add_to_cart_button">...</a>
       </li>
     </ul>
   </div>

   React Source: src/pages/Gallery.tsx + src/components/gallery/GalleryCard.tsx
   ========================================================================== */

/* -----------------------------------------------------------------------------
   S379-1: Gallery Page Filter Buttons (Anchor Tags, No WordPress Buttons)

   React: Button variant="outline" size="sm" for inactive
          Button variant="default" size="sm" for active
   ----------------------------------------------------------------------------- */
.mk-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.25rem !important;           /* h-9 = 36px */
  padding: 0 1rem !important;           /* px-4 = 16px horizontal */
  border-radius: 0.25rem !important;    /* rounded = var(--radius) = 4px */
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;       /* text-sm = 14px */
  font-weight: 500 !important;          /* font-medium */
  line-height: 1.25rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 300ms ease !important;
  white-space: nowrap !important;

  /* Outline variant (inactive) */
  background: transparent !important;
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

.mk-filter-btn:hover {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* Active state */
.mk-filter-btn--active,
.mk-filter-btn.active,
.mk-filter-btn[aria-current="page"] {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.mk-filter-btn--active:hover,
.mk-filter-btn.active:hover,
.mk-filter-btn[aria-current="page"]:hover {
  background: hsl(var(--primary) / 0.9) !important;
}

/* -----------------------------------------------------------------------------
   S379-2: Gallery Page Product Grid Layout

   React: grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6
   WC Shortcode: <ul class="products columns-4">
   ----------------------------------------------------------------------------- */
.mk-gallery-page .woocommerce ul.products,
.mk-gallery-page ul.products.columns-4,
.mk-gallery-grid .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: 1fr !important; /* Mobile: 1 column */
  gap: 1.5rem !important;               /* gap-6 = 24px */
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (min-width: 640px) {
  .mk-gallery-page .woocommerce ul.products,
  .mk-gallery-page ul.products.columns-4,
  .mk-gallery-grid .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important; /* sm:grid-cols-2 */
  }
}

@media (min-width: 1024px) {
  .mk-gallery-page .woocommerce ul.products,
  .mk-gallery-page ul.products.columns-4,
  .mk-gallery-grid .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important; /* lg:grid-cols-3 */
  }
}

@media (min-width: 1280px) {
  .mk-gallery-page .woocommerce ul.products,
  .mk-gallery-page ul.products.columns-4,
  .mk-gallery-grid .woocommerce ul.products {
    grid-template-columns: repeat(4, 1fr) !important; /* xl:grid-cols-4 */
  }
}

/* -----------------------------------------------------------------------------
   S379-3: Gallery Card Styling (WC Shortcode Product Item)

   React GalleryCard: bg-card rounded-sm shadow-card hover:shadow-hover
   ----------------------------------------------------------------------------- */
.mk-gallery-page .woocommerce ul.products li.product,
.mk-gallery-grid .woocommerce ul.products li.product {
  background: hsl(var(--card)) !important;
  border-radius: 0.125rem !important;   /* rounded-sm = 2px (custom config) */
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  transition: all 300ms ease !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}

.mk-gallery-page .woocommerce ul.products li.product:hover,
.mk-gallery-grid .woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* -----------------------------------------------------------------------------
   S379-4: Gallery Card Image

   React: aspect-[4/5] overflow-hidden, img transition-transform group-hover:scale-105
   ----------------------------------------------------------------------------- */
.mk-gallery-page .woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.mk-gallery-grid .woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  display: block !important;
  overflow: hidden !important;
}

.mk-gallery-page .woocommerce ul.products li.product img,
.mk-gallery-grid .woocommerce ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  transition: transform 500ms ease !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.mk-gallery-page .woocommerce ul.products li.product:hover img,
.mk-gallery-grid .woocommerce ul.products li.product:hover img {
  transform: scale(1.05) !important;
}

/* -----------------------------------------------------------------------------
   S379-5: Gallery Card Title

   React: font-display text-lg font-semibold text-foreground mb-1 line-clamp-1
   ----------------------------------------------------------------------------- */
.mk-gallery-page .woocommerce ul.products li.product .woocommerce-loop-product__title,
.mk-gallery-grid .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important;       /* text-lg = 18px */
  font-weight: 600 !important;          /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin: 0 0 0.25rem 0 !important;     /* mb-1 = 4px */
  padding: 1.25rem 1.25rem 0 !important; /* p-5 top and sides */
  line-height: 1.5rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;       /* line-clamp-1 approximation */
}

/* -----------------------------------------------------------------------------
   S379-6: Gallery Card Price

   React: text-xl font-bold text-primary mb-4
   ----------------------------------------------------------------------------- */
.mk-gallery-page .woocommerce ul.products li.product .price,
.mk-gallery-grid .woocommerce ul.products li.product .price {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;        /* text-xl = 20px */
  font-weight: 700 !important;          /* font-bold */
  color: hsl(var(--primary)) !important;
  margin: 0 !important;
  padding: 0 1.25rem 1rem !important;   /* p-5 sides, mb-4 = 16px bottom */
  display: block !important;
}

.mk-gallery-page .woocommerce ul.products li.product .price del,
.mk-gallery-grid .woocommerce ul.products li.product .price del {
  color: hsl(var(--muted-foreground)) !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important;
}

.mk-gallery-page .woocommerce ul.products li.product .price ins,
.mk-gallery-grid .woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
  font-weight: 700 !important;
  color: hsl(var(--primary)) !important;
}

/* -----------------------------------------------------------------------------
   S379-7: Gallery Card Add to Cart Button

   React: Button variant="gold" className="w-full"
   Gold: bg-gold text-forest-dark hover:bg-gold-light
   ----------------------------------------------------------------------------- */
.mk-gallery-page .woocommerce ul.products li.product .button,
.mk-gallery-page .woocommerce ul.products li.product .add_to_cart_button,
.mk-gallery-grid .woocommerce ul.products li.product .button,
.mk-gallery-grid .woocommerce ul.products li.product .add_to_cart_button {
  display: block !important;
  width: calc(100% - 2.5rem) !important; /* Full width minus padding */
  margin: 0 1.25rem 1.25rem !important; /* p-5 sides, pb-5 bottom */
  padding: 0.5rem 1rem !important;
  background: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  border: none !important;
  border-radius: 0.25rem !important;    /* rounded */
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-elegant) !important;
  transition: all 300ms ease !important;
}

.mk-gallery-page .woocommerce ul.products li.product .button:hover,
.mk-gallery-page .woocommerce ul.products li.product .add_to_cart_button:hover,
.mk-gallery-grid .woocommerce ul.products li.product .button:hover,
.mk-gallery-grid .woocommerce ul.products li.product .add_to_cart_button:hover {
  background: hsl(var(--gold-light)) !important;
}

/* Loading state */
.mk-gallery-page .woocommerce ul.products li.product .button.loading,
.mk-gallery-grid .woocommerce ul.products li.product .button.loading {
  opacity: 0.7 !important;
  pointer-events: none !important;
}

/* Added to cart state */
.mk-gallery-page .woocommerce ul.products li.product .button.added,
.mk-gallery-grid .woocommerce ul.products li.product .button.added {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* -----------------------------------------------------------------------------
   S379-8: Hide Empty State When Products Exist

   The empty state block should only show when there are no products.
   WooCommerce shortcode outputs <p class="woocommerce-info"> when empty.
   ----------------------------------------------------------------------------- */
.mk-gallery-empty {
  display: none !important;
}

/* Show empty state when products grid is empty */
.mk-gallery-grid:empty + .mk-gallery-empty,
.mk-gallery-grid .woocommerce:empty + .mk-gallery-empty {
  display: block !important;
}

/* Style the WooCommerce "no products" message */
.mk-gallery-page .woocommerce > .woocommerce-info,
.mk-gallery-grid .woocommerce > .woocommerce-info {
  text-align: center !important;
  padding: 3rem !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 1.125rem !important;
}

/* -----------------------------------------------------------------------------
   S379-9: WooCommerce Pagination (Shortcode Output)

   WC Shortcode paginate="true" outputs:
   <nav class="woocommerce-pagination">
     <ul class="page-numbers">
       <li><a class="page-numbers">1</a></li>
       <li><span class="page-numbers current">2</span></li>
     </ul>
   </nav>
   ----------------------------------------------------------------------------- */
.mk-gallery-page .woocommerce-pagination,
.mk-gallery-grid .woocommerce-pagination {
  margin-top: 2rem !important;
  text-align: center !important;
}

.mk-gallery-page .woocommerce-pagination ul.page-numbers,
.mk-gallery-grid .woocommerce-pagination ul.page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mk-gallery-page .woocommerce-pagination .page-numbers,
.mk-gallery-grid .woocommerce-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0 0.75rem !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.25rem !important;
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 200ms ease !important;
}

.mk-gallery-page .woocommerce-pagination a.page-numbers:hover,
.mk-gallery-grid .woocommerce-pagination a.page-numbers:hover {
  background: hsl(var(--muted)) !important;
  border-color: hsl(var(--primary)) !important;
}

.mk-gallery-page .woocommerce-pagination .page-numbers.current,
.mk-gallery-grid .woocommerce-pagination .page-numbers.current {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.mk-gallery-page .woocommerce-pagination .page-numbers.prev,
.mk-gallery-page .woocommerce-pagination .page-numbers.next,
.mk-gallery-grid .woocommerce-pagination .page-numbers.prev,
.mk-gallery-grid .woocommerce-pagination .page-numbers.next {
  font-size: 1rem !important;
}

/* ==========================================================================
   END SECTION S379: GALLERY PAGE - WOOCOMMERCE SHORTCODE OUTPUT
   ========================================================================== */

/* ==========================================================================
   SECTION S380: HEADER NAV FIT AT 1280px - FIX 6th ITEM CUTOFF
   Date: 2026-04-01

   ISSUE: At 1280px viewport, only 5 of 6 navigation items visible.
          "Kontaktai" is cut off by overflow.

   CONSTRAINT: Cannot shorten nav item text - must match React SPA exactly.

   FIX: Extend the compression rules from S377-6 (1024-1279px) to also cover
        1280-1399px range. At 1400px+ there is enough space for full React values.
   ========================================================================== */

/* S380-1: At 1280-1399px, compress nav gap and search width */
@media (min-width: 1280px) and (max-width: 1399px) {
  /* Nav gap reduced to 1.5rem (24px) from 2rem (32px) */
  .mk-header .wp-block-navigation__container,
  .site-header .wp-block-navigation__container,
  .mk-header__nav .wp-block-navigation__container,
  .wp-block-navigation__container > ul,
  .wp-block-navigation .wp-block-navigation__container {
    gap: 1.5rem !important;
  }

  /* Search width reduced to 150px from 180px+ */
  .mk-header__search,
  .mk-header .wp-block-search__input,
  .site-header .wp-block-search__input,
  .mk-header__search .wp-block-search__inside-wrapper,
  .mk-header .wp-block-search__inside-wrapper,
  .site-header .wp-block-search__inside-wrapper {
    width: 150px !important;
    min-width: 120px !important;
    max-width: 150px !important;
  }
}

/* S380-2: At 1400px+, restore full React spacing */
@media (min-width: 1400px) {
  /* Nav gap: full React gap-8 (2rem = 32px) */
  .mk-header .wp-block-navigation__container,
  .site-header .wp-block-navigation__container,
  .mk-header__nav .wp-block-navigation__container,
  .wp-block-navigation__container > ul,
  .wp-block-navigation .wp-block-navigation__container {
    gap: 2rem !important;
  }

  /* Search width: full React lg:w-64 (16rem = 256px) */
  .mk-header__search,
  .mk-header .wp-block-search__input,
  .site-header .wp-block-search__input,
  .mk-header__search .wp-block-search__inside-wrapper,
  .mk-header .wp-block-search__inside-wrapper,
  .site-header .wp-block-search__inside-wrapper {
    width: 16rem !important;
    min-width: auto !important;
    max-width: none !important;
  }
}

/* ==========================================================================
   END SECTION S380: HEADER NAV FIT AT 1280px - FIX 6th ITEM CUTOFF
   ========================================================================== */

/* ==========================================================================
   SECTION S381: GALLERY PAGE SHORTCODE GRID (NO-JS FALLBACK)
   Ensures [mk_gallery_products] shortcode output matches the React Gallery grid.
   ========================================================================== */

/* S381-1: Base grid - applies to our shortcode ul.mk-gallery-products-grid */
.page-id-92 .mk-gallery-products-grid,
.mk-gallery-grid .mk-gallery-products-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 = 24px matching React */
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* S381-2: Responsive breakpoints - match React grid-cols-2/3/4 */
@media (min-width: 640px) {
  .page-id-92 .mk-gallery-products-grid,
  .mk-gallery-grid .mk-gallery-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .page-id-92 .mk-gallery-products-grid,
  .mk-gallery-grid .mk-gallery-products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1280px) {
  .page-id-92 .mk-gallery-products-grid,
  .mk-gallery-grid .mk-gallery-products-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* S381-3: Product card within the shortcode grid */
.page-id-92 .mk-gallery-products-grid .mk-gallery-product-card,
.mk-gallery-grid .mk-gallery-products-grid .mk-gallery-product-card {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* S381-4: Product card styling matching GalleryCard */
.page-id-92 .mk-gallery-products-grid .mk-product-card,
.mk-gallery-grid .mk-gallery-products-grid .mk-product-card {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--wp--custom--radius--base) !important;
  overflow: hidden !important;
  transition: box-shadow 300ms ease !important;
}

.page-id-92 .mk-gallery-products-grid .mk-product-card:hover,
.mk-gallery-grid .mk-gallery-products-grid .mk-product-card:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* S381-5: Image styling */
.page-id-92 .mk-gallery-products-grid .wc-block-components-product-image,
.page-id-92 .mk-gallery-products-grid .wc-block-grid__product-image,
.mk-gallery-grid .mk-gallery-products-grid .wc-block-components-product-image,
.mk-gallery-grid .mk-gallery-products-grid .wc-block-grid__product-image {
  display: block !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  border-radius: var(--wp--custom--radius--base) var(--wp--custom--radius--base) 0 0 !important;
}

.page-id-92 .mk-gallery-products-grid .wc-block-components-product-image img,
.page-id-92 .mk-gallery-products-grid .wc-block-grid__product-image img,
.mk-gallery-grid .mk-gallery-products-grid .wc-block-components-product-image img,
.mk-gallery-grid .mk-gallery-products-grid .wc-block-grid__product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 500ms ease !important;
}

.page-id-92 .mk-gallery-products-grid .mk-gallery-product-card:hover img,
.mk-gallery-grid .mk-gallery-products-grid .mk-gallery-product-card:hover img {
  transform: scale(1.05) !important;
}

/* S381-6: Title styling */
.page-id-92 .mk-gallery-products-grid .wp-block-post-title,
.mk-gallery-grid .mk-gallery-products-grid .wp-block-post-title {
  font-family: var(--wp--preset--font-family--playfair-display) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.4 !important;
  margin: 0 0 0.5rem 0 !important;
}

.page-id-92 .mk-gallery-products-grid .wp-block-post-title a,
.mk-gallery-grid .mk-gallery-products-grid .wp-block-post-title a {
  color: hsl(var(--foreground)) !important;
  text-decoration: none !important;
}

.page-id-92 .mk-gallery-products-grid .wp-block-post-title a:hover,
.mk-gallery-grid .mk-gallery-products-grid .wp-block-post-title a:hover {
  color: hsl(var(--primary)) !important;
}

/* S381-7: Artist meta styling */
.page-id-92 .mk-gallery-products-grid .mk-card-meta__artist,
.mk-gallery-grid .mk-gallery-products-grid .mk-card-meta__artist {
  margin: 0 0 0.5rem 0 !important;
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* S381-8: Category label - hidden on gallery page (React GalleryCard omits categories) */
.page-id-92 .mk-gallery-products-grid .wp-block-post-terms {
  display: none !important;
}

/* S381-9: Price styling */
.page-id-92 .mk-gallery-products-grid .wc-block-components-product-price,
.page-id-92 .mk-gallery-products-grid .price,
.mk-gallery-grid .mk-gallery-products-grid .wc-block-components-product-price,
.mk-gallery-grid .mk-gallery-products-grid .price {
  font-family: var(--wp--preset--font-family--playfair-display) !important;
  font-size: var(--wp--preset--font-size--large) !important;
  font-weight: 700 !important;
  color: hsl(var(--forest-dark)) !important;
}

/* S381-10: Button styling */
.page-id-92 .mk-gallery-products-grid .button,
.page-id-92 .mk-gallery-products-grid .wp-block-button__link,
.mk-gallery-grid .mk-gallery-products-grid .button,
.mk-gallery-grid .mk-gallery-products-grid .wp-block-button__link {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.625rem 1rem !important;
  border-radius: var(--wp--custom--radius--base) !important;
  transition: all 300ms ease !important;
  text-decoration: none !important;
}

/* S381-11: Gold "Add to Cart" button */
.page-id-92 .mk-gallery-products-grid .mk-btn-gold,
.page-id-92 .mk-gallery-products-grid .add_to_cart_button,
.mk-gallery-grid .mk-gallery-products-grid .mk-btn-gold,
.mk-gallery-grid .mk-gallery-products-grid .add_to_cart_button {
  background: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  border: none !important;
  margin-bottom: 0.5rem !important;
}

.page-id-92 .mk-gallery-products-grid .mk-btn-gold:hover,
.page-id-92 .mk-gallery-products-grid .add_to_cart_button:hover,
.mk-gallery-grid .mk-gallery-products-grid .mk-btn-gold:hover,
.mk-gallery-grid .mk-gallery-products-grid .add_to_cart_button:hover {
  background: hsl(var(--gold-light)) !important;
  box-shadow: var(--shadow-elegant) !important;
}

/* S381-12: Elegant "View" button */
.page-id-92 .mk-gallery-products-grid .wc-block-components-product-button__button,
.mk-gallery-grid .mk-gallery-products-grid .wc-block-components-product-button__button {
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--foreground) / 0.2) !important;
}

.page-id-92 .mk-gallery-products-grid .wc-block-components-product-button__button:hover,
.mk-gallery-grid .mk-gallery-products-grid .wc-block-components-product-button__button:hover {
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}

/* ==========================================================================
   END SECTION S381: GALLERY PAGE SHORTCODE GRID (NO-JS FALLBACK)
   ========================================================================== */

/* ==========================================================================
   SECTION S382: HEADER NAV FIX - LOGO OVERFLOW
   ==========================================================================
   ISSUE: Logo image has max-width:none, expanding to 248px and covering
          the first nav item "Aukcionas". Logo container is only 80px with
          overflow:visible, so the image overflows and hides nav items.

   FIX: Set overflow:hidden on logo container AND constrain logo image width.
   ========================================================================== */

/* S382-1: Logo container must clip overflow */
.mk-header__logo,
.mk-header .wp-block-site-logo,
.site-header .wp-block-site-logo {
  overflow: hidden !important;
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  flex-shrink: 0 !important;
}

/* S382-2: Logo image must fit container */
.mk-header__logo img,
.mk-header .wp-block-site-logo img,
.site-header .wp-block-site-logo img,
.mk-header .custom-logo,
.site-header .custom-logo {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  max-height: 3rem !important;
  object-fit: contain !important;
}

/* S382-3: Ensure nav starts after logo with proper spacing */
.mk-header__row {
  gap: 1.5rem !important;
}

/* S382-4: Nav container should not overlap logo */
.mk-header__nav {
  flex-shrink: 1 !important;
  min-width: 0 !important;
}

/* S382-5: Submenu parent (LI) needs position:relative for dropdown positioning */
.mk-header__nav li.wp-block-navigation-submenu,
.mk-header li.wp-block-navigation-submenu,
.site-header li.wp-block-navigation-submenu {
  position: relative !important;
}

/* S382-6: CRITICAL - Submenu containers (UL) must be position:absolute
   Without this, they take layout space even when visibility:hidden
   NOTE: Must come AFTER S382-5 to win in CSS cascade */
.mk-header__nav ul.wp-block-navigation__submenu-container,
.mk-header ul.wp-block-navigation__submenu-container,
.site-header ul.wp-block-navigation__submenu-container {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 100 !important;
  min-width: 200px !important;
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.375rem !important;
  box-shadow: var(--shadow-elegant) !important;
  padding: 0.5rem !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 200ms ease, visibility 200ms ease !important;
}

/* S382-7: Show submenu on hover */
.mk-header__nav .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.mk-header__nav .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container,
.mk-header .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.mk-header .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* S382-8: Submenu items styling */
.mk-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
  display: block !important;
  width: 100% !important;
}

.mk-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  color: hsl(var(--foreground)) !important;
  border-radius: 0.25rem !important;
  transition: background-color 200ms ease !important;
  white-space: nowrap !important;
}

.mk-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.mk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--primary)) !important;
}

/* ==========================================================================
   END SECTION S382: HEADER NAV FIX - LOGO OVERFLOW
   ========================================================================== */

/* ==========================================================================
   SECTION S409: GIFT VOUCHER PAGE 1:1 PARITY FIX
   Date: 2026-04-01
   React source: src/pages/GiftVoucher.tsx

   ISSUES FIXED:
   1. Hide duplicate JS-injected selector (.mk-gv-selector)
   2. Feature card icons - no borders, 40px, centered
   3. Validity rules section - white card bg, not cream-light
   4. "Galiojimo taisyklės" header - text-2xl (1.5rem), Info icon 32px
   5. Amount buttons - only 4 amounts [50, 100, 200, 500], not 5
   ========================================================================== */

/* S409-1: HIDE the JS-injected duplicate selector
   The meno_kodas_gift_voucher_js() function in functions.php creates this
   element and inserts it at the top of the page, duplicating content */
.mk-gv-selector {
  display: none !important;
}

/* S409-2: Feature card icons - NO BORDER containers
   React: w-10 h-10 text-primary mx-auto mb-4
   Icons are plain SVGs without any box/border around them */
.page-id-19 .mk-feature-card__icon,
.page-id-19 .mk-gift-feature,
body.page-id-19 .wp-block-group .mk-feature-card__icon,
body.page-id-19 .wp-block-group .mk-gift-feature {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 1rem !important; /* mb-4 = 1rem */
}

/* S409-3: Feature card icon SVGs - 40px (w-10 h-10), primary color */
.page-id-19 .mk-feature-card__icon svg,
.page-id-19 .mk-gift-feature svg,
body.page-id-19 .wp-block-group .mk-feature-card__icon svg,
body.page-id-19 .wp-block-group .mk-gift-feature svg {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  color: hsl(var(--primary)) !important;
}

/* S409-4: Feature cards - white background, rounded-xl, text-center
   React: bg-card rounded-xl p-6 border text-center */
.page-id-19 .mk-feature-card,
.page-id-19 .is-style-card,
body.page-id-19 .wp-block-group.is-style-card {
  background-color: hsl(var(--card)) !important;
  border-radius: 0.75rem !important; /* rounded-xl = 12px */
  padding: 1.5rem !important; /* p-6 = 1.5rem */
  border: 1px solid hsl(var(--border)) !important;
  text-align: center !important;
}

/* S409-5: Feature card headings - font-semibold mb-2
   React: h3 className="font-semibold mb-2" */
.page-id-19 .mk-feature-card h4,
.page-id-19 .is-style-card h4,
body.page-id-19 .wp-block-group.is-style-card .wp-block-heading {
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 0.5rem !important; /* mb-2 = 0.5rem */
  text-align: center !important;
}

/* S409-6: Validity rules section - WHITE card background, not cream-light
   React: bg-card rounded-xl p-8 border (line 165)
   NOTE: Override inline styles that use cream-light with white/card color */
.page-id-19 .mk-validity-rules,
body.page-id-19 .wp-block-group:has(.mk-validity-rule),
body.page-id-19 .wp-block-group[style*="border-left-color"]:not(.mk-validity-rule),
body.page-id-19 div[style*="cream-light"],
body.page-id-19 .has-cream-light-background-color:has(div[style*="border-left"]) {
  background-color: hsl(var(--card)) !important;
  background: hsl(var(--card)) !important;
  border-radius: 0.75rem !important; /* rounded-xl = 12px */
  padding: 2rem !important; /* p-8 = 2rem */
  border: 1px solid hsl(var(--border)) !important;
}

/* S409-7: "Galiojimo taisyklės" header - H2 with text-2xl font-bold
   React: font-display text-2xl font-bold (line 168) */
.page-id-19 .mk-validity-rules h2,
.page-id-19 .mk-validity-rules h4,
body.page-id-19 .wp-block-heading:has(+ .mk-validity-rules),
body.page-id-19 .wp-block-group:has(.mk-validity-rule) > .wp-block-heading {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.5rem !important; /* text-2xl = 1.5rem (24px) */
  line-height: 2rem !important;
  font-weight: 700 !important; /* font-bold */
  margin-bottom: 1.5rem !important; /* mb-6 = 1.5rem */
}

/* S409-8: Info icon in validity section header - 32px (w-8 h-8)
   React: Info className="w-8 h-8 text-primary" (line 167) */
.page-id-19 .wp-block-group:has(.mk-validity-rule) svg,
body.page-id-19 [class*="validity"] svg {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  color: hsl(var(--primary)) !important;
}

/* S409-9: Validity rule items - border-l-4 border-primary pl-4
   React: border-l-4 border-primary pl-4 (lines 173, 179, 186, 192)
   NOTE: Override inline styles that use gold color with primary (green) */
.page-id-19 .mk-validity-rule,
body.page-id-19 .wp-block-group[style*="border-left-width: 4px"],
body.page-id-19 .wp-block-group[style*="border-left-color"],
body.page-id-19 div[style*="border-left-color:var(--wp--preset--color--gold)"],
body.page-id-19 div[style*="border-left-color: var(--wp--preset--color--gold)"] {
  border-left: 4px solid hsl(var(--primary)) !important;
  border-left-color: hsl(var(--primary)) !important;
  padding-left: 1rem !important; /* pl-4 = 1rem */
  margin-bottom: 1rem !important;
}

/* S409-10: Validity rule headings - font-semibold mb-1
   React: h3 className="font-semibold mb-1" (line 174) */
.page-id-19 .mk-validity-rule h3,
.page-id-19 .mk-validity-rule h5,
body.page-id-19 .wp-block-group[style*="border-left"] h3,
body.page-id-19 .wp-block-group[style*="border-left"] h5 {
  font-weight: 600 !important; /* font-semibold */
  margin-bottom: 0.25rem !important; /* mb-1 = 0.25rem */
  font-size: 1.125rem !important; /* text-lg */
}

/* S409-11: Validity rule descriptions - text-sm text-muted-foreground
   React: p className="text-sm text-muted-foreground" (line 175-176) */
.page-id-19 .mk-validity-rule p,
body.page-id-19 .wp-block-group[style*="border-left"] p {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.75 !important;
}

/* S409-12: Hide 5th amount button (€1000) - React only has 4: [50, 100, 200, 500]
   The page content has 5 buttons including €1000 which is not in React */
.page-id-19 .mk-voucher-amount-btn[data-amount="1000"],
body.page-id-19 button[data-amount="1000"] {
  display: none !important;
}

/* S409-13: Info section background - bg-background not cream-light
   React: <div className="bg-background py-16"> (line 136) */
.page-id-19 .wp-block-group[style*="cream-light"]:has(.mk-feature-card),
body.page-id-19 .has-cream-light-background-color:has(.is-style-card) {
  background-color: hsl(var(--background)) !important;
}

/* S409-14: Purchase section hero subtitle - 70% opacity
   React: text-primary-foreground/70 (line 51) */
.page-id-19 .mk-voucher-subtitle,
body.page-id-19 .has-cream-dark-color {
  color: hsl(36 20% 92% / 0.7) !important; /* primary-foreground/70 */
}

/* ==========================================================================
   END SECTION S409: GIFT VOUCHER PAGE 1:1 PARITY FIX
   ========================================================================== */

/* ==========================================================================
   SECTION S404: MY ACCOUNT PAGE 1:1 PARITY FIXES

   React source: src/pages/Account.tsx

   KEY DISCREPANCIES FIXED:
   1. Third stat card icon background: bg-secondary (SOLID, not 10% opacity)
   2. Bid status badges: Match React Badge component exactly
      - active: bg-primary text-primary-foreground (SOLID)
      - outbid: variant="outline" border-destructive text-destructive (NOT solid bg!)
      - won: bg-gold text-forest-dark
      - lost: variant="secondary" bg-secondary text-secondary-foreground
   3. Badge base: rounded-full, px-2.5 py-0.5, text-xs, font-semibold
   4. Bid item image: w-20 h-20 (80px) - was 60px
   5. Bid item row: bg-secondary/30 rounded-sm p-4
   6. Stats gap: gap-6 (1.5rem) not gap-4 (1rem)
   7. Label text size: text-sm (0.875rem) not text-xs
   ========================================================================== */

/* S404-1: Stats grid - gap-6 (1.5rem) per React grid sm:grid-cols-3 gap-6 mb-12 */
.mk-account-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important; /* gap-6 = 24px */
  margin-bottom: 3rem !important; /* mb-12 = 48px */
}

@media (max-width: 640px) {
  .mk-account-stats {
    grid-template-columns: 1fr !important;
  }
}

/* S404-2: Stat card - bg-card rounded-sm shadow-card p-6 */
.mk-account-stat {
  background: hsl(var(--card)) !important;
  border-radius: 0.125rem !important; /* rounded-sm = 2px in ShadCN */
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important; /* p-6 = 24px */
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important; /* gap-4 = 16px */
}

/* S404-3: Stat icon container - w-12 h-12 rounded-full */
.mk-account-stat__icon {
  width: 3rem !important; /* w-12 = 48px */
  height: 3rem !important; /* h-12 = 48px */
  min-width: 3rem !important;
  border-radius: 9999px !important; /* rounded-full */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* S404-4: Stat icon svg - w-6 h-6 */
.mk-account-stat__icon svg {
  width: 1.5rem !important; /* w-6 = 24px */
  height: 1.5rem !important; /* h-6 = 24px */
}

/* S404-5: First stat icon - bg-primary/10, color primary */
.mk-account-stat:first-child .mk-account-stat__icon {
  background: hsl(var(--primary) / 0.1) !important; /* bg-primary/10 */
}
.mk-account-stat:first-child .mk-account-stat__icon svg {
  color: hsl(var(--primary)) !important; /* text-primary */
}

/* S404-6: Second stat (gold) icon - bg-gold/10, color gold */
.mk-account-stat--gold .mk-account-stat__icon,
.mk-account-stat:nth-child(2) .mk-account-stat__icon {
  background: hsl(var(--gold) / 0.1) !important; /* bg-gold/10 */
}
.mk-account-stat--gold .mk-account-stat__icon svg,
.mk-account-stat:nth-child(2) .mk-account-stat__icon svg {
  color: hsl(var(--gold)) !important; /* text-gold */
}

/* S404-7: Third stat icon - bg-secondary (SOLID, not 10% opacity!) */
.mk-account-stat:nth-child(3) .mk-account-stat__icon {
  background: hsl(var(--secondary)) !important; /* bg-secondary - SOLID */
}
.mk-account-stat:nth-child(3) .mk-account-stat__icon svg {
  color: hsl(var(--muted-foreground)) !important; /* text-muted-foreground */
}

/* S404-8: Stat label - text-sm text-muted-foreground */
.mk-account-stat__label {
  display: block !important;
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(var(--muted-foreground)) !important;
  margin-bottom: 0 !important;
}

/* S404-9: Stat value - font-semibold text-foreground */
.mk-account-stat__value {
  display: block !important;
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--foreground)) !important;
  font-size: 1rem !important; /* base size, not 1.25rem */
}

/* S404-10: User info card - bg-card rounded-sm shadow-card p-6 mb-8 */
.mk-account-info-card {
  background: hsl(var(--card)) !important;
  border-radius: 0.125rem !important; /* rounded-sm */
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important; /* p-6 */
  margin-bottom: 2rem !important; /* mb-8 */
  border: none !important;
}

/* S404-11: Info card header - flex justify-between mb-6 */
.mk-account-info-card__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.5rem !important; /* mb-6 */
}

/* S404-12: Info card title - font-display text-xl font-semibold */
.mk-account-info-card__header h3 {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin: 0 !important;
}

/* S404-13: Edit button - ghost variant with Settings icon */
.mk-account-edit-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* mr-2 on icon */
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 400 !important;
  color: hsl(var(--foreground)) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0.25rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color 200ms !important;
}

.mk-account-edit-btn:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

.mk-account-edit-btn svg {
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
}

/* S404-14: Info grid - grid sm:grid-cols-2 gap-4 text-sm */
.mk-account-info-card__data {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important; /* gap-4 = 16px */
  font-size: 0.875rem !important; /* text-sm */
}

@media (max-width: 640px) {
  .mk-account-info-card__data {
    grid-template-columns: 1fr !important;
  }
}

.mk-account-info-card__data div {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* S404-15: Info labels - text-muted-foreground (no uppercase!) */
.mk-account-info-card__data dt {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: hsl(var(--muted-foreground)) !important;
  text-transform: none !important; /* NOT uppercase like before */
  letter-spacing: normal !important;
}

/* S404-16: Info values - ml-2 text-foreground */
.mk-account-info-card__data dd {
  margin-left: 0.5rem !important; /* ml-2 */
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: hsl(var(--foreground)) !important;
}

/* S404-17: My Bids card - bg-card rounded-sm shadow-card p-6 */
.mk-bid-history {
  background: hsl(var(--card)) !important;
  border-radius: 0.125rem !important; /* rounded-sm */
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important; /* p-6 */
}

/* S404-18: My Bids title - font-display text-xl font-semibold mb-6 */
.mk-bid-history h2,
.mk-bid-history h4 {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important; /* text-xl */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 1.5rem !important; /* mb-6 */
}

/* S404-19: Bid row item - flex items-center gap-4 p-4 bg-secondary/30 rounded-sm */
.mk-bid-history-table tbody tr,
.mk-bid-item {
  background: hsl(var(--secondary) / 0.3) !important; /* bg-secondary/30 */
  border-radius: 0.125rem !important; /* rounded-sm */
}

.mk-bid-history-table tbody tr td {
  padding: 1rem !important; /* p-4 */
  border-bottom: none !important;
}

/* S404-20: Bid row spacing - space-y-4 between rows */
.mk-bid-history-table tbody tr {
  margin-bottom: 1rem !important;
}

.mk-bid-history-table tbody tr:last-child {
  margin-bottom: 0 !important;
}

/* S404-21: Bid image - w-20 h-20 object-cover rounded-sm */
.mk-bid-history__thumb img,
.mk-bid-history-table .mk-bid-history__thumb img {
  width: 5rem !important; /* w-20 = 80px */
  height: 5rem !important; /* h-20 = 80px */
  object-fit: cover !important;
  border-radius: 0.125rem !important; /* rounded-sm */
}

/* S404-22: Bid link hover - font-display font-semibold hover:text-primary */
.mk-bid-history__title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--foreground)) !important;
  transition: color 200ms !important;
}

.mk-bid-history__link:hover .mk-bid-history__title {
  color: hsl(var(--primary)) !important;
}

/* S404-23: Artist name - text-sm text-muted-foreground */
.mk-bid-history__artist {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--muted-foreground)) !important;
}

/* S404-24: Bid amount label - text-muted-foreground */
/* S404-25: Bid amount value - ml-2 font-semibold text-primary */
.mk-bid-history__amount {
  color: hsl(var(--muted-foreground)) !important;
}

.mk-bid-history__amount strong,
.mk-bid-history__amount .woocommerce-Price-amount {
  margin-left: 0.5rem !important; /* ml-2 */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--primary)) !important; /* text-primary */
}

/* S404-26: Date - text-xs text-muted-foreground mt-2 */
.mk-bid-history__date {
  font-size: 0.75rem !important; /* text-xs */
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 0.5rem !important; /* mt-2 */
}

/* ==========================================================================
   S404 PART 2: BID STATUS BADGES - Match React Badge component EXACTLY

   React Badge variants:
   - default: border-transparent bg-primary text-primary-foreground
   - secondary: border-transparent bg-secondary text-secondary-foreground
   - outline: border-[border-color] bg-transparent text-foreground

   Badge base: rounded-full border px-2.5 py-0.5 text-xs font-semibold
   ========================================================================== */

/* S404-27: Badge base styles - rounded-full px-2.5 py-0.5 text-xs font-semibold */
.mk-bid-history__status,
.mk-bid-badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9999px !important; /* rounded-full */
  border: 1px solid transparent !important;
  padding: 0.125rem 0.625rem !important; /* py-0.5 px-2.5 */
  font-size: 0.75rem !important; /* text-xs = 12px */
  font-weight: 600 !important; /* font-semibold */
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background-color 200ms !important;
}

/* S404-28: ACTIVE status - bg-primary text-primary-foreground (SOLID, not 10%) */
.mk-bid-history__status--active,
.mk-bid-history__status--winning,
.mk-bid-badge--active {
  background: hsl(var(--primary)) !important; /* SOLID primary - NOT 10% opacity! */
  color: hsl(var(--primary-foreground)) !important;
  border-color: transparent !important;
}

/* S404-29: OUTBID status - OUTLINE variant: border-destructive text-destructive NO background */
.mk-bid-history__status--outbid,
.mk-bid-badge--outbid {
  background: transparent !important; /* NO background - outline variant */
  border: 1px solid hsl(var(--destructive)) !important; /* border-destructive */
  color: hsl(var(--destructive)) !important; /* text-destructive */
}

/* S404-30: WON status - bg-gold text-forest-dark */
.mk-bid-history__status--won,
.mk-bid-badge--won {
  background: hsl(var(--gold)) !important; /* bg-gold - SOLID */
  color: hsl(160 35% 20%) !important; /* text-forest-dark */
  border-color: transparent !important;
}

/* S404-31: LOST status - variant="secondary" = bg-secondary text-secondary-foreground */
.mk-bid-history__status--lost,
.mk-bid-badge--lost {
  background: hsl(var(--secondary)) !important; /* bg-secondary - SOLID */
  color: hsl(var(--secondary-foreground)) !important; /* text-secondary-foreground */
  border-color: transparent !important;
}

/* ==========================================================================
   END SECTION S404: MY ACCOUNT PAGE 1:1 PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S391: CONTACT PAGE FORM INPUT BORDER-RADIUS CONFIRMATION

   NOTE: React uses rounded-md = calc(var(--radius) - 2px) = 2px in this project
   The current 2px value is CORRECT per tailwind.config.ts:
     borderRadius: { md: "calc(var(--radius) - 2px)" }
   where --radius = 0.25rem (4px), so rounded-md = 2px
   ========================================================================== */

/* S391-1: Contact form inputs - rounded-md = 2px (0.125rem) */
.page-id-15 input[type="text"],
.page-id-15 input[type="email"],
.page-id-15 textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.mk-contact-form input,
.mk-contact-form textarea {
  border-radius: 0.125rem !important; /* 2px = rounded-md in this project */
}

/* ==========================================================================
   END SECTION S391: CONTACT PAGE FORM INPUT BORDER-RADIUS CONFIRMATION
   ========================================================================== */

/* ==========================================================================
   SECTION S392: FOOTER GIFT VOUCHER LINK GOLD COLOR

   ISSUE: "Įsigyti kuponą" link shows in cream but should be gold
   FIX: Apply gold color to the specific link in footer gift voucher section
   ========================================================================== */

/* S392-1: Gift voucher section link uses gold color */
.mk-footer .mk-footer__voucher a,
.mk-footer__voucher a,
.site-footer [class*="voucher"] a,
footer [href*="kupon"] {
  color: hsl(var(--gold)) !important;
}

/* S392-2: Hover state */
.mk-footer .mk-footer__voucher a:hover,
.mk-footer__voucher a:hover,
footer [href*="kupon"]:hover {
  color: hsl(var(--gold) / 0.8) !important;
}

/* ==========================================================================
   END SECTION S392: FOOTER GIFT VOUCHER LINK GOLD COLOR
   ========================================================================== */

/* ==========================================================================
   SECTION S393: HOMEPAGE HERO HEIGHT FIX

   ISSUE: Hero height doesn't match React h-[80vh] lg:h-[90vh]
   FIX: Set exact height values matching React
   ========================================================================== */

/* S393-1: Base hero height (mobile) - h-[80vh] */
.mk-hero,
.home .wp-block-cover.mk-hero,
body.home .mk-hero {
  height: 80vh !important;
  min-height: 80vh !important;
  max-height: 80vh !important;
}

/* S393-2: Desktop hero height at lg breakpoint (1024px) - lg:h-[90vh] */
@media (min-width: 1024px) {
  .mk-hero,
  .home .wp-block-cover.mk-hero,
  body.home .mk-hero {
    height: 90vh !important;
    min-height: 90vh !important;
    max-height: 90vh !important;
  }
}

/* ==========================================================================
   END SECTION S393: HOMEPAGE HERO HEIGHT FIX
   ========================================================================== */

/* ==========================================================================
   SECTION S397: SINGLE PRODUCT TRUST BADGES LAYOUT

   React: grid grid-cols-3 gap-4 mt-6, each badge is flex-col items-center
   ========================================================================== */

/* S397-1: Trust badges container - 3 column grid */
.mk-trust-badges,
.single-product .mk-trust-badges,
.woocommerce-product-details .mk-trust-badges {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
  margin-top: 1.5rem !important;
}

/* S397-2: Individual badge - centered column */
.mk-trust-badge,
.mk-trust-badges > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 1rem !important;
  background: hsl(var(--muted) / 0.3) !important;
  border-radius: 0.125rem !important;
}

/* S397-3: Badge icon */
.mk-trust-badge svg,
.mk-trust-badges svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: hsl(var(--primary)) !important;
  margin-bottom: 0.5rem !important;
}

/* S397-4: Badge text */
.mk-trust-badge span,
.mk-trust-badges span {
  font-size: 0.75rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* S397-5: Responsive - stack on small screens */
@media (max-width: 400px) {
  .mk-trust-badges {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   END SECTION S397: SINGLE PRODUCT TRUST BADGES LAYOUT
   ========================================================================== */

/* ==========================================================================
   SECTION S398: HOMEPAGE NEWSLETTER LAYOUT FIX

   React: 2-column grid at lg, image staggering, form layout
   ========================================================================== */

/* S398-1: Section background and padding */
.mk-newsletter-section,
.home .mk-newsletter,
.mk-newsletter {
  background: hsl(var(--muted) / 0.3) !important;
  padding: 5rem 0 !important;
}

/* S398-2: Main grid - 2 columns at lg */
.mk-newsletter__grid,
.mk-newsletter-section > .wp-block-group,
.mk-newsletter .wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3rem !important;
}

@media (min-width: 1024px) {
  .mk-newsletter__grid,
  .mk-newsletter-section > .wp-block-group,
  .mk-newsletter .wp-block-columns {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* S398-3: Left column content spacing */
.mk-newsletter__content,
.mk-newsletter .wp-block-column:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

/* S398-4: Right column - hidden below lg */
.mk-newsletter__images,
.mk-newsletter .wp-block-column:last-child {
  display: none !important;
}

@media (min-width: 1024px) {
  .mk-newsletter__images,
  .mk-newsletter .wp-block-column:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

/* S398-5: Second image staggered offset */
.mk-newsletter__images img:nth-child(2),
.mk-newsletter .wp-block-column:last-child img:nth-child(2) {
  margin-top: 2rem !important;
}

/* S398-6: Image styling */
.mk-newsletter__images img,
.mk-newsletter .wp-block-column:last-child img {
  border-radius: 0 !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

/* S398-7: Submit button - full width mobile, auto at sm */
.mk-newsletter button[type="submit"],
.mk-newsletter .wpcf7-submit {
  width: 100% !important;
}

@media (min-width: 640px) {
  .mk-newsletter button[type="submit"],
  .mk-newsletter .wpcf7-submit {
    width: auto !important;
  }
}

/* S398-8: Form flex column */
.mk-newsletter form,
.mk-newsletter .wpcf7-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* S398-9: Heading style */
.mk-newsletter h2,
.mk-newsletter-section h2 {
  font-family: var(--wp--preset--font-family--playfair-display), Georgia, serif !important;
  font-size: 1.875rem !important;
}

@media (min-width: 768px) {
  .mk-newsletter h2,
  .mk-newsletter-section h2 {
    font-size: 2.25rem !important;
  }
}

/* S398-10: Description text */
.mk-newsletter p,
.mk-newsletter-section p {
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.625 !important;
}

/* ==========================================================================
   END SECTION S398: HOMEPAGE NEWSLETTER LAYOUT FIX
   ========================================================================== */

/* ==========================================================================
   SECTION S400: CONTACT FORM 2-COLUMN LAYOUT FIX

   React: Name/Email in 2-column grid at sm (640px)
   ========================================================================== */

/* S400-1: Form row grid - starts as 1 column */
.wpcf7-form .mk-form-row,
.page-id-15 .wpcf7-form p:first-of-type {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}

/* S400-2: 2 columns at 640px */
@media (min-width: 640px) {
  .wpcf7-form .mk-form-row,
  .page-id-15 .wpcf7-form p:first-of-type {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* S400-3: Hide BR tags in form */
.wpcf7-form br {
  display: none !important;
}

/* S400-4: Label styling */
.wpcf7-form label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
  color: hsl(var(--foreground)) !important;
}

/* S400-5: Input wrapper */
.wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
}

/* ==========================================================================
   END SECTION S400: CONTACT FORM 2-COLUMN LAYOUT FIX
   ========================================================================== */

/* ==========================================================================
   SECTION S401: SINGLE PRODUCT BID COUNT BADGE - ROUNDED-FULL

   React: Badge variant="outline" with rounded-full (pill shape)
   ========================================================================== */

/* S401-1: Bid count badge styling */
.mk-bid-count-badge,
.single-product .mk-bid-count,
.woocommerce-product-details .mk-bid-count {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9999px !important; /* rounded-full */
  border: 1px solid hsl(var(--border)) !important;
  background-color: transparent !important;
  padding: 0.125rem 0.625rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
}

/* S401-2: Icon inside badge */
.mk-bid-count-badge svg,
.mk-bid-count svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  margin-right: 0.25rem !important;
}

/* S401-3: Lot row layout */
.mk-lot-row,
.single-product .mk-lot-info {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-bottom: 0.5rem !important;
}

/* ==========================================================================
   END SECTION S401: SINGLE PRODUCT BID COUNT BADGE
   ========================================================================== */

/* ==========================================================================
   SECTION S402: HOMEPAGE ABOUT SECTION GOLD BLUR DECORATION

   React: absolute -bottom-6 -right-6 w-32 h-32 bg-gold/20 rounded-full blur-3xl
   Tailwind blur-3xl = 64px (NOT 48px)
   ========================================================================== */

/* S402-1: Image wrapper positioning */
.mk-about-image-wrapper,
.mk-about__image-container,
.home .mk-about .wp-block-image {
  position: relative !important;
  overflow: visible !important;
}

/* S402-2: Gold blur pseudo-element */
.mk-about-image-wrapper::after,
.mk-about__image-container::after,
.home .mk-about .wp-block-image::after {
  content: "" !important;
  position: absolute !important;
  bottom: -1.5rem !important;
  right: -1.5rem !important;
  width: 8rem !important;
  height: 8rem !important;
  background-color: hsl(var(--gold) / 0.2) !important;
  border-radius: 9999px !important;
  filter: blur(64px) !important; /* blur-3xl = 64px */
  z-index: -1 !important;
  pointer-events: none !important;
}

/* S402-3: Image wrapper styling */
.mk-about-image-wrapper img,
.mk-about__image-container img,
.home .mk-about .wp-block-image img {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-elegant) !important;
  overflow: hidden !important;
}

/* S402-4: Image height */
.mk-about-image-wrapper img,
.home .mk-about .wp-block-image img {
  height: 400px !important;
  object-fit: cover !important;
}

/* ==========================================================================
   END SECTION S402: HOMEPAGE ABOUT SECTION GOLD BLUR DECORATION
   ========================================================================== */

/* ==========================================================================
   SECTION S403: GALLERY FILTER BUTTON RADIUS FIX

   React: Button uses rounded-sm in custom config = 0.25rem (4px), NOT pill shape
   ========================================================================== */

/* S403-1: Gallery filter buttons - 4px radius, not pill */
.mk-gallery-filters button,
.mk-gallery-filter-btn,
.page-id-92 .mk-gallery-filters button {
  border-radius: 0.25rem !important; /* rounded-sm custom = 4px */
  height: 2.25rem !important; /* h-9 */
  padding: 0 1rem !important; /* px-4 */
}

/* S403-2: Active filter - primary background */
.mk-gallery-filters button.active,
.mk-gallery-filter-btn.active,
.mk-gallery-filters button[aria-pressed="true"] {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* S403-3: Inactive filter - outline variant */
.mk-gallery-filters button:not(.active),
.mk-gallery-filter-btn:not(.active) {
  background: transparent !important;
  color: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary)) !important;
}

/* S403-4: Hover state */
.mk-gallery-filters button:not(.active):hover {
  background: hsl(var(--primary) / 0.1) !important;
}

/* ==========================================================================
   END SECTION S403: GALLERY FILTER BUTTON RADIUS FIX
   ========================================================================== */

/* ==========================================================================
   SECTION S405: INFORMACIJA PAGE ROUNDED-XL FIXES

   React uses rounded-xl = 0.75rem (12px) for tabs and content cards
   Standard Tailwind value (not overridden in custom config)
   ========================================================================== */

/* S405-1: Hero H1 font-weight - font-bold = 700 */
.mk-informacija-hero h1,
.page-template-page-informacija h1 {
  font-weight: 700 !important;
}

/* S405-2: Hero subtitle opacity - /80 = 0.8 */
.mk-informacija-hero p,
.page-template-page-informacija .mk-hero-subtitle {
  opacity: 0.8 !important;
}

/* S405-3: TabsList border-radius - rounded-xl = 0.75rem (12px) */
.mk-tabs-list,
.mk-informacija-tabs,
[role="tablist"] {
  border-radius: 0.75rem !important; /* 12px */
  background: hsl(var(--muted) / 0.5) !important;
  padding: 0.5rem !important;
}

/* S405-4: TabsTrigger padding - px-4 py-2.5 */
.mk-tab-trigger,
[role="tab"] {
  padding: 0.625rem 1rem !important; /* 10px 16px */
  border-radius: 0.5rem !important;
}

/* S405-5: Active tab - primary colors */
.mk-tab-trigger.active,
[role="tab"][aria-selected="true"] {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* S405-6: Content card border-radius - rounded-xl = 0.75rem */
.mk-tab-content,
[role="tabpanel"],
.mk-informacija-content {
  background: hsl(var(--card)) !important;
  border-radius: 0.75rem !important; /* 12px */
  padding: 2rem !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* S405-7: Section H3 - text-primary (forest green) */
.mk-informacija-content h3,
.mk-tab-content h3,
[role="tabpanel"] h3 {
  font-family: var(--wp--preset--font-family--playfair-display), Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: hsl(var(--primary)) !important;
  margin-bottom: 0.75rem !important;
}

/* S405-8: Paragraph styling */
.mk-informacija-content p,
.mk-tab-content p,
[role="tabpanel"] p {
  white-space: pre-line !important;
  line-height: 1.625 !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* ==========================================================================
   END SECTION S405: INFORMACIJA PAGE ROUNDED-XL FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S410: COMPREHENSIVE 1:1 PARITY FIXES v1.39.2
   Date: 2026-04-01
   Source: 10-agent visual comparison audit

   CRITICAL FIXES FROM AGENT REPORTS:
   - Contact: Form input styling, 2-column layout
   - Gallery: Filter buttons, grid columns
   - Catalog: Product card layout, sidebar, badges, timer
   - Gift Voucher: CTA gold color, validity rules green border
   - Pardavimas: Step badges GOLD with dark text
   - Pirkimas: Container width, feature cards
   ========================================================================== */

/* ---------------------------------------------------------------------------
   S410-A: CONTACT PAGE FORM FIXES
   --------------------------------------------------------------------------- */

/* A1: Form container card styling */
.page-id-15 .wpcf7-form,
.mk-contact-form-card {
  background: hsl(var(--card)) !important;
  border-radius: calc(0.25rem - 4px) !important; /* rounded-sm = ~0 */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important;
  padding: 2rem !important;
}

/* A2: Input fields - height 40px, 2px radius */
.page-id-15 .wpcf7 input[type="text"],
.page-id-15 .wpcf7 input[type="email"],
.wpcf7 input[type="text"],
.wpcf7 input[type="email"] {
  height: 2.5rem !important; /* 40px */
  border-radius: calc(0.25rem - 2px) !important; /* ~2px */
  border: 1px solid hsl(36 20% 85%) !important;
  background: hsl(var(--background)) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  width: 100% !important;
}

/* A3: Textarea styling */
.page-id-15 .wpcf7 textarea,
.wpcf7 textarea {
  min-height: 80px !important;
  border-radius: calc(0.25rem - 2px) !important;
  border: 1px solid hsl(36 20% 85%) !important;
  background: hsl(var(--background)) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  width: 100% !important;
}

/* A4: Submit button - full width, catalog variant */
.page-id-15 .wpcf7 input[type="submit"],
.wpcf7 input[type="submit"] {
  width: 100% !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  height: 2.5rem !important;
  padding: 0.5rem 1.5rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  border-radius: 0.25rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 300ms !important;
}

.page-id-15 .wpcf7 input[type="submit"]:hover {
  background: hsl(160 25% 38%) !important;
}

/* A5: Label styling */
.page-id-15 .wpcf7 label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
  color: hsl(var(--foreground)) !important;
}

/* A6: Field spacing */
.page-id-15 .wpcf7-form > p {
  margin-bottom: 1.5rem !important;
}

/* A7: Contact info icon containers */
.page-id-15 .mk-contact-icon,
.mk-contact-info-card svg {
  width: 3rem !important;
  height: 3rem !important;
  padding: 0.75rem !important;
  border-radius: 9999px !important;
  background: hsl(var(--primary) / 0.1) !important;
  color: hsl(var(--primary)) !important;
  flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------------------
   S410-B: GALLERY PAGE FIXES
   --------------------------------------------------------------------------- */

/* B1: Category filter buttons container */
.page-id-92 .mk-gallery-filters,
.mk-gallery-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-bottom: 2rem !important;
}

/* B2: Filter button styling - 4px radius, NOT pill */
.page-id-92 .mk-gallery-filter-btn,
.mk-gallery-filter-btn {
  height: 2.25rem !important; /* h-9 */
  padding: 0 1rem !important; /* px-4 */
  border-radius: 0.25rem !important; /* 4px, NOT pill */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 300ms !important;
  cursor: pointer !important;
  border: 1px solid hsl(var(--primary)) !important;
}

/* B3: Active filter - PRIMARY green background */
.page-id-92 .mk-gallery-filter-btn.active,
.mk-gallery-filter-btn.active,
.mk-gallery-filter-btn[aria-pressed="true"] {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* B4: Inactive filter - outline variant */
.page-id-92 .mk-gallery-filter-btn:not(.active),
.mk-gallery-filter-btn:not(.active) {
  background: transparent !important;
  color: hsl(var(--primary)) !important;
}

.page-id-92 .mk-gallery-filter-btn:not(.active):hover,
.mk-gallery-filter-btn:not(.active):hover {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* B5: Product grid - 4 columns at xl (1280px) */
@media (min-width: 1280px) {
  .page-id-92 .mk-gallery-grid,
  .mk-gallery-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* B6: Product card styling */
.page-id-92 .mk-gallery-card,
.mk-gallery-products-grid .product {
  background: hsl(var(--card)) !important;
  border-radius: calc(0.25rem - 4px) !important; /* rounded-sm = 0 */
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
}

.page-id-92 .mk-gallery-card:hover,
.mk-gallery-products-grid .product:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* B7: Card image aspect ratio 4:5 */
.page-id-92 .mk-gallery-card img,
.mk-gallery-products-grid .product img {
  aspect-ratio: 4/5 !important;
  object-fit: cover !important;
  width: 100% !important;
}

/* B8: Card content padding */
.page-id-92 .mk-gallery-card__content,
.mk-gallery-products-grid .product .woocommerce-loop-product__title {
  padding: 1.25rem !important; /* p-5 = 20px */
}

/* ---------------------------------------------------------------------------
   S410-C: CATALOG PAGE PRODUCT CARD FIXES
   --------------------------------------------------------------------------- */

/* C1: Product card layout fix - CRITICAL */
.wc-block-product-template .wc-block-product,
.products .product,
.mk-product-card {
  display: flex !important;
  flex-direction: column !important;
  background: hsl(var(--card)) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
}

/* C2: Product card hover */
.wc-block-product-template .wc-block-product:hover,
.products .product:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* C3: Product image styling */
.wc-block-product-template .wc-block-product img,
.products .product img {
  aspect-ratio: 4/5 !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

/* C4: Product content area */
.wc-block-product-template .wc-block-product__content,
.products .product .woocommerce-loop-product__title {
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* C5: Sidebar width */
.mk-catalog-sidebar,
aside.mk-sidebar {
  width: 280px !important;
  min-width: 280px !important;
  flex-shrink: 0 !important;
}

/* C6: Status badges on product images */
.mk-badge {
  position: absolute !important;
  top: 0.5rem !important;
  left: 0.5rem !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: white !important;
  z-index: 10 !important;
}

.mk-badge--active {
  background: hsl(142 76% 36%) !important; /* green */
}

.mk-badge--ending {
  background: hsl(0 84% 60%) !important; /* red */
  animation: pulse 1.5s infinite !important;
}

.mk-badge--upcoming {
  background: hsl(var(--muted)) !important;          /* React: bg-muted NOT gold */
  color: hsl(var(--muted-foreground)) !important;   /* React: text-muted-foreground */
}

/* C7: Timer overlay on product images */
.mk-timer-overlay {
  position: absolute !important;
  bottom: 0.5rem !important;
  right: 0.5rem !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: white !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.875rem !important;
  font-variant-numeric: tabular-nums !important;
  z-index: 10 !important;
}

/* C8: Category filter buttons in sidebar */
.mk-category-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1rem !important;
  background: hsl(var(--primary)) !important;
  color: white !important;
  border-radius: 0.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 200ms !important;
  border: none !important;
}

/* C9: Time filter pills */
.mk-time-filter {
  display: inline-flex !important;
  padding: 0.25rem 0.75rem !important;
  border: 1px solid hsl(var(--primary)) !important;
  border-radius: 9999px !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  background: transparent !important;
  color: hsl(var(--primary)) !important;
}

.mk-time-filter[aria-pressed="true"],
.mk-time-filter.active {
  background: hsl(var(--primary)) !important;
  color: white !important;
}

/* C10: Toolbar styling */
.mk-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 1rem !important;
}

.mk-result-count {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

.mk-sort-select {
  min-width: 180px !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 0.75rem !important;
}

/* ---------------------------------------------------------------------------
   S410-D: GIFT VOUCHER PAGE FIXES
   --------------------------------------------------------------------------- */

/* D1: CTA Button MUST be GOLD, not primary */
.page-id-19 .mk-voucher-cta,
.page-id-19 button[class*="order"],
.page-id-19 .wp-element-button.has-gold-background-color {
  background-color: hsl(var(--gold)) !important;
  color: hsl(var(--foreground)) !important;
  font-size: 1.125rem !important; /* 18px */
  font-weight: 600 !important;
  border-radius: 0.5rem !important; /* 8px rounded-lg */
}

.page-id-19 .mk-voucher-cta:hover {
  background-color: hsl(var(--gold-light)) !important;
}

/* D2: Amount button border-radius = 8px (rounded-lg) */
.page-id-19 .mk-voucher-amount-btn,
.page-id-19 button[class*="amount"] {
  border-radius: 0.5rem !important; /* 8px */
}

/* D3: Custom amount input width = 128px */
.page-id-19 input[type="number"],
.page-id-19 input[placeholder*="Kita"] {
  width: 8rem !important; /* 128px */
  max-width: 8rem !important;
}

/* D4: Feature cards - individual styling */
.page-id-19 .wp-block-columns > .wp-block-column:has(svg),
.page-id-19 .mk-feature-card {
  background-color: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.75rem !important; /* 12px rounded-xl */
  padding: 1.5rem !important; /* 24px */
  text-align: center !important;
}

/* D5: Feature card titles - ALLOW full text display (FIX truncation)
   React shows full text: "Universalus", "Galioja 12 men.", "Elegantiska dovana"
   Previous rule truncated with ellipsis - WRONG */
.page-id-19 .wp-block-column h3,
.page-id-19 .wp-block-column h4,
.page-id-19 .mk-feature-card h3 {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-wrap: break-word !important;
}

/* D6: CRITICAL - Validity rules border-left = PRIMARY GREEN */
.page-id-19 .mk-validity-rule,
.page-id-19 div[style*="border-left"],
.page-id-19 .wp-block-group[style*="border-left"] {
  border-left: 4px solid hsl(var(--primary)) !important;
  border-left-color: hsl(var(--primary)) !important;
  padding-left: 1rem !important;
  margin-bottom: 1rem !important;
}

/* D7: Validity section - white/card background */
.page-id-19 .mk-validity-section,
.page-id-19 .wp-block-group:has(h2[class*="validity"]),
.page-id-19 .wp-block-group:has(.mk-validity-rule) {
  background-color: hsl(var(--card)) !important;
  background: hsl(var(--card)) !important;
}

/* ---------------------------------------------------------------------------
   S410-E: PARDAVIMAS PAGE FIXES
   --------------------------------------------------------------------------- */

/* E1: CRITICAL - Step badges MUST be GOLD with DARK text */
.page-id-17 .mk-step-card__badge,
.page-id-17 .mk-sell-step-number,
.mk-step-badge {
  background-color: hsl(var(--gold)) !important;
  color: hsl(var(--foreground)) !important;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: -0.75rem !important;
  left: -0.75rem !important;
}

/* E2: Step icons = 40px */
.page-id-17 .mk-step-card__icon,
.page-id-17 .mk-step-card svg {
  width: 2.5rem !important;
  height: 2.5rem !important;
  color: hsl(var(--primary)) !important;
  margin-bottom: 1rem !important;
}

/* E3: All rounded-sm elements = 0 radius */
.page-id-17 .mk-step-card,
.page-id-17 .mk-form-card,
.page-id-17 .mk-commission,
.page-id-17 .mk-contact-alt,
.page-id-17 .mk-upload-area {
  border-radius: 0 !important;
}

/* E4: Commission section text opacity 80% */
.page-id-17 .mk-commission p,
.page-id-17 .mk-commission li {
  color: hsl(var(--primary-foreground) / 0.8) !important;
}

/* ---------------------------------------------------------------------------
   S410-F: PIRKIMAS PAGE FIXES
   --------------------------------------------------------------------------- */

/* F1: Container max-width = 56rem (896px) */
.page-id-16 .entry-content,
.page-id-16 main .wp-block-group,
.mk-pirkimas-content {
  max-width: 56rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* F2: Feature cards - 0 border-radius */
.page-id-16 .mk-feature-card,
.page-id-16 .wp-block-group.has-background {
  border-radius: 0 !important;
  background: hsl(var(--card)) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important;
  text-align: center !important;
}

/* F3: Feature card title no-wrap */
.page-id-16 .wp-block-heading:is(h4),
.page-id-16 .mk-feature-card h4 {
  white-space: nowrap !important;
  font-family: var(--wp--preset--font-family--playfair-display), Georgia, serif !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

/* F4: Step number badges = 64px circle, primary green */
.page-id-16 .mk-step-badge,
.page-id-16 .mk-step-number {
  width: 4rem !important; /* 64px */
  height: 4rem !important;
  border-radius: 9999px !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  font-family: var(--wp--preset--font-family--playfair-display), Georgia, serif !important;
  font-size: 1.25rem !important; /* text-xl */
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---------------------------------------------------------------------------
   S410-G: INFORMACIJA PAGE ADDITIONAL FIXES
   --------------------------------------------------------------------------- */

/* G1: Tabs container border-radius = 12px (rounded-xl) */
.mk-info-tabs,
[role="tablist"],
.wp-block-buttons.mk-info-tabs {
  border-radius: 0.75rem !important;
  background: hsl(var(--muted) / 0.5) !important;
  padding: 0.5rem !important;
}

/* G2: Tab trigger padding */
.mk-info-tab,
[role="tab"] {
  padding: 0.625rem 1rem !important; /* py-2.5 px-4 */
  border-radius: 0.375rem !important;
}

/* G3: Content card styling */
.mk-info-content,
[role="tabpanel"],
.mk-info-card {
  background: hsl(var(--card)) !important;
  border-radius: 0.75rem !important; /* 12px */
  padding: 2rem !important; /* p-8 */
  border: 1px solid hsl(var(--border)) !important;
}

/* G4: Content header icon */
.mk-info-content-header svg,
.mk-info-icon {
  width: 2rem !important; /* 32px */
  height: 2rem !important;
  color: hsl(var(--gold)) !important;
}

/* ==========================================================================
   END SECTION S410: COMPREHENSIVE 1:1 PARITY FIXES v1.39.2
   ========================================================================== */

/* ==========================================================================
   SECTION S411: AGENT-VERIFIED CRITICAL FIXES v1.39.3
   Based on 20-agent parallel verification cycle
   ========================================================================== */

/* ---------------------------------------------------------------------------
   S411-A: POST-AUCTION PAGE - BUY BUTTON MUST BE GOLD
   --------------------------------------------------------------------------- */

/* Post-auction products - buy button is GOLD with DARK text */
.page-id-93 .wc-block-components-product-button .wp-block-button__link,
.page-id-93 .add_to_cart_button,
.page-id-93 .button.add_to_cart_button,
body.page-poaukcionine .add_to_cart_button,
.mk-poaukcionine-grid .add_to_cart_button {
  background-color: hsl(var(--gold)) !important;
  background: hsl(var(--gold)) !important;
  color: hsl(var(--foreground)) !important;
  border: none !important;
}

.page-id-93 .wc-block-components-product-button .wp-block-button__link:hover,
.page-id-93 .add_to_cart_button:hover,
body.page-poaukcionine .add_to_cart_button:hover {
  background-color: hsl(var(--gold-light)) !important;
  background: hsl(var(--gold-light)) !important;
}

/* ---------------------------------------------------------------------------
   S411-B: IVYKE (PAST AUCTIONS) - PARDUOTA OVERLAY
   --------------------------------------------------------------------------- */

/* Sold items overlay - PARDUOTA text on dark background */
.page-id-91 .wc-block-grid__product-image,
.page-id-91 .woocommerce-product-gallery__image,
body.archive-ivyke .product-image-wrapper,
.mk-product-sold .wc-block-grid__product-image {
  position: relative !important;
}

/* Dark overlay (::before) - React: bg-foreground/60 */
.page-id-91 .wc-block-grid__product-image::before,
body.archive-ivyke .wc-block-grid__product-image::before,
.page-id-91 .wc-block-components-product-image::before,
body.archive-ivyke .wc-block-components-product-image::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: hsl(160 30% 18% / 0.6) !important;
  z-index: 5 !important;
  border-radius: 0.25rem !important;
  pointer-events: none !important;
}

/* PARDUOTA badge (::after) - React: bg-gold text-foreground Badge with CheckCircle */
.page-id-91 .wc-block-grid__product-image::after,
body.archive-ivyke .wc-block-grid__product-image::after,
.page-id-91 .wc-block-components-product-image::after,
body.archive-ivyke .wc-block-components-product-image::after {
  /* React: <Badge variant="secondary" className="bg-gold text-foreground font-semibold text-lg px-4 py-2"> */
  content: "\2713  PARDUOTA" !important; /* Unicode checkmark + PARDUOTA */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: hsl(42 55% 58%) !important; /* gold */
  color: hsl(160 30% 18%) !important; /* foreground (dark forest) */
  font-size: 1.125rem !important; /* text-lg */
  font-weight: 600 !important; /* font-semibold */
  padding: 0.5rem 1rem !important; /* py-2 px-4 */
  border-radius: 0.25rem !important;
  z-index: 6 !important;
  letter-spacing: 0.025em !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

/* Hide add-to-cart on past auction items */
.page-id-91 .add_to_cart_button,
body.archive-ivyke .add_to_cart_button {
  display: none !important;
}

/* Show "Perziureti rezultata" link instead */
.page-id-91 .wc-block-grid__product-link::after,
body.archive-ivyke .wc-block-grid__product-link::after {
  content: "Peržiūrėti rezultatą" !important;
  display: block !important;
  margin-top: 1rem !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid hsl(160 30% 18% / 0.2) !important;
  border-radius: 0.25rem !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  color: hsl(160 30% 18%) !important;
  transition: all 0.2s !important;
}

.page-id-91 .wc-block-grid__product-link:hover::after,
body.archive-ivyke .wc-block-grid__product-link:hover::after {
  border-color: hsl(160 30% 28%) !important;
  color: hsl(160 30% 28%) !important;
}

/* ---------------------------------------------------------------------------
   S411-C: HEADER NAVIGATION VISIBILITY
   --------------------------------------------------------------------------- */

/* Ensure header navigation is visible on desktop */
@media (min-width: 1024px) {
  .mk-header-nav,
  header .wp-block-navigation,
  .wp-block-navigation__container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Navigation items spacing */
  .wp-block-navigation__container,
  .mk-header-nav .wp-block-navigation-item {
    gap: 1.5rem !important;
  }
}

@media (min-width: 1400px) {
  .wp-block-navigation__container,
  .mk-header-nav .wp-block-navigation-item {
    gap: 2rem !important;
  }
}

/* Hide WP toggle switches on nav dropdowns - show chevron instead */
.wp-block-navigation__submenu-icon.toggle,
.wp-block-navigation-item .wp-block-navigation__submenu-icon[aria-expanded] {
  display: none !important;
}

/* Add proper chevron for dropdown nav items */
.wp-block-navigation-item.has-child > a::after {
  content: '' !important;
  display: inline-block !important;
  width: 0.75rem !important;
  height: 0.75rem !important;
  margin-left: 0.25rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23203D31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  vertical-align: middle !important;
}

/* ---------------------------------------------------------------------------
   S411-D: SEARCH INPUT - ICON ON LEFT
   --------------------------------------------------------------------------- */

.mk-header-search,
.wp-block-search__inside-wrapper {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.mk-header-search .wp-block-search__button,
header .wp-block-search__button {
  order: -1 !important;
  position: absolute !important;
  left: 0.75rem !important;
  right: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  z-index: 2 !important;
}

.mk-header-search .wp-block-search__input,
header .wp-block-search__input {
  padding-left: 2.5rem !important;
  padding-right: 0.75rem !important;
}

/* ---------------------------------------------------------------------------
   S411-E: CART ICON - REMOVE FILLED BACKGROUND, HIDE EMPTY BADGE
   --------------------------------------------------------------------------- */

.wc-block-mini-cart__button,
.mk-header-cart a {
  background: transparent !important;
  border: none !important;
  padding: 0.5rem !important;
}

/* Cart badge - hide when empty (0 items) */
.wc-block-mini-cart__badge:empty,
.wc-block-mini-cart__badge[data-count="0"],
.wc-block-mini-cart__quantity-badge:has(.wc-block-mini-cart__badge:empty) {
  display: none !important;
}

/* Cart icon - outline style */
.wc-block-mini-cart__button svg {
  fill: none !important;
  stroke: hsl(var(--foreground)) !important;
  stroke-width: 1.5 !important;
}

/* ---------------------------------------------------------------------------
   S411-F: PRODUCT CARD SHADOWS (NO BORDER - React uses shadow-card only)
   --------------------------------------------------------------------------- */

/* Product cards: shadow-card default, shadow-hover on hover, NO BORDER */
.wc-block-grid__product,
.mk-product-card,
.products .product {
  border: none !important;
  border-radius: calc(var(--radius) - 4px) !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow 300ms ease !important;
}

/* Hover: upgrade to shadow-hover */
.wc-block-grid__product:hover,
.mk-product-card:hover,
.products .product:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* ---------------------------------------------------------------------------
   S411-G: HIDE DUPLICATE PAGE TITLES ON INFO PAGES
   --------------------------------------------------------------------------- */

/* Hide the extra H1 that WordPress generates from page title */
body.page-informacija main > h1:first-child,
body[class*="informacija"] main > h1:first-child,
.page-id-89 main > h1.wp-block-post-title:first-of-type,
.page-parent-page-id-89 main > h1.wp-block-post-title:first-of-type {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   S411-H: FOOTER YEAR PLACEHOLDER FIX
   --------------------------------------------------------------------------- */

/* This requires PHP filter - CSS cannot replace text content */
/* Add to functions.php:
   add_filter('render_block', function($content) {
     return str_replace('[current_year]', date('Y'), $content);
   });
*/

/* ==========================================================================
   END SECTION S411: AGENT-VERIFIED CRITICAL FIXES v1.39.3
   ========================================================================== */

/* ==========================================================================
   SECTION S412: HEADER 100% PARITY - CHEVRONS & CART ICON (v1.39.6)
   ========================================================================== */

/*
 * HDR-1: DROPDOWN CHEVRONS - Fix green squares showing instead of chevron arrows
 *
 * Problem: Two ::after rules conflict
 * - Underline rule (line ~17633): position:absolute, bottom:-2px, bg:green, width:0, height:2px
 * - Chevron rule (line ~66316): width:12px, height:12px, background-image:SVG chevron
 *
 * Result: 12x12px green square with chevron SVG inside (square obscures the icon)
 *
 * Fix: Override the underline positioning and background for .has-child items only
 */

/* Reset ::after for dropdown parent items - show chevron, not underline */
.mk-header .wp-block-navigation-item.has-child > a::after,
.mk-header .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after,
header .wp-block-navigation-item.has-child > a::after,
.site-header .wp-block-navigation-item.has-child > a::after {
  /* Override underline positioning */
  position: static !important;
  bottom: auto !important;
  left: auto !important;

  /* Make background transparent so SVG chevron shows */
  background-color: transparent !important;

  /* Chevron styling from React: ChevronDown w-4 h-4 */
  content: '' !important;
  display: inline-block !important;
  width: 1rem !important;  /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  margin-left: 0.25rem !important; /* gap-1 */
  vertical-align: middle !important;

  /* Chevron SVG - lucide ChevronDown icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23203D31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  /* Transition for hover */
  transition: transform 200ms ease !important;
}

/* Hover state - subtle rotation like React */
.mk-header .wp-block-navigation-item.has-child:hover > a::after,
.mk-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content::after {
  transform: rotate(180deg) !important;
}

/*
 * HDR-2: CART ICON - Replace filled bag with outline cart
 *
 * Problem: WooCommerce mini-cart button has green background, bag icon visible
 * React uses: ShoppingCart from lucide-react (outline, w-5 h-5 = 20px)
 *
 * Fix: Make backgrounds transparent, hide bag SVG, show cart via ::before
 */

/* Make button background transparent (was forest green)
   MAX SPECIFICITY: html body prefix to override generic button rule */
html body .wc-block-mini-cart__button,
html body button.wc-block-mini-cart__button,
html body .mk-header .wc-block-mini-cart__button,
html body .mk-header__cart .wc-block-mini-cart__button,
html body header .wc-block-mini-cart__button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;   /* w-10 = 40px */
  height: 2.5rem !important;  /* h-10 = 40px */
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0.5rem !important;
  border-radius: var(--radius) !important;
  transition: background-color 200ms ease !important;
}

html body .wc-block-mini-cart__button:hover,
html body button.wc-block-mini-cart__button:hover {
  background-color: hsl(var(--muted)) !important;
}

/* Make quantity badge wrapper transparent (was red) - MAX SPECIFICITY */
html body .wc-block-mini-cart__quantity-badge,
html body .wc-block-mini-cart__button .wc-block-mini-cart__quantity-badge,
html body header .wc-block-mini-cart__quantity-badge {
  background: transparent !important;
  background-color: transparent !important;
  position: relative !important;
}

/* Hide the default bag icon SVG inside mini-cart button */
.wc-block-mini-cart__button svg,
.wc-block-mini-cart__icon,
svg.wc-block-mini-cart__icon,
.wc-block-mini-cart__quantity-badge svg {
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Add cart outline icon via ::before on the button */
.wc-block-mini-cart__button::before {
  content: '' !important;
  display: block !important;
  width: 1.25rem !important;  /* w-5 = 20px */
  min-width: 1.25rem !important; /* Prevent flex shrink */
  height: 1.25rem !important; /* h-5 = 20px */
  flex-shrink: 0 !important; /* Prevent flex container from collapsing */

  /* ShoppingCart outline SVG from lucide-react */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23203D31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Badge: red circle with white text, positioned top-right
   HIDE when cart is empty (has hidden attribute or shows "0") */
.wc-block-mini-cart__badge[hidden],
.wc-block-mini-cart__badge:empty {
  display: none !important;
  visibility: hidden !important;
}

.wc-block-mini-cart__badge {
  position: absolute !important;
  top: -0.25rem !important;   /* -top-1 = -4px */
  right: -0.25rem !important; /* -right-1 = -4px */
  width: 1.25rem !important;  /* w-5 = 20px */
  height: 1.25rem !important; /* h-5 = 20px */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.625rem !important; /* text-[10px] */
  font-weight: 500 !important;
  background-color: hsl(0 65% 50%) !important; /* destructive red */
  color: white !important;
  border-radius: 9999px !important;
  z-index: 10 !important;
  padding: 0 !important;
}

/* ==========================================================================
   END SECTION S412: HEADER 100% PARITY
   ========================================================================== */

/* ==========================================================================
   SECTION S413: HEADER SEARCH ICON ON LEFT (v1.40.2)
   ==========================================================================
 * React header has search icon INSIDE input on LEFT side
 * WordPress wp-block-search uses button-inside which puts icon on RIGHT
 * FIX: Use CSS ::before on the input wrapper to show search icon on left,
 *      and hide the actual button
 * ========================================================================== */

/* Search input wrapper: position relative for absolute icon positioning */
.mk-header__search .wp-block-search__inside-wrapper,
.mk-header .wp-block-search__inside-wrapper,
header .wp-block-search__inside-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* Add search icon on LEFT via ::before on wrapper */
.mk-header__search .wp-block-search__inside-wrapper::before,
.mk-header .wp-block-search__inside-wrapper::before,
header .wp-block-search__inside-wrapper::before {
  content: '' !important;
  position: absolute !important;
  left: 0.75rem !important; /* 12px from left edge */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1rem !important; /* 16px */
  height: 1rem !important;
  pointer-events: none !important;
  z-index: 1 !important;

  /* Search icon SVG from lucide-react */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23577066' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Increase left padding on input to make room for icon */
.mk-header__search .wp-block-search__input,
.mk-header .wp-block-search__input,
header .wp-block-search__input {
  padding-left: 2.5rem !important; /* Make room for search icon */
}

/* Hide the button on the right - we're showing icon on left instead */
.mk-header__search .wp-block-search__button,
.mk-header .wp-block-search__button,
header .wp-block-search__button {
  display: none !important;
}

/* ==========================================================================
   END SECTION S413: HEADER SEARCH ICON ON LEFT
   ========================================================================== */

/* ==========================================================================
   S414: SINGLE PRODUCT PAGE 1:1 PARITY FIXES
   Version: 1.40.3
   Date: 2026-04-01

   Based on visual comparison:
   - React: https://aukcionas.tevero.lt/kurinis/1
   - WordPress: https://tvs.menoatranka.lt/kurinys/vasara-nidoje/

   Discrepancies fixed:
   - D1: Hide breadcrumb (React has none)
   - D2: Hide zoom icon and gallery thumbnails
   - D3: Trust badge icon circles
   - D8: Quantity input and button styling
   - D10: Hide related products section
   ========================================================================== */

/* D1: Hide WooCommerce breadcrumb on single product - React has none */
.single-product .woocommerce-breadcrumb,
.single-product nav.woocommerce-breadcrumb,
body.single-product nav[aria-label="Breadcrumb"] {
  display: none !important;
}

/* D2: Hide WooCommerce product gallery zoom trigger - React has none */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery__trigger,
.single-product .woocommerce-product-gallery__trigger {
  display: none !important;
}

/* D2: Hide gallery thumbnails - React shows single image only */
.woocommerce-product-gallery .flex-control-thumbs,
.woocommerce-product-gallery ol.flex-control-thumbs,
.single-product .flex-control-thumbs {
  display: none !important;
}

/* D2: Add shadow to main product image */
.woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__wrapper img {
  box-shadow: var(--shadow-card, 0 2px 12px -2px hsl(160 30% 18% / 0.06)) !important;
  border-radius: 4px !important;
}

/* D3: Trust badges icon container - 36x36 rounded circle with primary bg */
.mk-trust-badges .mk-trust-badge-icon,
.single-product .trust-badge-icon,
.single-product .mk-trust-badge > div:first-child {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: hsl(var(--primary)) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mk-trust-badges .mk-trust-badge-icon svg,
.single-product .trust-badge-icon svg,
.single-product .mk-trust-badge svg {
  width: 18px !important;
  height: 18px !important;
  color: hsl(var(--primary-foreground)) !important;
  stroke: hsl(var(--primary-foreground)) !important;
}

.mk-trust-badges .mk-trust-badge-text,
.single-product .trust-badge-text,
.single-product .mk-trust-badge > span {
  font-size: 12px !important;
  font-family: 'Inter', sans-serif !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* D8: Hide quantity input for gallery products - React doesn't show it */
.single-product .quantity,
.single-product form.cart .quantity {
  display: none !important;
}

/* D8: Single product add to cart button - gold variant */
.single-product .single_add_to_cart_button,
.single-product button[name="add-to-cart"],
.single-product form.cart button[type="submit"] {
  background: hsl(var(--gold)) !important;
  color: hsl(var(--forest-dark)) !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: var(--shadow-elegant) !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 14px !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background-color 200ms ease, box-shadow 200ms ease !important;
}

.single-product .single_add_to_cart_button:hover,
.single-product button[name="add-to-cart"]:hover,
.single-product form.cart button[type="submit"]:hover {
  background: hsl(var(--gold-light)) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* D10: Hide related products section - React doesn't have it */
.single-product .related.products,
.single-product section.related,
.single-product .up-sells,
.single-product .cross-sells {
  display: none !important;
}

/* D10: Hide "Panasus kuriniai" heading */
.single-product h2:has(+ .related.products),
.single-product h2:contains("Panašūs") {
  display: none !important;
}

/* Fix duplicate back link - keep only one */
.single-product .mk-back-link + .mk-back-link,
.single-product p:has(> a[href*="katalogas"]) + p:has(> a[href*="katalogas"]) {
  display: none !important;
}

/* ==========================================================================
   END SECTION S414: SINGLE PRODUCT PAGE 1:1 PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S415: GIFT VOUCHER PAGE 1:1 PARITY FIXES (2026-04-01)
   Reference: Visual comparison React vs WordPress screenshots
   React source: src/pages/GiftVoucher.tsx
   ========================================================================== */

/* S415-1: CTA Button MUST be GOLD (currently showing dark green)
   NOTE: The JS in functions.php creates button with class "mk-gv-order-btn"
   The pattern has "mk-voucher-order-btn" - target BOTH */
.mk-gv-order-btn,
button.mk-gv-order-btn,
.page-id-19 .mk-gv-order-btn,
.page-id-19 button.mk-gv-order-btn,
body.page-id-19 .mk-gv-order-btn,
body.page-id-19 button.mk-gv-order-btn,
.mk-voucher-order-btn,
button.mk-voucher-order-btn,
.page-id-19 .mk-voucher-order-btn,
.page-id-19 button.mk-voucher-order-btn,
body.page-dovanu-kuponas .mk-voucher-order-btn,
body.page-dovanu-kuponas button.mk-voucher-order-btn {
  background: hsl(42, 55%, 58%) !important; /* --gold */
  background-color: hsl(42, 55%, 58%) !important;
  color: hsl(160, 30%, 18%) !important; /* --forest-dark */
  border: none !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important;
  padding: 1rem 2rem !important;
  border-radius: 0.5rem !important; /* rounded-lg = 8px */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  min-height: 3.5rem !important; /* h-14 = 56px */
  cursor: pointer !important;
  transition: background-color 200ms ease, box-shadow 200ms ease !important;
}

.mk-gv-order-btn:hover,
.mk-gv-order-btn:hover:not(:disabled),
.page-id-19 .mk-gv-order-btn:hover,
body.page-id-19 .mk-gv-order-btn:hover,
.mk-voucher-order-btn:hover,
.mk-voucher-order-btn:hover:not(:disabled),
.page-id-19 .mk-voucher-order-btn:hover,
body.page-dovanu-kuponas .mk-voucher-order-btn:hover {
  background: hsl(42, 45%, 75%) !important; /* --gold-light */
  background-color: hsl(42, 45%, 75%) !important;
  box-shadow: var(--shadow-hover, 0 8px 30px -8px rgba(32, 61, 49, 0.12)) !important;
}

/* S415-2: Feature card titles - PREVENT word breaking
   React shows full text: "Universalus", "Galioja 12 mėn.", "Elegantiška dovana"
   WordPress is breaking mid-word due to narrow column width */
.page-id-19 .wp-block-column h4,
.page-id-19 .wp-block-column .wp-block-heading,
.page-id-19 .is-style-card h4,
body.page-dovanu-kuponas .wp-block-column h4,
body.page-dovanu-kuponas .is-style-card h4 {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: max-content !important;
}

/* S415-3: Feature cards container - ensure enough width for titles */
.page-id-19 .wp-block-columns:has(.is-style-card),
body.page-dovanu-kuponas .wp-block-columns:has(.is-style-card) {
  gap: 1.5rem !important; /* 24px gap between cards */
}

.page-id-19 .wp-block-column:has(.is-style-card),
body.page-dovanu-kuponas .wp-block-column:has(.is-style-card) {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* S415-4: Feature cards - proper styling */
.page-id-19 .is-style-card,
body.page-dovanu-kuponas .is-style-card {
  background: white !important;
  background-color: #ffffff !important;
  border: 1px solid hsl(36, 20%, 82%) !important; /* --border */
  border-radius: 0.75rem !important; /* rounded-xl = 12px */
  padding: 1.5rem !important; /* p-6 = 24px */
  text-align: center !important;
  box-shadow: var(--shadow-card, 0 2px 12px -2px rgba(32, 61, 49, 0.06)) !important;
}

/* S415-5: Amount buttons layout - all in one row */
.mk-voucher__amounts,
.page-id-19 .mk-voucher__amounts,
body.page-dovanu-kuponas .mk-voucher__amounts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important; /* gap-2 = 8px */
  margin-bottom: 1rem !important;
}

/* S415-6: Amount button styling */
.mk-voucher-btn,
.page-id-19 .mk-voucher-btn,
body.page-dovanu-kuponas .mk-voucher-btn {
  padding: 0.75rem 1.5rem !important; /* px-6 py-3 */
  border-radius: 0.5rem !important; /* rounded-lg = 8px */
  font-size: 1rem !important;
  font-weight: 500 !important;
  transition: all 200ms ease !important;
}

/* S415-7: Selected amount button - GOLD */
.mk-voucher-btn--selected,
.mk-voucher-btn.mk-voucher-btn--selected,
.page-id-19 .mk-voucher-btn--selected,
body.page-dovanu-kuponas .mk-voucher-btn--selected {
  background: hsl(42, 55%, 58%) !important; /* --gold */
  background-color: hsl(42, 55%, 58%) !important;
  color: hsl(160, 30%, 18%) !important; /* --forest-dark */
  border-color: hsl(42, 55%, 58%) !important;
}

/* S415-8: Unselected amount buttons */
.mk-voucher-btn:not(.mk-voucher-btn--selected),
.page-id-19 .mk-voucher-btn:not(.mk-voucher-btn--selected),
body.page-dovanu-kuponas .mk-voucher-btn:not(.mk-voucher-btn--selected) {
  background: hsl(36, 20%, 92%, 0.1) !important; /* cream with low opacity */
  color: hsl(36, 20%, 92%) !important; /* --cream */
  border: 1px solid hsl(36, 20%, 92%, 0.2) !important;
}

.mk-voucher-btn:not(.mk-voucher-btn--selected):hover,
.page-id-19 .mk-voucher-btn:not(.mk-voucher-btn--selected):hover,
body.page-dovanu-kuponas .mk-voucher-btn:not(.mk-voucher-btn--selected):hover {
  background: hsl(36, 20%, 92%, 0.2) !important;
}

/* ==========================================================================
   END SECTION S415: GIFT VOUCHER PAGE 1:1 PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S420: AGENT VERIFICATION FIXES (2026-04-01)
   20 Opus agents identified remaining parity issues
   ========================================================================== */

/* S420-1: Gift Voucher CTA Button - ULTRA HIGH SPECIFICITY GOLD OVERRIDE
   The button is STILL showing green. Use maximum specificity.
   UPDATED 2026-04-01: Added mk-voucher-buy-btn which was the missing selector */
html body.page-id-19 button.mk-gv-order-btn,
html body.page-id-19 button.mk-voucher-order-btn,
html body.page-id-19 button.mk-voucher-buy-btn,
html body.page-dovanu-kuponas button.mk-gv-order-btn,
html body.page-dovanu-kuponas button.mk-voucher-order-btn,
html body.page-dovanu-kuponas button.mk-voucher-buy-btn,
html body .mk-voucher button.mk-gv-order-btn,
html body .mk-voucher button.mk-voucher-order-btn,
html body .mk-voucher button.mk-voucher-buy-btn,
html body button[class*="voucher-order"],
html body button[class*="voucher-buy"],
html body button[class*="gv-order"],
html body button.mk-voucher-buy-btn,
html body.page-id-19 .wp-block-button__link,
html body.page-dovanu-kuponas .wp-block-button__link {
  background: hsl(42, 55%, 58%) !important;
  background-color: hsl(42, 55%, 58%) !important;
  color: hsl(160, 30%, 18%) !important;
}

/* S420-2: 404 Page - Link should be UNDERLINED TEXT, not a button
   React shows simple underlined "Return to Home" link
   WP shows a styled button - override to match React

   ISSUE: Live site uses wp-block-button structure with inline styles:
   <div class="wp-block-button">
     <a class="wp-block-button__link has-cream-light-color has-forest-green-background-color
               has-text-color has-background wp-element-button"
        style="border-radius:...;padding:..." href="/">Grįžti į pradžią</a>
   </div>

   Must override inline styles AND all WordPress button classes */

/* Reset the parent button wrapper to not affect layout */
body.error404 main .wp-block-button,
body.error404 main .wp-block-buttons {
  display: contents !important;
  background: transparent !important;
}

/* Override ALL button link styling - maximum specificity */
body.error404 main a,
body.error404 main > a,
body.error404 main a[href="/"],
body.error404 .wp-block-group a,
body.error404 main .wp-block-button a,
body.error404 main .wp-block-button__link,
body.error404 main a.wp-block-button__link,
body.error404 main a.wp-element-button,
body.error404 main a.has-background,
body.error404 main a.has-forest-green-background-color,
html body.error404 main a.wp-block-button__link.has-background.has-text-color.wp-element-button {
  all: unset !important;
  cursor: pointer !important;
  color: hsl(160, 30%, 28%) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  font-family: var(--font-body, Inter, system-ui, sans-serif) !important;
  display: inline !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
}

body.error404 main a:hover,
body.error404 main .wp-block-button__link:hover,
html body.error404 main a:hover {
  color: hsl(160, 30%, 28% / 0.8) !important;
  background: none !important;
  background-color: transparent !important;
}

/* S420-3: Feature Card Title Wrapping - Allow text to wrap naturally
   Agents report titles like "Galioja 12 mėn." getting truncated */
.page-id-19 .wp-block-column h4,
.page-id-19 .is-style-card h4,
body.page-dovanu-kuponas .wp-block-column h4 {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* S420-4: Ekspozicijos Icon Class Fix
   Pattern uses .mk-ekspozicijos__icon but CSS targeted .mk-ekspozicijos__pin svg */
.mk-ekspozicijos__icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: hsl(160, 30%, 28%) !important;
  stroke: hsl(160, 30%, 28%) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* S420-5: Pirkimas Feature Card Radius - should be 2px (rounded-sm) not 0 */
body.page-id-16 .mk-pirkimas-feature,
body.page-id-16 .mk-pirkimas-feature.mk-card,
.mk-pirkimas-page .mk-pirkimas-feature {
  border-radius: 0.125rem !important; /* rounded-sm = 2px */
}

/* S420-6: Gallery Page Header visibility */
.page-id-92 .mk-gallery-header,
.page-id-92 h1.wp-block-heading:first-of-type {
  display: block !important;
  visibility: visible !important;
}

/* S420-7: Netrukus (Coming Soon) Badge for Ateinantys
   React: <Badge className="bg-muted text-muted-foreground shadow-lg">Netrukus</Badge>
   NOT gold - uses muted cream background */
.mk-badge--upcoming,
.mk-badge--netrukus,
.auction-status-upcoming {
  background-color: hsl(var(--muted, 36 20% 90%)) !important;         /* bg-muted = cream #E8E4DC */
  color: hsl(var(--muted-foreground, 160 15% 40%)) !important;        /* text-muted-foreground #577066 */
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  padding: 0.125rem 0.625rem !important;  /* py-0.5 px-2.5 = 2px 10px */
  border-radius: 9999px !important;       /* rounded-full */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
              0 4px 6px -2px rgb(0 0 0 / 0.05) !important;  /* shadow-lg */
}

/* S420-8: Ateinantys page specific styles */
.mk-ateinantys-page .mk-product-card--upcoming {
  border-color: hsl(var(--border)) !important;
}

/* Timer badge for upcoming auctions shows time until start */
.mk-ateinantys-page .mk-card-timer,
.mk-ateinantys-page .mk-timer-compact {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* ==========================================================================
   END SECTION S420: AGENT VERIFICATION FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S421: SHORTCODE PRODUCT GRID CRITICAL FIX (2026-04-01)

   PROBLEM: [mk_auction_products] and [mk_gallery_products] shortcodes render
   product cards with TINY images (~28px) and truncated text.

   ROOT CAUSE:
   1. Parent container (.mk-product-grid or .mk-gallery-grid) has display:grid
      with fixed pixel columns (e.g., 170px 170px 170px)
   2. The shortcode UL (.mk-auction-products-grid, .mk-gallery-products-grid)
      becomes a grid item constrained to ~170px width
   3. The UL's own grid-template-columns calculates based on that tiny width,
      resulting in ~28px columns
   4. Browser default UL padding-left: 40px further reduces available space

   SOLUTION:
   1. Reset UL list styles (padding, list-style)
   2. Make the UL span the full width of the content area
   3. Apply proper responsive grid columns to the UL itself
   4. Ensure cards and images fill their grid cells properly
   ========================================================================== */

/* ---------------------------------------------------------------------
   S421-1: CRITICAL — Reset parent wrapper grid interference
   The parent .mk-product-grid and .mk-gallery-grid should NOT apply
   their own grid to shortcode content. Use display:block or contents.
   --------------------------------------------------------------------- */
.mk-product-grid:has(.mk-auction-products-grid),
.mk-product-grid:has(.mk-gallery-products-grid),
.mk-gallery-grid:has(.mk-gallery-products-grid) {
  display: block !important;
  grid-template-columns: unset !important;
}

/* Fallback for browsers without :has() — target the container directly */
.mk-product-grid.mk-view-grid,
.mk-gallery-grid {
  display: block !important;
}

/* ---------------------------------------------------------------------
   S421-1b: CRITICAL — Fix .mk-catalog-grid layout
   WordPress is-layout-flow class interferes with grid-template-columns.
   Force the correct 2-column layout: 280px sidebar + 1fr content.
   --------------------------------------------------------------------- */
.mk-catalog-grid,
.wp-block-group.mk-catalog-grid,
.wp-block-group.mk-catalog-grid.is-layout-flow,
div.wp-block-group.mk-catalog-grid.is-layout-flow.wp-block-group-is-layout-flow,
html body .mk-catalog-grid {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 2rem !important;
  align-items: start !important;
}

/* Mobile: stack sidebar and content vertically */
@media (max-width: 1023px) {
  .mk-catalog-grid,
  .wp-block-group.mk-catalog-grid,
  .wp-block-group.mk-catalog-grid.is-layout-flow,
  div.wp-block-group.mk-catalog-grid.is-layout-flow.wp-block-group-is-layout-flow,
  html body .mk-catalog-grid {
    display: block !important;
    grid-template-columns: unset !important;
  }
}

/* Ensure content area takes full remaining width */
.mk-catalog-content,
.wp-block-group.mk-catalog-content,
.mk-catalog-grid > .mk-catalog-content,
.mk-catalog-grid > .wp-block-group.mk-catalog-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ---------------------------------------------------------------------
   S421-2: CRITICAL — Reset UL default styles and apply proper grid
   The shortcode ULs need full-width and proper responsive columns
   --------------------------------------------------------------------- */
ul.mk-auction-products-grid,
ul.mk-gallery-products-grid,
ul.products.mk-auction-products-grid,
ul.products.mk-gallery-products-grid {
  /* Reset browser defaults */
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;

  /* Full width of parent */
  width: 100% !important;
  max-width: 100% !important;

  /* Apply grid layout */
  display: grid !important;
  gap: 1.5rem !important; /* 24px = gap-6 */

  /* Responsive columns: 1 column mobile, 2 at sm, 3 at lg */
  grid-template-columns: 1fr !important;
}

/* sm: 640px+ — 2 columns */
@media (min-width: 640px) {
  ul.mk-auction-products-grid,
  ul.mk-gallery-products-grid,
  ul.products.mk-auction-products-grid,
  ul.products.mk-gallery-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* lg: 1024px+ — 3 columns for auction (with sidebar), 3 for gallery */
@media (min-width: 1024px) {
  ul.mk-auction-products-grid,
  ul.products.mk-auction-products-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 cols with sidebar at lg */
  }

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

/* xl: 1280px+ — 3 columns for auction, 4 for gallery */
@media (min-width: 1280px) {
  ul.mk-auction-products-grid,
  ul.products.mk-auction-products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  ul.mk-gallery-products-grid,
  ul.products.mk-gallery-products-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ---------------------------------------------------------------------
   S421-3: Product card (LI) styles — full width of grid cell
   --------------------------------------------------------------------- */
ul.mk-auction-products-grid > li,
ul.mk-gallery-products-grid > li,
ul.mk-auction-products-grid > li.product,
ul.mk-gallery-products-grid > li.product,
li.mk-auction-product-card,
li.mk-gallery-product-card {
  /* Reset list item */
  list-style: none !important;
  display: block !important;

  /* Full width of grid cell */
  width: 100% !important;
  min-width: 0 !important; /* Prevent grid blowout */

  /* Card styling */
  background-color: hsl(40, 30%, 96%) !important; /* cream-light */
  border-radius: 0 !important; /* rounded-sm = 0 per Tailwind config */
  overflow: hidden !important;
  box-shadow: 0 2px 12px -2px hsl(160 30% 18% / 0.06) !important; /* shadow-card */
  transition: box-shadow 300ms ease !important;
}

ul.mk-auction-products-grid > li:hover,
ul.mk-gallery-products-grid > li:hover,
li.mk-auction-product-card:hover,
li.mk-gallery-product-card:hover {
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important; /* shadow-hover */
}

/* ---------------------------------------------------------------------
   S421-4: Inner card wrapper (.mk-product-card) — full width
   --------------------------------------------------------------------- */
ul.mk-auction-products-grid .mk-product-card,
ul.mk-gallery-products-grid .mk-product-card,
ul.mk-auction-products-grid .wp-block-group,
ul.mk-gallery-products-grid .wp-block-group {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------------------------------------------------------------------
   S421-5: Product image — full width with correct aspect ratio
   --------------------------------------------------------------------- */
ul.mk-auction-products-grid .wc-block-components-product-image,
ul.mk-auction-products-grid .wc-block-grid__product-image,
ul.mk-gallery-products-grid .wc-block-components-product-image,
ul.mk-gallery-products-grid .wc-block-grid__product-image,
ul.mk-auction-products-grid a[class*="product-image"],
ul.mk-gallery-products-grid a[class*="product-image"] {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

ul.mk-auction-products-grid img,
ul.mk-gallery-products-grid img,
ul.mk-auction-products-grid .attachment-woocommerce_thumbnail,
ul.mk-gallery-products-grid .attachment-woocommerce_thumbnail {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  display: block !important;
}

/* ---------------------------------------------------------------------
   S421-6: Product title — proper sizing and truncation
   --------------------------------------------------------------------- */
ul.mk-auction-products-grid .wp-block-post-title,
ul.mk-gallery-products-grid .wp-block-post-title,
ul.mk-auction-products-grid h3,
ul.mk-gallery-products-grid h3 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.125rem !important; /* text-lg = 18px */
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: hsl(160, 30%, 18%) !important; /* forest-dark */
  margin: 0 0 0.25rem 0 !important;

  /* Line clamp for long titles */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

ul.mk-auction-products-grid h3 a,
ul.mk-gallery-products-grid h3 a {
  color: inherit !important;
  text-decoration: none !important;
}

/* ---------------------------------------------------------------------
   S421-7: Product meta (artist, category) — proper text display
   --------------------------------------------------------------------- */
ul.mk-auction-products-grid .mk-card-meta,
ul.mk-gallery-products-grid .mk-card-meta,
ul.mk-auction-products-grid .mk-card-meta__artist,
ul.mk-gallery-products-grid .mk-card-meta__artist {
  font-size: 0.875rem !important; /* text-sm = 14px */
  color: hsl(160, 15%, 40%) !important; /* muted-foreground */
  margin-bottom: 0.25rem !important;

  /* Prevent wrapping */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

ul.mk-auction-products-grid .wp-block-post-terms,
ul.mk-gallery-products-grid .wp-block-post-terms {
  font-size: 0.75rem !important; /* text-xs = 12px */
  color: hsl(160, 15%, 40%) !important;
  margin-bottom: 0.5rem !important;
}

/* ---------------------------------------------------------------------
   S421-8: Price display — proper styling
   --------------------------------------------------------------------- */
ul.mk-auction-products-grid .wc-block-components-product-price,
ul.mk-gallery-products-grid .wc-block-components-product-price,
ul.mk-auction-products-grid .price,
ul.mk-gallery-products-grid .price {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.25rem !important; /* text-xl = 20px */
  font-weight: 700 !important;
  color: hsl(160, 30%, 18%) !important; /* forest-dark */
  margin-top: 0.5rem !important;
}

/* ---------------------------------------------------------------------
   S421-9: Action button — full width, proper styling
   --------------------------------------------------------------------- */
ul.mk-auction-products-grid .wp-block-button__link,
ul.mk-gallery-products-grid .wp-block-button__link,
ul.mk-auction-products-grid .wp-element-button,
ul.mk-gallery-products-grid .wp-element-button,
ul.mk-auction-products-grid .wc-block-components-product-button__button,
ul.mk-gallery-products-grid .wc-block-components-product-button__button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0.75rem 1rem !important;
  background-color: hsl(160, 30%, 28%) !important; /* primary/forest */
  color: hsl(40, 30%, 96%) !important; /* cream-light */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: 0.25rem !important;
  text-decoration: none !important;
  transition: background-color 300ms ease !important;
}

ul.mk-auction-products-grid .wp-block-button__link:hover,
ul.mk-gallery-products-grid .wp-block-button__link:hover,
ul.mk-auction-products-grid .wp-element-button:hover,
ul.mk-gallery-products-grid .wp-element-button:hover {
  background-color: hsl(160, 30%, 35%) !important; /* forest-light */
}

/* ---------------------------------------------------------------------
   S421-10: Remove "Kraunama..." loading indicator stuck display
   --------------------------------------------------------------------- */
.mk-product-grid [class*="loading"],
.mk-gallery-grid [class*="loading"],
.mk-product-grid .mk-loading,
.mk-catalog-content .mk-loading {
  display: none !important;
}

/* Only show loading when parent has .mk-loading class */
.mk-product-grid.mk-loading .mk-loading-spinner {
  display: flex !important;
}

/* ==========================================================================
   END SECTION S421: SHORTCODE PRODUCT GRID CRITICAL FIX
   ========================================================================== */

/* ==========================================================================
   SECTION S422: FOOTER 1:1 PARITY FIXES (2026-04-01)
   Agent verification: spacing, social icons, separator refinements
   ========================================================================== */

/* S422-1: Footer column gap fix - gap-10 = 2.5rem (40px) */
.mk-footer .wp-block-columns,
.mk-footer__columns.wp-block-columns {
  gap: 2.5rem !important;
}

/* S422-2: Footer social icons gap fix - gap-4 = 1rem (16px) */
.mk-footer__social.wp-block-social-links {
  gap: 1rem !important;
}

/* S422-3: Hide social link text labels - match React icons-only */
.mk-footer__social .wp-social-link-label,
.mk-footer__social.wp-block-social-links .wp-social-link span.wp-block-social-link-label {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}

/* S422-4: Footer link list spacing - space-y-3 = 0.75rem */
.mk-footer__links > .wp-block-group,
.mk-footer__info > .wp-block-group,
.mk-footer__voucher > .wp-block-group {
  gap: 0.75rem !important;
}

/* S422-5: Footer contact list spacing - space-y-4 = 1rem */
.mk-footer__contacts > .wp-block-group {
  gap: 1rem !important;
}

/* S422-6: Voucher link underline offset */
.mk-footer__voucher a[href*="dovanu-kuponas"] {
  text-underline-offset: 4px;
}

/* S422-7: Footer bottom separator - match React border-t */
.mk-footer__bottom .wp-block-separator {
  border-top: 1px solid hsl(var(--primary-foreground) / 0.2) !important;
  background: transparent !important;
  height: 1px !important;
  opacity: 1 !important;
}

/* S422-8: Footer bottom padding - pt-8 = 2rem */
.mk-footer__bottom {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* S422-9: Footer copyright text color - /60 opacity */
.mk-footer__bottom > p,
.mk-footer__bottom .has-text-align-center {
  color: hsl(var(--primary-foreground) / 0.6) !important;
}

/* ==========================================================================
   END SECTION S422: FOOTER 1:1 PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S423: HOMEPAGE HERO 1:1 PARITY FIXES (2026-04-01)

   Issues identified via Playwright inspection:
   1. MAIN has margin-top: 16px causing gap between header and hero
   2. Search input width: 150px (should be 192px default, 256px at lg+)
   3. Hero buttons height: 76px (too tall due to line-height)
   4. Gradients need strengthening for better contrast

   React specs (from HeroSection.tsx):
   - Hero height: 80vh mobile, 90vh desktop (lg+)
   - Buttons: size="lg" with className="text-lg px-8 py-6"
     - font-size: 1.125rem (18px)
     - padding: 1.5rem 2rem (24px 32px)
     - border-radius: 0.25rem (4px) - this is --radius
   - Gradients:
     - Left-to-right: from-foreground/80 via-foreground/50 to-transparent
     - Bottom-to-top: from-foreground/60 via-transparent to-foreground/20
   - Search (from Header.tsx):
     - width: 12rem (192px) default, 16rem (256px) at lg+
     - height: 2.25rem (36px)
     - placeholder: "Ieškoti kūrinių, autorių..."
   ========================================================================== */

/* S423-1: Remove gap between header and hero - main margin-top was 16px */
body > .wp-site-blocks > main,
body > .wp-site-blocks > .wp-block-group,
.wp-site-blocks > main.wp-block-group,
main.wp-block-group.is-layout-flow {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* S423-1b: Remove entry-content padding on homepage - this was causing 48px gap */
body.home .entry-content.wp-block-post-content,
body.home .wp-block-post-content,
.home main .entry-content,
.home main .wp-block-post-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* S423-2: Ensure hero touches header directly */
.mk-hero,
.wp-block-cover.mk-hero {
  margin-top: 0 !important;
}

/* S423-3: Search form container width - 12rem (192px) default */
.wp-block-search.mk-header__search,
header .wp-block-search,
.mk-header .wp-block-search {
  width: 12rem !important;
  min-width: 12rem !important;
  max-width: 12rem !important;
}

.wp-block-search__input,
header .wp-block-search__input,
.mk-header .wp-block-search__input,
.wp-block-search.mk-header__search .wp-block-search__input,
.wp-block-search__inside-wrapper .wp-block-search__input {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  height: 2.25rem !important;
  font-size: 0.875rem !important;
}

/* S423-3b: Search inside wrapper should expand - WP core sets max-width:150px */
.wp-block-search__inside-wrapper,
.mk-header__search .wp-block-search__inside-wrapper,
header .wp-block-search .wp-block-search__inside-wrapper,
.wp-block-search.mk-header__search .wp-block-search__inside-wrapper {
  width: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
  flex: 1 1 auto !important;
}

/* S423-4: Search form container width at lg+ - 16rem (256px) */
@media (min-width: 1024px) {
  .wp-block-search.mk-header__search,
  header .wp-block-search,
  .mk-header .wp-block-search {
    width: 16rem !important;
    min-width: 16rem !important;
    max-width: 16rem !important;
  }
}

/* S423-5: Hero buttons - fix line-height to prevent bloat
   Note: Buttons have inline WP spacing presets, must override with max specificity */
.mk-hero .wp-block-button__link,
.wp-block-cover.mk-hero .wp-block-button__link,
.mk-hero .wp-block-button__link[style],
.wp-block-cover.mk-hero .wp-block-button__link[style],
.wp-block-cover.mk-hero .wp-block-buttons .wp-block-button .wp-block-button__link {
  line-height: 1.25 !important;
  min-height: auto !important;
  height: auto !important;
  /* py-6 px-8 = 1.5rem 2rem (24px 32px) */
  padding: 1.5rem 2rem !important;
  padding-top: 1.5rem !important;
  padding-right: 2rem !important;
  padding-bottom: 1.5rem !important;
  padding-left: 2rem !important;
  font-size: 1.125rem !important;
  border-radius: 0.25rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* S423-6: Strengthen left-to-right gradient overlay */
.mk-hero .wp-block-cover__background,
.wp-block-cover.mk-hero .wp-block-cover__background {
  background: linear-gradient(
    to right,
    hsl(var(--foreground) / 0.8),
    hsl(var(--foreground) / 0.5),
    transparent
  ) !important;
  opacity: 1 !important;
}

/* S423-7: Strengthen bottom-to-top gradient via ::after */
.mk-hero::after,
.wp-block-cover.mk-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    hsl(var(--foreground) / 0.6),
    transparent 50%,
    hsl(var(--foreground) / 0.2)
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* S423-8: Ensure hero content is above gradients */
.mk-hero .wp-block-cover__inner-container,
.wp-block-cover.mk-hero .wp-block-cover__inner-container {
  position: relative !important;
  z-index: 2 !important;
}

/* S423-9: Hero height - 80vh mobile, 90vh desktop */
.mk-hero,
.wp-block-cover.mk-hero {
  min-height: 80vh !important;
}

@media (min-width: 1024px) {
  .mk-hero,
  .wp-block-cover.mk-hero {
    min-height: 90vh !important;
  }
}

/* ==========================================================================
   END SECTION S423: HOMEPAGE HERO 1:1 PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S424: HOMEPAGE REMAINING PARITY FIXES (2026-04-01)
   Fixes: Logo size, nav weight, nav spacing, H1 size
   ========================================================================== */

/* S424-1: Logo size - React uses h-14 (56px height), aspect ratio 500:97 = ~289px width */
/* ULTRA-HIGH SPECIFICITY to override any theme/plugin rules */
html body .mk-header__logo img,
html body .mk-header .wp-block-site-logo img,
html body .wp-block-site-logo img,
html body header .wp-block-site-logo img,
html body .site-header .wp-block-site-logo img,
html body .wp-block-site-logo.wp-block-site-logo img {
  height: 3.5rem !important; /* h-14 = 56px */
  width: auto !important;
  max-width: none !important;
  max-height: 3.5rem !important;
  object-fit: contain !important;
}

/* S424-2: Nav font weight & size - React uses text-sm font-medium (14px, 500) */
html body .mk-header__nav .wp-block-navigation-item__content,
html body .wp-block-navigation .wp-block-navigation-item__content,
html body .wp-block-navigation .wp-block-navigation-item a,
html body header .wp-block-navigation-item__content,
html body .site-header .wp-block-navigation-item__content {
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important;
  line-height: 1.25rem !important; /* 20px */
}

/* S424-3: Nav spacing - React uses gap-8 (32px) */
html body .mk-header__nav .wp-block-navigation__container,
html body .wp-block-navigation .wp-block-navigation__container,
html body header .wp-block-navigation__container,
html body .site-header .wp-block-navigation__container {
  gap: 2rem !important; /* 32px = gap-8 */
}

/* S424-4: Hero H1 size - text-6xl = 3.75rem (60px) at lg */
.mk-hero h1,
.mk-hero .wp-block-heading,
.mk-hero__title,
.wp-block-cover.mk-hero h1 {
  font-size: 2.25rem !important; /* text-4xl mobile */
}

@media (min-width: 768px) {
  .mk-hero h1,
  .mk-hero .wp-block-heading,
  .mk-hero__title,
  .wp-block-cover.mk-hero h1 {
    font-size: 3rem !important; /* text-5xl md */
  }
}

@media (min-width: 1024px) {
  .mk-hero h1,
  .mk-hero .wp-block-heading,
  .mk-hero__title,
  .wp-block-cover.mk-hero h1 {
    font-size: 3.75rem !important; /* text-6xl lg = 60px */
    line-height: 1 !important;
  }
}

/* S424-5: Header height - React uses h-20 (80px) */
html body .mk-header,
html body header.mk-header,
html body .site-header,
html body header.site-header {
  min-height: 5rem !important; /* h-20 = 80px */
}

html body .mk-header > .wp-block-group,
html body header .wp-block-group__inner-container,
html body .mk-header .wp-block-group__inner-container {
  min-height: 5rem !important;
  display: flex !important;
  align-items: center !important;
}

/* ==========================================================================
   END SECTION S424: HOMEPAGE REMAINING PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S425-S432: HOMEPAGE 1:1 FINAL PARITY FIXES
   Added: 2026-04-01
   Purpose: Complete 1:1 parity for homepage header, logo, nav, hero
   ========================================================================== */

/* S425: Header Logo Size - Match React h-14 (56px height) */
html body .mk-header .custom-logo-link img,
html body .mk-header .wp-block-site-logo img,
html body .mk-header__logo img,
html body header .custom-logo,
html body header .wp-block-site-logo img {
  height: 3.5rem !important; /* h-14 = 56px */
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
}

/* S426: Logo Container - Remove width constraints causing clip */
html body .mk-header .wp-block-site-logo,
html body .mk-header__logo,
html body header .wp-block-site-logo {
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

/* S427-S430: Homepage Header-Hero Gap Fix */
body.home main,
body.home main.wp-block-group,
body.home main.wp-block-group.is-layout-flow,
body.home main[class*="wp-block-group"],
.home main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.home .entry-content,
body.home .wp-block-post-content,
body.home .entry-content.wp-block-post-content,
body.home main .entry-content,
body.home main > .wp-block-post-content,
.home .entry-content,
.home .wp-block-post-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

body.home .mk-hero,
body.home .wp-block-cover.mk-hero,
.home .mk-hero {
  margin-bottom: 0 !important;
}

/* S431-S432: Navigation Link Color - forest-dark rgb(32, 60, 50) not muted */
html body header .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content,
html body header .wp-block-navigation a.wp-block-navigation-item__content,
html body .mk-header .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item a.wp-block-navigation-item__content,
a.wp-block-navigation-item__content,
.wp-block-navigation-item__content {
  color: rgb(32, 60, 50) !important; /* --foreground forest-dark */
  letter-spacing: normal !important;
}

/* ==========================================================================
   END SECTION S425-S432: HOMEPAGE 1:1 FINAL PARITY FIXES
   ========================================================================== */

/* ==========================================================================
   SECTION S437: FOOTER LAYOUT FIX - Force horizontal columns
   Added: 2026-04-01
   Purpose: Override .mk-footer .wp-block-columns {display:grid} rule
   ========================================================================== */

/* S437: Footer columns MUST be horizontal flex row, not grid */
html body footer .mk-footer .wp-block-columns,
html body .mk-footer .wp-block-columns,
html body .mk-footer .wp-block-columns.mk-footer__columns,
.mk-footer .wp-block-columns,
.mk-footer__grid,
.mk-footer__columns {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  grid-template-columns: unset !important;
}

html body .mk-footer .wp-block-column,
.mk-footer .wp-block-columns > .wp-block-column,
.mk-footer .wp-block-column {
  flex: 1 1 180px !important;
  max-width: 250px !important;
  width: auto !important;
  display: block !important;
}

/* S438: Gallery "Į krepšelį" button should be GOLD not green */
.mk-gallery-grid .add_to_cart_button,
.mk-gallery-page .add_to_cart_button,
a.add_to_cart_button.ajax_add_to_cart {
  background-color: hsl(42, 55%, 58%) !important;
  color: hsl(160, 30%, 18%) !important;
  border-color: hsl(42, 55%, 58%) !important;
}
a.add_to_cart_button.ajax_add_to_cart:hover {
  background-color: hsl(42, 45%, 65%) !important;
}

/* ==========================================================================
   END SECTION S437-S438
   ========================================================================== */

/* S439: Footer Background Override - ensure always forest-green */
html body .mk-footer,
html body footer .mk-footer,
html body .page-id-15 .mk-footer,
html body .page-id-15 footer.wp-block-template-part .mk-footer,
.mk-footer.wp-block-group.has-background,
.page-id-15 .wp-block-group.mk-footer {
  background-color: rgb(50, 93, 79) !important;
  color: rgb(248, 246, 242) !important;
}

/* ==========================================================================
   END SECTION S439
   ========================================================================== */

/* S440: Footer Background ULTRA Override for page-id-15 contact page */
html body.page-id-15 footer .wp-block-group.mk-footer,
html body.page-id-15 .mk-footer.wp-block-group.has-background,
html body .wp-block-group.mk-footer.has-forest-green-background-color,
html body.page-id-15 footer.wp-block-template-part .mk-footer,
html body.page-id-15 footer.wp-block-template-part > .wp-block-group,
html body.page-id-15 footer .wp-block-group[class*="mk-footer"],
html body footer.wp-block-template-part .wp-block-group.mk-footer,
.page-id-15 footer .wp-block-group.has-background {
  background-color: rgb(50, 93, 79) !important;
  background: rgb(50, 93, 79) !important;
  color: rgb(248, 246, 242) !important;
}

/* ==========================================================================
   END SECTION S440
   ========================================================================== */

/* ==========================================================================
   SECTION S360-S364: HOMEPAGE 1:1 PARITY FIXES (from HOMEPAGE-PARITY-REPORT.md)
   Added: 2026-04-01
   Purpose: Fix mismatches identified in element-by-element verification
   ========================================================================== */

/* S360: Logo width fix - React shows 170px, WordPress was 290px */
html body header .custom-logo,
html body header .wp-block-site-logo img,
html body .mk-header .wp-block-site-logo img,
html body [role="banner"] .wp-block-site-logo img,
.wp-block-site-logo img,
.custom-logo {
  max-width: 170px !important;
  width: auto !important;
  height: 56px !important;
  object-fit: contain !important;
}

/* S361: Search box styling - match React: no border, 36px height, semi-transparent bg */
html body header .wp-block-search__input,
html body header input[type="search"],
html body .mk-header .wp-block-search__input,
html body [role="banner"] input[type="search"],
.wp-block-search__input,
.mk-header__search input {
  height: 36px !important;
  min-height: 36px !important;
  border: none !important;
  border-width: 0 !important;
  background-color: rgba(235, 231, 224, 0.5) !important;
  padding: 8px 16px 8px 36px !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* S362: Hero button height fix - React buttons have height:auto + line-height:1 */
html body .wp-block-cover .wp-block-button__link,
html body .mk-hero .wp-block-button__link,
.mk-hero .wp-block-button__link,
.wp-block-cover.mk-hero .wp-block-button__link {
  height: auto !important;
  min-height: unset !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* S363: Footer link styling - React uses 16px full opacity, not 14px 80% opacity */
html body footer a,
html body [role="contentinfo"] a,
html body .mk-footer a,
.mk-footer a,
footer .wp-block-navigation-item__content,
footer .wp-block-navigation-link__content {
  font-size: 16px !important;
  color: rgb(248, 246, 242) !important;
  opacity: 1 !important;
}

html body footer a:hover,
html body [role="contentinfo"] a:hover,
html body .mk-footer a:hover,
.mk-footer a:hover {
  color: rgb(207, 171, 89) !important; /* gold on hover */
}

/* S364: Header nav visibility - ensure nav shows on desktop (was hidden at some breakpoints) */
@media (min-width: 1024px) {
  html body header nav,
  html body [role="banner"] .wp-block-navigation,
  html body .mk-header .wp-block-navigation,
  .mk-header .wp-block-navigation {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body header .wp-block-navigation__container,
  html body .mk-header .wp-block-navigation__container,
  .wp-block-navigation__container {
    display: flex !important;
    gap: 2rem !important;
    visibility: visible !important;
  }

  html body header .wp-block-navigation-item,
  .mk-header .wp-block-navigation-item {
    display: block !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   END SECTION S360-S364
   ========================================================================== */

/* ==========================================================================
   SECTION S365: FOOTER 5-COLUMN LAYOUT FIX
   Added: 2026-04-01
   Issue: Each column had flex-basis:50% causing 5th column to wrap
   Fix: Override to allow 5 columns in one row on desktop
   ========================================================================== */

/* S365: Footer columns - force 5-column layout on desktop */
@media (min-width: 1024px) {
  html body .mk-footer__columns,
  html body footer .wp-block-columns,
  html body [role="contentinfo"] .wp-block-columns,
  .mk-footer .wp-block-columns.mk-footer__columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 2rem !important;
  }

  html body .mk-footer__columns > .wp-block-column,
  html body footer .wp-block-columns > .wp-block-column,
  html body .mk-footer .wp-block-column,
  .mk-footer__columns > .wp-block-column {
    flex-basis: auto !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }

  /* Brand column slightly wider */
  html body .mk-footer__brand,
  .mk-footer__brand.wp-block-column {
    flex-basis: 200px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* ==========================================================================
   END SECTION S365
   ========================================================================== */

/* ==========================================================================
   SECTION S366: CONTACT PAGE FORM FIXES
   Added: 2026-04-01
   Issues: Form layout broken, button not full-width, input styling differs
   ========================================================================== */

/* S366: Contact form - 2-column layout for Vardas + El. paštas */
html body .wpcf7-form .wp-block-group,
.wpcf7-form .mk-contact-form-grid {
  display: block !important;
}

/* Fix the inline grid row for name + email */
html body .wpcf7-form div[style*="grid-template-columns"],
.wpcf7-form div[style*="grid-template-columns: 1fr 1fr"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}

/* Each field wrapper should be a block */
html body .wpcf7-form div[style*="grid-template-columns"] > p {
  display: contents !important;
}

/* Labels styling */
html body .wpcf7-form label.mk-form-label,
.wpcf7-form .mk-form-label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgb(32, 60, 50) !important;
  margin-bottom: 0.5rem !important;
}

/* Input fields styling - match React */
html body .wpcf7-form input[type="text"],
html body .wpcf7-form input[type="email"],
html body .wpcf7-form textarea,
.wpcf7-form .wpcf7-form-control {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  font-size: 16px !important;
  border: 1px solid rgb(218, 211, 200) !important;
  border-radius: 6px !important;
  background-color: rgb(255, 255, 255) !important;
  color: rgb(32, 60, 50) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html body .wpcf7-form input[type="text"]:focus,
html body .wpcf7-form input[type="email"]:focus,
html body .wpcf7-form textarea:focus,
.wpcf7-form .wpcf7-form-control:focus {
  outline: none !important;
  border-color: rgb(50, 93, 79) !important;
  box-shadow: 0 0 0 3px rgba(50, 93, 79, 0.1) !important;
}

/* Textarea specific */
html body .wpcf7-form textarea,
.wpcf7-form .wpcf7-textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Submit button - full width, forest green */
html body .wpcf7-form input[type="submit"],
html body .wpcf7-form .wpcf7-submit,
.wpcf7-form .wpcf7-submit {
  width: 100% !important;
  padding: 0.875rem 1.5rem !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: rgb(248, 246, 242) !important;
  background-color: rgb(50, 93, 79) !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  margin-top: 1rem !important;
}

html body .wpcf7-form input[type="submit"]:hover,
html body .wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:hover {
  background-color: rgb(40, 75, 63) !important;
}

html body .wpcf7-form input[type="submit"]:active,
.wpcf7-form .wpcf7-submit:active {
  transform: scale(0.98) !important;
}

/* Contact form card container */
html body .mk-contact-form-card,
.mk-contact-form-card {
  background-color: rgb(255, 255, 255) !important;
  padding: 2rem !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px -4px rgba(32, 60, 50, 0.08) !important;
}

/* Contact info section icons - circular background */
html body .mk-contact-icon,
.mk-contact-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(50, 93, 79, 0.1) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

html body .mk-contact-icon svg,
.mk-contact-icon svg {
  width: 24px !important;
  height: 24px !important;
  color: rgb(50, 93, 79) !important;
}

/* ==========================================================================
   END SECTION S366
   ========================================================================== */

/* ============================================
 * S501: 404 PAGE FULLSCREEN LAYOUT FIX (2026-04-02)
 * ISSUE: 404 shows header/footer but React has fullscreen minimal
 * React source: src/pages/NotFound.tsx
 * React: flex min-h-screen items-center justify-center bg-muted
 * NO header, NO footer - just centered content
 * ============================================ */

/* Hide header on 404 page */
body.error404 header,
body.error404 .wp-block-template-part[data-slug="header"],
body.error404 .site-header,
body.error404 #masthead,
body.error404 .mk-header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide footer on 404 page */
body.error404 footer,
body.error404 .wp-block-template-part[data-slug="footer"],
body.error404 .site-footer,
body.error404 #colophon,
body.error404 .mk-footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 404 page body - full viewport with muted background */
body.error404 {
  min-height: 100vh !important;
  background: hsl(var(--muted)) !important; /* React: bg-muted */
  margin: 0 !important;
  padding: 0 !important;
}

/* 404 main content - full viewport height, centered */
body.error404 main,
body.error404 .wp-site-blocks,
body.error404 .entry-content {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: hsl(var(--muted)) !important; /* React: bg-muted */
  padding: 0 !important;
  margin: 0 !important;
}

/* 404 container - centered flex column */
body.error404 .mk-404 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: auto !important; /* Override Section 105 */
  padding: 2rem !important;
}

/* ==========================================================================
   END SECTION S501
   ========================================================================== */

/* ============================================
 * S502: PIRKIMAS PAGE VERIFICATION (2026-04-02)
 * Agent 3 of 20 - CSS Parity Check
 *
 * VERIFICATION RESULT: NO FIX NEEDED
 *
 * Task claimed: Step badges solid fill instead of outlined
 *
 * ACTUAL React source (HowToBuy.tsx lines 53-57):
 *   <div className="w-16 h-16 rounded-full bg-primary flex items-center justify-center">
 *     <span className="font-display text-xl font-bold text-primary-foreground">
 *
 * React design IS solid green background (bg-primary) with white text.
 * WordPress matching this = CORRECT PARITY.
 *
 * The task specification was incorrect - outlined badges would BREAK parity.
 *
 * Hero section: React has NO hero - just container with py-12, H1, and paragraph.
 * This matches WordPress behavior - NO hero needed.
 * ============================================ */

/* Pirkimas page - ensure step badges match React exactly */
/* React: w-16 h-16 = 4rem = 64px, rounded-full, bg-primary */
body.page-id-16 .mk-pirkimas-step__badge,
body.page-id-16 .mk-step__number,
.page-pirkimas .mk-pirkimas-step__badge,
.page-pirkimas .mk-step__number {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  border-radius: 9999px !important;
  background-color: hsl(var(--primary)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Badge text - React: font-display text-xl font-bold text-primary-foreground */
body.page-id-16 .mk-pirkimas-step__badge p,
body.page-id-16 .mk-step__number p,
body.page-id-16 .mk-pirkimas-step__badge span,
body.page-id-16 .mk-step__number span,
.page-pirkimas .mk-pirkimas-step__badge p,
.page-pirkimas .mk-step__number p {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important; /* text-xl */
  font-weight: 700 !important; /* font-bold */
  color: hsl(var(--primary-foreground)) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* ==========================================================================
   END SECTION S502: PIRKIMAS PAGE VERIFICATION
   ========================================================================== */


/* ============================================
 * S506: IVYKE PAST AUCTIONS STYLING FIX (2026-04-02)
 * ISSUE: Sold badges and layout differences
 * React reference: src/pages/Catalog.tsx, src/components/auction/ArtworkCard.tsx
 * 
 * React sold badge styling:
 * - Container: absolute inset-0 bg-foreground/60 flex items-center justify-center
 * - Badge: bg-gold text-foreground font-semibold text-lg px-4 py-2
 * - Icon: CheckCircle2 w-4 h-4 mr-2
 * 
 * React past auction result card (status==="ivyke"):
 * - bg-muted/50 rounded-sm p-4 border border-border
 * - Total result in text-2xl font-display font-bold text-gold
 * ============================================ */

/* --- S506-1: Auction status navigation tabs improvements --- */
/* React: tabs are pill-shaped buttons with hover/active states */
.mk-auction-status-nav {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
}

.mk-auction-status-nav a,
.mk-auction-status-nav__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 9999px !important; /* pill shape */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all 150ms ease !important;
}

.mk-auction-status-nav a:hover,
.mk-auction-status-nav__link:hover {
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 0.06) !important;
}

.mk-auction-status-nav a.is-active,
.mk-auction-status-nav a[aria-current="page"],
.mk-auction-status-nav__link--active {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* --- S506-2: PARDUOTA (Sold) badge on past auction cards --- */
/* React: absolute inset-0 bg-foreground/60, badge bg-gold text-foreground font-semibold text-lg */
.mk-sold-overlay,
.mk-artwork-card__sold-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: hsl(var(--foreground) / 0.6) !important; /* bg-foreground/60 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  border-radius: inherit !important;
}

/* Sold badge styling - matches React exactly */
.mk-sold-badge,
.mk-badge--sold,
.mk-artwork-card__sold-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: hsl(var(--gold)) !important; /* bg-gold */
  color: hsl(var(--foreground)) !important; /* text-foreground */
  font-size: 1.125rem !important; /* text-lg */
  font-weight: 600 !important; /* font-semibold */
  padding: 0.5rem 1rem !important; /* px-4 py-2 */
  border-radius: 0.25rem !important; /* rounded-sm */
  letter-spacing: 0.02em !important;
}

/* CheckCircle2 icon in sold badge */
.mk-sold-badge svg,
.mk-badge--sold svg,
.mk-artwork-card__sold-badge svg {
  width: 1rem !important; /* w-4 */
  height: 1rem !important; /* h-4 */
  flex-shrink: 0 !important;
}

/* --- S506-3: Past auction result summary card --- */
/* React: bg-muted/50 rounded-sm p-4 border border-border */
.mk-past-auction-result,
.mk-auction-result-summary {
  background: hsl(var(--muted) / 0.5) !important; /* bg-muted/50 */
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.125rem !important; /* rounded-sm = 2px */
  padding: 1rem !important;
  margin-bottom: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

/* Past auction title */
.mk-past-auction-result__title,
.mk-auction-result-summary h3 {
  font-family: var(--wp--preset--font-family--playfair-display, "Playfair Display", serif) !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 0 0.25rem !important;
  font-size: 1rem !important;
}

/* Past auction date */
.mk-past-auction-result__date,
.mk-auction-result-summary .date {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 !important;
}

/* Total result value - matches React: text-2xl font-display font-bold text-gold */
.mk-past-auction-result__total,
.mk-auction-result-summary .total-value {
  font-family: var(--wp--preset--font-family--playfair-display, "Playfair Display", serif) !important;
  font-size: 1.5rem !important; /* text-2xl */
  font-weight: 700 !important; /* font-bold */
  color: hsl(var(--gold)) !important; /* text-gold */
  margin: 0 !important;
}

/* Total result label */
.mk-past-auction-result__label,
.mk-auction-result-summary .total-label {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 !important;
}

/* --- S506-4: Sold product meta in card --- */
/* React: Statusas: Parduota (font-bold text-gold) */
.mk-artwork-card__meta-value--sold,
.mk-card-meta-sold {
  font-weight: 700 !important;
  color: hsl(var(--gold)) !important;
}

/* Sold price in card - matches React: font-bold text-primary */
.mk-artwork-card__sold-price,
.mk-card-sold-price {
  font-weight: 700 !important;
  color: hsl(var(--primary)) !important;
}

/* --- S506-5: Past auctions grid layout consistency --- */
/* Ensure grid matches React on /aukcionai/ivyke page */
body.page-ivyke .products,
body.tax-product_tag .products[data-tag="ivyke"],
.ivyke-products-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}

@media (max-width: 1024px) {
  body.page-ivyke .products,
  body.tax-product_tag .products[data-tag="ivyke"],
  .ivyke-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  body.page-ivyke .products,
  body.tax-product_tag .products[data-tag="ivyke"],
  .ivyke-products-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   END SECTION S506
   ========================================================================== */

/* ============================================
 * S500: GALERIJA ACTIVE BUTTON COLOR FIX (2026-04-02)
 * ISSUE: Active category button shows gold instead of forest green
 *
 * React behavior (Gallery.tsx):
 * - Inactive: variant="outline" -> border-primary, text-primary, bg-transparent
 * - Active: variant="default" -> bg-primary, text-primary-foreground (cream)
 *
 * Previous CSS at S358.3 (line 59605) incorrectly set active to gold.
 * This section overrides with correct forest green with maximum specificity.
 * ============================================ */

/* Active state: FOREST GREEN background, NOT gold */
html body.page-id-92 .mk-gallery-filter-btn.active,
html body.page-id-92 .mk-gallery-filter-btn.is-active,
html body.page-id-92 .mk-gallery-cat-btn.active,
html body.page-id-92 .mk-gallery-cat-btn.is-active,
html body.page-id-92 .wp-block-button__link.gallery-filter.active,
html body.page-id-92 .wp-block-button__link[data-category].active,
html body.page-id-92 .wp-block-button__link[data-category].is-active,
html body .mk-gallery-filter-btn.active,
html body .mk-gallery-filter-btn.is-active,
.mk-gallery-filter-btn.active,
.mk-gallery-filter-btn.is-active {
  background-color: hsl(160 30% 28%) !important; /* --primary = forest green #325A4D */
  border-color: hsl(160 30% 28%) !important;
  color: hsl(40 30% 96%) !important; /* --primary-foreground = cream */
}

/* Active state hover: slightly lighter forest green */
html body.page-id-92 .mk-gallery-filter-btn.active:hover,
html body.page-id-92 .mk-gallery-filter-btn.is-active:hover,
html body.page-id-92 .mk-gallery-cat-btn.active:hover,
html body.page-id-92 .mk-gallery-cat-btn.is-active:hover,
html body.page-id-92 .wp-block-button__link.gallery-filter.active:hover,
html body .mk-gallery-filter-btn.active:hover,
html body .mk-gallery-filter-btn.is-active:hover,
.mk-gallery-filter-btn.active:hover,
.mk-gallery-filter-btn.is-active:hover {
  background-color: hsl(160 30% 32%) !important; /* Slightly lighter forest on hover */
  border-color: hsl(160 30% 32%) !important;
  color: hsl(40 30% 96%) !important;
}

/* ==========================================================================
   END SECTION S500: GALERIJA ACTIVE BUTTON COLOR FIX
   ========================================================================== */


/* ============================================
 * S507: INFORMACIJA TAB STYLING FIX (2026-04-02)
 * ISSUE: Tab container transparency and border-radius
 * React source: src/pages/Information.tsx
 * TabsList: bg-muted/50 p-2 rounded-xl
 * Active tab: bg-primary text-primary-foreground
 * Content card: bg-card rounded-xl p-8 border
 * ============================================ */

/* Tab navigation container - ROUNDED-XL fix (12px, not 8px) */
body.page-informacija .mk-info-tabs__nav,
body.page-informacija .mk-info-tabs__list,
body[class*="informacija"] .mk-info-tabs__nav,
body[class*="informacija"] .mk-info-tabs__list,
.informacija-tabs-nav,
.mk-info-tabs .mk-info-tabs__nav {
  background: hsl(var(--muted) / 0.5) !important; /* bg-muted/50 */
  padding: 0.5rem !important; /* p-2 */
  border-radius: 0.75rem !important; /* rounded-xl = 12px (Tailwind default) */
  margin-bottom: 2rem !important;
  border: none !important;
}

/* Content card wrapper - ROUNDED-XL fix (12px) with visible border */
body.page-informacija .mk-info-content,
body.page-informacija .mk-info-panel,
body.page-informacija .mk-content-card,
body[class*="informacija"] .mk-info-content,
body[class*="informacija"] .mk-info-panel,
body[class*="informacija"] .mk-content-card,
.mk-informacija-content {
  background: hsl(var(--card)) !important;
  border-radius: 0.75rem !important; /* rounded-xl = 12px (Tailwind default) */
  padding: 2rem !important; /* p-8 */
  border: 1px solid hsl(var(--border)) !important; /* border visibility */
}

/* ==========================================================================
   END SECTION S507
   ========================================================================== */

/* ============================================
 * S504: KONTAKTAI FORM LAYOUT FIX (2026-04-02)
 * ISSUE: Form fields should be 2-column on desktop
 * ISSUE: Footer Informacija column shows white box
 * ============================================ */

/* ---------------------------------------------------------------------------
   S504-1: Contact Form 2-Column Name/Email Row
   React Contact.tsx line 96: grid sm:grid-cols-2 gap-4
   First two form fields (Vardas + El. paštas) side by side at 640px+
   --------------------------------------------------------------------------- */

/* Target CF7 form structure - make first two p elements (name/email) 2-column */
body.page-id-15 .wpcf7-form,
body.page-id-15 form.wpcf7-form,
body.page-kontaktai .wpcf7-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important; /* space-y-6 = 24px */
}

/* Create a grid wrapper for the first two fields (name + email) */
body.page-id-15 .wpcf7-form > p:nth-child(1),
body.page-id-15 .wpcf7-form > p:nth-child(2),
body.page-kontaktai .wpcf7-form > p:nth-child(1),
body.page-kontaktai .wpcf7-form > p:nth-child(2) {
  display: block !important;
}

/* Stack by default (mobile) */
body.page-id-15 .wpcf7-form > p,
body.page-kontaktai .wpcf7-form > p {
  margin: 0 !important;
}

/* 2-column grid for name/email at sm breakpoint (640px+) */
@media (min-width: 640px) {
  /* Use CSS Grid on the form and place first 2 items side by side */
  body.page-id-15 .wpcf7-form,
  body.page-kontaktai .wpcf7-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important; /* gap-4 = 16px for row, 24px for column gap below */
    row-gap: 1.5rem !important; /* space-y-6 */
  }

  /* First two fields span 1 column each (side by side) */
  body.page-id-15 .wpcf7-form > p:nth-child(1),
  body.page-id-15 .wpcf7-form > p:nth-child(2),
  body.page-kontaktai .wpcf7-form > p:nth-child(1),
  body.page-kontaktai .wpcf7-form > p:nth-child(2) {
    grid-column: span 1 !important;
  }

  /* Remaining fields (Tema, Žinutė, Submit) span full width */
  body.page-id-15 .wpcf7-form > p:nth-child(n+3),
  body.page-kontaktai .wpcf7-form > p:nth-child(n+3) {
    grid-column: span 2 !important;
  }
}

/* ---------------------------------------------------------------------------
   S504-2: Footer Informacija Column - Remove White Box
   React Footer.tsx line 80-95: No card/box around the links
   All columns have transparent background on inner groups
   --------------------------------------------------------------------------- */

/* Ensure all wp-block-group inside footer columns have transparent background */
.mk-footer .wp-block-column .wp-block-group,
.mk-footer__info .wp-block-group,
.mk-footer__links .wp-block-group,
.mk-footer__voucher .wp-block-group,
.mk-footer__contacts .wp-block-group,
.mk-footer__brand .wp-block-group,
footer.wp-block-template-part .wp-block-column .wp-block-group {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Override any has-background class inside footer */
.mk-footer .wp-block-group.has-background,
.mk-footer .has-card-background-color,
.mk-footer .has-cream-light-background-color,
.mk-footer .has-white-background-color,
footer.wp-block-template-part .wp-block-group.has-background {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure footer columns themselves are transparent */
.mk-footer .wp-block-column,
.mk-footer__columns .wp-block-column {
  background: transparent !important;
  background-color: transparent !important;
}

/* ==========================================================================
   END SECTION S504
   ========================================================================== */

/* ============================================
 * S510: HEADER SEARCH ICON POSITION FIX (2026-04-02)
 * ISSUE: Search icon should be LEFT inside input
 *
 * React design (SearchBar.tsx):
 *   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4" />
 *   <input className="pl-10" />
 *
 * This means:
 *   - Icon: position absolute, left: 0.75rem (12px), vertically centered
 *   - Input: padding-left: 2.5rem (40px) to accommodate icon
 *
 * Note: HTML uses .mk-header__search (double underscore BEM notation)
 * Previous S206 used .mk-header-search (single hyphen) which didn't match
 * ============================================ */

/* Container needs relative positioning for absolute icon */
.mk-header__search .wp-block-search__inside-wrapper {
  position: relative !important;
}

/* Search icon (button) positioned LEFT inside input */
.mk-header__search .wp-block-search__button {
  position: absolute !important;
  left: 0.75rem !important; /* left-3 = 12px */
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 1rem !important; /* w-4 = 16px */
  height: 1rem !important; /* h-4 = 16px */
  z-index: 1 !important;
  pointer-events: auto !important;
  min-width: auto !important;
}

.mk-header__search .wp-block-search__button svg {
  width: 1rem !important;
  height: 1rem !important;
  color: hsl(var(--muted-foreground)) !important;
}

.mk-header__search .wp-block-search__button:hover svg {
  color: hsl(var(--foreground)) !important;
}

/* Input padding-left to accommodate LEFT icon */
.mk-header__search .wp-block-search__input {
  padding-left: 2.5rem !important; /* pl-10 = 40px (0.75rem icon-left + 1rem icon + 0.75rem spacing) */
  padding-right: 0.75rem !important; /* pr-3 = 12px */
}

/* Also handle search forms that use .mk-header-search (single hyphen) for backwards compatibility */
.mk-header-search .wp-block-search__inside-wrapper {
  position: relative !important;
}

.mk-header-search .wp-block-search__button {
  position: absolute !important;
  left: 0.75rem !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  z-index: 1 !important;
}

.mk-header-search .wp-block-search__input {
  padding-left: 2.5rem !important;
  padding-right: 0.75rem !important;
}

/* ==========================================================================
   END SECTION S510: HEADER SEARCH ICON POSITION FIX
   ========================================================================== */

/* ============================================
 * S509: ATEINANTYS TIME FILTER STYLING FIX (2026-04-02)
 * ISSUE: Time filter button styling refinements for Ateinantys (upcoming) page
 *
 * React behavior (Catalog.tsx):
 * - Time filters show "Prasideda" options on ateinantys page
 * - Filters: Visi, Prasideda siandien, Prasideda sia savaite, Prasideda si menesi
 * - Button styling: ghost variant, rounded-md (6px), text-sm (14px), font-medium
 * - Active state: bg-primary, text-primary-foreground
 * - Hover state: bg-muted/50, border-color on hover
 *
 * Quick filter toggles:
 * - React Switch component: w-11 h-6 (44x24px) track, w-5 h-5 (20px) thumb
 * - Row layout: flex items-center justify-between
 * - Label: text-sm font-medium (14px, 500 weight)
 * ============================================ */

/* --- S509-1: Ateinantys page body class scoping --- */
body.mk-ateinantys-page .mk-time-filters,
.mk-ateinantys-page .mk-time-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important; /* Tighter gap for vertical list */
}

/* --- S509-2: Time filter buttons - Prasideda variant styling --- */
/* Ensure consistent button styling across all auction subpages */
.mk-ateinantys-page .mk-time-filter-btn,
.mk-auction-subpage .mk-time-filter-btn {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0.5rem 0.75rem !important; /* 8px 12px */
  font-size: 0.875rem !important; /* 14px */
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 0.375rem !important; /* 6px = rounded-md */
  cursor: pointer !important;
  transition: all 200ms ease !important;
}

/* Hover state */
.mk-ateinantys-page .mk-time-filter-btn:hover,
.mk-auction-subpage .mk-time-filter-btn:hover {
  background: hsl(var(--muted) / 0.5) !important;
  color: hsl(var(--primary)) !important;
}

/* Active state - matches React: bg-primary text-primary-foreground */
.mk-ateinantys-page .mk-time-filter-btn.active,
.mk-ateinantys-page .mk-time-filter-btn.is-active,
.mk-ateinantys-page .mk-time-filter-btn[data-active="true"],
.mk-auction-subpage .mk-time-filter-btn.active,
.mk-auction-subpage .mk-time-filter-btn.is-active {
  background: hsl(var(--primary)) !important; /* Forest green #325A4D */
  color: hsl(var(--primary-foreground)) !important; /* Cream */
  border-color: hsl(var(--primary)) !important;
}

/* Active hover - slightly darker forest green */
.mk-ateinantys-page .mk-time-filter-btn.active:hover,
.mk-ateinantys-page .mk-time-filter-btn.is-active:hover,
.mk-auction-subpage .mk-time-filter-btn.active:hover {
  background: hsl(160 30% 24%) !important;
}

/* --- S509-3: Quick filter row layout on Ateinantys page --- */
.mk-ateinantys-page .mk-quick-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* space-y-4 = 16px */
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}

/* Quick filter row: flex items-center justify-between */
.mk-ateinantys-page .mk-quick-filter-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
}

/* Quick filter label */
.mk-ateinantys-page .mk-quick-filter-label {
  font-size: 0.875rem !important; /* text-sm = 14px */
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  flex: 1 !important;
}

/* --- S509-4: Toggle switch styling refinements --- */
/* Ensure toggle matches React Switch component exactly */
.mk-ateinantys-page .mk-sqf-toggle {
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

/* Toggle track: 44x24px */
.mk-ateinantys-page .mk-sqf-toggle__track {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 2.75rem !important; /* 44px */
  height: 1.5rem !important; /* 24px */
  background: hsl(var(--input)) !important; /* Unchecked: input color */
  border-radius: 9999px !important;
  border: 2px solid transparent !important;
  transition: background-color 200ms ease, border-color 200ms ease !important;
  flex-shrink: 0 !important;
}

/* Toggle thumb: 20x20px */
.mk-ateinantys-page .mk-sqf-toggle__thumb {
  display: block !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important; /* 20px */
  background: white !important;
  border-radius: 9999px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
  transition: transform 200ms ease !important;
  pointer-events: none !important;
}

/* Checked state: primary background, thumb slides right */
.mk-ateinantys-page .mk-sqf-toggle.is-active .mk-sqf-toggle__track,
.mk-ateinantys-page input:checked + .mk-sqf-toggle .mk-sqf-toggle__track,
.mk-ateinantys-page input:checked ~ .mk-sqf-toggle__track {
  background: hsl(var(--primary)) !important; /* Forest green */
}

.mk-ateinantys-page .mk-sqf-toggle.is-active .mk-sqf-toggle__thumb,
.mk-ateinantys-page input:checked + .mk-sqf-toggle .mk-sqf-toggle__thumb,
.mk-ateinantys-page input:checked ~ .mk-sqf-toggle__thumb {
  transform: translateX(1.25rem) !important; /* Slide to right (44px - 20px - 4px) */
}

/* Hidden checkbox for accessibility */
.mk-ateinantys-page .mk-toggle-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Focus ring on toggle */
.mk-ateinantys-page .mk-sqf-toggle__track:focus-within,
.mk-ateinantys-page .mk-toggle-input:focus-visible + .mk-sqf-toggle__track {
  outline: 2px solid hsl(var(--ring)) !important;
  outline-offset: 2px !important;
}

/* --- S509-5: Filter card container styling --- */
/* Ensure filter group cards have consistent styling */
.mk-ateinantys-page .mk-filter-group {
  background: hsl(var(--card)) !important;
  border-radius: 0.5rem !important; /* 8px */
  box-shadow: var(--shadow-card) !important;
}

/* Categories filter has primary background */
.mk-ateinantys-page .mk-filter-categories {
  background: hsl(var(--primary)) !important;
}

.mk-ateinantys-page .mk-filter-categories h3 {
  color: hsl(var(--primary-foreground)) !important;
}

/* ==========================================================================
   END SECTION S509: ATEINANTYS TIME FILTER STYLING FIX
   ========================================================================== */


/* ============================================
 * S505: PASKYRA MY ACCOUNT STYLING FIX (2026-04-02)
 * ISSUE: Login/register form styling differences
 *
 * React Source: src/pages/Auth.tsx
 * - Container: max-w-2xl = 672px, py-12 px-4
 * - Card: bg-card rounded-sm shadow-elegant p-8 (rounded-sm = 0px)
 * - TabsList: grid-cols-2, h-10, rounded-md (2px), bg-muted, p-1, mb-8
 * - TabsTrigger: rounded-sm, px-3, py-1.5, text-sm, font-medium
 * - Form spacing: space-y-6 (24px gap)
 * - Input: h-10 (40px), rounded-md (2px), border-input, px-3 py-2
 * - Button: variant="catalog" full-width
 *
 * WooCommerce limitation: Uses side-by-side columns, not tabs
 * This section improves visual styling to match React as closely as possible
 * ============================================ */

/* S505-1: Main container - center and constrain width */
.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 42rem !important;             /* max-w-2xl = 672px */
  margin: 0 auto !important;
  padding: 3rem 1rem !important;           /* py-12 px-4 */
}

/* S505-2: Page title styling */
.woocommerce-account:not(.logged-in) h1,
.woocommerce-account:not(.logged-in) .entry-title,
.woocommerce-account:not(.logged-in) .page-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.875rem !important;          /* text-3xl = 30px */
  font-weight: 600 !important;             /* font-semibold */
  color: hsl(160 30% 18%) !important;      /* foreground */
  text-align: center !important;
  margin-bottom: 2rem !important;          /* mb-8 */
  line-height: 1.2 !important;
}

@media (min-width: 768px) {
  .woocommerce-account:not(.logged-in) h1,
  .woocommerce-account:not(.logged-in) .entry-title,
  .woocommerce-account:not(.logged-in) .page-title {
    font-size: 2.25rem !important;         /* md:text-4xl = 36px */
  }
}

/* S505-3: Login/Register columns wrapper - mimic tabbed card appearance */
.woocommerce-account:not(.logged-in) #customer_login {
  background: hsl(40 30% 96%) !important;  /* card bg */
  border-radius: 0 !important;             /* rounded-sm = 0 in React custom config */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important; /* shadow-elegant */
  padding: 2rem !important;                /* p-8 */
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
}

@media (min-width: 640px) {
  .woocommerce-account:not(.logged-in) #customer_login {
    flex-direction: row !important;
    gap: 2rem !important;
  }
}

/* S505-4: Individual column cards (login/register) */
.woocommerce-account:not(.logged-in) #customer_login .u-column1,
.woocommerce-account:not(.logged-in) #customer_login .u-column2 {
  flex: 1 !important;
  background: hsl(36 33% 94%) !important;  /* background color */
  border-radius: 0.125rem !important;      /* rounded-md = 2px */
  padding: 1.5rem !important;
  border: 1px solid hsl(36 20% 82%) !important; /* border color */
}

/* S505-5: Column headings (h2) */
.woocommerce-account:not(.logged-in) #customer_login h2 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.125rem !important;          /* text-lg = 18px */
  font-weight: 600 !important;
  color: hsl(160 30% 18%) !important;
  margin: 0 0 1.5rem 0 !important;         /* space-y-6 */
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid hsl(36 20% 82%) !important;
}

/* S505-6: Form row spacing */
.woocommerce-account:not(.logged-in) #customer_login form.woocommerce-form > p,
.woocommerce-account:not(.logged-in) #customer_login form.woocommerce-form .form-row {
  margin: 0 0 1.5rem 0 !important;         /* space-y-6 = 24px */
}

.woocommerce-account:not(.logged-in) #customer_login form.woocommerce-form > p:last-of-type {
  margin-bottom: 0 !important;
}

/* S505-7: Labels - match React Label component */
.woocommerce-account:not(.logged-in) #customer_login label {
  display: block !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.875rem !important;          /* text-sm = 14px */
  font-weight: 500 !important;             /* font-medium */
  line-height: 1 !important;
  color: hsl(160 30% 18%) !important;      /* foreground */
  margin-bottom: 0.5rem !important;        /* space-y-2 */
}

.woocommerce-account:not(.logged-in) #customer_login label .required {
  color: hsl(0 65% 50%) !important;        /* destructive red */
  margin-left: 0.125rem !important;
}

/* S505-8: Input fields - exact React Input component styling */
.woocommerce-account:not(.logged-in) #customer_login input[type="text"],
.woocommerce-account:not(.logged-in) #customer_login input[type="email"],
.woocommerce-account:not(.logged-in) #customer_login input[type="password"],
.woocommerce-account:not(.logged-in) #customer_login input[type="tel"] {
  display: flex !important;
  width: 100% !important;
  height: 2.5rem !important;               /* h-10 = 40px */
  padding: 0.5rem 0.75rem !important;      /* py-2 px-3 */
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1rem !important;              /* text-base = 16px mobile */
  line-height: 1.5 !important;
  color: hsl(160 30% 18%) !important;      /* foreground */
  background: hsl(36 33% 94%) !important;  /* background */
  border: 1px solid hsl(36 20% 82%) !important; /* border-input */
  border-radius: 0.125rem !important;      /* rounded-md = 2px in React custom config */
  outline: none !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .woocommerce-account:not(.logged-in) #customer_login input[type="text"],
  .woocommerce-account:not(.logged-in) #customer_login input[type="email"],
  .woocommerce-account:not(.logged-in) #customer_login input[type="password"],
  .woocommerce-account:not(.logged-in) #customer_login input[type="tel"] {
    font-size: 0.875rem !important;        /* md:text-sm = 14px desktop */
  }
}

/* S505-9: Input placeholder styling */
.woocommerce-account:not(.logged-in) #customer_login input::placeholder {
  color: hsl(160 15% 40%) !important;      /* muted-foreground */
  opacity: 1 !important;
}

/* S505-10: Input focus state - React double ring effect */
.woocommerce-account:not(.logged-in) #customer_login input:focus {
  border-color: hsl(160 30% 28%) !important; /* ring = primary */
  box-shadow:
    0 0 0 2px hsl(36 33% 94%),              /* ring-offset (background) */
    0 0 0 4px hsl(160 30% 28% / 0.3) !important; /* ring-2 ring-ring */
}

/* S505-11: Remember me checkbox styling */
.woocommerce-account:not(.logged-in) #customer_login input[type="checkbox"] {
  width: 1rem !important;                  /* 16px */
  height: 1rem !important;
  margin-right: 0.5rem !important;
  border-radius: 0.125rem !important;      /* rounded-sm */
  border: 1px solid hsl(160 30% 28%) !important; /* primary */
  background: hsl(36 33% 94%) !important;
  accent-color: hsl(160 30% 28%) !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__rememberme,
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form__label-for-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.875rem !important;
  color: hsl(160 15% 40%) !important;      /* muted-foreground */
  cursor: pointer !important;
}

/* S505-12: Submit buttons - React "catalog" variant */
.woocommerce-account:not(.logged-in) #customer_login button[type="submit"],
.woocommerce-account:not(.logged-in) #customer_login input[type="submit"],
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 2.5rem !important;               /* h-10 = 40px */
  padding: 0.5rem 1.5rem !important;       /* py-2 px-6 */
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.875rem !important;          /* text-sm = 14px */
  font-weight: 500 !important;             /* font-medium */
  letter-spacing: 0.025em !important;      /* tracking-wide */
  color: hsl(40 30% 96%) !important;       /* primary-foreground */
  background: hsl(160 30% 28%) !important; /* primary = forest green */
  border: none !important;
  border-radius: 0.25rem !important;       /* rounded = 4px */
  box-shadow: 0 4px 20px -4px hsl(160 30% 18% / 0.08) !important; /* shadow-elegant */
  cursor: pointer !important;
  transition: all 300ms !important;
  margin-top: 0.5rem !important;
}

.woocommerce-account:not(.logged-in) #customer_login button[type="submit"]:hover,
.woocommerce-account:not(.logged-in) #customer_login input[type="submit"]:hover,
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-button:hover {
  background: hsl(160 25% 35%) !important; /* forest-light */
  box-shadow: 0 8px 30px -8px hsl(160 30% 18% / 0.12) !important; /* shadow-hover */
}

.woocommerce-account:not(.logged-in) #customer_login button[type="submit"]:disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* S505-13: Lost password link styling */
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-LostPassword,
.woocommerce-account:not(.logged-in) #customer_login .lost_password {
  margin-top: 1rem !important;
  text-align: left !important;
}

.woocommerce-account:not(.logged-in) #customer_login .woocommerce-LostPassword a,
.woocommerce-account:not(.logged-in) #customer_login .lost_password a {
  font-size: 0.875rem !important;          /* text-sm */
  color: hsl(160 30% 28%) !important;      /* primary */
  text-decoration: none !important;
}

.woocommerce-account:not(.logged-in) #customer_login .woocommerce-LostPassword a:hover,
.woocommerce-account:not(.logged-in) #customer_login .lost_password a:hover {
  text-decoration: underline !important;
}

/* S505-14: Privacy policy / GDPR text - Lithuanian translation override */
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text,
.woocommerce-account:not(.logged-in) .woocommerce-terms-and-conditions-checkbox-text {
  font-size: 0.75rem !important;           /* text-xs */
  color: hsl(160 15% 40%) !important;      /* muted-foreground */
  line-height: 1.5 !important;
  margin-top: 1rem !important;
}

.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text a,
.woocommerce-account:not(.logged-in) .woocommerce-terms-and-conditions-checkbox-text a {
  color: hsl(160 30% 28%) !important;
  text-decoration: none !important;
}

.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text a:hover {
  text-decoration: underline !important;
}

/* S505-15: Error/notice messages styling */
.woocommerce-account:not(.logged-in) .woocommerce-error,
.woocommerce-account:not(.logged-in) .woocommerce-message {
  background: hsl(40 30% 96%) !important;
  border-left: 4px solid hsl(160 30% 28%) !important;
  border-radius: 0 !important;
  padding: 1rem !important;
  margin-bottom: 1.5rem !important;
  font-size: 0.875rem !important;
  color: hsl(160 30% 18%) !important;
}

.woocommerce-account:not(.logged-in) .woocommerce-error {
  border-left-color: hsl(0 65% 50%) !important; /* destructive red */
}

.woocommerce-account:not(.logged-in) .woocommerce-error li {
  list-style: none !important;
  margin: 0 !important;
}

/* S505-16: Register form intro text (if added via WooCommerce) */
.woocommerce-account:not(.logged-in) #customer_login .u-column2 > form::before {
  content: "Registracija būtina norint dalyvauti aukcione.";
  display: block !important;
  font-size: 0.875rem !important;
  color: hsl(160 15% 40%) !important;
  margin-bottom: 1rem !important;
}

/* S505-17: Hide WooCommerce default register username field (uses email) */
.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-register .woocommerce-form-row--wide:has(input#reg_username) {
  display: none !important;
}

/* ==========================================================================
   END SECTION S505: PASKYRA MY ACCOUNT STYLING FIX
   ========================================================================== */

/* ============================================
 * S503: PARDAVIMAS PAGE STYLING FIX (2026-04-02)
 * ISSUE: Step cards and form styling differences
 * React source: src/pages/HowToSell.tsx
 * ============================================ */

/* ------------------------------------------------------------------
   S503-1: Step Badge align-items fix
   React: flex items-center justify-center (line 109)
   Bug: align-items was "start" instead of "center"
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step__badge,
.page-pardavimas .mk-sell-step__badge,
.mk-sell-step__badge {
  align-items: center !important;
}

/* ------------------------------------------------------------------
   S503-2: Steps Grid - ensure gap-6 (1.5rem) not 2rem
   React: grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16 (line 107)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-steps-grid,
body.page-id-17 .mk-sell-steps .wp-block-columns,
.page-pardavimas .mk-sell-steps-grid,
.mk-sell-steps-grid {
  gap: 1.5rem !important; /* gap-6 = 24px */
}

/* ------------------------------------------------------------------
   S503-3: Steps Section margin-bottom 4rem (mb-16)
   React: mb-16 = 4rem (64px) after steps grid (line 107)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-steps,
body.page-id-17 .mk-sell-steps-section,
.page-pardavimas .mk-sell-steps,
.mk-sell-steps-section {
  margin-bottom: 4rem !important; /* mb-16 = 64px */
}

/* ------------------------------------------------------------------
   S503-4: Step Card padding p-6 (1.5rem)
   React: bg-card rounded-sm shadow-card p-6 relative (line 108)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-step,
body.page-id-17 .mk-sell-step-card,
.page-pardavimas .mk-sell-step,
.mk-sell-step {
  padding: 1.5rem !important; /* p-6 = 24px */
}

/* ------------------------------------------------------------------
   S503-5: Form Card - shadow-elegant, p-8, mb-12
   React: bg-card rounded-sm shadow-elegant p-8 mb-12 (line 121)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-form,
body.page-id-17 .mk-sell-form-card,
body.page-id-17 .wpcf7,
.page-pardavimas .mk-sell-form,
.page-pardavimas .wpcf7 {
  background: hsl(var(--card)) !important;
  border-radius: 0 !important; /* rounded-sm = 0px */
  box-shadow: var(--shadow-elegant) !important;
  padding: 2rem !important; /* p-8 = 32px */
  margin-bottom: 3rem !important; /* mb-12 = 48px */
}

/* ------------------------------------------------------------------
   S503-6: Form Title h2 styling
   React: font-display text-2xl font-semibold text-foreground mb-6 (line 122-124)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-sell-form h2,
body.page-id-17 .mk-sell-form-card h2,
.page-pardavimas .mk-sell-form h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important; /* text-2xl = 24px */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(var(--foreground)) !important;
  margin-bottom: 1.5rem !important; /* mb-6 = 24px */
  margin-top: 0 !important;
}

/* ------------------------------------------------------------------
   S503-7: Commission Section - bg-primary, rounded-sm, p-8, mb-12
   React: bg-primary text-primary-foreground rounded-sm p-8 mb-12 (line 203)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-commission,
body.page-id-17 .mk-commission-section,
.page-pardavimas .mk-commission,
.page-pardavimas .mk-commission-section {
  background: hsl(160 30% 28%) !important; /* --primary */
  color: hsl(40 30% 96%) !important; /* --primary-foreground */
  border-radius: 0 !important; /* rounded-sm = 0px */
  padding: 2rem !important; /* p-8 = 32px */
  margin-bottom: 3rem !important; /* mb-12 = 48px */
}

/* ------------------------------------------------------------------
   S503-8: Commission Section Title
   React: font-display text-2xl font-semibold mb-4 (line 204-206)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-commission h2,
body.page-id-17 .mk-commission-section h2,
.page-pardavimas .mk-commission h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important; /* text-2xl */
  font-weight: 600 !important; /* font-semibold */
  color: inherit !important;
  margin-bottom: 1rem !important; /* mb-4 */
  margin-top: 0 !important;
}

/* ------------------------------------------------------------------
   S503-9: Commission Section Text 80% opacity
   React: text-primary-foreground/80 (lines 208, 210)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-commission p,
body.page-id-17 .mk-commission li,
body.page-id-17 .mk-commission-section p,
body.page-id-17 .mk-commission-section li,
.page-pardavimas .mk-commission p,
.page-pardavimas .mk-commission li {
  color: hsl(40 30% 96% / 0.8) !important; /* primary-foreground/80 */
}

/* ------------------------------------------------------------------
   S503-10: Commission List styling
   React: space-y-2 (margin-bottom: 0.5rem between items) (line 210)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-commission ul,
body.page-id-17 .mk-commission-section ul,
.page-pardavimas .mk-commission ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.page-id-17 .mk-commission ul li,
body.page-id-17 .mk-commission-section ul li,
.page-pardavimas .mk-commission ul li {
  margin-bottom: 0.5rem !important; /* space-y-2 */
}

/* ------------------------------------------------------------------
   S503-11: Contact Alternative Section - bg-secondary/30, p-8, text-center
   React: bg-secondary/30 rounded-sm p-8 text-center (line 218)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-contact-alternative,
body.page-id-17 .mk-contact-alt,
.page-pardavimas .mk-contact-alternative {
  background: hsl(36 25% 88% / 0.3) !important; /* secondary/30 */
  border-radius: 0 !important; /* rounded-sm = 0px */
  padding: 2rem !important; /* p-8 = 32px */
  text-align: center !important;
}

/* ------------------------------------------------------------------
   S503-12: Contact Alternative Title
   React: font-display text-2xl font-semibold text-foreground mb-4 (line 219-221)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-contact-alternative h3,
body.page-id-17 .mk-contact-alt h3,
.page-pardavimas .mk-contact-alternative h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important; /* text-2xl */
  font-weight: 600 !important; /* font-semibold */
  color: hsl(160 30% 18%) !important; /* foreground */
  margin-bottom: 1rem !important; /* mb-4 */
  margin-top: 0 !important;
}

/* ------------------------------------------------------------------
   S503-13: Contact Alternative Description
   React: text-muted-foreground mb-6 (line 222-224)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-contact-alternative p,
body.page-id-17 .mk-contact-alt p,
.page-pardavimas .mk-contact-alternative p {
  color: hsl(160 15% 40%) !important; /* muted-foreground */
  margin-bottom: 1.5rem !important; /* mb-6 */
}

/* ------------------------------------------------------------------
   S503-14: Contact Info Row
   React: flex flex-wrap justify-center gap-4 text-muted-foreground (line 225)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-contact-alternative .contact-info-row,
body.page-id-17 .mk-contact-alt .contact-info-row,
.page-pardavimas .mk-contact-alternative .contact-info-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1rem !important; /* gap-4 = 16px */
  color: hsl(160 15% 40%) !important; /* muted-foreground */
}

/* ------------------------------------------------------------------
   S503-15: File Upload Dropzone styling
   React: border-2 border-dashed border-border rounded-sm p-8 text-center
          hover:border-primary/50 transition-colors (line 172)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-upload-area,
body.page-id-17 .wpcf7 .file-upload-wrapper,
.page-pardavimas .mk-upload-area {
  border: 2px dashed hsl(36 20% 82%) !important; /* border-border */
  border-radius: 0 !important; /* rounded-sm = 0px */
  padding: 2rem !important; /* p-8 */
  text-align: center !important;
  transition: border-color 200ms ease !important;
}

body.page-id-17 .mk-upload-area:hover,
body.page-id-17 .wpcf7 .file-upload-wrapper:hover,
.page-pardavimas .mk-upload-area:hover {
  border-color: hsl(160 30% 28% / 0.5) !important; /* hover:border-primary/50 */
}

/* ------------------------------------------------------------------
   S503-16: Upload icon styling
   React: w-10 h-10 text-muted-foreground mx-auto mb-3 (line 175)
   ------------------------------------------------------------------ */
body.page-id-17 .mk-upload-area svg,
.page-pardavimas .mk-upload-area svg {
  width: 2.5rem !important; /* w-10 = 40px */
  height: 2.5rem !important; /* h-10 = 40px */
  color: hsl(160 15% 40%) !important; /* muted-foreground */
  margin: 0 auto 0.75rem !important; /* mx-auto mb-3 */
  display: block !important;
}

/* ------------------------------------------------------------------
   S503-17: Responsive - Mobile step card padding
   React: No explicit mobile override, but p-6 at all sizes
   Override earlier mobile rules that set 1.25rem
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  body.page-id-17 .mk-sell-step,
  body.page-id-17 .mk-sell-step-card,
  .page-pardavimas .mk-sell-step {
    padding: 1.5rem !important; /* Keep p-6 on mobile too */
  }
}

/* ==========================================================================
   END SECTION S503: PARDAVIMAS PAGE STYLING FIX
   ========================================================================== */


/* ============================================
 * S508: DOVANU KUPONAS AMOUNT BUTTONS FIX (2026-04-02)
 * ISSUE: Amount selector button styling
 * React source: src/pages/GiftVoucher.tsx
 * Amount buttons: py-3 px-6 rounded-lg font-semibold transition-all duration-200
 * Selected: bg-gold text-primary
 * Unselected: bg-primary-foreground/10 text-primary-foreground border border-primary-foreground/20
 * Custom input: w-32, gold ring-2 when active
 * CTA: bg-gold hover:bg-gold/90 text-primary font-semibold py-6 (size xl)
 * Feature cards: bg-card rounded-xl p-6 border text-center
 * ============================================ */

/* S508-1: Amount selector button container */
.mk-gv-amounts,
.mk-voucher__amounts,
.page-id-19 .mk-amount-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important; /* gap-3 = 12px */
  align-items: center !important;
}

/* S508-2: Amount button base - React: py-3 px-6 rounded-lg font-semibold */
.mk-gv-amount-btn,
.mk-voucher-btn,
.mk-voucher-amount-btn,
.page-id-19 button[data-amount] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.75rem 1.5rem !important; /* py-3 px-6 */
  border-radius: 0.5rem !important; /* rounded-lg = 8px (Tailwind default) */
  font-size: 1rem !important;
  font-weight: 600 !important; /* font-semibold */
  font-family: var(--font-body) !important;
  cursor: pointer !important;
  transition: all 200ms ease !important; /* transition-all duration-200 */
  text-decoration: none !important;
  line-height: 1.5 !important;
}

/* S508-3: Unselected state - on primary bg */
.mk-gv-amount-btn:not(.mk-gv-amount-btn--selected),
.mk-voucher-btn:not(.mk-voucher-btn--selected),
.mk-voucher-amount-btn:not(.active),
.page-id-19 button[data-amount]:not(.selected):not(.active) {
  background: hsl(var(--primary-foreground) / 0.1) !important; /* bg-primary-foreground/10 */
  color: hsl(var(--primary-foreground)) !important;
  border: 1px solid hsl(var(--primary-foreground) / 0.2) !important; /* border-primary-foreground/20 */
}

/* S508-4: Unselected hover state */
.mk-gv-amount-btn:not(.mk-gv-amount-btn--selected):hover,
.mk-voucher-btn:not(.mk-voucher-btn--selected):hover,
.mk-voucher-amount-btn:not(.active):hover,
.page-id-19 button[data-amount]:not(.selected):not(.active):hover {
  background: hsl(var(--primary-foreground) / 0.2) !important; /* hover:bg-primary-foreground/20 */
}

/* S508-5: Selected state - GOLD */
.mk-gv-amount-btn--selected,
.mk-gv-amount-btn.selected,
.mk-gv-amount-btn.active,
.mk-voucher-btn--selected,
.mk-voucher-btn.mk-voucher-btn--selected,
.mk-voucher-amount-btn.active,
.page-id-19 button[data-amount].selected,
.page-id-19 button[data-amount].active {
  background: hsl(42 55% 58%) !important; /* --gold */
  color: hsl(160 30% 18%) !important; /* --forest-dark / --primary */
  border: 1px solid hsl(42 55% 58%) !important; /* border matches bg */
}

/* S508-6: Custom amount input */
.mk-gv-custom-input,
.mk-voucher-custom-input,
.page-id-19 input[type="number"].custom-amount {
  width: 8rem !important; /* w-32 = 128px */
  height: auto !important;
  padding: 0.75rem 1rem !important;
  background: hsl(var(--primary-foreground) / 0.1) !important;
  border: 1px solid hsl(var(--primary-foreground) / 0.2) !important;
  border-radius: 0.5rem !important; /* rounded-lg */
  color: hsl(var(--primary-foreground)) !important;
  font-size: 1rem !important;
  font-family: var(--font-body) !important;
  transition: all 200ms ease !important;
}

/* S508-7: Custom input placeholder */
.mk-gv-custom-input::placeholder,
.mk-voucher-custom-input::placeholder {
  color: hsl(var(--primary-foreground) / 0.5) !important;
}

/* S508-8: Custom input active/focus state - gold ring */
.mk-gv-custom-input:focus,
.mk-gv-custom-input.active,
.mk-voucher-custom-input:focus,
.mk-voucher-custom-input.mk-voucher-input--active,
.page-id-19 input[type="number"].custom-amount:focus {
  outline: none !important;
  border-color: hsl(42 55% 58%) !important; /* gold border */
  box-shadow: 0 0 0 2px hsl(42 55% 58%) !important; /* ring-2 ring-gold */
}

/* S508-9: Voucher preview card with price overlay */
.mk-gv-preview,
.mk-voucher__preview,
.mk-voucher__preview-wrap {
  position: relative !important;
}

.mk-gv-preview img,
.mk-voucher__preview img,
.mk-voucher__preview-wrap img {
  border-radius: 0.5rem !important; /* rounded-lg */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; /* shadow-2xl */
  max-width: 100% !important;
  height: auto !important;
  max-height: 400px !important;
}

/* S508-10: Dynamic price overlay */
.mk-gv-price-overlay,
.mk-voucher__price-overlay {
  position: absolute !important;
  bottom: 1.5rem !important; /* bottom-6 */
  right: 1.5rem !important; /* right-6 */
  background: hsl(160 30% 28%) !important; /* --primary / bg-primary */
  color: hsl(40 30% 96%) !important; /* --primary-foreground */
  padding: 0.5rem 1rem !important; /* px-4 py-2 */
  border-radius: 0.5rem !important; /* rounded-lg */
  font-weight: 700 !important; /* font-bold */
  font-size: 1.5rem !important; /* text-2xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow-lg */
  z-index: 10 !important;
}

/* S508-11: CTA button - GOLD, size xl */
.mk-gv-order-btn,
.mk-voucher-order-btn,
.mk-voucher-btn.mk-voucher-btn--cta,
.page-id-19 .mk-btn-gold,
.page-id-19 button.order-voucher {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important; /* gap-2 for icon */
  width: 100% !important; /* w-full */
  padding: 1.5rem 2rem !important; /* py-6 = 24px vertical */
  background: hsl(42 55% 58%) !important; /* --gold */
  color: hsl(160 30% 18%) !important; /* --forest-dark */
  border: none !important;
  border-radius: 0.5rem !important; /* rounded-lg */
  font-size: 1.125rem !important; /* text-lg */
  font-weight: 600 !important; /* font-semibold */
  font-family: var(--font-body) !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
  line-height: 1.5 !important;
}

/* S508-12: CTA button hover */
.mk-gv-order-btn:hover:not(:disabled),
.mk-voucher-order-btn:hover:not(:disabled),
.page-id-19 .mk-btn-gold:hover,
.page-id-19 button.order-voucher:hover {
  background: hsl(42 55% 58% / 0.9) !important; /* hover:bg-gold/90 */
}

/* S508-13: CTA button disabled */
.mk-gv-order-btn:disabled,
.mk-voucher-order-btn:disabled,
.page-id-19 button.order-voucher:disabled {
  opacity: 0.5 !important; /* disabled:opacity-50 */
  cursor: not-allowed !important;
}

/* S508-14: Feature cards - info section */
.mk-gv-feature-card,
.mk-voucher-feature,
.page-id-19 .mk-feature-card,
.page-id-19 .wp-block-group.is-style-feature {
  background: hsl(var(--card)) !important; /* bg-card */
  border-radius: 0.75rem !important; /* rounded-xl = 12px */
  padding: 1.5rem !important; /* p-6 */
  border: 1px solid hsl(var(--border)) !important; /* border */
  text-align: center !important; /* text-center */
}

/* S508-15: Feature card icons */
.mk-gv-feature-card svg,
.mk-gv-feature-card .icon,
.mk-voucher-feature__icon,
.page-id-19 .mk-feature-card svg {
  width: 2.5rem !important; /* w-10 = 40px */
  height: 2.5rem !important; /* h-10 = 40px */
  color: hsl(160 30% 28%) !important; /* text-primary */
  margin: 0 auto 1rem !important; /* mx-auto mb-4 */
}

/* S508-16: Feature card title */
.mk-gv-feature-card h3,
.mk-voucher-feature h3,
.page-id-19 .mk-feature-card h3 {
  font-family: var(--font-body) !important; /* Inter, not Playfair */
  font-weight: 600 !important; /* font-semibold */
  font-size: 1rem !important;
  margin-bottom: 0.5rem !important; /* mb-2 */
  color: hsl(var(--foreground)) !important;
  white-space: nowrap !important; /* Prevent word-break */
  word-break: keep-all !important;
}

/* S508-17: Feature card description */
.mk-gv-feature-card p,
.mk-voucher-feature p,
.page-id-19 .mk-feature-card p {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 !important;
}

/* S508-18: Validity rules card */
.mk-gv-rules-card,
.mk-voucher-rules,
.page-id-19 .mk-rules-card {
  background: hsl(var(--card)) !important;
  border-radius: 0.75rem !important; /* rounded-xl */
  padding: 2rem !important; /* p-8 */
  border: 1px solid hsl(var(--border)) !important;
}

/* S508-19: Rules card heading with icon */
.mk-gv-rules-card .rules-header,
.mk-voucher-rules .rules-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important; /* gap-3 */
  margin-bottom: 1.5rem !important; /* mb-6 */
}

/* S508-20: Rules card h2 */
.mk-gv-rules-card h2,
.mk-voucher-rules h2,
.page-id-19 .mk-rules-card h2 {
  font-family: var(--font-display) !important; /* Playfair Display */
  font-size: 1.5rem !important; /* text-2xl */
  font-weight: 700 !important; /* font-bold */
  margin: 0 !important;
}

/* S508-21: Rules grid layout */
.mk-gv-rules-grid,
.mk-voucher-rules .rules-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* gap-6 */
}

@media (min-width: 768px) {
  .mk-gv-rules-grid,
  .mk-voucher-rules .rules-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* md:grid-cols-2 */
  }
}

/* S508-22: Individual rule item with left border */
.mk-gv-rule-item,
.mk-voucher-rules .rule-item {
  border-left: 4px solid hsl(160 30% 28%) !important; /* border-l-4 border-primary */
  padding-left: 1rem !important; /* pl-4 */
}

/* S508-23: Rule item heading */
.mk-gv-rule-item h3,
.mk-voucher-rules .rule-item h3 {
  font-family: var(--font-body) !important;
  font-weight: 600 !important; /* font-semibold */
  font-size: 1rem !important;
  margin-bottom: 0.25rem !important; /* mb-1 */
  color: hsl(var(--foreground)) !important;
}

/* S508-24: Rule item description */
.mk-gv-rule-item p,
.mk-voucher-rules .rule-item p {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 !important;
}

/* S508-25: PDF delivery note */
.mk-gv-pdf-note,
.page-id-19 .pdf-note {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(var(--primary-foreground) / 0.6) !important; /* text-primary-foreground/60 */
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
}

.mk-gv-pdf-note svg,
.page-id-19 .pdf-note svg {
  width: 1rem !important; /* w-4 */
  height: 1rem !important; /* h-4 */
}

/* S508-26: Section label styling */
.mk-gv-section-label,
.page-id-19 .amount-label {
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  color: hsl(var(--primary-foreground) / 0.8) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important; /* tracking-wide */
  margin-bottom: 0.75rem !important; /* mb-3 */
}

/* ==========================================================================
   END SECTION S508: DOVANU KUPONAS AMOUNT BUTTONS FIX
   ========================================================================== */

/* ==========================================================================
 * S511: ROUND 2 PARITY FIXES (2026-04-02)
 * 20-agent verification cycle #2
 *
 * This section collects CSS fixes from the second round of parallel agent
 * verification. Each subsection corresponds to a specific page or component.
 * ========================================================================== */

/* --- S511-1: HOMEPAGE FIXES --- */
/* Agent 1: Homepage verification */


/* --- S511-2: GALERIJA FIXES --- */
/* Agent 2: Gallery page verification */


/* --- S511-3: ATEINANTYS AUKCIONAI FIXES --- */
/* Agent 3: Upcoming auctions verification */


/* --- S511-4: DOVANU KUPONAS FIXES --- */
/* Agent 4: Gift voucher page verification */


/* --- S511-5: PARDAVIMAS FIXES --- */
/* Agent 5: Sell page verification */
/* Fix: Step badges gold color, form border removal, step card styling */
.page-id-17 .mk-step-badge,
.page-template-page-pardavimas .mk-step-badge {
  background: hsl(42 55% 58%) !important; /* gold */
  color: hsl(160 30% 18%) !important; /* forest-dark */
  font-weight: 600 !important;
}
.page-id-17 .wpcf7-form,
.page-template-page-pardavimas .wpcf7-form {
  border: none !important;
  box-shadow: var(--shadow-card) !important;
  background: hsl(var(--card)) !important;
  border-radius: 0.75rem !important; /* rounded-xl */
  padding: 1.5rem !important;
}
.page-id-17 .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="file"]),
.page-id-17 .wpcf7-form textarea {
  border: 1px solid hsl(36 20% 82%) !important;
  border-radius: 0.375rem !important; /* rounded-md */
  padding: 0.75rem 1rem !important;
  background: white !important;
}
.page-id-17 .wpcf7-form input:focus,
.page-id-17 .wpcf7-form textarea:focus {
  border-color: hsl(160 30% 28%) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(160 30% 28% / 0.1) !important;
}


/* --- S511-6: VYKSTANTYS AUKCIONAI FIXES --- */
/* Agent 6: Current auctions verification */


/* --- S511-7: IVYKE AUKCIONAI FIXES --- */
/* Agent 7: Past auctions verification */


/* --- S511-8: PIRKIMAS FIXES --- */
/* Agent 8: Buy page verification */
/* Fix: Feature card title font-size (1rem), border-radius (0) */
.page-id-16 .mk-pirkimas-feature,
.page-template-page-pirkimas .mk-feature-card,
body.pirkimas .mk-feature-card {
  border-radius: 0 !important;
  background: hsl(var(--card)) !important;
  box-shadow: var(--shadow-card) !important;
}
.page-id-16 .mk-pirkimas-feature h3,
.page-template-page-pirkimas .mk-feature-card h3,
body.pirkimas .mk-feature-card h3 {
  font-size: 1rem !important; /* 16px - React text-base */
  font-weight: 600 !important;
  color: hsl(160 30% 18%) !important;
  margin-bottom: 0.5rem !important;
}
.page-id-16 .mk-pirkimas-feature p,
.page-template-page-pirkimas .mk-feature-card p,
body.pirkimas .mk-feature-card p {
  font-size: 0.875rem !important; /* 14px - React text-sm */
  color: hsl(160 15% 40%) !important; /* muted-foreground */
  line-height: 1.5 !important;
}
/* Feature card hover effect */
.page-id-16 .mk-pirkimas-feature:hover,
.page-template-page-pirkimas .mk-feature-card:hover,
body.pirkimas .mk-feature-card:hover {
  box-shadow: var(--shadow-hover) !important;
}


/* --- S511-9: KONTAKTAI FIXES --- */
/* Agent 9: Contact page verification */
/* Fix: Form grid 2-column structure, footer Informacija white box */
.page-id-15 .mk-contact-grid,
.page-kontaktai .mk-contact-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
}
@media (max-width: 767px) {
  .page-id-15 .mk-contact-grid,
  .page-kontaktai .mk-contact-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Contact info card styling */
.page-id-15 .mk-contact-info-card,
.page-kontaktai .mk-contact-info-card {
  background: hsl(var(--card)) !important;
  border-radius: 0.75rem !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-card) !important;
}
/* Contact form card styling */
.page-id-15 .wpcf7-form,
.page-kontaktai .wpcf7-form {
  background: hsl(var(--card)) !important;
  border-radius: 0.75rem !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-card) !important;
  border: none !important;
}
/* Form inputs */
.page-id-15 .wpcf7-form input:not([type="submit"]):not([type="checkbox"]),
.page-id-15 .wpcf7-form textarea,
.page-kontaktai .wpcf7-form input:not([type="submit"]):not([type="checkbox"]),
.page-kontaktai .wpcf7-form textarea {
  border: 1px solid hsl(36 20% 82%) !important;
  border-radius: 0.375rem !important;
  padding: 0.75rem 1rem !important;
  background: white !important;
  width: 100% !important;
}
.page-id-15 .wpcf7-form input:focus,
.page-id-15 .wpcf7-form textarea:focus,
.page-kontaktai .wpcf7-form input:focus,
.page-kontaktai .wpcf7-form textarea:focus {
  border-color: hsl(160 30% 28%) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(160 30% 28% / 0.1) !important;
}
/* Submit button styling */
.page-id-15 .wpcf7-form input[type="submit"],
.page-kontaktai .wpcf7-form input[type="submit"] {
  background: hsl(160 30% 28%) !important;
  color: white !important;
  border: none !important;
  border-radius: 0.25rem !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.page-id-15 .wpcf7-form input[type="submit"]:hover,
.page-kontaktai .wpcf7-form input[type="submit"]:hover {
  background: hsl(160 30% 35%) !important;
}
/* Footer Informacija section - ensure proper styling */
.site-footer .mk-footer-informacija,
footer .mk-footer-informacija {
  background: transparent !important;
}


/* --- S511-10: INFORMACIJA FIXES --- */
/* Agent 10: Information hub verification */
/* Fix: Tab border-radius (0.75rem = 12px), prevent wrapping */
.mk-informacija-tabs,
.mk-info-tabs,
[class*="informacija"] .wp-block-buttons {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 0.5rem !important;
  padding-bottom: 0.5rem !important; /* space for scrollbar if needed */
}
.mk-informacija-tabs .wp-block-button,
.mk-info-tabs .wp-block-button,
[class*="informacija"] .wp-block-buttons .wp-block-button {
  flex-shrink: 0 !important;
}
.mk-informacija-tabs .wp-block-button__link,
.mk-info-tabs .wp-block-button__link,
[class*="informacija"] .wp-block-button__link {
  border-radius: 0.75rem !important; /* 12px - rounded-xl */
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  transition: all 0.2s !important;
}
/* Active tab styling */
.mk-informacija-tabs .wp-block-button.is-active .wp-block-button__link,
.mk-info-tabs .wp-block-button.is-active .wp-block-button__link,
[class*="informacija"] .wp-block-button.is-active .wp-block-button__link {
  background: hsl(160 30% 28%) !important; /* forest */
  color: white !important;
}
/* Inactive tab styling */
.mk-informacija-tabs .wp-block-button:not(.is-active) .wp-block-button__link,
.mk-info-tabs .wp-block-button:not(.is-active) .wp-block-button__link,
[class*="informacija"] .wp-block-button:not(.is-active) .wp-block-button__link {
  background: hsl(36 25% 88%) !important; /* cream-dark */
  color: hsl(160 30% 18%) !important;
}
.mk-informacija-tabs .wp-block-button:not(.is-active) .wp-block-button__link:hover,
.mk-info-tabs .wp-block-button:not(.is-active) .wp-block-button__link:hover {
  background: hsl(36 20% 82%) !important;
}
/* Content card styling */
.mk-informacija-content,
.mk-info-content,
[class*="informacija"] .mk-content-card {
  background: hsl(var(--card)) !important;
  border-radius: 0.75rem !important; /* 12px */
  padding: 1.5rem !important;
  box-shadow: var(--shadow-card) !important;
}


/* --- S511-11: EKSPOZICIJOS FIXES --- */
/* Agent 11: Expositions page verification */


/* --- S511-12: PLENERAI FIXES --- */
/* Agent 12: Plein air page verification */
/* Fix: Badge text-transform, gallery border-radius, hero min-height */
.page-id-18 .mk-plenerai-badge,
.mk-plenerai-badge {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important; /* tracking-wide */
  font-size: 0.75rem !important; /* text-xs */
  font-weight: 500 !important;
  padding: 0.25rem 0.75rem !important;
  background: hsl(42 55% 58% / 0.2) !important; /* gold/20 */
  color: hsl(42 55% 58%) !important; /* gold */
  border-radius: 9999px !important; /* rounded-full */
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}
/* Gallery images border-radius */
.page-id-18 .mk-plenerai__gallery img,
.mk-plenerai__gallery img,
.mk-plenerai-gallery img {
  border-radius: 0.5rem !important; /* rounded-lg = 8px */
  overflow: hidden !important;
}
.page-id-18 .mk-plenerai__gallery .mk-img-zoom,
.mk-plenerai__gallery .mk-img-zoom {
  border-radius: 0.5rem !important;
  overflow: hidden !important;
}
/* Hero min-height */
.page-id-18 .mk-plenerai-hero,
.mk-plenerai-hero {
  min-height: 60vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Event info card styling */
.page-id-18 .mk-plenerai__info,
.mk-plenerai__info {
  background: white !important;
  border-radius: 0.75rem !important; /* 12px */
  box-shadow: var(--shadow-elegant) !important;
  padding: 1.5rem !important;
  margin-top: -4rem !important; /* overlap hero */
  position: relative !important;
  z-index: 10 !important;
}
/* Participant cards */
.page-id-18 .mk-plenerai-participant,
.mk-plenerai-participant {
  background: hsl(var(--muted)) !important;
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  transition: all 0.2s !important;
}
.page-id-18 .mk-plenerai-participant:hover,
.mk-plenerai-participant:hover {
  background: hsl(36 20% 82%) !important;
}


/* --- S511-13: AUKCIONO TAISYKLES FIXES --- */
/* Agent 13: Auction rules verification */


/* --- S511-14: PASKYRA FIXES --- */
/* Agent 14: My Account verification */


/* --- S511-15: HEADER FIXES --- */
/* Agent 15: Header verification */


/* --- S511-16: FOOTER FIXES --- */
/* Agent 16: Footer verification */


/* --- S511-17: 404 PAGE FIXES --- */
/* Agent 17: 404 page verification */


/* --- S511-18: CATALOG/KATALOGAS FIXES --- */
/* Agent 18: Catalog page verification */
/* Fix: Grid layout 2-3 columns, ensure sort dropdown visible */

/* Katalogas page (page ID 21) - force grid layout */
.page-id-21 .wc-block-product-template,
.page-id-21 .products,
.page-id-21 ul.products,
.page-id-21 .wc-block-grid__products,
body.woocommerce-page .wc-block-product-template,
body.post-type-archive-product .wc-block-product-template {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}

/* Tablet: 2 columns */
@media (min-width: 640px) {
  .page-id-21 .wc-block-product-template,
  .page-id-21 .products,
  .page-id-21 ul.products,
  .page-id-21 .wc-block-grid__products,
  body.woocommerce-page .wc-block-product-template,
  body.post-type-archive-product .wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .page-id-21 .wc-block-product-template,
  .page-id-21 .products,
  .page-id-21 ul.products,
  .page-id-21 .wc-block-grid__products,
  body.woocommerce-page .wc-block-product-template,
  body.post-type-archive-product .wc-block-product-template {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Product card within grid - ensure proper sizing */
.page-id-21 .wc-block-product-template > li,
.page-id-21 .products > .product,
.page-id-21 .wc-block-grid__product {
  width: 100% !important;
  max-width: 100% !important;
}

/* Sort dropdown styling */
.mk-catalog-sort select,
.woocommerce-ordering select,
.orderby {
  appearance: none !important;
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23325A4D' d='M6 8L2 4h8z'/%3E%3C/svg%3E") no-repeat right 0.75rem center !important;
  padding: 0.5rem 2rem 0.5rem 0.75rem !important;
  border: 1px solid hsl(36 20% 82%) !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  color: hsl(160 30% 18%) !important;
  cursor: pointer !important;
}
.mk-catalog-sort select:focus,
.woocommerce-ordering select:focus {
  border-color: hsl(160 30% 28%) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px hsl(160 30% 28% / 0.1) !important;
}

/* Result count styling */
.woocommerce-result-count,
.mk-result-count {
  font-size: 0.875rem !important;
  color: hsl(160 15% 40%) !important;
}


/* --- S511-19: SINGLE PRODUCT FIXES --- */
/* Agent 19: Single product page verification */
/* Fix: Hide breadcrumbs, column gap, image shadow, title sizing */

/* Hide breadcrumbs (React doesn't have them) */
.single-product .woocommerce-breadcrumb,
.single-product nav.woocommerce-breadcrumb,
.single-product .breadcrumbs,
body.single-product .woocommerce-breadcrumb {
  display: none !important;
}

/* Column gap matches React gap-8 (2rem) at desktop */
.single-product .mk-product-columns,
.single-product .wp-block-columns.mk-product-layout,
body.single-product .product-columns {
  gap: 2rem !important;
}
@media (min-width: 1024px) {
  .single-product .mk-product-columns,
  .single-product .wp-block-columns.mk-product-layout {
    gap: 3rem !important; /* lg:gap-12 */
  }
}

/* Product image shadow */
.single-product .mk-product-image img,
.single-product .woocommerce-product-gallery__image img,
body.single-product .product-image img {
  box-shadow: var(--shadow-card) !important;
  border-radius: 0.5rem !important; /* rounded-lg */
}

/* Product title sizing - React text-3xl lg:text-4xl */
.single-product h1.product_title,
.single-product .mk-product-title,
body.single-product .entry-title {
  font-size: 1.875rem !important; /* text-3xl = 30px */
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: hsl(160 30% 18%) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  margin-bottom: 0.5rem !important;
}
@media (min-width: 1024px) {
  .single-product h1.product_title,
  .single-product .mk-product-title,
  body.single-product .entry-title {
    font-size: 2.25rem !important; /* lg:text-4xl = 36px */
  }
}

/* Artist name styling */
.single-product .mk-artist-name,
.single-product .artist-name {
  font-size: 1.125rem !important; /* text-lg */
  color: hsl(160 15% 40%) !important; /* muted-foreground */
  font-weight: 400 !important;
  margin-bottom: 1rem !important;
}

/* Pricing card styling */
.single-product .mk-pricing-card,
.single-product .product-pricing {
  background: hsl(var(--card)) !important;
  border-radius: 0.75rem !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-card) !important;
}

/* Trust badges row */
.single-product .mk-trust-badges,
.single-product .trust-badges {
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  margin-top: 1.5rem !important;
}
.single-product .mk-trust-badge,
.single-product .trust-badge {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.875rem !important;
  color: hsl(160 15% 40%) !important;
}


/* ==========================================================================
   END SECTION S511: ROUND 2 PARITY FIXES
   ========================================================================== */