/*
Theme Name:   Print Panther
Theme URI:    https://printpanther.example
Author:       Print Panther
Author URI:   https://printpanther.example
Description:  A custom Full Site Editing block theme for Print Panther — structure and design tokens only. Pairs with the "Print Panther Blocks" plugin, which supplies all interactive behavior (carousels, FAQ accordion, mobile nav drawer, logo marquee, contact form).
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version:      1.0.6
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  printpanther
Requires Plugins: woocommerce
*/

/*
 * Almost all visual styling for this theme is generated by theme.json.
 * This stylesheet is reserved for the handful of static, non-interactive
 * rules that theme.json's structured settings cannot express. It must
 * never contain @keyframes, hover/focus JS-driven state classes, or any
 * behavior-coupled CSS — that belongs to the printpanther-blocks plugin.
 */

.wp-site-blocks {
	overflow-x: hidden;
}

/*
 * WordPress applies the theme's default blockGap (1.2rem) as margin-top
 * between every root-level sibling of .wp-site-blocks — including between
 * <main> and the footer template part. That's invisible on pages where the
 * last section blends into the white page background, but glaring wherever
 * it ends in a full-bleed colored section (e.g. About Us' dark contact
 * block), leaving a stray gap before the footer. The footer should always
 * sit flush against whatever precedes it, regardless of template.
 */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/*
 * The original static design resets box-sizing to border-box site-wide
 * (`* { box-sizing: border-box; }`). Without it, an element combining
 * `width:100%` with `padding` (e.g. the hero carousel image) renders wider
 * and taller than its container in the default content-box model — content-
 * box adds padding on top of the 100% width instead of inside it — which
 * clips the right/bottom padding against the parent's `overflow:hidden`.
 */
* {
	box-sizing: border-box;
}

/*
 * core/group does not declare support for "dimensions.aspectRatio" or
 * "position.type" — those styles cannot be block-attribute-driven without
 * failing editor validation, so they're plain utility classes instead.
 */
.printpanther-media-box {
	aspect-ratio: 4 / 3;
	position: relative;
	overflow: hidden;
}

