/* ============================================================
   pages/product.css — product page template
   (WooCommerce Premium / Lite / PrestaShop / Cafetito)
   ============================================================ */

/* ---- Product hero ---- */
.prod-hero{position:relative;overflow:hidden;padding-block:var(--s8) var(--s7)}
.prod-hero::before{content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background:radial-gradient(760px 360px at 88% -10%,var(--primary-soft),transparent 60%),radial-gradient(520px 300px at -5% 10%,var(--accent-soft),transparent 62%)}
.prod-hero__in{position:relative;max-width:760px}
.prod-hero .badges{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5)}
.prod-hero h1{font-size:clamp(2.2rem,4.6vw,var(--t-5xl));letter-spacing:-.03em}
.prod-hero p.lead{font-size:var(--t-xl);color:var(--text-muted);margin-top:var(--s5);max-width:60ch}
.prod-hero .cta{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap}
.prod-hero .quick{display:flex;gap:var(--s6);margin-top:var(--s7);flex-wrap:wrap}
.prod-hero .quick .q{display:flex;flex-direction:column;gap:2px}
.prod-hero .quick .q b{font-family:var(--font-display);font-size:var(--t-2xl);letter-spacing:-.02em}
.prod-hero .quick .q span{font-size:var(--t-xs);color:var(--text-muted)}
@media (max-width:560px){.prod-hero .cta .btn{width:100%}}

/* ---- Method / feature tile grids ---- */
.method-grid{grid-template-columns:repeat(3,1fr)}
.feature-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.method-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.method-grid,.feature-grid{grid-template-columns:1fr}}

/* compact method tile */
.mini-tile{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s5)}
.mini-tile .mt-ico{width:42px;height:42px;flex:0 0 auto;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-2);color:var(--primary);display:grid;place-items:center}
.mini-tile .mt-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.mini-tile h3{font-size:var(--t-base);font-family:var(--font-body);font-weight:var(--fw-semibold);margin-bottom:3px}
.mini-tile p{font-size:var(--t-sm);color:var(--text-muted)}

/* ---- Tech data two-up ---- */
.tech-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
@media (max-width:860px){.tech-split{grid-template-columns:1fr}}
.spec-list{list-style:none;padding:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.spec-list li{display:flex;justify-content:space-between;gap:var(--s4);padding:13px var(--s5);border-bottom:1px solid var(--border);font-size:var(--t-sm)}
.spec-list li:last-child{border-bottom:0}
.spec-list li span:first-child{color:var(--text-muted)}
.spec-list li span:last-child{font-weight:var(--fw-semibold);text-align:right}
.spec-list .yes{color:var(--accent)}

/* ---- Pricing ---- */
.pricing-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
@media (max-width:860px){.pricing-grid{grid-template-columns:1fr}}
.price-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);position:relative;transition:var(--normal)}
.price-card:hover{box-shadow:var(--sh-md)}
.price-card.is-best{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--sh-md)}
.price-card .term{font-family:var(--font-mono);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-subtle)}
.price-card .amount{font-family:var(--font-display);font-size:var(--t-4xl);font-weight:var(--fw-bold);letter-spacing:-.03em;line-height:1}
.price-card .amount small{font-size:var(--t-base);font-weight:var(--fw-regular);color:var(--text-muted)}
.price-card .save{align-self:flex-start}
.price-card ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;margin-top:var(--s2)}
.price-card ul li{display:flex;gap:9px;font-size:var(--t-sm);color:var(--text-muted);align-items:flex-start}
.price-card ul li svg{width:17px;height:17px;flex:0 0 auto;color:var(--accent);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.pricing-note{margin-top:var(--s5);font-size:var(--t-sm);color:var(--text-muted);text-align:center}

/* ---- FAQ width ---- */
.faq-wrap{max-width:820px}