/* ============================================================
   BUSINESS COLLECTION category page
   Built from the client's six design comps (1.png - 6.png).
   Geometry is measured from the comps, expressed as percentages
   of a 1920x790 section box, and passed in per section as custom
   properties from the template.

   FONT NOTE
   The site-wide Akira rule is
     html body [class] [class] [class] [class]:not(...) ,
     html body, html body *  { font-family: ... !important }
   which is specificity (0,6,2) WITH !important. Sections 3-6 and
   the carousel are set in the secondary mono face in the comps, so
   those selectors repeat [class] on the SAME element to climb above
   (0,6,2). Anything that should stay Akira simply omits font-family.
   ============================================================ */

.bc-main {
  background: #202120 !important;
  overflow-x: hidden;
  /* The site header is position:fixed, so the page must reserve its height or
     the hero title renders behind the nav links.

     --header-h cannot be trusted for this: it reports 80px while the header
     actually measures 140px (it grew when the logo was enlarged and the token
     was never updated). business-collection.js measures the header at runtime
     and publishes the real value as --bc-header-h; the fallback below is that
     measured height for the no-JS case. */
}

/* ---------- 1. HERO ---------------------------------------- */
.bc-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}
.bc-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Comp: title cap-height 85px at 1920 wide, spanning ~90% of the
   viewport, sitting just under the header. */
.bc-hero__title {
  position: absolute;
  top: calc(var(--bc-header-h, 140px) + 55px);
  left: 5%;
  width: 90%;
  height: auto;
  overflow: visible;
}
.bc-hero__title text {
  font-family: var(--ff-display), 'Akira Expanded', sans-serif;
  font-weight: 900;
  font-size: 47px;
  text-transform: uppercase;
  /* Comp: glyphs read ~62 luminance over a ~139 background, i.e. a
     dark fill at roughly 55-60% opacity rather than a blend mode.
     mix-blend-mode was avoided here: the hero creates its own
     stacking context, which has previously made blending on this
     site render as a flat grey box. */
  fill: rgba(0, 0, 0, 0.82);
}

/* ---------- 2. CAROUSEL ------------------------------------ */
.bc-carousel__strip {
  width: 100%;
  aspect-ratio: 1906 / 315;   /* measured from comp 2 */
  max-height: 42vh;
  overflow: hidden;
}
.bc-carousel__strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  display: block;
}

.bc-carousel__panel {
  background: #202120;        /* sampled rgb(32,33,32) from comp 2 */
  padding: 22px clamp(1rem, 1.6vw, 30px) clamp(2rem, 4vw, 4rem);
}

.bc-carousel__label[class][class][class][class][class][class] {
  font-family: 'Consola Mono', ui-monospace, monospace !important;
  font-size: clamp(0.85rem, 1.09vw, 21px);
  font-weight: 700;
  letter-spacing: 0.41em;      /* comp: 342px across 17 characters */
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 clamp(1.5rem, 3.4vw, 65px);
  line-height: 1;
}
.bc-carousel__label sup {
  color: var(--clr-accent, #009933);
  font-size: 0.55em;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: -0.25em;
}

.bc-carousel__stage { position: relative; }

.bc-carousel__viewport {
  overflow: hidden;
  margin: 0 clamp(2rem, 3.2vw, 62px);
}
.bc-carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* comp: 4 cards fill the 1906px viewport -> 25% each */
.bc-card {
  position: relative;
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 0.6rem;
  box-sizing: border-box;
}

.bc-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.bc-card__media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  aspect-ratio: 400 / 240;    /* comp: image band 575-790px tall */
  margin: 0 0 clamp(1rem, 2vw, 2.2rem);
}
.bc-card__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;        /* product renders are cut-outs on transparency */
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bc-card:hover .bc-card__media img { transform: scale(1.04); }

