/* ==========================================================================
   Just Ten Padel — surcouche de marque pour le thème enfant "justten-child"
   Basé sur le thème Classic (PrestaShop 8.2.x). Ce fichier est chargé en
   dernier par PrestaShop (priorité la plus haute) : il vient donc s'ajouter
   par-dessus theme.css sans avoir besoin de recompiler le SCSS du thème.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Tokens de marque (repris du canvas de design) ---------- */
:root {
  --jt-black: #0d0d0d;
  --jt-black-soft: #1a1a1a;
  --jt-white: #ffffff;
  --jt-grey-light: #f4f4f4;
  --jt-grey-mid: #9a9a9a;
  --jt-grey-border: #e2e2e2;
  --jt-elektra: #b23a46;
  --jt-kimera: #1f4fa0;
  --jt-banzak: #e0791e;
  --jt-zaask: #eece22;
  --jt-font-body: 'Inter', sans-serif;
  --jt-font-display: 'Oswald', sans-serif;
}

/* ---------- Typographie générale ---------- */
body {
  font-family: var(--jt-font-body);
  color: var(--jt-black);
  background: var(--jt-white);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--jt-font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--jt-black);
}

a {
  color: var(--jt-black);
}
a:hover,
a:focus {
  color: var(--jt-black-soft);
}

/* ---------- Header ---------- */
#header {
  background: var(--jt-white);
  box-shadow: none;
  border-bottom: 1px solid var(--jt-grey-border);
}

#header .header-top {
  padding: 18px 0;
}

#header #_desktop_logo .logo {
  height: 36px;
  width: auto;
  max-width: none;
}

#header .header-nav {
  max-height: none;
  border-bottom: 1px solid var(--jt-grey-border);
  background: var(--jt-white);
}

#header a {
  color: var(--jt-black);
}
#header a:hover {
  color: var(--jt-black-soft);
}

/* Menu principal (ps_mainmenu) en majuscules, style Oswald, façon "Palas / Accesorios / Textil / Outlet" */
#header .js-top-menu .top-menu > li > a,
#header .menu > ul > li > a {
  font-family: var(--jt-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--jt-black);
}

/* ---------- Boutons ---------- */
.btn-primary,
#header .btn-primary,
.product-add-to-cart .btn-primary,
button[type="submit"].btn-primary {
  background: var(--jt-black);
  border-color: var(--jt-black);
  color: var(--jt-white);
  border-radius: 0;
  font-family: var(--jt-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn-primary:hover,
.btn-primary:focus,
#header .btn-primary:hover,
.product-add-to-cart .btn-primary:hover {
  background: var(--jt-black-soft);
  border-color: var(--jt-black-soft);
  color: var(--jt-white);
}

.btn-secondary {
  border-radius: 0;
  font-family: var(--jt-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Prix ---------- */
.product-price,
.current-price,
.current-price-value,
#product-prices .current-price span,
.product-prices .price {
  color: var(--jt-black);
  font-family: var(--jt-font-display);
  font-weight: 600;
}

.regular-price {
  color: var(--jt-grey-mid);
}

/* ---------- Vignettes produit (listing / accueil) ---------- */
.product-miniature .thumbnail-container {
  border: 1px solid var(--jt-grey-border);
  border-radius: 0;
  background: var(--jt-grey-light);
}

.product-miniature .product-title a {
  color: var(--jt-black);
  font-weight: 600;
}

/* ---------- Footer ---------- */
#footer {
  background: var(--jt-black);
  color: var(--jt-white);
  padding-top: 48px;
  padding-bottom: 24px;
}

#footer a,
#footer .linklist a,
#footer .account-list a {
  color: rgba(255, 255, 255, 0.75);
}
#footer a:hover {
  color: var(--jt-white);
}

#footer .blockcms-title,
#footer .myaccount-title,
#footer .block-contact-title,
#footer h3 {
  font-family: var(--jt-font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--jt-white);
}

#footer .copyright,
#footer p.text-sm-center {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}