/*
 * Ginis theme — front-end styles.
 *
 * This is the SOURCE stylesheet (readable + commented). It is enqueued by
 * inc/assets.php on the front end and added to the Site Editor via
 * add_editor_style(). It holds the CSS that theme.json's design tokens /
 * per-block styles cannot express (custom layout grids, sticky header,
 * shop rails, etc.). Design tokens, element/block defaults, and palette
 * still live in theme.json.
 *
 * PROD MINIFICATION: inc/assets.php serves assets/css/ginis.min.css when it
 * exists, otherwise this file. Locally no min exists, so this readable file
 * is served and stays live-editable. Generate the min at deploy/cutover, e.g.:
 *     npx csso assets/css/ginis.css -o assets/css/ginis.min.css
 * (any CSS minifier works — the only requirement is that the .min file is a
 * faithful minification of this one).
 *
 * Section map:
 *   0. Page layout (sticky footer)
 *   1. Header bar (logo / title / nav / utilities)
 *   2. Sticky + shrink-on-scroll header
 *   3. Footer link lists
 *   4. Product cards (shared shop + archive)
 *   5. Shop: category tabs
 *   6. Shop: filter bar
 *   7. Shop: browse-mode category rails
 *   8. Shop: live keystroke search
 *   9. WooCommerce store notice
 *  10. Carousel anti-flash
 *  11. Single product
 *  12. Cart
 *  13. Checkout (woocommerce/checkout block)
 *  14. Order confirmation ("Order received" / thank-you)
 *  15. My account (classic [woocommerce_my_account] shortcode)
 */

/* =========================================================================
   0. PAGE LAYOUT — STICKY FOOTER
   Block themes render every page as <div class="wp-site-blocks"> wrapping the
   header, <main>, and footer template parts as direct children. With short
   pages (e.g. the logged-out order-received gate, empty cart, 404) the footer
   floated mid-viewport with white space beneath it. Make the page wrapper a
   full-height flex column and let <main> absorb the slack, so the footer
   always sits at the bottom of the viewport on short pages and flows normally
   on long ones. dvh is a progressive enhancement that avoids the mobile
   browser-chrome jump; vh is the fallback.
   ========================================================================= */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* =========================================================================
   1. HEADER BAR
   The bar is a 3-column grid (1fr | auto | 1fr) so the nav stays centered on
   the page independent of the utilities' width. Below 600px it collapses to
   2 columns with the hamburger pinned left.
   ========================================================================= */

/* WooCommerce renders the customer-account icon as an unclassed <svg class="icon">,
   which its own sizing CSS (targeting .wc-block-customer-account__account-icon)
   misses — so it collapses to 0. Size it explicitly. */
.wp-block-woocommerce-customer-account .wc-block-customer-account__link .icon {
	width: 1.5em;
	height: 1.5em;
	display: block;
}

/* Don't underline/recolor the utility icons or the site title on hover. */
.ginis-header-utilities a:hover,
.ginis-header-utilities a:focus,
.wp-block-site-title a:hover,
.wp-block-site-title a:focus {
	color: inherit;
	text-decoration: none;
}

/* Site title in Amne Sans (set in theme.json). A touch of word spacing to
   open up "Gini's Crafted Beverages". */
.wp-block-site-title a {
	word-spacing: 0.3em;
}

/* Nav links DO underline on hover (in the dark contrast color) for affordance. */
.wp-block-navigation a:hover,
.wp-block-navigation a:focus {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

.ginis-header-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var(--wp--preset--spacing--30);
}

.ginis-header-bar > * {
	margin-block: 0;
}

.ginis-header-bar > .wp-block-navigation {
	grid-column: 2;
	justify-self: center;
}

.ginis-header-bar > .ginis-header-utilities {
	grid-column: 3;
	justify-self: end;
}

/* Trim the default block padding on the icon buttons so the bar isn't tall. */
.ginis-header-utilities .wc-block-customer-account__link,
.ginis-header-utilities .wc-block-mini-cart__button {
	padding: 0.25em;
}

/* Tighten vertical gap when the nav wraps to a second row. */
.ginis-header-bar .wp-block-navigation__container {
	row-gap: 0.25rem;
}

@media (max-width: 600px) {
	.ginis-header-bar {
		grid-template-columns: auto 1fr;
	}
	.ginis-header-bar > .wp-block-navigation {
		grid-column: 1;
		justify-self: start;
	}
	.ginis-header-bar > .ginis-header-utilities {
		grid-column: 2;
		justify-self: end;
	}
}

/* Mobile nav overlay (hamburger). Core's "overlayMenu":"mobile" mode
   renders an unstyled-looking full-screen modal: links left-aligned at
   the top, no breathing room, close button tucked into the corner. The
   rules below give it a centered vertical stack of large tap targets,
   strip the global underline, and place the close button consistently.
   Only applies while the overlay is open (is-menu-open). */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

/* The inner dialog wraps everything; let it grow to fill the overlay. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	width: 100%;
	max-width: 28rem;
	margin-inline: auto;
}

/* Close (X) button — pin top-right of the overlay, generous tap target. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	padding: 0.5rem;
}

/* Link list — vertical stack, centered, big gap. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

/* Each link — big tap target, no underline by default, bolder weight. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.5rem;
	font-weight: 600;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	text-decoration: underline;
}

/* Current page — underlined so the user can see where they are. */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* =========================================================================
   2. STICKY + SCROLL-LINKED SHRINK HEADER
   The header is position:sticky, so it stays IN normal flow — it reserves its
   own real height from first paint (no body-padding hack, no JS-measured
   reserve, and therefore no load-time layout shift) while still pinning to the
   top as you scroll.

   assets/js/sticky-header.js sets --ginis-shrink on it straight from the scroll
   position (0 = full, 1 = fully condensed), so the shrink tracks the scrollbar
   1:1 — scroll a little, shrink a little. There is deliberately NO time-based
   transition here: a transition would lag behind the scroll and reintroduce the
   "snap" feel. Every property below is interpolated from that single variable
   via calc(). --ginis-shrink defaults to 0 so the header is full-size before the
   JS runs (or if it fails). Reduced-motion is honored in the JS (it pins
   --ginis-shrink at 0, so the header never shrinks).
   ========================================================================= */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--primary);
	--ginis-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, calc(0.08 * var(--ginis-shrink)));
}