.bc-card__name[class][class][class][class][class][class] {
  font-family: 'Consola Mono', ui-monospace, monospace !important;
  font-size: clamp(1rem, 1.5vw, 29px);
  font-weight: 700;
  letter-spacing: 0.24em;      /* comp: 137px across 6 characters */
  text-transform: uppercase;
  color: #fff;
  text-indent: 0.24em;         /* offset trailing letter-space so it optically centres */
  margin: 0 0 clamp(0.6rem, 1.2vw, 1.4rem);
  text-align: center;
}
.bc-card__cta {
  font-size: clamp(0.8rem, 1.25vw, 24px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clr-accent, #009933);
  transition: opacity 0.3s ease;
}
.bc-card:hover .bc-card__cta { opacity: 0.75; }

/* heart, top-left of the card (comp: 24x23px outline) */
.bc-card__heart {
  position: absolute;
  top: 0;
  left: 1.4rem;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.bc-card__heart svg,
.bc-feature__heart svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
}
.bc-card__heart:hover svg,
.bc-feature__heart:hover svg { stroke: var(--clr-accent, #009933); }
.bc-card__heart.is-active svg,
.bc-feature__heart.is-active svg {
  fill: var(--clr-accent, #009933);
  stroke: var(--clr-accent, #009933);
}

.bc-carousel__arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.3s ease;
}
.bc-carousel__arrow--prev { left: 0; }
.bc-carousel__arrow--next { right: 0; }
.bc-carousel__arrow:disabled,
.bc-carousel__arrow.is-disabled {
  opacity: 0.25;
  cursor: default;
}

/* ---------- 3-6. FEATURE COLLAGE --------------------------- */
.bc-feature {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 790;    /* the comps' content box below the header */
  min-height: 620px;
  overflow: hidden;
  background: #202120;
  isolation: isolate;
}
/* full-bleed darkened wash of the main image, as in every comp.

   Desaturated at the client's request: these renders are strongly warm (amber
   sunsets, honey-toned timber), and at 13% over #202120 that warmth tinted the
   whole section brown rather than reading as a neutral dark backdrop. The
   filter is on the wash layer alone, so the collage photographs stacked above
   it keep their full colour - only the backdrop goes monochrome. Brightness is
   pulled down slightly as well so the pattern sits further behind the copy. */
.bc-feature__wash {
  position: absolute;
  inset: 0;
  background-image: var(--wash);
  background-size: cover;
  background-position: center;
  opacity: 0.13;
  filter: grayscale(1) brightness(0.7);
  z-index: 0;
}

.bc-feature__label[class][class][class][class][class][class] {
  position: absolute;
  left: var(--label-l);
  top: var(--label-t);
  z-index: 3;
  font-family: 'Consola Mono', ui-monospace, monospace !important;
  font-size: clamp(0.6rem, 0.78vw, 15px);
  font-weight: 700;
  letter-spacing: 0.30em;      /* comp: 214px across 16 characters */
  text-transform: uppercase;
  color: #fff;
}

.bc-feature__media { position: absolute; inset: 0; z-index: 1; }
.bc-feature__media figure { position: absolute; margin: 0; overflow: hidden; }
.bc-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bc-feature__main   { left: var(--main-l); top: var(--main-t); width: var(--main-w); height: var(--main-h); z-index: 1; }
.bc-feature__alt    { left: var(--alt-l);  top: var(--alt-t);  width: var(--alt-w);  height: var(--alt-h);  z-index: 2; }
/* the cut-out swatch overlaps the main image and must not be cropped */
.bc-feature__swatch {
  left: var(--sw-l); top: var(--sw-t); width: var(--sw-w); height: var(--sw-h);
  z-index: 3;
  overflow: visible;
}
.bc-feature__swatch img { object-fit: contain; }

.bc-feature__copy {
  position: absolute;
  left: var(--txt-l);
  top: var(--txt-t);
  width: var(--txt-w);
  z-index: 4;
}

.bc-feature__name[class][class][class][class][class][class] {
  font-family: 'Consola Mono', ui-monospace, monospace !important;
  font-size: clamp(1.4rem, 2.24vw, 43px);
  font-weight: 700;
  letter-spacing: 0.23em;      /* comp: 369px across 11 characters */
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 clamp(1rem, 2.4vw, 2.9rem);
  line-height: 1;
}
.bc-feature__name a { color: inherit; text-decoration: none; }
.bc-feature__name a:hover { color: var(--clr-accent, #009933); }

.bc-feature__desc[class][class][class][class][class][class] p {
  font-family: 'Consola Mono', ui-monospace, monospace !important;
  font-size: clamp(0.78rem, 1.15vw, 22px);
  font-weight: 400;
  letter-spacing: 0.17em;
  line-height: 1.5;            /* comp: 33px line pitch at 22px */
  color: #fff;
  margin: 0;
}

.bc-feature__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 2rem);
  margin: clamp(1.4rem, 3vw, 3.4rem) 0 0;
}
.bc-feature__heart {
  width: 26px; height: 26px; padding: 0;
  border: 0; background: none; cursor: pointer; flex: 0 0 auto;
}
.bc-feature__cta {
  font-size: clamp(0.85rem, 1.3vw, 25px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clr-accent, #009933);
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.bc-feature__cta:hover { opacity: 0.75; }

/* per-section text alignment, read off each comp */
.bc-feature[data-align="right"] .bc-feature__desc[class][class] p { text-align: right; }
.bc-feature[data-align="right"] .bc-feature__actions { justify-content: flex-end; }
.bc-feature[data-head="center"] .bc-feature__name { text-align: center; }
.bc-feature[data-head="indent"] .bc-feature__name { text-align: left; padding-left: 8%; }

/* ---------- RESPONSIVE ------------------------------------- */
/* Below 1024 the absolute compositions stop being legible, so each
   feature reflows to a single readable column. The comps only define
   the desktop view. */
@media (max-width: 1024px) {
  .bc-carousel__label[class][class] { letter-spacing: 0.3em; }
  .bc-card { flex: 0 0 50%; max-width: 50%; }

  .bc-feature {
    aspect-ratio: auto;
    min-height: 0;
    padding: clamp(3rem, 8vw, 5rem) 6% clamp(3rem, 8vw, 5rem);
  }
  .bc-feature__label { position: static; display: block; margin: 0 0 1.5rem; }
  .bc-feature__media { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 2rem; }
  .bc-feature__media figure { position: static; width: auto; height: auto; }
  .bc-feature__main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .bc-feature__alt { aspect-ratio: 16 / 9; }
  .bc-feature__swatch { aspect-ratio: 16 / 9; }
  .bc-feature__copy { position: static; width: auto; }
  .bc-feature[data-align="right"] .bc-feature__desc[class][class] p { text-align: left; }
  .bc-feature[data-align="right"] .bc-feature__actions { justify-content: flex-start; }
  .bc-feature[data-head="indent"] .bc-feature__name { padding-left: 0; }
  .bc-feature[data-head="center"] .bc-feature__name { text-align: left; }
}
@media (max-width: 640px) {
  .bc-card { flex: 0 0 100%; max-width: 100%; }
  .bc-hero { height: 70vh; min-height: 420px; }
  .bc-hero__title { top: calc(var(--bc-header-h, 140px) + 24px); }
  .bc-feature__media { grid-template-columns: 1fr; }
}

/* ============================================================
   CASCADE ENFORCEMENT
   Verified with CSS.getMatchedStylesForNode rather than assumed.

   Two separate problems were overriding the typography above:

   1. The theme and its mu-plugins set font-weight/letter-spacing/
      font-size on h1-h6, p, span etc. WITH !important. The block
      above only marked font-family as !important, so everything
      else lost - .bc-feature__name computed at weight 900 /
      0.02em, and .bc-feature__desc p collapsed to 0.68rem.
      Fixed by marking each declaration !important here.

   2. font-family cannot be won in CSS at all: a mu-plugin writes
      font-family:Tondu !important as an INLINE STYLE ATTRIBUTE,
      which outranks every stylesheet rule regardless of
      specificity. business-collection.js re-applies the correct
      family inline and keeps it there with a MutationObserver.
      The declarations here are the no-JS fallback.
   ============================================================ */
.bc-carousel__label[class][class][class][class][class][class] {
  font-size: clamp(0.85rem, 1.09vw, 21px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.41em !important;
  line-height: 1 !important;
  color: #fff !important;
}
.bc-card__name[class][class][class][class][class][class] {
  font-size: clamp(1rem, 1.5vw, 29px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  color: #fff !important;
}
.bc-card__cta[class][class][class][class][class][class] {
  font-size: clamp(0.8rem, 1.25vw, 24px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  color: var(--clr-accent, #009933) !important;
}
.bc-feature__label[class][class][class][class][class][class] {
  font-size: clamp(0.6rem, 0.78vw, 15px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.30em !important;
  color: #fff !important;
}
.bc-feature__name[class][class][class][class][class][class] {
  font-size: clamp(1.4rem, 2.24vw, 43px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.23em !important;
  line-height: 1 !important;
  color: #fff !important;
}
.bc-feature__desc[class][class][class][class][class][class] p {
  font-size: clamp(0.78rem, 1.15vw, 22px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.17em !important;
  line-height: 1.5 !important;
  color: #fff !important;
}
.bc-feature__cta[class][class][class][class][class][class] {
  font-size: clamp(0.85rem, 1.3vw, 25px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  color: var(--clr-accent, #009933) !important;
}

/* Children of the mono headings must carry the family too - see the note in
   business-collection.js. These are the no-JS fallback. */
.bc-feature__name[class][class][class][class][class][class] a,
.bc-carousel__label[class][class][class][class][class][class] sup,
.bc-card__name[class][class][class][class][class][class] a {
  font-family: 'Consola Mono', ui-monospace, monospace !important;
}

/* ============================================================
   DAILY RITUALS
   Reuses the .bc-carousel component. Only the card body differs
   from Business Collection, so those variants live here rather
   than in a second copy of the carousel.
   Geometry measured from comps 2/4/6/8 (panel top 444, label
   +22px, 4 cards across 1906 -> 25% each, section bg rgb(15,16,15)).
   ============================================================ */
.dr-main { background: #202120 !important; }

/* comp 1: the title is centred and spans ~53% of the viewport,
   narrower than the full-width Business Collection title */
.dr-hero__title { left: 23.5% !important; width: 53% !important; }

/* ---- full-bleed contextual shots (comps 3, 5, 7) ---- */
.dr-shot { width: 100%; line-height: 0; background: #202120; }
.dr-shot img {
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: cover;
  display: block;
}

/* ---- carousel panel ---- */
.bc-carousel--cart .bc-carousel__panel { background: #202120; }
/* each card sits on its own slightly lighter plate */
.dr-card .bc-card__media {
  position: relative;
  background: #1c1d1c;
  aspect-ratio: 430 / 280;
  align-items: center;
  margin-bottom: clamp(0.9rem, 1.8vw, 1.9rem);
}
.dr-card .bc-card__media img {
  max-height: 82%;
  width: auto;
  position: relative;
  z-index: 1;
}

/* comp: the product name is overlaid on the render, vertically centred */
.dr-card__name[class][class][class][class][class][class] {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0 !important;
  pointer-events: none;
  font-size: clamp(0.85rem, 1.35vw, 26px) !important;
  letter-spacing: 0.22em !important;
  text-shadow: none !important;   /* no chromatic-aberration glitch */
}

.dr-card__price[class][class][class][class][class][class] {
  display: block;
  text-align: center;
  font-family: 'Consola Mono', ui-monospace, monospace !important;
  font-size: clamp(0.75rem, 1.05vw, 20px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;   /* the agreed secondary-font tracking */
  color: #fff !important;
  margin: 0 0 clamp(0.4rem, 0.8vw, 0.8rem) !important;
  text-shadow: none !important;
}
.dr-card__price .woocommerce-Price-amount { color: inherit !important; }

.dr-card__cta[class][class][class][class][class][class] {
  display: block;
  text-align: center;
  font-size: clamp(0.8rem, 1.15vw, 22px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  color: var(--clr-accent, #009933) !important;
  text-shadow: none !important;
}

/* the heart sits over the plate, top-left */
.dr-card .bc-card__heart { top: 0.6rem; left: 1.4rem; }

/* No heading on this page may carry a text-shadow: the theme applies a
   multi-colour shadow that reads as chromatic aberration. */
.dr-main h1, .dr-main h2, .dr-main h3,
.dr-main .bc-carousel__label,
.dr-main .bc-card__name,
.dr-main .dr-card__price,
.dr-main .bc-card__cta {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

@media (max-width: 1024px) {
  .dr-hero__title { left: 8% !important; width: 84% !important; }
}

/* Comp 1: cap height 66px across a title 1018px wide (53.4% of a 1920
   viewport). With viewBox 0 0 1000 72 that needs font-size 62 user units;
   the shared 47 used by Business Collection rendered a 50px cap here. */
.dr-hero__title text { font-size: 62px !important; }

/* Comp 1 starts the hero photo BELOW the header bar rather than behind it, so
   the page reserves the header's real height. The Business Collection page
   deliberately does not do this (its body background is mid grey and showed as
   a band); here the page background is the site gray #202120 that the comps
   specify, so the reserved strip reads as the header bar. Height is reduced to
   match so the hero still fits one
   screen. */
.dr-main { padding-top: var(--bc-header-h, 140px); }
.dr-hero { height: calc(100vh - var(--bc-header-h, 140px)); }
/* title offset is now measured from the top of the photo, not the viewport:
   comp has the cap 62px below the image edge, less ~3px of leading in the SVG box */
.dr-hero__title { top: 59px !important; }
@media (max-width: 640px) {
  .dr-hero__title { top: 28px !important; }
}


/* ============================================================
   DAILY RITUALS — corrections
   ============================================================ */

/* (1) Header zigzag - handled by the header itself, no replacement strip.
   This block used to paint a substitute comb (a fixed 18px
   repeating-linear-gradient pinned at y140) because the header rendered
   transparent, which left its own clip-path teeth invisible against the page.
   The header now paints solid #000, so those clip-path teeth read correctly on
   their own and the substitute became a SECOND comb 18px lower down. Sitting
   below the header, its gaps exposed the hero photograph rather than the dark
   page, so the strip read as grey banding across the top of the image.
   Removed rather than recoloured: no tint makes a duplicate comb correct, and
   the teeth it was standing in for are now genuinely there. */

/* Wall Monuments needs no substitute comb either.
   It briefly did: its <main> carries the dr-main class, so it lost the shared
   strip when Daily Rituals did, and its header was still transparent at the
   top of the page - leaving the header's clip-path teeth nothing to read
   against and the page meeting its hero with no comb at all. The Wall
   Monuments header now paints solid #000 like the other two, so those teeth
   render on their own and the stand-in has been removed here as well. All
   three catalogue pages now draw their comb the same way: from the header's
   own clip-path, with nothing painted over the hero. */

/* (2)+(5) Hero shown whole, not cropped.
   The client's export carries the title in the top of the image, so any
   vertical crop cuts the wordmark. Height is driven by the image's own
   proportions instead of the viewport. */
.dr-hero {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}
.dr-hero .bc-hero__img {
  width: 100% !important;
  height: auto !important;
  object-fit: fill !important;   /* no crop: box already matches the image ratio */
  display: block !important;
}

/* (5) Section visualisations keep their full proportions too */
.dr-shot img {
  height: auto !important;
  max-height: none !important;
  object-fit: fill !important;
}

/* (3) No grey plate behind the product cards */
.dr-card .bc-card__media {
  background: transparent !important;
}

/* (4) Product name sits over the furniture, not the middle of the frame */
.dr-card__name[class][class][class][class][class][class] {
  top: 38% !important;
}


/* ============================================================
   WALL MONUMENTS
   The page carries the same dr-* classes as Daily Rituals, so every
   correction made there applies unchanged: gray section background,
   no per-product tile, raised name label, uncropped visuals and the
   header teeth strip. Only genuine differences live here.
   ============================================================ */

/* Comps 2-12 show THREE cards per view; Daily Rituals shows four. */
/* Business Collection shows the same pillars, but its <main> is bc-main only,
   so the three-up sizing is keyed off the section instead of the page
   wrapper. Extending these selectors rather than copying the block keeps one
   definition of the tall-card geometry, and the reasoning in the comment
   above applies unchanged to both pages. */
.wm-main .bc-card,
.bc-pillars .bc-card { flex: 0 0 33.3333%; max-width: 33.3333%; }

/* These are wall-mounted panels and pillars rather than furniture standing on
   a floor, so the card frame is taller and the render is centred within it.

   The image is sized to FILL the box and then contained, rather than being
   given a percentage max-height. A percentage height resolves against an
   indefinite parent, which let each render drive its own box: card heights
   came out between 364px and 760px, prices fell out of line, and the three
   tall pillars collapsed to 0x0 and vanished entirely. Filling the box makes
   every card identical and lets object-fit preserve each ratio. */
.wm-main .dr-card .bc-card__media,
.bc-pillars .dr-card .bc-card__media {
  aspect-ratio: 420 / 330;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wm-main .dr-card .bc-card__media img,
.bc-pillars .dr-card .bc-card__media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Several pieces are tall portraits, where the name reads better slightly
   lower than the 38% used for the low furniture on Daily Rituals. */
.wm-main .dr-card__name[class][class][class][class][class][class],
.bc-pillars .dr-card__name[class][class][class][class][class][class] { top: 46% !important; }

@media (max-width: 1024px) { .wm-main .bc-card, .bc-pillars .bc-card { flex: 0 0 50%; max-width: 50%; } }
@media (max-width: 640px)  { .wm-main .bc-card, .bc-pillars .bc-card { flex: 0 0 100%; max-width: 100%; } }


/* APEX centres its description and actions, where the existing feature
   sections are left or right aligned. Adding the variant rather than
   restyling the shared component keeps the other four untouched. */
.bc-feature[data-align="center"] .bc-feature__desc[class][class] p { text-align: center; }
.bc-feature[data-align="center"] .bc-feature__actions { justify-content: center; }
@media (max-width: 1024px) {
  .bc-feature[data-align="center"] .bc-feature__desc[class][class] p { text-align: left; }
  .bc-feature[data-align="center"] .bc-feature__actions { justify-content: flex-start; }
}