: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: #9e2a2f; --wrapped-primary-button-hover: color-mix(in srgb, var(--wrapped-primary-button-surface), var(--wrapped-hover-style) 16%); --wrapped-primary-button-active: color-mix(in srgb, var(--wrapped-primary-button-surface), var(--wrapped-hover-style) 20%); --wrapped-primary-button-disabled-bg: color-mix(in srgb, var(--wrapped-primary-button-surface), white 85%); --wrapped-primary-button-disabled-text: color-mix(in srgb, var(--wrapped-primary-button-surface), black 40%); --wrapped-primary-button-text-color: #ffffff; --wrapped-primary-button-border-surface: rgba(0,0,0,0); --wrapped-primary-button-border-surface--hover: transparent; --wrapped-secondary-button-surface: #0000000f; --wrapped-secondary-button-hover: color-mix(in srgb, var(--wrapped-secondary-button-surface), var(--wrapped-hover-style) 16%); --wrapped-secondary-button-active: color-mix(in srgb, var(--wrapped-secondary-button-surface), var(--wrapped-hover-style) 20%); --wrapped-secondary-button-disabled-bg: color-mix(in srgb, var(--wrapped-secondary-button-surface), white 85%); --wrapped-secondary-button-disabled-text: color-mix(in srgb, var(--wrapped-secondary-button-surface), black 40%); --wrapped-secondary-button-text-color: #333333; --wrapped-secondary-button-border-surface: rgba(0,0,0,0); --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(14px, 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: #a0a0a0; --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; 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); } *, *::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-hover); } &:active { background-color: var(--wrapped-primary-button-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; } &[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: left; 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: space-between; width: 100%; & .label { text-align: left; } } & .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 { cursor: var(--wrapped-disabled-cursor); opacity: var(--wrapped-disabled-opacity); pointer-events: none; } /* 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-hover); border-color: var(--wrapped-primary-button-border-surface--hover); } &:active { background-color: var(--wrapped-primary-button-active); border-color: var(--wrapped-primary-button-active); } &[loading] { background-color: var(--wrapped-primary-button-active); border-color: var(--wrapped-primary-button-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-hover); border-color: var(--wrapped-secondary-button-border-surface--hover); color: var(--wrapped-secondary-button-text-color); .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-active); border-color: var(--wrapped-secondary-button-active); .icon-wrapper { transition: filter var(--wrapped-transition-duration) ease-in-out; } } &[hidden] { display: none; } &[loading] { background-color: var(--wrapped-secondary-button-active); border-color: var(--wrapped-secondary-button-active); color: var(--wrapped-secondary-button-text-color); pointer-events: none; .button-content { opacity: 0; } .spinner .svg-wrapper svg { fill: var(--wrapped-secondary-button-text-color); } } } &:disabled { background-color: var(--wrapped-primary-button-disabled-bg); border-color: var(--wrapped-primary-button-disabled-bg); color: var(--wrapped-primary-button-disabled-text); cursor: default; 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: space-between; 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; text-align: left; } } } /* 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) { 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); 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-image: url('data:image/svg+xml;utf8,
'); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1rem 1rem; } 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; } } } } /* animations for loaders */ @keyframes spin { 100% { transform: rotate(1turn); } } @keyframes unblur { from { filter: blur(2px); } to { filter: blur(0px); } }
français
français
anglais
Nos boucles GIANI offertes dès 80€ d'achat jusqu'au 31 août • 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
SOLDES
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
SOLDES
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
Toutes nos boucles d'oreilles
Accueil
Tous nos bijoux
Toutes nos boucles d'oreilles
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
Boucles d'oreilles
314
Disponibilité
Réinitialiser
En stock
290
En rupture de stock
24
Prix
Prix :
€0,00
—
€130,00
Type de bijoux
Réinitialiser
Bijoux avec nacre ou perles
72
Bijoux avec zircons
42
Bijoux colorés
91
Bijoux de mariage
70
Bijoux sans pierre
98
Boucles d'oreilles créoles
106
Boucles d'oreilles XL
26
Boucles d'oreilles dormeuses
29
Boucles d'oreilles puces
75
Boucles d'oreilles à l'unité
78
Earcuffs
13
Autres
314
Filtrer
Loading
Loading
Ajouter au panier
Boucles d'oreilles Bianca
€30,00
Loading
Loading
Ajouter au panier
Boucles d'oreilles Giani - Petit Modèle
€60,00
Vous avez consulté 314 sur 314 produits
×