/* Panelling Direct — archive bundle (v1.45.54).
   Page-specific layer; loads only on the contexts that need it.
   Source line ranges (v1.45.53): 2523-2640, 3278-3387

   LOAD ORDER IS LOAD-BEARING:
       style.css (core-early)  ->  page bundle(s)  ->  css/core-late.css
   Enqueued by pd_enqueue_assets() in functions.php. */

/* ── source lines 2523–2640 ── */
/* ══════════════════════════════════════════════════════════════
   v1.2.0 — ARCHIVE (SHOP / CATEGORY) PAGE
   Values taken verbatim from Figma via the MCP design-context tool.
   Breakpoints:
     ≥1000px  → L card variant (16/20px type, 10px radius, 22px body pad)
     779–999  → Small card variant, 4-col grid, decor photos visible
     ≤778px   → No decor, 3-col grid, no carousel arrows
     ≤560px   → 2-col grid, compact type
   ══════════════════════════════════════════════════════════════ */

.pd-archive {
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: var(--white);
}

/* ── 1. TITLE BAND ──────────────────────────────────────────── */
.pd-title-band {
  background: var(--lavender);
  border-bottom: 1px solid var(--rule);
  padding: 0;
  overflow: hidden;   /* contain the hero so its gradient blends cleanly */
  position: relative; /* positioning context for the absolute hero */
}
.pd-title-band__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  /* Reserve space on the right for the hero so copy never slides under it.
     min() means: take 40% of the container, but cap at 600px on very wide
     viewports. At ≤999px this is overridden to a plain row-pad. */
  padding: 32px min(40%, 600px) 62px var(--row-pad);
  position: relative;
  z-index: 2;
  min-height: 340px;
  box-sizing: border-box;
}
.pd-title-band__copy {
  max-width: 725px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
/* No description -> no reserved 340px; the band hugs its content
   (v1.45.1, designer note 1). */
.pd-title-band--no-desc .pd-title-band__inner {
  min-height: 0;
  padding-bottom: 40px;
}

/* Breadcrumb — Figma: Open Sans 12px, SemiBold on page names */
.pd-breadcrumb,
.pd-title-band .breadcrumb {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.2;
  color: #000;
  padding: 0; margin: 0;
  background: transparent;
  border: 0;
}
.pd-title-band .breadcrumb a,
.pd-title-band .breadcrumb .last {
  font-weight: 600;
  color: #000;
  text-decoration: none;
}
.pd-title-band .breadcrumb a:hover { color: var(--navy); }
.pd-title-band .breadcrumb span { margin: 0 4px; }

/* Block wrapping title + description (Figma gap: 12px between them) */
.pd-title-band__copy > .pd-title-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pd-collection-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.pd-collection-description {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;   /* reduced from 18px per the category-page reference */
  line-height: 1.5;
  color: #000;
  max-width: 620px;
  margin: 0;
}
.pd-collection-description.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-collection-description__more {
  align-self: flex-start;
  margin-top: -4px; /* tighten against the heading column's 12px gap */
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-mid, #30287C);
  text-decoration: underline;
  cursor: pointer;
}
.pd-collection-description p { margin: 0 0 8px; }
.pd-collection-description p:last-child { margin: 0; }
.pd-collection-description a { color: var(--navy-mid); text-decoration: underline; }


/* ── source lines 3278–3387 ── */
/* ── 2. SUB-CATEGORIES CAROUSEL ──────────────────────────────── */
.pd-subcats {
  max-width: var(--row-max);
  margin: 32px auto 20px;
  padding: 0 var(--row-pad);
  position: relative;
}
.pd-subcats__inner {
  position: relative;
  display: flex;
  align-items: center;
}
.pd-subcats__track {
  flex: 1 1 auto;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 2px 0;
  margin: 0; /* arrows overlap now — no reserved gutter (v1.45.1) */
}
/* All cards fit -> centre them (class set by js/archive.js). */
.pd-subcats__track--centered { justify-content: center; }
.pd-subcats__track::-webkit-scrollbar { display: none; }

/* Sub-cat card: unified card with border; image flush, label in padded body */
.pd-subcat-card {
  flex: 0 0 calc((100% - 90px) / 6); /* 6 visible on L (5 gaps × 18px = 90) */
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
}
.pd-subcat-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.pd-subcat-card__image {
  aspect-ratio: 1 / 1;
  background: #f6f6f6;
  width: 100%;
}
.pd-subcat-card__image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.25s ease;
}
.pd-subcat-card:hover .pd-subcat-card__image img { transform: scale(1.03); }
.pd-subcat-card__label {
  padding: 18px 22px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: #000;
  text-align: center;
}

/* Carousel prev/next — overlap the track edges so the cards run the
   full content width with no gutter reserved for controls
   (v1.45.1, designer note 5). White pill for legibility over cards. */
.pd-subcats__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px; height: 42px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  color: #000;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: opacity 0.15s;
}
.pd-subcats__arrow--prev { left: -10px; }
.pd-subcats__arrow--next { right: -10px; }
.pd-subcats__arrow:hover { opacity: 0.6; }
.pd-subcats__arrow.is-disabled,
.pd-subcats__arrow[disabled] {
  opacity: 0.2;
  cursor: not-allowed;
}

.pd-subcats__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
}
.pd-subcats__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: #D0CCE0;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}
.pd-subcats__dot:hover { background: #b8b3d0; }
.pd-subcats__dot.is-active { background: var(--navy); }