/*
Theme Name:   Prairie Pottery
Theme URI:    https://www.prairiepottery.ca
Description:  Child theme of Storefront for Prairie Pottery — a small Manitoba
              pottery studio. Warm, quiet, and built to stay out of the way of
              the photographs.
Author:       Prairie Pottery
Template:     storefront
Version:      4.8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  prairiepottery
Tags:         e-commerce, two-columns, custom-colors, featured-images
*/

/* ==========================================================================
   1. Tokens

   One display face (Fraunces) for headings; the system stack for everything
   else, so there is exactly one font file on the critical path.

   Palette: "Kiln / Ochre" — option H, chosen by the owner in November 2026.
   A warm charcoal ground with an ochre accent drawn from the sunrise glaze and
   the raw clay feet in the photographs.

   Tokens are named for the JOB they do, not the colour they happen to be. The
   light design let one colour do two jobs — the card surface was also the
   button label colour, the body text was also the dark panel fill. On a dark
   ground those pairs pull in opposite directions, so each role has its own
   token. A future palette change is an edit to this block and nothing else.

   The accent is two values on purpose. --pp-accent is deep enough that white
   button labels pass WCAG AA (4.9:1). --pp-accent-text is light enough to be
   legible as text on the dark ground (8.7:1). One colour cannot do both here;
   the design artboard used #9a6f2a for the fill, deepened to #8f6527 because
   the original managed only 4.3:1 under white text.
   ========================================================================== */

:root {
	/* Grounds, darkest to lightest */
	--pp-panel:        #0e0b09;  /* announcement, testimonial, footer, ink buttons */
	--pp-ground:       #17120f;  /* the page */
	--pp-surface:      #211a15;  /* header, hero, cards, form fields */
	--pp-wash:         #2b211a;  /* bands: facts strip, classes, maker strip */
	--pp-line-soft:    #2f251d;
	--pp-line:         #392c22;  /* decorative outlines: cards, rules */
	--pp-field-line:   #7a6553;  /* form fields: 3.1:1, so the box is findable */

	/* Text */
	--pp-ink:          #f3e8dc;
	--pp-soft:         #c3b0a0;
	--pp-muted:        #a89483;
	--pp-wash-text:    #d9c8b6;
	--pp-on-accent:    #fdf8f3;  /* labels on accent fills and on dark panels */

	/* Accent — see the note above for why it is two values */
	--pp-accent:            #8f6527;
	--pp-accent-hover:      #77531f;
	--pp-accent-text:       #d7ab63;
	--pp-accent-text-hover: #e8c27f;

	/* Text on the darkest panels */
	--pp-panel-strong: #e6d8c9;
	--pp-panel-text:   #b4a291;
	--pp-panel-faint:  #8b7866;
	--pp-panel-line:   #2c2219;
	--pp-quote:        #f6ede3;
	--pp-quote-author: #c4af9a;

	/* Status */
	--pp-sage:         #566b49;  /* sale badge; deepened so its label passes */
	--pp-stock-bg:     #233024;
	--pp-stock-text:   #a8c79a;
	--pp-error:        #ef8178;

	--pp-display: "Fraunces", Georgia, "Iowan Old Style", serif;

	--pp-radius: 2px;
	--pp-gutter: 1rem;
	--pp-max:    1200px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

/* Sections break out of Storefront's centred container with negative margins;
   `clip` stops that producing a horizontal scrollbar. Unlike `hidden`, it does
   not create a scroll container, so the sticky header keeps working.
   body.custom-background is matched too, so a colour picked under
   Customize → Colors cannot quietly turn the page back to white. */
body,
body.custom-background {
	overflow-x: clip;
	background-color: var(--pp-ground);
	color: var(--pp-ink);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Storefront also sets `overflow-x: hidden` on .site, the wrapper the header
   sits in — and that alone stops `position: sticky` working: the header sticks
   to .site, which never scrolls, instead of to the window. Same cure as the
   body. */
.site { overflow-x: clip; }

/* Anchor jumps (the menu's Gallery and Classes links) stop below the sticky
   header rather than under it. --pp-header-h is measured by assets/js/header.js
   and includes the admin bar when you're logged in; the fallback covers the
   moment before it runs.

   Set on the jump targets only (scroll-margin), NOT on the page
   (scroll-padding on html). scroll-padding tells the browser the top strip
   of the window is covered — and browsers keep the field you're typing in
   out of that strip. The header search box lives inside it, so every
   keystroke scrolled the page trying to uncover it. :target covers any other
   #link someone adds later. */
#gallery,
#classes,
:target {
	scroll-margin-top: calc(var(--pp-header-h, 6.5rem) + 1.25rem);
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

h1, h2, h3, h4,
.page-title,
.product_title,
.pp-section__title,
.pp-hero__heading,
.pp-classes__heading,
.pp-journal__title,
.widget .widget-title {
	font-family: var(--pp-display);
	font-optical-sizing: auto;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--pp-ink);
}

a { color: var(--pp-accent-text); text-underline-offset: 0.18em; }
a:hover, a:focus { color: var(--pp-accent-text-hover); }

/* Focus rings.

   Storefront ships `a:focus, input:focus, textarea:focus, button:focus
   { outline: 2px solid #7f54b3 }` — WooCommerce purple, drawn on every mouse
   click across the whole site, not only for keyboard users. Two rules replace
   it: mouse clicks get no ring at all (the element's own pressed state does
   that job), and keyboard focus gets the gold ring, same 2px weight.

   This rule deliberately does NOT set border-radius. An earlier version did,
   which squared off any pill-shaped element the moment it took focus; the
   outline follows the element's own corners in every current browser. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.button:focus:not(:focus-visible) {
	outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--pp-accent-text);
	outline-offset: 3px;
}

/* Text fields while you type in them.

   Storefront turns every text field #ededed on focus — the header search,
   comment boxes, the coupon field, anything a plugin adds. With this theme's
   light text that made what you typed invisible. Same selectors as
   Storefront's rule, one notch stronger (body), so every field keeps the
   dark ground and light text, and gets a gold edge instead. */
body input[type="text"]:focus,
body input[type="number"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body input[type="url"]:focus,
body input[type="password"]:focus,
body input[type="search"]:focus,
body textarea:focus,
body .input-text:focus {
	background-color: var(--pp-ground);
	color: var(--pp-ink);
	border-color: var(--pp-accent-text);
}

/* ==========================================================================
   2a. Storefront's light defaults, reset for a dark ground

   Storefront paints tables, form fields, the checkout panels and its phone
   bottom bar in near-white. On the light theme that was invisible. Here each
   would become a pale island carrying light text — unreadable — and most of
   them live on the cart and checkout pages, where unreadable costs money.
   ========================================================================== */

table th { background-color: var(--pp-surface); color: var(--pp-ink); }

table tbody td,
table tbody tr:nth-child(2n) td,
fieldset,
fieldset legend {
	background-color: transparent;
	color: var(--pp-ink);
}

table th,
table td { border-color: var(--pp-line); }

table.cart td.product-remove,
table.cart td.actions { border-top-color: var(--pp-line); }

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select,
.input-text {
	background-color: var(--pp-surface);
	color: var(--pp-ink);
	border: 1px solid var(--pp-field-line);
	box-shadow: none;
}

::placeholder { color: var(--pp-muted); opacity: 1; }

hr { background-color: var(--pp-line); border-color: var(--pp-line); }

.storefront-breadcrumb { background-color: transparent; }
.woocommerce-breadcrumb { color: var(--pp-muted); }
.woocommerce-breadcrumb a { color: var(--pp-accent-text); }

/* Links inside post and page content. Storefront's own rule is more specific
   than a bare `a`, and its default colour is a purple that disappears here.
   Buttons and the account dashboard cards are excluded: they are links
   styled as something else, and inheriting gold text plus Storefront's
   content underline would undo that styling. */
.hentry .entry-content a:not(.button):not(.wp-block-button__link):not(.pp-button):not(.pp-dashboard__card) {
	color: var(--pp-accent-text);
}

body .hentry .entry-content a.pp-button,
body .hentry .entry-content a.pp-dashboard__card {
	text-decoration: none;
}
body .hentry .entry-content a.pp-button { color: var(--pp-on-accent); }
body .hentry .entry-content a.pp-button--outline,
body .hentry .entry-content a.pp-button--ink { color: var(--pp-accent-text); }
body .hentry .entry-content a.pp-button--outline:hover,
body .hentry .entry-content a.pp-button--ink:hover { color: var(--pp-on-accent); }

/* Shortcode checkout. If the shop uses the block checkout these simply never
   match; the block checkout has its own rules in section 16c. */
body #order_review { background-color: var(--pp-surface); }

body #payment .payment_methods > li:not(.woocommerce-notice),
body #payment .payment_methods > li:not(.woocommerce-notice):hover {
	background-color: var(--pp-surface);
}

body #payment .payment_methods > li .payment_box,
body #payment .place-order { background-color: var(--pp-wash); }

/* Order-received page. */
body .order_details { background-color: var(--pp-surface); }
body .order_details > li { border-bottom-color: var(--pp-line); }
body .order_details::before,
body .order_details::after { display: none; }

body .woocommerce-pagination .page-numbers li .page-numbers.current {
	background-color: var(--pp-surface);
	color: var(--pp-ink);
}

body .star-rating span::before,
body .quantity .plus,
body .quantity .minus,
body p.stars a::after,
body p.stars a:hover::after { color: var(--pp-accent-text); }

body .select2-dropdown,
body .select2-container--default .select2-results__option {
	background-color: var(--pp-surface);
	color: var(--pp-ink);
}
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--pp-accent);
	color: var(--pp-on-accent);
}
body .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--pp-ink);
}

