English
French
English
:host { /* breakpoints: not-implemented / reference only */ /* --wrapped-breakpoint-xs: 320px; */ /* --wrapped-breakpoint-sm: 490px; */ /* --wrapped-breakpoint-md: 768px; */ /* --wrapped-breakpoint-lg: 1040px; */ /* --wrapped-breakpoint-xl: 1440px; */ --wrapped-thumbnail-position-start: "media gift-dialog-header" "media content" "media gift-dialog-actions"; --wrapped-thumbnail-position-end: "gift-dialog-header media" "content media" "gift-dialog-actions media"; --wrapped-grid-template-areas: var(--wrapped-thumbnail-position-start); /* border radius */ --wrapped-border-radius-scale: 6; --wrapped-border-radius-xs: calc(var(--wrapped-border-radius-scale, 65) / 100 * 1rem); --wrapped-border-radius-sm: calc(var(--wrapped-border-radius-scale, 65) / 100 * 1.5rem); --wrapped-border-radius-base: calc(var(--wrapped-border-radius-scale, 65) / 100 * 2.5rem); --wrapped-dialog-border-surface: rgba(0,0,0,0); --wrapped-border-width: 1px; --wrapped-outline-width: calc(var(--wrapped-border-width) + 0.5px); /* buttons */ --wrapped-hover-style-light: #ffffff; --wrapped-hover-style-dark: #000000; --wrapped-hover-style: var(--wrapped-hover-style-light, --wrapped-hover-style-light); --wrapped-primary-button-surface: #a0a0a0; --wrapped-primary-button-surface--active: color-mix(in srgb, var(--wrapped-primary-button-surface), var(--wrapped-hover-style) 20%); --wrapped-primary-button-surface--hover: color-mix(in srgb, var(--wrapped-primary-button-surface), var(--wrapped-hover-style) 16%); --wrapped-primary-button-text-color: #ffffff; --wrapped-primary-button-text-color--active: color-mix(in srgb, var(--wrapped-primary-button-text-color), var(--wrapped-hover-style) 20%); --wrapped-primary-button-text-color--hover: color-mix(in srgb, var(--wrapped-primary-button-text-color), var(--wrapped-hover-style) 16%); --wrapped-primary-button-border-surface: rgba(0,0,0,0); --wrapped-primary-button-border-surface--active: transparent; --wrapped-primary-button-border-surface--hover: transparent; --wrapped-secondary-button-surface: #0000000f; --wrapped-secondary-button-surface--active: color-mix(in srgb, var(--wrapped-secondary-button-surface), var(--wrapped-hover-style) 20%); --wrapped-secondary-button-surface--hover: color-mix(in srgb, var(--wrapped-secondary-button-surface), var(--wrapped-hover-style) 16%); --wrapped-secondary-button-text-color: #333333; --wrapped-secondary-button-text-color--active: color-mix(in srgb, var(--wrapped-secondary-button-text-color), var(--wrapped-hover-style) 20%); --wrapped-secondary-button-text-color--hover: color-mix(in srgb, var(--wrapped-secondary-button-text-color), var(--wrapped-hover-style) 16%); --wrapped-secondary-button-border-surface: rgba(0,0,0,0); --wrapped-secondary-button-border-surface--active: transparent; --wrapped-secondary-button-border-surface--hover: transparent; /* do not change the root text size */ --wrapped-font-size: 16px; /* text and fonts */ --wrapped-font-family: inherit; --wrapped-font-scale: calc(90 / 100); --wrapped-font-size-sm: clamp(12px, calc(14px * var(--wrapped-font-scale)), 16px); --wrapped-font-size-base: clamp(12px, calc(16px * var(--wrapped-font-scale)), 20px); --wrapped-font-size-lg: clamp(16px, calc(24px * var(--wrapped-font-scale)), 28px); --wrapped-font-weight-base: 400; --wrapped-font-weight-md: 500; --wrapped-font-weight-lg: 600; --wrapped-line-height-base: 1.5em; /* transitions */ --wrapped-transition-duration: 0.1s; --wrapped-spinner-duration: 0.7s; /* disabled */ --wrapped-disabled-opacity-sm: 0.16; --wrapped-disabled-opacity: 0.32; --wrapped-disabled-opacity-md: 0.4; --wrapped-disabled-opacity-lg: 0.64; /* Pre-calculated percentages for color-mix */ --wrapped-disabled-opacity-percent: 32%; --wrapped-disabled-opacity-sm-percent: 16%; --wrapped-disabled-opacity-md-percent: 40%; --wrapped-disabled-opacity-lg-percent: 64%; --wrapped-disabled-cursor: not-allowed; /* form elements */ --wrapped-form-element-surface: #ffffff; --wrapped-form-element-surface--disabled: color-mix(in srgb, var(--wrapped-form-element-surface) var(--wrapped-disabled-opacity-percent), var(--wrapped-secondary-text-color) 8%); --wrapped-form-element-border-color: #000000; --wrapped-form-element-border-color--active: color-mix(in srgb, var(--wrapped-form-element-border-color), white 83%); --wrapped-form-element-border-color--disabled: color-mix(in srgb, var(--wrapped-form-element-border-color) var(--wrapped-disabled-opacity-percent), var(--wrapped-secondary-text-color) 8%); --wrapped-form-element-text-color: #333333; --wrapped-form-element-text-color--disabled: color-mix(in srgb, var(--wrapped-form-element-text-color), var(--wrapped-secondary-text-color) 8%); --wrapped-form-element-placeholder-text-color: color-mix(in srgb, var(--wrapped-form-element-text-color) var(--wrapped-disabled-opacity-percent), transparent); --wrapped-form-element-placeholder-text-color--disabled: color-mix(in srgb, var(--wrapped-form-element-text-color) var(--wrapped-disabled-opacity-percent), var(--wrapped-secondary-text-color) 8%); --wrapped-form-element-selection-color: #000000; --wrapped-form-element-selection-color--active: color-mix(in srgb, var(--wrapped-form-element-selection-color), var(--wrapped-hover-style) 40%); --wrapped-form-element-selection-color--hover: color-mix(in srgb, var(--wrapped-form-element-selection-color), var(--wrapped-hover-style) 32%); /* primary colors */ --wrapped-primary-surface: #ffffff; --wrapped-primary-text-color: #000000; --wrapped-primary-text-color--hover: color-mix(in srgb, var(--wrapped-primary-text-color), var(--wrapped-hover-style) 32%); /* secondary colors */ --wrapped-secondary-surface: #f3f3f3; --wrapped-secondary-text-color: #333333; --wrapped-secondary-text-color--disabled: color-mix(in srgb, var(--wrapped-secondary-text-color) var(--wrapped-disabled-opacity-lg-percent), var(--wrapped-secondary-text-color) 8%); /* spacing */ --wrapped-spacing-scale-base: 1; --wrapped-spacing-scale-less: 0.75; --wrapped-spacing-scale-more: 1.166; --wrapped-spacing-scale: var(--wrapped-spacing-scale-base, 1); --wrapped-spacing-fixed: 4px; --wrapped-spacing-base: clamp(12px, calc(16px * var(--wrapped-spacing-scale)), 24px); --wrapped-spacing-lg: clamp(16px, calc(24px * var(--wrapped-spacing-scale)), 28px); --wrapped-spacing-sm: clamp(8px, calc(12px * var(--wrapped-spacing-scale)), 14px); --wrapped-spacing-xs: clamp(6px, calc(8px * var(--wrapped-spacing-scale)), 10px); /* shadows */ --wrapped-shadow-blur: 1.5rem; --wrapped-shadow-color: rgba(0, 0, 0, 0.25); --wrapped-shadow-offset: 0.75rem; /* default styles */ all: revert; box-sizing: border-box; cursor: default; display: block; font-family: var(--wrapped-font-family); font-size: var(--wrapped-font-size); line-height: var(--wrapped-line-height-base); letter-spacing: normal; margin-block-start: var(--wrapped-spacing-xs); margin-block-end: var(--wrapped-spacing-xs); text-align: start; white-space: normal; } *, *::before, *::after { box-sizing: inherit; } /* gift block launcher */ gift-block-launcher { display: contents; } .gift-block__launcher { background-color: var(--wrapped-primary-button-surface); border-color: var(--wrapped-primary-button-border-surface); border-width: var(--wrapped-border-width); border-radius: var(--wrapped-border-radius-sm); border-style: solid; color: var(--wrapped-primary-button-text-color); padding: var(--wrapped-spacing-sm); font-family: var(--wrapped-font-family); font-size: var(--wrapped-font-size-base); font-weight: var(--wrapped-font-weight-base); width: 100%; &:hover { cursor: pointer; background-color: var(--wrapped-primary-button-surface--hover); border-color: var(--wrapped-primary-button-border-surface--hover); } &:active { background-color: var(--wrapped-primary-button-surface--active); border-color: var(--wrapped-primary-button-border-surface--active); } &:focus, &:focus-visible { outline: none; } &[with-checkmark] { position: relative; display: inline-flex; align-items: center; gap: var(--wrapped-spacing-fixed); & .icon-wrapper { display: flex; flex-shrink: 0; } & .button-content { justify-content: var(--wrapped-launcher-button-content-justify-content, space-between); } &[with-gift-options] { .checkmark-icon { display: block; /* animation: unblur calc(var(--wrapped-transition-duration) * 3) ease forwards; */ } } } &[variant="link"] { background: none; border: none; color: var(--wrapped-primary-text-color); font-size: var(--wrapped-font-size-base); font-weight: var(--wrapped-font-weight-base); padding: 0; text-decoration: none; width: auto; &:hover { cursor: pointer; color: var(--wrapped-primary-text-color--hover); text-decoration: underline; } &[with-checkmark] { padding-left: 0; text-align: start; word-break: keep-all; } & .button-content { flex-direction: row; justify-content: flex-start; } } & .button-content { display: inline-flex; align-items: center; gap: var(--wrapped-spacing-fixed); flex-direction: row-reverse; justify-content: var(--wrapped-launcher-button-content-justify-content, center); width: 100%; & .label { text-align: start; } } & .icon-wrapper { display: none; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; svg { fill: currentColor; height: 100%; width: 100%; } .checkmark-icon { display: none; } } } .gift-block__launcher:disabled, .gift-block__launcher[orders-limit-reached] { cursor: var(--wrapped-disabled-cursor); opacity: var(--wrapped-disabled-opacity); pointer-events: none; &[with-checkmark] { .icon-wrapper { opacity: var(--wrapped-disabled-opacity-md); } } } /* gift block modal */ .gift-block-modal { background-color: var(--wrapped-primary-surface); border: none; border-radius: var(--wrapped-border-radius-base); box-shadow: 0 var(--wrapped-shadow-offset) var(--wrapped-shadow-blur) var(--wrapped-shadow-color); outline: var(--wrapped-border-width) solid var(--wrapped-dialog-border-surface); padding: 0; } .gift-block-modal::backdrop { background-color: rgba(156, 163, 175, 0.75); } .gift-block-modal:focus, .gift-block-modal:focus-visible { outline: var(--wrapped-border-width) solid var(--wrapped-dialog-border-surface); } @media (max-width: 768px) { .gift-block-modal { max-height: calc(100% - var(--wrapped-spacing-sm)); max-width: calc(100% - var(--wrapped-spacing-sm)); overscroll-behavior: contain; } } /* gift block modal layout */ .gift-block-modal-layout { display: grid; grid-template-areas: var(--wrapped-grid-template-areas); grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; max-height: 80dvh; max-width: 80dvw; overflow: hidden; } /* Collapse to 1-column layout if media is hidden */ .gift-block-modal-layout:has(section#media[hidden]), .gift-block-modal-layout:has(section#media.with-media-inline), .gift-block-modal-layout:not(:has(section#media)), .gift-block-modal-layout:not(:has(section#media img)) { grid-template-areas: "gift-dialog-header" "content" "gift-dialog-actions"; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; section#media { display: none; } } gift-dialog-header { align-items: flex-start; background-color: var(--wrapped-primary-surface); display: flex; flex-direction: row; gap: var(--wrapped-spacing-fixed); grid-area: gift-dialog-header; justify-content: space-between; padding: var(--wrapped-spacing-lg); position: sticky; top: 0; z-index: 1; & h1 { color: var(--wrapped-primary-text-color); font-size: var(--wrapped-font-size-lg); font-weight: var(--wrapped-font-weight-md); line-height: 1.25em; margin: 0; } & button { background-color: color-mix(in srgb, var(--wrapped-secondary-text-color) 8%, transparent); color: var(--wrapped-secondary-text-color); border-radius: var(--wrapped-border-radius-xs); font-size: var(--wrapped-font-size-sm); font-weight: var(--wrapped-font-weight-lg); width: 2.25em; height: 2.25em; min-width: 2.25em; min-height: 2.25em; outline: none; border: 0; cursor: pointer; transition: background-color var(--wrapped-transition-duration) ease, color var(--wrapped-transition-duration) ease; &:hover { background-color: color-mix(in srgb, var(--wrapped-secondary-text-color) 6%, var(--wrapped-hover-style) 12%); } &:active { background-color: color-mix(in srgb, var(--wrapped-secondary-text-color) 16%, var(--wrapped-hover-style) 16%); } &:disabled { pointer-events: none; opacity: var(--wrapped-disabled-opacity); } } } gift-dialog-actions { align-items: flex-end; background-color: var(--wrapped-primary-surface); bottom: 0; display: flex; flex-direction: column; gap: var(--wrapped-spacing-sm); grid-area: gift-dialog-actions; overscroll-behavior: contain; position: sticky; padding: var(--wrapped-spacing-lg); z-index: 1; & button { border-radius: var(--wrapped-border-radius-sm); border-width: var(--wrapped-border-width); border-style: solid; cursor: pointer; font-family: var(--wrapped-font-family); font-size: var(--wrapped-font-size-base); font-weight: var(--wrapped-font-weight-md); padding: var(--wrapped-spacing-sm); position: relative; width: 100%; transition: background-color var(--wrapped-transition-duration) ease, border-color var(--wrapped-transition-duration) ease, color var(--wrapped-transition-duration) ease, opacity var(--wrapped-transition-duration) ease; &.primary { background-color: var(--wrapped-primary-button-surface); border-color: var(--wrapped-primary-button-border-surface); color: var(--wrapped-primary-button-text-color); display: flex; align-items: center; justify-content: center; .button-content { display: flex; align-items: center; justify-content: center; width: 100%; } .label { flex: 0 1 auto; min-width: 0; text-align: center; } .label.out-of-stock { display: none; } .icon-wrapper { width: 0em; height: 1.25em; } &:hover { background-color: var(--wrapped-primary-button-surface--hover); border-color: var(--wrapped-primary-button-border-surface--hover); color: var(--wrapped-primary-button-text-color--hover); } &:active { background-color: var(--wrapped-primary-button-surface--active); border-color: var(--wrapped-primary-button-border-surface--active); color: var(--wrapped-primary-button-text-color--active); } &[loading] { background-color: var(--wrapped-primary-button-surface--active); border-color: var(--wrapped-primary-button-border-surface--active); color: var(--wrapped-primary-button-text-color--active); pointer-events: none; .button-content { opacity: 0; } } } &.secondary { background-color: var(--wrapped-secondary-button-surface); border-color: var(--wrapped-secondary-button-border-surface); color: var(--wrapped-secondary-button-text-color); display: flex; align-items: center; justify-content: center; .button-content { display: flex; align-items: center; justify-content: center; gap: var(--wrapped-spacing-fixed); width: 100%; } .label { flex: 0 1 auto; min-width: 0; text-align: center; } .icon-wrapper { --icon-stroke-width: 1.5px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; svg { width: 1.25em; height: 1.25em; stroke-width: var(--icon-stroke-width); } .remove-icon-top, .remove-icon-bottom { transition: transform var(--wrapped-transition-duration) ease-in-out; } } &:hover { background-color: var(--wrapped-secondary-button-surface--hover); border-color: var(--wrapped-secondary-button-border-surface--hover); color: var(--wrapped-secondary-button-text-color--hover); .icon-wrapper { .remove-icon-top { transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg); } .remove-icon-bottom { transform: translateY(var(--icon-stroke-width)); } } } &:active { background-color: var(--wrapped-secondary-button-surface--active); border-color: var(--wrapped-secondary-button-border-surface--active); .icon-wrapper { transition: filter var(--wrapped-transition-duration) ease-in-out; } } &[hidden] { display: none; } &[loading] { background-color: var(--wrapped-secondary-button-surface--active); border-color: var(--wrapped-secondary-button-border-surface--active); color: var(--wrapped-secondary-button-text-color--active); pointer-events: none; .button-content { opacity: 0; } .spinner .svg-wrapper svg { fill: var(--wrapped-secondary-button-text-color--active); } } } &:disabled { cursor: var(--wrapped-disabled-cursor); opacity: var(--wrapped-disabled-opacity); pointer-events: none; .button-content { pointer-events: none; opacity: calc(var(--wrapped-disabled-opacity) * 1.5); } } /* spinner styles */ .spinner { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); & .svg-wrapper svg { animation: spin var(--wrapped-spinner-duration) cubic-bezier(0, 0, 1, 1) infinite; fill: var(--wrapped-primary-button-text-color); height: 1.5em; } & [role="status"] { visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } &[loading] { pointer-events: none; .spinner { opacity: 1; } } } &:has(button[loading]:not([hidden])) { & button { pointer-events: none; opacity: 0.8; } } &:is([out-of-stock]) { & button.primary { pointer-events: none !important; opacity: 0.6 !important; & .label { display: none; } & .label.out-of-stock { display: block; } } } } gift-dialog-content { display: contents; } section#media { align-self: stretch; background-color: var(--wrapped-secondary-surface); grid-area: media; grid-row: 1 / 4; height: 100%; padding: var(--wrapped-spacing-lg); position: sticky; top: 0; transition: order var(--wrapped-transition-duration) ease, width var(--wrapped-transition-duration) ease; &.with-media-cover { & img { height: 100%; } } &.with-media-fill { padding: 0; & img { border-radius: 0; height: 100%; } } & shopify-media { & img { border-radius: var(--wrapped-border-radius-sm); width: 100%; height: auto; } } } section#content { grid-area: content; background-color: var(--wrapped-primary-surface); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding: var(--wrapped-spacing-lg); padding-bottom: 0; padding-top: 0; position: relative; /* important to prevent content shifting when changing variants */ align-items: stretch; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--wrapped-spacing-lg); transition: order var(--wrapped-transition-duration) ease; @media (max-width: 768px) { & > *:first-child:not(:only-child) { margin-top: unset; } } /* gift product details */ & .gift-product { display: flex; flex-direction: column; gap: var(--wrapped-spacing-base); } & .gift-product-header { --wrapped-thumbnail-position-start: row; --wrapped-thumbnail-position-end: row-reverse; align-items: center; display: flex; flex-direction: var(--wrapped-thumbnail-position-start); flex-wrap: wrap; row-gap: var(--wrapped-spacing-base); column-gap: var(--wrapped-spacing-sm); } & .gift-product-content { display: flex; flex: 1 1 50%; flex-direction: column; gap: var(--wrapped-spacing-xs); } & .gift-product-media { display: flex; align-items: center; &:has(shopify-media) { --wrapped-inline-media-max-size: 75px; --wrapped-inline-media-size: clamp(40px, 75px, var(--wrapped-inline-media-max-size)); border-radius: var(--wrapped-border-radius-sm); height: var(--wrapped-inline-media-size); width: var(--wrapped-inline-media-size); overflow: hidden; margin-inline-start: auto; margin-inline-end: auto; } & shopify-media { & img { border-radius: var(--wrapped-border-radius-sm); width: 100%; height: auto; } } } & .gift-product-title { color: var(--wrapped-primary-text-color); font-size: var(--wrapped-font-size-base); font-weight: var(--wrapped-font-weight-md); margin: 0; } & .gift-product-pricing { display: flex; gap: var(--wrapped-spacing-xs); margin: 0; font-weight: var(--wrapped-font-weight-base); /* font-size: var(--wrapped-font-size-base); */ font-size: clamp(12px, calc(var(--wrapped-font-size-base) * 0.94), 18px); line-height: 1em; } & .gift-product-price { color: var(--wrapped-secondary-text-color); } & .gift-product-price--compare { color: var(--wrapped-secondary-text-color); text-decoration: line-through; opacity: var(--wrapped-disabled-opacity); } & .gift-product-description { font-weight: var(--wrapped-font-weight-base); color: var(--wrapped-secondary-text-color); font-size: clamp(12px, calc(var(--wrapped-font-size-base) * 0.94), 18px); line-height: 1.5em; & shopify-data { & :first-child { margin-top: 0; } & :last-child { margin-bottom: 0; } & ul { padding-left: var(--wrapped-spacing-lg); } } } /* gift messaging fields */ & gift-dialog-message { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--wrapped-spacing-base); } & .option-group { display: flex; flex-direction: column; gap: var(--wrapped-spacing-xs); flex: 0 0 100%; @media (min-width: 768px) { &:has(input[id="receiver-input"]), &:has(input[id="sender-input"]) { flex: 1 1 0%; } } &.option-group-disabled { cursor: var(--wrapped-disabled-cursor); pointer-events: none; opacity: var(--wrapped-disabled-opacity-md); transition: background-color var(--wrapped-transition-duration) ease, color var(--wrapped-transition-duration) ease; & .message-field { background-color: var(--wrapped-form-element-surface--disabled); color: transparent; outline-color: var(--wrapped-form-element-border-color--disabled); pointer-events: none; } } &.option-group-hidden { display: none; } & label { font-size: var(--wrapped-font-size-sm); font-weight: var(--wrapped-font-weight-base); color: var(--wrapped-secondary-text-color); line-height: 1em; } & .message-field { background-color: var(--wrapped-form-element-surface); color: var(--wrapped-form-element-text-color); width: 100%; padding: var(--wrapped-spacing-sm); border: none; border-radius: var(--wrapped-border-radius-sm); font-family: var(--wrapped-font-family); font-size: var(--wrapped-font-size-base); outline: var(--wrapped-border-width) solid var(--wrapped-form-element-border-color); min-height: 42px; } & .message-field:active, & .message-field:focus, & .message-field:focus-within, & .message-field:focus-visible { outline-color: var(--wrapped-form-element-selection-color); outline-width: var(--wrapped-outline-width); /* UX verification needed &::placeholder { color: transparent; } */ } & .message-field::placeholder { color: var(--wrapped-form-element-placeholder-text-color); } & textarea.message-field { min-height: 100px; resize: vertical; } & .counter { color: var(--wrapped-secondary-text-color); font-size: var(--wrapped-font-size-sm); line-height: normal; } } } /* shopify variant selector */ shopify-variant-selector { font-size: var(--wrapped-font-size-sm); width: 100%; } shopify-variant-selector::part(form) { gap: var(--wrapped-spacing-base); } shopify-variant-selector::part(radio) { background-color: var(--wrapped-form-element-surface); color: var(--wrapped-form-element-text-color); border: none; border-radius: var(--wrapped-border-radius-sm); font-size: var(--wrapped-font-size-base); font-weight: var(--wrapped-font-weight-base); outline: var(--wrapped-border-width) solid var(--wrapped-form-element-border-color); padding: calc(var(--wrapped-spacing-sm) * 0.5) var(--wrapped-spacing-base); transition: color var(--wrapped-transition-duration) ease, outline-color var(--wrapped-transition-duration) ease, outline-width var(--wrapped-transition-duration) ease; } shopify-variant-selector::part(radio):active { outline-color: var(--wrapped-form-element-selection-color--active); outline-width: var(--wrapped-outline-width); } shopify-variant-selector::part(radio):hover { outline-color: var(--wrapped-form-element-selection-color--hover); } shopify-variant-selector::part(radio-disabled) { background-color: var(--wrapped-form-element-surface--disabled); color: var(--wrapped-form-element-text-color--disabled); opacity: var(--wrapped-disabled-opacity-md); /* do not transition opacity - it causes a flash when changing variants */ outline-color: var(--wrapped-form-element-border-color--disabled); pointer-events: none; } shopify-variant-selector::part(radio-selected) { outline-color: var(--wrapped-form-element-selection-color); outline-width: var(--wrapped-outline-width); pointer-events: none; } shopify-variant-selector::part(select) { color: var(--wrapped-form-element-text-color); border: none; border-radius: var(--wrapped-border-radius-sm); font-family: var(--wrapped-font-family); font-size: var(--wrapped-font-size-base); font-weight: var(--wrapped-font-weight-base); margin-top: var(--wrapped-spacing-xs); width: 100%; max-width: 100%; padding: var(--wrapped-spacing-sm); padding-right: calc(var(--wrapped-spacing-sm) + 1.5rem); outline: var(--wrapped-border-width) solid var(--wrapped-form-element-border-color); appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--wrapped-form-element-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M6.24 8.2a.75.75 0 0 1 1.06.04l2.7 2.908 2.7-2.908a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0l-3.25-3.5a.75.75 0 0 1 .04-1.06Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1em 1em; } shopify-variant-selector::part(select):focus, shopify-variant-selector::part(select):focus-visible { outline-color: var(--wrapped-form-element-selection-color); outline-width: var(--wrapped-outline-width); } shopify-variant-selector::part(color-swatch) { border: none; outline: var(--wrapped-border-width) solid rgba(0, 0, 0, .1); transition: color var(--wrapped-transition-duration) ease, outline-color var(--wrapped-transition-duration) ease, outline-width var(--wrapped-transition-duration) ease; } shopify-variant-selector::part(color-swatch):active { outline-color: var(--wrapped-form-element-selection-color--active); outline-width: var(--wrapped-outline-width); } shopify-variant-selector::part(color-swatch):hover { outline-color: var(--wrapped-form-element-selection-color--hover); } shopify-variant-selector::part(color-swatch-selected) { outline-color: var(--wrapped-form-element-selection-color); outline-width: var(--wrapped-outline-width); } shopify-variant-selector::part(color-swatch-selected):after { content: unset; } shopify-variant-selector::part(color-swatch-label) { color: var(--wrapped-secondary-text-color); } shopify-variant-selector::part(color-swatch-disabled) { opacity: var(--wrapped-disabled-opacity); /* do not transition opacity - it causes a flash when changing variants */ pointer-events: none; } shopify-variant-selector::part(label) { color: var(--wrapped-secondary-text-color); display: inline-block; font-size: var(--wrapped-font-size-sm); font-weight: var(--wrapped-font-weight-base); line-height: 1em; margin-bottom: calc(var(--wrapped-spacing-sm) - 6px); } /* media queries */ /* md - and above */ @media (min-width: 768px) { :host { --wrapped-section-max-width: 420px; } gift-dialog-content > section { min-width: var(--wrapped-section-max-width); max-width: var(--wrapped-section-max-width); } gift-dialog-header, gift-dialog-actions { min-width: var(--wrapped-section-max-width); max-width: var(--wrapped-section-max-width); } } /* md - and below */ @media (max-width: 768px) { :host { --wrapped-section-max-width: 390px; } gift-dialog-content > section { min-width: var(--wrapped-section-max-width); max-width: var(--wrapped-section-max-width); } gift-dialog-header, gift-dialog-actions { min-width: var(--wrapped-section-max-width); max-width: var(--wrapped-section-max-width); padding: var(--wrapped-spacing-base); } .gift-block-modal-layout { grid-template-areas: "gift-dialog-header" "media" "content" "gift-dialog-actions"; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; max-height: calc(100dvh - var(--wrapped-spacing-base)); max-width: 100dvw; } gift-dialog-content { display: grid; grid-template-areas: "media" "content"; grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } section#media { background: none; grid-row: auto; position: relative; padding: 0; & shopify-media { & img { border-radius: unset; min-height: var(--wrapped-section-max-width); max-height: var(--wrapped-section-max-width); } } } section#content { overflow-y: unset; padding: var(--wrapped-spacing-base); &.with-media-inline { padding-top: 0; } & .gift-product-media { &:has(shopify-media) { --wrapped-inline-media-max-size: 330px; } } } } /* sm - and below */ @media (max-width: 480px) { :host { --wrapped-section-max-width: 100%; } section#media { & shopify-media { & img { border-radius: unset; min-height: 350px; max-height: 350px; } } } } /* animations for loaders */ @keyframes spin { 100% { transform: rotate(1turn); } } @keyframes unblur { from { filter: blur(2px); } to { filter: blur(0px); } }
A free pair of mini earrings for orders over €80 • Free delivery for orders over €80
L'Atelier de Solène
Our Jewels
RINGS
All our rings
To be engraved
Thin
Thick
Adjustable
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
EARRINGS
All our earrings
Hoops
XL
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Dangling
Studs
Earcuffs
Single
BRACELETS
All our bracelets
To be engraved
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Double
Bangles
NECKLACES
All our necklaces
To be engraved
Chokers
Medium-Length
Long necklaces
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Double
MEDALS & CHARMS
All our medals and charms
Medals
Charms
Chains
Our Collections
Our collections
Les Minis
Ingrid & Henriette
Signature
Wedding
Private Sales
Engraving
Gift Card
Brand universe
Our founder
Our know-how
Our values
Our commitments
Magazine
Our store
Help
Care instructions
Frequently asked questions
Order tracking
Size guide
Contact us
Sign in
We've sent you an email with a link to update your password.
Email*
Password*
Lost your password ?
Create your account
Reset your password
We will send you an email to reset your password.
Password*
Cancel
Cart
0
item
€0,00
Cart
0
item
€0,00
Home
Shop
Account
Wishlist
Our Jewels
Our Jewels
All our jewels
Rings
Rings
All our rings
To be engraved
Thin
Thick
Adjustable
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Bracelets
Bracelets
All our bracelets
To be engraved
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Double
Bangles
Necklaces
Necklaces
All our necklaces
To be engraved
Chokers
Medium-Length
Long necklaces
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Double
Earrings
Earrings
All our earrings
Hoops
XL
Zircon
Mother-of-pearl & freshwater pearls
Colorful
Without stone
Dangling
Studs
Earcuffs
Single
Medals & Charms
Medals & Charms
Medals
Charms
Chains
Our Collections
Our Collections
Les Minis
Ingrid & Henriette
Signature
Wedding
Private Sales
Engraving
Gift Card
Brand Universe
Brand Universe
Our founder
Our know-how
Our values
Our commitments
Magazine
Our store
Help
Help
Care instructions
Frequently asked questions
Order tracking
Size guide
Contact us
All our necklaces
Home
Products
All our necklaces
Featured
Best selling
Alphabetically, A-Z
Alphabetically, Z-A
Price, low to high
Price, high to low
Date, old to new
Date, new to old
Sort
Clear all filter
Close
Category
Reset
Necklaces
161
Availability
Reset
In stock
153
Out of stock
9
Price
Price :
€0,00
—
€120,00
Filter
Loading
Loading
Add to Cart
Morgane Necklace - White
€59,00
Loading
Loading
- 29%
Add to Cart
Angélique Necklace - Red - Pink
€55,00
€39,00
Loading
Loading
Add to Cart
Prune Necklace - Old Pink
€60,00
Loading
Loading
Add to Cart
Danielle Necklace
€68,00
Loading
Loading
Add to Cart
Honorine Necklace
€79,00
Loading
Loading
Add to Cart
Lorraine Necklace - White
€75,00
Loading
Loading
Add to Cart
Lorraine Necklace - Tourmaline
€75,00
Loading
Loading
Add to Cart
Perrine Necklace
€70,00
Loading
Loading
Add to Cart
Constelée Necklace
€58,00
Loading
Loading
Add to Cart
Destiny Necklace
€58,00
Loading
Loading
Add to Cart
Stella Necklace
€58,00
Loading
Loading
Add to Cart
Ange Necklace - Personnalisable
€68,00
Loading
Loading
Add to Cart
Angie Necklace - Personalized
€68,00
Loading
Loading
Add to Cart
Barbara Necklace - Personalized
€62,00
Loading
Loading
Add to Cart
Capucine Necklace - Gold Plated - Personalized
€69,00
Loading
Loading
Add to Cart
Capucine Necklace - Old Pink - Personalized
€69,00
Loading
Loading
Add to Cart
Célia Necklace - Large Model - Personalized
€70,00
Loading
Loading
Out of stock
Célia Necklace - Small Model - Personalized
€65,00
Loading
Loading
Add to Cart
Gladys Necklace - Personalized
€68,00
Loading
Loading
Add to Cart
Lila Necklace - Personalized
€68,00
Loading
Loading
- 37%
Add to Cart
Alban Necklace - Old Pink
€62,00
€39,00
Loading
Loading
Add to Cart
Blair Necklace
€65,00
Loading
Loading
- 30%
Add to Cart
Freja Necklace - Rust - 45/50 cm
€55,00
€38,00
Loading
Loading
- 30%
Add to Cart
Freja Necklace - Azure Blue - 45/50 cm
€55,00
€38,00
You've viewed 120 of 161 products
×
