/**
 * Alma Research Labs
 * Rebuilt from Figma frame 95:11989 ("Main"). Every number in this file comes
 * from that frame, so the layout is exact at the 1600px design width and
 * degrades gracefully below it.
 */

/* ==========================================================================
   1. TOKENS & RESET
   ========================================================================== */
:root {
  --alma-bg: #080A0D;
  --alma-surface: rgba(255, 255, 255, 0.05);
  --alma-glass: rgba(1, 25, 60, 0.07);
  --alma-hairline: rgba(255, 255, 255, 0.1);

  --alma-fg: #FFFFFF;
  --alma-fg-80: rgba(255, 255, 255, 0.8);
  --alma-fg-60: rgba(255, 255, 255, 0.6);
  --alma-fg-50: rgba(255, 255, 255, 0.5);
  --alma-fg-40: rgba(255, 255, 255, 0.4);

  --alma-r-card: 24px;
  --alma-r-btn: 39px;
  --alma-r-nav: 20px;

  --alma-canvas: 1600px;
  --alma-gutter: 42px;
  /* Header geometry, shared so anything that tucks in under the bar (the
     order-confirmation glow) stays in step with it instead of hardcoding the
     bar's height and drifting when it changes. */
  --alma-header-drop: 24px;
  --alma-header-bar: 73px;
  --alma-header-h: calc(var(--alma-header-drop) + var(--alma-header-bar));
  /* The measured content column: what .alma-row spans, and what the
     full-bleed cards below align their own text to. */
  --alma-content: calc(var(--alma-canvas) - var(--alma-gutter) * 2);

  --alma-font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --alma-blur: blur(39.4px);
}

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

html {
  background: var(--alma-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background: var(--alma-bg);
  color: var(--alma-fg);
  font-family: var(--alma-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: none;
}

input[type='search'] {
  appearance: none;
  -webkit-appearance: none;
}

input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

h1, h2, h3, h4 {
  font-weight: 500;
}

/* Standard WP a11y pattern - visually hides text that should still reach
   screen readers (WooCommerce's price-range label, form labels, etc). */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
  word-wrap: normal;
}

/* ==========================================================================
   2. PAGE SHELL
   ========================================================================== */
/* The design canvas is 1600px, but capping the whole page at it left bare
   bands down both sides of anything wider (160px each on a 1920 monitor) and
   stopped the full-bleed hero/feature cards dead at 1600. The page now fills
   the viewport - the background and those cards bleed to the edges - while
   the measured content keeps the canvas width via .alma-row and the inner
   wrappers below. --alma-canvas stays the reference for those. */
.alma-page {
  position: relative;
  width: 100%;
  background: var(--alma-bg);
}

/* Footer rows track the same content width as .alma-row, which they'd
   otherwise stretch past once the page stopped capping them. */
.alma-footer-top,
.alma-footer-bar {
  width: 100%;
  max-width: calc(var(--alma-canvas) - var(--alma-gutter) * 2);
  margin-inline: auto;
}

/* The 1516px content column used by every "grid" section. */
.alma-row {
  width: 100%;
  max-width: calc(var(--alma-canvas) - var(--alma-gutter) * 2);
  margin-inline: auto;
}

.alma-section--grid {
  padding: 115px var(--alma-gutter);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
.alma-h2 {
  font-size: 52px;
  line-height: 62.9px;
  letter-spacing: 0;
}

/* These headings used to carry a hardcoded <br />, which assumed one exact
   set of font metrics: on a Mac the second line no longer fitted and spilled
   to a third, leaving a ragged gap beside the short first line. Letting the
   browser choose the break - and balance the two lines - keeps the intended
   two-line shape whatever the rendering. */
.alma-h2--balanced {
  text-wrap: balance;
}

/* fonts/h3 (Figma 43:8453/44:8808 - Order Successful!/Order Failed) */
.alma-h3 {
  font-size: 36px;
  line-height: 43.6px;
  letter-spacing: 0;
}

/* Character-level accent runs inside the big headlines (Figma
   styleOverrideTable on 95:12025 and 95:12100). */
.alma-accent {
  -webkit-text-fill-color: #C3D2E4;
  color: #C3D2E4;
}

.alma-accent--muted {
  -webkit-text-fill-color: #A2ACB4;
  color: #A2ACB4;
}

/* 95:12025 / 95:12147 - a short gradient wash that dips to #E0E0E0 near the
   start of the headline and returns to white. The stops are in px because the
   Figma gradient handles cover only the first ~280px of the text box. */
.alma-display {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.alma-display--hero {
  font-size: 106px;
  line-height: 95px;
  letter-spacing: -3.18px;
  /* The frame's own 669px, widened to 800. "Peptides Source" measures 714px at
     this size, so at 669 the pair could not share a line however the words
     were bound and the heading ran to four lines. 800 clears that by 86px, and
     stays 185px short of the 985px "USA Trusted Research" would need, so the
     first line cannot swallow the third word either. Each breakpoint's font
     size gets its own measure below - the widths are not proportional to it,
     and picking one number for both leaves a 19px margin somewhere. */
  max-width: 800px;
  background-image: linear-gradient(86.5deg, #FFFFFF 86px, #E0E0E0 163px, #FFFFFF 272px);
}

.alma-display--banner {
  font-size: 86px;
  line-height: 91px;
  letter-spacing: -2.58px;
  max-width: 714px;
  background-image: linear-gradient(86.9deg, #FFFFFF 92px, #E0E0E0 174px, #FFFFFF 290px);
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.alma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 0 0 auto;
  /* 28px, not the frame's 16px. The button is 51px tall against a 39px
     radius, so it renders as a full pill - and on a pill anything less than
     half the height of side padding puts the label inside the curve. At 16px
     "View All" was 87px wide with its text running into both arcs. */
  padding: 16px 28px;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF;
  color: #000000;
  font-size: 16px;
  line-height: 19.4px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* A block-theme global style ships a bare [type="submit"], button { color }
   rule that beats the class above on real <button> elements (the <a>
   version of .alma-btn is unaffected, so this only ever showed up on
   submit buttons like Place order / Update cart / Apply coupon). */
button.alma-btn {
  color: #000000 !important;
}

button.alma-btn.alma-btn--dark,
button.alma-btn.alma-btn--ghost {
  color: #FFFFFF !important;
}

/* States per the Figma UI Kit's "main" button row (91:10262): Default
   #FFFFFF, Hover rgba(255,255,255,.9), Active rgba(255,255,255,.8),
   Disable rgba(255,255,255,.2) bg / rgba(255,255,255,.3) text. */
.alma-btn:hover {
  background: rgba(255, 255, 255, 0.9);
}

.alma-btn:active {
  background: rgba(255, 255, 255, 0.8);
}

.alma-btn:disabled,
.alma-btn[disabled],
.alma-btn.is-disabled {
  background: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: not-allowed;
}

/* .alma-btn--dark is the solid-black variant used when a button sits on a
   light surface (banner-research-use, cart totals) rather than the app's
   dark background - the Kit's "secondary" (translucent white) row is for
   buttons on dark surfaces instead, so it doesn't apply here. */
.alma-btn--dark {
  background: #000000;
  color: #FFFFFF;
}

.alma-btn--dark:hover {
  background: rgba(0, 0, 0, 0.85);
}

.alma-btn--dark:active {
  background: rgba(0, 0, 0, 0.7);
}

/* .alma-btn--ghost is the Kit's "secondary" button row (91:10476-10479):
   translucent white on the app's own dark background, for buttons that
   shouldn't compete with a page's primary white .alma-btn (e.g. "View Full
   Certificate" sitting inside an already-prominent lot card). */
.alma-btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.alma-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}

.alma-btn--ghost:active {
  background: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   4b. MOTION
   ========================================================================== */
/* Scroll reveal. The hidden state is scoped to .alma-motion, which is only on
   <html> when JS ran and the visitor has not asked for reduced motion - see
   alma_motion_boot() in functions.php. Without it every rule here is inert
   and the page renders exactly as it did before.

   Movement is small on purpose: 16px and a fade. The cards on this site are
   large and photographic, and anything further makes the page feel like it is
   assembling itself rather than arriving. */
.alma-motion .alma-reveal {
  opacity: 0;
  transform: translateY(16px);
}

/* will-change is deliberately absent: these run once and then never again,
   and promoting every card on the page to its own layer up front costs more
   than the single composite each one needs. */
.alma-motion .alma-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The feature card is an annotated photograph, so its pieces arrive from the
   side they belong to rather than all rising together: the copy from the
   left, the button from the right, each callout from its own edge, and then
   the hairline draws itself out to the vial.

   The step element itself never moves - it is only the frame the dot and the
   hairline are positioned against, and translating it would drag the dot off
   the product mid-flight. Its children animate instead. */
.alma-motion .alma-feature-intro.alma-reveal:not(.is-revealed) {
  transform: translateX(-32px);
}

.alma-motion .alma-feature-head > .alma-btn.alma-reveal:not(.is-revealed) {
  transform: translateX(32px);
}

.alma-motion .alma-feature-step.alma-reveal {
  opacity: 1;
  transform: none;
}

.alma-motion .alma-feature-step.alma-reveal:not(.is-revealed) .alma-feature-box,
.alma-motion .alma-feature-step.alma-reveal:not(.is-revealed) .alma-feature-dot {
  opacity: 0;
}

.alma-motion .alma-feature-step--right.alma-reveal:not(.is-revealed) .alma-feature-box {
  transform: translateX(48px);
}

.alma-motion .alma-feature-step--left.alma-reveal:not(.is-revealed) .alma-feature-box {
  transform: translateX(-48px);
}

.alma-motion .alma-feature-step.alma-reveal:not(.is-revealed)::before {
  transform: scaleX(0);
}

.alma-motion .alma-feature-step.alma-reveal .alma-feature-box,
.alma-motion .alma-feature-step.alma-reveal .alma-feature-dot {
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The dot lands on the product after the line has reached it. */
.alma-motion .alma-feature-step.alma-reveal .alma-feature-dot {
  transition-delay: 0.42s;
}

.alma-motion .alma-feature-step.alma-reveal::before {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}

/* A card that lifts slightly under the pointer, matching the background
   change its siblings already had. */
.alma-motion .alma-product-card {
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.alma-motion .alma-product-card:hover {
  transform: translateY(-4px);
}

.alma-motion .alma-product-card.is-unavailable:hover {
  transform: none;
}

/* Belt and braces over the boot script: an OS-level setting can change
   between the head running and the visitor scrolling, and this catches it
   without needing a reload. */
@media (prefers-reduced-motion: reduce) {
  .alma-motion .alma-reveal,
  .alma-motion .alma-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .alma-motion .alma-product-card,
  .alma-motion .alma-product-card:hover {
    transition: none;
    transform: none;
  }

  .alma-motion .alma-feature-card .alma-reveal,
  .alma-motion .alma-feature-step.alma-reveal:not(.is-revealed) .alma-feature-box,
  .alma-motion .alma-feature-step.alma-reveal:not(.is-revealed) .alma-feature-dot,
  .alma-motion .alma-feature-step.alma-reveal:not(.is-revealed)::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   5. HEADER (Figma 104:17514)
   ========================================================================== */
/* The design places the bar differently on the front page than everywhere
   else: Figma 104:17514 insets it 58px and drops it 24px (it floats over the
   hero card - 16px card gutter + 42px card padding, 12px card offset + 12px
   inside it), while Figma 95:11571 and every other frame sit it flush at the
   top of the page with a 32px gutter and a 1536px inner width. Navigating
   between the two therefore jogged the logo 26px sideways and 24px up, with
   the icon group mirroring it - the nav pill was the only part that held
   still (space-between happens to land it on the same x under both sets of
   numbers). The front page's placement is the one we keep, so these are the
   shared metrics; the only thing left page-specific below is whether the bar
   floats over the hero or takes up room in the flow.

   The inset tracks the hero card's inner content rather than .alma-row: 16px
   inside the content column at any width, which is what the 58px works out
   to on the 1600px canvas. */
.alma-header {
  position: relative;
  z-index: 100;
  padding-top: var(--alma-header-drop);
  padding-inline: max(58px, calc((100% - var(--alma-content)) / 2 + 16px));
}

/* Capping the inner width would re-centre the logo away from the padding the
   line above just set, so the bar simply spans it. */
.alma-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  height: var(--alma-header-bar);
  margin-inline: auto;
}

/* Front page (Figma 104:17514): floats over the hero card. The 24px drop is
   the shared padding-top above, so this pins to the page top, not to 24px. */
.alma-header--overlay {
  position: absolute;
  inset: 0 0 auto;
}

.alma-logo img {
  width: 130px;
  height: 33px;
}

.alma-nav {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--alma-r-card);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: var(--alma-blur);
  -webkit-backdrop-filter: var(--alma-blur);
}

.alma-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.alma-nav-list a {
  display: inline-flex;
  align-items: center;
  padding: 16px;
  border-radius: var(--alma-r-nav);
  font-size: 14px;
  line-height: 16.9px;
  color: var(--alma-fg-60);
  transition: background 0.2s ease, color 0.2s ease;
}

.alma-nav-list a:hover {
  color: var(--alma-fg);
}

.alma-nav-list .current-menu-item a,
.alma-nav-list .current_page_item a {
  background: rgba(255, 255, 255, 0.05);
  color: var(--alma-fg);
}

.alma-header-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.alma-header-search {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 110;
  width: min(320px, calc(100vw - 64px));
  padding: 8px;
  border-radius: var(--alma-r-card);
  background: #080A0D;
  border: 1px solid var(--alma-hairline);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.alma-header-search[hidden] {
  display: none;
}

.alma-header-search-form {
  display: flex;
  align-items: center;
  gap: 4px;
}

.alma-header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--alma-r-nav);
  background: rgba(255, 255, 255, 0.1);
  color: var(--alma-fg);
  font-family: inherit;
  font-size: 14px;
}

.alma-header-search-input::placeholder {
  color: var(--alma-fg-50);
}

.alma-header-search-input:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.alma-header-search-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--alma-fg-60);
  font-size: 20px;
  line-height: 1;
}

.alma-header-search-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--alma-fg);
}

/* Log In / Registration modal (Figma 98:12826 / 100:13324) - the account
   icon opens the PAL auth card (.pal-auth-wrap/.pal-auth-card, styled
   further up) as an overlay on top of whatever page the visitor was on,
   rather than navigating to a dedicated page. */
.alma-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.7);
}

.alma-auth-modal[hidden] {
  display: none;
}

.alma-auth-modal-panel {
  position: relative;
  width: 100%;
  max-width: 964px;
  max-height: 90vh;
  overflow-y: auto;
}

/* Pinned to the overlay's own corner - see the note in header.php for why it
   is not inside the panel. */
.alma-auth-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--alma-fg);
  font-size: 20px;
  line-height: 1;
}

.alma-auth-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

body.alma-modal-open {
  overflow: hidden;
}

/* Inside the modal the card is the only thing on screen, so its own
   max-width/margin (set for the standalone page) would just add unwanted
   empty space - let it fill the panel instead. */
.alma-auth-modal .pal-auth-card {
  max-width: none !important;
  margin-inline: 0;
}

.alma-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--alma-r-nav);
  background: rgba(255, 255, 255, 0.1);
  color: var(--alma-fg);
  transition: background 0.2s ease;
}

.alma-icon-btn svg {
  width: 24px;
  height: 24px;
  opacity: 0.7;
}

.alma-icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.alma-icon-btn:hover svg {
  opacity: 1;
}

/* The badge is in the markup at every count, including zero, so that a
   cached page and a WooCommerce fragment always have something to update -
   see alma_cart_count_html(). At zero it is simply not drawn. */
.alma-header-cart-count.is-empty {
  display: none;
}

.alma-header-cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #000000;
  font-size: 11px;
  line-height: 1;
}

.alma-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 12px;
  border-radius: var(--alma-r-nav);
  background: rgba(255, 255, 255, 0.1);
}

.alma-burger span {
  display: block;
  height: 2px;
  background: var(--alma-fg);
  border-radius: 2px;
}

/* ==========================================================================
   6. HERO (Figma 95:11990)
   ========================================================================== */
.alma-hero {
  padding: 12px 16px;
}

/* Same content-column alignment as .alma-feature-card below. */
.alma-hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  /* Height is the larger of the design's card proportion and the height its
     copy needs. Above the canvas width the ratio wins, so the photo is
     framed exactly as designed instead of background-size:cover cropping a
     fifth of it away vertically (a 1920 monitor lost 22%, a 2560 one more).
     Below it the pixel floor wins, because the card's text is fixed-size and
     would otherwise be clipped by a ratio-derived height. */
  width: 100%;
  aspect-ratio: 1568 / 868;
  min-height: 868px;
  /* The top padding is the header's height, not the frame's 12px offset,
     because the bar floats over this card and the copy is bottom-anchored:
     with slack in the card the padding does nothing and the layout is the
     design's, but the moment the copy grows past the room below the bar it
     stops the heading sliding up underneath the logo instead. That is exactly
     what happened when the headline gained a word and wrapped to a third line
     on a phone - it started 34px above the bar's bottom edge and ran straight
     through the logo. The card's min-height is a floor, so it simply gets
     taller. Token, never a literal - see the --alma-header-* trio. */
  padding: var(--alma-header-h) max(var(--alma-gutter), calc((100% - var(--alma-content)) / 2 + 16px)) var(--alma-gutter);
  border-radius: var(--alma-r-card);
  /* The placeholder is the photograph's own average colour, not the flat fill
     the Figma frame carries. The frame's value is a long way from the image:
     the hero's #29405C is 108 points darker than the plate that replaces it,
     so the card visibly jumped from dark blue to a bright photo on every
     load. Matching the average makes the swap almost invisible while the
     image is still on its way. */
  background-color: #556075;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 95:11992 / 95:12023 - two blue washes that sit under the nav and the copy. */
.alma-hero-scrim-top,
.alma-hero-scrim-bottom {
  position: absolute;
  left: -10px;
  right: -10px;
  opacity: 0.87;
  pointer-events: none;
}

