@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* =====================================================================
   LOCK DROP — a dark-glass theme for SellAuth
   Colours are pulled straight off the padlock logo: pale blue highlight
   at the top, deep navy blue at the bottom, white keyhole.
   Everything is scoped so it survives an official theme update.
   ===================================================================== */

:root {
  /* --- colour -------------------------------------------------------- */
  --ld-ink:        #070b14;   /* page background                        */
  --ld-ink-2:      #0c1220;   /* raised background                      */
  --ld-panel:      rgba(140, 178, 235, 0.045);
  --ld-panel-hi:   rgba(140, 178, 235, 0.08);
  --ld-edge:       rgba(160, 195, 245, 0.11);
  --ld-edge-hi:    rgba(160, 195, 245, 0.22);

  /* the logo, as tokens */
  --ld-accent:     #5b8def;   /* <-- brand blue (mid-body of the lock)  */
  --ld-accent-hi:  #8fb3e6;   /* pale top highlight                     */
  --ld-accent-lo2: #2c56a4;   /* deep bottom navy                       */
  --ld-accent-lo:  rgba(91, 141, 239, 0.16);
  --ld-metal:      linear-gradient(180deg, #7ba4f2 0%, #4b7ce4 48%, #2c56a4 100%);
  --ld-gloss:      linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 58%);

  --ld-good:       #35d9a0;
  --ld-bad:        #ff5c7a;

  --ld-text:       #e8eefb;
  --ld-muted:      #8d99b4;
  --ld-faint:      #5d6881;

  /* --- type ---------------------------------------------------------- */
  --ld-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --ld-body:    'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --ld-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* --- shape --------------------------------------------------------- */
  --ld-radius:   18px;        /* matches the lock body's soft corners   */
  --ld-radius-s: 11px;
  --ld-max:      1180px;
  --ld-gap:      20px;
  --ld-dur:      .22s;
}

/* =====================================================================
   1. HOMEPAGE
   ===================================================================== */

.ld {
  background: var(--ld-ink);
  color: var(--ld-text);
  font-family: var(--ld-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ld-wrap {
  width: 100%;
  max-width: var(--ld-max);
  margin-inline: auto;
  padding-inline: 22px;
}
.ld-wrap--narrow { max-width: 760px; }

.ld-section { padding-block: 96px; }
.ld-section--tight { padding-block: 64px; }

/* --- shared type ---------------------------------------------------- */
.ld .ld-eyebrow {
  font-family: var(--ld-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ld-faint);
  margin: 0 0 14px;
}
.ld .ld-title {
  font-family: var(--ld-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ld-text);
  margin: 0;
}
.ld .ld-sub {
  color: var(--ld-muted);
  max-width: 52ch;
  margin: 14px 0 0;
}
.ld .mk {
  background: linear-gradient(180deg, var(--ld-accent-hi), var(--ld-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ld-head { margin-bottom: 40px; }

/* --- the brand mark -------------------------------------------------- */
.ld-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.ld-mark {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(91, 141, 239, .38));
}
.ld-mark--lg { width: 132px; height: 132px; }
.ld-brand-name {
  font-family: var(--ld-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--ld-text);
}
.ld-brand-name b { font-weight: 700; color: var(--ld-accent-hi); }

/* --- buttons — glossy, like the lock body --------------------------- */
.ld .ld-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid rgba(195, 217, 247, .35);
  border-radius: 999px;
  background: var(--ld-metal);
  color: #fff;
  font-family: var(--ld-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 20px -10px rgba(44, 86, 164, .9);
  transition: transform var(--ld-dur) ease, box-shadow var(--ld-dur) ease,
              filter var(--ld-dur) ease, border-color var(--ld-dur) ease;
}
.ld .ld-btn::before {          /* the gloss sweep across the top half */
  content: '';
  position: absolute;
  inset: 0 0 42%;
  background: var(--ld-gloss);
  pointer-events: none;
}
.ld .ld-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 30px -10px var(--ld-accent);
}
.ld .ld-btn--ghost {
  background: var(--ld-panel);
  border-color: var(--ld-edge);
  color: var(--ld-text);
  backdrop-filter: blur(8px);
  box-shadow: none;
}
.ld .ld-btn--ghost::before { display: none; }
.ld .ld-btn--ghost:hover {
  background: var(--ld-panel-hi);
  border-color: var(--ld-edge-hi);
  filter: none;
  box-shadow: none;
}

/* --- hero ----------------------------------------------------------- */
.ld-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 12vh, 120px) 90px;
  text-align: center;
  border-bottom: 1px solid var(--ld-edge);
  background-image:
    radial-gradient(rgba(160, 195, 245, .06) 1px, transparent 1px);
  background-size: 26px 26px;
}
.ld-hero-glow {
  position: absolute;
  inset: -40% 0 auto;
  height: 640px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 55% at 50% 50%, var(--ld-accent-lo), transparent 70%);
}
.ld-hero .ld-wrap { position: relative; perspective: 900px; }

