/*
Theme Name: Arjade Chronicle
Theme URI: https://tome.arjade.net
Author: Arjade Productions
Author URI: https://www.arjade.net
Description: The Chronicle for Arjade Productions. Dark greys, emerald, card frames and torn edges, matching www.arjade.net.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: All rights reserved
Text Domain: arjade-chronicle
*/

/*
======================================================================
  ARJADE CHRONICLE  -  EXTRA STYLING  (style.css)
======================================================================
  WHERE THINGS LIVE IN THIS THEME
    * COLOURS AND FONTS are in theme.json. You can also change them
      without code in WordPress: Appearance > Editor > Styles.
    * PAGE LAYOUTS are in the "templates" folder, and can be edited
      visually in Appearance > Editor > Templates.
    * The HEADER and FOOTER are in the "parts" folder (Appearance >
      Editor > Patterns > Template Parts).
    * This file adds the things theme.json cannot do: the card
      frames, torn edges, textures and a few finishing touches.

  If you edit a template in WordPress's editor, WordPress keeps your
  edited copy and ignores the file in this theme from then on. To go
  back to the theme's version, use "Reset" on that template.
======================================================================
*/


/* ------------------------------------------------------------------
   HEADINGS: Inlander without its joined-up letter pairs (LL, WH).
   Delete this block to bring the joined shapes back.
------------------------------------------------------------------ */
h1, h2, h3, h4, .chronicle-brand {
	font-variant-ligatures: none;
	font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
	text-wrap: balance;
}


/* ------------------------------------------------------------------
   SMALL LABELS (the little line above some headings)
------------------------------------------------------------------ */
.kicker,
.taxonomy-category.wp-block-post-terms,
.taxonomy-product_cat.wp-block-post-terms {
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--emerald-light);
}
.taxonomy-category.wp-block-post-terms a,
.taxonomy-product_cat.wp-block-post-terms a { color: inherit; text-decoration: none; }
.taxonomy-category.wp-block-post-terms a:hover,
.taxonomy-product_cat.wp-block-post-terms a:hover { text-decoration: underline; }


/* ------------------------------------------------------------------
   HEADER (top bar)
------------------------------------------------------------------ */
.chronicle-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--grey-darkest);
	box-shadow: 0 1px 0 var(--wp--preset--color--bronze-dark);
}
/* Logged-in users see WordPress's admin bar; keep the header below it. */
.admin-bar .chronicle-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .chronicle-header { top: 0; position: relative; } }

.chronicle-brand { font-family: var(--wp--preset--font-family--inlander); font-size: 1.45rem; margin: 0; white-space: nowrap; }
.chronicle-brand a { color: var(--wp--preset--color--text-bright); text-decoration: none; }
.chronicle-header .wp-block-navigation a { color: var(--wp--preset--color--text); text-decoration: none; }
.chronicle-header .wp-block-navigation a:hover { color: var(--wp--preset--color--text-bright); text-decoration: underline; text-decoration-color: var(--wp--preset--color--emerald-bright); }
.chronicle-header .wp-block-button__link { padding: 0.55rem 1.1rem; font-size: 0.95rem; }

/* The phone menu that slides over the page. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
	background-color: var(--wp--preset--color--grey-darkest) !important;
	color: var(--wp--preset--color--text-bright) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--text-bright); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.2rem; }

/* Keep menu items and the Freebies button on one line each. */
.chronicle-header .wp-block-navigation-item__content,
.chronicle-header .wp-block-button__link { white-space: nowrap; }
/* WooCommerce adds an account icon and a cart icon beside the menu; this
   keeps them neatly spaced. The account icon is where buyers find their
   downloads again later. */
