@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&family=Zilla+Slab:wght@500;600;700&display=swap');

/* =========================================================================
   RDP Merch — Team-kit single-product page composition
   Brand system per rdp-brand-guide.md. Red leads, blue anchors, ink text.

   SCOPE: every rule is gated under .rdp-kitpage, a class added only by the
   custom content-single-product-rdp-kit.php template (one product). This
   styles the PAGE COMPOSITION (hero, roster rail, promise band) around the
   bundle builder; the builder itself is styled by the plugin's frontend.css.
   ========================================================================= */

.rdp-kitpage {
  /* Neutrals */
  --white: #ffffff;
  --paper: #f7f8fa;
  --grey-100: #eef0f2;
  --grey-200: #e1e5ea;
  --grey-400: #9aa1ab;
  --grey-600: #5b626c;
  --ink: #1b1e24;

  /* RDP Red (lead accent) */
  --red: #d2232a;
  --red-700: #a81b21;
  --red-100: #fbe3e4;

  /* Ink-Blue (anchor) */
  --blue: #1e3a5f;
  --blue-800: #15293f;
  --blue-400: #3d6fa6;
  --blue-100: #e5ecf3;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* Spacing (8-pt) */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-2xl: 48px;
  --s-3xl: 64px;

  --hairline: 1px solid var(--grey-200);

  --font-display: "Anton", Impact, "Haettenschweiler", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", sans-serif;
  --font-slab: "Zilla Slab", Georgia, serif;

  --dur-quick: 200ms;
  --dur-base: 300ms;
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: var(--font-body);
  color: var(--ink);
}

.rdp-kitpage *,
.rdp-kitpage *::before,
.rdp-kitpage *::after {
  box-sizing: border-box;
}

/* Shared overline */
.rdp-kitpage__overline,
.rdp-kitpage__rail-label,
.rdp-kitpage__optional-tag {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}

/* =========================================================================
   1. Hero — white split: text + product image to the side.
   Palette per brand: white surface, ink text, red lead overline, ink-blue
   anchors the image frame. Red stays a rationed accent.
   ========================================================================= */

.rdp-kitpage__hero {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--s-2xl);
  padding: var(--s-2xl);
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-lg);
}
.rdp-kitpage__hero.has-media {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-2xl);
  align-items: center;
}

/* Halftone — screen-print dots fading in from the right */
.rdp-kitpage__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(var(--grey-200) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(105deg, transparent 55%, #000);
  mask-image: linear-gradient(105deg, transparent 55%, #000);
}

.rdp-kitpage__hero-text {
  position: relative;
}
.rdp-kitpage__overline {
  margin-bottom: var(--s-sm);
}

.rdp-kitpage__title {
  margin: 0 0 var(--s-md);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  font-size: clamp(36px, 5vw, 54px);
  color: var(--ink);
}
/* Red stitch underline under the title — the embroidery nod */
.rdp-kitpage__title::after {
  content: "";
  display: block;
  width: 72px;
  height: 0;
  margin-top: var(--s-md);
  border-top: 3px dashed var(--red);
}

.rdp-kitpage__subtitle {
  margin: var(--s-lg) 0 0;
  max-width: 48ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--grey-600);
}

/* Product image — anchored in an ink-blue framed panel */
.rdp-kitpage__hero-media {
  position: relative;
  padding: var(--s-md);
  background: var(--paper);
  border: var(--hairline);
  border-radius: var(--r-lg);
}
/* Registration mark — the "official" stamp, top-right of the image panel */
.rdp-kitpage__hero-media::after {
  content: "";
  position: absolute;
  top: var(--s-md);
  right: var(--s-md);
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0.5;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 0V22M0 11H22' stroke='%231e3a5f' stroke-width='1'/%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='%231e3a5f' stroke-width='1'/%3E%3C/svg%3E");
}
.rdp-kitpage__hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

/* =========================================================================
   2. Body grid — sticky roster rail + builder column
   ========================================================================= */

.rdp-kitpage__body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--s-2xl);
  align-items: start;
}

/* Both templates skip the rail when no component/template data exists; without
   this guard the lone main column would land in the 300px rail track. */
.rdp-kitpage__body:not(:has(.rdp-kitpage__rail)) {
  grid-template-columns: minmax(0, 1fr);
}

/* Theme floats/caps .summary via #content-scoped rules; reclaim the column. */
.rdp-kitpage__main {
  min-width: 0;
}
.rdp-kitpage .summary.entry-summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- Roster rail ---- */
.rdp-kitpage__rail-sticky {
  position: sticky;
  top: var(--s-lg);
  padding: var(--s-lg);
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-lg);
}
.rdp-kitpage__rail-label {
  margin-bottom: var(--s-md);
}

.rdp-kitpage__roster {
  counter-reset: rdp-roster;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rdp-kitpage__roster-item {
  counter-increment: rdp-roster;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding: var(--s-sm) 0;
  border-bottom: var(--hairline);
}
.rdp-kitpage__roster-item:last-child {
  border-bottom: 0;
}

/* Numbered registration badge — slab numerals, the "official" count */
.rdp-kitpage__roster-thumb {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: var(--grey-100);
  border-radius: var(--r-sm);
}
.rdp-kitpage__roster-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rdp-kitpage__roster-item::before {
  content: counter(rdp-roster);
  position: absolute;
  top: 50%;
  left: 36px;
  transform: translateY(-50%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: 12px;
  color: var(--white);
  background: var(--blue);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white);
}

.rdp-kitpage__roster-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rdp-kitpage__roster-name {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  font-size: 15px;
  color: var(--ink);
}
.rdp-kitpage__roster-qty {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--grey-400);
}

