/* Tokens only: every size, gap, corner and colour is a global.css token (WEBMAKER > GLOBAL_FORMULAS). Generated by tokenize_css.py from the hand-written file; do not edit by hand. */
@layer page{
@media (min-width:1600px){.hh .wrap{max-width:var(--g-px-1480)}}
.bn3 .b3-cards{grid-template-columns:repeat(auto-fit,minmax(var(--g-px-300),1fr))}
main:has(.hh) .bn3 .b3-top,main:has(.hh) .bn3 .b3-cards{max-width:var(--g-px-1224);margin-left:auto;margin-right:auto}
@media (min-width:1600px){main:has(.hh) .bn3 .b3-top,main:has(.hh) .bn3 .b3-cards{max-width:var(--g-px-1424)}}
@media (max-width:1199px){.bn3.b3-shop .b3-cards{grid-template-columns:none}}
.pc-info{flex-wrap:wrap;white-space:normal;row-gap:var(--g-px-2)}
.pc-info .yl{flex:1 1 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-bar{margin-right:var(--g-px-4)}
}
.hh .hero h1{font-size:var(--g-size-58);line-height:1}
@media (max-width:1000px){.hh .hero h1{font-size:var(--g-size-46)}}
@media (max-width:780px){.hh .hero h1{font-size:var(--g-size-38);line-height:1.05}}
.hh .hero-ctas .hb{height:auto;padding:var(--g-px-12) var(--g-px-20);font-size:var(--ds-body)}
.hh .hero-card-title{font-size:var(--ds-card)}
.hh .hero-card-badge{font-size:var(--ds-label)}
.hh .hero-card-feat{font-size:var(--ds-small);padding:var(--g-px-10) var(--g-px-6)}
.hh .hero-card-feat b{font-size:var(--ds-body)}
.hh .hero-card-step{font-size:var(--ds-small);padding:var(--g-px-7) var(--g-px-3)}
.hh .hero-card-step b{font-size:var(--ds-label)}
.bn3 .b3-copy{display:none}
.pd-thumbs .th{height:var(--g-px-96);padding:0}
@media (max-width:1199px){.pd-thumbs .th{height:var(--g-px-76)}}
@media (max-width:900px){.pd-thumbs .th{height:var(--g-px-64)}}
.chutki button{height:auto;min-height:var(--ds-btn-h);padding:var(--g-px-6) var(--g-px-10);line-height:1.2}