/* Jack's Tools V5.33.1 - Premium Wow Pass */
:root {
  --bg: #050505;
  --panel: #0d0d0e;
  --panel-soft: #141414;
  --surface-raised: #181716;
  --text: #f7f3e8;
  --muted: #aaa79f;
  --gold: #d9b44a;
  --gold-light: #f3d77e;
  --gold-deep: #9d7723;
  --line: rgba(255, 255, 255, .095);
  --line-gold: rgba(217, 180, 74, .48);
  --shadow: 0 24px 64px rgba(0, 0, 0, .52);
  --shadow-soft: 0 14px 36px rgba(0, 0, 0, .28);
  --radius: 22px;
  --radius-small: 14px;
}

.status-action {
  display: inline-flex;
  margin-top: 14px;
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.status-action:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

html {
  color-scheme: dark;
  scrollbar-color: var(--gold-deep) #080808;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a,
button,
summary,
input,
select,
textarea { touch-action: manipulation; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Inter, Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  background:
    radial-gradient(ellipse 64% 40% at 86% 3%, rgba(217, 180, 74, .12), transparent 70%),
    radial-gradient(ellipse 48% 28% at 2% 32%, rgba(217, 180, 74, .045), transparent 72%),
    linear-gradient(180deg, #090909 0, #050505 38%, #080808 100%);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .24;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

::selection { color: #080705; background: var(--gold-light); }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}

.container { width: min(1240px, calc(100% - 48px)); }

.site-header {
  border-bottom-color: rgba(217, 180, 74, .12);
  background: rgba(5, 5, 5, .82);
  box-shadow: 0 1px 0 rgba(255,255,255,.025);
  transition: background-color .25s ease, box-shadow .25s ease;
}

.site-header.is-scrolled {
  background: rgba(5, 5, 5, .96);
  box-shadow: 0 12px 34px rgba(0,0,0,.42);
}

.header-inner { min-height: 78px; }

.brand {
  position: relative;
  color: var(--gold-light);
  font-weight: 950;
  letter-spacing: .18em;
  text-shadow: 0 0 28px rgba(217, 180, 74, .18);
}

.brand::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(.58);
}

.main-nav a,
.back-link { transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }

.back-link {
  color: #c7c4bd;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.main-nav a:hover,
.back-link:hover { color: var(--gold-light); }

.nav-cta,
.button-primary,
.submit-button,
.primary-tool-button {
  position: relative;
  overflow: hidden;
  color: #0a0803 !important;
  border-color: var(--gold) !important;
  background: linear-gradient(135deg, #f2d57a, #c99d31 72%, #e2bf5a) !important;
  box-shadow: 0 10px 28px rgba(217, 180, 74, .16), inset 0 1px rgba(255,255,255,.4);
}

.nav-cta::after,
.button-primary::after,
.submit-button::after,
.primary-tool-button::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 48%, transparent 66%);
  transform: translateX(-125%);
  transition: transform .55s ease;
}

.nav-cta:hover::after,
.button-primary:hover::after,
.submit-button:hover::after,
.primary-tool-button:hover::after { transform: translateX(125%); }

.nav-cta:hover,
.button-primary:hover,
.submit-button:hover,
.primary-tool-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 15px 34px rgba(217, 180, 74, .24), inset 0 1px rgba(255,255,255,.5);
}

.button,
.submit-button,
.primary-tool-button {
  min-height: 52px;
  border-radius: 13px;
  letter-spacing: .015em;
}

.button-secondary,
.button-more {
  border-color: rgba(217, 180, 74, .4);
  background: rgba(217, 180, 74, .035);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.button-secondary:hover,
.button-more:hover { border-color: var(--gold); background: rgba(217, 180, 74, .1); }

.eyebrow,
.section-kicker,
.result-label {
  color: var(--gold-light);
  font-size: 11px;
  letter-spacing: .22em;
}

h1, h2, h3, strong { text-wrap: balance; }

.hero,
.hub-hero,
.category-hero,
.contact-hero,
.privacy-hero {
  position: relative;
  isolation: isolate;
}

.category-hero::after {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent 5%, rgba(217,180,74,.5), transparent 95%);
}

.hero {
  border-bottom: 0;
}

.hero-inner { min-height: 620px; padding-block: 112px; }

.hero h1,
.hub-hero h1,
.category-hero h1,
.contact-hero h1,
.privacy-hero h1 {
  font-weight: 850;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.hero h1 { font-size: clamp(52px, 7.4vw, 96px); line-height: .98; }

.hero h1 span {
  color: transparent;
  background: linear-gradient(110deg, #f7e6aa 0%, #d8af44 48%, #a97e24 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.hero {
  overflow: hidden;
  min-height: calc(100svh - 78px);
  background:
    radial-gradient(circle at 77% 42%, rgba(217,180,74,.12), transparent 23%),
    linear-gradient(115deg, rgba(255,255,255,.018), transparent 36%);
}

.hero::before {
  position: absolute;
  z-index: -1;
  top: 8%;
  right: -8%;
  width: min(780px, 52vw);
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(217,180,74,.09);
  border-radius: 50%;
  box-shadow:
    0 0 0 90px rgba(217,180,74,.018),
    0 0 0 180px rgba(217,180,74,.012);
  pointer-events: none;
}

.hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent 4%, rgba(217,180,74,.18) 42%, rgba(217,180,74,.5) 72%, transparent 96%);
}

.hero-inner {
  max-width: none;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  display: grid;
  align-items: center;
  gap: clamp(46px, 7vw, 112px);
}

.hero-copy { position: relative; z-index: 2; }
.hero-inner.hero-without-showcase { grid-template-columns: minmax(0, 920px); }

.hero-copy::before {
  position: absolute;
  top: -34px;
  left: -28px;
  width: 78px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--gold), transparent);
}

.hero h1 {
  max-width: 820px;
  font-size: clamp(48px, 5.8vw, 82px);
}

.hero-lead { max-width: 650px; }

.hero-showcase {
  position: relative;
  width: min(100%, 480px);
  justify-self: end;
  padding: 16px;
}

.hero-showcase::before {
  position: absolute;
  z-index: -1;
  inset: 8% 0 -6% 15%;
  content: "";
  background: rgba(217,180,74,.18);
  filter: blur(72px);
  border-radius: 50%;
  opacity: .7;
}

.hero-showcase::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  border: 1px solid rgba(217,180,74,.14);
  border-radius: 34px;
  transform: rotate(3deg);
}