/* The sticky header shrinks its in-flow height as you scroll, which changes
   layout above the viewport. The browser's scroll anchoring then "corrects"
   the scroll position to compensate, which manifests as scrolling that stalls
   and then jumps to a different spot. Opt the page out of scroll anchoring so
   the condense stays smooth and purely scroll-linked. */
body {
	overflow-anchor: none;
}

/* Row 1 padding eases from its full value down to a tight 0.5rem. */
header.wp-block-template-part .ginis-header-row-1 {
	padding-top: calc(var(--wp--preset--spacing--20) * (1 - var(--ginis-shrink)) + 0.5rem * var(--ginis-shrink)) !important;
	padding-bottom: calc(var(--wp--preset--spacing--20) * (1 - var(--ginis-shrink)) + 0.5rem * var(--ginis-shrink)) !important;
}

/* Logo shrinks to zero width and fades out as you scroll. */
header.wp-block-template-part .ginis-logo {
	overflow: hidden;
}

header.wp-block-template-part .ginis-logo img {
	width: calc(88px * (1 - var(--ginis-shrink))) !important;
	height: calc(88px * (1 - var(--ginis-shrink))) !important;
	opacity: calc(1 - var(--ginis-shrink));
}

/* Mobile only: site title eases from its full clamp() size down to 1.4rem
   at fully shrunk, just small enough that "Gini's Crafted Beverages"
   (split-font; descriptor already scaled to 0.8em via the
   .wp-block-site-title a rule in section 1) coalesces to one line.
   At desktop widths there's plenty of horizontal room — no shrink
   needed, and the original clamp() size carries through. */
@media (max-width: 600px) {
	header.wp-block-template-part .wp-block-site-title {
		font-size: calc(clamp(2rem, 4vw, 3.25rem) * (1 - var(--ginis-shrink)) + 1.4rem * var(--ginis-shrink)) !important;
	}
}

/* =========================================================================
   3. FOOTER LINK LISTS
   core/list rendered with the is-style-no-bullets style (footer columns):
   no markers, no padding, no underline until hover.
   ========================================================================= */
.wp-block-list.is-style-no-bullets {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.wp-block-list.is-style-no-bullets li {
	margin-block: 0.25rem;
}

.wp-block-list.is-style-no-bullets a {
	text-decoration: none;
}

.wp-block-list.is-style-no-bullets a:hover,
.wp-block-list.is-style-no-bullets a:focus {
	text-decoration: underline;
}

/* =========================================================================
   4. PRODUCT CARDS (shared: shop archive + search grid + browse rails)
   ========================================================================= */
.wc-block-product-template li.product {
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border-radius: 8px;
	padding: 0.5rem;
}

.wc-block-product-template li.product:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.wc-block-product-template li.product .wc-block-components-product-image {
	overflow: hidden;
	border-radius: 6px;
}

.wc-block-product-template li.product .wc-block-components-product-image img {
	transition: transform 0.3s ease;
}

.wc-block-product-template li.product:hover .wc-block-components-product-image img {
	transform: scale(1.03);
}

/* Push the add-to-cart button to the bottom so cards of unequal height align. */
.wc-block-product-template li.product > .wc-block-components-product-button {
	margin-top: auto;
}

/* Hidden by the live-search filter (section 8). */
.wc-block-product-template li.product[hidden] {
	display: none;
}

/* Hide Woo's post-add "View cart" link (ProductButton::get_view_cart_html() —
   a <span data-wp-bind--hidden> shown via Interactivity after add-to-cart).
   We rely on the header mini-cart for that affordance, so it's suppressed to
   keep the card footprint stable. */
.wc-block-product-template li.product .wp-element-button + span[data-wp-bind--hidden] {
	display: none !important;
}

/* Struck-out "regular" price → gray. With Subscribe & Save, the price reads
   "$32.00 — or $32.00 $30.40 every 6 weeks"; the middle (struck) $32.00 is the
   old price, not the subscription price. Greying it makes that unambiguous.
   Targets the block price (product cards + single-product, same class) and
   classic `.price` markup (cart). The <del> color cascades to its amount span. */
.wc-block-components-product-price del,
.price del {
	color: rgba(0, 0, 0, 0.6); /* ~5.7:1 on white — passes WCAG AA for text */
}

/* =========================================================================
   5. SHOP: CATEGORY TABS (server-rendered anchors, not a Woo filter block)
   ========================================================================= */
.ginis-cat-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
}

.ginis-cat-tabs__tab {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
	font-size: var(--wp--preset--font-size--medium);
}

.ginis-cat-tabs__tab:hover,
.ginis-cat-tabs__tab:focus {
	text-decoration: none;
	border-bottom-color: rgba(0, 0, 0, 0.2);
}

.ginis-cat-tabs__tab.is-active {
	border-bottom-color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* =========================================================================
   6. SHOP: FILTER BAR (tag chips left, sort right)
   ========================================================================= */
.ginis-shop-filters__row {
	gap: 1.5rem;
	row-gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
}

.ginis-shop-filters__tags {
	flex: 1 1 auto;
	min-width: 0;
}

.ginis-shop-filters__controls {
	gap: 1rem;
	flex: 0 0 auto;
	margin-left: auto;
}

/* "Sort by" label + <select>: WooCommerce ships them inline, which baseline-
   aligns the label to the taller select and sinks it below center. Lay the form
   out as a centered flex row so the label lines up with its select. */
.ginis-shop-filters__controls .woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0; /* WooCommerce ships .75rem vertical padding here — drop it. */
}

.ginis-shop-filters__controls .woocommerce-ordering label {
	margin: 0;
}

