/* store.css — build/store/index.html's own <style>, ported verbatim. */
  /* the factory film behind the store's opening words (full-bleed, operator pick) */
  .act.shero{position:relative;overflow:hidden;padding-block:0;
    min-height:clamp(480px,74vh,860px);display:grid;align-items:end;background:#141210}
  .shero__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .shero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,
    rgba(10,8,6,.18) 0%,rgba(10,8,6,.10) 45%,rgba(12,9,6,.58) 100%)}
  .shero__copy{position:relative;z-index:1;padding-block:0 clamp(40px,7vh,84px);text-align:center}
  .shero__copy .h2{background:none;-webkit-text-fill-color:currentColor;color:#F6EFE3;
    text-shadow:0 2px 28px rgba(0,0,0,.45)}
  .shero__copy .sub{color:rgba(246,239,227,.9);margin-inline:auto;text-shadow:0 1px 18px rgba(0,0,0,.5)}
  @media(max-width:760px){.act.shero{min-height:66vh}}

  /* the bilingual card name, two isolated lines instead of one mirrored mess */
  .pcard .nm-he{display:block}
  .pcard .nm-lat{display:block;direction:ltr;unicode-bidi:isolate;
    font:500 14px/1.4 var(--f);letter-spacing:.055em;color:var(--ink-2);margin-top:3px}

  /* the shelf in a hand: the grid keeps two cards a row, the card keeps its
     glass, its name, its price and its quick add. Only padding and the clamp
     change, so nothing on the desktop shelf is missing from the phone one. */
  @media(max-width:760px){
    .pgrid{gap:12px;margin-top:30px}
    /* the card becomes a column so the price sits on the card's own floor:
       a four-line bilingual name and a two-line one still line their prices up
       across a row, without reserving four empty lines on every short name */
    .pcard{display:flex;flex-direction:column;padding:10px}
    .pcard .ph{flex:0 0 auto}
    .pcard .nm{-webkit-line-clamp:4;min-height:0;margin-top:8px}
    .pcard .pr{margin-top:auto;padding-top:8px}
    .pcard .add{bottom:8px;inset-inline-end:8px}
    .act .sub{margin-top:12px}
  }
  @media(max-width:400px){.pgrid{gap:10px}}

  /* touch has no hover, so the turntable a mouse reveals rides the scroll
     instead: the card nearest the middle of the screen turns, one at a time. */
  @media(hover:none){.pcard.spin-on video{opacity:1}}