/* ==========================================================================
   OLIVER STONE Paris — boutique.css
   Grille produits filtrable (section #boutique), rendue par js/catalogue.js.
   Cartes agrandies, alignées à gauche, sans étiquette de collection visible
   (.card-col est masquée sur la grille, réutilisée dans la modale produit).
   ========================================================================== */
.shop{padding:100px 0;background:var(--ivoire)}
.shop-head{text-align:center;margin-bottom:48px}
.shop-head h2{font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:.05em}
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.filter{padding:11px 22px;border:1px solid var(--ligne);border-radius:100px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);background:var(--blanc);transition:all var(--tr);min-height:44px}
.filter.on{background:var(--noir);color:#fff;border-color:var(--noir)}
.filter:hover:not(.on){border-color:var(--or);color:var(--or)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 14px}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr);gap:40px 26px}}
@media(min-width:1080px){.grid{grid-template-columns:repeat(4,1fr);gap:48px 30px}}
.card{background:transparent;display:flex;flex-direction:column;text-align:left;min-width:0}
.card-img{position:relative;display:block;width:100%;height:0;padding:0 0 100% 0;background:#F6F4F1;border:none;overflow:hidden;-webkit-appearance:none;appearance:none;border-radius:0;cursor:pointer}
.card-img img{position:absolute;top:9%;left:9%;width:82%;height:82%;object-fit:contain}
.card-img img{transition:transform .45s cubic-bezier(.4,0,.2,1)}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:14px 2px 6px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:1}
.card-name{order:1}.card-price{order:2}.card-mat{order:3;display:block}.card-add{order:4}
.card-col{display:none;font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--or)}
.card-name{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--encre)}
.card-mat{font-size:.68rem;color:var(--gris);letter-spacing:.06em;line-height:1.6}
.card-price{margin-top:0;font-size:.8rem;letter-spacing:.08em;color:var(--encre)}
.card-add{margin:6px 0 0;padding:10px 2px;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--encre);border-bottom:1px solid var(--encre);transition:all var(--tr);min-height:44px}
.card-add:hover{color:var(--or);border-color:var(--or)}
@media(min-width:1080px){
  .card-add{opacity:0;transform:translateY(4px)}
  .card:hover .card-add,.card-add:focus-visible{opacity:1;transform:none}
}
.hide{display:none!important}