/* Active tag chip uses the brand primary. */
.wc-block-product-filter-chips__item[aria-checked="true"] {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

/* "Filter products" overlay button (mobile breakpoint where Woo collapses
   the filter bar). Woo ships an unstyled icon + label; this gives it a
   defined weight, vertical centering, and a clear icon-label gap. */
.wc-block-product-filters__open-overlay {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 1rem;
	padding: 0.4rem 0;
}

.wc-block-product-filters__open-overlay > svg {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
}

/* Mobile filter overlay. WooCommerce reuses the SAME inner row for the desktop
   bar and the mobile dialog, so our horizontal desktop layout (space-between
   row, right-pushed controls via margin-left:auto, right-aligned sort) leaks
   into the vertical overlay and reads as broken (sort stranded at the right
   with dead space). WooCommerce flips to its overlay below 601px, and at that
   width the filter content ONLY appears inside the opened dialog, so a plain
   max-width query is the hook (no dependency on the JS-toggled
   `is-overlay-opened` class). Stack everything full-width + left-aligned with
   comfortable tap targets.

   !important here is deliberate: WordPress's generated per-block layout styles
   (.wp-container-…) and WooCommerce's overlay CSS both set flex direction /
   alignment / margins on these same nodes, and their inline-in-head ordering
   makes a plain selector unreliable to win. */
@media (max-width: 600px) {
	.wc-block-product-filters .ginis-shop-filters__row,
	.wc-block-product-filters .ginis-shop-filters__controls {
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		margin-left: 0 !important;
		gap: 1.25rem !important;
	}

	.wc-block-product-filters .ginis-shop-filters__controls .woocommerce-ordering {
		justify-content: flex-start !important;
		width: 100%;
	}

	/* Bigger Close button in the overlay header — easy to find and tap. */
	.wc-block-product-filters .wc-block-product-filters__close-overlay {
		font-size: 1.125rem;
		min-height: 44px;
		gap: 0.4rem;
	}
	.wc-block-product-filters .wc-block-product-filters__close-overlay svg {
		width: 1.5em;
		height: 1.5em;
	}

	/* Tap target: WCAG-comfortable ~44px sort control so it's easy to hit on a
	   phone. */
	.wc-block-product-filters .woocommerce-ordering select {
		min-height: 44px;
	}

	/* Chips: WooCommerce chips are content-width pills (they won't fill the row),
	   but make their container span the full width and the pills themselves a
	   comfortable tap size. */
	.wc-block-product-filters .ginis-shop-filters__tags {
		width: 100%;
	}
	.wc-block-product-filters .wc-block-product-filter-chips__item {
		padding: 0.55rem 0.9rem;
		font-size: 1rem;
	}
}

/* =========================================================================
   7. SHOP: BROWSE-MODE CATEGORY RAILS (horizontal scroll rows)
   Sections are always server-rendered for stable Woo Interactivity regions;
   empty ones (no collection, or every card hidden) collapse via :has().
   ========================================================================= */
/* Right-align the "See all" link in the section heading row. With
   flex-wrap:wrap on the row, if the H2 wraps and pushes "See all" onto
   its own line, justify-content:space-between defaults the lone item to
   the start; margin-left:auto pins it right in either layout. Selector
   scoped through .ginis-shop-section to beat WP's `body .is-layout-flex
   > *{margin:0}` reset (specificity 0,1,1). */
.ginis-shop-section .ginis-shop-section__see-all {
	margin-left: auto;
}

.ginis-shop-section:not(:has(.wp-block-woocommerce-product-collection)) {
	display: none;
}

.ginis-shop-section:not(:has(.wc-block-product-template > li.product:not([hidden]))) {
	display: none;
}

/* Browse view caps each rail to its first 6 cards. The rail actually renders
   the whole category (perPage:100 — see patterns/shop-listing.php) so the live
   search can match any product, but in normal browsing the overflow stays
   display:none (and its lazy images never load). shop-search.js adds
   .is-searching to a section while a query is active, which lifts the cap so
   matches beyond the 6th can show; the per-card title filter then hides the
   non-matches. nth-child counts all cards (the title filter uses [hidden],
   which this rule doesn't key off, so the two don't fight). */
.ginis-shop-section:not(.is-searching) .ginis-shop-section__rail li.product:nth-child(n+7) {
	display: none;
}

.ginis-shop-section__rail .wc-block-product-template {
	/* position:relative makes this scroller the containing block for its
	   absolutely-positioned descendants — notably the .screen-reader-text
	   spans WooCommerce emits inside the price/subscription markup. Without
	   it those spans resolve to the initial containing block, sit at their
	   static position deep in the scrolled-out (off-screen-right) part of the
	   row, and ESCAPE this overflow-x clip — extending the document scroll
	   width to ~1257px. On mobile that blows the page out horizontally and
	   trips the filter overlay into its wide (>=601px) inline layout, leaking
	   the filter chips into normal flow. Relative-positioning pulls them back
	   under this clip. */
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
	-webkit-overflow-scrolling: touch;
}

.ginis-shop-section__rail .wc-block-product-template::-webkit-scrollbar {
	height: 6px;
}

.ginis-shop-section__rail .wc-block-product-template::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 3px;
}

.ginis-shop-section__rail .wc-block-product-template li.product {
	flex: 0 0 180px;
	scroll-snap-align: start;
	margin: 0;
}

.ginis-shop-section__rail .wc-block-product-template li.product .wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

@media (min-width: 768px) {
	.ginis-shop-section__rail .wc-block-product-template li.product {
		flex-basis: 220px;
	}
}

/* =========================================================================
   8. SHOP: LIVE KEYSTROKE SEARCH (assets/js/shop-search.js)
   ========================================================================= */
.ginis-shop-no-matches[hidden] {
	display: none;
}

.ginis-shop-search {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	padding: 0.3rem 0.6rem;
	max-width: 260px;
	width: 100%;
}

.ginis-shop-search.ginis-shop-search--full {
	max-width: none;
	display: flex;
	box-sizing: border-box;
}

.ginis-shop-search:focus-within {
	border-color: var(--wp--preset--color--contrast);
}

.ginis-shop-search__icon {
	flex: 0 0 auto;
	color: rgba(0, 0, 0, 0.5);
}

.ginis-shop-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	outline: none;
	font: inherit;
	color: inherit;
	padding: 0.1rem 0;
}

.ginis-shop-search__input::placeholder {
	color: rgba(0, 0, 0, 0.4);
}

/* =========================================================================
   9. WOOCOMMERCE STORE NOTICE (demo-store banner pinned to the bottom)
   ========================================================================= */
.woocommerce-store-notice,
p.demo_store {
	position: fixed !important;
	top: auto !important;
	bottom: 0 !important;
	z-index: 9998;
}

/* =========================================================================
   10. CAROUSEL ANTI-FLASH (cb/carousel-v2 — hide slides until Swiper inits)
   ========================================================================= */
.cb-carousel-block .swiper:not(.swiper-initialized) .swiper-wrapper {
	visibility: hidden;
}

.cb-carousel-block .swiper:not(.swiper-initialized) {
	min-height: 100px;
	max-height: 110px;
}

