@import "services.css";

/* Product hero: .page-banner + .services-hero-main + assets/Product BG.webp */
/* overflow-x: hidden on main forces overflow-y: auto (CSS overflow pairing), which creates a second
   scrollbar next to the document. clip avoids that while still clipping horizontal spill. */
.product-page {
  overflow-x: clip;
  overflow-y: visible;
  text-align: left;
}

/* Wider side margins on phones/small tablets so copy isn’t flush to the edge (overrides global .container at 900px/640px) */
@media (max-width: 768px) {
  .product-page .container {
    width: min(var(--container), calc(100% - 72px));
    max-width: 100%;
    padding-inline: max(0px, env(safe-area-inset-left, 0px)) max(0px, env(safe-area-inset-right, 0px));
  }
}

.page-banner.products-hero {
  display: flex;
  flex-direction: column;
  min-height: min(52vh, 480px);
  padding: 18px 0 22px;
  overflow: hidden;
}

.page-banner.products-hero .services-hero-main {
  padding-bottom: 8px;
}

/* Same layering as Services hero: one readable scrim + photo (extra radials hid the image on wide viewports) */
.page-banner.products-hero::before {
  z-index: 0;
  opacity: 0;
  animation: productHeroBgIn 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.42s forwards;
  background-image:
    linear-gradient(105deg, rgba(8, 3, 2, 0.92) 0%, rgba(12, 6, 4, 0.55) 45%, rgba(20, 10, 6, 0.35) 100%),
    url("assets/Product BG.webp");
  background-size: auto, cover;
  background-position: center, center 28%;
  background-repeat: no-repeat;
}