.alma-hero-scrim-top {
  top: 0;
  height: 205px;
  background: linear-gradient(180deg, #415E8A 0%, rgba(65, 94, 138, 0) 100%);
}

/* Anchored to the card's bottom edge, not to a measured offset from its top.
   Figma's 668px top was read off the 868px design card, and it stayed
   correct only while the card had that exact fixed height; once the card
   started deriving its height from the width, the scrim stopped following
   the copy - at 1920 the card is 1045px tall and the gradient ended 153px
   short of the bottom, leaving the paragraph and button sitting on bare
   photo (measured mean brightness 145-200 against the 55 they sit on inside
   the scrim). bottom:-24px reproduces the design's own 24px overshoot past
   the card, which overflow:hidden clips - so at the canvas width this is
   pixel-identical to the frame, and at every other width it tracks the copy
   the way the frame intends. The copy is bottom-anchored and fixed-height,
   so a fixed scrim anchored to the same edge keeps a constant relationship
   to it at any card height. */
.alma-hero-scrim-bottom {
  top: auto;
  bottom: -24px;
  /* Proportional, and much deeper than the frame's 224px. The hero copy grew a
     claims row and a second button, and its lead now starts at 14-23% of the
     card's height from the bottom - well above a 224px band, which measured
     1.38:1 against white. 72% covers the lead and the claims at every width
     from 1440 to 2560, and the headline keeps most of the photograph. */
  height: 72%;
  opacity: 1;
  background: linear-gradient(180deg, rgba(10, 18, 30, 0) 0%, rgba(10, 18, 30, 0.45) 18%, rgba(10, 18, 30, 0.90) 40%, #0A121E 78%);
}

/* Fixed, unlike .alma-feature-intro below: the hero's vials sit top-right
   and its copy bottom-left, so the two never compete for the same space -
   and capping this proportionally broke the headline into three lines
   instead of the design's two once the card dropped under ~1500px. */
.alma-hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 713px;
}

/* Bound to the heading so the browser can never separate them, whatever the
   metrics: the request was that these two words share a line. */
.alma-nowrap {
  white-space: nowrap;
}

.alma-hero-lead {
  font-size: 18px;
  line-height: 21.8px;
  color: var(--alma-fg-80);
}

/* The two headline claims, between the heading and the paragraph. Reuses
   .alma-split-check from the About page so the tick means the same thing
   wherever it appears. */
.alma-hero-claims {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: -8px 0 0;
  padding: 0;
  list-style: none;
}

.alma-hero-claim {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 24px;
  color: var(--alma-fg);
}

.alma-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* A step up from the standard pill, for the one place on the site that is
   asking for the first click. Side padding still clears the 39px radius. */
.alma-btn--lg {
  padding: 20px 34px;
  font-size: 18px;
  line-height: 22px;
}

/* The second action in a pair: same shape, no fill, so it reads as the
   alternative rather than competing with the primary. */
.alma-btn--ghost {
  background: transparent;
  color: var(--alma-fg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.alma-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   7. SECTION HEADER + PRODUCT CARDS (Figma 95:12029, 103:13873)
   ========================================================================== */
.alma-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 42px;
}

.alma-card-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alma-card-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.alma-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Fills its grid cell, so that the margin-top:auto on .alma-card-footer has
     a full-height column to push against. Without it the card is only as tall
     as its own content and the footer of a one-line name sat 25px above the
     footer of a two-line one, right beside it. */
  height: 100%;
  /* And min-width:0 because as a flex item it defaults to min-width:auto and
     refuses to shrink below its longest word. "Bacteriostatic Water (0.9%..."
     pushed its card 18px wider than the 167px track, so the left column's
     photographs came out visibly larger than the right's. */
  width: 100%;
  min-width: 0;
  gap: 12px;
  padding: 8px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
  transition: background 0.2s ease;
}

/* Out-of-stock card. The design has no state for this, so it borrows the
   order-status pill's language (same 0.12-alpha red, same radius and size)
   and dims the photo so the card still reads as a product, just a closed
   one. See alma_product_is_orderable() for why is_in_stock() alone isn't
   the test. */
.alma-card-stock {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 20px;
  padding: 8px 14px;
  border-radius: var(--alma-r-btn);
  background: rgba(240, 63, 63, 0.12);
  backdrop-filter: blur(14.75px);
  color: #F03F3F;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
}

.alma-product-card.is-unavailable .alma-card-media img {
  opacity: 0.4;
}

.alma-card-add.is-disabled {
  background: rgba(255, 255, 255, 0.1);
  color: var(--alma-fg-40);
  cursor: not-allowed;
  pointer-events: none;
}

.alma-product-card:hover {
  background: rgba(255, 255, 255, 0.08);
}

.alma-card-media {
  display: block;
  overflow: hidden;
  /* Never shrink: as a flex item in the card's column it was giving up height
     to a taller body, so two cards side by side showed their photographs at
     131px and 116px. */
  flex: 0 0 auto;
  aspect-ratio: 354 / 273;
  border-radius: var(--alma-r-card);
  background: #0D1725;
}

.alma-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.alma-product-card:hover .alma-card-media img {
  transform: scale(1.03);
}

.alma-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  /* Takes the slack in the card so the footer inside it can be pushed to the
     bottom. The footer is a grandchild of the card, not a child, so
     margin-top:auto on it alone had nothing to push against. */
  flex: 1 1 auto;
}

.alma-card-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 25px;
}

.alma-card-name {
  min-width: 0;
  font-size: 24px;
  line-height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alma-card-weight {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 25px;
  color: var(--alma-fg-40);
}

.alma-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 56px;
  /* Pinned to the bottom of the card. Names run to one line or two depending
     on the product, and without this the price and the cart button sat at a
     different height in every card of a row. */
  margin-top: auto;
}

.alma-card-prices {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.alma-card-price {
  font-size: 20px;
  line-height: 25px;
}

.alma-card-price-old {
  font-size: 18px;
  line-height: 25px;
  color: var(--alma-fg-40);
  text-decoration: line-through;
}

.alma-card-price .woocommerce-Price-amount,
.alma-card-price-old .woocommerce-Price-amount {
  font-size: inherit;
  line-height: inherit;
}

.alma-card-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF;
  color: #000000;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.alma-card-add:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.06);
}

.alma-card-add:active {
  background: rgba(255, 255, 255, 0.8);
}

.alma-card-add svg {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   8. SECONDARY FEATURE (Figma 95:12039)
   ========================================================================== */
.alma-feature {
  padding-inline: 16px;
}

/* The card itself bleeds to the viewport, but its text keeps the design's
   relationship to the content column: 16px outside .alma-row, at any width.
   Without this the heading sat 144px left of every section title on a 1920
   monitor instead of the design's 16px. */
.alma-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* Same constant-ratio framing as .alma-hero-card above. */
  /* width:100% keeps the ratio deriving height from width - without a
     definite width the pixel floor would drive the *width* instead and the
     card would run past the viewport. */
  width: 100%;
  aspect-ratio: 1568 / 848;
  min-height: 848px;
  padding: 42px max(var(--alma-gutter), calc((100% - var(--alma-content)) / 2 + 16px)) 112px;
  border-radius: var(--alma-r-card);
  /* Same reasoning as .alma-hero-card: the photograph's average. */
  background-color: #9EACC3;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.alma-feature-scrim {
  position: absolute;
  top: 0;
  left: -10px;
  right: -10px;
  /* Proportional, not the frame's flat 205px: the intro's last line sits at
     28-36% of this card's height depending on width, while 205px is only
     15-24% of it, so the copy ran off the bottom of the wash and onto the lit
     plate at 1.10:1 against white.

     The first fix for that overcorrected. It held 0.90 flat to 62% of a band
     that stopped at 60% of the card, which is a near-opaque sheet across the
     full width and then a fast ramp to nothing - measured, the backdrop behind
     the copy came out at rgb(25,34,47) for **16:1** against white where 4.5:1
     is the bar, and the plate underneath it was simply gone. On a wide desktop
     that reads as a black slab laid over the photograph with a visible edge
     where it ends.

     Now it runs the whole height of the card and falls continuously - no
     plateau to end abruptly - and it is tuned to the contrast the copy
     actually needs rather than to as much darkness as possible. Measured
     behind the text with the text hidden, at 1150 / 1280 / 1600 / 1920 / 2560:
     the heading is 10.7-14.0:1 against white and the lead 6.5-8.0:1 at
     --alma-fg-80, while the vial and the sweep behind it stay visible.

     The callouts do not depend on this at all - .alma-feature-box carries its
     own rgba(8,16,28,0.86) surface - so lightening the wash cannot affect
     them. */
  bottom: 0;
  opacity: 1;
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.92) 0%, rgba(8, 14, 24, 0.72) 32%, rgba(8, 14, 24, 0.34) 56%, rgba(8, 14, 24, 0) 78%);
  pointer-events: none;
}

.alma-feature-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 193px;
}

/* 584px of the design's 1568px card - 37%. Proportional for the same reason
   as .alma-hero-content: at a fixed width the copy ran from 40% of the card
   at 1600px to 57% at 1100px, straight over the vial. */
.alma-feature-intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(584px, 37%);
}

.alma-feature-lead {
  font-size: 16px;
  line-height: 19.4px;
  /* 50% white is the frame's value and it works on a flat dark section. This
     one sits on a photograph, where the wash can only be pushed so far before
     the picture disappears - so the type carries its share. */
  color: var(--alma-fg-80);
}

/* The three callouts are annotations on the photograph, so their dots sit on
   the vial and the hairlines run from each box out to it.

   The vial occupies 40%-56% of the plate's width, measured off the image, and
   background-size:cover maps that straight onto the card because the two
   share a width. The card is full-bleed - the viewport less the page's 16px
   inset each side - while this container stays centred inside it and stops
   growing at the content width, so an x measured from the card's edge becomes
   one measured from this container's by subtracting that inset. Written this
   way the dots track the vial at any width instead of being right at one.
   (100vw counts the scrollbar and the card does not; that is ~15px, which
   works through these terms to about a pixel.) */
.alma-feature-steps {
  position: relative;
  --alma-feature-box-w: 477.33px;
  /* Where the vial sits across the plate, measured off the artwork itself -
     the dots and their connectors are positioned from these. Re-measure after
     any plate swap: they are the whole reason the callouts point at the
     product rather than at empty sweep. Plate replaced 2026-08-25 (06.png);
     measured 0.450-0.549 by dark-column density. */
  --alma-vial-left: 0.45;
  --alma-vial-right: 0.55;
  --alma-card-w: calc(100vw - 32px);
  --alma-card-inset: max(var(--alma-gutter), calc((var(--alma-card-w) - (var(--alma-content) - 32px)) / 2));
}

.alma-feature-step {
  position: relative;
  display: flex;
  align-items: center;
  height: 167px;
  padding-block: 20px;
}

.alma-feature-step--right {
  justify-content: flex-end;
}

/* The hairline, drawn between the box and the dot. Anchoring it with both
   left and right lets it stretch to whatever the gap turns out to be, rather
   than carrying the fixed 137.5px it was exported with - which, on top of
   pointing the wrong way, could not reach across a wider card. */
.alma-feature-step::before {
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  /* The Figma value is a flat 25% white, which was picked against the frame's
     own darker rendering. On the real plate the two right-hand connectors
     cross the bright part of the photograph, where a white hairline measures
     +6.5 out of 255 against its background - invisible. The dark hairline
     underneath is what makes it read there; over the dark left side the white
     still does the work. */
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
  /* Grows from the box end towards the vial, so the line reads as being
     drawn to the product. */
  transform-origin: right center;
}

.alma-feature-step--right::before {
  left: calc(var(--alma-vial-right) * var(--alma-card-w) - var(--alma-card-inset) + 29px);
  right: calc(var(--alma-feature-box-w) + 10px);
}

.alma-feature-step--left::before {
  left: calc(var(--alma-feature-box-w) + 10px);
  right: calc(100% - (var(--alma-vial-left) * var(--alma-card-w) - var(--alma-card-inset)) + 29px);
  transform-origin: left center;
}

.alma-feature-box {
  width: var(--alma-feature-box-w);
  max-width: 100%;
  padding: 24px;
  border-radius: var(--alma-r-card);
  /* --alma-glass is 7% of a dark blue. Over this card's photograph that is
     effectively nothing: the callout body text measured 1.20-1.28:1 against
     white. Same idea, enough of it to actually be a surface. */
  background: rgba(8, 16, 28, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: var(--alma-blur);
  -webkit-backdrop-filter: var(--alma-blur);
}

.alma-feature-box-title {
  margin-bottom: 16px;
  font-size: 24px;
  line-height: 25px;
}

.alma-feature-box-text {
  font-size: 16px;
  line-height: 19.4px;
  /* Same reason as .alma-feature-lead above. */
  color: var(--alma-fg-80);
}

/* 95:12049 - the marker dot, sitting on the vial rather than beside its box. */
.alma-feature-dot {
  position: absolute;
  top: 50%;
  margin-top: -9.5px;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  /* Same reasoning as the connector: the two right-hand dots sit on the
     bright side of the plate. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.25);
}

.alma-feature-dot::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.alma-feature-step--right .alma-feature-dot {
  left: calc(var(--alma-vial-right) * var(--alma-card-w) - var(--alma-card-inset));
}

.alma-feature-step--left .alma-feature-dot {
  right: calc(100% - (var(--alma-vial-left) * var(--alma-card-w) - var(--alma-card-inset)));
}

/* ==========================================================================
   9. INFORMATION CARDS (Figma 95:12075 - three 497x219 cards)
   ========================================================================== */
.alma-info-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
}

.alma-info-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 219px;
  padding: 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
}

.alma-info-icon {
  width: 58px;
  height: 58px;
}

.alma-info-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.alma-info-title {
  font-size: 24px;
  line-height: 25px;
}

.alma-info-copy {
  font-size: 16px;
  line-height: 24px;
  color: var(--alma-fg-50);
}

/* ==========================================================================
   10. SPLIT SECTION (Figma 95:12098)
   ========================================================================== */
.alma-split {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 67px;
  padding: 32px var(--alma-gutter);
}

.alma-split-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 42px;
  width: 724.5px;
  max-width: 100%;
}

.alma-split-text {
  font-size: 16px;
  line-height: 24px;
  color: var(--alma-fg-50);
}

/* 95:12104 - STRETCH fill; the imageTransform crops to a square taken from the
   right-hand side of the source photograph, so the crop is reproduced here. */
.alma-split-media {
  flex: 0 0 auto;
  width: 724.5px;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: var(--alma-r-card);
  background-color: #94A2BA;
  background-repeat: no-repeat;
  /* The frame's 233.2% zoom at 86.2%/100% was measured off the plate this slot
     used to carry. New artwork went in without those two numbers being
     retuned, and they cropped straight through both vials. Measured on the
     replacement by dark-pixel density: the vials span 0.63-0.89 of its width,
     centred at 0.76. The plate is 2:1 and this box is square, so cover shows
     exactly half the width and no vertical crop at all - anchoring right puts
     the window at 0.50-1.00 and both vials sit inside it with room to spare. */
  background-size: cover;
  background-position: 100% 50%;
}

/* ==========================================================================
   10b. TESTIMONIALS MARQUEE (no Figma frame - see front-page.php)
   ========================================================================== */
/* The section sits between the split block (32px of padding below it) and
   "More research peptides" (115px above it), so it only carries padding on
   top: the row below supplies the space underneath. */
.alma-testimonials {
  padding: 115px 0 0;
}

.alma-testimonials-head {
  padding-inline: var(--alma-gutter);
}

/* Full-bleed by design: the row runs off both edges of the viewport, and the
   mask fades the first and last 64px so cards arrive and leave rather than
   being cut off at a hard edge.

   overflow-x: auto is the base state, i.e. what a visitor with no JS or with
   reduced motion gets - nothing is scrolling for them, so the row has to be
   scrollable by hand or five of the seven quotes would be unreachable. The
   .alma-motion rules below take that back to overflow: hidden. */
.alma-marquee {
  position: relative;
  overflow-x: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

/* Inset, because the mask clips anything drawn outside the box. */
.alma-marquee:focus-visible {
  outline: 2px solid var(--alma-fg-60);
  outline-offset: -2px;
}

.alma-marquee-track {
  display: flex;
  width: max-content;
}

.alma-marquee-group {
  display: flex;
}

/* The clone is only there to cover the seam while the track loops. With no
   motion nothing loops, and it would just be the same seven quotes printed
   twice - so it exists only under .alma-motion. */
.alma-marquee-group--clone {
  display: none;
}

/* The gap between cards is the card's own trailing margin rather than a gap
   on the flex container. It has to be: the loop restarts at exactly -50% of
   the track, which is only seamless if the two groups are identical in width
   *including* the space that separates them. A container gap would put half a
   gap of drift into every cycle. */
.alma-testimonial {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 0 420px;
  width: 420px;
  margin-inline-end: 12px;
  padding: 24px;
  border: 1px solid var(--alma-hairline);
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
}

/* --alma-fg-80 rather than the --alma-fg-50 the other body copy on this page
   uses: this is the block a visitor is meant to actually read, and it is set
   at 16px over a card that is barely lighter than the page. */
.alma-testimonial-quote {
  font-size: 16px;
  line-height: 24px;
  color: var(--alma-fg-80);
}

/* margin-top: auto bottom-aligns the author across a row of cards whose
   quotes run from two lines to four. */
.alma-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.alma-testimonial-avatar {
  display: flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--alma-fg-80);
}

.alma-testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.alma-testimonial-name {
  font-size: 16px;
  line-height: 20px;
}

.alma-testimonial-role {
  font-size: 14px;
  line-height: 18px;
  color: var(--alma-fg-50);
}

/* The scroll itself. Gated on .alma-motion exactly like every other animation
   on this site - an auto-scrolling row is the single most literal case of
   what prefers-reduced-motion exists for. */
@keyframes alma-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.alma-motion .alma-marquee {
  overflow: hidden;
}

.alma-motion .alma-marquee-group--clone {
  display: flex;
}

.alma-motion .alma-marquee-track {
  animation: alma-marquee var(--alma-marquee-duration, 64s) linear infinite;
}

/* Stops under the pointer so a quote can be read, and on keyboard focus so it
   is not a moving target for anyone tabbing through the page. */
.alma-motion .alma-marquee:hover .alma-marquee-track,
.alma-motion .alma-marquee:focus-within .alma-marquee-track {
  animation-play-state: paused;
}

