/* ==========================================================================
   Aayam Technovations — Components
   Header, nav, mega menu, drawer, hero, cards, CTA bands, footer, flash,
   sticky mobile bar. Every class is `ay-` prefixed so it cannot collide with
   the legacy 167KB style.css still loaded on legacy pages.
   ========================================================================== */

/* ==========================================================================
   Top utility bar
   ========================================================================== */
.ay-topbar {
  background: var(--ay-ink);
  color: var(--ay-text-on-invert);
  font-size: var(--ay-fs-xs);
}
.ay-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ay-5);
  min-height: 42px;
  padding-block: var(--ay-2);
}
.ay-topbar__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ay-5);
}
.ay-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ay-2);
  color: var(--ay-text-on-invert-muted);
  transition: color var(--ay-dur-1) var(--ay-ease);
}
.ay-topbar__item i { color: var(--ay-red); font-size: 1.05em; }
.ay-topbar__item:hover { color: #fff; }
/* tel:/mailto: links set their own colour rather than inheriting the
   topbar's, so once visited they need their own :visited companion -- the
   base ay-page rule reads inherit off the parent instead. */
.ay-topbar__item:visited { color: var(--ay-text-on-invert-muted); }
.ay-topbar__socials { display: flex; gap: var(--ay-1); }
.ay-topbar__socials a {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ay-text-on-invert-muted);
  transition: background-color var(--ay-dur-1) var(--ay-ease), color var(--ay-dur-1) var(--ay-ease);
}
.ay-topbar__socials a:visited { color: var(--ay-text-on-invert-muted); }
.ay-topbar__socials a:hover { background: var(--ay-red); color: #fff; }
.ay-topbar__socials a[aria-label="WhatsApp"]:hover { background: var(--ay-wa); }

/* The location line is the first thing to go when the bar gets tight. */
@media (max-width: 1199px) { .ay-topbar__loc { display: none; } }
@media (max-width: 991px) {
  .ay-topbar__list { gap: var(--ay-4); }
  .ay-topbar__inner { min-height: 38px; }
}
@media (max-width: 767px) {
  .ay-topbar { display: none; }
}

/* ==========================================================================
   Header
   The header is LIGHT because the Aayam logo has a black wordmark and no
   light-background variant exists. logo-reversed.png is used on dark surfaces.
   ========================================================================== */
/* Scroll sentinel for the sticky-header observer. It must be OUT OF FLOW:
   as an in-flow 1px block it inherited the white page background and drew a
   visible white hairline above the dark top bar. Absolute keeps it scrolling
   with the document so the observer still fires at the same point. */
.ay-header-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

.ay-header {
  position: sticky;
  top: 0;
  z-index: var(--ay-z-header);
  background: var(--ay-white);
  border-bottom: 1px solid var(--ay-border);
  transition: box-shadow var(--ay-dur-2) var(--ay-ease), background-color var(--ay-dur-2) var(--ay-ease);
}
.ay-header.is-stuck {
  box-shadow: var(--ay-shadow-2);
  border-bottom-color: transparent;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.6) blur(10px);
}

/* The bar gets shorter as the viewport does, so it never eats the fold. */
@media (max-width: 991px) {
  .ay-header { --ay-header-h: 72px; --ay-header-h-stuck: 62px; }
}
@media (max-width: 575px) {
  .ay-header { --ay-header-h: 66px; --ay-header-h-stuck: 58px; }
}

.ay-header__inner {
  position: relative;              /* containing block for the mega panel */
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: var(--ay-header-h);
  transition: min-height var(--ay-dur-2) var(--ay-ease);
}
.ay-header.is-stuck .ay-header__inner { min-height: var(--ay-header-h-stuck); }

.ay-logo { flex: none; display: block; }
.ay-logo img {
  height: clamp(42px, 3.4vw, 52px);
  width: auto;
  transition: height var(--ay-dur-2) var(--ay-ease);
}
.ay-header.is-stuck .ay-logo img { height: clamp(36px, 2.9vw, 44px); }

.ay-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--ay-3);
  flex: none;
}

/* --- WhatsApp action ---------------------------------------------------- */
.ay-wa {
  display: inline-flex;
  align-items: center;
  gap: var(--ay-3);
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--ay-border);
  border-radius: var(--ay-r-pill);
  background: var(--ay-white);
  transition:
    border-color var(--ay-dur-1) var(--ay-ease),
    box-shadow var(--ay-dur-2) var(--ay-ease),
    transform var(--ay-dur-1) var(--ay-ease);
}
.ay-wa:hover {
  border-color: var(--ay-wa);
  box-shadow: 0 6px 18px rgba(37, 211, 102, .22);
  transform: translateY(-1px);
}
.ay-wa:focus-visible { outline: none; box-shadow: var(--ay-focus); }

.ay-wa__icon {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ay-wa);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
}
.ay-wa__text { display: block; line-height: 1.25; }
.ay-wa__label {
  display: block;
  font-size: 10.5px;
  letter-spacing: var(--ay-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ay-text-muted);
  white-space: nowrap;
}
.ay-wa__value {
  display: block;
  font-weight: var(--ay-fw-bold);
  font-size: var(--ay-fs-sm);
  color: var(--ay-text);
  white-space: nowrap;
}

/* Below the nav breakpoint the label is dropped and the control becomes a
   compact circular icon button, so the header never crowds or wraps. */
@media (max-width: 1279px) {
  .ay-wa { padding: 0; border-color: transparent; background: transparent; }
  .ay-wa__text { display: none; }
  .ay-wa:hover { box-shadow: none; }
  .ay-wa__icon { width: 44px; height: 44px; font-size: 1.35rem; }
}

/* --- Header CTA --------------------------------------------------------- */
.ay-header__cta { white-space: nowrap; }
.ay-header__cta-short { display: none; }

@media (max-width: 1439px) {
  .ay-header__cta-long { display: none; }
  .ay-header__cta-short { display: inline; }
}
/* The sticky mobile bar already carries an Enquire action on phones. */
@media (max-width: 767px) {
  .ay-header__cta { display: none; }
}

/* ==========================================================================
   Desktop navigation
   ========================================================================== */
.ay-nav { display: flex; align-items: center; }
.ay-nav__list { display: flex; align-items: center; gap: var(--ay-1); }
.ay-nav__item { position: relative; }
/* Hands the containing block to .ay-header__inner so the mega panel can span
   the full header width — see the .ay-mega block below. */
.ay-nav__item--mega { position: static; }

.ay-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ay-2);
  padding: 10px 14px;
  border-radius: var(--ay-r-sm);
  font-size: var(--ay-fs-sm);
  font-weight: var(--ay-fw-medium);
  color: var(--ay-text);
  white-space: nowrap;
  transition: color var(--ay-dur-1) var(--ay-ease);
}
.ay-nav__link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--ay-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ay-dur-2) var(--ay-ease);
}
.ay-nav__link:hover,
.ay-nav__link[aria-expanded="true"],
.ay-nav__item.is-active > .ay-nav__link { color: var(--ay-accent-text); }
.ay-nav__link:hover::after,
.ay-nav__item.is-active > .ay-nav__link::after { transform: scaleX(1); }
.ay-nav__link:focus-visible { outline: none; box-shadow: var(--ay-focus); }

