/*
Theme Name: Chakra Stones
Theme URI: https://coupecara.lepolichinelle.cloud
Description: Thème enfant Storefront — cabinet de curiosités minéralogique pour Chakra Stones.
Author: Chakra Stones
Template: storefront
Version: 1.0.9
Text Domain: chakra-stones
*/

:root{
  --cs-ground:#141310;
  --cs-surface:#211E17;
  --cs-surface-alt:#2A2822;
  --cs-ink:#EDE7D9;
  --cs-ink-soft:#93876E;
  --cs-line:#38332A;
  --cs-emerald:#1E9E6B;
  --cs-emerald-deep:#2BC98A;
  --cs-rust:#D97A47;
  --cs-rust-soft:#E89A5C;
}

body{
  background:var(--cs-ground) !important;
  color:var(--cs-ink) !important;
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
  -webkit-font-smoothing:antialiased;
}

.mono,
.woocommerce span.onsale,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.sku, .posted_in{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
}

h1,h2,h3,
.site-title,
.woocommerce div.product .product_title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Fraunces',Georgia,serif !important;
  font-weight:450;
  font-style:italic;
  color:var(--cs-ink) !important;
  letter-spacing:-.01em;
}

a{color:var(--cs-ink)}
a:hover{color:var(--cs-emerald-deep)}

/* ---------- header ---------- */
.site-header{
  background:color-mix(in srgb, var(--cs-ground) 92%, transparent) !important;
  border-bottom:1px solid var(--cs-line);
}
.site-branding .site-title a{
  font-family:'Fraunces',serif !important;
  font-style:italic;font-weight:450;
  color:var(--cs-ink) !important;
}
.main-navigation ul li a{
  color:var(--cs-ink-soft) !important;
  text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:500;
}
.main-navigation ul li a:hover{color:var(--cs-ink) !important}

/* item "Comprendre les émeraudes" : mis en avant + brillance animée en continu */
@keyframes cs-shimmer{
  0%,100%{background-position:-120% 0}
  50%{background-position:220% 0}
}
.menu-item-30 > a{
  position:relative;
  color:var(--cs-emerald-deep) !important;
  background:linear-gradient(
    100deg,
    var(--cs-emerald-deep) 40%,
    #fff 50%,
    var(--cs-emerald-deep) 60%
  );
  background-size:300% 100%;
  background-position:-120% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:cs-shimmer 3.2s ease-in-out infinite;
}
.menu-item-30 > a:hover{
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--cs-emerald-deep) 60%, transparent));
}
@media (prefers-reduced-motion: reduce){
  .menu-item-30 > a{animation:none;-webkit-text-fill-color:var(--cs-emerald-deep)}
}
.site-header-cart a.cart-contents{color:var(--cs-ink) !important}

/* ---------- buttons ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.button, button, input[type="submit"]{
  background:var(--cs-emerald-deep) !important;
  color:var(--cs-ground) !important;
  border-radius:2px !important;
  border:none !important;
  font-weight:600 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  transition:transform .15s ease, background .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.button:hover, button:hover{
  background:var(--cs-emerald) !important;
  transform:translateY(-1px);
}
/* portefeuilles numériques Square (Apple/Google Pay) : neutralise le fond
   hérité tant que le vrai bouton du wallet n'est pas rendu par son propre
   script, pour éviter un bloc plein sans texte sur les fiches produit */
#wc-square-digital-wallet button:not([class*="apple-pay"]):not([class*="gpay"]){
  background:transparent !important;
  color:transparent !important;
  box-shadow:none !important;
}

.woocommerce a.added_to_cart{
  color:var(--cs-rust-soft) !important;
  text-decoration:underline;
}

/* ---------- shop grid as specimen cards ---------- */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--cs-line);
  border:1px solid var(--cs-line);
  list-style:none;margin:0 !important;padding:0 !important;
}
@media (max-width:900px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.woocommerce ul.products{grid-template-columns:1fr}}

.woocommerce ul.products li.product{
  background:var(--cs-ground) !important;
  border:2px solid var(--cs-line) !important;
  border-radius:2px !important;
  padding:24px 22px 22px !important;
  margin:0 !important;
  width:100% !important;
  float:none !important;
  text-align:left !important;
  transition:background .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
}
.woocommerce ul.products li.product:hover{
  background:var(--cs-surface) !important;
  border-color:color-mix(in srgb, var(--cs-emerald-deep) 45%, var(--cs-line)) !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.09), 0 0 16px color-mix(in srgb, var(--cs-emerald-deep) 12%, transparent);
}

.woocommerce ul.products li.product a img{
  border:1px solid var(--cs-line) !important;
  background:var(--cs-surface) !important;
  border-radius:2px !important;
  margin-bottom:14px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.1rem !important;
  margin:0 0 6px !important;
}