/* Belt and braces over the boot script, matching the block in section 4b.
   It has to live *here*, after the rules it overrides: the reduced-motion
   block up there is earlier in the file and would lose to these on source
   order at equal specificity. */
@media (prefers-reduced-motion: reduce) {
  .alma-motion .alma-marquee {
    overflow-x: auto;
  }
  .alma-motion .alma-marquee-track {
    animation: none;
  }
  .alma-motion .alma-marquee-group--clone {
    display: none;
  }
}

/* ==========================================================================
   11. FAQ (Figma 95:12121)
   ========================================================================== */
.alma-faq {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
  padding: 72px 16px 142px;
  overflow: hidden;
}

.alma-faq-glow {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.alma-faq-glow--right {
  top: 20.5px;
  left: 1216px;
  width: 551.3px;
  height: 607.3px;
  background-image: url('../svg/glow_right.svg');
}

.alma-faq-glow--left {
  top: 182.5px;
  left: -131px;
  width: 427px;
  height: 454.8px;
  background-image: url('../svg/glow_left.svg');
}

.alma-faq-title {
  position: relative;
  text-align: center;
}

.alma-faq-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 692px;
  max-width: 100%;
}

.alma-faq-item {
  padding: 12px 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
}

.alma-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  text-align: left;
}

.alma-faq-q-text {
  font-size: 18px;
  line-height: 21.8px;
}

.alma-faq-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: 1px solid var(--alma-hairline);
  border-radius: var(--alma-r-btn);
  transition: transform 0.25s ease;
}

.alma-faq-item.is-open .alma-faq-toggle {
  transform: rotate(180deg);
}

.alma-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.alma-faq-item.is-open .alma-faq-a {
  grid-template-rows: 1fr;
}

.alma-faq-a > p {
  overflow: hidden;
  font-size: 16px;
  line-height: 19.4px;
  color: var(--alma-fg-50);
}

.alma-faq-item.is-open .alma-faq-a > p {
  padding-top: 12px;
}

/* Standalone FAQ page (/faqs/) - no Figma frame was reachable for this one
   (see search.php etc. for the same Figma-MCP-rate-limit note), but the
   page's own pre-existing content is an Elementor accordion with five
   category tabs, so that's the shape this reuses the .alma-faq-* component
   for rather than the single flat list the homepage/Contact section uses. */
.alma-faq-page-head {
  position: relative;
  max-width: 640px;
  text-align: center;
}

.alma-faq-page-lead {
  margin-top: 12px;
  color: var(--alma-fg-60);
  font-size: 16px;
  line-height: 1.6;
}

.alma-faq-page-lead a {
  color: var(--alma-fg);
  text-decoration: underline;
}

.alma-faq-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 900px;
}

.alma-faq-tab {
  padding: 12px 20px;
  border: 1px solid var(--alma-hairline);
  border-radius: var(--alma-r-btn);
  color: var(--alma-fg-60);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.alma-faq-tab:hover {
  color: var(--alma-fg);
  border-color: rgba(255, 255, 255, 0.3);
}

.alma-faq-tab.is-active {
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  color: var(--alma-fg);
}

.alma-faq-list.alma-faq-list--page {
  width: 800px;
}

/* ==========================================================================
   12. BANNER (Figma 95:12143)
   ========================================================================== */
.alma-banner {
  padding: 12px 16px;
}

.alma-banner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* Same ratio-or-content-floor pairing as the hero, feature and about-hero
     cards - this one was missed in that pass, and at 2560px its fixed 753px
     height against a 1410px rendered background threw away 47% of the
     photograph. */
  width: 100%;
  aspect-ratio: 1568 / 753;
  min-height: 753px;
  padding: 12px var(--alma-gutter) var(--alma-gutter);
  border-radius: var(--alma-r-card);
  /* Same reasoning as .alma-hero-card: the photograph's average. */
  background-color: #545C71;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 95:12145 - dark wash over the left-hand side of the photograph. The rect is
   rotated 90 degrees in Figma, so its gradient runs right-to-left. */
/* A horizontal gradient, so its vertical extent only has to cover the card.
   The design's 771px did that on the 753px frame and nothing else - at 1920
   the card is 907px tall and the last 136px went undarkened. Spanning top to
   bottom is what the fixed height was standing in for. */
.alma-banner-scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -22px;
  width: 913px;
  opacity: 1;
  /* The frame's wash was 0.65 of a mid slate, which left the lead at 1.35:1
     against the lit vial - the worst reading on the site. Measured: the copy's
     right edge reaches p=0.34 of this band at desktop widths, so the dark part
     holds to 0.34 and only clears beyond it. */
  background: linear-gradient(270deg, rgba(12, 20, 28, 0) 0%, rgba(12, 20, 28, 0.45) 22%, rgba(12, 20, 28, 0.94) 34%, #0C141C 100%);
  pointer-events: none;
}

.alma-banner-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 777px;
}

.alma-banner-lead {
  max-width: 543px;
  font-weight: 400;
  font-size: 16px;
  line-height: 19.4px;
  color: var(--alma-fg-60);
}

/* ==========================================================================
   13. FOOTER (Figma 95:12151)
   ========================================================================== */
.alma-footer {
  display: flex;
  flex-direction: column;
  gap: 49px;
  padding: 32px var(--alma-gutter);
}

.alma-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 157px;
  min-height: 152px;
}

.alma-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 367px;
  max-width: 100%;
}

.alma-footer-tagline {
  font-size: 14px;
  line-height: 24px;
  color: var(--alma-fg-60);
}

.alma-footer-cols {
  display: flex;
  gap: 32px;
}

/* Each column is preceded by a 16px tick 32px to its left (Figma 95:12160). */
.alma-footer-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 175px;
  padding-left: 32px;
}

.alma-footer-col::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.5);
}

.alma-footer-col-title {
  font-size: 14px;
  line-height: 24px;
  color: var(--alma-fg);
}

.alma-footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alma-footer-links a {
  font-size: 14px;
  line-height: 24px;
  color: var(--alma-fg-60);
  transition: color 0.2s ease;
}

.alma-footer-links a:hover {
  color: var(--alma-fg);
}

.alma-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.alma-footer-copy,
.alma-footer-disclaimer {
  font-size: 14px;
  line-height: 24px;
}

.alma-footer-disclaimer {
  color: var(--alma-fg-50);
  text-align: right;
}

/* ==========================================================================
   14. CATALOGUE (Figma 95:11572)
   ========================================================================== */
.alma-catalog {
  /* 42px on top; the frame reserves a further 107px under the pager before the
     banner, which is folded into the bottom padding here. */
  padding: 42px var(--alma-gutter) 149px;
}

.alma-catalog-head {
  margin-bottom: 24px;
}

.alma-search-page-form {
  width: 360px;
  max-width: 100%;
}

.alma-search-page-form .alma-header-search-input {
  height: 51px;
}

.alma-filters {
  display: flex;
  align-items: center;
  gap: 12px;
}

.alma-filter {
  position: relative;
  display: block;
  width: 176px;
}

.alma-filter-select {
  width: 100%;
  height: 48px;
  padding: 12px 42px 12px 16px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 24px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.alma-filter-select:hover,
.alma-filter-select:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: var(--alma-fg);
}

.alma-filter-select option {
  background: #14171C;
  color: var(--alma-fg);
}

.alma-filter-caret {
  position: absolute;
  top: 50%;
  right: 16px;
  display: block;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.alma-filter-apply {
  height: 48px;
}

.alma-catalog-empty {
  padding: 64px 0;
  font-size: 18px;
  line-height: 21.8px;
  color: var(--alma-fg-50);
}

/* WooCommerce ships woocommerce-layout.css, which floats and percentage-sizes
   li.product. Neutralise it so the loop uses the same grid as the front page. */
.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}

.woocommerce ul.products li.product,
ul.products > li {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
  /* The li is the grid item and already stretches to the tallest card in its
     row; the card inside it did not, because height:100% against an auto
     height resolves to auto. Making the li a flex container stretches the card
     for free, which is what .alma-card-footer's margin-top:auto needs. */
  display: flex;
}

/* woocommerce.css keeps a mobile block of its own -
   `@media (max-width:768px){ .woocommerce ul.products[class*="columns-"]
   li.product { width:48% } }` - which outranks the rule above on both
   selector weight and load order. Left alone it pinned every card to 48% of
   an already single-column grid track: 164px cards at 390px wide, and 77px
   ones before the grid itself was fixed. The grid owns the column widths
   here, so the item must simply fill its track. */
.woocommerce ul.products[class*='columns-'] li.product,
.woocommerce-page ul.products[class*='columns-'] li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
  content: none;
}

.woocommerce ul.products li.product .alma-card-media img {
  width: 100%;
  height: 100%;
  margin: 0;
}

.woocommerce ul.products li.product .alma-card-name {
  padding: 0;
  font-size: 24px;
  line-height: 25px;
}

/* Pagination (Figma 95:11678) */
.alma-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 56px;
  margin-top: 24px;
}

.alma-page-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF;
  color: #000000;
  transition: opacity 0.2s ease;
}

.alma-page-arrow--prev svg {
  transform: rotate(180deg);
}

.alma-page-arrow.is-disabled {
  opacity: 0.25;
}

a.alma-page-arrow:hover {
  opacity: 0.85;
}

.alma-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.alma-page-numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 54px;
  padding: 12px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--alma-fg);
  font-size: 16px;
  line-height: 19.2px;
  transition: background 0.2s ease;
}

.alma-page-numbers a.page-numbers:hover {
  background: rgba(255, 255, 255, 0.2);
}

.alma-page-numbers .page-numbers.current {
  background: #FFFFFF;
  color: #000000;
}

/* ==========================================================================
   15. COA LIBRARY (Figma 54:15043)
   ========================================================================== */
.alma-cert-hero {
  padding-inline: 16px;
}

.alma-cert-hero-card {
  position: relative;
  overflow: hidden;
  /* Last of the fixed-height photo cards. Its background-size is 100% auto,
     so the image height follows the card *width* - at 2560px that made the
     card an 11:1 sliver showing a 229px band of a 1000px-tall image, against
     the design's 229 of 620. The ratio keeps that slice proportional. */
  width: 100%;
  aspect-ratio: 1568 / 228;
  min-height: 228px;
  padding: 61px var(--alma-gutter) 42px;
  border-radius: var(--alma-r-card);
  background-color: #2C3E55;
  background-repeat: no-repeat;
  /* 104:16914 STRETCH fill: full width, cropped to the middle of the photo. */
  background-size: 100% auto;
  background-position: 0 38.5%;
}

/* 104:16915 - rotated 90deg, so the wash runs right to left. */
.alma-cert-hero-scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -22px;
  width: 1042px;
  /* Darker than the frame's #425E8A, same hue. That value is a mid slate:
     measured behind this card's lead it left white type at 1.63:1 on a
     desktop and 1.72:1 on a phone, which is unreadable by any standard.
     Holding a near-opaque wash to 40% of the width before it starts to
     clear keeps the copy on darkness at every card width while the
     photograph still opens up on the right. */
  /* Measured: the lead's right edge reaches 75% of this band's width at every
     size from 768 up, which on a 270deg axis is p=0.25. So the wash stays
     near-opaque from the left edge to p=0.30 and only opens up in the
     rightmost quarter, where the vials are and no copy goes. */
  background: linear-gradient(270deg, rgba(18, 28, 42, 0) 0%, rgba(18, 28, 42, 0.35) 18%, rgba(18, 28, 42, 0.95) 30%, #121C2A 100%);
  pointer-events: none;
}

/* 104:16917 */
/* Bottom fade, pinned the same way the hero's is: 192 + 60 is the 228px
   design card plus its 24px overshoot. */
.alma-cert-hero-fade {
  position: absolute;
  bottom: -24px;
  left: -10px;
  right: -10px;
  height: 60px;
  background: linear-gradient(180deg, rgba(10, 16, 22, 0) 0%, #345570 100%);
  pointer-events: none;
}

.alma-cert-hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 713px;
}

.alma-cert-hero-lead {
  font-weight: 400;
  font-size: 16px;
  line-height: 19.4px;
}

.alma-cert-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 36px 224px;
}

/* 73:3521 */
.alma-cert-search {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
  padding-inline: 24px;
  border: 1px solid var(--alma-hairline);
  border-radius: var(--alma-r-card);
}

.alma-cert-search-icon {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  opacity: 0.8;
}

.alma-cert-search input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 19.4px;
  color: var(--alma-fg);
}

.alma-cert-search input::placeholder {
  color: var(--alma-fg-50);
}

.alma-cert-search-clear {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 16.9px;
  color: var(--alma-fg-50);
}

.alma-cert-search-clear:hover {
  color: var(--alma-fg);
}

.alma-cert-empty {
  padding: 48px 24px;
  font-size: 18px;
  line-height: 21.8px;
  color: var(--alma-fg-50);
}

/* 73:3502 collapsed / 60:3997 expanded */
.alma-cert {
  padding: 12px 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
  transition: background 0.2s ease;
}

.alma-cert.is-open {
  padding-bottom: 24px;
  background: linear-gradient(180deg, #253748 0%, rgba(37, 55, 72, 0.44) 100%);
}

.alma-cert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 61px;
  text-align: left;
}

.alma-cert-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.alma-cert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: #424242;
  transition: color 0.2s ease;
}

.alma-cert.is-open .alma-cert-icon {
  color: #7B90A5;
}

.alma-cert-number {
  overflow: hidden;
  font-size: 20px;
  line-height: 24.2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alma-cert-meta {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
}

.alma-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 33px;
  padding: 8px;
  border-radius: var(--alma-r-card);
  background: rgba(52, 168, 83, 0.12);
  color: #34A853;
  font-size: 14px;
  line-height: 16.9px;
  white-space: nowrap;
}

.alma-cert-badge-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(52, 168, 83, 0.22);
}

.alma-cert.is-open .alma-cert-badge {
  background: #34A853;
  color: #FFFFFF;
}

.alma-cert.is-open .alma-cert-badge-dot {
  background: rgba(255, 255, 255, 0.22);
}

.alma-cert--expiring .alma-cert-badge {
  background: rgba(223, 199, 81, 0.12);
  color: #DFC751;
}

.alma-cert--expiring .alma-cert-badge-dot {
  background: rgba(223, 199, 81, 0.22);
}

.alma-cert--expiring.is-open .alma-cert-badge {
  background: #DFC751;
  color: #FFFFFF;
}

.alma-cert--expired .alma-cert-badge {
  background: rgba(240, 63, 63, 0.12);
  color: #F03F3F;
}

.alma-cert--expired .alma-cert-badge-dot {
  background: rgba(240, 63, 63, 0.22);
}

.alma-cert--expired.is-open .alma-cert-badge {
  background: #F03F3F;
  color: #FFFFFF;
}

.alma-cert-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--alma-r-btn);
  background: rgba(255, 255, 255, 0.05);
  color: var(--alma-fg);
}

.alma-cert-toggle svg {
  transform: rotate(90deg);
  transition: transform 0.25s ease;
}

.alma-cert.is-open .alma-cert-toggle svg {
  transform: rotate(-90deg);
}

.alma-cert-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.alma-cert.is-open .alma-cert-panel {
  grid-template-rows: 1fr;
}

.alma-cert-panel-inner {
  display: flex;
  gap: 24px;
  overflow: hidden;
}

.alma-cert.is-open .alma-cert-panel-inner {
  /* 24px gap, the 2px rule from 60:3763 (which sits on the gap in Figma, so it
     does not add height), then another 24px. */
  margin-top: 23px;
  padding-top: 23px;
  border-top: 2px solid #253748;
}

.alma-cert-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 1 50%;
  min-width: 0;
}

.alma-cert-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  width: 100%;
}

.alma-cert-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.alma-cert-label {
  font-size: 14px;
  line-height: 16.9px;
  color: var(--alma-fg-50);
}

.alma-cert-value {
  overflow: hidden;
  font-size: 18px;
  line-height: 21.8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alma-cert-docs {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 8px;
  flex: 1 1 50%;
  min-width: 0;
}

.alma-cert-doc {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 104px;
  padding: 12px 24px;
  border-radius: var(--alma-r-card);
  background: linear-gradient(180deg, #253748 0%, rgba(37, 55, 72, 0.44) 100%);
  transition: filter 0.2s ease;
}

.alma-cert-doc:hover {
  filter: brightness(1.15);
}

.alma-cert-doc-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.alma-cert-doc-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 16px;
  line-height: 19.4px;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 60:3793 - the certificate page peeks out of a short, clipped frame. */
.alma-cert-doc-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  flex: 0 0 auto;
  width: 108px;
  height: 80px;
}

.alma-cert-doc-thumb img {
  position: absolute;
  top: 15px;
  left: 0;
  width: 108px;
  height: 150px;
  object-fit: cover;
  border-radius: 2px;
  transform: rotate(4.86deg);
}

/* ==========================================================================
   17. ABOUT PAGE (Figma 45:10138)
   ========================================================================== */
.alma-about-hero {
  padding-inline: 16px;
}

.alma-about-hero-card {
  position: relative;
  overflow: hidden;
  /* Same ratio-or-content-floor pairing as the hero and feature cards: this
     banner ran from 8.3:1 on a 2560 monitor to 1.1:1 on a phone, so cover
     re-cropped it drastically at every size. */
  width: 100%;
  aspect-ratio: 1568 / 303;
  min-height: 303px;
  padding: 61px var(--alma-gutter) 42px;
  border-radius: var(--alma-r-card);
  background-color: #2C3E55;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Same wash used on the COA hero card (104:16872/104:16915) - both pages
   share the same source photograph and overlay. */
.alma-about-hero-scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -22px;
  width: 1042px;
  /* Darker than the frame's #425E8A, same hue. That value is a mid slate:
     measured behind this card's lead it left white type at 1.63:1 on a
     desktop and 1.72:1 on a phone, which is unreadable by any standard.
     Holding a near-opaque wash to 40% of the width before it starts to
     clear keeps the copy on darkness at every card width while the
     photograph still opens up on the right. */
  /* Measured: the lead's right edge reaches 75% of this band's width at every
     size from 768 up, which on a 270deg axis is p=0.25. So the wash stays
     near-opaque from the left edge to p=0.30 and only opens up in the
     rightmost quarter, where the vials are and no copy goes. */
  background: linear-gradient(270deg, rgba(18, 28, 42, 0) 0%, rgba(18, 28, 42, 0.35) 18%, rgba(18, 28, 42, 0.95) 30%, #121C2A 100%);
  pointer-events: none;
}

/* Same bottom fade as .alma-cert-hero-fade: 267 + 60 is the 303px design
   card plus the 24px overshoot. */
.alma-about-hero-fade {
  position: absolute;
  bottom: -24px;
  left: -10px;
  right: -10px;
  height: 60px;
  background: linear-gradient(180deg, rgba(10, 16, 22, 0) 0%, #345570 100%);
  pointer-events: none;
}

.alma-about-hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 669px;
}

.alma-about-hero-lead {
  font-size: 16px;
  line-height: 19.4px;
}

/* 45:10356 - same split layout as the homepage (95:12098) but with the media
   on the left, a second paragraph, and a lighter text opacity. */
.alma-split-text--60 {
  color: var(--alma-fg-60);
}

/* The About page's four claims. A plain list would read as body copy; the
   check mark is what makes each line a promise, so it gets the same disc the
   COA library's "Valid" badge uses. */
.alma-split-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alma-split-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 24px;
  color: var(--alma-fg-80);
}

.alma-split-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(52, 168, 83, 0.16);
  color: #34A853;
}

