.fcwlabout-bricks-element,
.fcwlabout-bricks-element *,
.fcwlabout,
.fcwlabout * {
  box-sizing: border-box;
}

.fcwlabout-bricks-element {
  width: 100%;
}

/*
 * FC HP About Us
 * 1.3.162 — fixed story stage geometry; images never control story-card height.
 * The overview stays lightweight; story interaction is handled by one tiny
 * delegated script and pre-rendered panels (no cloning, remote fetches, or layout libraries).
 */
.fcwlabout {
  --fcwlabout-bg: #4f6655;
  --fcwlabout-heading: #f8f6ef;
  --fcwlabout-text: #f2efe7;
  --fcwlabout-muted: rgba(248, 246, 239, .92);
  --fcwlabout-gap: 28px;
  --fcwlabout-inner-radius: 8px;
  --fcwlabout-button-radius: 8px;
  --fcwlabout-story-surface: rgba(255,255,255,.12);
  --fcwlabout-story-surface-strong: rgba(255,255,255,.18);
  --fcwlabout-story-title: var(--fcwlabout-heading);
  --fcwlabout-story-text: var(--fcwlabout-text);
  --fcwlabout-story-eyebrow: var(--fcwlabout-muted);

  width: 100%;
  margin: 0;
  padding: clamp(34px, 2.5vw, 46px) clamp(18px, 1.45vw, 28px) clamp(30px, 2.1vw, 40px);
  overflow: hidden;
  border-radius: 0 !important;
  background: var(--fcwlabout-bg);
  color: var(--fcwlabout-text);
  font-family: Helvetica, Arial, sans-serif;
}

.fcwlabout [hidden] {
  display: none !important;
}

.fcwlabout button,
.fcwlabout a {
  font-family: inherit;
}

.fcwlabout-inner {
  width: 100%;
  max-width: none;
  margin: 0;
}

.fcwlabout-header {
  width: min(100%, 940px);
  max-width: 940px;
  margin: 0 0 clamp(28px, 2.6vw, 40px);
}

/* 6.0.742: ABOUT US badge treatment on all viewports, matching the compact
   white label language already used elsewhere in the suite. */
.fcwlabout-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 2px 4px;
  border: 2px solid #ffffff;
  border-radius: 2px !important;
  background: #ffffff;
  color: var(--fcwlabout-bg);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Best Seller heading family/weight. */
.fcwlabout-heading,
.fcwlabout-card-title {
  color: var(--fcwlabout-heading);
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(28px, 2.2vw, 40px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
}

.fcwlabout-heading {
  margin: 0;
  max-width: 900px;
}

/* Saje-like lighter overview copy: keep the existing responsive sizes, but
   use normal text weight so intro and book descriptions read cleanly on
   desktop, laptop, tablet and phone without competing with the headings. */
.fcwlabout-intro,
.fcwlabout-card-text {
  color: var(--fcwlabout-text);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
}

.fcwlabout-intro {
  margin: 16px 0 0;
  max-width: 900px;
}

.fcwlabout-overview {
  width: 100%;
}

.fcwlabout-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fcwlabout-gap);
  align-items: start;
}

.fcwlabout-card {
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
}

/* Saje-inspired visual proportion, kept fluid. */
.fcwlabout-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 573 / 435;
  overflow: hidden;
  border: 0;
  border-radius: var(--fcwlabout-inner-radius) !important;
  background: rgba(255, 255, 255, .10);
}

.fcwlabout-image,
.fcwlabout-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--fcwlabout-inner-radius) !important;
}

.fcwlabout-image {
  object-fit: cover;
  object-position: center;
}

.fcwlabout-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(255, 255, 255, .18);
  color: var(--fcwlabout-heading);
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* Our Collection-style right-to-left CTA reveal, compositor-safe. */
.fcwlabout-action-shell {
  position: absolute;
  z-index: 6;
  right: 6px;
  bottom: 8px;
  left: 6px;
  opacity: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--fcwlabout-button-radius) !important;
  clip-path: inset(0 0 0 100% round var(--fcwlabout-button-radius));
  transition: clip-path 650ms cubic-bezier(.22, .80, .20, 1);
}