.ay-nav__caret {
  font-size: .7em;
  transition: transform var(--ay-dur-2) var(--ay-ease);
}
.ay-nav__link[aria-expanded="true"] .ay-nav__caret { transform: rotate(180deg); }

@media (max-width: 1199px) {
  .ay-nav { display: none; }
}

/* ==========================================================================
   Mega menu
   ========================================================================== */
/* The panel is positioned against .ay-header__inner rather than the nav item,
   so it aligns edge-to-edge with the header content instead of being centred
   on the "Our Solutions" trigger (which pushed it off toward the viewport
   edge). .ay-nav__item--mega is made static to hand over the containing block;
   .ay-nav__link keeps its own position so the active underline still anchors
   to the link. */
.ay-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--ay-ink);
  border-top: 3px solid var(--ay-red);
  border-radius: 0 0 var(--ay-r-lg) var(--ay-r-lg);
  box-shadow: var(--ay-shadow-3);
  padding: var(--ay-6);
  display: flex;
  gap: var(--ay-6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity var(--ay-dur-2) var(--ay-ease),
    transform var(--ay-dur-2) var(--ay-ease),
    visibility var(--ay-dur-2);
  z-index: 5;
  /* A category with many sub-categories used to be chunked into the same
     column as one with none, so one column ran far longer than the others
     and pushed the whole panel taller than the viewport -- scrolling the
     page to reach the rest of it scrolled the header away too, so the menu
     read as broken rather than just long. The safety net stays in case a
     future catalogue still overflows a short viewport. */
  max-height: calc(100vh - var(--ay-header-h) - var(--ay-8));
  overflow-y: auto;
  /* Themed rather than left as the browser's default light grey bar, which
     read as an unstyled leftover against the dark panel. */
  scrollbar-width: thin;
  scrollbar-color: var(--ay-red) var(--ay-ink-700);
}
.ay-mega::-webkit-scrollbar { width: 10px; }
.ay-mega::-webkit-scrollbar-track { background: var(--ay-ink-700); border-radius: 999px; }
.ay-mega::-webkit-scrollbar-thumb {
  background: var(--ay-red);
  border-radius: 999px;
  border: 2px solid var(--ay-ink-700);
}
.ay-mega::-webkit-scrollbar-thumb:hover { background: #FF6B6B; }
.ay-nav__item.is-open .ay-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Balanced CSS columns, not three server-chunked buckets of an equal
   *count* of groups: a flow layout evens out the total *height* instead, so
   the column holding Electronic Safety & Security's four children no longer
   runs twice as long as the one holding a single childless category. */
.ay-mega__cols {
  flex: 1 1 auto;
  min-width: 0;
  column-count: 3;
  column-gap: var(--ay-6);
  /* Left un-stretched on purpose: .ay-mega is flex with the default
     align-items: stretch, which otherwise pins this to the panel's own
     max-height. A bounded height on a multi-column box makes the browser
     add columns sideways to fit whatever doesn't fit vertically instead of
     respecting column-count -- with enough categories that meant a 4th,
     5th, 6th column running off the right edge instead of the menu simply
     scrolling. Sized to its own content, 3 columns run exactly as tall as
     they need and the panel's overflow-y: auto scrolls that instead. */
  align-self: flex-start;
}
.ay-mega__group {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.ay-mega__group + .ay-mega__group { margin-top: var(--ay-5); }
.ay-mega__title {
  font-family: var(--ay-font);
  font-size: var(--ay-fs-xs);
  font-weight: var(--ay-fw-bold);
  letter-spacing: var(--ay-tracking-eyebrow);
  text-transform: uppercase;
  color: #FF6B6B;
  padding-bottom: var(--ay-2);
  margin-bottom: var(--ay-2);
  display: block;
  position: relative;
}
.ay-mega__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  background: var(--ay-red);
}
a.ay-mega__title { transition: color var(--ay-dur-1) var(--ay-ease); }
a.ay-mega__title:hover { color: #fff; }
/* Sets its own colour rather than inheriting the (unset) dark panel's, so a
   visited category heading needs its own :visited companion too. */
a.ay-mega__title:visited { color: #FF6B6B; }

/* A category with no sub-categories is a link, not a section heading, so it
   loses the underline rule and gains an arrow instead. */
.ay-mega__title--solo {
  display: inline-flex;
  align-items: center;
  gap: var(--ay-2);
  padding-bottom: 0;
  margin-bottom: 0;
}
.ay-mega__title--solo::after { display: none; }
.ay-mega__title--solo i {
  font-size: .85em;
  transition: transform var(--ay-dur-1) var(--ay-ease);
}
.ay-mega__title--solo:hover i { transform: translateX(3px); }

.ay-mega__link {
  display: flex;
  align-items: center;
  gap: var(--ay-2);
  padding: 9px 0;
  font-size: var(--ay-fs-sm);
  color: var(--ay-text-on-invert);
  transition: color var(--ay-dur-1) var(--ay-ease), transform var(--ay-dur-1) var(--ay-ease);
}
.ay-mega__link i {
  font-size: .7em;
  color: var(--ay-red);
  opacity: 0;
  transition: opacity var(--ay-dur-1) var(--ay-ease);
}
.ay-mega__link:visited { color: var(--ay-text-on-invert); }
.ay-mega__link:hover { color: #fff; transform: translateX(4px); }
.ay-mega__link:hover i { opacity: 1; }
.ay-mega__link:focus-visible { outline: none; box-shadow: var(--ay-focus); border-radius: var(--ay-r-sm); }

/* Feature rail — doubles as a lead source inside the nav */
.ay-mega__feature {
  flex: 0 0 290px;
  position: relative;
  border-radius: var(--ay-r);
  overflow: hidden;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--ay-5);
  background: var(--ay-ink-800);
  isolation: isolate;
}
.ay-mega__feature img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.ay-mega__feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 17, 21, .35) 0%, rgba(4, 17, 21, .94) 78%);
  z-index: -1;
}
.ay-mega__feature h4 { color: #fff; font-size: var(--ay-fs-xl); margin-bottom: var(--ay-2); }
.ay-mega__feature p {
  color: var(--ay-text-on-invert-muted);
  font-size: var(--ay-fs-sm);
  margin-bottom: var(--ay-4);
}

@media (max-width: 1399px) {
  /* Flex, not grid: .ay-mega__cols already takes up whatever the feature
     rail isn't using, so hiding the rail needs no companion column rule. */
  .ay-mega__feature { display: none; }
}

/* ==========================================================================
   Burger + mobile drawer
   ========================================================================== */
.ay-burger {
  display: none;
  width: 46px; height: 46px;
  border-radius: var(--ay-r-pill);
  border: 1px solid var(--ay-border);
  background: var(--ay-white);
  place-items: center;
  gap: 5px;
  flex-direction: column;
  flex: none;
  transition: border-color var(--ay-dur-1) var(--ay-ease), background-color var(--ay-dur-1) var(--ay-ease);
}
.ay-burger:hover { border-color: var(--ay-red); background: var(--ay-red-50); }
.ay-burger:focus-visible { outline: none; box-shadow: var(--ay-focus); }
.ay-burger span {
  display: block;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--ay-ink);
  transition: transform var(--ay-dur-2) var(--ay-ease), opacity var(--ay-dur-1) var(--ay-ease);
}
.ay-burger span:nth-child(2) { width: 14px; align-self: flex-start; margin-left: 13px; }
.ay-burger:hover span:nth-child(2) { width: 20px; margin-left: 0; align-self: center; }

