/* =====================================================================
   BoxHound /int — SCALE CORRECTIONS
   Loaded after the live style.css (left untouched so this file is the diff).
   Goal: every logical section fits a 1440x800 and 1366x768 viewport,
   content width ~1140px, type/spacing in line with the WoodRanger and
   Grounded Footwear landing pages.
   Only sizes, paddings, widths and grid ratios change. Copy/markup/order
   are identical to the live page.
   ===================================================================== */

/* ---------- global container: 1250px -> 1140px ---------- */
@media (min-width: 1200px) {
    .container,
    .herosec .container,
    .pcsec .container { max-width: 1140px; }
}
@media (min-width: 1440px) {
    .container,
    .herosec .container,
    .pcsec .container { max-width: 1140px; }
}
/* the live file scales the root font up from 1600px; cap it so big screens keep the same proportions */
@media screen and (min-width: 1600px) {
    html { font-size: 62.5%; }
    .container, .herosec .container, .pcsec .container { max-width: 1200px; }
}

/* ---------- shared CTA ---------- */
.cartbtn { padding: 1.4rem 3.6rem; font-size: 1.7rem; }
.offrbtn img { max-height: 1.6rem; }
.shipinfo { margin-top: 1rem; font-size: 1.3rem; gap: 1.2rem; }
.shipinfo img { width: 1.8rem; }

/* ---------- topbar + header (123px -> ~96px) ---------- */
.topbar { padding: 0.6rem 0; }
.topbar p { font-size: 1.4rem; line-height: 2.4rem; }
.topbar p span.code { padding: 0 0.7rem; border-radius: 6px; }
.headersec { padding: 0.8rem 0; }
.logo img { max-height: 4.2rem; }
@media (min-width: 576px) { .headersec .offrbtn { padding: 0.9rem 2rem; font-size: 1.5rem; border-radius: 0.8rem; } }

/* ---------- HERO (744px -> ~610px, fully above the fold incl. thumbs, CTA and review) ---------- */
.herosec { padding: 2.4rem 0 2.8rem; }
@media (min-width: 992px) {
    .herosec .heroleft { flex: 0 0 43%; max-width: 43%; }
    .herosec .heroright { flex: 0 0 57%; max-width: 57%; padding-left: 4rem; }
    .heroleft .heroslider,
    .heroleft .herothumbs { max-width: 46rem; margin-left: auto; margin-right: auto; }
}
.herothumbs { gap: 0.8rem; margin-top: 0.8rem; }
.herothumbs button { flex: 0 1 10.8rem; }
.herothumbs button img { max-width: 10.8rem; height: 8.4rem; border-radius: 0.6rem; }
.heroslider .item img { border-radius: 1rem; }
.heroslider.owl-carousel .owl-nav button.owl-prev,
.heroslider.owl-carousel .owl-nav button.owl-next { width: 8%; }
.ratingpill { padding: 0.6rem 1.2rem; font-size: 1.25rem; }
.ratingpill .stars { height: 1.5rem; }
.ratingpill .verified { font-size: 1.3rem; }
.herosec h1 { margin: 1.2rem 0 0.8rem; font-size: 3.8rem; line-height: 4.3rem; }
.herolead { margin-bottom: 1.2rem; font-size: 1.5rem; line-height: 2.2rem; }
.featurelist li { gap: 1.2rem; margin-bottom: 0.5rem; font-size: 1.5rem; line-height: 2.2rem; }
.featurelist li img { width: 1.8rem; height: 1.8rem; }
.ctarow { gap: 1.6rem; margin: 1.4rem 0 1.2rem; }
.stamp { width: 9.6rem; }
.reviewbox { gap: 1.2rem; }
.reviewbox .avatar { width: 4.4rem; height: 4.4rem; }
.reviewbox .stars { height: 1.4rem; margin-bottom: 0.4rem; }
.reviewbox p { font-size: 1.3rem; line-height: 1.9rem; }
.reviewbox .reviewer { margin-top: 0.4rem; font-size: 1.3rem; }

