/* ==========================================================================
   Shop page styles — additive to styles.css.
   Inherits CSS variables (--bg-color, --text-color, --accent-color,
   --transition-duration), the TBJTerminalMono font, .container and
   .logo-badge from styles.css, so both themes apply automatically.
   ========================================================================== */

/* Give the shop column a little more room than the home column */
.container.shop {
  max-width: 60rem;
}

/* --- Bracket-style text buttons (mirror .nav-links a) --- */
.shop-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition-duration) ease;
}

.shop-link:hover {
  opacity: 0.7;
}

.shop-link:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

.shop-link[disabled],
.shop-link[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Status messages (loading / empty / error) --- */
.shop-status {
  font-size: clamp(0.875rem, 2vw, 1rem);
  margin-bottom: 2rem;
  min-height: 1.5em;
}

.shop-status .typewriter-cursor {
  vertical-align: baseline;
}

/* ===== Shell: terminal cover flow ===== */

/* --- Terminal window --- */
.shell {
  margin-top: 2rem;
}

.term {
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
  padding: 14px 16px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px color-mix(in srgb, var(--accent-color) 10%, transparent),
              inset 0 0 60px color-mix(in srgb, var(--accent-color) 4%, transparent);
}

/* Scanline overlay */
.term::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    color-mix(in srgb, var(--accent-color) 6%, transparent) 0 1px,
    transparent 1px 3px
  );
}

/* --- Title bar --- */
.tbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: color-mix(in srgb, var(--accent-color) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
  padding-bottom: 8px;
  font-size: 12px;
}

.tbar-right {
  display: flex;
  gap: 14px;
  align-items: baseline;
}

/* --- .shop-link override for terminal context --- */
.term .shop-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
}

.term .shop-link:hover {
  opacity: 0.7;
}

.term .shop-link:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

/* --- Cover-flow stage --- */
.cf-stage {
  position: relative;
  height: 520px;
  perspective: 1700px;
  margin: 14px 0 4px;
}

.cf {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 8px;
  overflow: hidden;
  font-family: inherit;
  color: inherit;
  background: color-mix(in srgb, var(--bg-color) 96%, var(--accent-color));
  border: 1px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.cf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}

/* Center card — full color, accent border */
.cf.c {
  z-index: 6;
  border-color: color-mix(in srgb, var(--accent-color) 70%, transparent);
  box-shadow: 0 20px 56px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.cf.c img {
  filter: grayscale(0);
}

/* Placeholder label (when no image) */
.cf .lbl {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--accent-color) 55%, transparent);
  font-size: 15px;
  text-align: center;
  padding: 10px;
}

/* "Coming soon" placeholder drop cards (002 / 003 / 004) */
.cf.cf-ph {
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--accent-color) 6%, transparent) 0 10px,
      transparent 10px 20px
    ),
    color-mix(in srgb, var(--bg-color) 94%, var(--accent-color));
  border-style: dashed;
}

.cf.cf-ph .lbl .nm {
  font-size: 18px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
}

.cf.cf-ph .lbl .soon {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-color) 65%, transparent);
}

.cf.cf-ph.c .lbl .nm {
  color: var(--text-color);
}

/* --- Meta line below coverflow --- */
.cf-meta {
  text-align: center;
  color: var(--text-color);
  font-size: 14px;
  margin: 4px 0 10px;
  min-height: 1.5em;
}

.cf-meta .pr {
  color: var(--text-color);
}

.cf-meta .dim {
  color: color-mix(in srgb, var(--accent-color) 55%, transparent);
}

/* --- Status messages --- */
.term .shop-status {
  font-size: 13px;
  margin-bottom: 6px;
  min-height: 1.5em;
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
}

.term .shop-status .termcursor {
  vertical-align: baseline;
}

/* --- Scrollable product index list --- */
.listwrap {
  border-top: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
  max-height: 160px;
  overflow: auto;
}

.listwrap::-webkit-scrollbar {
  width: 6px;
}

.listwrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent-color) 30%, transparent);
  border-radius: 3px;
}

.idx {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.idx td {
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 7%, transparent);
  line-height: 1.5;
}

.idx tr:hover td {
  background: color-mix(in srgb, var(--accent-color) 5%, transparent);
}

.idx tr.sel td {
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

/* Marker column: ▸ only visible on selected row */
.idx .mk {
  width: 14px;
  color: transparent;
}

.idx tr.sel .mk {
  color: var(--accent-color);
}

/* Number column */
.idx .n {
  color: color-mix(in srgb, var(--accent-color) 55%, transparent);
  width: 30px;
}

/* Product name column */
.idx .nm {
  color: var(--text-color);
}

.idx .nm .ext {
  color: color-mix(in srgb, var(--accent-color) 55%, transparent);
}

/* Metadata (variant info) */
.idx .meta {
  color: color-mix(in srgb, var(--accent-color) 75%, transparent);
}

/* Stock indicators */
.idx .stock {
  color: var(--accent-color);
}

.idx .out {
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
}

/* Price column */
.idx .pr {
  color: var(--text-color);
  text-align: right;
}

/* --- Prompt line --- */
.prompt {
  margin-top: 8px;
  font-size: 12.5px;
}

.prompt .p {
  color: color-mix(in srgb, var(--accent-color) 55%, transparent);
}

.prompt .c {
  color: color-mix(in srgb, var(--accent-color) 80%, var(--text-color));
}

.prompt .u {
  color: var(--accent-color);
}

/* --- Blinking terminal cursor --- */
@keyframes termcursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.termcursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--accent-color);
  vertical-align: -2px;
  margin-left: 2px;
  animation: termcursor-blink 1s steps(1) infinite;
}

/* --- Mobile adjustments for shell: fit the whole page in one viewport --- */
@media (max-width: 640px) {
  /* Sticky-footer column: the page fills the screen, no vertical scroll */
  body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .container.shop {
    flex: 1;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .shell {
    margin-top: 10px;
  }

  .site-footer {
    padding: 12px 1.5rem 16px;
  }

  .tbar { font-size: 11px; }
  .tbar-right { gap: 10px; }

  /* The stage absorbs the viewport: its height is whatever remains after
     ~420px of fixed chrome (paddings, tbar, meta, list, prompt, footer),
     and the cards scale with it so they never clip. Below the 210px floor
     the page scrolls — the "absolutely necessary" case (very short screens). */
  :root {
    --stage-h: clamp(210px, calc(100vh - 420px), 380px);
    --cf-size: min(260px, calc(var(--stage-h) - 40px));
  }

  @supports (height: 100dvh) {
    :root { --stage-h: clamp(210px, calc(100dvh - 420px), 380px); }
  }

  .cf-stage {
    height: var(--stage-h);
  }

  .cf {
    width: var(--cf-size);
    height: var(--cf-size);
    margin: calc(var(--cf-size) / -2) 0 0 calc(var(--cf-size) / -2);
  }
}