/* ============================================================================
 * wpb.css — Wallpapers Back premium/editorial uplift.
 * Loaded site-wide AFTER site.css, so these rules win on cascade tie.
 * Vanilla CSS only. Honors the existing --token design system (site.css).
 * Aesthetic target: interior-design fashion-house (de Gournay / Gucci / Cole & Son).
 * ========================================================================== */

:root {
  --wpb-ease: cubic-bezier(.22,.61,.36,1);
  --wpb-scrim: linear-gradient(
      to bottom,
      rgba(12,10,8,.34) 0%,
      rgba(12,10,8,.10) 26%,
      rgba(12,10,8,.16) 56%,
      rgba(12,10,8,.72) 100%);
}

/* ── HEADER: refined wordmark + thin Gucci hamburger ─────────────────────── */
.site-header { padding: 16px 34px; }
.brand {
  /* tighter, more couture letterforms; subtle optical tracking */
  font-weight: 400;
  letter-spacing: .055em;
  font-size: 30px;
  line-height: 1;
  position: relative;
  padding-bottom: 2px;
}
@media (min-width: 721px) { .brand { font-size: 34px; } }
.brand::after {
  /* hairline flourish under the wordmark — appears on hover/focus */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--wpb-ease);
}
.brand:hover::after, .brand:focus-visible::after { transform: scaleX(1); }
@media (max-width: 720px) { .brand { font-size: 26px; } }

/* Gucci-style ultra-thin hamburger: two hairlines, no chrome circle */
.hamburger {
  background: transparent !important;
  backdrop-filter: none;
  width: 40px; height: 40px;
  gap: 7px;
}
.hamburger span { width: 26px; height: 1px; background: var(--ink); }
.hamburger:hover span { background: var(--gold); }
.hamburger span:nth-child(2) { width: 18px; align-self: flex-end; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); width: 26px; }

/* Nav panel: a touch more couture — wider gutters, serif section feel */
.nav-panel { width: 290px; padding: 22px 0 16px; }
.nav-panel a {
  padding: 11px 30px;
  letter-spacing: .14em;
  font-size: 11px;
  transition: color .2s var(--wpb-ease), padding-left .2s var(--wpb-ease);
}
.nav-panel a:hover { padding-left: 36px; }
.nav-panel a.active { border-left-width: 2px; }

/* ── HERO: full-bleed rotating image with scrim + centered overlay ───────── */
/* The hero stays a rotating crossfade (existing markup). We add a dark
 * gradient scrim and an overlaid wordmark + CTA pill, so contrast on the
 * wordmark over imagery is high (APCA Lc >= 60 target). */
.hero-section { background: #0c0a08; }

/* Scrim layer sits above slides, below the overlay content. pointer-events
 * none so the slide click-through still works. */
.hero-section::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--wpb-scrim);
  z-index: 2;
  pointer-events: none;
}

/* Centered overlay block on the hero */
.hero-overlay {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(92vw, 980px);
  text-align: center;
  color: #fff;
  pointer-events: none; /* let the hero slide receive clicks; CTA re-enables */
}
.hero-overlay .hero-eyebrow {
  display: block;
  font: 500 12px/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  margin: 0 0 18px;
  text-shadow: 0 1px 18px rgba(0,0,0,.55);
}
.hero-overlay .hero-wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 8.4vw, 104px);
  line-height: .98;
  letter-spacing: .015em;
  margin: 0;
  color: #fff;
  /* layered shadow guarantees legibility on light imagery */
  text-shadow: 0 2px 30px rgba(0,0,0,.62), 0 1px 4px rgba(0,0,0,.5);
}
.hero-overlay .hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 2vw, 23px);
  margin: 16px auto 0;
  max-width: 40ch;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 16px rgba(0,0,0,.6);
}

