/* Amaron Life — brand layer. Values come from the v9 prototype's final cascade (editorial-home.css
   over cinematic.css over style.css); see docs/reference/design-system.md. Prefix: am-. */

/* 1. Fonts (supplied DM Sans + Source Serif 4, SIL OFL; WOFF2 derivatives, WOFF fallback) ---------- */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dm-sans-400.woff2) format('woff2'), url(../fonts/dm-sans-400.woff) format('woff'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/dm-sans-500.woff2) format('woff2'), url(../fonts/dm-sans-500.woff) format('woff'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/dm-sans-600.woff2) format('woff2'), url(../fonts/dm-sans-600.woff) format('woff'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/source-serif-4-400-italic.woff2) format('woff2'), url(../fonts/source-serif-4-400-italic.woff) format('woff'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/source-serif-4-400.woff2) format('woff2'), url(../fonts/source-serif-4-400.woff) format('woff'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/source-serif-4-500.woff2) format('woff2'), url(../fonts/source-serif-4-500.woff) format('woff'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/source-serif-4-600.woff2) format('woff2'), url(../fonts/source-serif-4-600.woff) format('woff'); }

/* 2. Tokens ------------------------------------------------------------------------------------------ */
:root {
  --am-ink: #32341f;      --am-olive: #555a30;   --am-sage: #878b4d;   --am-lime: #c9cf74;
  --am-cream: #eeede1;    --am-paper: #f8f7f2;   --am-line: #d6d6c8;   --am-muted: #686b58;
  --am-error: #8b3a2f;    --am-success: #3d613e;
  /* prototype home surfaces (undocumented in the guide, used by the live homepage) */
  --am-linen: #f3f0e5;    --am-text: #303829;    --am-night: #283421;  --am-deep: #252d20;  --am-gold: #e8dab1;
  --am-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --am-sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --am-max: 1520px;
  --am-gutter: clamp(20px, 5vw, 80px);
  --am-section: 72px;
  --am-fast: 200ms;       --am-slow: 650ms;      --am-ease: cubic-bezier(.2, .7, .2, 1);
  --am-focus: var(--am-olive);
  /* category world defaults (supplements) */
  --cat-bg: #e9ebdf; --cat-accent: #505932; --cat-ink: #303829; --cat-muted: #5f6450;
}
.am-theme-supplements, [data-am-category="supplements"] { --cat-bg: #e9ebdf; --cat-accent: #505932; --cat-ink: #303829; --cat-muted: #5f6450; }
/* muted text on the saffron and sage backgrounds is darkened: the prototype's #686b58 measured 4.37:1 and 4.45:1 */
.am-theme-superfoods, [data-am-category="superfoods"] { --cat-bg: #f2e4ce; --cat-accent: #835621; --cat-ink: #513a23; --cat-muted: #5e5340; --am-muted: #5e5340; }
.am-theme-botanicals, [data-am-category="botanicals"] { --cat-bg: #e2eadd; --cat-accent: #3e6247; --cat-ink: #2d4534; --cat-muted: #4f5e4f; --am-muted: #4f5e4f; }

/* 3. Base --------------------------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--am-paper); color: var(--am-ink); font: 400 16px/1.7 var(--am-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.am-home { background: var(--am-linen); color: var(--am-text); }
img, video, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--am-serif); font-weight: 400; line-height: 1.15; letter-spacing: -.035em; color: inherit; margin: 0 0 .5em; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; }
p { margin: 0 0 1.1em; max-width: 65ch; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--am-focus); outline-offset: 4px; }
.am-on-dark :focus-visible, .am-on-dark:focus-visible { --am-focus: var(--am-cream); }
.screen-reader-text, .am-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.am-skip { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--am-ink); color: var(--am-cream); padding: 12px 18px; text-decoration: none; }
.am-skip:focus { top: 12px; }
.am-wrap { max-width: var(--am-max); margin-inline: auto; padding-inline: var(--am-gutter); box-sizing: border-box; }
.am-section { max-width: var(--am-max); margin-inline: auto; padding: var(--am-section) var(--am-gutter); box-sizing: border-box; }
.am-eyebrow { display: block; font: 500 12px/1.5 var(--am-sans); letter-spacing: .13em; text-transform: uppercase; margin: 0 0 19px; }
.am-icon { width: 1em; height: 1em; flex: none; }
/* Hello Elementor's reset paints plain buttons #c36 on hover/focus. Neutralised here, early in the file,
   with specificity 0,2,0: it beats Hello (loaded before) and loses to every component rule below. */
/* base colour at 0,1,0 (beats Hello's button rules, loses to any component class later) */
:where(button, [type=button], [type=submit]):not(.am-not-a-class):not(:where(.am-btn, [class*="button"])) { color: inherit; }
:where(button, [type=button], [type=submit]):not(.am-btn):not([class*="button"]):where(:hover, :focus) { background-color: transparent; color: inherit; }


/* 4. Buttons, links, forms ---------------------------------------------------------------------------- */
.am-btn, .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .wc-block-components-button:not(.is-link) {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 15px 24px; box-sizing: border-box;
  background: var(--am-olive); color: var(--am-paper); border: 1px solid var(--am-olive); border-radius: 0;
  font: 500 14px/1.5 var(--am-sans); letter-spacing: .025em; text-decoration: none; cursor: pointer;
  transition: background-color var(--am-fast) ease, color var(--am-fast) ease, border-color var(--am-fast) ease;
}
.am-btn:hover, .woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--am-ink); border-color: var(--am-ink); color: var(--am-paper); }
.am-btn--light { background: var(--am-paper); color: var(--am-ink); border-color: var(--am-paper); }
.am-btn--light:hover { background: var(--am-cream); color: var(--am-ink); border-color: var(--am-cream); }
.am-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.am-btn[disabled], .am-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.am-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 400 14px/1.4 var(--am-sans); color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding: 6px 0; box-sizing: border-box; }
.am-link:hover { color: var(--am-olive); }
.am-on-dark .am-link:hover { color: var(--am-gold); }
label { font: 500 14px/1.5 var(--am-sans); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=number], select, textarea {
  font: 400 16px/1.5 var(--am-sans); color: var(--am-ink); background: var(--am-paper); border: 1px solid var(--am-line); border-radius: 0; padding: 12px 14px; min-height: 48px; box-sizing: border-box; max-width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--am-olive); outline-offset: 0; border-color: var(--am-olive); }
