: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); } }
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
Nos collections
Accueil
Tous nos bijoux
Nos collections
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
Bagues
71
Boucles d'oreilles
251
Bracelets
117
Breloques et pendentifs
21
Colliers
141
Disponibilité
Réinitialiser
En stock
561
En rupture de stock
50
Prix
Prix :
€0,00
—
€130,00
Taille de bague
Réinitialiser
50
55
52
51
54
51
56
51
58
49
Type de bijoux
Réinitialiser
Bijoux à graver
85
Bijoux avec nacre ou perles
153
Bijoux avec zircons
88
Bijoux colorés
137
Bijoux de mariage
159
Bijoux sans pierre
182
Bagues fines
48
Bagues épaisses
14
Bagues ajustables
7
Boucles d'oreilles créoles
80
Boucles d'oreilles XL
25
Boucles d'oreilles dormeuses
20
Boucles d'oreilles puces
59
Boucles d'oreilles à l'unité
60
Earcuffs
13
Bracelets doubles
14
Joncs
17
Colliers ras de cou
82
Colliers moyens
49
Colliers longs / Sautoirs
17
Colliers doubles
7
Médailles
12
Charms
10
Chaînes
9
Autres
601
Filtrer
Loading
Loading
Ajouter au panier
Jonc Alix
€58,00
Loading
Loading
Ajouter au panier
Collier Blandine
€75,00
Loading
Loading
Ajouter au panier
Boucles d'oreilles Manon
€78,00
Loading
Loading
Ajouter au panier
Boucles d'oreilles Angus
€48,00
Loading
Loading
Ajouter au panier
Boucles d'oreilles Zoé - Grand Modèle - Rose
€50,00
Loading
Loading
Ajouter au panier
Boucles d'oreilles Zoé - Grand Modèle - Turquoise
€50,00
Loading
Loading
Ajouter au panier
Boucles d'oreilles Zoé - Grand Modèle - Blanc
€50,00
Loading
Loading
Ajouter au panier
Boucles d'oreilles Zoé - Grand Modèle - Noir
€50,00
Loading
Loading
Ajouter au panier
Boucle d'oreille Marius - À l'unité
€21,00
Loading
Loading
Ajouter au panier
Boucle d'oreille Noalie - Turquoise - À l'unité
€21,00
Loading
Loading
Ajouter au panier
Boucle d'oreille Elyn - Vert Marbré - À l'unité
€21,00
Loading
Loading
Ajouter au panier
Bracelet Aurore - Blanc
€42,00
Loading
Loading
Ajouter au panier
Bracelet Samuel - Crépuscule - Personnalisable
€49,00
Loading
Loading
Ajouter au panier
Bracelet Pascale - Crépuscule
€48,00
Loading
Loading
Ajouter au panier
Collier Margot - Empierré - Crépuscule
€60,00
Loading
Loading
- 29%
Ajouter au panier
Collier Angélique - rouge - rose
€55,00
€39,00
Loading
Loading
Ajouter au panier
Médaille Gladys - Personnalisable
€42,00
Loading
Loading
Ajouter au panier
Collier Capucine - Prune - Personnalisable
€69,00
Loading
Loading
Ajouter au panier
Boucles d'oreilles Calypso - Petit
€40,00
Loading
Loading
Ajouter au panier
Boucles d'oreilles Milo
€85,00
Loading
Loading
Ajouter au panier
Boucles d'oreilles Isabelle
€79,00
Loading
Loading
Ajouter au panier
Boucles d'oreilles Flora
€55,00
Loading
Loading
Ajouter au panier
Jonc Ernest
€50,00
Loading
Loading
Ajouter au panier
Boucles d'oreilles Félicie
€55,00
Vous avez consulté 480 sur 601 produits
×
