/*
Theme Name:   Himalaya Panda
Theme URI:    https://himalayapanda.com/
Description:  A standalone WooCommerce theme for a handmade-goods storefront. Warm earth palette sampled from real product photography, a real-text hero (no headline baked into a JPEG), trust strip, equal-height product grid, and full template coverage - shop, product, cart, checkout, account, blog, archive, search and 404. No page builder required.
Author:       On-page design pass
Version:      1.7.6
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  himalaya-panda
Tags:         e-commerce, blog, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. TOKENS
   Palette sampled from the brand's own product photography, not invented:
   bone from the shot backdrop, ink from the wool, sage from the jacket
   stripe, tan from the hang tag, terracotta from the hemp product.
   Contrast measured - body 11.7:1, headings 15.4:1, links 7.5:1,
   white on CTA 7.2:1. All WCAG AA, most AAA.
   ========================================================================== */

:root {
  --ink:        #171815;
  --charcoal:   #2E2E2A;
  --forest:     #3F4F45;
  --forest-dk:  #2F3B34;
  --sage:       #5C635E;
  --terra:      #8C4230;
  --terra-dk:   #6E3324;
  --tan:        #A98F6B;
  --bone:       #F4EDE4;
  --cream:      #FBF7F1;
  --white:      #FFFFFF;
  --stone:      #6B665C;
  --stone-lt:   #B5AFA3;
  --line:       #E3D9CB;
  --line-dk:    #33342E;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius:    2px;
  --radius-lg: 4px;
  --shadow:    0 1px 2px rgba(23,24,21,.04), 0 8px 24px -12px rgba(23,24,21,.14);
  --shadow-lg: 0 2px 4px rgba(23,24,21,.05), 0 18px 48px -20px rgba(23,24,21,.22);
  --ease:      cubic-bezier(.22,.61,.36,1);

  --s1: 4px;  --s2: 8px;  --s3: 14px; --s4: 22px;
  --s5: 34px; --s6: 52px; --s7: 78px; --s8: 112px;

  --wrap: 1200px;
  --measure: 68ch;
  --header-h: 76px;
}

/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/*
 * The browser hides [hidden] with a bare attribute selector, which any class
 * rule that sets display outranks. Four elements here are toggled by that
 * attribute - the back-to-top button, the header search panel, the sticky buy
 * bar and the gallery's scroll chevron - and the two whose classes set display
 * (grid and flex) were therefore permanently visible. The back-to-top button
 * had been sitting in the corner of every page since it was added, and the
 * chevron promised a thumbnail rail that scrolls when it does not.
 *
 * !important is the right tool exactly once, here: hidden must mean hidden no
 * matter what any later rule decides about display.
 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--tan) var(--bone);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--charcoal);
  background-color: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
img { border: 0; }

a { color: var(--forest); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--forest-dk); }

::selection { background: var(--tan); color: #fff; }

:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
  border-radius: var(--radius);
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

table { border-collapse: collapse; width: 100%; }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, .98rem + .45vw, 1.3rem); }
h5 { font-size: 1.02rem; }
h6 {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

p { margin: 0 0 1.15em; }
strong, b { font-weight: 600; color: var(--ink); }
small { font-size: .84rem; color: var(--stone); }

blockquote {
  margin: var(--s5) 0;
  padding: var(--s4);
  background-color: var(--cream);
  border-left: 2px solid var(--tan);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
}
blockquote p:last-child { margin-bottom: 0; }

code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
code { background: var(--cream); padding: .12em .38em; border-radius: var(--radius); }
pre {
  background: var(--ink);
  color: var(--cream);
  padding: var(--s4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
pre code { background: none; color: inherit; padding: 0; }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s4);
}

.measure { max-width: var(--measure); }
.measure > * { max-width: 100%; }

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 1 auto; }

/* main column + optional sidebar */
.content-layout,
.shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  padding-block: var(--s6);
  align-items: start;
}
@media (min-width: 900px) {
  .content-layout.has-sidebar,
  .shop-layout.has-sidebar { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* ==========================================================================
   5. ACCESSIBILITY
   ========================================================================== */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.skip-link:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100000;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: var(--radius);
}

/* ==========================================================================
   6. TOP ANNOUNCEMENT BAR
   ========================================================================== */

.topbar {
  background-color: var(--ink);
  color: var(--stone-lt);
}
.topbar__text {
  margin: 0;
  padding-block: 9px;
  text-align: center;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ==========================================================================
   7. HEADER AND NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: var(--cream);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 10px 30px -22px rgba(23,24,21,.5); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--header-h);
}

.site-branding { margin-right: auto; }
.site-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}
.site-title a { color: var(--ink); }
.site-title a:hover { color: var(--terra); }
.site-description {
  margin: 2px 0 0;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--stone);
}
.custom-logo-link img { max-height: 56px; width: auto; }

/* --- desktop menu --- */
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-navigation > ul { display: flex; align-items: center; gap: var(--s4); }

.main-navigation a {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--charcoal);
  padding-block: 10px;
  position: relative;
}
.main-navigation a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%;
  bottom: 4px;
  height: 1px;
  background-color: var(--tan);
  transition: left .22s var(--ease), right .22s var(--ease);
}
.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after { left: 0; right: 0; }
.main-navigation .current-menu-item > a { color: var(--forest); }

.main-navigation li { position: relative; }

/* --- submenu --- */
.main-navigation .sub-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 220px;
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 20;
}
.main-navigation li:hover > .sub-menu,
.main-navigation li.is-focused > .sub-menu,
.main-navigation li.submenu-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.main-navigation .sub-menu a {
  padding: 7px 18px;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: none;
}
.main-navigation .sub-menu a::after { display: none; }
.main-navigation .sub-menu a:hover { background-color: var(--bone); color: var(--forest); }

.submenu-toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 6px;
}
@media (min-width: 900px) {
  .main-navigation .menu-item-has-children > a { padding-right: 16px; }
  .submenu-toggle {
    display: inline-flex;
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
}

/* --- header actions --- */
.header-actions { display: flex; align-items: center; gap: var(--s2); }

.search-toggle,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.search-toggle:hover,
.menu-toggle:hover { background-color: var(--bone); border-color: var(--line); }

.menu-toggle { display: none; }

.menu-toggle__bars { display: block; width: 20px; }
.menu-toggle__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  margin: 4px 0;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
body.menu-open .menu-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.menu-open .menu-toggle__bars span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.cart-link:hover { background-color: var(--forest); border-color: var(--forest); color: var(--cream); }
.cart-link__count { font-variant-numeric: tabular-nums; }

/* --- header search panel --- */
.header-search {
  border-top: 1px solid var(--line);
  background-color: var(--bone);
  padding-block: var(--s4);
}

/* --- mobile drawer --- */
@media (max-width: 899px) {
  .menu-toggle { display: inline-flex; }

  .main-navigation {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 360px);
    background-color: var(--cream);
    border-left: 1px solid var(--line);
    padding: calc(var(--header-h) + var(--s4)) var(--s4) var(--s4);
    transform: translateX(100%);
    transition: transform .28s var(--ease);
    overflow-y: auto;
    z-index: 95;
    box-shadow: var(--shadow-lg);
  }
  .main-navigation.is-open { transform: none; }

  .main-navigation > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-navigation li { border-bottom: 1px solid var(--line); }
  .main-navigation a { padding: 14px 0; font-size: .86rem; }
  .main-navigation a::after { display: none; }

  .main-navigation .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .main-navigation .menu-item-has-children > a { flex: 1 1 auto; }

  .submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
  }
  .submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .main-navigation .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    width: 100%;
    border: 0;
    box-shadow: none;
    background: var(--bone);
    border-radius: var(--radius);
    margin-bottom: var(--s2);
    padding: 4px 0;
  }
  .main-navigation li.submenu-open > .sub-menu { display: block; }
  .main-navigation .sub-menu a { padding-left: var(--s3); }
  .main-navigation .sub-menu li:last-child { border-bottom: 0; }

  body.menu-open { overflow: hidden; }
}

/* ==========================================================================
   8. TRUST STRIP
   ========================================================================== */

.trust-bar {
  background-color: var(--cream);
  border-bottom: 1px solid var(--line);
}
.trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  padding-block: var(--s3);
}
.trust-bar__item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trust-bar__icon { color: var(--tan); flex: 0 0 auto; }
.trust-bar__copy { display: flex; flex-direction: column; min-width: 0; }
.trust-bar__title {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}
.trust-bar__sub { font-size: .74rem; color: var(--stone); line-height: 1.4; }

@media (max-width: 899px) {
  .trust-bar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
}
@media (max-width: 559px) {
  .trust-bar__inner {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .trust-bar__inner::-webkit-scrollbar { display: none; }
  .trust-bar__item { scroll-snap-align: start; }
}

/* ==========================================================================
   9. HERO
   ========================================================================== */

.hero {
  position: relative;
  background-color: var(--ink);
  color: var(--cream);
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img,
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(23,24,21,.78) 0%, rgba(23,24,21,.55) 45%, rgba(23,24,21,.18) 100%);
}
.hero__inner {
  display: flex;
  align-items: center;
  min-height: clamp(400px, 52vw, 620px);
  padding-block: var(--s7);
}
.hero__copy { max-width: 46ch; }