/* The lock, sitting above the headline.
   Two nested elements on purpose: the outer one owns the cursor tilt (set
   from JS), the inner one owns the float. One transform each, so neither
   overwrites the other. */
.ld-hero-mark {
  display: inline-block;
  margin-bottom: 28px;
  transform-style: preserve-3d;
}
.ld-hero-float {
  display: inline-block;
  animation: ld-float 5s ease-in-out infinite;
}
@keyframes ld-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

.ld .ld-hero-title {
  font-family: var(--ld-display);
  font-weight: 700;
  font-size: clamp(36px, 6.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 17ch;
  margin: 0 auto;
  text-wrap: balance;
}
.ld .ld-hero-text {
  color: var(--ld-muted);
  font-size: clamp(16px, 1.6vw, 18px);
  max-width: 54ch;
  margin: 22px auto 0;
}
.ld-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

/* readout strip — the stats, set like a terminal line */
.ld-readout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 56px auto 0;
  padding: 4px;
  width: fit-content;
  border: 1px solid var(--ld-edge);
  border-radius: var(--ld-radius);
  background: var(--ld-panel);
  backdrop-filter: blur(10px);
}
.ld-readout > div {
  padding: 12px 26px;
  text-align: left;
  border-right: 1px solid var(--ld-edge);
}
.ld-readout > div:last-child { border-right: 0; }
.ld-readout dt {
  font-family: var(--ld-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ld-faint);
  margin: 0 0 4px;
}
.ld-readout dd {
  font-family: var(--ld-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--ld-text);
  margin: 0;
}
.ld-readout dd span { color: var(--ld-faint); font-weight: 400; font-size: 13px; }

/* --- product grid --------------------------------------------------- */
.ld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}
.ld-empty {
  grid-column: 1 / -1;
  padding: 48px;
  text-align: center;
  color: var(--ld-muted);
  border: 1px dashed var(--ld-edge);
  border-radius: var(--ld-radius);
}

/* --- the drop card (the signature piece) ---------------------------- */
.ld .ld-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ld-edge);
  border-radius: var(--ld-radius);
  background: var(--ld-panel);
  backdrop-filter: blur(12px);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--ld-dur) ease, border-color var(--ld-dur) ease,
              background var(--ld-dur) ease, box-shadow var(--ld-dur) ease;
}
.ld .ld-card:hover {
  transform: translateY(-4px);
  border-color: var(--ld-edge-hi);
  background: var(--ld-panel-hi);
  box-shadow: 0 18px 40px -24px var(--ld-accent);
}
/* The two punched notches. Anchored to the foot rather than a fixed distance
   from the top, so they stay welded to the dashed perforation no matter how
   tall the product image turns out to be. The card's overflow:hidden is what
   crops them into notches. */
.ld-card-foot::before,
.ld-card-foot::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ld-ink);
  border: 1px solid var(--ld-edge);
  z-index: 2;
}
.ld-card-foot::before { left: -9px; }
.ld-card-foot::after  { right: -9px; }

.ld-card-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 176px;
  background:
    linear-gradient(180deg, rgba(140, 178, 235, .07), transparent),
    var(--ld-ink-2);
  overflow: hidden;
}
/* SellAuth's media snippet sits on top of the keyhole, so the keyhole only
   shows through when there's genuinely no artwork to draw. */
.ld-card-shot {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: 100%;
}
.ld-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* fallback art: the keyhole from the logo */
.ld-card-keyhole {
  grid-area: 1 / 1;
  place-self: center;
  width: 58px;
  height: 58px;
  opacity: .5;
}