.hero-showcase-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(217,180,74,.28);
  border-radius: 27px;
  background: #0b0b0b;
  box-shadow: 0 34px 90px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.07);
}

.hero-showcase-label {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 18px;
  padding: 8px 11px;
  color: #0a0803;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .1em;
}

.hero-showcase-image {
  overflow: hidden;
  display: block;
  aspect-ratio: 1.18 / 1;
  background: #fff;
}

.hero-showcase-image img {
  width: 100%;
  height: 100%;
  padding: clamp(24px, 4vw, 44px);
  object-fit: contain;
  background: #fff;
  transition: transform .55s cubic-bezier(.2,.75,.25,1);
}

.hero-showcase:hover .hero-showcase-image img { transform: scale(1.035); }

.hero-showcase-body { padding: 23px 25px 25px; }

.hero-showcase-body > span {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-light);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero-showcase-body h2 {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.9em;
  margin: 0;
  color: #f4f0e6;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.42;
  letter-spacing: -.022em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hero-showcase-body > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid rgba(255,255,255,.075);
}

.hero-showcase-body strong { color: var(--gold-light); font-size: 23px; }
.hero-showcase-body a { color: #e9e4d8; font-size: 12px; font-weight: 850; text-decoration: none; }
.hero-showcase-body a:hover { color: var(--gold-light); }

.hero-showcase-loading { min-height: 520px; padding: 18px; }
.hero-showcase-loading > span,
.hero-showcase-loading i {
  display: block;
  border-radius: 12px;
  background: linear-gradient(100deg, #151515 20%, #211d13 48%, #151515 78%);
  background-size: 220% 100%;
  animation: premium-soft-shimmer 1.8s ease-in-out infinite;
}
.hero-showcase-loading > span { height: 350px; background-color: #fff; }
.hero-showcase-loading > div { display: grid; gap: 10px; padding: 22px 5px 0; }
.hero-showcase-loading i:nth-child(1) { width: 35%; height: 9px; }
.hero-showcase-loading i:nth-child(2) { width: 92%; height: 16px; }
.hero-showcase-loading i:nth-child(3) { width: 64%; height: 16px; }

@keyframes premium-soft-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.hero-lead,
.hub-lead,
.category-lead { color: #bbb7ae; line-height: 1.75; }

.section-heading { margin-bottom: 44px; }
.section-heading h2,
.workshop-group-heading h2,
.workshop-browser-heading h2 { font-weight: 820; letter-spacing: -.045em; }

.products-section,
.uses-section,
.smart-picks-section,
.workshop-section,
.faq-section { isolation: isolate; }

.products-section { padding-block: 112px; }
.uses-section,
.smart-picks-section,
.workshop-section { padding-block: 104px; }

.products-section::before,
.smart-picks-section::before,
.faq-section::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent 4%, rgba(217,180,74,.16), transparent 96%);
}

.products-section,
.uses-section,
.smart-picks-section,
.workshop-section { position: relative; }

.catalog-search,
.workshop-search-box,
.contact-form,
.contact-note,
.privacy-nav,
.tools-nav,
.converter-card,
.spindle-tool,
.pitch-converter-card,
.calculator-card {
  border-color: rgba(217, 180, 74, .14);
  background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 46%), var(--panel);
  box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.04);
}