@media (min-width: 768px) {
	.cb-carousel-block .swiper:not(.swiper-initialized) {
		min-height: 220px;
		max-height: 240px;
	}
}

/* =========================================================================
   11. SINGLE PRODUCT
   ========================================================================= */
/* Single-product summary price: show only the base ("one-time") price. The
   Subscribe & Save plugin (APFS/WCS ATT) appends an "— or $X $Y every 6 weeks"
   suffix wrapped in <small class="wcsatt-sub-options">; on the product page that
   subscription price is already presented in the purchase-option radios below
   (One-time purchase / Subscribe for…), so the suffix is a redundant second
   listing. Scoped to the summary block via its className, so the product cards
   / rails (which have no inline radios) keep their dual price. */
.ginis-single-product-price .wcsatt-sub-options {
	display: none;
}

/* Sticky gallery: the image column follows along as you read the details +
   tabs in the other column. align-self:start stops the flex columns layout
   from stretching this column to the full row height (a stretched column has
   no room to stick). `top` clears the condensed sticky header (~6rem) plus a
   small gap. By the time the gallery scrolls up to its sticky offset the header
   has finished condensing, so there's no overlap. Disabled once columns stack. */
.ginis-product-gallery-col {
	align-self: start;
	position: sticky;
	top: 7rem;
}

@media (max-width: 781px) {
	.ginis-product-gallery-col {
		position: static;
	}
}

/* Reviews heading ("6 reviews"): the standalone woocommerce/product-reviews
   block (see templates/single-product.html + inc/woocommerce.php) renders this
   as an <h2>, which would inherit the Architects Daughter heading font at full
   heading size — too large and hard to read next to the body copy. Bring it to
   Manrope at the "large" preset so it reads as a modest section label. */
.woocommerce-Reviews-title {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-align: center;
}

/* "Add a review" form: by default it stretches the full content width, which
   reads as unbounded next to the boxed review cards above. Constrain it and
   wrap it in a matching card (same light border / radius as the review items)
   so it looks like a deliberate panel. The textarea fills the card width.
   margin-inline:auto centers the card under the centered "Reviews" heading. */
#review_form_wrapper {
	max-width: 640px;
	margin-top: var(--wp--preset--spacing--40);
	margin-inline: auto;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 8px;
}
#review_form_wrapper textarea {
	width: 100%;
	box-sizing: border-box;
}

/* "There are no reviews yet." — centered under the centered "Reviews" heading
   so it doesn't look stranded at the left now that the form is right-aligned. */
.woocommerce-noreviews {
	text-align: center;
}

/* =========================================================================
   12. CART  (woocommerce/cart block — see templates/page-cart.html)
   These rules target WooCommerce block class names + DOM structure; validated
   against WooCommerce 10.8.1. Each degrades to "the tweak silently stops
   applying" (never broken layout) if WC renames things, so re-check the cart
   visually on WC upgrades.
   ========================================================================= */
/* The line-items table header labels its columns "Product" (over the image
   col), "Details" (over the name col), and "Total". "Product" is redundant on a
   cart — the image + name make the column obvious — so drop that label. NOTE the
   "Product" text lives in the IMAGE header cell (__header-image), not
   __header-product (which is "Details"). WooCommerce already hides it on mobile
   with visibility:hidden (keeps the cell for column alignment + leaves the label
   in the a11y tree); we extend that to desktop. The selector is deliberately
   heavier than WC's own (0,3,1) header rules so it isn't out-specified. The
   "Details" and "Total" headers are left untouched. */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image {
	visibility: hidden;
}

/* Coupon: remove the accordion behavior but KEEP its heading as a label. The
   Cart block renders coupon entry as a collapsible "Add coupons" Panel;
   assets/js/cart-coupon.js opens it on load so the form is always mounted. Here
   we strip the accordion-ness without losing the label: drop the expand/collapse
   chevron and make the heading non-interactive (pointer-events:none) so it reads
   as a static "Add coupons" label over an always-open field. The opener script
   still works — .click() dispatches the React handler regardless of
   pointer-events. Scoped to the cart; checkout keeps its own collapsible coupon. */
.wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
	pointer-events: none;
	cursor: default;
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button-icon {
	display: none;
}

/* Applied-coupon chip (the removable tag in the discount line). WooCommerce
   ships it nearly unstyled — no background or border until hover — so an applied
   coupon reads as bare text. Give it a soft pill in the palette. The :hover
   selector is included so WC's own `.wc-block-components-chip:hover` (which
   resets the background to transparent) doesn't override it. Applies on cart +
   checkout, wherever applied coupons are listed. */
.wc-block-components-totals-discount__coupon-list .wc-block-components-chip,
.wc-block-components-totals-discount__coupon-list .wc-block-components-chip:hover {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 2em;
}

/* Grey out the cart-block's proceed-to-checkout button when the S&S
   minimum-quantity gate is in violation. The button is rendered entirely
   client-side by React (the SSR markup is an empty container), so we can't
   set `disabled` server-side — this CSS hook is the reliable path.
   pointer-events:none blocks the click without hiding the button, so the
   customer sees what they were trying to do but gets visual feedback that
   it's currently unavailable. Server-side wc_add_notice() remains the
   authoritative fallback if a customer bypasses the click block (e.g.,
   direct URL to /checkout). Body class is stamped by the ginis-ss-minimum-qty
   mu-plugin when is_cart() && violation. */
body.ginis-ss-gate-violation .wc-block-cart__submit-button,
body.ginis-ss-gate-violation .wc-block-mini-cart__footer-checkout {
	opacity: 0.45;
	pointer-events: none;
	/* cursor: not-allowed deliberately omitted — pointer-events:none means
	   the cursor never hits the element, so the cursor-style rule has no
	   effect on this element (cursor falls through to the parent). The
	   visual cue is the opacity; server-side wc_add_notice() remains the
	   real gate if a keyboard user tabs to the button and presses Enter
	   (which pointer-events doesn't block). */
}

/* Soften the gate notice in the mini-cart drawer. WC renders queued error
   notices via the same wc-block-components-notice-banner markup used on the
   cart page; in the cramped drawer context the default red banner reads as
   far too aggressive. Match the cart-page voice: cream background, primary
   left border. Scoped to inside the mini-cart drawer so the cart-page
   banner styling stays untouched. */
.wc-block-mini-cart__drawer .wc-block-components-notice-banner.is-error {
	background-color: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--primary);
	border-left-width: 3px;
	color: var(--wp--preset--color--contrast);
}