.printpanther-team-photo {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.printpanther-creation-box {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #efe7da;
	width: min(320px, 74vw);
}

.printpanther-testi-card {
	width: min(400px, 84vw);
}

/*
 * Render-vs-print comparison photos: forced into a 1:1 square so every
 * card in the carousel is the same height regardless of each source
 * photo's own aspect ratio (portrait vs. landscape vs. square crops).
 */
.printpanther-rvp-img {
	aspect-ratio: 1 / 1;
	background: #000000;
	border-radius: 16px;
	overflow: hidden;
}

/*
 * Each render-vs-print carousel "card" (.printpanther-rvp-card) sits inside
 * printpanther/carousel's horizontally-scrolling track, where slides are
 * `flex: 0 0 auto` with no width of their own — so the nested side-by-side
 * columns had nothing to size against and fell back to each photo's raw
 * intrinsic pixel width (rendering ~800px+ square photos even on a phone).
 * Bounding the card's own width the same way `.printpanther-creation-box`/
 * `.printpanther-testi-card` already do elsewhere in this carousel fixes that.
 *
 * The two photo columns are also forced to stack below 600px — matching
 * `.printpanther-rvp-compare`'s own scoped media query below — since two
 * ~140px-wide comparison photos side by side aren't legible; the arrow
 * between them is rotated 90deg to point down once stacked.
 */
.printpanther-rvp-card {
	width: min(560px, 88vw);
}

@media (max-width: 600px) {
	.printpanther-rvp-compare {
		flex-wrap: wrap;
	}

	.printpanther-rvp-compare > .wp-block-column {
		flex-basis: 100% !important;
	}

	.printpanther-rvp-compare > .wp-block-column:nth-child(2) {
		transform: rotate(90deg);
	}
}

/*
 * core/image's own default CSS is `max-width:100%; height:auto`, which just
 * preserves the image's intrinsic aspect ratio — it never fills/crops to
 * match a parent aspect-ratio box. Without this, a wider-than-tall source
 * image (e.g. 800x450) leaves a visible gap of the box's background color
 * underneath it instead of a full-bleed cropped photo.
 */
.printpanther-media-box figure,
.printpanther-team-photo figure,
.printpanther-creation-box figure,
.printpanther-rvp-img figure {
	margin: 0;
	height: 100%;
}

.printpanther-media-box img,
.printpanther-team-photo img,
.printpanther-creation-box img,
.printpanther-creation-box video,
.printpanther-rvp-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Numbered badge overlaid on a .printpanther-media-box (position:relative). */
.printpanther-step-num {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: #fff;
	font-family: var(--wp--preset--font-family--bricolage-grotesque);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/*
 * core/group's "position" support only covers a sticky on/off toggle whose
 * generated markup didn't match this exact style-attribute combination in
 * testing, so sticky positioning is applied as a plain utility class.
 */
.printpanther-sticky-header {
	position: sticky;
	top: 0;
	z-index: 60;
}

/*
 * The header row's flex "space-between" only equalizes the gaps on either
 * side of the nav — it doesn't center the nav itself, since the logo (42px)
 * and the icon/cart/CTA cluster on the right are very different widths. A
 * grid with two equal outer columns guarantees the middle column (the nav)
 * sits at the row's true center regardless of that asymmetry.
 */
.printpanther-header-row {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.printpanther-header-row > .wp-block-site-logo {
	justify-self: start;
}

.printpanther-header-row > .printpanther-desktop-nav {
	justify-self: center;
}

.printpanther-header-row > .printpanther-header-actions {
	justify-self: end;
}

/*
 * Below 880px the mobile drawer (.printpanther-mobile-drawer-root, see the
 * printpanther-blocks plugin's mobile-drawer/style.scss) takes over
 * navigation — but nothing was ever hiding the desktop nav or the standalone
 * "Shop Now" button at that same breakpoint, so both kept rendering directly
 * on top of the hamburger button and each other. The drawer gets its own CTA
 * slot instead (see header.php's `ctaLabel`/`ctaUrl` attributes) so mobile
 * users don't lose the "Shop Now" call to action.
 */
@media (max-width: 880px) {
	.printpanther-desktop-nav,
	.printpanther-header-cta {
		/*
		 * `!important` needed: both are `.is-layout-flex` blocks, and core's
		 * own block-supports layout CSS sets `display: flex !important` on
		 * that class, which otherwise wins over a plain `display: none` here.
		 */
		display: none !important;
	}

	/*
	 * With the desktop nav hidden, its grid track should collapse to 0 and
	 * leave the logo/actions tracks flush against each row's true edges —
	 * but an empty "auto" track still measured out to the same width as the
	 * actions track in testing (a CSS Grid auto-track sizing quirk with a
	 * display:none item), leaving a visible gap before the hamburger button
	 * instead of true edge-to-edge spacing. Dropping to a plain two-item flex
	 * row sidesteps that entirely: logo at the true start, actions at the
	 * true end.
	 */
	.printpanther-header-row {
		display: flex !important;
		justify-content: space-between;
	}
}

/*
 * The Instagram icon animates on hover for free because core/social-links
 * ships its own `transform: scale(1.1)` hover rule (wp-includes/blocks/
 * social-links/style.css). The account and mini-cart icons are WooCommerce
 * blocks with no equivalent — mirroring the same rule/timing here so all
 * three header icons feel consistent instead of adding a different effect.
 */
@media not (prefers-reduced-motion) {
	.wc-block-customer-account__link,
	.wc-block-mini-cart__button {
		transition: transform 0.1s ease;
	}
}

.wc-block-customer-account__link:hover,
.wc-block-mini-cart__button:hover {
	transform: scale(1.1);
}

/*
 * "overflow" isn't part of any core/group block support (border/color/
 * spacing/shadow), so it can't be block-attribute-driven without failing
 * editor validation. Cards containing a full-bleed image need this to clip
 * the image's square corners to the card's own rounded border.
 *
 * core/columns already stretches every column to the row's tallest column
 * (flex default), but a card with shorter text was still only as tall as
 * its own content, leaving the column's extra height empty below it. Making
 * the card `height:100%` fills that stretched column, and turning it into a
 * flex column lets the text block (the last child) grow to absorb the
 * leftover space while the image (fixed aspect-ratio) keeps its own size.
 */
.printpanther-card-clip {
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.printpanther-card-clip > .printpanther-media-box,
.printpanther-card-clip > .printpanther-team-photo {
	flex-shrink: 0;
}

.printpanther-card-clip > *:last-child {
	flex: 1;
}

/*
 * theme.json's per-block "css" property (used for the button's hover
 * transform and the outline variant's hover fill) is silently dropped on
 * normal front-end page loads: WP_Theme_JSON::get_stylesheet() only emits
 * the "custom-css" category when a caller explicitly requests it, which
 * front-end rendering doesn't. These are plain declarative :hover rules
 * (no JS), so they belong here instead.
 */
.wp-block-button__link {
	transition: transform 0.18s, background-color 0.18s;
}

.wp-block-button__link:hover {
	transform: translateY(-3px);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--dark-2);
}

/*
 * Product grid cards: the reference design makes the Add to Cart button
 * fill the card (`.btn-block`) while explicitly stripping its shadow and
 * hover-lift (`.product-body .btn.btn-primary` resets them) — the whole
 * card lifts on hover instead (`.product:hover`).
 */
.printpanther-product-card {
	transition: transform 0.2s;
}

.printpanther-product-card:hover {
	transform: translateY(-5px);
}

/*
 * WooCommerce's AJAX Add to Cart button (`woocommerce/product-button`) is
 * used both inside product grid cards (archive/shop pages and related
 * products) and directly on the single-product hero — same block, so the
 * "flat, no hover-lift" rules below apply everywhere it appears. Full-width
 * stretch is scoped to the card context only (`.printpanther-product-card`):
 * grid cards want the button to fill the card, but on the hero it should
 * stay a natural content-sized button — WooCommerce's own default
 * (`align-items:center`) is left alone there.
 */
.printpanther-product-card .wp-block-button.wc-block-components-product-button {
	align-items: stretch;
}

.wc-block-components-product-button .wp-block-button__link {
	box-shadow: none;
	transition: none;
}

.wc-block-components-product-button .wp-block-button__link:hover {
	transform: none;
}

/*
 * WooCommerce's AJAX Add to Cart button reveals a "View cart" link below
 * itself after adding, wrapped in a <span> toggled via the Interactivity
 * API's `data-wp-bind--hidden` (not a class we can just avoid rendering).
 * The button's wrapper is a flex column with `gap:12px` between items, so
 * hiding only the inner <a> still left that <span> as a visible flex item
 * reserving the gap — the span itself has to be hidden for the gap to
 * collapse too. It has no class of its own, so target it as the button's
 * next sibling instead.
 */
.wc-block-components-product-button__button + span {
	display: none !important;
}

/*
 * Team card social links: the reference design uses a plain "in" text glyph
 * (not an SVG logo) colored LinkedIn-blue, and a 38x38 soft-rounded-square
 * button (border-radius 10px) — not core/social-links' circular/pill icon
 * buttons, so this is hand-authored markup + CSS instead of that block.
 */
.printpanther-team-social {
	display: flex;
	gap: 10px;
}

.printpanther-team-social a {
	display: inline-flex;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1px solid var(--wp--custom--color--border);
	font-weight: 800;
	font-size: 13px;
}

.printpanther-team-social a.printpanther-li {
	color: #0a66c2;
}

/*
 * Contact form (About Us "Get in Touch"): matching the reference design's
 * `.contact form`/`.contact input,textarea`/`.btn-secondary` rules exactly.
 * WPForms' own field/button sizing presets don't hit these exact values
 * (padding, gap, button style), and it exposes no hover-color attribute at
 * all, so those need explicit overrides here rather than block attributes.
 */

/*
 * WPForms generates a per-instance `<style id="wpforms-css-vars-85-...">`
 * tag from this block's color attributes (fieldBackgroundColor,
 * buttonBackgroundColor, etc. — see contact-form-about.php). On the front
 * end that tag carries both the size AND color custom properties; inside
 * the Site Editor's ServerSideRender preview it only ever contains the size
 * ones, so the color variables silently fall back to WPForms' plain white/
 * blue defaults there. This restates the same values as a fallback so the
 * editor preview matches — harmless on the front end, where the real
 * variables (identical values) already win.
 */
#wpforms-85.wpforms-block-contact-us-about-form {
	--wpforms-field-background-color: #212122;
	--wpforms-field-text-color: #ffffff;
	--wpforms-field-border-color: #9a9a9a45;
	--wpforms-field-border-color-spare: #9a9a9a45;
	--wpforms-field-border-radius: 12px;
	--wpforms-label-color: #ffffff;
	--wpforms-label-sublabel-color: #9a9088;
	--wpforms-button-background-color: #066aab;
	--wpforms-button-border-radius: 999px;
	--wpforms-button-border-style: solid;
	--wpforms-button-border-color: #9a9a9a45;
	--wpforms-button-background-color-alt: transparent;
}

.wpforms-container form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 34px;
}

.wpforms-container input[type='text'],
.wpforms-container input[type='email'],
.wpforms-container input[type='tel'],
.wpforms-container textarea {
	padding: 15px 18px !important;
	max-width: 100% !important;
	width: 100% !important;
}

.wpforms-container .wpforms-submit-container {
	margin-top: 0 !important;
}

.wpforms-container .wpforms-submit {
	font-weight: 700 !important;
	padding: 16px 40px !important;
	height: auto !important;
	line-height: normal !important;
	align-self: flex-start;
}

.wpforms-container .wpforms-submit:hover {
	background-color: #212122 !important;
}

/*
 * The reference design has no visible field labels at all — each input
 * communicates its purpose purely through placeholder text (e.g. "Email *"
 * is literally the placeholder string, not a real required-field marker).
 * WPForms always renders a persistent label above the field, so it's hidden
 * here and placeholder text set on each field instead (see form 85's field
 * data) to match that minimal look.
 *
 * `!important` is required: WPForms' own modern-theme CSS ships the exact
 * same-specificity selector `.wpforms-container .wpforms-field-label{display:
 * block}`, and being loaded after this stylesheet it was winning the tie —
 * labels were rendering visible on the front end despite this rule.
 */
.wpforms-container .wpforms-field-label {
	display: none !important;
}

/*
 * WooCommerce's "Add to cart" button on the single-product page renders with
 * its own `.button.alt` markup instead of `.wp-block-button__link`, so it
 * never picks up theme.json's core/button styling (black pill, shadow,
 * hover-lift) — it was falling back to WooCommerce's default gray, square,
 * shadow-less button. These rules replicate the primary button style here.
 */
.single_add_to_cart_button.button {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 999px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
	padding: 16px 30px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	transition: transform 0.18s, background-color 0.18s;
}

.single_add_to_cart_button.button:hover {
	background-color: var(--wp--preset--color--contrast);
	transform: translateY(-3px);
}

/*
 * WooCommerce's own block CSS ships a `.wp-block-woocommerce-product-
 * collection h2.wp-block-heading{font-size:var(--wp--preset--font-size--
 * small,14px)}` rule — presumably meant for compact headings inside small
 * default product carousels — that's more specific than our theme.json h2
 * default and silently shrinks any heading placed inside a product
 * collection (e.g. "Related products" / "You may also like" on the single
 * product page) down to 14px, smaller than body text.
 */
.wp-block-woocommerce-product-collection h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--xx-large);
}

