/*
Theme Name: FrozenMeat Purple
Template: purple
Version: 0.5.4
Requires at least: 7.1
Tested up to: 7.1
Tags: e-commerce, block-patterns
Requires PHP: 7.4
Text Domain: frozenmeat-purple
Author: FrozenMeat.sg
Description: FrozenMeat storefront and guides on Woo's Purple block theme. Brand refresh 2026: Plum, Pink, Butter and Oat, Fraunces headings, brush percent mark.
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Fraunces display axes: soft terminals on every heading. */
:where(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-heading, .has-display-font-family) {
	font-variation-settings: "SOFT" 100, "WONK" 0;
}
::selection { background: var(--wp--preset--color--butter); color: var(--wp--preset--color--theme-3); }
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--pink);
	outline-offset: 3px;
}

/*
 * Section rhythm. One vertical scale for every gap between sections:
 *   --fm-section    = spacing-70, 50px on phones up to 70px on desktop
 *   --fm-section-sm = spacing-50, 20px up to 50px (inside a section: heading to grid)
 * Rules: sections own their padding, never margins; adjacent sections on the same
 * background share one gap (the second drops its top padding); a background change
 * meets edge to edge with no margin between.
 */
:root { --fm-section: var(--wp--preset--spacing--70); --fm-section-sm: var(--wp--preset--spacing--50); }
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.wp-site-blocks > main:not(:has(> .wpds-custom-featured-hero:first-child)):not(:has(> .fm-ordering)) { padding-top: var(--fm-section) !important; padding-bottom: var(--fm-section) !important; margin-top: 0 !important; }
.wp-site-blocks > main + .alignfull:not(.has-background) { padding-top: 0 !important; padding-bottom: var(--fm-section) !important; }
.wp-site-blocks > main:has(> .fm-ordering) { padding-block: 0 !important; margin-top: 0 !important; }
.wpds-custom-featured-hero {
	--wpds-custom-featured-hero-inset-block: var(--fm-section);
	/* Align the band's text with the header and every wide section below it. */
	--wpds-custom-featured-hero-inset-inline: var(--wp--style--root--padding-left, 50px);
	--wpds-custom-featured-hero-measure-outer: calc(var(--wp--style--global--wide-size, 1340px) + 2 * var(--wp--style--root--padding-left, 50px));
}
.wpds-custom-featured-hero .wpds-custom-featured-hero__inner { width: 100% !important; box-sizing: border-box; }
body .fm-ordering { padding-block: var(--fm-section); margin-block: 0; }

/* Header: full lockup at the top, % mark on plum once the page scrolls. */
/* The template-part wrapper is what sticks; the group inside only styles. */
.wp-block-template-part:has(> .fm-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
.fm-header { transition: padding .2s ease, background-color .2s ease, box-shadow .2s ease; }
.fm-brand .wp-block-image { margin: 0; }
.fm-brand img, .fm-footer .fm-brand__lockup img { border-radius: 0 !important; display: block; height: auto; }
.fm-brand__mark, .fm-brand__lockup-reversed { display: none; }
.fm-header .fm-nav a { text-decoration: none; }
.fm-header .fm-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
body.fm-is-scrolled .fm-header {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	background-color: var(--wp--preset--color--theme-3) !important;
	box-shadow: 0 6px 24px rgba(24, 7, 16, .12);
}
body.fm-is-scrolled .fm-header .fm-brand__lockup { display: none; }
body.fm-is-scrolled .fm-header .fm-brand__mark { display: block; }
body.fm-is-scrolled .fm-header :is(.wp-block-navigation, .wp-block-navigation a, .wc-block-mini-cart__button, .wp-block-navigation__responsive-container-open) {
	color: var(--wp--preset--color--oat);
}
body.fm-is-scrolled .fm-header .wp-block-navigation__responsive-container.is-menu-open,
body.fm-is-scrolled .fm-header .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--theme-2); }
@media (prefers-reduced-motion: reduce) { .fm-header { transition: none; } }
/* Below 600px the admin bar scrolls away, so the header must stick to the very top. */
@media (max-width: 600px) { .wp-block-template-part:has(> .fm-header) { top: 0; } }
@media (max-width: 600px) { body.admin-bar.fm-has-overlay:not(.fm-is-scrolled) .wp-block-template-part:has(> .fm-header) { top: 46px; } }