@media (max-width: 1199px) {
  .ay-burger { display: flex; justify-content: center; }
}

.ay-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--ay-z-drawer);
  visibility: hidden;
  /* The closed panel sits at translateX(100%), i.e. one panel-width past the
     right edge. Because the drawer is position:fixed it is NOT clipped by
     body{overflow-x:hidden}, so without this the document grows ~340px wider
     than the viewport and the whole page scrolls sideways on mobile. */
  overflow: hidden;
}
.ay-drawer.is-open { visibility: visible; }

.ay-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 17, 21, .55);
  opacity: 0;
  transition: opacity var(--ay-dur-2) var(--ay-ease);
}
.ay-drawer.is-open .ay-drawer__scrim { opacity: 1; }

.ay-drawer__panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(400px, 88vw);
  background: var(--ay-white);
  box-shadow: var(--ay-shadow-3);
  transform: translateX(100%);
  transition: transform var(--ay-dur-3) var(--ay-ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ay-drawer.is-open .ay-drawer__panel { transform: translateX(0); }

.ay-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ay-4);
  padding: var(--ay-4) var(--ay-5);
  border-bottom: 1px solid var(--ay-border);
  position: sticky;
  top: 0;
  background: var(--ay-white);
  z-index: 1;
}
.ay-drawer__head img { height: 42px; width: auto; }
.ay-drawer__close {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ay-surface);
  font-size: 1.2rem;
  color: var(--ay-ink);
  flex: none;
}
.ay-drawer__close:hover { background: var(--ay-red); color: #fff; }

.ay-drawer__body { padding: var(--ay-4) var(--ay-5) var(--ay-8); }
.ay-drawer__foot {
  margin-top: auto;
  padding: var(--ay-5);
  border-top: 1px solid var(--ay-border);
  display: grid;
  gap: var(--ay-3);
}

.ay-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--ay-border);
  font-size: var(--ay-fs-base);
  font-weight: var(--ay-fw-medium);
  color: var(--ay-text);
  text-align: left;
}
.ay-drawer__link i { transition: transform var(--ay-dur-2) var(--ay-ease); color: var(--ay-text-muted); }
.ay-drawer__link[aria-expanded="true"] { color: var(--ay-accent-text); }
.ay-drawer__link[aria-expanded="true"] i { transform: rotate(180deg); }

/* Accordion panel — grid-template-rows animates to auto height cleanly */
.ay-acc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ay-dur-3) var(--ay-ease-out);
}
.ay-acc.is-open { grid-template-rows: 1fr; }
.ay-acc__inner { overflow: hidden; }
.ay-acc__inner a {
  display: block;
  padding: 11px 0 11px var(--ay-4);
  font-size: var(--ay-fs-sm);
  color: var(--ay-text-muted);
  border-left: 2px solid var(--ay-border);
  margin-left: var(--ay-2);
}
.ay-acc__inner a:hover { color: var(--ay-accent-text); border-left-color: var(--ay-red); }

/* Category heading: the theme red, bold, so it reads as a section title
   rather than another link in the list. Explicit :visited/:link colors so a
   clicked category doesn't fall back to the browser's default visited blue. */
.ay-acc__inner a.ay-acc__cat {
  color: var(--ay-accent-text);
  font-weight: var(--ay-fw-bold);
  border-left-color: var(--ay-red);
}
.ay-acc__inner a.ay-acc__cat:link,
.ay-acc__inner a.ay-acc__cat:visited { color: var(--ay-accent-text); }
.ay-acc__inner a.ay-acc__cat:hover { color: var(--ay-red); }

/* Sub-category: a lighter, normal-weight black -- plainly a child item, not
   another heading. */
.ay-acc__inner a.ay-acc__child {
  color: var(--ay-ink-700);
  font-weight: var(--ay-fw-normal);
}
.ay-acc__inner a.ay-acc__child:link,
.ay-acc__inner a.ay-acc__child:visited { color: var(--ay-ink-700); }
.ay-acc__inner a.ay-acc__child:hover { color: var(--ay-accent-text); }

/* ==========================================================================
   Hero slider
   ========================================================================== */
.ay-hero {
  position: relative;
  background: var(--ay-ink);
  isolation: isolate;
}
.ay-hero .swiper-container { width: 100%; }

.ay-hero__slide {
  position: relative;
  min-height: clamp(520px, 76vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ay-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Ken Burns — only on the active slide, and only if motion is allowed */
.swiper-slide-active .ay-hero__bg {
  animation: ay-kenburns 9s var(--ay-ease-out) forwards;
}
@keyframes ay-kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1.14); }
}
.ay-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(4, 17, 21, .94) 0%, rgba(4, 17, 21, .78) 42%, rgba(4, 17, 21, .28) 100%);
}

.ay-hero__content {
  max-width: 680px;
  padding-block: var(--ay-9);
  color: #fff;
}
.ay-hero__title {
  font-size: var(--ay-fs-hero);
  color: #fff;
  margin-bottom: var(--ay-4);
}
.ay-hero__title em {
  font-style: normal;
  color: var(--ay-red);
}
.ay-hero__text {
  font-size: var(--ay-fs-lg);
  color: rgba(255, 255, 255, .82);
  margin-bottom: var(--ay-6);
  max-width: 56ch;
}
.ay-hero__cta { display: flex; flex-wrap: wrap; gap: var(--ay-3); }

/* Slide-in animation driven by Swiper's active class.
   The hidden state is scoped to .swiper-initialized so that if Swiper fails to
   load or throws, the hero copy stays fully visible instead of vanishing. */
