/* =========================================================================
   ez-stylecards-v2.css — the in-row style band.

   TWO LAYOUTS, ONE DOM.

     Desktop (>768px)   three cards ACROSS, cutout above name. Unchanged in
                        shape from the version that read correctly in a
                        1360px table: the chosen card grows, the others
                        shrink and recede.

     Phone (<=768px)    a vertical STACK, cutout left / name + description
                        right, chosen card holding its position and taking
                        most of the field.

   Why the split: 3-across works at 340px of table column but collapses to
   ~110px per card on a ~330px phone card — icons, not product photography.
   The constraint is WIDTH, so extra height fixes nothing. Stacked, every card
   gets the full width. Desktop never had that problem and keeps its band.

   Requires walker_tokens.css.
   ========================================================================= */

.ez-sc, .ez-sc *{box-sizing:border-box;}

/* =========================================================================
   DESKTOP — three across
   ========================================================================= */
.ez-sc{
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  justify-content:center;
  gap:0;
  height:158px;
  width:100%;
  font-family:var(--sans);
}

.ez-sc-item{
  position:relative;
  flex:1 1 0%;
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:0;
  padding:0 5px;
  cursor:pointer;
  border:0;
  background:none;
  text-align:center;
  font-family:inherit;
  transition:flex-grow .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}

.ez-sc-item img{
  max-width:100%;
  max-height:104px;
  width:auto;
  object-fit:contain;
  filter:saturate(.92) opacity(.66) drop-shadow(0 6px 12px rgba(22,33,44,.22));
  transition:filter .4s ease, transform .45s ease, max-height .4s ease;
  transform-origin:50% 100%;
  pointer-events:none;
  /* stable transparent GPU layer, so the growing drop-shadow region doesn't
     paint a one-frame black backing on focus (Chrome) */
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}

.ez-sc-text{display:flex; flex-direction:column; min-width:0;}

.ez-sc-name{
  margin-top:7px;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-soft);
  white-space:nowrap;
  opacity:.62;
  transition:opacity .3s ease, color .3s ease;
}

/* The sentence has nowhere to go under a ~110px desktop card without
   wrapping to four lines. It earns its place in the phone stack, where it
   sits BESIDE the art. */
.ez-sc-desc{display:none;}

/* chosen */
.ez-sc-item.is-on{flex-grow:3.4;}
.ez-sc-item.is-on img{
  max-height:132px;
  filter:saturate(1) opacity(1) drop-shadow(0 14px 20px rgba(22,33,44,.34));
  transform:scale(1.02);
}
.ez-sc-item.is-on .ez-sc-name{opacity:1; color:var(--accent-deep); font-weight:600;}
.ez-sc.has-selection .ez-sc-item:not(.is-on){opacity:.8;}

/* hover previews the choice without committing */
.ez-sc-item:hover img,
.ez-sc-item:focus-visible img{
  filter:saturate(1) opacity(1) drop-shadow(0 12px 18px rgba(22,33,44,.32));
}
.ez-sc-item:hover .ez-sc-name,
.ez-sc-item:focus-visible .ez-sc-name{opacity:1; color:var(--accent-deep);}
.ez-sc.has-selection .ez-sc-item:not(.is-on):hover{opacity:1;}
.ez-sc-item:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}

/* Row fully filled: the band has done its job. Recede, don't hide — the
   choice stays visible and changeable. */
.ez-sc.is-done{opacity:.62;}
.ez-sc.is-done:hover{opacity:1;}

/* helper ring — easyorder-v2.css puts .ez-actionable on the <select>; with
   that hidden, the ring lands on the band instead */
.ez-sc.ez-actionable{border-radius:10px; animation:ez-breathe 2.2s ease-in-out infinite;}

/* No cutout resolved: a legible word beats an empty slot. */
.ez-sc-item.is-bare img{display:none;}
.ez-sc-item.is-bare .ez-sc-name{
  opacity:1; white-space:normal;
  padding:12px 8px; border:1px solid var(--hairline); border-radius:6px;
  background:var(--panel);
}
.ez-sc-item.is-bare.is-on .ez-sc-name{border-color:var(--accent); color:var(--accent-deep);}

