@charset "UTF-8";
/* Component containers do not introduce a new layout or font. */
.pp-shell {display:contents;}
@media(min-width:1025px){.pp-site-mobile{display:none!important;}}
@media(max-width:1024px){.pp-site-desktop{display:none!important;}}
body.pp-article-page {background:#fff!important;color:#111;}
body.pp-article-page .l-main-content,body.pp-article-page .c-section001,body.pp-article-page .potager_contents {background:#fff!important;}
body.pp-article-page:not(.pp-original-intro) .potager_contents {padding-top:0!important;}
body.pp-article-page .pp-article-hero {box-sizing:border-box;background:#fff;width:100%;max-width:1080px;margin:56px auto 40px;padding:0 20px;text-align:center;}
body.pp-article-page .pp-article-hero>h1 {display:block;width:100%;font-size:32px!important;font-weight:700;line-height:1.45!important;margin:0 auto!important;padding:0!important;letter-spacing:normal;}
.pp-article-episode {display:block;font-size:.85em;margin-top:4px;}
body.pp-article-page .pp-article-subtitle {font-size:20px!important;font-weight:700;line-height:1.65!important;margin:24px auto 40px!important;padding:0!important;max-width:800px;width:100%;text-align:center;}
body.pp-article-page .pp-article-hero>figure {margin:0 auto!important;padding:0!important;max-width:800px;width:100%;}
body.pp-article-page .pp-article-hero>figure img {display:block;width:100%!important;height:auto!important;max-width:800px;margin:0 auto!important;object-fit:contain;}
body.pp-article-page .pp-article-hero figcaption {font-size:13px;text-align:left;line-height:1.6;}
body.pp-article-page .content-wrap,body.pp-article-page .hello_content_text,body.pp-article-page .hello_content_image,body.pp-article-page .hello_main_visual {box-sizing:border-box;width:calc(100% - 40px)!important;max-width:800px;margin-left:auto!important;margin-right:auto!important;}
body.pp-article-page .content-wrap .hello_content_text,body.pp-article-page .content-wrap .content-wrap {width:100%!important;}
body.pp-article-page .content-wrap img,body.pp-article-page .hello_content_text img,body.pp-article-page .hello_content_image img,body.pp-article-page .hello_main_visual img {display:block;width:100%!important;max-width:800px!important;height:auto!important;object-fit:contain;margin:24px auto!important;}
body.pp-article-page .c-image003 {width:100%;max-width:800px;margin-left:auto!important;margin-right:auto!important;}
body.pp-article-page .c-image003 img {width:100%!important;height:auto!important;}
body.pp-article-page .content-wrap:empty,body.pp-article-page .hello_main_visual:empty,body.pp-article-page .article-hero__image:empty {display:none!important;}
.pp-series {clear:both;box-sizing:border-box;max-width:1080px;width:calc(100% - 40px);margin:64px auto;background:#fff;}
body.pp-article-page .pp-series>h2 {display:block;background:#000;color:#fff;font-size:20px;line-height:1.5;margin:0 0 30px;padding:9px 18px;text-align:left;}
.pp-series-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
.pp-series-card {display:flex;flex-direction:column;background:#000;color:#fff!important;text-decoration:none!important;min-width:0;box-shadow:0 2px 4px #0003;}
.pp-series-card img {display:block!important;width:100%!important;max-width:none!important;aspect-ratio:16/9;height:auto!important;object-fit:cover;margin:0!important;}
.pp-series-card>span {display:block;padding:14px;text-align:center;line-height:1.5;font-size:16px;font-weight:bold;}
.pp-series-card small {display:block;font-size:14px;margin-bottom:5px;}
.pp-series-card[href]:hover {opacity:.8;}
.pp-series-card[href]:focus-visible {outline:3px solid #0078e1;outline-offset:4px;}
.pp-series-pending {background:#eee;color:#222!important;justify-content:center;min-height:180px;box-shadow:none;}
.pp-series-pending em {display:block;font-style:normal;margin-top:12px;font-weight:normal;}

@media(max-width:1024px){
 body.pp-article-page .pp-article-hero{margin-top:36px;padding:0 16px;}.pp-article-hero br.u-hidden-pc{display:none;}
 body.pp-article-page .pp-article-hero>h1{font-size:25px!important;margin-bottom:0!important;}body.pp-article-page .pp-article-subtitle{font-size:18px!important;line-height:1.7!important;margin:20px auto 28px!important;}
 .pp-series-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}body.pp-article-page .pp-series>h2{font-size:18px;}
}
@media(max-width:540px){.pp-series-grid{grid-template-columns:1fr;}.pp-series{width:calc(100% - 32px);}}

.pp-page-title {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
body.pp-article-page .pp-article-hero .pp-article-episode {font-size:.85em!important;font-weight:700;}
body.pp-article-page .pp-series-card img {margin:0!important;}
body.pp-article-page .related-pages-nav-wrap .related-pages-nav>a {display:flex;flex-direction:column;background:#000;color:#fff;}
body.pp-article-page .related-pages-nav-wrap .related-pages-nav .image {width:100%;}
body.pp-article-page .related-pages-nav-wrap .related-pages-nav .text {position:static;background:#000;color:#fff;width:100%;}

h1.pp-title {font-size:36px;font-weight:400;line-height:1.5;margin:0 0 48px;padding:0;}
@media(max-width:768px){h1.pp-title{font-size:25px;margin-bottom:28px;}}

/* Keep article copy, single photos and photo groups on the same content edges. */
body.pp-article-page {--pp-article-gutter:40px;}
body.pp-article-page .content-wrap,
body.pp-article-page .hello_content_text,
body.pp-article-page .hello_content_lead_text,
body.pp-article-page .hello_content_image,
body.pp-article-page .hello_main_visual,
body.pp-article-page .hello_content_image_sub,
body.pp-article-page .l-main-content .c-inner002,
body.pp-article-page .pp-article-hero {
    box-sizing:border-box;
    width:calc(100% - var(--pp-article-gutter)) !important;
    max-width:800px;
    margin-left:auto !important;
    margin-right:auto !important;
}
body.pp-article-page .pp-article-hero,
body.pp-article-page .l-main-content .c-inner002 {
    padding-left:0 !important;
    padding-right:0 !important;
}
body.pp-article-page:not(.pp-original-intro) .potager_contents.article-hero {
    padding-left:0 !important;
    padding-right:0 !important;
}
body.pp-article-page .content-wrap .hello_content_text,
body.pp-article-page .content-wrap .hello_content_lead_text,
body.pp-article-page .content-wrap .content-wrap,
body.pp-article-page .hello_content_text .content-wrap,
body.pp-article-page .content-wrap .hello_content_image_sub,
body.pp-article-page .hello_content_text .hello_content_image_sub,
body.pp-article-page .c-inner002 .pp-article-hero {
    width:100% !important;
}
@media(max-width:1024px) {
    body.pp-article-page {--pp-article-gutter:32px;}
}

body.pp-article-page .article-body,
body.pp-article-page .c-inner002 .c-box017 {
    padding-left:0 !important;
    padding-right:0 !important;
}

body.pp-article-page .c-inner002 .c-box017 {border:0;}

/* A caption belongs to its photo; keep spacing below the pair, not between them. */
body.pp-article-page img:has(+ .photo_caption) {
    margin-bottom:0 !important;
}
body.pp-article-page img + .photo_caption {
    box-sizing:border-box;
    display:block;
    max-width:800px;
    margin:0 auto !important;
    padding-top:6px !important;
}

/* Captions following a photo group use the same close spacing as single photos. */
body.pp-article-page .hello_content_image_sub:has(+ .photo_caption) {
    margin-bottom:0 !important;
}
body.pp-article-page .hello_content_image_sub:has(+ .photo_caption) > .img img {
    margin-bottom:0 !important;
}
body.pp-article-page .hello_content_image_sub + .photo_caption {
    box-sizing:border-box;
    display:block;
    width:100% !important;
    max-width:800px;
    margin:0 auto !important;
    padding-top:6px !important;
}

/* Photo captions share the white article background. */
body.pp-article-page .photo_caption,
body.pp-article-page figcaption {
    background:#fff !important;
}

/* Nested photo wrappers use their parent's article width without a second gutter. */
body.pp-article-page .content-wrap .hello_content_image,
body.pp-article-page .hello_content_text .hello_content_image,
body.pp-article-page .content-wrap .hello_main_visual {
    width:100% !important;
}

/* Related article and external-site banners. */
body.pp-article-page .article-related-banner {
    display:block;
    width:calc(100% - var(--pp-article-gutter));
    max-width:800px;
    margin:40px auto;
}
body.pp-article-page .article-related-banner .related-pages-nav {
    box-sizing:border-box;
    width:100%;
    max-width:400px;
    margin:0 auto;
    padding:0;
    overflow:hidden;
    background:#000;
}
body.pp-article-page .article-related-banner .related-pages-nav > a {
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    width:100%;
    height:auto;
    background:#000;
    color:#fff;
}
body.pp-article-page .article-related-banner .related-pages-nav .image {
    width:100%;
    margin:0;
    order:0;
}
body.pp-article-page .article-related-banner .image img {
    display:block;
    width:100%;
    height:auto;
    margin:0;
}
body.pp-article-page .article-related-banner .related-pages-nav .text {
    box-sizing:border-box;
    position:static;
    width:100%;
    height:auto;
    margin:0;
    padding:16px;
    order:1;
    color:#fff;
    background:#000;
}
body.pp-article-page .article-related-banner .related-pages-nav h2 {
    width:100%;
    margin:0 0 16px;
    padding:0;
    font-size:18px;
    line-height:1.5;
    color:#fff;
}
body.pp-article-page .article-related-banner .related-pages-nav .more {
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    text-align:right;
    font-size:14px;
    color:#fff;
    background:transparent;
}
body.pp-article-page .article-related-banner .more::after {
    content:" →";
    position:static;
    display:inline;
    width:auto;
    margin-left:8px;
    transform:none;
}

/* Wide related-article banner on desktop; stacked card on narrow screens. */
@media screen and (min-width: 769px) {
    body.pp-article-page .article-related-banner .related-pages-nav {
        max-width:800px;
    }
    body.pp-article-page .article-related-banner.related-pages-nav-wrap .related-pages-nav > a {
        display:grid;
        grid-template-columns:40% minmax(0, 1fr);
        align-items:stretch;
    }
    body.pp-article-page .article-related-banner .related-pages-nav .image {
        display:flex;
        align-items:center;
    }
    body.pp-article-page .article-related-banner .related-pages-nav .text {
        display:flex;
        flex-direction:column;
        justify-content:center;
        min-width:0;
        padding:24px 28px;
    }
    body.pp-article-page .article-related-banner .related-pages-nav h2 {
        font-size:20px;
        margin-bottom:24px;
    }
}

/* Profile portraits align with the first line of their adjacent biography. */
body.pp-article-page .profile {
    align-items:flex-start;
}
body.pp-article-page .profile .image img {
    margin:0 !important;
}
body.pp-article-page .profile .text {
    margin-top:0 !important;
    padding-top:0 !important;
}

/* Article typography: shared sizes for copy and photo captions. */
body.pp-article-page,
body:has([data-pp-shell="history"]) {
    --pp-body-font-size:18px;
    --pp-caption-font-size:16px;
}
html[lang="en"] body {
    --pp-body-font-size:16px;
}
:is(body.pp-article-page, body:has([data-pp-shell="history"])) .hello_content_text:not(.approval),
:is(body.pp-article-page, body:has([data-pp-shell="history"])) .hello_content_text:not(.approval) p,
:is(body.pp-article-page, body:has([data-pp-shell="history"])) .c-text001,
:is(body.pp-article-page, body:has([data-pp-shell="history"])) .c-text008 {
    font-size:var(--pp-body-font-size) !important;
}
html[lang] :is(body.pp-article-page, body:has([data-pp-shell="history"])) .photo_caption,
html[lang] :is(body.pp-article-page, body:has([data-pp-shell="history"])) figcaption,
html[lang] body.pp-article-page .pp-article-hero figcaption {
    font-size:var(--pp-caption-font-size) !important;
}
@media(max-width:1024px) {
    body.pp-article-page,
    body:has([data-pp-shell="history"]) {
        --pp-body-font-size:16px;
        --pp-caption-font-size:14px;
    }
}



/* Existing article intros keep their source layout. */
body.pp-article-page.pp-original-intro .article-hero .content-wrap{width:100%!important;}
body.pp-article-page.pp-original-intro .article-hero__image img{margin:0 auto!important;}

/* Native published styles for headers newly applied to legacy pages only. */
.pp-shell[data-pp-modernize="true"] .header-wrap-2026{
    border-bottom: solid 1px #ccc;
    box-sizing: content-box;
    padding: 0 0 5px 0;
    width: 100%;
}
.pp-shell[data-pp-modernize="true"] .header-wrap-2026 *,
.pp-shell[data-pp-modernize="true"] .pp-header-nav-2026,
.pp-shell[data-pp-modernize="true"] .pp-header-nav-2026 *,
.pp-shell[data-pp-modernize="true"] .pp-header-nav,
.pp-shell[data-pp-modernize="true"] .pp-header-nav *{
    box-sizing: content-box;
}
.pp-shell[data-pp-modernize="true"] .header-wrap-2026 h2{
    font-size: 20px;
    margin: 0 auto;
    width: calc(100% - 32px);
}
.pp-shell[data-pp-modernize="true"] .header-wrap-2026 h3{
    font-size: 16px;
    margin: 0 auto;
    padding-left: 16px;
    width: calc(100% - 32px);
}
.pp-shell[data-pp-modernize="true"] .pp-header-nav-inner{
    align-items: center;
    background: #fff;
    border-top: solid 1px #ccc;
    bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    height: 60px;
    justify-content: flex-end;
    position: fixed;
    width: 100%;
    z-index: 2;
}
.pp-shell[data-pp-modernize="true"] .pp-header-nav-inner-title{
    font-size: 16px;
    line-height: normal;
    margin-right: 80px;
}
.pp-shell[data-pp-modernize="true"] .hamburger{
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    height: 42px;
    padding: 0;
    position: absolute;
    right: 20px;
    text-align: center;
    top: 10px;
    width: 42px;
    z-index: 3;
}
.pp-shell[data-pp-modernize="true"] .hamburger span{
    background: #000;
    display: block;
    height: 1px;
    left: 6px;
    position: absolute;
    transition: 0.3s ease-in-out;
    width: 30px;
}
.pp-shell[data-pp-modernize="true"] .hamburger span:nth-child(1){
    top: 10px;
}
.pp-shell[data-pp-modernize="true"] .hamburger span:nth-child(2){
    top: 20px;
}
.pp-shell[data-pp-modernize="true"] .hamburger span:nth-child(3){
    top: 30px;
}
.pp-shell[data-pp-modernize="true"] .hamburger.active span:nth-child(1){
    background: #000;
    left: 6px;
    top: 16px;
    transform: rotate(-45deg);
}
.pp-shell[data-pp-modernize="true"] .hamburger.active span:nth-child(2),
.pp-shell[data-pp-modernize="true"] .hamburger.active span:nth-child(3){
    background: #000;
    top: 16px;
    transform: rotate(45deg);
}
.pp-shell[data-pp-modernize="true"] nav.globalMenuSp{
    bottom: 58px;
    font-size: 14px;
    left: 0;
    position: absolute;
    text-align: left;
    text-indent: .5rem;
    transform: translateX(-100%);
    transition: all .6s;
    width: 100%;
    z-index: 2;
}
.pp-shell[data-pp-modernize="true"] nav.globalMenuSp ul{
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
.pp-shell[data-pp-modernize="true"] nav.globalMenuSp ul li{
    list-style: none;
}
.pp-shell[data-pp-modernize="true"] nav.globalMenuSp ul li a{
    align-content: center;
    align-items: center;
    background: #f1f1f1;
    border-bottom: solid 1px #ccc;
    color: #000;
    display: flex;
    flex-wrap: nowrap;
    height: 60px;
    justify-content: flex-start;
    padding: 0;
    position: relative;
    text-decoration: none;
    transition: .4s all;
    width: 100%;
}
.pp-shell[data-pp-modernize="true"] nav.globalMenuSp ul li a::before{
    content: "\00BB";
    display: inline-block;
    padding: 0;
}
.pp-shell[data-pp-modernize="true"] nav.globalMenuSp ul li a[target="_blank"]::after{
    content: url(/powerproducts-brand/powerproducts-topics/images/open_in_new_000000.svg);
    display: block;
    height: 17px;
    width: 17px;
}
.pp-shell[data-pp-modernize="true"] nav.globalMenuSp.active{
    display: block;
    opacity: 1;
    transform: translateX(0%);
}
.pp-shell[data-pp-modernize="true"] nav.globalMenuSp li a.active{
    font-weight: 700;
    height: 60px;
}
.pp-shell[data-pp-modernize="true"] nav.globalMenuSp a.active::after{
    border-left: solid 3px #000;
    bottom: 0;
    content: "";
    display: block;
    height: 60px;
    left: 0;
    position: absolute;
    width: 100px;
}
@media screen and (min-width: 1025px){.pp-shell[data-pp-modernize="true"] .header-wrap-2026{
        align-items: center;
        border-bottom: solid 1px #ccc;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 1200px;
        width: 100%;
    }
.pp-shell[data-pp-modernize="true"] .header-wrap-2026 > div:first-child{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
.pp-shell[data-pp-modernize="true"] .header-wrap-2026 > div:first-child h2,
.pp-shell[data-pp-modernize="true"] .header-wrap-2026 > div:first-child h3{
        line-height: 1.35;
    }
.pp-shell[data-pp-modernize="true"] .header-wrap-2026 > div:first-child h2{
        padding: 0;
    }
.pp-shell[data-pp-modernize="true"] .header-wrap-2026 h2{
        font-size: 30px;
        padding: 15px 0;
        width: max-content;
    }
.pp-shell[data-pp-modernize="true"] .header-wrap-2026 .pp-header-nav-inner-2026{
        background: none;
        margin: 0;
    }
.pp-shell[data-pp-modernize="true"] .pp-header-nav-2026{
        border-bottom: 1px solid #d2d2d2;
        box-sizing: border-box;
        display: block !important;
        margin: 0 auto;
        max-width: none;
        width: 100%;
    }
.pp-shell[data-pp-modernize="true"] .pp-header-nav-2026 .pp-header-nav-inner-2026{
        align-items: stretch;
    }
.pp-shell[data-pp-modernize="true"] .pp-header-nav-2026 a{
        text-decoration: none;
    }
.pp-shell[data-pp-modernize="true"] .pp-header-nav-inner-2026{
        align-items: center;
        border-top: none;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 1200px;
        position: relative;
    }
.pp-shell[data-pp-modernize="true"] .pp-header-nav-inner-2026 .corner-title-wrap{
        border-left: 4px solid #c00;
        margin: 20px 0;
        padding-left: 1em;
    }
.pp-shell[data-pp-modernize="true"] .pp-header-nav-inner-2026 .corner-title-wrap h2{
        font-size: 20px;
        line-height: 1.5;
        margin: 0;
        padding: 0;
    }
.pp-shell[data-pp-modernize="true"] .pp-header-nav-inner-2026 .pp-header-nav-content-2026{
        align-items: center;
        color: #2e2e2e;
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        padding: 15px;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: all .8s;
        width: fit-content;
    }
.pp-shell[data-pp-modernize="true"] .pp-header-nav-inner-2026 .pp-header-nav-content-2026[target="_blank"]::after{
        content: url(/powerproducts-brand/powerproducts-topics/images/open_in_new_000000.svg);
        display: block;
        height: 17px;
        margin-left: 3px;
        width: 17px;
    }
.pp-shell[data-pp-modernize="true"] .pp-header-nav-inner-2026 .pp-header-nav-content-2026:hover{
        background-color: #ccc;
        color: #000;
    }
.pp-shell[data-pp-modernize="true"] .pp-header-nav-inner-2026 .pp-header-nav-active{
        border-bottom: 0;
    }
.pp-shell[data-pp-modernize="true"] .pp-header-nav-2026 .pp-header-nav-active::after{
        background: #000;
        bottom: -1px;
        content: "";
        height: 3px;
        left: 0;
        position: absolute;
        right: 0;
        z-index: 1;
    }
.pp-shell[data-pp-modernize="true"] .pp-header-nav-inner-2026 .pp-header-nav-active:hover{
        background-color: transparent;
    }

}
@media screen and (min-width: 1025px) and (max-width: 1200px){.pp-shell[data-pp-modernize="true"] .pp-header-nav-inner-2026 .pp-header-nav-content-2026{
        font-size: 13px;
        padding: 15px;
    }

}
.pp-shell[data-pp-modernize="true"] .brand-signature{
    align-items: center;
    display: flex;
    gap: 24px;
    margin: 0 auto;
    max-width: 1200px;
    padding: 26px 0;
    width: calc(100% - 40px);
}
.pp-shell[data-pp-modernize="true"] .brand-signature__path{
    background: linear-gradient(90deg, #eb0000 0%, #eb0000 50%, #684bba 75%, #0078e1 100%);
    display: block;
    flex: 1 1 auto;
    height: 8px;
}
.pp-shell[data-pp-modernize="true"] .brand-signature__slogan{
    flex: 0 0 auto;
    font-family: "HondaGlobalFontEN-Regular", sans-serif;
    font-size: 15px;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}



.pp-shell[data-pp-modernize="true"] .header-wrap-2026 {padding-bottom:0;}
@media(max-width:1024px){.pp-shell[data-pp-modernize="true"] .brand-signature{gap:14px;padding:16px 0;width:calc(100% - 32px);}.pp-shell[data-pp-modernize="true"] .brand-signature__path{height:5px;}.pp-shell[data-pp-modernize="true"] .brand-signature__slogan{font-size:12px;}}
