/*
Theme Name: MRSUPER16
Theme URI: https://mrsuper16.com
Author: MRSUPER16
Description: Thème sur mesure pour la boutique MRSUPER16 — vêtements homme streetwear. Design fond noir et accent rouge vif, logo impactant, page boutique affichée directement en page d'accueil (sans page d'accueil séparée), en-tête sans catégories, bouton WhatsApp flottant clignotant.
Version: 1.0
Requires PHP: 7.4
Text Domain: mrsuper16
*/

:root{
  --bg:#0A0A0A;
  --bg-alt:#161616;
  --ink:#F2F2F2;
  --ink-soft:#9A9A9A;
  --accent:#E8121F;
  --accent-soft:#FF5C5C;
  --accent-deep:#A50D16;
  --line:#2A2A2A;
  --card-bg:#121212;
  --radius:10px;
  --shadow: 0 8px 24px rgba(232,18,31,0.18);
}

*{box-sizing:border-box;}
html{ background:var(--bg); }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  margin:0;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }

/* ---------- Fond texture discrète (bandes diagonales, esprit street) ---------- */
.leaf-texture{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:0.035;
  background-image: repeating-linear-gradient(
    45deg,
    var(--accent) 0,
    var(--accent) 1px,
    transparent 1px,
    transparent 26px
  );
}

/* ---------- Barre de choix de langue (tout en haut de la page) ---------- */
.lang-bar{
  position:sticky; top:0; z-index:21;
  background:var(--accent);
  padding:6px 20px;
  display:flex; justify-content:center;
}
.lang-switch{
  display:flex; gap:6px;
}
.lang-switch a{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.03em;
  padding:3px 12px;
  border-radius:999px;
  border:1px solid rgba(10,10,10,0.35);
  color:#0A0A0A;
  transition: background .2s ease, color .2s ease;
}
.lang-switch a.active{
  background:#0A0A0A;
  color:var(--accent);
  border-color:#0A0A0A;
}
.lang-switch a:not(.active):hover{ background:rgba(10,10,10,0.15); }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:20;
  background:rgba(10,10,10,0.92);
  backdrop-filter: blur(6px);
  border-bottom:2px solid var(--accent);
  padding: 18px 24px 14px;
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1180px; margin:0 auto;
}
.socials{ display:flex; gap:14px; align-items:center; }
.socials a{
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  border:1px solid var(--line);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.socials a:hover{ background:var(--accent); color:#0A0A0A; border-color:var(--accent); transform:translateY(-1px); }
.socials svg{ width:16px; height:16px; }

.logo-wrap{ text-align:center; }
.logo{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(30px, 4.4vw, 42px);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink);
  display:inline-block;
}
.logo .num{ color:var(--accent); }
.tagline{
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:2px;
  font-weight:600;
}
.header-spacer{ width:100px; }

/* ---------- Intro (pas de hero, direct boutique) ---------- */
.intro-strip{
  text-align:center;
  padding: 26px 20px 6px;
  max-width:640px;
  margin:0 auto;
}
.intro-strip p{
  font-family:'Work Sans', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:13px;
  color:var(--accent);
  font-weight:700;
}

/* ---------- Grille produits ---------- */
.shop{
  max-width:1180px;
  margin: 0 auto;
  padding: 28px 24px 90px;
  position:relative; z-index:1;
}
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px 16px;
}
.card{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 12px 14px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:var(--accent);
}
.card-media{
  width:100%; aspect-ratio:1/1;
  background:var(--bg-alt);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  margin-bottom:10px;
}
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-media svg{ width:52%; height:52%; }
.card h3{
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:13.5px;
  text-transform:uppercase;
  letter-spacing:0.01em;
  color:var(--ink);
  margin:0 0 4px;
}
.card .price,
.card .woocommerce-Price-amount{
  font-size:14px !important;
  color:var(--accent) !important;
  font-weight:700;
}
.card .price{ margin-bottom:10px; display:block; }
.card del .woocommerce-Price-amount{ color:var(--ink-soft) !important; opacity:.7; }

