/*
Theme Name: Aramithaus
Theme URI: https://aramithaus.com
Author: Aramithaus
Description: Custom theme for Aramithaus — not a teacher, a test case.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: aramithaus
*/

/* ---------- Fonts, kept on this site ----------
   Newsreader and Work Sans load from the theme's own assets folder,
   not from Google, so privacy apps and VPNs can't block them and
   visitors' browsers never contact Google for them (2026-10-10).
   Free fonts, SIL Open Font License: see assets/fonts-license.txt. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/newsreader-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/newsreader-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/newsreader-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/work-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/work-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/work-sans-latin-600-normal.woff2') format('woff2');
}

:root {
  --bg: #F7F3EC;
  --ink: #2B2A28;
  --ink-soft: #5B5750;
  --grey: #746D61; /* one step darker so dates and the footer are easier to read (was #8C8578; Guy, 2026-10-14) */
  --line: #DED6C7;
  --blue: #0047FE;
  --green: #6AFB00;
  --green-deep: #4a9e00;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-w: 700px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;

  /* Small repeating wave used under the header links (matches the dividers) */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
a:hover { border-bottom-color: currentColor; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

img { max-width: 100%; display: block; }

/* ---------- Layout shell ---------- */

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
}

/* Three columns: logo left, Stories centered, translate right.
   The equal outer columns keep Stories in the true center of the page. */
.site-header .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end; /* both wavy lines sit level with the bottom of the logo */
  gap: var(--space-2);
  width: 100%;
}
.site-header .brand { justify-self: start; }
.site-header .site-nav { justify-self: center; }
.site-header .site-translate { justify-self: end; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
}
.brand img { width: 28px; height: 28px; flex: none; }
/* The header links have their own wavy lines, so never draw the site's
   default straight hover underline (or one added by WordPress) under them. */
.site-header .brand,
.site-header .brand:hover,
.site-header .brand:focus,
.site-stories,
.site-stories:hover,
.site-stories:focus {
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.brand { align-items: flex-end; }
/* Wavy gradient line under the name, ending level with the logo's bottom
   edge and starting after the logo (never under it). */
.brand span {
  position: relative;
  display: inline-block;
  line-height: 1;
  padding-bottom: 9px;
}
.brand span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  -webkit-mask: var(--wave) repeat-x left center / 16px 6px;
  mask: var(--wave) repeat-x left center / 16px 6px;
}

.site-nav {
  display: flex;
  gap: var(--space-3);
  font-size: 0.95rem;
}
.site-nav a { color: var(--ink-soft); }
/* Stories: blue-to-green like the squiggle dividers, with a wavy
   gradient underline in the same colors. The arrow appears on hover only.
   The text fades to the deeper green so the last letters stay readable;
   the underline uses the exact divider colors. */