/* 45:10368 - four 370px cards instead of the homepage's three 497px ones. */
.alma-info-row--about {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.alma-info-card--about {
  min-height: 339px;
}

.alma-info-copy--list {
  white-space: pre-line;
}

/* ==========================================================================
   18. PRODUCT PAGE (Figma 45:11001)
   ========================================================================== */
.alma-product-hero {
  padding: 42px var(--alma-gutter);
}

.alma-product-hero-row {
  display: grid;
  grid-template-columns: 847fr 627fr;
  align-items: flex-start;
  gap: 42px;
}

.alma-product-gallery {
  min-width: 0;
}

.alma-product-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 847 / 579;
  border-radius: var(--alma-r-card);
  object-fit: cover;
  background: var(--alma-surface);
}

.alma-product-buy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.alma-product-buy-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.alma-product-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 19.4px;
  font-weight: 500;
}

.alma-product-crumbs a {
  color: var(--alma-fg-60);
}

.alma-product-crumbs a:last-of-type {
  color: var(--alma-fg);
}

.alma-product-crumbs span {
  color: var(--alma-fg-40);
}

.alma-product-price {
  font-size: 24px;
  line-height: 29px;
  font-weight: 500;
}

.alma-product-price del {
  margin-right: 8px;
  font-weight: 400;
  color: var(--alma-fg-50);
  text-decoration: line-through;
}

.alma-product-price ins {
  text-decoration: none;
}

.alma-product-divider {
  width: 100%;
  height: 1px;
  background: var(--alma-hairline);
}

/* Flattens WooCommerce's default variation table + button markup into one row. */
.alma-product-purchase .variations_form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.alma-product-purchase table.variations,
.alma-product-purchase table.variations tbody,
.alma-product-purchase table.variations tr,
.alma-product-purchase td.value,
.alma-product-purchase .single_variation_wrap {
  display: contents;
}

.alma-product-purchase th.label,
.alma-product-purchase .reset_variations,
.alma-product-purchase .woocommerce-variation-description {
  display: none;
}

/* !important because WooCommerce's own script writes an inline display onto the
   Clear link when a variation is chosen, which outranks the rule above. It was
   coming back as a 37px item in the middle of the row. */
.alma-product-purchase .reset_variations {
  display: none !important;
}

/*
 * Quantity and Add to cart always get their own row.
 *
 * They shared the first row with the select until a variation was chosen, at
 * which point WooCommerce added the Clear link and the variation's price to
 * that row and the pair wrapped underneath - so the control the visitor is
 * reaching for jumped down a line the moment they picked a size, and jumped
 * back if they cleared it. Pinning them to their own line costs nothing when
 * there is room and removes the jump entirely.
 */
.alma-product-purchase .woocommerce-variation-add-to-cart {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Stock state. WooCommerce prints an availability line for every selection -
   "10 in stock" as well as "Out of stock" - and the design shows neither, so
   this block used to hide the lot. That also swallowed the only explanation
   an unavailable selection had: the Add to cart button faded to 40% and
   stopped responding with nothing saying why. Keep the quantity chatter
   hidden, surface the states that actually block a purchase, and style them
   as a badge in the same language as the order-status pills. */
/* Applies to a simple product's own stock line as well as a variation's:
   WooCommerce renders the former straight into the purchase block, outside
   .woocommerce-variation-availability, so scoping this to that wrapper left
   "5 in stock" showing on simple products only. */
.alma-product-purchase .stock.in-stock {
  display: none;
}

.alma-product-purchase .stock.out-of-stock,
.alma-product-purchase .stock.available-on-backorder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: var(--alma-r-btn);
  font-size: 14px;
  font-weight: 500;
}

.alma-product-purchase .stock.out-of-stock {
  background: rgba(240, 63, 63, 0.12);
  color: #F03F3F;
}

.alma-product-purchase .stock.available-on-backorder {
  background: rgba(223, 199, 81, 0.12);
  color: #DFC751;
}

/* A size the shopper can't buy, shown in the closed <select> as well as the
   open list - main.js labels these from the form's own variation data. */
.alma-product-purchase select option[data-alma-oos] {
  color: var(--alma-fg-40);
}

.alma-product-purchase select {
  min-width: 130px;
  height: 51px;
  padding: 0 40px 0 20px;
  border: 0;
  border-radius: var(--alma-r-btn);
  background-color: rgba(255, 255, 255, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  color: var(--alma-fg);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.alma-product-purchase select option {
  background: #14171C;
  color: var(--alma-fg);
}

.alma-product-purchase form.cart,
.alma-product-purchase .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.alma-product-qty-stepper {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 51px;
  padding: 0 16px;
  border-radius: var(--alma-r-btn);
  border: 1px solid var(--alma-fg);
}

.alma-product-purchase .quantity {
  display: flex;
}

.alma-product-purchase .qty {
  width: 24px;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--alma-fg);
  text-align: center;
  font-size: 16px;
  appearance: textfield;
  -moz-appearance: textfield;
}

.alma-product-purchase .qty::-webkit-outer-spin-button,
.alma-product-purchase .qty::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.alma-product-purchase .single_add_to_cart_button.button.alt {
  height: 51px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF !important;
  color: #000000 !important;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.alma-product-purchase .single_add_to_cart_button.button.alt:hover {
  opacity: 0.85;
}

.alma-product-purchase .single_add_to_cart_button.disabled {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

/* Price and stock badge sit side by side rather than stacking in the narrow
   column left of the Clear link. Applied to the two children, not their
   wrapper: WooCommerce shows/hides .woocommerce-variation with inline
   styles, so any display set on it here is overwritten the moment a
   variation is picked. */
.alma-product-purchase .woocommerce-variation-price,
.alma-product-purchase .woocommerce-variation-availability {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.alma-product-purchase .woocommerce-variation-price {
  margin-right: 12px;
}

.alma-product-purchase .woocommerce-variation-price {
  font-size: 14px;
  color: var(--alma-fg-60);
}

.alma-product-purchase .woocommerce-variation-price .price {
  font-weight: 500;
  color: var(--alma-fg);
}

/* RUO compliance badge (template-parts/ruo-badge.php), reused in the purchase
   panel, above the article, and above the footer. */
.alma-ruo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--alma-r-card);
  background: linear-gradient(180deg, rgba(246, 203, 96, 0.2) 0%, rgba(246, 203, 96, 0.02) 100%);
}

.alma-ruo-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alma-ruo-icon {
  flex: 0 0 auto;
  width: 21px;
  height: 19px;
}

.alma-ruo-title {
  font-size: 20px;
  line-height: 24.2px;
  font-weight: 500;
  color: #F6CB60;
}

.alma-ruo-body {
  max-width: 1058px;
  font-size: 16px;
  line-height: 19.4px;
  color: var(--alma-fg-60);
}

/* Purity / route / form chip row (Figma 54:11806) */
.alma-product-info-row {
  display: flex;
  gap: 8px;
}

.alma-product-info-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 12px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
}

.alma-product-info-chip svg {
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  color: var(--alma-fg-60);
}

.alma-product-info-chip span {
  font-size: 16px;
  color: var(--alma-fg);
}

/* Lots & Certificates (Figma 54:13514) */
.alma-lots-subtitle {
  max-width: 627px;
  font-size: 16px;
  line-height: 19.4px;
  color: var(--alma-fg-50);
}

.alma-lots-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 24px 32px;
  border-radius: var(--alma-r-card);
  background: linear-gradient(180deg, #253748 0%, rgba(37, 55, 72, 0.44) 100%);
}

/* The card's own accent/gradient background makes the shared, more compact
   COA-library text sizes (14px/18px) read too small here - the Figma card
   for this specific context uses 18px for both label and value. */
.alma-lots-card .alma-cert-label,
.alma-lots-card .alma-cert-value {
  font-size: 18px;
  line-height: 21.8px;
}

.alma-lots-row--lot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--alma-hairline);
}

.alma-lots-lot {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Below 720px its row becomes a column with align-items: flex-start, which
     shrink-wraps this box to its content instead of stretching it - so a lot
     number wider than the card simply hung over the edge. max-width caps it at
     the card; min-width lets it shrink so the cap can do anything. */
  min-width: 0;
  max-width: 100%;
}

/* The lot number and its status badge. Wrapping is the whole point: on a phone
   "LOT-Bacteriostatic Water 30ml-400" is wider than the column, and without a
   wrap the badge was pushed past the right edge - measured, it ended 49px
   outside the viewport and took the whole page's horizontal scroll with it.
   min-width: 0 because a flex item refuses to shrink below its longest word
   unless told, which is what stopped the row fitting in the first place. */
.alma-lots-value-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.alma-lots-value-row .alma-cert-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.alma-lots-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: var(--alma-r-card);
  background: #34A853;
  color: #FFFFFF;
  font-size: 12px;
  line-height: normal;
  white-space: nowrap;
}

.alma-lots-badge svg {
  flex: 0 0 auto;
}

.alma-lots-badge--expiring {
  background: #DFC751;
}

.alma-lots-badge--expired {
  background: #F03F3F;
}

.alma-lots-icon {
  display: flex;
  flex: 0 0 auto;
  width: 22px;
  color: var(--alma-fg);
}

.alma-lots-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Narrower centered column (1118px, not the page's usual 1516px row) shared
   by the RUO callout and the article card below it (Figma 52:11368). */
.alma-product-article-col {
  max-width: 1118px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

/* Long-form product article (the_content()), boxed as its own card
   ("Background+Border", 54:13557) rather than flowing loose in the row.
   Figma sets this block in plain Inter rather than the site's Inter Tight,
   so it is loaded scoped to this class only. */
.alma-product-content {
  padding: 24px 30px;
  border-radius: var(--alma-r-card);
  background: #16181B;
}

.alma-product-content > * {
  margin-top: 24px;
}

.alma-product-content > *:first-child {
  margin-top: 0;
}

.alma-product-content p,
.alma-product-content li,
.alma-product-content td,
.alma-product-content th {
  font-family: 'Inter', var(--alma-font);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  color: var(--alma-fg-80);
}

.alma-product-content b,
.alma-product-content strong,
.alma-product-content th {
  font-weight: 700;
  color: var(--alma-fg);
}

.alma-product-content h2,
.alma-product-content h3 {
  font-family: var(--alma-font);
  font-size: 24px;
  line-height: 29px;
  font-weight: 500;
  color: var(--alma-fg);
}

.alma-product-content blockquote {
  padding-left: 24px;
  border-left: 2px solid var(--alma-hairline);
}

.alma-product-content ul,
.alma-product-content ol {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
}

.alma-product-content li {
  position: relative;
  padding-left: 24px;
}

.alma-product-content li::before {
  content: '➤';
  position: absolute;
  left: 0;
  color: var(--alma-fg-60);
}

/* Every one of the 17 product descriptions carries `style="height: 400px"` and
   `width="1274"` on its table, left there by whatever editor wrote them. The
   height is the damaging one: with the mobile rule making the table a block
   with `overflow: auto`, a fixed 400px turned it into a little scroll box that
   clipped its own last row - the page had a table inside it that scrolled
   vertically on its own.

   !important because it is fighting an inline style, which is the one thing a
   stylesheet cannot outrank any other way. The content itself is left alone:
   this is presentation the theme is entitled to override, and rewriting 17
   descriptions in the database to strip it would not survive the next edit in
   the same editor. */
.alma-product-content table {
  width: 100%;
  height: auto !important;
  border-collapse: collapse;
}

/* break-word, not anywhere. Both let a long string wrap, but `anywhere` also
   counts toward the column's min-content width, so the browser squeezed the
   first column until its headings broke mid-word - "Propert/y", "Compos/ition".
   `break-word` breaks only what genuinely cannot fit on a line of its own,
   which is all these tables need: the long values are chemical formulae, not
   prose. */
.alma-product-content td,
.alma-product-content th {
  overflow-wrap: break-word;
}

.alma-product-content th,
.alma-product-content td {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  text-align: left;
}

.alma-product-content th:first-child,
.alma-product-content td:first-child {
  width: 34%;
}

/* Footer RUO compliance strip, unique to the product page's footer. */
.alma-ruo-footer {
  padding: 0 var(--alma-gutter) 42px;
}

.alma-ruo-footer-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 42px;
  padding: 24px;
  border-radius: var(--alma-r-card);
  background: linear-gradient(180deg, rgba(246, 203, 96, 0.2) 0%, rgba(246, 203, 96, 0.02) 100%);
}

.alma-ruo-footer-row .alma-ruo {
  padding: 0;
  border: 0;
  background: none;
}

.alma-ruo-footer-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px;
}

.alma-ruo-footer-columns p {
  font-size: 14px;
  line-height: 21px;
  color: var(--alma-fg-60);
}

/* ==========================================================================
   19. CONTACT PAGE (Figma 54:14763)
   ========================================================================== */
.alma-contact-content {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.alma-contact-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.alma-contact-heading {
  font-size: 28px;
  line-height: 33.9px;
  font-weight: 500;
}

.alma-contact-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

.alma-contact-row {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 82px;
  padding: 24px;
  border-radius: var(--alma-r-card);
  background: rgba(255, 255, 255, 0.05);
}

.alma-contact-row img {
  flex: 0 0 auto;
}

.alma-contact-row span {
  font-size: 16px;
  line-height: 19.4px;
  font-weight: 500;
}

.alma-contact-row a:hover {
  text-decoration: underline;
}

.alma-contact-text {
  font-size: 16px;
  line-height: 24px;
  color: var(--alma-fg-60);
  white-space: pre-line;
}

/* ==========================================================================
   20. CART PAGE (Figma 34:6243)
   ========================================================================== */
.alma-cart-page {
  padding: 42px var(--alma-gutter) 64px;
}

.alma-cart-layout {
  display: grid;
  grid-template-columns: 913fr 561fr;
  align-items: start;
  gap: 42px;
}

.alma-cart-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alma-cart-item {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 164px;
  padding: 8px 24px;
  border-radius: 24px;
  background: var(--alma-surface);
}

.alma-cart-item-media {
  flex: 0 0 auto;
  width: 108px;
  height: 148px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--alma-surface);
}

.alma-cart-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.alma-cart-item-heading {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
}

.alma-cart-item-name {
  font-size: 24px;
  font-weight: 500;
  color: var(--alma-fg);
}

.alma-cart-item-weight {
  font-size: 14px;
  color: var(--alma-fg-50);
}

.alma-cart-item-qty {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 55px;
  padding: 0 16px;
  border-radius: var(--alma-r-btn);
  border: 1px solid var(--alma-fg);
}

.alma-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--alma-fg-60);
}

.alma-qty-btn:hover {
  color: var(--alma-fg);
}

.alma-cart-item-qty .quantity {
  display: flex;
}

.alma-cart-item-qty .qty {
  width: 28px;
  background: none;
  border: 0;
  text-align: center;
  font-size: 16px;
  color: var(--alma-fg);
  appearance: textfield;
  -moz-appearance: textfield;
}

.alma-cart-item-qty .qty::-webkit-outer-spin-button,
.alma-cart-item-qty .qty::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.alma-cart-item-price {
  flex: 0 0 auto;
  min-width: 90px;
  text-align: right;
  font-size: 24px;
  font-weight: 500;
}

.alma-cart-item-remove {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--alma-fg);
}

/* WooCommerce's own .woocommerce a.remove rule hard-codes --wc-red with
   !important; this needs to out-specificity it, not just out-load it. */
.alma-cart-list a.alma-cart-item-remove.remove {
  color: var(--alma-fg) !important;
}

.alma-cart-list a.alma-cart-item-remove.remove:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.alma-cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.alma-cart-coupon {
  display: flex;
  align-items: center;
  gap: 12px;
}

.alma-cart-coupon input {
  height: 51px;
  padding: 0 20px;
  border-radius: var(--alma-r-btn);
  background: rgba(255, 255, 255, 0.1);
  color: var(--alma-fg);
  font-size: 16px;
}

.alma-cart-coupon input::placeholder {
  color: var(--alma-fg-50);
}

.alma-totals-heading {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--alma-hairline);
  font-size: 28px;
  line-height: 33.9px;
  font-weight: 500;
}

.alma-totals-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--alma-hairline);
}

.alma-totals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
}

.alma-totals-row span:first-child {
  color: var(--alma-fg-60);
}

/* The shipping row's value is not a single figure like every other row in this
   block - it is a list: one rate, or a set of radios if the zone offers
   several, or a "no options available" sentence that runs to two lines. It
   right-aligns with the numbers above it, and the row aligns to the top so a
   wrapped message does not drag its own label down the card with it. */
.alma-totals-row--shipping {
  align-items: flex-start;
}

.alma-totals-shipping {
  min-width: 0;
  text-align: right;
}

.alma-shipping-methods {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Only reachable when a package really does offer more than one rate. With the
   current zone the free rate replaces the paid one rather than joining it (see
   alma_hide_paid_shipping_when_free in inc/shipping.php), so this is the shape
   a future second method would land in, not something on screen today. */
.alma-shipping-methods li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alma-shipping-methods input[type='radio'] {
  accent-color: #FFFFFF;
}

.alma-totals-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 500;
}

