:root{
  /* Violet & white theme */
  --txt:#0f0a1f;            /* dark indigo text */
  --muted:#7c7b8a;          /* muted gray-violet */
  --bg:#ffffff;             /* white */
  --line:#eee9ff;           /* pale violet line */
  --brand:#6D28D9;          /* violet (primary) */
  --brand-d:#5B21B6;        /* deeper violet */
  --brand-2:#8B5CF6;        /* accent violet */
  --chip:#f5f1ff;           /* soft violet chip */
  --danger:#EF4444;         /* red for badge discount */
}

.product-show { color:var(--txt); }

/* breadcrumb */
.breadcrumbx{ display:flex; gap:8px; align-items:center; font-size:14px; color:var(--muted); margin-bottom:18px; }
.breadcrumbx a{ color:var(--brand); text-decoration:none; }
.breadcrumbx a:hover{ color:var(--brand-d); }
.breadcrumbx .current{ color:var(--txt); font-weight:600; }

/* layout */
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap:32px; }
@media (max-width: 992px){ .grid{ grid-template-columns: 1fr; } }

/* GALERIE */
.gallery .gallery-main{ position:relative; border-radius:14px; overflow:hidden; background:#faf9ff; border:1px solid var(--line); }
.gallery .gallery-main input[type=radio]{ display:none; }
.gallery .gallery-main .viewport{ display:none; padding:6px; }
.gallery .gallery-main img{ width:100%; height:560px; object-fit:cover; border-radius:12px; }
.gallery .thumbs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.gallery .thumbs .thumb{ width:84px; height:84px; border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; background:#fff; transition:transform .15s ease; }
.gallery .thumbs .thumb:hover{ transform: translateY(-2px); box-shadow:0 4px 16px rgba(109,40,217,.12); }
.gallery .thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }

/* radio → slide visible (support 10 images; étends si besoin) */
.gallery .gallery-main input#g0:checked ~ .viewport:nth-of-type(1),
.gallery .gallery-main input#g1:checked ~ .viewport:nth-of-type(2),
.gallery .gallery-main input#g2:checked ~ .viewport:nth-of-type(3),
.gallery .gallery-main input#g3:checked ~ .viewport:nth-of-type(4),
.gallery .gallery-main input#g4:checked ~ .viewport:nth-of-type(5),
.gallery .gallery-main input#g5:checked ~ .viewport:nth-of-type(6),
.gallery .gallery-main input#g6:checked ~ .viewport:nth-of-type(7),
.gallery .gallery-main input#g7:checked ~ .viewport:nth-of-type(8),
.gallery .gallery-main input#g8:checked ~ .viewport:nth-of-type(9),
.gallery .gallery-main input#g9:checked ~ .viewport:nth-of-type(10){ display:block; }

@media (max-width: 768px){
  .gallery .gallery-main img{ height:360px; }
  .gallery .thumbs .thumb{ width:70px; height:70px; }
}

/* SUMMARY (droite) */
.summary .title{ font-size: clamp(22px, 3vw, 34px); font-weight:800; margin:0 0 10px; color:var(--brand-d); }
.ratingline{ display:flex; gap:10px; align-items:center; color:var(--muted); margin-bottom:10px; }
.ratingline .stars{ font-weight:700; color:#f59e0b; }
.pricebox{ display:flex; align-items:flex-end; gap:10px; margin:16px 0 12px; }
.pricebox .current{ font-size: clamp(20px, 3vw, 28px); font-weight:800; color:var(--brand-d); }
.pricebox .old{ text-decoration:line-through; color:var(--muted); }
.pricebox .badge{ background:var(--danger); color:#fff; padding:4px 8px; border-radius:6px; font-weight:700; }
.pricebox .taxnote{ width:100%; color:var(--muted); font-size:12px; }

/* Options */
.options .optgroup{ margin:14px 0; }
.options .opttitle{ font-weight:700; margin-bottom:6px; color:var(--brand-d); }
.options .optchips{ display:flex; gap:8px; flex-wrap:wrap; }
.options .chip{ display:inline-block; }
.options .chip input{ display:none; }
.options .chip span{
  display:inline-block; background:var(--chip); border:1px solid var(--line);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-size:14px; color:var(--brand-d);
}
.options .chip input:checked + span{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(109,40,217,.15); background:#fff; color:var(--brand-d); }

/* USP */
.usp{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin:16px 0 18px; padding:0; list-style:none; }
.usp li{ background:#ffffff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; box-shadow:0 2px 10px rgba(109,40,217,.06); }
.uspt{ font-weight:700; color:var(--brand-d); }
.usps{ color:var(--muted); font-size:13px; }

/* CTA */
.buyrow{ display:flex; align-items:center; gap:12px; margin:18px 0 10px; flex-wrap:wrap; }
.buyrow .qty{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.buyrow .qty input{ width:96px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
.btn-primary{ background:var(--brand); color:#fff; border:none; padding:12px 18px; border-radius:12px; font-weight:700; box-shadow:0 12px 30px rgba(109,40,217,.22); }
.btn-primary:hover{ background:var(--brand-d); }
.btn-ghost{ background:#fff; border:1px solid var(--line); padding:12px 14px; border-radius:12px; cursor:pointer; }
.icon-heart.active{ color:#e11d48; }

/* Paiements */
.payments{ display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:12px; margin-top:10px; }
.payments .picons{ display:flex; gap:10px; align-items:center; }
.payments img{ height:22px; filter: grayscale(10%); }

/* Info panels */
.info{ margin-top:34px; }
.info details{ border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:10px; }
.info summary{ cursor:pointer; padding:14px 16px; font-weight:700; color:var(--brand-d); }
.info .content{ padding:0 16px 16px; color:#3f3a5a; }

/* Reviews */
.reviews{ margin-top:36px; }
.reviews h2{ color:var(--brand-d); }
.review{ border-bottom:1px solid var(--line); padding:14px 0; }
.review header{ display:flex; justify-content:space-between; align-items:center; }
.review .rstars{ color:#f59e0b; font-weight:700; }

/* Suggestions */
.suggestions{ margin-top:38px; }
.sugg-title{ font-size: clamp(20px, 3vw, 26px); font-weight:800; margin-bottom:14px; color:var(--brand-d); }
.sugg-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width: 992px){ .sugg-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .sugg-grid{ grid-template-columns: repeat(2,1fr); } }

.sugg-card{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; transition:transform .15s ease, box-shadow .15s ease; }
.sugg-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(109,40,217,.12); }
.sugg-img{ position:relative; display:block; }
.sugg-img img{ width:100%; height:200px; object-fit:cover; display:block; }
.sugg-badge{ position:absolute; left:10px; top:10px; background:var(--danger); color:#fff; padding:4px 8px; border-radius:6px; font-weight:700; font-size:12px; }
.sugg-body{ padding:10px 12px; }
.sugg-name{ display:block; color:var(--txt); text-decoration:none; font-weight:700; margin-bottom:6px; }
.sugg-name:hover{ color:var(--brand-d); }
.sugg-price{ display:flex; gap:8px; align-items:center; }
.sugg-price .now{ color:var(--brand-d); font-weight:800; }
.sugg-price .was{ color:var(--muted); }

/* Sticky mobile bar */
.stickybar{ position:fixed; left:0; right:0; bottom:-100px; display:flex; justify-content:space-between;
  background:#fff; border-top:1px solid var(--line); padding:10px 14px; transition:bottom .2s ease; z-index:20; }
.sprice{ font-weight:800; color:var(--brand-d); }
.sbtn{ background:var(--brand); color:#fff; padding:10px 16px; border-radius:10px; text-decoration:none; }
@media (max-width: 768px){
  .stickybar{ bottom:0; } /* visible sur mobile */
}
/* ===== Buy row (Qty + Add to cart + Heart) ===== */
.buyrow{
  display:flex;
  align-items:center;
  gap:12px;              /* space between groups */
  flex-wrap:wrap;        /* allows wrap on small screens */
  margin-top:8px;
}

/* Left part: qty + button */
.buyrow__cart{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Qty box */
.buyrow .qty{ display:flex; align-items:center; gap:8px; }
.buyrow .qty label{ font-size:14px; color:#666; }
.buyrow .qty input{
  width:80px;            /* compact */
  height:44px;           /* same height as buttons */
  border-radius:12px;
  padding:0 10px;
  border:1px solid #e8e6ff;
  background:#fff;
}

/* Primary CTA */
.buyrow .btn-primary{
  height:44px;
  padding:0 20px;
  border-radius:14px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(90deg,#7b2cbf,#9d4edd);
  border:none;
  color:#fff;
}

/* Heart button */
.buyrow__fav .btn-ghost,
.buyrow > .btn-ghost{
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid #e8e6ff;
  background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.icon-heart{ font-style:normal; }
.icon-heart:before{ content:"♡"; font-size:18px; color:#7b2cbf; }
.icon-heart.active:before{ content:"♥"; }

/* RTL niceties */
.product-show.rtl .buyrow{ justify-content:flex-start; }
.product-show.rtl .qty label{ margin-inline-start:0; margin-inline-end:0; }

/* Optional: very small screens, stack neatly */
@media (max-width:420px){
  .buyrow__cart{ flex:1; }
  .buyrow{ gap:10px; }
  .buyrow .btn-primary{ flex:1; }  /* button stretches nicely */
}
/* --- Options avec images --- */
.optchips {
  display: flex; flex-wrap: wrap; gap: 10px;
}

.chip--opt {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 999px;
  background: #fff; cursor: pointer; transition: .15s ease-in-out;
}
.chip--opt:hover { box-shadow: 0 4px 10px rgba(0,0,0,.06); }
.chip--opt .chip__input { display: none; }

.chip__img {
  width: 36px; height: 36px; border-radius: 8px; object-fit: cover;
  background: #f3f4f6; flex: 0 0 36px;
}
.chip__img--ph {
  display: grid; place-items: center; font-size: 18px; color: #9ca3af;
}

.chip__text { display: flex; flex-direction: column; line-height: 1.1; }
.chip__title { font-weight: 600; }
.chip__price { color: #6b7280; font-size: .88rem; }

/* État sélectionné (quand le radio est checked) */
.chip--opt .chip__input:checked + .chip__img,
.chip--opt .chip__input:checked ~ .chip__text {
  /* rien ici car l’input est placé avant l’image; on stylise via :has si supporté */
}
.chip--opt:has(.chip__input:checked) {
  border-color: #a78bfa; background: #f5f3ff;
}