@keyframes productHeroBgIn {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Stagger hero copy so the background can fade in after the first line of text */
.product-page .services-hero-main > .product-hero-reveal:nth-child(1) {
  transition-delay: 0s;
}
.product-page .services-hero-main > .product-hero-reveal:nth-child(2) {
  transition-delay: 0.06s;
}
.product-page .services-hero-main > .product-hero-reveal:nth-child(3) {
  transition-delay: 0.12s;
}
.product-page .services-hero-main > .product-hero-reveal:nth-child(4) {
  transition-delay: 0.18s;
}

/* Image follows copy after the same section scrolls into view */
.product-page .reveal.reveal--delay {
  transition-delay: 0.16s;
}

@media (prefers-reduced-motion: reduce) {
  .page-banner.products-hero::before {
    opacity: 1;
    animation: none;
    transform: none;
  }
  .product-roasts__figure:hover .product-roasts__img,
  .product-roasts__figure:focus-within .product-roasts__img {
    transform: none;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  }
  .product-showcase__figure:hover .product-showcase__img,
  .product-showcase__figure:focus-within .product-showcase__img {
    transform: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
  }
}

/* Hero eyebrow - match Services page board box */
.page-banner.products-hero .eyebrow {
  padding: 7px 14px;
  border-width: 2px;
  border-color: rgba(246, 234, 216, 0.52);
  border-radius: 5px;
}

.page-banner.products-hero .hero-title.products-hero-title {
  max-width: min(36ch, 100%);
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: -0.025em;
  white-space: normal;
}

.page-banner.products-hero .hero-title .accent {
  font-style: italic;
  font-weight: 500;
}

.page-banner.products-hero .hero-text.products-hero-lead {
  max-width: min(52ch, 100%);
  font-size: var(--fluid-lead);
  line-height: var(--leading-loose);
  color: var(--text-body);
}

/* Phones only: compact hero. Tablets (641px+) match desktop framing + hero photo crop */
@media (max-width: 640px) {
  /* Drop forced hero height + vertical centering - was leaving huge gaps on phones */
  .page-banner.products-hero {
    min-height: 0;
    padding: 8px 0 14px;
  }

  .page-banner.products-hero .services-hero-main {
    justify-content: flex-start;
    flex: 0 1 auto;
    padding: 4px 0 6px;
  }

  .page-banner.products-hero .eyebrow {
    margin-bottom: 8px;
  }

  .page-banner.products-hero .hero-title.products-hero-title {
    max-width: 100%;
    text-wrap: balance;
    overflow-wrap: anywhere;
    margin-bottom: 10px;
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .page-banner.products-hero .hero-text.products-hero-lead {
    margin-bottom: 14px;
    font-size: 0.92rem;
    line-height: 1.55;
  }
}

/* Tablet: same hero photo as desktop (style.css 900px/767px rules target generic .page-banner::before) */
@media (min-width: 641px) and (max-width: 1024px) {
  .page-banner.products-hero::before {
    background-size: auto, cover;
    background-position: center, center 28%;
    background-repeat: no-repeat;
  }
}

/* Hero CTAs: tablet/desktop match the phone row (services.css ≤640px rules cover phones via .products-hero) */
@media (min-width: 641px) {
  .page-banner.products-hero .services-hero-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .page-banner.products-hero .services-hero-actions .services-hero-btn {
    width: auto;
    min-height: 48px;
    padding-block: 0;
    padding-inline: 14px 16px;
    font-size: 0.88rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
  }

  .page-banner.products-hero .services-hero-actions .services-hero-btn--book {
    flex: 0 1 auto;
    white-space: nowrap;
  }

  .page-banner.products-hero .services-hero-actions .services-hero-btn--programs {
    flex: 1 1 min(0, 100%);
    min-width: 0;
    gap: 10px;
    padding-inline: 12px 18px;
    font-weight: 600;
  }

  .page-banner.products-hero .services-hero-actions .services-hero-programs__mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .page-banner.products-hero .services-hero-actions .services-hero-programs__mark svg {
    width: 16px;
    height: 16px;
  }

  .page-banner.products-hero .services-hero-actions .services-hero-programs__label {
    text-align: center;
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
}

/* --- Understand Our Coffee Roasts: copy left, image right --- */
/* Top spacing must live on .section.product-roasts - higher specificity than .product-roasts,
   otherwise padding-top: 0 here was overriding the single-class rule and looked flush to the edge */
.section.product-roasts {
  margin-top: 0;
  padding-top: clamp(40px, 5vw, 72px);
}

.product-roasts {
  padding-bottom: 0;
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(198, 154, 91, 0.07), transparent 52%),
    linear-gradient(180deg, rgba(10, 5, 4, 0.55) 0%, rgba(14, 8, 6, 0.35) 45%, transparent 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.product-roasts__block {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.product-roasts__split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.product-roasts__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.product-roasts__eyebrow {
  margin-bottom: 10px;
}

.product-roasts__figure {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}

.product-roasts__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.65s ease;
}

.product-roasts__figure:hover .product-roasts__img,
.product-roasts__figure:focus-within .product-roasts__img {
  transform: scale(1.035);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(198, 154, 91, 0.22);
}

.product-roasts__title {
  position: relative;
  width: 100%;
  max-width: none;
  padding-bottom: 12px;
  margin-bottom: clamp(10px, 1.5vw, 14px);
  text-align: left;
  /* Phones: compact single line */
  font-size: clamp(0.88rem, 0.55rem + 2.6vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  white-space: nowrap;
  background: linear-gradient(135deg, #fcefd8 0%, #e6c28e 42%, #c69a5b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tablet + desktop: larger title (stacked single-column layout below 769px - see split query) */
@media (min-width: 769px) {
  .product-roasts__title {
    font-size: clamp(1.85rem, 1.2rem + 1.25vw, 2.45rem);
  }
}

@supports not (background-clip: text) {
  .product-roasts__title {
    color: var(--gold-2);
    background: none;
  }
}

.product-roasts__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(100px, 32vw);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(198, 154, 91, 0.95), rgba(198, 154, 91, 0.2));
}

.product-section-title em {
  font-style: italic;
  color: var(--gold-2);
}

.product-roasts__prose {
  max-width: none;
  margin: 0;
  padding-bottom: clamp(12px, 2vw, 24px);
  text-align: left;
}

.product-roasts__prose p {
  margin: 0 0 1.1em;
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  line-height: 1.72;
  color: var(--text-body);
  text-align: left;
}

.product-roasts__prose p:last-child {
  margin-bottom: 0;
}

.product-roasts__prose strong {
  color: rgba(246, 234, 216, 0.95);
  font-weight: 600;
}

.product-roasts__prose a {
  color: var(--gold-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 154, 91, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.product-roasts__prose a:hover {
  color: #f0dcc4;
  border-bottom-color: rgba(230, 194, 142, 0.75);
}

/* Stack copy + image (phones, many landscapes, small tablets) - avoids cramped side-by-side above 640px */
@media (max-width: 768px) {
  .product-roasts__split {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .product-roasts__title {
    white-space: normal;
    text-wrap: balance;
    /* Match .section-title / “Freshly packed…” on phones — base clamp was tuned for one-line desktop */
    font-size: var(--text-section);
    line-height: var(--leading-section);
  }

  /* Lazy img had no layout height → figure never intersected for .reveal; show without waiting for IO */
  .product-roasts__figure.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Shorter on phones so the block doesn’t dominate the scroll */
  .product-roasts__img {
    max-height: min(200px, 46vw);
    width: 100%;
    height: auto;
  }

  .product-roasts__figure {
    margin-bottom: clamp(10px, 2.5vw, 16px);
  }
}

/* Desktop / wide tablet landscape: two columns + sized image */
@media (min-width: 769px) {
  .product-roasts__split {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.72fr);
  }

  .product-roasts__figure {
    max-width: min(380px, 100%);
    margin-left: auto;
  }
}

/* --- Products image showcase (copy left, image right) --- */
/* Same wash as Services programs section (.section-barista in style.css) */
/* Overrides global .section padding so there’s no gap above “Our beans” */
.section.product-showcase {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: clamp(42px, 6.2vw, 72px);
  background: radial-gradient(circle at top, rgba(198, 154, 91, 0.16), transparent 60%);
}

.product-showcase__split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  /* Top-align copy + image - center was leaving empty space above “Our beans” */
  align-items: start;
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
}

.product-showcase__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  padding-top: clamp(18px, 2.6vw, 36px);
}

.product-showcase__copy .eyebrow {
  margin-bottom: 12px;
}

.product-showcase__title {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 14px;
  text-align: left;
}

.product-showcase__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(100px, 32vw);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(198, 154, 91, 0.95), rgba(198, 154, 91, 0.2));
}

.product-showcase__intro {
  margin-top: 18px;
  margin-bottom: 0;
  max-width: 52ch;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  line-height: 1.65;
  color: var(--text-body);
}

.product-showcase__intro strong {
  color: rgba(246, 234, 216, 0.95);
  font-weight: 600;
}

.product-showcase__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(14px, 2.5vw, 28px);
  margin-inline: auto;
  margin-bottom: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 22px;
  box-sizing: border-box;
}

.product-showcase__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.65s ease;
}

@media (hover: hover) and (pointer: fine) {
  .product-showcase__figure:hover .product-showcase__img,
  .product-showcase__figure:focus-within .product-showcase__img {
    transform: scale(1.03);
    box-shadow:
      0 22px 64px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(198, 154, 91, 0.2);
  }
}

/* Stacked layout: one column (text then image). Grid gap alone controls space; avoid margin-top + gap doubling */
@media (max-width: 768px) {
  .section.product-showcase {
    padding-top: clamp(14px, 3.5vw, 22px);
  }

  .product-showcase__split {
    grid-template-columns: 1fr;
    gap: clamp(16px, 4vw, 24px);
  }

  .product-showcase__copy {
    padding-top: clamp(4px, 1.5vw, 14px);
  }

  .product-showcase__figure {
    margin-top: 0;
    margin-inline: 0;
    max-width: 100%;
    width: 100%;
  }

  .product-showcase__img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/* Two columns: cap image width so it stays balanced with copy; align to column end */
@media (min-width: 769px) {
  .product-showcase__split {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: center;
  }

  .product-showcase__figure {
    margin-top: clamp(10px, 2vw, 24px);
    margin-left: auto;
    margin-right: 0;
    justify-self: end;
    width: 100%;
    max-width: min(460px, 100%);
  }
}

/* Tablet: smaller product shot so it fits the column without dominating */
@media (min-width: 769px) and (max-width: 1024px) {
  .product-showcase__figure {
    max-width: min(360px, 100%);
  }
}

/* Large desktop: slightly more room for the product shot without dominating */
@media (min-width: 1100px) {
  .product-showcase__figure {
    max-width: min(500px, 100%);
  }
}

/* --- Coffee equipment & brewing gear (below beans showcase): image cards --- */
.section.product-equipment {
  position: relative;
  margin-top: 0;
  padding-top: clamp(28px, 4.8vw, 58px);
  padding-bottom: clamp(36px, 5vw, 64px);
  border-top: 1px solid rgba(198, 154, 91, 0.22);
  overflow: hidden;
  background:
    radial-gradient(ellipse 100% 70% at 50% -20%, rgba(198, 154, 91, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 45% at 0% 100%, rgba(139, 102, 48, 0.12), transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 60%, rgba(198, 154, 91, 0.08), transparent 48%),
    linear-gradient(165deg, rgba(18, 8, 5, 0.75) 0%, rgba(10, 4, 3, 0.92) 38%, rgba(13, 5, 4, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(198, 154, 91, 0.08);
}

.section.product-equipment::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 88vw);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(198, 154, 91, 0.35) 20%,
    rgba(230, 194, 142, 0.45) 50%,
    rgba(198, 154, 91, 0.35) 80%,
    transparent
  );
  pointer-events: none;
}

.section.product-equipment::after {
  content: "";
  position: absolute;
  right: -8%;
  top: 18%;
  width: min(420px, 55vw);
  height: min(420px, 55vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 154, 91, 0.06), transparent 68%);
  pointer-events: none;
}

.product-equipment__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: min(64ch, 100%);
  margin-bottom: clamp(30px, 4.5vw, 48px);
  position: relative;
  z-index: 1;
}

