/* =========================================================================
   UNIT 365 — PREMIUM REDESIGN LAYER v2
   Represent / Cold Culture visual standard.
   Loaded AFTER style.css + footer-refined.css + pdp-premium.css.
   Visual polish only. No layout, structure, or behaviour changes.
   Scope: index.html and all product / category pages.
   Target breakpoints: 390, 768, 1024, 1440+

   Self-critique passes completed: 3
   ========================================================================= */

/* ─── 0. Rendering quality ───────────────────────────────────────────── */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── 1. Design tokens ───────────────────────────────────────────────── */

:root {
  --pr-ink:    #0d0d0d;
  --pr-muted:  #6a7078;
  --pr-bg:     #ffffff;
  --pr-stage:  #f3f3f3;
  --pr-line:   #e4e4e4;
  --pr-hair:   #ebebeb;     /* subtle editorial divider */
  --pr-lift:   cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ─── 2. Body: Barlow site-wide ─────────────────────────────────────── */

body {
  font-family: Barlow, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: var(--pr-ink);
  background: var(--pr-bg);
  letter-spacing: 0.003em;
}

/* ─── 3. Announce bar ─────────────────────────────────────────────────  */

.announce {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  background: var(--pr-ink);
  color: rgba(255, 255, 255, 0.9);
  min-height: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* hairline separator before header */
}

/* ─── 4. Header / nav ─────────────────────────────────────────────────  */

.site-header {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid #e6e6e6;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.top-nav {
  min-height: 66px;
}

/* Wordmark */
.brand {
  font-family: "Druk Text Wide", "UNIT365 Druk", Barlow, Impact, sans-serif;
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--pr-ink);
}

/* Nav link group: wider gap, tighter underline */
.nav-left,
.nav-right {
  gap: 24px; /* was 18px — more editorial breathing */
}

/* Nav links + shop dropdown toggle */
.nav-left a,
.nav-right a,
.shop-dropdown__toggle {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #1b1b1b;
}

/* Underline: tighten position from -6px → -3px */
.nav-left a::after,
.nav-right a::after,
.shop-dropdown__toggle::after {
  background: var(--pr-ink);
  height: 1px;
  bottom: -3px;
}

/* ─── 5. Hero: fuller vertical presence on desktop ──────────────────── */
/*  style.css overrides the base 21/8 to 28/9 at (min-width:701px).      */
/*  We restore the fuller 21/8 here; mobile !important rules are intact.  */

@media (min-width: 701px) {
  .home-top-hero .hero-feature {
    aspect-ratio: 21 / 8;
    min-height: clamp(200px, 27vw, 400px);
  }
}

/* ─── 6. Hero-to-products gradient seam ─────────────────────────────── */
/*  Corrects hue mismatch: old value was rgba(246,247,250,…) blue-grey.   */
/*  Product section bg = var(--product-bg) = #f2f2f2. Match the fade.    */

.home-hero-nav .home-top-hero .hero-feature::after {
  background: linear-gradient(
    180deg,
    rgba(242, 242, 242, 0)    0%,
    rgba(242, 242, 242, 0.52) 60%,
    rgba(242, 242, 242, 0.97) 100%
  );
  height: clamp(36px, 5.5vw, 68px);
}

@media (max-width: 700px) {
  .home-hero-nav .home-top-hero .hero-feature::after {
    background: linear-gradient(
      180deg,
      rgba(242, 242, 242, 0)    0%,
      rgba(242, 242, 242, 0.6)  62%,
      rgba(242, 242, 242, 0.97) 100%
    );
  }
}

/* ─── 7. Section spacing rhythm ──────────────────────────────────────── */

.section-block {
  padding-top: clamp(40px, 5.2vw, 76px);
}

/* Marquee: less padding-top, it sits close to the grid above */
.lifestyle-stream.section-block {
  padding-top:    clamp(16px, 2vw, 28px)  !important;
  padding-bottom: clamp(22px, 2.8vw, 42px) !important;
  border-bottom:  1px solid var(--pr-hair) !important; /* editorial hairline → why section */
}

/* ─── 8. Editorial hairline after brand manifesto ────────────────────── */
/*  Creates Cold Culture-style section cadence.                            */

#why.section-block {
  padding-bottom: clamp(40px, 5.2vw, 76px);
  border-bottom: 1px solid var(--pr-hair);
}

/* ─── 9. Product grid + cards ────────────────────────────────────────── */

/* Card transition — include transform + box-shadow so lift is smooth */
.product-card {
  transition:
    border-color 0.26s ease,
    background   0.26s ease,
    transform    0.38s var(--pr-lift),
    box-shadow   0.38s ease;
}

/* Product body container */
.product-body {
  padding: 12px 13px 14px;
  min-height: 88px;
  gap: 5px;
}

