/* ================================================================== *
   ROAM — Components
   Hand-written styling on top of WooCommerce. Section 1: Shop archive.
 * ================================================================== */

.roam-container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

/* ------------------------------------------------------------------ *
   1. Shop archive — layout wrapper
   WooCommerce renders these as separate siblings; centre them all
   on one shared container width.
 * ------------------------------------------------------------------ */
.woocommerce-products-header,
.woocommerce .woocommerce-notices-wrapper,
.woocommerce-page .woocommerce-result-count,
.woocommerce-page .woocommerce-ordering,
.woocommerce ul.products,
.woocommerce nav.woocommerce-pagination {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

/* Shop header */
.woocommerce-products-header {
  padding-block: var(--space-lg) var(--space-md);
  text-align: center;
}
.woocommerce-products-header__title.page-title {
  font-size: var(--step-4);
  letter-spacing: -0.02em;
  margin: 0;
}
.woocommerce-products-header .term-description {
  max-width: 46ch;
  margin: var(--space-sm) auto 0;
  color: var(--color-muted);
}

/* ------------------------------------------------------------------ *
   2. Toolbar — result count + ordering
 * ------------------------------------------------------------------ */
.woocommerce-page .woocommerce-result-count,
.woocommerce-page .woocommerce-ordering {
  margin-block: 0;
  padding-block: var(--space-sm);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  min-height: 3.25rem;
}
.woocommerce-page .woocommerce-result-count {
  float: none;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: none; /* ordering row keeps the bottom rule */
}
.woocommerce-page .woocommerce-ordering {
  float: none;
  justify-content: flex-end;
  border-top: none;
  margin-top: -1px; /* collapse the shared border */
}
.woocommerce-ordering select {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  color: var(--color-text);
  cursor: pointer;
}

/* ------------------------------------------------------------------ *
   3. The grid — override WooCommerce's float layout with CSS grid
 * ------------------------------------------------------------------ */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
  margin: var(--space-md) auto var(--space-xl);
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Neutralise WooCommerce's per-item float widths */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  padding: 0;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------------ *
   4. Product card
 * ------------------------------------------------------------------ */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* Media box: fixed 4:5 ratio, zoom on hover */
.roam-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-line);
  border-radius: var(--radius);
}
.roam-card__media img,
.woocommerce ul.products li.product .roam-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  display: block;
  transition: transform 0.7s var(--ease);
}
.woocommerce ul.products li.product:hover .roam-card__media img {
  transform: scale(1.05);
}

/* Sale flash */
.woocommerce ul.products li.product .roam-card__media .onsale {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  margin: 0;
  min-height: auto;
  min-width: auto;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--roam-white);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
}

/* Text block */
.woocommerce ul.products li.product .roam-card__eyebrow {
  display: block;
  margin-top: var(--space-sm);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  padding: 0;
  margin: 0.35rem 0 0.15rem;
  color: var(--color-text);
}
.woocommerce ul.products li.product .price {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
}
.woocommerce ul.products li.product .price del {
  color: var(--color-muted);
  font-weight: 400;
  margin-right: 0.4rem;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--color-accent);
}

/* Hide loop star ratings (no reviews on demo products) */
.woocommerce ul.products li.product .star-rating {
  display: none;
}

