/* Home top area only. Keep one category list across both layouts. */
.renew-top-area {
    display:grid;
    grid-template-columns:minmax(0,62fr) minmax(0,38fr);
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"hero search" "hero categories" "benefits benefits";
    gap:20px 24px;
}
.renew-top-area > * {min-width:0}
.renew-top-area .renew-search-row {grid-area:search;display:block;margin:0}
.renew-top-area .renew-main-search {height:60px}
.renew-top-area .renew-search-field {min-width:0;padding:0 16px}
.renew-top-area .renew-main-search .renew-search-field input {min-width:0;height:58px;font-size:14px}
.renew-top-area .renew-main-search > button {height:58px;flex-basis:60px}
.renew-top-area .renew-main-banner {grid-area:hero;min-height:540px;aspect-ratio:auto;height:100%}
.renew-top-area .renew-hero-media img {object-fit:cover;object-position:right bottom}
.renew-top-area .renew-hero-copy {position:relative;z-index:3;width:54%;max-width:450px;padding:52px 0 0 48px;color:var(--hm-ink)}
.renew-top-area .renew-hero-eyebrow {display:block;margin:0 0 10px;font-size:19px;font-weight:700;line-height:1.3}
.renew-top-area .renew-hero-copy h2 {margin:0 0 18px;font-size:46px;font-weight:800;line-height:1.35;word-break:keep-all;letter-spacing:0}
.renew-top-area .renew-hero-subtitle {margin:0 0 12px;max-width:360px;font-size:18px;font-weight:600;line-height:1.5;word-break:keep-all}
.renew-top-area .renew-hero-description {margin:0;max-width:330px;color:#60645f;font-size:13px;line-height:1.7;word-break:keep-all}
.renew-top-area .renew-hero-cta {display:inline-flex;min-height:44px;max-width:100%;align-items:center;gap:12px;margin-top:22px;padding:10px 18px;border:1px solid var(--hm-green);border-radius:3px;background:var(--hm-green);color:#fff;font-size:14px;font-weight:700;line-height:1.4;white-space:nowrap}
.renew-top-area .renew-hero-cta:hover {background:var(--hm-green-dark);border-color:var(--hm-green-dark);color:#fff}
.renew-top-area .renew-hero-cta:focus-visible {outline:3px solid var(--hm-green);outline-offset:3px}
.renew-top-area .renew-hero-cta .renew-arrow {flex:0 0 7px;width:7px;height:7px}
.renew-top-area .renew-hero-counter {top:24px;right:24px;font-size:13px}
.renew-top-area .renew-hero-counter b {font-size:21px}
.renew-top-area .renew-hero-list .slick-arrow {width:34px;height:34px;top:55%}
.renew-top-area .renew-hero-list .slick-prev {left:10px}
.renew-top-area .renew-hero-list .slick-next {right:10px}
.renew-top-area .renew-hero-list .slick-dots {bottom:24px;left:48px;gap:9px}
.renew-top-area .renew-category-panel {grid-area:categories}
.renew-top-area .renew-category-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.renew-top-area .renew-category-grid > a {height:84px;padding:4px 3px}
.renew-top-area .renew-category-icon {width:92px;max-width:100%;height:54px;margin:0 0 2px;flex-shrink:0}
.renew-top-area .renew-category-icon img {width:92px;max-width:none;height:54px;filter:brightness(.7) contrast(2.8) saturate(1.08)}
.renew-top-area .renew-category-name {flex-shrink:0;font-size:13px;line-height:1.3}
.renew-top-area .renew-benefits {grid-area:benefits;width:100%;margin:0}
@media (min-width:769px) and (max-width:1199px) {
    .renew-top-area {grid-template-columns:minmax(0,60fr) minmax(0,40fr);column-gap:20px}
    .renew-top-area .renew-hero-copy {width:66%;padding:28px 0 0 36px}
    .renew-top-area .renew-hero-eyebrow {font-size:14px;margin-bottom:6px}
    .renew-top-area .renew-hero-copy h2 {font-size:34px;margin-bottom:10px}
    .renew-top-area .renew-hero-subtitle {font-size:14px;line-height:1.4;max-width:300px;margin-bottom:8px}
    .renew-top-area .renew-hero-description {max-width:300px;font-size:12px;line-height:1.5}
    .renew-top-area .renew-hero-cta {min-height:40px;margin-top:14px;padding-top:8px;padding-bottom:8px}
    .renew-top-area .renew-hero-list .slick-dots {left:36px}
    .renew-top-area .renew-main-search .renew-search-field input {font-size:12px}
    .renew-top-area .renew-search-field {padding:0 10px}
    .renew-top-area .renew-main-search > button {flex-basis:50px}
}
@media (max-width:768px) {
    .renew-top-area {grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"search" "hero" "benefits" "categories";gap:16px}
    .renew-top-area .renew-main-search {height:50px}
    .renew-top-area .renew-main-search .renew-search-field input {height:48px;font-size:13px}
    .renew-top-area .renew-main-search > button {height:48px;flex-basis:50px}
    .renew-top-area .renew-main-banner {height:180px;min-height:0;border-radius:5px}
    .renew-top-area .renew-hero-copy {width:60%;max-width:none;padding:16px 0 0 16px}
    .renew-top-area .renew-hero-eyebrow {margin-bottom:5px;font-size:12px}
    .renew-top-area .renew-hero-copy h2 {margin-bottom:7px;font-size:24px;line-height:1.35}
    .renew-top-area .renew-hero-subtitle {max-width:155px;margin-bottom:0;font-size:12px;line-height:1.4}
    .renew-top-area .renew-hero-description {display:none}
    .renew-top-area .renew-hero-cta {min-height:34px;gap:8px;margin-top:10px;padding:7px 10px;font-size:11px}
    .renew-top-area .renew-hero-counter {top:12px;right:12px;gap:4px;font-size:10px}
    .renew-top-area .renew-hero-counter b {font-size:15px}
    .renew-top-area .renew-hero-list .slick-dots {bottom:10px;left:16px;gap:7px}
    .renew-top-area .renew-hero-list .slick-dots li,.renew-top-area .renew-hero-list .slick-dots button {width:7px;height:7px}
    .renew-top-area .renew-benefits {margin:0 0 12px}
    .renew-top-area .renew-category-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
    .renew-top-area .renew-category-grid > a {height:106px;padding:5px 3px}
    .renew-top-area .renew-category-grid > a:last-child:nth-child(4n+1) {grid-column:auto}
    .renew-top-area .renew-category-name {font-size:12px;line-height:1.4}
}
@media (min-width:500px) and (max-width:768px) {
    .renew-top-area .renew-hero-copy {padding-left:24px;width:58%}
    .renew-top-area .renew-hero-subtitle {max-width:280px}
    .renew-top-area .renew-hero-media img {object-position:right 65%}
    .renew-top-area .renew-hero-list .slick-dots {left:24px}
}
@media (max-width:374px) {
    .renew-top-area .renew-hero-copy {padding-left:12px;width:61%}
    .renew-top-area .renew-hero-copy h2 {font-size:22px}
    .renew-top-area .renew-hero-list .slick-dots {left:12px}
    .renew-top-area .renew-category-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}