.hero__eyebrow {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0 0 var(--s3);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(169,143,107,.5);
}
.hero__title {
  font-size: clamp(2.2rem, 1.2rem + 3.3vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -0.028em;
  color: var(--cream);
  margin: 0 0 var(--s3);
}
.hero__text {
  font-size: clamp(1rem, .93rem + .35vw, 1.15rem);
  line-height: 1.6;
  color: rgba(251,247,241,.92);
  margin: 0 0 var(--s4);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }

@media (max-width: 699px) {
  .hero__inner { min-height: 0; padding-block: var(--s6); text-align: center; }
  .hero__copy { max-width: none; margin-inline: auto; }
  .hero--has-image::after { background: rgba(23,24,21,.6); }
  .hero__actions { justify-content: center; }
  .hero__actions .button { width: 100%; }
}

/* ==========================================================================
   10. BUTTONS
   ========================================================================== */

.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1;
  min-height: 46px;
  padding: 0 28px;
  border: 1px solid var(--forest);
  border-radius: var(--radius);
  background-color: var(--forest);
  color: var(--cream);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--forest-dk);
  border-color: var(--forest-dk);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.button:active, button:active { transform: translateY(0); }

/* The buy actions get the warm accent.
   These carry .alt as well, so they must out-specify the generic
   ".woocommerce button.button.alt" rule above - hence the extra class in the
   selector rather than !important. */
.woocommerce button.button.alt.single_add_to_cart_button,
.woocommerce button.button.single_add_to_cart_button,
.woocommerce a.button.alt.checkout-button,
.woocommerce a.button.checkout-button,
.woocommerce button.button.alt#place_order,
.woocommerce #place_order,
.button.button--accent {
  background-color: var(--terra);
  border-color: var(--terra);
  color: #fff;
}
.woocommerce button.button.alt.single_add_to_cart_button:hover,
.woocommerce button.button.single_add_to_cart_button:hover,
.woocommerce a.button.alt.checkout-button:hover,
.woocommerce a.button.checkout-button:hover,
.woocommerce button.button.alt#place_order:hover,
.woocommerce #place_order:hover,
.button.button--accent:hover {
  background-color: var(--terra-dk);
  border-color: var(--terra-dk);
}

.button--outline,
.woocommerce a.button.wc-backward,
.woocommerce a.button.wc-forward:not(.checkout) {
  background-color: transparent;
  border-color: var(--charcoal);
  color: var(--charcoal);
}
.button--outline:hover,
.woocommerce a.button.wc-backward:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.button--ghost {
  background-color: transparent;
  border-color: rgba(251,247,241,.6);
  color: var(--cream);
}
.button--ghost:hover {
  background-color: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

/* small utility buttons inside the header should not inherit the big style */
.search-toggle, .menu-toggle, .submenu-toggle {
  min-height: 0;
  padding: 0;
  letter-spacing: normal;
  text-transform: none;
  background: none;
  border-color: transparent;
  color: var(--charcoal);
}
.search-toggle:hover, .menu-toggle:hover {
  transform: none;
  box-shadow: none;
  color: var(--forest);
}
.submenu-toggle:hover { background: none; box-shadow: none; transform: none; }

/* ==========================================================================
   11. FORMS
   ========================================================================== */

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
textarea, select {
  width: 100%;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--charcoal);
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 14px;
  min-height: 46px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
textarea { min-height: 140px; resize: vertical; }

input:focus, textarea:focus, select:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(63,79,69,.14);
  outline: none;
}
::placeholder { color: var(--stone); opacity: .75; }

label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
label.inline, .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: .92rem;
  color: var(--charcoal);
}
input[type="checkbox"], input[type="radio"] {
  width: auto;
  min-height: 0;
  accent-color: var(--forest);
}

.search-form { display: flex; gap: var(--s2); }
.search-form .search-field { flex: 1 1 auto; }
.search-form .search-submit { flex: 0 0 auto; }

/* ==========================================================================
   12. SECTION TITLES, PAGE HEADERS, BREADCRUMBS
   ========================================================================== */

.section-title {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: 0 0 var(--s5);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}
.section-title::before, .section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--line);
}
.section-title span { white-space: nowrap; }
.section-title__sub { text-align: center; color: var(--stone); margin-top: -.8em; }

.page-header {
  background-color: var(--cream);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s6) var(--s5);
}
.page-header__eyebrow {
  margin: 0 0 var(--s2);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tan);
}
.page-header__title { margin: 0; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); }
.page-header__sub { margin-top: var(--s2); color: var(--stone); max-width: var(--measure); }
.page-header__sub p:last-child { margin-bottom: 0; }

.breadcrumbs {
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stone);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.breadcrumbs a { color: var(--stone); }
.breadcrumbs a:hover { color: var(--forest); }
.breadcrumbs .sep { margin-inline: 8px; opacity: .55; }

/* ==========================================================================
   13. HOME SECTIONS
   ========================================================================== */

/*
 * Homepage rhythm, tightened.
 *
 * Was clamp(52px, 5vw, 112px), which measured as 71px top and bottom at 1440 -
 * so every boundary between two sections was a 142px band of nothing, and the
 * one after the pillar cards was flagged as too much. It is not that boundary:
 * measured, all nine gaps down the page were identical, so a patch on one seam
 * would have left the page with one odd interval and the same complaint
 * everywhere else. The cap is lower than the vw figure now too, so very wide
 * screens stop growing the gap instead of exaggerating it.
 *
 * At 1440 this gives 48px each side - a 95px gap rather than 142px.
 */
.home-section { padding-block: clamp(var(--s5), 3.4vw, 58px); }
.home-section--alt { background-color: var(--cream); border-block: 1px solid var(--line); }
.home-section--intro { padding-bottom: 0; }
.home-section--intro .measure { margin-inline: auto; font-size: 1.03rem; line-height: 1.75; }

/* ==========================================================================
   14. POST GRID AND CARDS
   ========================================================================== */

.post-grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

.post-card {
  display: flex;
  flex-direction: column;
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.post-card:hover {
  border-color: var(--tan);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.post-card__media { display: block; overflow: hidden; background: var(--bone); }
.post-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.post-card:hover .post-card__media img { transform: scale(1.04); }

.post-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--s4); }
.post-card__title { font-size: 1.12rem; margin: var(--s2) 0 var(--s2); }
.post-card__title a { color: var(--ink); }
.post-card__title a:hover { color: var(--terra); }
.post-card__excerpt { font-size: .92rem; color: var(--stone); margin-bottom: var(--s3); }
.post-card__more {
  margin-top: auto;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--forest);
}
.post-card__more:hover { color: var(--terra); }

.entry-meta {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stone);
}
.entry-meta .meta-sep { margin-inline: 7px; opacity: .5; }

/* ==========================================================================
   15. SINGLE ENTRY
   ========================================================================== */

.entry { margin-bottom: var(--s6); }
.entry-header { margin-bottom: var(--s4); }
.entry-title { margin-bottom: var(--s2); }

.post-thumbnail { display: block; margin-bottom: var(--s5); border-radius: var(--radius-lg); overflow: hidden; }
.post-thumbnail img { width: 100%; }

.entry-content { font-size: 1.02rem; line-height: 1.78; }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 { margin-top: 1.8em; }
.entry-content h3 { margin-top: 1.5em; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: .4em; }
.entry-content img { border-radius: var(--radius-lg); }
.entry-content a { text-decoration: underline; text-decoration-color: var(--tan); text-underline-offset: 3px; }
.entry-content a:hover { color: var(--terra); text-decoration-color: var(--terra); }

.entry-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--stone);
}
.meta-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tan);
  margin-right: 5px;
}

/* post navigation */
.post-navigation { margin-block: var(--s6); border-top: 1px solid var(--line); padding-top: var(--s4); }
.post-navigation .nav-links { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .post-navigation .nav-links { grid-template-columns: 1fr 1fr; } }
.post-navigation .nav-next { text-align: right; }
.post-navigation .nav-label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 4px;
}
.post-navigation .nav-title { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }

/* ==========================================================================
   16. COMMENTS
   ========================================================================== */

.comments-area {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.comments-title, .comment-reply-title { font-size: 1.35rem; margin-bottom: var(--s4); }
.comment-list { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.comment-list ol.children { list-style: none; padding-left: var(--s5); }
.comment-body {
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4);
  margin-bottom: var(--s3);
}
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--stone); margin-bottom: var(--s2); }
.comment-content { font-size: .96rem; }
.reply { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.comment-form { display: grid; gap: var(--s3); }
.comment-form p { margin: 0; }
.comment-notes { font-size: .86rem; color: var(--stone); }
@media (min-width: 700px) {
  .comment-form { grid-template-columns: 1fr 1fr; }
  .comment-form .comment-form-comment,
  .comment-form .comment-notes,
  .comment-form .form-submit,
  .comment-form .comment-form-cookies-consent { grid-column: 1 / -1; }
}

/* ==========================================================================
   17. PAGINATION
   ========================================================================== */

.pagination { margin-top: var(--s6); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .86rem;
  font-weight: 600;
  color: var(--charcoal);
  background: var(--cream);
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background-color: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}
.pagination .dots { border-color: transparent; background: none; }

/* ==========================================================================
   18. WIDGETS AND SIDEBAR
   ========================================================================== */

.widget-area { font-size: .94rem; }
.widget { margin-bottom: var(--s5); }
.widget:last-child { margin-bottom: 0; }
.widget-title {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--tan);
  display: inline-block;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding-block: 9px; border-bottom: 1px solid var(--line); }
.widget li:last-child { border-bottom: 0; }
.widget a { color: var(--charcoal); }
.widget a:hover { color: var(--forest); }

.widget .tagcloud a,
.tag-cloud-link {
  display: inline-block;
  font-size: .74rem !important;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 13px;
  margin: 0 5px 7px 0;
  color: var(--stone);
}
.widget .tagcloud a:hover { background-color: var(--tan); border-color: var(--tan); color: var(--ink); }

/* ==========================================================================
   19. WOOCOMMERCE - SHOP GRID
   ========================================================================== */

.woocommerce .woocommerce-result-count { font-size: .86rem; color: var(--stone); margin: 0; }
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select { min-width: 220px; }

.woocommerce-notices-wrapper:empty { display: none; }

