/* ═══════════════════════════════════════════════════════════
   SONDER — shop, product page, bag & favourites
   Extends the design tokens declared in main.css.
   ═══════════════════════════════════════════════════════════ */
[hidden]{display:none!important}

/* ── heart on a card ───────────────────────────────────── */
.cell{position:relative}
.card-fav{
  position:absolute;top:.9rem;right:.9rem;z-index:6;
  height:3.4rem;width:3.4rem;display:grid;place-items:center;
  background:rgba(255,249,247,.82);border-radius:50%;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transform:scale(.8);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .3s;
}
.card-fav svg{height:1.7rem;width:1.7rem;fill:none;stroke:var(--black);stroke-width:1.6;transition:fill .3s,stroke .3s}
.cell:hover .card-fav,
.card-fav:focus-visible{opacity:1;transform:scale(1)}
.card-fav:hover{background:#fff}
.card-fav:hover svg{stroke:var(--red)}
/* once saved the heart stays visible, filled, on every breakpoint */
.card-fav.is-on{opacity:1;transform:scale(1)}
.card-fav.is-on svg{fill:var(--red);stroke:var(--red)}
.card-fav.pop{animation:fav-pop .42s var(--ease)}
@keyframes fav-pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
/* touch devices have no hover — always show the affordance */
@media (hover:none){.card-fav{opacity:1;transform:scale(1)}}

/* card image crossfade + drag affordance */
.arrivals-card__alt{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.arrivals-card:hover .arrivals-card__alt{opacity:1}
.arrivals-card__best--sale{background:var(--black)}
.arrivals-section__group.is-dragging,
.categories-section__inner.is-dragging{cursor:grabbing}
.arrivals-section__group:focus-visible{outline:1px solid var(--red);outline-offset:1rem}
.cursor::before{transition:transform .3s var(--ease)}
.cursor.is-down::before{transform:rotate(-8deg) scale(.72)}

/* ── 05 · SHOP ─────────────────────────────────────────── */
.shop-section{padding:9rem 0 8rem;position:relative;z-index:6;background:var(--bg)}
.shop-section__head{align-items:baseline;display:flex;gap:2rem;justify-content:space-between;margin-bottom:2.8rem}
.shop-section__count{color:var(--red);font-family:var(--mono);font-size:1.3rem;letter-spacing:-.07rem;text-transform:uppercase}
/* women / men segmented control */
.shop-section__genders{display:flex;gap:.6rem;margin-bottom:1.6rem}
.shop-section__genders button{
  border:1px solid var(--black);font-size:1.5rem;font-weight:600;line-height:1;
  padding:1rem 2rem;text-transform:uppercase;
  transition:background .3s,color .3s;
}
.shop-section__genders button:hover{background:var(--red-1)}
.shop-section__genders button.is-on{background:var(--black);color:#fff}
.shop-section__genders button.is-on:hover{background:var(--black)}

.shop-section__filters{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:4.4rem}
.shop-section__filters button{
  align-items:baseline;border:1px solid var(--red-1);display:flex;font-size:1.6rem;font-weight:600;gap:.5rem;
  line-height:1;padding:1rem 1.4rem;text-transform:uppercase;
  transition:background .3s,color .3s,border-color .3s;
}
.shop-section__filters button:hover{border-color:var(--black)}
.shop-section__filters button.is-on{background:var(--black);border-color:var(--black);color:#fff}
.shop-section__filters button i{font-family:var(--mono);font-size:1rem;font-style:normal;letter-spacing:-.05rem;opacity:.55}
.shop-section__grid{display:grid;gap:3rem 1.2rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.shop-section__grid{grid-template-columns:repeat(3,1fr);gap:3.4rem 1.4rem}}
@media (min-width:1024px){.shop-section__grid{grid-template-columns:repeat(4,1fr)}}
.shop-card{cursor:pointer}
.shop-section__foot{margin-top:5rem;text-align:center}
.shop-section__more{display:inline-block}
.shop-section__none{font-family:var(--sans);font-size:1.3rem;text-transform:uppercase;opacity:.6}

/* anchor jumps must clear the fixed header */
#shop,#categories,#arrivals,#best,#motion{scroll-margin-top:11rem}

/* ── PRODUCT PAGE ──────────────────────────────────────── */
/* full overlay treatment — this element is not covered by the
   .menu/.panel/.popup/.signup base rule in main.css */
.product{
  position:fixed;inset:0;z-index:2100;
  display:flex;align-items:center;justify-content:center;
  visibility:hidden;opacity:0;
  transition:opacity .45s var(--ease),visibility .45s;
}
.product.is-open{visibility:visible;opacity:1}
.product__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.product__inner{
  background:var(--bg);display:flex;flex-direction:column;height:100%;overflow-y:auto;
  position:relative;width:100%;
  transform:translateY(2rem);transition:transform .5s var(--ease);
}
.product.is-open .product__inner{transform:translateY(0)}
.product__close{position:absolute;right:1.6rem;top:1.6rem;z-index:5;background:var(--bg)}
@media (min-width:1024px){
  .product__inner{flex-direction:row;height:min(86rem,92vh);width:min(126rem,94vw)}
  .product__close{right:2.4rem;top:2.4rem}
}
.product__gallery{background:var(--red-1);flex-shrink:0;width:100%}
@media (min-width:1024px){.product__gallery{display:flex;flex-direction:column;height:100%;width:52%}}
.product__main{aspect-ratio:3/4;overflow:hidden;width:100%}
@media (min-width:1024px){.product__main{aspect-ratio:auto;flex:1;min-height:0}}
.product__main img{height:100%;object-fit:cover;width:100%}
.product__thumbs{display:flex;gap:.8rem;padding:.8rem}
.product__thumbs button{aspect-ratio:3/4;display:block;opacity:.5;overflow:hidden;transition:opacity .3s;width:7rem}
.product__thumbs button.is-on,.product__thumbs button:hover{opacity:1}
.product__thumbs img{height:100%;object-fit:cover;width:100%}
.product__info{display:flex;flex-direction:column;gap:2.2rem;padding:3.2rem 1.6rem 4rem}
@media (min-width:768px){.product__info{padding:3.2rem}}
@media (min-width:1024px){.product__info{flex:1;overflow-y:auto;padding:6rem 4rem 4rem}}
.product__cat{color:var(--red);font-family:var(--mono);font-size:1.2rem;letter-spacing:-.06rem;text-transform:uppercase}
.product__name{font-size:5.4rem;font-weight:800;line-height:.86;text-transform:uppercase}
@media (min-width:1024px){.product__name{font-size:7rem}}
.product__prices{align-items:baseline;display:flex;gap:1rem}
.product__price{font-family:var(--mono);font-size:1.8rem;font-weight:500;letter-spacing:-.09rem}
.product__price--sale{opacity:.5;text-decoration:line-through}
.product__price--base{color:var(--red)}
.product__desc{font-family:var(--sans);font-size:1.4rem;line-height:2rem;max-width:46rem}
.product__block{display:flex;flex-direction:column;gap:1rem}
.product__label{font-size:1.8rem;font-weight:800;text-transform:uppercase}
.product__label i{font-family:var(--mono);font-size:1.1rem;font-style:normal;font-weight:400;letter-spacing:-.05rem;opacity:.6}
.product__sizes{display:flex;flex-wrap:wrap;gap:.6rem}
.product__sizes button{
  border:1px solid var(--red-1);font-size:1.5rem;font-weight:600;min-width:5.4rem;padding:1.1rem .8rem;
  text-align:center;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s;
}
.product__sizes button:hover{border-color:var(--black)}
.product__sizes button.is-on{background:var(--black);border-color:var(--black);color:#fff}
.product__sizes.needs-pick button{animation:size-nudge .5s;border-color:var(--red)}
@keyframes size-nudge{25%{transform:translateX(-.4rem)}75%{transform:translateX(.4rem)}}
.product__colour{font-family:var(--mono);font-size:1.4rem;letter-spacing:-.07rem;text-transform:uppercase}
.product__qty{align-items:center;border:1px solid var(--red-1);display:flex;width:max-content}
.product__qty button{font-size:2rem;height:4.6rem;line-height:1;transition:background .25s;width:4.6rem}
.product__qty button:hover{background:var(--red-1)}
.product__qty span{font-family:var(--mono);font-size:1.5rem;min-width:4rem;text-align:center}
.product__actions{display:flex;flex-direction:column;gap:1.2rem}
.product__fav{
  border-bottom:1px solid currentColor;font-family:var(--mono);font-size:1.2rem;letter-spacing:-.06rem;
  padding-bottom:.4rem;text-transform:uppercase;transition:color .3s;width:max-content;
}
.product__fav:hover,.product__fav.is-on{color:var(--red)}
.product__details{display:flex;flex-direction:column;font-family:var(--sans);font-size:1.3rem;gap:.6rem;line-height:1.7rem}
.product__details li{padding-left:1.4rem;position:relative}
.product__details li::before{content:"\2014";left:0;position:absolute}

/* ── BAG / FAVOURITES LINES ────────────────────────────── */
.line-list{display:flex;flex-direction:column;gap:2rem;margin-bottom:3rem}
.line{display:grid;gap:1.4rem;grid-template-columns:8rem 1fr auto}
.line__img{aspect-ratio:3/4;background:var(--red-1);display:block;overflow:hidden}
.line__img img{height:100%;object-fit:cover;width:100%}
.line__body{display:flex;flex-direction:column;gap:.5rem}
.line__name{font-size:2rem;font-weight:800;line-height:1;text-transform:uppercase}
.line__meta{font-family:var(--mono);font-size:1.1rem;letter-spacing:-.05rem;opacity:.6;text-transform:uppercase}
.line__qty{align-items:center;border:1px solid var(--red-1);display:flex;margin-top:auto;width:max-content}
.line__qty button{font-size:1.6rem;height:3.2rem;line-height:1;transition:background .25s;width:3.2rem}
.line__qty button:hover{background:var(--red-1)}
.line__qty span{font-family:var(--mono);font-size:1.3rem;min-width:3rem;text-align:center}
.line__end{align-items:flex-end;display:flex;flex-direction:column;justify-content:space-between}
.line__price{font-family:var(--mono);font-size:1.4rem;letter-spacing:-.07rem}
.line__remove{font-family:var(--mono);font-size:1.1rem;letter-spacing:-.05rem;opacity:.6;text-transform:uppercase;transition:color .3s,opacity .3s}
.line__remove:hover{color:var(--red);opacity:1}
.panel__foot{border-top:1px solid var(--red-1);display:flex;flex-direction:column;gap:1.4rem;padding-top:2.4rem}
.panel__row{align-items:baseline;display:flex;font-size:2.4rem;font-weight:800;justify-content:space-between;text-transform:uppercase}
.panel__row span:last-child{font-family:var(--mono);font-size:1.8rem;font-weight:500;letter-spacing:-.09rem}
.panel__note{font-family:var(--sans);font-size:1.2rem;opacity:.6;text-transform:uppercase}
.panel--cart .container,.panel--fav .container{display:flex;flex-direction:column;min-height:100%}
.panel__popular{display:grid;gap:1.6rem 1.2rem;grid-template-columns:1fr 1fr}