.woocommerce ul.products li.product .price{
  font-size:.92rem !important;
  color:var(--cs-ink) !important;
  display:block;margin-top:8px !important;
  padding-top:12px;border-top:1px solid var(--cs-line);
}
.woocommerce ul.products li.product .price ins{
  color:var(--cs-rust-soft) !important;text-decoration:none;
}
.woocommerce ul.products li.product .price del{color:var(--cs-ink-soft) !important;opacity:.7}

.woocommerce ul.products li.product .button{
  margin-top:10px !important;
  font-size:.78rem !important;
  padding:10px 16px !important;
}

.woocommerce span.onsale{
  background:var(--cs-rust) !important;
  color:var(--cs-ground) !important;
  border-radius:2px !important;
  font-size:.65rem !important;
  min-height:auto !important;min-width:auto !important;
  padding:4px 8px !important;
  line-height:1.4 !important;
  top:14px !important;left:14px !important;
}

/* ---------- single product ---------- */
.woocommerce div.product{
  background:var(--cs-surface);
  border:1px solid var(--cs-line);
  padding:32px;
}
.woocommerce div.product .woocommerce-product-gallery img{
  border:1px solid var(--cs-line);
}
.woocommerce div.product p.price, .woocommerce div.product span.price{
  color:var(--cs-ink) !important;font-size:1.4rem !important;
}
.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta a{
  color:var(--cs-ink-soft) !important;font-size:.78rem !important;
}
.woocommerce table.shop_attributes{
  border:1px solid var(--cs-line) !important;
  background:var(--cs-ground);
}
.woocommerce table.shop_attributes th{
  background:var(--cs-surface-alt) !important;
  color:var(--cs-emerald-deep) !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:.72rem !important;text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--cs-line) !important;
}
.woocommerce table.shop_attributes td{
  color:var(--cs-ink-soft) !important;
  border-bottom:1px solid var(--cs-line) !important;
}

/* ---------- cart / checkout tables ---------- */
.woocommerce table.shop_table{
  border:1px solid var(--cs-line) !important;
  background:var(--cs-surface);
}
.woocommerce table.shop_table th{
  background:var(--cs-surface-alt) !important;
  color:var(--cs-emerald-deep) !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:.72rem !important;text-transform:uppercase;
}
.woocommerce table.shop_table td{
  border-top:1px solid var(--cs-line) !important;
  color:var(--cs-ink) !important;
}
.woocommerce-checkout #payment{
  background:var(--cs-surface) !important;
  border:1px solid var(--cs-line) !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  background:var(--cs-ground) !important;
  border:1px solid var(--cs-line) !important;
  color:var(--cs-ink) !important;
}

/* ---------- footer ---------- */
.site-footer{
  background:var(--cs-ground) !important;
  border-top:1px solid var(--cs-line);
  color:var(--cs-ink-soft) !important;
}
.site-footer a{color:var(--cs-ink-soft) !important}

/* ---------- widgets / misc ---------- */
.storefront-primary-navigation{background:transparent !important}
.woocommerce-breadcrumb{
  font-family:'JetBrains Mono',monospace !important;
  font-size:.72rem !important;color:var(--cs-ink-soft) !important;
}

/* ---------- onglets produit : masque le <h2> redondant ----------
   WooCommerce répète le libellé de l'onglet actif ("Description", "Reviews")
   en <h2> dans le panneau, en plus du libellé déjà affiché dans l'onglet
   lui-même — gardé dans le DOM pour l'accessibilité, masqué visuellement. */
.woocommerce-Tabs-panel--description > h2:first-child,
#reviews h2.woocommerce-Reviews-title{
  position:absolute !important;
  width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;border:0 !important;
}
.woocommerce-tabs ul.tabs li a{font-weight:600}

/* ---------- navigation minimale : Boutique + Panier uniquement ---------- */
.storefront-handheld-footer-bar{display:none !important}
body.storefront-full-width-content{padding-bottom:0 !important}

/* ---------- page d'accueil ---------- */
.cs-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--cs-emerald-deep);
  margin:0 0 16px;
}

.cs-hero{
  background:
    radial-gradient(ellipse at 25% 15%, color-mix(in srgb, var(--cs-emerald) 10%, transparent), transparent 60%),
    var(--cs-ground);
  border-bottom:1px solid var(--cs-line);
  padding:88px 24px;
  text-align:center;
}
.cs-hero-inner{max-width:640px;margin:0 auto}
.cs-hero h1{
  font-family:'Fraunces',Georgia,serif !important;
  font-style:italic;
  font-weight:450;
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  line-height:1.12;
  margin:0 0 22px;
  letter-spacing:-.01em;
}
.cs-hero-lede{
  color:var(--cs-ink-soft);
  font-size:1.02rem;
  line-height:1.65;
  max-width:480px;
  margin:0 auto 32px;
}
.cs-hero-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}