/* Storefront's fixed bottom bar on phones. */
.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.search .site-search {
	background-color: var(--pp-panel);
	border-color: var(--pp-panel-line);
	color: var(--pp-ink);
}
.storefront-handheld-footer-bar ul li > a::before { color: var(--pp-ink); }
/* Storefront draws Cart as a shopping basket (Font Awesome f291). It says
   Cart, so it's a cart (f07a) — matching the header icon. */
.storefront-handheld-footer-bar ul li.cart > a::before { content: "\f07a"; }
.storefront-handheld-footer-bar ul li.cart .count {
	background-color: var(--pp-accent);
	color: var(--pp-on-accent);
	border-color: var(--pp-panel);
}

/* The light line above the bar. Storefront gives the bar a translucent
   white top edge and a drop shadow, and its search drawer — which hides
   behind the bar until the magnifier is tapped — peeked out above it with
   Storefront's light grey search field. The drawer is now fully hidden while
   closed, the field inside it is dark, and the bar has a quiet dark edge. */
.storefront-handheld-footer-bar {
	border-top: 1px solid var(--pp-line-soft);
	box-shadow: none;
}
.storefront-handheld-footer-bar ul li > a { border-right-color: var(--pp-line-soft); }
.storefront-handheld-footer-bar ul li.search:not(.active) .site-search { visibility: hidden; }
.storefront-handheld-footer-bar ul li.search.active .site-search {
	border-top: 1px solid var(--pp-line-soft);
}
.storefront-handheld-footer-bar .site-search input[type="search"],
.storefront-handheld-footer-bar .site-search .search-field {
	background-color: var(--pp-ground);
	border: 1px solid var(--pp-field-line);
	box-shadow: none;
	color: var(--pp-ink);
	font-size: 1rem;
}

/* --- notices that sit over the page ---------------------------------------

   Dark panel, light text, gold link — like the rest of the site, never a
   white box with dark text. */

/* WooCommerce's store-wide notice (Customize → WooCommerce → Store notice),
   which customers see when it's switched on. Storefront makes it bright
   blue. */
.woocommerce-store-notice,
p.demo_store {
	background-color: var(--pp-panel);
	border-top: 1px solid var(--pp-line);
	color: var(--pp-ink);
}
.woocommerce-store-notice a,
p.demo_store a { color: var(--pp-accent-text); }
.woocommerce-store-notice a.woocommerce-store-notice__dismiss-link,
p.demo_store a.woocommerce-store-notice__dismiss-link {
	background-color: rgba(215, 171, 99, 0.1);
	color: var(--pp-accent-text);
}

/* "This page is in Coming soon mode…" — shown only to people logged in as an
   administrator or shop manager, never to customers, until the shop goes
   live. Its ✕ is a dark drawing, so it's redrawn light. */
#coming-soon-footer-banner {
	background-color: var(--pp-panel);
	border-top: 1px solid var(--pp-line);
	color: var(--pp-ink);
}
#coming-soon-footer-banner a { color: var(--pp-accent-text); }
#coming-soon-footer-banner a.coming-soon-footer-banner-dismiss {
	background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4995 13.0602L16.2118 16.7725L17.2725 15.7118L13.5602 11.9995L17.2725 8.28723L16.2119 7.22657L12.4995 10.9389L8.78722 7.22656L7.72656 8.28722L11.4389 11.9995L7.72657 15.7119L8.78723 16.7725L12.4995 13.0602Z' fill='%23f3e8dc'/%3E%3C/svg%3E");
}

/* Storefront colours footer links with a selector more specific than a class,
   so it has to be matched exactly or its dark default wins. That was already
   wrong on the light theme — the footer has always been dark — so the email
   link in the footer was close to invisible. */
.site-footer a:not(.button):not(.components-button) { color: var(--pp-panel-text); }
.site-footer a:not(.button):not(.components-button):hover { color: var(--pp-on-accent); }

/* ==========================================================================
   3. Utilities
   ========================================================================== */

/* Break a section out of Storefront's .col-full, whatever its width. */
.pp-hero,
.pp-trust,
.pp-classes,
.pp-testimonial,
.pp-header__navrow,
.pp-footer__base {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.pp-eyebrow {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pp-accent-text);
	margin-bottom: 1rem;
}

.pp-eyebrow--dark { color: var(--pp-accent-text); }

.pp-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart {
	display: inline-block;
	background-color: var(--pp-accent);
	border: 1px solid var(--pp-accent);
	border-radius: var(--pp-radius);
	color: var(--pp-on-accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.95em 1.9em;
	line-height: 1.3;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.pp-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.added_to_cart:hover {
	background-color: var(--pp-accent-hover);
	border-color: var(--pp-accent-hover);
	color: var(--pp-on-accent);
}

/* The secondary button, everywhere: gold frame and gold label on whatever is
   behind it, filling with gold on hover. "See the Gallery", "Get in Touch",
   "Ask About Classes", "Log Out", and outline buttons added in the editor
   (section 16c) all share it.

   --ink is kept as a name for templates that use it, but is no longer a
   different look. */
.pp-button--outline,
.pp-button--ink {
	background-color: transparent;
	border-color: var(--pp-accent-text);
	color: var(--pp-accent-text);
}
.pp-button--outline:hover,
.pp-button--ink:hover {
	background-color: var(--pp-accent-hover);
	border-color: var(--pp-accent-hover);
	color: var(--pp-on-accent);
}

/* "alt" is WooCommerce's primary action — single-product Add to cart, Proceed
   to checkout, Place order. On the light theme it was near-black; on a dark
   ground near-black is the least noticeable thing on the page, so it takes the
   accent instead. */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--pp-accent);
	border-color: var(--pp-accent);
	color: var(--pp-on-accent);
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--pp-accent-hover);
	border-color: var(--pp-accent-hover);
}

/* Disabled must read as disabled, not as "click harder". */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	background-color: var(--pp-line);
	border-color: var(--pp-line);
	color: var(--pp-muted);
	cursor: not-allowed;
	opacity: 1;
}

/* ==========================================================================
   4. Announcement bar
   ========================================================================== */

.pp-announcement {
	background-color: var(--pp-panel);
	color: var(--pp-panel-strong);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-align: center;
	padding: 0.65rem 1.5rem;
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--pp-surface);
	border-bottom: 1px solid var(--pp-line);
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.04);
	padding: 0;
	margin-bottom: 0;
}

.site-header .col-full { padding-top: 0; padding-bottom: 0; }

/* Logged in, WordPress pins its black admin bar to the top of the window —
   32px tall, 46px on small screens, and below 600px it scrolls away. The
   header sticks beneath it rather than sliding under it. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.pp-header__bar {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	padding: 0.6rem 0;
}

.pp-header__brand { flex-shrink: 0; line-height: 0; }
.pp-header__logo-link { display: block; }

/* The logos ship with light lettering, so nothing is recoloured here. The
   stacked logo is about 2.9 times as wide as it is tall, the long one about
   10.6 times. */
.pp-header__brand img {
	height: 26px;
	width: auto;
	max-width: none;
	display: block;
}
.pp-header__brand .pp-header__logo--stacked { height: 48px; }

.pp-header__wordmark {
	font-family: var(--pp-display);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--pp-ink);
	text-decoration: none;
}

/* --- search --- */

.pp-search {
	display: flex;
	flex-grow: 1;
	max-width: 440px;
	margin: 0;
}

.pp-search__input {
	flex-grow: 1;
	min-width: 0;
	border: 1px solid var(--pp-field-line);
	border-right: 0;
	border-radius: var(--pp-radius) 0 0 var(--pp-radius);
	padding: 0.45rem 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	background-color: var(--pp-ground);
	color: var(--pp-ink);
	box-shadow: none;
}

