/* Phase 2: native/Elementor product collections. Category and brand sections use the earlier styles.
 * Existing renderers, URLs, query arguments and commerce handlers stay in place.
 */
:root {
  --pepe-font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --pepe-collection-gap: clamp(12px, 1.6vw, 24px);
  --pepe-collection-space: clamp(40px, 5vw, 72px);
  --pepe-collection-heading: clamp(1.75rem, 3vw, 2.5rem);
  --pepe-plate: #f6f4f0;
  --pepe-on-dark: #fff8f0;
  --pepe-on-dark-muted: #d0c6be;
  --pepe-on-dark-line: #665c57;
  --pepe-card-radius: 4px;
}

/* A quiet catalogue rhythm: numbered headings, hairlines, generous spacing. */
body.pepe-pulse { counter-reset: pepe-collection; }
body.pepe-pulse :is(.pepe-products-section, .pepe-product-tabs, .pepe-campaign-rail) {
  counter-increment: pepe-collection;
  min-width: 0;
  margin-block: var(--pepe-collection-space) 0;
  padding-block: var(--pepe-space-6) 0;
  border-top: 1px solid var(--pepe-line);
}
body.pepe-pulse :is(.pepe-products-section, .pepe-product-tabs, .pepe-campaign-rail)
  :is(.pepe-circle-heading, .pepe-section-head, .pepe-campaign-heading) {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pepe-space-5);
  margin-bottom: var(--pepe-space-5);
}
body.pepe-pulse :is(.pepe-products-section, .pepe-product-tabs, .pepe-campaign-rail) h2 {
  margin: 0;
  font-size: var(--pepe-collection-heading);
  line-height: var(--pepe-leading-heading);
  font-weight: var(--pepe-weight-bold) !important;
  color: var(--pepe-text);
  overflow-wrap: anywhere;
}
body.pepe-pulse :is(.pepe-products-section, .pepe-product-tabs, .pepe-campaign-rail) h2::before {
  content: counter(pepe-collection, decimal-leading-zero) " / COLLECTIONS";
  display: block;
  margin-bottom: var(--pepe-space-3);
  font: var(--pepe-weight-medium) .6875rem/1.5 var(--pepe-font-mono);
  letter-spacing: .1em;
  color: var(--pepe-text-muted);
}
body.pepe-pulse .pepe-campaign-rail .pepe-campaign-overline { display: none; }
body.pepe-pulse :is(.pepe-products-section, .pepe-product-tabs, .pepe-campaign-rail)
  :is(.pepe-circle-heading, .pepe-section-head, .pepe-campaign-heading) p {
  margin: var(--pepe-space-3) 0 0;
  max-width: 56ch;
  color: var(--pepe-text-muted);
  font-size: var(--pepe-text-sm);
  line-height: var(--pepe-leading-body);
}
body.pepe-pulse :is(.pepe-campaign-rail-actions) button {
  flex: 0 0 var(--pepe-target);
  width: var(--pepe-target);
  height: var(--pepe-target);
  padding: 0;
  border: 1px solid var(--pepe-line);
  border-radius: 0;
  background: var(--pepe-surface);
  color: var(--pepe-text);
  font-size: 20px;
  transform: none;
}
body.pepe-pulse :is(.pepe-campaign-rail-actions) button:hover { background: var(--pepe-brand-soft); }
body.pepe-pulse :is(.pepe-campaign-product-track) {
  min-width: 0;
  gap: var(--pepe-collection-gap);
  padding: var(--pepe-space-2) var(--pepe-space-1) var(--pepe-space-4);
  scroll-padding-inline: var(--pepe-space-1);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--pepe-line) transparent;
}