.alma-totals-checkout {
  width: 100%;
}

.alma-totals-checkout .checkout-button.button.alt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 51px;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF !important;
  color: #000000 !important;
  font-size: 16px;
  font-weight: 500;
}

.alma-totals-checkout .checkout-button.button.alt:hover {
  background: rgba(255, 255, 255, 0.9) !important;
}

.alma-totals-checkout .checkout-button.button.alt:active {
  background: rgba(255, 255, 255, 0.8) !important;
}

/* ==========================================================================
   21. WOOCOMMERCE NOTICES (site-wide - add-to-cart confirmations, cart/
   checkout/account errors and info messages)
   ========================================================================== */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
  padding: 16px 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
  border: 1px solid var(--alma-hairline);
  border-left: 3px solid #34A853;
  color: var(--alma-fg);
  font-size: 16px;
  list-style: none;
}

/* WooCommerce moves keyboard focus to this notice on cart/checkout actions
   (screen-reader announcement) - useful for a11y, but since visitors never
   click it themselves, the browser's default focus ring reads as a stray
   glitch rather than an intentional state. The focus move itself still
   reaches assistive tech without a visible ring. */
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-info:focus {
  outline: none;
}

.woocommerce-error {
  border-left-color: #F03F3F;
}

/* Same warm amber-gradient treatment as the RUO compliance badge
   (template-parts/ruo-badge.php) - no border, soft wash instead of a flat
   surface + accent bar. */
.woocommerce-info {
  border: none;
  background: linear-gradient(180deg, rgba(246, 203, 96, 0.2) 0%, rgba(246, 203, 96, 0.02) 100%);
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 12px 20px;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF !important;
  color: #000000 !important;
  font-size: 14px;
  font-weight: 500;
  order: 2;
}

.woocommerce-error ul,
.woocommerce-message ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* WooCommerce's own icon-font checkmark/glyph assumes the default 3.5em
   left padding it ships with; drop it rather than fight its positioning. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  content: none !important;
}

/* Checkout "Returning customer?" login form (WC core template, not
   overridden - see checkout/form-login.php) - unstyled by default, so it
   rendered as a plain white box. Matches the rest of the form field look. */
.woocommerce-form-login {
  margin: 0 0 24px;
  padding: 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
  border: 1px solid var(--alma-hairline);
}

.woocommerce-form-login .form-row {
  margin-bottom: 24px;
}

.woocommerce-form-login label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--alma-fg-60);
}

.woocommerce-form-login .input-text {
  width: 100%;
  min-height: 56px;
  padding: 16px 20px !important;
  border: 0;
  border-radius: var(--alma-r-nav) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--alma-fg) !important;
  font-family: inherit;
  font-size: 16px;
}

.woocommerce-form-login .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  color: var(--alma-fg-60);
  font-size: 14px;
}

.woocommerce-form-login input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  accent-color: #FFFFFF;
}

.woocommerce-form-login .woocommerce-form-login__submit {
  padding: 16px 24px;
  border: 0;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF !important;
  color: #000000 !important;
  font-size: 16px;
  font-weight: 500;
}

.woocommerce-form-login p.lost_password {
  margin: 16px 0 0;
}

.woocommerce-form-login p.lost_password a {
  color: var(--alma-fg-60);
  font-size: 14px;
}

.woocommerce-form-login p.lost_password a:hover {
  color: var(--alma-fg);
}

/* Generic WC "back to shop" / plain .button links outside the notices above
   (e.g. the empty-cart state) - match the site's white pill. */
.woocommerce a.button.wc-backward {
  display: inline-flex;
  align-items: center;
  padding: 16px 24px;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF !important;
  color: #000000 !important;
  font-size: 16px;
  font-weight: 500;
}

/* ==========================================================================
   22. CHECKOUT PAGE (Figma 42:7952)
   ========================================================================== */
.alma-checkout-layout {
  display: grid;
  grid-template-columns: 931fr 561fr;
  align-items: start;
  gap: 42px;
}

.alma-checkout-heading {
  margin-bottom: 24px;
  font-size: 28px;
  line-height: 33.9px;
  font-weight: 500;
}

/* Flatten WooCommerce's default float-based two-column billing/shipping
   split - the design shows everything in one column, and since shipping
   defaults to "same as billing" here, col-2 only ever holds the order-notes
   field anyway. */
.alma-checkout-details .col2-set {
  display: block;
}

.alma-checkout-details .col-1,
.alma-checkout-details .col-2 {
  width: 100% !important;
  float: none !important;
}

.alma-checkout-details .form-row {
  margin-bottom: 24px;
}

/* WooCommerce's own float-based two-up field pairing (.form-row-first/-last
   at 47% width) still wins over the grid below it otherwise - the grid
   itself already does the 2-up split, so each row just needs to fill its
   grid cell. */
.alma-checkout-details .form-row-first,
.alma-checkout-details .form-row-last {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}

.alma-checkout-details .woocommerce-billing-fields__field-wrapper,
.alma-checkout-details .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}

/* Only the first/last name pair reliably stays adjacent after WooCommerce's
   own locale script re-sorts the fields (see inc/checkout.php); every other
   field spans the full row so the layout holds regardless of that order. */
.alma-checkout-details .form-row:not(.form-row-first):not(.form-row-last) {
  grid-column: 1 / -1;
}

/* WooCommerce's own section headings ("Billing details", "Additional
   information") - the design supplies its own "Your data" instead.
   This also hides "Ship to a different address?", which core puts in an h3
   even though it carries a checkbox rather than a heading, so the checkout
   always ships to the billing address. That is deliberate and it costs
   nothing here: there is one zone at one flat rate, so a second address
   cannot change what is charged. Un-hiding it means styling a control the
   design has no frame for - decide that on purpose, not by deleting this
   rule. */
.alma-checkout-details h3 {
  display: none;
}

.alma-checkout-details label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--alma-fg-60);
}

.alma-checkout-details label .required {
  color: var(--alma-fg-60);
  text-decoration: none;
}

.alma-checkout-details .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

.alma-checkout-details .form-row .input-text,
.alma-checkout-details .form-row select,
.alma-checkout-details .form-row textarea {
  width: 100%;
  min-height: 67px;
  padding: 22px 24px !important;
  border: 0;
  border-radius: var(--alma-r-nav) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--alma-fg) !important;
  font-family: inherit;
  font-size: 16px;
}

.alma-checkout-details textarea {
  min-height: 104px;
  resize: vertical;
}

.alma-checkout-details ::placeholder {
  color: var(--alma-fg-50);
}

.alma-checkout-details .select2-container .select2-selection--single {
  height: 67px;
  padding: 22px 24px;
  border: 0;
  border-radius: var(--alma-r-nav);
  background: rgba(255, 255, 255, 0.1);
}

/* The account screens split off from the checkout rule above: Figma's
   account frames use the outlined pill their text inputs use, and select2
   draws its own box so it never inherits the .input-text rule. Height is
   the inputs' rendered 70px (67px min-height plus both borders) so the two
   line up inside a shared grid row. */
.alma-account-content .select2-container .select2-selection--single {
  height: 70px;
  padding: 24px 20px;
  border: 1px solid var(--alma-hairline);
  border-radius: var(--alma-r-btn);
  background: transparent;
}

.alma-checkout-details .select2-container .select2-selection__rendered,
.alma-account-content .select2-container .select2-selection__rendered {
  padding: 0;
  color: var(--alma-fg);
  line-height: 23px;
}

.alma-checkout-details .select2-container .select2-selection__arrow {
  height: 65px;
  right: 12px;
}

.alma-account-content .select2-container .select2-selection__arrow {
  height: 68px;
  right: 20px;
}

.alma-checkout-details .select2-dropdown,
.alma-account-content .select2-dropdown {
  border-radius: 12px;
  background: #14171C;
  color: var(--alma-fg);
  border: 1px solid var(--alma-hairline);
}

.alma-checkout-details .select2-results__option--highlighted,
.alma-account-content .select2-results__option--highlighted {
  background: rgba(255, 255, 255, 0.1) !important;
}

.woocommerce-additional-fields h3 {
  display: none;
}

/* Checkboxes (create account, ship to different address, terms) */
.alma-checkout-layout input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -4px;
  accent-color: #FFFFFF;
}

.woocommerce-form__label-for-checkbox {
  font-size: 14px;
  color: var(--alma-fg-60);
}

/* Order review (right column) - shares the Cart totals panel look. */
.alma-checkout-review .alma-totals-rows {
  margin-top: 0;
}

.alma-checkout-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.alma-checkout-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.alma-checkout-item-media {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--alma-surface);
}

.alma-checkout-item-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
}

.alma-checkout-item-qty {
  color: var(--alma-fg-50);
}

.alma-checkout-item-total {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 500;
}

.alma-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
  padding: 20px 0;
  border-top: 1px solid var(--alma-hairline);
  border-bottom: 1px solid var(--alma-hairline);
  list-style: none;
}

.alma-payment-empty {
  font-size: 14px;
  color: var(--alma-fg-50);
}

.alma-payment-methods .woocommerce-privacy-policy-text,
.alma-place-order .woocommerce-privacy-policy-text {
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--alma-fg-50);
}

.alma-place-order .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--alma-fg-50);
}

.alma-place-order-btn {
  width: 100%;
}

/* ==========================================================================
   23. ACCOUNT PAGES (Figma 75:4708 and siblings)
   ========================================================================== */
.alma-account-layout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Figma 75:4857 ("Menu bar"): the sidebar is a padded card whose own
   children - the user block and the nav list - are inset by 24px and
   separated by 24px. Without that padding the nav pills ran edge to edge. */
.alma-account-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 0 346px;
  width: 346px;
  padding: 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
  overflow: hidden;
}

/* Figma 75:4858 ("Name") is its own card nested in the sidebar's, at the
   same 0.05 white - the two stack to the slightly lighter panel in the
   design, so this is --alma-surface again rather than a new literal. */
.alma-account-user {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
}

.alma-account-user img {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.alma-account-user-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.alma-account-user-name {
  font-size: 18px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alma-account-user-email {
  font-size: 14px;
  color: var(--alma-fg-50);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* woocommerce-layout.css ships .woocommerce-MyAccount-navigation{float:left;
   width:30%}, which this element also carries - left alone it squeezed all
   five pills to 30% of the sidebar (104px) instead of filling it. */
.alma-account-sidebar .alma-account-nav {
  float: none;
  width: 100%;
}

.alma-account-nav ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.alma-account-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 36px;
  color: var(--alma-fg-60);
  font-size: 16px;
  white-space: nowrap;
}

.alma-account-nav svg {
  flex: 0 0 auto;
}

.alma-account-nav li.is-active a {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  color: var(--alma-fg);
}

.alma-account-nav li:hover a {
  color: var(--alma-fg);
}

.alma-account-content {
  float: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: 32px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
}

/* Figma 75:4895 - the screen heading sits inside this card, 24px above
   whatever the endpoint renders (75:4894 is a 24px-gap column). Kept as a
   margin rather than a flex gap on the card so the account forms' existing
   grid/margin flow is untouched. */
.alma-account-title {
  margin: 0 0 24px;
}

/* Account details / edit-address forms share the checkout field look. */
.alma-account-content .form-row {
  margin-bottom: 24px;
}

.alma-account-content .woocommerce-billing-fields__field-wrapper,
.alma-account-content form > .form-row-first,
.alma-account-content form > .form-row-last {
  display: grid;
}

.alma-account-content form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}

.alma-account-content .form-row-wide,
.alma-account-content .clear,
.alma-account-content > p,
.alma-account-content form > p,
.alma-account-content h2,
.alma-account-content h3 {
  grid-column: 1 / -1;
}

/* Sub-headings inside the card ("Password change" 75:4785, "Add new
   Address" on 103:16563) are the design's fonts/h6, not the 28px this
   used to render at. */
.alma-account-content h2,
.alma-account-content h3 {
  margin-bottom: 24px;
  font-size: 20px;
  line-height: normal;
  font-weight: 500;
}

/* The address form nests every field inside .woocommerce-address-fields,
   which landed in a single cell of the form's own 2-column grid - so the
   whole form was confined to the left half of the card. Promote it to the
   full width and let the field wrapper be the grid instead. */
.alma-account-content .woocommerce-address-fields {
  grid-column: 1 / -1;
}

.alma-account-content .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.alma-account-content .woocommerce-address-fields__field-wrapper > .form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.alma-account-content .woocommerce-address-fields__field-wrapper > .form-row label {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.alma-account-content .woocommerce-address-fields__field-wrapper > .form-row-wide {
  grid-column: 1 / -1;
}

/* The core "Password change" fields on edit-account.php come wrapped in a
   bare <fieldset><legend>, which otherwise renders with the browser's
   default box border - reset it and lay its 3 fields out in a row instead
   of letting them fall back to stacked block flow outside the form's own
   2-column grid. */
.alma-account-content fieldset {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Each password field is its own .form-row-wide, which the rule above
   stretches full-width by default - undo that just inside the fieldset so
   the 3-column grid set on it actually applies. */
.alma-account-content fieldset .form-row-wide {
  grid-column: auto;
}

/* WC's own labels here are long enough to wrap ("Current password (leave
   blank to leave unchanged)" goes to two lines below ~1500px, the next one
   below ~1450px) and they wrap at different widths, which pushed each
   column's input down by a different amount. Making the row a column flex
   and letting the label absorb the slack bottom-aligns all three inputs on
   one baseline regardless of how many lines any label takes. */
.alma-account-content fieldset .form-row {
  display: flex;
  flex-direction: column;
}

.alma-account-content fieldset .form-row label {
  flex: 1 1 auto;
}


.alma-account-content legend {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 24px;
  padding: 0;
  font-size: 28px;
  line-height: 33.9px;
  font-weight: 500;
  color: var(--alma-fg);
}

.alma-account-content label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--alma-fg-60);
}

.alma-account-content label .required {
  text-decoration: none;
}

/* Figma's shared input component (42:8244) is an outlined pill, not a
   filled box - same on Account Details (75:4779) and Add new Address
   (103:16563). Radius is --alma-r-btn per the sitewide pill convention,
   where the design says 36px. The !importants match the rest of this file:
   WC's own .woocommerce form .form-row .input-text is more specific. */
.alma-account-content .input-text,
.alma-account-content select,
.alma-account-content textarea {
  width: 100%;
  min-height: 67px;
  padding: 24px 20px !important;
  border: 1px solid var(--alma-hairline) !important;
  border-radius: var(--alma-r-btn) !important;
  background: transparent !important;
  color: var(--alma-fg) !important;
  font-family: inherit;
  font-size: 16px;
}

.alma-account-content .input-text::placeholder,
.alma-account-content textarea::placeholder {
  color: var(--alma-fg-40);
}

/* WC's own show/hide-password control is absolutely positioned off its
   0.7em insets, which sat low and hard against the pill's border once the
   field grew to the design's 67px height. Centre it on the 20px padding
   the field already uses, and keep the value clear of it. */
.alma-account-content .password-input {
  display: block;
  position: relative;
}

.alma-account-content .password-input .input-text {
  padding-right: 52px !important;
}

.alma-account-content .password-input .show-password-input {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: var(--alma-fg-40);
}

.alma-account-content span[id$='_description'] {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--alma-fg-50);
}

/* Account Details form - Figma 75:4779: a 42px-gap column holding one
   3-up field row and the password block (its own 24px-gap column of
   heading / 3-up row / button). */
.alma-account-content .alma-account-form {
  display: flex;
  flex-direction: column;
}

/* Explicit margins rather than one flex gap: the design uses 42px between
   the name row and the password block but 24px inside it, and a <legend>
   is not a flex item in Chrome, so a gap would never reach it anyway. */
.alma-account-form .alma-account-password {
  margin-top: 42px;
}

.alma-account-form .alma-form-actions {
  margin-top: 24px;
}

.alma-account-form .alma-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Two rules fight the grid and both have to be beaten by selector weight:
   woocommerce.css's .woocommerce form .form-row-first{width:47%} squeezed
   the first two cells, and this file's own .alma-account-content
   .form-row-wide{grid-column:1/-1} threw the third (Mail) onto its own
   row. Three classes outrank both. */
.alma-account-form .alma-form-grid > .form-row {
  grid-column: auto;
  float: none;
  width: 100%;
  /* woocommerce.css's .woocommerce form .form-row also adds 3px padding and
     a 6px bottom margin, neither of which exists in the design's 24px grid. */
  margin: 0;
  padding: 0;
}

.alma-account-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Letting the label take the slack keeps every input in a row on one
   baseline when only some of the labels wrap. */
.alma-account-form .form-row label {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.alma-account-form .alma-account-password {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.alma-account-form .alma-account-password legend {
  margin-bottom: 24px;
  font-size: 20px;
  line-height: normal;
}

/* Figma 75:4790 (and the Save button on 103:16563) is a 16px-padded pill,
   giving the 156x51 box in the design - not the 24px horizontal padding
   used elsewhere. */
.alma-account-content button[type='submit'] {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 16px;
  line-height: normal;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF !important;
  color: #000000 !important;
  font-size: 16px;
  font-weight: 500;
}

/* My Orders (myaccount/orders.php) - Figma 75:4825. The "My Orders" h1
   itself is the shared account-page title emitted by
   myaccount/my-account.php (.alma-h2, already 52px matching this design's
   h2 token) - not duplicated here. */
.alma-orders-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.alma-order-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--alma-r-btn);
  backdrop-filter: blur(14.75px);
  -webkit-backdrop-filter: blur(14.75px);
  color: var(--alma-fg);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.alma-order-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.alma-order-row-thumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 45px;
}

.alma-order-row-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
}

.alma-order-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}

.alma-order-row-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: var(--alma-r-btn);
  font-size: 14px;
  white-space: nowrap;
}

.alma-order-row-status img {
  width: 15px;
  height: 15px;
}

.alma-order-row-status.is-processing {
  background: rgba(223, 199, 81, 0.12);
  color: #DFC751;
}

.alma-order-row-status.is-delivered {
  background: rgba(52, 168, 83, 0.12);
  color: #34A853;
}