/* ------------------------------------------------------------------ *
   5. Add-to-cart — reveals on hover (always visible on touch)
 * ------------------------------------------------------------------ */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product a.added_to_cart {
  display: block;
  width: 100%;
  margin-top: var(--space-sm);
  padding: 0.85rem 1rem;
  border: none;
  border-radius: var(--radius);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover {
  background: var(--color-accent);
  color: var(--roam-white);
}
.woocommerce ul.products li.product a.added_to_cart {
  background: var(--color-brand);
  color: var(--roam-white);
}

/* Hover-reveal only on devices that actually hover */
@media (hover: hover) and (min-width: 768px) {
  .woocommerce ul.products li.product .button.add_to_cart_button {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  .woocommerce ul.products li.product:hover .button.add_to_cart_button,
  .woocommerce ul.products li.product:focus-within .button.add_to_cart_button {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading / added states */
.woocommerce ul.products li.product .button.loading {
  opacity: 0.7;
}

/* ------------------------------------------------------------------ *
   6. Pagination
 * ------------------------------------------------------------------ */
.woocommerce nav.woocommerce-pagination {
  margin-bottom: var(--space-xl);
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
  border: none;
  display: inline-flex;
  gap: 0.35rem;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0;
  color: var(--color-text);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

/* ------------------------------------------------------------------ *
   7. Grid fix — WooCommerce adds ::before/::after clearfix pseudo-
   elements to ul.products. Once the list is display:grid they turn
   into stray grid cells (the ::before eats the first slot and shifts
   every product one column). Remove them.
 * ------------------------------------------------------------------ */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none;
  display: none;
}

/* ------------------------------------------------------------------ *
   8. ShopEngine loop actions
   ShopEngine injects wishlist / quick-view / compare links into every
   product <li>. Untamed, they stack under the price and the compare
   link floats out below the card. Turn wishlist + quick-view into a
   tidy top-right overlay on the media; hide compare (not useful for
   this catalogue, and it was the element breaking the layout).
 * ------------------------------------------------------------------ */
.woocommerce ul.products li.product .shopengine-comparison {
  display: none;
}

.woocommerce ul.products li.product .shopengine-wishlist,
.woocommerce ul.products li.product .shopengine-quickview-trigger {
  position: absolute;
  right: 0.75rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(26, 29, 27, 0.14);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.woocommerce ul.products li.product .shopengine-wishlist {
  top: 0.75rem;
}
.woocommerce ul.products li.product .shopengine-quickview-trigger {
  top: 3.5rem; /* 0.75rem + button height (2.5rem) + 0.25rem gap */
}
.woocommerce ul.products li.product .shopengine-wishlist i,
.woocommerce ul.products li.product .shopengine-quickview-trigger i {
  font-size: 1.05rem;
  line-height: 1;
}
.woocommerce ul.products li.product .shopengine-wishlist:hover,
.woocommerce ul.products li.product .shopengine-quickview-trigger:hover {
  background: var(--color-accent);
  color: var(--roam-white);
}

/* Reveal the overlay only where hover exists; always on for touch. */
@media (hover: hover) and (min-width: 768px) {
  .woocommerce ul.products li.product .shopengine-wishlist,
  .woocommerce ul.products li.product .shopengine-quickview-trigger {
    opacity: 0;
    transform: translateY(-0.35rem);
  }
  .woocommerce ul.products li.product:hover .shopengine-wishlist,
  .woocommerce ul.products li.product:hover .shopengine-quickview-trigger,
  .woocommerce ul.products li.product:focus-within .shopengine-wishlist,
  .woocommerce ul.products li.product:focus-within .shopengine-quickview-trigger {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================================== *
   SITE CHROME
   Header + footer. Replaces Hello Elementor's default header/footer
   (rendered from our own template parts).
 * ================================================================== */

/* ------------------------------------------------------------------ *
   9. Header
 * ------------------------------------------------------------------ */
.roam-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.roam-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 76px;
}

/* Brand wordmark */
.roam-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  text-decoration: none;
  color: var(--color-text);
}
.roam-logo__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}
.roam-logo__sub {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--color-muted);
  margin-top: 0.25rem;
}

/* Primary nav */
.roam-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.roam-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.roam-nav__list a {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  padding-block: 0.5rem;
  position: relative;
}
.roam-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.roam-nav__list a:hover::after,
.roam-nav__list .current-menu-item > a::after {
  transform: scaleX(1);
}

/* Utility icons */
.roam-header__utils {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.roam-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--color-text);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.roam-iconbtn:hover {
  background: var(--color-stone, var(--roam-stone));
  color: var(--color-brand);
}
.roam-cart__count {
  position: absolute;
  top: 0.15rem;
  right: 0.05rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.28rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--roam-white);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}
.roam-cart__count.is-empty {
  display: none;
}

/* Mobile burger */
.roam-header__burger {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  padding: 0;
}
.roam-burger,
.roam-burger::before,
.roam-burger::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.roam-burger::before { transform: translateY(-6px); }
.roam-burger::after  { transform: translateY(6px); }
.roam-burger { position: relative; }
.roam-burger::before,
.roam-burger::after { position: absolute; left: 0; top: 0; }
.roam-header__burger[aria-expanded="true"] .roam-burger { background: transparent; }
.roam-header__burger[aria-expanded="true"] .roam-burger::before { transform: rotate(45deg); }
.roam-header__burger[aria-expanded="true"] .roam-burger::after  { transform: rotate(-45deg); }

/* Mobile dropdown nav */
.roam-mobile-nav {
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
}
.roam-mobile-nav[hidden] { display: none; }
.roam-mobile-nav .roam-nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  padding-block: var(--space-xs);
}
.roam-mobile-nav .roam-nav__list a {
  display: block;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-line);
}
.roam-mobile-nav .roam-nav__list li:last-child a { border-bottom: none; }