/* The canonical control. Removed from interaction entirely — visible and
   focusable would double every style up as a tab stop — while remaining a
   form value. Same treatment as .ez-hidden-source. */
.ez-sc-source{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* =========================================================================
   PHONE (<=768px) — a vertical stack, cards in DOM order

   Nothing here reorders. The chosen card grows in place; the other two
   shrink and drop their descriptions. An earlier version pulled the chosen
   card to the centre with `order:var(--sc-order)` and it displaced the other
   two under the thumb that had just tapped — see the note in
   ez-stylecards-v2.js.
   ========================================================================= */
@media (max-width:768px){
  .ez-sc{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    height:auto;
    gap:3px;
  }

  .ez-sc-item{
    flex:0 0 auto;
    height:auto;
    min-height:76px;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    padding:8px;
    text-align:left;
    border:1px solid transparent;
    border-radius:8px;
    transition:min-height .38s cubic-bezier(.22,.61,.36,1),
               background .25s ease, border-color .25s ease, opacity .25s ease;
  }

  .ez-sc-item img{
    flex:0 0 104px;
    width:104px;
    max-height:64px;
    /* At this size the art IS the information — a dimmed 104px thumbnail on
       white reads as broken rather than recessive, so unselected cards stay
       at full strength and recede through size and surrounding weight. */
    filter:drop-shadow(0 4px 9px rgba(22,33,44,.22));
    transform:none;
    transition:flex-basis .38s cubic-bezier(.22,.61,.36,1),
               width .38s cubic-bezier(.22,.61,.36,1),
               max-height .38s cubic-bezier(.22,.61,.36,1);
  }

  .ez-sc-name{
    margin-top:0;
    opacity:1;
    font-size:12px;
    white-space:normal;
  }
  /* room beside the art, so the description finally earns its place */
  .ez-sc-desc{
    display:-webkit-box;
    margin-top:3px;
    font-size:12.5px;
    line-height:1.4;
    color:var(--ink-soft);
    opacity:.85;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* chosen: in place, and most of the field */
  .ez-sc-item.is-on{
    flex-grow:0;
    min-height:136px;
    background:var(--accent-tint);
    border-color:var(--accent-line);
  }
  .ez-sc-item.is-on img{
    flex-basis:148px; width:148px; max-height:112px;
    transform:none;
    filter:drop-shadow(0 10px 16px rgba(22,33,44,.3));
  }
  .ez-sc-item.is-on .ez-sc-name{font-size:13px;}
  .ez-sc-item.is-on .ez-sc-desc{-webkit-line-clamp:4; opacity:1;}

  /* the other two step back once something is chosen */
  .ez-sc.has-selection .ez-sc-item:not(.is-on){min-height:62px; opacity:.75;}
  .ez-sc.has-selection .ez-sc-item:not(.is-on) img{flex-basis:82px; width:82px; max-height:52px;}
  .ez-sc.has-selection .ez-sc-item:not(.is-on) .ez-sc-desc{display:none;}

  .ez-sc-item:hover{background:var(--panel); border-color:var(--hairline);}
  .ez-sc-item.is-on:hover{background:var(--accent-tint); border-color:var(--accent-line);}
  .ez-sc-item.is-bare{border-color:var(--hairline); background:var(--panel);}
  .ez-sc-item.is-bare .ez-sc-name{padding:0; border:0; background:none;}
}

@media (max-width:400px){
  /* the cutout column yields so the description keeps a readable measure */
  .ez-sc-item img{flex-basis:86px; width:86px; max-height:54px;}
  .ez-sc-item.is-on{min-height:120px;}
  .ez-sc-item.is-on img{flex-basis:120px; width:120px; max-height:92px;}
  .ez-sc-name{font-size:11px; letter-spacing:.1em;}
  .ez-sc-desc{font-size:12px;}
}

@media (prefers-reduced-motion:reduce){
  .ez-sc-item, .ez-sc-item img, .ez-sc-name{transition:none;}
  .ez-sc.ez-actionable{animation:none; outline:2px solid var(--accent); outline-offset:3px;}
}