/*
Boutique SNY Worldwide — CSS du template Elementor "Archive des produits" (#5819).
Chargé uniquement sur is_shop() / is_product_category() / is_product_taxonomy()
(voir functions.php). Toutes les règles sont scopées sous .sny-shop.
*/
:root{
  --ink:      #12172B;
  --sand:     #F1EAD9;
  --paper:    #FAF6EE;
  --gold:     #B8963F;
  --ember:    #A8471F;
  --ink-70:   rgba(18,23,43,.7);
  --ink-40:   rgba(18,23,43,.4);
  --line:     rgba(18,23,43,.12);
  --radius:   2px;
  --shadow:   0 20px 60px -25px rgba(18,23,43,.35);
}
/* !important nécessaire : le container Elementor applique sa propre règle
   ":is(.elementor-section-wrap,[data-elementor-id]) > .e-con { max-width:min(100%,var(--width)) }"
   qui est plus spécifique que .sny-shop seul et écraserait sinon la largeur de la maquette. */
.sny-shop{
  max-width:1360px !important;margin:0 auto;padding:0 clamp(16px,4vw,48px) 90px;
  background:#fff;color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;
}
.sny-shop *{box-sizing:border-box;}
.sny-shop img{max-width:100%;display:block;}

.sny-shop .eyebrow{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ember);display:flex;align-items:center;gap:10px;
}
.sny-shop .eyebrow::before{content:'';width:22px;height:1px;background:var(--ember);}

/* ================= HERO BOUTIQUE ================= */
.sny-shop .shop-hero{padding:52px 0 30px;max-width:760px;}
.sny-shop .shop-hero h1{
  font-family:'Fraunces',serif;font-weight:600;font-size:clamp(40px,6vw,72px);
  line-height:.95;letter-spacing:-.01em;margin:14px 0 16px;color:var(--ink);
}
.sny-shop .shop-hero p{font-size:15.5px;line-height:1.7;color:var(--ink-70);max-width:56ch;margin:0;}

/* ================= COLLECTION REEL (catégories réelles) ================= */
.sny-shop .reel-wrap{padding:14px 0 30px;border-bottom:1px solid var(--line);margin-bottom:36px;}
.sny-shop .reel{display:flex;gap:24px;overflow-x:auto;padding:6px 2px 8px;scrollbar-width:none;}
.sny-shop .reel::-webkit-scrollbar{display:none;}
.sny-shop .reel-item{flex:0 0 auto;text-align:center;}
.sny-shop .reel-item a{text-decoration:none;color:inherit;display:block;}
.sny-shop .reel-ring{
  width:82px;height:82px;border-radius:50%;padding:3px;
  background:conic-gradient(from 210deg, var(--gold), var(--ember), var(--gold));
  transition:transform .25s ease;
}
.sny-shop .reel-item.is-active .reel-ring{background:var(--ink);}
.sny-shop .reel-item:hover .reel-ring{transform:scale(1.06);}
.sny-shop .reel-thumb{width:100%;height:100%;border-radius:50%;border:2.5px solid var(--sand);background-size:cover;background-position:center;}
.sny-shop .reel-label{display:block;margin-top:9px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-70);font-family:'Space Mono',monospace;}

/* ================= FILTER BAR ================= */
.sny-shop .filter-bar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:34px;
}
.sny-shop .filters{display:flex;gap:10px;flex-wrap:wrap;}
.sny-shop .f-pill{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:0 18px;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:100px;background:var(--paper);
  cursor:pointer;color:var(--ink-70);transition:all .2s ease;text-decoration:none;
}
.sny-shop .f-pill.active{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.sny-shop .f-pill:hover{border-color:var(--ink);}
.sny-shop .sort{font-size:13px;color:var(--ink-70);display:flex;align-items:center;gap:8px;}
.sny-shop .sort select{
  font-family:'Inter',sans-serif;border:1px solid var(--line);background:var(--paper);
  border-radius:100px;padding:8px 14px;font-size:13px;color:var(--ink);cursor:pointer;
}

/* ================= GRID — cover + produits ================= */
.sny-shop .shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.sny-shop .p-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;position:relative;
  box-shadow:0 12px 30px -22px rgba(18,23,43,.3);transition:transform .3s ease;
}
.sny-shop .p-card:hover{transform:translateY(-4px);}
.sny-shop .p-card a.p-link{color:inherit;text-decoration:none;display:block;}
.sny-shop .p-media{aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--ink);}
.sny-shop .p-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.sny-shop .p-card:hover .p-media img{transform:scale(1.06);}
.sny-shop .badge{
  position:absolute;top:14px;left:14px;background:var(--paper);color:var(--ink);
  font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;display:flex;align-items:center;gap:6px;z-index:2;
}
/* Texte encre (pas paper) sur le badge doré : paper sur gold ne passe pas le contraste
   WCAG AA (2.6:1) ; ink sur gold passe largement (6.3:1). */