@media (max-width: 900px) {
  .roam-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-sm);
  }
  .roam-header__burger { display: inline-flex; }
  .roam-nav { display: none; }
  .roam-header__brand { justify-self: center; }
  .roam-header__utils { justify-self: end; }
}
@media (min-width: 901px) {
  .roam-mobile-nav { display: none; }
}

/* ------------------------------------------------------------------ *
   10. Footer
 * ------------------------------------------------------------------ */
.roam-footer {
  margin-top: var(--space-xl);
  background: var(--color-brand);
  color: var(--color-bg);
}
.roam-footer a { color: inherit; text-decoration: none; }
.roam-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: var(--space-lg) var(--space-md);
  padding-block: var(--space-lg);
}
@media (max-width: 900px) {
  .roam-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .roam-footer__inner { grid-template-columns: 1fr; gap: var(--space-md); }
}

.roam-footer .roam-logo--footer .roam-logo__mark { color: var(--color-bg); }
.roam-footer .roam-logo--footer .roam-logo__sub  { color: color-mix(in srgb, var(--color-bg) 60%, transparent); }
.roam-footer__blurb {
  color: color-mix(in srgb, var(--color-bg) 72%, transparent);
  font-size: var(--step--1);
  line-height: var(--leading-body);
  margin: var(--space-sm) 0 0;
  max-width: 34ch;
}
.roam-footer__heading {
  color: color-mix(in srgb, var(--color-bg) 65%, transparent);
  margin: 0 0 var(--space-sm);
}
.roam-footer__col ul { list-style: none; margin: 0; padding: 0; }
.roam-footer__col li { margin-bottom: 0.6rem; }
.roam-footer__col a { font-size: var(--step-0); opacity: 0.9; transition: opacity var(--dur) var(--ease); }
.roam-footer__col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* Social row */
.roam-social {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
}
.roam-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--color-bg) 30%, transparent);
  border-radius: 50%;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.roam-social a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--roam-white);
}

/* Newsletter */
.roam-newsletter {
  display: flex;
  margin-top: var(--space-sm);
  border: 1px solid color-mix(in srgb, var(--color-bg) 34%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 20rem;
}
.roam-newsletter input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.7rem 0.85rem;
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--step--1);
}
.roam-newsletter input::placeholder { color: color-mix(in srgb, var(--color-bg) 55%, transparent); }
.roam-newsletter input:focus { outline: none; }
.roam-newsletter button {
  flex: 0 0 auto;
  border: none;
  background: var(--color-accent);
  color: var(--roam-white);
  padding: 0 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.roam-newsletter button:hover { background: color-mix(in srgb, var(--color-accent) 85%, #000); }

/* Bottom bar */
.roam-footer__bar {
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent);
}
.roam-footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
}
.roam-footer__copy {
  margin: 0;
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--color-bg) 60%, transparent);
}
.roam-footer__pay {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.roam-footer__pay li {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 0.3rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--color-bg) 26%, transparent);
  border-radius: var(--radius);
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
}

/* ================================================================== *
   HOMEPAGE (front-page.php)
 * ================================================================== */

/* Shared button ------------------------------------------------------ */
.roam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.85rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.roam-btn--accent { background: var(--color-accent); color: var(--roam-white); }
.roam-btn--accent:hover { background: color-mix(in srgb, var(--color-accent) 85%, #000); }
.roam-btn--ghost { border-color: rgba(255, 255, 255, 0.6); color: var(--roam-white); }
.roam-btn--ghost:hover { background: var(--roam-white); color: var(--color-text); border-color: var(--roam-white); }

/* 11. Hero ----------------------------------------------------------- */
.roam-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(82vh, 760px);
  overflow: hidden;
  isolation: isolate;
}
.roam-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: -2;
}
.roam-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(26, 29, 27, 0.72) 0%, rgba(26, 29, 27, 0.45) 45%, rgba(26, 29, 27, 0.12) 100%);
}
.roam-hero__inner {
  color: var(--roam-white);
  padding-block: var(--space-xl);
  max-width: 640px;
}
.roam-hero__eyebrow { color: rgba(255, 255, 255, 0.82); }
.roam-hero__title {
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--roam-white);
  margin: var(--space-sm) 0 0;
}
.roam-hero__sub {
  font-size: var(--step-1);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
  margin: var(--space-sm) 0 var(--space-md);
}
.roam-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* 12. Section scaffold ----------------------------------------------- */
.roam-section { padding-block: var(--space-xl) 0; }
.roam-section:last-of-type { padding-bottom: var(--space-xl); }
.roam-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
}
.roam-section__title { font-size: var(--step-2); letter-spacing: -0.01em; margin: 0; }
.roam-section__link {
  flex: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
}
.roam-section__link:hover { color: var(--color-accent); }

