×
: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; */ /* used as theme editor setting values - do not change var names */ --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"; --local-grid-template-areas: var(--wrapped-thumbnail-position-start); /* border radius */ --local-border-radius-scale: 6; --local-border-radius-xs: calc(var(--local-border-radius-scale, 65) / 100 * 1rem); --local-border-radius-sm: calc(var(--local-border-radius-scale, 65) / 100 * 1.5rem); --local-border-radius-base: calc(var(--local-border-radius-scale, 65) / 100 * 2.5rem); --local-dialog-border-surface: rgba(0,0,0,0); --local-border-width: 1px; --local-outline-width: calc(var(--local-border-width) + 0.5px); /* buttons */ /* used as theme editor setting values - do not change var names */ --wrapped-hover-style-light: #ffffff; --wrapped-hover-style-dark: #000000; --local-hover-style: var(--wrapped-hover-style-light, --wrapped-hover-style-light); --local-primary-button-surface: #a0a0a0; --local-primary-button-surface--active: color-mix(in srgb, var(--local-primary-button-surface), var(--local-hover-style) 20%); --local-primary-button-surface--hover: color-mix(in srgb, var(--local-primary-button-surface), var(--local-hover-style) 16%); --local-primary-button-text-color: #ffffff; --local-primary-button-text-color--active: color-mix(in srgb, var(--local-primary-button-text-color), var(--local-hover-style) 20%); --local-primary-button-text-color--hover: color-mix(in srgb, var(--local-primary-button-text-color), var(--local-hover-style) 16%); --local-primary-button-border-surface: rgba(0,0,0,0); --local-primary-button-border-surface--active: transparent; --local-primary-button-border-surface--hover: transparent; --local-secondary-button-surface: #0000000f; --local-secondary-button-surface--active: color-mix(in srgb, var(--local-secondary-button-surface), var(--local-hover-style) 20%); --local-secondary-button-surface--hover: color-mix(in srgb, var(--local-secondary-button-surface), var(--local-hover-style) 16%); --local-secondary-button-text-color: #333333; --local-secondary-button-text-color--active: color-mix(in srgb, var(--local-secondary-button-text-color), var(--local-hover-style) 20%); --local-secondary-button-text-color--hover: color-mix(in srgb, var(--local-secondary-button-text-color), var(--local-hover-style) 16%); --local-secondary-button-border-surface: rgba(0,0,0,0); --local-secondary-button-border-surface--active: transparent; --local-secondary-button-border-surface--hover: transparent; /* do not change the root text size */ --local-font-size: 16px; /* text and fonts */ --local-font-family: inherit; --local-font-scale: calc(90 / 100); --local-font-size-sm: clamp(12px, calc(14px * var(--local-font-scale)), 16px); --local-font-size-base: clamp(12px, calc(16px * var(--local-font-scale)), 20px); --local-font-size-lg: clamp(16px, calc(24px * var(--local-font-scale)), 28px); --local-font-weight-base: var(--wrapped-font-weight-base, 400); --local-font-weight-md: 500; --local-font-weight-lg: 600; --local-letter-spacing: var(--wrapped-letter-spacing, normal); --local-line-height-base: 1.5em; /* transitions */ --local-transition-duration: 0.1s; --local-spinner-duration: 0.7s; /* disabled */ --local-disabled-opacity-sm: 0.16; --local-disabled-opacity: 0.32; --local-disabled-opacity-md: 0.4; --local-disabled-opacity-lg: 0.64; /* Pre-calculated percentages for color-mix */ --local-disabled-opacity-percent: 32%; --local-disabled-opacity-sm-percent: 16%; --local-disabled-opacity-md-percent: 40%; --local-disabled-opacity-lg-percent: 64%; --local-disabled-cursor: not-allowed; /* form elements */ --local-form-element-surface: #ffffff; --local-form-element-surface--disabled: color-mix(in srgb, var(--local-form-element-surface) var(--local-disabled-opacity-percent), var(--local-secondary-text-color) 8%); --local-form-element-border-color: #000000; --local-form-element-border-color--active: color-mix(in srgb, var(--local-form-element-border-color), white 83%); --local-form-element-border-color--disabled: color-mix(in srgb, var(--local-form-element-border-color) var(--local-disabled-opacity-percent), var(--local-secondary-text-color) 8%); --local-form-element-text-color: #333333; --local-form-element-text-color--disabled: color-mix(in srgb, var(--local-form-element-text-color), var(--local-secondary-text-color) 8%); --local-form-element-placeholder-text-color: color-mix(in srgb, var(--local-form-element-text-color) var(--local-disabled-opacity-percent), transparent); --local-form-element-placeholder-text-color--disabled: color-mix(in srgb, var(--local-form-element-text-color) var(--local-disabled-opacity-percent), var(--local-secondary-text-color) 8%); --local-form-element-selection-color: #000000; --local-form-element-selection-color--active: color-mix(in srgb, var(--local-form-element-selection-color), var(--local-hover-style) 40%); --local-form-element-selection-color--hover: color-mix(in srgb, var(--local-form-element-selection-color), var(--local-hover-style) 32%); /* primary colors */ --local-primary-surface: #ffffff; --local-primary-text-color: #000000; --local-primary-text-color--hover: color-mix(in srgb, var(--local-primary-text-color), var(--local-hover-style) 32%); /* secondary colors */ --local-secondary-surface: #f3f3f3; --local-secondary-text-color: #333333; --local-secondary-text-color--disabled: color-mix(in srgb, var(--local-secondary-text-color) var(--local-disabled-opacity-lg-percent), var(--local-secondary-text-color) 8%); /* Typography customizations */ --local-button-text-transform: var(--wrapped-button-text-transform, none); --local-button-letter-spacing: var(--wrapped-button-letter-spacing, var(--local-letter-spacing, normal)); --local-button-font-style: var(--wrapped-button-font-style, normal); /* spacing */ /* used as theme editor setting values - do not change var names */ --wrapped-spacing-scale-base: 1; --wrapped-spacing-scale-less: 0.75; --wrapped-spacing-scale-more: 1.166; --local-spacing-scale: var(--wrapped-spacing-scale-base, 1); --local-spacing-fixed: 4px; --local-spacing-base: clamp(12px, calc(16px * var(--local-spacing-scale)), 24px); --local-spacing-lg: clamp(16px, calc(24px * var(--local-spacing-scale)), 28px); --local-spacing-sm: clamp(8px, calc(12px * var(--local-spacing-scale)), 14px); --local-spacing-xs: clamp(6px, calc(8px * var(--local-spacing-scale)), 10px); /* shadows */ --local-shadow-blur: 1.5rem; --local-shadow-color: rgba(0, 0, 0, 0.25); --local-shadow-offset: 0.75rem; /* default styles */ all: revert; box-sizing: border-box; cursor: default; display: block; font-family: var(--local-font-family); font-size: var(--local-font-size); line-height: var(--local-line-height-base); letter-spacing: var(--local-letter-spacing); margin-block-start: var(--local-spacing-xs); margin-block-end: var(--local-spacing-xs); text-align: start; width: -webkit-fill-available; white-space: normal; } *, *::before, *::after { box-sizing: inherit; } /* gift block launcher */ gift-block-launcher { display: flex; flex-direction: column; gap: var(--local-spacing-xs); & gift-block-visibility-notice { display: block; font-family: var(--local-font-family); font-size: smaller; font-weight: var(--local-font-weight-base); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); padding: 0 var(--local-spacing-sm); text-transform: var(--local-button-text-transform); width: 100%; } } .gift-block__launcher { background-color: var(--local-primary-button-surface); border-color: var(--local-primary-button-border-surface); border-width: var(--local-border-width); border-radius: var(--local-border-radius-sm); border-style: solid; color: var(--local-primary-button-text-color); padding: var(--local-spacing-sm); font-family: var(--local-font-family); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-base); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); max-width: var(--wrapped-launcher-button-max-width, 440px); text-transform: var(--local-button-text-transform); width: 100%; &:hover { cursor: pointer; background-color: var(--local-primary-button-surface--hover); border-color: var(--local-primary-button-border-surface--hover); } &:active { background-color: var(--local-primary-button-surface--active); border-color: var(--local-primary-button-border-surface--active); } &:focus, &:focus-visible { outline: none; } &[with-checkmark] { position: relative; display: inline-flex; align-items: center; gap: var(--local-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(--local-transition-duration) * 3) ease forwards; */ } } } &[variant="link"] { background: none; border: none; color: var(--local-primary-text-color); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-base); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); text-transform: var(--local-button-text-transform); text-decoration: none; padding: 0; width: auto; &:hover { cursor: pointer; color: var(--local-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(--local-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(--local-disabled-cursor); opacity: var(--local-disabled-opacity); pointer-events: none; &[with-checkmark] { .icon-wrapper { opacity: var(--local-disabled-opacity-md); } } } /* gift block modal */ .gift-block-modal { background-color: var(--local-primary-surface); border: none; border-radius: var(--local-border-radius-base); box-shadow: 0 var(--local-shadow-offset) var(--local-shadow-blur) var(--local-shadow-color); outline: var(--local-border-width) solid var(--local-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(--local-border-width) solid var(--local-dialog-border-surface); } @media (max-width: 768px) { .gift-block-modal { max-height: calc(100% - var(--local-spacing-sm)); max-width: calc(100% - var(--local-spacing-sm)); overscroll-behavior: contain; } } /* gift block modal layout */ .gift-block-modal-layout { display: grid; grid-template-areas: var(--local-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(--local-primary-surface); display: flex; flex-direction: row; gap: var(--local-spacing-fixed); grid-area: gift-dialog-header; justify-content: space-between; padding: var(--local-spacing-lg); position: sticky; top: 0; z-index: 1; & h1 { color: var(--local-primary-text-color); font-size: var(--local-font-size-lg); font-weight: var(--local-font-weight-md); line-height: 1.25em; margin: 0; } & button { background-color: color-mix(in srgb, var(--local-secondary-text-color) 8%, transparent); color: var(--local-secondary-text-color); border-radius: var(--local-border-radius-xs); font-size: var(--local-font-size-sm); font-weight: var(--local-font-weight-lg); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); text-transform: var(--local-button-text-transform); width: 2.25em; height: 2.25em; min-width: 2.25em; min-height: 2.25em; outline: none; border: 0; cursor: pointer; transition: background-color var(--local-transition-duration) ease, color var(--local-transition-duration) ease; &:hover { background-color: color-mix(in srgb, var(--local-secondary-text-color) 6%, var(--local-hover-style) 12%); } &:active { background-color: color-mix(in srgb, var(--local-secondary-text-color) 16%, var(--local-hover-style) 16%); } &:disabled { pointer-events: none; opacity: var(--local-disabled-opacity); } } } gift-dialog-actions { align-items: flex-end; background-color: var(--local-primary-surface); bottom: 0; display: flex; flex-direction: column; gap: var(--local-spacing-sm); grid-area: gift-dialog-actions; overscroll-behavior: contain; position: sticky; padding: var(--local-spacing-lg); z-index: 1; & button { border-radius: var(--local-border-radius-sm); border-width: var(--local-border-width); border-style: solid; cursor: pointer; font-family: var(--local-font-family); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-md); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); text-transform: var(--local-button-text-transform); padding: var(--local-spacing-sm); position: relative; width: 100%; transition: background-color var(--local-transition-duration) ease, border-color var(--local-transition-duration) ease, color var(--local-transition-duration) ease, opacity var(--local-transition-duration) ease; &.primary { background-color: var(--local-primary-button-surface); border-color: var(--local-primary-button-border-surface); color: var(--local-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(--local-primary-button-surface--hover); border-color: var(--local-primary-button-border-surface--hover); color: var(--local-primary-button-text-color--hover); } &:active { background-color: var(--local-primary-button-surface--active); border-color: var(--local-primary-button-border-surface--active); color: var(--local-primary-button-text-color--active); } &[loading] { background-color: var(--local-primary-button-surface--active); border-color: var(--local-primary-button-border-surface--active); color: var(--local-primary-button-text-color--active); pointer-events: none; .button-content { opacity: 0; } } } &.secondary { background-color: var(--local-secondary-button-surface); border-color: var(--local-secondary-button-border-surface); color: var(--local-secondary-button-text-color); display: flex; align-items: center; justify-content: center; .button-content { display: flex; align-items: center; justify-content: center; gap: var(--local-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(--local-transition-duration) ease-in-out; } } &:hover { background-color: var(--local-secondary-button-surface--hover); border-color: var(--local-secondary-button-border-surface--hover); color: var(--local-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(--local-secondary-button-surface--active); border-color: var(--local-secondary-button-border-surface--active); .icon-wrapper { transition: filter var(--local-transition-duration) ease-in-out; } } &[hidden] { display: none; } &[loading] { background-color: var(--local-secondary-button-surface--active); border-color: var(--local-secondary-button-border-surface--active); color: var(--local-secondary-button-text-color--active); pointer-events: none; .button-content { opacity: 0; } .spinner .svg-wrapper svg { fill: var(--local-secondary-button-text-color--active); } } } &:disabled { cursor: var(--local-disabled-cursor); opacity: var(--local-disabled-opacity); pointer-events: none; .button-content { pointer-events: none; opacity: calc(var(--local-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(--local-spinner-duration) cubic-bezier(0, 0, 1, 1) infinite; fill: var(--local-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(--local-secondary-surface); grid-area: media; grid-row: 1 / 4; height: 100%; padding: var(--local-spacing-lg); position: sticky; top: 0; transition: order var(--local-transition-duration) ease, width var(--local-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(--local-border-radius-sm); width: 100%; height: auto; } } } section#content { grid-area: content; background-color: var(--local-primary-surface); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding: var(--local-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(--local-spacing-lg); transition: order var(--local-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(--local-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(--local-spacing-base); column-gap: var(--local-spacing-sm); } & .gift-product-content { display: flex; flex: 1 1 50%; flex-direction: column; gap: var(--local-spacing-xs); } & .gift-product-media { display: flex; align-items: center; &:has(shopify-media) { --local-inline-media-max-size: 75px; --local-inline-media-size: clamp(40px, 75px, var(--local-inline-media-max-size)); border-radius: var(--local-border-radius-sm); height: var(--local-inline-media-size); width: var(--local-inline-media-size); overflow: hidden; margin-inline-start: auto; margin-inline-end: auto; } & shopify-media { & img { border-radius: var(--local-border-radius-sm); width: 100%; height: auto; } } } & .gift-product-title { color: var(--local-primary-text-color); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-md); margin: 0; } & .gift-product-pricing { display: flex; gap: var(--local-spacing-xs); margin: 0; font-weight: var(--local-font-weight-base); /* font-size: var(--local-font-size-base); */ font-size: clamp(12px, calc(var(--local-font-size-base) * 0.94), 18px); line-height: 1em; } & .gift-product-price { color: var(--local-secondary-text-color); } & .gift-product-price--compare { color: var(--local-secondary-text-color); text-decoration: line-through; opacity: var(--local-disabled-opacity); } & .gift-product-description { font-weight: var(--local-font-weight-base); color: var(--local-secondary-text-color); font-size: clamp(12px, calc(var(--local-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(--local-spacing-lg); } } } /* gift messaging fields */ & gift-dialog-message { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--local-spacing-base); } & .option-group { display: flex; flex-direction: column; gap: var(--local-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(--local-disabled-cursor); pointer-events: none; opacity: var(--local-disabled-opacity-md); transition: background-color var(--local-transition-duration) ease, color var(--local-transition-duration) ease; & .message-field { background-color: var(--local-form-element-surface--disabled); color: transparent; outline-color: var(--local-form-element-border-color--disabled); pointer-events: none; } } &.option-group-hidden { display: none; } & label { font-size: var(--local-font-size-sm); font-weight: var(--local-font-weight-base); color: var(--local-secondary-text-color); line-height: 1em; } & .message-field { background-color: var(--local-form-element-surface); color: var(--local-form-element-text-color); width: 100%; padding: var(--local-spacing-sm); border: none; border-radius: var(--local-border-radius-sm); font-family: var(--local-font-family); font-size: var(--local-font-size-base); outline: var(--local-border-width) solid var(--local-form-element-border-color); min-height: 42px; } & .message-field:active, & .message-field:focus, & .message-field:focus-within, & .message-field:focus-visible { outline-color: var(--local-form-element-selection-color); outline-width: var(--local-outline-width); /* UX verification needed &::placeholder { color: transparent; } */ } & .message-field::placeholder { color: var(--local-form-element-placeholder-text-color); } & textarea.message-field { min-height: 100px; resize: vertical; } & .counter { color: var(--local-secondary-text-color); font-size: var(--local-font-size-sm); line-height: normal; } } } /* shopify variant selector */ shopify-variant-selector { font-size: var(--local-font-size-sm); width: 100%; } shopify-variant-selector::part(form) { gap: var(--local-spacing-base); } shopify-variant-selector::part(radio) { background-color: var(--local-form-element-surface); color: var(--local-form-element-text-color); border: none; border-radius: var(--local-border-radius-sm); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-base); outline: var(--local-border-width) solid var(--local-form-element-border-color); padding: calc(var(--local-spacing-sm) * 0.5) var(--local-spacing-base); transition: color var(--local-transition-duration) ease, outline-color var(--local-transition-duration) ease, outline-width var(--local-transition-duration) ease; } shopify-variant-selector::part(radio):active { outline-color: var(--local-form-element-selection-color--active); outline-width: var(--local-outline-width); } shopify-variant-selector::part(radio):hover { outline-color: var(--local-form-element-selection-color--hover); } shopify-variant-selector::part(radio-disabled) { background-color: var(--local-form-element-surface--disabled); color: var(--local-form-element-text-color--disabled); opacity: var(--local-disabled-opacity); /* do not transition opacity - it causes a flash when changing variants */ outline-color: var(--local-form-element-border-color--disabled); pointer-events: none; } shopify-variant-selector::part(radio-selected) { outline-color: var(--local-form-element-selection-color); outline-width: var(--local-outline-width); pointer-events: none; } shopify-variant-selector::part(select) { color: var(--local-form-element-text-color); border: none; border-radius: var(--local-border-radius-sm); font-family: var(--local-font-family); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-base); margin-top: var(--local-spacing-xs); width: 100%; max-width: 100%; padding: var(--local-spacing-sm); padding-right: calc(var(--local-spacing-sm) + 1.5rem); outline: var(--local-border-width) solid var(--local-form-element-border-color); appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--local-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(--local-form-element-selection-color); outline-width: var(--local-outline-width); } shopify-variant-selector::part(color-swatch) { border: none; outline: var(--local-border-width) solid rgba(0, 0, 0, .1); transition: color var(--local-transition-duration) ease, outline-color var(--local-transition-duration) ease, outline-width var(--local-transition-duration) ease; } shopify-variant-selector::part(color-swatch):active { outline-color: var(--local-form-element-selection-color--active); outline-width: var(--local-outline-width); } shopify-variant-selector::part(color-swatch):hover { outline-color: var(--local-form-element-selection-color--hover); } shopify-variant-selector::part(color-swatch-selected) { outline-color: var(--local-form-element-selection-color); outline-width: var(--local-outline-width); } shopify-variant-selector::part(color-swatch-selected):after { content: unset; } shopify-variant-selector::part(color-swatch-label) { color: var(--local-secondary-text-color); } shopify-variant-selector::part(color-swatch-disabled) { opacity: var(--local-disabled-opacity); /* do not transition opacity - it causes a flash when changing variants */ pointer-events: none; } shopify-variant-selector::part(label) { color: var(--local-secondary-text-color); display: inline-block; font-size: var(--local-font-size-sm); font-weight: var(--local-font-weight-base); line-height: 1em; margin-bottom: calc(var(--local-spacing-sm) - 6px); } /* media queries */ /* md - and above */ @media (min-width: 768px) { :host { --local-section-max-width: 420px; } gift-dialog-content > section { min-width: var(--local-section-max-width); max-width: var(--local-section-max-width); } gift-dialog-header, gift-dialog-actions { min-width: var(--local-section-max-width); max-width: var(--local-section-max-width); } } /* md - and below */ @media (max-width: 768px) { :host { --local-section-max-width: 390px; } gift-dialog-content > section { min-width: var(--local-section-max-width); max-width: var(--local-section-max-width); } gift-dialog-header, gift-dialog-actions { min-width: var(--local-section-max-width); max-width: var(--local-section-max-width); padding: var(--local-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(--local-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(--local-section-max-width); max-height: var(--local-section-max-width); } } } section#content { overflow-y: unset; padding: var(--local-spacing-base); &.with-media-inline { padding-top: 0; } & .gift-product-media { &:has(shopify-media) { --local-inline-media-max-size: 330px; } } } } /* sm - and below */ @media (max-width: 480px) { :host { --local-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); } }
English
French
English
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
Théa
Les Minis
Ingrid & Henriette
Signature
Wedding
Private Sales
Engraving
Gift Card
Brand universe
Our founder
Our know-how
Our values
Our commitments
Magazine
Our stores
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
Théa
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 stores
Help
Help
Care instructions
Frequently asked questions
Order tracking
Size guide
Contact us
Our Jewels
Home
Products
Our Jewels
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
Bracelets
117
Charms & Pendants
24
Earrings
269
Necklaces
156
Rings
76
Availability
Reset
In stock
612
Out of stock
38
Price
Price :
€0,00
—
€130,00
Ring size
Reset
50
61
52
58
54
59
56
57
58
57
Filter
Loading
Loading
- 43%
Add to Cart
Benoit Ring
€39,00
€22,00
52
52
58
58
Loading
Loading
Add to Cart
Colombe Charm
€19,00
Loading
Loading
Add to Cart
Justine Earrings
€65,00
Loading
Loading
Add to Cart
Tiana Earring - Azure Blue - Per unit
€20,00
Loading
Loading
Add to Cart
Auguste Earrrings
€45,00
Loading
Loading
Add to Cart
Olivier Bracelet
€40,00
Loading
Loading
Add to Cart
Henri Necklace - Twilight
€68,00
Loading
Loading
Add to Cart
Suzanne Earring - Olive - Per unit
€26,00
Loading
Loading
Add to Cart
Léopold Earring - Raspberry - Per unit
€23,00
Loading
Loading
Add to Cart
Célia Necklace - Large Model - Personalized
€70,00
Loading
Loading
Add to Cart
Aurélie Necklace - Personalized
€89,00
50 cm
50 cm
60 cm
60 cm
Loading
Loading
Add to Cart
Baptiste Bracelet - Hammered - Personalized
€59,00
Loading
Loading
- 42%
Add to Cart
Edgard Ring
€50,00
€29,00
Loading
Loading
Add to Cart
Giani Earrings
€79,00
Loading
Loading
Add to Cart
Colette Ring - Twilight - Personalized
€48,00
Loading
Loading
- 30%
Add to Cart
Manolia Necklace
€70,00
€49,00
Loading
Loading
- 37%
Add to Cart
Minna Ring
€45,00
€28,00
50
50
52
52
54
54
56
56
Loading
Loading
Add to Cart
Séléné Bracelet
€42,00
Loading
Loading
Add to Cart
Marco Bracelet - White
€48,00
Loading
Loading
Add to Cart
Morgane Necklace - White
€59,00
Loading
Loading
Add to Cart
Lorraine Bracelet - Green
€55,00
Loading
Loading
Out of stock
Capucine Necklace - Gold Plated - Personalized
€69,00
Loading
Loading
Add to Cart
Elisabeth Medal - Personalized
€40,00
Loading
Loading
Add to Cart
Capucine Necklace - White - Personalized
€69,00
You've viewed 360 of 642 products
×