.chronicle-header .wp-block-woocommerce-customer-account a,
.chronicle-header .wc-block-mini-cart__button { color: var(--wp--preset--color--text-bright); }
/* Tablets and small laptops: a slightly smaller name and tighter spacing. */
@media (max-width: 60em) {
	.chronicle-brand { font-size: 1.2rem; }
	.chronicle-header .wp-block-navigation { gap: 1rem; font-size: 1rem; }
	.chronicle-header .wp-block-group.is-layout-flex { gap: 0.75rem; }
}
@media (max-width: 37.5em) {
	.chronicle-brand { font-size: 0.95rem; }
	.chronicle-header .wp-block-button__link { padding: 0.45rem 0.6rem; font-size: 0.85rem; }
	.chronicle-header .wp-block-group.is-layout-flex { gap: 0.35rem; }
	/* Not enough room on a phone: the account icon is hidden here only.
	   Buyers still reach their downloads from their order email. */
	.chronicle-header .wp-block-woocommerce-customer-account { display: none; }
}


/* ------------------------------------------------------------------
   PAGE SECTIONS AND TORN EDGES
   A section with the class "torn" gets a ragged top edge in its own
   colour, poking up into the section above.
------------------------------------------------------------------ */
.chronicle-section { position: relative; padding-top: 4rem; padding-bottom: 4.5rem; }
.tone-dark { background-color: var(--wp--preset--color--grey-dark); }
.tone-mid { background-color: var(--wp--preset--color--grey-mid); }
/* SCALES SECTIONS (green "tone-scales" and grey "tone-scales-grey")
   * The scales are ONE large picture stretched to cover the whole section,
     so the repeating pattern never shows and the scales look big.
   * The top and bottom fade to plain dark grey so each section melts into
     its neighbours. Change 6rem to make that fade taller or shorter.
   * The 0.62 (green) and 0.8 (grey) numbers set how dark the scales are
     (bigger = darker). The green is kept lighter on purpose so those
     sections stand out. */
:root {
	--scales-fade: linear-gradient(to bottom,
		var(--wp--preset--color--grey-dark) 0,
		rgba(28, 29, 31, 0) 6rem,
		rgba(28, 29, 31, 0) calc(100% - 6rem),
		var(--wp--preset--color--grey-dark) 100%);
}
.tone-scales-grey {
	background-color: var(--wp--preset--color--grey-dark);
	background-image: var(--scales-fade), linear-gradient(rgba(18, 19, 20, 0.8), rgba(18, 19, 20, 0.8)), url("assets/images/texture-scales-grey.jpg");
	background-size: auto, auto, cover;
	background-position: center, center, center;
}
.tone-scales {
	background-color: var(--wp--preset--color--grey-dark);
	background-image: var(--scales-fade), linear-gradient(rgba(10, 22, 14, 0.62), rgba(10, 22, 14, 0.62)), url("assets/images/texture-scales.jpg");
	background-size: auto, auto, cover;
	background-position: center, center, center;
}
.torn::before {
	content: "";
	position: absolute; left: 0; right: 0; top: -22px; height: 23px;
	background: inherit;
	clip-path: polygon(0 100%, 0 45%, 2% 62%, 4% 30%, 7% 55%, 9% 22%, 12% 48%, 15% 35%,
		17% 66%, 20% 28%, 23% 52%, 26% 18%, 28% 44%, 31% 60%, 34% 26%, 37% 50%,
		40% 14%, 42% 46%, 45% 64%, 48% 30%, 51% 52%, 54% 20%, 57% 42%, 60% 62%,
		63% 24%, 66% 50%, 69% 34%, 72% 60%, 75% 16%, 78% 46%, 81% 28%, 84% 58%,
		87% 36%, 90% 64%, 93% 22%, 96% 50%, 98% 32%, 100% 56%, 100% 100%);
	z-index: 2;
}
/* On the scales sections, the torn edge is plain dark grey to match their fade. */
.tone-scales.torn::before,
.tone-scales-grey.torn::before { background: var(--wp--preset--color--grey-dark); }
@media (max-width: 37.5em) {
	.chronicle-section { padding-top: 3rem; padding-bottom: 3.5rem; }
}

.section-intro { color: var(--wp--preset--color--text-soft); font-size: 1.2rem; }