/* Bouton "Ajouter au panier" WooCommerce restylé */
.card a.button,
.card .add_to_cart_button{
  font-size:11.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--accent) !important;
  border:1px solid var(--accent);
  background:transparent !important;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  transition: background .2s ease, color .2s ease;
  width:100%;
  display:inline-block;
  font-weight:600;
}
.card a.button:hover{ background:var(--accent) !important; color:#0A0A0A !important; }

/* ---------- Footer ---------- */
footer{
  background:var(--bg-alt);
  color:var(--ink);
  padding: 34px 24px 24px;
  position:relative; z-index:1;
  border-top:2px solid var(--accent);
}
.footer-inner{
  max-width:1180px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
}
.footer-logo{ font-family:'Anton', sans-serif; font-size:24px; letter-spacing:0.04em; text-transform:uppercase; }
.footer-tag{ font-size:12.5px; color:var(--ink-soft); max-width:360px; }
.footer-socials{ display:flex; gap:12px; }
.footer-socials a{
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-socials a:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.footer-socials svg{ width:15px; height:15px; }
.copyright{ font-size:11px; color:var(--ink-soft); margin-top:6px; }

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  display:flex; flex-direction:column; align-items:center;
  gap:6px;
}
.wa-help{
  font-size:12px;
  font-weight:700;
  color:var(--accent);
  background:rgba(18,18,18,0.95);
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  animation: wa-blink 1.4s ease-in-out infinite;
  white-space:nowrap;
}
.wa-number{
  font-size:10.5px;
  color:var(--ink);
  background:rgba(18,18,18,0.95);
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
}
.wa-btn{
  width:54px; height:54px; border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(37,211,102,0.4);
  transition: transform .2s ease;
}
.wa-btn:hover{ transform:scale(1.06); }
.wa-btn svg{ width:28px; height:28px; fill:#fff; }

@keyframes wa-blink{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.25; }
}
@media (prefers-reduced-motion: reduce){
  .wa-help{ animation:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .header-row{ flex-wrap:wrap; gap:10px; justify-content:center; }
  .header-spacer{ display:none; }
  .socials{ order:2; }
  .logo-wrap{ order:1; width:100%; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Page produit (centrée) ---------- */
.product-page{
  max-width:640px;
  margin:0 auto;
  padding: 30px 24px 100px;
  position:relative; z-index:1;
}
.product-shell{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  gap:16px;
}
.back-link{
  align-self:center;
  font-size:12px;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  margin-bottom:6px;
}
.back-link:hover{ color:var(--accent); border-color:var(--accent); }

.product-gallery{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:100%;
}
.gallery-main{
  width:100%; max-width:360px; aspect-ratio:1/1;
  background:var(--bg-alt);
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
}
.gallery-thumbs button{
  width:50px; height:50px; padding:0;
  border-radius:9px; overflow:hidden;
  border:2px solid transparent;
  background:var(--bg-alt);
  cursor:pointer;
  transition: border-color .2s ease, opacity .2s ease;
  opacity:.7;
}
.gallery-thumbs button img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs button:hover{ opacity:1; }
.gallery-thumbs button.active{ border-color:var(--accent); opacity:1; }

.product-info{
  display:flex; flex-direction:column; align-items:center;
  width:100%; max-width:420px;
}
.product-title{
  font-family:'Work Sans', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.01em;
  font-size:17px;
  color:var(--ink);
  margin:4px 0 10px;
}
.product-price-big{
  font-size:13px;
  margin-bottom:18px;
}
.product-price-big .woocommerce-Price-amount{
  font-size:30px !important;
  font-weight:700 !important;
  color:var(--accent) !important;
}
.product-price-big .woocommerce-Price-currencySymbol{
  font-size:0.55em;
  vertical-align:middle;
}
.product-price-big del{ opacity:.55; font-size:0.6em !important; }
.product-price-big del .woocommerce-Price-amount{ font-size:1em !important; font-weight:400 !important; }

.product-cart{ width:100%; max-width:280px; margin-bottom:6px; }
.product-cart form.cart{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.product-cart .quantity{
  display:flex; justify-content:center;
}
.product-cart .quantity input{
  width:64px; text-align:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 4px;
  background:var(--card-bg);
  color:var(--ink);
  font-family:inherit;
}
.product-cart button.single_add_to_cart_button{
  font-size:11.5px !important;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:700 !important;
  color:var(--accent) !important;
  background:transparent !important;
  border:1px solid var(--accent) !important;
  padding:9px 18px !important;
  border-radius:999px !important;
  width:100%;
  cursor:pointer;
  transition: background .2s ease, color .2s ease;
}
.product-cart button.single_add_to_cart_button:hover{
  background:var(--accent) !important;
  color:#0A0A0A !important;
  opacity:1;
}

.accordion{
  width:100%;
  border-top:1px solid var(--line);
  margin-top:14px;
}
.accordion-trigger{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:none; border:none; cursor:pointer;
  padding:14px 0;
  font-family:'Work Sans', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:700;
  font-size:12.5px;
  color:var(--ink);
}
.accordion-icon{ transition: transform .2s ease; font-size:14px; color:var(--accent); }
.accordion-trigger[aria-expanded="true"] .accordion-icon{ transform:rotate(45deg); }
.accordion-panel{
  padding:0 6px 20px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--ink-soft);
  text-align:center;
}
.accordion-panel p{ margin-bottom:10px; }

/* ---------- Variantes produit (plugin Variation Swatches) ---------- */
table.variations{
  width:100%;
  border:none;
  margin: 4px 0 14px;
}
table.variations tr{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:16px;
}
table.variations th.label{
  font-family:'Work Sans', sans-serif;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:8px;
  text-align:center;
  font-weight:700;
}
table.variations td.value{
  text-align:center;
  width:100%;
}

.cfvsw-swatches-wrapper,
.variable-items-wrapper{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

.cfvsw-swatches-option,
.variable-item{
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  background:var(--card-bg) !important;
  color:var(--ink) !important;
  font-family:'Work Sans', sans-serif !important;
  font-size:12px !important;
  font-weight:500 !important;
  padding:7px 14px !important;
  box-shadow:none !important;
  transition: border-color .2s ease, background .2s ease, color .2s ease !important;
}
.cfvsw-swatches-option:hover,
.variable-item:hover{
  border-color:var(--accent-soft) !important;
}
.cfvsw-swatches-option.selected,
.cfvsw-swatches-option[aria-selected="true"],
.variable-item.selected{
  border-color:var(--accent) !important;
  background:var(--accent) !important;
  color:#0A0A0A !important;
}

/* Boutons de type texte/taille : forme pilule, comme les autres boutons du site */
.cfvsw-swatches-option.cfvsw-label-option{
  border-radius:999px !important;
}

/* Pastille de couleur à l'intérieur d'un swatch couleur */
.cfvsw-swatch-inner{
  border-radius:6px !important;
  border:1px solid var(--line) !important;
  width:26px !important;
  height:26px !important;
}
.cfvsw-swatches-option.selected .cfvsw-swatch-inner,
.cfvsw-swatches-option[aria-selected="true"] .cfvsw-swatch-inner{
  border-color:#0A0A0A !important;
}

/* Répétition forcée sur mobile : WooCommerce et le plugin de variantes appliquent
   leurs propres styles "petit écran" en dessous de 782px, qui peuvent reprendre le
   dessus sur les règles ci-dessus. On les réaffirme explicitement ici. */
@media (max-width: 782px){
  table.variations{ width:100% !important; }
  table.variations tr{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    margin-bottom:16px !important;
  }
  table.variations th.label{
    text-align:center !important;
    width:100% !important;
    float:none !important;
  }
  table.variations td.value{
    text-align:center !important;
    width:100% !important;
    float:none !important;
  }
  .cfvsw-swatches-wrapper,
  .variable-items-wrapper{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:8px !important;
  }
  .cfvsw-swatches-option,
  .variable-item{
    border:1px solid var(--line) !important;
    border-radius:8px !important;
    background:var(--card-bg) !important;
    color:var(--ink) !important;
    font-size:12px !important;
    font-weight:500 !important;
    padding:7px 14px !important;
    width:auto !important;
    height:auto !important;
    box-shadow:none !important;
  }
  .cfvsw-swatches-option.cfvsw-label-option{
    border-radius:999px !important;
  }
  .cfvsw-swatches-option.selected,
  .cfvsw-swatches-option[aria-selected="true"],
  .variable-item.selected{
    border-color:var(--accent) !important;
    background:var(--accent) !important;
    color:#0A0A0A !important;
  }
  .cfvsw-swatch-inner{
    border-radius:6px !important;
    border:1px solid var(--line) !important;
    width:26px !important;
    height:26px !important;
  }
}

/* Nettoyage de quelques éléments WooCommerce par défaut non désirés dans une boutique épurée */
.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce-breadcrumb{
  display:none;
}

/* ---------- Version arabe (RTL) ---------- */
html[dir="rtl"] body,
html[dir="rtl"] .add-btn,
html[dir="rtl"] .card a.button{
  font-family:'Tajawal', sans-serif;
}
html[dir="rtl"] .logo,
html[dir="rtl"] .footer-logo,
html[dir="rtl"] .card h3,
html[dir="rtl"] .intro-strip p,
html[dir="rtl"] .product-title{
  font-family:'Cairo', sans-serif;
  font-style:normal;
  font-weight:700;
}
html[dir="rtl"] .tagline,
html[dir="rtl"] .lang-switch a,
html[dir="rtl"] .card a.button,
html[dir="rtl"] .card .add_to_cart_button{
  letter-spacing:0;
  text-transform:none;
}
html[dir="rtl"] .wa-float{
  right:auto; left:20px;
}