/* ---- Optional add-on — stitched, set apart in red ---- */
.rdp-kitpage__optional {
  margin-top: var(--s-md);
  padding: var(--s-md);
  border: 2px dashed var(--red);
  border-radius: var(--r-md);
  background: #fffafa;
}
.rdp-kitpage__optional-tag {
  margin-bottom: var(--s-sm);
  color: var(--red-700);
}
.rdp-kitpage__optional-row {
  display: flex;
  align-items: center;
  gap: var(--s-md);
}
.rdp-kitpage__optional .rdp-kitpage__roster-thumb {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}
.rdp-kitpage__optional-note {
  margin: var(--s-sm) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey-600);
}

/* =========================================================================
   3. Promise band — "One order. Sorted, bagged, done."
   ========================================================================= */

.rdp-kitpage__promise {
  margin-top: var(--s-3xl);
  padding-top: var(--s-2xl);
  border-top: 3px dashed var(--blue); /* stitch line — embroidery nod */
}
.rdp-kitpage__promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2xl);
}
.rdp-kitpage__promise-item h3 {
  margin: 0 0 var(--s-sm);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  font-size: 22px;
  color: var(--ink);
}
.rdp-kitpage__promise-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey-600);
}

/* =========================================================================
   4. Reveal motion (signature-lite) — hero + rail arrive with intent
   ========================================================================= */

@keyframes rdp-kit-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rdp-kitpage__hero,
.rdp-kitpage__rail-sticky {
  animation: rdp-kit-rise var(--dur-base) var(--ease-snap) both;
}
.rdp-kitpage__rail-sticky { animation-delay: 60ms; }

/* =========================================================================
   5. Responsive — collapse to one column at the brand breakpoint
   ========================================================================= */

@media (max-width: 980px) {
  .rdp-kitpage__hero.has-media {
    grid-template-columns: 1fr;
    gap: var(--s-xl);
  }
  .rdp-kitpage__hero-media {
    max-width: 420px;
  }
  .rdp-kitpage__body {
    grid-template-columns: 1fr;
    gap: var(--s-xl);
  }
  /* Roster moves above the builder; release the sticky so it scrolls away. */
  .rdp-kitpage__rail-sticky {
    position: static;
  }
  .rdp-kitpage__roster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--s-lg);
  }
  .rdp-kitpage__roster-item:nth-last-child(2) {
    border-bottom: 0;
  }
}

@media (max-width: 600px) {
  .rdp-kitpage__hero {
    padding: var(--s-xl) var(--s-md);
  }
  .rdp-kitpage__roster {
    grid-template-columns: 1fr;
  }
  .rdp-kitpage__promise-grid {
    grid-template-columns: 1fr;
    gap: var(--s-lg);
  }
}

/* =========================================================================
   5b. Color swatches — progressive enhancement over the native <select>.
   JS (rdp-kitpage.js) builds .rdp-swatches from the select's options and
   keeps the select as the source of truth. The select is visually hidden
   (still reachable for assistive tech / no-JS fallback) once enhanced.
   ========================================================================= */

.rdp-kitpage .rdp-bundle-color-field.is-swatched .rdp-bundle-color-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rdp-kitpage .rdp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin-top: var(--s-xs);
}

.rdp-kitpage .rdp-swatch {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  background-clip: padding-box;
  border: var(--hairline);
  border-radius: 50%;
  transition: transform var(--dur-quick) var(--ease-snap),
    box-shadow var(--dur-quick) var(--ease-snap);
}
.rdp-kitpage .rdp-swatch:hover {
  transform: scale(1.08);
}
.rdp-kitpage .rdp-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-100);
}
/* Selected — red ring + ink hairline. Red leads the "chosen" state. */
.rdp-kitpage .rdp-swatch.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--red);
}
/* Checkmark for non-colour reliance on the active state */
.rdp-kitpage .rdp-swatch.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px;
  height: 5px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  border-color: var(--swatch-tick, #fff);
  transform: translateY(-1px) rotate(-45deg);
}

/* Selected colour name, echoed from the select */
.rdp-kitpage .rdp-swatch-label {
  display: block;
  margin-top: var(--s-sm);
  font-size: 13px;
  color: var(--grey-600);
}
.rdp-kitpage .rdp-swatch-label strong {
  font-weight: 700;
  color: var(--ink);
}

/* Disabled (optional add-on not opted in yet) */
.rdp-kitpage .rdp-swatches.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* =========================================================================
   6. Reduced motion — always ship the fallback
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .rdp-kitpage *,
  .rdp-kitpage *::before,
  .rdp-kitpage *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .rdp-kitpage__hero,
  .rdp-kitpage__rail-sticky {
    opacity: 1;
    transform: none;
  }
}