/* ---------- AS ADVERTISED IN (137px -> ~95px) ---------- */
.advertisesec { padding: 1.6rem 0 1.8rem; }
.advertisetitle { font-size: 1.3rem; line-height: 1.8rem; margin-bottom: 1.2rem; }
@media (min-width: 992px) {
    .advertiselist { max-width: 96rem; margin: 0 auto; }
    .advertiselist li:nth-child(1) img { width: 11.2rem; }
    .advertiselist li:nth-child(2) img,
    .advertiselist li:nth-child(3) img { width: 11rem; }
    .advertiselist li:nth-child(4) img,
    .advertiselist li:nth-child(5) img { width: 13.8rem; }
}

/* ---------- WHY THE UTILITY KNIFE (1226px -> ~750px) ---------- */
.whysec { padding: 4.4rem 0; }
.whytitle { font-size: 3.6rem; line-height: 4.2rem; margin-bottom: 1.4rem; }
.whylead { max-width: 84rem; margin-bottom: 2.6rem; font-size: 1.5rem; line-height: 2.2rem; }
/* both photos scaled by the same factor (0.565) so the "good" one stays the taller, overlapping card */
.whyimgbad { width: 26.9rem; border-radius: 1.4rem; box-shadow: 8px 12px 60px 0 rgba(0, 0, 0, 0.10); }
.whyimggood { width: 29.5rem; margin-left: -0.9rem; border-radius: 1.4rem; box-shadow: 8px 12px 60px 0 rgba(0, 0, 0, 0.10); }
.whycta { margin-top: 2.6rem; }
.whycta .cartbtn, .pccta .cartbtn, .pilecta .cartbtn, .speccta .cartbtn, .faqcta .cartbtn { display: inline-flex; }

/* ---------- POWERFUL CUTTING (each row ~340-380px; header + first row on one screen) ---------- */
.pcsec { padding: 5rem 0 5rem; }
.pctitle { font-size: 3.6rem; line-height: 4.2rem; margin-bottom: 1.4rem; }
.pclead { max-width: 76rem; font-size: 1.5rem; line-height: 2.2rem; }
@media (min-width: 1200px) {
    .pcrow { gap: 5rem; margin-top: 4.4rem; justify-content: center; }
    .pcimg { width: 58rem; border-radius: 0.8rem; }      /* 670 -> 580 (348px tall) */
    .pctext { width: 47rem; }
    .pccard { margin-top: 4.4rem; gap: 3rem; border-radius: 0.8rem; }
    .pccardtext { width: 50rem; padding: 3rem 0 3rem 4.4rem; }
    .pccardimg { width: 54rem; }                           /* 626 -> 540 (352px tall) */
}
.pcheading { font-size: 2.4rem; line-height: 3rem; margin-bottom: 1.2rem; }
.pcbody { font-size: 1.6rem; line-height: 2.5rem; }
.pcreview { margin-top: 1.8rem; }
.pcstars { height: 1.4rem; margin-bottom: 0.6rem; }
.pcreview p { font-size: 1.4rem; line-height: 2.1rem; }
p.pcname { margin-top: 0.8rem; }
.pccta { margin-top: 4.4rem; }

/* ---------- SMALL ENOUGH FOR THE DRAWER (1095px -> 760px) ----------
   The exploded artwork is pinned to 760px tall (1000px wide) and centred; the
   section background continues the artwork's dark gradient at the sides. */