[aria-invalid="true"] { border-color: var(--am-error) !important; }
.am-field-error { color: var(--am-error); font-size: 14px; margin-top: 6px; }
.am-notice { border: 1px solid var(--am-line); background: var(--am-paper); padding: 14px 18px; font-size: 14px; }
.am-notice--pending { border-left: 3px solid var(--am-sage); }

/* 5. Announcement + header ---------------------------------------------------------------------------- */
.am-announcement { background: var(--am-night); color: var(--am-linen); text-align: center; font: 500 11px/1.5 var(--am-sans); letter-spacing: .12em; text-transform: uppercase; padding: 9px 16px; }
.am-header { position: sticky; top: 0; z-index: 30; background: var(--am-linen); color: var(--am-ink); border-bottom: 1px solid transparent; transition: border-color var(--am-fast) ease; }
.admin-bar .am-header { top: 32px; }
.am-header.is-scrolled { border-bottom-color: var(--am-line); }
.am-header__inner { display: flex; align-items: center; gap: 32px; padding: 14px var(--am-gutter); max-width: 1600px; margin-inline: auto; box-sizing: border-box; min-height: 88px; }
.am-wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--am-ink); flex: none; }
.am-wordmark__mark { width: 30px; height: 35px; object-fit: contain; mix-blend-mode: multiply; }
.am-wordmark__text { display: flex; flex-direction: column; font: 400 41px/1 var(--am-serif); letter-spacing: -.065em; }
.am-wordmark__life { font: 500 8px/1 var(--am-sans); letter-spacing: .46em; margin: 7px 0 0 5px; align-self: center; }
.am-nav { flex: 1; display: flex; justify-content: center; }
.am-nav ul { display: flex; gap: clamp(12px, 1.6vw, 25px); list-style: none; margin: 0; padding: 0; }
.am-nav a { display: block; padding: 10px 0; font: 400 13px/1.5 var(--am-sans); white-space: nowrap; text-decoration: none; border-bottom: 1px solid transparent; }
.am-nav a:hover, .am-nav .current-menu-item > a, .am-nav .current-menu-ancestor > a { border-bottom-color: var(--am-olive); }
.am-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.am-icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; border-radius: 50%; color: inherit; cursor: pointer; text-decoration: none; transition: background-color var(--am-fast) ease; }
.am-icon-btn:hover { background: #32341f12; }
.am-icon-btn svg { width: 21px; height: 21px; }
.am-cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--am-olive); color: var(--am-paper); font: 500 11px/18px var(--am-sans); text-align: center; }
.am-cart-count[data-count="0"] { display: none; }
.am-lang { display: flex; align-items: center; gap: 2px; font: 500 12px/1 var(--am-sans); letter-spacing: .08em; margin-right: 6px; }
.am-lang a, .am-lang span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; text-decoration: none; text-transform: uppercase; }
.am-lang [aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.am-lang a { opacity: .62; }
.am-lang a:hover { opacity: 1; }
.am-menu-toggle { display: none; }
.am-menu-toggle .am-icon--close, .am-menu-toggle[aria-expanded="true"] .am-icon--open { display: none; }
.am-menu-toggle[aria-expanded="true"] .am-icon--close { display: block; }
.am-mobile-nav { display: none; }
@media (min-width: 901px) and (max-width: 1150px) {
  .am-header__inner { gap: 16px; }
  .am-nav ul { gap: 12px; }
  .am-nav a { font-size: 12px; }
  .am-wordmark__text { font-size: 33px; }
}
@media (max-width: 900px) {
  .am-nav { display: none; }
  .am-menu-toggle { display: inline-grid; margin-left: -10px; }
  .am-header__inner { gap: 8px; min-height: 64px; padding-block: 10px; }
  .am-wordmark { margin-right: auto; }
  .am-mobile-nav[data-open="true"] { display: block; background: var(--am-ink); color: var(--am-cream); padding: 8px var(--am-gutter) 32px; max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
  .am-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
  .am-mobile-nav a { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #ffffff25; font: 400 26px/1.25 var(--am-serif); letter-spacing: -.02em; text-decoration: none; color: inherit; }
  .am-mobile-nav { --am-focus: var(--am-cream); }
}
@media (max-width: 700px) {
  .am-wordmark__text { font-size: 29px; }
  .am-wordmark__mark { width: 23px; height: 29px; }
  .am-tools .am-account { display: none; }
  .am-announcement { font-size: 10px; letter-spacing: .04em; padding: 7px 10px; }
}
/* narrow phones: the language switch (two 44 px targets) lives in the mobile menu only */
@media (max-width: 480px) {
  .am-tools .am-lang { display: none; }
  .am-header__inner { padding-inline: 12px; gap: 4px; }
  .am-wordmark__text { font-size: 26px; }
}
.am-mobile-nav .am-lang { margin-top: 18px; font-size: 14px; }
.am-mobile-nav .am-lang a, .am-mobile-nav .am-lang span { color: inherit; opacity: 1; }

/* 6. Footer -------------------------------------------------------------------------------------------- */
.am-footer { background: var(--am-cream); color: var(--am-ink); padding: 64px var(--am-gutter) 40px; margin-top: 0; }
.am-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; max-width: 1360px; margin: 0 auto; padding-bottom: 56px; }
.am-footer__brand { display: flex; align-items: center; gap: 16px; }
.am-footer__brand .am-wordmark__text { font-size: 62px; }
.am-footer__brand .am-wordmark__life { font-size: 11px; }
.am-footer__brand img { width: 66px; height: 76px; object-fit: contain; mix-blend-mode: multiply; }
.am-footer__claim { font: 400 19px/1.4 var(--am-serif); margin: 24px 0 18px; }
.am-footer__knowledge { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 10px 22px; }
.am-footer h2 { font: 500 12px/1.5 var(--am-sans); letter-spacing: .17em; text-transform: uppercase; margin: 0 0 12px; }
.am-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.am-footer li a { display: inline-block; padding: 6px 0; font-size: 14px; text-decoration: none; }
.am-footer li a:hover { text-decoration: underline; }
.am-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; max-width: 1360px; margin: 0 auto; padding-top: 24px; border-top: 1px solid var(--am-line); font-size: 12px; color: var(--am-muted); }
.am-footer__bottom ul { flex-direction: row; flex-wrap: wrap; gap: 0 18px; }
.am-footer__bottom a { font-size: 12px; padding: 12px 0; }
@media (max-width: 900px) { .am-footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 20px; } .am-footer__brand .am-wordmark__text { font-size: 48px; } }
@media (max-width: 700px) {
  .am-footer { padding: 45px 20px 32px; }
  .am-footer__top { grid-template-columns: 1fr 1fr; gap: 36px 20px; padding-bottom: 36px; }
  .am-footer__col--brand { grid-column: 1 / -1; }
  .am-footer__brand .am-wordmark__text { font-size: 44px; }
  .am-footer__brand img { width: 48px; height: 60px; }
  .am-footer__knowledge { gap: 8px 18px; }
}