/* The error icon is an SVG whose RED comes from background-color
   (#cc1818), not fill. Override both so the icon sits in the primary palette
   instead of clashing red on cream. Descendant (not direct-child) selector
   in case WC wraps the SVG in a span across versions. */
.wc-block-mini-cart__drawer .wc-block-components-notice-banner.is-error svg {
	background-color: var(--wp--preset--color--primary);
	fill: var(--wp--preset--color--base);
}

/* "Requires 2 bottles minimum" hint under the Subscribe option on
   single-product pages. See the theme template override
   `woocommerce/single-product/product-subscription-options-prompt-radio.php`.
   margin-left visually aligns the hint with the "Subscribe for" text — the
   hint is a sibling of the action span inside the <label>, so its left edge
   defaults to the label edge (under the radio button). Tweak if the radio
   sizing changes via theme.css. */
.ginis-ss-min-qty-hint {
	display: block;
	margin-top: 0.25em;
	margin-left: 1.2em;
	font-size: 0.85em;
	color: var(--wp--preset--color--contrast);
	opacity: 0.65;
}

/* "Add to an existing subscription" panel + purchase-option radios on the
   product page. WCS-ATT's matching-subscriptions submit button ships as
   `.button add alt` WITHOUT the block theme's .wp-element-button, so it renders
   as bare browser-grey; the table + checkbox are unstyled too. Bring them in
   line with the site. The panel is injected via AJAX, so we target by class. */

/* Purchase-option radios ("One-time purchase" / "Subscribe for…"). Label display
   is left untouched so .ginis-ss-min-qty-hint still drops below the Subscribe
   option. */
.wcsatt-options-prompt-fieldset { margin: 0.5em 0 0; padding: 0; border: 0; }
.wcsatt-options-prompt-radios { list-style: none; margin: 0; padding: 0; }
.wcsatt-options-prompt-radio { margin: 0.35em 0; }
.wcsatt-options-prompt-action-input { margin-right: 0.5em; }

/* "Add to an existing subscription?" reveal checkbox. */
.add-to-subscription-input { margin-right: 0.45em; }

/* Matching-subscriptions panel: a light card for the table. */
.woocommerce_account_subscriptions { margin-top: 0.25em; }
.woocommerce_account_subscriptions table.shop_table {
	margin: 0 0 0.85em;
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce_account_subscriptions table.shop_table th,
.woocommerce_account_subscriptions table.shop_table td {
	padding: 0.55em 0.9em;
}

/* The "Add to subscription #N" submit button — match the site's primary button
   (it lacks .wp-element-button, so it never inherited theme.json's button look). */
.wcsatt-add-to-subscription-button.button {
	/* block + width:fit-content + margin-left:auto right-aligns it within its
	   actions cell regardless of the cell's text-align (WC's orders-table CSS
	   was winning the text-align battle, so push with auto margin instead). */
	display: block;
	width: fit-content;
	margin-left: auto;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 600;
	text-decoration: none;
	border: none;
	border-radius: 8px;
	padding: 0.7em 1.4em;
	cursor: pointer;
	transition: filter 0.15s ease;
}
.wcsatt-add-to-subscription-button.button:hover { filter: brightness(0.95); }

/* Reorder the product-page purchase UI so the "Add to an existing subscription"
   section sits directly under the subscribe radios — above the stock line and
   the Add-to-Cart button — instead of WCS's default spot below the button,
   which splits the flow. The radios, stock, qty+button group, and add-to-sub
   wrapper are all direct children of the block add-to-cart form, so flex `order`
   repositions them with zero PHP-hook surgery (re-hooking duplicates the
   section) and zero HTML rewriting (which would risk the block's Interactivity-
   API hydration that powers add-to-cart). :has() scopes this to forms that
   actually render the add-to-sub section, leaving other products untouched. */
.wc-block-add-to-cart-with-options:has(> .wcsatt-add-to-subscription-wrapper) {
	display: flex;
	flex-direction: column;
}
.wc-block-add-to-cart-with-options:has(> .wcsatt-add-to-subscription-wrapper) > .wcsatt-options-wrapper { order: 1; }
.wc-block-add-to-cart-with-options:has(> .wcsatt-add-to-subscription-wrapper) > .wcsatt-add-to-subscription-wrapper { order: 2; }
.wc-block-add-to-cart-with-options:has(> .wcsatt-add-to-subscription-wrapper) > .wc-block-components-product-stock-indicator { order: 3; }
.wc-block-add-to-cart-with-options:has(> .wcsatt-add-to-subscription-wrapper) > .wp-block-group { order: 4; }

/* Hide the "N in stock" line on the product page (per request). Only the
   in-stock variant — the "Out of stock" / low-stock / backorder states keep
   their own modifier classes and stay visible so customers still get those
   cues. */
.wc-block-add-to-cart-with-options .wc-block-components-product-stock-indicator--in-stock {
	display: none;
}

/* Close the whitespace above the "Add to an existing subscription?" checkbox.
   Two sources: WCS's top margin on the wrapper (was ~19px, for its old position
   below the button), and the label shipping as display:inline so it floated low
   inside a tall line box (~32px of dead space). Trim the margin and flex the
   label so the checkbox + text sit at the top of the wrapper, tight under the
   radios. Neither changes the checkbox's own size or hit area. */
.wc-block-add-to-cart-with-options > .wcsatt-add-to-subscription-wrapper {
	margin-top: 0.5em;
}
/* The wrapper mixes block children with inter-element whitespace text nodes;
   in block flow the leading whitespace rendered as an empty line (~line-height
   tall, ~32px) above the label. Making the wrapper a flex column makes the
   browser drop whitespace-only nodes, so the label sits flush at the top. WCS
   toggles visibility via the inline `display` style only while inactive, so this
   flex rule applies cleanly when shown. */
.wcsatt-add-to-subscription-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* The wrapper carries a clearfix ::before (content:""; display:table) that, in a
   flex container, becomes a sized flex item and pushed the label down. Flex needs
   no clearfix, so drop both pseudos. */
.wcsatt-add-to-subscription-wrapper::before,
.wcsatt-add-to-subscription-wrapper::after {
	content: none;
}
.wcsatt-add-to-subscription-action-label {
	display: flex;
	align-items: center;
	gap: 0.45em;
}

/* Subscription-edit minimum note (My Account → subscription view, above the
   actions/Cancel — printed by ginis-ss-minimum-qty.php). */
.ginis-ss-min-qty-note {
	margin: 0 0 1em;
	padding: 0.6em 0.8em;
	border-left: 3px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-light);
	font-size: 0.9em;
}