.swiper-initialized .ay-hero__anim > * {
  opacity: 0;
  transform: translateY(26px);
}
.swiper-initialized .swiper-slide-active .ay-hero__anim > * {
  animation: ay-slide-up var(--ay-dur-slide) var(--ay-ease-out) forwards;
}
.swiper-initialized .swiper-slide-active .ay-hero__anim > *:nth-child(1) { animation-delay: 120ms; }
.swiper-initialized .swiper-slide-active .ay-hero__anim > *:nth-child(2) { animation-delay: 240ms; }
.swiper-initialized .swiper-slide-active .ay-hero__anim > *:nth-child(3) { animation-delay: 360ms; }
.swiper-initialized .swiper-slide-active .ay-hero__anim > *:nth-child(4) { animation-delay: 480ms; }
@keyframes ay-slide-up {
  to { opacity: 1; transform: none; }
}

.ay-hero__dots {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(24px, 4vw, 48px);
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: var(--ay-2);
}
.ay-hero__dots .swiper-pagination-bullet {
  width: 34px; height: 4px;
  border-radius: var(--ay-r-pill);
  background: rgba(255, 255, 255, .34);
  opacity: 1;
  transition: background-color var(--ay-dur-2) var(--ay-ease), width var(--ay-dur-2) var(--ay-ease);
  cursor: pointer;
}
.ay-hero__dots .swiper-pagination-bullet-active {
  background: var(--ay-red);
  width: 54px;
}

.ay-hero__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 4;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff;
  font-size: 1.2rem;
  backdrop-filter: blur(6px);
  transition: background-color var(--ay-dur-1) var(--ay-ease);
}
.ay-hero__arrow:hover { background: var(--ay-red); border-color: var(--ay-red); }
.ay-hero__arrow--prev { left: clamp(12px, 2.5vw, 36px); }
.ay-hero__arrow--next { right: clamp(12px, 2.5vw, 36px); }
.ay-hero__arrow:focus-visible { outline: none; box-shadow: var(--ay-focus); }

@media (max-width: 991px) {
  .ay-hero__arrow { display: none; }
  .ay-hero__slide { min-height: 560px; }
  .ay-hero__slide::after {
    background: linear-gradient(180deg, rgba(4, 17, 21, .80) 0%, rgba(4, 17, 21, .92) 100%);
  }
}

/* Motion-safe: no Ken Burns, no stagger, content simply present */
@media (prefers-reduced-motion: reduce) {
  .swiper-slide-active .ay-hero__bg { animation: none; }
  .swiper-initialized .ay-hero__anim > * { opacity: 1; transform: none; }
  .swiper-initialized .swiper-slide-active .ay-hero__anim > * { animation: none; }
}

/* ==========================================================================
   Stat strip
   ========================================================================== */
.ay-statbar {
  position: relative;
  z-index: 3;
  margin-top: -64px;
  margin-bottom: calc(var(--ay-section-y) * -1 + var(--ay-8));
}
.ay-statbar__inner {
  background: var(--ay-white);
  border-radius: var(--ay-r-lg);
  box-shadow: var(--ay-shadow-2);
  padding: var(--ay-6) var(--ay-5);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ay-4);
}
.ay-stat { text-align: center; padding-inline: var(--ay-3); position: relative; }
.ay-stat + .ay-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 12%;
  width: 1px; height: 76%;
  background: var(--ay-border);
}
.ay-stat__num {
  font-family: var(--ay-font-display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: var(--ay-fw-bold);
  line-height: 1;
  color: var(--ay-ink);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.ay-stat__num .ay-stat__suffix { color: var(--ay-red); }
.ay-stat__label {
  margin-top: var(--ay-2);
  font-size: var(--ay-fs-sm);
  color: var(--ay-text-muted);
}
@media (max-width: 767px) {
  .ay-statbar { margin-top: -40px; margin-bottom: var(--ay-6); }
  .ay-statbar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ay-5); }
  .ay-stat:nth-child(odd)::before { display: none; }
}

/* ==========================================================================
   Logo wall / marquee
   ========================================================================== */
.ay-logowall { overflow: hidden; }
.ay-marquee {
  display: flex;
  overflow: hidden;
  gap: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ay-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--ay-7);
  padding-right: var(--ay-7);
  flex: none;
  animation: ay-marquee 38s linear infinite;
}
.ay-marquee:hover .ay-marquee__track { animation-play-state: paused; }
@keyframes ay-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .ay-marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
  .ay-marquee__track { animation: none; }
}
@media (max-width: 575.98px) {
  /* var(--ay-7) between logos already clamped down to their minimum width
     read as scattered on a narrow phone screen; tighten both to keep them
     reading as one wall of logos rather than isolated images. */
  .ay-marquee__track { gap: var(--ay-4); padding-right: var(--ay-4); }
  .ay-logo-item { width: clamp(100px, 28vw, 132px); height: clamp(60px, 16vw, 76px); }
}

.ay-logo-item {
  flex: none;
  /* Shrinks on narrow screens so more than two logos are on screen at once. */
  width: clamp(132px, 20vw, 190px);
  height: clamp(76px, 11vw, 104px);
  /* Flex, not grid. Under `display:grid; place-items:center` the row is sized
     by its content, so the images `height:100%` had no definite containing
     block to resolve against, silently fell back to `auto`, and every logo
     rendered at its natural aspect ratio and was clipped by the marquee. A
     flex container with a definite height has no such cycle. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ay-3);
}
/* Max dimensions with auto sizing: the logo files run from 182px to 1700px
   wide and from 16:9 to 1:1 to portrait, so the only rule that shows all of
   them whole is to cap both axes and let the shorter one size itself. Nothing
   is ever upscaled past its natural size either, which keeps small logos
   crisp instead of blurred. */
.ay-logo-item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--ay-dur-2) var(--ay-ease), opacity var(--ay-dur-2) var(--ay-ease);
}
.ay-logo-item:hover img { filter: none; opacity: 1; }

/* Static bordered grid used for brand partners */
.ay-logo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ay-4);
}
.ay-logo-card {
  /* Same reason as .ay-logo-item above: grid + place-items:center gave the
     image no definite height to resolve a percentage against. */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: var(--ay-4);
  background: var(--ay-white);
  border: 1px solid var(--ay-border);
  border-radius: var(--ay-r);
  transition: border-color var(--ay-dur-2) var(--ay-ease), box-shadow var(--ay-dur-2) var(--ay-ease), transform var(--ay-dur-2) var(--ay-ease);
}
.ay-logo-card:hover {
  border-color: transparent;
  box-shadow: var(--ay-shadow-2);
  transform: translateY(-3px);
}
.ay-logo-card img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 991px) { .ay-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .ay-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Cards
   ========================================================================== */
.ay-card {
  display: flex;
  flex-direction: column;
  background: var(--ay-white);
  border: 1px solid var(--ay-border);
  border-radius: var(--ay-r);
  overflow: hidden;
  transition: transform var(--ay-dur-2) var(--ay-ease), box-shadow var(--ay-dur-2) var(--ay-ease), border-color var(--ay-dur-2) var(--ay-ease);
}
.ay-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ay-shadow-2);
  border-color: transparent;
}