/* 7. Product card + rail ------------------------------------------------------------------------------ */
.am-rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
.am-rail__head h2 { font-size: clamp(34px, 3.8vw, 58px); margin: 0; }
.am-rail__tools { display: flex; align-items: center; gap: 24px; flex: none; }
.am-rail__arrows { display: flex; gap: 10px; }
.am-rail__arrows button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--am-line); background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; transition: background-color var(--am-fast), color var(--am-fast); }
.am-rail__arrows button:hover:not(:disabled) { background: var(--am-olive); color: var(--am-paper); border-color: var(--am-olive); }
.am-rail__arrows button:disabled { opacity: .35; cursor: default; }
.am-rail[data-overflow="false"] .am-rail__arrows { visibility: hidden; }
.am-signature { display: inline-flex; align-items: center; gap: 12px; font: 500 13px/1.4 var(--am-sans); letter-spacing: .09em; margin-bottom: 14px; color: var(--cat-ink); }
.am-signature svg { width: 34px; height: 34px; color: var(--cat-accent); }
.am-signature__num { color: var(--cat-accent); }
.am-rail--themed { background: var(--cat-bg); color: var(--cat-ink); }
.am-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 12px 3px 20px; scrollbar-width: thin; scrollbar-color: var(--cat-accent, var(--am-sage)) #32341f0d; list-style: none; margin: 0; }
.am-track > * { scroll-snap-align: start; min-width: 0; }
.am-track::-webkit-scrollbar { height: 5px; }
.am-track::-webkit-scrollbar-thumb { background: var(--cat-accent, var(--am-sage)); border-radius: 8px; }
.am-track::-webkit-scrollbar-track { background: #32341f0d; }
.am-card { position: relative; display: flex; flex-direction: column; color: var(--cat-ink, var(--am-ink)); }
.am-card__visual { position: relative; transition: transform 300ms var(--am-ease); }
/* 3D context only where tilt runs: preserve-3d inside a scroll container escapes its clipping on phones */
@media (min-width: 900px) and (pointer: fine) { .am-track { perspective: 1400px; } .am-card__visual { transform-style: preserve-3d; } }
.am-card__photo { display: block; aspect-ratio: 1 / 1.08; overflow: hidden; background: var(--am-cream); }
.am-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--am-slow) var(--am-ease); }
.am-card:hover .am-card__photo img { transform: scale(1.04); }
.am-card__icon { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; padding: 6px; background: var(--cat-bg); color: var(--cat-accent); pointer-events: none; }
.am-card__icon svg { width: 22px; height: 22px; }
.am-card__state { position: absolute; top: 12px; right: 12px; background: var(--am-paper); color: var(--am-ink); font: 500 14px/1.3 var(--am-sans); padding: 7px 10px; pointer-events: none; }
.am-card__state--pending, .am-card__state--note { font-weight: 400; }
.am-card__purpose { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 76px); background: var(--cat-bg); color: var(--cat-ink); font: 500 13px/1.35 var(--am-sans); padding: 5px 9px; pointer-events: none; }
.am-card__add { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--am-line); background: var(--am-paper); color: var(--am-ink); display: grid; place-items: center; cursor: pointer; transition: background-color var(--am-fast), color var(--am-fast); padding: 0; }
.am-card__add:hover { background: var(--am-olive); color: var(--am-paper); border-color: var(--am-olive); }
.am-card__add.loading { opacity: .6; }
.am-card__add.added { background: var(--am-success); color: var(--am-paper); border-color: var(--am-success); }
.am-card__add svg { width: 18px; height: 18px; }
.am-card .added_to_cart { display: none; }
.am-card__copy { padding-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.am-card__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.am-card__name { font: 500 18px/1.35 var(--am-sans); letter-spacing: -.02em; margin: 0; }
.am-card__name a { text-decoration: none; }
/* The photo repeats the name link for pointer users only (tabindex=-1, aria-hidden): keyboard and
   screen-reader users meet each product once, and the + button stays reachable on top. */
.am-card__visual { z-index: 1; }
.am-card__add { z-index: 3; }
.am-card__pack { font-size: 13px; color: var(--cat-muted, var(--am-muted)); }
.am-card__note { font-size: 13px; color: var(--cat-muted, var(--am-muted)); }
.am-card__more { align-self: flex-start; position: relative; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1100px) { .am-track { grid-auto-columns: calc((100% - 48px) / 3); } .am-rail__head h2 { max-width: 20ch; } }
@media (max-width: 700px) {
  .am-rail__head { margin-bottom: 16px; align-items: flex-end; gap: 12px; }
  .am-rail__head h2 { font-size: clamp(24px, 6.4vw, 30px); }
  .am-rail__tools { gap: 6px; }
  .am-rail__arrows button { width: 44px; height: 44px; border: 0; }
  .am-rail__tools .am-link { font-size: 0; border: 0; width: 44px; justify-content: center; }
  .am-rail__tools .am-link svg { width: 20px; height: 20px; }
  .am-track { grid-auto-columns: 78%; gap: 14px; padding: 0 0 14px; }
  .am-card__name { font-size: 17px; }
  .am-card__pack { font-size: 12px; }
  .am-card__photo { max-height: 42svh; }
}

/* 8. Homepage sections --------------------------------------------------------------------------------- */
.am-hero { position: relative; overflow: hidden; background: var(--am-deep); color: var(--am-linen); min-height: clamp(420px, 75svh, 760px); display: flex; align-items: center; isolation: isolate; }
.am-hero__media { position: absolute; inset: 0; z-index: -2; }
.am-hero__media img, .am-hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.am-hero__media .amaron-scene { z-index: 1; }
.am-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(28, 31, 17, .72), rgba(28, 31, 17, .19) 65%, transparent); pointer-events: none; }
.am-hero__copy { padding: 110px var(--am-gutter) 72px; max-width: 840px; box-sizing: content-box; }
.am-hero h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1.08; margin: 0; }
.am-hero h1 em { color: var(--am-gold); }
.am-hero__lead { font-size: 17px; line-height: 1.6; margin: 22px 0 0; }
.am-hero__foot { position: absolute; right: 6%; bottom: 44px; font: 500 12px/1.4 var(--am-sans); letter-spacing: .12em; text-transform: uppercase; display: flex; gap: 40px; }
.am-hero__foot span + span { opacity: .8; }
.am-motion-toggle { position: absolute; top: 30px; right: 6%; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; box-sizing: border-box; border: 1px solid #eeedde66; border-radius: 30px; background: #15231240; color: var(--am-linen); font: 500 12px/1 var(--am-sans); cursor: pointer; }
.am-motion-toggle:hover { background: #15231280; }
.am-motion-toggle[hidden] { display: none; }
@media (min-width: 1500px) { .am-hero { min-height: 760px; } }
@media (max-width: 900px) { .am-hero__foot span + span { display: none; } }
@media (max-width: 700px) {
  .am-hero { min-height: 58svh; align-items: flex-end; }
  .am-hero__media img { object-position: 60% center; }
  .am-hero__shade { background: linear-gradient(0deg, rgba(28, 31, 17, .82), rgba(28, 31, 17, .3) 70%, rgba(28, 31, 17, .15)); }
  .am-hero__copy { padding: 96px 20px 36px; }
  .am-hero h1 { font-size: clamp(34px, 9vw, 46px); }
  .am-hero__lead { font-size: 16px; margin-top: 16px; }
  .am-hero__foot { display: none; }
  .am-motion-toggle { top: 16px; right: 16px; padding: 9px 12px; }
}

.am-worlds { padding-top: 25px; }
.am-worlds__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
.am-world { display: block; height: 100%; background: var(--cat-bg); color: var(--cat-ink); padding: 22px; text-decoration: none; box-sizing: border-box; transition: background-color var(--am-fast); }
.am-world__art { display: grid; place-items: center; aspect-ratio: 1.7; color: var(--cat-accent); transition: transform 300ms var(--am-ease); }
.am-world__art svg { width: clamp(80px, 9vw, 132px); height: auto; stroke-width: 1.25; }
.am-world__label { display: flex; align-items: baseline; gap: 14px; margin-top: 18px; }
.am-world__num { font: 500 12px/1 var(--am-sans); color: var(--cat-accent); letter-spacing: .1em; }
.am-world h3 { font-size: clamp(23px, 2.2vw, 34px); margin: 0; flex: 1; }
.am-world__arrow { width: 22px; height: 22px; transition: transform var(--am-fast) var(--am-ease); }
.am-world:hover .am-world__arrow, .am-world:focus-visible .am-world__arrow { transform: translateX(4px); }
.am-world p { font-size: 15px; margin: 10px 0 0; color: var(--cat-muted); }
@media (max-width: 1100px) { .am-worlds__grid { gap: 16px; } }
@media (max-width: 700px) {
  .am-worlds__grid { grid-template-columns: 1fr; gap: 12px; }
  .am-world { display: grid; grid-template-columns: 76px 1fr; gap: 4px 14px; padding: 14px; align-items: center; }
  .am-world__art { aspect-ratio: auto; width: 76px; height: 76px; grid-row: span 2; }
  .am-world__art svg { width: 56px; }
  .am-world__label { margin: 0; }
  .am-world h3 { font-size: 22px; }
  .am-world p { margin: 0; font-size: 14px; }
}

.am-consult { display: grid; grid-template-columns: .8fr 1.2fr; background: var(--am-cream); max-width: var(--am-max); margin: 30px auto; }
.am-consult__photo { position: relative; min-height: 570px; margin: 0; overflow: hidden; }
.am-consult__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
.am-consult__photo figcaption { position: absolute; left: 28px; right: 28px; bottom: 28px; max-width: 32ch; color: #fff; font: 500 12px/1.6 var(--am-sans); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 7px #000; }
.am-consult__copy { padding: clamp(32px, 5vw, 78px); align-self: center; }
.am-consult__brand { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.am-consult__brand img { width: 76px; height: 76px; object-fit: cover; }
.am-consult__brand .am-eyebrow { margin: 0; max-width: 30ch; font-size: 13px; }
.am-consult h2 { font-size: clamp(34px, 3.8vw, 58px); }
.am-consult__paths { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.am-consult__human { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--am-line); margin-top: 35px; padding-top: 24px; font-size: 14px; }
@media (max-width: 1100px) { .am-consult { grid-template-columns: .8fr 1fr; } .am-consult__photo { min-height: 560px; } }
@media (max-width: 700px) {
  .am-consult { grid-template-columns: 1fr; margin: 0; background: var(--am-paper); }
  .am-consult__photo { min-height: 0; height: 320px; }
  .am-consult__photo img { object-position: 50% 22%; }
  .am-consult__photo figcaption { display: none; }
  .am-consult__copy { padding: 28px 20px 36px; }
  .am-consult__brand img { width: 58px; height: 58px; }
  .am-consult h2 { font-size: clamp(25px, 6.5vw, 30px); }
  .am-consult__human { border-top: 0; padding-top: 8px; margin-top: 16px; }
}

.am-everyday { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(35px, 6vw, 100px); align-items: center; padding-top: 25px; padding-bottom: 45px; }
.am-everyday__art { position: relative; aspect-ratio: .92; overflow: hidden; background: var(--am-cream); margin: 0; transition: transform 300ms var(--am-ease); }
.am-everyday__art > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-everyday__art .amaron-scene { z-index: 1; }
.am-everyday__stamp { position: absolute; z-index: 2; left: 28px; bottom: 28px; background: var(--am-paper); color: var(--am-ink); font: 400 16px/1.4 var(--am-sans); letter-spacing: .12em; text-transform: uppercase; padding: 17px; }
.am-everyday h2 { font-size: clamp(34px, 3.8vw, 58px); }
.am-everyday ul { list-style: none; margin: 26px 0 30px; padding: 0; border-top: 1px solid var(--am-line); }
.am-everyday li a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--am-line); font-size: 15px; text-decoration: none; min-height: 44px; box-sizing: border-box; }
.am-everyday li a:hover { color: var(--am-olive); }
@media (max-width: 700px) {
  .am-everyday { grid-template-columns: 1fr; gap: 18px; padding: 28px 20px; }
  .am-everyday__art { aspect-ratio: auto; height: 190px; }
  .am-everyday__stamp { font-size: 12px; padding: 8px 12px; left: 12px; bottom: 12px; }
  .am-everyday h2 { font-size: clamp(25px, 6.5vw, 30px); }
}

.am-spotlight { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: 570px; background: var(--am-cream); }
.am-spotlight__media { position: absolute; inset: -5% 0; z-index: -2; margin: 0; }
.am-spotlight__media img, .am-spotlight__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-spotlight::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.am-spotlight--light::after { background: linear-gradient(90deg, rgba(248, 247, 242, .96), rgba(248, 247, 242, .8) 35%, rgba(248, 247, 242, 0) 80%); }
.am-spotlight--dark { color: var(--am-paper); min-height: 630px; background: var(--am-deep); }
.am-spotlight--dark::after { background: linear-gradient(90deg, rgba(28, 31, 17, .82), rgba(28, 31, 17, .25) 65%, transparent); }
.am-spotlight__copy { width: min(650px, 60%); padding: 65px var(--am-gutter); box-sizing: content-box; }
@media (min-width: 1500px) { .am-spotlight__copy { margin-left: calc((100% - var(--am-max)) / 2); } }
.am-spotlight h2 { font-size: clamp(45px, 5.7vw, 84px); line-height: 1.04; }
.am-spotlight p { max-width: 34ch; font-size: 17px; line-height: 1.65; }
.am-spotlight__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 26px; }
.am-spotlight small { display: block; margin-top: 18px; font-size: 13px; color: var(--am-muted); }
.am-spotlight--dark small { color: inherit; opacity: .8; }
@media (max-width: 700px) {
  .am-spotlight { align-items: flex-end; min-height: 0; }
  .am-spotlight--light::after { background: linear-gradient(0deg, rgba(248, 247, 242, .98), rgba(248, 247, 242, .65) 60%, transparent); }
  .am-spotlight--dark::after { background: linear-gradient(0deg, rgba(28, 31, 17, .94), rgba(28, 31, 17, .5) 70%, transparent); }
  .am-spotlight--dark .am-spotlight__media img { object-position: 63% center; }
  .am-spotlight__copy { width: auto; padding: 170px 20px 32px; }
  .am-spotlight h2 { font-size: 40px; }
  .am-spotlight p { font-size: 16px; }
}

.am-journal__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.am-journal__head h2 { font-size: clamp(30px, 4vw, 58px); margin: 0; }
.am-puzzle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; list-style: none; margin: 0; padding: 0; }
.am-puzzle__tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1.5; padding: 30px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; box-sizing: border-box; height: 100%; }
.am-puzzle__tile > img { position: absolute; z-index: -2; width: 200%; height: 200%; max-width: none; object-fit: fill; transition: transform 700ms var(--am-ease); }
.am-puzzle__tile--0 > img { left: 0; top: 0; transform-origin: 0 0; }
.am-puzzle__tile--1 > img { right: 0; top: 0; transform-origin: 100% 0; }
.am-puzzle__tile--2 > img { left: 0; bottom: 0; transform-origin: 0 100%; }
.am-puzzle__tile--3 > img { right: 0; bottom: 0; transform-origin: 100% 100%; }
.am-puzzle__tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(32, 36, 19, .88), transparent 80%); }
.am-puzzle__tile:hover > img { transform: scale(1.025); }
.am-puzzle__num { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--cat-bg, var(--am-paper)); color: var(--cat-ink, var(--am-ink)); font: 500 12px/1 var(--am-sans); letter-spacing: .1em; padding: 6px 9px; text-transform: uppercase; }
.am-puzzle__num svg { width: 22px; height: 22px; color: var(--cat-accent); }
.am-puzzle__tile h3 { font-size: clamp(26px, 2.7vw, 40px); letter-spacing: -.025em; margin: 0 0 8px; }
.am-puzzle__tile p { margin: 0 0 18px; font-size: 15px; }
.am-puzzle__more { align-self: flex-start; font-size: 14px; border-bottom: 1px solid #ffffffaa; padding-bottom: 2px; }
@media (max-width: 1100px) { .am-puzzle__tile { padding: 23px; } }
@media (max-width: 700px) {
  .am-journal__head h2 br { display: none; }
  .am-puzzle { gap: 3px; }
  /* square tiles; min-height with aspect-ratio would widen a tile beyond its column at 320 px */
  .am-puzzle__tile { aspect-ratio: 1; padding: 12px; }
  .am-puzzle__tile h3 { font-size: clamp(19px, 5vw, 23px); line-height: 1.1; }
  .am-puzzle__tile p { display: none; }
  .am-puzzle__more { font-size: 13px; }
}

.am-newsletter { background: var(--am-paper); max-width: var(--am-max); margin: 0 auto; padding: 35px var(--am-gutter); box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 45px; align-items: center; }
.am-newsletter h2 { font-size: clamp(28px, 2.8vw, 42px); }
.am-newsletter p { max-width: 40ch; }
.am-newsletter__field { display: flex; align-items: center; border-bottom: 1px solid var(--am-ink); margin-top: 6px; }
.am-newsletter__field input { flex: 1; border: 0; background: transparent; padding: 14px 0; }
.am-newsletter__field input:focus-visible { outline: 2px solid var(--am-olive); outline-offset: 2px; }
.am-newsletter__field button { width: 48px; height: 48px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: inherit; }
.am-check { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 6px; font: 400 13px/1.5 var(--am-sans); }
.am-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--am-olive); }
.am-form-status { min-height: 1.5em; font-size: 14px; margin-top: 8px; }
.am-form-status[data-tone="error"] { color: var(--am-error); }
.am-form-status[data-tone="ok"] { color: var(--am-success); }
@media (max-width: 700px) { .am-newsletter { grid-template-columns: 1fr; gap: 18px; padding: 28px 20px; } .am-newsletter h2 { font-size: 27px; } }