/* Centered-bottom CTA pill — "Shop the Collections" */
.hero-cta-wrap {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 58px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hero-cta {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 13px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1714;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 16px 38px;
  box-shadow: 0 10px 38px rgba(0,0,0,.34);
  transition: background .3s var(--wpb-ease), color .3s var(--wpb-ease),
              transform .3s var(--wpb-ease), box-shadow .3s var(--wpb-ease);
}
.hero-cta:hover {
  background: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 46px rgba(0,0,0,.42);
}
.hero-cta .arr { font-size: 15px; line-height: 1; transition: transform .3s var(--wpb-ease); }
.hero-cta:hover .arr { transform: translateX(4px); }

/* Keep the existing rotation dots, nudge them above the CTA so they don't
 * collide, and make them a touch more refined. */
.hero-section .hero-controls { bottom: 26px; z-index: 4; gap: 10px; }
.hero-section .hero-dot { width: 7px; height: 7px; background: rgba(255,255,255,.45); }
.hero-section .hero-dot.active { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }

/* The legacy below-hero wordmark block becomes a slim editorial intro
 * (the wordmark now lives ON the hero per the standing rule). Keep the
 * quicknav chips, drop the duplicate giant H1 visually. */
.hero-wordmark-below {
  padding: 30px 24px 22px;
}
.hero-wordmark-below .wordmark {
  /* demote to a quiet section label so the hero owns the brand statement */
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-family: var(--sans);
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.hero-wordmark-below .tagline { font-size: clamp(15px, 1.9vw, 21px); }

@media (max-width: 640px) {
  .hero-overlay { top: 42%; }
  .hero-cta-wrap { bottom: 40px; }
  .hero-cta { padding: 14px 30px; font-size: 12px; }
}

/* ── EDITORIAL POLISH: section headers, cards ────────────────────────────── */
.section-header h2 {
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: .025em;
}
.featured-section .design-grid { gap: 4px; }
.design-card { transition: transform .4s var(--wpb-ease), box-shadow .4s var(--wpb-ease); }
.design-card:hover { transform: scale(1.012); box-shadow: 0 18px 50px rgba(0,0,0,.16); z-index: 5; }

/* CTA band — make it a proper editorial statement band */
.cta-band h2 { font-family: var(--serif); font-weight: 400; letter-spacing: .02em; }

/* ── SHARED PRODUCT-GRID TOOLBAR (sort + density) — used by /collections ──── */
.wpb-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  margin: 6px 0 22px;
}
.wpb-toolbar .wpb-ctl {
  display: flex;
  align-items: center;
  gap: 9px;
}
.wpb-toolbar label,
.wpb-toolbar .wpb-ctl > span.wpb-lbl {
  font: 500 11px/1 var(--sans, system-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint, #9a8e82);
  white-space: nowrap;
}
.wpb-select {
  font: 13px var(--sans, system-ui);
  color: var(--ink, #1a1714);
  background: var(--card-bg, #fff);
  border: 1px solid var(--line, #d8cec0);
  border-radius: 999px;
  padding: 9px 34px 9px 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a8e82' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  transition: border-color .2s var(--wpb-ease);
}
.wpb-select:hover { border-color: var(--ink, #1a1714); }
.wpb-range {
  -webkit-appearance: none;
  appearance: none;
  width: 124px;
  height: 2px;
  border-radius: 2px;
  background: var(--line, #d8cec0);
  cursor: pointer;
}
.wpb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink, #1a1714);
  border: 2px solid var(--card-bg, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.wpb-range::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink, #1a1714);
  border: 2px solid var(--card-bg, #fff);
}
.wpb-density-val {
  font: 500 12px/1 var(--sans, system-ui);
  color: var(--ink-soft, #5a5048);
  min-width: 1.5ch;
  text-align: center;
}

/* ── /collections premium grid ───────────────────────────────────────────── */
.col-grid {
  display: grid;
  grid-template-columns: repeat(var(--col-cols, 4), 1fr);
  gap: 20px;
}
.col-card {
  border: none;
  border-radius: 2px;
  background: transparent;
  overflow: visible;
}
.col-card .col-thumb {
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  transition: transform .5s var(--wpb-ease), box-shadow .5s var(--wpb-ease);
  position: relative;
}
.col-card .col-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,10,8,.34), transparent 52%);
  opacity: 0;
  transition: opacity .5s var(--wpb-ease);
}
.col-card:hover { box-shadow: none; transform: none; }
.col-card:hover .col-thumb {
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(0,0,0,.20);
}
.col-card:hover .col-thumb::after { opacity: 1; }
.col-meta {
  padding: 13px 2px 0;
  align-items: baseline;
}
.col-title {
  font-family: var(--serif, Georgia, serif);
  font-weight: 400 !important;
  font-size: 19px !important;
  letter-spacing: .015em;
  text-transform: none !important;
  color: var(--ink, #1a1714);
}
.col-count {
  font: 11px var(--sans, system-ui);
  letter-spacing: .08em;
  color: var(--ink-faint, #9a8e82);
}
.col-hero {
  font-weight: 400 !important;
  letter-spacing: .02em;
}
.col-eyebrow {
  font: 500 11px/1 var(--sans, system-ui);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-faint, #9a8e82);
  margin: 8px 0 6px;
}

@media (max-width: 900px) { .col-grid { --col-cols: 3 !important; } }
@media (max-width: 600px) { .col-grid { --col-cols: 2 !important; } .wpb-toolbar { justify-content: flex-start; } }