.sny-shop .badge.gold{background:var(--gold);color:var(--ink);}
/* Bouton "Ajouter au panier" — posé dans la zone blanche, juste au-dessus du titre,
   sans jamais le recouvrir.
   !important nécessaire : la règle ".woocommerce a.button, ..." du thème Inspiro
   (border-radius:3px, padding:12px 17px, font-family:Onest) est plus spécifique
   que .sny-shop .add_to_cart_button et écraserait sinon le style pilule voulu. */
.sny-shop .quick-add,
.sny-shop .add_to_cart_button{
  display:flex !important;align-items:center;justify-content:center;gap:8px;
  width:100% !important;height:44px !important;
  padding:0 !important;border:none !important;border-radius:100px !important;
  background:var(--ink) !important;color:var(--paper) !important;
  font-family:'Inter',sans-serif !important;font-weight:600 !important;font-size:12.5px !important;
  letter-spacing:.02em;cursor:pointer;
  transition:background .2s ease, transform .25s ease, box-shadow .2s ease, opacity .25s ease;
  text-align:center;line-height:normal !important;text-decoration:none !important;
  margin:0 0 14px !important;box-sizing:border-box;
}
/* Révélé au survol de la carte, uniquement sur les appareils avec un vrai curseur (souris) :
   sur tactile (pas de hover fiable), le bouton reste toujours visible pour rester utilisable. */
@media (hover:hover) and (pointer:fine){
  .sny-shop .quick-add,
  .sny-shop .add_to_cart_button{
    opacity:0;transform:translateY(6px);pointer-events:none;
  }
  .sny-shop .p-card:hover .quick-add,
  .sny-shop .p-card:hover .add_to_cart_button,
  .sny-shop .p-card:focus-within .quick-add,
  .sny-shop .p-card:focus-within .add_to_cart_button{
    opacity:1;transform:translateY(0);pointer-events:auto;
  }
}
.sny-shop .quick-add:hover,
.sny-shop .add_to_cart_button:hover{
  background:var(--ember) !important;transform:translateY(-2px);
  box-shadow:0 8px 16px -6px rgba(168,71,31,.5);
}
.sny-shop .quick-add:active,
.sny-shop .add_to_cart_button:active{transform:translateY(0);}
.sny-shop .p-info{padding:18px 4px 4px;position:relative;}
.sny-shop .p-title-link{color:inherit;text-decoration:none;display:block;}
.sny-shop .p-info .name{font-family:'Fraunces',serif;font-weight:600;font-size:17px;margin:0 0 6px;}
.sny-shop .p-info .meta{display:flex;justify-content:space-between;align-items:center;}
.sny-shop .p-info .price{font-size:14.5px;color:var(--ink-70);}
.sny-shop .p-info .price ins{text-decoration:none;}
.sny-shop .p-info .price del{opacity:.5;font-size:.85em;margin-right:4px;}
.sny-shop .p-info .gender{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ember);}

.sny-shop .p-card.cover{grid-column:span 2;grid-row:span 2;}
.sny-shop .p-card.cover .p-media{aspect-ratio:auto;height:100%;min-height:520px;}
.sny-shop .p-card.cover .p-info{padding:16px 4px 4px;}

/* ================= ACCESSIBILITÉ — focus clavier visible ================= */
.sny-shop a:focus-visible,
.sny-shop button:focus-visible,
.sny-shop select:focus-visible,
.sny-shop input:focus-visible{
  outline:2px solid var(--ember);outline-offset:2px;border-radius:4px;
}
.sny-shop .reel-item a:focus-visible .reel-ring{transform:scale(1.06);}

/* ================= LOAD MORE ================= */
.sny-shop .load-more{display:flex;justify-content:center;margin-top:52px;}
.sny-shop .load-more button{
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 36px;border:1px solid var(--ink);border-radius:100px;background:transparent;color:var(--ink);
  cursor:pointer;transition:all .2s ease;
}
.sny-shop .load-more button:hover{background:var(--ink);color:var(--paper);}
.sny-shop .load-more button:disabled{opacity:.4;cursor:default;}

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .sny-shop .shop-grid{grid-template-columns:repeat(3,1fr);}
  .sny-shop .p-card.cover{grid-column:span 3;grid-row:span 1;}
  .sny-shop .p-card.cover .p-media{min-height:340px;}
}
@media (max-width:720px){
  .sny-shop .shop-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .sny-shop .p-card.cover{grid-column:span 2;}
  .sny-shop .p-card.cover .p-media{min-height:260px;}
  .sny-shop .p-card.cover .p-info .name{font-size:20px;}
  .sny-shop .filter-bar{flex-direction:column;align-items:flex-start;}
  .sny-shop .quick-add,
  .sny-shop .add_to_cart_button{display:none;}
}
@media (max-width:420px){
  .sny-shop .reel-ring{width:66px;height:66px;}
  .sny-shop .p-info .name{font-size:14.5px;}
}