.site-stories {
  position: relative;
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.02em;
  padding-bottom: 9px;
  border-bottom: none;
  color: var(--blue); /* fallback for very old browsers */
  background-image: linear-gradient(90deg, var(--blue), var(--green-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Wavy underline: the gradient shows through a repeating wave shape. */
.site-stories::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  -webkit-mask: var(--wave) repeat-x left center / 16px 6px;
  mask: var(--wave) repeat-x left center / 16px 6px;
}
/* Arrow sits outside the word so Stories stays centered, hidden until hover. */
.site-stories::after {
  content: "\2192";
  position: absolute;
  left: 100%;
  top: 0;
  line-height: 1;
  margin-left: 0.3em;
  color: var(--green-deep);
  -webkit-text-fill-color: var(--green-deep);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.site-stories:hover { border-bottom: none; }
.site-stories:hover::after,
.site-stories:focus-visible::after { opacity: 1; transform: translateX(0); }
.site-translate { display: flex; align-items: center; }
.site-translate * { margin: 0 !important; padding: 0 !important; }
.site-translate select,
select.gt_selector,
select.goog-te-combo,
#google_language_translator select,
.gtranslate_wrapper select,
html body .site-header .site-translate #google_language_translator select.gt_selector.notranslate {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: var(--sans) !important;
  font-size: 0.85rem !important;
  color: var(--ink-soft) !important;
  /* Three layers: the arrow, a cream fill, and the brand gradient showing
     only in the border ring, so the outline fades blue to green. */
  background-color: transparent !important;
  background-image:
    url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B5750' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"),
    linear-gradient(var(--bg), var(--bg)),
    linear-gradient(90deg, var(--blue), var(--green)) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: right 0.75rem center, 0 0, 0 0 !important;
  background-size: 10px 6px, 100% 100%, 100% 100% !important;
  background-origin: padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, border-box !important;
  border: 1.5px solid transparent !important;
  border-radius: 999px !important;
  padding: 0.4rem 1.8rem 0.4rem 1rem !important;
  line-height: normal !important;
  cursor: pointer !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s ease;
}
.site-translate select:hover,
select.gt_selector:hover,
select.goog-te-combo:hover,
#google_language_translator select:hover,
.gtranslate_wrapper select:hover,
html body .site-header .site-translate #google_language_translator select.gt_selector.notranslate:hover { box-shadow: 0 2px 10px rgba(0, 71, 254, 0.15) !important; }
.site-translate select:focus-visible,
select.gt_selector:focus-visible,
select.goog-te-combo:focus-visible,
#google_language_translator select:focus-visible,
.gtranslate_wrapper select:focus-visible,
html body .site-header .site-translate #google_language_translator select.gt_selector.notranslate:focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 2px !important;
}
.site-translate select::-ms-expand,
select.gt_selector::-ms-expand,
select.goog-te-combo::-ms-expand,
#google_language_translator select::-ms-expand,
.gtranslate_wrapper select::-ms-expand { display: none; }

/* ---------- Hero ---------- */

.hero {
  padding: var(--space-5) 0 var(--space-4);
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  max-width: 14ch;
}

.hero p {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 var(--space-2);
}

.location {
  color: var(--grey);
  font-size: 0.9rem;
  margin-bottom: var(--space-3);
}

.button-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 3px;
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.btn:hover { border-bottom: 1px solid transparent; }

/* Buttons: the brand blue-to-green, like the logo and dividers.
   Primary and secondary share the same look. */
.btn-primary,
.btn-secondary {
  background-image: linear-gradient(90deg, var(--blue), var(--green-deep));
  background-origin: border-box;
  border: 0;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.8rem 1.9rem;
  box-shadow: 0 2px 10px rgba(0, 71, 254, 0.18);
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover,
.btn-secondary:hover {
  border: 0;
  filter: brightness(1.08) saturate(1.1);
  box-shadow: 0 4px 16px rgba(74, 158, 0, 0.28);
  transform: translateY(-1px);
}


/* ---------- Homepage: everything centered ---------- */

.front-page { text-align: center; }
.front-page .hero h1,
.front-page .section h2,
.front-page .hero p,
.front-page .section p,
.front-page .join-note,
.front-page .post-list-excerpt {
  margin-left: auto;
  margin-right: auto;
}
.front-page .button-row { justify-content: center; }
.front-page .topic-item {
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.front-page .topic-item dt { flex: none; }

/* ---------- Regular pages (About, etc.) ---------- */

.page-content { max-width: 65ch; }
.page-content p { margin: 0 0 var(--space-2); }
.page-content .page-lead {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.55rem);
  line-height: 1.35;
  background-image: linear-gradient(90deg, var(--blue), var(--green-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--blue);
  display: inline-block;
  margin-bottom: var(--space-3);
}
/* Each section heading gets the brand squiggle above it, like the homepage dividers. */
.page-content h2,
.section .page-content h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  line-height: 1.25;
  max-width: none;
  margin: var(--space-5) 0 var(--space-3);
  padding-top: calc(30px + var(--space-3));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 30' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='2' y1='15' x2='88' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230047FE'/%3E%3Cstop offset='1' stop-color='%236AFB00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 15C12 2 22 2 32 15C42 28 52 28 62 15C68 6.5 74 6.5 80 15C82.5 18.5 85.5 18.5 88 15' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left top / 90px 30px;
}
.section .page-content .page-lead + h2 { margin-top: var(--space-2); }
.page-content ul,
.page-content ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.3rem;
}
.page-content li { margin-bottom: 0.75rem; padding-left: 0.3rem; }
.page-content ul li::marker { color: var(--green-deep); }
.page-content ol li::marker { color: var(--blue); font-family: var(--serif); }
.page-content strong { color: var(--ink); font-weight: 600; }
.page-content .button-row { margin-top: var(--space-4); }

/* Centered pages: any page that opens with the gradient lead line
   ("page-lead", e.g. About) is centered like the homepage. */
main:has(.page-lead) .wrap { text-align: center; }
main:has(.page-lead) .page-content { margin-left: auto; margin-right: auto; }
main:has(.page-lead) .page-content h2 { background-position: center top; }
main:has(.page-lead) .page-content ul,
main:has(.page-lead) .page-content ol {
  list-style-position: inside;
  padding-left: 0;
}
main:has(.page-lead) .page-content li { padding-left: 0; margin-bottom: var(--space-2); }
/* Centered bullet lists read cleaner without dots: label on its own line. */
main:has(.page-lead) .page-content ul { list-style: none; }
main:has(.page-lead) .page-content ul li > strong:first-child { display: block; margin-bottom: 0.15rem; }
main:has(.page-lead) .page-content .button-row { justify-content: center; }

/* ---------- Divider ---------- */

.divider {
  padding: var(--space-2) 0;
  display: flex;
  justify-content: center;
}
.divider svg { width: 90px; height: auto; }

/* ---------- Section ---------- */

.section {
  padding: var(--space-4) 0;
}

.section h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin: 0 0 var(--space-3);
  max-width: 18ch;
}

