/*
 * Reset, element defaults and the shared primitives the design reuses across
 * every screen: buttons, pills, inputs, badges, the section header.
 */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream-400);
  font-family: var(--font-body);
  /* 16px base: Google and Material both put legible body copy here, and the
     handoff drew 15px against a fixed-width prototype frame. */
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--green-700); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--green-800); }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button { cursor: pointer; }
::placeholder { color: var(--ink-400); opacity: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

/* ---------------------------------------------------------------------------
 * Catalog copy is not trusted to wrap
 *
 * Product descriptions come from supplier feeds, and 79 of the 865 live
 * products separate their Supplement Facts rows with a rule of hyphens.
 * WordPress's own wptexturize() rewrites any run of three or more into em
 * dashes, and UAX #14 forbids a break between two of those -- so the rule
 * becomes a single unbreakable 445px word that pushes the whole document
 * sideways on a phone. Measured: the PDP scrolls to 483px inside a 375px
 * viewport.
 *
 * The guard belongs on the containers, not on the 79 products: the floor is
 * supplier copy nobody here controls, and the next feed can reintroduce it.
 *
 * `anywhere` rather than `break-word` because only `anywhere` also lowers the
 * min-content contribution, which is what sizes the grid tracks these sit in.
 * ------------------------------------------------------------------------ */

.m-detail__body,
.m-page__body,
.m-listing__intro,
.m-facts__name,
.m-line__name,
.m-tile__name,
.m-h1 { overflow-wrap: anywhere; }

:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
}

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

/* ---------------------------------------------------------------------------
 * Shell
 *
 * container-type establishes the container for every cqw-based clamp() in the
 * type scale, so components size against the shell rather than the viewport.
 * ------------------------------------------------------------------------ */

.m-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  background: var(--cream-50);
  container-type: inline-size;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.m-main { flex: 1; }

.m-wrap { padding-inline: var(--gutter); }

.m-section { padding-top: var(--section-gap); }

/* ---------------------------------------------------------------------------
 * Section header: H2 on the left, a link or pills on the right
 * ------------------------------------------------------------------------ */

.m-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.m-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sale-600);
  margin-bottom: 4px;
}

.m-h2 { font-size: var(--h2-section); letter-spacing: -.025em; }
.m-h1 { font-size: var(--h1-page); letter-spacing: -.03em; line-height: 1.08; }

.m-section-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green-700);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------ */

.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--r-control);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast);
}