.fcwlabout-card:hover .fcwlabout-action-shell,
.fcwlabout-card:focus-within .fcwlabout-action-shell,
.fcwlabout-action-shell:focus-within {
  clip-path: inset(0 0 0 0 round var(--fcwlabout-button-radius));
  pointer-events: auto;
}

.fcwlabout-action {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 8px 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.96);
  border-radius: var(--fcwlabout-button-radius) !important;
  background: transparent !important;
  color: #173f34;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-decoration: none !important;
  text-transform: uppercase;
  box-shadow: none;
  cursor: pointer;
}

.fcwlabout-action-fill {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: #ffffff;
  pointer-events: none;
  clip-path: inset(0 0 0 0 round var(--fcwlabout-button-radius));
  transition: clip-path 360ms cubic-bezier(.22,.75,.22,1);
}

/* Hero-style transparent hover state. */
.fcwlabout-action:hover .fcwlabout-action-fill,
.fcwlabout-action:focus-visible .fcwlabout-action-fill {
  clip-path: inset(0 0 0 100% round var(--fcwlabout-button-radius));
}

.fcwlabout-action-label {
  position: relative;
  z-index: 1;
  display: block;
  pointer-events: none;
  color: #173f34;
  -webkit-text-fill-color: currentColor;
  transition: color 220ms ease;
}

.fcwlabout-action:hover .fcwlabout-action-label,
.fcwlabout-action:focus-visible .fcwlabout-action-label {
  color: #ffffff;
  -webkit-text-fill-color: currentColor;
}

.fcwlabout-card-body {
  padding-top: 16px;
}

.fcwlabout-card-title {
  margin: 0;
}

.fcwlabout-card-text {
  margin: 10px 0 0;
}

/* --------------------------------------------------------------------------
   STORYBOOK MODE — each overview card owns its own multi-page story.
   -------------------------------------------------------------------------- */
.fcwlabout-storybook {
  width: 100%;
}

/* Only the page tiles for the currently selected overview card are shown. */
.fcwlabout-story-nav {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 22px;
}

.fcwlabout-story-tabs {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

/* 6.0.572 — overflow-aware story/ingredient rail.
   JS adds is-scrollable only when content actually exceeds the viewport, so
   desktop/tablet geometry stays unchanged while mouse grab works in responsive
   previews and narrow layouts. Touch remains browser-native for smooth momentum. */
.fcwlabout-story-tabs.is-scrollable {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.fcwlabout-story-tabs.is-scrollable::-webkit-scrollbar {
  display: none;
}

.fcwlabout-story-tabs.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none !important;
}

.fcwlabout-story-tabs.is-settling {
  scroll-snap-type: none !important;
}

.fcwlabout-story-tab-image {
  -webkit-user-drag: none;
}

.fcwlabout-story-tab {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 clamp(112px, 9.2vw, 156px);
  width: clamp(112px, 9.2vw, 156px);
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: var(--fcwlabout-inner-radius) !important;
  background: transparent;
  color: var(--fcwlabout-heading);
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  opacity: .74;
  transition: border-color 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
}

.fcwlabout-story-tab:hover,
.fcwlabout-story-tab:focus-visible {
  border-color: rgba(255,255,255,.74);
  opacity: 1;
  outline: none;
}

.fcwlabout-story-tab.is-active {
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16);
  opacity: 1;
}

.fcwlabout-story-tab-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fcwlabout-story-surface-strong);
}

.fcwlabout-story-tab-image,
.fcwlabout-story-tab-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.fcwlabout-story-tab-image {
  object-fit: cover;
  object-position: center;
}

.fcwlabout-story-tab-placeholder {
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
}

.fcwlabout-story-tab-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,45,37,.74), rgba(15,45,37,.04) 72%);
  pointer-events: none;
}