/* toolbar row above the grid */
.woocommerce .shop-layout .site-main > .woocommerce-result-count,
.woocommerce .shop-layout .site-main > .woocommerce-ordering { display: inline-block; vertical-align: middle; }
.woocommerce .shop-layout .site-main > .woocommerce-ordering { float: right; }

/* the grid itself - Woo emits ul.products */
.woocommerce ul.products {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
  clear: both;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: left;
  position: relative;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--tan);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.card__media { background-color: var(--bone); border-bottom: 1px solid var(--line); overflow: hidden; }
.card__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
  transition: transform .5s var(--ease);
}
.woocommerce ul.products li.product:hover .card__media img { transform: scale(1.035); }

.card__eyebrow {
  margin: var(--s3) var(--s4) 0;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tan);
}
.card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  margin: 6px var(--s4) var(--s2);
  padding: 0;
}
.woocommerce ul.products li.product .star-rating {
  margin: 0 var(--s4) var(--s2);
  color: var(--tan);
  font-size: .8em;
}
.woocommerce ul.products li.product .price {
  margin: auto var(--s4) var(--s3);
  padding-top: var(--s2);
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
}
.woocommerce ul.products li.product .price del { color: var(--stone); font-weight: 400; opacity: .8; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { color: var(--terra); text-decoration: none; font-weight: 600; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: 0 var(--s4) var(--s4);
  font-size: .72rem;
  min-height: 40px;
  padding: 0 16px;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  margin: 0;
  min-height: 0;
  min-width: 0;
  padding: 5px 11px;
  border-radius: var(--radius);
  background-color: var(--terra);
  color: #fff;
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  z-index: 3;
}

/* product categories grid */
.woocommerce ul.products li.product-category a { display: block; }
.woocommerce ul.products li.product-category img { aspect-ratio: 4 / 3; object-fit: cover; }
.woocommerce ul.products li.product-category h2 {
  font-family: var(--serif);
  font-size: 1.05rem;
  margin: var(--s3) var(--s4);
  color: var(--ink);
}
.woocommerce ul.products li.product-category .count {
  display: block;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tan);
  background: none;
  padding: 0;
  margin-top: 3px;
}

/* ==========================================================================
   20. WOOCOMMERCE - SINGLE PRODUCT
   ========================================================================== */

.woocommerce div.product { padding-block: var(--s6); }

.woocommerce div.product .woocommerce-product-gallery {
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; }

.woocommerce div.product .product_title {
  font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.5rem);
  margin-bottom: var(--s2);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s4);
}
.woocommerce div.product p.price del { color: var(--stone); font-weight: 400; font-size: .8em; }
.woocommerce div.product p.price ins { color: var(--terra); text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description { color: var(--charcoal); }

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce .quantity input.qty {
  width: 78px;
  text-align: center;
  min-height: 46px;
  font-weight: 600;
}
.woocommerce div.product form.cart .button { flex: 0 0 auto; padding: 0 36px; min-height: 48px; }

.assurance { list-style: none; margin: var(--s4) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line); }
.assurance__item {
  position: relative;
  padding-left: 27px;
  margin-bottom: 10px;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--stone);
}
.assurance__item:last-child { margin-bottom: 0; }
.assurance__item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .34em;
  width: 13px;
  height: 7px;
  border-left: 1.5px solid var(--tan);
  border-bottom: 1.5px solid var(--tan);
  transform: rotate(-45deg);
}

.craft-note {
  margin-top: var(--s4);
  padding: var(--s4);
  background-color: var(--cream);
  border-left: 2px solid var(--tan);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.craft-note__title { font-size: 1.05rem; margin-bottom: .45em; }
.craft-note p { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--stone); }

.woocommerce div.product .product_meta {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--stone);
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 5px; }

/* tabs */
.woocommerce div.product .woocommerce-tabs { margin-top: var(--s6); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  margin: 0 0 var(--s5);
  padding: 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: var(--s5);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0 2px 12px;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone);
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--terra); }
.woocommerce div.product .woocommerce-tabs .panel { padding: 0; margin: 0; }

/* reviews */
.woocommerce #reviews #comments ol.commentlist { padding: 0; }
.woocommerce #review_form_wrapper {
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4);
  margin-top: var(--s5);
}
.woocommerce #review_form #respond { background: none; border: 0; padding: 0; }
.woocommerce p.stars a { color: var(--tan); }

/* related / upsells */
.woocommerce .related, .woocommerce .upsells { margin-top: var(--s7); }
.woocommerce .related > h2, .woocommerce .upsells > h2 {
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-size: 1.5rem;
  margin-bottom: var(--s5);
}
.woocommerce .related > h2::before, .woocommerce .related > h2::after,
.woocommerce .upsells > h2::before, .woocommerce .upsells > h2::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--line);
}

/* ==========================================================================
   21. WOOCOMMERCE - CART, CHECKOUT, ACCOUNT, NOTICES
   ========================================================================== */

.woocommerce .cart-empty, .woocommerce .return-to-shop { text-align: center; }

.woocommerce table.shop_table {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background-color: var(--cream);
  margin-bottom: var(--s5);
}
.woocommerce table.shop_table th {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background-color: var(--bone);
  border-bottom: 1px solid var(--line);
  padding: 15px;
  text-align: left;
}
.woocommerce table.shop_table td { border-top: 1px solid var(--line); padding: 15px; }
.woocommerce table.shop_table tbody tr:first-child td { border-top: 0; }
.woocommerce table.shop_table img { width: 64px; border-radius: var(--radius); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2,
#order_review_heading {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin-bottom: var(--s3);
}

.woocommerce .cart-collaterals { margin-top: var(--s5); }
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; max-width: 460px; margin-left: auto; }

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4);
  margin-bottom: var(--s4);
}

.woocommerce-checkout .col2-set { display: grid; gap: var(--s5); }
@media (min-width: 800px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; } }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }

.woocommerce-checkout #payment {
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--line); padding: var(--s4); }
.woocommerce-checkout #payment div.form-row { padding: var(--s4); }

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 0;
  font-size: .9rem;
  color: var(--charcoal);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--forest); font-weight: 600; }
@media (min-width: 800px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 25%; }
  .woocommerce-account .woocommerce-MyAccount-content { width: 71%; }
}

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  background-color: var(--cream);
  border-top: 2px solid var(--forest);
  border-radius: var(--radius);
  color: var(--charcoal);
  font-size: .94rem;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  list-style: none;
}
.woocommerce-info { border-top-color: var(--tan); }
.woocommerce-error { border-top-color: var(--terra); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message .button, .woocommerce-info .button { min-height: 38px; padding: 0 18px; font-size: .72rem; }

/* Woo's default two-column product layout, made responsive without floats */
@media (min-width: 800px) {
  .woocommerce div.product > .woocommerce-product-gallery { width: 48%; float: left; }
  .woocommerce div.product > .summary { width: 48%; float: right; margin-bottom: 0; }
  .woocommerce div.product > .woocommerce-tabs,
  .woocommerce div.product > .related,
  .woocommerce div.product > .upsells { clear: both; }
}

/* ==========================================================================
   22. FOOTER
   ========================================================================== */

.site-footer { background-color: var(--ink); color: var(--stone-lt); margin-top: auto; }

.footer-widgets {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-block: var(--s7) var(--s6);
}
.site-footer .widget-title { color: var(--cream); border-bottom-color: var(--tan); }
.site-footer a { color: var(--stone-lt); }
.site-footer a:hover { color: var(--cream); }
.site-footer .widget li { border-bottom-color: var(--line-dk); }
.site-footer .widget .tagcloud a { border-color: var(--line-dk); }

.site-footer__bottom { border-top: 1px solid var(--line-dk); }
.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s4);
  font-size: .8rem;
}
.site-credit { margin: 0; }
.footer-menu, .footer-menu-inline { list-style: none; margin: 0; padding: 0; }
.footer-menu-inline { display: flex; flex-wrap: wrap; gap: var(--s4); }
.footer-menu li { padding-block: 6px; }

/* ==========================================================================
   23. NO RESULTS / 404
   ========================================================================== */

.no-results, .error-404 { padding-block: var(--s7); text-align: center; max-width: 620px; margin-inline: auto; }
.no-results .search-form, .error-404__search { margin-block: var(--s4); }
.error-404__code {
  font-family: var(--serif);
  font-size: clamp(4rem, 3rem + 8vw, 8rem);
  line-height: 1;
  color: var(--tan);
  margin: 0;
  opacity: .5;
}
.error-404__title { margin-top: var(--s2); }
.error-404__text { color: var(--stone); }
.error-404__actions { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }
.error-404__recent { margin-top: var(--s7); text-align: left; }

/* ==========================================================================
   24. WORDPRESS CORE CLASSES
   ========================================================================== */

.alignleft { float: left; margin: .3em var(--s4) var(--s3) 0; }
.alignright { float: right; margin: .3em 0 var(--s3) var(--s4); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { width: min(100vw - 2 * var(--s4), 1100px); margin-inline: auto; max-width: none; }
.alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }

.wp-caption { margin-bottom: var(--s4); max-width: 100%; }
.wp-caption-text, .wp-element-caption {
  font-size: .82rem;
  color: var(--stone);
  text-align: center;
  margin-top: var(--s2);
}
.sticky .entry-title::after {
  content: " \2605";
  color: var(--tan);
}
.bypostauthor > .comment-body { border-color: var(--tan); }
.gallery { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.gallery-item { margin: 0; }

/* ==========================================================================
   25. MOTION AND PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .button:hover, .post-card:hover, .woocommerce ul.products li.product:hover { transform: none; }
}

@media print {
  .topbar, .site-header, .trust-bar, .site-footer, .breadcrumbs,
  .post-navigation, .comments-area, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .container { max-width: none; padding: 0; }
}

/* ==========================================================================
   26. EYEBROW
   ========================================================================== */

.eyebrow {
  display: inline-block;
  margin: 0 0 var(--s3);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tan);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(169, 143, 107, .45);
}