/* Homepage products section reuses the shop card grid, but shouldn't
   carry the archive's big bottom margin. */
.roam-section .woocommerce ul.products,
.roam-section.woocommerce ul.products { margin-block: 0; }

/* 13. Category cards -------------------------------------------------- */
.roam-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
@media (max-width: 900px) { .roam-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .roam-cats { grid-template-columns: 1fr; } }
.roam-cat { text-decoration: none; color: var(--color-text); display: block; }
.roam-cat__media {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-line);
}
.roam-cat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.roam-cat:hover .roam-cat__media img { transform: scale(1.05); }
.roam-cat__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: var(--space-sm);
}
.roam-cat__name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); }
.roam-cat__count {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* 14. Brand promise strip -------------------------------------------- */
.roam-promise {
  margin-top: var(--space-xl);
  background: var(--color-brand);
  color: var(--color-bg);
}
.roam-promise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
}
@media (max-width: 760px) { .roam-promise__grid { grid-template-columns: 1fr; gap: var(--space-md); } }
.roam-promise__title {
  font-size: var(--step-1);
  color: var(--color-bg);
  margin: 0 0 0.5rem;
}
.roam-promise__item p {
  margin: 0;
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  max-width: 34ch;
}

/* ================================================================== *
   WOOCOMMERCE — global controls, single product, cart, checkout
 * ================================================================== */

/* 15. Generic buttons — kill the theme's purple, use ROAM ink/accent */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button {
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border: 1px solid var(--color-text);
  border-radius: var(--radius);
  padding: 0.9rem 1.6rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--roam-white);
}

/* Prices — neutral ink, not the theme's olive */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .summary .price,
.woocommerce ul.products li.product .price { color: var(--color-text); }
.woocommerce div.product p.price ins,
.woocommerce .summary .price ins { color: var(--color-accent); text-decoration: none; }
.woocommerce div.product p.price del,
.woocommerce .summary .price del { color: var(--color-muted); }

/* Form fields — consistent, token-based */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity input.qty,
.woocommerce table.cart td.actions .coupon .input-text,
.select2-container--default .select2-selection--single,
.woocommerce-checkout select,
.woocommerce #customer_details input.input-text,
.woocommerce #customer_details textarea,
.woocommerce #customer_details .select2-selection {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--color-text);
  line-height: 1.3;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce #customer_details input.input-text:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: none;
  border-left: 3px solid var(--color-brand);
  background: var(--color-surface);
  border-radius: var(--radius);
  font-size: var(--step-0);
  box-shadow: 0 1px 3px rgba(26, 29, 27, 0.06);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--color-brand); }
.woocommerce-message .button,
.woocommerce-info .button { padding: 0.5rem 1rem; }

/* ------------------------------------------------------------------ *
   16. Single product
 * ------------------------------------------------------------------ */
.single-product .content-area,
.single-product #content { margin-top: var(--space-lg); }

.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
@media (max-width: 860px) { .woocommerce div.product { grid-template-columns: 1fr; } }

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce div.product div.summary { align-self: start; }
@media (min-width: 861px) {
  .woocommerce div.product div.summary { position: sticky; top: 96px; }
}

.woocommerce div.product .product_title {
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-xs);
}
.woocommerce div.product p.price,
.woocommerce div.product .summary .price {
  font-size: var(--step-2);
  font-weight: 500;
  margin: 0 0 var(--space-sm);
}
.woocommerce-product-details__short-description {
  color: var(--color-muted);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* Add-to-cart row: quantity + button side by side */
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-sm); margin-bottom: var(--space-md); }
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce .quantity input.qty { width: 4.5rem; height: 100%; text-align: center; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; min-width: 12rem; }