/* Solution card */
.ay-solution {
  position: relative;
  padding: var(--ay-6);
  gap: var(--ay-3);
  isolation: isolate;
}
.ay-solution::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ay-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--ay-dur-2) var(--ay-ease);
}
.ay-solution:hover::before { transform: scaleY(1); }
.ay-solution__icon {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: var(--ay-r-sm);
  background: var(--ay-red-50);
  color: var(--ay-red);
  font-size: 1.6rem;
  margin-bottom: var(--ay-2);
  transition: background-color var(--ay-dur-2) var(--ay-ease), color var(--ay-dur-2) var(--ay-ease);
}
.ay-solution:hover .ay-solution__icon { background: var(--ay-red); color: #fff; }
.ay-solution p { color: var(--ay-text-muted); font-size: var(--ay-fs-sm); }
.ay-solution .ay-btn { margin-top: auto; align-self: flex-start; }

/* Product card — no price slot by design: DB prices are masked (3***, 4*****) */
.ay-product__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ay-white);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--ay-4);
}
/* Uploaded product images range from 225px thumbnails to 2400x3300 portrait
   posters. Absolute inset:0 gives object-fit a definite box to work against --
   a percentage height inside the centred grid does not resolve reliably, which
   let tall posters render at full width and get cropped by overflow:hidden.
   No blend mode: many uploads are marketing flyers with coloured backgrounds
   that `multiply` would turn muddy. */
.ay-product__media img {
  position: absolute;
  inset: var(--ay-4);
  width: calc(100% - var(--ay-4) * 2);
  height: calc(100% - var(--ay-4) * 2);
  object-fit: contain;
  object-position: center;
  transition: transform var(--ay-dur-3) var(--ay-ease-out);
}
.ay-card:hover .ay-product__media img { transform: scale(1.06); }
.ay-product__body {
  padding: var(--ay-5);
  display: flex;
  flex-direction: column;
  gap: var(--ay-2);
  flex: 1;
}
.ay-product__cat {
  font-size: var(--ay-fs-xs);
  letter-spacing: var(--ay-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ay-accent-text);
  font-weight: var(--ay-fw-semi);
}
.ay-product__title { font-size: var(--ay-fs-lg); font-family: var(--ay-font); font-weight: var(--ay-fw-semi); }
.ay-product__title a:hover { color: var(--ay-accent-text); }
.ay-product__actions {
  margin-top: auto;
  padding-top: var(--ay-4);
  display: flex;
  gap: var(--ay-2);
  flex-wrap: wrap;
}

/* Step card — the "How it works" process */
.ay-step {
  position: relative;
  padding: var(--ay-6) var(--ay-5);
  background: var(--ay-white);
  border: 1px solid var(--ay-border);
  border-radius: var(--ay-r);
  display: grid;
  gap: var(--ay-3);
}
.ay-step__num {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ay-ink);
  color: #fff;
  font-family: var(--ay-font-display);
  font-weight: var(--ay-fw-bold);
  font-size: 1.2rem;
}
.ay-step p { color: var(--ay-text-muted); font-size: var(--ay-fs-sm); }
.ay-steps { position: relative; }
/* Connector line between steps on desktop */
@media (min-width: 992px) {
  .ay-steps::before {
    content: "";
    position: absolute;
    top: 88px;
    left: 12%; right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--ay-border) 0 8px, transparent 8px 16px);
    z-index: -1;
  }
}

/* Testimonial */
.ay-quote {
  padding: var(--ay-6);
  background: var(--ay-white);
  border: 1px solid var(--ay-border);
  border-radius: var(--ay-r);
  display: flex;
  flex-direction: column;
  gap: var(--ay-4);
  height: 100%;
}
.ay-quote__mark { color: var(--ay-red); font-size: 2rem; line-height: 1; }
.ay-quote__stars { display: flex; gap: 2px; color: var(--ay-accent); font-size: var(--ay-fs-sm); margin-top: calc(var(--ay-4) * -1); }
.ay-quote__text { color: var(--ay-text-muted); font-size: var(--ay-fs-sm); flex: 1; }
.ay-quote__text p { margin-bottom: var(--ay-2); }
.ay-quote__person { display: flex; align-items: center; gap: var(--ay-3); }
.ay-quote__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--ay-surface-2);
}
.ay-quote__meta { display: flex; flex-direction: column; gap: 1px; }
.ay-quote__name { font-weight: var(--ay-fw-semi); font-size: var(--ay-fs-sm); }
.ay-quote__role { font-size: var(--ay-fs-xs); color: var(--ay-text-muted); }

/* ==========================================================================
   Split (image + content)
   ========================================================================== */
.ay-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 991px) { .ay-split { grid-template-columns: minmax(0, 1fr); } }

.ay-split__media {
  position: relative;
  border-radius: var(--ay-r-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
}
.ay-split__media img { width: 100%; height: 100%; object-fit: cover; }

.ay-split__badge {
  position: absolute;
  right: var(--ay-5);
  bottom: var(--ay-5);
  background: var(--ay-red);
  color: #fff;
  padding: var(--ay-4) var(--ay-5);
  border-radius: var(--ay-r);
  box-shadow: var(--ay-shadow-red);
  text-align: center;
}
.ay-split__badge strong {
  display: block;
  font-family: var(--ay-font-display);
  font-size: 2rem;
  line-height: 1;
}
.ay-split__badge span { font-size: var(--ay-fs-xs); opacity: .9; }

.ay-checklist { display: grid; gap: var(--ay-4); }
.ay-checklist li { display: flex; gap: var(--ay-3); align-items: flex-start; }
.ay-checklist i {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ay-red-50);
  color: var(--ay-red);
  font-size: .85rem;
  margin-top: 2px;
}
.ay-checklist strong { display: block; margin-bottom: 2px; }
.ay-checklist p { color: var(--ay-text-muted); font-size: var(--ay-fs-sm); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.ay-cta {
  background: var(--ay-red);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.ay-cta::before {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
.ay-cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ay-6);
  flex-wrap: wrap;
}
.ay-cta h2 { color: #fff; margin-bottom: var(--ay-2); }
.ay-cta p { color: rgba(255, 255, 255, .88); max-width: 56ch; }
.ay-cta__actions { display: flex; gap: var(--ay-3); flex-wrap: wrap; }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.ay-pagehero {
  position: relative;
  background: var(--ay-ink);
  color: #fff;
  padding-block: clamp(56px, 8vw, 104px);
  isolation: isolate;
  overflow: hidden;
}
.ay-pagehero img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.ay-pagehero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(4, 17, 21, .93), rgba(4, 17, 21, .68));
}
.ay-pagehero h1 { color: #fff; margin-bottom: var(--ay-3); }

.ay-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ay-2);
  font-size: var(--ay-fs-sm);
  color: rgba(255, 255, 255, .7);
}
.ay-crumb a:hover { color: #fff; }
.ay-crumb li { display: inline-flex; align-items: center; gap: var(--ay-2); }
.ay-crumb li + li::before { content: "/"; color: rgba(255, 255, 255, .4); }
.ay-crumb [aria-current] { color: var(--ay-red); font-weight: var(--ay-fw-medium); }

/* ==========================================================================
   Empty state — load-bearing: most sub-category pages have no products yet
   ========================================================================== */
.ay-empty {
  text-align: center;
  padding: var(--ay-9) var(--ay-5);
  background: var(--ay-surface);
  border: 1px dashed var(--ay-border);
  border-radius: var(--ay-r-lg);
}
.ay-empty__icon {
  width: 72px; height: 72px;
  margin: 0 auto var(--ay-4);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ay-red-50);
  color: var(--ay-red);
  font-size: 1.8rem;
}
.ay-empty p { color: var(--ay-text-muted); margin: var(--ay-3) auto var(--ay-5); max-width: 52ch; }