/* home section backgrounds on phones alternate as in the prototype */
@media (max-width: 700px) {
  .am-home { --am-section: 32px; }
  .am-bg-mobile-cream { background: var(--am-cream); }
  .am-bg-mobile-paper { background: var(--am-paper); }
}

/* 9. Motion: tilt + parallax are progressive; .am-motion-off (paused) or reduced motion removes them -- */
[data-am-tilt] { will-change: auto; }
.am-motion-off [data-am-tilt], .am-motion-off [data-am-parallax] { transform: none !important; }
.am-motion-off .am-card__photo img, .am-motion-off .am-puzzle__tile > img { transition: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-am-tilt], [data-am-parallax] { transform: none !important; }
}
.am-reveal { opacity: 1; }
.am-js .am-reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
.am-js .am-reveal.is-in { opacity: 1; transform: none; transition: opacity 700ms var(--am-ease), transform 700ms var(--am-ease); }
.am-motion-off .am-reveal, .am-motion-off .am-reveal:not(.is-in) { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .am-js .am-reveal:not(.is-in) { opacity: 1; transform: none; } }

/* 10. Dialogs (mini cart, guide) ----------------------------------------------------------------------- */
.am-dialog { border: 0; padding: 0; margin: 0 0 0 auto; width: min(520px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; background: var(--am-paper); color: var(--am-ink); box-shadow: 0 25px 100px #0002; }
.am-dialog::backdrop { background: #1c1f1180; }
.am-dialog__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--am-line); }
.am-dialog__head h2 { font-size: 28px; margin: 0; }
.am-dialog__body { padding: 20px 24px 32px; overflow-y: auto; max-height: calc(100dvh - 82px); box-sizing: border-box; }
.am-dialog--center { margin: auto; height: auto; max-height: 85dvh; width: min(650px, calc(100vw - 32px)); }
.am-preview-banner { background: var(--am-cream); color: var(--am-ink); border-bottom: 1px solid var(--am-line); font-size: 13px; text-align: center; padding: 8px 16px; }

/* 11. Print -------------------------------------------------------------------------------------------- */
@media print { .am-header, .am-footer, .am-announcement, .am-motion-toggle, .amaron-scene, .am-rail__arrows { display: none !important; } }

/* 12. Mini cart drawer (on every page that has it, not only shop pages) ------------------------------- */.am-cart-dialog .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.am-cart-dialog .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 6px 14px; padding: 16px 44px 16px 0; border-bottom: 1px solid var(--am-line); }
.am-cart-dialog .woocommerce-mini-cart-item img { grid-row: span 2; width: 72px; height: 72px; object-fit: cover; float: none; margin: 0; }
.am-cart-dialog .woocommerce-mini-cart-item a.remove { position: absolute; right: 0; top: 8px; width: 44px; height: 44px; display: grid; place-items: center; }
.am-cart-dialog .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 18px 0; font-weight: 500; }
.am-cart-dialog .woocommerce-mini-cart__buttons { display: grid; gap: 10px; }
.am-cart-dialog .woocommerce-mini-cart__buttons .button { width: 100%; }
.am-cart-dialog .woocommerce-mini-cart__buttons .button:not(.checkout) { background: transparent; color: var(--am-ink); border-color: var(--am-ink); }
.am-cart-dialog .woocommerce-mini-cart__empty-message { font: 400 22px/1.4 var(--am-serif); }
.am-cart-dialog .woocommerce-mini-cart-item a.remove { color: var(--am-ink) !important; font-size: 20px; }
.am-cart-dialog .woocommerce-mini-cart-item a.remove:hover { background: var(--am-cream); color: var(--am-error) !important; }
.am-cart-dialog .woocommerce-mini-cart-item > a:not(.remove) { display: contents; font-weight: 500; }
.am-card a.added_to_cart, .woocommerce .am-card a.added_to_cart { display: none !important; }