/* ==========================================================================
   27. STORY BAND
   ========================================================================== */

.story-band__inner {
  display: grid;
  gap: clamp(var(--s5), 4vw, var(--s7));
  align-items: center;
}
@media (min-width: 900px) {
  .story-band__inner { grid-template-columns: 1fr 1fr; }
  .story-band__inner--noimg { grid-template-columns: minmax(0, var(--measure)); justify-content: center; }
}
.story-band__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream);
}
.story-band__media img { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; }
.story-band__title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); margin-bottom: var(--s3); }
.story-band__text { color: var(--charcoal); font-size: 1.02rem; line-height: 1.75; }
.story-band__text p:last-child { margin-bottom: var(--s4); }

/* ==========================================================================
   28. PROCESS STEPS
   ========================================================================== */

.process__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: step;
}
.process__step {
  position: relative;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.process__num {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tan);
  line-height: 1;
  margin-bottom: var(--s3);
}
.process__title { font-size: 1.08rem; margin-bottom: var(--s2); }
.process__text { font-size: .93rem; color: var(--stone); margin: 0; }

/* ==========================================================================
   29. TESTIMONIALS
   ========================================================================== */

.reviews__grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.review {
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5) var(--s4) var(--s4);
  position: relative;
}
.review::before {
  content: "\201C";
  position: absolute;
  top: -2px;
  left: var(--s4);
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 1;
  color: var(--tan);
  opacity: .45;
}
.review__quote { margin: 0 0 var(--s4); padding: 0; border: 0; background: none; font-family: var(--sans); font-style: normal; font-size: .98rem; line-height: 1.65; color: var(--charcoal); }
.review__quote p { margin: 0; }
.review__by { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.review__name { font-weight: 600; font-size: .88rem; color: var(--ink); }
.review__meta { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tan); }

/* ==========================================================================
   30. NEWSLETTER BAND
   ========================================================================== */

.newsletter { background-color: var(--ink); color: var(--stone-lt); }
.newsletter__inner {
  display: grid;
  gap: var(--s5);
  align-items: center;
}
@media (min-width: 860px) { .newsletter__inner { grid-template-columns: 1fr 1fr; } }
.newsletter__title { color: var(--cream); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom: var(--s2); }
.newsletter__text { margin: 0; color: var(--stone-lt); }
.newsletter__note { font-size: .88rem; color: var(--stone-lt); opacity: .85; margin: 0; }
.newsletter__form input[type="email"],
.newsletter__form input[type="text"] {
  background-color: rgba(251, 247, 241, .08);
  border-color: rgba(251, 247, 241, .28);
  color: var(--cream);
}
.newsletter__form ::placeholder { color: rgba(251, 247, 241, .55); }

/* ==========================================================================
   31. SOCIAL ROW
   ========================================================================== */

.social-row { list-style: none; display: flex; gap: var(--s2); margin: 0; padding: 0; }
.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--stone);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.social-row a:hover { background-color: var(--forest); border-color: var(--forest); color: var(--cream); }

.site-footer__social { padding-bottom: var(--s5); }
.social-row--footer a { border-color: var(--line-dk); color: var(--stone-lt); }
.social-row--footer a:hover { background-color: var(--tan); border-color: var(--tan); color: var(--ink); }

/* ==========================================================================
   32. FREE SHIPPING PROGRESS
   ========================================================================== */

.ship-progress {
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}
.ship-progress__msg { margin: 0 0 var(--s2); font-size: .9rem; color: var(--charcoal); }
.ship-progress__msg--done { color: var(--forest); font-weight: 600; }
.ship-progress__track { height: 6px; background-color: var(--line); border-radius: 100px; overflow: hidden; }
.ship-progress__bar {
  height: 100%;
  background-color: var(--tan);
  border-radius: 100px;
  transition: width .5s var(--ease);
}
.ship-progress__msg--done + .ship-progress__track .ship-progress__bar { background-color: var(--forest); }

/* ==========================================================================
   33. CATEGORY TILE ARTWORK
   ========================================================================== */

.woocommerce ul.products li.product-category .card__media { border-bottom: 1px solid var(--line); }
.woocommerce ul.products li.product-category img.hmp-cat-art {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
}

/* ==========================================================================
   34. BACK TO TOP
   ========================================================================== */

.to-top {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: 80;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  box-shadow: var(--shadow);
}
.to-top:hover { background-color: var(--forest); border-color: var(--forest); transform: translateY(-2px); }
@media print { .to-top { display: none !important; } }

/* --------------------------------------------------------------------------
   Newsletter sits directly above the footer and both are dark, so at default
   section padding they read as one oversized black block with a hole in it.
   A slightly lifted tone plus a hairline separates them, and the band does not
   need full section padding when it is the last thing before the footer.
   -------------------------------------------------------------------------- */
.newsletter {
  background-color: #1F211D;
  border-top: 1px solid var(--line-dk);
  padding-block: clamp(var(--s5), 3.5vw, var(--s6));
}
.newsletter + .site-footer,
.newsletter ~ .site-footer { border-top: 1px solid var(--line-dk); }
.site-main--home > .newsletter:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Hero framing for the supplied banner.
   The source is 1024x571 (1.79:1) after cropping the burnt-in headline off its
   left third; the hero box is wider than that, so `cover` crops vertically and
   at 50% it sliced the "100% HANDMADE / FAIR TRADE" badge in half. Biasing the
   focal point upward keeps the badge and the peaks, and the products stay in
   frame because they sit mid-height.
   -------------------------------------------------------------------------- */
.hero__bg img,
.hero__img { object-position: 58% 26%; }

@media (max-width: 699px) {
  /* On phones the box is taller than the image is wide, so the crop reverses:
     hold the centre or the products fall out of frame entirely. */
  .hero__bg img,
  .hero__img { object-position: 62% 45%; }
}

/* --------------------------------------------------------------------------
   Loop "Add to cart": label was sitting top-left instead of centred.

   Measured cause, not guessed: WooCommerce ships
       .woocommerce ul.products li.product .button { display: inline-block }
   at specificity (0,4,2), which beats this theme's (0,2,1) button rule. The
   card is a flex container, so inline-block then BLOCKIFIES to display:block -
   at which point align-items and justify-content stop applying entirely, and
   the label falls to the top-left of a 40px box with an 11.5px line-height.

   Re-asserting flex needs a selector above (0,4,2); naming the tag (a/button)
   inside the same chain gives (0,4,3) and wins without !important.
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button,
.woocommerce ul.products li.product a.added_to_cart,
.woocommerce ul.products li.product a.product_type_simple,
.woocommerce ul.products li.product a.product_type_variable,
.woocommerce ul.products li.product a.product_type_grouped,
.woocommerce ul.products li.product a.product_type_external {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  min-height: 42px;
  padding: 8px 16px;
  width: auto;
}

/* "View cart" appears after an AJAX add and should read as a quiet follow-up,
   not a second primary action competing with it. */
.woocommerce ul.products li.product a.added_to_cart {
  background-color: transparent;
  border-color: var(--line);
  color: var(--stone);
  margin-top: calc(var(--s2) * -1);
}
.woocommerce ul.products li.product a.added_to_cart:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Category tile padding.

   Measured: the title computed to margin:0 and sat 1px from the card edge.
   WooCommerce sets

       .woocommerce ul.products li.product h2 { padding: .5em 0; margin: 0 }

   at (0,4,2), which beat this theme's `li.product-category h2` at (0,2,3).
   Naming the title's own class inside the same chain reaches (0,4,2) too and,
   coming later in the cascade, wins - no !important needed.
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title,
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  padding: var(--s3) var(--s4) var(--s4);
}

/* The count is nested inside that title, so it only needs spacing, not insets. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
  display: block;
  margin-top: 5px;
  padding: 0;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tan);
  background: none;
}

/* Both tile variants now share one wrapper, so one rule sizes both. */
.woocommerce ul.products li.product-category .card__media {
  border-bottom: 1px solid var(--line);
  background-color: var(--bone);
  overflow: hidden;
}
.woocommerce ul.products li.product-category .card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  display: block;
  transition: transform .5s var(--ease);
}
.woocommerce ul.products li.product-category:hover .card__media img { transform: scale(1.035); }

/* Let the title block grow so every tile in a row ends level. */
.woocommerce ul.products li.product-category > a {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title { margin-top: auto; }

/* --------------------------------------------------------------------------
   Bundled logo fallback (header.php). Sized like the Customizer logo so the
   header height does not jump when a real one is uploaded later.
   -------------------------------------------------------------------------- */
.site-logo-link { display: inline-block; line-height: 0; }
.site-logo,
.custom-logo {
  width: auto;
  max-height: 52px;
  height: auto;
  transition: opacity .2s var(--ease);
}
.site-logo-link:hover .site-logo,
.custom-logo-link:hover .custom-logo { opacity: .78; }

/* A long Site Title used as text should not be allowed to eat the header. */
.site-title {
  font-size: 1.35rem;
  line-height: 1.15;
  margin: 0;
  max-width: 34ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 899px) {
  .site-logo, .custom-logo { max-height: 42px; }
  .site-title { font-size: 1.1rem; max-width: 22ch; -webkit-line-clamp: 2; }
}

/* ==========================================================================
   35. FOOTER, REBUILT

   The old one leaned on widgets, so an unconfigured site showed a lopsided
   grid with a hole in it, orphaned social icons floating in dead space, and
   the site name printed twice. This version leads with a brand block and
   sizes the link columns to their content, so it holds up whether there are
   four widgets or none.
   ========================================================================== */

.site-footer {
  background-color: var(--ink);
  color: var(--stone-lt);
  margin-top: auto;
  border-top: 1px solid var(--line-dk);
}

.footer-top {
  display: grid;
  gap: var(--s6) var(--s5);
  grid-template-columns: 1fr;
  padding-block: clamp(var(--s6), 5vw, var(--s7)) var(--s6);
}
@media (min-width: 760px) {
  /* brand gets a fixed, generous measure; the columns share what is left */
  .footer-top { grid-template-columns: minmax(240px, 1.15fr) 2.2fr; }
}

/* --- brand block --- */
.footer-brand { max-width: 34ch; }

.footer-wordmark {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--s3);
}
.footer-wordmark a { color: var(--cream); }
.footer-wordmark a:hover { color: var(--tan); }

