/* ==========================================================================
   Block library — Alkemico Pakistan
   Reusable modern block styles: hero, bento, zig-zag, cards, marquee,
   accordion, slider, CTA box, price matrix, contact/map.
   Built on top of assets/css/theme.css variables. Vanilla CSS/JS only.
   ========================================================================== */

.blk,
.blk * {
  font-family: var(--font-body);
}

/* "Order on WhatsApp" CTA buttons — solid WhatsApp green, same brand
   color as the nav button, instead of the generic blue --primary style. */
.btn--whatsapp {
  background: #25D366;
  border-color: #25D366;
  color: #ffffff;
}

/* Outline button placed on a dark/navy section (e.g. a CTA box on
   --color-dark-bg) — the base .btn--outline vars are tuned for a light
   background, so this swaps them to the dark-section text token.
   Previously duplicated as an inline style="..." block on ~30 buttons
   across the site; centralized here so it's one place to update. */
.btn--outline-on-dark {
  --btn-outline-border: var(--color-text-on-dark);
  --btn-outline-text: var(--color-text-on-dark);
  --btn-outline-bg-hover: rgba(255, 255, 255, 0.1);
  --btn-outline-text-hover: var(--color-text-on-dark);
  --btn-outline-border-hover: var(--color-text-on-dark);
}

.btn--whatsapp:hover,
.btn--whatsapp:focus {
  background: #1DA851;
  border-color: #1DA851;
  color: #ffffff;
}

/* Breadcrumb nav */
.breadcrumb-nav {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) 0;
}

.breadcrumb-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 6px;
  font-size: 0.8125rem;
}

