@import(once) "/apps/catalog/clientlibs/clientlib-base/css/variables.less";@import(once) "/apps/catalog/clientlibs/clientlib-base/css/mixins-text.less";@import(once) "/apps/catalog/clientlibs/clientlib-base/css/mixins.less";@import(once) "/apps/catalog/clientlibs/clientlib-base/css/icon-variables.less";@import(once) "/apps/fontarel/clientlibs/clientlib-base/css/variables.less";@import(once) "/apps/fontarel/clientlibs/clientlib-base/css/mixins-text.less";.banner-specifications-component{background:var(--secondary-color-fg);background:~"radial-gradient(50.31% 89.55% at 32.08% 94.24%, var(--banner-specifications-bg-initial-color) 0%, var(--banner-specifications-bg-end-color) 100%)";color:~"var(--banner-specifications-fg-color)";&.bg-primary{--banner-specifications-bg-initial-color:var(--primary-color-gradient-1);--banner-specifications-bg-end-color:var(--primary-color-gradient-2);--banner-specifications-fg-color:var(--primary-color-fg)}
&.bg-secondary{--banner-specifications-bg-initial-color:var(--secondary-color-gradient-1);--banner-specifications-bg-end-color:var(--secondary-color-gradient-2);--banner-specifications-fg-color:var(--secondary-color-fg)}
&.bg-tertiary{--banner-specifications-bg-initial-color:var(--tertiary-color-gradient-1);--banner-specifications-bg-end-color:var(--tertiary-color-gradient-2);--banner-specifications-fg-color:var(--tertiary-color-fg)}
&__container{position:relative;display:flex;flex-direction:row;justify-content:center;gap:8px;padding:24px 0;min-height:750px;@media(min-width:@bp-md){padding:80px 0;min-height:auto}
}
@widthLeft:158px;&__left{overflow:hidden;display:grid;justify-content:center;width:@widthLeft;@media(min-width:@bp-md){display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:33%}
@media(min-width:@bp-lg){width:63%}
&-image{margin-left:-24px;padding-top:80px;width:175px;height:auto;@media(min-width:@bp-md){margin-left:0;width:376px;height:auto}
@media(min-width:@bp-lg){margin-right:0;padding-top:72px}
}
}
&__button{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);@media(min-width:@bp-lg){position:static;transform:translateX(0);margin-top:30px}
}
&__right{justify-content:center;width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_0___)";@media(min-width:@bp-md){display:grid;margin-left:27px}
@media(min-width:@bp-md){display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}
&-content{position:relative;padding:0;@media(min-width:@bp-lg){display:flex;flex-direction:column;justify-content:center}
}
&-titlenumber{position:absolute;top:-20px;left:26px;display:flex;align-items:center;@media(min-width:@bp-lg){top:-10px;left:110px}
&-toptitle{opacity:.1;font-family:@tertiary-font;font-size:180px;font-style:normal;font-weight:400;line-height:145px;color:currentColor;@media(min-width:@bp-md){font-size:280px;line-height:162px}
}
}
&-title{position:sticky;margin-bottom:18px;margin-left:-163px;.mixin-fontarel-text-title();line-height:30px;letter-spacing:-0.02em;color:currentColor;@media(min-width:@bp-md){margin-left:0}
.text{.mixin-unset-heading-styles()}
}
&-details{display:flex;flex-direction:column;gap:13px;&-list{display:grid;gap:16px;margin:0;padding:0;width:auto;letter-spacing:.1px;color:currentColor;@media(min-width:@bp-md){display:block;column-count:2;column-gap:40px;.mixin-fontarel-text-paragraph();line-height:24px;letter-spacing:.1px;span{.mixin-fontarel-text-paragraph--bold()}
>li{margin-bottom:16px}
}
.mixin-fontarel-text-paragraph--small();span{.mixin-fontarel-text-paragraph--bold();font-size:14px}
}
}
}
&__bottom{position:absolute;bottom:80px;left:0;margin-right:-@grid-margin-xs;margin-left:-@grid-margin-xs;width:~"calc(___YUICSSMIN_PRESERVED_TOKEN_1___)";@media(min-width:@bp-md){position:static;width:100%}
&-title{margin-top:24px;margin-bottom:8px;padding-right:@grid-margin-xs;padding-left:@grid-margin-xs;.mixin-fontarel-text-title();line-height:30px;letter-spacing:-0.02em;color:currentColor;@media(min-width:@bp-md){margin-top:40px}
}
&-values{position:relative;left:0;display:flex;flex-direction:row;overflow-y:hidden;padding-top:8px;padding-left:@grid-margin-xs;width:100%;@media(min-width:@bp-md){position:static;flex-direction:column}
@media(min-width:@bp-lg){padding-top:16px}
&-content{display:flex;flex-direction:row;column-gap:8px;margin:0;padding:0;height:50%;@media(min-width:@bp-md){flex-wrap:wrap;column-gap:16px}
}
}
&-box{opacity:.9;border-radius:.25rem;margin-bottom:16px;padding:15px 12px 12px;width:140px;height:156px;background-color:rgba(0,0,0,40%);@media(min-width:@bp-md){padding:11px 12px 12px;width:176px;height:140px}
hr{display:inline-flex;opacity:.3;border:0;margin-top:18px;width:24px;height:1px;background-color:var(--banner-specifications-fg-color);vertical-align:top}
&-title{width:140px;height:28px;.mixin-hdr-headline-h5--mobile();color:color-mix(in srgb,currentColor 60%,transparent);@media(min-width:@bp-md){height:35px}
strong{display:inline-block;margin-right:2px;.mixin-fontarel-text-title();font-size:20px;line-height:40px;letter-spacing:-0.03em;color:~"var(--banner-specifications-fg-color)";@media(min-width:@bp-md){margin-right:5px;font-size:24px}
}
}
&-value-container,&-subvalue{.mixin-fontarel-text-paragraph--small();letter-spacing:.1px;text-wrap:balance;color:var(--banner-specifications-fg-color)}
}
}
.banner-specifications-component__container{&--sheetview{padding-bottom:80px;min-height:auto;.banner-specifications-component{&__right{@media(min-width:@bp-md){justify-content:center}
}
}
}
&--nutritionalview{justify-content:left;gap:16px;padding-bottom:80px;height:auto;@media(min-width:@bp-md){gap:0}
.banner-specifications-component{&__right{display:flex;justify-content:left;align-items:center;padding-bottom:140px;min-height:563px;@media(min-width:@bp-md){justify-content:center;align-items:flex-start;padding-bottom:0}
@media(min-width:@bp-lg){justify-content:flex-start;padding-top:74px}
&-content{display:none;padding-bottom:0}
}
&__bottom{@media(min-width:@bp-lg){margin-top:54px}
}
&__button{display:none}
}
}
}
&.isAuthor{min-height:790px;background-color:grey;.banner-specifications-component{&__left{@media(min-width:@bp-md){width:40%}
}
&__left-image{.image.cq-Editable-dom{width:428px;height:630px}
}
&__button{bottom:-90px;.button.cq-Editable-dom{margin-top:32px;width:200px}
}
}
}
}