/* "Added — View cart" confirmation that replaces the default WC success banner
   on single-product pages after add-to-cart. See assets/js/added-badge.js for
   the client-side insertion + inc/woocommerce.php for the enqueue.
   Inline text, no pill — inherits the page body color/font so it reads as a
   status update, not a UI element. Sits below the qty/button row. Fades to a
   muted tone so it lingers visually for the reader without competing with the
   button itself. */
.ginis-added-msg {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	margin-top: 0.75em;
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
	animation: ginis-added-fade 6s ease-out forwards;
}

.ginis-added-msg__check {
	font-weight: 700;
}

.ginis-added-msg a {
	color: inherit;
	text-decoration: underline;
}

.ginis-added-msg a:hover {
	text-decoration: none;
}

@keyframes ginis-added-fade {
	0%, 70%  { opacity: 1; }
	100%     { opacity: 0.6; }
}

/* =========================================================================
   13. CHECKOUT  (woocommerce/checkout block — see templates/page-checkout.html)
   Validated against WooCommerce 10.9.1. The checkout block is rendered
   client-side by React (SSR markup is empty containers), so everything here
   targets WC component class names; each rule degrades to "silently stops
   applying" if WC renames things, so re-check checkout visually on upgrades.
   ========================================================================= */
/* Section/step headings ("Contact information", "Shipping address",
   "Payment options", "Order summary", …) inherit the site-wide cursive
   heading font (styles.elements.heading → Architects Daughter). That cursive
   reads as decorative and hurts scannability on a form the customer needs to
   move through quickly. Override just the checkout block's component titles to
   the readable body face (Manrope); the brand cursive stays everywhere else.
   `.wc-block-components-title` is the shared base class for these titles;
   the step-title class is included explicitly in case its specificity or
   markup differs across WC versions. */
.wp-block-woocommerce-checkout .wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--manrope);
}

/* =========================================================================
   14. ORDER CONFIRMATION  ("Order received" / thank-you page —
   see templates/order-confirmation.html, which scopes everything under the
   .ginis-order-confirmation <main>.) Validated against WooCommerce 10.9.1.
   Goal: bring this page in line with the Cart/Checkout pages, which already
   use readable Manrope headings + our padded layout, instead of the bare
   default WooCommerce styling. Rules degrade to "silently stop applying" if
   WC renames markup, so re-check on upgrades.
   ========================================================================= */
/* Headings inherit the site-wide cursive (styles.elements.heading →
   Architects Daughter): the order-status <h1> ("Order received") emitted by
   woocommerce/order-confirmation-status, plus the core/heading sections
   ("Order details", "Shipping address", "Billing address"). The Cart and
   Checkout pages render their headings in Manrope, so match them here for a
   consistent transactional voice. Class scope (0,1,1) easily beats the
   theme.json `:where()` heading rule (0,0,1), so no !important needed. */
.ginis-order-confirmation .wc-block-order-confirmation-status h1,
.ginis-order-confirmation .wp-block-heading {
	font-family: var(--wp--preset--font-family--manrope);
}

/* Totals table ships with default gray rules + a heavy outer border that read
   as stock WooCommerce against the rest of the site. Recolor every cell/edge
   to the palette's primary-light so the dividers stay legible but soften onto
   the cream/peach scheme; tint the "Product / Total" header row cream so it
   reads as an intentional panel header (mirrors the Cart styling voice).
   Only colors change — border widths/layout are left to WC, so this stays
   robust if the table structure shifts. */
.ginis-order-confirmation .wc-block-order-confirmation-totals__table,
.ginis-order-confirmation .wc-block-order-confirmation-totals__table th,
.ginis-order-confirmation .wc-block-order-confirmation-totals__table td {
	border-color: var(--wp--preset--color--primary-light);
}

.ginis-order-confirmation .wc-block-order-confirmation-totals__table thead th {
	background-color: var(--wp--preset--color--cream);
}

/* Calm the heading hierarchy. The status block stacks a big <h1> ("Order
   received") over a description <p> ("Thank you. Your order has been
   received.") that WC renders at the block's font size — at our "large" that
   <p> competed with the <h1> and made the top of the page feel shouty. Pull
   the description down to body size and tighten the gap so the two read as a
   title + subtitle pair instead of two headlines. */
.ginis-order-confirmation .wc-block-order-confirmation-status h1 {
	margin-bottom: 0.25em;
}

.ginis-order-confirmation .wc-block-order-confirmation-status-description {
	font-size: var(--wp--preset--font-size--medium);
}

/* Treat the order-meta row (#, date, total, email, payment) as a "receipt
   header" band: give it real air above/below and a hairline rule beneath, so
   it separates the confirmation header from the order body (table + addresses)
   below. The rule spans the full content width, visually grouping the page
   into header / body and cutting the "everything crammed together" feel. */
.ginis-order-confirmation .wc-block-order-confirmation-summary {
	margin-block: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--primary-light);
}

/* Section headings ("Order details", "Shipping address", "Billing address")
   default to a heavy h2 size that, repeated three times, adds to the busy
   feel. Normalize them to our "large" step with a touch more space above so
   each section gets a clear, lighter lead-in. */