/* Catalogue cards: light plates and factual metadata instead of decorative boxes. */
body.pepe-pulse .pepe-product-card,
body.pepe-pulse .pepe-campaign-product-track > .pepe-product-card {
  border: 1px solid var(--pepe-line);
  border-radius: var(--pepe-card-radius);
  background: var(--pepe-surface);
  box-shadow: none;
  transform: none;
}
body.pepe-pulse .pepe-product-card:hover,
body.pepe-pulse .pepe-campaign-product-track > .pepe-product-card:hover { border-color: var(--pepe-text-muted); box-shadow: none; transform: none; }
body.pepe-pulse .pepe-product-media { aspect-ratio: 1.12; background: var(--pepe-plate); }
body.pepe-pulse .pepe-product-media > a { position: relative; isolation: isolate; background: var(--pepe-plate); }
body.pepe-pulse .pepe-product-media img { width: 100%; height: 100%; padding: var(--pepe-space-5); object-fit: contain; mix-blend-mode: multiply; transform: none; transition: opacity var(--pepe-motion); }
body.pepe-pulse .pepe-product-media .pepe-product-image-alt { position: absolute; inset: 0; opacity: 0; }
body.pepe-pulse .pepe-product-card.has-secondary-image:focus-within .pepe-product-image { opacity: 0; }
body.pepe-pulse .pepe-product-card.has-secondary-image:focus-within .pepe-product-image-alt { opacity: 1; }
body.pepe-pulse .pepe-product-body { padding: var(--pepe-space-4); gap: var(--pepe-space-3); }
body.pepe-pulse .pepe-card-brand { color: var(--pepe-text-muted); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; font-weight: var(--pepe-weight-bold); overflow-wrap: anywhere; }
body.pepe-pulse .pepe-product-card .pepe-product-body h3 {
  height: 2.8em !important;
  min-height: 2.8em !important;
  max-height: 2.8em !important;
  font-size: var(--pepe-text-sm);
  font-weight: var(--pepe-weight-medium) !important;
  color: var(--pepe-text);
  letter-spacing: -.015em;
  line-height: 1.4 !important;
  overflow-wrap: anywhere;
}
body.pepe-pulse .pepe-card-sku { max-width: 100%; font: .6875rem/1.5 var(--pepe-font-mono); color: var(--pepe-text-muted); overflow-wrap: anywhere; }
body.pepe-pulse .pepe-card-sku > span { letter-spacing: .06em; }
body.pepe-pulse .pepe-product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pepe-space-2); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.4; font-weight: var(--pepe-weight-bold); color: var(--pepe-text); overflow-wrap: anywhere; }
body.pepe-pulse .pepe-product-price del { margin: 0; color: var(--pepe-text-muted); font-size: var(--pepe-text-xs); }
body.pepe-pulse .pepe-product-badge { top: var(--pepe-space-3); left: var(--pepe-space-3); border-radius: 0; background: var(--pepe-button-bg); color: var(--pepe-button-ink); font-size: .625rem; font-weight: var(--pepe-weight-bold); line-height: 1.3; padding: 6px 8px; }
body.pepe-pulse .pepe-product-badge-new { background: var(--pepe-surface-deep); color: var(--pepe-on-dark); }
body.pepe-pulse .pepe-product-card .pepe-product-button {
  min-height: var(--pepe-target);
  padding: 12px !important;
  background: var(--pepe-surface) !important;
  border: 1px solid var(--pepe-line) !important;
  border-radius: var(--pepe-card-radius) !important;
  color: var(--pepe-text) !important;
  font-size: var(--pepe-text-xs) !important;
  line-height: 1.4 !important;
  clip-path: none;
  white-space: normal;
  transform: none;
}
body.pepe-pulse .pepe-product-card .pepe-product-button:hover { background: var(--pepe-surface-deep) !important; border-color: var(--pepe-surface-deep) !important; color: var(--pepe-on-dark) !important; }
body.pepe-pulse .pepe-product-card .pepe-product-button.loading { cursor: progress; }
body.pepe-pulse .pepe-product-card .added_to_cart { display: inline-flex; min-height: var(--pepe-target); align-items: center; color: var(--pepe-text); font-size: var(--pepe-text-xs); text-decoration: underline; }
body.pepe-pulse .pepe-campaign-product-track > .pepe-product-card { flex-basis: calc((100% - 3 * var(--pepe-collection-gap)) / 4); }
body.pepe-pulse .pepe-products-grid { gap: var(--pepe-collection-gap); }
body.pepe-pulse .pepe-campaign-rail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pepe-space-4); }
body.pepe-pulse :is(.pepe-campaign-view-all, .pepe-products-section .pepe-text-link, .pepe-product-tabs .pepe-text-link) { color: var(--pepe-text) !important; min-height: var(--pepe-target); display: inline-flex; align-items: center; gap: var(--pepe-space-2); font-size: var(--pepe-text-sm); font-weight: var(--pepe-weight-medium); text-decoration: underline; text-underline-offset: 4px; white-space: normal; }
body.pepe-pulse .pepe-product-tabs .pepe-tab-list { gap: var(--pepe-space-2); margin: 0 0 var(--pepe-space-5); }
body.pepe-pulse .pepe-product-tabs [role=tab] { min-height: var(--pepe-target); padding: 12px 20px; border: 1px solid var(--pepe-line); border-radius: 0; background: var(--pepe-surface); color: var(--pepe-text); font-size: var(--pepe-text-sm); font-weight: var(--pepe-weight-medium); white-space: normal; }
body.pepe-pulse .pepe-product-tabs [role=tab][aria-selected=true] { background: var(--pepe-surface-deep); border-color: var(--pepe-surface-deep); color: var(--pepe-on-dark); }
body.pepe-pulse :is(.pepe-products-section, .pepe-product-tabs, .pepe-campaign-rail) :is(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--pepe-focus) !important;
  outline-offset: 2px !important;
}

@media (hover: hover) and (pointer: fine) {
  body.pepe-pulse .pepe-product-card.has-secondary-image:hover .pepe-product-image { opacity: 0; }
  body.pepe-pulse .pepe-product-card.has-secondary-image:hover .pepe-product-image-alt { opacity: 1; }
}
@media (max-width: 1023px) {
  body.pepe-pulse .pepe-campaign-product-track > .pepe-product-card { flex-basis: calc((100% - 2 * var(--pepe-collection-gap)) / 3); }
  body.pepe-pulse .pepe-products-grid { grid-template-columns: repeat(min(3, var(--pepe-cols, 4)), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body.pepe-pulse .pepe-products-grid { grid-template-columns: repeat(min(2, var(--pepe-cols, 4)), minmax(0, 1fr)); }
  body.pepe-pulse .pepe-campaign-product-track > .pepe-product-card { flex-basis: calc((100% - var(--pepe-collection-gap)) / 2); }
  body.pepe-pulse .pepe-product-body { padding: var(--pepe-space-3); gap: var(--pepe-space-2); }
  body.pepe-pulse .pepe-product-media img { padding: var(--pepe-space-4); }
  body.pepe-pulse .pepe-product-card .pepe-product-button { padding-inline: 8px !important; }
}
@media (max-width: 389px) {
  /* A full, readable rail card with a visible preview of the next item. */
  body.pepe-pulse .pepe-campaign-product-track > .pepe-product-card { flex-basis: 82%; }
  body.pepe-pulse .pepe-products-grid { grid-template-columns: minmax(0, 1fr); }
  body.pepe-pulse .pepe-product-tabs [role=tab] { flex: 1 1 auto; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body.pepe-pulse :is(.pepe-products-section, .pepe-product-tabs, .pepe-campaign-rail) * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}