.product-equipment__header .eyebrow {
  margin-bottom: 10px;
}

.product-equipment__intro {
  margin-top: 12px;
  text-wrap: balance;
  padding-left: 14px;
  border-left: 2px solid rgba(198, 154, 91, 0.42);
  color: var(--text-body);
}

.product-equipment__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
  gap: clamp(18px, 2.5vw, 26px);
  width: 100%;
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .product-equipment__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.product-equipment-item {
  min-width: 0;
  list-style: none;
}

button.product-equipment-card {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

button.product-equipment-card:focus {
  outline: none;
}

button.product-equipment-card:focus-visible {
  outline: 2px solid rgba(230, 194, 142, 0.75);
  outline-offset: 3px;
}

/* Match .services-program-card (services page program grid) + warm gold tint */
.product-equipment-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  min-height: 0;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(198, 154, 91, 0.22);
  background:
    radial-gradient(ellipse 120% 80% at 100% 0%, rgba(198, 154, 91, 0.12), transparent 52%),
    linear-gradient(165deg, rgba(42, 24, 14, 0.55) 0%, rgba(14, 7, 5, 0.94) 55%, rgba(10, 5, 4, 0.98) 100%);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 40px rgba(198, 154, 91, 0.06);
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}

.product-equipment-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(
    90deg,
    rgba(198, 154, 91, 0.2),
    rgba(230, 194, 142, 0.55) 45%,
    rgba(198, 154, 91, 0.35) 100%
  );
  pointer-events: none;
}