.cs-hero-cta{
  position:relative;
  display:inline-block;
  overflow:hidden;
  background:var(--cs-emerald-deep);
  color:var(--cs-ground) !important;
  font-weight:600;
  font-size:.88rem;
  padding:14px 30px;
  border-radius:2px;
  transition:transform .15s ease, background .15s ease, box-shadow .25s ease;
}
.cs-hero-cta:hover{
  background:var(--cs-emerald) !important;
  transform:translateY(-1px);
  box-shadow:0 0 22px color-mix(in srgb, var(--cs-emerald-deep) 55%, transparent);
}
.cs-hero-cta::after{
  content:'';
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
}
.cs-hero-cta:hover::after{left:130%}

.cs-hero-secondary{
  position:relative;
  display:inline-block;
  overflow:hidden;
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--cs-emerald-deep) !important;
  border:1px solid color-mix(in srgb, var(--cs-emerald-deep) 55%, var(--cs-line));
  border-radius:2px;
  padding:13px 26px;
  transition:color .2s ease, border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
.cs-hero-secondary::before{
  content:'';
  position:absolute;
  top:0;left:-60%;
  width:35%;height:100%;
  background:linear-gradient(115deg, transparent, color-mix(in srgb, var(--cs-emerald-deep) 45%, transparent), transparent);
  transform:skewX(-20deg);
  animation:cs-sweep 2.6s ease-in-out infinite;
}
@keyframes cs-sweep{
  0%{left:-60%}
  45%,100%{left:130%}
}
.cs-hero-secondary:hover{
  color:var(--cs-ground) !important;
  background:var(--cs-emerald-deep);
  border-color:var(--cs-emerald-deep);
  box-shadow:0 0 22px color-mix(in srgb, var(--cs-emerald-deep) 55%, transparent);
}
@media (prefers-reduced-motion: reduce){
  .cs-hero-secondary::before{animation:none;display:none}
}

.cs-story-link{
  display:inline-block;
  margin-top:24px;
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--cs-ink) !important;
  border-bottom:1px solid var(--cs-line);
  padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease, text-shadow .2s ease;
}
.cs-story-link:hover{
  color:var(--cs-emerald-deep) !important;
  border-color:var(--cs-emerald-deep);
  text-shadow:0 0 14px color-mix(in srgb, var(--cs-emerald-deep) 65%, transparent);
}

.cs-traits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--cs-line);
}
.cs-trait{
  padding:32px 20px;
  text-align:center;
  border-left:1px solid var(--cs-line);
}
.cs-trait:first-child{border-left:none}
.cs-trait-num{
  display:block;
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:450;
  font-size:1.8rem;
  color:var(--cs-ink);
  margin-bottom:6px;
}
.cs-trait-label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--cs-ink-soft);
}
@media (max-width:600px){
  .cs-traits{grid-template-columns:1fr}
  .cs-trait{border-left:none;border-top:1px solid var(--cs-line)}
  .cs-trait:first-child{border-top:none}
}

.cs-featured{padding:72px 24px 24px;max-width:1200px;margin:0 auto}
.cs-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:28px;
  flex-wrap:wrap;
  gap:8px;
}
.cs-section-head h2{
  font-family:'Fraunces',serif !important;
  font-style:italic;
  font-weight:450;
  font-size:1.6rem;
  margin:0;
}
.cs-see-all{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--cs-ink-soft) !important;
}
.cs-see-all:hover{color:var(--cs-emerald-deep) !important}
.cs-featured .woocommerce ul.products,
.cs-featured ul.products{margin-bottom:0 !important}

.cs-story{
  background:var(--cs-surface);
  border-top:1px solid var(--cs-line);
  padding:72px 24px;
}
.cs-story-inner{max-width:600px;margin:0 auto;text-align:center}
.cs-story h2{
  font-family:'Fraunces',serif !important;
  font-style:italic;
  font-weight:450;
  font-size:1.9rem;
  margin:0 0 20px;
}
.cs-story p:not(.cs-eyebrow){
  color:var(--cs-ink-soft);
  line-height:1.7;
}

/* ---------- bloc éducatif fiche produit ---------- */
.cs-learn{
  max-width:780px;
  margin:40px auto 0;
  border-top:1px solid var(--cs-line);
  padding-top:24px;
}
.cs-learn-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:none;
  border:none;
  color:var(--cs-ink) !important;
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:0 0 4px;
  cursor:pointer;
}
.cs-learn-icon{
  font-size:1.1rem;
  color:var(--cs-emerald-deep);
  transition:transform .2s ease;
}
.cs-learn-toggle[aria-expanded="true"] .cs-learn-icon{transform:rotate(45deg)}

