/*
Theme Name: Marquee Canvas
Theme URI: https://example.com/marquee-storefront
Description: Minimal companion theme for the Marquee Storefront plugin. It hands the header, footer and page chrome to the plugin on every page and adds blog post, archive, search and 404 templates in the same design system. Optional — the plugin works with other themes.
Author: Marquee Storefront
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marquee-canvas
Tags: e-commerce, custom-menu, featured-images, full-width-template
*/

/* Layout lives in the Marquee Storefront plugin; this file only covers theme templates. */
.mqs-entry { max-width: 860px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) 20px 0; }
.mqs-entry--wide { max-width: calc(var(--mqs-container, 1340px) + 40px); }
.mqs-entry__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: 13px; color: var(--mqs-primary); }
.mqs-entry__meta a { color: inherit; }
.mqs-entry__title { margin: 0 0 24px; font-family: var(--mqs-font-heading); font-weight: 400; font-size: clamp(40px, 4.4vw, 72px); line-height: 1.05; color: var(--mqs-primary); }
.mqs-entry__image { margin: 0 0 32px; }
.mqs-entry__image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--mqs-radius-section, 30px); }
.mqs-entry .mqs-prose > * + * { margin-top: 1em; }
.mqs-entry .mqs-prose img { border-radius: 16px; }
.mqs-entry .mqs-prose blockquote { margin: 28px 0; padding: 20px 24px; border-left: 4px solid var(--mqs-primary); border-radius: 0 16px 16px 0; background: var(--mqs-panel, #fef4fe); }
.mqs-entry__tags { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.mqs-entry__tags a { padding: 6px 14px; border-radius: 20px; background: color-mix(in srgb, var(--mqs-primary) 12%, #fff); color: var(--mqs-primary); text-decoration: none; font-size: 13px; }
.mqs-related-posts { margin-top: clamp(48px, 6vw, 96px); }
.mqs-404 { padding: clamp(48px, 8vw, 120px) 20px; text-align: center; }
.mqs-404__code { margin: 0; font-family: var(--mqs-font-heading); font-size: clamp(120px, 18vw, 260px); line-height: .9; color: var(--mqs-primary); }
.mqs-404__title { margin: 8px 0 12px; font-family: var(--mqs-font-heading); font-weight: 400; font-size: clamp(32px, 3vw, 48px); color: var(--mqs-accent); }
.mqs-404 p { margin: 0 auto 28px; max-width: 520px; color: var(--mqs-muted); }
.mqs-404 .mqs-btn + .mqs-btn { margin-left: 10px; }
.mqs-search-form { display: flex; gap: 10px; max-width: 560px; margin: 0 auto 40px; }
.mqs-search-form input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 2px solid var(--mqs-primary); border-radius: var(--mqs-radius-button, 50px); font: 16px var(--mqs-font-body); }
.mqs-search-results { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; padding: 0; list-style: none; }
.mqs-search-results li { padding: 20px 24px; border-radius: 16px; background: var(--mqs-panel, #fef4fe); }
.mqs-search-results h2 { margin: 0 0 6px; font-family: var(--mqs-font-heading); font-weight: 400; font-size: 28px; }
.mqs-search-results h2 a { color: var(--mqs-primary); text-decoration: none; }
.mqs-search-results p { margin: 0; font-size: 14px; color: var(--mqs-muted); }
.mqs-comments { max-width: 860px; margin: 56px auto 0; padding: 0 20px; }
.mqs-comments .comment-list { padding: 0; list-style: none; }
.mqs-comments .comment-body { padding: 18px 0; border-bottom: 1px solid #eee; }
.mqs-comments input[type="text"], .mqs-comments input[type="email"], .mqs-comments input[type="url"], .mqs-comments textarea { width: 100%; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--mqs-primary) 45%, #fff); border-radius: 8px; font: 15px var(--mqs-font-body); }
.mqs-comments .submit { padding: 12px 28px; border: 0; border-radius: 50px; background: var(--mqs-primary); color: #fff; font: 700 15px var(--mqs-font-body); cursor: pointer; }
.mqs-woo-shell { max-width: calc(var(--mqs-container, 1340px) + 40px); margin: 0 auto; padding: clamp(24px, 3vw, 48px) 20px 0; }
.mqs-woo-shell .page-title, .mqs-woo-shell > h1 { margin: 0 0 24px; font-family: var(--mqs-font-heading); font-weight: 400; font-size: clamp(40px, 4vw, 64px); color: var(--mqs-primary); }