.pp-search__submit {
	border: 1px solid var(--pp-accent);
	background-color: var(--pp-accent);
	color: var(--pp-on-accent);
	border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
	padding: 0 1.25rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}
.pp-search__submit:hover { background-color: var(--pp-accent-hover); border-color: var(--pp-accent-hover); }

/* --- account & cart --- */

.pp-header__actions {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	flex-shrink: 0;
	margin-left: auto;
}

.pp-header__action {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--pp-ink);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
.pp-header__action:hover { color: var(--pp-accent-text); }

.pp-header__count {
	background-color: var(--pp-accent);
	color: var(--pp-on-accent);
	border-radius: 999px;
	min-width: 19px;
	height: 19px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6875rem;
	letter-spacing: 0;
}

/* --- navigation row --- */

.pp-header__navrow {
	border-top: 1px solid var(--pp-line-soft);
	background-color: var(--pp-surface);
}

.pp-nav {
	max-width: var(--pp-max);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.pp-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-nav__list li { margin: 0; }

.pp-nav__list a {
	display: block;
	padding: 0.55rem 1.1rem;
	line-height: 1.4;
	color: var(--pp-ink);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.pp-nav__list a:hover,
.pp-nav__list .current-menu-item > a,
.pp-nav__list .current_page_item > a {
	color: var(--pp-accent-text);
	border-bottom-color: var(--pp-accent-text);
}

/* On the home page, header.js takes over: it lights Home, Gallery or Classes
   for whichever part of the page is in view, and WordPress's own "you are on
   this page" marking stands down so only one item is ever lit. */
.pp-nav__list.is-spying li > a {
	color: var(--pp-ink);
	border-bottom-color: transparent;
}
.pp-nav__list.is-spying li > a:hover,
.pp-nav__list.is-spying li.is-current > a {
	color: var(--pp-accent-text);
	border-bottom-color: var(--pp-accent-text);
}

@media (prefers-reduced-motion: no-preference) {
	.pp-nav__list a { transition: color 0.2s ease, border-color 0.2s ease; }
}

.pp-nav__empty {
	margin: 0;
	padding: 0.8rem 1.1rem;
	font-size: 0.8125rem;
	color: var(--pp-muted);
}

/* --- one-row header ---

   Logo, menu, search and icons on a single row (Customize → Prairie Pottery →
   Logo & header). The menu links stretch to the full height of the bar, so
   the gold underline on the current item sits on the header's bottom edge
   rather than floating mid-row. Account and Cart drop their words and keep
   their icons, to leave the menu room. */

.pp-header--one-row .pp-header__bar {
	padding: 0;
	gap: 1.75rem;
	align-items: stretch;
}

.pp-header--one-row .pp-header__brand,
.pp-header--one-row .pp-search,
.pp-header--one-row .pp-header__actions {
	align-self: center;
}

.pp-header--one-row .pp-header__brand { padding: 0.55rem 0; }

.pp-header--one-row .pp-search {
	flex: 1 1 12rem;
	max-width: 19rem;
	margin-left: auto;
}

.pp-header--one-row .pp-header__actions { margin-left: 0; }
.pp-header--one-row .pp-header__action span:not(.pp-header__count) { display: none; }

.pp-header--one-row .pp-nav {
	display: flex;
	flex-shrink: 0;
	max-width: none;
	margin: 0;
	padding: 0;
}

.pp-header--one-row .pp-nav__list {
	flex-wrap: nowrap;
	gap: 0;
	align-items: stretch;
}

.pp-header--one-row .pp-nav__list li { display: flex; }

.pp-header--one-row .pp-nav__list a {
	display: flex;
	align-items: center;
	padding: 0 0.85rem;
	white-space: nowrap;
}

/* Below about 1100px the row runs out of room. It folds into the same shape
   as the two-row header: logo and icons on top, search, then the menu along
   the bottom. */
@media (max-width: 1100px) {
	.pp-header--one-row .pp-header__bar {
		flex-wrap: wrap;
		align-items: center;
		gap: 0.6rem 1.5rem;
		padding-top: 0.6rem;
	}
	.pp-header--one-row .pp-header__actions { order: 2; margin-left: auto; }
	.pp-header--one-row .pp-search { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }
	.pp-header--one-row .pp-nav {
		order: 4;
		flex: 1 1 100%;
		min-width: 0;
		border-top: 1px solid var(--pp-line-soft);
	}
	/* So a menu too long for a phone scrolls sideways, rather than widening
	   the page. */
	.pp-header--one-row .pp-nav__list { min-width: 0; }
	.pp-header--one-row .pp-nav__list a { padding: 0.55rem 1.1rem; }
	.pp-header--one-row .pp-header__brand { padding: 0; }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.pp-hero {
	background-color: var(--pp-surface);
	border-bottom: 1px solid var(--pp-line);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 0;
}

.pp-hero__media {
	position: relative;
	min-height: clamp(320px, 38vw, 540px);
	background-color: var(--pp-wash);
	overflow: hidden;
}

.pp-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pp-hero__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 5vw, 5rem);
	max-width: 36rem;
}

.pp-hero__heading {
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	margin: 0 0 1.1rem;
}

.pp-hero__text {
	color: var(--pp-muted);
	font-size: 1.0625rem;
	margin: 0 0 2rem;
	max-width: 42ch;
}

.pp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
}

/* ==========================================================================
   7. Trust strip
   ========================================================================== */

.pp-trust { background-color: var(--pp-wash); }

.pp-trust__inner {
	max-width: var(--pp-max);
	margin: 0 auto;
	padding: 1.6rem 1.5rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	text-align: center;
}

.pp-trust__item {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--pp-wash-text);
}

/* ==========================================================================
   8. Sections
   ========================================================================== */

.pp-section { padding: clamp(3rem, 5.5vw, 4.75rem) 0 0; }

.pp-section__head { margin-bottom: 2.25rem; }

.pp-section__head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

.pp-section__head--centred { text-align: center; }
.pp-section__head--centred .pp-eyebrow { margin-left: auto; margin-right: auto; }

.pp-section__title {
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	margin: 0;
}

.pp-section__lede {
	color: var(--pp-muted);
	max-width: 54ch;
	margin: 0.75rem auto 0;
}

.pp-section__more-link {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.pp-section__cta { text-align: center; margin: 1.75rem 0 0; }

/* Instagram band (home page, under the journal row) */
.pp-instagram__icon {
	display: block;
	color: var(--pp-accent-text);
	line-height: 0;
	margin-bottom: 0.875rem;
}

/* ==========================================================================
   9. Product grid
   ========================================================================== */

.woocommerce ul.products { margin-bottom: 0; }

.woocommerce ul.products li.product {
	/* The sale badge is positioned against this. Without it the badge resolves
	   against some ancestor further up and lands on top of the price. */
	position: relative;
	background-color: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	overflow: hidden;
	padding: 0 0 1.25rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--pp-accent);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.75);
}

/* Square crops. The owner will not upload consistently framed photographs,
   and this keeps the grid honest when the photos are not. */
.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	margin-bottom: 1rem;
	border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--pp-display);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.3;
	margin: 0 1rem 0.35rem;
	padding: 0;
}

.woocommerce ul.products li.product .price {
	color: var(--pp-muted);
	display: block;
	font-size: 0.9375rem;
	margin-bottom: 1rem;
}

.woocommerce ul.products li.product .price del { opacity: 0.55; }
.woocommerce ul.products li.product .price ins {
	color: var(--pp-accent-text);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: auto 1rem 0;
	display: block;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce div.product span.onsale {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	right: auto;
	bottom: auto;
	z-index: 2;
	background-color: var(--pp-sage);
	color: var(--pp-on-accent);
	border-radius: var(--pp-radius);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	min-height: auto;
	min-width: auto;
	width: auto;
	height: auto;
	padding: 0.5em 0.85em;
	margin: 0;
}

/* "Sold out" is a badge of honour on handmade work, not an error. */
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title::after {
	content: "Sold";
	display: block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pp-muted);
	margin-top: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product:hover { transform: none; transition: none; }
}

/* ==========================================================================
   10. Gallery — the home page's own content
   ========================================================================== */

.pp-gallery { margin-top: 2.25rem; }

.pp-gallery .wp-block-gallery.has-nested-images figure.wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	border-radius: var(--pp-radius);
}

.pp-gallery .wp-block-gallery { gap: 1rem; }

/* If the owner writes a paragraph in the page content, keep it readable. */
.pp-gallery > p {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: var(--pp-muted);
}

/* ==========================================================================
   11. Classes band
   ========================================================================== */

.pp-classes {
	background-color: var(--pp-wash);
	margin-top: clamp(3rem, 5.5vw, 4.75rem);
}

