*, *::before, *::after { box-sizing: border-box; } @media (max-width: 959px) { * { -webkit-tap-highlight-color: transparent; } } :root { --body-scrollbar-width: 17px; } @supports (-webkit-appearance: none) { :root { --body-scrollbar-width: 15px; } } body { --body-container-width: calc(100vw - var(--body-scrollbar-width)); width: 100%; margin: 0; } body, html { color: rgba(var(--color-text)); background-color: rgb(var(--color-page-background)); } ol, ul { padding: 0; margin: 0; list-style: none; } dl { margin-block: 0; } dd { margin-inline-start: 0; } h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, section:empty, article:empty, p:empty, a:empty, ol:empty, ul:empty, dl:empty, summary:empty { display: none; } a:not([href]) { cursor: not-allowed; } a:not(.button), a:not(.button):hover { color: rgba(var(--color-button-text-link, var(--color-text)), 1); text-decoration: none; } svg.icon circle, svg.icon path { vector-effect: non-scaling-stroke; } p:first-child { margin-block-start: 0; } p:last-child { margin-block-end: 0; } button { color: inherit; cursor: pointer; } button:disabled { cursor: not-allowed; opacity: 0.3; } summary { position: relative; display: inline-block; list-style: none; cursor: pointer; user-select: none; } summary::-webkit-details-marker { display: none; } :root { --z-index-hover: 1; --z-index-active: 2; --z-index-focus: 3; --z-index-sticky: 1000; --z-index-dropdown: 1010; --z-index-fixed: 1020; --z-index-modal: 1030; --z-index-popover: 1040; --z-index-tooltip: 1050; --z-index-toast: 1060; } :root { --page-padding: 30px; } @media (max-width: 959px) { :root { --page-padding: 20px; } } .page-width { width: 100%; max-width: calc(var(--page-padding) * 2 + var(--page-width)); padding-inline: var(--page-padding); margin-inline: auto; } .page-width.page-width--fluid { max-width: 100%; } .page-width.page-width--thin { max-width: 726px; } @media (max-width: 959px) { .page-width { max-width: 100%; padding-inline: var(--page-padding); } } .grid { --column-gap: var(--grid-horizontal-spacing); --row-gap: var(--grid-vertical-spacing); display: grid; grid-auto-columns: var(--column-width); grid-auto-flow: column; gap: var(--row-gap) var(--column-gap); width: 100%; overflow-x: auto; } @media (max-width: 959px) { .grid { --column-gap: calc(var(--grid-horizontal-spacing) / 2); --row-gap: calc(var(--grid-vertical-spacing) / 2); --column-width: calc( ( 100% - var(--column-gap, 0px) * (var(--mobile-gap-columns, var(--mobile-columns)) - 1) ) / var(--mobile-columns) ); grid-template-rows: repeat(var(--mobile-rows, auto), auto); grid-template-columns: repeat(var(--mobile-columns), var(--column-width)); grid-auto-flow: var(--mobile-auto-flow); } } @media (min-width: 960px) { .grid { --column-width: calc( ( 100% - var(--column-gap, 0px) * (var(--desktop-gap-columns, var(--desktop-columns)) - 1) ) / var(--desktop-columns) ); grid-template-rows: repeat(var(--desktop-rows, auto), auto); grid-template-columns: repeat(var(--desktop-columns), var(--column-width)); grid-auto-flow: var(--desktop-auto-flow); } } .button, .shopline-element-buy-now { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: calc(var(--button-border-thickness) + 9px) calc(var(--button-border-thickness) + 18px); font-family: var(--sort-body-font); font-size: var(--body2-font-size); font-weight: var(--body-bold-font-weight); line-height: var(--sort-body-line-height); color: rgb(var(--color-button-text)); text-align: center; text-decoration: none; letter-spacing: var(--sort-body-letter-spacing); white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; background-color: rgba( var(--color-button-background), var(--button-background-opacity) ); border: none; border-radius: var(--button-border-radius); transition: opacity 150ms ease-in-out; --border-opacity: calc(100% - var(--button-border-opacity)); --alpha-button-background: 1; } .button:not(.button--link, .button--text, .button--icon), .shopline-element-buy-now { white-space: nowrap; box-shadow: var(--button-shadow-offset-x) var(--button-shadow-offset-y) var(--button-shadow-blur) rgba(var(--color-shadow), var(--button-shadow-opacity)); } .button:not(.button--link, .button--text, .button--icon)::after, .shopline-element-buy-now::after { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 1; width: 100%; height: 100%; content: ""; border-radius: var(--button-border-radius); box-shadow: 0 0 0 var(--button-border-thickness, 1px) rgba(var(--color-button-text), var(--border-opacity)), 0 0 0 var(--button-border-thickness, 1px) rgba(var(--color-button-background), var(--alpha-button-background)); transition: box-shadow var(--duration-short, 0.3s) ease; } .button:disabled, .button.disabled { cursor: not-allowed; opacity: 0.3; } .button:not([disabled], .button--icon):hover, .shopline-element-buy-now:hover { background-color: rgba( var(--color-button-background), calc(var(--button-background-opacity) - 10%) ); } .button:not([disabled], .button--icon):hover::after, .shopline-element-buy-now:hover::after { box-shadow: 0 0 0 calc(var(--button-border-thickness) + 1px) rgba(var(--color-button-text), var(--border-opacity)), 0 0 0 calc(var(--button-border-thickness) + 1px) rgba(var(--color-button-background), var(--alpha-button-background)); } .button:not([disabled], .button--icon)::after { position: absolute; display: block; width: 100%; height: 100%; pointer-events: none; content: ""; } .button:not([disabled], .button--icon):active::after { animation: animation-button-press linear 0.6s 1; animation-fill-mode: forwards; } @keyframes animation-button-press { 0% { background-color: rgba(var(--color-button-text), 0.08); background-image: radial-gradient( circle, rgba(var(--color-button-text), 0.08) 1%, transparent 1% ); background-repeat: no-repeat; background-position: 50%; background-origin: padding-box; background-size: 100%; } 100% { background-position: 50%; background-size: 25000%; } } .button--secondary { --color-button-background: var(--color-button-secondary-background); --color-button-text: var(--color-button-secondary-text); --border-opacity: var(--button-border-opacity); } .button--secondary:not(.button--link, .button--text)::after { box-shadow: 0 0 0 var(--button-border-thickness, 1px) rgba(var(--color-button-secondary-border), var(--button-border-opacity)); } .button--secondary:not(.button--link, .button--text):active::after { box-shadow: 0 0 0 rgb(var(--color-button-secondary-border)), inset var(--button-border-thickness, 1px) 0 0 rgba(var(--color-button-secondary-border), var(--button-border-opacity)), inset 0 var(--button-border-thickness, 1px) 0 rgba(var(--color-button-secondary-border), var(--button-border-opacity)); } .button--link { --color-button-background: transparent; --color-button-text: rgb(var(--color-text)); position: relative; padding: 0 1px; text-decoration: underline !important; text-underline-offset: 6px; } .button--text { --color-button-background: transparent; --color-button-text: rgb(var(--color-text)); position: relative; padding: 0 1px; } .button__spinner { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; display: none; width: 20px; height: 20px; margin-block-start: -10px; margin-inline-start: -10px; color: rgb(var(--color-button-text)); } .button.loading { color: transparent; } .button.loading .button__spinner { display: flex; animation: animation-circling linear 1.5s infinite; } .button--fill { width: 100%; } .button--icon { position: relative; display: inline-flex; padding: 0; color: inherit; text-decoration: none; cursor: pointer; background-color: transparent; border: none; transition: transform 300ms; } @media (min-width: 960px) { .button--icon:hover, .button--icon:focus { transform: scale(1.11); } } .button--icon::after { display: none; } .button.button--icon:hover { background-color: transparent; box-shadow: none; } .loading--rotator { display: none; } .loading .loading--rotator { animation: animation-circling linear 1.5s infinite; } .loading > .loading--rotator { display: inline-flex; } .button.loading .loading--rotator { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; display: flex; width: 20px; height: 20px; margin-block-start: -10px; margin-inline-start: -10px; color: rgb(var(--color-button-text)); content: ""; } .field { position: relative; box-sizing: border-box; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; width: 100%; margin-block-end: 20px; font-size: var(--body4-font-size); line-height: var(--sort-body-line-height); color: rgb(var(--color-text)); background-color: rgb(var(--color-background)); transition: all 300ms; } @media (max-width: 959px) { .field { margin-block-end: 16px; } } .field::after { position: absolute; inset: 0; z-index: 1; pointer-events: none; content: ""; border-color: rgba(var(--color-text), var(--input-border-opacity)); border-style: solid; border-width: var(--input-border-thickness); border-radius: var(--input-border-radius); box-shadow: var(--input-shadow-offset-x) var(--input-shadow-offset-y) var(--input-shadow-blur) rgba(var(--color-text), var(--input-shadow-opacity)); transition: border-color 300ms; } .field__inner { position: relative; flex: 1; } .field__group { display: flex; gap: 16px; } .field__label { position: absolute; inset-block-start: 50%; inset-inline: 16px 0; display: -webkit-box; overflow: hidden; font-size: inherit; color: rgb(var(--color-light-text)); text-overflow: ellipsis; -webkit-line-clamp: 1; word-break: break-word; pointer-events: none; transition: transform 300ms ease; transform: translateY(-50%); transform-origin: left top; -webkit-box-orient: vertical; } .field__input { width: 100%; padding: 24px 16px 10px; font-size: inherit; line-height: var(--sort-body-line-height); color: rgb(var(--color-text)); appearance: none; background: none; border: none; outline: none; box-shadow: none !important; } .field__input::placeholder { opacity: 0; } .field__input::-webkit-search-cancel-button { display: none; } .field__input:focus ~ .field__label, .field__input:not(:placeholder-shown) ~ .field__label, .field__input:-webkit-autofill ~ .field__label { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; word-break: normal; white-space: nowrap; transform: scale(0.7) translate(0, -120%); -webkit-box-orient: vertical; } .field__input:-webkit-autofill, .field__input:-webkit-autofill:hover, .field__input:-webkit-autofill:focus, .field__input:-webkit-autofill:active { box-shadow: 0 0 0 1000px rgb(var(--color-background)) inset !important; -webkit-text-fill-color: rgb(var(--color-text)); } .field__input.textarea { min-height: 100px; padding-block: 0; padding-inline: 16px; margin-block: 20px 6px; resize: none; } .field__input.textarea + .field__label { inset-block-start: 25px; } .field__suffix { display: flex; justify-content: center; padding-block: 6px; padding-inline-end: 10px; } .field__info { display: flex; font-size: 12px; line-height: 1.4; } .field__info > svg { margin-inline-end: 4px; } .field__info--error { margin-block: 8px 20px; font-size: var(--body6-font-size); color: rgb(var(--color-error-message)); } .field__info--error:empty { display: none; } @media (min-width: 960px) { .field__info > svg { margin-inline-end: 8px; } } .field:hover::after { border-color: rgba(var(--color-text), var(--input-border-opacity)); border-width: calc(var(--input-border-thickness) + 1px); } .field:focus::after, .field:focus-within::after { border-color: rgba(var(--color-text), var(--input-border-opacity)); border-width: calc(var(--input-border-thickness) + 1px); } .field--disabled { pointer-events: none; } .field--disabled::after { background-color: rgb(0 0 0 / 10%); border-color: rgb(0 0 0 / 10%); } .field--error::after { border-color: rgba(var(--color-error-message), var(--input-border-opacity)); border-width: calc(var(--input-border-thickness) + 1px); } .field--normal .field__input { padding: 13px 16px; } .field--normal .field__input::placeholder { opacity: 1; } .field--normal .field__input ~ .field__label, .field--normal .field__input:focus ~ .field__label, .field--normal .field__input:not(:placeholder-shown) ~ .field__label, .field--normal .field__input:-webkit-autofill ~ .field__label { display: none; } .field-checkbox { position: relative; inset-block-start: 0.2em; box-sizing: border-box; padding: 0; margin: 0; font-size: 14px; font-feature-settings: "tnum"; font-variant: tabular-nums; line-height: 1; white-space: nowrap; list-style: none; cursor: pointer; outline: none; } .field-checkbox input[type="checkbox"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; appearance: auto; cursor: pointer; opacity: 0; } .field-checkbox .checkbox { position: relative; inset-block-start: 0; inset-inline-start: 0; display: inline-block; width: 16px; height: 16px; border-collapse: separate; border: 1px solid rgb(var(--color-entry-line)); border-radius: 2px; transition: all 0.3s; direction: ltr; } .field-checkbox .checkbox::after { position: absolute; inset-block-start: 50%; inset-inline-start: 21.5%; display: table; width: 6px; height: 8px; content: " "; border: 2px solid rgb(var(--color-button-text)); border-block-start: 0; border-inline-start: 0; opacity: 0; transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s; transform: rotate(45deg) scale(0) translate(-50%, -50%); } .field-checkbox input[type="checkbox"]:checked + .checkbox { background-color: rgb(var(--color-button-background)); border-color: rgb(var(--color-button-background)); } .field-checkbox input[type="checkbox"]:checked + .checkbox::after { position: absolute; display: table; content: " "; border: 2px solid rgb(var(--color-button-text)); border-block-start: 0; border-inline-start: 0; opacity: 1; transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; transform: rotate(45deg) scale(1) translate(-50%, -50%); } .field select ~ .icon-arrow { position: absolute; inset-block: 0; inset-inline-end: 16px; display: flex; align-items: center; margin-block: auto; margin-inline: auto; pointer-events: none; } .field-switch { position: relative; display: inline-block; width: 40px; height: 20px; } .field-switch-slider { position: absolute; inset: 0; cursor: pointer; background-color: rgba(var(--color-text), 0.1); border-radius: 20px; transition: 0.2s; } .field-switch-slider::before { position: absolute; inset-block-end: 2px; inset-inline-start: 2px; width: 16px; height: 16px; content: ""; background-color: rgb(var(--color-page-background)); border-radius: 50%; transition: 0.2s; } .field-switch input { width: 0; height: 0; opacity: 0; } .field-switch input:checked + .field-switch-slider { background-color: rgba(var(--color-text), 1); } .field-switch input:checked + .field-switch-slider::before { transform: translateX(20px); } .field-radio { position: relative; margin-inline-end: 8px; } .field-radio-wrapper { display: inline-flex; align-items: center; margin-inline-end: 20px; cursor: pointer; } .field-radio-wrapper:last-child { margin-inline-end: 0; } .field-radio .radio { position: relative; inset-block-start: 0; inset-inline-start: 0; display: block; width: 16px; height: 16px; border-collapse: separate; background-color: rgb(var(--color-page-background)); border: 1px solid rgb(var(--color-entry-line)); border-radius: 50%; transition: all 0.3s; } .field-radio .radio::after { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 16px; height: 16px; margin-block-start: -8px; margin-inline-start: -8px; content: ""; background-color: rgb(var(--color-button-background)); border-radius: 16px; opacity: 0; transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); transform: scale(0); } .field-radio > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; margin: 0; cursor: pointer; opacity: 0; } .field-radio > input:checked + .radio { border-color: rgb(var(--color-button-background)); } .field-radio > input:checked + .radio::after { opacity: 1; transform: scale(0.5); } .form__error-message { margin-block: 8px 20px; font-size: var(--body6-font-size); color: rgb(var(--color-error-message)); } .form__error-message:empty { display: none; } @media (max-width: 959px) { .form__error-message { margin-block: 6px 16px; } } @keyframes animation-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes animation-fade-in-center { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes animation-zoom-in { 0% { opacity: 0; transform: scaleY(0.8); } 100% { opacity: 1; transform: scaleY(1); } } @keyframes animation-slide-in { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes animation-slide-in-top { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes animation-slide-in-bottom { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes animation-slide-in-left { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } } @keyframes animation-slide-in-right { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0); } } @keyframes animation-circling { 0% { transform: rotate(0); } 100% { transform: rotate(1turn); } } @keyframes animation-dropdown { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes column-fade-in { 0% { opacity: 0; transform: translate3d(0, 25px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } :root { --title1-font-size: calc(var(--sort-title-size) * 2.3333); --title2-font-size: calc(var(--sort-title-size) * 1.6667); --title3-font-size: calc(var(--sort-title-size) * 1.2); --title4-font-size: calc(var(--sort-title-size) * 1); --title5-font-size: calc(var(--sort-title-size) * 0.8333); --title6-font-size: calc(var(--sort-title-size) * 0.6667); --body1-font-size: calc(var(--sort-body-size) * 1.5714); --body2-font-size: calc(var(--sort-body-size) * 1.2857); --body3-font-size: calc(var(--sort-body-size) * 1.1429); --body4-font-size: calc(var(--sort-body-size) * 1); --body5-font-size: calc(var(--sort-body-size) * 0.9286); --body6-font-size: calc(var(--sort-body-size) * 0.8571); --title0-font-size-mobile-ratio: 30 / 70; --title1-font-size-mobile-ratio: 30 / 70; --title2-font-size-mobile-ratio: 25 / 48; --title3-font-size-mobile-ratio: 24 / 36; --title4-font-size-mobile-ratio: 22 / 30; --title5-font-size-mobile-ratio: 20 / 25; --title6-font-size-mobile-ratio: 18 / 20; --body0-font-size-mobile-ratio: 14 / 16; --body1-font-size-mobile-ratio: 16 / 22; --body2-font-size-mobile-ratio: 15 / 18; --body3-font-size-mobile-ratio: 14 / 16; --body4-font-size-mobile-ratio: 13 / 14; --body5-font-size-mobile-ratio: 12 / 13; --body6-font-size-mobile-ratio: 1; } @media (max-width: 959px) { :root { --title1-font-size: calc(var(--sort-title-size) * 1); --title2-font-size: calc(var(--sort-title-size) * 0.8333); --title3-font-size: calc(var(--sort-title-size) * 0.7333); --title4-font-size: calc(var(--sort-title-size) * 0.6667); --title5-font-size: calc(var(--sort-title-size) * 0.6); --title6-font-size: calc(var(--sort-title-size) * 0.6); --body1-font-size: calc(var(--sort-body-size) * 1.1429); --body2-font-size: calc(var(--sort-body-size) * 1.0714); --body3-font-size: calc(var(--sort-body-size) * 1); --body4-font-size: calc(var(--sort-body-size) * 0.9286); --body5-font-size: calc(var(--sort-body-size) * 0.8571); --body6-font-size: calc(var(--sort-body-size) * 0.8571); } } h1, h2, h3, h4, h5, h6, .title0, .title1, .title2, .title3, .title4, .title5, .title6 { margin-block: 0; font-family: var(--sort-title-font); font-size: var(--sort-title-size); font-style: var(--sort-title-font-style); font-weight: var(--sort-title-font-weight, 700); line-height: var(--sort-title-line-height); text-transform: var(--sort-title-text-transform); letter-spacing: var(--sort-title-letter-spacing); word-break: break-word; } h1.body-font-bold, h1.title-font-bold, h2.body-font-bold, h2.title-font-bold, h3.body-font-bold, h3.title-font-bold, h4.body-font-bold, h4.title-font-bold, h5.body-font-bold, h5.title-font-bold, h6.body-font-bold, h6.title-font-bold, .title0.body-font-bold, .title0.title-font-bold, .title1.body-font-bold, .title1.title-font-bold, .title2.body-font-bold, .title2.title-font-bold, .title3.body-font-bold, .title3.title-font-bold, .title4.body-font-bold, .title4.title-font-bold, .title5.body-font-bold, .title5.title-font-bold, .title6.body-font-bold, .title6.title-font-bold { font-weight: calc(var(--sort-title-font-weight, 700) + 300) !important; } @media (max-width: 959px) { h1, h2, h3, h4, h5, h6, .title0, .title1, .title2, .title3, .title4, .title5, .title6, .mobile-title0, .mobile-title1, .mobile-title2, .mobile-title3, .mobile-title4, .mobile-title5, .mobile-title6 { font-family: var(--sort-title-font-mobile, var(--sort-title-font)); font-size: var(--sort-title-size-mobile, var(--sort-title-size)); font-style: var( --sort-title-font-style-mobile, var(--sort-title-font-style) ); font-weight: var( --sort-title-font-weight-mobile, var(--sort-title-font-weight, 700) ); line-height: var( --sort-title-line-height-mobile, var(--sort-title-line-height) ); text-transform: var( --sort-title-text-transform-mobile, var(--sort-title-text-transform) ); letter-spacing: var( --sort-title-letter-spacing-mobile, var(--sort-title-letter-spacing) ); } h1.body-font-bold, h1.title-font-bold, h2.body-font-bold, h2.title-font-bold, h3.body-font-bold, h3.title-font-bold, h4.body-font-bold, h4.title-font-bold, h5.body-font-bold, h5.title-font-bold, h6.body-font-bold, h6.title-font-bold, .title0.body-font-bold, .title0.title-font-bold, .title1.body-font-bold, .title1.title-font-bold, .title2.body-font-bold, .title2.title-font-bold, .title3.body-font-bold, .title3.title-font-bold, .title4.body-font-bold, .title4.title-font-bold, .title5.body-font-bold, .title5.title-font-bold, .title6.body-font-bold, .title6.title-font-bold, .mobile-title0.body-font-bold, .mobile-title0.title-font-bold, .mobile-title1.body-font-bold, .mobile-title1.title-font-bold, .mobile-title2.body-font-bold, .mobile-title2.title-font-bold, .mobile-title3.body-font-bold, .mobile-title3.title-font-bold, .mobile-title4.body-font-bold, .mobile-title4.title-font-bold, .mobile-title5.body-font-bold, .mobile-title5.title-font-bold, .mobile-title6.body-font-bold, .mobile-title6.title-font-bold { font-weight: calc( var(--sort-title-font-weight-mobile, var(--sort-title-font-weight, 700)) + 300 ) !important; } } .title0 { --sort-title-font: var(--sort-title0-font); --sort-title-size: var(--sort-title0-size); --sort-title-size-mobile: calc( var(--sort-title0-size) * var(--title0-font-size-mobile-ratio) ); --sort-title-font-style: var(--sort-title0-font-style); --sort-title-font-weight: var(--sort-title0-font-weight); --sort-title-line-height: var(--sort-title0-line-height); --sort-title-text-transform: var(--sort-title0-text-transform); --sort-title-letter-spacing: var(--sort-title0-letter-spacing); } h1, .title1 { --sort-title-font: var(--sort-title1-font); --sort-title-size: var(--sort-title1-size); --sort-title-size-mobile: calc( var(--sort-title1-size) * var(--title1-font-size-mobile-ratio) ); --sort-title-font-style: var(--sort-title1-font-style); --sort-title-font-weight: var(--sort-title1-font-weight); --sort-title-line-height: var(--sort-title1-line-height); --sort-title-text-transform: var(--sort-title1-text-transform); --sort-title-letter-spacing: var(--sort-title1-letter-spacing); } h2, .title2 { --sort-title-font: var(--sort-title2-font); --sort-title-size: var(--sort-title2-size); --sort-title-size-mobile: calc( var(--sort-title2-size) * var(--title2-font-size-mobile-ratio) ); --sort-title-font-style: var(--sort-title2-font-style); --sort-title-font-weight: var(--sort-title2-font-weight); --sort-title-line-height: var(--sort-title2-line-height); --sort-title-text-transform: var(--sort-title2-text-transform); --sort-title-letter-spacing: var(--sort-title2-letter-spacing); } h3, .title3 { --sort-title-font: var(--sort-title3-font); --sort-title-size: var(--sort-title3-size); --sort-title-size-mobile: calc( var(--sort-title3-size) * var(--title3-font-size-mobile-ratio) ); --sort-title-font-style: var(--sort-title3-font-style); --sort-title-font-weight: var(--sort-title3-font-weight); --sort-title-line-height: var(--sort-title3-line-height); --sort-title-text-transform: var(--sort-title3-text-transform); --sort-title-letter-spacing: var(--sort-title3-letter-spacing); } h4, .title4 { --sort-title-font: var(--sort-title4-font); --sort-title-size: var(--sort-title4-size); --sort-title-size-mobile: calc( var(--sort-title4-size) * var(--title4-font-size-mobile-ratio) ); --sort-title-font-style: var(--sort-title4-font-style); --sort-title-font-weight: var(--sort-title4-font-weight); --sort-title-line-height: var(--sort-title4-line-height); --sort-title-text-transform: var(--sort-title4-text-transform); --sort-title-letter-spacing: var(--sort-title4-letter-spacing); } h5, .title5 { --sort-title-font: var(--sort-title5-font); --sort-title-size: var(--sort-title5-size); --sort-title-size-mobile: calc( var(--sort-title5-size) * var(--title5-font-size-mobile-ratio) ); --sort-title-font-style: var(--sort-title5-font-style); --sort-title-font-weight: var(--sort-title5-font-weight); --sort-title-line-height: var(--sort-title5-line-height); --sort-title-text-transform: var(--sort-title5-text-transform); --sort-title-letter-spacing: var(--sort-title5-letter-spacing); } h6, .title6 { --sort-title-font: var(--sort-title6-font); --sort-title-size: var(--sort-title6-size); --sort-title-size-mobile: calc( var(--sort-title6-size) * var(--title6-font-size-mobile-ratio) ); --sort-title-font-style: var(--sort-title6-font-style); --sort-title-font-weight: var(--sort-title6-font-weight); --sort-title-line-height: var(--sort-title6-line-height); --sort-title-text-transform: var(--sort-title6-text-transform); --sort-title-letter-spacing: var(--sort-title6-letter-spacing); } .mobile-title0 { --sort-title-font-mobile: var(--sort-title0-font); --sort-title-size-mobile: calc( var(--sort-title0-size) * var(--title0-font-size-mobile-ratio) ); --sort-title-font-style-mobile: var(--sort-title0-font-style); --sort-title-font-weight-mobile: var(--sort-title0-font-weight); --sort-title-line-height-mobile: var(--sort-title0-line-height); --sort-title-text-transform-mobile: var(--sort-title0-text-transform); --sort-title-letter-spacing-mobile: var(--sort-title0-letter-spacing); } h1.mobile-typography-default, .mobile-title1 { --sort-title-font-mobile: var(--sort-title1-font); --sort-title-size-mobile: calc( var(--sort-title1-size) * var(--title1-font-size-mobile-ratio) ); --sort-title-font-style-mobile: var(--sort-title1-font-style); --sort-title-font-weight-mobile: var(--sort-title1-font-weight); --sort-title-line-height-mobile: var(--sort-title1-line-height); --sort-title-text-transform-mobile: var(--sort-title1-text-transform); --sort-title-letter-spacing-mobile: var(--sort-title1-letter-spacing); } h2.mobile-typography-default, .mobile-title2 { --sort-title-font-mobile: var(--sort-title2-font); --sort-title-size-mobile: calc( var(--sort-title2-size) * var(--title2-font-size-mobile-ratio) ); --sort-title-font-style-mobile: var(--sort-title2-font-style); --sort-title-font-weight-mobile: var(--sort-title2-font-weight); --sort-title-line-height-mobile: var(--sort-title2-line-height); --sort-title-text-transform-mobile: var(--sort-title2-text-transform); --sort-title-letter-spacing-mobile: var(--sort-title2-letter-spacing); } h3.mobile-typography-default, .mobile-title3 { --sort-title-font-mobile: var(--sort-title3-font); --sort-title-size-mobile: calc( var(--sort-title3-size) * var(--title3-font-size-mobile-ratio) ); --sort-title-font-style-mobile: var(--sort-title3-font-style); --sort-title-font-weight-mobile: var(--sort-title3-font-weight); --sort-title-line-height-mobile: var(--sort-title3-line-height); --sort-title-text-transform-mobile: var(--sort-title3-text-transform); --sort-title-letter-spacing-mobile: var(--sort-title3-letter-spacing); } h4.mobile-typography-default, .mobile-title4 { --sort-title-font-mobile: var(--sort-title4-font); --sort-title-size-mobile: calc( var(--sort-title4-size) * var(--title4-font-size-mobile-ratio) ); --sort-title-font-style-mobile: var(--sort-title4-font-style); --sort-title-font-weight-mobile: var(--sort-title4-font-weight); --sort-title-line-height-mobile: var(--sort-title4-line-height); --sort-title-text-transform-mobile: var(--sort-title4-text-transform); --sort-title-letter-spacing-mobile: var(--sort-title4-letter-spacing); } h5.mobile-typography-default, .mobile-title5 { --sort-title-font-mobile: var(--sort-title5-font); --sort-title-size-mobile: calc( var(--sort-title5-size) * var(--title5-font-size-mobile-ratio) ); --sort-title-font-style-mobile: var(--sort-title5-font-style); --sort-title-font-weight-mobile: var(--sort-title5-font-weight); --sort-title-line-height-mobile: var(--sort-title5-line-height); --sort-title-text-transform-mobile: var(--sort-title5-text-transform); --sort-title-letter-spacing-mobile: var(--sort-title5-letter-spacing); } h6.mobile-typography-default, .mobile-title6 { --sort-title-font-mobile: var(--sort-title6-font); --sort-title-size-mobile: calc( var(--sort-title6-size) * var(--title6-font-size-mobile-ratio) ); --sort-title-font-style-mobile: var(--sort-title6-font-style); --sort-title-font-weight-mobile: var(--sort-title6-font-weight); --sort-title-line-height-mobile: var(--sort-title6-line-height); --sort-title-text-transform-mobile: var(--sort-title6-text-transform); --sort-title-letter-spacing-mobile: var(--sort-title6-letter-spacing); } .body0, .body1, .body2, .body3, .body4, .body5, .body6 { font-family: var(--sort-body-font); font-size: var(--sort-body-size); font-style: var(--sort-body-font-style); font-weight: var(--sort-body-font-weight, 400); line-height: var(--sort-body-line-height); letter-spacing: var(--sort-body-letter-spacing); word-break: break-word; } .body0.body-font-bold, .body0.title-font-bold, .body1.body-font-bold, .body1.title-font-bold, .body2.body-font-bold, .body2.title-font-bold, .body3.body-font-bold, .body3.title-font-bold, .body4.body-font-bold, .body4.title-font-bold, .body5.body-font-bold, .body5.title-font-bold, .body6.body-font-bold, .body6.title-font-bold { font-weight: calc(var(--sort-body-font-weight, 400) + 300) !important; } @media (max-width: 959px) { .body0, .body1, .body2, .body3, .body4, .body5, .body6, .mobile-body0, .mobile-body1, .mobile-body2, .mobile-body3, .mobile-body4, .mobile-body5, .mobile-body6 { font-family: var(--sort-body-font-mobile, var(--sort-body-font)); font-size: var(--sort-body-size-mobile, var(--sort-body-size)); font-style: var(--sort-body-font-style-mobile, var(--sort-body-font-style)); font-weight: var( --sort-body-font-weight-mobile, var(--sort-body-font-weight, 700) ); line-height: var( --sort-body-line-height-mobile, var(--sort-body-line-height) ); letter-spacing: var( --sort-body-letter-spacing-mobile, var(--sort-body-letter-spacing) ); } .body0.body-font-bold, .body0.title-font-bold, .body1.body-font-bold, .body1.title-font-bold, .body2.body-font-bold, .body2.title-font-bold, .body3.body-font-bold, .body3.title-font-bold, .body4.body-font-bold, .body4.title-font-bold, .body5.body-font-bold, .body5.title-font-bold, .body6.body-font-bold, .body6.title-font-bold, .mobile-body0.body-font-bold, .mobile-body0.title-font-bold, .mobile-body1.body-font-bold, .mobile-body1.title-font-bold, .mobile-body2.body-font-bold, .mobile-body2.title-font-bold, .mobile-body3.body-font-bold, .mobile-body3.title-font-bold, .mobile-body4.body-font-bold, .mobile-body4.title-font-bold, .mobile-body5.body-font-bold, .mobile-body5.title-font-bold, .mobile-body6.body-font-bold, .mobile-body6.title-font-bold { font-weight: calc( var(--sort-body-font-weight-mobile, var(--sort-body-font-weight, 700)) + 300 ) !important; } } .body0 { --sort-body-font: var(--sort-body0-font); --sort-body-size: var(--sort-body0-size); --sort-body-size-mobile: calc( var(--sort-body0-size) * var(--body0-font-size-mobile-ratio) ); --sort-body-font-style: var(--sort-body0-style); --sort-body-font-weight: var(--sort-body0-font-weight); --sort-body-line-height: var(--sort-body0-line-height); --sort-body-letter-spacing: var(--sort-body0-letter-spacing); } .body1 { --sort-body-font: var(--sort-body1-font); --sort-body-size: var(--sort-body1-size); --sort-body-size-mobile: calc( var(--sort-body1-size) * var(--body1-font-size-mobile-ratio) ); --sort-body-font-style: var(--sort-body1-style); --sort-body-font-weight: var(--sort-body1-font-weight); --sort-body-line-height: var(--sort-body1-line-height); --sort-body-letter-spacing: var(--sort-body1-letter-spacing); } .body2 { --sort-body-font: var(--sort-body2-font); --sort-body-size: var(--sort-body2-size); --sort-body-size-mobile: calc( var(--sort-body2-size) * var(--body2-font-size-mobile-ratio) ); --sort-body-font-style: var(--sort-body2-style); --sort-body-font-weight: var(--sort-body2-font-weight); --sort-body-line-height: var(--sort-body2-line-height); --sort-body-letter-spacing: var(--sort-body2-letter-spacing); } .body3 { --sort-body-font: var(--sort-body3-font); --sort-body-size: var(--sort-body3-size); --sort-body-size-mobile: calc( var(--sort-body3-size) * var(--body3-font-size-mobile-ratio) ); --sort-body-font-style: var(--sort-body3-style); --sort-body-font-weight: var(--sort-body3-font-weight); --sort-body-line-height: var(--sort-body3-line-height); --sort-body-letter-spacing: var(--sort-body3-letter-spacing); } .body4 { --sort-body-font: var(--sort-body4-font); --sort-body-size: var(--sort-body4-size); --sort-body-size-mobile: calc( var(--sort-body4-size) * var(--body4-font-size-mobile-ratio) ); --sort-body-font-style: var(--sort-body4-style); --sort-body-font-weight: var(--sort-body4-font-weight); --sort-body-line-height: var(--sort-body4-line-height); --sort-body-letter-spacing: var(--sort-body4-letter-spacing); } .body5 { --sort-body-font: var(--sort-body5-font); --sort-body-size: var(--sort-body5-size); --sort-body-size-mobile: calc( var(--sort-body5-size) * var(--body5-font-size-mobile-ratio) ); --sort-body-font-style: var(--sort-body5-style); --sort-body-font-weight: var(--sort-body5-font-weight); --sort-body-line-height: var(--sort-body5-line-height); --sort-body-letter-spacing: var(--sort-body5-letter-spacing); } .body6 { --sort-body-font: var(--sort-body6-font); --sort-body-size: var(--sort-body6-size); --sort-body-size-mobile: calc( var(--sort-body6-size) * var(--body6-font-size-mobile-ratio) ); --sort-body-font-style: var(--sort-body6-style); --sort-body-font-weight: var(--sort-body6-font-weight); --sort-body-line-height: var(--sort-body6-line-height); --sort-body-letter-spacing: var(--sort-body6-letter-spacing); } .mobile-body0 { --sort-body-font-mobile: var(--sort-body0-font); --sort-body-size-mobile: calc( var(--sort-body0-size) * var(--body0-font-size-mobile-ratio) ); --sort-body-font-weight-mobile: var(--sort-body0-font-weight); --sort-body-font-style-mobile: var(--sort-body0-style); --sort-body-line-height-mobile: var(--sort-body0-line-height); --sort-body-letter-spacing-mobile: var(--sort-body0-letter-spacing); } .mobile-body1 { --sort-body-font-mobile: var(--sort-body1-font); --sort-body-size-mobile: calc( var(--sort-body1-size) * var(--body1-font-size-mobile-ratio) ); --sort-body-font-style-mobile: var(--sort-body1-style); --sort-body-font-weight-mobile: var(--sort-body1-font-weight); --sort-body-line-height-mobile: var(--sort-body1-line-height); --sort-body-letter-spacing-mobile: var(--sort-body1-letter-spacing); } .mobile-body2 { --sort-body-font-mobile: var(--sort-body2-font); --sort-body-size-mobile: calc( var(--sort-body2-size) * var(--body2-font-size-mobile-ratio) ); --sort-body-font-style-mobile: var(--sort-body2-style); --sort-body-font-weight-mobile: var(--sort-body2-font-weight); --sort-body-line-height-mobile: var(--sort-body2-line-height); --sort-body-letter-spacing-mobile: var(--sort-body2-letter-spacing); } .mobile-body3 { --sort-body-font-mobile: var(--sort-body3-font); --sort-body-size-mobile: calc( var(--sort-body3-size) * var(--body3-font-size-mobile-ratio) ); --sort-body-font-style-mobile: var(--sort-body3-style); --sort-body-font-weight-mobile: var(--sort-body3-font-weight); --sort-body-line-height-mobile: var(--sort-body3-line-height); --sort-body-letter-spacing-mobile: var(--sort-body3-letter-spacing); } .mobile-body4 { --sort-body-font-mobile: var(--sort-body4-font); --sort-body-size-mobile: calc( var(--sort-body4-size) * var(--body4-font-size-mobile-ratio) ); --sort-body-font-style-mobile: var(--sort-body4-style); --sort-body-font-weight-mobile: var(--sort-body4-font-weight); --sort-body-line-height-mobile: var(--sort-body4-line-height); --sort-body-letter-spacing-mobile: var(--sort-body4-letter-spacing); } .mobile-body5 { --sort-body-font-mobile: var(--sort-body5-font); --sort-body-size-mobile: calc( var(--sort-body5-size) * var(--body5-font-size-mobile-ratio) ); --sort-body-font-style-mobile: var(--sort-body5-style); --sort-body-font-weight-mobile: var(--sort-body5-font-weight); --sort-body-line-height-mobile: var(--sort-body5-line-height); --sort-body-letter-spacing-mobile: var(--sort-body5-letter-spacing); } .mobile-body6 { --sort-body-font-mobile: var(--sort-body6-font); --sort-body-size-mobile: calc( var(--sort-body6-size) * var(--body6-font-size-mobile-ratio) ); --sort-body-font-style-mobile: var(--sort-body6-style); --sort-body-font-weight-mobile: var(--sort-body6-font-weight); --sort-body-line-height-mobile: var(--sort-body6-line-height); --sort-body-letter-spacing-mobile: var(--sort-body6-letter-spacing); } .title-font-bold { font-weight: var(--sort-title-font-weight-bold) !important; } .body-font-bold { font-weight: var(--sort-body-font-weight-bold) !important; } .text-left { text-align: start; } .text-center { text-align: center; } .text-right { text-align: end; } @media (max-width: 959px) { .text-left-mobile { text-align: start; } .text-center-mobile { text-align: center; } .text-right-mobile { text-align: end; } } .hidden { display: none !important; } @media (max-width: 959px) { .hidden-mobile { display: none !important; } } @media (min-width: 960px) { .hidden-desktop { display: none !important; } } .hidden-empty:empty { display: none; } .overflow-hidden { overflow: hidden; } .flex-align-center { display: flex; align-items: center; } .flex-justify-center { display: flex; justify-content: center; } .block-full-width { display: block; width: 100%; } .tag-unstyled { padding: 0; margin: 0; } .list-unstyled { padding: 0; margin: 0; list-style: none; } .font-bold { font-weight: bold; } .hover-scale .hover-scale__image { transition: all 0.5s; } .hover-scale:hover .hover-scale__image { transform: scale(1.05); } .modal-border-shadow { box-sizing: border-box; border-color: rgba(var(--color-text), var(--modal-border-opacity)); border-style: solid; border-width: var(--modal-border-thickness); border-radius: var(--modal-border-radius); box-shadow: var(--modal-shadow-offset-x) var(--modal-shadow-offset-y) var(--modal-shadow-blur) rgba(var(--color-shadow), var(--modal-shadow-opacity)); } .product-card-border-shadow { box-sizing: border-box; overflow: hidden; border-color: rgba(var(--color-text), var(--product-card-border-opacity)); border-style: solid; border-width: var(--product-card-border-thickness) !important; border-radius: var(--product-card-border-radius); box-shadow: var(--product-card-shadow-offset-x) var(--product-card-shadow-offset-y) var(--product-card-shadow-blur) rgba(var(--color-shadow), var(--product-card-shadow-opacity)); } .product-card-shadow-space { display: block; --product-card-shadow-space-top: max( 0px, calc(var(--product-card-shadow-blur) - var(--product-card-shadow-offset-y)) ); --product-card-shadow-space-bottom: max( 0px, calc(var(--product-card-shadow-blur) + var(--product-card-shadow-offset-y)) ); --product-card-shadow-space-start: max( 0px, calc(var(--product-card-shadow-blur) - var(--product-card-shadow-offset-x)) ); --product-card-shadow-space-end: max( 0px, calc(var(--product-card-shadow-blur) + var(--product-card-shadow-offset-x)) ); padding-block: var(--product-card-shadow-space-top) var(--product-card-shadow-space-bottom); padding-inline: var(--product-card-shadow-space-start) var(--product-card-shadow-space-end); } .collection-card-border-shadow { box-sizing: border-box; overflow: hidden; border-color: rgba(var(--color-text), var(--collection-card-border-opacity)); border-style: solid; border-width: var(--collection-card-border-thickness) !important; border-radius: var(--collection-card-border-radius); box-shadow: var(--collection-card-shadow-offset-x) var(--collection-card-shadow-offset-y) var(--collection-card-shadow-blur) rgba(var(--color-shadow), var(--collection-card-shadow-opacity)); } .collection-card-shadow-space { display: block; --collection-card-shadow-space-top: max( 0px, calc( var(--collection-card-shadow-blur) - var(--collection-card-shadow-offset-y) ) ); --collection-card-shadow-space-bottom: max( 0px, calc( var(--collection-card-shadow-blur) + var(--collection-card-shadow-offset-y) ) ); --collection-card-shadow-space-start: max( 0px, calc( var(--collection-card-shadow-blur) - var(--collection-card-shadow-offset-x) ) ); --collection-card-shadow-space-end: max( 0px, calc( var(--collection-card-shadow-blur) + var(--collection-card-shadow-offset-x) ) ); padding-block: var(--collection-card-shadow-space-top) var(--collection-card-shadow-space-bottom); padding-inline: var(--collection-card-shadow-space-start) var(--collection-card-shadow-space-end); } .article-card-border-shadow { box-sizing: border-box; overflow: hidden; border-color: rgba(var(--color-text), var(--article-card-border-opacity)); border-style: solid; border-width: var(--article-card-border-thickness) !important; border-radius: var(--article-card-border-radius); box-shadow: var(--article-card-shadow-offset-x) var(--article-card-shadow-offset-y) var(--article-card-shadow-blur) rgba(var(--color-shadow), var(--article-card-shadow-opacity)); } .card-border-shadow { box-sizing: border-box; overflow: hidden; border-color: rgba(var(--color-text), var(--card-border-opacity)); border-style: solid; border-width: var(--card-border-thickness) !important; border-radius: var(--card-border-radius); box-shadow: var(--card-shadow-offset-x) var(--card-shadow-offset-y) var(--card-shadow-blur) rgba(var(--color-shadow), var(--card-shadow-opacity)); } .pointer-events { pointer-events: none; } .schema-background { background-color: rgb(var(--color-background)); } .rte::after { display: block; clear: both; content: ""; } .rte ul, .rte ol { padding: revert; margin: revert; list-style: revert; } .rte > p:first-child { margin-block-start: 0; } .rte > p:last-child { margin-block-end: 0; } .rte a, .rte a:hover { position: relative; padding: 0 1px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; } .rte { word-break: break-word; } .rte img, .rte video { max-width: 100%; height: auto; } .rte iframe { max-width: 100%; } .rte p img { vertical-align: bottom; } .rte table { table-layout: fixed; } .icon--checkbox { cursor: pointer; } .icon--checkbox .filled { opacity: 0; fill: rgba(var(--color-text, 61, 56, 25), 1); stroke: rgba(var(--color-text, 61, 56, 25), 1); transition: opacity 0.1s ease; } .icon--checkbox .checkmark { stroke: rgba(var(--color-button-text, 255, 255, 255), 1); transition: stroke-dashoffset 0.3s ease; } input:checked ~ .icon--checkbox .filled { opacity: 1; } input:checked ~ .icon--checkbox .box { stroke: rgba(var(--color-entry-line, 232, 232, 225), 1); } input:checked ~ .icon--checkbox .checkmark { stroke-dashoffset: 0; } @layer component { theme-input-number { --input-padding-inline: 30px; position: relative; display: inline-flex; width: calc( 4 * var(--sort-body-size) + var(--input-border-thickness) * 2 + var(--input-padding-inline) * 2 ); color: rgba(var(--color-text)); background: rgb(var(--color-background)); border-radius: var(--input-border-radius-outset); } theme-input-number::before { position: absolute; inset: 0; z-index: var(--z-index-hover); pointer-events: none; content: ""; border-radius: var(--input-border-radius-outset); box-shadow: var(--input-shadow-offset-x) var(--input-shadow-offset-y) var(--input-shadow-blur) rgba(var(--color-text), var(--input-shadow-opacity)); } theme-input-number::after { position: absolute; inset: var(--input-border-thickness); z-index: var(--z-index-hover); pointer-events: none; content: ""; border-radius: var(--input-border-radius); box-shadow: 0 0 0 var(--input-border-thickness) rgba(var(--color-text), var(--input-border-opacity)); transition: box-shadow 0.2s; } theme-input-number:hover::after { box-shadow: 0 0 0 calc(var(--input-border-thickness) + 1px) rgba(var(--color-text), var(--input-border-opacity)); } theme-input-number button[name="minus"], theme-input-number button[name="plus"] { display: flex; flex-shrink: 0; align-items: center; align-self: stretch; justify-content: center; width: 30px; padding: 0; color: rgb(var(--color-text)); background: transparent; border: 0; } theme-input-number button[name="minus"]:disabled, theme-input-number button[name="plus"]:disabled { pointer-events: none; cursor: not-allowed; opacity: 0.3; } theme-input-number button[name="minus"] .icon, theme-input-number button[name="plus"] .icon { width: 10px; height: 10px; pointer-events: none; } theme-input-number input[type="number"] { flex: 1 0 0; width: 100%; padding: 0.6em 0; color: currentcolor; text-align: center; appearance: textfield; background: transparent; border: 0; outline-style: none; } theme-input-number input[type="number"]::-webkit-outer-spin-button, theme-input-number input[type="number"]::-webkit-inner-spin-button { margin: 0; appearance: none; } theme-input-number[data-border-style="line"]::before, theme-input-number[data-border-style="line"]::after { border-radius: 0; } theme-input-number[data-border-style="line"]::before { display: none; } theme-input-number[data-border-style="line"]::after { --box-shadow-thickness: var(--input-border-thickness); box-shadow: 0 calc(1 * var(--box-shadow-thickness)) 0 0 rgba(var(--color-text), var(--input-border-opacity)), 0 calc(-1 * var(--box-shadow-thickness)) 0 0 rgba(var(--color-text), var(--input-border-opacity)); } theme-input-number[data-border-style="line"]:hover::after { --box-shadow-thickness: calc(var(--input-border-thickness) + 1px); } theme-input-number[data-border-style="none"] { --input-padding-inline: 40px; } theme-input-number[data-border-style="none"]::before, theme-input-number[data-border-style="none"]::after { display: none; } theme-input-number[data-border-style="none"] button[name="minus"], theme-input-number[data-border-style="none"] button[name="plus"] { width: 40px; } theme-input-number[data-border-style="none"] button[name="minus"] .icon, theme-input-number[data-border-style="none"] button[name="plus"] .icon { width: 20px; height: auto; padding: 4px; color: rgb(var(--color-background)); background-color: rgb(var(--color-text)); border-radius: 50%; } } .country-select { position: relative; display: flex; padding-inline-start: 8px; } .country-select__dropdown { position: absolute; inset: 0; appearance: none; cursor: pointer; border: none; opacity: 0; } .country-select__trigger { position: relative; display: flex; align-items: center; padding-inline-start: 16px; } .country-select__trigger span { padding-inline-end: 4px; color: rgb(var(--color-text)); } .country-select__trigger::before { position: absolute; inset-block-start: 0; inset-inline-start: 0; height: 100%; content: " "; border-inline-start: 1px solid rgb(var(--color-entry-line)); } @layer component { theme-show-more:empty { display: none; } theme-show-more:not([open]) [data-more="true"], theme-show-more:not([open]) .view-less { display: none !important; } theme-show-more[open] .view-more { display: none !important; } } .product-price { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; } .product-price__item { display: inline; } .product-price__sale { color: rgb(var(--color-sale)); } .product-price__origin { color: rgb(var(--color-light-text)); text-decoration: line-through; } .product-price__save--text-style { color: rgb(var(--color-discount)); } .product-price__save--button-style { padding: 2px 8px; color: rgb(var(--color-tag-text)); background-color: rgb(var(--color-tag-background)); border-radius: var(--save-button-radius); } theme-sticky-position[data-enforce="true"] { display: contents; }