.footer-blurb {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--stone-lt);
  margin: 0 0 var(--s4);
}

/* Social now sits inside the brand block instead of floating below it. */
.footer-brand .social-row { margin: 0; }

/* --- link columns --- */
.footer-cols {
  display: grid;
  gap: var(--s5) var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  align-content: start;
}
.footer-col { min-width: 0; }
.footer-col .widget { margin-bottom: var(--s5); }
.footer-col .widget:last-child { margin-bottom: 0; }

.site-footer .widget-title {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 var(--s3);
  padding: 0;
  border: 0;               /* the old tan underline fought the column rhythm */
  display: block;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li {
  border: 0;               /* dividers between every link were visual noise */
  padding: 0 0 9px;
  line-height: 1.45;
}
.site-footer li:last-child { padding-bottom: 0; }

.site-footer a { color: var(--stone-lt); }
.site-footer a:hover { color: var(--cream); }

/* Footer link underline on hover only - quieter than a permanent rule. */
.footer-col a,
.footer-menu a {
  font-size: .92rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.footer-col a:hover,
.footer-menu a:hover { border-bottom-color: var(--tan); }

/* A search form in the footer should be compact, not a hero control. */
.site-footer .search-form { gap: 6px; }
.site-footer .search-field {
  background-color: rgba(251, 247, 241, .07);
  border-color: var(--line-dk);
  color: var(--cream);
  min-height: 40px;
  font-size: .88rem;
}
.site-footer .search-field::placeholder { color: rgba(181, 175, 163, .8); }
.site-footer .search-submit {
  min-height: 40px;
  padding: 0 14px;
  font-size: .68rem;
  background-color: transparent;
  border-color: var(--line-dk);
  color: var(--stone-lt);
}
.site-footer .search-submit:hover {
  background-color: var(--tan);
  border-color: var(--tan);
  color: var(--ink);
  transform: none;
}

/* --- payment row --- */
.footer-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s4);
  border-top: 1px solid var(--line-dk);
}
.footer-pay__label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone);
}
.footer-pay__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.footer-pay__list li {
  padding: 5px 12px;
  border: 1px solid var(--line-dk);
  border-radius: var(--radius);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--stone-lt);
  line-height: 1.4;
}

/* --- bottom bar --- */
.site-footer__bottom { border-top: 1px solid var(--line-dk); }
.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s4);
  font-size: .78rem;
}
.site-credit { margin: 0; color: var(--stone); }

.footer-menu-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-menu-inline li { padding: 0; }
.footer-menu-inline a { font-size: .78rem; }

@media (max-width: 559px) {
  .footer-top { padding-block: var(--s6) var(--s5); gap: var(--s5); }
  .footer-cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
  .site-footer__bottom-inner { justify-content: flex-start; }
  .footer-wordmark { font-size: 1.3rem; }
}

/* --------------------------------------------------------------------------
   Editor-content links get a tan underline, which is right for prose and wrong
   for anything WooCommerce renders inside a page - on the empty-cart page the
   "New in store" product titles and even the Add to Cart labels came out
   underlined. Scope the underline to real body copy.
   -------------------------------------------------------------------------- */
.entry-content .woocommerce a,
.entry-content ul.products a,
.entry-content a.button,
.entry-content .wc-block-grid a,
.woocommerce ul.products li.product a,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .cart-empty ~ * a {
  text-decoration: none;
}
.entry-content .woocommerce a:hover,
.woocommerce ul.products li.product a:hover { text-decoration: none; }

/* Keep the underline where it belongs: prose links inside written content. */
.entry-content > p > a:not(.button),
.entry-content > ul > li > a:not(.button),
.entry-content > ol > li > a:not(.button) {
  text-decoration: underline;
  text-decoration-color: var(--tan);
  text-underline-offset: 3px;
}

/* ==========================================================================
   36. PRODUCT PAGE - added sections
   ========================================================================== */

.hmp-anchor { display: block; height: 0; scroll-margin-top: 120px; }

/* --- availability line --- */
.stock-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 var(--s3);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--forest);
}
.stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
  flex: 0 0 auto;
}
.stock-line--low { color: var(--terra); }
.stock-line--out { color: var(--stone); }

/* --- pay row under the buy button --- */
.pdp-pay {
  margin: var(--s3) 0 0;
  font-size: .8rem;
  color: var(--stone);
}
.pdp-pay__label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tan);
  margin-right: 6px;
}

/* --- collapsible panels --- */
.pdp-panels { margin-top: var(--s4); border-top: 1px solid var(--line); }

.pdp-panel { border-bottom: 1px solid var(--line); }
.pdp-panel > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s3) 26px var(--s3) 0;
  position: relative;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.pdp-panel > summary::-webkit-details-marker { display: none; }
/* CSS-drawn chevron - no icon font, rotates when the panel opens */
.pdp-panel > summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--tan);
  border-bottom: 1.5px solid var(--tan);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s var(--ease);
}
.pdp-panel[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.pdp-panel > summary:hover { color: var(--terra); }

.pdp-panel__body {
  padding-bottom: var(--s4);
  font-size: .92rem;
  line-height: 1.7;
  color: var(--stone);
}
.pdp-panel__body p:last-child { margin-bottom: 0; }

/* --- spec list --- */
.pdp-specs { margin: 0; display: grid; gap: 0; }
.pdp-specs__row {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: var(--s3);
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.pdp-specs__row:last-child { border-bottom: 0; }
.pdp-specs dt {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0;
}
.pdp-specs dd { margin: 0; font-size: .92rem; color: var(--charcoal); }

/* --- share --- */
.pdp-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.pdp-share__label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tan);
}
.pdp-share ul { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.pdp-share a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .74rem;
  color: var(--stone);
  text-decoration: none;
}
.pdp-share a:hover { background-color: var(--ink); border-color: var(--ink); color: var(--cream); }

/* --- sticky buy bar --- */
.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  background-color: rgba(251, 247, 241, .97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px -18px rgba(23, 24, 21, .5);
  animation: buybar-in .22s var(--ease);
}
@keyframes buybar-in { from { transform: translateY(100%); } to { transform: none; } }

.buybar__inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: 10px;
}
.buybar__media { flex: 0 0 auto; width: 46px; }
.buybar__media img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin: 0;
}
.buybar__copy { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.buybar__title {
  font-family: var(--serif);
  font-size: .96rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buybar__price { font-size: .86rem; font-weight: 600; color: var(--charcoal); }
.buybar__price del { display: none; }          /* one price in a compact bar */
.buybar__cta { flex: 0 0 auto; min-height: 42px; padding: 0 24px; }

@media (max-width: 559px) {
  .buybar__media { display: none; }
  .buybar__cta { flex: 1 1 auto; }
  .to-top { bottom: 82px; }                    /* clear the bar */
}

/* --- recently viewed --- */
.recently-viewed { margin-top: var(--s7); }
.recently-viewed .section-title { font-size: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .buybar { animation: none; }
}

/* ==========================================================================
   37. CONTACT PAGE  (template-contact.php)
   ========================================================================== */

.contact-layout {
  display: grid;
  gap: clamp(var(--s5), 4vw, var(--s7));
  grid-template-columns: 1fr;
  padding-block: var(--s6);
  align-items: start;
}
@media (min-width: 880px) {
  .contact-layout { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
  /* The details sit beside the form on desktop and above it on mobile, which
     is the order someone actually reads them in. */
  .contact-aside { position: sticky; top: calc(var(--header-h) + var(--s4)); }
}

/* --- contact methods --- */
.contact-methods { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.contact-method {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.contact-method:first-child { padding-top: 0; }
.contact-method:last-child { border-bottom: 0; }

.contact-method__icon { color: var(--tan); flex: 0 0 auto; margin-top: 2px; }
.contact-method__body { display: flex; flex-direction: column; min-width: 0; }
.contact-method__label {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 3px;
}
.contact-method__value {
  font-size: 1rem;
  color: var(--ink);
  overflow-wrap: anywhere;   /* long emails must not push the column wide */
}
a.contact-method__value { border-bottom: 1px solid transparent; }
a.contact-method__value:hover { color: var(--terra); border-bottom-color: var(--terra); }

/* --- hours / response time --- */
.contact-note {
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4);
  margin-bottom: var(--s5);
}
.contact-note__row { margin: 0 0 var(--s3); font-size: .92rem; line-height: 1.6; color: var(--stone); }
.contact-note__row:last-child { margin-bottom: 0; }
.contact-note strong {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tan);
}

.contact-social .contact-method__label { display: block; margin-bottom: var(--s2); }

/* --- form panel --- */
.contact-form {
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s4), 3vw, var(--s5));
  margin-top: var(--s5);
}
.contact-form__title { font-size: 1.35rem; margin-bottom: var(--s3); }
.contact-form__hint {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line);
  font-size: .8rem;
  color: var(--stone);
}

/* Contact Form 7 and friends emit bare <p> wrappers - give them a real grid. */
.contact-form .wpcf7-form p { margin-bottom: var(--s3); }
.contact-form label { display: block; }
.contact-form input[type="submit"],
.contact-form .wpcf7-submit { width: auto; }
.contact-form .wpcf7-not-valid-tip { color: var(--terra); font-size: .82rem; }
.contact-form .wpcf7-response-output {
  border-radius: var(--radius);
  border-width: 1px;
  padding: var(--s3);
  font-size: .9rem;
}