.section p {
  margin: 0 0 var(--space-2);
  max-width: 65ch;
}

.section p:last-child { margin-bottom: 0; }

/* ---------- Index list (replaces card grid) ---------- */

.topic-list {
  margin-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.topic-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.topic-item dt {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  flex: 0 0 140px;
}

.topic-item dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Join / footer ---------- */

.join {
  padding: var(--space-4) 0 var(--space-5);
}

.join-note {
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
  max-width: 55ch;
}

.site-footer {
  padding: var(--space-3) 0 var(--space-4);
  color: var(--grey);
  font-size: 0.85rem;
  text-align: center;
}
/* Footer links (Privacy): the same plain straight underline as the story
   titles, so people can see where the important info is (Guy, 2026-10-10). */
.site-footer a,
.site-footer a:focus {
  border-bottom: none !important;
  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: var(--ink) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.2em !important;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  border-bottom: none !important;
  text-decoration-thickness: 2px !important;
}

/* ---------- Accent moment ---------- */

.accent {
  color: var(--green-deep);
}

/* ---------- Blog: post list (home.php) ---------- */

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.post-list-item {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.post-list-title {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
  /* Plain straight underline in the title's own dark color, like links
     everywhere else on the internet, so story titles read as links
     (Guy, 2026-10-10). It follows the title onto a second line on phones.
     The header links keep their own style. */
  border-bottom: none;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.post-list-title:hover,
.post-list-title:focus-visible {
  border-bottom: none;
  text-decoration-thickness: 2px;
}

.post-list-meta {
  color: var(--grey);
  font-size: 0.85rem;
  margin-bottom: var(--space-1);
}

.post-list-excerpt {
  color: var(--ink-soft);
  max-width: 65ch;
}
.post-list-excerpt p { margin: 0; }

/* ---------- Blog: pagination ---------- */

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.9rem;
}

.pagination .page-numbers {
  color: var(--ink-soft);
  padding: 0.3rem 0.6rem;
}

.pagination .page-numbers.current {
  color: var(--ink);
  font-weight: 500;
}

.pagination a.page-numbers:hover { border-bottom-color: currentColor; }

/* ---------- Story photos ---------- */

/* Thumbnail above each story in the lists (Latest stories, Stories page). */
.post-list-photo {
  display: block;
  margin-bottom: var(--space-2);
  border-radius: 14px;
  overflow: hidden;
  border-bottom: none;
  aspect-ratio: 16 / 9;
  background: var(--line);
}
.post-list-photo:hover { border-bottom: none; }
.post-list-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.post-list-photo:hover img { transform: scale(1.03); }

/* Main photo at the top of a story. */
.post-single-photo {
  margin: var(--space-3) 0 0;
}
.post-single-photo img,
.post-single-content figure img,
.page-content figure img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.post-single-photo figcaption,
.post-single-content figcaption,
.page-content figcaption {
  margin-top: 0.6rem;
  color: var(--grey);
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
}

/* Photos placed between paragraphs inside a story or page. */
.post-single-content figure,
.page-content figure {
  margin: var(--space-4) 0;
}
.post-single-content .wp-block-image,
.page-content .wp-block-image { max-width: 100%; }

/* ---------- Blog: single post (single.php) ---------- */

.post-single-meta {
  color: var(--grey);
  font-size: 0.9rem;
}

.post-single-content {
  max-width: 65ch;
}
.post-single-content p { margin: 0 0 var(--space-2); }
.post-single-content p:last-child { margin-bottom: 0; }

.post-single-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.post-single-nav-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: 0.95rem;
}

.post-single-back {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Next/previous story links and "All stories": the same plain straight
   underline as the story titles, so readers can see where to go next.
   Each link keeps its own color (Guy, 2026-10-12). */
.post-single-nav-links a,
.post-single-back a,
a.post-single-back {
  border-bottom: none;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.post-single-nav-links a:hover,
.post-single-nav-links a:focus-visible,
.post-single-back a:hover,
.post-single-back a:focus-visible,
a.post-single-back:hover,
a.post-single-back:focus-visible {
  border-bottom: none;
  text-decoration-thickness: 2px;
}

/* ---------- Responsive ---------- */

@media (max-width: 560px) {
  .site-nav { gap: var(--space-2); font-size: 0.85rem; }
  /* Phones: logo and translate on the first row, Stories/About centered below. */
  .site-header .wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-2);
    column-gap: var(--space-1);
  }
  .site-header .brand { grid-column: 1; grid-row: 1; }
  .site-header .site-translate { grid-column: 2; grid-row: 1; }
  .site-header .site-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; gap: var(--space-4); }
  .brand { font-size: 1rem; gap: 0.4rem; }
  .site-stories { font-size: 1rem; }
  .topic-item { flex-direction: column; gap: 0.25rem; }
  .topic-item dt { flex: none; }
  .post-single-nav-links { flex-direction: column; }
}