.pp-classes__inner {
	max-width: var(--pp-max);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 0;
}

.pp-classes__media {
	position: relative;
	min-height: clamp(320px, 38vw, 520px);
	margin: 3.5rem 0;
	border-radius: var(--pp-radius);
	overflow: hidden;
}

.pp-classes__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pp-classes__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4.5vw, 4.5rem);
}

.pp-classes__heading {
	font-size: clamp(1.6rem, 2.9vw, 2.375rem);
	margin: 0 0 1rem;
}

.pp-classes__text {
	color: var(--pp-soft);
	font-size: 1.0625rem;
	margin: 0 0 1rem;
	max-width: 46ch;
}

.pp-classes__body .pp-button { align-self: flex-start; margin-top: 1rem; }

/* ==========================================================================
   12. Journal
   ========================================================================== */

.pp-journal {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
}

.pp-journal__item {
	background-color: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.pp-journal__media {
	display: block;
	aspect-ratio: 16 / 10;
	background-color: var(--pp-wash);
	overflow: hidden;
}

.pp-journal__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pp-journal__body { padding: 1.4rem 1.4rem 1.6rem; }

.pp-journal__date {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pp-muted);
	margin-bottom: 0.6rem;
}

.pp-journal__title { font-size: 1.3rem; line-height: 1.25; margin: 0 0 0.6rem; }
.pp-journal__title a { color: var(--pp-ink); text-decoration: none; }
.pp-journal__title a:hover { color: var(--pp-accent-text); }

.pp-journal__excerpt { color: var(--pp-muted); font-size: 0.9375rem; margin: 0 0 1rem; }

.pp-journal__more {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

/* The featured photo at the top of a journal post, the Journal page and the
   About page. Left alone it renders at full size — a portrait taken on a phone
   is two screens tall. Capped in height and scaled down whole, never cropped:
   a portrait simply comes out narrower, centred. Scoped to article.type-post /
   type-page so product photos, which also carry .wp-post-image, are
   untouched. */
article.type-post .wp-post-image,
article.type-page .wp-post-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(26rem, 55vh);
	margin: 0 auto 2rem;
	border-radius: var(--pp-radius);
}

/* ==========================================================================
   13. Testimonial
   ========================================================================== */

.pp-testimonial {
	background-color: var(--pp-panel);
	margin-top: clamp(3rem, 5.5vw, 4.75rem);
}

.pp-testimonial__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: clamp(3rem, 5vw, 4.5rem) 1.5rem;
	text-align: center;
}

.pp-testimonial__quote {
	font-family: var(--pp-display);
	font-size: clamp(1.25rem, 2.1vw, 1.6875rem);
	line-height: 1.45;
	font-style: italic;
	color: var(--pp-quote);
	margin: 0 0 1.4rem;
}

.pp-testimonial__author {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pp-quote-author);
}

/* ==========================================================================
   14. Footer
   ========================================================================== */

.site-footer {
	background-color: var(--pp-panel);
	color: var(--pp-panel-strong);
	padding: 0;
	margin-top: 0;
	font-size: 0.9375rem;
}

.site-footer .col-full { padding-top: 0; padding-bottom: 0; }

.pp-footer {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 2.5rem;
	padding: 4rem 0 2.25rem;
}

.pp-footer img {
	height: 24px;
	width: auto;
	display: block;
	margin-bottom: 1rem;
}

/* The stacked logo, in either header layout — the footer has the room. */
.pp-footer .pp-footer__logo {
	height: 64px;
	margin-bottom: 1.25rem;
}

.pp-footer__wordmark {
	font-family: var(--pp-display);
	font-size: 1.375rem;
	color: var(--pp-on-accent);
	margin-bottom: 0.875rem;
}

.pp-footer__blurb { color: var(--pp-panel-text); margin: 0 0 1.1rem; font-size: 0.875rem; }

.pp-footer__social { display: flex; gap: 0.875rem; }
.pp-footer__social a { color: var(--pp-panel-strong); line-height: 0; }
.pp-footer__social a:hover { color: var(--pp-on-accent); }
.pp-footer__social-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
}
/* Storefront underlines footer links (.site-footer a:not(.button)…); not this one */
.site-footer .pp-footer__social a.pp-footer__social-link:not(.button) { text-decoration: none; }
.pp-footer__social-link > span { line-height: 1.2; }

.pp-footer__heading {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pp-on-accent);
	margin-bottom: 1rem;
}

.pp-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	font-size: 0.875rem;
}

.pp-footer__list li { margin: 0; }
.pp-footer__list a { color: var(--pp-panel-text); text-decoration: none; }
.pp-footer__list a:hover { color: var(--pp-on-accent); }

.pp-footer__contact { color: var(--pp-panel-text); font-size: 0.875rem; margin: 0 0 0.5rem; }
.pp-footer__contact a { color: var(--pp-panel-text); text-decoration: none; }
.pp-footer__contact a:hover { color: var(--pp-on-accent); }

.pp-footer__base { border-top: 1px solid var(--pp-panel-line); }

.pp-footer__base-inner {
	max-width: var(--pp-max);
	margin: 0 auto;
	padding: 1.4rem 1.5rem;
	display: flex;
	justify-content: space-between;
	gap: 1.25rem;
	font-size: 0.8125rem;
	color: var(--pp-panel-faint);
}

.pp-footer__tagline { font-family: var(--pp-display); font-style: italic; }

/* ==========================================================================
   15. Single product
   ========================================================================== */

/* No sidebar anywhere — the design is full width throughout. */
.pp-no-sidebar .content-area {
	width: 100%;
	float: none;
	margin-right: 0;
}
.pp-no-sidebar .widget-area { display: none; }

/* The sale badge positions against this. Without it, it resolves against an
   ancestor further up and lands on top of the "one of a kind" label. */
.woocommerce div.product { position: relative; }

.single-product div.product .product_title {
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	margin-bottom: 0.4rem;
}

.single-product div.product p.price,
.single-product div.product span.price {
	color: var(--pp-accent-text);
	font-size: 1.625rem;
	font-weight: 600;
	font-family: inherit;
}

.pp-product__eyebrow { margin-bottom: 0.875rem; }

.pp-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: var(--pp-radius);
	padding: 0.45rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 1.4rem;
}

.pp-stock--in  { background-color: var(--pp-stock-bg); color: var(--pp-stock-text); }
.pp-stock--out { background-color: var(--pp-line); color: var(--pp-muted); }

.pp-ship {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--pp-muted);
	font-size: 0.875rem;
	margin: 0 0 1.75rem;
}

.pp-specs {
	border-top: 1px solid var(--pp-line);
	margin: 0;
	padding-top: 1.4rem;
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 0.6rem 1.25rem;
	font-size: 0.9375rem;
}

.pp-specs dt { color: var(--pp-muted); font-weight: 400; }
.pp-specs dd { margin: 0; }

.single-product div.product .woocommerce-product-details__short-description {
	color: var(--pp-soft);
	max-width: 48ch;
	margin-bottom: 1.5rem;
}

.woocommerce div.product form.cart div.quantity,
.woocommerce .quantity .qty {
	border: 1px solid var(--pp-field-line);
	border-radius: var(--pp-radius);
	background-color: var(--pp-surface);
}

.woocommerce .quantity .qty { padding: 0.8rem 0.4rem; }

/* --- maker strip --- */

.pp-maker {
	/* Storefront floats the gallery and the summary. Without clearing, this
	   strip tucks itself under the gallery in the left column instead of
	   spanning the full width beneath both. */
	clear: both;
	background-color: var(--pp-wash);
	border-radius: var(--pp-radius);
	padding: 1.5rem 1.75rem;
	display: flex;
	align-items: center;
	gap: 1.4rem;
	margin: 3.5rem 0 0;
}

.pp-maker__photo {
	width: 82px;
	height: 82px;
	border-radius: 999px;
	object-fit: cover;
	/* Portraits keep the face in the upper third; a centred crop in a small
	   circle lands on the shoulders. */
	object-position: 50% 22%;
	flex-shrink: 0;
}

.pp-maker__body { flex-grow: 1; }

.pp-maker__heading {
	font-family: var(--pp-display);
	font-size: 1.25rem;
	margin-bottom: 0.25rem;
}

.pp-maker__text { color: var(--pp-soft); font-size: 0.9375rem; margin: 0; max-width: 62ch; }
.pp-maker__link { flex-shrink: 0; }

.single-product .related.products > h2,
.single-product .up-sells > h2 {
	font-family: var(--pp-display);
	font-weight: 400;
	text-align: center;
	margin-bottom: 1.75rem;
}

.woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--pp-line); }
.woocommerce-tabs ul.tabs li a {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--pp-accent-text); }