.alma-order-row-status.is-cancelled {
  background: rgba(240, 63, 63, 0.12);
  color: #F03F3F;
}

.alma-order-row-qty {
  flex: 0 0 auto;
  width: 101px;
  text-align: right;
  font-size: 18px;
}

.alma-order-row-total {
  flex: 0 0 auto;
  width: 150px;
  text-align: right;
  font-size: 18px;
}

.alma-orders-pagination {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.alma-orders-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  padding: 77px 0;
}

.alma-orders-empty-text {
  font-size: 28px;
  color: var(--alma-fg-40);
}

/* Address cards (myaccount/my-address.php) */
.woocommerce-Addresses.col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* WooCommerce's classic clearfix (.col2-set::before/::after{content:"
   ";display:table}) is meant for the old float layout below - inside a grid
   container those pseudo-elements become real grid items instead of being
   ignored, and knock the two real cards into a diagonal row1/col2 +
   row2/col1 arrangement. Grid doesn't need a clearfix, so drop them. */
.woocommerce-Addresses.col2-set::before,
.woocommerce-Addresses.col2-set::after {
  display: none;
}

.woocommerce-Address {
  float: none;
  width: auto !important;
  padding: 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
}

.woocommerce-Address-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.woocommerce-Address-title h2 {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 20px;
  font-weight: 500;
}

/* Neutral inner panel - the Downloads empty state (Figma 75:4956) and any
   other "message on the left, action pill on the right" row inside an
   account card. Deliberately not the amber .woocommerce-info treatment,
   which is reserved for real notices. */
.alma-account-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
}

.alma-account-panel-text {
  margin: 0;
  color: var(--alma-fg-60);
}

.woocommerce-Address-title .edit,
.woocommerce-Address .edit {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  white-space: nowrap;
  padding: 12px 20px;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF;
  color: #000000;
  font-size: 14px;
  font-weight: 500;
}

.woocommerce-Address address {
  font-style: normal;
  color: var(--alma-fg-50);
  line-height: 1.6;
}

/* Orders table */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-orders-table__header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--alma-hairline);
  text-align: left;
  font-size: 14px;
  color: var(--alma-fg-50);
  font-weight: 500;
}

.woocommerce-orders-table__cell {
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--alma-hairline);
  font-size: 15px;
}

.woocommerce-orders-table__cell a {
  text-decoration: underline;
}

.woocommerce-orders-table__cell-order-actions {
  text-align: right;
}

.woocommerce-orders-table__cell-order-actions .button {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--alma-r-btn);
  background: rgba(255, 255, 255, 0.1);
  color: var(--alma-fg);
  font-size: 14px;
  margin-left: 8px;
}

/* Empty orders / downloads states */
.woocommerce-MyAccount-content > p:only-child,
.woocommerce-notice {
  color: var(--alma-fg-50);
}

/* Downloads table */
.woocommerce-MyAccount-downloads-table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-MyAccount-downloads-table th,
.woocommerce-MyAccount-downloads-table td {
  padding: 16px;
  border-bottom: 1px solid var(--alma-hairline);
  text-align: left;
  font-size: 15px;
}

/* Log In / Registration card - Figma 101:13788 ("Вхід в кабинет"), rendered
   by the Premium Auth & Leads plugin's [pal_auth_form] shortcode. Its PHP/JS
   are untouched; this reskins its own stable .pal-* classes, which its
   frontend.css already marks as "all colors driven by CSS variables" but
   several are hard-coded with !important, so most rules here need to match
   that. The plugin's own card has no image slot, so the left-hand product
   photo is a pseudo-element rather than a real element. */
.alma-auth {
  padding: 42px var(--alma-gutter) 64px;
}

/* Figma 101:13788/100:13653: both tabs render at the same fixed card size
   (443px tall) because Registration pairs its 4 fields into 2 rows instead
   of stacking them - matched above. display:flex + justify-content:center
   on the card vertically centers whichever form is visible (its own direct
   children: .pal-tabs, .pal-auth-message, both .pal-form) within a hard
   fixed height - a min-height measured to match content px-for-px still
   left the card free to grow past it the moment real-browser font
   rendering (vs. the dev measurement) came out even slightly taller, and
   the two tabs' content is a few px apart to begin with (login keeps its
   "Remember me" row that register doesn't have), so it needs real
   headroom, not a hairline margin. justify-content is flex-start, not
   center: centering the group made the tab bar itself (and everything
   below it) slide up or down by however much the two forms differ in
   height - flex-start pins the tab bar and every field at the same
   position in both tabs, and only the leftover space at the very bottom
   (below the button) differs. */
/* The plugin drops .pal-auth-wrap straight into <main> with no padding of
   its own, so the card sat flush against both screen edges once it was wide
   enough to fill them. */
.pal-auth-wrap {
  padding-inline: var(--alma-gutter);
}

.pal-auth-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 964px !important;
  height: 486px;
  margin-inline: auto;
  padding: 32px 32px 32px 516px !important;
  border-radius: var(--alma-r-card) !important;
  background: #080A0D !important;
  box-shadow: none !important;
  color: var(--alma-fg) !important;
}

/* Figma's product photo is landscape (502.5x379, ~4:3), fixed width/height.
   Pinned from the same top offset as the card's own padding - not
   vertically centered on the card - so it lines up with the tab bar and
   fields above, which are also top-aligned (flex-start above) rather than
   centered as a group. */
.pal-auth-card::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 32px;
  width: 460px;
  height: 346px;
  border-radius: var(--alma-r-card);
  background-image: url('../images/b656efc51d95ce0d8aa0614663439873c562c63f.png');
  background-image: image-set(url('../images/b656efc51d95ce0d8aa0614663439873c562c63f.webp') type('image/webp'), url('../images/b656efc51d95ce0d8aa0614663439873c562c63f.png') type('image/png'));
  background-size: cover;
  background-position: center;
}

/* Figma 101:13814: an outlined bar (no fill) - the active tab carries its
   own fill instead, the inactive tab just its own border + dimmed text. */
.pal-tabs {
  display: flex !important;
  width: 100% !important;
  gap: 4px;
  margin-bottom: 32px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--alma-r-btn) !important;
  background: none !important;
}

.pal-tab-indicator {
  display: none !important;
}

.pal-tab {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 0 0 !important;
  padding: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--alma-r-btn) !important;
  color: var(--alma-fg) !important;
  opacity: 0.3;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.pal-tab.is-active {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

/* Figma 101:13790 goes straight from the tab bar into the fields - no
   heading. The plugin's own PHP/JS stay untouched (see file banner above),
   so this hides the title rather than removing it from the template. */
.pal-form-title {
  display: none;
}

.pal-field {
  margin-bottom: 16px;
  gap: 8px !important;
}

.pal-label {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--alma-fg-60) !important;
}

/* Figma inputs are outlined, not filled - a 1px border on transparent,
   not a translucent-white fill. */
.pal-field input[type='text'],
.pal-field input[type='email'],
.pal-field input[type='password'] {
  height: 67px;
  padding: 0 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 36px !important;
  background: none !important;
  color: var(--alma-fg) !important;
  font-family: inherit;
  font-size: 16px;
}

.pal-field input::placeholder {
  color: var(--alma-fg-50);
}

.pal-field input:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

/* The plugin's own template is a bare 👁 emoji character, which WordPress
   auto-converts into an <img class="emoji"> (twemoji) - swapped here for a
   line icon matching the rest of the site, and repositioned relative to
   the *input*'s bottom edge (the field also has a label above it, so a
   simple top:Npx guess drifts as soon as font sizes change). */
.pal-field-password .pal-toggle-pass {
  top: auto;
  bottom: 24px;
  right: 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  opacity: 0.6;
  /* The plugin's markup is <button class="pal-toggle-pass">👁</button> - a
     literal emoji as the button's text - and the icon below is drawn on
     ::before, so the field showed two eyes. The img rule beneath this only
     covers the case where WordPress's emoji script swaps the character for an
     <img>, which it does not do in a browser that renders emoji natively.
     font-size:0 removes the glyph itself; ::before is a block with explicit
     pixel dimensions and is unaffected, and the button keeps its aria-label,
     so nothing is lost to a screen reader. */
  font-size: 0;
  line-height: 0;
}

.pal-field-password .pal-toggle-pass img {
  display: none !important;
}

.pal-field-password .pal-toggle-pass::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.pal-checkbox {
  color: var(--alma-fg-60) !important;
}

.pal-btn {
  width: auto !important;
  min-width: 130px;
  padding: 16px 24px !important;
  border-radius: var(--alma-r-btn) !important;
  font-weight: 500 !important;
}

.pal-btn-primary {
  background: #FFFFFF !important;
  color: #000000 !important;
  box-shadow: none !important;
}

.pal-btn-primary:hover {
  background: #FFFFFF !important;
  opacity: 0.85;
  transform: none !important;
}

.pal-auth-message.is-error {
  background: rgba(240, 63, 63, 0.12) !important;
  color: #F03F3F !important;
}

.pal-auth-message.is-success {
  background: rgba(52, 168, 83, 0.12) !important;
  color: #34A853 !important;
}

/* Figma 100:13746 pairs the register form's 4 fields into a 2-column grid
   (Full Name+Email, Password+Confirm) instead of stacking them, which is
   also what keeps the card the same height as the login tab (2 stacked
   fields = 2 grid rows either way) - without this the register tab was
   taller, stretching the ::before product photo into a different crop
   every time the tab switched. Login's 2 fields stay in normal flow (full
   width, stacked), matching the design there. */
.pal-form[data-pal-form='register'].is-active {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

.pal-form[data-pal-form='register'] .pal-form-title,
.pal-form[data-pal-form='register'] .pal-btn {
  grid-column: 1 / -1;
}

/* Figma 100:13653: "Create Account" is a small pill sized to its own text,
   same treatment as "Log In" (101:13803) - not a bar filling the row. A
   grid item that spans columns stretches to fill them by default, which is
   what was making this one full-width while the login tab's stayed small. */
.pal-form[data-pal-form='register'] .pal-btn {
  justify-self: start;
}

/* The plugin's base .pal-form has its own flex gap:16px, which stacked on
   top of .pal-field's own margin-bottom:16px below gave login double the
   spacing (32px) between fields that register has (16px, since register's
   grid gap is set to 0 above and only the field margin applies) - zero it
   here too so both forms use the same single 16px rhythm. */
.pal-form[data-pal-form='login'] {
  position: relative;
  gap: 0;
}

/* Figma 101:13797 has no "Remember me" row - with it gone, the login and
   register forms end up the same height, which is what keeps the card
   (and the fixed-size image next to it) from resizing when the tab
   switches. Plugin PHP/JS untouched; this only hides the field. */
.pal-form[data-pal-form='login'] .pal-checkbox {
  display: none;
}

.pal-form .pal-btn {
  align-self: flex-start;
}

.alma-account-content input[type='checkbox'],
.alma-auth-panel input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -4px;
  accent-color: #FFFFFF;
}

/* Lead-capture popup (Premium Auth & Leads plugin's [pal_popup] - templates/
   popup.php, .pal-popup-* classes). No Figma frame exists for this, it's a
   plugin feature discovered via its admin settings rather than the design;
   reskinned to the same dark-card language as the .pal-auth-card above
   (own PHP/JS untouched) instead of its default light/blue defaults. */
.pal-popup-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

.pal-popup-card {
  max-width: 420px !important;
  background: #080A0D !important;
  border-radius: var(--alma-r-card) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
}

.pal-popup-close {
  background: rgba(255, 255, 255, 0.1) !important;
}

.pal-popup-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.pal-popup-top {
  background: none !important;
  padding: 32px 32px 0 !important;
}

.pal-popup-logo-fallback {
  max-width: none !important;
  color: var(--alma-fg) !important;
  font-size: 16px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

.pal-popup-topbar-text {
  color: var(--alma-fg-50) !important;
}

.pal-popup-body {
  padding: 24px 32px 32px !important;
}

.pal-popup-title {
  color: var(--alma-fg) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

.pal-popup-subtitle {
  color: var(--alma-fg-60) !important;
}

.pal-popup-input {
  height: 51px;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: var(--alma-r-nav) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--alma-fg) !important;
  font-family: inherit;
}

.pal-popup-input::placeholder {
  color: var(--alma-fg-50) !important;
}

.pal-popup-input:focus {
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

.pal-popup-btn {
  width: 100% !important;
}

/* The plugin's own frontend.css sets `.pal-popup-form{display:flex}` with
   no [hidden] carve-out, which beats the UA [hidden]{display:none} rule (an
   author rule always wins over UA styles, regardless of specificity) - so
   frontend.js's `form.hidden = true` on successful subscribe silently fails
   and the input + spent submit button stay on screen next to the success
   message. Pre-existing in the plugin, not something this reskin touched;
   fixing it here since it's a CSS-only, in-scope correction. */
.pal-popup-form[hidden] {
  display: none !important;
}

.pal-popup-disclaimer {
  color: var(--alma-fg-40) !important;
}

.pal-popup-success {
  background: rgba(52, 168, 83, 0.12) !important;
  border-color: transparent !important;
  color: #34A853 !important;
  border-radius: var(--alma-r-nav) !important;
}

.pal-popup-success strong {
  background: rgba(52, 168, 83, 0.18) !important;
}

/* ==========================================================================
   24. ORDER CONFIRMATION (Figma 43:8453 "Order Successful!" / 44:8808
   "Order Failed" - found on a second pass; both were misfiled under the
   generic frame name "Main" inside the Checkout group, which is why the
   first build missed them and improvised this section from scratch) +
   ORDER DETAILS TABLE (woocommerce/order/order-details*.php, order/
   order-details-customer.php - these render on the My Account "View
   order" endpoint via a WC core hook, not a theme template, so still
   styled here even though thankyou.php no longer triggers that hook)
   ========================================================================== */
.alma-order-confirm-wrap {
  position: relative;
  /* Tucks up behind the header so the glow starts at the top of the page,
     then pads its own content back down past it. */
  margin-top: calc(var(--alma-header-h) * -1);
  padding: var(--alma-header-h) var(--alma-gutter) 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(52, 168, 83, 0.2) 0%, rgba(52, 168, 83, 0) 68%);
}

.alma-order-confirm-wrap--failed {
  background: linear-gradient(180deg, rgba(234, 67, 53, 0.2) 0%, rgba(234, 67, 53, 0) 68%);
}

.alma-order-confirm {
  position: relative;
  width: 538px;
  max-width: 100%;
  margin-inline: auto;
  padding: 72px 0;
  text-align: center;
}

.alma-order-confirm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 93px;
  height: 93px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(52, 168, 83, 0.22);
}

.alma-order-confirm-wrap--failed .alma-order-confirm-icon {
  background: rgba(234, 67, 53, 0.22);
}

.alma-order-confirm .alma-h3 {
  margin-bottom: 24px;
}

.alma-order-confirm-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
  font-size: 16px;
}

.alma-order-confirm-meta > span {
  color: var(--alma-fg-50);
}

.alma-order-confirm-meta > strong {
  font-weight: 500;
}

.alma-order-confirm-lead {
  margin-bottom: 24px;
  color: var(--alma-fg-50);
  font-size: 18px;
  line-height: 1.5;
}

.alma-order-confirm-items {
  padding: 12px 12px 24px;
  margin-bottom: 24px;
  border-radius: var(--alma-r-card);
  background: rgba(255, 255, 255, 0.05);
}

.alma-order-confirm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--alma-r-btn);
  backdrop-filter: blur(14.75px);
  -webkit-backdrop-filter: blur(14.75px);
}

.alma-order-confirm-item + .alma-order-confirm-item {
  margin-top: 8px;
}

.alma-order-confirm-item-media {
  flex: 0 0 auto;
  width: 37px;
  height: 45px;
  border-radius: 6px;
  object-fit: cover;
}

.alma-order-confirm-item-name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 14px;
}

.alma-order-confirm-item-qty {
  flex: 0 0 auto;
  font-size: 18px;
}

.alma-order-confirm-item-total {
  flex: 0 0 auto;
  width: 91px;
  text-align: right;
  font-size: 18px;
}

/* Sits between the items and the paid total, in the item rows' own gutter, at
   the weight of the item lines rather than the total's 28px - it is part of
   the arithmetic, not the answer to it. */
.alma-order-confirm-shipping {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  font-size: 16px;
}

.alma-order-confirm-shipping span:first-child {
  color: var(--alma-fg-60);
}

.alma-order-confirm-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 28px;
  font-weight: 500;
}

.alma-order-confirm-total span:first-child {
  color: rgba(255, 255, 255, 0.3);
}

.alma-order-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alma-order-confirm-actions .alma-btn {
  width: 100%;
}

.woocommerce-order-details {
  max-width: 640px;
  margin: 0 auto 42px;
  text-align: left;
}

.alma-account-content .woocommerce-order-details {
  max-width: none;
  margin: 0 0 42px;
}

/* Single order view (myaccount/view-order.php). No Figma frame exists for
   this screen, so it is assembled from the design's own established parts -
   My Orders' status pill and item rows, the confirmation card's totals. */
.alma-order-view {
  display: flex;
  flex-direction: column;
}

.alma-order-view h2 {
  margin: 32px 0 16px;
}

.alma-order-view h2:first-child {
  margin-top: 0;
}

.alma-order-view-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
}

.alma-order-view-meta-item {
  color: var(--alma-fg-60);
  font-size: 14px;
}

.alma-order-view-meta-total {
  margin-left: auto;
  font-size: 18px;
  font-weight: 500;
}

/* Same pill as an order row in the list, minus the link affordances. */
.alma-order-row--static {
  cursor: default;
}

.alma-order-row--static:hover {
  background: transparent;
}

.alma-order-row-meta {
  display: block;
  margin-top: 2px;
  color: var(--alma-fg-50);
  font-size: 13px;
  font-weight: 400;
}

.alma-order-row-meta p {
  margin: 0;
}

.alma-order-view-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 24px 0 0;
}

.alma-order-view-totals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.alma-order-view-totals-row dt {
  color: var(--alma-fg-60);
  font-size: 14px;
}

.alma-order-view-totals-row dd {
  margin: 0;
  font-size: 14px;
}

.alma-order-view-totals-row.is-grand {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--alma-hairline);
}

