/* FILE: single-product.css — mobile-first, image carrée, 1 seule couleur discrète */

/* ---------- Variables & base ---------- */
:root{
  --container: 1200px;
  --gap: 1.25rem;
  --accent: #e9edf3;      /* couleur discrète pour les barres sous sections */
  --card-bg: #fff;
  --card-bd: #eee;
  --shadow: 0 2px 10px rgba(0,0,0,.04);
}
*{ box-sizing:border-box }
img{ max-width:100%; height:auto; display:block }
.section{ padding:2.5rem 1rem; margin:0 auto }
.container{ max-width:var(--container); margin:0 auto; padding:0 1rem }

/* ---------- HERO (mobile : 1 colonne) ---------- */
.astraunik-hero{ background:transparent; padding-top:.5rem; }

/* Grille du hero : mobile = pile; desktop = 2 colonnes (image / contenu) */
.hero-grid{ display:block; }

/* Recadrage carré de la photo principale */
.hero-crop{
  aspect-ratio: 1 / 1;          /* carré */
  width: 100%;
  max-width: none;
  overflow: hidden;
  border-radius: 12px;           /* léger adoucissement */
}
.hero-crop .main-image-link{ display:block; cursor:zoom-in; height:100%; }
.hero-crop .product-main-image{
  width:100%; height:100%;
  object-fit: cover;             /* remplit le carré, rogne les côtés blancs */
  object-position: center center;
  /* si tu veux un rognage un peu plus serré : décommente la ligne suivante */
  /* transform: scale(1.06); */
}

/* Contenu du hero */
.hero-content{
  text-align:center;
  margin-top:1rem;
}
.hero-content h1{
  margin:0;
  font-size:1.5rem; line-height:1.3; font-weight:700;
}
.price-cart{ margin-top:1rem; text-align:center }
.price-cart .price{ font-size:1.25rem; font-weight:700; margin:0 0 .5rem }
.price-cart .shipping-note{ margin:.25rem 0 1rem; color:#6b6b6b; font-size:.95rem }
.price-cart .cart-form-wrap{ display:flex; justify-content:center }
.price-cart form.cart{ display:inline-flex; align-items:center; gap:.75rem }
.price-cart .quantity input.qty{ width:80px; text-align:center }
.single_add_to_cart_button,.button,.btn{
  display:inline-block; padding:.85rem 1.25rem; border-radius:6px;
  background:#111; color:#fff; border:none; cursor:pointer; text-decoration:none;
}
.single_add_to_cart_button:hover,.button:hover,.btn:hover{ opacity:.9 }

/* ---------- Grille contenu général ---------- */
.content-grid{ display:grid; grid-template-columns:1fr; gap:var(--gap) }
.span-2{ grid-column:1/-1 }

/* ---------- Galerie ---------- */
.gallery{
  display:grid; gap:1rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
  justify-items:center;
}
.gallery img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}

/* ---------- Blocs info (Tissu / Toile / Cuir / Atelier) ---------- */
.info-list{ display:grid; grid-template-columns:1fr; gap:var(--gap) }
.info-card{
  background:var(--card-bg); border:1px solid var(--card-bd); border-radius:12px;
  padding:1.25rem; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr; gap:1rem;
  position:relative; overflow:hidden;
}
.info-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:10px; background:var(--accent);
}
.info-image{ max-width:520px; margin:0 auto; border-radius:10px; overflow:hidden }
.info-image img{
  width:100%; height:auto;
  max-height:340px; object-fit:cover; /* limite la taille visuelle */
}
.info-content h3{ margin:.25rem 0; font-size:1.25rem }
.info-content p{ margin:.35rem 0; line-height:1.7 }

/* ---------- Témoignages fixes ---------- */
.testimonials-section{
  background:var(--card-bg); border:1px solid var(--card-bd); border-radius:12px;
  padding:1.5rem; box-shadow:var(--shadow); position:relative;
}
.testimonials-section::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:10px; background:var(--accent);
}
.testimonials-grid{ display:grid; grid-template-columns:1fr; gap:1rem }
.testimonial{
  background:#f9f9f9; border-left:4px solid #bfa36f; border-radius:6px; padding:1.25rem;
}
.testimonial footer{ margin-top:.5rem; text-align:right; color:#555 }

/* ---------- Cartes info bas ---------- */
.info-box{
  background:var(--card-bg); border:1px solid var(--card-bd); border-radius:10px;
  padding:1.5rem; box-shadow:var(--shadow);
}

/* ---------- CTA bas ---------- */
.cta-bottom{
  background:var(--card-bg); border:1px solid var(--card-bd); border-radius:12px;
  padding:2rem; box-shadow:var(--shadow); text-align:center;
}

/* ---------- Lightbox ---------- */
.basicLightbox--visible .basicLightbox__placeholder{ background:#fff !important }

/* ============================== DESKTOP (≥1024px) ============================== */
@media (min-width:1024px){
  :root{ --gap: 1.75rem }

  /* Resserre sous le menu */
  .astraunik-hero{ padding-top:.25rem; }

  /* Hero en 2 colonnes centrées : image carrée à gauche, contenu à droite */
  .astraunik-hero .container{ max-width:1280px; }
  .hero-grid{
    display:grid;
    grid-template-columns: minmax(360px, clamp(420px, 38vw, 560px)) minmax(0,1fr);
    gap: var(--gap);
    align-items: center;
  }
  .hero-crop{
    max-width: clamp(420px, 38vw, 560px);
    margin: 0 auto;
  }
  .hero-content{
    text-align:center;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:0 1rem;
  }
  .hero-content h1{ font-size:2.1rem; line-height:1.25 }
  .price-cart .price{ font-size:1.65rem }

  /* Contenu 2 colonnes */
  .content-grid{ grid-template-columns:1fr 1fr; gap:var(--gap) }
  .span-2{ grid-column:1/3 }

  /* Galerie plus dense */
  .gallery{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem }

  /* Blocs info : image à gauche / texte à droite ; alternance avec .reverse */
  .info-card{
    grid-template-columns: 420px 1fr;
    align-items:center; gap:1.5rem; padding:1.5rem;
  }
  .info-card.reverse{
    grid-template-columns: 1fr 420px;
  }
  .info-card.reverse .info-image{ order:2 }
  .info-card.reverse .info-content{ order:1 }

  .info-image{ max-width:420px }
  .info-image img{ max-height:320px }

  /* Témoignages en 2 colonnes */
  .testimonials-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem }
}

/* ---------- Large Desktop (≥1440px) ---------- */
@media (min-width:1440px){
  .hero-crop{ max-width: 560px }
  .info-card{ grid-template-columns: 520px 1fr }
  .info-card.reverse{ grid-template-columns: 1fr 520px }
}