/* ==========================================================================
   16. Cart, checkout, account

   Never cached at the edge, and never styled into ambiguity either — these are
   the pages where confusion costs money.
   ========================================================================== */

.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table,
.woocommerce-account .woocommerce-MyAccount-content {
	background-color: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
}

/* The account panel had a border and no padding, so every form and
   paragraph inside it sat against its edge. */
.woocommerce-account .woocommerce-MyAccount-content {
	padding: clamp(1.25rem, 3vw, 2.25rem);
}

.woocommerce-account .woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content > :last-child { margin-bottom: 0; }

/* Storefront gives the account menu 17.6% of the width, which on this
   full-width layout is too narrow for "Payment Methods" plus its icon — the
   label wrapped onto two lines. A fixed column fits the longest label; the
   panel takes the rest. Phones keep Storefront's stacked layout. */
@media (min-width: 768px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation {
		width: 15.5rem;
		float: left;
		margin-right: 2.5rem;
	}

	body.woocommerce-account .woocommerce-MyAccount-content {
		width: auto;
		float: none;
		display: flow-root;
	}
}

.woocommerce-checkout #payment { background-color: var(--pp-wash); }
.woocommerce-checkout #payment div.payment_box { background-color: var(--pp-surface); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--pp-surface); }

.woocommerce-info,
.woocommerce-message {
	background-color: var(--pp-surface);
	border-top-color: var(--pp-accent);
	color: var(--pp-ink);
}
.woocommerce-error { border-top-color: var(--pp-error); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	background-color: var(--pp-surface);
	border: 1px solid var(--pp-field-line);
	border-radius: var(--pp-radius);
	padding: 0.75em 0.85em;
	box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--pp-accent);
	outline: none;
	box-shadow: 0 0 0 2px rgba(215, 171, 99, 0.25);
}

.woocommerce form .form-row label { color: var(--pp-muted); font-size: 0.9rem; }
.woocommerce form .form-row .required { color: var(--pp-error); text-decoration: none; }

/* --- My Account navigation ---

   Each item is gold text in a pill. Four states, each owning one property so
   they never fight:
     hover      a faint gold wash              (background only)
     pressed    a stronger, still clear wash   (background only)
     selected   a permanent 2px gold border    (border only) — the page you
                are on. 2px matches the old focus ring's weight.
     keyboard   the gold focus ring, outside the pill (see "Focus rings").
   Every item carries a transparent 2px border so the selected one doesn't
   nudge the list when it gains its outline.

   SPECIFICITY — read before editing. Storefront sets the link padding with
     .hentry .entry-content .woocommerce-MyAccount-navigation ul
       li.woocommerce-MyAccount-navigation-link a   { padding: .875em 0 }
   four classes deep. EVERY rule here therefore leads with that same chain
   plus `body` (shortened below to "the deep selector"). An earlier version
   used it on the base rule only; the base rule then out-ranked this file's own
   hover and selected rules, and its transparent border silently erased the
   selected item's gold one. The plain selector after each covers any page not
   wrapped in .hentry. */

body .hentry .entry-content .woocommerce-MyAccount-navigation ul,
body .woocommerce-MyAccount-navigation ul {
	margin: 0;
	border-top: 0;
}

body .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link,
body .woocommerce-MyAccount-navigation ul li {
	border-bottom: 0;
	margin: 0 0 0.5rem;
}

/* Base */
body .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a,
body .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 0.5em 1.5em;
	border: 2px solid transparent;
	border-radius: 999px;
	background-color: transparent;
	color: var(--pp-accent-text);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

body .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a::before,
body .woocommerce-MyAccount-navigation ul li a::before {
	color: var(--pp-muted);
	opacity: 1;
}

/* Hover */
body .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:hover,
body .woocommerce-MyAccount-navigation ul li a:hover {
	background-color: rgba(215, 171, 99, 0.08);
	color: var(--pp-accent-text-hover);
}

/* Pressed — mouse held down, or a finger on the screen */
body .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:active,
body .woocommerce-MyAccount-navigation ul li a:active {
	background-color: rgba(215, 171, 99, 0.2);
}

/* Selected */
body .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a,
body .woocommerce-MyAccount-navigation ul li.is-active a {
	border-color: var(--pp-accent-text);
	color: var(--pp-accent-text);
}

body .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:hover::before,
body .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a::before,
body .woocommerce-MyAccount-navigation ul li a:hover::before,
body .woocommerce-MyAccount-navigation ul li.is-active a::before {
	color: var(--pp-accent-text);
}

/* --- Account dashboard ---

   Replaces WooCommerce's paragraph of inline links ("view your recent orders,
   manage your shipping and billing addresses…") with a card per section.
   Markup lives in woocommerce/myaccount/dashboard.php. */

.pp-dashboard__greeting {
	font-family: var(--pp-display);
	font-size: clamp(1.4rem, 2.4vw, 1.75rem);
	line-height: 1.2;
	color: var(--pp-ink);
	margin: 0 0 0.35rem;
}

.pp-dashboard__intro {
	color: var(--pp-muted);
	margin: 0 0 1.75rem;
}

.pp-dashboard__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem;
}

.pp-dashboard__card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.35rem;
	background-color: var(--pp-ground);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pp-dashboard__card:hover {
	border-color: var(--pp-accent-text);
	background-color: rgba(215, 171, 99, 0.05);
}

.pp-dashboard__card:active { background-color: rgba(215, 171, 99, 0.12); }

.pp-dashboard__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--pp-line);
	border-radius: 999px;
	color: var(--pp-accent-text);
}

.pp-dashboard__text { display: block; min-width: 0; }

.pp-dashboard__title {
	display: block;
	font-family: var(--pp-display);
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--pp-ink);
	margin-bottom: 0.2rem;
}

.pp-dashboard__card:hover .pp-dashboard__title { color: var(--pp-accent-text); }

.pp-dashboard__desc {
	display: block;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--pp-muted);
}

.pp-dashboard__signout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--pp-line);
	color: var(--pp-muted);
	font-size: 0.9375rem;
}

/* --- Show / hide password ---

   WooCommerce renders this as a real <button>, so it was picking up
   Storefront's generic light-grey button fill — a pale square stuck on the end
   of every password field. Now it sits inside the field: no fill, a hairline
   divider, and a gold eye. */

body .woocommerce form .password-input,
body .woocommerce-page form .password-input { position: relative; }

body .woocommerce form .password-input input,
body .woocommerce-page form .password-input input { padding-right: 3.5rem; }

body .woocommerce form .password-input .show-password-input,
body .woocommerce-page form .password-input .show-password-input {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: 3rem;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--pp-field-line);
	border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
	box-shadow: none;
	color: var(--pp-accent-text);
	line-height: 1;
	cursor: pointer;
}

body .woocommerce form .password-input .show-password-input::before,
body .woocommerce form .password-input .show-password-input::after,
body .woocommerce-page form .password-input .show-password-input::before,
body .woocommerce-page form .password-input .show-password-input::after {
	color: var(--pp-accent-text);
	margin: 0;
}

body .woocommerce form .password-input .show-password-input:hover,
body .woocommerce-page form .password-input .show-password-input:hover {
	background-color: rgba(215, 171, 99, 0.08);
}

body .woocommerce form .password-input .show-password-input:hover::before,
body .woocommerce form .password-input .show-password-input:hover::after,
body .woocommerce-page form .password-input .show-password-input:hover::before,
body .woocommerce-page form .password-input .show-password-input:hover::after,
body .woocommerce form .password-input .show-password-input.display-password::before,
body .woocommerce form .password-input .show-password-input.display-password::after,
body .woocommerce-page form .password-input .show-password-input.display-password::before,
body .woocommerce-page form .password-input .show-password-input.display-password::after {
	color: var(--pp-accent-text-hover);
}

body .woocommerce form .password-input .show-password-input:focus-visible,
body .woocommerce-page form .password-input .show-password-input:focus-visible {
	outline: 2px solid var(--pp-accent-text);
	outline-offset: -4px;
}

/* ==========================================================================
   16b. Coming-soon page

   WooCommerce's pre-launch page is a block template written for block
   themes. It colours text and icons with --wp--preset--color--contrast, which
   a classic theme like Storefront never defines, so everything fell back to
   #111111 — near-black on this dark ground. Defining the variable on the
   template's own wrapper fixes everything that uses it at once; the banner
   gets an explicit rule as well in case its colour comes from elsewhere.

   The site title is swapped for the logo in functions.php
   (prairiepottery_coming_soon_logo).

   All of this disappears at launch along with the page itself.
   ========================================================================== */

.woocommerce-coming-soon-default {
	--wp--preset--color--contrast: var(--pp-accent-text);
}