/* --- map --- */
.contact-map {
  border-top: 1px solid var(--line);
  background-color: var(--cream);
  line-height: 0;              /* kill the iframe baseline gap */
}
.contact-map iframe { display: block; width: 100%; }

@media (max-width: 559px) {
  .contact-layout { padding-block: var(--s5); }
  .contact-map iframe { height: 300px; }
}

/* ==========================================================================
   38. APPROVED HOMEPAGE LAYOUT
   Floating feature bar, boxed intro heading, three pillar cards and the
   ornamental "Feature Product" title.
   ========================================================================== */

/* --- floating feature bar ------------------------------------------------
   Pulled up over the hero with a negative margin. The hero gets matching
   bottom padding so the card never covers the CTA on short viewports.        */
.feature-bar {
  position: relative;
  z-index: 5;
  margin-top: -46px;
  margin-bottom: var(--s5);
}
.hero + .feature-bar { margin-top: -46px; }

.feature-bar__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  list-style: none;
  margin: 0;
  padding: var(--s3) var(--s4);
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.feature-bar__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px var(--s3);
  min-width: 0;
  border-left: 1px solid var(--line);
}
.feature-bar__item:first-child { border-left: 0; }

.feature-bar__icon { color: var(--ink); flex: 0 0 auto; }
.feature-bar__copy { display: flex; flex-direction: column; min-width: 0; }
.feature-bar__title,
.feature-bar__sub {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--ink);
}
.feature-bar__sub { color: var(--stone); font-weight: 500; }

@media (max-width: 1099px) {
  .feature-bar__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) 0; }
  .feature-bar__item:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 699px) {
  .feature-bar { margin-top: -22px; }
  .feature-bar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s3); }
  .feature-bar__item:nth-child(odd) { border-left: 0; }
  .feature-bar__item:nth-child(3n+1) { border-left: 1px solid var(--line); }
  .feature-bar__item:nth-child(2n+1) { border-left: 0; }
}

/* --- boxed section heading --- */
.boxed-title {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s5);
}
.boxed-title::before,
.boxed-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--line);
}
.boxed-title__text {
  margin: 0;
  padding: 12px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--cream);
  font-family: var(--sans);
  font-size: clamp(.82rem, .72rem + .5vw, 1.02rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  line-height: 1.35;
}

/* --- intro copy --- */
.intro-block { padding-bottom: var(--s5); }
.intro-block__body {
  max-width: 92ch;
  margin-inline: auto;
  color: var(--stone);
  font-size: .98rem;
  line-height: 1.75;
}
.intro-block__body p { margin-bottom: 1em; }
.intro-block__body p:last-child { margin-bottom: 0; }

/* --- three pillar cards --- */
.pillars-section { padding-top: 0; }
.pillars {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.pillar {
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4);
}
.pillar__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); }
.pillar__icon { color: var(--forest); flex: 0 0 auto; }
.pillar__title {
  margin: 0;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Copy left, illustration right - never the image inside the paragraph.
   Centred rather than top-aligned: the copy runs to five or six lines in a
   third-width card while the illustration is about 90px tall, and hanging it
   off the first line left it floating in the top corner. */
.pillar__body { display: flex; align-items: center; gap: var(--s3); }
.pillar__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--stone);
  min-width: 0;
}
.pillar__media { flex: 0 0 auto; width: clamp(104px, 36%, 152px); margin: 0; }
.pillar__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  /*
   * The three bundled illustrations are line drawings on a white or near-white
   * plate with no alpha channel. Dropped straight onto the cream card they
   * each showed as a hard white rectangle with a visible edge. multiply lets
   * the plate fall away into the card while the ink stays exactly as drawn -
   * no cut-out, no matting, and it costs nothing.
   */
  mix-blend-mode: multiply;
}

@media (max-width: 479px) {
  .pillar__body { flex-direction: column-reverse; align-items: flex-start; }
  .pillar__media { width: 108px; }
}

/* --- ornamental "Feature Product" heading --- */
.section-title--ornament {
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.section-title--ornament::before,
.section-title--ornament::after { display: none; }
.section-title--ornament span {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  color: var(--ink);
  white-space: normal;
}
.section-title--ornament .ornament {
  display: block;
  width: 116px;
  height: 10px;
  color: var(--tan);
}

/* --------------------------------------------------------------------------
   Pillar illustrations sit on their own white plates (the seal and the loom
   are cut-outs on white). Multiply drops that white into the cream card so
   the artwork reads as printed on it rather than pasted onto it.
   -------------------------------------------------------------------------- */
.pillar__media img {
  mix-blend-mode: multiply;
  background: transparent;
}

/* --------------------------------------------------------------------------
   Top bar: statement on the left, utility links on the right, per the design.
   Falls back to a single centred line when no top-bar menu is assigned.
   -------------------------------------------------------------------------- */
.topbar__inner { display: flex; align-items: center; justify-content: center; gap: var(--s4); }
.topbar--split .topbar__inner { justify-content: space-between; }
.topbar--split .topbar__text { text-align: left; }

.topbar__menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar__menu li { padding: 0; border: 0; }
.topbar__menu a {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--stone-lt);
  white-space: nowrap;
}
.topbar__menu a:hover { color: var(--cream); }

@media (max-width: 849px) {
  /* The statement is the important half; drop the links rather than wrap to
     three lines on a phone. */
  .topbar--split .topbar__nav { display: none; }
  .topbar--split .topbar__inner { justify-content: center; }
  .topbar--split .topbar__text { text-align: center; }
}

/* ==========================================================================
   39. HEADER + HERO, matched to the approved comp
   ========================================================================== */

:root {
  --green-bar: #35502F;   /* top bar in the comp - deeper than --forest */
  --hero-ink:  #2F4A2B;   /* hero headline over the bright mountain half */
}

/* --- top bar: deep green, not ink --- */
.topbar { background-color: var(--green-bar); color: rgba(251, 247, 241, .85); }
.topbar__text { color: rgba(251, 247, 241, .9); }
.topbar__menu a { color: rgba(251, 247, 241, .82); }
.topbar__menu a:hover { color: #fff; }

/* --- centred primary nav --- */
@media (min-width: 900px) {
  .site-header__inner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); }
  .site-branding { margin-right: 0; }
  .main-navigation { justify-self: center; }
  .header-actions { justify-self: end; }
}

/* --- account icon --- */
.account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  color: var(--charcoal);
}
.account-link:hover { color: var(--forest); background-color: var(--bone); }

/* --- cart: icon plus a round count, as in the comp --- */
.cart-link {
  position: relative;
  border: 0;
  padding: 0;
  width: 42px;
  height: 42px;
  justify-content: center;
}
.cart-link:hover { background-color: var(--bone); color: var(--forest); }
.cart-link__count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 100px;
  background-color: var(--green-bar);
  color: var(--cream);
  font-size: .62rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.cart-link:hover .cart-link__count { background-color: var(--terra); }

/* ==========================================================================
   HERO - light variant
   The supplied banner is bright on its left third, so the comp sets the
   headline in deep green directly on the photograph with no dark wash. The
   original "dark" treatment stays available for busier images.
   ========================================================================== */

.hero--light.hero--has-image::after {
  /* a soft light scrim, only enough to hold contrast over the mountains */
  background: linear-gradient(90deg, rgba(250,246,238,.86) 0%, rgba(250,246,238,.55) 38%, rgba(250,246,238,0) 62%);
}
.hero--light .hero__inner { min-height: clamp(420px, 44vw, 560px); }

.hero__brand {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.1rem + 3.6vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--hero-ink);
  margin: 0 0 var(--s2);
}
.hero--dark .hero__brand { color: var(--cream); }

.hero__lede {
  font-family: var(--sans);
  font-size: clamp(.86rem, .74rem + .55vw, 1.15rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hero-ink);
  margin: 0 0 var(--s3);
}
.hero--dark .hero__lede { color: var(--cream); }

.hero--light .hero__text { color: var(--charcoal); text-shadow: none; }
.hero--light .hero__eyebrow { color: var(--hero-ink); border-bottom-color: rgba(47,74,43,.35); }

/* buttons: solid green + outlined, as drawn */
.hero--light .hero__actions .button {
  background-color: var(--green-bar);
  border-color: var(--green-bar);
  color: var(--cream);
}
.hero--light .hero__actions .button:hover { background-color: var(--forest-dk); border-color: var(--forest-dk); }
.hero--light .hero__actions .button--ghost {
  background-color: rgba(251, 247, 241, .82);
  border-color: var(--green-bar);
  color: var(--hero-ink);
}
.hero--light .hero__actions .button--ghost:hover { background-color: var(--green-bar); color: var(--cream); }

@media (max-width: 699px) {
  /* On phones the scrim has to cover the whole frame, not just the left. */
  .hero--light.hero--has-image::after { background: rgba(250, 246, 238, .82); }
  .hero--light .hero__inner { min-height: 0; }
}

/* --------------------------------------------------------------------------
   Hero headline fit.
   .hero__copy is capped at 46ch, which at the comp's type size is only ~390px
   - so "HIMALAYAN PANDA®" broke across two lines. The comp sets it on one.
   Widen the column for the light variant and pull the size back slightly; the
   two together let the brand line sit on a single line from 900px up.
   -------------------------------------------------------------------------- */
.hero--light .hero__copy { max-width: min(660px, 56%); }
.hero--light .hero__brand { font-size: clamp(2rem, 1.05rem + 3vw, 3.6rem); }