/* ==========================================================================
   Flash messages
   ========================================================================== */
.ay-flash { padding-top: var(--ay-4); }
.ay-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ay-3);
  padding: var(--ay-4) var(--ay-5);
  border-radius: var(--ay-r);
  border: 1px solid;
  font-size: var(--ay-fs-sm);
}
.ay-alert i { font-size: 1.15rem; flex: none; margin-top: 1px; }
.ay-alert__close { margin-left: auto; font-size: 1.1rem; opacity: .6; flex: none; }
.ay-alert__close:hover { opacity: 1; }
.ay-alert--ok {
  background: #ECFAF0;
  border-color: #BFE9CC;
  color: #14663A;
}
.ay-alert--err {
  background: var(--ay-red-50);
  border-color: #F6C9C9;
  color: var(--ay-red-700);
}
.ay-alert ul { margin-top: var(--ay-1); }
.ay-alert li { list-style: disc; margin-left: var(--ay-4); }

/* ==========================================================================
   Sticky mobile action bar
   ========================================================================== */
.ay-mobilebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: calc(var(--ay-z-header) - 1);
  display: none;
  background: var(--ay-white);
  border-top: 1px solid var(--ay-border);
  box-shadow: 0 -6px 20px rgba(4, 17, 21, .10);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform var(--ay-dur-2) var(--ay-ease);
}
.ay-mobilebar.is-visible { transform: translateY(0); }
.ay-mobilebar__inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.ay-mobilebar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 11px 4px;
  font-size: 11px;
  font-weight: var(--ay-fw-semi);
  color: var(--ay-text);
  border-right: 1px solid var(--ay-border);
}
.ay-mobilebar a:last-child { border-right: 0; }
.ay-mobilebar a i { font-size: 1.15rem; color: var(--ay-red); }
.ay-mobilebar a.ay-mobilebar__primary { background: var(--ay-red); color: #fff; }
.ay-mobilebar a.ay-mobilebar__primary:visited { color: #fff; }
.ay-mobilebar a.ay-mobilebar__primary i { color: #fff; }

@media (max-width: 767px) {
  .ay-mobilebar { display: block; }
  body.ay-page { padding-bottom: 62px; }
}

/* ==========================================================================
   Back to top
   ========================================================================== */
.ay-totop {
  position: fixed;
  right: var(--ay-5);
  bottom: var(--ay-5);
  z-index: calc(var(--ay-z-header) - 2);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ay-ink);
  color: #fff;
  box-shadow: var(--ay-shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--ay-dur-2) var(--ay-ease), transform var(--ay-dur-2) var(--ay-ease), visibility var(--ay-dur-2), background-color var(--ay-dur-1) var(--ay-ease);
}
.ay-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.ay-totop:hover { background: var(--ay-red); }
@media (max-width: 767px) { .ay-totop { bottom: 74px; right: var(--ay-4); } }

/* ==========================================================================
   Footer
   ========================================================================== */
.ay-footer {
  background: var(--ay-ink);
  color: var(--ay-text-on-invert-muted);
  font-size: var(--ay-fs-sm);
}
.ay-footer__newsletter {
  border-bottom: 1px solid var(--ay-border-invert);
  padding-block: var(--ay-6);
}
.ay-footer__newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ay-5);
  flex-wrap: wrap;
}
.ay-footer__newsletter h3 { color: #fff; font-size: var(--ay-fs-xl); }
.ay-footer__newsletter p { color: var(--ay-text-on-invert-muted); margin-top: 2px; }
.ay-subscribe { display: flex; gap: var(--ay-2); flex: 1; min-width: 300px; max-width: 480px; }
.ay-subscribe .ay-input { background: rgba(255, 255, 255, .07); border-color: var(--ay-border-invert); color: #fff; }

.ay-footer__main {
  padding-block: var(--ay-8);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: var(--ay-7);
}
.ay-footer__logo { height: 56px; width: auto; margin-bottom: var(--ay-4); }
.ay-footer__title {
  color: #fff;
  font-family: var(--ay-font);
  font-size: var(--ay-fs-sm);
  font-weight: var(--ay-fw-bold);
  letter-spacing: var(--ay-tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--ay-4);
  position: relative;
  padding-bottom: var(--ay-2);
}
.ay-footer__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  background: var(--ay-red);
}
.ay-footer__menu { display: grid; gap: var(--ay-2); }
.ay-footer__menu a {
  display: inline-flex;
  align-items: center;
  gap: var(--ay-2);
  padding: 3px 0;
  transition: color var(--ay-dur-1) var(--ay-ease), transform var(--ay-dur-1) var(--ay-ease);
}
.ay-footer__menu a:hover { color: #fff; transform: translateX(3px); }
.ay-footer__menu i { color: var(--ay-red); font-size: .7em; }

.ay-footer__contact { display: grid; gap: var(--ay-4); }
.ay-footer__contact-item { display: flex; gap: var(--ay-3); align-items: flex-start; }
.ay-footer__contact-item i {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: var(--ay-red);
}
.ay-footer__contact-item a:hover { color: #fff; }

.ay-socials { display: flex; gap: var(--ay-2); margin-top: var(--ay-5); }
.ay-socials a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ay-border-invert);
  color: var(--ay-text-on-invert-muted);
  transition: background-color var(--ay-dur-1) var(--ay-ease), color var(--ay-dur-1) var(--ay-ease), border-color var(--ay-dur-1) var(--ay-ease);
}
.ay-socials a:visited { color: var(--ay-text-on-invert-muted); }
.ay-socials a:hover { background: var(--ay-red); border-color: var(--ay-red); color: #fff; }

.ay-footer__bottom {
  border-top: 1px solid var(--ay-border-invert);
  padding-block: var(--ay-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ay-4);
  flex-wrap: wrap;
  font-size: var(--ay-fs-xs);
}
.ay-footer__bottom a:hover { color: #fff; }

@media (max-width: 991px) {
  .ay-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ay-6); }
}
@media (max-width: 575px) {
  .ay-footer__main { grid-template-columns: minmax(0, 1fr); }
  .ay-footer__bottom { justify-content: center; text-align: center; }
}




/* --------------------------------------------------------------------------
   Product card — the listing tile
   -------------------------------------------------------------------------- */

/* The shot fills the top of the card edge to edge, rounded to match the card
   above and square where it meets the body below -- so image and body read as
   one block rather than a picture floating in a panel.
   Overrides the shared .ay-product__media, which letterboxes with padding. */
.ay-product .ay-product__media {
  padding: 0;
  /* Taller than the shared 4:3 -- most uploads are a camera or panel shot
     that reads closer to square/portrait, and 4:3 with `cover` cropped
     more off the top and bottom than the photo could spare. */
  aspect-ratio: 1 / 1;
  background: var(--ay-surface-2);
  border-radius: var(--ay-r) var(--ay-r) 0 0;
  overflow: hidden;
}
/* `cover`, so the shot fills the tile with no grey margin -- a narrower
   5-up grid has less room per card than a 3- or 4-up one did, and a
   letterboxed `contain` photo there read as small and adrift in the box
   rather than a filled product tile. It does crop: centred, so what gets
   trimmed is the backdrop around the product, not the product itself. */
.ay-product .ay-product__media img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ay-product .ay-product__media .las { font-size: 3rem; color: var(--ay-slate-400); }

.ay-product .ay-product__body { gap: var(--ay-1); padding: var(--ay-4); }

/* The maker: logo and name, set below the title's size because it qualifies
   the product rather than naming it. */
.ay-product__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ay-product__brand img {
  /* Height-bound with the width following: these logos run from square to
     16:9, and a fixed box renders the square ones unreadably small. */
  height: 18px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
  flex: none;
}
.ay-product__brand > span {
  font-size: 11px;
  font-weight: var(--ay-fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ay-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Title on the left, the maker's logo on the right of it -- order flips the
   visual side without touching the markup (brand still comes first in the
   HTML, so it reads before the title with CSS off or for a screen reader
   that ignores visual order). */
.ay-product .ay-product__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ay-1) var(--ay-3);
}
.ay-product .ay-product__title {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--ay-fs-base);
  line-height: var(--ay-lh-snug);
  margin: 3px 0 0;
}
.ay-product .ay-product__brand {
  order: 2;
  flex: none;
  margin-top: 4px;
}

