/* ============================================================
   Wolvex — SEO landing pages (e.g. Beakers for Elderly)
   ============================================================ */
.landing-page{padding-top:8px;padding-bottom:56px;}

/* Hero */
.landing-hero{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);
    padding:32px;margin-bottom:32px;box-shadow:var(--shadow-sm);
}
.landing-hero h1{margin:0 0 12px;font-size:clamp(1.6em,4vw,2.2em);}
.landing-lead{color:var(--ink-deep);max-width:70ch;font-size:1.05em;line-height:1.55;margin:0 0 18px;}
.landing-usps{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 22px;}
.landing-usps li{color:var(--navy);font-weight:700;font-size:.95em;}

/* Section titles */
.landing-section-title,.landing-guide h2,.landing-reads h2,.landing-faq h2{
    font-size:1.35em;margin:0 0 18px;
}
.landing-products{margin-bottom:44px;}
/* Turn the shared .prod-card (which defaults to carousel flex sizing) into an
   even responsive grid — same treatment the category page gives it. */
.landing-products .grid.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-bottom:0;}
.landing-products .grid.product-grid .prod-card{flex:none;}

/* Buying guide cards */
.landing-guide{margin-bottom:44px;}
.landing-guide>p{color:var(--slate);max-width:70ch;margin:0 0 20px;}
.landing-guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.landing-guide-card{
    background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius-m);padding:20px;
}
.landing-guide-card h3{margin:0 0 8px;font-size:1.05em;color:var(--ink);}
.landing-guide-card p{margin:0;color:var(--slate);font-size:.94em;line-height:1.5;}

/* Related reads */
.landing-reads{margin-bottom:44px;}
.landing-reads-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.landing-read-card{
    display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--radius-m);overflow:hidden;text-decoration:none;color:inherit;
    transition:box-shadow var(--transition-fast),transform var(--transition-fast);
}
.landing-read-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.landing-read-card img{width:100%;height:170px;object-fit:cover;display:block;}
.landing-read-body{padding:16px;display:flex;flex-direction:column;gap:8px;}
.landing-read-body h3{margin:0;font-size:1.05em;color:var(--ink);}
.landing-read-body p{margin:0;color:var(--slate);font-size:.9em;line-height:1.45;}
.landing-read-link{color:var(--navy);font-weight:700;font-size:.9em;margin-top:auto;}

/* FAQ */
.landing-faq{max-width:800px;}
.landing-faq-item{
    border:1px solid var(--line);border-radius:var(--radius-m);padding:14px 18px;margin-bottom:12px;
    background:var(--paper);
}
.landing-faq-item summary{
    cursor:pointer;font-weight:700;color:var(--ink);list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.landing-faq-item summary::-webkit-details-marker{display:none;}
.landing-faq-item summary::after{content:'+';font-size:1.3em;color:var(--navy);line-height:1;}
.landing-faq-item[open] summary::after{content:'\2013';}
.landing-faq-item p{margin:12px 0 0;color:var(--ink-deep);line-height:1.55;font-size:.96em;}

/* Cross-links to the other landing collections */
.landing-collections{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);}
.landing-collections-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px;}
.landing-collections-list a{
    display:inline-block;background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius-full);
    padding:10px 18px;color:var(--navy);font-weight:700;font-size:.95em;text-decoration:none;
    transition:background var(--transition-fast),border-color var(--transition-fast);
}
.landing-collections-list a:hover{background:var(--paper);border-color:var(--navy);}

@media (max-width:560px){
    .landing-hero{padding:22px;}
}