/* Product name: Barlow, correct valid weight */
.product-body h3 {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: clamp(0.8rem, 0.97vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.26;
  color: var(--pr-ink);
  text-transform: none;
}

/* Colour / variant meta */
.product-meta {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: 0.71rem !important;
  font-weight: 500 !important;
  color: #7c8289 !important;
  letter-spacing: 0.01em !important;
}

/* Price */
.product-price {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--pr-ink) !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}

/* ── Card hover: restore premium lift for pointer-capable devices ──── */
/*  style.css designer pass set transform:none (no !important).          */
/*  My CSS loads after → wins the cascade on transform + box-shadow.     */

@media (hover: hover) and (pointer: fine) {
  #collection .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
  }
}

/* ─── 10. Community marquee ──────────────────────────────────────────── */

.community-handle {
  font-family: Barlow, "Helvetica Neue", sans-serif !important;
  font-size: clamp(0.76rem, 0.86vw, 0.92rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--pr-ink) !important;
  margin-bottom: 14px !important;
}

/* ─── 11. Why / brand manifesto ──────────────────────────────────────── */

.why {
  max-width: 900px;
}

.why h2 {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: clamp(1.7rem, 3.9vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.04;
  text-transform: none;
  color: var(--pr-ink);
  max-width: 22ch; /* prevents one-liner overflow at ultra-wide */
}

.why p {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: clamp(0.97rem, 1.38vw, 1.12rem);
  font-weight: 400;
  line-height: 1.76;
  color: #5f676f;
  margin-top: 20px !important;
  max-width: 62ch;
}

/* ─── 12. Reviews / community section ────────────────────────────────── */

.section-head {
  margin-bottom: 20px;
}

.section-head .label,
.label {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.26em; /* wide-set editorial label */
  text-transform: uppercase;
  color: #5c6470;
  display: block;
  margin-bottom: 8px;
}

.section-head h2 {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.04;
  color: var(--pr-ink);
}

.community-grid figure {
  background: var(--pr-stage);
  border-color: var(--pr-line);
}

/* Subtle zoom on community photos (non-touch) */
@media (hover: hover) and (pointer: fine) {
  .community-grid figure {
    overflow: hidden;
  }

  .community-grid img {
    transition: transform 0.5s var(--pr-lift);
  }

  .community-grid figure:hover img {
    transform: scale(1.025);
  }
}

.community-note {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pr-muted);
  margin-top: 18px !important;
}

/* ─── 13. Drawer (mobile menu) ───────────────────────────────────────── */

.drawer {
  background: #ffffff;
  border-left-color: #e4e4e4;
}

.drawer a {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #111;
  border-bottom-color: #ececec;
}

.drawer a:hover {
  color: #000;
  border-color: #dadada;
}

.drawer .drawer-group summary {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #16191d;
}

.drawer .drawer-submenu a {
  font-family: Barlow, "Helvetica Neue", sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
}

/* ─── 14. Buttons ─────────────────────────────────────────────────────── */

.btn {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  background: var(--pr-ink);
  border-color: var(--pr-ink);
  border-radius: 0;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.btn:hover {
  background: #222;
  border-color: #222;
  transform: none; /* Represent-style: no float on hover */
}

/* ─── 15. Modals ─────────────────────────────────────────────────────── */

.modal-panel,
.modal-panel--offer {
  border-radius: 0;
  border-color: #dde0e5;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14), 0 2px 10px rgba(0, 0, 0, 0.05);
}

.modal-panel h3,
.modal-panel--offer h3 {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pr-ink);
}

.modal-panel p {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  line-height: 1.64;
  color: #5f6870;
}

.modal-close {
  border-radius: 0;
  border-color: #e2e2e2;
}

.contact-form label {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  border-radius: 0;
  border-color: #dde0e5;
}

.contact-brand {
  font-family: "Druk Text Wide", "UNIT365 Druk", Barlow, Impact, sans-serif;
}

/* ─── 16. Shop dropdown ──────────────────────────────────────────────── */

.shop-dropdown__menu {
  border-color: #dde0e4;
  border-radius: 0;
  box-shadow: 0 14px 36px rgba(13, 18, 26, 0.1), 0 1px 0 rgba(0, 0, 0, 0.04);
}

.shop-dropdown__menu a {
  font-family: Barlow, "Helvetica Neue", sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
}

.shop-dropdown__menu a:hover,
.shop-dropdown__menu a:focus-visible,
.shop-dropdown__menu a.is-current {
  background: #f5f5f5 !important;
}

/* ─── 17. Collection category pages ─────────────────────────────────── */

.collection-category-head h1 {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.08;
  color: var(--pr-ink);
}

.collection-category-head p {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-weight: 400;
  line-height: 1.58;
  color: #636b74;
}

.collection-category-kicker {
  font-family: Barlow, "Helvetica Neue", sans-serif !important;
  letter-spacing: 0.24em !important;
}

/* Filter/toolbar pills */
.collection-toolbar a {
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  border-radius: 0;
}

/* Collection pages: more visual breathing before heading */
.collection-page .section-block {
  padding-top: clamp(26px, 3vw, 44px);
}