.breadcrumb-nav__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-nav__link {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb-nav__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb-nav__current {
  color: var(--color-text);
  font-weight: 600;
}

.breadcrumb-nav__sep {
  color: var(--color-border);
}

/* Hero background — visibly distinct from both the white nav bar and the
   brand blue used everywhere else on the page. A warm, soft mint/cream
   gradient (fresh, "just-cleaned" feel) with two low-opacity blurred
   blobs for depth — easy on the eyes, not another shade of blue. */
.section--hero {
  position: relative;
  background: linear-gradient(155deg, #EAF7F1 0%, #FCFAF3 55%, #FFFFFF 100%);
  overflow: hidden;
  padding-top: calc(var(--space-8) * 1.6);
  padding-bottom: calc(var(--space-8) * 1.6);
}

@media (max-width: 900px) {
  .section--hero {
    padding-top: calc(var(--space-7) * 1.5);
    padding-bottom: calc(var(--space-7) * 1.5);
  }
}

.section--hero::before,
.section--hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.section--hero::before {
  width: 440px;
  height: 440px;
  top: -180px;
  right: -140px;
  background: rgba(38, 166, 133, 0.14);
}

.section--hero::after {
  width: 340px;
  height: 340px;
  bottom: -150px;
  left: -90px;
  background: rgba(255, 183, 94, 0.12);
}

.section--hero .section__inner {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Scroll-reveal — fade/slide-up on first entry into view.
   Respects prefers-reduced-motion (see js/blocks.js, which also skips the
   observer and shows everything immediately when that's set).
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Icons — inline SVG, used in place of images throughout the block library
   ========================================================================== */
.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 32px; height: 32px; }

/* Extra focus-visible polish for the custom interactive controls below
   (native buttons already inherit the global rule in theme.css, this just
   makes sure the ring shows clearly against every background it sits on) */
.faq-item__question:focus-visible,
.feature-bullet__head:focus-visible,
.t-slider__btn:focus-visible,
.bento-card:focus-visible,
.marquee:focus-visible {
  outline: var(--link-focus-outline);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   0. Announcement / utility bar
   ========================================================================== */
.announce-bar {
  background: var(--color-dark-bg);
  color: var(--color-text-on-dark);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem var(--space-4);
  letter-spacing: 0.01em;
}

.announce-bar a {
  color: #FFFFFF;
  text-decoration: underline;
}

/* ==========================================================================
   1. Split hero
   ========================================================================== */
.hero-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
}

.hero-split__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
}

.hero-split__title {
  font-size: var(--h1-size);
  margin-bottom: var(--space-4);
}

.hero-split__lede {
  font-size: var(--p-size-lead);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* .hero-split__lede sets its own (dark-on-light) color, which otherwise
   beats the dark-section text flip further down in theme.css — bundles.php
   puts this lede inside a .section--dark-gradient block, so override it
   back to the light-on-dark muted color there. */
.section--dark-gradient .hero-split__lede {
  color: var(--color-text-on-dark-muted);
}

.hero-split__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

/* Visual side — a small bento of product "chips" standing in for photography */
.hero-split__visual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.hero-split__chip {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.hero-split__chip strong { display: block; color: var(--color-text); font-size: 1rem; }
.hero-split__chip span { display: block; color: var(--color-text-muted); font-size: 0.8125rem; margin-top: 2px; }

.hero-split__visual--image-only {
  grid-template-columns: 1fr;
}

/* No card box around the hero photo — just the image itself, no
   background, border, shadow or padding. */
.hero-split__chip--image {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

/* Product pages — bottle photo, capped to roughly the height of the text
   column beside it instead of filling the full width (which made a tall
   600x900 photo run noticeably taller than the copy). */
.hero-split__chip--image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  margin: 0 auto;
}

/* Homepage hero only — the 8-product collage photo is square, so this
   crops/rounds it and fills the column width; product detail pages use
   the base rule above and show the bottle photo in full, height-capped. */
.hero-split__chip--image-square img {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Hero slideshow — crossfading bundle-category photos (bundles.php hero).
   Sized to the content container (not full-bleed) and tall; images are
   shown in full with object-fit: contain, never cropped — the box
   letterboxes around whichever slide is a different aspect ratio. */
.hero-slideshow {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

/* The wrap carries tabindex="0" (for arrow-key navigation), which gives
   it the browser's default focus outline — a thin rectangular line that
   doesn't match the box's rounded corners, showing as a stray line
   along one edge. Only show it for real keyboard focus, not mouse/touch
   interaction, and round + offset it to trace the box cleanly. */
.hero-slideshow-wrap {
  outline: none;
  border-radius: var(--radius-lg);
}

.hero-slideshow-wrap:focus {
  outline: none;
}

.hero-slideshow-wrap:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

/* Hero text, stacked full-width below the slideshow */
.hero-stacked {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding-top: var(--space-7);
}

.hero-stacked .hero-split__actions {
  justify-content: center;
}

/* Everything in this block sits on the navy .section--dark-gradient
   (bundles.php) — force all text, including the inline link and the
   outline button, to white/near-white instead of the default link
   blue or a visited-link purple. */
.hero-stacked a:not(.btn) {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.hero-stacked a:not(.btn):hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

.hero-stacked .btn--outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

.hero-stacked .btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: #ffffff;
}

.hero-slideshow__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}

.hero-slideshow__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-slideshow__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-slideshow__caption {
  position: absolute;
  right: var(--space-4);
  top: var(--space-4);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

/* Bullets sit in normal flow BELOW the slideshow box, not overlaid on
   the images — a plain row of dots under the slider. */
.hero-slideshow__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.hero-slideshow__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(21, 101, 192, 0.25); /* var(--color-primary) at low opacity, readable on the light hero gradient */
  cursor: pointer;
}

.hero-slideshow__dot.is-active {
  background: var(--color-primary);
}

/* The slideshow's own block — reuses the homepage hero's soft gradient
   (.section--hero) but kept as its own section, visually separated
   from whatever section follows it. */
.hero-slideshow-block {
  /* Override .section--hero's large padding — tighter and equal
     top/bottom, instead of inheriting the hero's big vertical gap. */
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

/* .section--hero's decorative blurred blobs (teal top-right, amber
   bottom-left) were meant for open text space — here they sit right
   behind the photo box and peek through as a faint colored line along
   its rounded edge. Not wanted on a full-bleed photo block. */
.hero-slideshow-block::before,
.hero-slideshow-block::after {
  display: none;
}

@media (max-width: 900px) {
  .hero-slideshow-block {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
}


/* ==========================================================================
   2. Trust badge marquee
   ========================================================================== */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* Trust marquee strip — a solid brand-blue band so it stands out clearly
   from the white/near-white sections above and below it. */
.section--marquee {
  background: var(--color-primary, #1565C0);
}

.section--marquee .marquee__item {
  color: #ffffff;
}

.section--marquee .marquee__item .icon {
  color: #8FD6A8;
}

.marquee__track {
  display: flex;
  gap: var(--space-8);
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.marquee__item svg {
  width: 18px;
  height: 18px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ==========================================================================
   3. Bento grid (products)
   ========================================================================== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Even variant: all 8 product cards render at one uniform height — no
   wide/accent size variants, so the grid reads as a clean 4x2 (2x4 on
   mobile) set of equally tall badges. */
.bento-grid--even {
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}
.bento-grid--even .bento-card { height: 100%; }

/* Two-card variant — for a page that features a short, curated pick of
   products (e.g. a "kitchen cleaning" collection page) rather than the
   full 8-product catalog grid. */
.bento-grid--pair {
  grid-template-columns: repeat(2, 1fr);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 560px) {
  .bento-grid--pair { grid-template-columns: 1fr; max-width: 320px; }
}

.bento-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-5);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.bento-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
  border-color: var(--color-primary);
}

.bento-card--wide  { grid-column: span 2; }
.bento-card--tall  { grid-row: span 2; }
.bento-card--accent { background: var(--color-primary); }
.bento-card--accent .bento-card__name,
.bento-card--accent .bento-card__type { color: #FFFFFF; }
.bento-card--accent .bento-card__price { color: #E3F2FD; }

.bento-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text);
  margin: 0 0 4px;
}

.bento-card__type {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin: 0;
}

.bento-card__price {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1rem;
  margin-top: var(--space-4);
}

/* Product photo slot — shows an inline SVG placeholder icon until a real
   photo is dropped in at the path the <img> already points to. If the
   image loads, it covers the icon; if it 404s, the onerror handler in
   index.php hides the broken <img> and the icon stays visible. */
.bento-card__media {
  position: relative;
  /* Product photos are 600x900 (2:3 portrait); match the slot to that
     ratio so the whole bottle shows without cropping. */
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-surface-alt), #E7EEF4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.bento-card--accent .bento-card__media {
  background: rgba(255, 255, 255, 0.15);
}

.bento-card__media .icon {
  color: var(--color-border);
  width: 36px;
  height: 36px;
}

.bento-card--accent .bento-card__media .icon {
  color: rgba(255, 255, 255, 0.5);
}

.bento-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bento-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
}

/* ==========================================================================
   4. Zig-zag alternating rows
   ========================================================================== */
.zigzag-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-6) 0;
}

.zigzag-row:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.zigzag-row--reverse .zigzag-row__visual {
  order: 2;
}

.zigzag-row__visual {
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--color-primary-dark);
  text-align: center;
  padding: var(--space-5);
  transition: transform 0.3s ease;
}

.zigzag-row:hover .zigzag-row__visual {
  transform: translateY(-4px);
}

.zigzag-row__visual .icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
}

.zigzag-row__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-secondary-light);
  color: var(--color-secondary-dark);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   5. Card grid (local factors / feature cards)
   ========================================================================== */
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.card-grid-3 .card .icon {
  color: var(--color-secondary);
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   6. Centered focus block
   ========================================================================== */
.focus-block {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

/* Left-aligned variant — icon, heading, and body all left-aligned instead
   of centered. Scoped as a modifier rather than changed on .focus-block
   itself, since that base class is shared across many pages that were
   deliberately built centered. */
.focus-block--left {
  text-align: left;
}

.focus-block--left > .icon {
  margin-left: 0;
  margin-right: auto;
}

.focus-block > .icon {
  /* SVG icons are display:block sitewide (see img, svg, video rule in
     theme.css), so text-align:center on the parent never actually
     centers them — margin:auto is what does the real centering here. */
  color: var(--color-primary);
  margin: 0 auto var(--space-3);
}

/* Generic: an icon as the first child of a .card (small-bento / feature cards) */
.card > .icon:first-child {
  color: var(--color-primary);
  display: block;
}

.focus-block__list {
  text-align: left;
  display: inline-block;
  margin: var(--space-5) auto 0;
}

.focus-block__list li {
  margin-bottom: var(--space-3);
}

/* Two-up variant: a pair of focus-blocks side by side, used where a page
   needs to give two related keywords/products equal dedicated treatment
   instead of favoring one with its own section and leaving the other to
   a single FAQ line. Each child keeps .focus-block's own centering. */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 960px;
  margin: 0 auto;
}

.focus-grid > .focus-block {
  max-width: none;
}

/* Product link grid — a compact grid of linked product names, used
   where a page needs to point to the full product catalogue without
   the price/image weight of a product card. Distinct from
   .focus-block__list (a plain inline-block bullet list not built for
   a multi-column grid) and from .card-grid-3 (built around full
   product/testimonial cards) — this is its own small block. */
.product-link-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  max-width: 640px;
  margin: var(--space-5) auto 0;
}

.product-link-grid a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.product-link-grid a:hover {
  border-color: var(--color-secondary);
  background-color: var(--color-surface-hover, rgba(0,0,0,0.02));
}

.product-link-grid strong {
  display: block;
  color: var(--color-text, inherit);
}

.product-link-grid span {
  font-size: 0.875rem;
}

@media (max-width: 640px) {
  .product-link-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .focus-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ==========================================================================
   7. CTA box
   ========================================================================== */
.cta-box {
  background: var(--color-dark-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.cta-box--gradient {
  background: linear-gradient(135deg, #0B1F3A 0%, #12315C 100%);
}

.cta-box__title {
  color: #FFFFFF;
  margin-bottom: var(--space-2);
}

.cta-box__text {
  color: var(--color-text-on-dark-muted);
  margin: 0;
}

.cta-box__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* CTA box used with a numbered-steps list (order flow) */
.cta-box__steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-2);
}

.cta-box__steps li {
  counter-increment: step;
  color: var(--color-text-on-dark-muted);
  padding-left: 2rem;
  position: relative;
}

.cta-box__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   7b. How-to steps — a numbered list for light/tinted sections. New block:
   .cta-box__steps above only works on the dark cta-box background; guide
   content (how-to instructions) sits on ordinary light sections and needs
   its own numbered-circle treatment with regular body text color.
   ========================================================================== */
.howto-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-5);
}

.howto-steps li {
  counter-increment: step;
  padding-left: 2.75rem;
  position: relative;
}

.howto-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.howto-steps li strong {
  display: block;
  margin-bottom: 0.25rem;
}

/* ==========================================================================
   8. Testimonial slider
   ========================================================================== */
.t-slider {
  position: relative;
}

.t-slider__track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
  list-style: none;
  margin: 0;
}