/* Overlay header: transparent over the opening band, then the fixed Plum bar. */
body.fm-has-overlay .wp-block-template-part:has(> .fm-header) { position: fixed; left: 0; right: 0; }
body.fm-has-overlay:not(.fm-is-scrolled) .fm-header { background-color: transparent !important; box-shadow: none; }
body.fm-has-overlay:not(.fm-is-scrolled) .fm-header .fm-brand__lockup { display: none; }
body.fm-has-overlay:not(.fm-is-scrolled) .fm-header .fm-brand__lockup-reversed { display: block; }
body.fm-has-overlay:not(.fm-is-scrolled) .fm-header :is(.wp-block-navigation, .wp-block-navigation a, .wc-block-mini-cart__button, .wp-block-navigation__responsive-container-open) { color: var(--wp--preset--color--oat); }
body.fm-has-overlay .fm-header .wp-block-navigation__responsive-container.is-menu-open,
body.fm-has-overlay .fm-header .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--theme-2); }
body.fm-has-overlay .wp-site-blocks > main > .wpds-custom-featured-hero:first-child,
body.fm-has-overlay .wp-site-blocks > .wpds-custom-featured-hero { padding-top: calc(var(--fm-section) + var(--fm-header-h, 86px)) !important; }
@media (max-width: 781px) { :root { --fm-header-h: 76px; } }
.fm-brand__lockup-reversed img { border-radius: 0 !important; display: block; height: auto; }

/* Footer */
.fm-footer a { text-underline-offset: 3px; }