.alma-order-view-totals-row.is-grand dt,
.alma-order-view-totals-row.is-grand dd {
  font-size: 18px;
  font-weight: 500;
  color: var(--alma-fg);
}

.alma-order-view-addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.alma-order-view-address {
  padding: 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
}

.alma-order-view-address h3 {
  margin-bottom: 12px;
}

.alma-order-view-address address,
.alma-order-view-address-line {
  display: block;
  font-style: normal;
  color: var(--alma-fg-50);
  line-height: 1.6;
}

.alma-order-view-notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alma-order-view-notes li {
  padding: 16px 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
}

.alma-order-view-note-date {
  display: block;
  margin-bottom: 4px;
  color: var(--alma-fg-50);
  font-size: 13px;
}

.alma-order-view-notes p {
  margin: 0;
}

/* view-order is the one account screen with no Figma frame, so it follows
   the theme's own language rather than a design: WC ships "Order again" as
   its default grey 3px-radius button, which was the only piece here still
   rendering as raw plugin chrome. */
.alma-account-content .order-again {
  margin: 24px 0 0;
}

.alma-account-content .order-again .button {
  display: inline-flex;
  align-items: center;
  padding: 16px;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF !important;
  color: #000000 !important;
  font-size: 16px;
  line-height: 19.4px;
}

.woocommerce-order-details__title {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 500;
}

/* The "Order #x was placed on..." status line on My Account > View order
   (woocommerce/myaccount/view-order.php - a bare <p>, no WC class of its
   own) sits directly above this section with no other spacing. */
.alma-account-content > p {
  margin-bottom: 32px;
  color: var(--alma-fg-60);
  font-size: 16px;
}

.alma-account-content > p mark {
  background: none;
  color: var(--alma-fg);
  font-weight: 500;
}

.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-table--order-details thead th {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--alma-hairline);
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--alma-fg-50);
}

.woocommerce-table--order-details thead th.product-total {
  text-align: right;
}

.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details tfoot th {
  padding: 16px 0;
  border-bottom: 1px solid var(--alma-hairline);
  font-size: 15px;
}

.woocommerce-table--order-details tbody .product-total,
.woocommerce-table--order-details tfoot td {
  text-align: right;
}

.woocommerce-table--order-details tfoot th {
  color: var(--alma-fg-60);
  font-weight: 400;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--alma-fg);
}

.woocommerce-table--order-details .order-actions-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--alma-r-btn);
  background: rgba(255, 255, 255, 0.1);
  color: var(--alma-fg);
  font-size: 14px;
  margin-left: 8px;
}

.woocommerce-customer-details {
  max-width: 640px;
  margin-inline: auto;
}

.alma-account-content .woocommerce-customer-details {
  max-width: none;
}

.woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.woocommerce-customer-details > .woocommerce-column__title,
.woocommerce-column__title {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 500;
}

.woocommerce-customer-details address {
  padding: 24px;
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
  font-style: normal;
  color: var(--alma-fg-50);
  line-height: 1.6;
}

@media (max-width: 780px) {
  .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   16. GENERIC PAGES
   ========================================================================== */
.alma-page-container {
  max-width: calc(var(--alma-canvas) - var(--alma-gutter) * 2);
  margin-inline: auto;
  padding: 160px var(--alma-gutter) 115px;
}

.alma-page-title,
.alma-shop-title {
  margin-bottom: 24px;
  font-size: 52px;
  line-height: 62.9px;
}

/* Reset link added under the auth card's Log In button by main.js - the
   plugin's own template has no way through to a password reset. */
.pal-lost-pass {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  text-align: center;
  color: var(--alma-fg-60);
}

.pal-lost-pass:hover {
  color: var(--alma-fg);
}

/* The centred form panel. No Figma frame exists for any of the screens that
   use it - see the note in each template - so it borrows the auth card's
   shape: one centred panel on the page surface, the account area's outlined
   pill field, the sitewide white pill button.

   Shared by password reset (myaccount/form-lost-password.php and
   form-reset-password.php) and order tracking (order/form-tracking.php),
   which is why every rule below carries both class names. Keep them in
   step. */
.alma-reset-page .alma-row,
.alma-track-page .alma-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alma-reset-card,
.alma-track-card {
  width: 100%;
  max-width: 480px;
  padding: 42px;
  border: 1px solid var(--alma-hairline);
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
  text-align: left;
}

.alma-reset-title {
  margin-bottom: 12px;
}

.alma-reset-lead {
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--alma-fg-60);
}

.alma-reset-card .alma-reset-row ,
.alma-track-card .alma-reset-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  width: 100%;
}

.alma-reset-card label ,
.alma-track-card label {
  font-size: 14px;
  color: var(--alma-fg-60);
}

.alma-reset-card label .required ,
.alma-track-card label .required {
  text-decoration: none;
}

/* Same outlined pill as the account area (Figma's shared 42:8244 input).
   The !importants are for the same reason they are there: WC's own
   .woocommerce form .form-row .input-text carries more weight. */
.alma-reset-card .input-text ,
.alma-track-card .input-text {
  width: 100%;
  min-height: 67px;
  padding: 24px 20px !important;
  border: 1px solid var(--alma-hairline) !important;
  border-radius: var(--alma-r-btn) !important;
  background: transparent !important;
  color: var(--alma-fg) !important;
  font-family: inherit;
  font-size: 16px;
}

/* WC attaches its show/hide-password control to the password fields; it is
   positioned off 0.7em insets that sit low against a 67px pill. */
.alma-reset-card .password-input ,
.alma-track-card .password-input {
  display: block;
  position: relative;
}

.alma-reset-card .password-input .input-text ,
.alma-track-card .password-input .input-text {
  padding-right: 52px !important;
}

.alma-reset-card .password-input .show-password-input ,
.alma-track-card .password-input .show-password-input {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: var(--alma-fg-40);
}

.alma-reset-card .alma-reset-actions ,
.alma-track-card .alma-reset-actions {
  margin: 0;
  padding: 0;
}

/* WC's own .woocommerce button.button sets a light grey (#ebe9eb) off two
   classes plus a type selector, which outranks .alma-btn's white on its
   own - hence repeating the colours at this weight rather than there. */
.alma-reset-card .alma-reset-actions .alma-btn ,
.alma-track-card .alma-reset-actions .alma-btn {
  width: 100%;
  border: 0;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF;
  color: #000000;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}

.alma-reset-card .alma-reset-actions .alma-btn:hover ,
.alma-track-card .alma-reset-actions .alma-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #000000;
}

.alma-reset-back {
  display: inline-block;
  margin-top: 24px;
  font-size: 14px;
  color: var(--alma-fg-60);
}

.alma-reset-back:hover {
  color: var(--alma-fg);
}

@media (max-width: 600px) {
  .alma-reset-card {
    padding: 24px;
  }
}


/* Policy pages - Privacy Policy, Terms of Service, Research Use Only Policy.
   No Figma frame exists for any of them; inc/legal.php reads a document
   structure out of Elementor's flat fallback markup and page.php lays it out
   as header / contents / prose. Everything below is house style built from
   the design's own tokens rather than a frame. */
.alma-page-header {
  max-width: 860px;
  margin-bottom: 64px;
}

.alma-page-meta {
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
  padding: 8px 16px;
  border: 1px solid var(--alma-hairline);
  border-radius: var(--alma-r-btn);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--alma-fg-50);
  text-transform: uppercase;
}

.alma-page-lead {
  margin-top: 32px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--alma-fg-60);
  text-wrap: pretty;
}

/* The article itself is the grid: the header and the prose stack down the
   left column, and the contents card takes the right one alongside *both* of
   them. Putting the card in a wrapper below the header - which is what this
   did first - started it level with the first section heading, so on a page
   with a title, a date and a standfirst above it the card floated a long way
   down a column that was empty above it. Spanning from the top is also what
   lets it be sticky over the whole article rather than only the prose. */
.alma-page-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  column-gap: 64px;
  align-items: start;
}

.alma-page-header {
  grid-column: 1;
  grid-row: 1;
}

.alma-page-toc {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: sticky;
  top: 42px;
  padding: 24px;
  border: 1px solid var(--alma-hairline);
  border-radius: var(--alma-r-card);
  background: var(--alma-surface);
}

.alma-page-toc-title {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--alma-fg-40);
  text-transform: uppercase;
}

.alma-page-toc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  counter-reset: alma-toc;
}

.alma-page-toc-list a {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--alma-fg-60);
  transition: color 0.15s ease;
}

.alma-page-toc-list a:hover {
  color: var(--alma-fg);
}

/* The global reset zeroes every margin and strips list markers, so the prose
   needs its rhythm and its lists given back to it. */
.alma-page-body {
  grid-column: 1;
  grid-row: 2;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--alma-fg-60);
}

.alma-page-body > * + * {
  margin-top: 20px;
}

/* Sections get room above them and a hairline to separate them - the
   documents run to six of these and read as a wall without it. scroll-margin
   keeps a heading clear of the header once the contents list jumps to it. */
.alma-page-body h2,
.alma-page-body h3,
.alma-page-body h4 {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--alma-hairline);
  font-size: 22px;
  line-height: 1.35;
  color: var(--alma-fg);
  scroll-margin-top: 42px;
}

.alma-page-body > *:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* The heading's own paragraph follows it immediately - it is the sentence the
   bold run was introducing - so it keeps the tighter of the two gaps. */
.alma-page-body h2 + p,
.alma-page-body h3 + p,
.alma-page-body h4 + p {
  margin-top: 16px;
}

/* Elementor's fallback markup carries its section headings as a lone <b> in
   its own paragraph rather than a real heading, so those have to read as
   headings on weight and colour alone. */
.alma-page-body b,
.alma-page-body strong {
  font-weight: 600;
  color: var(--alma-fg);
}

.alma-page-body ul,
.alma-page-body ol {
  padding-left: 24px;
  list-style: disc;
}

.alma-page-body ol {
  list-style: decimal;
}

.alma-page-body li + li {
  margin-top: 12px;
}

/* Each <li> wraps its text in a <p> in that same fallback markup. */
.alma-page-body li > p {
  margin: 0;
}

.alma-page-body li::marker {
  color: var(--alma-fg-40);
}

.alma-page-body a {
  color: var(--alma-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alma-page-body a:hover {
  color: var(--alma-fg-60);
}

@media (max-width: 1100px) {
  /* Below this the prose has no room beside a column of its own, and a
     sticky aside on a phone is just a block that never scrolls away. */
  .alma-page-article {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, everything simply follows source order. */
  .alma-page-toc {
    grid-column: 1;
    grid-row: 2;
    position: static;
    margin-bottom: 42px;
  }

  .alma-page-body {
    grid-row: 3;
  }

  .alma-page-header {
    margin-bottom: 42px;
  }

  .alma-page-lead {
    font-size: 18px;
  }

  /* 160px of empty space above the title is a desktop measurement; on a
     phone it is most of the first screen. Scoped to this container rather
     than shared with .alma-shop-container, which is verified against the
     design and not part of this pass. */
  .alma-page-container {
    padding-top: 64px;
  }
}

.alma-shop-container {
  max-width: calc(var(--alma-canvas) - var(--alma-gutter) * 2);
  margin-inline: auto;
  padding: 160px var(--alma-gutter) 115px;
}

.alma-shop-subtitle {
  max-width: 584px;
  margin-bottom: 42px;
  font-size: 16px;
  line-height: 24px;
  color: var(--alma-fg-50);
}

ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* ==========================================================================
   17. AGE GATE (AgeSync overlay)
   ========================================================================== */
/*
 * The consent gate is the first thing every visitor sees, and it shipped in the
 * plugin's demo purple. Restyled from here rather than in the plugin: its own
 * stylesheet and its inline colour block are both printed before main.css, so
 * matching their ID specificity from here is enough to win, and nothing in
 * wp-content/plugins is touched.
 *
 * The copy, the colour options and the notification settings live in the
 * database - see migration/05-age-gate.php.
 */
#agesync-overlay {
  padding: 24px;
  background: rgba(8, 10, 13, 0.88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-family: var(--alma-font);
}

#agesync-overlay .agesync-card {
  max-width: 520px;
  padding: 40px 40px 32px;
  border: 1px solid var(--alma-hairline);
  border-radius: var(--alma-r-card);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}

/* The plugin's 6px gradient bar, reduced to the hairline the rest of the site
   uses - tinted with the amber that marks "research use only" elsewhere. */
#agesync-overlay .agesync-card::before {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(246, 203, 96, 0.55) 50%, transparent 100%);
}

#agesync-overlay .agesync-brand {
  margin-bottom: 20px;
}

/* Undo the gradient-clipped text: it renders as transparent-on-dark here. */
#agesync-overlay .agesync-brand-name {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--alma-fg-60);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

#agesync-overlay .agesync-heading {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--alma-fg);
}

#agesync-overlay .agesync-desc {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 22px;
  color: var(--alma-fg-60);
}

#agesync-overlay .agesync-checkbox-row {
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--alma-hairline);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#agesync-overlay .agesync-checkbox-row:hover {
  background: rgba(255, 255, 255, 0.07);
}

#agesync-overlay .agesync-checkbox-row:has(input:checked) {
  border-color: rgba(255, 255, 255, 0.35);
}

#agesync-overlay .agesync-checkbox-row--age {
  font-weight: 400;
}

#agesync-overlay .agesync-checkbox-tick {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: transparent;
}

#agesync-overlay input[type="checkbox"]:checked + .agesync-checkbox-tick {
  background: #FFFFFF;
  border-color: #FFFFFF;
}

/* The tick mark itself is a rotated border box, white by default - which would
   be white on white once the box fills in. */
#agesync-overlay .agesync-checkbox-tick::after {
  border-color: #000000;
}

#agesync-overlay input[type="checkbox"]:focus-visible + .agesync-checkbox-tick {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

#agesync-overlay .agesync-checkbox-label {
  font-size: 14px;
  line-height: 20px;
  color: var(--alma-fg-60);
}

#agesync-overlay .agesync-checkbox-row--age .agesync-checkbox-label {
  color: var(--alma-fg-80);
}

#agesync-overlay .agesync-checkbox-label a {
  color: var(--alma-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#agesync-overlay .agesync-error {
  border-radius: 12px;
  border-color: rgba(242, 85, 90, 0.45);
  background: rgba(242, 85, 90, 0.12);
  font-weight: 400;
}

#agesync-overlay .agesync-submit-btn {
  margin-top: 12px;
  padding: 16px;
  border-radius: var(--alma-r-btn);
  background: #FFFFFF;
  color: #000000;
  font-size: 16px;
  line-height: 19.4px;
  font-weight: 400;
  letter-spacing: normal;
  box-shadow: none;
  transition: background-color 0.2s ease;
}

#agesync-overlay .agesync-submit-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: none;
  opacity: 1;
  box-shadow: none;
}

#agesync-overlay .agesync-footer-note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: normal;
  color: var(--alma-fg-40);
}

@media (max-width: 480px) {
  #agesync-overlay .agesync-card {
    padding: 32px 24px 26px;
  }
  #agesync-overlay .agesync-heading {
    font-size: 26px;
    line-height: 31px;
  }
}

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (max-width: 1400px) {
  .alma-display--hero {
    font-size: 84px;
    line-height: 80px;
    letter-spacing: -2.5px;
    /* At 84px "Peptides Source" is 566px and "USA Trusted Research" is 781px.
       700 sits between them with 134px and 81px of margin, keeping the same
       three-line shape as the larger size instead of flipping to two. */
    max-width: 700px;
  }
  .alma-display--banner {
    font-size: 68px;
    line-height: 74px;
    letter-spacing: -2px;
  }
  .alma-h2 {
    font-size: 44px;
    line-height: 52px;
  }
  /* Set on the container so the hairlines, which measure themselves against
     the box, stay in step with it. */
  .alma-feature-steps {
    --alma-feature-box-w: 42%;
  }

  /* At a proportional box width the callouts reach over the vial, so there is
     no gap for a connector to cross: solving box-start >= vial-edge + dot +
     gaps for a 42% box needs a card 1785px wide, and above 1400 the box goes
     back to a fixed 477px and the room reappears. Rather than draw a line
     with nowhere to go - it collapsed to 0px wide, with the dot underneath
     the box - the annotations simply stop below this width and the callouts
     read as plain cards over the photograph. */
  .alma-feature-dot,
  .alma-feature-step::before {
    display: none;
  }
  .alma-split-content,
  .alma-split-media {
    width: 50%;
  }
}