/* ------------------------------------------------------------------
   CARD FRAMES: your Textbox artwork around each post card.
   Used by the post lists (class "chronicle-cards") and the
   ready-made boxes (class "frame-box").
------------------------------------------------------------------ */
.chronicle-cards .wp-block-post,
.frame-box {
	border: 26px solid var(--wp--preset--color--bronze-dark);
	border-image: url("assets/images/frame-card.png") 48 fill / 26px stretch;
	padding: 0.4rem 0.4rem 0.8rem;
}
.chronicle-cards .wp-block-post { display: flex; flex-direction: column; gap: 0.6rem; }
.chronicle-cards .wp-block-post > *:not(.wp-block-post-featured-image) { margin-left: 0.4rem; margin-right: 0.4rem; }
.chronicle-cards .wp-block-post-featured-image { margin: 0; }
.chronicle-cards .wp-block-post-featured-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border: 1px solid var(--wp--preset--color--bronze-dark); }
.chronicle-cards .wp-block-post-title { margin: 0; font-size: 1.4rem; }
.chronicle-cards .wp-block-post-title a { color: var(--wp--preset--color--text-bright); text-decoration: none; }
.chronicle-cards .wp-block-post-title a:hover { text-decoration: underline; }
.chronicle-cards .wp-block-post-excerpt { font-size: 1.0625rem; line-height: 1.45; margin: 0; }
.chronicle-cards .wp-block-post-excerpt__excerpt { margin: 0; }
.chronicle-cards .wp-block-read-more { margin-top: auto; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.chronicle-cards .wp-block-post:hover { filter: brightness(1.12); }
@media (max-width: 37.5em) {
	.chronicle-cards .wp-block-post, .frame-box { border-width: 20px; border-image-width: 20px; }
}

/* Date and reading time on one line. */
.post-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; color: var(--wp--preset--color--text-soft); font-size: 0.95rem; }
.post-meta p, .post-meta .wp-block-post-date, .post-meta .wp-block-post-author-name { margin: 0; }
.reading-time::before { content: "· "; }

/* The big featured card on the Chronicle front page. */
.chronicle-featured .wp-block-post { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.75rem; align-items: center; }
.chronicle-featured .wp-block-post-featured-image img { aspect-ratio: 16 / 10; }
.chronicle-featured .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); }
@media (max-width: 50em) {
	.chronicle-featured .wp-block-post { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------------
   CHRONICLE FRONT PAGE: the opening section
------------------------------------------------------------------ */
.chronicle-hero .wp-block-columns { align-items: center; gap: 3rem; }
.chronicle-hero img { border: 1px solid var(--wp--preset--color--bronze-dark); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); }
.chronicle-hero .signoff { font-style: italic; color: var(--wp--preset--color--text-soft); }


/* ------------------------------------------------------------------
   BROWSE BY CATEGORY: the list shown as rounded tags
------------------------------------------------------------------ */
.chronicle-trails.wp-block-categories,
.chronicle-trails .wp-block-categories { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.chronicle-trails li { margin: 0; }
.chronicle-trails li a {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--wp--preset--color--bronze);
	border-radius: 3px;
	background: var(--wp--preset--color--grey-darkest);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.chronicle-trails li a:hover { background: var(--wp--preset--color--emerald-deep); color: var(--wp--preset--color--text-bright); }


/* ------------------------------------------------------------------
   BUTTONS: the see-through second style ("Outline" in the editor)
------------------------------------------------------------------ */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: rgba(20, 21, 22, 0.55);
	color: #ffffff;
	border-color: var(--wp--preset--color--bronze);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--emerald-deep); }
.wp-element-button, .wp-block-button__link { box-shadow: 0 3px 0 var(--wp--preset--color--emerald-deep); }
/* On phones, buttons in the page body go full width and stack (not in the header). */
@media (max-width: 37.5em) {
	main .wp-block-buttons { flex-direction: column; align-items: stretch; }
	main .wp-block-buttons .wp-block-button { width: 100%; }
	main .wp-block-buttons .wp-block-button__link { width: 100%; text-align: center; }
}
:focus-visible { outline: 3px solid var(--wp--preset--color--emerald-light); outline-offset: 3px; }