.ay-product__model {
  margin: 4px 0 0;
  line-height: 1;
}
.ay-product__model .ay-chip {
  padding: 3px 10px;
  font-size: var(--ay-fs-xs);
}

/* Reads as one line directly under the name: "₹4,000  ₹6,000  20% off  per
   piece". Deliberately modest on the grid tile -- it sits between the name
   and the actions, where a heavy price face would outweigh the product it
   belongs to. It is always present (a figure, or "Price on request") so a
   grid row does not step up and down as cards with and without a price sit
   beside each other. */
.ay-product__price {
  margin: 3px 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.35;
}
.ay-product__price strong {
  font-size: var(--ay-fs-base);
  font-weight: var(--ay-fw-bold);
  color: var(--ay-ink);
  font-variant-numeric: tabular-nums;
}
/* Set smaller than the figure and nudged up onto its baseline -- ₹4,000
   reads as one price, not a currency code stapled to a number. */
.ay-product__currency {
  font-size: .68em;
  font-weight: var(--ay-fw-semi);
  margin-right: 1px;
}
/* The list figure it is struck against. Muted and well down in size, so the
   figure being asked is unmistakably the main one. */
.ay-product__price s {
  font-size: .7rem;
  color: var(--ay-text-muted);
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px;
}
/* The saving, called out in its own colour so it reads as good news rather
   than another number in the line -- distinct from both the brand red
   (reserved for calls to action) and the WhatsApp green. */
.ay-product__discount {
  padding: 2px 8px;
  border-radius: var(--ay-r-pill);
  background: var(--ay-success-50);
  color: var(--ay-success);
  font-size: 11px;
  font-weight: var(--ay-fw-bold);
  letter-spacing: .01em;
}
/* Unit: the smallest part of the line, qualifying the number rather than
   being read as part of it. */
.ay-product__unit {
  font-size: 11.5px;
  color: var(--ay-text-muted);
  letter-spacing: .01em;
}
/* Quieter still: a statement about the sales process, not a number, and
   setting it in the price face would misrepresent it as one. */
.ay-product__price.is-onrequest {
  font-size: var(--ay-fs-sm);
  font-weight: var(--ay-fw-medium);
  color: var(--ay-text-muted);
}

.ay-product .ay-product__actions {
  /* The buttons take the slack now that the price no longer sits at the
     bottom, so every card in a row still ends on the same line. */
  margin-top: auto;
  padding-top: var(--ay-4);
  display: grid;
  /* The enquiry button earns the wider column; Details is the alternative, not
     the equal. Grid rather than flex so the split is identical on every card
     regardless of how wide its own label renders. */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--ay-2);
}
.ay-product .ay-product__actions .ay-btn { width: 100%; padding-inline: var(--ay-2); }

/* --- Hover: a pop, and nothing else ----------------------------------------
   Both buttons keep their exact colours under the cursor and answer with a
   small scale, matching the three actions on the product detail page.

   The ghost hover has to be undone by name: restating the resting value is
   the only way to beat it, because there is no CSS for "ignore that rule".
   Left alone it fills with ink, which on a card puts a black slab beside
   the green Enquire button and reads as two competing primary actions.

   Scoped to the card, so it applies wherever the card renders -- the
   solutions listings and the related strip alike -- and leaves ghost
   buttons elsewhere on the site with the behaviour they have always had.

   1.03 for both, which also brings Enquire down from the 1.045 it
   inherited from the site-wide WhatsApp rule: two buttons side by side
   popping by visibly different amounts looked like a mistake. */
.ay-product .ay-product__actions .ay-btn:hover  { transform: scale(1.03); }
.ay-product .ay-product__actions .ay-btn:active { transform: scale(.99); }

.ay-product .ay-product__actions .ay-btn--wa:hover {
  --_bg: var(--ay-wa);
  --_fg: #fff;
}
.ay-product .ay-product__actions .ay-btn--ghost:hover {
  --_bg: transparent;
  --_fg: var(--ay-text);
  --_bd: var(--ay-border);
}

/* The scale is decoration; a reduced-motion preference gets them still. */
@media (prefers-reduced-motion: reduce) {
  .ay-product .ay-product__actions .ay-btn:hover,
  .ay-product .ay-product__actions .ay-btn:active { transform: none; }
}
.ay-product .ay-product__actions .lab { font-size: 1.05em; }

/* One column below the point where two buttons would each be too narrow to
   read, rather than letting the labels wrap to two lines. */