.t-slider__track::-webkit-scrollbar { display: none; }

.t-slider__card {
  scroll-snap-align: start;
  flex: 0 0 calc(33.333% - var(--space-5) * 2 / 3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.t-slider__stars {
  color: var(--color-accent);
  font-size: 0.875rem;
  margin-bottom: var(--space-3);
  letter-spacing: 2px;
}

/* Avatar — CSS shape (initials in a circle), no photo needed/implied */
.t-slider__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.t-slider__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  flex-shrink: 0;
}

.t-slider__quote {
  font-style: italic;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.t-slider__cite {
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.t-slider__controls {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-5);
}

.t-slider__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.t-slider__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.t-slider__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.t-slider__btn:disabled:hover {
  border-color: var(--color-border);
  color: var(--color-text);
}

/* ==========================================================================
   9. Pricing / price matrix table
   ========================================================================== */
.price-matrix-wrap {
  overflow: hidden;
  overflow-x: auto;
  margin-top: var(--space-5);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-md);
}

.price-matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
}

.price-matrix th {
  text-align: left;
  background: var(--color-primary);
  color: #FFFFFF;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
}

.price-matrix td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.9375rem;
}

.price-matrix tr:last-child td { border-bottom: none; }
.price-matrix tr:nth-child(even) td { background: var(--color-surface-alt); }
.price-matrix td.price-matrix__price { font-weight: 700; color: var(--color-primary); white-space: nowrap; }

