/* =====================================================================
   BoxHound /int - TYPOGRAPHY (Round 5): follows us.loopearplugs.com
   Loop: one geometric grotesk (Avantt, licensed) for everything, Medium 500
   for headings AND body, sentence case, tight negative tracking, bold 700
   sentence-case CTAs. Free match used here: Figtree (Google Fonts).
   Brand colours, layout and sections are unchanged.
   ===================================================================== */
:root {
    --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --theme-regular-font: var(--font);
    --theme-header-font-bold: var(--font);
    --text-font: var(--font);
    --text-body: #2b2f33;
    --text-lead: #3d4146;
    --text-muted: #6b7280;
    --text-muted-dark: rgba(255, 255, 255, 0.62);
}

/* one family everywhere (icon font excluded) */
body, body *:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) { font-family: var(--font); }
body { font-weight: 500; letter-spacing: -0.02em; }

/* ---------- headings: Medium 500, sentence case, tight ---------- */
h1, h2, h3, h4, .pcheading, .featurecardtitle, .limitedheading, .whytitle, .pctitle, .piletitle {
    font-weight: 500; text-transform: none; font-style: normal;
}
h1 *, h2 *, h3 *, h4 * { font-weight: inherit; text-transform: none; letter-spacing: inherit; }

/* hero H1  (Loop display: 48-64px / 0.96-1.0 / -0.03em) */
.herosec h1 { font-size: 4.8rem; line-height: 1.0; letter-spacing: -0.03em; }
/* section H2  (Loop .text-display-md: 48px / 1.0 / -0.03em) */
.whytitle, .pctitle, .piletitle, .feature-sec h2, .review-sec .reviewhead h1, .limitedheading, .faq-sec .faqhead h1 {
    font-size: 4.4rem; line-height: 1.04; letter-spacing: -0.03em;
}
/* row / card H3  (Loop h3: 32px, -0.03em) */
.pcheading { font-size: 3.2rem; line-height: 1.12; letter-spacing: -0.03em; }
/* small card titles  (Loop h4: 20px / 1.2 / 500) */
.featurecardtitle { font-size: 2rem; line-height: 1.2; letter-spacing: -0.04em; }
/* rating number */
.ratingbig h3 { font-size: 6.4rem; line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
/* FAQ questions: Loop h4 tier */
.faqaccordion .accordion-button { font-weight: 500; font-size: 1.7rem; line-height: 1.3; letter-spacing: -0.02em; color: #111; }

/* ---------- body: Medium 500. Leads 20/28, body 16/24 (Loop) ---------- */
.herolead, .whylead, .pclead, .pilelead, .speclead {
    font-weight: 500; font-size: 2rem; line-height: 1.4; letter-spacing: -0.016em; color: var(--text-lead);
}
.herolead { color: #1E1E1E; margin-bottom: 1.4rem; }
.pilelead { color: rgba(255, 255, 255, 0.9); }
.pcbody, .featurelist li, .featurecardtext, .limitedlist li, .faqaccordion .accordion-body, .speckey, .specval {
    font-weight: 500; font-size: 1.6rem; line-height: 1.5; letter-spacing: -0.02em; color: var(--text-body);
}
.featurelist li { margin-bottom: 0.6rem; }
.pccard .pcbody { color: rgba(255, 255, 255, 0.86); }
.limited-sec .limitedlist li { color: rgba(255, 255, 255, 0.88); }
.featurelist li strong, .limitedlist li strong, .speckey { font-weight: 700; color: #111; }
.limited-sec .limitedlist li strong { color: #fff; }
.featurecardtext { font-size: 1.5rem; }
.speckey, .specval { color: #000; }

/* rhythm */
.pcheading { margin-bottom: 1rem; }
.pcreview { margin-top: 1.6rem; }
.featurecardtitle { margin-bottom: 0.5rem; }

/* ---------- reviews: Loop sets no italic body; quotes use the body tier, names 600 ---------- */
.reviewbox p, .pcreview p, .reviewtext { font-style: normal; font-weight: 500; letter-spacing: -0.02em; }
.reviewbox p { font-size: 1.6rem; line-height: 1.5; color: var(--text-body); }
.pcreview p { font-size: 1.6rem; line-height: 1.5; color: #44494f; }
.pccard .pcreview p { color: rgba(255, 255, 255, 0.72); }
.reviewtext { font-size: 1.4rem; line-height: 1.45; color: #3f4a44; }
@media (min-width: 768px) { .review-sec { padding-top: 3rem; padding-bottom: 2.8rem; } .reviewhead { margin-bottom: 1.7rem; } .reviewtext { margin-top: 0.5rem; } }
.reviewbox .reviewer, p.pcname, .reviewername { font-style: normal; font-weight: 600; letter-spacing: -0.01em; }
.reviewbox .reviewer, p.pcname { font-size: 1.4rem; color: #111; }
.pccard .pcname { color: #fff; }
.reviewbox .reviewer span, .pcname span { font-weight: 600; }
.review-sec .label, .review-sec .score { font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; }

/* ---------- CTAs: Loop .btn = 700, 20px, line-height 1, -0.32px, sentence case ---------- */
.offrbtn, .cartbtn { font-weight: 700; letter-spacing: -0.016em; text-transform: none; }
.cartbtn, .pilecta .cartbtn { font-size: 2rem; }
@media (min-width: 576px) { .headersec .offrbtn { font-size: 1.6rem; } }

/* ---------- meta: Loop 14px / 500 / +0.03em (review count), muted ---------- */
.shipinfo { font-weight: 500; font-size: 1.4rem; letter-spacing: 0; color: var(--text-muted); }
.shipinfo strong { font-weight: 600; color: #4b5563; }
.shipinfo .ship { font-weight: 600; }
.shipinfo .stock { color: #C45D4A; }
.shipinfo .sep { color: #c4c8cd; }
.pilecta .shipinfo, .limited-sec .shipinfo { color: var(--text-muted-dark); }
.pilecta .shipinfo strong, .limited-sec .shipinfo strong { color: rgba(255, 255, 255, 0.85); }
.limited-sec .shipinfo .sep { color: rgba(255, 255, 255, 0.3); }
.advertisetitle { font-weight: 500; font-size: 1.4rem; color: var(--text-muted); letter-spacing: 0.03em; }
.verifiedtag, .reviewdate { color: var(--text-muted); font-weight: 500; }
.reviewdate { color: #8a9099; }
.ratingbig p { color: var(--text-muted); font-weight: 500; }
.ratingpill span { font-weight: 500; letter-spacing: 0; }
.ratingpill strong { font-weight: 700; }
.topbar p { font-weight: 500; letter-spacing: -0.01em; text-transform: none; }
.topbar strong, .topbar .code { font-weight: 700; }
.ctareassure {
    margin: 0.8rem 0 0; text-align: center; font-size: 1.4rem; line-height: 1.4;
    font-weight: 500; color: var(--text-muted); letter-spacing: 0;
}

/* ---------- footer: disclaimers in the copyright grey ---------- */
.ftdisclaimer p, .ftdisclaimer p a { color: #8EB3BC; font-weight: 400; letter-spacing: 0; }
footer a, .copyright { letter-spacing: 0; }

/* ---------- tablet / small laptop ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
    .herosec h1 { font-size: 4.4rem; }
    .whytitle, .pctitle, .piletitle, .feature-sec h2, .review-sec .reviewhead h1, .limitedheading, .faq-sec .faqhead h1 { font-size: 4rem; }
    .pcheading { font-size: 2.8rem; }
}

/* ---------- mobile (<=767): Loop mobile = h1 35/1.14, subheads 24-26/1.14, body 16/24,
   leads 17/1.35, card titles 700 19/23, CTAs 600 17px -2% ---------- */
@media screen and (max-width: 767px) {
    .herosec h1 { font-size: 3.5rem; line-height: 1.14; letter-spacing: -0.03em; }
    .whytitle, .pctitle, .piletitle, .feature-sec h2, .review-sec .reviewhead h1, .limitedheading, .faq-sec .faqhead h1 {
        font-size: 3.2rem; line-height: 1.1; letter-spacing: -0.03em;
    }
    .pcheading { font-size: 2.6rem; line-height: 1.14; }
    .featurecardtitle { font-size: 1.9rem; line-height: 1.21; font-weight: 700; letter-spacing: -0.02em; }
    .herolead, .whylead, .pclead, .pilelead, .speclead { font-size: 1.7rem; line-height: 1.35; letter-spacing: -0.02em; }
    .pcbody, .featurelist li, .limitedlist li, .faqaccordion .accordion-body, .reviewbox p, .pcreview p { font-size: 1.6rem; line-height: 1.5; }
    .featurecardtext, .reviewtext { font-size: 1.5rem; line-height: 1.45; }
    .faqaccordion .accordion-button { font-size: 1.7rem; }
    .cartbtn, .pilecta .cartbtn { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; }
    .ratingbig h3 { font-size: 5.2rem; }
    .shipinfo, .pilecta .shipinfo, .limited-sec .shipinfo { font-size: 1.3rem; }
}

/* ---------- desktop fit (1440x800 / 1366x768) after the Loop sizes ---------- */
@media (min-width: 992px) {
    .herosec .reviewbox p { font-size: 1.5rem; line-height: 1.45; }
    .herolead { margin-bottom: 1.2rem; }
    .featurelist li { margin-bottom: 0.4rem; }
    .herosec { padding-top: 1.8rem; padding-bottom: 2rem; }
    .whysec { padding-top: 4rem; padding-bottom: 4rem; }
    .faq-sec { padding-top: 3rem; padding-bottom: 3rem; }
    .faqcta { margin-top: 2.4rem; }
}

/* keep the Features section inside a 1366x768 / 1440x800 screen */
@media (min-width: 768px) {
    .feature-sec { padding-top: 3.4rem; padding-bottom: 2.8rem; }
    .featurecardbody { padding: 1.4rem 2rem 1.4rem; }
}

/* ---------- specificity lock: beat legacy .herosec h1 span / .limited-sec .limitedheading etc. ---------- */
html body .herosec h1, html body .herosec h1 span, html body .whytitle, html body .whytitle span,
html body .pctitle, html body .pctitle span, html body .piletitle, html body .piletitle span,
html body .featurehead h2, html body .featurehead h2 span, html body .reviewhead h1, html body .reviewhead h1 span,
html body .limited-sec .limitedheading, html body .limited-sec .limitedheading span,
html body .faqhead h1, html body .faqhead h1 span, html body .pcheading {
    font-weight: 500; text-transform: none; font-style: normal;
}
html body .herosec h1, html body .herosec h1 span { font-size: 4.8rem; line-height: 1.0; letter-spacing: -0.03em; }
html body .whytitle, html body .pctitle, html body .piletitle, html body .featurehead h2, html body .reviewhead h1,
html body .limited-sec .limitedheading, html body .faqhead h1 { font-size: 4.4rem; line-height: 1.04; letter-spacing: -0.03em; }
html body .whytitle span, html body .pctitle span, html body .piletitle span, html body .featurehead h2 span, html body .reviewhead h1 span,
html body .limited-sec .limitedheading span, html body .faqhead h1 span { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
html body .shipinfo, html body .pilecta .shipinfo, html body .limited-sec .shipinfo { font-size: 1.4rem; }
@media (min-width: 768px) and (max-width: 1199px) {
    html body .herosec h1, html body .herosec h1 span { font-size: 4.4rem; }
    html body .whytitle, html body .pctitle, html body .piletitle, html body .featurehead h2, html body .reviewhead h1,
    html body .limited-sec .limitedheading, html body .faqhead h1 { font-size: 4rem; }
}
@media screen and (max-width: 767px) {
    html body .herosec h1, html body .herosec h1 span { font-size: 3.5rem; line-height: 1.14; }
    html body .whytitle, html body .pctitle, html body .piletitle, html body .featurehead h2, html body .reviewhead h1,
    html body .limited-sec .limitedheading, html body .faqhead h1 { font-size: 3.2rem; line-height: 1.1; }
    html body .shipinfo, html body .pilecta .shipinfo, html body .limited-sec .shipinfo { font-size: 1.3rem; }
}