body .woocommerce-coming-soon-default .woocommerce-coming-soon-banner {
	color: var(--pp-accent-text);
	/* Title Case for this one fixed sentence ("Prairie Pottery Is Coming
	   Soon"). If the wording is ever edited to include "of" or "the", those
	   will capitalise too — change the text rather than this rule. */
	text-transform: capitalize;
}

/* The Log in button, matched to the site's primary button. Core's outline
   block style is (0,4,0) with its :not(.has-background), hence the length. */
body .woocommerce-coming-soon-default .wp-block-button .wp-block-button__link,
body .woocommerce-coming-soon-default .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: var(--pp-accent);
	border: 1px solid var(--pp-accent);
	border-radius: var(--pp-radius);
	color: var(--pp-on-accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.95em 1.9em;
	line-height: 1.3;
}

body .woocommerce-coming-soon-default .wp-block-button .wp-block-button__link:hover,
body .woocommerce-coming-soon-default .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--pp-accent-hover);
	border-color: var(--pp-accent-hover);
	color: var(--pp-on-accent);
}

/* The template ships placeholder social icons pointing at the front pages of
   linkedin.com, instagram.com and facebook.com — not Prairie Pottery's
   accounts — plus a "Powered by WooCommerce" credit. Hidden until real links
   exist; the footer on the live site carries the real ones from the
   Customizer. */
body .woocommerce-coming-soon-default .wp-block-social-links,
body .woocommerce-coming-soon-default .woocommerce-coming-soon-powered-by-woo {
	display: none;
}

.pp-coming-soon__brand { line-height: 0; }

/* ==========================================================================
   16c. WooCommerce blocks — block cart, block checkout, product blocks

   The classic shop pages wrap everything in .woocommerce, which is what the
   button and grid rules above hang on. Block pages have no such wrapper, so
   none of it reached them: the block cart showed Storefront's pale grey
   buttons and near-black product names.

   Every rule here starts with #page — Storefront's wrapper around the whole
   site. WooCommerce prints these blocks' stylesheets late in the page, after
   this one, so a rule of equal weight would lose; an id outweighs any number
   of classes, which makes the result certain rather than a matter of load
   order. Colours here are the ones WooCommerce hard-codes (white fields,
   #2b2d2f text, #cc1818 errors, blue focus rings); anything that inherits the
   text colour is already right and is left alone.
   ========================================================================== */

/* --- buttons -------------------------------------------------------------- */

#page .wp-block-button__link,
#page .wc-block-components-button:not(.is-link),
#page .wc-block-components-product-button__button {
	display: inline-block;
	border: 1px solid transparent;
	border-radius: var(--pp-radius);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.3;
	padding: 0.95em 1.9em;
	min-height: 0;
	box-shadow: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

/* Colours separately, so a colour the owner picks for one particular button
   in the editor (which adds .has-background / .has-text-color) still wins. */
#page .wp-block-button__link:not(.has-background),
#page .wc-block-components-button:not(.is-link),
#page .wc-block-components-product-button__button {
	background-color: var(--pp-accent);
	border-color: var(--pp-accent);
}
#page .wp-block-button__link:not(.has-text-color),
#page .wc-block-components-button:not(.is-link),
#page .wc-block-components-product-button__button {
	color: var(--pp-on-accent);
}

#page .wp-block-button__link:not(.has-background):hover,
#page .wc-block-components-button:not(.is-link):hover,
#page .wc-block-components-product-button__button:hover {
	background-color: var(--pp-accent-hover);
	border-color: var(--pp-accent-hover);
}
#page .wp-block-button__link:not(.has-text-color):hover,
#page .wc-block-components-button:not(.is-link):hover,
#page .wc-block-components-product-button__button:hover {
	color: var(--pp-on-accent);
}

/* WooCommerce draws its own blue focus ring with box-shadow; the site's gold
   one (outline, section 2) shows instead. */
#page .wc-block-components-button:not(.is-link):focus { box-shadow: none; }

/* Outline buttons: the same as .pp-button--outline — gold frame and label,
   gold fill on hover. */
#page .wp-block-button.is-style-outline > .wp-block-button__link,
#page .wc-block-components-button.is-style-outline:not(.is-link) {
	background-color: transparent;
	border-color: var(--pp-accent-text);
	color: var(--pp-accent-text);
}
#page .wp-block-button.is-style-outline > .wp-block-button__link:hover,
#page .wc-block-components-button.is-style-outline:not(.is-link):hover {
	background-color: var(--pp-accent-hover);
	border-color: var(--pp-accent-hover);
	color: var(--pp-on-accent);
}

#page .wc-block-components-button:not(.is-link):disabled,
#page .wc-block-components-button:not(.is-link)[aria-disabled="true"] {
	background-color: var(--pp-line);
	border-color: var(--pp-line);
	color: var(--pp-muted);
}

/* Proceed to Checkout and Place Order: the page's one big action. */
#page .wc-block-cart__submit-button,
#page .wc-block-components-checkout-place-order-button {
	width: 100%;
	font-size: 0.8125rem;
	padding: 1.15em 1.9em;
}

/* Text-style buttons (e.g. "Change address") read as links. */
#page .wc-block-components-button:not(.is-link).text,
#page .wc-block-components-button.is-link {
	background-color: transparent;
	border-color: transparent;
	color: var(--pp-accent-text);
	padding-left: 0;
	padding-right: 0;
}

/* --- product grids: "New in store" and other product blocks ----------------

   Made to match the classic shop grid (section 9): a card on the raised
   surface, square photo, title in the display face, gold sale price. Covers
   both generations of WooCommerce's product blocks — the older
   .wc-block-grid (Newest Products, Products by Category, …) and the newer
   Product Collection (.wc-block-product). */

#page .wc-block-grid__product,
#page .wc-block-product {
	position: relative;
	background-color: var(--pp-surface);
	border-radius: var(--pp-radius);
	overflow: hidden;
	padding: 0 0 1.25rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* The older grid spaces its products with transparent borders (8px either
   side, 16px below), not margins — so a real border here would delete the
   gaps. The card is painted inside them instead: background clipped to the
   padding box, edge drawn with an inset shadow. */
#page .wc-block-grid__product {
	background-clip: padding-box;
	box-shadow: inset 0 0 0 1px var(--pp-line);
}
#page .wc-block-grid__product:hover {
	box-shadow: inset 0 0 0 1px var(--pp-accent);
	transform: translateY(-3px);
}

/* The newer Product Collection uses real gaps, so a real border is fine. */
#page .wc-block-product { border: 1px solid var(--pp-line); }
#page .wc-block-product:hover {
	border-color: var(--pp-accent);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.75);
}

#page .wc-block-grid__product-image,
#page .wc-block-components-product-image { margin: 0 0 1rem; }

#page .wc-block-grid__product-image img,
#page .wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
}

#page .wc-block-grid__product-link,
#page .wc-block-grid__product-title,
#page .wc-block-components-product-title,
#page .wc-block-product .wp-block-post-title,
#page .wc-block-product .wp-block-post-title a {
	color: var(--pp-ink);
	text-decoration: none;
}

#page .wc-block-grid__product-title,
#page .wc-block-components-product-title,
#page .wc-block-product .wp-block-post-title {
	font-family: var(--pp-display);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.3;
	margin: 0 1rem 0.35rem;
	padding: 0;
}

#page .wc-block-grid__product-price,
#page .wc-block-components-product-price {
	color: var(--pp-muted);
	font-size: 0.9375rem;
	margin: 0 1rem 1rem;
}
#page .wc-block-grid__product-price del,
#page .wc-block-components-product-price del { opacity: 0.55; }
#page .wc-block-grid__product-price ins,
#page .wc-block-components-product-price ins {
	color: var(--pp-accent-text);
	font-weight: 600;
	text-decoration: none;
}

#page .wc-block-grid__product-add-to-cart,
#page .wc-block-components-product-button {
	margin: auto 1rem 0;
}
#page .wc-block-grid__product-add-to-cart .wp-block-button__link,
#page .wc-block-components-product-button__button {
	display: block;
	width: 100%;
}

/* Sale badge: the same sage tag as the classic grid and product page. */
#page .wc-block-grid__product-onsale,
#page .wc-block-components-product-sale-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	right: auto;
	z-index: 2;
	background-color: var(--pp-sage);
	border: 0;
	color: var(--pp-on-accent);
	border-radius: var(--pp-radius);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.5em 0.85em;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	#page .wc-block-grid__product,
	#page .wc-block-grid__product:hover,
	#page .wc-block-product,
	#page .wc-block-product:hover { transform: none; transition: none; }
}

/* --- the empty cart --------------------------------------------------------

   The sad face is WooCommerce's, drawn in the heading's text colour; gold
   here. The line and button under the heading come from
   prairiepottery_empty_cart_heading() in functions.php. */