/*
 * WooCommerce's default Additional Information table centers its attribute
 * labels ("Weight", "Dimensions", "Material"...) — left-align them with
 * some breathing room instead, matching the rest of the site's tables/lists.
 */
.woocommerce table.shop_attributes th.woocommerce-product-attributes-item__label {
	text-align: left;
	padding-left: 16px;
}

/*
 * WooCommerce's default review-form markup has almost no vertical rhythm —
 * the "no reviews yet" notice, the "Be the first to review" title, the
 * rating stars, the review textarea, and the Submit button all sit flush
 * against each other. Add the theme's normal spacing between them.
 */
.woocommerce-noreviews {
	margin-bottom: var(--wp--preset--spacing--20);
}

#review_form_wrapper {
	margin-top: var(--wp--preset--spacing--30);
}

.comment-reply-title {
	display: block;
	margin-bottom: var(--wp--preset--spacing--30);
}

.comment-form-rating {
	margin-bottom: var(--wp--preset--spacing--30);
}

.comment-form-comment {
	margin-bottom: var(--wp--preset--spacing--30);
}

#commentform p.form-submit {
	margin-top: var(--wp--preset--spacing--20);
}

/*
 * Variation attribute pills: one shared ruleset for both our custom
 * "requires customer photo" widget's chips (`.ppb-variation-chip`, added
 * alongside its own layout/behavior classes in class-ppb-product-photo.php)
 * and WooCommerce's own default attribute selector
 * (`.wc-block-product-filter-chips__item`, part of "Add to Cart with
 * Options" — used whenever that custom widget isn't active). WooCommerce's
 * native version ships smaller, tighter padding, a darker border, and a
 * non-bold attribute-name label; listing both selectors together means one
 * declared style governs every variable product's attribute pills
 * regardless of which of the two components is rendering them.
 */
