/*
 * Print.az — Homepage v2 shared styles.
 * Scope so far: Hero Trust Panel only (placed directly below the hero).
 * Self-contained hex values, consistent with Header & Navigation v2.
 */

.trust-panel {
  background: #f6f7f9;
  padding: 56px 0;
}

.trust-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
/* Mobile: fifth card spans both columns for a balanced 2-2-1 layout. */
.trust-grid > .trust-card:nth-child(5) { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-grid > .trust-card:nth-child(5) { grid-column: auto; }
}
@media (min-width: 1080px) {
  .trust-grid { grid-template-columns: repeat(5, 1fr); }
}

.trust-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.trust-panel .trust-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(17, 24, 39, 0.1);
}

.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #fdecec;
  color: #d71920;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}
.trust-panel .trust-card:hover .trust-icon { transform: scale(1.06); }
.trust-icon svg { width: 24px; height: 24px; }

.trust-card h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
  color: #17191d;
}
.trust-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #4f5865;
}

/* Optional fade-up entrance — only applied when JS marks the panel (.js-anim),
 * so the section is fully visible/usable without JavaScript. */
.trust-panel.js-anim .trust-card { opacity: 0; transform: translateY(14px); }
.trust-panel.js-anim.is-in .trust-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.trust-panel.js-anim.is-in .trust-card:nth-child(2) { transition-delay: 0.06s; }
.trust-panel.js-anim.is-in .trust-card:nth-child(3) { transition-delay: 0.12s; }
.trust-panel.js-anim.is-in .trust-card:nth-child(4) { transition-delay: 0.18s; }
.trust-panel.js-anim.is-in .trust-card:nth-child(5) { transition-delay: 0.24s; }
/* Keep hover lift working after the entrance settles (higher specificity). */
.trust-panel.js-anim.is-in .trust-card:hover {
  transform: translateY(-4px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .trust-card, .trust-icon { transition: none !important; }
  .trust-panel.js-anim .trust-card { opacity: 1 !important; transform: none !important; }
  .trust-panel .trust-card:hover { transform: none; }
  .trust-panel .trust-card:hover .trust-icon { transform: none; }
}

/* ============================ Google Reviews ============================ */
.reviews { padding: 60px 0; background: #ffffff; }
.reviews-head { text-align: center; max-width: 62ch; margin: 0 auto 22px; }
.reviews-head h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); color: #17191d; }
.reviews-head p { margin: 0; color: #4f5865; font-size: 1.02rem; }

/* Rating summary */
.reviews-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px;
  margin: 0 auto 28px; padding: 16px 22px; max-width: 640px;
  background: #f9fafb; border: 1px solid #e6e8ec; border-radius: 16px;
}
.reviews-google { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.reviews-google .g1 { color: #4285f4; } .reviews-google .g2 { color: #ea4335; }
.reviews-google .g3 { color: #fbbc05; } .reviews-google .g4 { color: #4285f4; }
.reviews-google .g5 { color: #34a853; } .reviews-google .g6 { color: #ea4335; }
.reviews-google span:last-child { color: #4f5865; }
.reviews-summary .stars { display: inline-flex; gap: 2px; }
.reviews-score { font-weight: 800; font-size: 1.05rem; color: #17191d; }
.reviews-count { color: #4f5865; font-weight: 600; }
.reviews-note { flex-basis: 100%; text-align: center; margin: 4px 0 0; font-size: 0.82rem; color: #9aa3af; }

.stars { display: inline-flex; align-items: center; gap: 2px; color: #f5a623; line-height: 1; }
.stars svg { width: 18px; height: 18px; display: block; }

/* Slider stage — single featured review at a time.
   Height is stable: review text is clamped to a fixed 5-line box, so the card
   (and everything below) never shifts while slides rotate. */
.reviews-stage {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}

.review-card {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
  background: #ffffff; border: 1px solid #e9eaee; border-radius: 22px;
  padding: clamp(26px, 4vw, 48px);
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
  /* Keep card in normal flow so stage height is content-driven and constant. */
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.reviews.is-slider .review-card {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.reviews.is-slider .review-card.is-out { opacity: 0; transform: translateX(16px); }

.review-card .stars { margin-bottom: 2px; }
.review-card .stars svg { width: 22px; height: 22px; }
.review-text {
  margin: 0; max-width: 66ch; width: 100%;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.7; color: #2b2f36;
  /* Fixed 5-line block — identical height for every review, overflow ellipsis. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  height: calc(1.7em * 5);
}
.review-read-more {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0; font-weight: 700; font-size: 0.92rem; color: #d71920;
  text-decoration: none;
}
.review-read-more:hover { text-decoration: underline; }
.review-read-more:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.28); border-radius: 6px;
}
.review-meta { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.review-avatar {
  width: 52px; height: 52px; margin-bottom: 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.2rem; color: #d71920; background: #fdecec;
  flex: 0 0 auto;
}
.review-name {
  font-weight: 800; font-size: 1.02rem; color: #17191d;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.review-source { font-size: 0.82rem; color: #4f5865; font-weight: 600; }
.review-cat {
  margin-top: 4px; font-size: 0.72rem; font-weight: 700;
  color: #6b7280; background: #f3f4f6; border-radius: 999px; padding: 3px 12px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Pagination dots */
.reviews-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.reviews-dot {
  width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0;
  background: #d7dbe0; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease;
}
.reviews-dot:hover { background: #b8bec7; }
.reviews-dot.is-active { background: #d71920; transform: scale(1.3); }
.reviews-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.28); }

.reviews-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* CTA */
.reviews-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.reviews-cta .rv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 800; font-size: 0.95rem;
  border: 1px solid transparent; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease;
}
.reviews-cta .rv-btn:hover { transform: translateY(-1px); }
.rv-primary { color: #fff; background: #d71920; box-shadow: 0 14px 30px rgba(215, 25, 32, 0.24); }
.rv-secondary { color: #17191d; background: #fff; border-color: #d0d5dd; }
.rv-secondary:hover { border-color: #17191d; }

.reviews-cta .rv-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.28); border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .reviews.is-slider .review-card { transition: none !important; }
  .reviews.is-slider .review-card.is-out { opacity: 1; transform: none; }
  .reviews-cta .rv-btn, .reviews-dot { transition: none !important; }
}

/* ========================= Client logo carousel ======================== */
.client-logos {
  padding: 56px 0;
  background: #ffffff;
  /* Row content height (the equal visual height every logo is cropped to). */
  --logo-h: 40px;
  --logo-gap: 56px;
  --edge-fade: 96px;
}
.client-logos__head { text-align: center; max-width: 62ch; margin: 0 auto 30px; }
.client-logos__head h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); color: #17191d; }
.client-logos__head p { margin: 0; color: #4f5865; font-size: 1.02rem; }

/* Viewport clips the marquee and applies subtle left/right fade masks. */
.client-logos__viewport {
  position: relative;
  overflow: hidden;
  outline: none;
}
.client-logos__viewport:focus-visible {
  outline: 3px solid rgba(215, 25, 32, 0.45);
  outline-offset: 4px;
  border-radius: 12px;
}
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .client-logos__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent 100%);
  }
}

.client-logos__row { overflow: hidden; }
.client-logos__row + .client-logos__row { margin-top: 26px; }

/* The track holds two identical logo sets and slides exactly one set width.
   Each item carries its own right margin (not flex gap) so the two halves are
   equal width and translate3d(-50%) lands seamlessly. */
.client-logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: client-logos-marquee var(--duration, 45s) linear infinite;
  will-change: transform;
}
.client-logos__track .client-logos__item { margin-right: var(--logo-gap); }
.client-logos__track.is-reverse { animation-direction: reverse; }
.client-logos__viewport.is-paused .client-logos__track { animation-play-state: paused; }

@keyframes client-logos-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Each item is cropped to the logo's measured content box (data-driven vars),
   giving every logo an equal visual height with no distortion. */
.client-logos__item {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  height: calc(var(--logo-h) * var(--k, 1));
  width: calc(var(--logo-h) * var(--k, 1) * var(--cw) / var(--ch));
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity 0.22s ease, filter 0.22s ease, transform 0.22s ease;
}
.client-logos__item .client-logos__image {
  position: absolute;
  top: calc(-1 * var(--logo-h) * var(--k, 1) * var(--cy) / var(--ch));
  left: calc(-1 * var(--logo-h) * var(--k, 1) * var(--cx) / var(--ch));
  height: calc(var(--logo-h) * var(--k, 1) * var(--vh) / var(--ch));
  width: calc(var(--logo-h) * var(--k, 1) * var(--vw) / var(--ch));
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.client-logos__item:hover,
.client-logos__item:focus-visible {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.05);
}

/* Reduced motion: no animation, no duplicates — a clean wrapped static grid. */
.client-logos.is-static .client-logos__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px var(--logo-gap);
}
.client-logos.is-static .client-logos__item { margin-right: 0; }
.client-logos.is-static .client-logos__viewport {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
  .client-logos__track { animation: none !important; }
  .client-logos__item { transition: none !important; }
  .client-logos__item:hover { transform: none; }
}

@media (max-width: 640px) {
  .client-logos {
    padding: 44px 0;
    --logo-h: 30px;
    --logo-gap: 34px;
    --edge-fade: 48px;
  }
  .client-logos__row + .client-logos__row { margin-top: 20px; }
  /* Logos stay in color on mobile (no hover); keep them readable. */
  .client-logos__item { opacity: 0.85; }
}

/* ========================= How to order (steps) ======================== */
.how-order { padding: clamp(56px, 8vw, 88px) 0; background: #ffffff; }
.how-head { text-align: center; max-width: 62ch; margin: 0 auto 36px; }
.how-head h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2.375rem); color: #17191d; }
.how-head p { margin: 0; color: #4f5865; font-size: 1.02rem; }

/* Steps grid — vertical stack on mobile, 4 equal columns on desktop */
.how-steps {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid; gap: 20px; grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .how-order { padding-top: clamp(56px, 8vw, 88px); }
  .how-steps {
    grid-template-columns: repeat(4, 1fr); gap: 18px;
    max-width: 1120px; margin-inline: auto;
  }
}

/* Connector line behind the numbered badges (desktop only; disabled for 3-step layout) */
.how-connector { display: none; }

.how-card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  height: 100%;
  background: #ffffff; border: 1px solid #e6e8ec; border-radius: 16px;
  padding: 22px 18px 20px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Clickable cards: the anchor fills the card so the whole area is
 * a single target, while the <li> keeps ordered-list semantics. */
.how-card-link {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  width: 100%; flex: 1 1 auto;
  color: inherit; text-decoration: none;
}
.how-card-link:focus { outline: none; } /* focus ring is drawn on the card box */

@media (min-width: 1024px) {
  .how-card.is-clickable:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 52px rgba(17, 24, 39, 0.13);
    border-color: #f3c3c5;
  }
  .how-card.is-clickable:hover .how-icon { transform: scale(1.05); }
}

/* Visible keyboard focus using the Print.az accent (not color-only). */
.how-card:has(> .how-card-link:focus-visible) {
  border-color: #d71920;
  box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.28), 0 22px 48px rgba(17, 24, 39, 0.11);
}
/* Fallback for browsers without :has() */
.how-card-link:focus-visible {
  outline: 3px solid rgba(215, 25, 32, 0.55); outline-offset: 4px; border-radius: 12px;
}
.how-card:has(> .how-card-link:focus-visible) .how-card-link:focus-visible { outline: none; }

/* Numbered badges removed — sequence is left-to-right order only. */
.how-badge { display: none !important; }

.how-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: #fdecec; color: #d71920; flex: 0 0 auto;
  margin-top: 2px;
  transition: transform 0.25s ease;
}
.how-icon svg { width: 24px; height: 24px; }
.how-card h3 { margin: 2px 0 0; font-size: 1.02rem; font-weight: 800; color: #17191d; line-height: 1.25; }
.how-card p { margin: 0; font-size: 0.9rem; line-height: 1.45; color: #4f5865; }

.how-cta { display: flex; justify-content: center; margin-top: 34px; }
.how-cta .button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.32); border-radius: 999px;
}

/* Fade-up entrance — applied only when JS marks the section (progressive) */
.how-order.js-anim .how-card { opacity: 0; transform: translateY(16px); }
.how-order.js-anim.is-in .how-card {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.how-order.js-anim.is-in .how-card:nth-child(3) { transition-delay: 0.15s; }
.how-order.js-anim.is-in .how-card:nth-child(4) { transition-delay: 0.30s; }
.how-order.js-anim.is-in .how-card:nth-child(5) { transition-delay: 0.45s; }
/* Preserve hover lift once entrance settles (higher specificity) */
@media (min-width: 1024px) {
  .how-order.js-anim.is-in .how-card.is-clickable:hover {
    transform: translateY(-6px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-card, .how-icon { transition: none !important; }
  .how-order.js-anim .how-card { opacity: 1 !important; transform: none !important; }
  .how-card.is-clickable:hover { transform: none; }
  .how-card.is-clickable:hover .how-icon { transform: none; }
}

/* ===================== Custom project inquiry section ==================== */
.custom-project { padding: 64px 0; background: #ffffff; }
.custom-project__inner {
  position: relative; overflow: hidden;
  max-width: 900px; margin-inline: auto;
  border-radius: 24px;
  /* Premium, fully abstract dark background (no image asset). Layered radial
   * glows + a faint print-inspired line grid provide subtle decoration. */
  background:
    radial-gradient(120% 130% at 88% 18%, rgba(215, 25, 32, 0.16), transparent 52%),
    radial-gradient(90% 120% at 100% 100%, rgba(215, 25, 32, 0.08), transparent 60%),
    linear-gradient(135deg, #14161c 0%, #1b1f27 55%, #23272f 100%);
  box-shadow: 0 30px 70px rgba(17, 24, 39, 0.22);
}
.custom-project__content {
  position: relative; z-index: 1;
  padding: 48px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}
.custom-project__content h2 {
  margin: 0; color: #ffffff; font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15;
  max-width: 20ch;
  text-wrap: balance;
}
.custom-project__content p {
  margin: 0 auto; color: #c7ccd6; font-size: 1.05rem; line-height: 1.6; max-width: 52ch;
  text-wrap: pretty;
}
.custom-project__cta { margin-top: 6px; }

/* Decorative negative space — full-bleed ambient texture behind the centered
 * content (not a competing column). CSS-only, no assets; kept very low
 * opacity so it never distracts or competes with the text. */
.custom-project__visual {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 26px),
    radial-gradient(70% 90% at 85% 15%, rgba(215, 25, 32, 0.14), transparent 55%),
    radial-gradient(70% 90% at 15% 100%, rgba(215, 25, 32, 0.1), transparent 55%);
}
/* Soft concentric ring accent, faint and premium */
.custom-project__visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 18%, transparent 78px, rgba(215, 25, 32, 0.1) 79px 80px, transparent 81px);
}

@media (min-width: 900px) {
  .custom-project__content { padding: 64px 56px; }
}

/* Section reveal (progressive; only when JS marks .js-anim) */
.custom-project.js-anim .custom-project__inner { opacity: 0; transform: translateY(16px); }
.custom-project.js-anim.is-in .custom-project__inner {
  opacity: 1; transform: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

@media (prefers-reduced-motion: reduce) {
  .custom-project.js-anim .custom-project__inner { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Homepage Redesign v2 — section styles (namespaced .hp-* where new)
   Does not affect product/category pages.
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Homepage hero — full-width background scene --- */
.homepage-hero {
  --homepage-hero-canvas: #f9f9f9;
  --header-height: 56px;
  /* Match shared header container: .pz-header-inner */
  --site-container: min(1280px, calc(100% - 32px));
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background-color: var(--homepage-hero-canvas);
}

/* Background artwork is a real <img>, not a CSS background-image, so its
 * mask (used to feather the left edge) can use percentage sizing that's
 * guaranteed to match the image's own rendered box exactly. (A gradient
 * used as background-size/mask-size:"auto" has no intrinsic aspect ratio,
 * so it does NOT reliably line up with a photo's auto-computed width —
 * that mismatch was the actual bug in the first attempt at this fix.)
 */
.homepage-hero__bg-desktop {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
  height: min(100%, 916px);
  width: auto;
  max-width: none;
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 100%);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.homepage-hero__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: var(--site-container);
  margin-inline: auto;
}

.homepage-hero__content {
  position: relative;
  box-sizing: border-box;
  max-width: 38rem;
}

.homepage-hero h1 {
  margin: 0 0 16px;
  max-width: 18em;
  font-size: clamp(2rem, 2.6vw + 0.9rem, 2.95rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: #17191d;
  text-wrap: balance;
}
.homepage-hero__accent {
  color: #d71920;
}

.homepage-hero__copy {
  margin: 0;
  max-width: 40ch;
  color: #4f5865;
  font-size: clamp(1.02rem, 1.25vw, 1.12rem);
  line-height: 1.6;
  font-weight: 400;
}

.homepage-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.homepage-hero__trust li {
  position: relative;
  padding-left: 12px;
  color: #4f5865;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  white-space: nowrap;
}
.homepage-hero__trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d71920;
}

.homepage-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.homepage-hero__cta {
  flex: 0 0 auto;
  min-height: 54px;
  padding: 0 28px;
  font-size: 1.04rem;
  font-weight: 800;
  box-shadow: 0 16px 34px rgba(215, 25, 32, 0.28);
}
.homepage-hero__cta-secondary {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 18px;
  font-size: 0.94rem;
  font-weight: 700;
  background: transparent;
  border-color: #d0d5dd;
  box-shadow: none;
}

/* Mobile-only nodes: hidden on desktop / tablet landscape breakpoint */
.homepage-hero__copy--mobile,
.homepage-hero__art,
.homepage-hero__trust-panel,
.how-order__mobile-link {
  display: none;
}

/* Desktop: stage is transparent so approved layout math is unchanged */
@media (min-width: 900px) {
  .homepage-hero__stage {
    display: contents;
  }
}

/* Desktop: overlay on shared header grid, left reserved zone */
@media (min-width: 900px) {
  .homepage-hero__bg-desktop {
    display: block;
  }

  .homepage-hero {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--header-height));
    min-height: calc(100dvh - var(--header-height));
  }

  .homepage-hero__inner {
    display: flex;
    align-items: center;
    min-height: inherit;
    padding-block: clamp(16px, 3vh, 28px);
  }

  .homepage-hero__content {
    width: min(100%, 36rem);
    max-width: 36rem;
    padding: 0;
  }

  .homepage-hero h1 {
    margin-bottom: 16px;
    max-width: 16.5em;
  }

  .homepage-hero__copy {
    max-width: 38ch;
  }

  .homepage-hero__trust {
    gap: 6px 12px;
    margin-top: 18px;
  }

  .homepage-hero__trust li {
    font-size: 0.74rem;
  }

  .homepage-hero__actions {
    flex-wrap: nowrap;
    margin-top: 24px;
  }
}

/* Mid desktop: allow trust wrap when four items need space */
@media (min-width: 900px) and (max-width: 1439.98px) {
  .homepage-hero__content {
    width: min(100%, 32rem);
    max-width: 32rem;
  }

  .homepage-hero h1 {
    font-size: clamp(2rem, 2.9vw, 2.6rem);
    max-width: 15.5em;
  }

  .homepage-hero__trust {
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  .homepage-hero__trust li {
    font-size: 0.72rem;
  }
}

@media (min-width: 1440px) {
  .homepage-hero__content {
    width: min(100%, 38rem);
    max-width: 38rem;
  }

  .homepage-hero h1 {
    max-width: 17em;
  }

  .homepage-hero__trust {
    flex-wrap: nowrap;
    gap: 6px 12px;
  }

  .homepage-hero__trust li {
    font-size: 0.76rem;
  }
}

/* Large screens: keep artwork right-aligned at native height; content on header grid */
@media (min-width: 1718px) {
  .homepage-hero__bg-desktop {
    height: 916px;
  }
}

/* Mobile / tablet: fixed composition artwork + HTML overlay (<900px) */
@media (max-width: 899.98px) {
  .homepage-hero {
    display: block;
    min-height: 0;
    background-image: none;
    background-color: #ffffff;
    overflow-x: clip;
  }

  .homepage-hero::before,
  .homepage-hero::after {
    content: none;
    display: none;
  }

  .homepage-hero__inner {
    display: flex;
    flex-direction: column;
    width: min(100% - 44px, 1280px);
    padding: 4px 0 18px;
  }

  /*
   * Stage height comes from the fixed portrait composition (852x1405).
   * Art is full-bleed; copy overlays the reserved upper-left white field.
   */
  .homepage-hero__stage {
    position: relative;
    display: block;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Push artwork down for CTA↔T-shirt breathing room; absolute copy stays put */
    padding-top: 72px;
    overflow: visible;
  }

  .homepage-hero__art {
    display: block;
    position: relative;
    z-index: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    pointer-events: none;
    user-select: none;
  }

  .homepage-hero__art img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
  }

  .homepage-hero__content {
    position: absolute;
    top: 1.2%;
    left: 22px;
    z-index: 2;
    box-sizing: border-box;
    width: min(66%, 17rem);
    max-width: none;
    padding: 0;
    background: transparent;
  }

  /*
   * Soft left readability veil.
   * Extended far past the copy so the fade reaches alpha 0 before any box edge;
   * avoids a hard vertical compositing seam near the roll-up.
   */
  .homepage-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -8px;
    right: -120px;
    bottom: -14px;
    left: -6px;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      #ffffff 0%,
      #ffffff 32%,
      rgba(255, 255, 255, 0.7) 52%,
      rgba(255, 255, 255, 0.28) 68%,
      rgba(255, 255, 255, 0) 82%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .homepage-hero__content::after {
    content: none;
    display: none;
  }

  .homepage-hero h1 {
    max-width: 8.5em;
    margin: 0 0 12px;
    font-size: clamp(2.05rem, 8.4vw, 2.55rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.032em;
  }

  .homepage-hero__copy--desktop,
  .homepage-hero__trust,
  .homepage-hero__cta-secondary {
    display: none !important;
  }

  .homepage-hero__copy--mobile {
    display: block;
    max-width: 19ch;
    margin: 0;
    color: #5a6472;
    font-size: clamp(0.98rem, 3.5vw, 1.08rem);
    line-height: 1.5;
  }

  .homepage-hero__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 28px; /* +12px: lower primary CTA only */
  }

  .homepage-hero__cta {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    width: clamp(200px, 52vw, 224px);
    max-width: none;
    min-height: 50px;
    padding: 0 18px;
    font-size: 1rem;
    font-weight: 800;
    justify-content: center;
    white-space: nowrap;
    box-shadow: 0 14px 32px rgba(215, 25, 32, 0.34);
  }

  .homepage-hero__trust-panel {
    display: block;
    box-sizing: border-box;
    width: 100%;
    /* Pull panel up into empty canvas below products (~20–24px gap) */
    margin-top: -8px;
    padding: 14px 6px;
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06);
  }

  .homepage-hero__trust-panel-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .homepage-hero__trust-panel-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    box-sizing: border-box;
    min-width: 0;
    padding: 2px 4px;
    text-align: center;
  }

  /* Subtle vertical separators between columns — not after the last item */
  .homepage-hero__trust-panel-list li:not(:last-child) {
    border-right: 1px solid rgba(17, 24, 39, 0.1);
  }

  .homepage-hero__trust-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #d71920;
  }

  .homepage-hero__trust-icon svg {
    width: 100%;
    height: 100%;
  }

  .homepage-hero__trust-label {
    color: #4f5865;
    font-size: 0.625rem; /* 10px — narrow phones */
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .how-order__mobile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    padding: 8px 16px;
    color: #17191d;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
  }

  .how-order__mobile-link:hover,
  .how-order__mobile-link:focus-visible {
    border-color: rgba(215, 25, 32, 0.45);
    color: #d71920;
  }

  .how-head {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (min-width: 430px) and (max-width: 899.98px) {
  .homepage-hero__stage {
    padding-top: 36px;
  }

  .homepage-hero__content {
    width: min(63%, 18rem);
    top: 1.6%;
  }

  .homepage-hero h1 {
    font-size: clamp(2.2rem, 7.6vw, 2.6rem);
    max-width: 8.3em;
  }

  .homepage-hero__trust-panel {
    padding: 15px 8px;
  }

  .homepage-hero__trust-panel-list li {
    padding: 2px 5px;
  }

  .homepage-hero__trust-icon {
    width: 23px;
    height: 23px;
  }

  .homepage-hero__trust-label {
    font-size: 0.71875rem; /* 11.5px — ~430+ */
    line-height: 1.2;
  }
}

@media (min-width: 390px) and (max-width: 429.98px) {
  .homepage-hero__stage {
    padding-top: 52px;
  }

  .homepage-hero__content {
    width: min(66%, 16.5rem);
  }

  .homepage-hero__trust-label {
    font-size: 0.6875rem; /* 11px */
    letter-spacing: -0.015em;
  }
}

@media (max-width: 359.98px) {
  .homepage-hero__inner {
    width: min(100% - 40px, 1280px);
  }

  .homepage-hero__content {
    width: min(72%, 15.5rem);
  }

  .homepage-hero h1 {
    font-size: clamp(1.95rem, 8vw, 2.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-hero__art img {
    transition: none;
  }
}

/* Legacy collage hooks (no longer used on homepage) */
.hp-hero__grid { display: contents; }

.how-steps--4,
.how-order .how-steps {
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .how-steps--4,
  .how-order .how-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .how-steps--4,
  .how-order .how-steps {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1120px;
    margin-inline: auto;
    gap: 18px;
  }
  .how-connector { display: none; }
}

/* --- Trust statistics --- */
.hp-trust {
  padding: clamp(40px, 6vw, 72px) 0;
  background: #f6f7f9;
}
.hp-trust__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
.hp-trust__item {
  text-align: center;
  padding: 28px 18px;
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.04);
}
.hp-trust__value {
  display: block;
  margin: 0 0 6px;
  font-size: clamp(1.7rem, 3.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #17191d;
  line-height: 1.1;
}
.hp-trust__label {
  display: block;
  margin: 0;
  color: #4f5865;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}
@media (min-width: 900px) {
  .hp-trust__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

/* --- Product categories (homepage) --- */
.hp-categories {
  padding: clamp(48px, 7vw, 84px) 0 0;
  background: #ffffff;
}
.hp-categories .section-heading p {
  max-width: 52ch;
  color: #4f5865;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.55;
}

/* --- Why Print.az --- */
.hp-why {
  padding: clamp(48px, 7vw, 84px) 0;
  background: #ffffff;
}
.hp-why .section-heading p {
  max-width: 52ch;
  color: #4f5865;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.55;
}
.hp-why__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: stretch;
}
.hp-why__card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  height: 100%;
  padding: 22px 20px;
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .hp-why__card:hover {
    box-shadow: 0 14px 36px rgba(17, 24, 39, 0.07);
    border-color: rgba(215, 25, 32, 0.18);
  }
}
.hp-why__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fdecec;
  color: #d71920;
}
.hp-why__icon svg { width: 22px; height: 22px; }
.hp-why__card h3,
.hp-why__title {
  display: block;
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #17191d;
  line-height: 1.25;
}
.hp-why__card p,
.hp-why__desc {
  display: block;
  margin: 0;
  color: #4f5865;
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 400;
}
.hp-why__card--action {
  padding: 0;
}
.hp-why__card-trigger {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 22px 20px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: inherit;
}
.hp-why__card-trigger:focus-visible {
  outline: 2px solid #d71920;
  outline-offset: 2px;
}
.hp-why__copy {
  display: block;
  min-width: 0;
}
@media (min-width: 700px) {
  .hp-why__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hp-why__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-why__card { transition: none !important; }
}

/* --- Custom request CTA band --- */
.custom-project__content h2 { max-width: 22ch; }
.custom-project__note {
  margin: 0;
  color: #9aa3af;
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 46ch;
}
#cp-product.is-locked {
  background: #f6f7f9;
  color: #4f5865;
  cursor: default;
}