.collection-page #collection.section-block {
  padding-top: clamp(26px, 3vw, 44px) !important;
}

/* Larger, bolder product names on category pages (2-up layout) */
.collection-page #collection .product-body h3 {
  font-size: clamp(1.02rem, 1.1vw, 1.14rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.22 !important;
}

.collection-page #collection .product-meta {
  font-size: clamp(0.84rem, 0.9vw, 0.94rem) !important;
  font-weight: 500 !important;
  color: #6e767e !important;
}

.collection-page #collection .product-price {
  font-size: clamp(1.02rem, 0.97vw, 1.08rem) !important;
  font-weight: 700 !important;
  color: var(--pr-ink) !important;
  font-variant-numeric: tabular-nums;
}

/* ─── 18. PDP: fix font-weight:650 (invalid) ─────────────────────────── */
/*  pdp-premium.css uses 650 in 3 places. My CSS loads after → I win.     */
/*  Valid nearest: 700 (Barlow 700 maps to SemiBold–Bold range).           */

.pdp-title {
  font-weight: 700 !important;
}

.price .now {
  font-weight: 700 !important;
}

.rec-title {
  font-weight: 700 !important;
}

/* ─── 19. Mobile refinements ─────────────────────────────────────────── */

@media (max-width: 860px) {
  .top-nav {
    min-height: 58px;
  }

  .brand {
    font-size: 1.08rem;
    letter-spacing: 0.22em;
  }
}

@media (max-width: 700px) {
  .announce {
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    min-height: 34px;
  }

  .section-block {
    padding-top: clamp(26px, 5.5vw, 44px);
  }

  .lifestyle-stream.section-block {
    padding-top:    clamp(12px, 3vw, 20px)  !important;
    padding-bottom: clamp(18px, 4vw, 30px)  !important;
  }

  .why h2 {
    font-size: clamp(1.55rem, 7.2vw, 2.1rem);
    letter-spacing: -0.014em;
    max-width: none; /* full width at mobile */
    line-height: 1.06;
  }

  .why p {
    font-size: 0.97rem;
    line-height: 1.7;
    margin-top: 14px !important;
  }

  .section-head h2 {
    font-size: clamp(1.22rem, 5.6vw, 1.65rem);
  }

  .community-note {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }

  .product-body {
    padding: 10px 10px 11px;
    min-height: 78px;
    gap: 3px;
  }

  .product-body h3 {
    font-size: 0.75rem;
    line-height: 1.24;
  }

  .product-meta {
    font-size: 0.64rem !important;
  }

  .product-price {
    font-size: 0.9rem !important;
  }

  .community-handle {
    font-size: 0.74rem !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 10px !important;
  }

  /* Section dividers reduce on mobile */
  #why.section-block {
    padding-bottom: clamp(26px, 5.5vw, 44px);
  }
}

@media (max-width: 420px) {
  .brand {
    font-size: 0.98rem;
    letter-spacing: 0.19em;
  }

  .product-body h3 {
    font-size: 0.73rem;
  }

  .product-meta {
    font-size: 0.62rem !important;
  }

  .product-price {
    font-size: 0.88rem !important;
  }

  .why h2 {
    font-size: clamp(1.42rem, 8vw, 1.9rem);
  }
}

/* ─── 20. Reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .product-card,
  .btn,
  .drawer,
  .community-card img,
  .community-grid img {
    transition: none !important;
    animation: none !important;
  }
}

/* ─── 21. Product badges — hidden ───────────────────────────────────── */
/*  style.css overhaul already sets .badge { display: none }.             */
/*  No override needed — badges stay hidden.                               */

/* ─── 22. Community grid — 3-column on mobile (no orphan) ────────────── */
/*  style.css sets repeat(2, 1fr) at ≤700px → 3 photos = 2 + orphaned 1. */
/*  Switch to 3-column: cleaner editorial strip, all photos equal weight.  */

@media (max-width: 700px) {
  .community-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .community-grid figure {
    aspect-ratio: 3 / 4;
  }
}


/* ─── 24. Sold-out overlay — product card ───────────────────────────── */

.product-card--sold-out .product-media {
  position: relative !important;
}

/* No filter on images — the white overlay handles the washed-out look */
.product-card--sold-out .product-media img {
  filter: none !important;
}

.sold-out-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.52);
  color: #0d0d0d;
  font-family: Barlow, "Helvetica Neue", sans-serif;
  font-size: clamp(0.68rem, 1.3vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-shadow: none;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

/* Mute name + price to complete the unavailable state */
.product-card--sold-out .product-body h3,
.product-card--sold-out .product-price {
  color: #bbb !important;
}

/* ─── 25. Product price — equalize with name, remove dominance ───────── */
/*  style.css sets price at 1rem vs name at 0.84rem → price dominates.    */
/*  Represent: price ≈ same size as name, slightly less visual weight.     */

.product-price {
  font-size: 0.87rem !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
}