/* Hero band: Fraunces headline, butter primary, outline secondaries. */
.wpds-custom-featured-hero h1 { font-family: var(--wp--preset--font-family--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; }
.frozenmeat-hero__secondary .wp-block-button__link { border-color: var(--wp--preset--color--oat); }
.frozenmeat-hero__secondary .wp-block-button__link:hover { background: rgba(244, 236, 223, .12); color: var(--wp--preset--color--oat); }
.frozenmeat-hero__primary .wp-block-button__link:hover { background: var(--wp--preset--color--theme-1); color: var(--wp--preset--color--theme-3); }

/* Post head: the title card band (wpds-custom/featured-hero over brand % tiles). */
.fm-posthead-eyebrow, .fm-posthead-eyebrow a { color: var(--wp--preset--color--petal) !important; text-decoration: none; }
.fm-posthead-title { font-family: var(--wp--preset--font-family--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--wp--preset--color--oat); margin-block: 12px 16px; }
.fm-posthead-date { color: rgba(244, 236, 223, .8); }
.fm-post-lede { max-width: 760px; margin-inline: auto; color: var(--wp--preset--color--theme-4); }

/* Title-card featured images: a hairline so Blush and Butter cards hold their edge on tinted bands. */
.wp-block-post-featured-image img { box-shadow: 0 0 0 1px rgba(24, 7, 16, .08); border-radius: 16px; }

/* Automatic title card: drawn by functions.php when a post has no featured image. */
.fm-title-card { container-type: inline-size; position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px rgba(24, 7, 16, .08); margin: 0; }
.fm-title-card a { position: absolute; inset: 0; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 8cqi 8.5cqi; text-decoration: none; color: inherit; }
.fm-title-card__eyebrow, .fm-title-card__site { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: max(11px, 2cqi); letter-spacing: .14em; text-transform: uppercase; }
.fm-title-card__site { font-weight: 500; letter-spacing: 0; text-transform: none; }
.fm-title-card__title { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 6.4cqi; line-height: 1.05; letter-spacing: -.02em; max-width: 82%; }
.wp-block-post-featured-image .fm-title-card__mark { position: absolute; top: 7.5cqi; right: 7.5cqi; width: 16cqi; height: auto; box-shadow: none; border-radius: 0; }
.fm-title-card--recipes { background: var(--wp--preset--color--theme-3); color: var(--wp--preset--color--oat); }
.fm-title-card--recipes :is(.fm-title-card__eyebrow, .fm-title-card__site) { color: var(--wp--preset--color--petal); }
.fm-title-card--buying-guides { background: var(--wp--preset--color--butter); color: var(--wp--preset--color--theme-3); }
.fm-title-card--how-to, .fm-title-card--default { background: var(--wp--preset--color--theme-5); color: var(--wp--preset--color--theme-2); }
.fm-title-card--how-to :is(.fm-title-card__eyebrow, .fm-title-card__site), .fm-title-card--default :is(.fm-title-card__eyebrow, .fm-title-card__site) { color: var(--wp--preset--color--theme-3); }

/* Category cards */
.fm-category-grid h3 a { text-decoration: none; color: var(--wp--preset--color--theme-2); }
.fm-category-grid h3 a:hover { color: var(--wp--preset--color--theme-3); text-decoration: underline; }
.fm-category-grid .wp-block-image img { transition: transform .25s ease; }
.fm-category-grid .wp-block-image a:hover img { transform: scale(1.03); }
.fm-category-grid .wp-block-image { overflow: hidden; border-radius: 16px; }

/* FrozenMeat Ordering block: map its tokens to the brand without editing the plugin. */
body .fm-ordering {
	--fm-ink: #180710;
	--fm-muted: #5A4F56;
	--fm-border: #E4D6CC;
	--fm-accent: #701356;
}
.fm-ordering :is(h2, h3) { font-family: var(--wp--preset--font-family--display); font-weight: 600; letter-spacing: -0.02em; }
.fm-ordering .fm-eyebrow { color: var(--wp--preset--color--theme-3); }
.fm-ordering .fm-preview { border-color: var(--wp--preset--color--petal); background: var(--wp--preset--color--theme-5); }
.fm-ordering .fm-panel { background: var(--wp--preset--color--theme-1); border-radius: 20px; }
/* The basket card sticks below the fixed header bar, not under it. */
.fm-ordering .fm-summary { top: calc(var(--wp-admin--admin-bar--height, 0px) + 80px); }
.fm-ordering :is(.fm-primary, .fm-add-button) { border-radius: 999px; }
.fm-ordering .fm-filters button[aria-pressed="true"] { background: var(--wp--preset--color--theme-3); border-color: var(--wp--preset--color--theme-3); }
.fm-ordering :is(button, a, input):focus-visible { outline-color: var(--wp--preset--color--pink); }

/* Post callouts saved with the old orange accent inline: restyle without touching post content. */
.fm-post-opening-callout, .fm-post-cta {
	border-left-color: var(--wp--preset--color--pink) !important;
	border-radius: 0 16px 16px 0;
}
.fm-post-opening-callout { background-color: var(--wp--preset--color--theme-5) !important; }
.fm-post-cta { background-color: var(--wp--preset--color--theme-1) !important; border-top-color: var(--wp--preset--color--theme-6) !important; border-right-color: var(--wp--preset--color--theme-6) !important; border-bottom-color: var(--wp--preset--color--theme-6) !important; }

/* WooCommerce surfaces */
.wc-block-components-button:not(.is-link), .wp-block-button__link { border-radius: 999px; }
.wc-block-components-notice-banner.is-info { border-color: var(--wp--preset--color--petal); background: var(--wp--preset--color--theme-5); }

/* Only responsive descendant rules not exposed by core block supports. */
@media (max-width: 781px) {
	.fm-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.fm-guide-grid { grid-template-columns: 1fr; }
	.fm-hero-title { font-size: 2.65rem !important; }
	input, select, textarea { font-size: 16px; }
	.fm-brand__lockup img { width: 156px !important; }
	.fm-footer > .alignwide { gap: 28px; }
}
@media (min-width: 782px) and (max-width: 1100px) {
	.fm-category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Supplier-owned FAQs follow the catalogue using the shared section rhythm. */
.fm-supplier-faq { padding-block: 0 var(--fm-section); }
.fm-supplier-faq > h2 { margin-block: 0 var(--fm-section-sm); }
.fm-supplier-faq > details { border-block-start: 1px solid currentColor; padding-block: 1rem; margin-block: 0; overflow-wrap: anywhere; }
.fm-supplier-faq summary { cursor: pointer; font-weight: 600; }
.fm-supplier-faq details p { max-width: 72ch; }

/* FAQs: a plus on the right of every question, turning to a cross when open. */
details.wp-block-details > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; }
details.wp-block-details > summary::-webkit-details-marker { display:none; }
details.wp-block-details > summary::marker { content:""; }
details.wp-block-details > summary::after { content:"+"; flex:none; display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:50%; font-family:var(--wp--preset--font-family--body,inherit); font-size:1.35rem; font-weight:400; line-height:1; color:var(--wp--preset--color--theme-3); transition:transform .2s ease; }
details.wp-block-details[open] > summary::after { transform:rotate(45deg); }
@media (prefers-reduced-motion:reduce) { details.wp-block-details > summary::after { transition:none; } }

/* Shop directory: two routes, then a wall of supplier and brand tiles.
   Logos appear only with recorded permission; otherwise the name is set as a wordmark. */
.fm-directory .fm-eyebrow { font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: .12em; color: var(--wp--preset--color--theme-3); margin: 0; }
.fm-directory__title { margin-block: .25rem var(--fm-section-sm); }
.fm-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); margin-bottom: var(--fm-section); }
.fm-route { border-top: 2px solid var(--wp--preset--color--theme-3); padding-top: 1rem; }
.fm-route h3 { margin: .75rem 0 .5rem; font-size: var(--wp--preset--font-size--large); }
.fm-route p { margin: 0; max-width: 52ch; }
.fm-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.2; white-space: nowrap; }
.fm-badge--order { background: var(--wp--preset--color--theme-3); color: var(--wp--preset--color--butter); }
.fm-badge--retailer { background: var(--wp--preset--color--butter); color: var(--wp--preset--color--theme-2); box-shadow: inset 0 0 0 1px #e7d98c; }
.fm-badge--muted { background: transparent; color: var(--wp--preset--color--theme-4); box-shadow: inset 0 0 0 1px var(--wp--preset--color--theme-6); }
.fm-wall + .fm-wall { margin-top: var(--fm-section); }
.fm-wall__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--large); }
.fm-wall__count { font-family: var(--wp--preset--font-family--body); font-size: 13px; font-weight: 600; color: var(--wp--preset--color--theme-4); }
.fm-wall__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.fm-tile { margin: 0; }
.fm-tile__link { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: var(--wp--preset--color--theme-1); border: 1px solid var(--wp--preset--color--theme-6); color: var(--wp--preset--color--theme-2); text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.fm-tile__link:hover { border-color: var(--wp--preset--color--theme-3); transform: translateY(-2px); box-shadow: 0 8px 24px #70135614; }
.fm-tile__link:focus-visible { outline: 3px solid var(--wp--preset--color--theme-3); outline-offset: 3px; }
.fm-tile__logo { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--wp--preset--color--oat); overflow: hidden; margin-bottom: 4px; }
.fm-tile--supplier .fm-tile__logo { background: var(--wp--preset--color--theme-5); }
.fm-tile__logo-img { max-width: 72%; max-height: 64%; width: auto; height: auto; object-fit: contain; }
.fm-tile__wordmark { padding: 0 12px; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1; letter-spacing: -.02em; text-align: center; color: var(--wp--preset--color--theme-3); }
.fm-tile__name { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.fm-tile__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-tile__note { font-size: 13px; line-height: 1.4; color: var(--wp--preset--color--theme-4); margin-top: auto; }
.fm-brand-site { margin: 0 0 1rem; }
@media (max-width: 781px) {
	.fm-routes { grid-template-columns: 1fr; }
	.fm-wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.fm-tile__link { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .fm-tile__link { transition: none; } .fm-tile__link:hover { transform: none; } }

/* Brand pages: same opening band as suppliers, then retailer listings as cards. */
.fm-brand-intro { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-bottom: var(--wp--preset--spacing--50); margin-bottom: var(--wp--preset--spacing--50); border-bottom: 1px solid var(--wp--preset--color--theme-6); }
.fm-brand-intro p { margin: 0; max-width: 68ch; font-size: 15px; }
.fm-brand-intro__logo { max-height: 56px; width: auto; }
.fm-brand-site a { font-weight: 600; }
.fm-brand-section + .fm-brand-section { margin-top: var(--fm-section); }
.fm-brand-section .fm-section-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--large); }
.fm-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.fm-brand-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: var(--wp--preset--color--theme-1); border: 1px solid var(--wp--preset--color--theme-6); }
.fm-brand-card__image { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--wp--preset--color--oat); }
.fm-brand-card__image img { width: 100%; height: 100%; object-fit: cover; }
.fm-brand-card__noimg { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.4rem; color: var(--wp--preset--color--theme-3); padding: 0 12px; text-align: center; }
.fm-brand-card__title { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 1rem; line-height: 1.35; font-weight: 700; }
.fm-brand-card__title a { color: inherit; text-decoration: none; }
.fm-brand-card__title a:hover { text-decoration: underline; }
.fm-brand-card__price { margin: 0; font-size: 14px; color: var(--wp--preset--color--theme-4); }
.fm-brand-card__buy { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fm-brand-card__buy .wp-element-button { padding: 10px 16px; font-size: 14px; }
.fm-brand-empty { max-width: 60ch; padding: var(--wp--preset--spacing--50); border: 1px dashed var(--wp--preset--color--theme-6); border-radius: 16px; }
.fm-brand-empty h2 { margin-top: 0; font-size: var(--wp--preset--font-size--large); }
@media (max-width: 781px) { .fm-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .fm-brand-card { padding: 10px; } }
.fm-brand-card__image { text-decoration: none; }