.ppb-variation-chip,
.wc-block-product-filter-chips__item {
	padding: 8px 16px;
	border: 1px solid #9a9a9a45;
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
}

.ppb-variation-chip.is-active,
.wc-block-product-filter-chips__item[aria-checked='true'] {
	background: #000;
	color: #fff;
	border-color: #000;
}

.ppb-variation-chip-label,
.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	font-weight: 700;
}

/*
 * Checkout: WooCommerce Blocks marks optional fields with an "(optional)"
 * label suffix but never marks required ones, so there's no visual way to
 * tell which fields must be filled in. Required text/textarea inputs carry
 * the native `required` attribute we can key off of; Country and State are
 * always required whenever shown (this store only sells with a state-level
 * address) but render as a custom select with no `required` attribute, so
 * they're called out explicitly instead.
 */
.wc-block-checkout__form::before {
	content: "Fields marked with * are required.";
	display: block;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
	margin-bottom: 16px;
}

.wc-block-components-text-input:has(input:required) label::after,
.wc-block-components-textarea:has(textarea:required) label::after,
.wc-block-components-address-form__country .wc-blocks-components-select__label::after,
.wc-block-components-address-form__state .wc-blocks-components-select__label::after {
	content: " *";
	color: #c0392b;
}

/*
 * Shop/category archive pagination (core/query-pagination): default markup is
 * plain unstyled text links, which reads jarring against the rest of the
 * site. Page numbers reuse the same bordered-chip look as variation/filter
 * chips (`.ppb-variation-chip`); Prev/Next reuse the site's black pill button
 * treatment, since they're the primary actions here.
 */