.product-equipment-card::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -50px;
  width: 160px;
  height: 160px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 154, 91, 0.16), transparent 68%);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .product-equipment-card:hover {
    transform: translateY(-6px);
    border-color: rgba(230, 194, 142, 0.45);
    box-shadow:
      0 22px 64px rgba(0, 0, 0, 0.58),
      0 0 0 1px rgba(198, 154, 91, 0.22),
      0 0 48px rgba(198, 154, 91, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .product-equipment-card:hover .product-equipment-card__img {
    transform: scale(1.04);
  }

  .product-equipment-card:hover::before {
    background: linear-gradient(
      90deg,
      rgba(198, 154, 91, 0.35),
      rgba(255, 236, 210, 0.65) 48%,
      rgba(198, 154, 91, 0.45) 100%
    );
  }
}

.product-equipment-card__media {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: stretch;
  padding: clamp(14px, 3vw, 22px);
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 90% 65% at 50% 0%, rgba(198, 154, 91, 0.1), transparent 62%),
    rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(198, 154, 91, 0.12);
}

.product-equipment-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 38%, rgba(0, 0, 0, 0.18) 100%);
}

.product-equipment-card__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease;
}

.product-equipment-card__body {
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
  padding: clamp(16px, 2.2vw, 20px) clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 22px);
  padding-left: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  border-top: 1px solid rgba(198, 154, 91, 0.15);
  border-left: 3px solid rgba(198, 154, 91, 0.55);
  background: linear-gradient(
    90deg,
    rgba(198, 154, 91, 0.1) 0%,
    rgba(0, 0, 0, 0.2) 28%,
    transparent 72%
  );
}

