/* CARPCORE — New Arrivals, Nishikigoi Herbiary restyle: the Win95 OS chrome
   reskinned as a printed "specimen drawer" (paper, flat spot inks, hard
   offset shadows, hand-drawn SVG-displacement edges). Tokens inherited from
   .cc-herb (carpcore-herbiary.css).
   Milestone 1 renders a static placeholder (no product data yet), so the
   interactive click-to-preview detail pane and the CARP.EXE Tamagotchi
   modal from the original Shopify section aren't included here — add them
   back if/when that markup returns in a later milestone. */

.cc-feat.cc-herb{ padding-block:clamp(34px,5vw,72px); }
.cc-feat__inner{ max-width:1320px; margin:0 auto; padding:0; }

/* ===== the drawer / catalogue plate (was the window) ===== */
.cc-win{
  position:relative;
  background:var(--paper-l);
  border:3px solid var(--ink);
  box-shadow:var(--sh-lg);
  border-radius:10px 7px 12px 6px;
  font-family:'Nunito',sans-serif;
  overflow:hidden;
}

/* ===== masthead band (was titlebar) ===== */
.cc-win__titlebar{
  background:var(--ink);
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
}
.cc-win__icon{
  width:26px; height:26px; flex-shrink:0;
  background:var(--coral); border:2px solid var(--paper-l);
  display:flex; align-items:center; justify-content:center;
  font-family:'Dela Gothic One',sans-serif; font-size:11px;
  color:var(--paper-l); letter-spacing:-0.5px;
  border-radius:6px 4px 7px 5px;
}
.cc-win__title{
  margin:0; font-weight:400; line-height:1.2;
  font-family:'Mochiy Pop P One',sans-serif; font-size:16px;
  color:var(--paper-l); letter-spacing:0.05em; text-transform:uppercase;
  flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cc-win__buttons{ display:flex; align-items:center; gap:7px; }
.cc-win__btn{
  width:14px; height:14px; min-width:14px; padding:0;
  border-radius:50%; border:2px solid var(--paper-l);
  background:var(--butter); font-size:0; color:transparent;
  cursor:default; display:inline-block; flex-shrink:0;
}
.cc-win__buttons .cc-win__btn:nth-child(2){ background:var(--lime); }
.cc-win__buttons .cc-win__btn:nth-child(3){ background:var(--coral); }

/* ===== tab strip (was menubar) ===== */
.cc-win__menubar{
  background:var(--paper-d); border-bottom:2px solid var(--ink);
  padding:6px 10px; display:flex; gap:6px; flex-wrap:wrap;
}
.cc-win__menu-item{
  font-family:'Dela Gothic One',sans-serif; font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink); padding:6px 11px; min-height:32px;
  display:inline-flex; align-items:center; text-decoration:none;
  border:2px solid transparent; border-radius:6px 4px 7px 5px;
}
.cc-win__menu-item:hover,
.cc-win__menu-item--active{
  background:var(--paper-l); border-color:var(--ink); box-shadow:2px 2px 0 var(--ink);
}

/* ===== field reference line (was address bar) ===== */
.cc-win__addressbar{
  background:var(--paper); border-bottom:2px solid var(--ink);
  padding:7px 10px; display:flex; gap:6px; align-items:center;
}
.cc-win__addr-btn{
  font-family:'VT323',monospace; font-size:15px; color:var(--ink);
  background:var(--paper-l); border:2px solid var(--ink); border-radius:5px;
  padding:1px 8px; min-height:26px; flex-shrink:0;
  display:inline-flex; align-items:center; user-select:none; text-decoration:none;
}
.cc-win__addr-input{
  flex:1; min-width:0;
  background:var(--paper-l); border:2px solid var(--ink); border-radius:5px;
  padding:3px 9px; font-family:'VT323',monospace; font-size:16px; color:var(--navy);
  letter-spacing:0.04em;
}

/* ===== body ===== */
.cc-win__body{ display:flex; min-height:300px; background:var(--paper-l); }