/* ==========================================================================
   10. FAQ accordion
   ========================================================================== */
.faq-accordion {
  max-width: 820px;
  margin: var(--space-6) auto 0;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 0.2s ease;
  line-height: 1;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

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

.faq-item__answer-inner {
  overflow: hidden;
}

.faq-item__answer p {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

/* ==========================================================================
   11. Interactive feature bullets (click to expand)
   ========================================================================== */
.feature-bullets {
  margin-top: var(--space-6);
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.feature-bullet {
  background: var(--color-surface);
}

.feature-bullet__head {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
}

.feature-bullet__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.feature-bullet.is-active .feature-bullet__dot {
  background: var(--color-secondary);
}

.feature-bullet__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.feature-bullet.is-active .feature-bullet__body {
  grid-template-rows: 1fr;
}

.feature-bullet__body-inner {
  overflow: hidden;
}

.feature-bullet__body p {
  margin: 0 0 var(--space-4);
  padding: 0 var(--space-5) 0 calc(var(--space-5) + 10px + var(--space-3));
  color: var(--color-text-muted);
}

/* ==========================================================================
   12. Contact & map block
   ========================================================================== */
.contact-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}

.contact-map__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-map__list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-3);
}

.contact-map__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-muted);
}

.contact-map__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  min-height: 280px;
}

