/* ==========================================================================
   Larius Agency — product page (card-recensioni.html)
   ========================================================================== */

[hidden]{ display:none !important; }

.order-banner{
  background: rgba(60,125,118,0.16);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.order-banner-inner{ display:flex; align-items:flex-start; gap:14px; }
.order-banner-icon{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background: var(--teal); color: var(--bg);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}
.order-banner-inner strong{ font-family: var(--font-display); font-size:1rem; }
.order-banner-inner p{ color: var(--text-dim); font-size:.9rem; margin-top:4px; }

.product-hero{ padding-top: 150px; }
.product-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:start;
}

/* ---------- gallery ---------- */
.product-visual{
  aspect-ratio: 1/1;
  max-width: 380px;
  margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
}
.pv-photo{ width:100%; height:100%; }
.pv-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.product-gallery-note{ margin-top:16px; font-size:.78rem; color: var(--text-faint); text-align:center; }

/* ---------- buy box ---------- */
.buy-box .eyebrow{ margin-bottom:14px; }
.product-title{ font-size: clamp(1.8rem, 3vw, 2.4rem); line-height:1.1; margin-bottom:16px; }
.product-sub{ color: var(--text-dim); font-size:1rem; line-height:1.6; margin-bottom:30px; }

.qty-options{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.qty-option{
  position:relative;
  background: var(--bg-elev); border:1px solid var(--line); border-radius:14px;
  padding: 18px 16px; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:4px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.qty-option:hover{ border-color: var(--text-dim); }
.qty-option.active{ border-color: var(--accent); background: rgba(216,168,87,0.08); }
.qty-option-label{ font-size:.85rem; color: var(--text-dim); font-weight:600; }
.qty-option.active .qty-option-label{ color: var(--text); }
.qty-option-price{ font-family: var(--font-display); font-size:1.4rem; font-weight:600; color: var(--text); }
.qty-option-price small{ font-size:.6em; font-weight:400; color: var(--text-dim); }
.qty-badge{
  position:absolute; top:-10px; right:12px;
  background: var(--accent); color:#14110a;
  font-size:.65rem; font-weight:700; padding:4px 10px; border-radius:100px;
}

.variant-picker{ margin-bottom:24px; }
.variant-picker-label{ font-size:.85rem; color: var(--text-dim); font-weight:600; margin-bottom:10px; }
.variant-slot{
  display:flex; align-items:center; gap:10px;
  background: var(--bg-elev); border:1px solid var(--line); border-radius:12px;
  padding: 8px 10px; margin-bottom:8px;
}
.variant-slot-badge{
  flex-shrink:0; width:19px; height:19px; border-radius:50%;
  background: var(--accent-soft); color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:.66rem; font-weight:700; font-family: var(--font-display);
}
.variant-slot-label{ font-size:.76rem; color: var(--text-dim); flex-shrink:0; width:70px; }
.variant-choice-group{ display:flex; gap:6px; flex:1; }
.variant-choice{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:5px;
  background: var(--bg); border:1px solid var(--line); color: var(--text-dim);
  font-family: var(--font-body); font-size:.76rem; font-weight:600;
  padding: 7px 8px; border-radius:7px; cursor:pointer; text-align:center;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.variant-choice svg{ width:12px; height:12px; flex-shrink:0; }
.variant-choice:hover{ color: var(--text); border-color: var(--text-dim); }
.variant-choice.active{ background: var(--accent); border-color: var(--accent); color:#14110a; }
.variant-picker-hint{ font-size:.74rem; color: var(--text-faint); margin-top:2px; }

.buy-total{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 16px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
  margin-bottom:22px; font-size:.92rem; color: var(--text-dim);
}
.buy-total strong{ font-family: var(--font-display); font-size:1.6rem; color: var(--text); }

.buy-cta{ width:100%; justify-content:center; margin-bottom:10px; }
.buy-cta[disabled]{ opacity:.6; cursor:default; }

.trust-row{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.trust-row li{ display:flex; gap:10px; align-items:flex-start; color: var(--text-dim); font-size:.88rem; }

/* ---------- come funziona (con foto) ---------- */
.come-funziona-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; align-items:center; }
.come-funziona-visual{
  border-radius:20px; overflow:hidden; border:1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
  aspect-ratio: 4/5;
}
.come-funziona-visual img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- reviews ---------- */
.review-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.review-card{
  background: var(--bg); border:1px solid var(--line); border-radius:16px;
  padding: 28px 26px;
}
.review-stars{ color: var(--accent); font-size:.95rem; letter-spacing:2px; margin-bottom:14px; }
.review-card p{ color: var(--text); font-size:.94rem; line-height:1.6; margin-bottom:16px; }
.review-author{ color: var(--text-faint); font-size:.8rem; }
.review-disclaimer{ margin-top:24px; text-align:center; color: var(--text-faint); font-size:.78rem; }

/* ---------- faq ---------- */
.faq-list{ display:flex; flex-direction:column; gap:1px; background: var(--line-soft); border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; }
.faq-item{ background: var(--bg); padding:26px 28px; }
.faq-item h3{ font-size:1rem; font-weight:600; margin-bottom:8px; }
.faq-item p{ color: var(--text-dim); font-size:.92rem; line-height:1.6; }
.faq-item a{ color: var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .product-grid{ grid-template-columns:1fr; gap:48px; }
  .review-grid{ grid-template-columns:1fr; }
  .product-hero{ padding-top:120px; }
  .come-funziona-grid{ grid-template-columns:1fr; gap:36px; }
  .come-funziona-visual{ aspect-ratio: 16/10; max-width:420px; margin:0 auto; }
}
@media (max-width: 620px){
  .qty-options{ grid-template-columns:1fr; }
  .variant-slot{ flex-wrap:wrap; }
  .variant-slot-label{ width:auto; }
}