: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-block-actions"; --wrapped-thumbnail-position-end: "gift-dialog-header media" "content media" "gift-block-actions media"; --shadow-grid-template-areas: var(--wrapped-thumbnail-position-start); /* border radius */ --shadow-border-radius-scale: 60; --shadow-border-radius-xs: calc(var(--shadow-border-radius-scale, 65) / 100 * 1rem); --shadow-border-radius-sm: calc(var(--shadow-border-radius-scale, 65) / 100 * 1.5rem); --shadow-border-radius-base: calc(var(--shadow-border-radius-scale, 65) / 100 * 2.5rem); --shadow-block-border-surface: rgba(0,0,0,0); --shadow-border-width: 1px; --shadow-outline-width: calc(var(--shadow-border-width) + 0.5px); /* buttons */ --wrapped-hover-style-light: #ffffff; --wrapped-hover-style-dark: #000000; --shadow-hover-style: var(--wrapped-hover-style-light, --wrapped-hover-style-light); --shadow-primary-button-surface: #f3f3f3; --shadow-primary-button-surface--active: color-mix(in srgb, var(--shadow-primary-button-surface), var(--shadow-hover-style) 20%); --shadow-primary-button-surface--hover: color-mix(in srgb, var(--shadow-primary-button-surface), var(--shadow-hover-style) 16%); --shadow-primary-button-text-color: #000000; --shadow-primary-button-text-color--active: color-mix(in srgb, var(--shadow-primary-button-text-color), var(--shadow-hover-style) 20%); --shadow-primary-button-text-color--hover: color-mix(in srgb, var(--shadow-primary-button-text-color), var(--shadow-hover-style) 16%); --shadow-primary-button-border-surface: rgba(0,0,0,0); --shadow-primary-button-border-surface--active: transparent; --shadow-primary-button-border-surface--hover: transparent; --shadow-secondary-button-surface: #0000000f; --shadow-secondary-button-surface--active: color-mix(in srgb, var(--shadow-secondary-button-surface), var(--shadow-hover-style) 20%); --shadow-secondary-button-surface--hover: color-mix(in srgb, var(--shadow-secondary-button-surface), var(--shadow-hover-style) 16%); --shadow-secondary-button-text-color: #333333; --shadow-secondary-button-text-color--active: color-mix(in srgb, var(--shadow-secondary-button-text-color), var(--shadow-hover-style) 20%); --shadow-secondary-button-text-color--hover: color-mix(in srgb, var(--shadow-secondary-button-text-color), var(--shadow-hover-style) 16%); --shadow-secondary-button-border-surface: rgba(0,0,0,0); --shadow-secondary-button-border-surface--active: transparent; --shadow-secondary-button-border-surface--hover: transparent; /* do not change the root text size */ --shadow-font-size: 16px; /* text and fonts */ --shadow-font-family: var(--wrapped-font-family, inherit); --shadow-font-scale: calc(95 / 100); --shadow-font-size-sm: clamp(12px, calc(14px * var(--shadow-font-scale)), 16px); --shadow-font-size-base: clamp(12px, calc(16px * var(--shadow-font-scale)), 20px); --shadow-font-size-lg: clamp(16px, calc(24px * var(--shadow-font-scale)), 28px); --shadow-font-weight-base: var(--wrapped-font-weight-base, 400); --shadow-font-weight-md: 500; --shadow-font-weight-lg: 600; --shadow-letter-spacing: var(--wrapped-letter-spacing, normal); --shadow-line-height-base: 1.5em; /* transitions */ --shadow-transition-duration: 0.1s; --shadow-spinner-duration: 0.7s; /* disabled */ --shadow-disabled-opacity-sm: 0.16; --shadow-disabled-opacity: 0.32; --shadow-disabled-opacity-md: 0.4; --shadow-disabled-opacity-lg: 0.64; /* precalculated percentages for color-mix */ --shadow-disabled-opacity-percent: 32%; --shadow-disabled-opacity-sm-percent: 16%; --shadow-disabled-opacity-md-percent: 40%; --shadow-disabled-opacity-lg-percent: 64%; --shadow-disabled-cursor: not-allowed; /* form elements */ --shadow-form-element-surface: #ffffff; --shadow-form-element-surface--disabled: color-mix(in srgb, var(--shadow-form-element-surface) var(--shadow-disabled-opacity-percent), var(--shadow-secondary-text-color) 8%); --shadow-form-element-border-color: #0000000f; --shadow-form-element-border-color--active: color-mix(in srgb, var(--shadow-form-element-border-color), white 83%); --shadow-form-element-border-color--disabled: color-mix(in srgb, var(--shadow-form-element-border-color) var(--shadow-disabled-opacity-percent), var(--shadow-secondary-text-color) 8%); --shadow-form-element-text-color: #333333; --shadow-form-element-text-color--disabled: color-mix(in srgb, var(--shadow-form-element-text-color), var(--shadow-secondary-text-color) 8%); --shadow-form-element-placeholder-text-color: color-mix(in srgb, var(--shadow-form-element-text-color) var(--shadow-disabled-opacity-percent), transparent); --shadow-form-element-placeholder-text-color--disabled: color-mix(in srgb, var(--shadow-form-element-text-color) var(--shadow-disabled-opacity-percent), var(--shadow-secondary-text-color) 8%); --shadow-form-element-selection-color: #000000; --shadow-form-element-selection-color--active: color-mix(in srgb, var(--shadow-form-element-selection-color), var(--shadow-hover-style) 40%); --shadow-form-element-selection-color--hover: color-mix(in srgb, var(--shadow-form-element-selection-color), var(--shadow-hover-style) 32%); /* primary colors */ --shadow-primary-surface: #ffffff; --shadow-primary-text-color: #000000; --shadow-primary-text-color--hover: color-mix(in srgb, var(--shadow-primary-text-color), var(--shadow-hover-style) 32%); /* secondary colors */ --shadow-secondary-surface: #f3f3f3; --shadow-secondary-text-color: #333333; --shadow-secondary-text-color--disabled: color-mix(in srgb, var(--shadow-secondary-text-color) var(--shadow-disabled-opacity-lg-percent), var(--shadow-secondary-text-color) 8%); /* Typography customizations */ --shadow-button-text-transform: var(--wrapped-button-text-transform, none); --shadow-button-letter-spacing: var(--wrapped-button-letter-spacing, var(--shadow-letter-spacing, normal)); --shadow-button-font-style: var(--wrapped-button-font-style, normal); /* spacing */ --wrapped-spacing-scale-base: 1; --wrapped-spacing-scale-less: 0.75; --wrapped-spacing-scale-more: 1.166; --shadow-spacing-scale: var(--wrapped-spacing-scale-more, 1); --shadow-spacing-fixed: 4px; --shadow-spacing-base: clamp(12px, calc(16px * var(--shadow-spacing-scale)), 24px); --shadow-spacing-lg: clamp(16px, calc(24px * var(--shadow-spacing-scale)), 28px); --shadow-spacing-sm: clamp(8px, calc(12px * var(--shadow-spacing-scale)), 14px); --shadow-spacing-xs: clamp(6px, calc(8px * var(--shadow-spacing-scale)), 10px); /* inline block */ --shadow-feature-max-height: 500px; --shadow-textarea-min-height: 80px; --shadow-thumbnail-size: clamp(40px, 60px, 200px); --shadow-block-margin-block-start: calc(1em * var(--shadow-spacing-scale)); --shadow-block-margin-block-end: calc(2em * var(--shadow-spacing-scale)); /* shadows */ --shadow-shadow-blur: 1.5rem; --shadow-shadow-color: rgba(0, 0, 0, 0.25); --shadow-shadow-offset: 0.75rem; /* default styles */ all: revert; box-sizing: border-box; cursor: default; display: block; font-family: var(--shadow-font-family); font-size: var(--shadow-font-size); line-height: var(--shadow-line-height-base); letter-spacing: var(--shadow-letter-spacing); margin-block-start: var(--wrapped-block-margin-start, var(--shadow-spacing-xs)); margin-block-end: var(--wrapped-block-margin-end, var(--shadow-spacing-xs)); text-align: start; width: -webkit-fill-available; white-space: normal; } *, *::before, *::after { box-sizing: border-box; } gift-block-launcher:not([variant="inline"]) { display: flex; flex-direction: column; gap: var(--shadow-spacing-xs); align-items: var(--wrapped-launcher-button-alignment, normal); & gift-block-visibility-notice { display: block; font-family: var(--shadow-font-family); font-size: smaller; font-weight: var(--shadow-font-weight-base); font-style: var(--shadow-button-font-style); letter-spacing: var(--shadow-button-letter-spacing); padding: 0 var(--shadow-spacing-sm); text-transform: var(--shadow-button-text-transform); width: 100%; } } .gift-block__launcher { background-color: var(--wrapped-launcher-button-surface, var(--shadow-primary-button-surface)); border-color: var(--wrapped-launcher-button-border-surface, var(--shadow-primary-button-border-surface)); border-width: var(--wrapped-launcher-button-border-width, var(--shadow-border-width)); border-radius: var(--wrapped-launcher-button-border-radius, var(--shadow-border-radius-sm)); border-style: solid; color: var(--shadow-primary-button-text-color); padding: var(--shadow-spacing-sm); font-family: var(--shadow-font-family); font-size: var(--shadow-font-size-base); font-weight: var(--wrapped-launcher-button-font-weight, var(--shadow-font-weight-base)); font-style: var(--shadow-button-font-style); letter-spacing: var(--shadow-button-letter-spacing); max-width: var(--wrapped-launcher-button-max-width, 500px); text-transform: var(--shadow-button-text-transform); width: 100%; &:hover { cursor: pointer; background-color: var(--shadow-primary-button-surface--hover); border-color: var(--shadow-primary-button-border-surface--hover); } &:active { background-color: var(--shadow-primary-button-surface--active); border-color: var(--shadow-primary-button-border-surface--active); } &:focus, &:focus-visible { outline: none; } &[with-checkmark] { position: relative; display: inline-flex; align-items: center; gap: var(--shadow-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(--shadow-transition-duration) * 3) ease forwards; */ } } } &[variant="link"] { background: none; border: none; color: var(--shadow-primary-text-color); font-size: var(--shadow-font-size-base); font-weight: var(--shadow-font-weight-base); font-style: var(--shadow-button-font-style); letter-spacing: var(--shadow-button-letter-spacing); text-transform: var(--shadow-button-text-transform); text-decoration: none; margin-inline-start: -0.25rem; padding: 0; width: auto; &:hover { cursor: pointer; color: var(--shadow-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(--shadow-spacing-fixed); flex-direction: var(--wrapped-launcher-button-content-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[usage-limit-reached], .gift-block__launcher[region-unavailable] { cursor: var(--shadow-disabled-cursor); opacity: var(--shadow-disabled-opacity); pointer-events: none; &[with-checkmark] { .icon-wrapper { opacity: var(--shadow-disabled-opacity-md); } } } /* gift block modal */ .gift-block-modal { background-color: var(--shadow-primary-surface); border: none; border-radius: var(--shadow-border-radius-base); box-shadow: 0 var(--shadow-shadow-offset) var(--shadow-shadow-blur) var(--shadow-shadow-color); outline: var(--shadow-border-width) solid var(--shadow-block-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(--shadow-border-width) solid var(--shadow-block-border-surface); } @media (max-width: 768px) { .gift-block-modal { max-height: calc(100% - var(--shadow-spacing-sm)); max-width: calc(100% - var(--shadow-spacing-sm)); overscroll-behavior: contain; } } /* gift block modal layout */ .gift-block-modal-layout { display: grid; grid-template-areas: var(--shadow-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-block-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(--shadow-primary-surface); display: flex; flex-direction: row; gap: var(--shadow-spacing-fixed); grid-area: gift-dialog-header; justify-content: space-between; padding: var(--shadow-spacing-lg); position: sticky; top: 0; z-index: 1; & h1 { color: var(--shadow-primary-text-color); font-family: var(--wrapped-header-font-family, var(--shadow-font-family)); font-size: var(--shadow-font-size-lg); font-weight: var(--shadow-font-weight-md); line-height: 1.25em; margin: 0; } /* dismiss button styles */ & button { background-color: color-mix(in srgb, var(--shadow-secondary-text-color) 8%, transparent); color: var(--shadow-secondary-text-color); border-radius: var(--shadow-border-radius-xs); font-size: var(--shadow-font-size-sm); font-weight: var(--shadow-font-weight-lg); font-style: var(--shadow-button-font-style); letter-spacing: var(--shadow-button-letter-spacing); text-transform: var(--shadow-button-text-transform); width: 2.25em; height: 2.25em; min-width: 2.25em; min-height: 2.25em; outline: none; border: 0; cursor: pointer; transition: background-color var(--shadow-transition-duration) ease, color var(--shadow-transition-duration) ease; &:hover { background-color: color-mix(in srgb, var(--shadow-secondary-text-color) 6%, var(--shadow-hover-style) 12%); } &:active { background-color: color-mix(in srgb, var(--shadow-secondary-text-color) 16%, var(--shadow-hover-style) 16%); } &:disabled { pointer-events: none; opacity: var(--shadow-disabled-opacity); } } } .gift-block-modal-layout gift-block-actions { background-color: var(--shadow-primary-surface); bottom: 0; grid-area: gift-block-actions; overscroll-behavior: contain; position: sticky; z-index: 1; /* the buttons live in the component's own shadow; only its layout knobs are ours */ --wrapped-actions-gap: var(--shadow-spacing-sm); --wrapped-actions-padding: var(--shadow-spacing-lg); } gift-dialog-content { display: contents; } section#media { align-self: stretch; background-color: var(--shadow-secondary-surface); grid-area: media; grid-row: 1 / 4; height: 100%; padding: var(--shadow-spacing-lg); position: sticky; top: 0; transition: order var(--shadow-transition-duration) ease, width var(--shadow-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(--shadow-border-radius-sm); width: 100%; height: auto; } } } section#content { grid-area: content; background-color: var(--shadow-primary-surface); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding: var(--shadow-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(--shadow-spacing-lg); transition: order var(--shadow-transition-duration) ease; @media (max-width: 768px) { & > *:first-child:not(:only-child) { margin-top: unset; } } & gift-block-option-heading { display: block; & span[part="label"] { color: var(--shadow-primary-text-color); display: block; font-size: var(--shadow-font-size-base); font-weight: var(--shadow-font-weight-md, 500); line-height: 1.25em; } } & .gift-option-group { display: flex; flex-direction: column; gap: var(--shadow-spacing-lg); } /* gift product details */ & .gift-product { display: flex; flex-direction: column; gap: var(--shadow-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(--shadow-spacing-base); column-gap: var(--shadow-spacing-sm); } & .gift-product-content { display: flex; flex: 1 1 50%; flex-direction: column; gap: var(--shadow-spacing-xs); } & .gift-product-media { display: flex; align-items: center; &:has(shopify-media) { --shadow-inline-media-max-size: 60px; --shadow-inline-media-size: clamp(40px, 60px, var(--shadow-inline-media-max-size)); border-radius: var(--shadow-border-radius-sm); height: var(--shadow-inline-media-size); width: var(--shadow-inline-media-size); overflow: hidden; margin-inline-start: auto; margin-inline-end: auto; } & shopify-media { & img { border-radius: var(--shadow-border-radius-sm); width: 100%; height: auto; } } } & .gift-product-title { color: var(--shadow-primary-text-color); display: var(--wrapped-gift-product-title-display, block); font-size: var(--shadow-font-size-base); font-weight: var(--shadow-font-weight-md); margin: 0; } & .gift-product-pricing { display: flex; gap: var(--shadow-spacing-xs); margin: 0; font-weight: var(--shadow-font-weight-base); font-size: clamp(12px, calc(var(--shadow-font-size-base) * 0.94), 18px); line-height: 1em; } & .gift-product-price { color: var(--shadow-secondary-text-color); } & .gift-product-price--compare { color: var(--shadow-secondary-text-color); text-decoration: line-through; opacity: var(--shadow-disabled-opacity); } & .gift-product-description { font-weight: var(--shadow-font-weight-base); color: var(--shadow-secondary-text-color); font-size: clamp(12px, calc(var(--shadow-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(--shadow-spacing-lg); } } } /* gift messaging fields */ & gift-block-message { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--shadow-spacing-base); & wrapped-message-field { flex: 0 0 100%; } @media (min-width: 768px) { & wrapped-message-field[type="input"] { flex: 1 1 0%; } } } } :host(wrapped-gift-block) gift-block-option-heading label { align-items: center; cursor: pointer; display: flex; gap: var(--shadow-spacing-sm); & input[type="checkbox"] { accent-color: var(--shadow-form-element-selection-color); cursor: pointer; flex: 0 0 auto; height: var(--shadow-font-size-base); margin: 0; width: var(--shadow-font-size-base); } } :host(wrapped-gift-block[gift-option-optional]) section#content .gift-option-group { border-radius: var(--shadow-border-radius-sm); position: relative; } :host(wrapped-gift-block[gift-option-optional]:not([gift-option-included])) section#content .gift-option-group { pointer-events: none; } :host(wrapped-gift-block[gift-option-optional]:not([gift-option-included])) section#content .gift-option-group::after { background-color: color-mix(in srgb, var(--shadow-primary-surface) 62%, transparent); border-radius: inherit; content: ''; inset: calc(var(--shadow-spacing-sm) * -1); position: absolute; } /* shopify variant selector */ gift-variant-selector { font-size: var(--shadow-font-size-sm); width: 100%; } gift-variant-selector::part(form) { gap: var(--shadow-spacing-base); } gift-variant-selector::part(radio) { background-color: var(--shadow-form-element-surface); color: var(--shadow-form-element-text-color); border: none; border-radius: var(--shadow-border-radius-sm); font-size: var(--shadow-font-size-base); font-weight: var(--shadow-font-weight-base); outline: var(--shadow-border-width) solid var(--shadow-form-element-border-color); padding: calc(var(--shadow-spacing-sm) * 0.5) var(--shadow-spacing-base); transition: color var(--shadow-transition-duration) ease, outline-color var(--shadow-transition-duration) ease, outline-width var(--shadow-transition-duration) ease; } gift-variant-selector::part(radio):active { outline-color: var(--shadow-form-element-selection-color--active); outline-width: var(--shadow-outline-width); } gift-variant-selector::part(radio):hover { outline-color: var(--shadow-form-element-selection-color--hover); } gift-variant-selector::part(radio-disabled) { background-color: var(--shadow-form-element-surface--disabled); color: var(--shadow-form-element-text-color--disabled); opacity: var(--shadow-disabled-opacity); /* do not transition opacity - it causes a flash when changing variants */ outline-color: var(--shadow-form-element-border-color--disabled); pointer-events: none; } gift-variant-selector::part(radio-selected) { outline-color: var(--shadow-form-element-selection-color); outline-width: var(--shadow-outline-width); pointer-events: none; } gift-variant-selector::part(select) { color: var(--shadow-form-element-text-color); border: none; border-radius: var(--shadow-border-radius-sm); font-family: var(--shadow-font-family); font-size: var(--shadow-font-size-base); font-weight: var(--shadow-font-weight-base); margin-top: var(--shadow-spacing-xs); width: 100%; max-width: 100%; padding: var(--shadow-spacing-sm); padding-right: calc(var(--shadow-spacing-sm) + 1.5rem); outline: var(--shadow-border-width) solid var(--shadow-form-element-border-color); appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--shadow-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; } gift-variant-selector::part(select):focus, gift-variant-selector::part(select):focus-visible { outline-color: var(--shadow-form-element-selection-color); outline-width: var(--shadow-outline-width); } gift-variant-selector::part(single) { color: var(--shadow-form-element-text-color); font-size: var(--shadow-font-size-base); font-weight: var(--shadow-font-weight-base); } gift-variant-selector::part(color-swatch) { border: none; outline: var(--shadow-border-width) solid rgba(0, 0, 0, .1); transition: color var(--shadow-transition-duration) ease, outline-color var(--shadow-transition-duration) ease, outline-width var(--shadow-transition-duration) ease; } gift-variant-selector::part(color-swatch):active { outline-color: var(--shadow-form-element-selection-color--active); outline-width: var(--shadow-outline-width); } gift-variant-selector::part(color-swatch):hover { outline-color: var(--shadow-form-element-selection-color--hover); } gift-variant-selector::part(color-swatch-selected) { outline-color: var(--shadow-form-element-selection-color); outline-width: var(--shadow-outline-width); } gift-variant-selector::part(color-swatch-selected):after { content: unset; } gift-variant-selector::part(color-swatch-label) { color: var(--shadow-secondary-text-color); } gift-variant-selector::part(color-swatch-disabled) { opacity: var(--shadow-disabled-opacity); /* do not transition opacity - it causes a flash when changing variants */ pointer-events: none; } gift-variant-selector::part(label) { color: var(--shadow-secondary-text-color); display: inline-block; font-size: var(--shadow-font-size-sm); font-weight: var(--shadow-font-weight-base); line-height: 1em; margin-bottom: calc(var(--shadow-spacing-sm) - 6px); } :host(wrapped-gift-block[gift-option-optional]:not([gift-option-included])) gift-variant-selector::part(radio-selected) { outline-color: var(--shadow-form-element-border-color); outline-width: var(--shadow-border-width); } :host(wrapped-gift-block[gift-option-optional]:not([gift-option-included])) gift-variant-selector::part(color-swatch-selected) { outline-color: rgba(0, 0, 0, .1); outline-width: var(--shadow-border-width); } :host(wrapped-gift-block[gift-option-optional]:not([gift-option-included])) gift-variant-selector::part(select) { outline-color: var(--shadow-form-element-border-color); outline-width: var(--shadow-border-width); } wrapped-message-field { gap: var(--shadow-spacing-xs); & label { color: var(--shadow-secondary-text-color); font-size: var(--shadow-font-size-sm); font-weight: var(--shadow-font-weight-base); line-height: 1em; } & :is(input, textarea) { background-color: var(--shadow-form-element-surface); border: none; border-radius: var(--shadow-border-radius-sm); color: var(--shadow-form-element-text-color); font-family: var(--shadow-font-family); font-size: var(--shadow-font-size-base); margin: 0; min-height: 42px; outline: var(--shadow-border-width) solid var(--shadow-form-element-border-color); padding: var(--shadow-spacing-sm); width: 100%; } & :is(input, textarea):is(:active, :focus, :focus-visible) { outline-color: var(--shadow-form-element-selection-color); outline-width: var(--shadow-outline-width); } & :is(input, textarea)::placeholder { color: var(--shadow-form-element-placeholder-text-color); } & textarea { min-height: 100px; resize: vertical; } & span.counter { color: var(--shadow-secondary-text-color); font-size: var(--shadow-font-size-sm); line-height: normal; } } wrapped-message-field[disabled] { cursor: var(--shadow-disabled-cursor); opacity: var(--shadow-disabled-opacity-md); pointer-events: none; transition: background-color var(--shadow-transition-duration) ease, color var(--shadow-transition-duration) ease; & :is(input, textarea) { background-color: var(--shadow-form-element-surface--disabled); color: transparent; outline-color: var(--shadow-form-element-border-color--disabled); } } :host(wrapped-extension) { --wrapped-thumbnail-position-start: -1; --wrapped-thumbnail-position-end: 2; --shadow-thumbnail-order: var(--wrapped-thumbnail-position-start, -1); background-color: var(--shadow-primary-surface) !important; border: var(--shadow-border-width) solid var(--shadow-block-border-surface) !important; border-radius: var(--shadow-border-radius-sm) !important; color: var(--shadow-primary-text-color) !important; display: flex; flex-direction: column !important; font-size: var(--shadow-font-size-base) !important; height: fit-content !important; margin-block-start: var(--wrapped-block-margin-start, var(--shadow-block-margin-block-start)) !important; margin-block-end: var(--wrapped-block-margin-end, var(--shadow-block-margin-block-end)) !important; min-width: unset !important; max-width: 640px !important; overflow: hidden !important; padding: unset !important; width: unset !important; } :host(wrapped-extension[option-type="order"]) { margin-left: auto !important; margin-right: 0 !important; width: stretch !important; } :host(wrapped-extension[target-group="drawer"][option-type="order"]) { max-width: unset !important; margin-left: unset !important; margin-right: unset !important; margin-block-end: var(--wrapped-block-margin-end, calc(var(--shadow-block-margin-block-end) * 0.5)) !important; } wrapped-advanced-mode, wrapped-basic-mode { display: contents; } :host(wrapped-extension) [part="feature"], :host(wrapped-extension) gift-block-launcher { overflow: hidden !important; & [part="container"] { display: flex; flex-direction: column; row-gap: 0.25em; & label { align-items: center !important; column-gap: var(--shadow-spacing-sm) !important; cursor: pointer !important; display: flex; line-height: normal !important; margin: 0 !important; pointer-events: auto !important; text-align: left !important; text-transform: unset !important; } } } :host(wrapped-extension) [part="feature"] { background-color: var(--shadow-secondary-surface); } :host(wrapped-extension) [part="feature"][enabled="false"] { display: none; opacity: 0; visibility: hidden; } :host(wrapped-extension) [part="disclosure"] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s cubic-bezier(0.42, 0, 0.58, 1); } :host(wrapped-extension) [part="disclosure-content"] { display: flex; flex-direction: column; min-height: 0; opacity: 0; overflow: hidden; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } :host(wrapped-extension[expanded="true"]) gift-block-launcher:has(~ [part="disclosure"] [part="feature"][enabled="true"]:not([singular="true"])) { border-bottom: var(--shadow-border-width) solid var(--shadow-block-border-surface); } :host(wrapped-extension[expanded="true"]) [part="disclosure"], :host(wrapped-extension[hidden-checkbox="true"]) [part="disclosure"] { grid-template-rows: 1fr; } :host(wrapped-extension[expanded="true"]) [part="disclosure-content"], :host(wrapped-extension[hidden-checkbox="true"]) [part="disclosure-content"] { opacity: 1; visibility: visible; } :host(wrapped-extension[hidden-checkbox="true"]) gift-block-launcher { display: none; opacity: 0; visibility: hidden; } :host(wrapped-extension[limited="true"]), :host(wrapped-extension[region-unavailable="true"]) { cursor: none !important; pointer-events: none !important; opacity: 0.6 !important; & [part="container"] { & label { pointer-events: none !important; } } } :host(wrapped-extension[saving="true"]) { & [part="container"] { & label { pointer-events: none !important; & input[type="checkbox"], input[type="radio"], span { opacity: 0.7 !important; transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1); } } & select { pointer-events: none !important; opacity: 0.7 !important; } & button { pointer-events: none; opacity: 0.7; transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1); } } } :host(wrapped-extension) gift-block-launcher [part="container"] { padding: var(--shadow-spacing-sm); & label { padding: 0 !important; & input[type="checkbox"] { cursor: pointer; clip: unset !important; display: inline-block !important; flex-shrink: 0 !important; height: var(--shadow-font-size-base) !important; margin: 0 !important; min-height: revert !important; position: unset !important; top: unset !important; width: var(--shadow-font-size-base) !important; &::before { content: unset !important; } &::after { content: unset !important; } &:checked::before { content: unset !important; } &:checked::after { content: unset !important; } } & span { &[part="label"] { border: unset !important; flex-grow: 1; padding: unset !important; } &[part="pricing"] { align-content: center; font-size: var(--shadow-font-size-sm); white-space: nowrap; } &[part="thumbnail"] { background-color: var(--shadow-form-element-surface); background-size: cover; background-position: center; background-repeat: no-repeat; border: var(--shadow-border-width) solid #ddd; border-color: var(--shadow-form-element-border-color); border-radius: var(--shadow-border-radius-sm); min-height: var(--shadow-thumbnail-size); max-height: var(--shadow-thumbnail-size); min-width: var(--shadow-thumbnail-size); max-width: var(--shadow-thumbnail-size); height: 100%; width: 100%; display: inline-block; overflow: hidden; vertical-align: middle; order: var(--shadow-thumbnail-order); margin-right: 0.6em; } } } } :host(wrapped-extension) [feature="gift-option"] [part="container"] { padding: var(--shadow-spacing-sm); & label { align-items: center; cursor: pointer; display: flex; gap: var(--shadow-spacing-sm); } & input[type="checkbox"] { cursor: pointer; flex: 0 0 auto; height: var(--shadow-font-size-base); margin: 0; width: var(--shadow-font-size-base); } & span[part="label"] { color: var(--shadow-primary-text-color); display: block; font-size: var(--shadow-font-size-base); font-weight: var(--shadow-font-weight-md, 500); line-height: 1.25em; } } :host(wrapped-extension) gift-block-launcher [part="container"] label input[type="checkbox"], :host(wrapped-extension) [feature="gift-option"] [part="container"] label input[type="checkbox"] { appearance: none; background-color: var(--shadow-form-element-surface); background-position: center; background-repeat: no-repeat; background-size: 82%; border: var(--shadow-border-width) solid var(--shadow-form-element-border-color); border-radius: min(4px, var(--shadow-border-radius-sm)); box-sizing: border-box; &:checked { background-color: var(--shadow-form-element-selection-color); border-color: var(--shadow-form-element-selection-color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6'/%3E%3C/svg%3E"); } &:focus-visible { outline: var(--shadow-outline-width) solid var(--shadow-form-element-selection-color); outline-offset: var(--shadow-border-width); } } :host(wrapped-extension[hidden-checkbox="false"][gift-option-optional="false"]) [feature="variant"][enabled="true"][singular="true"] { display: none; } :host(wrapped-extension) [feature="variant"] [part="container"] { padding: var(--shadow-spacing-sm) var(--shadow-spacing-sm) 0; & fieldset { background-color: var(--shadow-form-element-surface) !important; border-color: var(--shadow-form-element-border-color) !important; border-radius: var(--shadow-border-radius-sm) !important; border-style: solid !important; border-width: var(--shadow-border-width) !important; color: var(--shadow-primary-text-color) !important; font-family: inherit; font-size: calc(var(--shadow-font-size-base) * 0.9) !important; margin-bottom: 0.5em !important; margin-left: 0 !important; margin-right: 0 !important; overflow-x: hidden !important; overflow-y: var(--wrapped-variant-list-overflow, scroll) !important; overscroll-behavior: contain !important; /* stop the list from chaining its scroll to the page */ padding: 0 !important; max-height: calc(calc(var(--shadow-feature-max-height) * 0.5) - calc(var(--shadow-spacing-sm) * 4)) !important; min-width: 100% !important; max-width: 100% !important; width: 100% !important; -webkit-appearance: auto !important; -moz-appearance: auto !important; & label { background-color: initial; container-type: inline-size; padding: var(--shadow-spacing-sm) calc(var(--shadow-spacing-sm) / 2); margin-bottom: 0 !important; transition: background-color 0.1s, box-shadow 0.1s ease-out; transition-delay: 0.1s; width: auto; & input[type="radio"] { appearance: var(--wrapped-radio-appearance, auto) !important; clip: unset !important; cursor: default; display: inline-block !important; height: var(--shadow-font-size-base) !important; margin: 0 !important; min-height: revert !important; position: unset !important; top: unset !important; vertical-align: top; width: var(--shadow-font-size-base) !important; accent-color: var(--shadow-form-element-selection-color); } & div[part="wrapper"] { display: flex; flex-direction: row; flex-grow: 1; & span { border: unset !important; font-size: var(--shadow-font-size-sm); &[part="title"] { width: 100%; } &[part="pricing"] { padding-right: calc(var(--shadow-spacing-sm) / 2); white-space: nowrap; } } } @container (max-width: 400px) { div[part="wrapper"] { flex-direction: column; } } &[data-available="false"] { opacity: var(--shadow-disabled-opacity-md) !important; pointer-events: none !important; } &[data-filtered="true"] { opacity: var(--shadow-disabled-opacity-md) !important; pointer-events: none !important; } &:has(input:checked) { background-color: var(--shadow-secondary-surface); box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.029); } &:hover { background-color: var(--shadow-secondary-surface); box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.029); transition-delay: 0s; } } } & select { background-color: var(--shadow-form-element-surface) !important; background-image: none !important; border: none; border-radius: var(--shadow-border-radius-sm) !important; color: var(--shadow-form-element-text-color) !important; font-family: var(--shadow-font-family); font-size: var(--shadow-font-size-base) !important; height: auto; margin-bottom: 0.5em !important; min-height: 42px; outline: var(--shadow-border-width) solid var(--shadow-form-element-border-color); padding: var(--shadow-spacing-sm) !important; min-width: 100% !important; max-width: 100% !important; width: 100% !important; -webkit-appearance: auto !important; -moz-appearance: auto !important; } & select:is(:active, :focus, :focus-visible) { outline-color: var(--shadow-form-element-selection-color); outline-width: var(--shadow-outline-width); } } :host(wrapped-extension) [feature="variant"][selector-type="images"] [part="container"] { & fieldset { & label { flex-direction: row; & input[type="radio"] { appearance: none !important; background-color: var(--shadow-form-element-surface) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; border-color: lightgrey !important; border-width: 0.2em !important; border-style: solid !important; border-radius: 0.4em !important; box-sizing: border-box !important; flex: 0 0 auto !important; width: var(--shadow-thumbnail-size) !important; height: var(--shadow-thumbnail-size) !important; min-width: 40px !important; max-width: 200px !important; -webkit-appearance: none !important; &:checked { --wrapped-swatch-accent: var(--shadow-form-element-selection-color); border-color: var(--wrapped-swatch-accent) !important; &::before { background-color: unset; } } } & div[part="wrapper"] { flex-direction: column; } } @media (max-width: 640px) { & label { flex-direction: column; & div[part="wrapper"] { padding-top: var(--shadow-spacing-sm); width: 100%; } } } } } :host(wrapped-extension) [feature="variant"][selector-type="images-modern"] [part="container"] { & fieldset { background: none !important; border: none !important; display: grid !important; gap: calc(var(--shadow-spacing-sm) * 0.8) !important; & label { opacity: 0.8 !important; margin: var(--shadow-border-width) !important; flex-direction: row !important; padding: 2px !important; padding-right: var(--shadow-spacing-sm) !important; box-sizing: border-box !important; box-shadow: 0 0 0 var(--shadow-border-width) transparent !important; background-color: var(--shadow-form-element-surface) !important; border-color: color-mix(in srgb, var(--shadow-form-element-border-color) 25%, transparent) !important; border-radius: var(--shadow-border-radius-sm) !important; border-style: solid !important; border-width: var(--shadow-border-width) !important; color: var(--shadow-primary-text-color) !important; transition: box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.1s cubic-bezier(0.25, 0.1, 0.25, 1) !important; & input[type="radio"] { cursor: pointer; appearance: none !important; background-color: var(--shadow-form-element-surface) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; border: none !important; border-radius: max(0px, calc(var(--shadow-border-radius-sm) - 2px)) !important; box-sizing: border-box !important; flex: 0 0 auto !important; width: var(--shadow-thumbnail-size) !important; height: var(--shadow-thumbnail-size) !important; min-width: 40px !important; max-width: 200px !important; -webkit-appearance: none !important; &:checked { border-color: var(--shadow-form-element-selection-color) !important; &::before { background-color: unset; } } } & div[part="wrapper"] { flex-direction: row; gap: var(--shadow-spacing-sm); } &:has(input:checked) { --wrapped-row-accent: var(--shadow-form-element-selection-color); border-color: var(--wrapped-row-accent) !important; border-width: var(--shadow-border-width) !important; box-shadow: 0 0 0 var(--shadow-border-width) var(--wrapped-row-ring, var(--wrapped-row-accent)) !important; opacity: var(--wrapped-row-opacity, 1) !important; pointer-events: none !important; } &:hover { opacity: 1 !important; } &[data-available="false"] { opacity: var(--shadow-disabled-opacity-md) !important; pointer-events: none !important; } &[data-filtered="true"] { opacity: var(--shadow-disabled-opacity-md) !important; pointer-events: none !important; } } } } :host(wrapped-extension[gift-option-optional="true"]) .gift-option-group { transition: opacity 0.25s cubic-bezier(0.42, 0, 0.58, 1); } :host(wrapped-extension[gift-option-optional="true"]:not([gift-option-included])) .gift-option-group { opacity: 0.5; pointer-events: none; } :host(wrapped-extension[gift-option-optional="true"]:not([gift-option-included])) [feature="variant"] [part="container"] fieldset label:has(input:checked) { --wrapped-row-accent: color-mix(in srgb, var(--shadow-form-element-border-color) 25%, transparent); --wrapped-row-ring: transparent; --wrapped-row-opacity: 0.8; background-color: initial; box-shadow: none; } :host(wrapped-extension[gift-option-optional="true"]:not([gift-option-included])) [feature="variant"] [part="container"] fieldset label input[type="radio"]:checked { --wrapped-swatch-accent: lightgrey; } :host(wrapped-extension[gift-option-optional="true"]:not([gift-option-included])) [feature="variant"]:not([selector-type="images"]):not([selector-type="images-modern"]) [part="container"] fieldset label input[type="radio"]:checked { --wrapped-radio-appearance: none; background-color: var(--shadow-form-element-surface); border: var(--shadow-border-width) solid var(--shadow-form-element-border-color); border-radius: 50%; box-sizing: border-box; } :host(wrapped-extension) [feature="variant"] [part="container"] fieldset label:has(input:focus-visible) { outline: var(--shadow-outline-width) solid var(--shadow-form-element-selection-color); outline-offset: calc(var(--shadow-outline-width) * -1); } :host(wrapped-extension) [feature="variant"] [part="container"] fieldset label input[type="radio"]:focus-visible { outline: none; } :host(wrapped-extension[gift-option-optional="true"]) [feature="variant"][singular="true"] [part="container"] fieldset { --wrapped-variant-list-overflow: auto; } :host(wrapped-extension) gift-block-message { display: flex; flex-wrap: wrap; gap: var(--shadow-spacing-sm); padding: var(--shadow-spacing-sm); & wrapped-message-field { flex: 1 1 40%; & label { color: var(--shadow-primary-text-color); } & textarea { min-height: var(--shadow-textarea-min-height); } & span.counter { align-self: flex-end; } } & wrapped-message-field:not([type="input"]) { flex: 0 0 100%; } } :host(wrapped-extension) gift-block-actions { --wrapped-actions-gap: var(--shadow-spacing-xs); --wrapped-actions-padding: var(--shadow-spacing-sm); } /* media queries */ /* md - and above */ @media (min-width: 768px) { :host { --shadow-section-max-width: 420px; } gift-dialog-content > section { min-width: var(--shadow-section-max-width); max-width: var(--shadow-section-max-width); } gift-dialog-header, .gift-block-modal-layout gift-block-actions { min-width: var(--shadow-section-max-width); max-width: var(--shadow-section-max-width); } } /* md - and below */ @media (max-width: 768px) { :host { --shadow-section-max-width: 390px; } gift-dialog-content > section { min-width: var(--shadow-section-max-width); max-width: var(--shadow-section-max-width); } gift-dialog-header, .gift-block-modal-layout gift-block-actions { min-width: var(--shadow-section-max-width); max-width: var(--shadow-section-max-width); } gift-dialog-header { padding: var(--shadow-spacing-base); } .gift-block-modal-layout gift-block-actions { --wrapped-actions-padding: var(--shadow-spacing-base); } .gift-block-modal-layout { grid-template-areas: "gift-dialog-header" "media" "content" "gift-block-actions"; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; max-height: calc(100dvh - var(--shadow-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(--shadow-section-max-width); max-height: var(--shadow-section-max-width); } } } section#content { overflow-y: unset; padding: var(--shadow-spacing-base); &.with-media-inline { padding-top: 0; } & .gift-product-media { &:has(shopify-media) { --shadow-inline-media-max-size: 330px; } } } } /* sm - and below */ @media (max-width: 480px) { :host { --shadow-section-max-width: 100%; } section#media { & shopify-media { & img { border-radius: unset; min-height: 350px; max-height: 350px; } } } } @keyframes unblur { from { filter: blur(2px); } to { filter: blur(0px); } }
Skip to content
-10% di sconto su Nuovi Arrivi
Free shipping over €99
Country/Region
Italy (EUR €)
Italy (EUR €)
Language
English
Italiano
English
Search
New In
PRE 26/27
Girl (04-16A)
Boy (04-16A)
Baby Boy (0-36M)
Baby Girl (0-36M)
Footwear
Accessories
Brands
Outlet -70%
Account
Search
Cart
New In
Girl
Clothing
Shoes
Bags & Accessories
Discover Girls' Collection
Boy
Clothing
Shoes
Bags & Accessories
Discover Boys' Collection
Baby Girl
Clothing
Shoes
Bags & Accessories
Discover Baby Girls' Collection
Baby Boy
Clothing
Shoes
Bags & Accessories
Discover Baby Boys' Collection
PRE 26/27
Girl (04-16A)
Clothing
T-Shirts & Tops
Sweatshirts
Trousers
Skirts
Dresses
Ceremonial Dresses
Shorts
Beachwear
Jackets
Sets & Tracksuits
Knitwear
Blazers
Shirts
Underwear
Coats
Accessories
Bags
Belts/Braces
Hair accessories
Hats
Eyeglasses
Backpacks
Scarves
Belt Bags
Bathrobes
Beach towel
Socks
Keychain
Gloves
Footwear
Trainers
Ballerinas
Sandals
Slippers
Boots
Snow & Rain Boots
Boy (04-16A)
Clothing
Dresses
T-Shirts
Sweatshirts
Trousers
Shorts
Jackets
Beachwear
Shirts
Blazers
Knitwear
Coats
Sets & Tracksuits
Underwear
Accessories
Belts/Braces
Hats
Backpacks
Scarves
Bow Ties and Ties
Belt Bags
Eyeglasses
Beach towel
Gloves
Trolleys
Footwear
Trainers
Classic shoes
Slippers
Sandals
Boots
Snow & Rain Boots
Baby Boy (0-36M)
Clothing
Rompers/Pajamas
Ceremonial Dresses
Sets & Tracksuits
T-shirts
Trousers
Knitwear
Sweatshirts
Shorts and Bermuda shorts
Beachwear
Coats
Jackets
Blazers
Shirts
Accessories
Bags
Blankets and sheets
Bibs
Strollers & Accessories
Hats
Sleeping bags
Socks
Bottles & Dummies
Toys
Bows & Ties
Gloves
Footwear
Trainers
Boots
Sandals & Slippers
Baby Girl (0-36M)
Clothing
Rompers/Pajamas
T-shirts
Dresses
Sets & Tracksuits
Ceremonial Dresses
Trousers
Skirts
Knitwear
Sweatshirts
Shorts and Bermuda shorts
Beachwear
Coats
Jackets
Blazers
Shirts
Accessories
Bags
Blankets & Sheets
Bibs
Hair accessories
Hats
Sleeping bags
Socks
Bottles & Dummies
Toys
Gloves
Footwear
Trainers
Ballerine
Boots
Sandals & Slippers
Footwear
Girl
Boots
Trainers
Ballerinas
Sandals
Slippers
Snow & Rain Boots
Boy
Trainers
Elegant shoes
Slippers
Sandals
Boots
Snow & Rain Boots
Baby Boy
Trainers
Boots
Sandals
Snow & Rain Boots
baby Girl
Trainers
Boots
Sandals
Accessories
Girl
Bags
Hair accessories
Hats
Belts
Eyeglasses
Backpacks
Scarves
Belt Bags
Bathrobes
Beach towel
Socks
Keychain
Gloves and Mittens
Dolls
Boy
Belts and braces
Hats
Backpacks
Scarves
Bows and Ties
Belt Bags
Eyeglasses
Beach towel
Gloves and Mittens
Trolleys
Newborn
Changing Bags
Blankets and Sheets
Bibs
Strollers
Hats
Sleeping Bags
Socks
Bottles & Dummies
Toys
Ties & Bows
Gloves & Mittens
Baby Girl
Hair accessories
Changing Bags
Blankets & Sheets
Bibs
Hats
Sleeping Bags
Socks & Stockings
Bottles & Dummies
Toys
Gloves
Brands
Top Brand
Gucci Kids
Moschino Kids
Monnalisa
Stella McCartney
Balmain
Ralph Lauren
Etro
UGG
Dolce & Gabbana
Fendi
Moncler Enfant
Palm Angels
Emilio Pucci
Burberry
Emporio Armani
Sprayground
See All Brand (A-Z)
Outlet
-70%
Girl
Clothing
Shoes
Accessories
See all products on sale
Child
Clothing
Shoes
Accessories
See all products on sale
Newborn
Clothing
Shoes
Accessories
See all products on sale
Newborn
Clothing
Shoes
Accessories
Discover all sale products
Flash30
Filter
128 products
Sort by
Most relevant
Most relevant
Best selling
Alphabetically, A-Z
Alphabetically, Z-A
Price, low to high
Price, high to low
Date, old to new
Date, new to old
Filters
Sort by
Most relevant
Best selling
Alphabetically, A-Z
Alphabetically, Z-A
Price, low to high
Price, high to low
Date, old to new
Date, new to old
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids white girl's dress with leopard logo print
Regular price
€89,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids x Peanuts white t-shirt with logo print
Regular price
€75,00
02A
04A
06A
08A
10A
12A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids white T-shirt with graphic print on the back
Regular price
€69,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids blue swim briefs with all-over car print
Regular price
€49,00
01A
02A
04A
06A
08A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids Denver T-shirt for boys in blue with graphic print on the front
Regular price
€65,00
02A
04A
06A
08A
10A
12A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids Brigitte shirt for girls in red with a checked design
Regular price
€129,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids' white and brown striped shorts for girls
Regular price
€79,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids girls' pink one-piece swimsuit with animal print
Regular price
€119,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids Abbey white dress for girls with broderie anglaise ruffles
Regular price
€98,00
02A
04A
06A
08A
10A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids beige dress with elasticated hem
Regular price
€139,00
02A
04A
06A
08A
10A
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids purple unicorn print swimsuit for girls
Regular price
€98,00
02A
04A
06A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids pink shorts for girls with all-over cartoon print
Regular price
€69,00
01A
02A
04A
06A
08A
10A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Jaiden 2-piece swimsuit for baby girl light blue
Regular price
€89,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids white T-shirt with chest embroidery
Regular price
€59,00
02A
04A
06A
08A
10A
12A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids denim shirt for girls with embroidered trims
Regular price
€119,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids' blue swimming costume with bandana print
Regular price
€49,00
01A
02A
04A
06A
08A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids blue shorts with embroidered details
Regular price
€98,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids' two-piece pink swimsuit for girls with drawstring
Regular price
€89,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids light blue bikini for girls with ruffled details
Regular price
€75,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids pink animal print dress
Regular price
€89,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids white T-shirt with pig print
Regular price
€65,00
02A
04A
06A
08A
10A
12A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids light blue striped shorts for girls
Regular price
€69,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids green ruched two-piece swimsuit set for girls
Regular price
€75,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids light blue swimsuit with Nemo fish pattern
Regular price
€98,00
02A
04A
06A
08A
10A
12A
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids white T-shirt with lettering on the chest
Regular price
€75,00
02A
04A
06A
08A
10A
12A
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids white animal print dress
Regular price
€89,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids red striped swimming briefs
Regular price
€49,00
01A
02A
04A
06A
08A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids green swim briefs with elasticated waistband
Regular price
€49,00
01A
02A
04A
06A
08A
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids blue striped shirt for girls
Regular price
€129,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids black T-shirt with animal print logo patch
Regular price
€69,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids navy blue crew-neck T-shirt
Regular price
€69,00
04A
06A
08A
10A
12A
14A
16A
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids pink animal print trousers for girls
Regular price
€119,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-30% Al carrello
MC2 ST. BARTH
MC2 Saint Barth Amani women's shorts in white with floral print and embroidered logo
Regular price
€159,00
S
M
L
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids blue striped short-sleeved shirt
Regular price
€119,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
Agnes Mc2 Saint Barth Kids green shirt with classic collar
Regular price
€119,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids multicolor Abbie dress for baby girl with embroidered "Bonjour St. Barth" lettering
Regular price
€89,00
03M
06M
09M
12M
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids white blouse for girls with marine-themed embroidery
Regular price
€139,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids white t-shirt with patch motif
Regular price
€129,00
06A
08A
10A
12A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids' multi-colored striped swimming costume
Regular price
€49,00
01A
02A
04A
06A
08A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids light blue swimsuit with logo
Regular price
€49,00
01A
02A
04A
06A
08A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids light blue one-piece swimsuit with bow graphic print
Regular price
€119,00
02A
04A
06A
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids' white T-shirt with graphic print
Regular price
€65,00
02A
04A
06A
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids pink T-shirt with logo on the sleeve
Regular price
€79,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-15% at checkout
MC2 ST. BARTH
MC2 Saint Barth women's white shorts with broderie anglaise lace embroidery
Regular price
€139,00
XS
S
M
L
P26
-10% Add to cart
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids' grey swimsuit with tie detail
Regular price
€89,00
02A
06A
10A
14A
P26
-30% Al carrello
MC2 ST. BARTH
Naomi women's swimsuit MC2 Saint Barth red with underwire cups
Regular price
€157,00
S
M
L
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids white T-shirt with graphic logo print
Regular price
€65,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-30% Al carrello
MC2 ST. BARTH
MC2 Saint Barth women's green zigzag knit bikini with sequins
Regular price
€168,00
S
M
L
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids brown animal print trousers for girls
Regular price
€119,00
02A
04A
06A
08A
10A
12A
14A
16A
P26
-30% Al carrello
MC2 ST. BARTH KIDS
MC2 Saint Barth Kids Aryanna bikini for girls in pink with animal print
Regular price
€89,00
02A
04A
06A
08A
10A
12A
14A
16A
1
2
3
·
Next »
Your cart
Close
Spend
€99,00
more for
free shipping
!
Your order is eligible for free shipping!
Close
Your cart is empty