.contact-map__frame iframe {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
  display: block;
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-stacked { padding-top: var(--space-6); }
  /* Was order:-1, which pushed the image above the heading/text on
     mobile for every hero-split (homepage, about, and every product
     page) — text should read first, image second, matching source
     order and normal reading flow. */
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-card--wide { grid-column: span 2; }
  .bento-card--tall { grid-row: span 1; }
  .zigzag-row { grid-template-columns: 1fr; }
  .zigzag-row--reverse .zigzag-row__visual { order: -1; }
  .card-grid-3 { grid-template-columns: 1fr 1fr; }
  .t-slider__card { flex-basis: calc(50% - var(--space-5) / 2); }
  .contact-map { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-grid--pair { grid-template-columns: 1fr; max-width: 320px; }
  .bento-card--wide { grid-column: span 2; }
  .card-grid-3 { grid-template-columns: 1fr; }
  .t-slider__card { flex-basis: 88%; }
  .cta-box { flex-direction: column; align-items: flex-start; text-align: left; }
  .price-matrix th,
  .price-matrix td { padding: var(--space-2) var(--space-3); font-size: 0.85rem; }
}

/* ==========================================================================
   Category jump-nav (Shop All / Products page) — pill links styled off the
   existing .badge visual language, but clickable and with hover/active
   state. New block: no existing component does in-page anchor navigation.
   ========================================================================== */
.category-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
}

.category-nav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.9375rem;
  font-family: inherit;
  text-decoration: none;
  /* A visible border instead of transparent — the pale fill alone read
     as washed-out against a white page. */
  border: 1px solid rgba(21, 101, 192, 0.35);
  box-shadow: 0 1px 2px rgba(11, 31, 58, 0.06);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Active filter — same visual treatment as hover/focus so the current
   selection reads clearly without a third color introduced. */
.category-nav__item.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.35);
}

/* A product card hidden by the category filter. Kept in the DOM (not
   removed) so no re-render/layout thrash is needed when switching
   filters back and forth. */
.bento-card.is-filtered-out {
  display: none;
}

.category-nav__item svg {
  width: 16px;
  height: 16px;
  display: block;
}

.category-nav__item:hover,
.category-nav__item:focus {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.35);
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .category-nav { gap: var(--space-2); }
  .category-nav__item { padding: 0.45rem 0.85rem; font-size: 0.875rem; }
}

/* ==========================================================================
   Clickable .card variant — for a card-grid-3 (or similar) card that is
   itself a link to whatever it describes, instead of holding a separate
   text link inside.
   ========================================================================== */
a.card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* ==========================================================================
   Safety notice — a dedicated block for acid/bleach-based products, built
   to actually stand out (padding, border, radius, shadow, a warning badge)
   instead of the plain-text .focus-block it was previously bolted onto
   with inline styles.
   ========================================================================== */
.safety-notice {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--color-error-light);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 6px 20px rgba(198, 40, 40, 0.18);
}

/* Left-aligned variant — kept available for reuse, same pattern as
   .focus-block--left below. Not applied by default (safety notices read
   better centered), but here if a future page needs it. */
.safety-notice--left {
  text-align: left;
}

.safety-notice--left .icon {
  margin-left: 0;
  margin-right: auto;
}

.safety-notice__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-error);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: var(--space-4);
}

.safety-notice .icon {
  /* SVG is display:block sitewide, so text-align:center alone never
     centers it — margin:auto does the actual centering. */
  color: var(--color-error);
  margin: 0 auto var(--space-3);
}

.safety-notice h2 {
  color: var(--color-error);
  margin-bottom: var(--space-4);
}

/* ---------------------------------------------------------------------
   Checklist grid — a numbered buying/decision checklist, two columns
   on desktop. Built for car-wash-shampoo-guide.php's "what to look
   for" section; distinct from .card-grid-3 because each item needs a
   number badge and left-aligned text rather than a centered icon card.
   --------------------------------------------------------------------- */
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  max-width: 880px;
  margin: 0 auto;
}

.checklist-grid__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
}

.checklist-grid__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
}

.checklist-grid__item h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
}

.checklist-grid__item p {
  margin: 0;
}

@media (max-width: 640px) {
  .checklist-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Product banner — a single full-width lifestyle/use-case image on a
   product page. New block: no existing component handles a plain
   edge-to-edge image with the card's rounded-corner/shadow treatment.
   --------------------------------------------------------------------- */
.product-banner {
  max-width: 1100px;
  margin: 0 auto;
}

.product-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
}