:root {
  --skn-black: #000000;
  --skn-gold: #C8A661;
  --skn-soft-gold: #E6D59A;
  --skn-graphite: #1C1C1C;
  --skn-silver: #C9C7C2;
  --skn-white: #F5F3EE;
  --skn-border: rgba(245, 243, 238, 0.10);
  --skn-gold-border: rgba(200, 166, 97, 0.42);
  --skn-max: 1280px;
}

* { box-sizing: border-box; }
html {
  width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}
body.skn-body {
  margin: 0;
  width: 100%;
  overflow-x: clip;
  background: var(--skn-black);
  color: var(--skn-white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* a11y: skip link */
.skn-skiplink {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--skn-gold);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: top .2s ease;
}
.skn-skiplink:focus { top: 12px; outline: 3px solid var(--skn-white); outline-offset: 2px; }

/* a11y: global focus-visible (keyboard only) */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.skn-btn:focus-visible,
.skn-range-card:focus-visible,
.skn-device-card:focus-visible,
.skn-bento__tile:focus-visible,
.skn-how__step:focus-visible,
.skn-gift__card:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--skn-gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.skn-news__field:focus-within { outline: 2px solid var(--skn-gold); outline-offset: 3px; }

/* reduced-motion global guard */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* sr-only utility (used for visually-hidden labels site-wide) */
.skn-sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skn-container {
  width: min(var(--skn-max), calc(100% - 40px));
  min-width: 0;
  margin: 0 auto;
}
.skn-muted { color: rgba(201,199,194,.72); }

.skn-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--skn-border);
}
.skn-header__inner { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.skn-brand { display: flex; align-items: center; gap: 16px; }
.skn-brand__mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(200,166,97,.65); background: var(--skn-graphite); color: var(--skn-gold); font-weight: 900; letter-spacing: .12em; }
.skn-brand__name { display: block; color: var(--skn-gold); font-size: 20px; font-weight: 800; letter-spacing: .34em; text-transform: uppercase; }
.skn-brand__tagline { display: block; margin-top: 3px; color: rgba(201,199,194,.72); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.skn-nav { display: flex; align-items: center; gap: 34px; color: rgba(245,243,238,.72); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.skn-nav a:hover { color: var(--skn-gold); }

.skn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; border: 1px solid transparent; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.skn-btn--gold { background: var(--skn-gold); color: #000; }
.skn-btn--gold:hover { background: var(--skn-soft-gold); transform: translateY(-1px); }
.skn-btn--gold:active { background: var(--skn-gold); transform: translateY(0) scale(.98); }
.skn-btn--dark { background: rgba(28,28,28,.72); border-color: rgba(245,243,238,.18); color: var(--skn-white); }
.skn-btn--dark:hover, .skn-btn--outline:hover { border-color: var(--skn-gold); color: var(--skn-gold); }
.skn-btn--dark:active, .skn-btn--outline:active { transform: scale(.98); }
.skn-btn--outline { background: transparent; border-color: rgba(200,166,97,.7); color: var(--skn-gold); }
.skn-btn--outline:hover { background: var(--skn-gold); color: #000; }
.skn-btn[disabled], .skn-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.skn-button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.skn-section-label { display: flex; align-items: center; gap: 16px; max-width: 100%; color: var(--skn-soft-gold); font-size: 12px; font-weight: 800; letter-spacing: .32em; line-height: 1.45; text-transform: uppercase; margin-bottom: 18px; }
.skn-section-label span { display: block; width: 80px; height: 1px; background: linear-gradient(90deg, var(--skn-gold), transparent); }

body.skn-body select:not(.skn-select),
body.skn-body input:not([type="checkbox"]):not([type="radio"]),
body.skn-body textarea {
  border-radius: 0;
}

body.skn-body select:not(.skn-select) {
  min-height: 48px;
  appearance: none;
  border: 1px solid var(--skn-border);
  background: #000 url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C8A661' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--skn-white);
  font-family: inherit;
  padding: 0 42px 0 14px;
}

body.skn-body select:not(.skn-select):focus {
  border-color: var(--skn-gold);
  outline: none;
}

body.skn-body select:not(.skn-select) option {
  background: #000;
  color: var(--skn-white);
}

.skn-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--skn-border); }
.skn-hero:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 20%, rgba(200,166,97,.18), transparent 28%), radial-gradient(circle at 16% 75%, rgba(201,199,194,.08), transparent 30%); }
.skn-hero__grid-bg { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(245,243,238,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(245,243,238,.08) 1px, transparent 1px); background-size: 72px 72px; }
.skn-hero__inner { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 64px; padding: 92px 0; }
.skn-hero__title { margin: 0; max-width: 840px; color: var(--skn-white); font-size: clamp(52px, 7vw, 112px); line-height: .9; letter-spacing: -.055em; font-weight: 950; text-transform: uppercase; }
.skn-hero__title em { display: block; color: var(--skn-gold); font-style: normal; }
.skn-hero__body { margin: 30px 0 0; max-width: 680px; color: var(--skn-silver); font-size: 18px; line-height: 1.72; }
.skn-proof-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 680px; margin-top: 40px; }
.skn-proof-points span { border: 1px solid var(--skn-border); background: rgba(28,28,28,.72); padding: 18px; color: var(--skn-silver); font-size: 11px; font-weight: 800; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }

.skn-hero__visual { position: relative; }
.skn-frame-corner { position: absolute; z-index: 2; width: 82px; height: 150px; pointer-events: none; }
.skn-frame-corner--tl { top: 24px; left: -24px; border-top: 1px solid rgba(200,166,97,.55); border-left: 1px solid rgba(200,166,97,.55); }
.skn-frame-corner--br { bottom: 24px; right: -20px; border-bottom: 1px solid rgba(200,166,97,.55); border-right: 1px solid rgba(200,166,97,.55); }
.skn-hero-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; padding: 16px; border: 1px solid var(--skn-border); background: var(--skn-graphite); box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.skn-hero-card__main { position: relative; min-height: 520px; background: #050505; overflow: hidden; }
.skn-hero-card__main img, .skn-hero-card__small img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.skn-hero-card__main:after, .skn-hero-card__small:after, .skn-product-card__image:after, .skn-device-card__image:after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.14), transparent); }
.skn-hero-card__caption { position: absolute; left: 24px; right: 24px; bottom: 24px; border: 1px solid rgba(200,166,97,.35); background: rgba(0,0,0,.72); padding: 20px; backdrop-filter: blur(10px); }
.skn-hero-card__caption p, .skn-template-box p { margin: 0; color: var(--skn-gold); font-size: 11px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; }
.skn-hero-card__caption strong, .skn-template-box strong { display: block; margin-top: 8px; font-size: 24px; font-weight: 950; text-transform: uppercase; }
.skn-hero-card__side { display: grid; gap: 16px; }
.skn-hero-card__small { position: relative; min-height: 236px; overflow: hidden; background: #050505; }
.skn-template-box { border: 1px solid rgba(200,166,97,.3); background: #000; padding: 26px; }
.skn-template-box span { display: block; margin-top: 16px; color: var(--skn-silver); font-size: 14px; line-height: 1.65; }

.skn-section { padding: 84px 0; }
.skn-section-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 42px; }
.skn-section-head h2, .skn-custom-cta h2 { margin: 0; max-width: 880px; color: var(--skn-white); font-size: clamp(40px, 4.6vw, 70px); line-height: .94; letter-spacing: -.04em; font-weight: 950; text-transform: uppercase; }
.skn-section-head p, .skn-custom-cta p { max-width: 700px; margin: 22px 0 0; color: var(--skn-silver); font-size: 16px; line-height: 1.7; }

.skn-device-grid, .skn-quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.skn-device-card, .skn-product-card, .skn-quality-grid > div, .skn-steps > div { border: 1px solid var(--skn-border); background: var(--skn-graphite); transition: .22s ease; }
.skn-device-card:hover, .skn-product-card:hover { transform: translateY(-6px); border-color: rgba(200,166,97,.4); }
.skn-device-card__image { position: relative; height: 290px; background: #030303; overflow: hidden; }
.skn-device-card__image img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: .55s ease; }
.skn-device-card:hover img, .skn-product-card:hover img { transform: scale(1.05); opacity: .88; }
.skn-device-card__content, .skn-product-card__content { padding: 26px; }
.skn-device-card h3, .skn-product-card h3, .skn-quality-grid h3, .skn-steps h3 { margin: 0; color: var(--skn-white); font-size: 25px; line-height: 1; font-weight: 950; text-transform: uppercase; }
.skn-device-card p, .skn-quality-grid p, .skn-steps p { min-height: 52px; margin: 16px 0 0; color: var(--skn-silver); font-size: 14px; line-height: 1.68; }
.skn-device-card a { display: inline-block; margin-top: 24px; color: var(--skn-gold); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }

.skn-link-band { border-top: 1px solid var(--skn-border); border-bottom: 1px solid var(--skn-border); background: var(--skn-graphite); padding: 38px 0; }
.skn-link-band__inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.skn-link-band a { border: 1px solid var(--skn-border); background: #000; padding: 14px 20px; color: var(--skn-silver); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.skn-link-band a:hover { border-color: var(--skn-gold); color: var(--skn-gold); }

.skn-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.skn-product-card__image { position: relative; display: block; height: 440px; overflow: hidden; background: #030303; }
.skn-product-card__image img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: .55s ease; }
.skn-product-card__content { margin-top: -120px; position: relative; z-index: 2; }
.skn-product-card__content p { margin: 0 0 10px; color: var(--skn-gold); font-size: 11px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; }
.skn-product-card__content span { display: block; margin-top: 14px; color: var(--skn-silver); font-size: 14px; line-height: 1.5; }

.skn-custom-cta { border-top: 1px solid rgba(200,166,97,.22); border-bottom: 1px solid rgba(200,166,97,.22); background: var(--skn-graphite); padding: 84px 0; }
.skn-custom-cta__inner { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 56px; }
.skn-custom-cta .skn-btn { margin-top: 32px; }
.skn-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.skn-steps > div { background: #000; padding: 30px; }
.skn-steps strong { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 34px; border: 1px solid rgba(200,166,97,.65); color: var(--skn-gold); font-size: 14px; }

.skn-quality-grid > div { padding: 34px; }
.skn-quality-grid h3 { margin-top: 0; }
.skn-quality-grid p { min-height: auto; }

.skn-footer { border-top: 1px solid var(--skn-border); padding: 42px 0; }
.skn-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.skn-footer__brand { margin: 0; color: var(--skn-gold); font-size: 18px; font-weight: 900; letter-spacing: .34em; text-transform: uppercase; }
.skn-footer__links { display: flex; flex-wrap: wrap; gap: 22px; color: rgba(201,199,194,.72); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.skn-footer__links a:hover { color: var(--skn-gold); }
.skn-footer__social { display: flex; align-items: center; gap: 14px; }
.skn-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(245,243,238,.18); color: rgba(201,199,194,.72); transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.skn-footer__social a:hover { color: #000; background: var(--skn-gold); border-color: var(--skn-gold); }

.skn-image-fallback { min-height: 230px; height: 100%; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 35% 30%, rgba(200,166,97,.22), transparent 36%), linear-gradient(135deg, #050505, #222, #050505); color: var(--skn-gold); font-weight: 950; letter-spacing: .15em; text-align: center; text-transform: uppercase; }
.skn-image-fallback--large { min-height: 520px; }

@media (max-width: 990px) {
  .skn-nav { display: none; }
  .skn-hero__inner, .skn-custom-cta__inner { grid-template-columns: 1fr; }
  .skn-hero-card { grid-template-columns: 1fr; }
  .skn-section-head { align-items: flex-start; flex-direction: column; }
  .skn-device-grid, .skn-product-grid, .skn-quality-grid { grid-template-columns: 1fr; }
  .skn-product-card__content { margin-top: 0; }
  .skn-product-card__image { height: 340px; }
}

@media (max-width: 640px) {
  .skn-container { width: min(var(--skn-max), calc(100% - 28px)); }
  .skn-header__cta { display: none; }
  .skn-brand__name { font-size: 16px; }
  .skn-brand__tagline { display: none; }
  .skn-announcement {
    font-size: 10px;
    letter-spacing: .14em;
    line-height: 1.45;
  }
  .skn-section-label {
    align-items: flex-start;
    gap: 10px;
    font-size: 10px;
    letter-spacing: .20em;
  }
  .skn-section-label span {
    width: 42px;
    margin-top: .7em;
    flex: 0 0 42px;
  }
  .skn-button-row {
    gap: 10px;
  }
  .skn-button-row .skn-btn {
    flex: 1 1 160px;
    min-width: 0;
    padding: 0 16px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  .skn-hero__inner { padding: 64px 0; }
  .skn-proof-points, .skn-steps { grid-template-columns: 1fr; }
  .skn-hero-card__main { min-height: 380px; }
  .skn-section, .skn-custom-cta { padding: 64px 0; }
}
.skn-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.skn-reveal.is-visible { opacity: 1; transform: translateY(0); }

.skn-announcement{
  background:#000;
  border-bottom:1px solid rgba(200,166,97,.22);
  color:#C8A661;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  padding:10px 16px;
  text-align:center;
  text-transform:uppercase;
}
.skn-quality-heading{
  font-size:clamp(32px,4vw,58px);
  line-height:.98;
  letter-spacing:-.04em;
  margin:0 0 36px;
  max-width:850px;
  text-transform:uppercase;
}

/* Product view */
.skn-product-view { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.skn-product-view__gallery { position: relative; }
.skn-product-view__gallery-main { position: relative; min-height: 560px; background: var(--skn-graphite); border: 1px solid var(--skn-border); overflow: hidden; }
.skn-product-view__gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.skn-product-view__gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.skn-product-view__thumb { position: relative; aspect-ratio: 1; border: 1px solid var(--skn-border); background: #050505; overflow: hidden; cursor: pointer; padding: 0; transition: .2s ease; }
.skn-product-view__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.skn-product-view__thumb:hover, .skn-product-view__thumb[aria-pressed="true"] { border-color: var(--skn-gold); }
.skn-product-view__thumb[aria-pressed="true"] img { opacity: 1; }
.skn-product-view__body { position: relative; }
.skn-product-view__title { margin: 0; color: var(--skn-white); font-size: clamp(36px, 4vw, 58px); line-height: .96; letter-spacing: -.035em; font-weight: 950; text-transform: uppercase; }
.skn-product-view__price { margin: 20px 0 0; color: var(--skn-gold); font-size: 22px; font-weight: 800; letter-spacing: .08em; }
.skn-product-view__body p { margin: 24px 0 0; color: var(--skn-silver); font-size: 16px; line-height: 1.72; }

/* Skin builder */
.skn-skin-builder { border-top: 1px solid var(--skn-border); background: var(--skn-graphite); padding: 84px 0; }
.skn-builder__head { margin-bottom: 48px; }
.skn-builder__head h2 { margin: 0; max-width: 760px; color: var(--skn-white); font-size: clamp(32px, 4vw, 56px); line-height: .98; letter-spacing: -.03em; font-weight: 950; text-transform: uppercase; }
.skn-builder__head p { max-width: 640px; margin: 22px 0 0; color: var(--skn-silver); font-size: 15px; line-height: 1.7; }
.skn-builder__change-design { margin-top: 18px; font-size: 13px; color: rgba(201,199,194,.78); }
.skn-builder__change-design a { color: var(--skn-gold); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(200,166,97,.5); padding-bottom: 2px; }
.skn-builder__change-design a:hover { color: var(--skn-white); border-color: var(--skn-white); }
.skn-builder__change-design strong { color: var(--skn-white); font-weight: 800; }
.skn-builder__preview { align-self: start; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 110px; }
.skn-preview__label { color: var(--skn-gold); font-size: 11px; font-weight: 900; letter-spacing: .28em; text-transform: uppercase; }
.skn-preview__frame { position: relative; width: 100%; margin: 0; aspect-ratio: 1 / 1; background: #000; border: 1px solid rgba(200,166,97,.32); overflow: hidden; }
.skn-preview__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; transition: opacity .25s ease; }
.skn-preview__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(0,0,0,.72); backdrop-filter: blur(2px); color: var(--skn-white); padding: 32px; text-align: center; }
.skn-preview__overlay[hidden] { display: none; }
.skn-preview__spinner { width: 38px; height: 38px; border: 2px solid rgba(200,166,97,.25); border-top-color: var(--skn-gold); border-radius: 50%; animation: sknSpin .9s linear infinite; }
.skn-preview__status { margin: 0; max-width: 34ch; color: var(--skn-silver); font-size: 12px; font-weight: 800; letter-spacing: .14em; line-height: 1.55; text-transform: uppercase; }
.skn-preview__error { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 12px 14px; border: 1px solid rgba(200,166,97,.45); background: rgba(0,0,0,.75); color: var(--skn-silver); font-size: 12px; letter-spacing: .1em; line-height: 1.5; }
.skn-preview__error[hidden] { display: none; }
.skn-preview__hint { margin: 0; color: rgba(201,199,194,.72); font-size: 11px; font-weight: 800; letter-spacing: .14em; line-height: 1.55; text-transform: uppercase; }
.skn-preview__hint[hidden] { display: none; }
.skn-builder__preview[data-skn-render-state="ready"] .skn-preview__hint { display: none; }
@keyframes sknSpin { to { transform: rotate(360deg); } }

.skn-summary__price dd { color: var(--skn-gold); font-weight: 900; font-size: 18px; letter-spacing: .02em; }

.skn-builder__form { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .78fr); gap: 48px; align-items: start; }
.skn-builder__choice-stack { display: grid; gap: 24px; min-width: 0; }
.skn-builder__steps { display: grid; gap: 24px; }
.skn-builder__step { border: 1px solid var(--skn-border); background: #000; padding: 28px 30px; }
.skn-builder__step[data-disabled="true"] { opacity: .42; pointer-events: none; }
.skn-builder__step-label { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; color: var(--skn-gold); font-size: 11px; font-weight: 900; letter-spacing: .28em; text-transform: uppercase; }
.skn-builder__step-label strong { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(200,166,97,.65); color: var(--skn-gold); font-size: 12px; }

/* Pill group: used for category and brand */
.skn-pill-group { display: flex; flex-wrap: wrap; gap: 10px; }
.skn-pill { appearance: none; border: 1px solid var(--skn-border); background: rgba(28,28,28,.72); color: var(--skn-silver); padding: 14px 22px; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: .18s ease; }
.skn-pill:hover { border-color: rgba(200,166,97,.5); color: var(--skn-white); }
.skn-pill[aria-pressed="true"] { background: var(--skn-gold); border-color: var(--skn-gold); color: #000; }
.skn-pill:disabled { opacity: .3; cursor: not-allowed; }
.skn-pill-group--empty:before { content: attr(data-empty); color: rgba(201,199,194,.55); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

.skn-coverage-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.skn-coverage-option { appearance: none; display: grid; align-content: center; gap: 8px; min-height: 88px; border: 1px solid var(--skn-border); background: rgba(28,28,28,.72); color: var(--skn-silver); padding: 16px; font-family: inherit; text-align: left; cursor: pointer; transition: .18s ease; }
.skn-coverage-option span { color: inherit; font-size: 11px; font-weight: 900; letter-spacing: .14em; line-height: 1.35; text-transform: uppercase; }
.skn-coverage-option strong { color: var(--skn-gold); font-size: 18px; font-weight: 950; letter-spacing: .02em; }
.skn-coverage-option:hover { border-color: rgba(200,166,97,.5); color: var(--skn-white); }
.skn-coverage-option[aria-pressed="true"] { background: var(--skn-gold); border-color: var(--skn-gold); color: #000; }
.skn-coverage-option[aria-pressed="true"] strong { color: #000; }

/* Form fields */
.skn-field { display: block; }
.skn-field + .skn-field { margin-top: 20px; }
.skn-field__label { display: block; margin: 0 0 10px; color: var(--skn-silver); font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.skn-field__label span { color: rgba(201,199,194,.5); font-weight: 700; letter-spacing: .14em; text-transform: none; margin-left: 6px; }
.skn-input, .skn-textarea, .skn-select { width: 100%; background: #000; border: 1px solid var(--skn-border); color: var(--skn-white); padding: 14px 16px; font-family: inherit; font-size: 14px; letter-spacing: .04em; transition: border-color .18s ease; }
.skn-input:focus, .skn-textarea:focus, .skn-select:focus { outline: none; border-color: var(--skn-gold); }
.skn-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.skn-select { appearance: none; background: #000 url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C8A661' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 18px center; padding-right: 44px; cursor: pointer; }
.skn-select:disabled { opacity: .4; cursor: not-allowed; }

.skn-field + .skn-builder__quality-story,
.skn-builder__quality-story + .skn-field { margin-top: 20px; }
.skn-builder__quality-story { border: 1px solid rgba(200,166,97,.32); background: rgba(200,166,97,.06); padding: 22px; }
.skn-builder__quality-kicker { margin: 0 0 10px; color: var(--skn-gold); font-size: 11px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
.skn-builder__quality-copy { margin: 0; max-width: 68ch; color: var(--skn-silver); font-size: 14px; line-height: 1.65; }
.skn-builder__quality-story ul { list-style: none; display: grid; gap: 12px; margin: 18px 0 0; padding: 0; }
.skn-builder__quality-story li { border-top: 1px solid rgba(201,199,194,.16); padding-top: 12px; }
.skn-builder__quality-story strong { display: block; color: var(--skn-white); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.skn-builder__quality-story span { display: block; margin-top: 6px; color: rgba(201,199,194,.78); font-size: 13px; line-height: 1.6; }
.skn-builder__quality-link { display: inline-flex; margin-top: 18px; color: var(--skn-gold); font-size: 12px; font-weight: 900; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(200,166,97,.5); padding-bottom: 4px; transition: color .18s ease, border-color .18s ease; }
.skn-builder__quality-link:hover { color: var(--skn-white); border-color: var(--skn-white); }
.skn-builder__upsell { border-color: rgba(200,166,97,.46); background: linear-gradient(135deg, rgba(200,166,97,.12), rgba(0,0,0,.94)); }
.skn-builder__upsell-options { display: grid; gap: 8px; margin-top: 12px; }
.skn-builder__upsell-option { display: grid; grid-template-columns: 24px 1fr auto; gap: 16px; align-items: center; cursor: pointer; padding: 14px 16px; border: 1px solid rgba(245,243,238,.14); background: rgba(0,0,0,.42); transition: border-color .18s ease, background-color .18s ease; }
.skn-builder__upsell-option:hover { border-color: rgba(200,166,97,.5); }
.skn-builder__upsell-option:has(input:checked) { border-color: var(--skn-gold); background: rgba(200,166,97,.1); }
.skn-builder__upsell-option input { width: 20px; height: 20px; accent-color: var(--skn-gold); }
.skn-builder__upsell-option span { min-width: 0; }
.skn-builder__upsell-option strong { display: block; color: var(--skn-white); font-size: 13px; font-weight: 950; letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; }
.skn-builder__upsell-option small { display: block; margin-top: 6px; color: rgba(201,199,194,.78); font-size: 13px; line-height: 1.5; }
.skn-builder__upsell-option b { color: var(--skn-gold); font-size: 17px; font-weight: 950; letter-spacing: .08em; white-space: nowrap; }
.skn-builder__upsell-option b:empty { display: none; }
.skn-builder__upsell-label { display: grid; grid-template-columns: 24px 1fr auto; gap: 16px; align-items: center; cursor: pointer; }
.skn-builder__upsell-label input { width: 20px; height: 20px; accent-color: var(--skn-gold); }
.skn-builder__upsell-label span { min-width: 0; }
.skn-builder__upsell-label strong { display: block; color: var(--skn-white); font-size: 13px; font-weight: 950; letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; }
.skn-builder__upsell-label small { display: block; margin-top: 8px; color: rgba(201,199,194,.78); font-size: 13px; line-height: 1.5; }
.skn-builder__upsell-label b { color: var(--skn-gold); font-size: 17px; font-weight: 950; letter-spacing: .08em; white-space: nowrap; }

/* File upload */
.skn-file { position: relative; display: block; }
.skn-file__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.skn-file__drop { display: grid; place-items: center; padding: 32px 24px; border: 1px dashed rgba(200,166,97,.4); background: #000; color: var(--skn-silver); font-size: 13px; letter-spacing: .08em; text-align: center; transition: .18s ease; }
.skn-file__drop strong { display: block; color: var(--skn-gold); font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 8px; }
.skn-file:hover .skn-file__drop { border-color: var(--skn-gold); color: var(--skn-white); }
.skn-file[data-has-file="true"] .skn-file__drop { border-style: solid; border-color: var(--skn-gold); color: var(--skn-white); }
.skn-file__filename { display: block; margin-top: 8px; color: var(--skn-gold); font-size: 12px; font-weight: 700; letter-spacing: .08em; word-break: break-all; }

/* Colour swatches */
.skn-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.skn-swatch { appearance: none; width: 36px; height: 36px; border: 1px solid var(--skn-border); background: var(--swatch, #000); cursor: pointer; padding: 0; transition: .18s ease; }
.skn-swatch:hover, .skn-swatch[aria-pressed="true"] { border-color: var(--skn-gold); transform: scale(1.08); }

/* Summary panel */
.skn-builder__summary { border: 1px solid rgba(200,166,97,.32); background: #000; padding: 32px; }
.skn-builder__summary h3 { margin: 0 0 20px; color: var(--skn-gold); font-size: 12px; font-weight: 900; letter-spacing: .28em; text-transform: uppercase; }
.skn-builder__summary dl { margin: 0; display: grid; gap: 14px; }
.skn-builder__summary dt { color: rgba(201,199,194,.6); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.skn-builder__summary dd { margin: 4px 0 0; color: var(--skn-white); font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.skn-builder__summary dd[data-empty="true"] { color: rgba(201,199,194,.4); font-style: italic; font-weight: 500; letter-spacing: .02em; }
.skn-builder__submit { width: 100%; margin-top: 28px; }
.skn-builder__submit:disabled { opacity: .35; cursor: not-allowed; transform: none !important; background: var(--skn-gold); }
.skn-builder__error { margin-top: 16px; padding: 12px 16px; border: 1px solid rgba(200,166,97,.5); background: rgba(200,166,97,.08); color: var(--skn-soft-gold); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-align: center; display: none; }
.skn-builder__error[data-show="true"] { display: block; }

/* Product info section (trust/FAQ) */
.skn-product-info { padding: 84px 0; border-top: 1px solid var(--skn-border); }
.skn-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.skn-info-card { border: 1px solid var(--skn-border); background: var(--skn-graphite); padding: 34px; }
.skn-info-card h3 { margin: 0; color: var(--skn-white); font-size: 22px; font-weight: 950; letter-spacing: -.01em; text-transform: uppercase; }
.skn-info-card p { margin: 16px 0 0; color: var(--skn-silver); font-size: 14px; line-height: 1.68; }

@media (max-width: 990px) {
  .skn-product-view, .skn-builder__form { grid-template-columns: 1fr; }
  .skn-product-view__gallery-main { min-height: 420px; }
  .skn-builder__preview { order: -1; position: static; }
  .skn-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .skn-skin-builder, .skn-product-info { padding: 64px 0; }
  .skn-builder__step { padding: 22px 20px; }
  .skn-coverage-options { grid-template-columns: 1fr; }
  .skn-preview__overlay { padding: 24px; }
  .skn-preview__status, .skn-preview__hint { font-size: 10px; letter-spacing: .1em; }
  .skn-product-view__gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
}