.product-equipment-card__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.2rem, 2.1vw, 1.45rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #fcefd8 0%, var(--gold-2) 42%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not (background-clip: text) {
  .product-equipment-card__title {
    color: var(--gold-2);
    background: none;
  }
}

.product-equipment-card__desc {
  margin: 0;
  font-size: clamp(0.86rem, 1.25vw, 0.94rem);
  line-height: 1.58;
  color: var(--text-body);
}

.product-equipment-card__desc::first-line {
  color: rgba(230, 194, 142, 0.95);
}

.product-equipment-item.reveal:nth-child(1) {
  transition-delay: 0.04s;
}
.product-equipment-item.reveal:nth-child(2) {
  transition-delay: 0.08s;
}
.product-equipment-item.reveal:nth-child(3) {
  transition-delay: 0.12s;
}
.product-equipment-item.reveal:nth-child(4) {
  transition-delay: 0.16s;
}
.product-equipment-item.reveal:nth-child(5) {
  transition-delay: 0.2s;
}
.product-equipment-item.reveal:nth-child(6) {
  transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
  .product-equipment-card,
  .product-equipment-card__img {
    transition: none;
  }

  .product-equipment-card:hover {
    transform: none;
  }

  .product-equipment-card:hover .product-equipment-card__img {
    transform: none;
  }
}

/* Gear: image preview at natural/card scale (not full-width gallery size) */
.gear-lightbox {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 28px);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gear-lightbox.is-open {
  display: flex;
}

.gear-lightbox__backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.gear-lightbox__figure {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: fit-content;
  max-width: min(94vw, 640px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(198, 154, 91, 0.28);
  background: linear-gradient(165deg, rgba(28, 14, 8, 0.95) 0%, rgba(10, 5, 4, 0.98) 100%);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(198, 154, 91, 0.1);
}

.gear-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(72vh, 520px);
  object-fit: contain;
  background: #070302;
}

.gear-lightbox__caption {
  margin: 0;
  padding: 14px 18px 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  text-align: center;
  color: var(--gold-2);
  border-top: 1px solid rgba(198, 154, 91, 0.18);
  background: rgba(0, 0, 0, 0.25);
}

.gear-lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.gear-lightbox__close:hover {
  border-color: rgba(198, 154, 91, 0.5);
  background: rgba(255, 255, 255, 0.12);
}

.gear-lightbox__close:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 2px;
}

body.gear-lightbox-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .gear-lightbox {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* --- Why Choose Our Product - theme: --gold / --gold-2 / --bg-2 / --panel --- */
.product-why {
  position: relative;
  padding-top: clamp(8px, 1.5vw, 20px);
  padding-bottom: clamp(28px, 4vw, 44px);
  border-top: 1px solid rgba(198, 154, 91, 0.22);
  background:
    radial-gradient(ellipse 85% 60% at 50% 0%, rgba(198, 154, 91, 0.12), transparent 55%),
    radial-gradient(ellipse 70% 45% at 80% 100%, rgba(198, 154, 91, 0.06), transparent 50%),
    linear-gradient(180deg, var(--bg-2) 0%, #0d0504 48%, rgba(8, 4, 3, 0.98) 100%);
}

@media (max-width: 768px) {
  .product-why {
    padding-top: clamp(20px, 5vw, 30px);
  }
}

.product-why__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: 100%;
  margin: 0 0 clamp(26px, 4vw, 40px);
  padding: 0;
}

/* Same eyebrow box as “Our beans” / showcase (.eyebrow in style.css) */
.product-why__header .eyebrow {
  margin-bottom: 12px;
}

.product-why__heading {
  position: relative;
  width: 100%;
  padding-bottom: 14px;
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.75rem, 3.8vw, 2.55rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}

.product-why__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(110px, 36vw);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(198, 154, 91, 0.95), rgba(198, 154, 91, 0.2));
}