.fcwlabout-story-tab-title {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 7px;
  left: 8px;
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: clamp(11px, .82vw, 13px);
  font-weight: 700;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcwlabout-story-panels,
.fcwlabout-story-panel {
  width: 100%;
}

.fcwlabout-story-panel {
  animation: fcwlabout-story-in 260ms ease both;
}

@keyframes fcwlabout-story-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.fcwlabout-story-spread {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fcwlabout-gap);
  align-items: stretch;
  width: 100%;
  height: clamp(440px, 39vw, 650px);
  min-height: 0;
  max-height: 650px;
  overflow: hidden;
}

/* Left storybook page: the same image is reused in its small tile above. */
.fcwlabout-story-visual {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--fcwlabout-inner-radius) !important;
  background: var(--fcwlabout-story-surface-strong);
  box-shadow: none;
  cursor: pointer;
  contain: layout paint;
}

.fcwlabout-story-visual:hover,
.fcwlabout-story-visual:focus-visible {
  border-color: rgba(255,255,255,.62);
  outline: none;
}

.fcwlabout-story-image,
.fcwlabout-story-placeholder {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.fcwlabout-story-image {
  object-fit: cover;
  object-position: center;
}

.fcwlabout-story-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  color: var(--fcwlabout-heading);
  background: var(--fcwlabout-story-surface-strong);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

/* Right storybook page. Back to Overview lives here, exactly with the selected story. */
.fcwlabout-story-copy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: var(--fcwlabout-inner-radius) !important;
  background: var(--fcwlabout-story-surface);
  color: var(--fcwlabout-story-text);
  cursor: default;
  contain: layout paint;
}

/* The frame owns the height. Story content scrolls inside it instead of growing
   the spread. This mirrors the Product Story card behavior. */
.fcwlabout-story-copy-scroll {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  /* 6.0.749: keep a permanent 24px viewport gutter above and below the
     scrolling story text. Padding alone scrolls away with the content; this
     inset keeps text from ever touching the reading-card border. */
  height: calc(100% - 48px);
  margin-block: 24px;
  /* 6.0.750: keep 21px between the Back to Overview control and the
     first story label while preserving the permanent 24px outer gutter. */
  padding: 57px clamp(44px, 4vw, 78px) clamp(30px, 4vw, 72px) clamp(30px, 4vw, 72px);
  overflow-x: hidden;
  overflow-y: auto;
  /* 6.0.745: vertical scroll chains back to the page at the reading-card
     boundaries instead of trapping wheel/touch input inside the card. */
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.fcwlabout-story-copy-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.fcwlabout-story-copy-scroll:focus {
  outline: none;
}

.fcwlabout-story-copy-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: center;
}

/* When the content becomes taller than the frame, normal flow takes over so
   the first line never gets clipped and the user can scroll from top to bottom. */
.fcwlabout-story-copy-card.is-overflowing .fcwlabout-story-copy-inner {
  justify-content: flex-start;
}

