/* Eclatsac Classic: the bag on every page (drawer) and wherever bag lines show (bag page). Drawn by snippets/cart-line.liquid
   and assets/bag.js; rewards bar, totals, coupon box and suggestion cards are styled in site.css. */

/* a line being saved: soft pulse, no jump */
.line.is-busy .line__top .price,.line.is-busy .qty output{opacity:.55;transition:opacity .25s}
.line .line__img{position:relative}
.line--bundle .line__img .stack{border-radius:inherit}
.line--bundle .stack__card{width:70%;border-width:2px}
.line__deal--code{color:var(--ink)}
.line__deal--code .ico{color:var(--gold-ink)}
.line__pieces{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.line__pieces a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;font-size:13px;line-height:1.3;transition:color .3s}
.line__pieces a:hover{color:var(--gold-ink)}
.line__pieces .pic{position:relative;width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--paper)}
.line__pieces .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.line__pieces small{display:block;font-size:12px;color:var(--stone)}
.line__sep{font-size:12px;color:var(--stone)}
.line__sep del{margin-left:4px}
.line__bottom{flex-wrap:wrap;row-gap:4px}
.line__max{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);animation:riseIn .4s var(--ease)}
.line__remove{margin-left:auto}

/* drawer: rewards on top, lines, then "Complete your bag" */
.drawer__rewards{padding-top:16px}
.drawer__rewards[hidden]{display:none}
.drawer__suggest .sg{padding-top:18px}
.drawer__links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.drawer__links button{background:none;border:0;cursor:pointer;font:inherit}
.drawer .sums__note:empty,.sums__note:empty{display:none}
/* the drawer keeps its foot short (pieces stay visible): the delivery sentence is on the bag page and at checkout */
.drawer__foot [data-s-dnote]{display:none}

/* suggestion rows can be dragged with a mouse */
.sg__row.is-drag{scroll-snap-type:none;cursor:grabbing}
.sg__row.is-drag a{pointer-events:none}
.sg__row{cursor:grab}
@media (pointer:coarse){ .sg__row{cursor:auto} }

@keyframes bagBump{40%{transform:scale(1.35)}}
.tool__count.bump{animation:bagBump .5s var(--spring)}
@media (prefers-reduced-motion:reduce){ .line__max{animation:none} }

/* narrow phones: the price sits under the name so names do not break into one word per line */
@media (max-width:420px){
  .line{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .line__top{flex-direction:column;align-items:flex-start;gap:2px}
  .line__name{font-size:19px}
  #cart-drawer .drawer__head,#cart-drawer .drawer__body,#cart-drawer .drawer__foot{padding-left:18px;padding-right:18px}
  .qty{height:40px}
  .qty button{width:36px}
}