.hn-flex.pop_sp {display: block !important;}
.hn-flex.pop_sp .hn-flex__item {width: 100% !important;
    margin: 0 0 30px 0;}
.hn-flex.pop_sp .image_link {position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 8 / 3;
    overflow: hidden;}
.hn-flex.pop_sp .image_link img {position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    display: block;}
@media screen and (width: 768px) and (orientation: portrait) {
	html body .hn-flex.hn-flex--fill {--gap-x: 12px;
        --gap-y: 16px;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: var(--gap-y) var(--gap-x) !important;
        margin: 0 20px 50px !important;
        box-sizing: border-box !important;}
	html body .hn-flex.hn-flex--fill > .hn-flex__item {flex: 1 1 calc(25% - var(--gap-x)) !important;
        box-sizing: border-box !important;}
	html body .hn-flex.hn-flex--fill > .hn-flex__item img {display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;}
}
@media screen and (width: 768px) and (orientation: portrait) {
	html body .hn-flex {margin-bottom: 30px !important;}
}
.hn-flex.col2 {display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;}
.hn-flex.col2 > .hn-flex__item {width: calc(50% - 10px) !important;
    flex: 0 0 calc(50% - 10px) !important;
    box-sizing: border-box;
    text-align: center;}
.hn-flex.col2 > .hn-flex__item img {display: block;
    width: 100% !important;
    height: auto !important;
    margin: 10px 0 !important;
    transition: opacity 0.3s ease;}
.hn-flex.col2 > .hn-flex__item img:hover {opacity: 0.7;}
.hn-flex.col2 > .hn-flex__item a {text-decoration: none !important;}
@media only screen and (max-width: 420px) {
	.hn-flex.col2 {gap: 10px;
        padding-left: 0 !important;
        padding-right: 0 !important;}
	.hn-flex.col2 > .hn-flex__item {width: calc(50% - 5px) !important;
        flex: 0 0 calc(50% - 5px) !important;}
	.hn-flex.col2 > .hn-flex__item img {margin: 10px 0 !important;}
}
@media (max-width: 420px) {
	.stuff-ma .hn-flex.col4 .hn-flex__item {width: calc((100% - 30px) / 4) !important;
        flex: 0 0 calc((100% - 30px) / 4) !important;
        box-sizing: border-box;}
	.stuff-ma .hn-flex {gap: 10px !important;}
}
@media only screen and (max-width: 420px) {
	.stuff-ma .hn-flex {padding: 0 !important;
        gap: 10px;}
}
.hn-flex {display: flex;
    margin-bottom: 50px;}
@media screen and (max-width: 768px) {
	.hn-flex {margin-bottom:0 !important;}
}
@media only screen and (max-width: 420px) {
	.hn-flex {flex-direction:row;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 10px;}
}
@media only screen and (max-width: 420px) {
	.stuff .hn-flex {flex-direction:column !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding: 20px 0px !important;}
	.stuff .hn-flex > .hn-flex__item {flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;}
	.stuff .hn-flex__item .mb-20i {margin: 0 !important;
        line-height: 0 !important;
        aspect-ratio: 2 / 2 !important;
        overflow: hidden !important;
        position: relative;}
	.stuff .hn-flex__item .mb-20i img {display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top !important;
        margin: 0 !important;}
	.stuff .hn-flex__item img {max-width: unset !important;
        height: auto;}
}
@media screen and (max-width: 768px) {
	.stuff .hn-flex img {margin:0 !important;}
}
@media only screen and (max-width: 420px) {
	.shop .hn-flex {padding: 0 0px !important;}
}
@media only screen and (max-width: 420px) {
	.hn-flex {flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 10px;}
	.ord-mb .hn-flex {padding: 0 !important;}
}
@media (max-width: 480px) {
	.ord-mb .hn-flex.hn-flex--fill, .ord-mb .hn-flex.col4.hn-flex--fill {display: flex !important;
        flex-wrap: wrap;
        gap: 10px;
        row-gap: 10px;}
	.ord-mb .hn-flex.hn-flex--fill > .hn-flex__item, .ord-mb .hn-flex.col4.hn-flex--fill > .hn-flex__item {width: calc(50% - 5px);
        margin: 0 !important;}
	.ord-mb .hn-flex.hn-flex--fill img, .ord-mb .hn-flex.col4.hn-flex--fill img {width: 100%;
        height: auto;
        display: block;
        margin: 0 !important;}
}
@media screen and (max-width: 768px) {
	.hn-flex {margin-bottom: 0px !important;}
}
.hn-flex__item .skubutton {margin-top: -10px;}
.hn-flex {display: flex;
    flex-wrap: wrap;
    gap: var(--des-flex-box-gap, 20px);
    margin-bottom: 50px;}
.hn-flex .hn-flex__item {width: calc((100% - 40px) / 3);
    box-sizing: border-box;
    flex: none !important;}
.hn-flex.col4 .hn-flex__item {width: calc((100% - 60px) / 4);}
@media only screen and (max-width: 420px) {
	.hn-flex {flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 10px;}
	.hn-flex .hn-flex__item {width: calc(50% - 5px);
        box-sizing: border-box;}
}
@media screen and (max-width: 768px) {
	.hn-flex img {margin: 5px auto 5px 0;}
	.hn-flex p {line-height: 1.6;}
}
.hn-table table.hn-table__grid td {white-space: initial;}
.page-id-11911 .entry .hn-flex, .page-id-11920 .entry .hn-flex, .page-id-11580 .entry .hn-flex, .page-id-12090 .entry .hn-flex {margin-bottom: 0;}