/* Remove the oversized mobile gap above the home-page recycle action. */
@media (max-width: 768px) {
    #homePageContainer .left-center-container { margin: 0; padding: 1rem; }
    #homePageContainer .left-center-container .sell-now-btn { margin-top: 0; margin-bottom: 0; }
}

#homePageContainer .sell-now-btn { position: relative; overflow: hidden; isolation: isolate; }
#homePageContainer .sell-now-btn::after { content: ""; position: absolute; top: -35%; left: -60%; width: 35%; height: 170%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-22deg); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
    #homePageContainer .sell-now-btn:hover::after { animation: homeRecycleShine .7s ease-out; }
}
#homePageContainer .sell-now-btn:focus-visible::after { animation: homeRecycleShine .7s ease-out; }
@keyframes homeRecycleShine { from { left: -60%; } to { left: 140%; } }
@media (prefers-reduced-motion: reduce) { #homePageContainer .sell-now-btn:hover::after, #homePageContainer .sell-now-btn:focus-visible::after { animation: none; } }

@media (hover: none) and (pointer: coarse) {
    #homePageContainer .sell-now-btn.is-shine-visible::after { animation: homeRecycleTouchShine 6s ease-in-out infinite; }
}
@keyframes homeRecycleTouchShine {
    0%, 8% { left: -60%; opacity: 0; }
    10% { opacity: 1; }
    25% { left: 140%; opacity: 1; }
    26%, 100% { left: 140%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { #homePageContainer .sell-now-btn.is-shine-visible::after { animation: none; } }


/* Home layout: small-screen defaults, expanded progressively below. */
.home-content { width: 100%; min-width: 0; }
.home-content *, .home-content *::before, .home-content *::after { box-sizing: border-box; }
.home-content #homePageContainer { height: auto; min-height: 0; display: flex; position: relative; flex-direction: column; }
.home-content #homePageContainer .left-center-container { position: relative; top: auto; left: auto; transform: none; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 1.5rem 1rem; margin: 0; }
.home-content #homePageContainer .sell-now-btn { width: auto; max-width: 100%; min-height: 48px; margin: 0; padding: 1rem 1.5rem; font-size: 1rem; line-height: 1.5; }
.home-content #homePageContainer .features { position: relative; bottom: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: 1rem .75rem; margin: 0; }
.home-content #homePageContainer .features .horizontal-divider { display: none; }
.home-content #homePageContainer .feature { min-width: 0; align-items: center; text-align: center; }
.home-content #homePageContainer .feature-title { font-size: clamp(1rem, 4vw, 1.5rem); line-height: 1.4; }
.home-content #homePageContainer .feature-description { font-size: .7rem; line-height: 1.6; color: #e2edf8; }
.home-content .how-it-works-container { padding: 2rem 1rem; overflow: hidden; }
.home-content .how-it-works-container .title, .home-content .what-we-buy-title, .home-content .feedback-title, .home-content .donations-container .title { font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1.3; margin: 0 0 1.25rem; padding: 0; }
.home-content .how-it-works-container .steps { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 1120px; gap: 1.5rem; margin: 0 auto 1.5rem; }
.home-content .how-it-works-container .step { min-width: 0; height: auto; margin: 0; }
.home-content .how-it-works-container .step-box { width: 100%; padding: 1rem; margin: 0 0 .75rem; }
.home-content .how-it-works-container .step-box img { width: 80px; height: 80px; }
.home-content .how-it-works-container .step-title { font-size: 1.4rem; margin-top: .75rem; }
.home-content .how-it-works-container .step-content { width: 100%; max-width: 36rem; padding: 0; }
.home-content .how-it-works-container .step-highlight { font-size: 1.2rem; line-height: 1.4; margin-bottom: .5rem; }
.home-content .how-it-works-container .step-description { font-size: .9rem; line-height: 1.7; }
.home-content .faq-btn { min-height: 44px; }
.home-content .what-we-buy-container { padding: 1rem 1rem 2rem; }
.home-content .what-we-buy-header { display: block; width: 100%; max-width: 1120px; margin: 0 auto 1.5rem; }
.home-content .what-we-buy-description { padding: 0; font-size: .875rem; line-height: 1.8; text-align: left; }
.home-content .product-row { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 1120px; margin: 1rem auto 0; gap: 1rem; }
.home-content .product-row .product-link { width: 100%; max-width: 24rem; height: auto; aspect-ratio: 1; margin: 0 auto; min-width: 0; cursor: pointer; }
.home-content .product-row .product-link .image { width: calc(100% - 2rem); height: calc(100% - 4rem); top: 1rem; object-fit: contain; clip-path: none; }
.home-content .product-row .product-link .text { font-size: clamp(1.2rem, 4vw, 1.75rem); bottom: .75rem; padding: 0 .5rem; line-height: 1.4; }
.home-content .customer-feedbacks-container { width: 100%; max-width: 1200px; padding: 2rem 1rem; margin: 0 auto; }
.home-content .feedback-cards { max-width: 100%; min-width: 0; }
.home-content .feedback-card { min-width: 0; flex: 0 0 100%; max-width: 100%; }
.home-content .feedback-text { overflow-wrap: anywhere; }
.home-content .carousel-controls button { min-width: 44px; min-height: 44px; }
.home-content .donations-container { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 1120px; height: auto; padding: 2rem 1rem; margin: 0 auto; gap: 1rem; }
.home-content .donations-container .image { width: min(100%, 20rem); height: auto; max-width: 100%; margin: 0 auto; grid-row: 2; }
.home-content .donations-container .title { grid-row: 1; text-align: center; }
.home-content .donations-container .description { width: 100%; max-width: none; margin: 0; text-align: left; font-size: .9rem; line-height: 1.8; }
.home-content .donations-container .description p + p { margin-top: .75rem; }
@media (min-width: 600px) {
    .home-content .product-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-content #homePageContainer .features { gap: 1rem; padding: 1.25rem 1.5rem; }
    .home-content #homePageContainer .feature-description { font-size: .875rem; }
    .home-content .product-row .product-link .text { font-size: 1.1rem; }
}
@media (min-width: 900px) {
    .home-content #homePageContainer { min-height: calc(100svh - var(--home-chrome-height, 104px)); }
    .home-content #homePageContainer .left-center-container { flex: 1; justify-content: flex-start; padding: 4rem max(2rem, calc((100vw - 1440px) / 2)); }
    .home-content #homePageContainer .sell-now-btn { font-size: 1.25rem; padding: 1.25rem 2rem; }
    .home-content #homePageContainer .features { padding-inline: max(1.5rem, calc((100vw - 1000px) / 2)); }
    .home-content #homePageContainer .feature-title { font-size: 2rem; }
    .home-content .how-it-works-container { padding: 4rem 1.5rem; }
    .home-content .how-it-works-container .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
    .home-content .how-it-works-container .step-box img { width: 120px; height: 120px; }
    .home-content .what-we-buy-container { padding: 2rem 1.5rem 3rem; }
    .home-content .product-row { gap: 2rem; margin-top: 2rem; }
    .home-content .product-row .product-link .text { font-size: 1.5rem; }
    .home-content .feedback-card { flex-basis: calc((100% - 2rem) / 3); }
    .home-content .donations-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); padding-block: 3rem; column-gap: 3rem; }
    .home-content .donations-container .image { grid-column: 1; grid-row: 1 / 3; width: 100%; }
    .home-content .donations-container .title { grid-column: 2; grid-row: 1; text-align: left; margin: 0; align-self: end; }
    .home-content .donations-container .description { grid-column: 2; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .home-content .features, .home-content .rotating-gradient, .home-content .donations-container .image { animation: none; }
}

/* The hero and service strip together fill the first screen below navigation. */
.home-content #homePageContainer { min-height: calc(100vh - var(--home-chrome-height, 96px)); min-height: calc(100svh - var(--home-chrome-height, 96px)); }
.home-content #homePageContainer .left-center-container { flex: 1; }
.home-content #homePageContainer .feature { position: relative; }
.home-content #homePageContainer .feature ~ .feature::before { content: ""; position: absolute; left: -.25rem; top: 10%; height: 80%; width: 2px; background: rgba(255,255,255,.25); }
@media (min-width: 600px) { .home-content #homePageContainer .feature ~ .feature::before { left: -.5rem; } }


/* Scale decorative artwork smoothly, with space reserved for the copy. */
.home-content .how-it-works-container { --home-art-size: clamp(72px, calc(22vw - 24px), 420px); --home-art-gutter: calc(var(--home-art-size) * .9); padding-bottom: max(6rem, calc(var(--home-art-size) * .65)); }
.home-content .how-it-works-container .credit-cards,
.home-content .how-it-works-container .shopping-cart,
.home-content .how-it-works-container .magnifier { display: block; position: absolute; width: var(--home-art-size); height: auto; max-width: none; object-fit: contain; pointer-events: none; }
.home-content .how-it-works-container .magnifier { width: max(112px, var(--home-art-size)); top: .5rem; left: calc(var(--home-art-size) * -.08); }
.home-content .how-it-works-container .shopping-cart { top: auto; bottom: .5rem; left: calc(var(--home-art-size) * -.1); }
.home-content .how-it-works-container .credit-cards { top: auto; bottom: .25rem; left: auto; right: calc(var(--home-art-size) * -.15); width: calc(var(--home-art-size) * 1.15); }
@media (min-width: 900px) {
    .home-content .how-it-works-container .steps { max-width: min(1120px, calc(100% - var(--home-art-gutter) * 2)); }
    .home-content .how-it-works-container .magnifier { top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .home-content .how-it-works-container .shopping-cart,
    .home-content .how-it-works-container .credit-cards,
    .home-content .how-it-works-container .magnifier { animation: none; }
}


/* Full-width animated blue bands sit behind the category cards. */
.home-content .what-we-buy-container { overflow: hidden; }
.home-content .product-row { isolation: isolate; }
.home-content .product-row .left-right-gradient { display: block; position: absolute; top: 50%; left: 50%; width: 100vw; height: 35%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background: linear-gradient(90deg, #0066cc, #0099ff, #0066cc); background-size: 200% 200%; animation: gradientMoveLeftRight 3s linear infinite; }
@media (prefers-reduced-motion: reduce) { .home-content .product-row .left-right-gradient { animation: none; } }

/* Retain the original category card proportions and photo treatment. */
.home-content .product-row { max-width: 1072px; }
.home-content .product-row .product-link { max-width: 336px; }
.home-content .product-row .product-link .image { top: 18px; width: calc(100% - 36px); height: calc(100% - 86px); background: #fff; object-fit: contain; border-radius: 10px 10px 0 0; }
.home-content .product-row .product-link .text { bottom: 16px; font-size: clamp(1.1rem, 4vw, 2rem); line-height: 1.2; }
@media (min-width: 900px) { .home-content .product-row .product-link .text { font-size: 2rem; } }


/* Give the how-it-works steps a little more visual weight. */
.home-content .how-it-works-container .step-box img { width: 96px; height: 96px; }
.home-content .how-it-works-container .step-title { font-size: 1.5rem; }
.home-content .how-it-works-container .step-highlight { font-size: 1.3rem; }
.home-content .how-it-works-container .step-description { font-size: 1rem; line-height: 1.7; }
@media (min-width: 900px) {
    .home-content .how-it-works-container .step-box img { width: 150px; height: 150px; }
    .home-content .how-it-works-container .step-title { font-size: 1.7rem; }
    .home-content .how-it-works-container .step-highlight { font-size: 1.5rem; }
    .home-content .how-it-works-container .step-description { font-size: 1.05rem; }
}




/* Keep the mobile recycle action above the hero artwork. */
@media (max-width: 899px) {
    .home-content #homePageContainer .left-center-container { align-items: flex-start; padding-top: 1.5rem; }
}

/* Keep the three mobile service headings even and on one line. */
@media (max-width: 599px) {
    .home-content #homePageContainer .features { gap: .5rem; padding: 1rem .5rem; align-items: stretch; }
    .home-content #homePageContainer .features .feature { justify-content: flex-start; }
    .home-content #homePageContainer .features .feature .feature-title { font-size: clamp(12px, 3.65vw, 18px); line-height: 1.4; white-space: nowrap; }
    .home-content #homePageContainer .features .feature .feature-description { font-size: clamp(10px, 2.8vw, 12px); line-height: 1.5; margin-top: .25rem; }
}

/* Give all three mobile illustrations a readable size and uncropped placement. */
@media (max-width: 599px) {
    .home-content .how-it-works-container { --home-art-size: 112px; padding-bottom: 10rem; }
    .home-content .how-it-works-container .shopping-cart { left: 0; bottom: .5rem; }
    .home-content .how-it-works-container .credit-cards { right: 0; bottom: .25rem; width: 128px; }
}


/* Scan expiration eligibility quickly; retain the complete policy on demand. */
.home-content .recycling-eligibility { max-width: 780px; margin: 0 auto; color: #526176; font: .9rem/1.7 Raleway, sans-serif; text-align: left; }
.home-content .eligibility-intro { margin: 0 0 1rem; text-align: center; }
.home-content .eligibility-summary { display: grid; gap: .5rem; margin: 0 0 1rem; }
.home-content .eligibility-summary > div { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: .75rem; padding: .9rem; border-radius: 10px; background: #f5f7fa; }
.home-content .eligibility-summary dt { color: #24364b; font-weight: 800; }
.home-content .eligibility-summary dd { margin: 0; }
.home-content .eligibility-warning { margin: 0 0 .5rem; color: #435166; font-size: .85rem; }
.home-content .eligibility-details summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .5rem 0; color: #0054aa; font-weight: 800; cursor: pointer; list-style: none; }
.home-content .eligibility-details summary::-webkit-details-marker { display: none; }
.home-content .eligibility-details summary::after { content: ''; width: 8px; height: 8px; flex: 0 0 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: .25rem; }
.home-content .eligibility-details[open] summary::after { transform: rotate(225deg); }
.home-content .eligibility-details-copy { padding: .5rem 0; }
.home-content .eligibility-details-copy p { margin: 0 0 .75rem; text-align: left; }
@media (min-width: 900px) {
    .home-content .eligibility-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .home-content .eligibility-summary > div { display: block; padding: 1rem; }
    .home-content .eligibility-summary dt { margin-bottom: .5rem; }
}

/* On a stacked row, let the blue band connect all three category cards. */
@media (max-width: 599px) {
    .home-content .product-row .left-right-gradient { height: 64%; }
}

/* Reserve a separate admin control row above the mobile recycle action. */
@media (max-width: 899px) {
    .home-content #homePageContainer:has(> .edit-button-container) .left-center-container { padding-top: 5rem; }
    .home-content #homePageContainer > .edit-button-container { top: .75rem; right: 1rem; gap: .5rem; }
    .home-content #homePageContainer > .edit-button-container .edit-button { width: 44px; height: 44px; flex: 0 0 44px; }
}


/* Stack the service promises on phones, with room for readable text. */
@media (max-width: 599px) {
    .home-content #homePageContainer .features { grid-template-columns: minmax(0, 1fr); gap: 0; padding: .5rem 1rem; }
    .home-content #homePageContainer .features .feature { align-items: center; justify-content: center; padding: .7rem .5rem; }
    .home-content #homePageContainer .features .feature .feature-title { font-size: 1.2rem; line-height: 1.4; white-space: normal; }
    .home-content #homePageContainer .features .feature .feature-description { font-size: .8rem; line-height: 1.5; margin-top: .2rem; }
    .home-content #homePageContainer .features .feature ~ .feature::before { left: 10%; right: 10%; top: 0; width: auto; height: 1px; background: #ffffff30; }
}

/* Retain the descriptive chat launcher on phones and tablets. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    body:has(#homePageContainer) .chatbot-toggle { width: auto; height: auto; min-height: 50px; padding: 9px 17px 9px 10px; gap: 9px; border-radius: 30px; }
    body:has(#homePageContainer) .chatbot-toggle > span { display: inline; }
}

/* Center the mobile illustrations on the divider itself, not the section bottom. */
@media (max-width: 599px) {
    .home-content .how-it-works-container { padding-bottom: 1.5rem; }
    .home-content .how-it-works-decoration { position: relative; isolation: isolate; height: 160px; margin-top: 1.5rem; margin-inline: -1rem; }
    .home-content .how-it-works-decoration .divider { position: absolute; top: 50%; left: 10%; width: 80%; margin: 0; z-index: 0; }
    .home-content .how-it-works-decoration .shopping-cart,
    .home-content .how-it-works-decoration .credit-cards { top: 50%; bottom: auto; translate: 0 -50%; z-index: 1; }
}

/* Give the phone artwork its own viewport; service promises follow below it. */
@media (max-width: 599px) {
    .home-content #homePageContainer { min-height: 0; background-size: 0 0; background-repeat: no-repeat; }
    .home-content #homePageContainer .left-center-container {
        flex: none;
        min-height: max(520px, calc(100svh - var(--home-chrome-height, 96px)));
        background-image: inherit;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .home-content #homePageContainer .features { flex: none; }
}

/* Lift the phone magnifier slightly above the section heading. */
@media (max-width: 599px) {
    .home-content .how-it-works-container .magnifier { top: -.75rem; }
}