.wp-block-query-pagination {
	margin-top: 40px;
	gap: 10px;
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: 8px;
}

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	border-radius: 999px;
	border: 1px solid #9a9a9a45;
	background: #fff;
	font-weight: 700;
	font-size: 14px;
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s, background-color 0.18s, color 0.18s;
}

.wp-block-query-pagination .page-numbers:hover {
	transform: translateY(-3px);
}

.wp-block-query-pagination .page-numbers.current {
	background: #000;
	color: #fff;
	border-color: #000;
}

/* The current page number is a plain <span>, not a link — no hover affordance. */
.wp-block-query-pagination .page-numbers.current:hover {
	transform: none;
}

.wp-block-query-pagination .page-numbers.dots {
	border: none;
	background: none;
	min-width: auto;
}

.wp-block-query-pagination .page-numbers.dots:hover {
	transform: none;
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	border-radius: 999px;
	background: #000;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: transform 0.18s;
}

.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
	transform: translateY(-3px);
}

/*
 * WooCommerce Cart block's own CSS makes its "Proceed to Checkout" submit
 * container `position: fixed; bottom: 0` below 782px (assets/client/blocks/
 * cart.css) so it stays reachable while scrolling a long cart — but nothing
 * reserves that space in the page's normal flow, so the fixed bar permanently
 * covers whatever content ends up at the bottom (e.g. the last "You may be
 * interested in…" related-product card's price/Add to cart button). Padding
 * the page bottom by the bar's own height, at the same breakpoint, keeps the
 * last bit of content clear of it.
 */