/* =========================================================
   WooCommerce overrides — bring the store in line with the
   rest of the site instead of using WooCommerce's defaults.
   ========================================================= */

.woocommerce, .woocommerce-page {
  font-family: var(--sans);
  color: var(--ink);
}

/* Buttons: match .btn-primary everywhere */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .checkout-button,
.woocommerce a.checkout-button {
  background: var(--ink);
  color: var(--bg);
  border-radius: 3px;
  border: none;
  padding: 0.7rem 1.4rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: none;
  transition: background 0.15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--blue);
  color: #fff;
}

/* Secondary / alt buttons (e.g. "Select options" on variable products can stay same style for simplicity) */

/* Product grid (Shop page) */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.woocommerce ul.products li.product {
  text-align: left;
}
.woocommerce ul.products li.product img {
  border-radius: 4px;
  margin-bottom: var(--space-1);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0.4rem 0 0.2rem;
}
.woocommerce ul.products li.product .price {
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--green-deep);
}

/* Single product page */
.woocommerce div.product .product_title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ink);
  font-size: 1.2rem;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--ink-soft);
  margin-top: var(--space-2);
}

/* Cart & checkout tables */
.woocommerce table.shop_table {
  border-color: var(--line);
  font-size: 0.95rem;
}
.woocommerce table.shop_table th {
  font-family: var(--serif);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.woocommerce table.shop_table td {
  border-bottom: 1px solid var(--line);
}

/* Forms: cart quantity, checkout fields, my account */
.woocommerce input.qty,
.woocommerce .quantity input {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.4rem 0.6rem;
  font-family: var(--sans);
  background: #fff;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select,
.woocommerce-billing-fields select,
.woocommerce-account .woocommerce-MyAccount-content input.input-text {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  font-family: var(--sans);
  background: #fff;
  color: var(--ink);
}
.woocommerce form .form-row label {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Notices / messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  border-top-color: var(--blue);
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  border-radius: 3px;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--blue);
}
.woocommerce-error {
  border-top-color: var(--green-deep);
}

/* My Account nav */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
}
.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--line);
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.6rem 0;
  color: var(--ink-soft);
}
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--ink);
  font-weight: 500;
}

/* Shop page heading spacing already handled by archive-product.php wrapper */
.woocommerce-products-header {
  margin-bottom: var(--space-2);
}

/* =========================================================
   Center everything by default
   Guy's rule, 2026-10-04: everything is center justified
   unless noted otherwise. The header keeps its own
   three-column layout (logo left, links center, translate right).
   ========================================================= */

main,
.site-footer { text-align: center; }

/* Blocks with a set width sit in the middle of the page, not the left. */
main .hero h1,
main .hero p,
main .section h2,
main .section p,
main .join-note,
main .post-list-excerpt,
main .post-single-content,
main .page-content {
  margin-left: auto;
  margin-right: auto;
}

/* Rows of buttons and links line up in the center. */
main .button-row,
main .pagination,
main .post-single-nav-links { justify-content: center; }

/* Section squiggles on every page sit centered above their headings. */
main .page-content h2 { background-position: center top; }

/* Lists read cleanly when centered. */
main .page-content ul,
main .page-content ol,
main .post-single-content ul,
main .post-single-content ol {
  list-style-position: inside;
  padding-left: 0;
}
main .page-content li,
main .post-single-content li { padding-left: 0; }

/* Two-column topic list stacks into a centered column. */
main .topic-item {
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
main .topic-item dt { flex: none; }

/* Store product cards follow the same rule. */
body .woocommerce ul.products li.product { text-align: center; }

/* Typing in form fields still runs left to right. */
main input,
main textarea,
main select { text-align: left; }