/* ===== printed index (was sidebar) ===== */
.cc-win__sidebar{
  width:174px; flex-shrink:0;
  background:var(--paper-d); border-right:2px solid var(--ink);
  padding:14px 0; display:flex; flex-direction:column; gap:2px;
}
.cc-win__sb-section{
  font-family:'Dela Gothic One',sans-serif; font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink); opacity:.55; padding:4px 16px 8px;
}
.cc-win__sb-item{
  font-family:'Dela Gothic One',sans-serif; font-size:11px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--ink); padding:9px 12px; margin:0 9px;
  display:flex; align-items:center; gap:8px; min-height:40px;
  text-decoration:none; border:2px solid transparent; border-radius:7px 5px 8px 6px;
}
.cc-win__sb-item--active{
  background:var(--cer); color:var(--paper-l);
  border-color:var(--ink); box-shadow:3px 3px 0 var(--ink);
}
.cc-win__sb-item--active .cc-win__sb-icon{ color:var(--butter); }
.cc-win__sb-icon{ color:var(--coral); font-size:13px; flex-shrink:0; }

/* ===== content ===== */
.cc-win__content{ flex:1; padding:14px; display:flex; flex-direction:column; gap:13px; min-width:0; }
.cc-win__hint{
  font-family:'VT323',monospace; font-size:16px; color:var(--ink); opacity:.72;
  letter-spacing:.04em; display:flex; align-items:center; gap:8px;
}
.cc-win__hint-pulse{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--lime); border:1.5px solid var(--ink);
  animation:cc-pulse 2.4s ease-in-out infinite;
}
@keyframes cc-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* ===== specimen grid ===== */
.cc-win__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); }