.ginis-order-confirmation .wp-block-heading {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Align the two columns' leading headings. WC force-zeroes the top margin of
   the shipping-wrapper heading (`…shipping-wrapper .wp-block-heading{margin-top:0}`),
   but the left column's "Order details" heading keeps its natural top margin —
   so the address column rides ~one block-gap higher than "Order details".
   Restore a matching top margin on the address-side heading so "Shipping
   address" drops to sit level with "Order details". `1.2rem` == our theme
   blockGap (theme.json), which is the gap being compensated for. */
.ginis-order-confirmation .wc-block-order-confirmation-shipping-wrapper .wp-block-heading {
	margin-top: 1.2rem;
}

/* Logged-out gate state. When a guest opens the order-received URL without a
   matching session, WC withholds the order details and the status block
   renders just a lead <p> ("Thank you. Your order has been received.") above a
   sibling description ("Great news! … Log in here"). That lead <p> defaulted to
   body weight, so the page had no clear title. Weight it to read as the page
   title — mirroring the full confirmation's bold "Order received" <h1>. The
   selector only matches the gate: with permission the status block holds an
   <h1> (+ a sibling description), never a direct <p>. */
.ginis-order-confirmation .wc-block-order-confirmation-status p {
	font-weight: 700;
}

/* In that same gate state the two-column wrapper still renders, but its totals
   and address blocks output nothing (withheld), leaving an empty block that
   added dead vertical space. Collapse the columns when the order-details table
   is absent (i.e. the gate) so only the message shows; with permission the
   table is present and the columns display normally. */
.ginis-order-confirmation__cols:not(:has(.wc-block-order-confirmation-totals__table)) {
	display: none;
}

/* =========================================================================
   15. MY ACCOUNT  (classic [woocommerce_my_account] shortcode — WC ships no
   block replacement as of 10.9.1, only the login/logout Customer Account
   block, so this themes the classic markup. templates/page-my-account.html
   wraps the shortcode in our padded <main> + a Manrope "My account" title and
   scopes everything under .ginis-account.) Targets WC's classic class names
   (navigation.php / my-account.php); rules degrade to "silently stop
   applying" if WC renames markup, so re-check on upgrades.
   ========================================================================= */
/* Lay out the account area as nav + content side by side. The shortcode wraps
   its output in <div class="woocommerce"> holding the <nav> then the content
   <div>; WC's default theme floats these, but this block theme doesn't load
   that layout CSS, so define it ourselves with flex. Stacks on mobile (below).
   align-items:flex-start keeps the short nav from stretching to content height. */
.ginis-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	row-gap: var(--wp--preset--spacing--40);
}

/* WC emits a .woocommerce-notices-wrapper as the FIRST child of .woocommerce
   (usually empty). As a flex sibling it would otherwise sit inline before the
   nav and, with any column gap, indent it. Force it onto its own full-width row
   so the nav/content row starts clean; hide it entirely when empty so it adds
   no stray vertical space either. */
.ginis-account .woocommerce-notices-wrapper {
	flex: 0 0 100%;
}

.ginis-account .woocommerce-MyAccount-navigation {
	flex: 0 0 220px;
}

/* No flex column-gap (that would also indent the first item); space the content
   from the nav with a left margin instead, so the nav stays flush with the
   page title's left edge. */
.ginis-account .woocommerce-MyAccount-content {
	flex: 1 1 0;
	min-width: 0;
	margin-left: var(--wp--preset--spacing--60);
}

/* Navigation: strip the default <ul> list chrome and present each endpoint as
   a tappable row separated by hairlines in the palette. */
.ginis-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ginis-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--primary-light);
}

.ginis-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.7rem 0.25rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.15s ease;
}

.ginis-account .woocommerce-MyAccount-navigation li a:hover {
	text-decoration: underline;
}

/* Active endpoint: the palette's primary (#fdab7a) is a light peach that's hard
   to read as text, so DON'T color the label with it — keep the text dark and
   signal "current" with bold weight plus a primary accent bar on the left. */
.ginis-account .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--primary);
	padding-left: 0.75rem;
}

/* Content links (dashboard "recent orders", the address "Edit …" links, etc.).
   The palette's primary is a light peach that's unreadable as text, so keep
   links dark (contrast) and rely on the underline as the affordance — readable
   on both white and the cream cards. */
.ginis-account .woocommerce-MyAccount-content a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* --- Logged-out login / register ------------------------------------------
   The shortcode renders a two-column login+register under #customer_login.
   WC's default woocommerce.css only gives the forms a thin grey border, which
   reads as bare; restyle them as on-brand cards with Manrope headings so the
   page matches the rest of the account area. Classic markup (form-login.php) —
   degrades silently if WC renames it. */

/* Two equal columns, centred and width-capped so they don't sprawl on wide
   screens; flex-wrap drops them to a single column on narrow viewports. */
.ginis-account #customer_login.u-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	max-width: 860px;
	margin-inline: auto;
}
.ginis-account #customer_login .u-column1,
.ginis-account #customer_login .u-column2 {
	flex: 1 1 320px;
	float: none;   /* cancel WC's default ~47% float */
	width: auto;
	margin: 0;
}

/* Headings: the global heading face is the script font, which reads messy at
   this size — use Manrope to match the "My account" title and the field labels. */
.ginis-account #customer_login h2 {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	font-size: 1.5rem;
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* The forms as cards. */
.ginis-account form.woocommerce-form-login,
.ginis-account form.woocommerce-form-register {
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Inputs: full-width with a consistent border + radius and a brand focus ring. */
.ginis-account #customer_login input.input-text,
.ginis-account #customer_login input[type="password"] {
	width: 100%;
	padding: 0.6em 0.75em;
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 8px;
}
.ginis-account #customer_login input.input-text:focus,
.ginis-account #customer_login input[type="password"]:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: transparent;
}

/* Row rhythm + the "remember me / lost password" line. */
.ginis-account #customer_login .woocommerce-form-row {
	margin-bottom: var(--wp--preset--spacing--20);
}
.ginis-account #customer_login .woocommerce-LostPassword {
	margin: var(--wp--preset--spacing--20) 0 0;
}

/* An empty .woocommerce-notices-wrapper is rendered as the first child of
   .woocommerce (above the nav). Because .woocommerce is a flex row, that empty
   wrapper still counts as a flex item and the row `gap` pushes the nav inward,
   so the nav started indented from the page title. Drop it from the flow when
   empty so the nav is the first real flex item, flush with the title's left. */
.ginis-account .woocommerce-notices-wrapper:empty {
	display: none;
}

/* The page title renders wider than the 780px content column that the account
   content (.woocommerce) is centered into, so its left edge sits left of the
   nav. Pin the title to the same content width + auto centering so it shares
   the column and lines up directly above the nav. */