.fcwlabout-story-dots {
  position: absolute;
  z-index: 6;
  top: 50%;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  padding: 0;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.fcwlabout-story-copy-card.is-overflowing .fcwlabout-story-dots {
  opacity: 1;
}

.fcwlabout-story-dot {
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(255,255,255,.24);
  opacity: 1;
  box-shadow: none;
}

.fcwlabout-story-dot.is-lit {
  border-color: #ffffff;
  background: #ffffff;
}

.fcwlabout-story-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--fcwlabout-story-eyebrow);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.fcwlabout-story-title {
  margin: 0;
  color: var(--fcwlabout-story-title);
  font-family: Helvetica, Arial, sans-serif;
  /* Keep story-page titles in the same visual system as the widget title,
     but 5% smaller than the 28/2.2vw/40px book heading scale. */
  font-size: clamp(26.6px, 2.09vw, 38px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
}

.fcwlabout-story-text {
  margin-top: 22px;
  max-width: 760px;
  color: var(--fcwlabout-story-text);
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 400;
  line-height: 1.62;
}

.fcwlabout-story-text p {
  margin: 0 0 1em;
}

.fcwlabout-story-text p:last-child {
  margin-bottom: 0;
}

.fcwlabout-story-link {
  align-self: flex-start;
  margin-top: 26px;
  color: var(--fcwlabout-story-title);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: uppercase;
}

.fcwlabout-story-link:hover,
.fcwlabout-story-link:focus-visible {
  opacity: .8;
}

/* Temporary story controls. Opening/selecting a story or clicking either page
   reveals them; they fade away again after a short pause. */
.fcwlabout-story-control {
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, background-color 180ms ease, color 180ms ease;
}

.fcwlabout-storybook.is-controls-visible .fcwlabout-story-control {
  opacity: 1;
  pointer-events: auto;
}

.fcwlabout-story-back {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  z-index: 8;
  top: 18px;
  left: 18px;
  right: auto;
  min-height: 42px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: var(--fcwlabout-button-radius) !important;
  background: rgba(79,102,85,.26);
  color: var(--fcwlabout-story-title);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateY(-4px);
  backdrop-filter: blur(4px);
}

.fcwlabout-storybook.is-controls-visible .fcwlabout-story-back {
  transform: translateY(0);
}

.fcwlabout-story-back:hover,
.fcwlabout-story-back:focus-visible {
  background: #fff;
  color: #173f34;
  outline: none;
}

/* 6.0.575 — single-layer arrow chrome.
   The 6.0.572–574 pseudo-element added a second colour layer and the generic
   .is-controls-visible rule also forced arrow opacity back to 1. Keep the
   original single button surface and let one opacity value fade the entire
   control (background, border, icon, shadow and uploaded image) together. */
.fcwlabout-story-arrow {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  z-index: 9;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0 0 4px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 999px !important;
  background: var(--fcwlabout-story-arrow-bg, rgba(31,67,56,.52));
  color: var(--fcwlabout-story-arrow-icon, #fff);
  box-shadow: 0 8px 26px rgba(0,0,0,.16);
  cursor: pointer;
  transform: translateY(-50%) scale(.94);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Must come after the generic story-control visibility rule. Its higher/same
   effective specificity ensures a saved 0% really stays invisible instead of
   being reset to opacity:1 when the navigation controls are revealed. */
.fcwlabout-storybook.is-controls-visible .fcwlabout-story-arrow {
  opacity: var(--fcwlabout-story-arrow-opacity, 1);
  pointer-events: var(--fcwlabout-story-arrow-pointer-events, auto);
  transform: translateY(-50%) scale(1);
}

.fcwlabout-story-arrow-dashicon {
  display: block;
  width: auto !important;
  height: auto !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

.fcwlabout-story-arrow-system-icon {
  display: block;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  font-size: 26px !important;
  line-height: 1 !important;
  color: currentColor;
}

.fcwlabout-story-arrow-system-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
}

/* WordPress/Bricks circular icons occupy the exact inner diameter so the
   wrapper cannot create a second coloured ring around a circular glyph. */
.fcwlabout-story-arrow--source-wordpress {
  padding: 0 !important;
  overflow: hidden;
}

.fcwlabout-story-arrow--source-wordpress .fcwlabout-story-arrow-system-icon {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 46px !important;
  line-height: 46px !important;
  text-align: center !important;
  vertical-align: middle !important;
  transform: none !important;
}

.fcwlabout-story-arrow--source-wordpress i.fcwlabout-story-arrow-system-icon::before,
.fcwlabout-story-arrow--source-wordpress span.fcwlabout-story-arrow-system-icon::before {
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: 46px !important;
  text-align: center !important;
}

.fcwlabout-story-arrow--source-wordpress .fcwlabout-story-arrow-system-icon svg {
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
}

.fcwlabout-story-arrow-inline-svg {
  display: block;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px;
  overflow: visible;
  color: currentColor;
}

.fcwlabout-story-arrow-image {
  display: block;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
}

.fcwlabout-story-arrow--prev {
  left: 14px;
}

.fcwlabout-story-arrow--next {
  right: 14px;
}

/* Hover inversion is desktop-mouse-only. Touch browsers can keep :hover
   latched after a tap, which was making the arrow appear as two colours. */
@media (hover: hover) and (pointer: fine) {
  .fcwlabout-story-arrow:hover,
  .fcwlabout-story-arrow:focus-visible {
    background: #fff;
    color: #173f34;
    outline: none;
  }
}

@media (max-width: 1024px) {
  .fcwlabout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fcwlabout-intro,
  .fcwlabout-card-text {
    font-size: 18px;
    line-height: 25px;
  }

  .fcwlabout-story-spread {
    height: clamp(420px, 52vw, 560px);
    min-height: 0;
    max-height: 560px;
  }

  .fcwlabout-story-copy-scroll {
    padding: 57px clamp(40px, 3.8vw, 54px) clamp(26px, 3.5vw, 44px) clamp(26px, 3.5vw, 44px);
  }
}

@media (max-width: 767px) {
  .fcwlabout {
    padding: 26px 18px 28px;
  }

  .fcwlabout-header {
    margin-bottom: 24px;
  }

  .fcwlabout-heading,
  .fcwlabout-card-title {
    font-size: clamp(28px, 9vw, 34px);
  }

  .fcwlabout-intro,
  .fcwlabout-card-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
  }

  .fcwlabout-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .fcwlabout-card-body {
    padding-top: 14px;
  }

  .fcwlabout-action {
    min-height: 44px;
    font-size: 13px;
  }

  .fcwlabout-story-tabs {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }

  .fcwlabout-story-tabs.is-dragging,
  .fcwlabout-story-tabs.is-settling {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  .fcwlabout-story-tabs::-webkit-scrollbar {
    display: none;
  }

  .fcwlabout-story-tab {
    flex-basis: clamp(106px, 31vw, 138px);
    width: clamp(106px, 31vw, 138px);
    scroll-snap-align: start;
  }

  .fcwlabout-story-tab-title {
    font-size: 11px;
  }

  .fcwlabout-story-spread {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .fcwlabout-story-visual {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .fcwlabout-story-copy-card {
    height: clamp(360px, 75vh, 520px);
    min-height: 360px;
    max-height: 520px;
    overflow: hidden;
  }

  .fcwlabout-story-copy-scroll {
    /* 6.0.751: same reading-card contract at every viewport: short content
       stays centered; overflowing content starts 57px below the 24px gutter. */
    padding: 57px 38px 28px 22px;
  }

  .fcwlabout-story-dots {
    right: 8px;
  }

  .fcwlabout-story-title {
    font-size: clamp(26.6px, 8.55vw, 32.3px);
    line-height: 1.18;
  }

  .fcwlabout-story-text {
    font-size: 16px;
    line-height: 1.55;
  }

  .fcwlabout-story-back {
    top: 14px;
    left: 14px;
    right: auto;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 11px;
  }

  /* Mobile story navigation belongs to the STORY card, not the image page.
     The buttons are children of .fcwlabout-story-copy-card, so top:50% is the
     true vertical center of the text/story frame on every stacked viewport. */
  .fcwlabout-story-arrow {
    position: absolute;
    top: 50%;
    bottom: auto;
    width: 42px;
    height: 42px;
    padding: 0;
    transform: translateY(-50%) scale(.94);
  }

  .fcwlabout-storybook.is-controls-visible .fcwlabout-story-arrow {
    transform: translateY(-50%) scale(1);
  }

  .fcwlabout-story-arrow--prev {
    left: 10px;
    right: auto;
    margin: 0;
  }

  .fcwlabout-story-arrow--next {
    right: 10px;
    left: auto;
    margin: 0;
  }

  .fcwlabout-story-arrow > *,
  .fcwlabout-story-arrow-dashicon,
  .fcwlabout-story-arrow-system-icon,
  .fcwlabout-story-arrow-inline-svg,
  .fcwlabout-story-arrow-image {
    margin: auto !important;
    align-self: center;
    justify-self: center;
  }

  /* 42px mobile button - 1px border on each side = 40px inner diameter. */
  .fcwlabout-story-arrow--source-wordpress .fcwlabout-story-arrow-system-icon {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    font-size: 40px !important;
    line-height: 40px !important;
  }

  .fcwlabout-story-arrow--source-wordpress i.fcwlabout-story-arrow-system-icon::before,
  .fcwlabout-story-arrow--source-wordpress span.fcwlabout-story-arrow-system-icon::before,
  .fcwlabout-story-arrow--source-wordpress .fcwlabout-story-arrow-system-icon svg {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
  }
}


@media (max-width: 950px) and (orientation: landscape) {
  .fcwlabout-story-nav {
    justify-content: center;
  }

  .fcwlabout-story-tabs {
    justify-content: center;
  }

  .fcwlabout-story-copy-inner {
    align-items: center;
    text-align: center;
  }

  .fcwlabout-story-eyebrow,
  .fcwlabout-story-title,
  .fcwlabout-story-text {
    text-align: center;
  }

  .fcwlabout-story-text {
    margin-left: auto;
    margin-right: auto;
  }

  .fcwlabout-story-link {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fcwlabout-action-shell,
  .fcwlabout-action-fill,
  .fcwlabout-action-label,
  .fcwlabout-story-tab,
  .fcwlabout-story-control,
  .fcwlabout-story-panel {
    transition: none !important;
    animation: none !important;
  }
}

/* 6.0.512 — Ingredient-book commerce block.
   Keeps product links and CTAs inside the fixed story frame so long ingredient
   stories continue to use the existing internal scroll/dot system. */
.fcwlabout-ingredient-found {
  margin-top: clamp(24px, 2.2vw, 34px);
  max-width: 760px;
}

.fcwlabout-ingredient-found-title {
  display: block;
  margin: 0 0 12px;
  color: var(--fcwlabout-story-eyebrow);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fcwlabout-ingredient-found-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.fcwlabout-ingredient-found-link {
  color: var(--fcwlabout-story-text) !important;
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 400;
  line-height: 1.35;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
  transition: opacity 180ms ease;
}

.fcwlabout-ingredient-found-link:hover,
.fcwlabout-ingredient-found-link:focus-visible {
  opacity: .72;
}

.fcwlabout-ingredient-found-link.is-text {
  text-decoration: none !important;
}

.fcwlabout-ingredient-ctas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 760px;
  margin-top: auto;
  padding-top: clamp(28px, 3vw, 44px);
}

.fcwlabout-ingredient-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 50px;
  padding: 10px 22px;
  overflow: hidden;
  border: 1px solid rgba(248,246,239,.96);
  border-radius: var(--fcwlabout-button-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-align: center;
  cursor: pointer;
}

.fcwlabout-ingredient-cta-fill {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: clip-path 340ms cubic-bezier(.22,.75,.22,1);
}

.fcwlabout-ingredient-cta-label {
  position: relative;
  z-index: 1;
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color 220ms ease;
}

/* Primary mirrors the store's solid Shop Now treatment, then reveals the
   story-card background on hover. */
.fcwlabout-ingredient-cta--primary {
  border-color: #10100f;
  color: #ffffff !important;
}

.fcwlabout-ingredient-cta--primary .fcwlabout-ingredient-cta-fill {
  background: #10100f;
  clip-path: inset(0 0 0 0 round var(--fcwlabout-button-radius));
}

.fcwlabout-ingredient-cta--primary:hover .fcwlabout-ingredient-cta-fill,
.fcwlabout-ingredient-cta--primary:focus-visible .fcwlabout-ingredient-cta-fill {
  clip-path: inset(0 0 0 100% round var(--fcwlabout-button-radius));
}

.fcwlabout-ingredient-cta--primary:hover .fcwlabout-ingredient-cta-label,
.fcwlabout-ingredient-cta--primary:focus-visible .fcwlabout-ingredient-cta-label {
  color: var(--fcwlabout-story-title);
}

/* Secondary starts as the clean outline treatment and uses the same sweep
   language as the Hero/About Us CTA when hovered. */
.fcwlabout-ingredient-cta--secondary {
  color: var(--fcwlabout-story-title) !important;
}

.fcwlabout-ingredient-cta--secondary .fcwlabout-ingredient-cta-fill {
  background: var(--fcwlabout-story-title);
  clip-path: inset(0 100% 0 0 round var(--fcwlabout-button-radius));
}

.fcwlabout-ingredient-cta--secondary:hover .fcwlabout-ingredient-cta-fill,
.fcwlabout-ingredient-cta--secondary:focus-visible .fcwlabout-ingredient-cta-fill {
  clip-path: inset(0 0 0 0 round var(--fcwlabout-button-radius));
}

.fcwlabout-ingredient-cta--secondary:hover .fcwlabout-ingredient-cta-label,
.fcwlabout-ingredient-cta--secondary:focus-visible .fcwlabout-ingredient-cta-label {
  color: #173f34;
}

@media (max-width: 767px) {
  .fcwlabout-ingredient-found {
    width: 100%;
    text-align: center;
  }

  .fcwlabout-ingredient-found-links {
    align-items: center;
  }

  .fcwlabout-ingredient-ctas {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding-top: 26px;
  }

  .fcwlabout-ingredient-cta {
    min-height: 48px;
    width: 100%;
  }
}

/* 6.0.567 — phone-only overview compaction.
   Desktop/tablet geometry stays untouched. On phones the three overview books
   keep their one-card flow in portrait, but the media is shallower and the
   typography/gaps are tightened so each book does not consume most of a screen.
   Short phone-landscape viewports use two columns to avoid oversized cards. */
@media (max-width: 600px) {
  .fcwlabout {
    padding-top: 20px;
    padding-bottom: 22px;
  }

  .fcwlabout-header {
    margin-bottom: 18px;
  }

  .fcwlabout-grid {
    gap: 18px;
  }

  .fcwlabout-media {
    aspect-ratio: 16 / 9;
  }

  .fcwlabout-card-body {
    padding-top: 10px;
  }

  .fcwlabout-card-title {
    font-size: clamp(23px, 7vw, 27px);
    line-height: 1.14;
  }

  .fcwlabout-card-text {
    margin-top: 7px;
    font-size: 14px;
    line-height: 19px;
  }
}

@media (max-width: 950px) and (orientation: landscape) and (max-height: 600px) {
  .fcwlabout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .fcwlabout-media {
    aspect-ratio: 16 / 9;
  }

  .fcwlabout-card-body {
    padding-top: 10px;
  }

  .fcwlabout-card-title {
    font-size: clamp(22px, 3vw, 26px);
    line-height: 1.14;
  }

  .fcwlabout-card-text {
    margin-top: 7px;
    font-size: 14px;
    line-height: 19px;
  }
}

/* 6.0.568 — phone-only overview card frame.
   The image, title and description become one compact bordered card on phones.
   Desktop/tablet keep the existing borderless editorial layout. */
@media (max-width: 767px), (max-width: 950px) and (orientation: landscape) and (max-height: 600px) {
  .fcwlabout-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(248, 246, 239, .48);
    border-radius: var(--fcwlabout-inner-radius) !important;
    background: transparent;
  }

  /* 6.0.743: when the overview card has a border, the image sits directly
     against that frame. Keep only the top image corners rounded; the image's
     bottom edge is square where it meets the text area. */
  .fcwlabout-card .fcwlabout-media,
  .fcwlabout-card .fcwlabout-image,
  .fcwlabout-card .fcwlabout-placeholder {
    border-radius: calc(var(--fcwlabout-inner-radius) - 1px) calc(var(--fcwlabout-inner-radius) - 1px) 0 0 !important;
  }

  .fcwlabout-card-body {
    padding: 10px 10px 7px;
  }
}