#page .wc-block-cart__empty-cart__title {
	font-family: var(--pp-display);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 400;
	color: var(--pp-ink);
	margin: 1rem 0 0.75rem;
}

#page .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	background-color: var(--pp-accent-text);
	width: 3.5em;
	height: 3.5em;
	mask-size: 3.5em;
	-webkit-mask-size: 3.5em;
	margin-bottom: 1.25rem;
}

#page .pp-empty-cart__intro {
	max-width: 32rem;
	margin: 0 auto 1.75rem;
	text-align: center;
	color: var(--pp-soft);
}

#page .pp-empty-cart__actions {
	display: flex;
	justify-content: center;
	margin: 0 0 3.5rem;
}

#page .wp-block-woocommerce-empty-cart-block .wp-block-separator {
	border: 0;
	color: var(--pp-accent-text);
	opacity: 0.7;
}
#page .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
	color: var(--pp-accent-text);
}

/* --- cart ------------------------------------------------------------------ */

/* Product names in the cart and order summary: the piece's name in the
   display face, not a gold underlined link. Gold on hover. */
#page .wc-block-components-product-name {
	font-family: var(--pp-display);
	font-size: 1.0625rem;
	color: var(--pp-ink);
	text-decoration: none;
}
#page a.wc-block-components-product-name:hover { color: var(--pp-accent-text); }

/* On phones the Proceed to Checkout bar sticks to the bottom of the screen,
   on a white panel. */
#page .wc-block-cart .wc-block-cart__submit-container,
#page .wc-block-cart .wc-block-cart__submit-container--sticky {
	background-color: var(--pp-ground);
}
#page .wc-block-cart .wc-block-cart__submit-container--sticky::before {
	color: var(--pp-line);
}

#page .wc-block-components-order-summary-item__quantity {
	background-color: var(--pp-ground);
	border-color: var(--pp-field-line);
	box-shadow: 0 0 0 2px var(--pp-ground);
	color: var(--pp-ink);
}
#page .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
	color: var(--pp-ink);
}

/* --- checkout fields ---------------------------------------------------------

   WooCommerce paints every field white with #2b2d2f text. Same treatment as
   the classic forms: the dark ground, light text, a visible edge, gold when
   focused. */

#page .wc-block-components-text-input input,
#page .wc-block-components-textarea,
#page .wc-blocks-components-select .wc-blocks-components-select__container,
#page .wc-block-gateway-container,
#page .wc-block-gateway-container .wc-block-gateway-input {
	background-color: var(--pp-ground);
	border-color: var(--pp-field-line);
	color: var(--pp-ink);
}

#page .wc-blocks-components-select .wc-blocks-components-select__select {
	background-color: transparent;
	border-color: var(--pp-field-line);
	color: var(--pp-ink);
}

#page .wc-block-components-text-input input:focus,
#page .wc-block-components-textarea:focus,
#page .wc-blocks-components-select .wc-blocks-components-select__select:focus,
#page .wc-block-gateway-container .wc-block-gateway-input:focus {
	background-color: var(--pp-ground);
	border-color: var(--pp-accent-text);
	box-shadow: 0 0 0 1px var(--pp-accent-text);
	color: var(--pp-ink);
	outline: none;
}

#page .wc-block-components-text-input label,
#page .wc-blocks-components-select .wc-blocks-components-select__label,
#page .wc-block-gateway-container label {
	color: var(--pp-muted);
}

#page .wc-blocks-components-select .wc-blocks-components-select__expand { fill: var(--pp-ink); }
#page .wc-block-components-text-input .wc-block-components-text-input__date-icon { color: var(--pp-ink); }
#page .wc-block-components-address-autocomplete-container .wc-block-components-address-autocomplete-icon { background-color: var(--pp-muted); }

/* Address suggestions, as you type. */
#page .wc-block-components-address-autocomplete-suggestions {
	background-color: var(--pp-surface);
	border-color: var(--pp-line);
}
#page .wc-block-components-address-autocomplete-suggestions .suggestions-list li { color: var(--pp-ink); }
#page .wc-block-components-address-autocomplete-suggestions .suggestions-list li.active,
#page .wc-block-components-address-autocomplete-suggestions .suggestions-list li:hover,
#page .wc-block-components-address-autocomplete-suggestions .suggestions-list li:focus {
	background-color: var(--pp-accent);
	color: var(--pp-on-accent);
}
#page .wc-block-components-address-autocomplete-suggestions .woocommerce-address-autocomplete-branding {
	background-color: var(--pp-wash);
	color: var(--pp-soft);
}

/* Checkboxes and radio buttons: dark box, gold tick or dot. */
#page .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
#page .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked,
#page .wc-block-components-radio-control .wc-block-components-radio-control__input {
	background-color: var(--pp-ground);
	border-color: var(--pp-field-line);
}
#page .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--pp-accent-text); }
#page .wc-block-components-radio-control .wc-block-components-radio-control__input:checked { border-color: var(--pp-accent-text); }
#page .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before { background-color: var(--pp-accent-text); }

/* The chosen payment or delivery option is outlined. WooCommerce draws it 2px
   in the text colour — a thick light frame here. A fine gold one instead;
   the card fields inside are coloured by prairiepottery_square_card_style(). */
#page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
#page .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1px var(--pp-accent-text);
	border-radius: var(--pp-radius);
}

/* Errors. WooCommerce's #cc1818 is hard to read on a dark ground; the site's
   error colour is the same red, lightened to be legible. */
#page .wc-block-components-validation-error,
#page .wc-block-components-checkbox.has-error,
#page .wc-block-components-checkbox.has-error a,
#page .wc-block-components-text-input.has-error label,
#page .has-error .wc-blocks-components-select .wc-blocks-components-select__label,
#page .has-error .wc-blocks-components-select .wc-blocks-components-select__select,
#page .wc-block-gateway-container .wc-block-gateway-input.has-error + label {
	color: var(--pp-error);
}
#page .wc-block-components-text-input.has-error input,
#page .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input,
#page .has-error .wc-blocks-components-select .wc-blocks-components-select__container,
#page .wc-block-gateway-container .wc-block-gateway-input.has-error {
	border-color: var(--pp-error);
}
#page .wc-block-components-text-input.has-error input:focus { box-shadow: 0 0 0 1px var(--pp-error); }
#page .has-error .wc-blocks-components-select .wc-blocks-components-select__expand { fill: var(--pp-error); }

/* Coupon chips in the order summary. */
#page .wc-block-components-chip .wc-block-components-chip__remove { background-color: var(--pp-wash); }
#page .wc-block-components-chip .wc-block-components-chip__remove-icon { fill: var(--pp-ink); }

/* --- notices: "added to cart", coupon applied, errors ------------------- */

#page .wc-block-components-notice-banner {
	background-color: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-left-width: 3px;
	color: var(--pp-ink);
}
#page .wc-block-components-notice-banner > svg {
	background-color: var(--pp-accent);
	fill: var(--pp-on-accent);
}
#page .wc-block-components-notice-banner.is-success { border-color: var(--pp-sage); }
#page .wc-block-components-notice-banner.is-success > svg { background-color: var(--pp-sage); }
#page .wc-block-components-notice-banner.is-info,
#page .wc-block-components-notice-banner.is-warning { border-color: var(--pp-accent-text); }
#page .wc-block-components-notice-banner.is-error { border-color: var(--pp-error); }
#page .wc-block-components-notice-banner.is-error > svg { background-color: var(--pp-error); fill: var(--pp-ground); }

/* WooCommerce marks these !important, so the only way past is the same. */
#page .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward,
#page .wc-block-components-notice-banner > .wc-block-components-button {
	color: var(--pp-accent-text) !important;
}

/* --- the mini-cart drawer --------------------------------------------------

   Not used by this theme's header, but a Mini-Cart block added anywhere would
   slide out a white panel. The drawer is attached outside #page, hence body. */
body .wc-block-components-drawer,
body :where(.wp-block-woocommerce-mini-cart-contents) {
	background-color: var(--pp-surface);
	color: var(--pp-ink);
}

/* ==========================================================================
   17. Tablet and phone

   Most traffic will arrive on a phone, from Instagram.
   ========================================================================== */

