/* PrimeCraft Partners — bespoke additions layered on top of Tailwind CDN utilities.
   Keep this file small: anything Tailwind can express should live in markup classes. */

:root{
  --pc-charcoal:#1A1A1A;
  --pc-gold:#C59B27;
  --pc-brown:#8B5A2B;
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{ font-family:'Inter', sans-serif; }
.font-display{ font-family:'Montserrat', 'Inter', sans-serif; }
.font-mono{ font-family:'IBM Plex Mono', monospace; }

/* Stitched thread divider — used between sections to echo the product's own construction */
.stitch-divider{
  height:14px;
  background-color:var(--pc-charcoal);
  background-image:repeating-linear-gradient(90deg, var(--pc-gold) 0 10px, transparent 10px 20px);
  background-position:center;
  background-size:20px 2px;
  background-repeat:repeat-x;
}

/* Hero spec-sheet hangtag */
.hangtag{
  transform:rotate(-4deg);
  transition:transform 0.4s ease;
}
.hero-visual:hover .hangtag{ transform:rotate(0deg); }
.hangtag-hole{
  box-shadow:0 0 0 3px #F8F9FA, 0 0 0 4px rgba(0,0,0,0.15);
}
.stitch-ring{
  border:2px dashed rgba(197,155,39,0.28);
  animation:pc-spin 60s linear infinite;
}
@keyframes pc-spin{ to{ transform:rotate(360deg); } }

/* Thickness comparison bars */
.thickness-fill{ width:var(--w); }

/* Mobile nav panel (progressive enhancement over Tailwind's hidden/flex toggle) */
#nav-panel{ transition:max-height 0.25s ease; }

/* Product image fallback tile */
.product-thumb-fallback{
  background-image:linear-gradient(135deg, #1A1A1A, #242220);
}

/* Focus visibility respecting the palette */
:focus-visible{ outline:3px solid var(--pc-gold); outline-offset:2px; }