/* ------------------------------------------------------------------
   SINGLE POSTS
------------------------------------------------------------------ */
.single-post-header { padding-top: 3rem; }
.single-post-header .wp-block-post-title { margin-top: 0.4rem; }
/* The big picture at the top of a post: kept to a wide letterbox shape so a
   tall picture doesn't push the post text off the screen. */
.single-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 8;
	max-height: 70vh;
	object-fit: cover;
	object-position: center 30%;
	border: 1px solid var(--wp--preset--color--bronze-dark);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
@media (max-width: 37.5em) { .single-featured-image img { aspect-ratio: 4 / 3; } }
/* "By Raymond J. Hicks" */
.post-meta .wp-block-post-author-name::before { content: "By "; }
.entry-content > p:first-child { font-size: 1.25rem; color: var(--wp--preset--color--text-bright); }
.entry-content a { text-decoration: underline; text-underline-offset: 0.2em; }
.entry-content img { height: auto; }
.entry-content figcaption { color: var(--wp--preset--color--text-soft); font-style: italic; font-size: 0.95rem; }
.entry-content ul li::marker { color: var(--wp--preset--color--emerald-bright); }
/* QUOTE BOXES (the "Quote" block in the editor, used for narrative breaks):
   a deep green box with faint green scales and a bronze border.
   The plain green (shown if the scales picture can't
   load), border and text size are set in theme.json under "core/quote";
   the scales and spacing are here.
   The 0.62 sets how dark the scales are: higher = darker and fainter.
   BORDER THICKNESS: change "width" under "core/quote" in theme.json (now 3px). */
.wp-block-quote {
	background-image: linear-gradient(rgba(10, 22, 14, 0.62), rgba(10, 22, 14, 0.62)), url("assets/images/texture-scales.jpg");
	background-size: cover;
	background-position: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.wp-block-quote > p:first-child { margin-top: 0; }
.wp-block-quote > p:last-child { margin-bottom: 0; }
.wp-block-quote cite { display: block; margin-top: 0.75rem; font-size: 1rem; font-style: normal; color: var(--wp--preset--color--emerald-light); }


/* ------------------------------------------------------------------
   READY-MADE BOXES for posts (press + and look under "Arjade")
------------------------------------------------------------------ */
.frame-box { padding: 1rem 1.25rem 1.25rem; }
.frame-box h3, .frame-box h4 { margin-top: 0.3rem; }
.download-box .file-facts { color: var(--wp--preset--color--text-soft); font-size: 0.95rem; }
.author-note { font-style: italic; }
.author-note .signature { font-style: normal; text-align: right; color: var(--wp--preset--color--text-soft); }


/* ------------------------------------------------------------------
   RITES OF PASSAGE BANNER (compact, near the bottom of the front page)
------------------------------------------------------------------ */
.rites-banner .wp-block-columns { align-items: center; gap: 2rem; }
.rites-banner img { max-width: 9rem; filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.65)); }
@media (max-width: 37.5em) { .rites-banner img { max-width: 7rem; } }


/* ------------------------------------------------------------------
   MAILING LIST FORM (sends people to the same list as www.arjade.net)
------------------------------------------------------------------ */
.signup-form { margin: 1.25rem 0 0; }
.signup-form label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.signup-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.signup-form input[type="email"] {
	flex: 1 1 15rem; min-width: 0;
	font: inherit;
	color: var(--wp--preset--color--text-bright);
	background: var(--wp--preset--color--grey-darkest);
	border: 1px solid var(--wp--preset--color--bronze);
	border-radius: 3px;
	padding: 0.75rem 0.9rem;
}
.signup-form button {
	font: inherit; font-weight: 600; cursor: pointer;
	color: #fff;
	background: var(--wp--preset--color--emerald);
	border: 1px solid var(--wp--preset--color--bronze);
	border-radius: 3px;
	box-shadow: 0 3px 0 var(--wp--preset--color--emerald-deep);
	padding: 0.75rem 1.4rem;
}
.signup-form button:hover { background: var(--wp--preset--color--emerald-bright); }
.signup-note { font-size: 0.95rem; color: var(--wp--preset--color--text-soft); margin-top: 1rem; }
.trap { position: absolute; left: -9999px; }
@media (max-width: 37.5em) {
	.signup-row { flex-direction: column; }
	.signup-form input[type="email"] { flex: 0 0 auto; width: 100%; }
	.signup-form button { width: 100%; }
}