@media (max-width: 782px) {
	body.woocommerce-cart {
		padding-bottom: 78px;
	}
}

/*
 * Shop/category product grid: WooCommerce's own Product Template CSS
 * (assets/client/blocks/woocommerce/product-template-style.css) drives the
 * "4 columns" setting via `grid-template-columns: repeat(auto-fill, minmax(
 * max(150px, 25% - .9375em), 1fr))` — an auto-fill grid with no fixed count,
 * so it simply fits as many 150px+ tracks as the viewport allows. Force a
 * single full-width column below 600px instead.
 */
@media (max-width: 600px) {
	.wc-block-product-template__responsive.columns-4 {
		grid-template-columns: 1fr;
	}
}

/*
 * Home hero (.printpanther-hero-grid): a `core/group` with `layout:{type:
 * grid, columnCount:2}` — unlike `core/columns`, WordPress never generates
 * an automatic mobile-stacking media query for grid-type group layouts, so
 * this stayed a fixed 2-column grid at every viewport width. On a phone that
 * squeezed the heading/copy/button into a ~50%-width column, forcing the
 * heading to wrap across many lines at a size meant for a full-width column.
 *
 * `!important` needed: Gutenberg emits this block's `repeat(2, minmax(0,
 * 1fr))` via an auto-generated `.wp-container-core-group-is-layout-{hash}`
 * class, same specificity as this rule and printed later in the document,
 * so it wins the cascade tie without it.
 */
@media (max-width: 680px) {
	.printpanther-hero-grid {
		grid-template-columns: 1fr !important;
	}

	/*
	 * Stacked single-column order still follows markup order (text content
	 * group, then the hero carousel) by default — flip it on mobile so the
	 * carousel leads and the text/CTA follow below it.
	 */
	.printpanther-hero-grid > *:first-child {
		order: 2;
	}

	.printpanther-hero-grid > *:last-child {
		order: 1;
	}
}

/*
 * Quick-pick buttons ("Couple Figurine — Starting at ₹6,999 →"): the label
 * and price/link are separate spans so mobile can force them onto their own
 * lines without hardcoding a line break into the copy itself. The " — "
 * separator is injected via ::after instead of typed in the markup so it can
 * be dropped cleanly once the two spans stack.
 */
.printpanther-quickpick-label::after {
	content: " — ";
}

@media (max-width: 680px) {
	.printpanther-quickpick-label,
	.printpanther-quickpick-price {
		display: block;
	}

	.printpanther-quickpick-label::after {
		content: "";
	}

	/*
	 * Once the label/price stack onto two short lines, the pill's own
	 * intrinsic width shrinks well below its full-width column — but the
	 * wrapping `wp:buttons` flex container is `justify-content:space-between`
	 * (fine for its original edge-to-edge width, meaningless for a single
	 * item), so the now-narrower pill was left hugging the column's left
	 * edge instead of sitting centered in the section.
	 *
	 * `!important` needed: `.wp-block-buttons.is-content-justification-space-
	 * between` (core block-library CSS) is two classes, out-specificing this
	 * single-class selector.
	 */
	.printpanther-quickpick-wrap {
		justify-content: center !important;
	}
}