.social-media-share { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; } .social-media-share__label { display: inline-flex; align-items: center; } .social-media-share__icon { width: 24px; height: 24px; } .social-media-share__media { display: flex; gap: 4px; align-items: center; transition: opacity 0.2s, transform 0.2s; } .social-media-share__media:hover { transform: scale(1.1); } .social-media-share__more { display: flex; align-items: center; } .social-media-share__more-button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; color: rgb(var(--color-text)); cursor: pointer; background-color: rgb(0 0 0 / 5%); border: none; border-radius: 50%; outline: none; } .social-media-share__more-button .icon { transition: transform 0.2s; transform: rotate(0deg); } .social-media-share__more[open] .social-media-share__more-button .icon { transform: rotate(180deg); } .social-media-share__more-content { display: flex; flex-direction: column; gap: 10px; padding: 10px; background-color: rgb(var(--color-background, var(--color-page-background))); } /* Product page: the visible row */ .social-media-share--product { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: auto; gap: 13px; } .social-media-share--product .social-media-share__label { margin-inline-end: 2px; color: rgba(var(--color-text), 0.62); font-family: "Figtree", Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 20px; white-space: nowrap; } .social-media-share--product>.social-media-share__media { display: inline-flex; flex: 0 0 17px; align-items: center; justify-content: center; width: 17px; height: 17px; gap: 0; color: rgba(var(--color-text), 0.67); } .social-media-share--product>.social-media-share__media:hover { opacity: 0.72; transform: none; } .social-media-share--product>.social-media-share__media>span { display: none; } .social-media-share--product>.social-media-share__media .social-media-share__icon { width: 17px; height: 17px; } .social-media-share--product>.social-media-share__more { flex: 0 0 18px; width: 18px; height: 18px; } .social-media-share--product>.social-media-share__more>.social-media-share__more-button { width: 18px; height: 18px; padding: 0; color: rgba(var(--color-text), 0.67); background: transparent; border: 0; border-radius: 0; } .social-media-share--product>.social-media-share__more>.social-media-share__more-button:hover { opacity: 0.72; } .social-media-share--product>.social-media-share__more>.social-media-share__more-button .icon { width: 18px; height: 18px; transform: none; } .social-media-share--product>.social-media-share__more[open]>.social-media-share__more-button .icon { transform: none; } /* Product page: the popover. This class stays on the popover even when SHOPLINE moves it under . */ .social-media-share__more-content--product { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 190px !important; min-width: 190px !important; max-width: 220px !important; gap: 12px !important; padding: 14px !important; white-space: nowrap !important; text-align: left !important; background-color: rgb(var(--color-background, var(--color-page-background))) !important; } .social-media-share__more-content--product .social-media-share__media { display: flex !important; flex: none !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: auto !important; min-height: 22px !important; gap: 10px !important; padding: 0 !important; color: rgba(var(--color-text), 0.75) !important; font-family: "Figtree", Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; text-decoration: none !important; transform: none !important; } .social-media-share__more-content--product .social-media-share__media:hover { opacity: 0.72; transform: none !important; } .social-media-share__more-content--product .social-media-share__media>span { display: inline-block !important; flex: none !important; width: auto !important; height: auto !important; font-family: "Figtree", Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .social-media-share__more-content--product .social-media-share__icon { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; }