@media (min-width: 1100px) {
  /* Enough room here to guarantee one line without risking a clip below. */
  .hero--light .hero__brand { white-space: nowrap; }
}
@media (max-width: 899px) {
  .hero--light .hero__copy { max-width: none; }
  .hero--light .hero__brand { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Pull the hero scrim back off the products.
   It previously faded out at 62%, which desaturated the jacket sitting at the
   centre of the frame. The comp keeps the products fully saturated and only
   lightens the mountains behind the copy, so the wash now clears by ~46%.
   -------------------------------------------------------------------------- */
.hero--light.hero--has-image::after {
  background: linear-gradient(
    90deg,
    rgba(250, 246, 238, .84) 0%,
    rgba(250, 246, 238, .70) 26%,
    rgba(250, 246, 238, .28) 40%,
    rgba(250, 246, 238, 0)   46%
  );
}

/* --------------------------------------------------------------------------
   Keep the hero copy inside the lit half.
   Widening the column to fit the brand on one line pushed it onto the jacket,
   where deep green on dark wool is unreadable. The comp keeps the text within
   roughly the left 40% - the part the scrim actually lightens - so the column
   is capped there and the type sized to suit, rather than the other way round.
   -------------------------------------------------------------------------- */
.hero--light .hero__copy { max-width: min(560px, 42%); }
.hero--light .hero__brand { font-size: clamp(1.75rem, .95rem + 2.3vw, 2.9rem); }
.hero--light .hero__lede { font-size: clamp(.78rem, .7rem + .38vw, .95rem); }
.hero--light .hero__text { font-size: clamp(.92rem, .88rem + .2vw, 1.02rem); max-width: 34ch; }

@media (max-width: 899px) {
  .hero--light .hero__copy { max-width: none; }
}

/* The hero art now carries its own empty left third, so the scrim only needs
   to lift the copy area slightly rather than bleach a quarter of the frame. */
.hero--light.hero--has-image::after {
  background: linear-gradient(
    90deg,
    rgba(250, 246, 238, .58) 0%,
    rgba(250, 246, 238, .34) 24%,
    rgba(250, 246, 238, 0)   40%
  );
}
.hero--light .hero__copy { max-width: min(600px, 44%); }

/* ==========================================================================
   40. PRODUCT PAGE, REBUILT TO THE COMP

   Vertical thumbnail rail, craft stamp, collection pill, real star rating,
   saving badge, benefit rows, swatches, stacked buy buttons, reassurance
   band, vertical tabs and a lifestyle-led related strip.

   Colours here were measured, not guessed. The star gold is #A8761F rather
   than a brighter amber because anything lighter falls under 3:1 against the
   cream card and stops being a legible graphic; the review count uses --stone
   at 5.35:1 because it is text and has the higher bar to clear.
   ========================================================================== */

:root {
  --star:      #A8761F;   /* 3.73:1 on --cream - clears the non-text minimum */
  --footer-bg: #2C3F32;   /* deep green footer from the comp */
  --footer-dk: #24352B;   /* the signup band sits a shade deeper */

  --icon-cart: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h2.2l2.3 12.2a2 2 0 0 0 2 1.6h8.6a2 2 0 0 0 2-1.6L21 7H5.4'/%3E%3Ccircle cx='9.5' cy='20' r='1.4'/%3E%3Ccircle cx='17.5' cy='20' r='1.4'/%3E%3C/svg%3E");
}

/* --- top of the product: gallery left, summary right ---------------------
   Replaces the old float pair, which was keyed to Woo's gallery markup that
   this theme no longer prints. Grid also lets the tabs and related strip run
   the full width underneath without a clearfix. */
/* The extra "div" is not decoration. WooCommerce's own layout stylesheet ships
   ".woocommerce div.product div.summary { float: right; width: 48% }" at
   (0,3,2); a selector without it computes to (0,3,1) and loses no matter how
   late it appears. Measured symptom: the grid column came out 547px wide and
   the buy button 262px, which is 48% of it - the float rule was still running
   the show inside a grid that had already replaced it. */
.woocommerce div.product div.summary { width: auto; float: none; }

@media (min-width: 900px) {
  .woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    column-gap: clamp(var(--s5), 4vw, var(--s6));
    align-items: start;
  }
  .woocommerce div.product > * { grid-column: 1 / -1; }
  /* The gallery does NOT stick.
   *
   * It was made sticky so the picture would follow the reader down the taller
   * summary column instead of stranding at the top of it. Reported in a real
   * browser as the image sitting on top of the tabs, which is not a trade
   * worth making: the dead space it was solving is cosmetic and the pinning
   * was never in the design. It also parked the image 22px from the top of the
   * viewport, which is underneath the sticky site header.
   *
   * If it is ever wanted back, it needs its own scroll container or an offset
   * clear of the header - not just position: sticky on a grid item. */
  /* One item for the whole left column - gallery plus whatever sits under it.
     Everything else (tabs, related, recently viewed) is left to
     auto-placement, which drops a full-width span into the first row that can
     hold it, i.e. row 2 onward. */
  .woocommerce div.product > .pdp-media   { grid-column: 1; grid-row: 1; align-self: start; }
  .woocommerce div.product > div.summary  { grid-column: 2; grid-row: 1; margin-bottom: 0; }
}

/* --- the block under the gallery ---------------------------------------- */
.pdp-under { margin-top: var(--s4); }
.pdp-under > :first-child { margin-top: 0; }
.pdp-under .craft-note { margin-top: 0; }
.pdp-under .craft-note + .pdp-share { margin-top: var(--s4); }

@media (max-width: 899px) {
  /* One column, and the supporting block must not come between the picture
     and the price - which is exactly where it sits in source order, since it
     is printed inside the media wrapper.
     display: contents dissolves that wrapper so its two children become flex
     items of the product itself and can be ordered independently. Safe on a
     plain div; it is only elements carrying an implicit ARIA role that lose
     semantics this way. */
  .woocommerce div.product { display: flex; flex-direction: column; }
  .woocommerce div.product > *            { order: 4; }
  .woocommerce div.product > .pdp-media   { display: contents; }
  .woocommerce div.product .pdp-gallery   { order: 1; }
  .woocommerce div.product div.summary    { order: 2; }
  .woocommerce div.product .pdp-under     { order: 3; }
}

/* The product already sits inside a .container, so the one inside these
   sections would indent them out of line with the gallery above. */
.woocommerce div.product .pdp-tabs > .container,
.woocommerce div.product .pdp-related > .container,
.woocommerce div.product .recently-viewed > .container {
  max-width: none;
  padding-inline: 0;
}

/* --- gallery ------------------------------------------------------------ */
.pdp-gallery { display: grid; gap: var(--s3); }
.pdp-gallery--rail { grid-template-columns: 84px minmax(0, 1fr); }

.pdp-gallery__rail { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }

.pdp-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 560px;
  overflow: auto;
  scrollbar-width: none;
}
.pdp-gallery__thumbs::-webkit-scrollbar { width: 0; height: 0; }

.pdp-gallery__thumb {
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--cream);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.pdp-gallery__thumb img { display: block; width: 100%; height: auto; }
.pdp-gallery__thumb:hover { border-color: var(--tan); }
.pdp-gallery__thumb.is-active { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }

.pdp-gallery__more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
  color: var(--stone);
  cursor: pointer;
}
.pdp-gallery__more:hover { color: var(--ink); border-color: var(--tan); }

.pdp-gallery__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* No fixed aspect-ratio on the stage.
 *
 * A 4/5 frame made the columns balance, but this catalogue's photography is
 * cut-outs on their own pale backgrounds, and letterboxing them against the
 * card's cream drew a visible seam across every product - two nearly-equal
 * off-whites meeting in a hard line, which looks like a rendering fault
 * rather than a design. Cropping to fill instead would take the sleeves off a
 * jacket. Letting the image set its own height leaves the gallery column
 * shorter than the summary, which is what the sticky rule above is for. */
.pdp-gallery__img { display: block; width: 100%; height: auto; }

/* Dropping Woo's gallery scripts took click-to-zoom with them. A slow scale
   inside the clipped stage gives back the useful half of that for nothing,
   and only where there is a real pointer to hover with. */
@media (hover: hover) and (pointer: fine) {
  .pdp-gallery__img { transition: transform .5s var(--ease); }
  .pdp-gallery__stage:hover .pdp-gallery__img { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-gallery__stage:hover .pdp-gallery__img { transform: none; }
}

/* --- the circular craft stamp ------------------------------------------- */
.pdp-stamp {
  position: absolute;
  right: clamp(12px, 3%, 22px);
  bottom: clamp(12px, 3%, 22px);
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: 50%;
  background-color: var(--green-bar);
  color: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .28), 0 6px 18px -8px rgba(23, 24, 21, .5);
  pointer-events: none;
}
.pdp-stamp__text {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}

/* --- the pill above the title ------------------------------------------- */
.pdp-pill {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: 6px 14px;
  border-radius: 999px;
  background-color: var(--green-bar);
  color: var(--cream);
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
a.pdp-pill:hover { background-color: var(--forest); color: var(--cream); }

/* --- star rating -------------------------------------------------------- */
.pdp-rating { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }

.pdp-stars { position: relative; display: inline-block; width: 100px; height: 20px; flex: 0 0 auto; }
.pdp-stars__svg { display: block; width: 100px; height: 20px; }
.pdp-stars__svg--base { fill: var(--line); }
.pdp-stars__svg--on { fill: var(--star); }
.pdp-stars__clip {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  white-space: nowrap;
}

.pdp-rating__count {
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 500;
  color: var(--stone);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pdp-rating__count:hover { color: var(--ink); border-bottom-color: var(--tan); }

/* --- price row ---------------------------------------------------------- */
.pdp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); }
.woocommerce div.product .pdp-price p.price { margin-bottom: 0; }

.pdp-off {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background-color: var(--green-bar);
  color: var(--cream);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- benefit rows ------------------------------------------------------- */
.pdp-features {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  display: grid;
  gap: var(--s3);
}
.pdp-features__item { display: flex; align-items: center; gap: var(--s3); }
.pdp-features__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--forest);
}
.pdp-features__text { font-size: .92rem; color: var(--charcoal); }

