/* ==========================================================================
   AUTHIFY — Homepage Products showcase (Scene 03 replacement)
   Horizontal scroll-snap carousel with a distinct illustrated visual per
   product, rather than a flat icon + text card. Native overflow-x scroll
   doubles as touch-swipe on mobile — no JS scroll library required.
   ========================================================================== */

.products__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}
.products__head h2{ max-width: 14ch; text-align: left; }
.products__head-copy{ max-width: 40ch; text-align: left; }
.products__head-copy p{ font-size: 0.8125rem; }

.products-carousel__viewport{
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  display: flex;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  margin-top: calc(var(--space-sm) * -1);
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  scrollbar-width: none;
}
.products-carousel__viewport::-webkit-scrollbar{ display: none; }

.pcard{
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: clamp(270px, 32vw, 380px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--dur-mid) var(--ease-glass), box-shadow var(--dur-mid) var(--ease-glass), border-color var(--dur-mid) var(--ease-smooth);
}
.pcard:hover{ transform: translateY(-6px); box-shadow: var(--shadow-float); border-color: var(--gold-400); }
.pcard h3{ font-size: var(--text-lg); }
.pcard p{ font-size: 0.8125rem; max-width: 32ch; }

.pcard__visual{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, color-mix(in srgb, var(--gold-400) 14%, var(--color-bg-elevated)), var(--color-bg-elevated) 70%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcard__visual svg{ position: relative; z-index: 1; }
.pcard__visual-img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }

.pcard__foot{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.pcard__arrow{
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-glass), background var(--dur-mid) var(--ease-smooth), color var(--dur-mid) var(--ease-smooth);
}
.pcard__arrow .icon{ width: 1.1rem; height: 1.1rem; }
.pcard:hover .pcard__arrow{ background: linear-gradient(160deg, var(--gold-200), var(--gold-400)); color: var(--gold-contrast); transform: rotate(45deg); }

/* ---- Floating micro-cards inside each visual (varies per product) ---- */
.pmini{
  position: absolute;
  background: var(--glass-surface-strong);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.4em 0.65em;
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35em;
  box-shadow: var(--shadow-float);
  z-index: 2;
}
.pmini .icon{ width: 0.9em; height: 0.9em; color: var(--gold-500); flex-shrink: 0; }
.pmini--ok{ color: #2e9e57; }
.pmini--ok .icon{ color: #2e9e57; }

/* ---- Product-specific visual tweaks ---- */
.pcard__visual--auth .pa-qr-mark{
  width: 96px; height: 96px; border-radius: 10px;
  background: var(--gold-contrast);
  display: grid; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(5,1fr);
  padding: 10px; gap: 3px;
}
.pcard__visual--auth .pa-qr-mark span{ background: var(--color-bg-elevated); border-radius: 1px; }
.pcard__visual--auth .pa-qr-mark span.on{ background: var(--gold-400); }
.pcard__visual--auth .pmini{ top: 12%; right: 10%; }

.pcard__visual--doc .doc-shape{
  width: 108px; height: 132px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: var(--shadow-float);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.pcard__visual--doc .doc-shape span{ display:block; height:6px; border-radius:3px; background: var(--glass-border); }
.pcard__visual--doc .doc-shape span:nth-child(1){ width: 70%; }
.pcard__visual--doc .doc-shape span:nth-child(2){ width: 100%; }
.pcard__visual--doc .doc-shape span:nth-child(3){ width: 85%; }
.pcard__visual--doc .doc-seal{
  position: absolute; bottom: 14%; right: 16%;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-200), var(--gold-400));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-gold);
}
.pcard__visual--doc .doc-seal .icon{ width: 1.4rem; height: 1.4rem; color: var(--gold-contrast); }

.pcard__visual--cert .cert-badge{
  width: 100px; height: 100px; border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-200), var(--gold-400) 65%, var(--gold-500));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-gold);
}
.pcard__visual--cert .cert-badge .icon{ width: 2.75rem; height: 2.75rem; color: var(--gold-contrast); }
.pcard__visual--cert .cert-ribbon{
  position: absolute; bottom: 16%; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.pcard__visual--cert .cert-ribbon i{ width: 14px; height: 34px; background: var(--gold-400); opacity: 0.5; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }

.pcard__visual--brand .shield-shape{ width: 108px; height: 108px; color: var(--gold-500); }
.pcard__visual--brand .shield-ring{
  position: absolute; inset: 10%; border-radius: 50%;
  border: 1px dashed var(--glass-border);
}
.pcard__visual--brand .pmini{ bottom: 14%; left: 10%; }


/* ---- Carousel controls ---- */
.products__controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-lg);
}
.products__dots{ display: flex; gap: 0.5rem; }
.products__dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border-strong);
  border: none; padding: 0; cursor: pointer;
  transition: background var(--dur-mid) var(--ease-smooth), width var(--dur-mid) var(--ease-smooth);
}
.products__dot.is-active{ width: 22px; border-radius: var(--radius-full); background: var(--gold-400); }
.products__nav{ display: flex; gap: var(--space-2xs); }
.products__nav button{
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-full);
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-glass);
}
.products__nav button:hover{ border-color: var(--gold-400); transform: translateY(-2px); }
.products__nav button:disabled{ opacity: 0.35; cursor: default; transform: none; }
.products__nav .icon{ width: 1.1rem; height: 1.1rem; }

@media (max-width: 720px){
  .products__head{ flex-direction: column; align-items: flex-start; }
  .products__nav{ display: none; }
}