.m-btn--primary {
  background: var(--green-700);
  color: #fff;
  padding: 12px 20px;
  font-size: 15px;
}
.m-btn--primary:hover { background: var(--green-800); color: #fff; }

.m-btn--gold {
  background: var(--gold-500);
  color: var(--ink-900);
  padding: 12px 20px;
  font-size: 15px;
}
.m-btn--gold:hover { background: var(--gold-400); color: var(--ink-900); }

.m-btn--outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid #3D7460;
  padding: 12px 20px;
  font-size: 15px;
}
.m-btn--outline:hover { border-color: var(--gold-500); color: #fff; }

/* Light-surface secondary, e.g. "Clear all", "Track package" */
.m-btn--ghost {
  background: var(--cream-50);
  color: var(--ink-700);
  border: 1.5px solid var(--border-400);
  padding: 10px 16px;
  font-size: 13.5px;
}
.m-btn--ghost:hover { border-color: var(--green-700); color: var(--green-700); }

/* Inverts to filled on hover. Used for add-to-cart on tiles and "Buy again". */
.m-btn--invert {
  background: var(--surface);
  color: var(--green-700);
  border: 1.5px solid var(--green-700);
  padding: 9px 14px;
  font-size: 13.5px;
}
.m-btn--invert:hover { background: var(--green-700); color: #fff; }

.m-btn--block { width: 100%; }
.m-btn--lg { min-height: 50px; font-size: 16px; }

/* ---------------------------------------------------------------------------
 * Pills: best-seller tabs and sort controls share this
 * ------------------------------------------------------------------------ */

.m-pills { display: flex; gap: 7px; flex-wrap: wrap; }

.m-pill {
  background: var(--surface);
  color: var(--ink-700);
  border: 1.5px solid var(--border-400);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.m-pill:hover { border-color: var(--green-700); color: var(--green-700); }

.m-pill.is-active,
.m-pill[aria-pressed="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

/* ---------------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------------ */

.m-card {
  background: var(--surface);
  border: 1px solid var(--border-200);
  border-radius: var(--r-card);
}
.m-card--pad { padding: 18px; }

.m-sand {
  background: var(--cream-300);
  border-radius: var(--r-block);
  padding: 26px 24px;
}

/* ---------------------------------------------------------------------------
 * Form fields
 * ------------------------------------------------------------------------ */

.m-field { display: flex; flex-direction: column; gap: 5px; }

.m-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.m-input {
  width: 100%;
  background: var(--cream-50);
  border: 1.5px solid var(--border-400);
  border-radius: 7px;
  padding: 11px 12px;
  font-size: 14px;
  transition: border-color var(--t-fast);
}
.m-input:focus {
  outline: 2px solid var(--green-700);
  outline-offset: -1px;
  border-color: var(--green-700);
}

/* ---------------------------------------------------------------------------
 * Rating stars
 *
 * Rendered from a 0-5 value as a clipped overlay so half stars are honest.
 * Hidden entirely when a product has no reviews -- see machoah_rating_stars().
 * ------------------------------------------------------------------------ */

.m-stars {
  position: relative;
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .5px;
  color: var(--border-500);
  white-space: nowrap;
}
.m-stars__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--sale-600);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Utilities
 * ------------------------------------------------------------------------ */

.m-meta { font-size: 13px; color: var(--ink-500); }
.m-strike { text-decoration: line-through; color: var(--ink-400); }
.m-off { color: var(--sale-600); font-weight: 700; }

.m-grid { display: grid; }

/* Product grids: 5-across desktop, 2-across mobile, no media query. The pixel
   floor caps column count on narrow containers, the percentage on wide ones. */
.m-grid--tiles {
  grid-template-columns: repeat(auto-fill, minmax(max(152px, 18%), 1fr));
  gap: 11px;
}
.m-grid--results {
  grid-template-columns: repeat(auto-fill, minmax(max(152px, 23%), 1fr));
  gap: 11px;
}
.m-grid--panels {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 14px;
}

/*
 * Wide screens.
 *
 * Below this the handoff's max(px, %) floors are untouched, so 1440 and 412
 * render exactly as designed. Above it a fixed floor replaces the percentage,
 * which lets the column count grow rather than the tiles.
 *
 * A container query, not a media query -- same reason as everywhere else in
 * this theme: the type scale is in cqw and the two must agree on which
 * breakpoint they are on.
 */
@container (min-width: 1200px) {
  .m-grid--tiles   { grid-template-columns: repeat(auto-fill, minmax(var(--col-tile), 1fr)); }
  .m-grid--results { grid-template-columns: repeat(auto-fill, minmax(var(--col-result), 1fr)); }
}

/* ---------------------------------------------------------------------------
 * Editorial pages and the 404 search
 * ------------------------------------------------------------------------ */

.m-page { max-width: 76ch; }
.m-page__title { margin-bottom: 16px; }
.m-page__body { font-size: 15px; line-height: 1.7; color: var(--ink-700); }
.m-page__body > * + * { margin-top: 14px; }
.m-page__body h2 { font-size: 21px; margin-top: 26px; }
.m-page__body h3 { font-size: 17px; margin-top: 20px; }
.m-page__body ul, .m-page__body ol { padding-left: 20px; }
.m-page__body li + li { margin-top: 5px; }

.m-search--404 { max-width: 420px; width: 100%; }

.m-posts { display: grid; gap: 12px; }
.m-post__title { font-size: 19px; }

/* ---------------------------------------------------------------------------
 * My Account
 *
 * WooCommerce renders these screens from its own templates. Rather than
 * override every one, the theme restyles the shared primitives in place.
 * ------------------------------------------------------------------------ */

/*
 * Stacked until there is room for a sidebar, then a fixed rail beside the
 * content -- the same shape, and the same 240-260px band, as the listing
 * filter rail. The previous auto-fit track let the nav grow with the
 * viewport: five short links sat in a 419px column at 1920.
 */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

@container (min-width: 768px) {
  .woocommerce-account .woocommerce { grid-template-columns: 240px minmax(0, 1fr); }
}
.woocommerce-MyAccount-navigation {
  background: var(--surface);
  border: 1px solid var(--border-200);
  border-radius: var(--r-card);
  padding: 14px;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li + li { margin-top: 3px; }
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 9px 11px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  transition: background var(--t-fast), color var(--t-fast);
}
.woocommerce-MyAccount-navigation a:hover { background: var(--cream-200); color: var(--green-700); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--green-700); color: #fff; }

.woocommerce-MyAccount-content { min-width: 0; }

.woocommerce-account table.shop_table,
table.woocommerce-orders-table,
table.shop_table_responsive {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border-200);
  border-radius: var(--r-card);
  overflow: hidden;
  font-size: 14px;
}
.woocommerce-account table.shop_table th,
table.woocommerce-orders-table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--cream-200);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.woocommerce-account table.shop_table td,
table.woocommerce-orders-table td {
  padding: 12px 14px;
  border-top: 1px solid var(--border-100);
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-700);
  color: #fff;
  border: 0;
  border-radius: var(--r-control);
  padding: 11px 18px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  transition: background var(--t-fast);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--green-800); color: #fff; }

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.woocommerce-EditAccountForm,
.woocommerce form.lost_reset_password {
  background: var(--surface);
  border: 1px solid var(--border-200);
  border-radius: var(--r-card);
  padding: 20px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.woocommerce form .form-row { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.woocommerce form label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form select,
.woocommerce form textarea {
  width: 100%;
  background: var(--cream-50);
  border: 1.5px solid var(--border-400);
  border-radius: 7px;
  padding: 11px 12px;
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * Breadcrumb
 *
 * In base.css, not listing.css: the product page renders a breadcrumb too and
 * does not enqueue the listing sheet, so it was showing a raw numbered <ol>.
 * ------------------------------------------------------------------------ */

.m-crumbs { margin-bottom: 12px; }
.m-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-500);
}
.m-crumbs li + li::before {
  content: "/";
  color: var(--ink-300);
  margin-right: 8px;
}
.m-crumbs a { color: var(--ink-500); }
.m-crumbs a:hover { color: var(--green-700); }
.m-crumbs [aria-current] { color: var(--ink-900); font-weight: 600; }