×
: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; width: -webkit-fill-available; 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); } }
Une paire de minis boucles offerte dès 80€ d'achat • Livraison gratuite à partir de 80€ d'achat
L'Atelier de Solène
Nos Bijoux
BAGUES
Toutes nos bagues
A graver
Fines
Epaisses
Ajustables
Zircons
Nacres & Perles d'eau douce
Colorées
Sans pierre
BOUCLES D'OREILLES
Toutes nos boucles d'oreilles
Créoles
Boucles d'oreilles XL
Zircons
Nacres & Perles d'eau douce
Colorées
Sans pierre
Dormeuses
Puces
Earcuffs
A l'unité
BRACELETS
Tous nos bracelets
A graver
Zircons
Nacres & Perles d'eau douce
Colorés
Sans pierre
Doubles
Joncs
COLLIERS
Tous nos colliers
A graver
Ras de cou
Moyens
Longs / Sautoirs
Zircons
Nacres et Perles d'eau douce
Colorés
Sans pierre
Doubles
MEDAILLES & CHARMS
Tous nos médailles et charms
Médailles
Charms
Chaînes
Nos collections
Nos collections
Les Minis
Ingrid & Henriette
Signature
Mariage
Braderie
La Gravure
Carte Cadeau
La Marque
Notre créatrice
Notre savoir-faire
Nos valeurs
Nos engagements
Notre magazine
Notre boutique
Aide
Conseils d'entretien
Questions fréquentes
Suivi de commande
Guide des tailles
Contact
Connexion
Nous vous avons envoyé un email avec un lien pour mettre à jour votre mot de passe.
Email*
Mot de passe*
Mot de passe oublié ?
Créer votre compte
Réinitialiser votre mot de passe
Nous vous enverrons un email pour réinitialiser votre mot de passe.
Mot de passe*
Annuler
Panier
0
article
€0,00
Panier
0
article
€0,00
Accueil
Boutique
Compte
Liste de souhaits
Nos bijoux
Nos bijoux
Tous nos bijoux
Bagues
Bagues
Toutes nos bagues
A graver
Fines
Epaisses
Ajustables
Zircons
Nacres & Perles d'eau douce
Colorées
Sans pierre
Bracelets
Bracelets
Tous nos bracelets
A graver
Zircons
Nacres & Perles d'eau douce
Colorés
Sans pierre
Doubles
Joncs
Colliers
Colliers
Tous nos colliers
A graver
Ras de cou
Moyens
Longs / Sautoirs
Zircons
Nacres & Perles d'eau douce
Colorés
Sans pierre
Doubles
Boucles d'oreilles
Boucles d'oreilles
Toutes nos boucles d'oreilles
Créoles
Boucles d'oreilles XL
Zircons
Nacres & Perles d'eau douce
Colorées
Sans pierre
Dormeuses
Puces
Earcuffs
A l'unité
Médailles & Charms
Médailles & Charms
Médailles
Charms
Chaînes
Nos collections
Nos collections
Les Minis
Ingrid & Henriette
Signature
Mariage
Braderie
La Gravure
Carte Cadeau
La marque
La marque
Notre créatrice
Notre savoir-faire
Nos valeurs
Nos engagements
Notre magazine
Notre boutique
Aide
Aide
Conseils d'entretien
Questions fréquentes
Suivi de commande
Guide des tailles
Contact
Colliers Zircons
Accueil
Tous nos bijoux
Colliers Zircons
En vedette
Meilleures ventes
Alphabétique, de A à Z
Alphabétique, de Z à A
Prix: faible à élevé
Prix: élevé à faible
Date, de la plus ancienne à la plus récente
Date, de la plus récente à la plus ancienne
Trier
Réinitialiser tous les filtres
Fermer
Catégorie de bijoux
Réinitialiser
Colliers
19
Disponibilité
Réinitialiser
En stock
19
En rupture de stock
0
Prix
Prix :
€0,00
—
€78,00
Type de bijoux
Réinitialiser
Bijoux à graver
2
Bijoux avec nacre ou perles
1
Bijoux avec zircons
19
Bijoux colorés
2
Bijoux de mariage
8
Bijoux sans pierre
1
Bracelets doubles
1
Colliers ras de cou
18
Colliers moyens
4
Colliers longs / Sautoirs
1
Colliers doubles
1
Chaînes
1
Autres
19
Filtrer
Loading
Ajouter au panier
Chaîne de rallonge
€9,00
3 cm
3 cm
5 cm
5 cm
Loading
Loading
Ajouter au panier
Collier Constelée
€58,00
Loading
Loading
Ajouter au panier
Collier Stella
€58,00
Loading
Loading
Ajouter au panier
Collier Atlas
€59,00
Loading
Loading
Ajouter au panier
Collier Séléné
€58,00
Loading
Loading
Ajouter au panier
Collier Bérengère
€68,00
Loading
Loading
Ajouter au panier
Collier Héra
€58,00
Loading
Loading
Ajouter au panier
Collier Blair
€65,00
Loading
Loading
- 29%
Ajouter au panier
Collier Margot
€55,00
€39,00
Loading
Loading
Ajouter au panier
Collier Azénor
€59,00
Loading
Loading
Ajouter au panier
Collier Alhéna
€60,00
Loading
Loading
Ajouter au panier
Collier Destiny
€58,00
Loading
Loading
- 33%
Ajouter au panier
Collier Albéric
€59,00
€39,00
Loading
Loading
Ajouter au panier
Collier initiale - Petit modèle
€59,00
A
A
B
B
C
C
D
D
E
E
F
F
+20
Loading
Loading
Ajouter au panier
Collier Initiale - Petit modèle avec médaille
€78,00
A
A
B
B
C
C
D
D
E
E
F
F
+20
Loading
Loading
- 30%
Ajouter au panier
Collier Sélina
€70,00
€49,00
Loading
Loading
Ajouter au panier
Collier Ron
€59,00
Loading
Loading
Ajouter au panier
Collier Margot - Empierré - Crépuscule
€60,00
Loading
Loading
Ajouter au panier
Collier Constant
€55,00
Vous avez consulté 19 sur 19 produits
×