@media (max-width: 400px) {
  .ay-product .ay-product__actions { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Product row -- the horizontal, e-commerce-style listing on the product
   listing page. Same card, same data, just turned on its side: the shot sits
   beside the details instead of above them, and there is room for a short
   description the grid tile has no space for.
   -------------------------------------------------------------------------- */
.ay-product-list {
  display: flex;
  flex-direction: column;
  gap: var(--ay-4);
}

.ay-product--row {
  flex-direction: row;
  align-items: stretch;
  /* A resting shadow, not just a flat border -- a catalogue of these reads
     as a shelf of distinct products rather than a table of text rows. */
  box-shadow: 0 1px 3px rgba(4, 17, 21, .05);
}
/* The grid tile's lift-on-hover reads as a card popping out of a shelf;
   turned sideways as a full-width row it just looks like it's sliding off
   the page, so hover here is a deeper shadow and the brand border instead. */
.ay-product--row:hover {
  transform: none;
  box-shadow: var(--ay-shadow-2);
  border-color: var(--ay-red-100);
}
/* The grid tile's image-zoom-on-hover reads fine on a small square tile;
   stretched across a 280px-tall row it was a distracting amount of motion
   right next to three lines of description someone is trying to read. */
.ay-product--row:hover .ay-product__media img { transform: none; }

.ay-product--row .ay-product__media {
  flex: none;
  /* Sized to the photo, not a fixed 280px box: `contain` inside a fixed
     width left grey letterbox bars down the sides whenever the shot was
     narrower than the box (most product photos, shot in portrait or
     square). Auto width lets the box hug the image itself instead. */
  width: auto;
  max-width: 280px;
  /* Stretched to the row's own height (set by the text beside it) rather
     than the grid tile's fixed 4:3 -- a description that runs to three
     lines makes some rows taller than others. */
  aspect-ratio: auto;
  border-radius: var(--ay-r) 0 0 var(--ay-r);
}
.ay-product--row .ay-product__media img {
  position: static;
  width: auto;
  max-width: 280px;
  height: 100%;
  /* Explicit, not inherited: the grid tile above now covers/crops, but
     the row's box already hugs the photo's own width (see width: auto
     above), so there's nothing left to crop into here. */
  object-fit: contain;
}

.ay-product--row .ay-product__body {
  /* Roomier than the grid tile's -- there's a whole row's worth of space,
     and cramped padding is the first thing that reads as unfinished. */
  padding: var(--ay-5) var(--ay-6);
  flex: 1 1 auto;
  min-width: 0;
}

/* The row has more width than the grid tile, so the title and the logo get
   a bit more room to breathe on their shared line. */
.ay-product--row .ay-product__heading { gap: var(--ay-2) var(--ay-4); }
.ay-product--row .ay-product__title {
  font-size: var(--ay-fs-lg);
  margin-top: 0;
}
.ay-product--row .ay-product__brand { margin-top: 2px; }

.ay-product--row .ay-product__price {
  margin-top: var(--ay-2);
}
.ay-product--row .ay-product__price strong { font-size: var(--ay-fs-xl); }

/* Exactly three lines, then an ellipsis the browser places at the real end
   of the third line -- a server-side character cut cannot do that, since
   rows are not all the same width. */
.ay-product--row .ay-product__blurb {
  margin: var(--ay-3) 0 0;
  font-size: var(--ay-fs-sm);
  line-height: 1.5;
  color: var(--ay-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Full width top-to-bottom on a grid tile made the buttons the last thing on
   the shelf; here there's a whole row's worth of width, so they sit at their
   natural size instead of stretching to fill it, with real breathing room
   left and right of each label instead of the grid tile's tight fit. */
.ay-product--row .ay-product__actions {
  grid-template-columns: max-content max-content;
  margin-top: var(--ay-4);
}
.ay-product--row .ay-product__actions .ay-btn {
  width: auto;
  padding-inline: var(--ay-6);
}

/* Below this, a 280px-wide image plus a readable text column no longer both
   fit -- the row folds back into the same stacked card the grid uses, two
   to a row rather than one long column of them, and without the blurb --
   there isn't room to read three lines of description at half the width,
   and it made a two-column phone screen mostly text. */
@media (max-width: 700px) {
  .ay-product-list {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ay-3);
  }
  .ay-product--row { flex-direction: column; }
  .ay-product--row .ay-product__blurb { display: none; }
  .ay-product--row .ay-product__media {
    width: 100%;
    max-width: none;
    /* Taller than the 4:3 the wide desktop row used, and `cover` below
       instead of `contain` -- at this width `contain` left visible grey
       bars above and below a shot that wasn't itself 4:3, which read as
       an unfinished thumbnail rather than a filled one. */
    aspect-ratio: 1 / 1;
    border-radius: var(--ay-r) var(--ay-r) 0 0;
  }
  .ay-product--row .ay-product__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
  }
  .ay-product--row .ay-product__body { padding: var(--ay-4); }
  .ay-product--row .ay-product__actions {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
  .ay-product--row .ay-product__actions .ay-btn { width: 100%; padding-inline: var(--ay-2); }
}

/* Two cards to a row leaves each one phone-narrow, not tablet-narrow -- the
   two action buttons side by side would each be too tight for their label,
   the same problem the grid tile's own narrow-card rule solves the same
   way, so it's solved here identically rather than left to wrap. */
@media (max-width: 480px) {
  .ay-product-list { gap: var(--ay-2); }
  .ay-product--row .ay-product__body { padding: var(--ay-3); }
  .ay-product--row .ay-product__title { font-size: var(--ay-fs-base); }
  .ay-product--row .ay-product__actions { grid-template-columns: minmax(0, 1fr); }
}

/* The sub-categories inside a solution card. Links, not prose: they are what a
   visitor is looking for, and listing them saves a hop through the category
   page. One per line: two columns broke "Scanning & Detection System" across
   lines and the ragged result read worse than the extra height costs. */
.ay-solution__subs {
  list-style: none;
  margin: 0 0 var(--ay-3);
  padding: 0;
  display: grid;
  gap: 3px;
}
.ay-solution__subs a {
  display: inline-block;
  font-size: var(--ay-fs-sm);
  color: var(--ay-text-muted);
  line-height: 1.5;
  transition: color var(--ay-dur-1) var(--ay-ease);
}
.ay-solution__subs a::before { content: "› "; color: var(--ay-slate-400); }
.ay-solution__subs a:hover { color: var(--ay-red); }

/* The build credit sits last in the footer's bottom row. The row is
   space-between, so with three items the middle one centres itself and this
   one lands on the right.

   No underline, by request. It is set brighter than the muted text beside
   it so it still reads as a link rather than as more of the same sentence. */
.ay-footer__credit a {
  color: var(--ay-text-on-invert);
  text-decoration: none;
  font-weight: var(--ay-fw-semi);
  transition: color var(--ay-dur-1) var(--ay-ease);
}
.ay-footer__credit a:visited { color: var(--ay-text-on-invert); }
.ay-footer__credit a:hover { color: #fff; }

@media (max-width: 767.98px) {
  /* Stacked and centred: three items on one line is unreadable on a phone. */
  .ay-footer__bottom { flex-direction: column; text-align: center; gap: var(--ay-2); }
}