/* =========================================================
   taddyboy — supplementary utilities
   The page shell reuses the compiled Tailwind v3 stylesheet
   taken from the reference build (assets/css/tailwind.css).
   This file only adds the few utilities that the reference
   build never emitted because the original page did not use
   them (shop filters, checkout, cart, FAQ, forms …).
   Values follow the same design tokens as the reference build:
     industrial-bg #0e1116 · surface #1a1f27 · line #2a3140
     footer #0b0e13 · amber #f59e0b · amber-hover #fbbf24
     ink #f3f4f6 · ink-muted #9ca3af · ink-faint #6b7280
     trust #2dd4bf
   ========================================================= */

/* ---------- typography ---------- */
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.leading-\[18px\] {
  line-height: 18px;
}
.text-\[10px\] {
  font-size: 10px;
  line-height: 1.4;
}
.line-through {
  text-decoration-line: line-through;
}
.items-baseline {
  align-items: baseline;
}
.align-baseline {
  vertical-align: baseline;
}
.pointer-events-auto {
  pointer-events: auto;
}

/* ---------- sizing / spacing ---------- */
.max-w-2xl {
  max-width: 42rem;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.min-w-\[18px\] {
  min-width: 18px;
}

/* ---------- layout ---------- */
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bottom-1 {
  bottom: 0.25rem;
}
.left-3 {
  left: 0.75rem;
}
.top-3 {
  top: 0.75rem;
}
.top-20 {
  top: 5rem;
}
.z-\[60\] {
  z-index: 60;
}
.border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-amber {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-8px\] {
  --tw-translate-y: -8px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1 {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ---------- colour / opacity variants ---------- */
.bg-trust {
  --tw-bg-opacity: 1;
  background-color: rgb(45 212 191 / var(--tw-bg-opacity, 1));
}
.bg-trust\/15 {
  background-color: rgb(45 212 191 / 0.15);
}
.bg-amber\/5 {
  background-color: rgb(245 158 11 / 0.05);
}
.bg-amber\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.bg-industrial-bg\/80 {
  background-color: rgb(14 17 22 / 0.8);
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-industrial-line {
  --tw-text-opacity: 1;
  color: rgb(42 49 64 / var(--tw-text-opacity, 1));
}
.text-industrial-bg\/80 {
  color: rgb(14 17 22 / 0.8);
}
.opacity-70 {
  opacity: 0.7;
}
.border-x.border-industrial-line {
  border-left-color: rgb(42 49 64 / 1);
  border-right-color: rgb(42 49 64 / 1);
}

/* ---------- forms ---------- */
.accent-amber {
  accent-color: #f59e0b;
}
input[type="range"].accent-amber {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 9999px;
  background-color: #2a3140;
  outline: none;
}
input[type="range"].accent-amber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 9999px;
  background-color: #f59e0b;
  border: none;
  cursor: pointer;
}
input[type="range"].accent-amber::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border: none;
  border-radius: 9999px;
  background-color: #f59e0b;
  cursor: pointer;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* ---------- state variants ---------- */
.hover\:bg-amber:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.hover\:border-amber:hover {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.hover\:text-amber:hover {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.hover\:text-amber-hover:hover {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.hover\:text-industrial-line:hover {
  --tw-text-opacity: 1;
  color: rgb(42 49 64 / var(--tw-text-opacity, 1));
}
.hover\:text-industrial-bg:hover {
  --tw-text-opacity: 1;
  color: rgb(14 17 22 / var(--tw-text-opacity, 1));
}
.hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.hover\:scale-\[1\.01\]:hover {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.focus\:border-amber:focus {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.placeholder\:text-ink-faint::placeholder {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.last\:border-0:last-child {
  border-width: 0px;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group[open] .group-open\:rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ---------- responsive variants (Tailwind defaults) ---------- */
@media (min-width: 640px) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .sm\:gap-4 {
    gap: 1rem;
  }
  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .lg\:flex {
    display: flex;
  }
  .lg\:block {
    display: block;
  }
  .lg\:self-start {
    align-self: flex-start;
  }
  .lg\:grid-cols-\[240px_1fr\] {
    grid-template-columns: 240px 1fr;
  }
  .lg\:grid-cols-\[1fr_340px\] {
    grid-template-columns: 1fr 340px;
  }
  .lg\:grid-cols-\[1fr_360px\] {
    grid-template-columns: 1fr 360px;
  }
  .lg\:grid-cols-\[1fr_320px\] {
    grid-template-columns: 1fr 320px;
  }
}
@media (min-width: 768px) {
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- scrollbar polish (matches the reference look) ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0e1116;
}
::-webkit-scrollbar-thumb {
  background: #2a3140;
  border-radius: 9999px;
  border: 2px solid #0e1116;
}
::-webkit-scrollbar-thumb:hover {
  background: #f59e0b;
}
html {
  scroll-behavior: smooth;
}