/* --- variation swatches -------------------------------------------------
   Built from Woo's own select, which stays in the DOM and stays the single
   source of truth - the buttons only set its value and fire a change event,
   so variation pricing, stock and images keep working untouched. */
.pdp-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 2px; }

.pdp-swatch {
  min-width: 48px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.pdp-swatch:hover { border-color: var(--tan); }
.pdp-swatch.is-active {
  border-color: var(--forest);
  background-color: var(--forest);
  color: var(--cream);
}

/* Woo styles this select at ".woocommerce div.product form.cart .variations
   select" - (0,4,3) - with "min-width: 75%". Hiding it from a lower-specificity
   selector left a 867px control sitting off the right edge of the page: the
   width shrank, the min-width did not. Measured as 195px of horizontal
   overflow on the variable product before this was raised to (0,5,2), and
   min-width reset explicitly rather than assumed. */
.woocommerce div.product form.cart.has-swatches .variations select {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.woocommerce div.product form.cart.has-swatches .variations { width: 100%; border: 0; margin-bottom: var(--s3); }
.woocommerce div.product form.cart.has-swatches .variations th,
.woocommerce div.product form.cart.has-swatches .variations td { display: block; padding: 0; border: 0; text-align: left; }
.woocommerce div.product form.cart.has-swatches .variations tr { display: block; }
.woocommerce div.product form.cart.has-swatches .variations th.label label {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --- buy area: full width, stacked, as drawn ---------------------------- */
.woocommerce div.product form.cart { display: block; margin-bottom: var(--s3); }
.woocommerce div.product form.cart .quantity { display: inline-flex; margin: 0 0 var(--s3); }

.woocommerce div.product form.cart button.button.alt.single_add_to_cart_button,
.woocommerce div.product form.cart button.button.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  float: none;
  padding: 0 24px;
  min-height: 54px;
  font-size: .78rem;
}
.woocommerce div.product form.cart button.single_add_to_cart_button::before {
  content: "";
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  background-color: currentColor;
  -webkit-mask: var(--icon-cart) center / contain no-repeat;
  mask: var(--icon-cart) center / contain no-repeat;
}

/* --- wishlist ----------------------------------------------------------- */
.pdp-wish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin-bottom: var(--s3);
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.pdp-wish:hover { background-color: var(--bone); }
.pdp-wish svg { fill: none; transition: fill .18s var(--ease); }
.pdp-wish.is-saved { border-color: var(--terra); color: var(--terra); }
.pdp-wish.is-saved svg { fill: currentColor; }

.pdp-wish__link { margin: -6px 0 var(--s3); font-size: .84rem; }

/* --- reassurance band --------------------------------------------------- */
/* Four across in one row, fixed rather than auto-fit.
 *
 * This sits inside the summary column, which is about 547px wide, so each item
 * gets roughly 125px. That is too narrow for the type sizes the 2 x 2 version
 * used, hence the tighter gap, padding and font sizes below - without them
 * "Ethical craftsmanship" wraps and the row loses its alignment. Phones keep
 * the 2 x 2, where a quarter of the screen per item is unreadable. */
.pdp-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
  margin-top: var(--s4);
  padding: var(--s4) var(--s3);
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.pdp-trust__item { display: grid; justify-items: center; text-align: center; gap: 3px; min-width: 0; }
.pdp-trust__icon { color: var(--forest); }
.pdp-trust__item strong {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  text-wrap: balance;
}
.pdp-trust__item span { font-size: .67rem; color: var(--stone); line-height: 1.35; text-wrap: balance; }

@media (max-width: 719px) {
  .pdp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: var(--s4); }
  .pdp-trust__item strong { font-size: .78rem; }
  .pdp-trust__item span { font-size: .74rem; }
}

/* --- vertical tabs ------------------------------------------------------ */
.pdp-tabs { margin-top: var(--s7); }

.pdp-tabs__inner {
  display: grid;
  gap: var(--s5);
  padding: var(--s5);
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@media (min-width: 900px) {
  .pdp-tabs__inner { grid-template-columns: 210px minmax(0, 1fr) minmax(0, 300px); align-items: start; }
  .pdp-tabs__inner--noimg { grid-template-columns: 210px minmax(0, 1fr); }
}

.pdp-tabs__list { display: flex; flex-direction: column; gap: 2px; }

.pdp-tabs__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 13px 16px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: transparent;
  color: var(--stone);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: left;
  cursor: pointer;
  transition: color .16s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease);
}
.pdp-tabs__tab:hover { color: var(--ink); background-color: var(--bone); }
.pdp-tabs__tab.is-active {
  color: var(--ink);
  background-color: var(--white);
  border-left-color: var(--terra);
}

.pdp-tabs__count {
  font-style: normal;
  font-size: .7rem;
  font-weight: 600;
  color: var(--stone);
  background-color: var(--bone);
  border-radius: 999px;
  padding: 2px 8px;
}
.pdp-tabs__tab.is-active .pdp-tabs__count { color: var(--ink); }

.pdp-tabs__panel + .pdp-tabs__panel { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.pdp-tabs__heading { font-size: 1.3rem; margin-bottom: var(--s3); }
.pdp-tabs__body { color: var(--charcoal); }
.pdp-tabs__body > :last-child { margin-bottom: 0; }

/* Only once the script has run is it safe to hide anything. Without it every
   panel simply stacks, which is what a crawler and a broken bundle both get. */
.pdp-tabs.is-tabbed .pdp-tabs__panel { display: none; }
.pdp-tabs.is-tabbed .pdp-tabs__panel.is-active { display: block; margin-top: 0; padding-top: 0; border-top: 0; }
.pdp-tabs.is-tabbed .pdp-tabs__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pdp-tabs__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* --- you may also like -------------------------------------------------- */
.pdp-related { margin-top: var(--s7); }
.pdp-related__layout { display: grid; gap: var(--s5); align-items: stretch; }
@media (min-width: 900px) {
  .pdp-related__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .pdp-related__layout--noimg { grid-template-columns: minmax(0, 1fr); }
}

.pdp-related__art { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--cream); }
.pdp-related__art img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Two up, not auto-fit. Left to itself the 748px column fitted three cards
   and orphaned the fourth on a row of its own; the comp pairs them 2 x 2
   beside the lifestyle image. */
.woocommerce .pdp-related__items ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--s4);
  margin: 0;
  padding: 0;
}
@media (min-width: 900px) {
  .woocommerce .pdp-related__items ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.woocommerce .pdp-related__items ul.products::before,
.woocommerce .pdp-related__items ul.products::after { display: none; }
.woocommerce .pdp-related__items ul.products li.product { width: auto; margin: 0; float: none; }

/* --- wishlist page ------------------------------------------------------ */
.wishlist-page { padding-block: var(--s6) var(--s7); }
.wishlist-page__note { margin-top: var(--s5); font-size: .84rem; color: var(--stone); }

.wishlist-empty {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s7) var(--s4);
  text-align: center;
  color: var(--stone);
  background-color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.wishlist-empty__title { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); margin: 0; }
.wishlist-empty__text { margin: 0; max-width: 42ch; }

/* --- narrow screens ----------------------------------------------------- */
@media (max-width: 719px) {
  .pdp-gallery--rail { grid-template-columns: 1fr; }
  .pdp-gallery__rail { order: 2; flex-direction: row; align-items: center; }
  .pdp-gallery__thumbs { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .pdp-gallery__thumb { width: 72px; }
  .pdp-gallery__more { display: none; }
  .pdp-gallery__stage { order: 1; }

  .pdp-stamp { width: 82px; height: 82px; padding: 10px; }
  .pdp-stamp__text { font-size: .5rem; letter-spacing: .08em; }

  .pdp-tabs__list { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .pdp-tabs__list::-webkit-scrollbar { height: 0; }
  .pdp-tabs__tab { flex: 0 0 auto; border-left: 0; border-bottom: 2px solid transparent; border-radius: var(--radius); }
  .pdp-tabs__tab.is-active { border-left: 0; border-bottom-color: var(--terra); }
  .pdp-tabs__inner { padding: var(--s4); }
}

/* ==========================================================================
   41. GREEN FOOTER AND SIGNUP BAND

   The comp puts the footer on deep green rather than ink. Measured before
   shipping: --stone-lt reads 5.16:1 on it and --cream 10.56:1, so both the
   body links and the headings clear AA without lightening the ground.
   ========================================================================== */

.site-footer { background-color: var(--footer-bg); border-top: 0; }
.newsletter + .site-footer,
.newsletter ~ .site-footer { border-top: 0; }

.footer-signup { background-color: var(--footer-dk); }
.footer-signup__inner {
  display: grid;
  gap: var(--s4);
  align-items: center;
  padding-block: var(--s5);
}
@media (min-width: 860px) { .footer-signup__inner { grid-template-columns: 1fr 1fr; gap: var(--s6); } }

.footer-signup__title {
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  color: var(--cream);
  margin-bottom: 6px;
}
.footer-signup__text { margin: 0; color: var(--stone-lt); font-size: .92rem; }
.footer-signup__note { margin: 0; font-size: .84rem; color: var(--stone-lt); }

.footer-signup__form form { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-signup__form input[type="email"],
.footer-signup__form input[type="text"] {
  flex: 1 1 220px;
  min-height: 50px;
  padding: 0 16px;
  background-color: rgba(251, 247, 241, .08);
  border: 1px solid rgba(251, 247, 241, .26);
  border-radius: var(--radius);
  color: var(--cream);
}
.footer-signup__form ::placeholder { color: rgba(251, 247, 241, .58); }
.footer-signup__form input[type="submit"],
.footer-signup__form button {
  flex: 0 0 auto;
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius);
  background-color: var(--terra);
  color: var(--cream);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.footer-signup__form input[type="submit"]:hover,
.footer-signup__form button:hover { background-color: var(--terra-dk); }