.ginis-account > .wp-block-post-title {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* Readable buttons. WC's classic buttons (order "View", form "Submit", etc.)
   are plain <a.button>/<input type=submit>, NOT the block .wp-element-button,
   so they never inherit theme.json's button style and rendered either as
   peach-on-peach (invisible) or bare browser-gray. Re-apply the site button
   look: primary fill with dark (contrast) text — matching the block buttons. */
.ginis-account .woocommerce .button,
.ginis-account .woocommerce-MyAccount-content .button,
.ginis-account button[type="submit"],
.ginis-account input[type="submit"] {
	display: inline-block;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 600;
	text-decoration: none;
	border: none;
	border-radius: 8px;
	padding: 0.7em 1.4em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ginis-account .woocommerce .button:hover,
.ginis-account .woocommerce-MyAccount-content .button:hover,
.ginis-account button[type="submit"]:hover,
.ginis-account input[type="submit"]:hover {
	background-color: var(--wp--preset--color--primary-light);
}

/* Notices (e.g. Subscriptions' "You have no active subscriptions", address
   confirmations). WC ships them with a gray fill + a bright accent top border
   and a blue ::before icon that clash with the palette. Reframe them on the
   cream/primary scheme with a left accent bar, matching the mini-cart notice
   voice. */
.ginis-account .woocommerce-info,
.ginis-account .woocommerce-message,
.ginis-account .woocommerce-Message {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	background-color: var(--wp--preset--color--cream);
	border: none;
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	color: var(--wp--preset--color--contrast);
	/* keep the left inset WC reserves for its ::before status icon */
	padding: 1em 1.5em 1em 3.25em;
	margin: 0 0 1.5em;
}

/* The status icon (::before) is absolutely positioned by WC; recolor it to the
   palette so it isn't the stock blue/purple glyph. */
.ginis-account .woocommerce-info::before,
.ginis-account .woocommerce-message::before,
.ginis-account .woocommerce-Message::before {
	color: var(--wp--preset--color--primary);
}

/* WC floats the notice's action button to the right, which overlaps the text
   in the flex row. Drop the float and push it to the right edge with auto
   margin so the message reads as "text … [button]" on one tidy line. */
.ginis-account .woocommerce-info .button,
.ginis-account .woocommerce-message .button,
.ginis-account .woocommerce-Message .button {
	float: none;
	margin-left: auto;
}

/* Sub-headings inside the account content (e.g. "Billing address" /
   "Shipping address" address titles) are <h3>s that inherit the site-wide
   cursive heading font, which reads as decorative/odd on these utility
   sections. Match the transactional pages and use Manrope. Also normalize the
   browser-italic <address> so the saved address reads upright. */
.ginis-account .woocommerce-MyAccount-content h2,
.ginis-account .woocommerce-MyAccount-content h3 {
	font-family: var(--wp--preset--font-family--manrope);
}

.ginis-account .woocommerce-MyAccount-content address {
	font-style: normal;
}

/* Addresses page: present Billing / Shipping as two equal cards side by side
   (stacking when narrow). WC's classic markup (.col2-set with floated columns)
   isn't backed by WC's stylesheet in a block theme, and the leftover float
   classes were staggering the columns — so lay them out with flex, clear the
   float, and give each a cream card so they read as panels, not bare text. */
.ginis-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	margin-top: var(--wp--preset--spacing--30);
}

/* !important defeats WC's loaded classic rules (.col-1/.col-2 floats + %
   widths) that were giving the two cards different widths/left edges; the grid
   tracks (1fr 1fr) then guarantee equal, aligned columns. min-width:0 keeps a
   long line from stretching one card wider than the other. */
.ginis-account .woocommerce-Address {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
}

/* Pin the two cards explicitly to row 1, columns 1 and 2. Something in the
   markup was introducing a stray grid item that pushed the cards into a
   diagonal (Billing top-right, Shipping bottom-left); explicit placement makes
   them sit side by side with tops aligned no matter what else lands in the
   grid. Billing is .col-1, Shipping is .col-2 (set by my-address.php). */
.ginis-account .woocommerce-Address.col-1 {
	grid-column: 1;
	grid-row: 1;
}

.ginis-account .woocommerce-Address.col-2 {
	grid-column: 2;
	grid-row: 1;
}

/* The address title is an <h2> inheriting the x-large element size — big enough
   that "Shipping address" wrapped to two lines. Drop it to a section-label size
   and stack the title + edit link tidily above the address. */
/* Stack the title + edit link with flex-column. WC's stylesheet (loaded on
   account pages) sets `.title .edit{float:right}`, which kept pulling the edit
   link to the card's right edge; making the header a flex container makes that
   float a no-op (floats don't apply to flex items), so the link sits directly
   under the heading, left-aligned, without a specificity fight. */
.ginis-account .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 0.75rem;
	text-align: left;
}

.ginis-account .woocommerce-Address-title h2 {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.35rem;
}

.ginis-account .woocommerce-Address-title .edit {
	display: block;
	float: none;
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--small);
}

/* The section intro line (e.g. "The following addresses will be used on the
   checkout page by default.") reads as flat body copy. Treat it as a muted
   lead-in — slightly smaller, softened color, with room beneath — so it frames
   the cards/forms below instead of competing with them. Applies to the intro
   paragraph on each account section. */
.ginis-account .woocommerce-MyAccount-content > p:first-of-type {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	opacity: 0.7;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Form fields (affiliate registration, account details, address edit). They
   default to bare browser inputs; give them the same soft palette border /
   radius / padding the checkout fields use so the account forms feel native. */
.ginis-account input[type="text"],
.ginis-account input[type="email"],
.ginis-account input[type="tel"],
.ginis-account input[type="url"],
.ginis-account input[type="password"],
.ginis-account input[type="number"],
.ginis-account textarea,
.ginis-account select {
	border: 1px solid var(--wp--preset--color--primary-light);
	border-radius: 6px;
	padding: 0.6em 0.75em;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	box-sizing: border-box;
}

.ginis-account input:focus,
.ginis-account textarea:focus,
.ginis-account select:focus {
	/* contrast (not primary): primary #fdab7a is ~1.6:1 on a white field, below
	   the 3:1 WCAG 2.2 needs for a focus indicator, and this replaces the UA
	   default ring — so a peach ring would be a net regression for keyboard use. */
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 1px;
}

/* Stack nav above content on narrow screens; let the nav span full width.
   Collapse the address cards to a single column too. */
@media (max-width: 600px) {
	.ginis-account .woocommerce-MyAccount-navigation {
		flex-basis: 100%;
	}

	/* The content wraps to its own row under the now-full-width nav, so drop the
	   desktop column-gap margin — otherwise it sits indented from the flush nav
	   and page title. */
	.ginis-account .woocommerce-MyAccount-content {
		margin-left: 0;
	}

	.ginis-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	.ginis-account .woocommerce-Address.col-1,
	.ginis-account .woocommerce-Address.col-2 {
		grid-column: 1;
		grid-row: auto;
	}
}