/* HTFOODS Pro: one canonical twenty-product shelf shared by CMS + original storefront. */
.ddv-cms-htfoods_feature_hero,.ddv-cms-htfoods_showcase{width:100%;max-width:1440px;margin-inline:auto}
.htf-pro-feature{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px;min-height:510px;color:var(--htf-fg,#fff)}
.htf-pro-feature.htf-pro-reverse{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.htf-pro-reverse .htf-pro-visual{order:2}.htf-pro-reverse .htf-pro-highlights{order:1}
.htf-pro-visual{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;background-color:var(--htf-bg,#184a43);display:flex;align-items:flex-end;min-height:510px}
.htf-pro-visual:before{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(100deg, color-mix(in srgb, var(--htf-overlay,#102f2b) var(--htf-overlay-pct,65%),transparent),transparent),var(--htf-image,none);background-size:cover;background-position:center;transform:scale(1.01)}
.htf-pro-copy{padding:clamp(25px,4.3vw,65px);max-width:740px;text-shadow:0 2px 10px #0004}.htf-pro-copy small{font-weight:850;letter-spacing:.16em;opacity:.92}.htf-pro-copy h1{font-size:clamp(31px,3.6vw,59px);letter-spacing:-.04em;line-height:1.07;margin:18px 0}.htf-pro-copy p{max-width:540px;line-height:1.65;font-size:clamp(14px,1.4vw,18px)}.htf-pro-button{display:inline-flex;align-items:center;margin-top:19px;border-radius:12px;background:#fff;color:#193f36!important;padding:12px 18px;font-weight:800;text-shadow:none;text-decoration:none}
.htf-pro-highlights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}.htf-pro-service{border-radius:22px;padding:clamp(16px,2.1vw,28px);background:color-mix(in srgb,var(--htf-bg,#184a43) 8%,white);color:#203f38;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:190px;box-shadow:inset 0 0 0 1px #163c3514}.htf-pro-service span{display:flex;align-items:center;justify-content:center;background:#e2eddc;border-radius:15px;width:48px;height:48px;color:#286448;font-size:24px}.htf-pro-service h3{font-size:clamp(15px,1.5vw,21px);margin:15px 0 3px}.htf-pro-service p{font-size:13px;line-height:1.6;margin:0}
.htf-pro-showcase{padding:8px 0}.htf-pro-showcase .ddv-product-shelf-items{display:flex!important;flex-direction:column;gap:24px}.htf-pro-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;align-items:stretch;min-width:0}.htf-pro-row>*{min-width:0}.htf-pro-row[data-row="0"]{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 13px)/4);grid-template-columns:none;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;padding-bottom:12px}.htf-pro-row[data-row="0"]>*{scroll-snap-align:start}.htf-pro-row[data-row="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.htf-pro-row::-webkit-scrollbar{height:5px}.htf-pro-row::-webkit-scrollbar-thumb{background:#a5b9aa;border-radius:30px}.htf-pro-showcase .ddv-shelf-more{display:block;margin:30px auto 8px;min-width:180px}
@media(max-width:1023px){.htf-pro-feature,.htf-pro-feature.htf-pro-reverse{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:unset}.htf-pro-visual{min-height:390px}.htf-pro-service{padding:16px;min-height:150px}.htf-pro-copy{padding:25px}.htf-pro-copy h1{font-size:clamp(28px,3.8vw,39px)}.htf-pro-row{grid-template-columns:repeat(3,minmax(0,1fr))}.htf-pro-row[data-row="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.htf-pro-feature,.htf-pro-feature.htf-pro-reverse{display:flex;flex-direction:column;gap:12px}.htf-pro-reverse .htf-pro-visual,.htf-pro-reverse .htf-pro-highlights{order:initial}.htf-pro-visual{min-height:300px;border-radius:18px}.htf-pro-visual:before{background-image:linear-gradient(0deg,color-mix(in srgb,var(--htf-overlay) var(--htf-overlay-pct,65%),transparent),transparent),var(--htf-mobile-image,var(--htf-image));background-position:center}.htf-pro-copy{padding:26px 22px}.htf-pro-copy h1{font-size:clamp(30px,8.4vw,44px);margin:12px 0}.htf-pro-copy p{font-size:14px}.htf-pro-highlights{gap:9px}.htf-pro-service{min-height:128px;padding:13px;border-radius:14px}.htf-pro-service span{width:36px;height:36px;font-size:20px}.htf-pro-service h3{font-size:14px;margin:10px 0 3px}.htf-pro-service p{font-size:11px}.htf-pro-row,.htf-pro-row[data-row="3"],.htf-pro-row[data-row="4"],.htf-pro-row[data-row="5"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.htf-pro-row[data-row="0"],.htf-pro-row[data-row="1"],.htf-pro-row[data-row="2"]{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 8px)/3);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:12px}.htf-pro-row[data-row="2"]{grid-auto-columns:calc((100% - 8px)/2)}.htf-pro-row[data-row="3"]{grid-template-columns:minmax(0,1fr)}.htf-pro-showcase .ddv-ph-product-card{min-width:0}.htf-pro-showcase .ddv-ph-product-info{min-width:0}}

/* Progressive-enhancement: initial HTML is already grouped for desktop without JS. */
.htf-pro-showcase .ddv-product-shelf-items>.htf-pro-row{width:100%;min-width:0}
.htf-pro-showcase .htf-pro-extra{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-top:18px}
.htf-pro-showcase .htf-pro-extra:empty{display:none}
.htf-pro-showcase .htf-pro-extra>.ddv-ph-product-card{min-width:0}
@media(min-width:701px) and (max-width:1023px){
 .htf-pro-showcase .htf-pro-row[data-row="0"]{grid-auto-columns:calc((100% - 2 * 12px)/3)}
 .htf-pro-showcase .htf-pro-extra{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
 .htf-pro-showcase .htf-pro-extra{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
}
.htf-pro-showcase .htf-pro-row[data-row="0"],.htf-pro-showcase .htf-pro-row[data-row="1"],.htf-pro-showcase .htf-pro-row[data-row="2"]{scrollbar-width:thin}
.htf-pro-showcase .ddv-shelf-more:focus-visible,.htf-pro-showcase .htf-pro-row:focus-visible{outline:3px solid #219c6b;outline-offset:2px}