/** Shopify CDN: Minification failed Line 435:213 Expected identifier but found "/" Line 2616:0 Unexpected "}" **/ /** * NOTE: most of the CSS variables used are defined in the "css-variables.liquid" snippet file */ @media screen and (max-width: 740px) {.hidden-phone {display: none !important;}}@media screen and (min-width: 741px) and (max-width: 999px) {.hidden-tablet {display: none !important;}}@media screen and (min-width: 741px) {.hidden-tablet-and-up {display: none !important;}}@media screen and (max-width: 999px) {.hidden-pocket {display: none !important;}}@media screen and (min-width: 1000px) and (max-width: 1199px) {.hidden-lap {display: none !important;}}@media screen and (min-width: 1000px) {.hidden-lap-and-up {display: none !important;}}@media screen and (min-width: 1200px) {.hidden-desk {display: none !important;}}@media screen and (min-width: 1400px) {.hidden-wide {display: none !important;}}@media screen and (pointer: fine) {.hidden-no-touch {display: none !important;}}@media not screen and (pointer: fine) {.hidden-touch {display: none !important;}}@media print {.hidden-print {display: none !important;}} /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ *, *::before, *::after {box-sizing: border-box !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}html {font-family: sans-serif;font-display: swap;-ms-overflow-style: -ms-autohiding-scrollbar;-webkit-text-size-adjust: 100%;text-size-adjust: 100%;}body {margin: 0;}[hidden] {display: none;}blockquote:first-child, ul:first-child, ol:first-child, p:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {margin-top: 0 !important;}blockquote:last-child, ul:last-child, ol:last-child, p:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {margin-bottom: 0 !important;}a {color: inherit;text-decoration: none;}button, input, select, textarea {color: inherit;font: inherit;margin: 0;text-align: inherit;}button, [type="submit"] {padding: 0;overflow: visible;background: none;border: none;border-radius: 0;cursor: pointer;-webkit-appearance: none;appearance: none;touch-action: manipulation;}button[disabled], html input[disabled] {cursor: default;}img, video {height: auto;max-width: 100%;border-style: none;vertical-align: top;}img:-moz-loading {visibility: hidden;}iframe {border: 0;}table {border-collapse: collapse;border-spacing: 0;}td, th {padding: 0;} /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ .flickity-enabled {position: relative;overflow: visible !important;}.flickity-enabled:focus {outline-offset: 2px;}.flickity-viewport {overflow: hidden;position: relative;height: 100%;width: 100%;}.flickity-slider {position: absolute;width: 100%;height: 100%;}.flickity-enabled.is-draggable {-webkit-tap-highlight-color: transparent;-webkit-user-select: none;user-select: none;}.flickity-enabled.is-draggable:not(.is-hovering-right):not(.is-hovering-left) .flickity-viewport {cursor: grab;}.flickity-enabled.is-draggable:not(.is-hovering-right):not(.is-hovering-left) .flickity-viewport.is-pointer-down {cursor: grabbing;}.flickity-enabled.is-hovering-right .flickity-viewport {cursor: var(--arrow-right-svg-url) 17 14, e-resize;}.flickity-enabled.is-hovering-left .flickity-viewport {cursor: var(--arrow-left-svg-url) 17 14, w-resize;}.flickity-rtl .flickity-page-dots {direction: rtl;}.flickity-enabled.is-fade .flickity-slider > * {pointer-events: none;z-index: 0;transition: visibility 0.2s linear;}.flickity-enabled.is-fade .flickity-slider > .is-selected {pointer-events: auto;z-index: 1;}.flickity-enabled.is-fade .flickity-slider > :not(.is-selected) {visibility: hidden;} /** * ------------------------------------------------------------- * GENERAL TYPOGRAPHY * ------------------------------------------------------------- */ html {font-family: var(--text-font-family);font-display: swap;font-weight: var(--text-font-weight);font-style: var(--text-font-style);font-size: calc(var(--base-font-size) - 1px);line-height: 1.7142857143;color: rgb(var(--text-color));background: rgb(var(--background));}:lang(ar) * {letter-spacing: normal !important;}p strong, p b {font-weight: var(--text-font-bold-weight);}.heading, .blockquote, .rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6, .rte blockquote {display: block;font-family: var(--heading-font-family);font-weight: var(--heading-font-weight);font-style: var(--heading-font-style);color: rgb(var(--heading-color));text-transform: var(--heading-text-transform);}.text--small {font-size: calc(var(--base-font-size) - 2px);line-height: 1.6923076923;}.text--xsmall {font-size: calc(var(--base-font-size) - 3px);line-height: 1.5;}.text--xxsmall {font-size: calc(var(--base-font-size) - 5px);line-height: 1.5;}.text--large {font-size: calc(var(--base-font-size) + 1px);}.text--subdued {color: rgba(var(--text-color), 0.7);}[dir="ltr"] .text--left {text-align: left;}[dir="rtl"] .text--left {text-align: right;}.text--center {text-align: center;}[dir="ltr"] .text--right {text-align: right;}[dir="rtl"] .text--right {text-align: left;}.text--strong {font-weight: var(--text-font-bold-weight);}.text--underlined {text-decoration: underline;text-underline-offset: 3px;-webkit-text-decoration-color: currentColor;text-decoration-color: currentColor;}p a:not(.button), .rte a:not(.button), .link {text-decoration: underline;text-underline-offset: 2px;-webkit-text-decoration-color: rgba(var(--text-color), 0.35);text-decoration-color: rgba(var(--text-color), 0.35);transition: color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;transition: text-decoration-color 0.2s ease-in-out, color 0.2s ease-in-out;transition: text-decoration-color 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;}.heading--small.link {line-height: 1.8;}@media screen and (pointer: fine) {p a:not(.button):hover, .rte a:not(.button):hover, .link:hover {color: rgb(var(--text-color));-webkit-text-decoration-color: rgb(var(--text-color));text-decoration-color: rgb(var(--text-color));}}.link--animated {display: block;position: relative;width: max-content;}.link--animated::after {content: '';position: absolute;bottom: 2px;left: 0;width: 100%;height: 1px;background: currentColor;transform: scaleX(0);transform-origin: var(--transform-origin-end);transition: transform 0.3s;}.text--underlined.link--animated {text-decoration: none;}.text--underlined.link--animated::after {transform: scaleX(1);}@media screen and (pointer: fine) {.link--animated[aria-expanded="true"]::after, .link--animated:hover::after {transform: scaleX(1);transform-origin: var(--transform-origin-start);}@keyframes textUnderlinedAnimatedKeyframes {0% {transform: scaleX(1);transform-origin: var(--transform-origin-end);}50% {transform: scaleX(0);transform-origin: var(--transform-origin-end);}51% {transform-origin: var(--transform-origin-start);}100% {transform: scaleX(1);}}.text--underlined.link--animated:hover::after {animation: textUnderlinedAnimatedKeyframes 0.6s;}}.visually-hidden {position: absolute !important;overflow: hidden;clip: rect(0 0 0 0);height: 1px;width: 1px;margin: -1px;padding: 0;border: 0;}@media screen and (min-width: 741px) {html {font-size: var(--base-font-size);line-height: 1.7333333333;}.text--small {font-size: calc(var(--base-font-size) - 1px);line-height: 1.714285713;}.text--xsmall {font-size: calc(var(--base-font-size) - 2px);line-height: 1.5384615385;}.text--xxsmall {font-size: calc(var(--base-font-size) - 4px);line-height: 1.5384615385;}.text--large {font-size: calc(var(--base-font-size) + 5px);}} /** * ------------------------------------------------------------- * RTE STYLES * * NOTE: In Focal, all text are spaced consistently in RTE fields (those written in text editor of Shopify). However, * we also re-use internally in the theme for most section the same spacing between elements. In order to space * those, a "text-container" class is introduced and allow to introduce a consistent spacing. * ------------------------------------------------------------- */ .heading:first-child { margin-top: 0; } .heading:last-child { margin-bottom: 0; } /* * IMPLEMENTATION NOTE: while those are called "heading--small", they are actually using the text font and not the heading * font. The reason is that we found out that due to their small size, the body font usually works better visually. Of * course if both heading and body font are the same, this won't change anything. */ .heading--small, .heading--xsmall, .heading--xxsmall {font-family: var(--text-font-family);font-style: var(--text-font-style);text-transform: uppercase;font-weight: var(--text-font-bold-weight);line-height: 1.4663636;letter-spacing: 1px;}.heading--xxsmall {font-size: var(--heading-xxsmall-font-size);}.heading--xsmall {font-size: var(--heading-xsmall-font-size);}.heading--small {font-size: var(--heading-small-font-size);line-height: 1.5;}.heading--large, .rte .heading--large {font-size: var(--heading-large-font-size);line-height: 1.11111111;letter-spacing: -0.9px;}.h1, .rte h1 {font-size: var(--heading-h1-font-size);line-height: 1.11111111;letter-spacing: -0.9px;}.h2, .rte h2 {font-size: var(--heading-h2-font-size);line-height: 1.13333333;letter-spacing: -0.6px;}.h3, .rte h3 {font-size: var(--heading-h3-font-size);line-height: 1.1538461538;letter-spacing: -0.4px;}.h4, .rte h4 {font-size: var(--heading-h4-font-size);line-height: 1.1666666667;letter-spacing: -0.3px;}.h5, .rte h5 {font-size: var(--heading-h5-font-size);line-height: 1.2;letter-spacing: -0.3px;}.h6, .rte h6 {font-size: var(--heading-h6-font-size);line-height: 1.25;}.blockquote, .rte blockquote {position: relative;padding: 24px 24px 0;font-size: var(--heading-h4-font-size);line-height: 1.1666666667;letter-spacing: -0.3px;}[dir="ltr"] .blockquote::before,[dir="ltr"] .rte blockquote::before {left: calc(50% - (71px / 2));}[dir="rtl"] .blockquote::before,[dir="rtl"] .rte blockquote::before {right: calc(50% - (71px / 2));}.blockquote::before, .rte blockquote::before {content: '';position: absolute;width: 71px;height: 56px;top: -10px;background: rgb(var(--text-color));opacity: 0.15;-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDEgODAiPiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgNDEuNzdWMGg0MS42MDR2NDEuNzdMMjAuMDI2IDgwSC45ODdMMjEuNzIgNDEuNzdIMHptNTkuMzk2IDBWMEgxMDF2NDEuNzdMNzkuNDIyIDgwSDYwLjM4M2wyMC43MzItMzguMjNINTkuMzk2eiIgZmlsbD0iY3VycmVudENvbG9yIiAvPjwvc3ZnPg==);mask-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDEgODAiPiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgNDEuNzdWMGg0MS42MDR2NDEuNzdMMjAuMDI2IDgwSC45ODdMMjEuNzIgNDEuNzdIMHptNTkuMzk2IDBWMEgxMDF2NDEuNzdMNzkuNDIyIDgwSDYwLjM4M2wyMC43MzItMzguMjNINTkuMzk2eiIgZmlsbD0iY3VycmVudENvbG9yIiAvPjwvc3ZnPg==);-webkit-mask-size: 71px 56px;mask-size: 71px 56px;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;}[dir="ltr"] .unordered-list,[dir="ltr"] .text-container ul,[dir="ltr"] .rte ul {margin-left: 1.25em;margin-right: 0;}[dir="rtl"] .unordered-list,[dir="rtl"] .text-container ul,[dir="rtl"] .rte ul {margin-right: 1.25em;margin-left: 0;}.unordered-list, .text-container ul, .rte ul {list-style-type: square;padding: 0;}[dir="ltr"] .ordered-list,[dir="ltr"] .text-container ol,[dir="ltr"] .rte ol {margin-left: 1em;margin-right: 0;}[dir="rtl"] .ordered-list,[dir="rtl"] .text-container ol,[dir="rtl"] .rte ol {margin-right: 1em;margin-left: 0;}.ordered-list, .text-container ol, .rte ol {padding: 0;}[dir="ltr"] .unordered-list li,[dir="ltr"] .text-container ul li,[dir="ltr"] .rte ul li {padding: 2px 0 2px 5px;}[dir="rtl"] .unordered-list li,[dir="rtl"] .text-container ul li,[dir="rtl"] .rte ul li {padding: 2px 5px 2px 0;}[dir="ltr"] .ordered-list li,[dir="ltr"] .text-container ol li,[dir="ltr"] .rte ol li {padding: 3px 0 3px 9px;}[dir="rtl"] .ordered-list li,[dir="rtl"] .text-container ol li,[dir="rtl"] .rte ol li {padding: 3px 9px 3px 0;}.unordered-list li::marker, .text-container ul li::marker, .rte ul li::marker {color: inherit;font-size: 16px;}.ordered-list li::marker, .text-container ol li::marker, .rte ol li::marker {color: inherit;font-size: 11px;}.table-wrapper {overflow-x: auto;}.table, .rte table {--table-spacing: 16px;width: 100%;}.table--loose {--table-spacing: 24px;}[dir="ltr"] .table th:not([class*="text--"]),[dir="ltr"] .rte table th:not([class*="text--"]) {text-align: left;}[dir="rtl"] .table th:not([class*="text--"]),[dir="rtl"] .rte table th:not([class*="text--"]) {text-align: right;}.table th, .rte table th {padding-bottom: 15px;border-bottom: 1px solid rgb(var(--border-color));}.table th, .rte table th {padding-left: var(--table-spacing);padding-right: var(--table-spacing);}.table td.half-spaced, .rte table td.half-spaced {padding: calc(var(--table-spacing) / 2);}.table td, .rte table td {padding: var(--table-spacing);padding-bottom: 0;}.table tr[onclick] {cursor: pointer;}[dir="ltr"] .table th:first-child,[dir="ltr"] .rte table th:first-child,[dir="ltr"] .table td:first-child,[dir="ltr"] .rte table td:first-child {padding-left: 0;}[dir="rtl"] .table th:first-child,[dir="rtl"] .rte table th:first-child,[dir="rtl"] .table td:first-child,[dir="rtl"] .rte table td:first-child {padding-right: 0;}[dir="ltr"] .table th:last-child,[dir="ltr"] .rte table th:last-child,[dir="ltr"] .table td:last-child,[dir="ltr"] .rte table td:last-child {padding-right: 0;}[dir="rtl"] .table th:last-child,[dir="rtl"] .rte table th:last-child,[dir="rtl"] .table td:last-child,[dir="rtl"] .rte table td:last-child {padding-left: 0;}.table tfoot tr:first-child td, .rte table tfoot tr:first-child td {border-top: 1px solid rgb(var(--border-color));}.table tfoot tr:not(:first-child) td, .rte table tfoot tr:not(:first-child) td {padding-top: 8px;}.table--bordered td {border-top: 1px solid rgb(var(--border-color));padding-bottom: var(--table-spacing);}.table--footered tbody tr:last-child td {padding-bottom: var(--table-spacing);}@media screen and (max-width: 740px) {.table tfoot td, .rte table tfoot td {padding-top: 16px;}}@media screen and (min-width: 741px) {.ordered-list li::marker, .text-container ol li::marker, .rte ol li::marker {font-size: 12px;}.heading--xsmall {line-height: 1.466666666;}.heading--small {line-height: 1.2307692308;}.heading--large {line-height: 1;}.h1, .rte h1 {line-height: 1.0416666667;letter-spacing: -1px;}.h2, .rte h2 {line-height: 1.1052631579;letter-spacing: -1px;}.h3, .rte h3 {line-height: 1.0625;letter-spacing: -0.8px;}.h4, .rte h4 {line-height: 1.1666666667;letter-spacing: -0.6px;}.h5, .rte h5 {line-height: 1.2;letter-spacing: -0.3px;}.h6, .rte h6 {line-height: 1.2222222222;}[dir="ltr"] .blockquote,[dir="ltr"] .rte blockquote {padding-left: 49px;padding-right: 0;}[dir="rtl"] .blockquote,[dir="rtl"] .rte blockquote {padding-right: 49px;padding-left: 0;}.blockquote, .rte blockquote {line-height: 1.1666666667;letter-spacing: -0.6px;min-height: 63px;}[dir="ltr"] .blockquote--center {padding-left: 0;}[dir="rtl"] .blockquote--center {padding-right: 0;}[dir="ltr"] .blockquote:not(.blockquote--center)::before,[dir="ltr"] .rte blockquote:not(.blockquote--center)::before {left: 0;}[dir="rtl"] .blockquote:not(.blockquote--center)::before,[dir="rtl"] .rte blockquote:not(.blockquote--center)::before {right: 0;}.blockquote:not(.blockquote--center)::before, .rte blockquote:not(.blockquote--center)::before {width: 80px;height: 63px;top: 0;-webkit-mask-size: 80px 63px;mask-size: 80px 63px;}[dir="ltr"] .unordered-list li,[dir="ltr"] .text-container ul li,[dir="ltr"] .rte ul li {padding: 4px 0 4px 5px;}[dir="rtl"] .unordered-list li,[dir="rtl"] .text-container ul li,[dir="rtl"] .rte ul li {padding: 4px 5px 4px 0;}[dir="ltr"] .ordered-list li,[dir="ltr"] .text-container ol li,[dir="ltr"] .rte ol li {padding: 4px 0 4px 9px;}[dir="rtl"] .ordered-list li,[dir="rtl"] .text-container ol li,[dir="rtl"] .rte ol li {padding: 4px 9px 4px 0;}}@media screen and (min-width: 1000px) {.table {--table-spacing: 24px;}.table--loose {--table-spacing: 32px;}}@media screen and (min-width: 1200px) {.heading--large, .rte .heading--large {line-height: 1;}.h1, .rte h1 {line-height: 1.0714285714;letter-spacing: -1px;}.h2, .rte h2 {line-height: 1.0833333333;letter-spacing: -1px;}.h3, .rte h3 {line-height: 1.1111111111;letter-spacing: -0.8px;}.h4, .rte h4 {line-height: 1.1333333333;letter-spacing: -0.7px;}.h5, .rte h5 {line-height: 1.1666666667;letter-spacing: -0.4px;}.h6, .rte h6 {line-height: 1.2222222222;}[dir="ltr"] .blockquote,[dir="ltr"] .rte blockquote {padding-left: 69px;}[dir="rtl"] .blockquote,[dir="rtl"] .rte blockquote {padding-right: 69px;}.blockquote, .rte blockquote {line-height: 1.1333333333;letter-spacing: -0.7px;min-height: 80px;}[dir="ltr"] .blockquote--center,[dir="ltr"] .rte .blockquote--center {padding-left: 0;}[dir="rtl"] .blockquote--center,[dir="rtl"] .rte .blockquote--center {padding-right: 0;}.blockquote:not(.blockquote--center)::before, .rte blockquote:not(.blockquote--center)::before {width: 101px;height: 81px;-webkit-mask-size: 101px 81px;mask-size: 101px 81px;}} /** * ------------------------------------------------------------- * RTE SPACING * * NOTE: to have the same spacing as in an RTE field, you can wrap * the element by a div with the class "text-container" * ------------------------------------------------------------- */ .text-container p:not(.heading) + p, .rte p:not(.heading) + p, .text-container p + form, .rte p + form {margin-top: 24px;}.text-container .heading--large, .rte .heading--large {margin: 48px 0 40px;}.text-container .h1, .rte h1 {margin: 48px 0 24px;}.text-container .h2, .rte h2, .text-container .h3, .rte h3, .text-container .h4, .rte h4, .text-container .h5, .rte h5, .text-container .h6, .rte h6 {margin: 40px 0 16px;}.text-container .heading--small, .rte .heading--small {margin: 16px 0;}.text-container .heading--xsmall, .rte .heading--xsmall {margin: 12px 0;}.blockquote, .rte blockquote {margin: 48px 0 64px;}.text-container img:not([style*="float"]), .rte img:not([style*="float"]) {display: block;margin: 34px 0;}.text-container ul, .rte ul, .text-container ol, .rte ol {margin-top: 1em;margin-bottom: 1em;}@media screen and (min-width: 1000px) {.text-container p + form, .rte p + form {margin-top: 32px;}.text-container .h1, .rte h1 {margin: 48px 0 32px;}.text-container .h2, .rte h2, .text-container .h3, .rte h3, .text-container .h4, .rte h4 {margin: 48px 0 24px;}.text-container .h5, .rte h5, .text-container .h6, .rte h6 {margin: 40px 0 16px;}.blockquote, .rte blockquote {margin: 80px 0 96px;}}.rte > :first-child, .text-container > :first-child {margin-top: 0;}.rte > :last-child, .text-container > :last-child {margin-bottom: 0;} /** * ------------------------------------------------------------- * SPACING COMBINATIONS * * NOTE: this define common combination in order to provide a consistent * styling throughout the theme * ------------------------------------------------------------- */ .heading--small + .heading--large {margin-top: 32px;}.heading--small + p, .heading--xsmall + p {margin-top: 16px;}.heading--small + p, .heading--small + .h1, .heading--small + h1, .heading--small + .h2, .heading--small + h2, .heading--small + .h3, .heading--small + h3, .heading--small + .h4, .heading--small + h4, .heading--small + .h5, .heading--small + h5, .heading--small + .h6, .heading--small + h6 {margin-top: 16px;}.heading--xsmall + p, .heading--xsmall + .h1, .heading--xsmall + h1, .heading--xsmall + .h2, .heading--xsmall + h2, .heading--xsmall + .h3, .heading--xsmall + h3 {margin-top: 16px;}.heading--xsmall + .h4, .heading--xsmall + h4, .heading--xsmall + .h5, .heading--xsmall + h5, .heading--xsmall + .h6, .heading--xsmall + h6 {margin-top: 12px;}.heading + .button-wrapper, .heading + .button-group, p + .button-wrapper, p + .button-group, .button-wrapper + p, .button-group + p {margin-block-start: 32px;}@media screen and (min-width: 741px) {.heading--small + p, .heading--small + .h1, .heading--small + h1, .heading--small + .h2, .heading--small + h2, .heading--small + .h3, .heading--small + h3, .heading--small + .h4, .heading--small + h4 {margin-block-start: 24px;}.heading--small + .h5, .heading--small + h5, .heading--small + .h6, .heading--small + h6 {margin-block-start: 16px;}.heading--xsmall + .h1, .heading--xsmall + h1, .heading--xsmall + .h2, .heading--xsmall + h2 {margin-block-start: 24px;}} /** * ------------------------------------------------------------- * SHOPIFY SECTION * ------------------------------------------------------------- */ .shopify-section { color: rgb(var(--text-color)); /* Allow easy override of per-section color */ scroll-margin-top: calc(var(--header-height, 0px) * var(--enable-sticky-header) + var(--announcement-bar-height, 0px) * var(--enable-sticky-announcement-bar)); } /** * ------------------------------------------------------------- * TABBING MANAGEMENT * ------------------------------------------------------------- */ .js .no-focus-outline *:focus { outline: none; } /** * ------------------------------------------------------------- * LOCK UTILITY * ------------------------------------------------------------- */ .lock-all { overflow: hidden; touch-action: none; } @media screen and (max-width: 740px) { .lock-mobile { overflow: hidden; touch-action: none; } } /** * ------------------------------------------------------------- * CONTAINER * ------------------------------------------------------------- */ /* Implementation note: the double selector for policy container allows to increase selector specificity to override Shopify default style */ .container, .shopify-policy__container.shopify-policy__container {max-width: var(--container-max-width);padding-inline: var(--container-gutter);--container-outer-margin: 0px;width: 100%;margin-inline-start: auto;margin-inline-end: auto;}.container--small {max-width: 930px;}@media screen and (max-width: 999px) {.container--flush {padding-left: 0;padding-right: 0;}}@media screen and (min-width: 1400px) {.container--medium {padding-left: calc(var(--container-gutter) + var(--grid-column-width) + var(--grid-gap));padding-right: calc(var(--container-gutter) + var(--grid-column-width) + var(--grid-gap));}} /** * -------------------------------------------------------------------- * NON-JS AND REVEAL ELEMENTS * -------------------------------------------------------------------- */ .js .no-js { display: none !important; } [reveal] { opacity: 0; } [reveal-visibility] { visibility: hidden; } .no-js [reveal] { opacity: 1; } .no-js [reveal-visibility] { visibility: visible; } /** * -------------------------------------------------------------------- * ACCESSIBILITY * -------------------------------------------------------------------- */ .skip-to-content:focus { clip: auto; width: auto; height: auto; margin: 0; color: rgb(var(--text-color)); background-color: rgb(var(--background)); padding: 10px; opacity: 1; z-index: 10000; transition: none; } /** * -------------------------------------------------------------------- * VERTICAL BREATHER * -------------------------------------------------------------------- */ .vertical-breather {padding-top: var(--vertical-breather);padding-bottom: var(--vertical-breather);}.vertical-breather--tight {padding-top: var(--vertical-breather-tight);padding-bottom: var(--vertical-breather-tight);}.vertical-breather--margin {padding-top: 0 !important;padding-bottom: 0 !important;margin-top: var(--vertical-breather);margin-bottom: var(--vertical-breather);}.vertical-breather--margin.vertical-breather--tight {margin-top: var(--vertical-breather-tight);margin-bottom: var(--vertical-breather-tight);}@media screen and (min-width: 741px) {.vertical-breather--extra-tight {padding-top: 48px;padding-bottom: 48px;}.vertical-breather--margin.vertical-breather--extra-tight {margin-top: 48px;margin-bottom: 48px;}} /** * ------------------------------------------------------------- * ANCHOR * Doc: https://gomakethings.com/how-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header-with-one-line-of-css/ * ------------------------------------------------------------- */ .anchor { scroll-margin-top: calc(var(--header-height, 0px) * var(--enable-sticky-header) + var(--announcement-bar-height, 0px) * var(--enable-sticky-announcement-bar) + var(--anchor-offset, 20px)); } .anchor.vertical-breather:not(.vertical-breather--margin) { --anchor-offset: 0px; /* There is already lot of space brought by vertical breather so no need for extra one */ } .anchor.vertical-breather--margin { --anchor-offset: var(--vertical-breather); /* This is used to compensate the margin */ } .anchor.vertical-breather--tight.vertical-breather--margin { --anchor-offset: var(--vertical-breather-tight); } /** * -------------------------------------------------------------------- * ICON * -------------------------------------------------------------------- */ .icon {display: block;vertical-align: middle;background: none;pointer-events: none;overflow: visible;}.icon--inline {display: inline-block;}.icon-text {display: flex;align-items: center;}[dir="ltr"] .icon-text svg,[dir="ltr"] .icon-text img {margin-right: 12px;}[dir="rtl"] .icon-text svg,[dir="rtl"] .icon-text img {margin-left: 12px;}@supports (scale: 1) {[dir="rtl"] .icon--direction-aware {scale: -1 1;}}@supports not (scale: 1) {[dir="rtl"] .icon--direction-aware {transform: scale(-1, 1);}} /** * ------------------------------------------------------------- * LIST * ------------------------------------------------------------- */ .list--unstyled { list-style: none; padding: 0; margin: 0; } /** * -------------------------------------------------------------------- * LOADING BAR * -------------------------------------------------------------------- */ .loading-bar { position: fixed; top: 0; left: 0; height: 3px; width: 100%; opacity: 0; background: rgb(var(--loading-bar-background)); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease-in-out; z-index: 50; pointer-events: none; } .loading-bar.is-visible { opacity: 1; } /** * ------------------------------------------------------------- * SECTION * ------------------------------------------------------------- */ #MainContent .shopify-section:not(:first-child){content-visibility:auto;contain-intrinsic-size:1px 900px} .section {display: block;margin: var(--vertical-breather) 0;}.section--tight {margin-top: var(--vertical-breather-tight);margin-bottom: var(--vertical-breather-tight);}.section:empty {display: none;}.section--flush {margin-top: 0;margin-bottom: 0;}.section__color-wrapper {display: flow-root;background: rgb(var(--section-background, var(--background)));}.section__color-wrapper--boxed {border-radius: var(--block-border-radius);}.section__header {max-width: 1000px;margin-bottom: min(32px, var(--vertical-breather));margin-left: auto;margin-right: auto;text-align: center;}.section__header:only-child {margin-bottom: 0;}.section__header--tight {max-width: 800px;}[dir="ltr"] .section__header--left {text-align: left;}[dir="rtl"] .section__header--left {text-align: right;}.section__header--left {margin-left: 0;}[dir="ltr"] .section__header--right {text-align: right;}[dir="rtl"] .section__header--right {text-align: left;}.section__header--right {margin-right: 0;}.section__footer {margin-top: 32px;text-align: center;}@media screen and (min-width: 741px) {.section__header {margin-bottom: min(40px, var(--vertical-breather));}.section__footer {margin-top: min(40px, var(--vertical-breather));}}@media screen and (min-width: 1000px) {.section__header {margin-bottom: min(48px, var(--vertical-breather));}.section__footer {margin-top: min(48px, var(--vertical-breather));}} /** * ------------------------------------------------------------- * PAGE * ------------------------------------------------------------- */ .page-header {position: relative;text-align: center;}.page-header--secondary {background: rgb(var(--secondary-background));}.page-header--clear::after, .page-header::before {content: '';display: table;clear: left;}.page-header__text-wrapper {max-width: 850px;margin: 38px auto;}.page-header--small .page-header__text-wrapper {margin-top: 24px;margin-bottom: 24px;}.page-header--alone .page-header__text-wrapper {margin-bottom: 72px;}.page-content, .shopify-policy__body {max-width: 1200px;margin-left: auto;margin-right: auto;margin-bottom: min(var(--vertical-breather), 80px);}.page-content--medium, .shopify-policy__body {max-width: 670px;}.page-content--small {max-width: 460px;}.page-content--fluid {max-width: none;}@media screen and (min-width: 741px) {.page-header__text-wrapper {margin-top: 68px;margin-bottom: 68px;}.page-header--small .page-header__text-wrapper {margin-top: 48px;margin-bottom: 40px;}.page-header--alone .page-header__text-wrapper {margin-bottom: 120px;}.breadcrumb--floating + .page-header__text-wrapper {margin-top: 80px;}} /** * ------------------------------------------------------------- * BREADCRUMB * ------------------------------------------------------------- */ .breadcrumb {z-index: 1;text-align: left;}[dir="ltr"] .breadcrumb--floating {left: 0;}[dir="rtl"] .breadcrumb--floating {right: 0;}.breadcrumb--floating {position: absolute;top: 0;} .breadcrumb__list {color: #282828;display: inline-flex;list-style: none;padding: 26px 0;margin: 0;} @media screen and (max-width: 767px) {.breadcrumb__list {padding-top: 20px;padding-bottom: 20px;}} .breadcrumb__item + .breadcrumb__item::before {content: '/';margin: 0 4px;opacity: 0.7;float: left;} .breadcrumb__link {transition: opacity 0.2s ease-in-out;}.breadcrumb__link:not([aria-current="page"]):not(:hover) {opacity: 0.7;}[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {float: right;} .breadcrumb__item:last-child .breadcrumb__link[aria-current="page"] {text-decoration: none;color: #999;pointer-events: none;cursor: default;} /** * ------------------------------------------------------------- * PAGINATION * ------------------------------------------------------------- */ .pagination {display: flex;justify-content: center;margin-top: 40px;}.pagination__nav {display: table;border-collapse: separate;table-layout: fixed;}.pagination__nav-item {position: relative;display: table-cell;box-shadow: 1px 0 0 0 rgb(var(--border-color)), 0 1px 0 0 rgb(var(--border-color)), 1px 1px 0 0 rgb(var(--border-color)), 1px 0 0 0 rgb(var(--border-color)) inset, 0 1px 0 0 rgb(var(--border-color)) inset;vertical-align: middle;height: 47px;width: 47px;text-align: center;}:root {--button-border-radius: 9px;}.pagination__nav-item, .pagination__nav-item::before {border-radius: 0;}[dir="ltr"] .pagination__nav-item:first-child, [dir="ltr"] .pagination__nav-item:first-child::before, [dir="rtl"] .pagination__nav-item:last-child, [dir="rtl"] .pagination__nav-item:last-child::before {border-top-left-radius: var(--button-border-radius);border-bottom-left-radius: var(--button-border-radius);}[dir="ltr"] .pagination__nav-item:last-child, [dir="ltr"] .pagination__nav-item:last-child::before, [dir="rtl"] .pagination__nav-item:first-child, [dir="rtl"] .pagination__nav-item:first-child::before {border-top-right-radius: var(--button-border-radius);border-bottom-right-radius: var(--button-border-radius);}.pagination__nav-item svg {margin: 0 auto;}.pagination__nav-item[aria-current] {position: relative;z-index: 1;color: #0075E3 !important;}.pagination__nav-item[aria-current]::after {content: '';position: absolute;top: 2px;left: 3.25px;right: 2px;bottom: 2px;background: #F0FBFF;z-index: -1;}.pagination__nav-item[aria-current]::before {content: '';position: absolute;max-width: calc(100% - 3px);max-height: calc(100% - 3px);top: 2px;left: 1.5px;right: 0;bottom: 0;pointer-events: none;z-index: 1;box-shadow: 0 0 0 2px #0075E3;}.pagination__nav-item[aria-current]:last-child::before {left: 2.5px;}@media screen and (min-width: 741px) {.pagination {margin-top: 48px;}.pagination__nav-item {height: 56px;width: 56px;}} /** * ------------------------------------------------------------- * LINKLIST * ------------------------------------------------------------- */ .linklist__item:not(:first-child) { padding-top: 12px; } .linklist__item a { display: inline-block; word-break: break-word; } @media screen and (min-width: 1000px) { .linklist__item:not(:first-child) { padding-top: 6px; /* On desktop we use less space as we do not have as much constraint for tap area */ } } /** * ------------------------------------------------------------- * ANIMATED PLUS * ------------------------------------------------------------- */ .animated-plus {position: relative;width: 10px;height: 10px;}.animated-plus::before, .animated-plus::after {position: absolute;content: '';top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-90deg);background-color: currentColor;transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;}.animated-plus::before {width: 10px;height: 2px;opacity: 1;}.animated-plus::after {width: 2px;height: 10px;}[aria-expanded="true"] > .animated-plus::before {opacity: 0;}[aria-expanded="true"] > .animated-plus::before, [aria-expanded="true"] > .animated-plus::after {transform: translate(-50%, -50%) rotate(90deg);} /** * -------------------------------------------------------------------- * ASPECT RATIO * -------------------------------------------------------------------- */ .aspect-ratio {position: relative;display: block;margin-left: auto;margin-right: auto;}.aspect-ratio img, .aspect-ratio video, .aspect-ratio svg {position: absolute;height: 100%;width: 100%;max-width: 100%;max-height: 100%;top: 0;left: 0;object-fit: cover;object-position: center;}.aspect-ratio--square img, .aspect-ratio--short img, .aspect-ratio--tall img {position: absolute;width: 100%;height: 100%;object-fit: contain;top: 50%;left: 50%;transform: translate(-50%, -50%) !important;}.aspect-ratio--square {padding-bottom: 100% !important;}.aspect-ratio--short {padding-bottom: 75% !important;}.aspect-ratio--tall {padding-bottom: 150% !important;}@supports (aspect-ratio: 1 / 1) {.aspect-ratio {padding-bottom: 0 !important;aspect-ratio: var(--aspect-ratio);}.aspect-ratio--natural img, .aspect-ratio--natural video, .aspect-ratio--natural svg {position: relative;width: auto;}.aspect-ratio--square {aspect-ratio: 1;}.aspect-ratio--short {aspect-ratio: 4 / 3;}.aspect-ratio--tall {aspect-ratio: 2 / 3;}} /** * ------------------------------------------------------------- * PLACEHOLDER * ------------------------------------------------------------- */ .placeholder-image { position: relative; padding-bottom: 75%; background-color: rgb(var(--secondary-background)); } .placeholder-background { background-color: rgb(var(--secondary-background)); } [dir="ltr"] .placeholder-image svg { left: 0; } [dir="rtl"] .placeholder-image svg { right: 0; } .placeholder-image svg { position: absolute; top: 0; width: 100%; height: 100%; } @media screen and (min-width: 1000px) { .placeholder-image { padding-bottom: 45%; } } /** * ------------------------------------------------------------- * PROGRESS BAR * ------------------------------------------------------------- */ .progress-bar {display: block;position: relative;height: 2px;background: rgba(var(--text-color), 0.15);}[dir="ltr"] .progress-bar::before {left: 0;}[dir="rtl"] .progress-bar::before {right: 0;}.progress-bar::before {content: '';position: absolute;top: 0;width: calc(100% / var(--divider));height: 100%;transform: translateX(calc(var(--transform-logical-flip) * var(--transform, 0%) * (var(--divider) - 1)));transform-origin: var(--transform-origin-start);background: rgb(var(--text-color));} /** * ------------------------------------------------------------- * CUSTOM DRAG CURSOR * ------------------------------------------------------------- */ [draggable].is-scrollable {cursor: none;}.custom-drag-cursor {position: absolute;display: block;top: 0;left: 0;width: 60px;height: 60px;pointer-events: none;visibility: visible;transition: visibility 0.15s linear;}.custom-drag-cursor svg {transform: scale(1);opacity: 1;transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out;}.custom-drag-cursor[hidden] svg {transform: scale(0.5);opacity: 0;}@media screen and (max-width: 999px), not screen and (pointer: fine) {.custom-drag-cursor {display: none;}} /** * ------------------------------------------------------------- * TAP AREA (this allows to increase the tap area on mobile) * ------------------------------------------------------------- */ .tap-area {position: relative;}[dir="ltr"] .tap-area::before {right: -6px;}[dir="rtl"] .tap-area::before {left: -6px;}[dir="ltr"] .tap-area::before {left: -6px;}[dir="rtl"] .tap-area::before {right: -6px;}.tap-area::before {content: '';position: absolute;top: -6px;bottom: -6px;}[dir="ltr"] .tap-area--large::before {right: -10px;}[dir="rtl"] .tap-area--large::before {left: -10px;}[dir="ltr"] .tap-area--large::before {left: -10px;}[dir="rtl"] .tap-area--large::before {right: -10px;}.tap-area--large::before {top: -10px;bottom: -10px;} /** * -------------------------------------------------------------------- * SCROLLER (only for mobile and desktop) * -------------------------------------------------------------------- */ @media screen and (max-width: 999px) { .scroller { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; margin-left: calc(-1 * var(--container-gutter)); margin-right: calc(-1 * var(--container-gutter)); /* On mobile we remove the container gutter to make sure the scroll is edge to edge */ scrollbar-width: none; /* Hide scrollbar for Firefox */ } .scroller::-webkit-scrollbar { display: none; /* Hide scrollbar for Chrome and Safari */ } .scroller__inner { min-width: min-content; padding-left: var(--container-gutter); padding-right: var(--container-gutter); margin-left: auto; margin-right: auto; /* margin rules allow to center the content if there are not enough elements to scroll */ } } /** * ------------------------------------------------------------- * HIDE SCROLLBAR * ------------------------------------------------------------- */ .hide-scrollbar { scrollbar-width: none; /* For Firefox */ overflow-x: auto; overflow-y: hidden; } .hide-scrollbar::-webkit-scrollbar { display: none; /* For Chrome and Safari */ } /** * -------------------------------------------------------------------- * ANIMATION * -------------------------------------------------------------------- */ .js .animated-element { visibility: hidden; /* An animated element will be an element that is dynamically transitioned */ } /** * -------------------------------------------------------------------- * SQUARE SEPARATOR * -------------------------------------------------------------------- */ .square-separator {position: relative;display: inline-block;height: 4px;width: 4px;margin: 0 8px;flex-shrink: 0;background: currentColor;vertical-align: middle;}.square-separator--block {top: 1px;margin-left: 12px;margin-right: 12px;}.square-separator--subdued {opacity: 0.5;} /* * -------------------------------------------------------------------- * PREV NEXT BUTTONS (used in different places to navigate in scrollable elements) * -------------------------------------------------------------------- */ /* Animation states that we apply to those buttons */ @keyframes prevNextButtonKeyframe {0% {transform: translateX(0%);}50% {transform: translateX(calc(50% + 10px));}51% {transform: translateX(calc(-50% - 10px));}100% {transform: translateX(0%);}}.prev-next-buttons {/ display: inline-grid;pointer-events: none;}.prev-next-buttons--row {grid-auto-flow: column;}.prev-next-button {display: flex;height: 40px;width: 40px;justify-content: center;align-items: center;background: rgb(var(--prev-next-button-background, var(--root-background)));color: rgb(var(--prev-next-button-color, var(--root-text-color)));border: 1px solid rgba(var(--prev-next-button-color, var(--root-text-color)), 0.15);border-radius: 9px;margin-top: -25px;transition: color 0.2s ease-in-out;pointer-events: auto;overflow: hidden;}.prev-next-button[disabled] {color: rgba(var(--prev-next-button-color), 0.3);}.prev-next-button svg {width: 100%;}[dir="ltr"] .prev-next-buttons:not(.prev-next-buttons--row) .prev-next-button:first-child {border-bottom-right-radius: 0;}[dir="rtl"] .prev-next-buttons:not(.prev-next-buttons--row) .prev-next-button:first-child {border-bottom-left-radius: 0;}[dir="ltr"] .prev-next-buttons:not(.prev-next-buttons--row) .prev-next-button:first-child {border-bottom-left-radius: 0;}[dir="rtl"] .prev-next-buttons:not(.prev-next-buttons--row) .prev-next-button:first-child {border-bottom-right-radius: 0;}[dir="ltr"] .prev-next-buttons:not(.prev-next-buttons--row) .prev-next-button:last-child {border-top-right-radius: 0;}[dir="rtl"] .prev-next-buttons:not(.prev-next-buttons--row) .prev-next-button:last-child {border-top-left-radius: 0;}[dir="ltr"] .prev-next-buttons:not(.prev-next-buttons--row) .prev-next-button:last-child {border-top-left-radius: 0;}[dir="rtl"] .prev-next-buttons:not(.prev-next-buttons--row) .prev-next-button:last-child {border-top-right-radius: 0;}[dir="ltr"] .prev-next-buttons--row .prev-next-button:first-child {border-bottom-right-radius: 0;}[dir="rtl"] .prev-next-buttons--row .prev-next-button:first-child {border-bottom-left-radius: 0;}[dir="ltr"] .prev-next-buttons--row .prev-next-button:first-child {border-top-right-radius: 0;}[dir="rtl"] .prev-next-buttons--row .prev-next-button:first-child {border-top-left-radius: 0;}[dir="ltr"] .prev-next-buttons--row .prev-next-button:last-child {border-bottom-left-radius: 0;}[dir="rtl"] .prev-next-buttons--row .prev-next-button:last-child {border-bottom-right-radius: 0;}[dir="ltr"] .prev-next-buttons--row .prev-next-button:last-child {border-top-left-radius: 0;}[dir="rtl"] .prev-next-buttons--row .prev-next-button:last-child {border-top-right-radius: 0;}@media screen and (min-width: 741px) {.prev-next-button:not(.prev-next-button--small) {width: 56px;height: 56px;}.prev-next-buttons:not(.prev-next-buttons--row) .prev-next-button:last-child {border-top: none;}.prev-next-buttons--row .prev-next-button:last-child {border-left: none;}}@media screen and (pointer: fine) {.prev-next-button--prev:hover svg {animation: prevNextButtonKeyframe 0.3s ease-in-out reverse forwards;}.prev-next-button--next:hover svg {animation: prevNextButtonKeyframe 0.3s ease-in-out forwards;}} /** * -------------------------------------------------------------------- * DOT NAVIGATION * -------------------------------------------------------------------- */ .dots-nav { flex-wrap: wrap;justify-content: center;margin: -6px;display: flex}.dots-nav--centered {justify-content: center}.dots-nav__item {background: rgb(var(--text-color));border-radius: min(var(--button-border-radius), 6px);opacity: .3;width: 6px;height: 6px;margin: 6px; transition: opacity .2s ease-in-out;position: relative }.dots-nav__item[aria-current="true"] {opacity: 1;} /** * ------------------------------------------------------------- * PRICE - PREZZI * ------------------------------------------------------------- */ .price--highlight { color:rgb(var(--product-price-highlight)); font-weight: 700; opacity:.8; } .price--compare { text-decoration: line-through; opacity: 0.8; color: rgb(var(--product-price-compare)); font-size: 16.6px !important; font-weight: 700; line-height:1; } /* Inverti l'ordine dei prezzi (listino e scontato) */ .price-list { display: inline-flex; flex-wrap: wrap; align-items: baseline; } .price-list--centered { justify-content: center; } .price-list--stack { display: inline-grid; } .price-list:not(.price-list--stack) > .price:not(:last-child) { margin-inline-end: 10px; } .price-list > .price--block { flex-basis: 100%; margin-inline-start: 0 !important; } .price-list + .link { margin-inline-start: 16px; } .predictive-search__product-list .price--compare { font-size: 14px !important; font-style: normal; font-weight: 490; line-height: 20px; color: #999; /* Opzionale: colore più chiaro per il prezzo barrato */ text-decoration: line-through; /* Opzionale: barrato per il prezzo di confronto */ } @media screen and (min-width: 741px) { .price-list.hidden-tablet-and-up { font-size: 16px; display: none !important; visibility: hidden !important; } } .product-item-meta__price-list-container .price--compare { font-size: 13.5px !important; font-weight: 500 !important; } .line-item .price--compare { font-size: 13px !important; font-weight: 500 !important; } .line-item .price--highlight { font-size: bold; } /* Mantieni il colore del prezzo normale quando non c'è un prezzo scontato */ .price--large:not(:has(+ .price--compare)) { color: rgb(var(--product-price-normal)); } .price--large { font-size: 19px !important; font-style: normal; font-weight: 700; line-height: 20px; } .section__color-wrapper.price--compare { font-size: 14px; } .unit-price-measurement { display: inline-flex; /* This allows to remove the space between each elements */ } @media screen and (min-width: 1000px) { .price--large:not(.price--compare) { font-size: calc(var(--base-font-size) + 7px); } } .price--free { color: green; } @media (min-width: 741px) { .label--highlight { font-size: 18px !important; } } /** * -------------------------------------------------------------------- * LABEL * -------------------------------------------------------------------- */ /* Se vuoi rendere più specifico il selettore, puoi provare anche qualcosa di più specifico */ .product-meta__price-list-container .label--highlight { margin-left: -15px !important; } .label { vertical-align: top; font-family: var(--text-font-family); font-style: var(--text-font-style); font-weight: var(--text-font-bold-weight); text-transform: uppercase; letter-spacing: .5px; border-radius: min(var(--block-border-radius), 2px); padding: 0 5px; font-size: 10px; display: inline-block; } .label--highlight { background: rgb(var(--product-on-sale-accent)); color: #fff; border-radius: 5px; } .label--subdued { background: rgb(var(--product-sold-out-accent)); color: #fff; } .label--custom { background: rgb(var(--product-custom-label-background)); color: rgb(var(--product-custom-label-text-color)); } .label--custom2 { background: rgb(var(--product-custom-label-2-background)); color: rgb(var(--product-custom-label-2-text-color)); } .label-list { pointer-events: none; flex-direction: column; align-items: flex-start; display: flex; } .label-list:not(.label-list--horizontal) .label:not(:last-child) { margin-block-end: 4px; } .label-list--horizontal { flex-direction: row; } .label-list--horizontal .label:not(:last-child) { margin-inline-end: 4px; } @media screen and (min-width: 741px) { .label { font-size: 12px; } } /** * ------------------------------------------------------------- * TAG * ------------------------------------------------------------- */ .tag-list { display: flex; flex-wrap: wrap; align-items: center; margin: -6px; } [dir="ltr"] .tag { padding: 7px 14px 8px 13px; } [dir="rtl"] .tag { padding: 7px 13px 8px 14px; } .tag { display: flex; border-radius: 50px; color:#fff; text-shadow:0 2px 3px rgba(0,0,0,0.8); font-weight:700; align-items: center; margin: 6px; background: rgba(var(--text-color), 0.05); background:linear-gradient(135deg, #f6cce4 0%, #f6cce4 30%, #eccfef 35%, #dfd2f8 40%, #d0d7fd 50%, #c1dbff 60%, #bce0ff 70%, #b8e5ff 80%, #b6e9fe 88%, #beeffd 94%, #c7f4fc 97%, #d2f9fb 99%, #ddfefc 100% ) padding-box, linear-gradient(135deg, #E71D4F 0%, #0075E3 100%) border-box; border:2px solid transparent; } [dir="ltr"] .tag__icon { margin: 1px 9px 0 0; } [dir="rtl"] .tag__icon { margin: 1px 0 0 9px; } .tag__icon { position: relative; /* For pixel perfect precision ! */ cursor: pointer; color: black; } [dir="ltr"] .tag-link { padding-left: 6px; } [dir="rtl"] .tag-link { padding-right: 6px; } /** * ------------------------------------------------------------- * SOCIAL MEDIA * ------------------------------------------------------------- */ .social-media {display: flex;flex-wrap: wrap;}.social-media__item {position: relative;box-shadow: 1px 0 0 0 rgb(var(--border-color)),0 1px 0 0 rgb(var(--border-color)),1px 1px 0 0 rgb(var(--border-color)),1px 0 0 0 rgb(var(--border-color)) inset,0 1px 0 0 rgb(var(--border-color)) inset;transform: translateZ(0);}.no-focus-outline .social-media__item {overflow: hidden;}.social-media__item::before {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: calc(100% + 1px);height: calc(100% + 1px);background: currentColor;-webkit-clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);transform: scaleY(0);transform-origin: bottom;transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);pointer-events: none;z-index: 1;}[dir="ltr"] .social-media:not(.social-media--no-radius) .social-media__item:first-child {border-top-left-radius: var(--button-border-radius);}[dir="rtl"] .social-media:not(.social-media--no-radius) .social-media__item:first-child {border-top-right-radius: var(--button-border-radius);}[dir="ltr"] .social-media:not(.social-media--no-radius) .social-media__item:first-child {border-bottom-left-radius: var(--button-border-radius);}[dir="rtl"] .social-media:not(.social-media--no-radius) .social-media__item:first-child {border-bottom-right-radius: var(--button-border-radius);}[dir="ltr"] .social-media:not(.social-media--no-radius) .social-media__item:last-child {border-top-right-radius: var(--button-border-radius);}[dir="rtl"] .social-media:not(.social-media--no-radius) .social-media__item:last-child {border-top-left-radius: var(--button-border-radius);}[dir="ltr"] .social-media:not(.social-media--no-radius) .social-media__item:last-child {border-bottom-right-radius: var(--button-border-radius);}[dir="rtl"] .social-media:not(.social-media--no-radius) .social-media__item:last-child {border-bottom-left-radius: var(--button-border-radius);}.social-media__link {position: relative;display: flex;justify-content: center;align-items: center;height: 45px;width: 45px;color: currentColor;z-index: 1;transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);}@media screen and (min-width: 741px) {.social-media__link {height: 55px;width: 55px;}}@media screen and (pointer: fine) {.social-media__item:hover .social-media__link {color: rgb(var(--background));}.social-media__item:hover::before {-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);transform: scaleY(1);}} /** * ------------------------------------------------------------- * BANNER * ------------------------------------------------------------- */ [dir="ltr"] .banner {text-align: left;}[dir="rtl"] .banner {text-align: right;}.banner {display: flex;justify-content: flex-start;align-items: flex-start;padding: 12px 16px;}.banner--centered {justify-content: center;}.banner--margin {margin-top: 24px;}[dir="ltr"] .banner__ribbon {margin-right: 10px;}[dir="rtl"] .banner__ribbon {margin-left: 10px;}.banner__content {margin: 0;}.banner--success {--text-color: rgb(var(--success-color));background: rgb(var(--success-background));color: rgb(var(--success-color));}.banner--error {--text-color: rgb(var(--error-color));background: rgb(var(--error-background));color: rgb(var(--error-color));}[dir="ltr"] .banner__content ul {padding-left: 10px;}[dir="rtl"] .banner__content ul {padding-right: 10px;}.banner__content ul {list-style-position: inside;}@media screen and (min-width: 741px) {.banner {padding: 13px 18px;}} /** * ------------------------------------------------------------- * TABS (used in product pages and for the collections section) * ------------------------------------------------------------- */ .tabs-nav {position: relative;display: block;margin-bottom: 32px;}.tabs-nav:not(:first-child) {margin-top: 24px;}.tabs-nav__scroller {display: block;}.tabs-nav__scroller-inner {position: relative;line-height: 1;}.tabs-nav__item-list {display: inline-grid;grid-auto-flow: column;grid-auto-columns: max-content;justify-content: flex-start;gap: 32px;vertical-align: top;box-shadow: 0 -1px rgb(var(--border-color)) inset;}.tabs-nav__item {padding-bottom: 18px;opacity: 0.7;transition: opacity 0.25s ease-in-out;}.tabs-nav__item[aria-expanded="true"] {opacity: 1;}[dir="ltr"] .tabs-nav__position {left: 0;}[dir="rtl"] .tabs-nav__position {right: 0;}.tabs-nav__position {position: absolute;bottom: 0;height: 2px;width: 100%;background: currentColor;transform: scaleX(var(--scale, 0)) translateX(var(--translate, 0));transform-origin: left;}.tabs-nav__position.is-initialized {transition: transform 0.4s ease-in-out;}@supports (scale: 0) {.tabs-nav__position {scale: var(--scale, 0) 1;translate: calc(var(--translate, 0) * var(--scale, 0));transform: none;}.tabs-nav__position.is-initialized {transition: scale 0.2s ease-in-out, translate 0.4s ease-in-out;}}.tabs-nav--center .tabs-nav__scroller-inner {max-width: max-content;margin-left: auto;margin-right: auto;}[dir="ltr"] .tabs-nav__arrows {right: 0;}[dir="rtl"] .tabs-nav__arrows {left: 0;}.tabs-nav__arrows {display: none;position: absolute;top: -5px;z-index: 1;}.tabs-nav__scroller.is-scrollable + .tabs-nav__arrows {display: flex;}.tabs-nav__arrow-item {display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;background: rgb(var(--background));border: 1px solid rgb(var(--border-color));}[dir="ltr"] .tabs-nav__arrow-item + .tabs-nav__arrow-item {border-left: none;}[dir="rtl"] .tabs-nav__arrow-item + .tabs-nav__arrow-item {border-right: none;}.tabs-nav[arrows] .tabs-nav__scroller {overflow: hidden;}[dir="ltr"] .tabs-nav[arrows] .tabs-nav__scroller.is-scrollable::before {right: 48px;}[dir="rtl"] .tabs-nav[arrows] .tabs-nav__scroller.is-scrollable::before {left: 48px;}.tabs-nav[arrows] .tabs-nav__scroller.is-scrollable::before {content: '';position: absolute;width: 48px;height: 100%;top: -2px;z-index: 1;pointer-events: none;background: linear-gradient(to var(--transform-origin-start), rgb(var(--section-background, var(--background))), rgba(var(--section-background, var(--background)), 0));}[dir="ltr"] .tabs-nav[arrows] .tabs-nav__item-list {margin-right: 0;}[dir="rtl"] .tabs-nav[arrows] .tabs-nav__item-list {margin-left: 0;}.tabs-nav[arrows] .tabs-nav__item-list {width: 100%;min-width: max-content;}.tabs-nav[arrows] .tabs-nav__item-list::after {display: block;content: '';width: 35px;}.tabs-nav--no-border.tabs-nav--narrow {margin-bottom: 24px;}.tabs-nav--no-border .tabs-nav__item-list {box-shadow: none;}.tabs-nav--no-border.tabs-nav--narrow .tabs-nav__item {padding-bottom: 5px;}@media screen and (max-width: 999px) {.tabs-nav--edge2edge {margin-left: calc(-1 * var(--container-gutter));margin-right: calc(-1 * var(--container-gutter));}.tabs-nav--edge2edge .tabs-nav__scroller-inner {padding-left: var(--container-gutter);padding-right: var(--container-gutter);min-width: max-content;}}@media screen and (min-width: 741px) {.tabs-nav:not(:first-child) {margin-top: 32px;}.tabs-nav--no-border.tabs-nav--narrow {margin-bottom: 32px;}.tabs-nav__item-list {gap: 54px;}.tabs-nav--loose .tabs-nav__item-list {gap: 72px;}.tabs-nav--narrow .tabs-nav__item-list {gap: 40px;}} /** * ------------------------------------------------------------- * EMPTY STATE * ------------------------------------------------------------- */ .empty-state {position: relative;text-align: center;margin: 100px 0;}.empty-state--bottom-only {margin-top: 24px;}[dir="ltr"] .empty-state__background-text {left: 0;}[dir="rtl"] .empty-state__background-text {right: 0;}.empty-state__background-text {position: absolute;width: 100%;margin-top: -20px;text-align: center;font-size: 120px;opacity: 0.05;font-weight: bold;line-height: 0;}@media screen and (min-width: 741px) {.empty-state {margin-top: 150px;margin-bottom: 150px;}.empty-state--bottom-only {margin-top: 50px;}.empty-state__background-text {position: absolute;margin-top: -35px;font-size: 200px;}}@media screen and (min-width: 1200px) {.empty-state {margin-top: 225px;margin-bottom: 225px;}.empty-state--bottom-only {margin-top: 50px;}} /** * ------------------------------------------------------------- * BUBBLE COUNT (used in various places to show a count) * ------------------------------------------------------------- */ .bubble-count {position: relative;display: inline-flex;align-items: center;justify-content: center;color: rgb(var(--background));background:#E71D4F;font-weight: var(--text-font-bold-weight);font-family: var(--text-font-family);font-style: var(--text-font-style);font-size: 9px;height: 21px;min-width: 21px;line-height: 1;border-radius: 21px;letter-spacing: 0;transition: background 0.2s ease-in-out, color 0.2s ease-in-out;} .bubble-count--top { vertical-align: top; } /** * -------------------------------------------------------------------- * QUANTITY SELECTOR * -------------------------------------------------------------------- */ .quantity-selector {--quantity-selector-height: 46px;display: inline-flex;align-items: center;justify-content: flex-start;border: 1px solid rgb(var(--border-color));border-radius: var(--button-border-radius);vertical-align: middle;}.quantity-selector__button {display: flex;justify-content: center;align-items: center;height: var(--quantity-selector-height);width: var(--quantity-selector-height);}.quantity-selector__input {padding: 0 10px;height: var(--quantity-selector-height);line-height: var(--quantity-selector-height);text-align: center;background: transparent;border: none;-webkit-appearance: none;appearance: none;}.quantity-selector--small {--quantity-selector-height: 28px;}.quantity-selector--small .quantity-selector__input {padding: 0 2px;} /** * -------------------------------------------------------------------- * SPINNER * -------------------------------------------------------------------- */ @keyframes spinnerRotate {100% {transform: rotate(360deg);}}@keyframes spinnerDash {0% {stroke-dasharray: 1,200;stroke-dashoffset: 0;}50% {stroke-dasharray: 89,200;stroke-dashoffset: -35;}100% {stroke-dasharray: 89,200;stroke-dashoffset: -124;}}@keyframes spinnerColor {0% {stroke: currentColor;}40% {stroke: currentColor;}66% {stroke: currentColor;}80%, 90% {stroke: currentColor;}}.spinner svg {margin: auto;animation: spinnerRotate 2s linear infinite;transform-origin: center center;}.spinner circle {animation: spinnerDash 1.5s ease-in-out infinite, spinnerColor 6s ease-in-out infinite;} /** * -------------------------------------------------------------------- * TOOLTIP * -------------------------------------------------------------------- */ [data-tooltip] {position: relative;}[data-tooltip]::before {position: absolute;content: attr(data-tooltip);bottom: calc(100% + 6px);left: 50%;padding: 5px 10px;white-space: nowrap;background: rgb(var(--heading-color));color: rgb(var(--background));font-size: calc(var(--base-font-size) - 2px);pointer-events: none;visibility: hidden;opacity: 0;transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;z-index: 1;transform: translateX(-50%);}[data-tooltip]::after {position: absolute;content: '';left: calc(50% - 7px);bottom: calc(100% + 1px);width: 0;height: 0;border-width: 6px;border-style: solid;border-color: transparent transparent rgb(var(--heading-color)) rgb(var(--heading-color));visibility: hidden;z-index: 1;opacity: 0;transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;transform: rotate(-45deg);box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.1);}[data-tooltip]:hover::before, [data-tooltip]:hover::after {opacity: 1;visibility: visible;}[data-tooltip-position="bottom-left"]::before {top: calc(100% + 4px);bottom: auto;left: auto;right: -6px;transform: none;}[data-tooltip-position="bottom-left"]::after {top: calc(100% - 1px);transform: rotate(135deg);left: calc(50% - 6px);} /** * -------------------------------------------------------------------- * CART NOTIFICATION * -------------------------------------------------------------------- */ .cart-notification {--heading-color: 255, 255, 255;--text-color: 255, 255, 255;--cart-notification-background: #0685CD;display: block;position: absolute;top: 100%;width: 100%;transform: translateY(var(--cart-notification-offset, 0px));color: rgb(var(--text-color));transition: visibility 0.25s ease-in-out, transform 0.25s ease-in-out;visibility: visible;overflow: hidden;}.cart-notification--error {--cart-notification-background: rgb(var(--error-color));}.cart-notification--drawer {--cart-notification-offset: 0;top: var(--header-height-without-bottom-nav);z-index: 1;}.cart-notification--fixed {position: fixed;top: 0;}.cart-notification[hidden] {visibility: hidden;}.cart-notification__overflow {background: var(--cart-notification-background);transform: translateY(0);transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;}.cart-notification[hidden] .cart-notification__overflow {transform: translateY(-100%);opacity: 0;}.cart-notification__wrapper {position: relative;display: flex;align-items: flex-start;justify-content: center;padding-top: 14px;padding-bottom: 14px;}.cart-notification .icon--cart-notification {position: relative;top: 2px;}[dir="ltr"] .cart-notification__text-wrapper {margin-left: 12px;}[dir="rtl"] .cart-notification__text-wrapper {margin-right: 12px;}.cart-notification__text-wrapper {display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;}[dir="ltr"] .cart-notification__heading {margin-right: 12px;}[dir="rtl"] .cart-notification__heading {margin-left: 12px;}.cart-notification__heading {font-size: 14px;}[dir="ltr"] .cart-notification__close {right: 0;}[dir="rtl"] .cart-notification__close {left: 0;}.cart-notification__close {position: absolute;margin-top: -1px;}.cart-notification--drawer .cart-notification__text-wrapper {flex-grow: 1;justify-content: space-between;}.drawer__content, .cart__item {padding-left: 20px;flex-grow: 1;justify-content: space-between;margin-left: auto;}.cart__item {text-align: left;}@media screen and (max-width: 740px) {.cart-notification__text-wrapper {flex-grow: 1;justify-content: space-between;}}@media screen and (max-width: 999px) {.cart-notification {transform: none !important;}}@media screen and (min-width: 741px) {.cart-notification__wrapper {padding-top: 19px;padding-bottom: 19px;}.cart-notification .icon--cart-notification {top: 4px;}[dir="ltr"] .cart-notification__heading {margin-right: 16px;}[dir="rtl"] .cart-notification__heading {margin-left: 16px;}.cart-notification__heading {font-size: 16px;}.cart-notification__close svg {width: 15px;height: 15px;}} /** * ------------------------------------------------------------- * PAYMENT METHODS * ------------------------------------------------------------- */ .payment-methods-list {display: grid;grid-gap: 8px;gap: 8px;grid-template-columns: repeat(auto-fit, 38px);}.payment-methods-list--center {justify-content: center;}@media screen and (min-width: 741px) {.payment-methods-list--auto {grid-auto-flow: column;}}.list-payment.CartDrawer-list-payment {justify-content: center;display: flex;list-style: none;flex-wrap: wrap;align-items: center;padding: 0;gap: 8px;margin-bottom: 20px !important;} /** * ------------------------------------------------------------- * LINK BAR (show a list of links usually for tags ; used in collection and blog pages) * ------------------------------------------------------------- */ .link-bar {position: relative;display: block;box-shadow: 0 1px rgb(var(--border-color)), 0 -1px rgb(var(--border-color));text-align: center;}.link-bar__wrapper {position: relative;display: inline-flex;align-items: center;max-width: 100%;}.link-bar__scroller {scroll-snap-type: x proximity;}.link-bar__title {position: -webkit-sticky;position: sticky;left: 0;flex-shrink: 0;z-index: 1;background: rgb(var(--background));}.link-bar__title::after {content: '';position: absolute;height: 100%;top: 0;width: 28px;background-image: linear-gradient(to var(--transform-origin-end), rgb(var(--background)) 35%, rgba(var(--background), 0));}[dir="ltr"] .link-bar__title + .link-bar__scroller {padding-left: 28px;}[dir="rtl"] .link-bar__title + .link-bar__scroller {padding-right: 28px;}.link-bar__linklist {display: grid;grid-auto-flow: column;align-items: center;grid-gap: 28px;gap: 28px;min-width: max-content;}.link-bar__link-item, .link-bar__title {padding-top: 14px;padding-bottom: 14px;}.link-bar__link-item--selected {scroll-snap-align: center;}@media screen and (max-width: 999px) {[dir="ltr"] .link-bar__wrapper::after {left: 100%;}[dir="rtl"] .link-bar__wrapper::after {right: 100%;}.link-bar__wrapper::after {content: '';position: absolute;height: 100%;width: var(--container-gutter);top: 0;background-image: linear-gradient(to var(--transform-origin-start), rgb(var(--background)), rgba(var(--background), 0));}[dir="ltr"] .link-bar__scroller {margin-right: calc(-1 * var(--container-gutter));}[dir="rtl"] .link-bar__scroller {margin-left: calc(-1 * var(--container-gutter));}[dir="ltr"] .link-bar__linklist {padding-right: var(--container-gutter);}[dir="rtl"] .link-bar__linklist {padding-left: var(--container-gutter);}}@media screen and (min-width: 741px) {[dir="ltr"] .link-bar__title + .link-bar__scroller {padding-left: 48px;}[dir="rtl"] .link-bar__title + .link-bar__scroller {padding-right: 48px;}.link-bar__linklist {gap: 40px;}.link-bar__link-item, .link-bar__title {padding-top: 20px;padding-bottom: 20px;}}@media screen and (min-width: 1200px) {.link-bar__link-item, .link-bar__title {padding-top: 27px;padding-bottom: 27px;}} /** * ------------------------------------------------------------- * MOBILE SHARE BUTTONS * * Those are used in product pages and blog posts * ------------------------------------------------------------- */ .mobile-share-buttons__item {display: flex;align-items: center;padding-top: 20px;padding-bottom: 20px;margin-left: 24px;margin-right: 24px;}@supports (padding: max(0px)) {.mobile-share-buttons {padding-bottom: max(20px, env(safe-area-inset-bottom) + 20px);}}.mobile-share-buttons__item:not(:last-child) {border-bottom: 1px solid rgb(var(--border-color));}[dir="ltr"] .mobile-share-buttons__item svg {margin-right: 16px;}[dir="rtl"] .mobile-share-buttons__item svg {margin-left: 16px;} /** * -------------------------------------------------------------------- * MOBILE TOOLBAR * * Those are used on collection page and account pages to create links * to sub-section * -------------------------------------------------------------------- */ .mobile-toolbar {position: -webkit-sticky;position: sticky;top: calc(var(--enable-sticky-header) * var(--header-height, 0px) + var(--announcement-bar-height, 0px) * var(--enable-sticky-announcement-bar));display: flex;align-items: center;visibility: visible;z-index: 8;transition: margin-top 0.2s ease-in-out, visibility 0.2s ease-in-out;}.mobile-toolbar.is-collapsed {margin-top: -48px;visibility: hidden;}.mobile-toolbar--fixed {position: relative;top: 0;}.mobile-toolbar__item {display: flex;flex: 1 0 0;justify-content: center;align-items: center;padding: 11px;border-top: 1px solid rgb(var(--border-color));border-bottom: 1px solid rgb(var(--border-color));background: rgb(var(--background));}[dir="ltr"] .mobile-toolbar__item + .mobile-toolbar__item {border-left: 1px solid rgb(var(--border-color));}[dir="rtl"] .mobile-toolbar__item + .mobile-toolbar__item {border-right: 1px solid rgb(var(--border-color));}[dir="ltr"] .mobile-toolbar__item .icon--chevron {margin-left: 10px;}[dir="rtl"] .mobile-toolbar__item .icon--chevron {margin-right: 10px;} /** * ------------------------------------------------------------- * COMBO BOX * * Implementation note: on mobile the combo-box is largely similar to the * popover and therefore re-use lot of styles. I preferred doing some * duplication here rather than rely on JavaScript to dynamically transformed * a non-popover on desktop to a popover * ------------------------------------------------------------- */ @media screen and (max-width: 740px) {[dir="ltr"] .combo-box {left: 0;}[dir="rtl"] .combo-box {right: 0;}.combo-box {--heading-color: var(--root-heading-color);--text-color: var(--root-text-color);--background: var(--root-background);display: flex;position: fixed;z-index: 10;color: rgb(var(--text-color));background: rgb(var(--background));visibility: hidden;flex-direction: column;bottom: 0;width: 100vw;max-height: 75vh;border-radius: 10px 10px 0 0;transform: translateY(100%);transition: transform 0.7s cubic-bezier(0.75, 0, 0.175, 1), visibility 0.7s cubic-bezier(0.75, 0, 0.175, 1);}.combo-box[open] {visibility: visible;transform: translateY(0);}[dir="ltr"] .combo-box__overlay {left: 0;}[dir="rtl"] .combo-box__overlay {right: 0;}.combo-box__overlay {position: absolute;content: '';height: 100vh;width: 100%;bottom: calc(100% - 10px);background: #000000;opacity: 0;visibility: hidden;transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;}.combo-box__header {position: relative;display: flex;align-items: center;justify-content: center;padding: 18px 32px;min-height: 64px;text-align: center;border-radius: 10px 10px 0 0;box-shadow: 0 1px rgb(var(--border-color));}.combo-box__header, .combo-box__content {background: inherit;}.combo-box__title {margin-bottom: 0;}[dir="ltr"] .combo-box__close-button {right: 24px;}[dir="rtl"] .combo-box__close-button {left: 24px;}.combo-box__close-button {position: absolute;top: 24px;z-index: 1;}.combo-box[open] > .combo-box__overlay {visibility: visible;opacity: 0.3;}.combo-box__option-list {overflow-x: hidden;overflow-y: auto;padding-left: 24px;padding-right: 24px;padding-bottom: max(16px, env(safe-area-inset-bottom, 0px) + 16px);}.combo-box__option-item {position: relative;font-size: 13.5px;width: 100%;padding-top: 15px;padding-bottom: 15px;border-bottom: 1px solid rgb(var(--border-color));}.combo-box__option-item:not([hidden]) {display: block;}.combo-box__option-item:last-child {border-bottom: none;}[dir="ltr"] .combo-box__option-item[aria-selected="true"]::after {margin-left: 12px;}[dir="rtl"] .combo-box__option-item[aria-selected="true"]::after {margin-right: 12px;}.combo-box__option-item[aria-selected="true"]::after {content: '';display: inline-block;width: 12px;height: 9px;background-color: currentColor;-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMy40TDQuNzQ5MzEgN0wxMSAxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+);mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMy40TDQuNzQ5MzEgN0wxMSAxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+);-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-size: 12px 9px;mask-size: 12px 9px;}.combo-box__option-item.is-disabled {opacity: .55;pointer-events: none;color: rgba(var(--text-color), 0.5);}}@media screen and (min-width: 741px) {[dir="ltr"] .combo-box {left: 0;}[dir="rtl"] .combo-box {right: 0;}.combo-box {position: absolute;display: block;top: 100%;width: 100%;max-height: 245px;overscroll-behavior: contain;overflow: auto;background: rgb(var(--background));z-index: 2;padding: 8px 0;border: 1px solid rgb(var(--border-color));border-top: none;border-radius: 0 0 var(--button-border-radius) var(--button-border-radius);transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;}.combo-box--top {top: auto;bottom: 100%;border-top: 1px solid rgb(var(--border-color));border-bottom: none;border-radius: var(--button-border-radius) var(--button-border-radius) 0 0;}.combo-box:not([open]) {visibility: hidden;opacity: 0;}.combo-box__header {display: none;}.combo-box__option-list {min-width: max-content;}.combo-box__option-item:not([hidden]) {display: flex;align-items: center;width: 100%;padding: 8px 18px;transition: background 0.2s ease-in-out;text-align: left;}.combo-box__option-item:hover, .combo-box__option-item:focus {background: rgb(var(--secondary-background));}[dir="ltr"] .combo-box__color-swatch {margin-right: 10px;}[dir="rtl"] .combo-box__color-swatch {margin-left: 10px;}.combo-box__color-swatch {width: 16px;height: 16px;border-radius: var(--color-swatch-border-radius);background-repeat: no-repeat;background-size: cover;background-position: center;}.combo-box + .select {transition: border-radius 0.2s ease-in-out;}[dir="ltr"] .combo-box[open] + .select {border-bottom-left-radius: 0;}[dir="rtl"] .combo-box[open] + .select {border-bottom-right-radius: 0;}[dir="ltr"] .combo-box[open] + .select {border-bottom-right-radius: 0;}[dir="rtl"] .combo-box[open] + .select {border-bottom-left-radius: 0;}[dir="ltr"] .combo-box--top[open] + .select {border-top-left-radius: 0;}[dir="rtl"] .combo-box--top[open] + .select {border-top-right-radius: 0;}[dir="ltr"] .combo-box--top[open] + .select {border-top-right-radius: 0;}[dir="rtl"] .combo-box--top[open] + .select {border-top-left-radius: 0;}}.combo-box__option-item[aria-selected=true]::before{content:none!important}.combo-box__option-item[aria-selected="true"] {position: relative;background: #F0FBFF !important;}@media(max-width:740px){.combo-box__option-item[aria-selected=true]{color:#3F9FF4;font-weight:600;position:relative}.combo-box__option-item[aria-selected=true] .price-display{color:#3F9FF4;font-weight:700}.combo-box__option-item[aria-selected=true]{background:transparent}.combo-box__option-item[aria-selected=true]::before{content:"";position:absolute;left:-24px;right:-24px;top:0;bottom:0;background:#F0FBFF !important;z-index:1 }.combo-box__option-item:first-child {border-top: 1px solid #ddd;}}@media (min-width:741px){.combo-box__option-item{display:flex;align-items:center;}.combo-box__option-item[aria-selected="true"]{background:#F0FBFF;color:#0075E3;font-weight: bold !important;position:relative;}.combo-box__option-item[aria-selected="true"] .price-display{margin-left:auto;order:3;color:#0075E3;font-weight:700;}.combo-box__option-item span.price-display{font-size: 14px !important;}.combo-box__option-item[aria-selected="true"]::after{content:"";transform: scale(1.2);order:2;flex:0 0 12px;width:12px;height:9px;margin-left:8px;background:#0075E3;-webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMy40TDQuNzQ5MzEgN0wxMSAxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+) no-repeat center/12px 9px;mask:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMy40TDQuNzQ5MzEgN0wxMSAxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+) no-repeat center/12px 9px;pointer-events:none;}}.combo-box__option-item[aria-selected="true"]::before{content:none!important;}@media (max-width:740px){.combo-box__option-item.is-disabled::before{content:"";position:absolute;left:-24px;right:-24px;top:6px;bottom:6px;border-radius:4px;background:linear-gradient(135deg,transparent calc(50% - 1px), #E34851 50%,transparent calc(50% + 1px));}.combo-box__option-item.is-disabled[aria-selected="true"]{background: transparent !important;color: rgba(var(--text-color), .55) !important;font-weight: 400 !important;}.combo-box__option-item.is-disabled[aria-selected="true"]::after{content:none;}.combo-box__option-item.is-disabled[aria-selected="true"] .price-display{color: inherit !important;font-weight: 400 !important;}}@media (min-width:741px){.combo-box__option-item.is-disabled{position: relative;overflow: hidden;background: #F5F6F8;}.combo-box__option-item.is-disabled::before{content:"";position:absolute;inset:6px 14px;border-radius:4px;background:linear-gradient(135deg,transparent calc(50% - 1px), #E34851 50%, transparent calc(50% + 1px));}.combo-box__option-item.is-disabled[aria-selected="true"], .combo-box__option-item.is-disabled:hover, .combo-box__option-item.is-disabled:focus{background: #F5F6F8 !important;color: rgba(var(--text-color), .55) !important;font-weight: 400 !important;}.combo-box__option-item.is-disabled[aria-selected="true"]::after{content:none;}.combo-box__option-item.is-disabled[aria-selected="true"] .price-display{color: inherit !important;font-weight: 400 !important;}} @media(max-width:740px){.product-form__variants .combo-box__option-item{position:relative}.product-form__variants .combo-box__option-item .opt-label{display:block;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-form__variants .combo-box__option-item .price-display{position:absolute;right:0;top:50%;transform:translateY(-50%);font-weight:600}} @media(min-width:741px){.product-form__variants .combo-box__option-item{display:flex;align-items:center}.product-form__variants .combo-box__option-item .opt-label{flex:1 1 auto;min-width:0}.product-form__variants .combo-box__option-item .price-display{margin-left:auto;font-weight:600}.product-form__variants .combo-box__option-item[aria-selected=true]{background:#F0FBFF;color:#0075E3;font-weight:700}} /** * ------------------------------------------------------------- * PRICE RANGE * ------------------------------------------------------------- */ .price-range {display: block;padding-top: 5px;}.price-range__input-group {display: flex;align-items: center;}.price-range__input {flex: 1 0 0;min-width: 0;}.price-range__delimiter {margin-left: 20px;margin-right: 20px;}.price-range__range-group {position: relative; background: linear-gradient(to right, #e0e0e0 var(--range-min), #3F9FF4 var(--range-min), #3F9FF4 var(--range-max), #e0e0e0 var(--range-max)) !important;margin-bottom: 15px}.no-js .price-range__range-group {display: none !important;}@media not screen and (pointer: fine) {.price-range {padding-top: 7px;}.price-range__range-group {margin-bottom: 18px;}} /* 2. Maniglie: Blu (#0075E3) con centro bianco (Chrome/Safari/Edge) */ .price-range__range-group .range::-webkit-slider-thumb { background-color: #ffffff !important; /* Il centro bianco */ border: 5px solid #0075E3 !important; /* La maniglia blu */ box-shadow: none !important; } /* 3. Maniglie: Blu (#0075E3) con centro bianco (Firefox) */ .price-range__range-group .range::-moz-range-thumb { background-color: #ffffff !important; border: 5px solid #0075E3 !important; box-shadow: none !important; } /** * ------------------------------------------------------------- * SCROLL SPY * ------------------------------------------------------------- */ .scroll-spy {display: block;position: -webkit-sticky;position: sticky;box-shadow: 1px 0 rgba(var(--text-color), 0.25) inset;top: calc(24px + var(--header-height, 0px) * var(--enable-sticky-header) + var(--announcement-bar-height, 0px) * var(--enable-sticky-announcement-bar));}.scroll-spy__list {padding-left: 6px;}.scroll-spy__item {opacity: 0.7;transition: opacity 0.25s ease-in-out;}.scroll-spy__item.is-visible {opacity: 1;}.scroll-spy__anchor {display: block;padding: 10px 24px;}[dir="ltr"] .scroll-spy svg {left: 0;}[dir="rtl"] .scroll-spy svg {right: 0;}.scroll-spy svg {position: absolute;top: 0;width: 100%;height: 100%;z-index: -1;}.scroll-spy path {transition: all 0.3s ease;fill: transparent;stroke: currentColor;stroke-width: 2px;stroke-dasharray: 0 0 0 1000;stroke-linecap: square;} /** * ------------------------------------------------------------- * SPLIT LINE (custom element) * ------------------------------------------------------------- */ split-lines { display: block; } /** * ------------------------------------------------------------- * EFFECT * ------------------------------------------------------------- */ .features--image-zoom .image-zoom img { transition: transform 0.5s ease; transform: translateZ(0); /* Allow to promote on its own layer */ } .features--image-zoom .image-zoom:hover img { transform: scale(1.05); } /** * ------------------------------------------------------------- * RATING * ------------------------------------------------------------- */ .rating { display: inline-flex; align-items: center; vertical-align: bottom; } .rating__stars { display: grid; grid-auto-flow: column; grid-column-gap: 2px; column-gap: 2px; } .rating__star { color: rgb(var(--product-star-rating)); } .rating__star--empty { color: rgba(var(--product-star-rating), 0.4); } [dir="ltr"] .rating__caption { margin-left: 8px; } [dir="rtl"] .rating__caption { margin-right: 8px; } /** * ------------------------------------------------------------- * OPENABLE * ------------------------------------------------------------- */ .openable__overlay { position: absolute; content: ''; height: 100vh; width: 100%; bottom: 100%; left: 0; /* We must make sure to not use logical property here */ background: #000000; opacity: 0; visibility: hidden; transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; } [open] > .openable__overlay { visibility: visible; opacity: 0.2; } /* Make sure to keep this order the same as it relies on inheritance */ /* * FORM GENERIC */ .form__banner:not(:last-child), .form__info { margin-bottom: 24px; } .form__info { margin-top: 0; } .form__submit { margin-top: var(--form-submit-margin); } .form__submit--closer { margin-top: 16px; } /* Element that is added below a submit form to provide a secondary, subdued action */ .form__secondary-action { display: block; width: 100%; margin-top: 18px; text-align: center; } .form__secondary-action .link { padding-left: 8px; } @media screen and (min-width: 1000px) { .form__banner:not(:last-child), .form__info { margin-bottom: 32px; } } /* * INPUT (INPUT FIELD) */ .input {position: relative;}.input + .input, .input + .input-row, .input-row + .input-row, .input-row + .input {margin-top: var(--form-input-gap);}[dir="ltr"] .input__field,[dir="ltr"] #shopify-product-reviews .spr-form-input-text,[dir="ltr"] #shopify-product-reviews .spr-form-input-email,[dir="ltr"] #shopify-product-reviews .spr-form-input-textarea {text-align: left;}[dir="rtl"] .input__field,[dir="rtl"] #shopify-product-reviews .spr-form-input-text,[dir="rtl"] #shopify-product-reviews .spr-form-input-email,[dir="rtl"] #shopify-product-reviews .spr-form-input-textarea {text-align: right;}.input__field, #shopify-product-reviews .spr-form-input-text, #shopify-product-reviews .spr-form-input-email, #shopify-product-reviews .spr-form-input-textarea {-webkit-appearance: none;appearance: none;width: 100%;height: var(--form-input-field-height);line-height: var(--form-input-field-height);padding: 0 18px;border-radius: 5px;border: 1px solid rgba(var(--text-color), 0.15);box-shadow: none;background: transparent;color: var(--form-input-color);transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;}.footer input[name="contact[email]"] {border-radius: 50px !important;}.input__field:focus, select:focus, #shopify-product-reviews .spr-form-input-text:focus, #shopify-product-reviews .spr-form-input-email:focus, #shopify-product-reviews .spr-form-input-textarea:focus {border-color: #006FCF;box-shadow: 0 0 0 1px #3F9FF4 inset;outline: none;}.input__field::placeholder {color: rgba(var(--text-color), 0.7);}.input__field--transparent {background: transparent;}.input__field--textarea, #shopify-product-reviews .spr-form-input-textarea {resize: vertical;height: auto;padding-top: 12px;padding-bottom: 12px;vertical-align: top;line-height: inherit;}[dir="ltr"] .input__label {left: 12px;}[dir="rtl"] .input__label {right: 12px;}.input__label {position: absolute;top: calc((var(--form-input-field-height) / 2) - 0.5em);padding: 0 5px;pointer-events: none;transform: translateY(0);transform-origin: var(--transform-origin-start) top;transition: transform 0.2s ease-in-out;background: rgb(var(--section-block-background, var(--section-background, var(--background))));color: rgba(var(--text-color), 0.7);line-height: 1;white-space: nowrap;}:focus-within ~ .input__label, .is-filled ~ .input__label {transform: scale(0.733) translateY(calc(-24px - 0.5em)) translateX(calc(5px * 0.733));}.input__block-label {display: inline-block;margin-bottom: 8px;}[dir="ltr"] .input__field-link {right: 18px;}[dir="rtl"] .input__field-link {left: 18px;}.input__field-link {position: absolute;top: 1.1em;}[dir="ltr"] .input__submit-icon {right: 20px;}[dir="rtl"] .input__submit-icon {left: 20px;}.input__submit-icon {position: absolute;top: 50%;transform: translateY(-50%);}.input-row .button {width: 100%;}@media screen and (min-width: 741px) {.input-row {display: grid;grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));grid-gap: var(--form-input-gap);gap: var(--form-input-gap);}.input-row .input {margin-top: 0;}.input + .input--checkbox, .input-row + .input--checkbox {margin-top: 30px;}[dir="ltr"] .input__field-link {right: 18px;}[dir="rtl"] .input__field-link {left: 18px;}}.input-prefix {display: flex;align-items: center;justify-content: space-between;padding: 8px 10px;border: 1px solid rgb(var(--border-color));}[dir="ltr"] .input-prefix__field {text-align: right;}[dir="rtl"] .input-prefix__field {text-align: left;}.input-prefix__field {padding: 0;background: transparent;-webkit-appearance: none;appearance: none;-moz-appearance: textfield;min-width: 0;width: 100%;border: none;}.input-prefix__field::-webkit-outer-spin-button, .input-prefix__field::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;} /* * CHECKBOX */ .checkbox-container {display: flex;align-items: baseline;}.checkbox-container + .checkbox-container {margin-top: 10px;}.checkbox {position: relative;top: 2px;-webkit-appearance: none;flex: none;width: 15px;height: 15px;border: 1px solid rgb(var(--border-color-darker));background-color: rgb(var(--background));border-radius: 0;transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;cursor: pointer;}.checkbox:checked {border-color: #006FCF;background-color: #3F9FF4;background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgM0w0IDZMOS4wMDE0NiAxIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIvPjwvc3ZnPg==);background-position: center;background-repeat: no-repeat;}.checkbox:disabled + label {opacity: 0.7;cursor: default;}[dir="ltr"] .checkbox + label {padding-left: 10px;}[dir="rtl"] .checkbox + label {padding-right: 10px;}.checkbox + label {cursor: pointer;}@media screen and (min-width: 1000px) {.checkbox-container + .checkbox-container {margin-top: 2px;}} /* * SELECT */ .options-container > .product-form__option:nth-child(2) .product-form__option-name { margin-top: 20px; } .select-wrapper { position: relative; margin-top: 5px; margin-bottom: 10px; } .product-form .select-wrapper { position: relative; margin-bottom: 10px !important; } .product-form__variants.only-one-selector .product-form__option-selector,.product-form__variants.only-one-selector .select-wrapper,.product-form__variants.only-one-selector .select{margin-bottom:-25px!important} .product-form:has(.color-swatch) .select-wrapper{ margin-bottom: 10px !important; /* o il valore che preferisci */ } .select { -webkit-appearance: none; appearance: none; /* Remove default style if applied to a built-in select */ display: flex; align-items: center; justify-content: space-between; padding: 0 18px; height: var(--form-input-field-height); width: 100%; border: 1px solid rgb(var(--border-color)); border-radius: 10px; background: transparent; cursor: pointer; margin-bottom: 15px; } .select-wrapper .select:focus { border: 2px solid #3F9FF4; outline: none; } [dir="ltr"] .select--collapse-start { border-top-left-radius: 0; } [dir="rtl"] .select--collapse-start { border-top-right-radius: 0; } [dir="ltr"] .select--collapse-start { border-bottom-left-radius: 0; } [dir="rtl"] .select--collapse-start { border-bottom-right-radius: 0; } [dir="ltr"] .select--collapse-end { border-top-right-radius: 0; } [dir="rtl"] .select--collapse-end { border-top-left-radius: 0; } [dir="ltr"] .select--collapse-end { border-bottom-right-radius: 0; } [dir="rtl"] .select--collapse-end { border-bottom-left-radius: 0; } [dir="ltr"] .select svg { margin-left: 20px; } [dir="rtl"] .select svg { margin-right: 20px; } .select svg { transition: transform 0.25s ease-in-out; } /* When the select class is applied to a native select, then the svg arrow is positioned absolutely */ [dir="ltr"] .select ~ svg { right: 18px; } [dir="rtl"] .select ~ svg { left: 18px; } .select ~ svg { position: absolute; top: calc(50% - 4px); } .select__selected-value { position: relative; display: flex; align-items: center; top: -1px; /* Designer want to move by 1px up */ max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [dir="ltr"] .select__color-swatch { margin-right: 10px; } [dir="rtl"] .select__color-swatch { margin-left: 10px; } .select__color-swatch { position: relative; width: 16px; height: 16px; border-radius: var(--color-swatch-border-radius); background-repeat: no-repeat; background-size: cover; background-position: center; } .select__color-swatch--white { box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3) inset; } .select--small { padding: 6px 12px; height: auto; /* As the input is much smaller we size it with padding instead */ } [dir="ltr"] .select--small svg { margin-left: 10px; } [dir="rtl"] .select--small svg { margin-right: 10px; } .select[aria-expanded="true"] svg { transform: rotateZ(180deg); } @media screen and (min-width: 741px) { .select__selected-value { pointer-events: none; } } .select.text--xsmall { border-radius: 0px; } /* * RANGE ELEMENT * Styling range are pretty complex as each browsers has their own way to do it */ /* First we revert the styling of range elements */ .range { -webkit-appearance: none; appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ background: transparent; /* Otherwise white in Chrome */ } .range::-webkit-slider-thumb { -webkit-appearance: none; } /* Chrome and Safari */ .range::-webkit-slider-thumb { position: relative; height: 14px; width: 14px; border-radius: 100%; border: none; background: rgb(var(--background)); cursor: pointer; margin-top: -5px; z-index: 1; box-shadow: 0 0 0 5px rgb(var(--text-color)) inset; } .range::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: rgb(var(--border-color)); border-radius: 4px; border: none; } /* Firefox */ .range::-moz-range-thumb { height: 14px; width: 14px; border-radius: 100%; border: none; background: rgb(var(--background)); cursor: pointer; box-shadow: 0 0 0 5px rgb(var(--text-color)) inset; } .range::-moz-range-progress, .range::-moz-range-track { width: 100%; height: 6px; cursor: pointer; border-radius: 4px; border: none; } .range::-moz-range-progress { background-color: rgba(var(--text-color), 0.7); } .range::-moz-range-track { background-color: rgb(var(--border-color)); } /* On non-hover devices, we make the thumb bigger */ @media not screen and (pointer: fine) { .range::-webkit-slider-thumb { height: 20px; width: 20px; margin-top: -7px; box-shadow: 0 0 0 7px rgb(var(--text-color)) inset; } .range::-moz-range-thumb { height: 20px; width: 20px; box-shadow: 0 0 0 7px rgb(var(--text-color)) inset; } } /* Range group (when using double range, we need to rely on some clever trick) */ .range-group { height: 6px; background: linear-gradient(to var(--transform-origin-end), rgb(var(--border-color)) var(--range-min), rgba(var(--text-color), 0.7) var(--range-min), rgba(var(--text-color), 0.7) var(--range-max), rgb(var(--border-color)) var(--range-max)); border-radius: 4px; } .range-group .range { pointer-events: none; height: 6px; vertical-align: top; } .range-group .range::-webkit-slider-runnable-track { background: none; } .range-group .range::-webkit-slider-thumb { pointer-events: auto; } .range-group .range::-moz-range-progress, .range-group .range::-moz-range-track { background: none; } .range-group .range::-moz-range-thumb { pointer-events: auto; } [dir="ltr"] .range-group .range:last-child { left: 0; } [dir="rtl"] .range-group .range:last-child { right: 0; } .range-group .range:last-child { position: absolute; top: 0; } /* * SWITCH CHECKBOX * Styling range are pretty complex as each browsers has their own way to do it */ .switch-checkbox { position: relative; width: 40px; height: 20px; border-radius: 20px; background: rgb(var(--border-color)); -webkit-appearance: none; appearance: none; transition: background 0.1s ease-in; cursor: pointer; } [dir="ltr"] .switch-checkbox::before { left: 3px; } [dir="rtl"] .switch-checkbox::before { right: 3px; } .switch-checkbox::before { display: block; position: absolute; content: ''; width: 14px; height: 14px; top: 3px; background: rgb(var(--background)); border-radius: 100%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); transition: transform 0.1s ease-in; } .switch-checkbox:checked { background: rgb(var(--text-color)); } .switch-checkbox:checked::before { transform: translateX(calc(100% + 6px)); } /** * ------------------------------------------------------------- * BUTTON * ------------------------------------------------------------- */ .button, .shopify-challenge__button, #shopify-product-reviews .spr-summary-actions-newreview, #shopify-product-reviews .spr-button { position: relative; display: inline-block; -webkit-appearance: none; appearance: none; line-height: var(--button-height); padding: 0 30px; text-align: center; text-decoration: none; border-radius: var(--button-border-radius); background: rgb(var(--button-background)); color: rgb(var(--button-text-color)); } .button:not(.button--text), .shopify-challenge__button, #shopify-product-reviews .spr-summary-actions-newreview, #shopify-product-reviews .spr-button { font-size: calc(var(--base-font-size) - 3px); font-family: var(--text-font-family); font-weight: var(--text-font-bold-weight); text-transform: uppercase; letter-spacing: 1.5px; } .button--small, #shopify-product-reviews .spr-summary-actions-newreview { padding: 0 20px; line-height: var(--button-small-height); } /* BOTTONI- PRIMARY BUTTONS -ADD TO CART- CHECKOUT BUTTON */ .button.button--primary.button--full { font-weight: 9999 !important; white-space: nowrap !important; font-size: 12px !important; padding: 6px 12px; overflow: hidden !important; text-overflow: ellipsis !important; border-radius: 50px !important; transition: all 0.2s ease-in-out; } .button#AddToCart.button.button--primary.button--full { border: none; outline: none; color: #fff; font-size: 13px !important; padding: 3px 6px; margin-top: 10px; margin-bottom: 0px; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; z-index: 1; cursor: pointer; box-sizing: border-box; text-decoration: none; font-weight: bold; font-style: Montserrat; box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px 0px !important; } @media (min-width: 1000px) { .button#AddToCart.button.button--primary.button--full { font-size: 14px !important; } } .button#AddToCart.button.button--primary.button--full:hover { animation: animate 8s linear infinite; } @keyframes animate { 0% { background-position: 0%; } 100% { background-position: 400%; } } .button#AddToCart.button.button--primary.button--full::before { content: ""; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 50px; opacity: 0; transition: opacity 0.5s; } .button#AddToCart.button.button--primary.button--full:hover::before { filter: blur(20px); opacity: 1; animation: animate 8s linear infinite; } .button-wrapper { white-space: nowrap !important; font-size: 14px !important; /* Regola la dimensione del font in base alle tue esigenze */ /* Rimuovo le proprietà che causano il troncamento */ overflow: visible !important; text-overflow: clip !important; } .button--primary, .shopify-challenge__button, #shopify-product-reviews .spr-summary-actions-newreview, #shopify-product-reviews .spr-button { --button-background: var(--primary-button-background); --button-text-color: var(--primary-button-text-color); border-radius: 50px; } .button--secondary { --button-background: var(--secondary-button-background); --button-text-color: var(--secondary-button-text-color); border-radius: 50px; } .button--ternary { --button-background: var(--secondary-background); --button-text-color: var(--root-text-color); } .product-form__add-button.button--full.button--ternary:disabled { margin-top: 10px; } .button--outline { --button-background: var(--background); --button-text-color: var(--root-text-color); border: 1px solid rgb(var(--border-color)); } .button--full { width: 100%; } /** * IMPLEMENTATION NOTE: As of today, when the dynamic checkout button is added on non-product page (for instance * drawer or collection page), Shopify forces their style. We therefore need to use !important rules to make sure * the theme styling is applied. I did not want to apply that globally to the .button, so I am applying this * scoped for this button only, even if this incurs duplicate code */ .shopify-payment-button { min-height: var(--button-height); /* This prevents a page jump */ } .shopify-payment-button__button--branded { border-radius: 50px !important; overflow: hidden !important; min-height: var(--button-height) !important; } .shopify-payment-button__button--unbranded { --button-background: var(--primary-button-background); --button-text-color: var(--primary-button-text-color); position: relative !important; display: inline-block !important; -webkit-appearance: none !important; appearance: none !important; line-height: var(--button-height) !important; padding: 0 30px !important; text-align: center !important; text-decoration: none !important; font-size: calc(var(--base-font-size) - 3px) !important; font-family: var(--text-font-family) !important; font-weight: var(--text-font-bold-weight) !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; background-color: rgb(var(--button-background)) !important; color: rgb(var(--button-text-color)) !important; } .shopify-payment-button__more-options[aria-hidden="true"] { display: none; } @media screen and (min-width: 741px) { .button:not(.button--text), .shopify-challenge__button, #shopify-product-reviews .spr-summary-actions-newreview, #shopify-product-reviews .spr-button { padding-left: 35px; padding-right: 35px; font-size: calc(var(--base-font-size) - 2px); letter-spacing: 2px; border-radius: 50px !important; } .button--small:not(.button--text), #shopify-product-reviews .spr-summary-actions-newreview { padding-left: 28px; padding-right: 28px; font-size: calc(var(--base-font-size) - 3px); } /* Please refer to a comment a few lines before for the reason of those !important */ .shopify-payment-button__button--unbranded { padding-left: 35px !important; padding-right: 35px !important; font-size: calc(var(--base-font-size) - 2px) !important; letter-spacing: 2px !important; } } /** * IMPLEMENTATION NOTE: the design team wanted a specific transition on hover that implies a slightly tilted background * with a reduced opacity. Doing that with a pseudo element (with an efficient scale transform) caused to be problematic, * because the text would appear below the actual pseudo-element, causing the color to be off. One solution would have * been to add an extra wrapping the text itself so that we could set a z-index for the text to be on top. Unfortunately, * there are lot of buttons (Shopify Reviews, dynamic checkout button...) for which controlling the markup is not possible. * As a consequence, I had to go with a more creating approach that uses multiple linear-gradient and animate the background-position. * Animating background-position is known to not be very efficient, but as this is only for desktop and on elements (buttons) whose * size is extremely small, this did not cause any visible slugger animation. */ @media screen and (pointer: fine) { .button, .shopify-challenge__button, #shopify-product-reviews .spr-summary-actions-newreview, #shopify-product-reviews .spr-button, .shopify-payment-button__button { background-image: linear-gradient(178deg, rgb(var(--button-background)), rgb(var(--button-background)) 10%, rgba(0, 0, 0, 0.07) 10%, rgba(0, 0, 0, 0.07) 100%), linear-gradient(rgb(var(--button-background)), rgb(var(--button-background))); background-size: 100% 200%, 100% 100%; background-position: 100% -100%, 100% 100%; background-repeat: no-repeat; transition: background-position 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translateZ(0); /* Make sure to promote the button on its own layer */ border-radius: 50px !important; } .button:hover, .shopify-challenge__button:hover, #shopify-product-reviews .spr-summary-actions-newreview:hover, #shopify-product-reviews .spr-button:hover, .shopify-payment-button__button:hover { background-position: 100% 25%, 100% 100%; border-radius: 50px !important; } /* Only on super modern browsers, allow to automatically switch to a white color based on contrast */ @supports (color: color-contrast(wheat vs black, white)) and (color: rgb(from wheat r g b / 0.07)) { .button, .shopify-challenge__button, #shopify-product-reviews .spr-summary-actions-newreview, #shopify-product-reviews .spr-button, .shopify-payment-button__button { --button-overlay-color: rgb(from color-contrast(rgb(var(--button-background)) vs white, black) r g b / 7%); background-image: linear-gradient(178deg, rgb(var(--button-background)), rgb(var(--button-background)) 10%, var(--button-overlay-color) 10%, var(--button-overlay-color) 100%), linear-gradient(rgb(var(--button-background)), rgb(var(--button-background))); } } } /** * ------------------------------------------------------------- * LOADER BUTTON * ------------------------------------------------------------- */ .loader-button__text { display: flex; align-items: center; justify-content: center; } .loader-button__loader { position: absolute; top: 50%; left: 50%; opacity: 0; } /** * ------------------------------------------------------------- * BUTTON GROUP * ------------------------------------------------------------- */ .button-group { font-size: 0; /* Collapse margin */ } @media screen and (max-width: 740px) { .button-group .button { margin: 12px; padding: 0 18px; /* We halve the padding to increase probability to button to fit on same row on mobile */ } .button-group__wrapper { margin: -12px; } } @media screen and (min-width: 741px) { /* On tablet as we have more space we want to ensure the button has the same width */ .button-group__wrapper { display: inline-grid; gap: 24px; grid-template-columns: 1fr 1fr; } } /** * ------------------------------------------------------------- * COLLAPSIBLE * ------------------------------------------------------------- */ .collapsible {display: block;height: 0;overflow: hidden;visibility: hidden;}.no-js .collapsible, .collapsible[open] {height: auto;overflow: visible;visibility: visible;}.collapsible-toggle {display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 18px 0;}[dir="ltr"] .collapsible-toggle__selected-value {margin-left: auto;margin-right: 12px;}[dir="rtl"] .collapsible-toggle__selected-value {margin-right: auto;margin-left: 12px;}.collapsible-toggle__selected-value {font-weight: normal;max-width: 45%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}.collapsible-toggle svg {transition: transform 0.2s ease-in-out;}.collapsible-toggle[aria-expanded="true"] svg {transform: rotateZ(180deg);}@media screen and (min-width: 741px) {.collapsible-toggle {padding: 21px 0;}} /** * ------------------------------------------------------------- * CONTENT BOX * * In Focal, a lot of content (especially on home page sections) are aligned * according a 10 columns grid (20 on tablet and higher). This special content * box has different alignments and three variation styles. As it is used * throughout the theme, we create an abstraction here. * ------------------------------------------------------------- */ .content-box { position: relative; z-index: 1; border-radius: 20px; } /* Text alignment variations */ .content-box--text-center { text-align: center; } [dir="ltr"] .content-box--text-right { text-align: right; } [dir="rtl"] .content-box--text-right { text-align: left; } @media screen and (max-width: 740px) { /* Small and medium variation on mobile have some extra spacing and are not directly based on the grid. We also apply extra margin if the content box is contained within a flushed mobile container */ .content-box--small, .content-box--medium, .container--flush .content-box--large { margin-left: 24px; margin-right: 24px; } /* Positional variation */ [dir="ltr"] .content-box--left { margin-right: auto; } [dir="rtl"] .content-box--left { margin-left: auto; } [dir="ltr"] .content-box--right { margin-left: auto; } [dir="rtl"] .content-box--right { margin-right: auto; } } @media screen and (min-width: 741px) { /* On tablet, all sizes are shifted by one column left and right, and span a different number of columns */ .content-box { margin-left: auto; margin-right: auto; width: calc(var(--grid-column-width) * 16 + var(--grid-gap) * 15); } .content-box--medium { width: calc(var(--grid-column-width) * 14 + var(--grid-gap) * 13); } .content-box--small { width: calc(var(--grid-column-width) * 10 + var(--grid-gap) * 9); } .content-box--fill { width: 100% !important; } /* Positional variations */ [dir="ltr"] .content-box--left { margin-left: calc(var(--grid-column-width) + var(--grid-gap)); } [dir="rtl"] .content-box--left { margin-right: calc(var(--grid-column-width) + var(--grid-gap)); } [dir="ltr"] .content-box--right { margin-right: calc(var(--grid-column-width) + var(--grid-gap)); } [dir="rtl"] .content-box--right { margin-left: calc(var(--grid-column-width) + var(--grid-gap)); } } @media screen and (min-width: 1000px) { .content-box { width: calc(var(--grid-column-width) * 14 + var(--grid-gap) * 13); } .content-box--medium { width: calc(var(--grid-column-width) * 10 + var(--grid-gap) * 9); } .content-box--small { width: calc(var(--grid-column-width) * 8 + var(--grid-gap) * 7); } } @media screen and (min-width: 1400px) { .content-box--small { width: calc(var(--grid-column-width) * 7 + var(--grid-gap) * 6); } } /** * ------------------------------------------------------------- * DRAWER * ------------------------------------------------------------- */ [dir="ltr"] .drawer {right: 0;}[dir="rtl"] .drawer {left: 0;}[dir="ltr"] .drawer {text-align: left;}[dir="rtl"] .drawer {text-align: right;}.drawer {--heading-color: var(--root-heading-color);--text-color: var(--root-text-color);--background: var(--root-background);--primary-button-background: var(--root-primary-button-background);--primary-button-text-color: var(--root-primary-button-text-color);--section-background: initial;position: fixed;display: flex;flex-direction: column;top: 0;width: 89vw;max-width: 400px;height: 100%;max-height: 100vh;background: rgb(var(--background));color: rgb(var(--text-color));z-index: 10;transform: translateX(calc(var(--transform-logical-flip) * 100%));visibility: hidden;font-size: 1rem;transition: transform 0.6s cubic-bezier(0.75, 0, 0.175, 1), visibility 0.6s cubic-bezier(0.75, 0, 0.175, 1);}[dir="ltr"] .drawer--from-left {right: auto;}[dir="rtl"] .drawer--from-left {left: auto;}[dir="ltr"] .drawer--from-left {left: 0;}[dir="rtl"] .drawer--from-left {right: 0;}.drawer--from-left {transform: translateX(calc(var(--transform-logical-flip) * -100%));}.drawer[open] {transform: translateX(0);visibility: visible;}[dir="ltr"] .drawer--from-left .drawer__overlay {left: 100%;}[dir="rtl"] .drawer--from-left .drawer__overlay {right: 100%;}[dir="ltr"] .drawer--from-left .drawer__overlay {right: auto;}[dir="rtl"] .drawer--from-left .drawer__overlay {left: auto;}.drawer--large {max-width: 500px;}[dir="ltr"] .drawer__overlay {right: 100%;}[dir="rtl"] .drawer__overlay {left: 100%;}.drawer__overlay {content: '';position: fixed;top: 0;height: 100vh;width: 100vw;background: #000000;opacity: 0;visibility: hidden;transition: visibility 0.6s ease-in-out, opacity 0.6s ease-in-out;}.drawer[open] > .drawer__overlay {visibility: visible;opacity: 0.2;}@media (min-width: 720px) {.drawer[open] > .drawer__overlay {visibility: visible;opacity: 0.6;}}.drawer__header {position: relative;display: flex;align-items: center;flex-shrink: 0;padding-top: 20px;padding-bottom: 20px;height: var(--header-height-without-bottom-nav);max-height: 80px;border-bottom: 1px solid rgb(var(--root-border-color));background: rgb(var(--root-background));z-index: 1;}.drawer__header--shadowed {height: auto;border-bottom: none;padding-bottom: 6px;}[dir="ltr"] .drawer__header--shadowed::after {left: 0;}[dir="rtl"] .drawer__header--shadowed::after {right: 0;}.drawer__header--shadowed::after {content: '';position: absolute;top: 100%;width: 100%;height: 24px;background: linear-gradient(var(--root-background), rgba(var(--root-background), 0));z-index: 1;pointer-events: none;}.drawer__title {display: flex;justify-content: flex-start;align-items: center;margin: 0;max-width: 100%;}.drawer__title--stack {flex-direction: column;align-items: flex-start;flex-grow: 1;}[dir="ltr"] .drawer__title .icon {margin-right: 12px;}[dir="rtl"] .drawer__title .icon {margin-left: 12px;}[dir="ltr"] .drawer__header-action {margin-left: 16px;}[dir="rtl"] .drawer__header-action {margin-right: 16px;}[dir="ltr"] .drawer__close-button {right: var(--container-gutter);}[dir="rtl"] .drawer__close-button {left: var(--container-gutter);}.drawer__close-button {position: absolute;top: var(--container-gutter);}.drawer__header .drawer__close-button {top: calc(50% - 7px);}.drawer__close-button--block {position: relative;top: auto !important;right: auto !important;bottom: auto !important;left: auto !important;}.drawer__header, .drawer__content, .drawer__footer {padding-left: var(--container-gutter);padding-right: var(--container-gutter);}.drawer__content {overflow-x: hidden;overflow-y: auto;flex-grow: 1;padding-bottom: 24px;}.drawer__content--padded-start {padding-top: 24px;}.drawer__content--center {text-align: center;margin-top: auto;margin-bottom: auto;padding-bottom: 0;flex-grow: 0;}.drawer__footer {margin-top: auto;padding-top: 20px;padding-bottom: 20px;z-index: 1;transform: translateZ(0);}@supports (padding: max(0px)) {.drawer__footer {padding-bottom: max(20px, env(safe-area-inset-bottom, 0px) + 20px);}}.drawer__footer--bordered {box-shadow: 0 1px rgb(var(--root-border-color)) inset;}.drawer__footer--no-top-padding {padding-top: 0 !important;}[dir="ltr"] .drawer__footer::before {left: 0;}[dir="rtl"] .drawer__footer::before {right: 0;}.drawer__footer::before {content: '';position: absolute;bottom: 100%;width: 100%;height: 24px;background: linear-gradient(rgba(var(--root-background), 0), rgb(var(--root-background)));z-index: 1;pointer-events: none;}@media screen and (min-width: 741px) {.drawer__header {padding-top: 24px;padding-bottom: 24px;max-height: 90px;}[dir="ltr"] .drawer__header-action {margin-left: 24px;}[dir="rtl"] .drawer__header-action {margin-right: 24px;}.drawer__content--padded-start {padding-top: 30px;}.drawer__footer:not(.drawer__footer--tight) {padding-top: var(--container-gutter);padding-bottom: var(--container-gutter);}} /** * ------------------------------------------------------------- * POPOVER * ------------------------------------------------------------- */ .popover-button {width: max-content;}[dir="ltr"] .popover-button svg {margin-left: 10px;}[dir="rtl"] .popover-button svg {margin-right: 10px;}.popover-button svg {position: relative;top: -1px;transition: transform 0.2s ease-in-out;}.popover-button[aria-expanded="true"] svg {transform: rotateZ(180deg);}[dir="ltr"] .popover {text-align: left;}[dir="rtl"] .popover {text-align: right;}.popover {--heading-color: var(--root-heading-color);--text-color: var(--root-text-color);--background: var(--root-background);--primary-button-background: var(--root-primary-button-background);--primary-button-text-color: var(--root-primary-button-text-color);--section-background: var(--root-background);display: block;position: fixed;z-index: 10;color: rgb(var(--text-color));background: rgb(var(--background));visibility: hidden;font-size: 1rem;transition: visibility 0.25s ease-in-out;-webkit-backface-visibility: hidden;backface-visibility: hidden;}.popover[open] {visibility: visible;}.popover__overlay {position: absolute;content: '';height: 110vh;width: 100%;bottom: calc(100% - 10px);left: 0;background: #000000;opacity: 0;transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;}.popover[open] > .popover__overlay {visibility: visible;opacity: 0.6;}.popover__header {position: relative;display: flex;align-items: center;justify-content: center;flex-shrink: 0;padding: 10px 24px;min-height: 64px;border-bottom: 1px solid rgb(var(--root-border-color));border-radius: 10px 10px 0 0;}.popover__header--no-border {border-bottom: none;}.popover__title {display: flex;justify-content: center;align-items: center;margin: 0;}[dir="ltr"] .popover__title svg {margin-right: 12px;}[dir="rtl"] .popover__title svg {margin-left: 12px;}[dir="ltr"] .popover__close-button {right: 24px;}[dir="rtl"] .popover__close-button {left: 24px;}.popover__close-button {position: absolute;top: 24px;z-index: 1;}.popover__content {padding: 24px;overflow: auto;}.popover__content--no-padding {padding: 0 !important;}@supports (padding: max(0px)) {.popover__content {padding-bottom: max(24px, env(safe-area-inset-bottom, 0px) + 24px);}}@media screen and (max-width: 999px) {.popover {display: flex;flex-direction: column;bottom: 0;left: 0;width: 100vw;max-height: 75vh;border-radius: 10px 10px 0 0;transform: translateY(100%);transition: transform 0.6s cubic-bezier(0.75, 0, 0.175, 1), visibility 0.6s cubic-bezier(0.75, 0, 0.175, 1);touch-action: manipulation;}.popover[open] {transform: translateY(0);}.popover__header, .popover__content {background: inherit;}[dir="ltr"] .drawer:not(.drawer--from-left) .popover {left: -11vw;}[dir="rtl"] .drawer:not(.drawer--from-left) .popover {right: -11vw;}.drawer:not(.drawer--from-left) .popover {}}@media screen and (min-width: 1200px) {.popover-container {position: relative;}.popover {position: absolute;top: calc(100% + 18px);border: 1px solid rgb(var(--root-border-color));z-index: 2;opacity: 0;transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;border-radius: min(var(--block-border-radius), 4px);}@media (max-width: 767px) {.popover {position: absolute;top: 20px;left: 0;width: 100%;z-index: 9999;}}.popover {position: absolute;top: calc(100% + 18px);border: 1px solid rgb(var(--root-border-color));z-index: 9999;opacity: 0;transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;border-radius: min(var(--block-border-radius), 4px);}.popover[open] {opacity: 1;}[dir="ltr"] .popover::after,[dir="ltr"] .popover::before {right: 24px;}[dir="rtl"] .popover::after,[dir="rtl"] .popover::before {left: 24px;}.popover::after, .popover::before {position: absolute;content: '';bottom: 100%;width: 0;height: 0;border-style: solid;border-color: transparent transparent rgb(var(--root-background)) transparent;border-width: 8px;}[dir="ltr"] .popover::before {right: 23px;}[dir="rtl"] .popover::before {left: 23px;}.popover::before {border-color: transparent transparent rgb(var(--root-border-color)) transparent;border-width: 9px;}.popover__overlay, .popover__header {display: none;}.popover__content {padding-left: 32px;padding-right: 32px;}.popover__content--restrict {max-height: 400px;}.popover--small {font-size: calc(var(--base-font-size) - 3px);line-height: 1.5;}.popover--top {top: auto;bottom: calc(100% + 18px);}.popover--top::before, .popover--top::after {top: 100%;bottom: auto;border-color: rgb(var(--root-background)) transparent transparent transparent;}.popover--top::before {border-color: rgb(var(--root-border-color)) transparent transparent transparent;}[dir="ltr"] .popover--left {left: 0;}[dir="rtl"] .popover--left {right: 0;}[dir="ltr"] .popover--left {right: auto !important;}[dir="rtl"] .popover--left {left: auto !important;}.popover--left::before, .popover--left::after {display: none;}[dir="ltr"] .popover-button + .popover {right: -28px;}[dir="rtl"] .popover-button + .popover {left: -28px;}[dir="ltr"] .select + .popover {right: -15px;}[dir="rtl"] .select + .popover {left: -15px;}} /** * ------------------------------------------------------------- * POPOVER CHOICE LIST * * This child component is used to create a easily usable list of * choices * ------------------------------------------------------------- */ .popover__choice-list { white-space: nowrap; } .popover__choice-item { display: block; width: 100%; text-align: center; } .popover__choice-item:not(:first-child) { margin-top: 7px; } .popover__choice-label { position: relative; cursor: pointer; } [dir="ltr"] input:checked + .popover__choice-label::after,[dir="ltr"] .popover__choice-label[aria-current]::after { right: -26px; } [dir="rtl"] input:checked + .popover__choice-label::after,[dir="rtl"] .popover__choice-label[aria-current]::after { left: -26px; } input:checked + .popover__choice-label::after, .popover__choice-label[aria-current]::after { content: ''; position: absolute; width: 12px; height: 9px; top: calc(50% - (9px / 2)); background-color: currentColor; -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMy40TDQuNzQ5MzEgN0wxMSAxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMy40TDQuNzQ5MzEgN0wxMSAxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 12px 9px; mask-size: 12px 9px; } @media screen and (max-width: 999px) { .popover__choice-item:not(:first-child) { margin-top: 16px; } } @media screen and (min-width: 1000px) { [dir="ltr"] input:checked + .popover__choice-label::after,[dir="ltr"] .popover__choice-label[aria-current]::after { right: -22px; } [dir="rtl"] input:checked + .popover__choice-label::after,[dir="rtl"] .popover__choice-label[aria-current]::after { left: -22px; } [dir="ltr"] .popover__choice-label { margin-right: 22px; } [dir="rtl"] .popover__choice-label { margin-left: 22px; } .popover__choice-item { text-align: left; } .popover--small .popover__content { padding: 14px 20px; } .popover__choice-item { /* resettiamo eventuali padding default */ padding-left: 0 !important; padding-right: 30px !important; } } /** * ------------------------------------------------------------- * MODAL * * Modal allows to provide a full-screen off-screen elements. On mobile, they look * like popover, while on tablet and desktop they use an immersive full-screen elements. Because * modal are much more "free" than popover and drawer in their structure, the styling * is left to the actual inner content * ------------------------------------------------------------- */ [dir="ltr"] .modal { left: 0; } [dir="rtl"] .modal { right: 0; } .modal { /* Make sure the modal component does not inherit values from the section it is included to */ --heading-color: var(--root-heading-color); --text-color: var(--root-text-color); --background: var(--root-background); position: fixed; font-size: 1rem; z-index: 10; visibility: hidden; transition: visibility 0.25s ease-in-out; } .modal[open] { visibility: visible; } [dir="ltr"] .modal__overlay { left: 0; } [dir="rtl"] .modal__overlay { right: 0; } .modal__overlay { position: absolute; content: ''; height: 100vh; width: 100vw; bottom: calc(100% - 10px); /* There is a border radius on the header on mobile so we slightly move down the overlay */ background: #000000; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; } .modal[open] > .modal__overlay { visibility: visible; opacity: 0.3; } [dir="ltr"] .modal__close-button { right: 24px; } [dir="rtl"] .modal__close-button { left: 24px; } .modal__close-button { position: absolute; top: 24px; z-index: 1; } .modal__content { position: relative; display: flow-root; background: rgb(var(--background)); color: rgb(var(--text-color)); border-radius: var(--block-border-radius); } @media screen and (max-width: 740px) { .modal { bottom: 0; width: 100vw; transform: translateY(100%); transition: transform 0.7s cubic-bezier(0.75, 0, 0.175, 1), visibility 0.7s cubic-bezier(0.75, 0, 0.175, 1); touch-action: manipulation; } .modal[open] { transform: translateY(0); } .modal__content { max-height: 81vh; border-radius: 10px 10px 0 0; overflow: hidden; } } @media screen and (min-width: 741px) { .modal { display: flex; top: 0; justify-content: center; align-items: center; width: 100%; height: 100%; } .modal__overlay { position: fixed; top: 0; bottom: auto; } .modal__content { margin: 80px; /* Allows to guarantee spacing around the edges */ max-height: calc(100vh - 160px); overflow: auto; transform: scale(0.8); opacity: 0; transition: transform 0.3s cubic-bezier(0.75, 0, 0.175, 1), opacity 0.3s cubic-bezier(0.75, 0, 0.175, 1); will-change: transform; } .modal[open] .modal__content { transform: scale(1); opacity: 1; } } /** * -------------------------------------------------------------------- * COLOR SWATCH * -------------------------------------------------------------------- */ .color-swatch-list { display: flex !important; flex-wrap: wrap; justify-content: flex-start; grid-template-columns: repeat(auto-fit, 40px); grid-gap: 8px; gap: var(--color-swatch-gap, 10px); } .color-swatch__item { margin-bottom: 10px; position: relative; display: block; cursor: pointer; width: var(--color-swatch-size, 80px); height: var(--color-swatch-size, 80px); border-radius: var(--color-swatch-radius, 10px); background-size: cover; background-position: center; -webkit-tap-highlight-color: transparent; } .color-swatch__item::before, .color-swatch__item::after { position: absolute; content: ''; border: 2.5px solid rgb(var(--section-background, var(--background))); pointer-events: none; border-radius: inherit; } @media (min-width: 1000px) { .color-swatch__item::before, .color-swatch__item::after { border: 2.95px solid rgb(var(--section-background, var(--background))); } } .color-swatch__item::before { top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border: 1.25px solid grey; opacity: 0.5; } .color-swatch__item::after { width: calc(100% + 0px); height: calc(100% + 0px); border-color: #0075E3; opacity: 0; transform: scale(0.8); transition: opacity 0.2s ease, transform 0.2s ease; } .color-swatch--white .color-swatch__item::before { box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3) inset; } /* quando è selezionato, spegni il bordo “before” */ .color-swatch__radio:checked + .color-swatch__item::before { border-color: transparent !important; box-shadow: none !important; } .color-swatch__radio:checked + .color-swatch__item::after { top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: scale(1); /* mantiene la scala “1” */ opacity: 1; /* già la mostri, ma lo ribadiamo */ box-shadow:0 0 0 0.5px #0075E3; } .color-swatch-list--mini { grid-template-columns: repeat(auto-fit, 14px); } .color-swatch-list--mini .color-swatch__item { width: 18px; height: 18px; border-width: 2px; } .color-swatch-list--mini .color-swatch__item::before, .color-swatch-list--mini .color-swatch__item::after { border-width: 1px; } /* Disabled state */ .color-swatch.is-disabled .color-swatch__item::before { background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(var(--background)) calc(50% - 1px), rgb(var(--background)) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat; } /* Stato disabilitato: nascondo sia the “before” che l’“after” colorati */ .color-swatch.is-disabled .color-swatch__item::after { border-color: grey !important; box-shadow: none !important; } .color-swatch.is-disabled .color-swatch__item { opacity: 0.4; } @media not screen and (pointer: fine) { .color-swatch[data-tooltip]::before, .color-swatch[data-tooltip]::after { display: none; } } .product-form .swatch-rail{position:relative;display:block;overflow-x:auto;overflow-y:visible;box-sizing:border-box;} .product-form .color-swatch-list{display:flex !important;flex-wrap:nowrap;align-items:center;gap:var(--color-swatch-gap,10px);margin:0;padding:var(--color-swatch-padding-top,6px) 0 var(--color-swatch-padding-bottom,6px);width:max-content;min-width:fit-content;scroll-snap-type:x mandatory} .product-form .color-swatch{flex:0 0 auto;scroll-snap-align:start} .product-form .color-swatch__item{margin-bottom:0} .product-form .color-swatch-list{margin-inline:auto;justify-content:center} @media (max-width:740px){ .product-form .swatch-rail{inline-size:100vw;max-inline-size:100vw;margin-inline:calc(50% - 50vw);padding-inline-start:clamp(25px,5vw,6px);padding-inline-end:0;scroll-padding-inline-start:clamp(25px,5vw,6px);scroll-padding-inline-end:0;background:transparent} .product-form .color-swatch-list::after{content:"";flex:0 0 clamp(22px,3.5vw,30px)} } @media (min-width:1000px){ .product-form .swatch-rail{inline-size:auto;max-inline-size:100%;margin-inline:0;overflow-y:visible;padding-inline:0;-webkit-mask-image:none;mask-image:none;scroll-snap-type:none;padding-block:14px;margin-block:-14px} } /** -------------------------------------------------------------------- * BLOCK SWATCH (stesse dimensioni e testo attuali) * ------------------------------------------------------------------ */ .block-swatch-list{ display:flex;justify-content:flex-start;flex-wrap:wrap; margin:-4px;margin-bottom:10px; } .block-swatch__item { display: block; position: relative; min-width: var(--bswatch-min-width, 48px); padding: var(--bswatch-pad-y, 11px) var(--bswatch-pad-x, 18px); font-size: var(--bswatch-font-size, 14px); margin: 4px; border: 1px solid rgb(var(--border-color)); border-radius: var(--button-border-radius); background: rgb(var(--background)); color: rgb(var(--text-color)); text-align: center; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s, border-color .2s; -webkit-tap-highlight-color: transparent; } /* small */ .block-swatch-list--small .block-swatch__item{min-width:44px;padding:4px 12px;margin:4px} /* SELEZIONATO (azzurro) */ .block-swatch__radio:checked + .block-swatch__item{ background:#F0FBFF;color:#0075E3;font-weight:700; border-color:#0075E3;box-shadow:0 0 0 1.5px #0075E3; } /* DISABILITATO: stile come frame-swatch (opaco + diagonale rossa) */ .block-swatch.is-disabled .block-swatch__item{ opacity:.55; background:#F5F6F8; /* light come le tile frame */ border-color:#DEDEDE; /* neutro, non blu/rosso pieno */ cursor:not-allowed; } .block-swatch.is-disabled .block-swatch__item::after{ content:"";position:absolute;inset:6px;border-radius:var(--button-border-radius); background:linear-gradient(135deg,transparent calc(50% - 1px), #E34851 50%, transparent calc(50% + 1px)); } /* niente interazioni/selected sugli esauriti */ .block-swatch.is-disabled .block-swatch__radio{ pointer-events:none; } .block-swatch.is-disabled .block-swatch__radio:checked + .block-swatch__item{ /* annullo il look "checked" se per qualche motivo arriva checked */ background:#F5F6F8;color:rgb(var(--text-color)); border-color:#DEDEDE;box-shadow:none; } /* -------------------------------------------------------------------- * SUPPORTO LAYOUT FORM / SIZE GUIDE (immutato) * ------------------------------------------------------------------ */ .product-form{position:relative} .product-form__option-info{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .size-guide-container{ position:absolute;right:0;top:50%;transform:translateY(-50%); font-size:11.5px;display:flex;align-items:center;white-space:nowrap } /** * -------------------------------------------------------------------- * VARIANT IMAGE SWATCH * -------------------------------------------------------------------- */ .variant-swatch-list { margin-left: 0px !important; display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 6px; } .variant-swatch__item { display: block; position: relative; margin: 6px; border: 1px solid rgb(var(--border-color)); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .variant-swatch__image { width: 300%; height: 300%; } .variant-swatch__item, .variant-swatch__image { border-radius: 6px;; } [dir="ltr"] .variant-swatch__item::after { left: 0; } [dir="rtl"] .variant-swatch__item::after { right: 0; } .variant-swatch__item::after { content: ''; position: absolute; top: 0; width: 100%; height: 100%; box-shadow: 0 0 0 1px #0075e3 inset, 0 0 0 1px #0075e3; border-radius: 9px;; opacity: 0; transform: scale(0.9); transition: opacity 0.2s ease, transform 0.2s ease; } .variant-swatch__radio:checked + .variant-swatch__item::after { opacity: 1; transform: scale(1.10); } /* Disabled state */ .variant-swatch.is-disabled .variant-swatch__image { opacity: 0.4; } /* We have to use a pseudo element as background image does not work on image */ [dir="ltr"] .variant-swatch.is-disabled .variant-swatch__item::before { left: 0; } [dir="rtl"] .variant-swatch.is-disabled .variant-swatch__item::before { right: 0; } .variant-swatch.is-disabled .variant-swatch__item::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(var(--border-color)) 50%, transparent calc(50% + 1px)) no-repeat; z-index: 1; } @media screen and (min-width: 741px) { .variant-swatch-list { margin: -6px; } .variant-swatch__item { margin: 6px; } .variant-swatch__image { width: 72px; } } /** * -------------------------------------------------------------------- * ACCESSIBILITY * -------------------------------------------------------------------- */ .color-swatch__radio.focus-visible + label, .block-swatch__radio.focus-visible + label, .variant-swatch__radio.focus-visible + label { outline: auto 5px -webkit-focus-ring-color; } .color-swatch__radio:focus-visible + label, .block-swatch__radio:focus-visible + label, .variant-swatch__radio:focus-visible + label { outline: auto 5px -webkit-focus-ring-color; } /** * -------------------------------------------------------------------- * VIDEO WRAPPER * -------------------------------------------------------------------- */ .video-wrapper {display: block;position: relative;}.video-wrapper::after {content: '';display: block;padding-bottom: 56.25%;pointer-events: none;}[dir="ltr"] .video-wrapper iframe {left: 0;}[dir="rtl"] .video-wrapper iframe {right: 0;}.video-wrapper iframe {position: absolute;top: 0;width: 100%;height: 100%;}.video-wrapper--cover {overflow: hidden;width: 100%;height: 100%;}.video-wrapper--cover::after {display: none;}.video-wrapper--cover iframe {position: absolute;top: 50% !important;left: 50% !important;right: auto !important;width: var(--video-width, 100%);height: var(--video-height, 100%);transform: translate(-50%, -50%);}@media (min-aspect-ratio: 16/9) {.video-wrapper--cover iframe {--video-height: 56.25vw;}}@media (max-aspect-ratio: 16/9) {.video-wrapper--cover iframe {--video-width: 177.78vh;height: calc(var(--video-height) + 200px);}}.video-wrapper--inert iframe {pointer-events: none;}.video-wrapper--native {aspect-ratio: var(--aspect-ratio);}.video-wrapper--native video {width: 100%;height: 100%;}.video-wrapper--native::after {display: none;}@supports not (aspect-ratio: 1) {.video-wrapper--native video {position: absolute;top: 0;right: 0;bottom: 0;left: 0;}.video-wrapper--native::after {display: block;padding-bottom: calc(100% / var(--aspect-ratio));}}.video-wrapper__poster {position: absolute;display: flex;align-items: center;justify-content: center;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;}.video-wrapper__poster, .video-wrapper iframe {opacity: 1;visibility: visible;transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;}.video-wrapper__poster-content {position: absolute;}.video-wrapper__poster-image {object-fit: cover;object-position: center;height: 100%;width: 100%;}@keyframes playButtonRipple {0% {box-shadow: 0 0 0 0 rgb(var(--play-button-background)), 0 0 0 0 rgb(var(--play-button-background));}100% {box-shadow: 0 0 0 9px rgba(var(--play-button-background), 0), 0 0 0 18px rgba(var(--play-button-background), 0);}}.video-wrapper__play-button {border-radius: 100%;}.video-wrapper__play-button--ripple {animation: playButtonRipple 1400ms ease-in-out infinite;}.video-wrapper__play-button:not(:only-child) {margin-bottom: 32px;}@media screen and (min-width: 1000px) {@keyframes playButtonRipple {0% {box-shadow: 0 0 0 0 rgb(var(--play-button-background)), 0 0 0 0 rgb(var(--play-button-background));}100% {box-shadow: 0 0 0 17px rgba(var(--play-button-background), 0), 0 0 0 32px rgba(var(--play-button-background), 0);}}.video-wrapper__play-button:not(:only-child) {margin-bottom: 40px;}.video-wrapper__play-button--large svg {width: 104px;height: 104px;}} /** * ---------------------------------------------- --------------------------- * FACETING (used on collection and search page) x DESKTOP - COLLECTION PAGE * --------------------------------------------- ---------------------------- */ .product-facet {display: block;margin-top: 24px;margin-bottom: 48px;}.product-facet__filters-header {padding-bottom: 24px;border-bottom: 1px solid rgb(var(--border-color));}.product-facet__filters:not(.drawer) {display: block;padding-bottom: 24px;}.product-facet__active-list {margin-top: -6px;margin-bottom: 18px;}.product-facet__filter-item + .product-facet__filter-item {border-top: 1px solid rgb(var(--border-color));}[dir="ltr"] .product-facet__filter-item .collapsible__content {padding-left: 8px;}[dir="rtl"] .product-facet__filter-item .collapsible__content {padding-right: 8px;}.product-facet__filter-item:not(:last-child) .collapsible__content {margin-bottom: 25px;}.product-facet__submit {margin-top: 40px;}[dir="ltr"] .product-facet__active-count {margin-left: 8px;}[dir="rtl"] .product-facet__active-count {margin-right: 8px;}[dir="ltr"] .product-facet__sort-by-title {padding-right: 7px;}[dir="rtl"] .product-facet__sort-by-title {padding-left: 7px;}.product-facet__product-list {margin-top: calc(var(--container-gutter) / 2);}.product-facet__meta-bar {display: flex;justify-content: center;align-items: flex-start;margin-bottom: 16px;}.product-facet__meta-bar-item {display: flex;align-items: center;}[dir="ltr"] .product-facet__meta-bar-item .icon--filters {margin-right: 13px;}[dir="rtl"] .product-facet__meta-bar-item .icon--filters {margin-left: 13px;}[dir="ltr"] .mobile-toolbar__item .icon--filters {margin-right: 13px;}[dir="rtl"] .mobile-toolbar__item .icon--filters {margin-left: 13px;}@media screen and (max-width: 740px) {.product-facet__active-list {margin-left: -18px;margin-right: -18px;}.mobile-toolbar__item--filters.has-filters .mobile-toolbar__item-label::after {position: absolute;content: '';width: 6px;height: 6px;background: currentColor;border-radius: 6px;}} @media screen and (max-width: 999px) {.product-facet__filters:not(.drawer) {display: none;}}@media screen and (min-width: 741px) {.product-facet {margin-top: 40px;margin-bottom: 80px;}.product-facet__active-list {margin-top: 18px;margin-bottom: 0;}.drawer .product-facet__active-list {margin-top: 26px;}.product-facet__meta-bar {margin-bottom: 24px;}[dir="ltr"] .product-facet__meta-bar-item--filter {margin-right: 44px;}[dir="rtl"] .product-facet__meta-bar-item--filter {margin-left: 44px;}} @media screen and (min-width: 1000px) { .product-facet { justify-content: flex-start; display: flex; } .product-facet__aside { padding-top:35px; flex: none; width: 230px; margin-inline-end: 40px; } .product-facet__aside-inner { top: calc(var(--header-height, 0px) * var(--enable-sticky-header) + var(--announcement-bar-height, 0px) * var(--enable-sticky-announcement-bar, 0) + 24px); display: block; position: sticky; } .product-facet__main { flex: 1 0 0; } .product-facet__filters:not(.drawer) .drawer__content { padding: 0; overflow: visible; } .product-facet__meta-bar { justify-content: flex-start; } .product-facet__meta-bar-item:last-child { margin-inline-start: auto; } } @media screen and (min-width: 1200px) {.product-facet__aside {width: 265px;}} /* General. The back button has a very specific positioning that is used only here so it has special style */ .account__block-list {display: grid;grid-row-gap: 24px;row-gap: 24px;}.account__block-item:empty {display: none;}.account__back-button {display: inline-flex;align-items: center;justify-content: center;margin-top: 30px;z-index: 1;}[dir="ltr"] .account__back-button svg {margin-right: 14px;}[dir="rtl"] .account__back-button svg {margin-left: 14px;}@media screen and (min-width: 741px) {.account__block-list {row-gap: 32px;}}@media screen and (min-width: 1000px) {[dir="ltr"] .account__back-button {left: var(--container-outer-width);}[dir="rtl"] .account__back-button {right: var(--container-outer-width);}.account__back-button {position: absolute;margin-top: 48px;}}.account__order-table-item:hover .link--animated::after {transform: scale(1);transform-origin: var(--transform-origin-start);}.account__order-list-item + .account__order-list-item {margin-top: 24px;padding-top: 24px;border-top: 1px solid rgb(var(--border-color));}.account__order-item-info {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 24px 64px;gap: 24px 64px;margin-top: 16px;margin-bottom: 16px;}.account__order-item-block .heading {margin-bottom: 8px;}.account__order-date {display: block;margin-top: -6px;}@media screen and (max-width: 740px) {[dir="ltr"] .account--order .page-header {text-align: left;}[dir="rtl"] .account--order .page-header {text-align: right;}.account--order .page-header {}}@media screen and (min-width: 741px) {.account__order-date {margin-top: -18px;}.account__order-addresses .account__addresses-list {margin-top: 24px;}}.account__addresses-list {display: grid;border: 1px solid rgb(var(--border-color));}.account__address {display: flex;flex-direction: column;padding: 24px;min-height: 200px;}.account__address--auto {min-height: 0 !important;}.account__address:not(:first-child) {border-top: 1px solid rgb(var(--border-color));}.account__address--empty {justify-content: center;align-items: center;}.account__address--empty svg {margin-bottom: 16px;}.account__address-details {margin-top: 10px;}.account__address--empty {background: rgb(var(--secondary-background));}.account__address-actions {display: grid;grid-auto-flow: column;justify-content: flex-start;grid-gap: 20px;gap: 20px;margin-top: auto;padding-top: 10px;}@media screen and (min-width: 741px) {.account__addresses-list {border: none;grid-template-columns: repeat(auto-fit, 50%);justify-content: center;}[dir="ltr"] .account__address {border-right: 1px solid rgb(var(--border-color));}[dir="rtl"] .account__address {border-left: 1px solid rgb(var(--border-color));}.account__address {border-top: 1px solid rgb(var(--border-color));border-bottom: 1px solid rgb(var(--border-color));}}@media screen and (min-width: 741px) and (max-width: 999px) {.account__address:nth-child(2n) ~ .account__address {border-top: none;}[dir="ltr"] .account__address:nth-child(2n + 1) {border-left: 1px solid rgb(var(--border-color));}[dir="rtl"] .account__address:nth-child(2n + 1) {border-right: 1px solid rgb(var(--border-color));}}@media screen and (min-width: 1000px) {.account__addresses-list:not(.account__addresses-list--wide) {grid-template-columns: repeat(auto-fit, 33.33333%);}.account__address:nth-child(3n) ~ .account__address {border-top: none;}[dir="ltr"] .account__address:nth-child(3n + 1) {border-left: 1px solid rgb(var(--border-color));}[dir="rtl"] .account__address:nth-child(3n + 1) {border-right: 1px solid rgb(var(--border-color));}} /* ANNOUNCEMENT BAR */ .announcement-bar {display: flex;justify-content: center;align-items: center;padding-left: 20px;padding-right: 20px;background: rgb(var(--section-background));}.announcement-bar--multiple {justify-content: space-between;}.announcement-bar__list {padding-left: 10px;padding-right: 10px;}.announcement-bar__item {display: block;}.announcement-bar__item[hidden] {visibility: hidden;height: 0;}.announcement-bar__message {padding-top: 15px;padding-bottom: 15px;text-align: center;}[dir="ltr"] .announcement-bar__message .link {margin-left: 4px;}[dir="rtl"] .announcement-bar__message .link {margin-right: 4px;}[dir="ltr"] .announcement-bar__close-button {right: var(--container-gutter);}[dir="rtl"] .announcement-bar__close-button {left: var(--container-gutter);}.announcement-bar__close-button {position: absolute;top: var(--container-gutter);}.announcement-bar__content {display: block;z-index: 5;}.announcement-bar__content[hidden] {visibility: hidden;}.announcement-bar__content-inner {background: rgb(var(--section-background));}[dir="ltr"] .announcement-bar__content-overlay {left: 0;}[dir="rtl"] .announcement-bar__content-overlay {right: 0;}.announcement-bar__content-overlay {position: absolute;content: '';height: 100vh;width: 100%;bottom: calc(100% - 10px);background: #000000;opacity: 0.3;z-index: -1;transition: opacity 0.5s ease-in-out;}.announcement-bar__content[hidden] .announcement-bar__content-overlay {opacity: 0;}@media screen and (max-width: 740px) {[dir="ltr"] .announcement-bar__content {left: 0;}[dir="rtl"] .announcement-bar__content {right: 0;}.announcement-bar__content {position: fixed;bottom: 0;width: 100%;transition: visibility 0.6s linear, opacity 0.6s cubic-bezier(0.75, 0, 0.175, 1), transform 0.6s cubic-bezier(0.75, 0, 0.175, 1);}.announcement-bar__content[hidden] {transform: translateY(100%);}.announcement-bar__content-inner {display: flex;flex-direction: column;max-height: 81vh;border-radius: 10px 10px 0 0;overflow: hidden;}.announcement-bar__content-image {flex: none;}.announcement-bar__content-text-wrapper {overflow: auto;padding: 32px 48px;text-align: center;}.announcement-bar__content.has-image .announcement-bar__close-button {color: rgb(255, 255, 255);}@supports (padding: max(0px)) {.announcement-bar__content-text-wrapper {padding-bottom: max(32px, env(safe-area-inset-bottom, 0px) + 32px);}}}@media screen and (min-width: 741px) {.announcement-bar {position: relative;justify-content: center;padding-left: var(--container-gutter);padding-right: var(--container-gutter);}.announcement-bar__list {max-width: var(--container-max-width);padding-left: 40px;padding-right: 40px;}[dir="ltr"] .announcement-bar__content {left: 0;}[dir="rtl"] .announcement-bar__content {right: 0;}.announcement-bar__content {position: absolute;top: 100%;width: 100%;box-shadow: 0 -1px rgba(var(--text-color), 0.2);transition: visibility 0.5s linear, box-shadow 0.5s ease-in-out;}.announcement-bar__content[hidden] {box-shadow: none;}.announcement-bar__content-overflow {overflow: hidden;height: calc(100vh - var(--announcement-bar-height));}.announcement-bar__content-inner {display: grid;grid-auto-columns: 1fr;max-height: 80vh;overflow: hidden;align-items: center;background: rgb(var(--section-background));opacity: 1;transform: translateY(0);transition: opacity 0.5s cubic-bezier(0.75, 0, 0.175, 1), transform 0.5s cubic-bezier(0.75, 0, 0.175, 1);}.announcement-bar__content[hidden] .announcement-bar__content-inner {transform: translateY(-100%);opacity: 0;}.announcement-bar__content-overlay {bottom: auto;top: 0;}.announcement-bar__content-image, .announcement-bar__content-text-wrapper {grid-row: 1;max-height: inherit;}.announcement-bar__content-image {height: 100%;max-height: max-content;object-fit: cover;object-position: center;}.announcement-bar__content-text-wrapper {padding: 80px var(--container-gutter);overflow: auto;overscroll-behavior: contain;}.announcement-bar__content-text {max-width: 420px;margin-left: auto;margin-right: auto;text-align: center;}.announcement-bar__message {min-width: 495px;max-width: 1000px;}}a /* Header part */ .article__header {position: relative;display: block;background: rgb(var(--section-header-background));}.article__header-content {padding: 40px var(--container-gutter);margin-left: auto;margin-right: auto;color: rgb(var(--text-color));}.article__image-wrapper {overflow: hidden;}@media screen and (min-width: 1000px) {.article__header {display: flex;flex-direction: row-reverse;align-items: center;}.article__header-content {padding-top: 72px;padding-bottom: 72px;}[dir="ltr"] .article__header .breadcrumb {left: var(--container-outer-margin);}[dir="rtl"] .article__header .breadcrumb {right: var(--container-outer-margin);}.article__image-wrapper {flex: none;align-self: stretch;}.article__image-wrapper--tall {width: 37.5%;}.article__image-wrapper--square {width: 50%;}.article__image {width: 100%;height: 100%;object-fit: cover;object-position: center;}[dir="ltr"] .article__image-wrapper--tall + .article__header-content {padding-right: 100px;}[dir="rtl"] .article__image-wrapper--tall + .article__header-content {padding-left: 100px;}.article__header-content:only-child {padding-left: 0;padding-right: 0;max-width: 668px;text-align: center;}}@media screen and (min-width: 1400px) {[dir="ltr"] .article__header-content {padding-left: calc(var(--container-outer-margin) + var(--grid-column-width) + var(--grid-gap));}[dir="rtl"] .article__header-content {padding-right: calc(var(--container-outer-margin) + var(--grid-column-width) + var(--grid-gap));}[dir="ltr"] .article__header-content {padding-right: 70px;}[dir="rtl"] .article__header-content {padding-left: 70px;}[dir="ltr"] .article__image-wrapper--tall + .article__header-content {padding-right: 160px;}[dir="rtl"] .article__image-wrapper--tall + .article__header-content {padding-left: 160px;}}.article__nav {position: fixed;display: block;width: 100%;top: calc(var(--enable-sticky-header) * var(--header-height, 0px) + var(--announcement-bar-height, 0px) * var(--enable-sticky-announcement-bar));border-bottom: 1px solid rgb(var(--border-color));background: rgb(var(--background));z-index: 1;transform: translateY(-100%);opacity: 0;visibility: hidden;transition: 0.3s transform ease, 0.3s opacity ease, 0.3s visibility ease;}.article__nav.is-visible {transform: translateY(0);opacity: 1;visibility: visible;}[dir="ltr"] .article__nav::after {left: 0;}[dir="rtl"] .article__nav::after {right: 0;}.article__nav::after {position: absolute;content: '';bottom: 0;height: 2px;width: 100%;transform-origin: var(--transform-origin-start);transform: scaleX(var(--transform));background: currentColor;box-shadow: 0 1px currentColor;}.article__nav-wrapper {position: relative;display: flex;align-items: center;padding: 18px 0;}.article__nav-item {display: flex;align-items: center;}.article__nav-item-title {max-width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 0;}[dir="ltr"] .article__nav-item-label {margin-right: 10px;}[dir="rtl"] .article__nav-item-label {margin-left: 10px;}[dir="ltr"] .article__nav-item--next .article__nav-arrow {margin-left: 20px;}[dir="rtl"] .article__nav-item--next .article__nav-arrow {margin-right: 20px;}[dir="ltr"] .article__nav-item--prev .article__nav-arrow {margin-right: 20px;}[dir="rtl"] .article__nav-item--prev .article__nav-arrow {margin-left: 20px;}.article__reading-time {flex-shrink: 0;}@media screen and (max-width: 740px) {.article__nav-item {width: 100%;justify-content: center;transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;will-change: transform;}[dir="ltr"] .article__nav-item--next {left: 0;}[dir="rtl"] .article__nav-item--next {right: 0;}.article__nav-item--next {position: absolute;align-items: baseline;opacity: 0;transform: translateY(-6px);visibility: hidden;transition-delay: 0s;}.article__nav-item--current {transition-delay: 0.15s;}[dir="ltr"] .article__nav-arrow {margin-left: auto;}[dir="rtl"] .article__nav-arrow {margin-right: auto;}.article__nav-arrow {align-self: center;}.article__nav--show-next .article__nav-item--current {opacity: 0;transform: translateY(6px);transition-delay: 0s;}.article__nav--show-next .article__nav-item--next {opacity: 1;transform: translateX(0);visibility: visible;transition-delay: 0.15s;}}@media screen and (min-width: 741px) {.article__nav-wrapper {justify-content: center;}.article__nav-item--prev, .article__nav-item--next {position: absolute;}[dir="ltr"] .article__nav-item--prev {left: 0;}[dir="rtl"] .article__nav-item--prev {right: 0;}[dir="ltr"] .article__nav-item--next {right: 0;}[dir="rtl"] .article__nav-item--next {left: 0;}.article__nav-item-title {max-width: 225px;}.article__nav-item--prev .article__nav-item-title, .article__nav-item--next .article__nav-item-title {opacity: 0;transform: translateY(-6px);transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;will-change: transform;}.article__nav-item:hover .article__nav-item-title, .article__nav-item:focus .article__nav-item-title {opacity: 1;transform: translateY(0);}}@media screen and (min-width: 1000px) {.article__nav-wrapper {padding: 27px 0;}}@media screen and (min-width: 1200px) {.article__nav-item-title {max-width: 300px;}}.article {margin: 40px 0;}.article__inner {position: relative;display: flex;justify-content: center;flex-direction: column-reverse;}.article__info {display: grid;grid-gap: 14px;gap: 14px;margin-top: 40px;padding-top: 24px;border-top: 1px solid rgb(var(--border-color));width: 100%;}.article__meta-item + .article__meta-item::before {display: inline-block;content: '';width: 4px;height: 4px;margin-left: 12px;margin-right: 12px;vertical-align: 2px;background: rgb(var(--text-color));}.article__tags {display: flex;align-items: center;}[dir="ltr"] .article__tags-item {margin-right: 12px;}[dir="rtl"] .article__tags-item {margin-left: 12px;}.article__tags-item {display: inline-block;}[dir="ltr"] .article__tags-label {margin-right: 15px;}[dir="rtl"] .article__tags-label {margin-left: 15px;}.article__share {display: flex;align-items: center;width: max-content;}.article__info {max-width: max-content;}[dir="ltr"] .article__share-button-list {margin-left: 15px;}[dir="rtl"] .article__share-button-list {margin-right: 15px;}.article__share-button-list {display: grid;grid-auto-flow: column;justify-content: flex-start;align-items: center;grid-gap: 26px;gap: 26px;list-style: none;padding: 0;}.article__comments-count {display: inline-flex;vertical-align: top;}[dir="ltr"] .article__comments-count svg {margin-right: 8px;}[dir="rtl"] .article__comments-count svg {margin-left: 8px;}.article__comments-count svg {position: relative;top: 1px;}@media screen and (min-width: 1000px) {.article {margin-top: 80px;margin-bottom: 80px;}.article__inner {align-items: center;}.article__content, .article__info {max-width: 668px;flex-grow: 1;}}@media screen and (min-width: 1200px) {.article__inner {flex-direction: column;min-height: 200px;}[dir="ltr"] .article__info {left: 0;}[dir="rtl"] .article__info {right: 0;}.article__info {position: absolute;top: 0;width: 170px;margin-top: 0;padding-top: 30px;gap: 28px;}.article__meta {display: grid;grid-gap: 8px;gap: 8px;justify-content: flex-start;}.article__meta-item::before {display: none !important;}.article__tags-label {margin-bottom: 10px;}.article__share, .article__tags {display: block;}.article__share-label {display: block;margin-bottom: 16px;}[dir="ltr"] .article__share-button-list {margin-left: 6px;}[dir="rtl"] .article__share-button-list {margin-right: 6px;}}@media screen and (min-width: 1400px) {.article__inner {margin-left: calc(var(--grid-column-width) + var(--grid-gap));margin-right: calc(var(--grid-column-width) + var(--grid-gap));}.article__info {width: 185px;}}.article__prev-next {background: rgb(var(--secondary-background));}@media screen and (min-width: 741px) {.article__prev-next .article-list {grid-template-columns: none;grid-auto-columns: 310px;justify-content: center;}.article__prev-next .article-item {width: auto !important;}}.article__comment-list-heading {margin-bottom: 30px;}.article-comment {padding: 24px;background: rgb(var(--secondary-background));border-radius: var(--block-border-radius-reduced);}.article-comment + .article-comment {margin-top: 16px;}.article-comment__meta {display: flex;align-items: center;}[dir="ltr"] .article-comment__gravatar {margin-right: 16px;}[dir="rtl"] .article-comment__gravatar {margin-left: 16px;}.article-comment__gravatar {border-radius: 100%;width: 40px;}.article-comment__author {margin-bottom: 0;}.article-comment__date {display: block;margin-top: 2px;margin-bottom: 4px;}.article-comment__content {margin-top: 15px;}.article__comment-list + .article__comment-form {margin-top: 48px;}.article__comment-form-title {margin-top: 0;}@media screen and (min-width: 741px) {.article-comment {padding: 32px;}[dir="ltr"] .article-comment__gravatar {margin-right: 21px;}[dir="rtl"] .article-comment__gravatar {margin-left: 21px;}.article-comment__gravatar {width: 48px;align-self: flex-start;}.article__comment-list-heading {margin-bottom: 34px;}.article__comment-list + .article__comment-form {margin-top: 64px;}}@media screen and (min-width: 1000px) {.article__comment-box {max-width: 748px;margin-left: auto;margin-right: auto;}}.article-list {--article-list-row-gap: 40px;--article-list-column-gap: var(--container-gutter);display: grid;grid-gap: var(--article-list-row-gap) var(--article-list-column-gap);gap: var(--article-list-row-gap) var(--article-list-column-gap);}.article-list--scrollable {grid-auto-flow: column;}.article-item {width: 100%;}.article-item__image-container {position: relative;display: block;margin-bottom: 20px;overflow: hidden;border-radius: var(--block-border-radius-reduced);z-index: 0;}[dir="ltr"] .article-item__arrow {right: 20px;}[dir="rtl"] .article-item__arrow {left: 20px;}.article-item__arrow {position: absolute;bottom: 20px;border: none;opacity: 0;visibility: hidden;transform: scale(0.5);transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out, transform 0.15s ease-in-out;}.article-item--horizontal {display: flex;align-items: center;}.article-item--horizontal .article-item__image-container {border-radius: calc(var(--block-border-radius-reduced) / 2);z-index: 0;}[dir="ltr"] .article-item--horizontal .article-item__arrow {right: 12px;}[dir="rtl"] .article-item--horizontal .article-item__arrow {left: 12px;}.article-item--horizontal .article-item__arrow {bottom: 12px;}[dir="ltr"] .article-item--featured .article-item__arrow {right: 32px;}[dir="rtl"] .article-item--featured .article-item__arrow {left: 32px;}.article-item--featured .article-item__arrow {bottom: 32px;}.article-item__category {color: rgba(var(--text-color), 0.7);width: max-content;}.article-item__excerpt {margin-top: -4px;}.article-list--section .article-item:only-child {max-width: 668px;}@media screen and (max-width: 999px) {.article-list--scrollable .article-item:not(:only-child) {width: 81vw;scroll-snap-align: center;scroll-snap-stop: always;}}@media screen and (min-width: 741px) and (max-width: 999px) {.article-list--has-four {grid-template-columns: repeat(2, 1fr);}.article-list--scrollable .article-item:not(:only-child) {width: 52vw;}}@media screen and (min-width: 741px) {.article-list--stacked {grid-template-columns: repeat(auto-fit, calc(100% / 3 - var(--article-list-column-gap) * (2 / 3)));justify-content: safe center;}}@media screen and (min-width: 1000px) {.article-list {--article-list-row-gap: 48px;--article-list-column-gap: 48px;}.article-list + .pagination {margin-top: 64px;}.article-list--section {grid-template-columns: repeat(auto-fit, calc(100% / 3 - var(--article-list-column-gap) * (2 / 3)));justify-content: safe center;}.article-item__image-container {margin-bottom: 24px;}.article-item__excerpt {margin-top: -8px;}.article-list--collage {grid-template-columns: 1.37731fr 1fr;column-gap: 48px;}.article-item--featured .article-item__image-container {margin-bottom: 32px;}.article-list__secondary-list {display: grid;grid-auto-rows: max-content;grid-row-gap: 48px;row-gap: 48px;}[dir="ltr"] .article-list__secondary-list .article-item__image-container {margin-right: 32px;}[dir="rtl"] .article-list__secondary-list .article-item__image-container {margin-left: 32px;}.article-list__secondary-list .article-item__image-container {width: 42%;flex: none;margin-bottom: 0;}}@media screen and (min-width: 1200px) {.article-list {margin-left: calc(var(--grid-column-width) + var(--grid-gap));margin-right: calc(var(--grid-column-width) + var(--grid-gap));}.article-list--collage {column-gap: 70px;}}@media screen and (pointer: fine) {.article-item:hover .article-item__arrow {visibility: visible;opacity: 1;transform: scale(1);}} /* General */ .checkout-button { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 30px !important; /* Arrotonda gli angoli */ padding: 12px 20px; /* Opzionale: migliora la proporzione */ } [dir="ltr"] .checkout-button__lock { left: 18px; } [dir="rtl"] .checkout-button__lock { right: 18px; } .checkout-button__lock { position: absolute; } [dir="ltr"] .checkout-button .square-separator { margin-left: calc(12px - 0.5 * 2px); margin-right: 12px; } [dir="rtl"] .checkout-button .square-separator { margin-right: calc(12px - 0.5 * 2px); margin-left: 12px; } .checkout-button .square-separator { /* This is a micro adjustment but because of the letter spacing we have to compensate with negative margin */ } @media screen and (min-width: 741px) { [dir="ltr"] .checkout-button__lock { left: 20px; } [dir="rtl"] .checkout-button__lock { right: 20px; } } /* Aggiungi questo blocco nel tuo file CSS (o dentro