.ld-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--tag, var(--ld-accent));
  color: #fff;
  font-family: var(--ld-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ld-card-body { padding: 20px 22px 22px; flex: 1; }
.ld-card-ref {
  font-family: var(--ld-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ld-faint);
  margin: 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ld-card-name {
  font-family: var(--ld-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ld-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ld-card-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 17px 22px;
  border-top: 1px dashed var(--ld-edge);
}
.ld-card-price { display: flex; align-items: baseline; gap: 6px; }
.ld-card-price-label {
  font-family: var(--ld-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ld-faint);
}
.ld-card-price-value {
  font-family: var(--ld-mono);
  font-size: 21px;
  font-weight: 700;
  color: var(--ld-text);
}

.ld-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ld-mono);
  font-size: 12px;
  color: var(--ld-muted);
  white-space: nowrap;
}
.ld-stock i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ld-stock.is-in  i { background: var(--ld-good); box-shadow: 0 0 0 3px rgba(53, 217, 160, .16); }
.ld-stock.is-out   { color: var(--ld-bad); }
.ld-stock.is-out i { background: var(--ld-bad); }

.ld-more { margin-top: 36px; text-align: center; }

/* --- steps ---------------------------------------------------------- */
.ld-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ld-gap);
  margin: 0;
  padding: 0;
}
.ld-step {
  position: relative;
  padding: 26px 24px;
  border: 1px solid var(--ld-edge);
  border-radius: var(--ld-radius);
  background: var(--ld-panel);
  overflow: hidden;
}
.ld-step::after {              /* a thin gloss line, top edge */
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ld-edge-hi), transparent);
}
.ld-step-n {
  font-family: var(--ld-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ld-accent);
}
.ld-step-t {
  font-family: var(--ld-display);
  font-size: 18px;
  font-weight: 600;
  margin: 12px 0 8px;
  color: var(--ld-text);
}
.ld-step-d { color: var(--ld-muted); font-size: 15px; margin: 0; }

/* --- faq ------------------------------------------------------------ */
.ld-faq {
  border: 1px solid var(--ld-edge);
  border-radius: var(--ld-radius);
  background: var(--ld-panel);
  overflow: hidden;
}
.ld-faq-item + .ld-faq-item { border-top: 1px solid var(--ld-edge); }
.ld-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--ld-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ld-text);
  transition: color var(--ld-dur) ease;
}
.ld-faq-item > summary::-webkit-details-marker { display: none; }
.ld-faq-item > summary:hover { color: var(--ld-accent-hi); }
.ld-faq-item > summary i {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}
.ld-faq-item > summary i::before,
.ld-faq-item > summary i::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: var(--ld-muted);
  transition: transform var(--ld-dur) ease;
}
.ld-faq-item > summary i::after { transform: rotate(90deg); }
.ld-faq-item[open] > summary i::after { transform: rotate(0deg); }
.ld-faq-item[open] > summary { color: var(--ld-accent-hi); }
.ld-faq-a { padding: 0 22px 22px; }
.ld-faq-a p { margin: 0; color: var(--ld-muted); max-width: 62ch; }