.catalog-search { padding: 24px; border-radius: var(--radius); }

.catalog-search-field,
.workshop-search-box,
.form-row input,
.form-row textarea,
.input-unit,
.table-tools input {
  border-color: rgba(255,255,255,.12);
  background: rgba(2,2,2,.76);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.catalog-search-field:focus-within,
.workshop-search-box:focus-within,
.form-row input:focus,
.form-row textarea:focus,
.input-unit:focus-within,
.table-tools input:focus {
  border-color: var(--gold);
  background: #080808;
  box-shadow: 0 0 0 4px rgba(217,180,74,.1), 0 12px 30px rgba(0,0,0,.24);
}

.filters,
.workshop-filters,
.smart-tabs,
.quick-sizes { gap: 10px; }

.filter,
.workshop-filter,
.smart-tab,
.quick-sizes button,
.search-suggestions button {
  min-height: 38px;
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.022);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.filter:not(:disabled):hover,
.filter.active,
.workshop-filter:hover,
.workshop-filter.active,
.smart-tab:hover,
.smart-tab.active,
.quick-sizes button:hover,
.search-suggestions button:hover {
  color: #0a0803;
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 8px 20px rgba(217,180,74,.14);
  transform: translateY(-1px);
}

.product-grid { gap: 26px; }

.product-card { min-height: 100%; }

.product-card,
.smart-card,
.use-card,
.workshop-card,
.guide-card,
.topic-card,
.category-guide-card,
.guide-product-cta,
.safety-check-grid > div,
.cause-grid > div,
.measurement-steps li {
  position: relative;
  border-color: rgba(255,255,255,.09);
  background: linear-gradient(150deg, rgba(255,255,255,.035), transparent 44%), var(--panel);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 42px rgba(0,0,0,.22);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background-color .24s ease;
}

.product-card::before,
.guide-card::before,
.topic-card::before,
.use-card::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 14%;
  left: 14%;
  height: 1px;
  pointer-events: none;
  content: "";
  opacity: .58;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.product-card:hover,
.smart-card:hover,
.use-card:hover,
.guide-card:hover,
.topic-card:hover,
.category-guide-card:hover {
  transform: translateY(-6px);
  border-color: rgba(217,180,74,.52);
  box-shadow: var(--shadow), 0 0 0 1px rgba(217,180,74,.05);
}

.product-card { overflow: hidden; border-radius: 22px; }

.product-card.is-opening,
.smart-card.is-opening {
  border-color: var(--gold);
  box-shadow: 0 18px 46px rgba(0,0,0,.44), 0 0 0 3px rgba(217,180,74,.1);
}

.product-image,
.smart-card-image {
  position: relative;
  background: #fff;
}

.product-image { border-bottom: 1px solid rgba(0,0,0,.075); }

.product-image::after,
.smart-card-image::after {
  display: none;
}

.product-image img,
.smart-card-image img {
  background: #fff;
  filter: none;
  mix-blend-mode: normal;
  transition: transform .42s cubic-bezier(.2,.75,.25,1);
}

.product-card:hover .product-image img,
.smart-card:hover .smart-card-image img { transform: scale(1.035); }

.image-fallback { background: #fff; }

.product-image img { padding: 22px; }
.product-body { padding: 22px; }
.product-category,
.smart-card-label,
.guide-number { color: var(--gold-light); }
.product-title {
  min-height: 4.45em;
  color: #f0ede5;
  font-weight: 700;
  text-wrap: pretty;
}
.product-price { color: var(--gold-light); font-size: 23px; white-space: nowrap; }
.product-bottom {
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.065);
}
.product-link {
  position: relative;
  color: var(--gold-light);
  line-height: 1.35;
  text-align: right;
  text-underline-offset: 4px;
}

.use-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.use-card {
  overflow: hidden;
  grid-column: auto;
  min-height: 224px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
  background:
    radial-gradient(circle at 88% 14%, rgba(217,180,74,.11), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.038), transparent 46%),
    #0d0d0e;
}