/* ===== specimen card (was product card) ===== */
.cc-product-card{
  position:relative; display:block; text-decoration:none;
  background:var(--paper-l);
  border:3px solid var(--ink); box-shadow:var(--sh-md);
  border-radius:var(--r-card); filter:url(#rough);
  transition:transform .18s cubic-bezier(.3,1.5,.5,1), box-shadow .18s;
}
.cc-product-card:nth-child(2){ filter:url(#rough2); }
.cc-product-card:nth-child(3){ filter:url(#rough3); }
.cc-product-card:nth-child(4){ filter:url(#rough2); }
.cc-product-card:hover{ transform:translate(-2px,-4px); box-shadow:var(--sh-hover); }
.cc-product-card:active{ transform:translate(1px,1px); box-shadow:var(--sh-sm); transition-duration:.08s; }
.cc-product-card:focus-visible{ outline:3px solid var(--cer); outline-offset:3px; }

.cc-product-card__header{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:5px 9px; border-bottom:3px solid var(--ink);
}
.cc-product-card__id{
  font-family:'VT323',monospace; font-size:14px; color:var(--paper-l); letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;
  text-shadow:1px 1px 0 rgb(var(--color-brand-black-rgb) / .3);
}
.cc-product-card__image-wrap{ width:100%; position:relative; aspect-ratio:1/1; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cc-product-card__image-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.cc-product-card__meta{ padding:8px 9px 10px; border-top:3px solid var(--ink); background:var(--paper); }
.cc-product-card__name{
  font-family:'Dela Gothic One',sans-serif; font-size:12px; color:var(--ink);
  text-transform:uppercase; letter-spacing:.3px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cc-product-card__bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:5px; gap:6px; }
.cc-product-card__type{ font-family:'VT323',monospace; font-size:14px; color:var(--ink); opacity:.6; }
.cc-product-card__price{ font-family:'VT323',monospace; font-size:18px; color:var(--coral); }

/* ===== printed footer (was status bar) ===== */
.cc-win__statusbar{ background:var(--ink); padding:6px 12px; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.cc-win__status-group{ display:flex; gap:10px; }
.cc-win__status-panel{ font-family:'VT323',monospace; font-size:15px; color:var(--paper-l); letter-spacing:.04em; white-space:nowrap; display:inline-flex; align-items:center; opacity:.9; }
.cc-win__status-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--lime); margin-right:5px; border:1.5px solid var(--paper-l); }

/* unified keyboard focus on every interactive control */
.cc-win__menu-item:focus-visible{ outline:3px solid var(--cer); outline-offset:3px; }

/* ===== responsive ===== */
@media (max-width:760px){
  /* the drawer opens sideways on phones: a scroll-snap rail of big cards,
     next card peeking as the swipe affordance. Scroll container MUST be the
     grid itself (.cc-win__content has no overflow rule; ancestors' hidden
     doesn't block an inner scroller). No JS — degrades to a scrollable row. */
  .cc-win__grid{
    display:flex; gap:14px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:14px;
    -webkit-overflow-scrolling:touch;
    padding:4px 4px 14px;
    scrollbar-width:none;
  }
  .cc-win__grid::-webkit-scrollbar{ display:none; }
  .cc-product-card{ flex:0 0 min(66vw,300px); scroll-snap-align:center; }
  .cc-win__sidebar{ display:none; }
  .cc-win__addr-input{ font-size:14px; }
  .cc-win__menu-item{ min-height:44px; }
}
@media (max-width:560px){
  /* trim the chrome tax: both bars are aria-hidden decoration eating ~90px
     on the smallest screens; title bar + menu bar + hint carry the bit */
  .cc-win__addressbar,
  .cc-win__statusbar{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .cc-feat *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   ALIVE — CARP·OS boot sequence. Pre-states gated on html.cc-alive
   (see carpcore-herbiary.css). Order: titlebar → menubar →
   addressbar → sidebar → hint → cards (stagger via --i, set by
   carpcore-alive.js) → statusbar. ≤560px the address/status bars
   are display:none — the boot still reads via titlebar → menubar
   → hint → cards.
   ============================================================ */
.cc-alive .cc-feat:not(.is-inked) .cc-win__titlebar{opacity:0;translate:0 -8px;}
.cc-alive .cc-feat:not(.is-inked) .cc-win__menubar{opacity:0;}
.cc-alive .cc-feat:not(.is-inked) .cc-win__addressbar{opacity:0;}
.cc-alive .cc-feat:not(.is-inked) .cc-win__sidebar{opacity:0;translate:-8px 0;}
.cc-alive .cc-feat:not(.is-inked) .cc-win__hint{opacity:0;}
.cc-alive .cc-feat:not(.is-inked) .cc-product-card{opacity:0;translate:0 10px;scale:.96;}
.cc-alive .cc-feat:not(.is-inked) .cc-win__statusbar{opacity:0;}

.cc-alive .cc-feat.is-inked .cc-win__titlebar{opacity:1;translate:0 0;
  transition:opacity .16s ease,translate .2s cubic-bezier(.25,1,.4,1);}
.cc-alive .cc-feat.is-inked .cc-win__menubar{opacity:1;transition:opacity .14s ease .1s;}
.cc-alive .cc-feat.is-inked .cc-win__addressbar{opacity:1;transition:opacity .14s ease .18s;}
.cc-alive .cc-feat.is-inked .cc-win__sidebar{opacity:1;translate:0 0;
  transition:opacity .18s ease .22s,translate .22s ease .22s;}
.cc-alive .cc-feat.is-inked .cc-win__hint{opacity:1;transition:opacity .16s ease .26s;}
.cc-alive .cc-feat.is-inked .cc-product-card{opacity:1;translate:0 0;scale:1;
  /* first two entries re-declare the card's own hover/press transition
     so it is not clobbered after entrance */
  transition:transform .18s cubic-bezier(.3,1.5,.5,1),box-shadow .18s,
    opacity .18s ease calc(.3s + var(--i,0)*.05s),
    translate .24s cubic-bezier(.2,1.2,.35,1) calc(.3s + var(--i,0)*.05s),
    scale .24s cubic-bezier(.2,1.2,.35,1) calc(.3s + var(--i,0)*.05s);}
.cc-alive .cc-feat.is-inked .cc-win__statusbar{opacity:1;transition:opacity .14s ease .55s;}

/* one-shot 2-frame CRT flicker as the body powers on */
@keyframes cc-a-crt{0%,100%{opacity:1;}50%{opacity:.55;}}
.cc-alive .cc-feat.is-inked .cc-win__body{animation:cc-a-crt .14s steps(2,jump-none) 1 .24s;}

/* ============================================================
   DIORAMA — subtle mouse-tracked tilt on the card grid, written by
   carpcore-alive.js via the --p custom property on the section.
   ============================================================ */
.cc-alive .cc-feat .cc-win__grid{ perspective:900px; }
.cc-alive .cc-feat .cc-product-card{ rotate:x calc(var(--p,0) * 3deg); }
@media (hover:hover) and (pointer:fine){
  .cc-alive .cc-product-card__image-wrap{ transition:rotate .16s ease-out; }
}