/* Superhuman Laboratories — component classes (ported from the design's repeated inline patterns) */

/* Category hero — canonical dark wash (Hero Egysegesites Terv.md, PR-18).
   Image comes from the --hero-img custom property. The linear wash carries the
   text side; the radial fade layer is sized to the SAME box as the image
   (both read --hero-zoom), so the wash always hugs the photo's actual edges —
   change the zoom and the fade follows automatically. */
.sh-cat-hero{--hero-zoom:54%;
  background-color:#0b0b0b;
  background-image:linear-gradient(90deg,rgba(8,8,8,.96) 0%,rgba(8,8,8,.78) 30%,rgba(8,8,8,.3) 56%,rgba(8,8,8,.12) 100%),
    linear-gradient(90deg,rgb(8,8,8) 0%,rgba(8,8,8,.55) 22%,rgba(8,8,8,0) 58%),
    linear-gradient(180deg,rgba(8,8,8,.9) 0%,rgba(8,8,8,0) 24%,rgba(8,8,8,0) 76%,rgba(8,8,8,.9) 100%),
    var(--hero-img);
  background-size:cover,var(--hero-zoom) 100%,var(--hero-zoom) 100%,var(--hero-zoom) auto;
  background-position:center,center right,center right,center right;
  background-repeat:no-repeat;
  min-height:340px;display:flex;align-items:center}
.sh-cat-hero>.sh-hero{width:100%}
@media(max-width:640px){.sh-cat-hero{min-height:0}}

/* Buttons */
.sh-btn-primary{font-family:var(--sh-font-display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:none;cursor:pointer;border-radius:var(--sh-radius-sm);display:inline-flex;align-items:center;gap:10px;
  background:var(--sh-gold-button);color:#fff;font-size:12px;padding:12px 22px;box-shadow:var(--sh-shadow-sm)}
.sh-btn-secondary{font-family:var(--sh-font-display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;border-radius:var(--sh-radius-sm);display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--sh-ink-800);border:1.5px solid var(--sh-line-strong);font-size:12px;padding:12px 22px}
.sh-btn-gold-outline{font-family:var(--sh-font-display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;border-radius:var(--sh-radius-sm);display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--sh-gold-600);border:1.5px solid var(--sh-gold-500);font-size:12px;padding:12px 22px}

/* PDP / content tabs (ported from tabStyle()) */
.sh-tab{font-family:var(--sh-font-display);font-weight:700;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;padding:12px 18px;cursor:pointer;background:transparent;border:none;
  border-bottom:2px solid transparent;color:var(--sh-ink-400);margin-bottom:-1px}
.sh-tab.active{border-bottom:2px solid var(--sh-gold-500);color:var(--sh-gold-600)}

/* Form controls */
.sh-input,.sh-select{width:100%;padding:11px 13px;font-size:13.5px;font-family:var(--sh-font-body);
  color:var(--sh-ink-700);background:var(--sh-surface);border:1px solid var(--sh-line-strong);
  border-radius:var(--sh-radius-sm)}
.sh-label{display:block;font-size:12px;font-weight:600;color:var(--sh-ink-700);margin-bottom:6px}

/* Checkout radio option boxes (ported from radioBox()/radioDot()) */
.sh-radio-box{border:1px solid var(--sh-line-strong);border-radius:var(--sh-radius-md);padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--sh-surface);
  cursor:pointer;position:relative;z-index:1}
.sh-radio-box.selected{border:1.5px solid var(--sh-gold-500);box-shadow:0 0 0 3px var(--sh-gold-050)}
.sh-radio-dot{width:18px;height:18px;border-radius:50%;flex:0 0 auto;background:#fff;border:1.5px solid var(--sh-line-strong)}
.sh-radio-box.selected .sh-radio-dot{border:5px solid var(--sh-gold-500)}
.sh-radio-box input[type=radio]{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}

/* Checkbox visual (ported from checkbox()) */
.sh-checkbox{width:18px;height:18px;border-radius:4px;flex:0 0 auto;background:var(--sh-surface);
  border:1.5px solid var(--sh-line-strong);color:#fff;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px}
.sh-check-wrap{display:inline-flex;align-items:center;gap:10px;cursor:pointer;position:relative}
.sh-check-wrap input[type=checkbox]{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.sh-check-wrap input[type=checkbox]:checked + .sh-checkbox{background:var(--sh-gold-500);border:none}
.sh-check-wrap input[type=checkbox]:checked + .sh-checkbox::after{content:"✓"}