.product-why__heading em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, #fcefd8 0%, var(--gold-2) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not (background-clip: text) {
  .product-why__heading em {
    color: var(--gold-2);
    background: none;
  }
}

.product-why__intro {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.65;
}

/* Same card layout as Services “Why choose us” (.services-why-* in services.css) */
.product-why .product-why__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  width: 100%;
  max-width: 100%;
  gap: 14px;
}

.product-why .services-why-card {
  padding: 16px 16px 18px;
  border-radius: 20px;
  gap: 12px;
}

.product-why .services-why-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.product-why .services-why-card__icon svg {
  width: 22px;
  height: 22px;
}

.product-why .services-why-card__body {
  gap: 4px;
}

.product-why .services-why-card__body h3 {
  font-size: clamp(1.15rem, 2vw, 1.3rem);
}

.product-why .services-why-card__body p {
  font-size: 0.9rem;
  line-height: 1.55;
}

.product-why .services-why-card.reveal:nth-child(1) {
  transition-delay: 0.05s;
}
.product-why .services-why-card.reveal:nth-child(2) {
  transition-delay: 0.1s;
}
.product-why .services-why-card.reveal:nth-child(3) {
  transition-delay: 0.15s;
}
.product-why .services-why-card.reveal:nth-child(4) {
  transition-delay: 0.2s;
}

/* --- Wholesale CTA --- */
.product-wholesale {
  padding: clamp(20px, 3.5vw, 40px) 0 clamp(16px, 3vw, 28px);
}

.product-wholesale__content {
  text-align: left;
  overflow: visible;
}

.product-wholesale__inner {
  border-radius: 20px;
  padding: clamp(26px, 4vw, 40px) clamp(24px, 5vw, 44px);
  border: 1px solid rgba(230, 194, 142, 0.2);
  background:
    radial-gradient(ellipse 90% 80% at 20% 30%, rgba(198, 154, 91, 0.14), transparent 55%),
    linear-gradient(135deg, rgba(32, 18, 12, 0.95) 0%, rgba(14, 7, 5, 0.98) 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.product-wholesale__eyebrow {
  margin-bottom: 8px;
  font-size: 0.65rem;
  padding: 4px 12px;
  color: var(--gold-2);
}

.product-wholesale__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.35rem, 4.2vw, 2.1rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  max-width: min(30ch, 100%);
  overflow-wrap: break-word;
  overflow: visible;
  color: var(--text);
  /* Avoid "balance" here; it can interact badly with gradient text + inline spans */
  text-wrap: wrap;
}

/* Headline: cream lead + gold place name */
.product-wholesale__title-line {
  display: inline;
  color: rgba(250, 243, 232, 0.96);
  font-weight: 600;
  text-shadow:
    0 1px 0 rgba(20, 10, 6, 0.35),
    0 0 32px rgba(198, 154, 91, 0.1);
}

.product-wholesale__title-amp {
  font-weight: 600;
}

.product-wholesale__title-accent {
  display: inline;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  padding-left: 0;
  /* Extra end padding: background-clip:text often clips the last glyph (e.g. “l” in Nepal), especially italic */
  padding-inline-end: 0.22em;
  color: var(--gold-2);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(198, 154, 91, 0.4);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .product-wholesale__title-accent {
    background: linear-gradient(
      135deg,
      #fff8ee 0%,
      var(--gold-2) 34%,
      var(--gold) 62%,
      #d4a86a 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Use text-shadow for glow; filter:drop-shadow() can clip letters next to transform/stacking contexts */
    text-shadow:
      0 2px 14px rgba(198, 154, 91, 0.42),
      0 1px 2px rgba(0, 0, 0, 0.35);
  }
}

.product-wholesale__text {
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--text-secondary);
  max-width: 58ch;
  margin-bottom: 18px;
}

.product-wholesale__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

/* Shimmer (::after) + overflow:hidden can look like a shadow glitch on full-width outline buttons */
.product-wholesale__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  height: auto;
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  box-sizing: border-box;
  overflow: visible;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
}