@media (min-width: 768px) {
    .pilesec { background: linear-gradient(90deg, #131719 0%, #131719 50%, #1a3034 100%); }
    .pilewrap { max-width: 100rem; margin: 0 auto; }
    .pilewrap::before, .pilewrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6rem; z-index: 1; pointer-events: none; }
    .pilewrap::before { left: 0; background: linear-gradient(90deg, #131719, rgba(19, 23, 25, 0)); }
    .pilewrap::after { right: 0; background: linear-gradient(270deg, #1a3034, rgba(26, 48, 52, 0)); }
    .pilehead, .pilecta { z-index: 2; }
    .pilehead { top: 4.2%; }
    .piletitle { font-size: 3.2rem; line-height: 3.7rem; margin-bottom: 0.8rem; }
    .pilelead { font-size: 1.4rem; line-height: 2rem; }
    .pilecta { bottom: 4%; }
    .pilecta .cartbtn { padding: 1.3rem 3.2rem; font-size: 1.6rem; }
    .pilecta .shipinfo { margin-top: 0.8rem; font-size: 1.25rem; }
}

/* ---------- SPECIFICATIONS (909px -> ~700px) ---------- */
.specsec { padding: 4.4rem 0; }
.spechead { margin-bottom: 2.6rem; }
.speclogo { width: 13rem; }
.speclead { margin-top: 0.6rem; font-size: 1.5rem; }
@media (min-width: 992px) {
    .speccard { margin: 0 auto; max-width: 104rem; }
    .specimg { width: 56%; }                     /* 771x504 art -> ~580x380 */
    .speclist { padding: 0 3rem; }
    .speclist li { padding: 1.1rem 0; }
    .speckey, .specval { font-size: 1.5rem; line-height: 2rem; }
    .speckey img { width: 1.4rem; height: 1.4rem; }
}
.speccta { margin-top: 3rem; }

/* ---------- ONE TOOL / FEATURE CARDS (1160px -> ~740px, 3x2 grid on one screen) ---------- */
.feature-sec { padding: 4.4rem 0 3rem; }
.featurehead { margin-bottom: 2.6rem; }
.featurehead h2 { font-size: 3.4rem; line-height: 4rem; margin-bottom: 0; }
.featurecards { --bs-gutter-x: 2rem; }
.featurecards .col-md-4 { margin-bottom: 2rem; }
.featurecard { border-radius: 0.8rem; }
.featurecard .featurecardimg { height: 15rem; }          /* 250 -> 150 */
.featurecardbody { padding: 1.6rem 2rem 1.8rem; }
.featurecardtitle { margin-bottom: 0.6rem; font-size: 1.7rem; }
.featurecardtext { font-size: 1.4rem; line-height: 2.1rem; }

/* ---------- REVIEWS (1555px -> ~760px) ----------
   Rating summary row is tightened; on desktop the six cards sit in a 3x2 grid
   with the photo on the left of each card (same image, same text). */
.review-sec { padding: 4.4rem 0 3rem; }
.reviewhead { margin-bottom: 2.4rem; }
.reviewhead h1 { font-size: 3.4rem; line-height: 4rem; }
.reviewsummary { margin-bottom: 2.6rem; }
.ratinglist li { padding: 0.55rem 0; gap: 1rem; }
.ratinglist .label { font-size: 1.5rem; }
.ratinglist img { height: 1.7rem; }
.ratinglist .score { font-size: 1.5rem; }
.ratingbig h3 { font-size: 6.4rem; line-height: 6.8rem; }
.ratingbig img { height: 2rem; margin: 0.4rem 0 1rem; }
.ratingbig p { font-size: 1.6rem; line-height: 1.4; }
@media (min-width: 992px) {
    .reviewgridimg { max-width: 36rem; margin-left: auto; }
    .reviewcards { --bs-gutter-x: 2rem; }
    .reviewcards .col-md-6 { margin-bottom: 2rem; }
    .reviewcard { display: flex; gap: 1.4rem; padding: 1.4rem; border-radius: 1rem; }
    .reviewcard picture { flex: 0 0 11.5rem; display: block; }
    .reviewcard .reviewcardimg { width: 11.5rem; height: 100%; min-height: 15rem; border-radius: 0.6rem; }
    .reviewcardbody { padding-top: 0; min-width: 0; flex: 1; }
    .reviewcardmeta { flex-wrap: wrap; margin-bottom: 0.4rem; gap: 0.2rem 0.6rem; }
    .reviewcard .cardstars { height: 1.4rem; }
    .reviewername, .verifiedtag, .reviewdate { font-size: 1.15rem; }
    .reviewtext { font-size: 1.3rem; line-height: 1.9rem; margin-top: 0.6rem; }
}

/* ---------- LIMITED OFFER (578px -> ~470px) ---------- */
.limited-sec { padding: 6rem 0; }
.limited-sec .limitedheading { margin: 1.6rem 0 1.8rem; font-size: 3.6rem; line-height: 4.2rem; }
.limited-sec .limitedlist { margin-bottom: 2rem; }
.limited-sec .limitedlist li { margin-bottom: 0.8rem; font-size: 1.5rem; }

/* ---------- FAQ (1445px -> ~760px with the first answer open) ---------- */
.faq-sec { padding: 4rem 0 4rem; }
.faqhead { margin-bottom: 2.4rem; }
.faqhead h1 { font-size: 3.4rem; line-height: 4rem; }
.faqaccordion .accordion-item { margin-bottom: 0.8rem; box-shadow: rgba(149, 157, 165, 0.15) 0 4px 12px; }
.faqaccordion .accordion-button { padding: 1.25rem 6rem 1.25rem 2.4rem; font-size: 1.6rem; line-height: 2.2rem; }
.faqaccordion .accordion-button::after,
.faqaccordion .accordion-button::before { right: 2.4rem; width: 1.5rem; }
.faqaccordion .accordion-body { padding: 0 2.4rem 1.6rem; font-size: 1.45rem; line-height: 1.55; }
.faqcta { margin-top: 2.8rem; }

/* ---------- FOOTER ---------- */
footer { padding: 3rem 0 2rem; }
.ftlogo img { max-height: 6rem; }
.ftnav { margin-top: 1.6rem; }
.ftdisclaimer { margin-top: 2.4rem; }
.ftdisclaimer p { margin-bottom: 1.8rem; font-size: 1.15rem; }
.ftbottom { margin-top: 2.4rem; padding-top: 1.6rem; }

/* =====================================================================
   1200-1399 (incl. 1366x768): same layout, slightly tighter
   ===================================================================== */
@media (min-width: 1200px) and (max-width: 1399px) {
    .herosec h1 { font-size: 3.6rem; line-height: 4.1rem; }
    .heroleft .heroslider, .heroleft .herothumbs { max-width: 44rem; }
    .whyimgbad { width: 26.2rem; }
    .whyimggood { width: 28.7rem; }
}

/* =====================================================================
   992-1199: live stylesheet switches pc rows to % widths — keep them sane
   ===================================================================== */
@media (min-width: 992px) and (max-width: 1199px) {
    .pcrow { gap: 3rem; margin-top: 4rem; }
    .pcimg { width: 52%; }
    .pctext { width: 44%; }
}

/* =====================================================================
   MOBILE (<=767px) — sized like the reference landers at 390px
   ===================================================================== */
@media screen and (max-width: 767px) {
    .topbar p { font-size: 1.2rem; line-height: 2rem; }
    .herosec { padding: 1.6rem 0 3.2rem; }
    .herosec h1 { margin: 1.6rem 0 1rem; font-size: 2.8rem; line-height: 3.3rem; }
    .herolead { margin-bottom: 1.6rem; font-size: 1.5rem; line-height: 2.2rem; }
    .featurelist li { font-size: 1.5rem; }
    .herothumbs button img { height: 7.2rem; }
    .whysec { padding: 3.6rem 0; }
    .whytitle, .pctitle { font-size: 2.6rem; line-height: 3.1rem; }
    .whylead { font-size: 1.5rem; line-height: 2.3rem; margin-bottom: 2.4rem; }
    .whyimgbad, .whyimggood { width: 100%; max-width: 30rem; }
    .whyimggood { margin-top: -4rem; }
    .whycta { margin-top: 2.8rem; }
    .pcsec { padding: 3.6rem 0; }
    .pcrow { margin-top: 3.6rem; gap: 1.8rem; }
    .pcheading { font-size: 2rem; line-height: 2.6rem; }
    .pcbody { font-size: 1.5rem; line-height: 2.4rem; }
    .pccard { margin-top: 3.6rem; }
    .pccta { margin-top: 3.2rem; }
    .piletitle { font-size: 2.6rem; line-height: 3rem; margin-bottom: 1.2rem; }
    .specsec { padding: 3.6rem 0; }
    .speccta { margin-top: 2.4rem; }
    .feature-sec { padding: 3.6rem 0 2rem; }
    .featurehead h2, .reviewhead h1, .faqhead h1 { font-size: 2.6rem; line-height: 3.1rem; }
    .featurehead { margin-bottom: 2.4rem; }
    .featurecard .featurecardimg { height: auto; aspect-ratio: 417 / 249; }
    .featurecardbody { padding: 1.6rem 1.8rem 2rem; }
    .featurecardtitle { font-size: 1.6rem; }
    .featurecardtext { font-size: 1.4rem; line-height: 2.2rem; }
    .featurecards .col-md-4 { margin-bottom: 1.6rem; }
    .review-sec { padding: 3.6rem 0 2.4rem; }
    .ratingbig h3 { font-size: 5.6rem; line-height: 6rem; }
    .reviewcard { padding: 1.6rem; }
    .reviewcardbody { padding-top: 1.4rem; }
    .reviewername, .verifiedtag, .reviewdate { font-size: 1.15rem; }
    .reviewtext { font-size: 1.4rem; line-height: 2.2rem; }
    .reviewcards .col-md-6 { margin-bottom: 1.6rem; }
    .limited-sec { padding: 0 0 4rem; }
    .limited-sec .limitedheading { font-size: 2.6rem; line-height: 3.2rem; }
    .faq-sec { padding: 3.6rem 0 4rem; }
    .faqhead { margin-bottom: 2.4rem; }
    .faqaccordion .accordion-button { padding: 1.4rem 5rem 1.4rem 1.8rem; font-size: 1.5rem; line-height: 2.2rem; }
    .faqaccordion .accordion-button::after,
    .faqaccordion .accordion-button::before { right: 1.8rem; }
    .faqaccordion .accordion-body { padding: 0 1.8rem 1.6rem; font-size: 1.4rem; }
    .faqcta { margin-top: 2.8rem; }
    footer { padding-bottom: 9rem; }
}
@media screen and (max-width: 575px) {
    .cartbtn { font-size: 1.6rem; padding: 1.4rem 1.6rem; }
    .headersec { padding: 1rem 0; }
}

/* ---------- final trims so feature / review / FAQ blocks stay under 768px ---------- */
@media (min-width: 768px) {
    .feature-sec { padding: 4rem 0 4rem; }
    .featurecard .featurecardimg { height: 14rem; }
    .featurecards > div:nth-last-child(-n+3) { margin-bottom: 0; }
    .review-sec { padding: 4rem 0 4rem; }
    .reviewsummary { margin-bottom: 1.8rem; }
    .reviewhead { margin-bottom: 1.8rem; }
    .reviewcards > div:nth-last-child(-n+3) { margin-bottom: 0; }
    .faq-sec { padding: 3.6rem 0 3.6rem; }
    .faqhead { margin-bottom: 2rem; }
    .faqaccordion .accordion-item { margin-bottom: 0.6rem; }
    .faqaccordion .accordion-button { padding-top: 1.1rem; padding-bottom: 1.1rem; }
}