@media (max-width: 1100px) {
  :root {
    --alma-gutter: 24px;
  }
  .alma-header {
    padding-inline: 24px;
  }
  /* The burger menu hangs off the bar's bottom edge. It used to be pinned at
     a flat 60px from the header box, which put it *over* the logo and icons
     (the bar itself is 73px tall), and left/right: 0 resolve against the
     header's padding box, so it also ran edge to edge past the gutter. */
  .alma-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: var(--alma-gutter);
    right: var(--alma-gutter);
    /* In the bar this is 4% white over a dark header and reads as glass. As a
       dropped panel it sits over whatever the page is showing - on the front
       page that is the lit hero plate, and the menu came out as a pale grey
       smear with the labels barely on it. Over content it needs a ground of
       its own. */
    padding: 8px;
    border: 1px solid var(--alma-hairline);
    background: rgba(12, 17, 26, 0.94);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  }
  .alma-nav.is-open {
    display: block;
  }
  .alma-nav-list {
    flex-direction: column;
    align-items: stretch;
  }

  /* The flex items here are the <li>s, and they do stretch - but the link
     inside each one is inline-flex and stays the width of its own label, so
     the highlight on the current page came out as a short pill floating in a
     full-width panel. The link fills its row instead, which is what a menu
     row is everywhere else. */
  .alma-nav-list a {
    display: flex;
    width: 100%;
    padding: 14px 16px;
  }
  .alma-nav-list a:active {
    background: rgba(255, 255, 255, 0.08);
  }

  .alma-burger {
    display: flex;
  }
  .alma-card-row,
  ul.products,
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .alma-info-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Below this width the stacked copy is taller than the design's card
     proportion allows, so the ratio has to give way to the content or the
     card clips it (the feature card lost ~330px of text at 390px wide). The
     photo crops harder here as a result - that's what the scrim above is
     widened for. */
  /* The proportional copy columns exist to keep clear of the photograph's
     subject on a wide card; once the card is phone-width there is no subject
     to dodge and 37-45% of it is 115-140px of text, so they go full width. */
  .alma-feature-intro {
    max-width: 100%;
  }
  .alma-hero-card {
    aspect-ratio: auto;
    min-height: 640px;
    /* The plate is 2:1 and the card here is portrait, so cover scales it by
       height and keeps the middle - which on this photograph is empty sweep.
       The vials live at 62-85% across, so a centre crop threw the product out
       of the hero entirely and left a phone visitor looking at a gradient.
       Biasing the crop right brings them back into frame; the copy is
       bottom-anchored under its own scrim and does not compete with them. */
    background-position: 72% center;
  }
  .alma-feature-card {
    aspect-ratio: auto;
    min-height: 0;
    padding-bottom: 42px;
  }
  .alma-feature-step {
    height: auto;
    justify-content: flex-start;
    padding-block: 10px;
  }
  .alma-feature-steps {
    --alma-feature-box-w: 100%;
  }
  .alma-split {
    flex-direction: column;
    gap: 32px;
  }
  .alma-split-content,
  .alma-split-media {
    width: 100%;
  }
  /* Stacked, a full-width square is 342px of photograph on a 390px phone -
     more room than this section's supporting image deserves, and it pushes the
     next section off the fold. 16:10 shows 80% of the plate's width instead of
     50%, so the vials keep their setting rather than arriving as a close-up. */
  .alma-split-media {
    aspect-ratio: 16 / 10;
  }
  /* 42px between heading, paragraph and button reads as three loose fragments
     once the column is only 342px wide. */
  .alma-split-content {
    gap: 24px;
  }
  .alma-cert-list {
    padding: 36px var(--alma-gutter);
  }
  .alma-cert-panel-inner {
    flex-direction: column;
  }
  .alma-cert-docs {
    align-self: stretch;
  }
  .alma-banner-card {
    aspect-ratio: auto;
    min-height: 560px;
  }
  .alma-cert-hero-card,
  .alma-about-hero-card {
    aspect-ratio: auto;
  }
  .alma-banner-scrim {
    width: 100%;
    left: 0;
    /* Below this width the copy runs to 93% of the card, so a left-to-right
       wash has nowhere left to clear. It becomes a vertical one instead: dark
       across the block of text, opening towards the bottom of the card where
       the vial stands and nothing is written. */
    background: linear-gradient(180deg, rgba(12, 20, 28, 0.95) 0%, rgba(12, 20, 28, 0.93) 62%, rgba(12, 20, 28, 0.45) 100%);
  }
  .alma-footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 42px;
  }
  .alma-product-hero-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .alma-lots-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .alma-ruo-footer-columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .alma-cart-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .alma-checkout-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .alma-account-layout {
    flex-direction: column;
  }
  /* The column direction makes flex-basis apply to height, so the 346px
     on .alma-account-sidebar would pin its height here - release it. The
     layout's align-items: flex-start also shrink-wraps both panes to their
     content width once stacked, hence the explicit 100% on each. */
  .alma-account-sidebar,
  .alma-account-layout .alma-account-content {
    flex: none;
    width: 100%;
  }
  .alma-auth-card {
    flex-direction: column;
  }
  .alma-auth-media {
    width: 100%;
    height: 240px;
  }
}

/* Log In / Registration on small screens. The desktop card reserves 516px
   of left padding for the photo it draws as a ::before, and pins its height
   at 486px so both tabs stay the same size - neither survives a phone: the
   card overflowed the viewport by 254px. Below 900px the photo moves above
   the form as a normal-flow band and the height goes back to automatic. */
@media (max-width: 900px) {
  .pal-auth-card {
    height: auto;
    padding: 32px !important;
    padding-top: 236px !important;
  }

  .pal-auth-card::before {
    top: 32px;
    left: 32px;
    right: 32px;
    width: auto;
    height: 180px;
  }
}

@media (max-width: 480px) {
  .pal-auth-card {
    padding: 20px !important;
    padding-top: 184px !important;
  }

  .pal-auth-card::before {
    top: 20px;
    left: 20px;
    right: 20px;
    height: 144px;
  }
}

/* Both scrims are sized for the desktop cards: the hero's bottom one is
   pinned at top:668px (below a shorter mobile card entirely, so the hero
   copy sat on bare photo) and the feature one is a fixed 205px band, while
   the stacked feature head runs to roughly 330px. Anchor them to the card
   instead of to a measured offset. */
@media (max-width: 1100px) {
  .alma-hero-scrim-bottom {
    top: auto;
    bottom: 0;
    /* Stacked, the copy reaches 95% of the card, so the wash is the whole of
       it and only the very top stays clear for the photograph. */
    height: 100%;
    /* Taller is not enough on a narrow card. The design's wash only reaches
       full strength at the very bottom edge, which is fine when the copy is
       two short lines - but stacked on a phone the heading sits near the top
       of the band, where the gradient is still almost clear, and it landed on
       a lit vial. Reaching most of the way to opaque by 38% puts the whole
       stacked block on darkness while the photograph above it stays open.

       Lightened once more after the hero's paragraph was dropped on phones:
       the wash had been tuned around that block of body copy, and without it
       the same gradient was simply covering the photograph for no one. It also
       ended on a solid #0A121E, so the bottom third of the card was flat
       colour rather than a picture - measured behind the copy at 17.7:1 for
       the heading and 18.4:1 for the claims, against a 4.5:1 bar.

       Now it tops out at 0.80 and never reaches opaque, which puts the vials
       back on screen. Measured at 390 and 430: heading 9.8:1 (worst 2% of the
       area 6.3:1), claims 13.3:1 (worst 8.0:1) - and the heading is 48px, so
       it only owes 3:1. */
    opacity: 1;
    background: linear-gradient(180deg, rgba(10, 18, 30, 0) 0%, rgba(10, 18, 30, 0.42) 16%, rgba(10, 18, 30, 0.68) 40%, rgba(10, 18, 30, 0.80) 100%);
  }

  .alma-feature-scrim {
    /* bottom:auto because the desktop rule now stretches the scrim with
       top/bottom; with a height set as well the bottom offset would be the
       one ignored, but saying so is cheaper than remembering the rule. */
    bottom: auto;
    height: 60%;
    /* Same reasoning as the hero above: on a stacked card the intro runs far
       past the point where the design's gradient is still transparent. */
    opacity: 0.9;
    background: linear-gradient(180deg, #0F1E33 0%, rgba(15, 30, 51, 0.72) 42%, rgba(15, 30, 51, 0) 100%);
  }
}

@media (max-width: 720px) {
  /* The hero's paragraph is dropped on a phone, at the client's request: the
     two ticked claims above it already carry the promise, and 18px of body
     copy over a photograph pushed the two buttons - the only things on this
     screen a visitor can act on - most of a screen further down. The claims
     and the buttons stay.

     display:none rather than a visually-hidden class on purpose: the point is
     to get the height back. The same sentence still opens the About page, so
     it is not the site's only copy of it. */
  .alma-hero-lead {
    display: none;
  }

  /* The intro and its button share a row; unstacked on a phone the heading
     column collapsed to ~185px and "Every lot, verified in public" broke
     across three lines. */
  /*
   * The photograph becomes a header band instead of a backdrop.
   *
   * Stacked, this card is ~890px tall and 358px wide; the plate is 1264x696.
   * background-size:cover then scales the plate to the card's height and keeps
   * the middle 22% of its width - which is the middle of the vial. The result
   * was a giant out-of-focus fragment of a label with three text blocks lying
   * across it, and no way to tell what the photograph was of.
   *
   * At 100% width the whole plate is visible, in its own proportion, as a
   * 197px band across the top. Below it the card is flat, so every block sits
   * on the same ground and the copy is simply legible. The scrim's job changes
   * to matching one into the other.
   */
  .alma-feature-card {
    background-color: #0E1420;
    background-size: 100% auto;
    background-position: top center;
    padding-top: 232px;
  }

  .alma-feature-scrim {
    bottom: auto;
    height: 232px;
    opacity: 1;
    background: linear-gradient(180deg, rgba(14, 20, 32, 0) 0%, rgba(14, 20, 32, 0.55) 62%, #0E1420 88%);
  }

  /*
   * The card's own "learn more" moves to the bottom, under the three claims.
   *
   * The design has it top-right, opposite the heading. Stacked, that put it
   * between the lead paragraph and the first claim - a white pill floating in
   * the middle of the card, in front of the thing it is inviting you to read.
   * display:contents dissolves the head's box so the intro, the claims and the
   * button become siblings in the card's own column and can be ordered; the
   * markup is untouched, and above 720px the head is a row again exactly as
   * drawn.
   */
  .alma-feature-head {
    display: contents;
  }
  .alma-feature-intro {
    order: 1;
    margin-bottom: 24px;
  }
  .alma-feature-steps {
    order: 2;
  }
  .alma-feature-head > .alma-btn {
    order: 3;
    align-self: stretch;
    margin-top: 28px;
  }

  /* --alma-glass is 7% white over a photograph; over the flat card above it is
     invisible, and the three claims ran together as one column of text. */
  .alma-feature-box {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--alma-hairline);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Account forms: the design's 3-up and 2-up field rows have to stack, or
     each field gets ~93px of the screen. */
  .alma-account-form .alma-form-grid,
  .alma-account-content .woocommerce-address-fields__field-wrapper,
  .alma-order-view-addresses {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Order rows carry a thumbnail, name, status pill and two fixed-width
     number columns (101px + 150px) - together far past a phone's width, so
     the row ran 125px off-screen. Wrap to two lines and let the numbers size
     to their content: thumbnail + name, then status / qty / total. */
  .alma-order-row {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .alma-order-row-name {
    flex: 1 1 55%;
  }

  .alma-order-row-status {
    order: 3;
  }

  .alma-order-row-qty {
    order: 4;
    width: auto;
    margin-left: auto;
  }

  .alma-order-row-total {
    order: 5;
    width: auto;
  }

  /* Three feature chips share one non-wrapping row; at 390px the third
     one's label ("Lyophilized Powder") pushed the page 9px sideways. */
  .alma-product-info-row {
    flex-wrap: wrap;
  }

  .alma-product-info-chip {
    flex: 1 1 140px;
    gap: 10px;
    padding: 16px 12px;
  }

  /* Two chips share 342px at 390, so each has 167px, and the 39px icon plus
     the 24px of padding left 92px for the label - four pixels short of
     "Subcutaneous", which then hung outside the chip. A smaller icon and a
     14px label give it 105px. */
  .alma-product-info-chip svg {
    width: 28px;
    height: 28px;
  }

  .alma-product-info-chip span {
    font-size: 14px;
    line-height: 18px;
  }

  /* Product descriptions are editor content and contain wide comparison
     tables. Let them scroll inside their own box rather than pushing the
     page sideways (the SS-31 page overflowed by 9px). */
  .alma-product-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }


  .alma-account-content form {
    grid-template-columns: minmax(0, 1fr);
  }
  .woocommerce-Addresses.col2-set {
    grid-template-columns: minmax(0, 1fr);
  }
  .woocommerce-orders-table,
  .woocommerce-orders-table thead {
    display: none;
  }
  .woocommerce-orders-table tbody,
  .woocommerce-orders-table tr {
    display: block;
  }
  .woocommerce-orders-table tr {
    padding: 16px 0;
    border-bottom: 1px solid var(--alma-hairline);
  }
  .woocommerce-orders-table__cell {
    display: flex;
    justify-content: space-between;
    border-bottom: 0;
    padding: 4px 0;
  }
  .woocommerce-orders-table__cell::before {
    content: attr(data-title);
    color: var(--alma-fg-50);
  }
  .alma-cart-item {
    flex-wrap: wrap;
  }
  .alma-checkout-details .woocommerce-billing-fields__field-wrapper,
  .alma-checkout-details .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  .alma-checkout-details .form-row-first,
  .alma-checkout-details .form-row-last {
    grid-column: 1 / -1;
  }
  .alma-cart-item-price {
    order: 1;
    margin-left: auto;
  }
  .alma-section--grid {
    padding: 64px var(--alma-gutter);
  }
  .alma-display--hero {
    font-size: 48px;
    line-height: 50px;
    letter-spacing: -1.5px;
  }
  .alma-display--banner {
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -1px;
  }
  .alma-h2 {
    font-size: 32px;
    line-height: 38px;
  }
  /*
   * The section heading keeps its action on the same row, as drawn, instead of
   * dropping it onto a line of its own.
   *
   * Stacked, "View All" and "About us" became full white pills sitting alone
   * under the heading - the same visual weight as "Shop peptides", which is a
   * primary call to action, for what is only a link to the rest of a list. The
   * heading comes down to 24px and the action to a smaller pill so the pair
   * fits: "More research peptides" is the widest at 245px, leaving 97px for
   * the button inside 358px of card.
   */
  /* Only the heads whose second child is an action. The product page uses the
     same block for a heading beside a paragraph of explanatory copy, and in a
     row that heading was squeezed into a 68px column with its text spilling
     across the paragraph. Those stack, as they did before. */
  .alma-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .alma-section-head:has(> .alma-btn) {
    flex-direction: row;
    align-items: center;
  }
  .alma-section-head:has(> .alma-btn) .alma-h2 {
    min-width: 0;
    font-size: 24px;
    line-height: 29px;
  }
  .alma-section-head .alma-btn {
    padding: 11px 18px;
    font-size: 14px;
    line-height: 17px;
  }
  /* .woocommerce ul.products is listed explicitly: woocommerce-layout.css
     and this file both set the 4-column grid through that two-class
     selector, which outranks a bare ul.products here - which is why the
     shop archive stayed four columns wide on a phone (77px cards) while
     the front page collapsed correctly. */

  /* The prose rows stack; the product grid does not. One card per row makes
     each one ~390px tall, which put the front page at 10,799px on a 390px
     phone and the shop archive well past that - a catalogue nobody scrolls
     to the end of. Two up gives a 167px card, which is what a phone shop
     grid is everywhere else, and takes the same page to under half. */
  .alma-info-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .alma-card-row,
  ul.products,
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  /* At two up the card is ~167px wide, and the design's single row of
     name-then-size leaves the name about 90px: every product truncated to
     "Reta...", "Bact...", "MO...". The size moves under the name, the name
     gets the full width and two lines, and the type comes down to match the
     smaller card. */
  .alma-card-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 0;
  }
  .alma-card-name {
    font-size: 16px;
    line-height: 20px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .alma-card-weight {
    font-size: 13px;
    line-height: 16px;
  }
  .alma-card-price {
    font-size: 16px;
    line-height: 20px;
  }
  .alma-card-price-old {
    font-size: 13px;
    line-height: 20px;
  }
  .alma-card-footer {
    min-height: 44px;
  }

  .alma-filters {
    flex-wrap: wrap;
    width: 100%;
  }
  .alma-filter {
    width: calc(50% - 6px);
  }
  .alma-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
  .alma-cert {
    padding-inline: 16px;
  }
  .alma-cert-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .alma-cert-number {
    font-size: 16px;
  }
  .alma-cert-toggle {
    width: 44px;
    height: 44px;
  }
  .alma-cert-doc-thumb {
    display: none;
  }
  .alma-footer-cols {
    flex-wrap: wrap;
    gap: 32px;
  }
  .alma-footer-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .alma-lots-row--lot {
    flex-direction: column;
    align-items: flex-start;
  }
  .alma-product-content table {
    display: block;
    overflow-x: auto;
  }
  .alma-footer-disclaimer {
    text-align: left;
  }
  .alma-faq {
    padding: 48px 16px 64px;
  }
}

/* --------------------------------------------------------------------------
   Testimonials marquee - responsive (section 10b)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .alma-testimonials {
    padding: 64px 0 0;
  }
  .alma-testimonial {
    flex-basis: 360px;
    width: 360px;
  }
}

@media (max-width: 720px) {
  /* 78vw leaves the next card's edge showing on a phone, which is the only
     cue that the row continues sideways once the animation is off. */
  .alma-testimonial {
    flex-basis: min(300px, 78vw);
    width: min(300px, 78vw);
    gap: 16px;
    padding: 20px;
  }
  /* A 64px fade is a fifth of a 390px screen. */
  .alma-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  /* The cards are ~40% narrower here, so the same duration would read as
     noticeably slower - the track is that much shorter. */
  .alma-motion .alma-marquee-track {
    --alma-marquee-duration: 46s;
  }
}

/* Email verification (inc/verify.php) and order tracking (page-order-tracking.php).

   The banner is prepended to the content of the account page and the auth
   card, so it has to read on both surfaces - hence the panel treatment rather
   than a bare line of text. Its three states share a shape and differ only in
   the accent, the way the WooCommerce notices elsewhere on the site do. */
.alma-verify-banner {
  margin: 0 0 24px;
  padding: 16px 20px;
  border: 1px solid var(--alma-hairline);
  border-left-width: 3px;
  border-radius: var(--alma-r-nav);
  background: var(--alma-surface);
  font-size: 15px;
  line-height: 1.5;
  color: var(--alma-fg-80);
}

.alma-verify-banner.is-success {
  border-left-color: #34A853;
}

.alma-verify-banner.is-error {
  border-left-color: #F03F3F;
}

.alma-verify-banner.is-prompt {
  border-left-color: #DFC751;
}

.alma-verify-banner a {
  color: var(--alma-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The tracked order reuses myaccount/view-order.php, which is built for the
   account layout's content column - so the result gets that column's width
   rather than the form's 480px panel. */
.alma-track-result {
  width: 100%;
  max-width: 900px;
}

.alma-track-result-title {
  margin-bottom: 12px;
}

.alma-track-status {
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--alma-fg-60);
}

.alma-track-status mark {
  background: none;
  color: var(--alma-fg);
  font-weight: 600;
}

.alma-track-note {
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--alma-fg-60);
}

.alma-track-note a {
  color: var(--alma-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* WooCommerce prints "order could not be found" through its own notice
   markup, which the site already styles - it just needs to sit above the
   form rather than beside it. */
.alma-track-page .woocommerce-error,
.alma-track-page .woocommerce-info,
.alma-track-page .woocommerce-message {
  width: 100%;
  max-width: 480px;
  margin-bottom: 24px;
}