.use-card::after {
  position: absolute;
  right: -30px;
  bottom: -72px;
  width: 180px;
  height: 180px;
  content: "";
  border: 1px solid rgba(217,180,74,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(217,180,74,.018), 0 0 0 60px rgba(217,180,74,.01);
  transition: transform .45s ease, border-color .45s ease;
}

.use-card:hover::after { border-color: rgba(217,180,74,.28); transform: scale(1.08); }
.use-card strong { position: relative; z-index: 1; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.035em; }
.use-card small { position: relative; z-index: 1; max-width: 440px; font-size: 14px; }
.use-card > span { position: relative; z-index: 1; margin-top: 24px; color: var(--gold-light); }

.smart-grid { gap: 22px; }

.smart-grid .smart-card:first-child {
  grid-column: auto;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 148px;
  border-color: rgba(217,180,74,.28);
  background:
    radial-gradient(circle at 88% 14%, rgba(217,180,74,.1), transparent 34%),
    #0d0d0e;
}

.smart-grid .smart-card:first-child .smart-card-image { min-height: 148px; }
.smart-grid .smart-card:first-child .smart-card-image img { padding: 10px; }
.smart-grid .smart-card:first-child .smart-card-body { padding: 15px; }
.smart-grid .smart-card:first-child .smart-card-label { font-size: 9px; }
.smart-grid .smart-card:first-child .smart-card-title { font-size: 12px; line-height: 1.42; -webkit-line-clamp: 3; }
.smart-grid .smart-card:first-child .smart-card-price { font-size: 15px; }

.workshop-card {
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 34px 84px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.045);
}

.workshop-card::after {
  position: absolute;
  z-index: 0;
  top: -180px;
  right: -150px;
  width: 440px;
  height: 440px;
  content: "";
  border: 1px solid rgba(217,180,74,.1);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(217,180,74,.012), 0 0 0 140px rgba(217,180,74,.009);
  pointer-events: none;
}

.workshop-copy,
.workshop-tabs { position: relative; z-index: 1; }

.faq-section { position: relative; }
.faq-item { transition: background-color .2s ease, padding .2s ease; }
.faq-item[open] { padding-inline: 18px; background: linear-gradient(90deg, rgba(217,180,74,.055), transparent 74%); }

.product-fit-note {
  display: grid;
  gap: 4px;
  margin: -4px 0 18px;
  padding: 11px 12px;
  border-left: 2px solid rgba(217,180,74,.46);
  border-radius: 0 9px 9px 0;
  background: rgba(217,180,74,.045);
}