.product-wholesale__actions .btn::after {
  display: none;
}

.product-wholesale__actions .btn-primary {
  font-weight: 600;
  border-color: rgba(255, 248, 240, 0.22);
  box-shadow: 0 4px 18px rgba(198, 154, 91, 0.14);
}

.product-wholesale__outline {
  border-color: rgba(230, 194, 142, 0.4);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
  font-weight: 600;
}

/* Desktop (≥1025px): premium wide card, full inner width, left-aligned copy */
@media (min-width: 1025px) {
  .product-wholesale__content {
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }
}

/* --- Responsive --- */
/* Tablet (768–1024px): centered column, readable measure; buttons row with wrap when narrow */
@media (min-width: 768px) and (max-width: 1024px) {
  .product-wholesale {
    padding: clamp(18px, 3.2vw, 36px) 0 clamp(14px, 2.8vw, 26px);
  }

  .product-wholesale__inner {
    padding: clamp(26px, 4.2vw, 40px) clamp(28px, 5vw, 40px);
    padding-inline: max(28px, env(safe-area-inset-left, 0px)) max(28px, env(safe-area-inset-right, 0px));
  }

  .product-wholesale__content {
    max-width: min(38rem, 100%);
    margin-inline: auto;
    text-align: center;
    padding-inline: 0;
  }

  .product-wholesale__eyebrow {
    margin-bottom: 10px;
    display: inline-block;
    max-width: 100%;
  }

  .product-wholesale__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.06em;
    margin-inline: auto;
    margin-bottom: 14px;
    max-width: min(100%, 26rem);
    font-size: clamp(1.48rem, 2.9vw, 2rem);
    line-height: 1.14;
    letter-spacing: -0.025em;
  }

  .product-wholesale__title-line {
    display: block;
  }

  .product-wholesale__title-accent {
    display: block;
  }

  .product-wholesale__text {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 22px;
    max-width: min(48ch, 100%);
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .product-wholesale__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    max-width: min(24rem, 100%);
    margin-inline: auto;
  }

  .product-wholesale__actions .btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    max-width: 100%;
    justify-content: center;
    min-height: 48px;
    padding-inline: 18px;
  }
}

/* Mobile (≤767px): centered stack, comfortable tap targets */
@media (max-width: 767px) {
  .product-wholesale {
    padding-top: clamp(14px, 3vw, 22px);
    padding-bottom: clamp(12px, 2.5vw, 18px);
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
  }

  .product-wholesale__inner {
    padding: clamp(22px, 5vw, 30px) clamp(20px, 5.5vw, 26px);
    padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
    border-radius: 18px;
  }

  .product-wholesale__content {
    text-align: center;
    max-width: 100%;
    margin-inline: auto;
  }

  .product-wholesale__eyebrow {
    margin-bottom: 10px;
    display: inline-block;
    max-width: 100%;
    line-height: 1.35;
    padding-inline: 10px;
    font-size: 0.62rem;
  }

  .product-wholesale__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.04em;
    margin-inline: auto;
    margin-bottom: 12px;
    max-width: 100%;
    font-size: clamp(1.42rem, 5.8vw, 1.72rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
  }

  .product-wholesale__title-line {
    display: block;
  }

  .product-wholesale__title-accent {
    display: block;
  }

  .product-wholesale__text {
    font-size: 0.915rem;
    line-height: 1.62;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
    max-width: min(44ch, 100%);
  }

  .product-wholesale__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .product-wholesale__actions .btn {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 0.9rem;
    line-height: 1.25;
    border-radius: 999px;
    justify-content: center;
  }

  /* Two equal CTAs on slightly wider phones (cleaner than a single skinny column) */
  @media (min-width: 380px) {
    .product-wholesale__actions {
      grid-template-columns: 1fr 1fr;
      max-width: min(24rem, 100%);
    }
  }

  .product-wholesale__actions .btn-primary {
    box-shadow: 0 3px 14px rgba(198, 154, 91, 0.16);
  }
}