/* ShopEngine wishlist / compare in the summary → quiet outline buttons */
.woocommerce div.product .summary .shopengine-wishlist,
.woocommerce div.product .summary .shopengine-comparison,
.woocommerce div.product .summary .shopengine_add_to_list_action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.woocommerce div.product .summary .shopengine-wishlist:hover,
.woocommerce div.product .summary .shopengine-comparison:hover { border-color: var(--color-brand); color: var(--color-brand); }

/* Product meta */
.woocommerce div.product .product_meta {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-sm);
  font-size: var(--step--1);
  color: var(--color-muted);
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 0.35rem; }
.woocommerce div.product .product_meta a { color: var(--color-text); text-decoration: none; }
.woocommerce div.product .product_meta a:hover { color: var(--color-accent); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: var(--space-xl);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  border-bottom: 1px solid var(--color-line);
  display: flex;
  gap: var(--space-md);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 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 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 0 0 var(--space-sm);
  display: block;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--color-text); border-bottom-color: var(--color-accent); }
.woocommerce div.product .woocommerce-tabs .panel {
  padding-top: var(--space-md);
  max-width: 70ch;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: var(--step-1); }

/* Related products span full width */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products { grid-column: 1 / -1; margin-top: var(--space-xl); }
.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2 { font-size: var(--step-2); margin-bottom: var(--space-md); }

/* ------------------------------------------------------------------ *
   17. Cart
 * ------------------------------------------------------------------ */
.woocommerce-cart .woocommerce { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; padding-block: var(--space-lg) var(--space-xl); }
.woocommerce table.shop_table {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
}
.woocommerce table.shop_table th {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  padding: var(--space-sm);
}
.woocommerce table.shop_table td { padding: var(--space-sm); border-top: 1px solid var(--color-line); vertical-align: middle; }
.woocommerce table.cart img { width: 72px; border-radius: var(--radius); }
.woocommerce a.remove {
  color: var(--color-muted) !important;
  font-weight: 400;
  border: 1px solid var(--color-line);
}
.woocommerce a.remove:hover { background: var(--color-accent) !important; color: var(--roam-white) !important; border-color: var(--color-accent); }
.woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; max-width: 26rem; margin-left: auto; }
.woocommerce .cart_totals h2 { font-size: var(--step-1); }
.woocommerce .cart_totals table { border: 1px solid var(--color-line); border-radius: var(--radius); }
.woocommerce .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; }

/* ------------------------------------------------------------------ *
   18. Checkout
 * ------------------------------------------------------------------ */
.woocommerce-checkout .woocommerce { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; padding-block: var(--space-lg) var(--space-xl); }
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .woocommerce-checkout form.checkout { grid-template-columns: 1fr; } }
.woocommerce-checkout #customer_details { width: auto; }
.woocommerce-checkout h3 { font-size: var(--step-1); }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  grid-column: 2;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-md);
}
@media (max-width: 900px) { .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 1; } }
.woocommerce-checkout #order_review_heading { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.woocommerce-checkout #payment { background: transparent; border-radius: var(--radius); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--color-line); }
.woocommerce-checkout #payment div.payment_box { background: var(--color-bg); border-radius: var(--radius); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--color-bg); }
.woocommerce-checkout #place_order { width: 100%; margin-top: var(--space-sm); }
.woocommerce form .form-row label { font-size: var(--step--1); color: var(--color-text); font-weight: 500; }

/* ------------------------------------------------------------------ *
   19. My Account
 * ------------------------------------------------------------------ */
.woocommerce-account .woocommerce {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  padding-block: var(--space-lg) var(--space-xl);
}

/* Logged-out: login (and register, if enabled) */
.woocommerce-account .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
@media (max-width: 720px) { .woocommerce-account .col2-set { grid-template-columns: 1fr; } }
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-md);
  max-width: 30rem;
}
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 { max-width: none; }
.woocommerce .woocommerce-form-login__rememberme { color: var(--color-muted); }
.woocommerce .lost_password a { color: var(--color-muted); }
.woocommerce .lost_password a:hover { color: var(--color-accent); }

/* Logged-in dashboard: sidebar nav + content */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
@media (min-width: 780px) {
  .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation { width: 22%; float: left; }
  .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content { width: 74%; float: right; }
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--color-line); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--color-stone, var(--roam-stone)); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--color-text); color: var(--color-bg); }
.woocommerce-MyAccount-content { font-size: var(--step-0); line-height: var(--leading-body); }
.woocommerce-MyAccount-content a { color: var(--color-accent); }