/* ------------------------------------------------------------------
   FOOTER
------------------------------------------------------------------ */
.chronicle-footer { font-size: 1.0625rem; }
/* Four columns on a computer, three on a tablet, two on a phone. */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem 2.5rem; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
@media (max-width: 60em) {
	.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
	.footer-about { grid-column: 1 / -1; }
}
@media (max-width: 37.5em) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}
.chronicle-footer .footer-brand { font-family: var(--wp--preset--font-family--inlander); font-size: 1.7rem; color: var(--wp--preset--color--text-bright); margin-bottom: 0.6rem; }
.chronicle-footer .footer-intro { color: var(--wp--preset--color--text-soft); }
.chronicle-footer h2 {
	font-family: var(--wp--preset--font-family--crimson-pro);
	font-size: 0.875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--emerald-light);
	margin-bottom: 0.8rem;
}
.chronicle-footer ul { list-style: none; margin: 0; padding: 0; }
.chronicle-footer li { margin-bottom: 0.15rem; }
.chronicle-footer li a { display: inline-block; padding: 0.3rem 0; color: var(--wp--preset--color--text); text-decoration: none; }
.chronicle-footer li a:hover { color: var(--wp--preset--color--emerald-light); text-decoration: underline; }
.footer-base { border-top: 1px solid var(--wp--preset--color--bronze-dark); padding-top: 1.5rem; margin-top: 2.5rem; color: var(--wp--preset--color--text-soft); font-size: 0.95rem; }
.footer-base p { margin: 0; }
.footer-base .signoff { font-style: italic; color: var(--wp--preset--color--text); }


/* ------------------------------------------------------------------
   THE SHOP (WooCommerce)
   Product cards use the same card frame as posts. Covers are shown
   whole, never cropped. Forms in the cart and checkout are dark.
------------------------------------------------------------------ */
.woocommerce-breadcrumb, .wc-block-breadcrumbs { color: var(--wp--preset--color--text-soft); font-size: 0.95rem; }
.wc-block-breadcrumbs a, .woocommerce-breadcrumb a { color: var(--wp--preset--color--text-soft); }
.shop-intro .wp-block-query-title { margin-top: 0.3rem; }
/* The general shop introduction only shows on the main Shop page, not on category pages. */
body:not(.woocommerce-shop) .shop-only-intro { display: none; }

.arjade-products .wc-block-product {
	border: 26px solid var(--wp--preset--color--bronze-dark);
	border-image: url("assets/images/frame-card.png") 48 fill / 26px stretch;
	padding: 0.9rem 0.6rem 1rem;
	display: flex; flex-direction: column; gap: 0.5rem;
}
.arjade-products .wc-block-components-product-image { margin-bottom: 0.4rem; }
/* Cards are never squeezed narrower than about 240 pixels: on narrower
   screens they drop to two across, then one. */
.arjade-products .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)) !important;
	gap: 1.75rem !important;
}
.arjade-products .wc-block-components-product-image img {
	aspect-ratio: auto !important;
	object-fit: contain !important;
	height: auto !important;
	max-height: 18rem;
	width: auto !important;
	max-width: 100%;
	margin: 0 auto;
	filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.65));
}
.arjade-products .wc-block-components-product-image a { display: flex; justify-content: center; align-items: flex-end; min-height: 18rem; }
.arjade-products .wp-block-post-title { font-size: 1.35rem; margin: 0; }
.arjade-products .wp-block-post-title a { color: var(--wp--preset--color--text-bright); text-decoration: none; }
.arjade-products .wp-block-post-title a:hover { text-decoration: underline; }
.arjade-products .wc-block-components-product-price,
.arjade-products .wp-block-woocommerce-product-price { color: var(--wp--preset--color--emerald-light); font-size: 1.15rem; font-weight: 600; }
.arjade-products .wp-block-woocommerce-product-button { margin-top: auto; }
@media (max-width: 37.5em) {
	.arjade-products .wc-block-product { border-width: 20px; border-image-width: 20px; }
	.arjade-products .wc-block-components-product-image img { max-height: 15rem; }
	.arjade-products .wc-block-components-product-image a { min-height: 15rem; }
}