/* 13. Hello Elementor's reset paints buttons #c36 on hover/focus; neutralise it so components decide -- */

.am-icon-btn, .am-guide-launcher, .am-menu-toggle, .am-rail__arrows button { border-radius: 50%; }
.am-guide-launcher { border-radius: 0; }
.am-guide-launcher:hover, .am-guide-launcher:focus { background: var(--am-ink); color: var(--am-paper); }
.am-icon-btn:hover, .am-icon-btn:focus-visible { color: inherit; }

/* 14. Accessibility details ------------------------------------------------------------------------- */
html { scroll-padding-bottom: 96px; } /* focused elements are never hidden behind the fixed guide launcher */
.am-lang a { opacity: 1; color: var(--am-muted); } /* was opacity .62 = 3.76:1 */
.am-lang a:hover { color: var(--am-ink); }
.am-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
.am-footer li a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
.am-hero__foot { text-shadow: 0 1px 8px rgba(0, 0, 0, .65); }
.am-spotlight--light small { color: var(--am-ink); }
@media (max-width: 700px) {
  .am-puzzle__tile::after { background: linear-gradient(0deg, rgba(24, 27, 14, .94), rgba(24, 27, 14, .55) 60%, rgba(24, 27, 14, .25)); }
  .am-puzzle__tile h3 { text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
}
.show-password-input { min-width: 44px; min-height: 44px; }
.wc-block-grid__product .wp-block-button__link, .wc-block-components-product-button__button { background: var(--am-olive) !important; color: var(--am-paper) !important; border-radius: 0 !important; }

/* 15. Without JavaScript: no dead controls; the mobile menu is simply shown open ------------------------ */
html:not(.am-js) .am-menu-toggle, html:not(.am-js) .am-rail__arrows, html:not(.am-js) .am-guide-launcher, html:not(.am-js) .am-motion-toggle { display: none !important; }
@media (max-width: 900px) {
  html:not(.am-js) .am-mobile-nav { display: block; background: var(--am-ink); color: var(--am-cream); padding: 8px var(--am-gutter) 24px; }
}