.cs-learn-panel{margin-top:20px}
.cs-learn-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px 28px;
  margin-bottom:20px;
}
@media (max-width:600px){.cs-learn-grid{grid-template-columns:1fr}}
.cs-learn-label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--cs-emerald-deep);
  margin-bottom:6px;
}
.cs-learn-grid p{
  color:var(--cs-ink-soft);
  font-size:.85rem;
  line-height:1.55;
  margin:0;
}
.cs-learn-mine{
  color:var(--cs-ink-soft);
  font-size:.85rem;
  line-height:1.55;
  border-top:1px solid var(--cs-line);
  padding-top:16px;
  margin:0 0 16px;
}
.cs-learn-symbolic{
  font-style:italic;
  color:var(--cs-ink-soft);
  font-size:.85rem;
  line-height:1.6;
  border-top:1px solid var(--cs-line);
  padding-top:16px;
  margin:0;
}
.cs-learn-symbolic .cs-learn-label{font-style:normal}

/* ---------- page "Comprendre les émeraudes" ---------- */
.cs-learn-page{max-width:900px;margin:0 auto;padding:0 24px}

.cs-learn-hero{
  text-align:center;
  padding:64px 0 48px;
  border-bottom:1px solid var(--cs-line);
}
.cs-learn-hero h1{
  font-family:'Fraunces',serif !important;
  font-style:italic;
  font-weight:450;
  font-size:clamp(2rem, 4.5vw, 2.8rem);
  margin:0 0 20px;
}
.cs-learn-hero-lede{
  color:var(--cs-ink-soft);
  font-size:1rem;
  line-height:1.7;
  max-width:560px;
  margin:0 auto;
}

.cs-learn-section{padding:56px 0}
.cs-learn-section-alt{
  background:var(--cs-surface);
  margin:0 -24px;
  padding:56px 24px;
}
.cs-learn-section h2{
  font-family:'Fraunces',serif !important;
  font-style:italic;
  font-weight:450;
  font-size:1.7rem;
  margin:0 0 28px;
  text-align:center;
}
.cs-learn-section > p{
  color:var(--cs-ink-soft);
  line-height:1.75;
  max-width:680px;
  margin:0 auto 16px;
}
.cs-learn-section > p strong{color:var(--cs-emerald-deep);font-weight:500}
.cs-learn-intro{text-align:center}

.cs-criteria-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--cs-line);
  border:1px solid var(--cs-line);
  margin-bottom:24px;
}
@media (max-width:640px){.cs-criteria-grid{grid-template-columns:1fr}}
.cs-criteria-card{
  background:var(--cs-ground);
  padding:28px 26px;
  transition:background .2s ease, box-shadow .2s ease;
}
.cs-criteria-card:hover{
  background:var(--cs-surface);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cs-emerald-deep) 40%, transparent), 0 0 18px color-mix(in srgb, var(--cs-emerald-deep) 10%, transparent);
}
.cs-criteria-num{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  color:var(--cs-emerald-deep);
  letter-spacing:.06em;
  margin-bottom:10px;
}
.cs-criteria-card h3{
  font-family:'Fraunces',serif !important;
  font-style:italic;
  font-weight:450;
  font-size:1.2rem;
  margin:0 0 10px;
}
.cs-criteria-card p{
  color:var(--cs-ink-soft);
  font-size:.88rem;
  line-height:1.65;
  margin:0;
}
.cs-criteria-card p strong{color:var(--cs-emerald-deep);font-weight:500}

.cs-learn-note{
  font-size:.85rem !important;
  border-top:1px solid var(--cs-line);
  padding-top:20px;
  max-width:680px;
  margin:0 auto;
}

.cs-mine-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
@media (max-width:700px){.cs-mine-grid{grid-template-columns:1fr}}
.cs-mine-card{
  background:var(--cs-ground);
  border:1px solid var(--cs-line);
  padding:24px 20px;
  text-align:center;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cs-mine-card:hover{
  border-color:color-mix(in srgb, var(--cs-emerald-deep) 50%, var(--cs-line));
  box-shadow:0 0 20px color-mix(in srgb, var(--cs-emerald-deep) 14%, transparent);
  transform:translateY(-2px);
}
.cs-mine-card h3{
  font-family:'Fraunces',serif !important;
  font-style:italic;
  font-weight:450;
  font-size:1.25rem;
  margin:0 0 10px;
  color:var(--cs-emerald-deep);
}
.cs-mine-card p{
  color:var(--cs-ink-soft);
  font-size:.85rem;
  line-height:1.6;
  margin:0;
}

.cs-learn-cta{text-align:center;padding:16px 0 64px}