.product-fit-note span {
  color: var(--gold-light);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.product-fit-note small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.guide-product-cta strong { color: #eee9dc; }
.guide-product-cta a { white-space: nowrap; }

.footer-version {
  color: #b7aa83;
  font-variant-numeric: tabular-nums;
}

.guide-card,
.topic-card { border-radius: 18px; }
.guide-card h2,
.topic-card > strong { letter-spacing: -.025em; }
.guide-card > span:last-child { margin-top: auto; }

.safety-guide-card {
  overflow: hidden;
  border-color: rgba(217, 180, 74, .32);
  background:
    radial-gradient(circle at 92% 10%, rgba(217,180,74,.105), transparent 26%),
    linear-gradient(150deg, rgba(217,180,74,.075), transparent 46%),
    var(--panel);
}

.safety-guide-card::after {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  content: "!";
  color: var(--gold-light);
  border: 1px solid rgba(217,180,74,.45);
  border-radius: 50%;
  background: rgba(217,180,74,.07);
  box-shadow: 0 0 22px rgba(217,180,74,.08);
  font-size: 13px;
  font-weight: 900;
}

.safety-guide-card:hover {
  border-color: rgba(217,180,74,.52);
  box-shadow: 0 22px 56px rgba(0,0,0,.42), 0 0 34px rgba(217,180,74,.055);
}

.safety-guide-card .guide-number { padding-right: 38px; }

.workshop-card {
  border-color: rgba(217,180,74,.22);
  background: radial-gradient(circle at 88% 12%, rgba(217,180,74,.12), transparent 32%), linear-gradient(145deg, rgba(255,255,255,.025), transparent 50%), #0d0d0e;
}

.workshop-tab { background: rgba(255,255,255,.025); }
.workshop-tab.is-active { box-shadow: inset 3px 0 var(--gold), 0 10px 28px rgba(0,0,0,.22); }

.article-table-wrap,
.fit-table-wrap,
.thread-table-wrap { border-color: rgba(217,180,74,.16); box-shadow: var(--shadow-soft); }
.article-table th,
.fit-table th,
.thread-table th { background: #0a0907; }
.article-table tbody tr,
.fit-table tbody tr,
.thread-table tbody tr { transition: background-color .18s ease; }
.article-table tbody tr:hover,
.fit-table tbody tr:hover,
.thread-table tbody tr:hover { background: rgba(217,180,74,.04); }

.pro-tip,
.calculation-result,
.spindle-result,
.global-safety-banner,
.guide-product-cta { background: linear-gradient(135deg, rgba(217,180,74,.105), rgba(217,180,74,.025)); }

.site-footer { border-top-color: rgba(217,180,74,.12); background: #030303; }

.status.error,
.status.empty,
.category-status,
.products-status,
.smart-status,
.workshop-group-empty {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.026), transparent), #0d0d0e;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.status.empty,
.workshop-group-empty {
  border-color: rgba(217,180,74,.24);
}

.status.error {
  color: #e8b6b1;
  border-color: rgba(207,111,99,.32);
  background: linear-gradient(145deg, rgba(180,70,55,.08), transparent), #0d0d0e;
}

.skeleton-grid span {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.055);
  background: #111;
  animation: none;
}

.skeleton-grid span::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(100deg, transparent 20%, rgba(217,180,74,.08) 48%, rgba(255,255,255,.055) 52%, transparent 80%);
  transform: translateX(-100%);
  animation: premium-shimmer 1.65s ease-in-out infinite;
}

@keyframes premium-shimmer { to { transform: translateX(100%); } }

.premium-back-top {
  position: fixed;
  z-index: 80;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  border: 1px solid rgba(217,180,74,.4);
  border-radius: 50%;
  background: rgba(10,10,10,.9);
  box-shadow: 0 14px 32px rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.premium-back-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.premium-back-top:hover { border-color: var(--gold); background: rgba(217,180,74,.12); }

.premium-toast {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: 26px;
  max-width: calc(100% - 32px);
  padding: 11px 16px;
  color: #ece6d7;
  border: 1px solid rgba(217,180,74,.3);
  border-radius: 999px;
  background: rgba(10,10,10,.94);
  box-shadow: 0 14px 38px rgba(0,0,0,.5);
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .2s ease, transform .2s ease;
}

.premium-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.error-page-main {
  min-height: calc(100vh - 156px);
  display: grid;
  align-items: center;
  padding-block: 72px;
}

.error-page-card {
  position: relative;
  overflow: hidden;
  max-width: 820px;
  padding: clamp(30px, 6vw, 64px);
  border: 1px solid rgba(217,180,74,.2);
  border-radius: 28px;
  background: radial-gradient(circle at 92% 8%, rgba(217,180,74,.12), transparent 32%), linear-gradient(145deg, rgba(255,255,255,.03), transparent), var(--panel);
  box-shadow: var(--shadow);
}

.error-page-code {
  position: absolute;
  top: -28px;
  right: 12px;
  color: rgba(217,180,74,.055);
  font-size: clamp(120px, 24vw, 260px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.08em;
  pointer-events: none;
}

.error-page-card h1 {
  position: relative;
  max-width: 650px;
  margin: 0;
  font-size: clamp(42px, 7vw, 72px);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.error-page-card > p:not(.eyebrow) {
  position: relative;
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 17px;
}

.error-page-card .hero-actions { position: relative; }

.js-premium .premium-reveal {
  opacity: 0;
  transform: translateY(18px);
}

.js-premium .premium-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.75,.25,1);
}

@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 58px; }
  .hero-copy { max-width: 820px; }
  .hero-showcase { width: min(100%, 720px); justify-self: start; }
  .hero-showcase-frame { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); }
  .hero-showcase-label { top: 16px; left: 16px; }
  .hero-showcase-image { aspect-ratio: 1 / 1; }
  .hero-showcase-body { align-self: center; }
  .hero-showcase-loading { grid-column: 1 / -1; }
  .use-card,
  .use-card:nth-child(1),
  .use-card:nth-child(4) { grid-column: span 6; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1240px); }
  .header-inner { min-height: 68px; }
  .hero-inner { min-height: 0; padding-block: 76px 70px; gap: 46px; }
  .hero h1 { font-size: clamp(42px, 12.5vw, 66px); }
  .hero-lead { font-size: 16px; }
  .hero-actions .button { width: 100%; }
  .hero-showcase { width: 100%; padding: 7px; }
  .hero-showcase::after { border-radius: 25px; transform: rotate(1.5deg); }
  .hero-showcase-frame { display: block; border-radius: 21px; }
  .hero-showcase-image { aspect-ratio: 1.2 / 1; }
  .hero-showcase-body { padding: 19px; }
  .hero-showcase-body > div { align-items: flex-start; flex-direction: column; gap: 7px; }
  .hero-showcase-loading { min-height: 430px; }
  .hero-showcase-loading > span { height: 280px; }
  .products-section,
  .uses-section,
  .smart-picks-section,
  .workshop-section { padding-block: 72px; }
  .catalog-search { padding: 16px; }
  .filters,
  .workshop-filters { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
  .filter,
  .workshop-filter { flex: 0 0 auto; }
  .filters,
  .workshop-filters,
  .smart-tabs,
  .quick-sizes {
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .filter,
  .workshop-filter,
  .smart-tab,
  .quick-sizes button { scroll-snap-align: center; }
  .product-grid { gap: 16px; }
  .product-body { padding: 17px; }
  .product-title { min-height: 5.8em; -webkit-line-clamp: 4; }
  .product-card:hover,
  .smart-card:hover,
  .use-card:hover,
  .guide-card:hover,
  .topic-card:hover,
  .category-guide-card:hover { transform: translateY(-3px); }
  .use-grid { grid-template-columns: 1fr; gap: 16px; }
  .use-card,
  .use-card:nth-child(1),
  .use-card:nth-child(4) { grid-column: auto; min-height: 190px; padding: 26px; }
  .smart-grid .smart-card:first-child {
    grid-column: auto;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 148px;
  }
  .smart-grid .smart-card:first-child .smart-card-image { min-height: 148px; }
  .smart-grid .smart-card:first-child .smart-card-image img { padding: 10px; }
  .smart-grid .smart-card:first-child .smart-card-body { padding: 15px; }
  .smart-grid .smart-card:first-child .smart-card-label { font-size: 9px; }
  .smart-grid .smart-card:first-child .smart-card-title { font-size: 12px; line-height: 1.42; -webkit-line-clamp: 3; }
  .smart-grid .smart-card:first-child .smart-card-price { font-size: 15px; }
  .premium-back-top { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  .premium-toast { bottom: calc(18px + env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {
  .product-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
  .product-link { text-align: left; white-space: normal; }
}

@media (max-width: 440px) {
  .brand { font-size: 15px; letter-spacing: .14em; }
  .hero h1 { font-size: clamp(39px, 12vw, 54px); }
  .section-heading h2,
  .workshop-group-heading h2,
  .workshop-browser-heading h2 { font-size: 32px; }
  .product-image { aspect-ratio: 1.12 / 1; }
}

@media (hover: none) {
  .product-card:hover,
  .smart-card:hover,
  .use-card:hover,
  .guide-card:hover,
  .topic-card:hover,
  .category-guide-card:hover { transform: none; }

  .product-card:hover .product-image img,
  .smart-card:hover .smart-card-image img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-premium .premium-reveal,
  .js-premium .premium-reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .skeleton-grid span::after { animation: none; }
  .premium-back-top,
  .premium-toast { transition: none; }
  .hero-showcase-image img,
  .product-image img,
  .smart-card-image img,
  .use-card::after,
  .nav-cta::after,
  .button-primary::after,
  .submit-button::after,
  .primary-tool-button::after { transition: none; transform: none; }
  .hero-showcase-loading > span,
  .hero-showcase-loading i { animation: none; }
}