/* Product page */
.single-product-top .wp-block-columns { gap: 3rem; }
.single-product-top .woocommerce-product-gallery img,
.single-product-top .wc-block-components-product-image img { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6)); }
.single-product-top .wp-block-woocommerce-product-price { color: var(--wp--preset--color--emerald-light); font-weight: 600; }
.buy-direct-note { font-size: 0.95rem; color: var(--wp--preset--color--text-soft); }
.woocommerce-tabs .tabs, .wc-tabs { border-color: var(--wp--preset--color--bronze-dark) !important; }
.woocommerce-tabs .tabs li a, .wc-tabs li a { color: var(--wp--preset--color--text) !important; }
.woocommerce-tabs .tabs li.active a, .wc-tabs li.active a { color: var(--wp--preset--color--emerald-light) !important; }

/* Buttons WooCommerce draws itself */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-product-button .wp-block-button__link {
	background: var(--wp--preset--color--emerald) !important;
	color: #fff !important;
	border: 1px solid var(--wp--preset--color--bronze) !important;
	border-radius: 3px !important;
	box-shadow: 0 3px 0 var(--wp--preset--color--emerald-deep);
	font-family: var(--wp--preset--font-family--crimson-pro);
	font-weight: 600;
}
.woocommerce .button:hover, .wc-block-components-button:not(.is-link):hover { background: var(--wp--preset--color--emerald-bright) !important; }

/* Cart, checkout and account forms: dark boxes with light text */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select__select,
.woocommerce form .input-text, .woocommerce form select,
.woocommerce-Input {
	background: var(--wp--preset--color--grey-darkest) !important;
	color: var(--wp--preset--color--text-bright) !important;
	border: 1px solid var(--wp--preset--color--bronze) !important;
	border-radius: 3px !important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox .wc-block-components-combobox-control label,
.wc-blocks-components-select__label { color: var(--wp--preset--color--text-soft) !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__input { background: var(--wp--preset--color--grey-darkest); border-color: var(--wp--preset--color--bronze); }
.wc-block-components-panel, .wc-block-components-totals-wrapper,
.wc-block-components-order-summary, .wc-block-checkout__sidebar,
.wc-block-cart__sidebar { border-color: var(--wp--preset--color--bronze-dark) !important; }
.wc-block-components-notice-banner { color: #141516; }

/* The small "Secure checkout" note in the checkout page's header */
.secure-checkout { margin: 0; color: var(--wp--preset--color--text-soft); font-size: 0.95rem; }
.secure-checkout::before { content: "\1F512\FE0E  "; }

/* The cart icon in the header */
.wc-block-mini-cart__button { color: var(--wp--preset--color--text-bright); }
.wc-block-mini-cart__badge { background: var(--wp--preset--color--emerald) !important; color: #fff !important; }
.wc-block-mini-cart__drawer .components-modal__content,
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents { background: var(--wp--preset--color--grey-darkest); color: var(--wp--preset--color--text); }


/* ------------------------------------------------------------------
   PAGE NUMBERS under post lists
------------------------------------------------------------------ */
.wp-block-query-pagination { margin-top: 2rem; gap: 0.5rem 1rem; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { padding: 0.3rem 0.6rem; }
.wp-block-query-pagination .current { border: 1px solid var(--wp--preset--color--bronze); border-radius: 3px; }


/* Respects visitors who have asked their device to reduce movement. */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}