/* --- reviews -------------------------------------------------------- */
.ld-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ld-gap);
}
.ld .ld-review {
  margin: 0;
  padding: 22px;
  border: 1px solid var(--ld-edge);
  border-radius: var(--ld-radius);
  background: var(--ld-panel);
}
.ld-stars { font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; }
.ld-stars .on  { color: var(--ld-accent-hi); }
.ld-stars .off { color: var(--ld-faint); }
.ld-review blockquote {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--ld-text);
  line-height: 1.55;
}
.ld-review figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--ld-mono);
  font-size: 11px;
  color: var(--ld-faint);
}
.ld-review-item {
  color: var(--ld-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

/* --- cta band ------------------------------------------------------- */
.ld-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px;
  border: 1px solid var(--ld-edge);
  border-radius: var(--ld-radius);
  background:
    radial-gradient(ellipse 70% 160% at 0% 0%, var(--ld-accent-lo), transparent 70%),
    var(--ld-panel);
}
.ld-cta-title {
  font-family: var(--ld-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}
.ld-cta-text { color: var(--ld-muted); margin: 8px 0 0; max-width: 46ch; }
.ld-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- reveal on scroll ----------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
[data-reveal].ld-in { opacity: 1; transform: none; }

/* --- accessibility floor -------------------------------------------- */
.ld a:focus-visible,
.ld summary:focus-visible {
  outline: 2px solid var(--ld-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .ld *,
  [data-reveal] { transition: none !important; animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .ld .ld-btn:hover,
  .ld .ld-card:hover { transform: none; }
}

/* --- responsive ------------------------------------------------------ */
@media (max-width: 720px) {
  /* one full-width card per row — never let the 320px min cause overflow */
  .ld-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ld-section { padding-block: 64px; }
  .ld-readout { width: 100%; }
  .ld-readout > div { flex: 1 1 44%; border-right: 0; border-bottom: 1px solid var(--ld-edge); }
  .ld-readout > div:nth-last-child(-n+2) { border-bottom: 0; }
  .ld-cta { padding: 28px; }
  .ld-hero-actions .ld-btn { flex: 1 1 100%; }
  .ld-mark--lg { width: 96px; height: 96px; }
  .ld-card-media { min-height: 150px; }
}

/* =====================================================================
   2. THE REST OF THE STORE

   SellAuth's current theme drives every built-in component — navbar,
   footer, cart drawer, product page, checkout — from one set of CSS
   variables that `layouts/master.njk` writes into a <style> block.

   So instead of guessing at class names, we redefine those variables.
   Change them and the whole store follows, including pages this theme
   never touches.

   Two things to know about the selectors below:
   · `html[data-scheme=...]` is one point more specific than the theme's
     own `[data-scheme=...]`, which is how these win despite the theme's
     styles being written later in the page.
   · Both schemes get the same values on purpose. Lock Drop is a dark
     theme, so a visitor whose device is set to light mode still gets
     the dark store rather than a half-broken pale one.
   ===================================================================== */

html[data-scheme="light"],
html[data-scheme="dark"] {
  color-scheme: dark;

  /* these four take bare RGB numbers — the theme wraps them in rgb() */
  --cl-background:     7, 11, 20;        /* --ld-ink    */
  --cl-surface:        12, 18, 32;       /* --ld-ink-2  */
  --cl-surface-raised: 18, 26, 44;
  --cl-t-primary:      232, 238, 251;    /* --ld-text   */
  --cl-t-muted:        141, 153, 180;    /* --ld-muted  */

  /* this one takes a finished colour */
  --cl-border: rgba(160, 195, 245, 0.11);
}

html[data-scheme] {
  --cl-accent:    91, 141, 239;          /* --ld-accent */
  --cl-on-accent: 255, 255, 255;
  --cl-success:   53, 217, 160;
  --cl-warning:   240, 169, 58;
  --cl-error:     255, 92, 122;
  --cl-overlay:   rgba(3, 6, 12, .72);

  /* type — matches the homepage */
  --ff-heading: var(--ld-display);
  --ff-body:    var(--ld-body);
  --fw-heading: 700;

  /* shape — the lock body's soft corners, and pill buttons */
  --radius-card:   var(--ld-radius);
  --radius-input:  12px;
  --radius-badge:  9999px;
  --radius-button: 9999px;
  --border-w:      1px;

  /* rhythm — lines the built-in pages up with the homepage */
  --container-max: var(--ld-max);
  --section-py:    84px;
}

/* Primary buttons across the store get the glossy lock treatment.
   Scoped to the accent background the theme gives them. */
html[data-scheme] .bg-accent {
  background-image: var(--ld-gloss), var(--ld-metal);
  border: 1px solid rgba(195, 217, 247, .35);
  transition: filter var(--ld-dur) ease;
}
html[data-scheme] .bg-accent:hover { filter: brightness(1.06); }

/* Your uploaded logo in the navbar — bigger, with the hero mark's glow. */
.sa-header a img {
  height: 48px;
  width: auto;
  max-height: none;
  filter: drop-shadow(0 4px 14px rgba(91, 141, 239, .45));
}
@media (max-width: 640px) {
  .sa-header a img { height: 38px; }
}

::selection { background: var(--ld-accent); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ld-ink); }
::-webkit-scrollbar-thumb {
  background: var(--ld-edge);
  border-radius: 999px;
  border: 3px solid var(--ld-ink);
}
::-webkit-scrollbar-thumb:hover { background: var(--ld-edge-hi); }