@media (max-width: 1024px) {
	.pp-header__bar { flex-wrap: wrap; gap: 1rem 1.5rem; }
	.pp-search { order: 3; flex-basis: 100%; max-width: none; }
	.pp-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
	.pp-journal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	body { font-size: 1rem; }

	.pp-announcement { font-size: 0.75rem; padding: 0.55rem 1rem; }

	.pp-header__bar { padding: 0.5rem 0; gap: 0.5rem 1rem; }
	.pp-header__brand img { height: 20px; }
	.pp-header__brand .pp-header__logo--stacked { height: 34px; }
	.pp-header--one-row .pp-nav__list a { padding: 0.5rem 0.75rem; }
	.pp-header__action span { display: none; }
	.pp-header__actions { gap: 1.1rem; }

	.pp-nav { padding: 0 0.5rem; }
	.pp-nav__list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.pp-nav__list::-webkit-scrollbar { display: none; }
	.pp-nav__list a { padding: 0.5rem 0.75rem; font-size: 0.7rem; white-space: nowrap; }

	/* Stack the hero, photograph first — the picture is the pitch. */
	.pp-hero { grid-template-columns: 1fr; }
	.pp-hero__media { min-height: 62vw; }
	.pp-hero__body { max-width: none; padding: 1.75rem var(--pp-gutter) 2.25rem; }
	.pp-hero__actions .pp-button { flex-grow: 1; text-align: center; }

	.pp-trust__inner { grid-template-columns: 1fr; gap: 0.6rem; padding: 1.1rem 1rem; }

	.pp-section__head--split { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

	.pp-classes__inner { grid-template-columns: 1fr; padding: 0; }
	.pp-classes__media { margin: 0; min-height: 62vw; border-radius: 0; }
	.pp-classes__body { padding: 1.75rem var(--pp-gutter) 2.25rem; }
	.pp-classes__body .pp-button { align-self: stretch; text-align: center; }

	.pp-journal { grid-template-columns: 1fr; gap: 1.25rem; }

	.pp-maker { flex-direction: column; text-align: center; }
	.pp-maker__text { max-width: none; }

	.pp-footer { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.5rem 0 1.5rem; }
	.pp-footer__base-inner { flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; }

	/* Two across, not one. A small catalogue looks abandoned in one column. */
	.woocommerce ul.products li.product {
		width: 48% !important;
		margin-right: 4% !important;
		clear: none !important;
		float: left;
	}
	.woocommerce ul.products li.product:nth-child(2n) { margin-right: 0 !important; }
	.woocommerce ul.products li.product:nth-child(2n+1) { clear: both !important; }

	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.9375rem; }
	.woocommerce ul.products li.product .price { font-size: 0.875rem; }
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product .added_to_cart {
		margin: auto 0.6rem 0;
		padding: 0.9em 0.5em;
		font-size: 0.65rem;
		letter-spacing: 0.1em;
	}

	.pp-specs { grid-template-columns: 6rem 1fr; }

	.single-product div.product form.cart .button { width: 100%; }
	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; }

	.pp-gallery .wp-block-gallery { gap: 0.6rem; }
}

/* ==========================================================================
   17b. The phone header (767px and narrower), both layouts

   One row: logo, a compact search box, and the menu button (☰). The menu
   — Home, Shop, Gallery, Classes, Journal, About, then My Account and Cart —
   opens as a panel under the header (header.js adds .is-menu-open). The
   account and cart icons leave the header; they're in the menu, and in the
   bottom bar.

   Tablets and desktops are untouched: everything here is inside the media
   query, except three things hidden by default so they only ever appear on
   a phone.
   ========================================================================== */

.pp-menu-toggle,
.pp-search__icon,
.site-header .pp-nav__list li.pp-nav__extra {
	display: none;
}

@media (max-width: 767px) {

	/* --- the row --- */

	.site-header .pp-header__bar {
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.7rem;
		padding: 0.55rem 0;
	}

	.site-header .pp-header__brand { order: 1; flex-shrink: 0; padding: 0; }
	/* Both layouts show the stacked logo on a phone — in the two-row header
	   the long logo's <picture> swaps to it (prairiepottery_logo()). */
	.site-header .pp-header__brand img,
	.site-header .pp-header__brand .pp-header__logo--stacked { height: 32px; }
	.pp-header__brand picture { display: block; }

	.site-header .pp-header__actions { display: none; }

	/* Search: takes whatever room is left; magnifier instead of the word. */
	.site-header .pp-search {
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
		margin: 0;
	}
	.site-header .pp-search__input {
		min-width: 0;
		padding: 0.4rem 0.55rem;
		font-size: 1rem; /* 16px: below that, iPhones zoom the page in on tap */
	}
	/* Smaller than what you type, so "Search products…" fits a narrow phone. */
	.site-header .pp-search__input::placeholder { font-size: 0.875rem; }
	.site-header .pp-search__submit {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 0.7rem;
	}
	.site-header .pp-search__icon { display: block; }
	.site-header .pp-search__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* --- the menu button --- */

	.site-header .pp-menu-toggle {
		order: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 2.5rem;
		height: 2.5rem;
		margin: 0;
		padding: 0;
		background-color: transparent;
		border: 1px solid var(--pp-line);
		border-radius: var(--pp-radius);
		color: var(--pp-ink);
		cursor: pointer;
	}
	.site-header .pp-menu-toggle:hover,
	.site-header.is-menu-open .pp-menu-toggle {
		background-color: rgba(215, 171, 99, 0.08);
		border-color: var(--pp-accent-text);
		color: var(--pp-accent-text);
	}

	/* Three bars, which cross into an ✕ when open. */
	.pp-menu-toggle__bars,
	.pp-menu-toggle__bars::before,
	.pp-menu-toggle__bars::after {
		display: block;
		width: 18px;
		height: 2px;
		border-radius: 1px;
		background-color: currentColor;
	}
	.pp-menu-toggle__bars { position: relative; }
	.pp-menu-toggle__bars::before,
	.pp-menu-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}
	.pp-menu-toggle__bars::before { top: -6px; }
	.pp-menu-toggle__bars::after { top: 6px; }
	.site-header.is-menu-open .pp-menu-toggle__bars { background-color: transparent; }
	.site-header.is-menu-open .pp-menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
	.site-header.is-menu-open .pp-menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

	/* --- the menu panel --- */

	/* Closed: gone. The one-row header keeps the menu inside the top bar,
	   the two-row header in a row of its own — both are covered. */
	.site-header .pp-header__bar > .pp-nav,
	.site-header .pp-header__navrow {
		display: none;
	}

	/* Open: a panel hung from the bottom of the header (which is sticky, so
	   the panel positions against it). Scrolls on its own if the phone is
	   short. */
	.site-header.is-menu-open .pp-header__bar > .pp-nav,
	.site-header.is-menu-open .pp-header__navrow {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		padding: 0.4rem var(--pp-gutter) 0.9rem;
		max-height: calc(100vh - var(--pp-header-h, 4rem));
		max-height: calc(100dvh - var(--pp-header-h, 4rem));
		overflow-y: auto;
		background-color: var(--pp-surface);
		border-top: 1px solid var(--pp-line-soft);
		border-bottom: 1px solid var(--pp-line);
		box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.85);
	}
	.site-header .pp-header__navrow .pp-nav { margin: 0; padding: 0; max-width: none; }

	.site-header .pp-nav__list {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		overflow: visible;
	}
	.site-header .pp-nav__list li { display: block; }

	.site-header .pp-nav__list a {
		display: block;
		padding: 0.85rem 0.9rem;
		font-size: 0.8125rem;
		white-space: normal;
		border-bottom: 0;
		border-left: 3px solid transparent;
	}

	/* The page you're on — or, on the home page, the section in view — gets
	   a gold bar down its left edge instead of the desktop underline. */
	.site-header .pp-nav__list a:hover,
	.site-header .pp-nav__list:not(.is-spying) .current-menu-item > a,
	.site-header .pp-nav__list:not(.is-spying) .current_page_item > a,
	.site-header .pp-nav__list.is-spying li.is-current > a {
		color: var(--pp-accent-text);
		border-left-color: var(--pp-accent-text);
		background-color: rgba(215, 171, 99, 0.06);
	}

	/* My Account and Cart, set off below the pages. */
	.site-header .pp-nav__list li.pp-nav__extra { display: block; }
	.site-header .pp-nav__list li.pp-nav__extra--first {
		border-top: 1px solid var(--pp-line-soft);
		margin-top: 0.4rem;
		padding-top: 0.4rem;
	}
	.pp-nav__extra .pp-header__count { margin-left: 0.5rem; vertical-align: 1px; }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	.pp-menu-toggle__bars,
	.pp-menu-toggle__bars::before,
	.pp-menu-toggle__bars::after {
		transition: transform 0.2s ease, background-color 0.2s ease;
	}
}

/* ==========================================================================
   18. Print — customers do print order confirmations
   ========================================================================== */

@media print {
	.pp-announcement, .site-header, .site-footer, .pp-hero, .pp-trust,
	.pp-classes, .pp-testimonial, .pp-maker, .storefront-breadcrumb {
		display: none !important;
	}
	body { background: #fff; color: #000; font-size: 12pt; }
	a { text-decoration: none; color: #000; }
}