: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"; --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-dialog-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); /* 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(--shadow-spacing-xs); margin-block-end: var(--shadow-spacing-xs); text-align: start; width: -webkit-fill-available; white-space: normal; } *, *::before, *::after { box-sizing: inherit; } /* gift block launcher */ gift-block-launcher { display: flex; flex-direction: column; gap: var(--shadow-spacing-xs); & 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[orders-limit-reached] { 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-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(--shadow-border-width) solid var(--shadow-dialog-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-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(--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-dialog-actions { align-items: flex-end; background-color: var(--shadow-primary-surface); bottom: 0; display: flex; flex-direction: column; gap: var(--shadow-spacing-sm); grid-area: gift-dialog-actions; overscroll-behavior: contain; position: sticky; padding: var(--shadow-spacing-lg); z-index: 1; & button { border-radius: var(--shadow-border-radius-sm); border-width: var(--shadow-border-width); border-style: solid; cursor: pointer; font-family: var(--wrapped-actions-button-font-family, var(--shadow-font-family)); font-size: var(--shadow-font-size-base); font-weight: var(--shadow-font-weight-md); font-style: var(--shadow-button-font-style); letter-spacing: var(--shadow-button-letter-spacing); text-transform: var(--shadow-button-text-transform); padding: var(--shadow-spacing-sm); position: relative; width: 100%; transition: background-color var(--shadow-transition-duration) ease, border-color var(--shadow-transition-duration) ease, color var(--shadow-transition-duration) ease, opacity var(--shadow-transition-duration) ease; &.primary { background-color: var(--shadow-primary-button-surface); border-color: var(--shadow-primary-button-border-surface); color: var(--shadow-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(--shadow-primary-button-surface--hover); border-color: var(--shadow-primary-button-border-surface--hover); color: var(--shadow-primary-button-text-color--hover); } &:active { background-color: var(--shadow-primary-button-surface--active); border-color: var(--shadow-primary-button-border-surface--active); color: var(--shadow-primary-button-text-color--active); } &[loading] { background-color: var(--shadow-primary-button-surface--active); border-color: var(--shadow-primary-button-border-surface--active); color: var(--shadow-primary-button-text-color--active); pointer-events: none; .button-content { opacity: 0; } } } &.secondary { background-color: var(--shadow-secondary-button-surface); border-color: var(--shadow-secondary-button-border-surface); color: var(--shadow-secondary-button-text-color); display: flex; align-items: center; justify-content: center; .button-content { display: flex; align-items: center; justify-content: center; gap: var(--shadow-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(--shadow-transition-duration) ease-in-out; } } &:hover { background-color: var(--shadow-secondary-button-surface--hover); border-color: var(--shadow-secondary-button-border-surface--hover); color: var(--shadow-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(--shadow-secondary-button-surface--active); border-color: var(--shadow-secondary-button-border-surface--active); .icon-wrapper { transition: filter var(--shadow-transition-duration) ease-in-out; } } &[hidden] { display: none; } &[loading] { background-color: var(--shadow-secondary-button-surface--active); border-color: var(--shadow-secondary-button-border-surface--active); color: var(--shadow-secondary-button-text-color--active); pointer-events: none; .button-content { opacity: 0; } .spinner .svg-wrapper svg { fill: var(--shadow-secondary-button-text-color--active); } } } &:disabled { cursor: var(--shadow-disabled-cursor); opacity: var(--shadow-disabled-opacity); pointer-events: none; .button-content { pointer-events: none; opacity: calc(var(--shadow-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(--shadow-spinner-duration) cubic-bezier(0, 0, 1, 1) infinite; fill: var(--shadow-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(--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 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-dialog-message { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--shadow-spacing-base); } & .option-group { display: flex; flex-direction: column; gap: var(--shadow-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(--shadow-disabled-cursor); pointer-events: none; opacity: var(--shadow-disabled-opacity-md); transition: background-color var(--shadow-transition-duration) ease, color var(--shadow-transition-duration) ease; & .message-field { background-color: var(--shadow-form-element-surface--disabled); color: transparent; outline-color: var(--shadow-form-element-border-color--disabled); pointer-events: none; } } &.option-group-hidden { display: none; } & label { font-size: var(--shadow-font-size-sm); font-weight: var(--shadow-font-weight-base); color: var(--shadow-secondary-text-color); line-height: 1em; } & .message-field { background-color: var(--shadow-form-element-surface); color: var(--shadow-form-element-text-color); width: 100%; padding: var(--shadow-spacing-sm); border: none; border-radius: var(--shadow-border-radius-sm); font-family: var(--shadow-font-family); font-size: var(--shadow-font-size-base); outline: var(--shadow-border-width) solid var(--shadow-form-element-border-color); min-height: 42px; } & .message-field:active, & .message-field:focus, & .message-field:focus-within, & .message-field:focus-visible { outline-color: var(--shadow-form-element-selection-color); outline-width: var(--shadow-outline-width); } & .message-field::placeholder { color: var(--shadow-form-element-placeholder-text-color); } & textarea.message-field { min-height: 100px; resize: vertical; } & .counter { color: var(--shadow-secondary-text-color); font-size: var(--shadow-font-size-sm); line-height: normal; } } } /* shopify variant selector */ shopify-variant-selector { font-size: var(--shadow-font-size-sm); width: 100%; &[variants-count="1"] { display: none; } } shopify-variant-selector::part(form) { gap: var(--shadow-spacing-base); } shopify-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; } shopify-variant-selector::part(radio):active { outline-color: var(--shadow-form-element-selection-color--active); outline-width: var(--shadow-outline-width); } shopify-variant-selector::part(radio):hover { outline-color: var(--shadow-form-element-selection-color--hover); } shopify-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; } shopify-variant-selector::part(radio-selected) { outline-color: var(--shadow-form-element-selection-color); outline-width: var(--shadow-outline-width); pointer-events: none; } shopify-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; } shopify-variant-selector::part(select):focus, shopify-variant-selector::part(select):focus-visible { outline-color: var(--shadow-form-element-selection-color); outline-width: var(--shadow-outline-width); } shopify-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; } shopify-variant-selector::part(color-swatch):active { outline-color: var(--shadow-form-element-selection-color--active); outline-width: var(--shadow-outline-width); } shopify-variant-selector::part(color-swatch):hover { outline-color: var(--shadow-form-element-selection-color--hover); } shopify-variant-selector::part(color-swatch-selected) { outline-color: var(--shadow-form-element-selection-color); outline-width: var(--shadow-outline-width); } shopify-variant-selector::part(color-swatch-selected):after { content: unset; } shopify-variant-selector::part(color-swatch-label) { color: var(--shadow-secondary-text-color); } shopify-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; } shopify-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); } /* 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-dialog-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-dialog-actions { min-width: var(--shadow-section-max-width); max-width: var(--shadow-section-max-width); padding: var(--shadow-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(--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; } } } } /* animations for loaders */ @keyframes spin { 100% { transform: rotate(1turn); } } @keyframes unblur { from { filter: blur(2px); } to { filter: blur(0px); } }
Skip to content
Sale 50% + Extra 10%
Free shipping over €99
Country/Region
Italy (EUR €)
Italy (EUR €)
Language
English
Italiano
English
Search
New In
Girl (04-16A)
Boy (04-16A)
Baby Boy (0-36M)
Baby Girl (0-36M)
Footwear
Accessories
Brands
Outlet
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
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
MC2 Saint Barth
Balmain
Givenchy
Kenzo
Molo
Dolce & Gabbana
Ralph Lauren
Fendi
Elisabetta Franchi
Moncler Enfant
Christian Louboutin Kids
Palm Angels
See All Brand (A-Z)
Outlet
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
Spring/Summer 26
Filter
7506 products
Sort by
Best selling
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
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa green slippers for girls with buckle
Regular price
From
€125,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa brown slippers for girls with buckle
Regular price
From
€125,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa pink T-strap sandals for girls with bow
Regular price
From
€215,00
PE26
15% off at checkout
MONNALISA KIDS
Monnalisa white dress for girls with graphic print on the front
Regular price
€141,00
PE26
15% off at checkout
MONNALISA KIDS
Monnalisa blue T-shirt for girls with striped pattern and decorative print
Regular price
€95,00
PE26
15% off at checkout
MONNALISA KIDS
Monnalisa red striped T-shirt for girls with graphic print on the front
Regular price
€95,00
PE26
15% off at checkout
MONNALISA KIDS
Monnalisa pink dress for girls with floral appliques
Regular price
From
€268,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa white dress for girls with floral appliques
Regular price
From
€268,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa white skirt for girls with rhinestones
Regular price
From
€133,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa green skirt for girls with all-over floral print
Regular price
From
€227,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa white T-shirt for girls with floral graphic on the front
Regular price
From
€87,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa white pleated Bermuda shorts for girls
Regular price
From
€133,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa girls' white and purple floral print sandals
Regular price
From
€70,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa Sweet Candies white graphic print T-shirt for girls
Regular price
€68,00
PE26
-15% at checkout
ZIMMERMANN KIDS
Zimmermann Kids Multi-Colored Halter Neck Daylight Costume for Girls
Regular price
€151,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa baby girl's blue trousers with all-over graphic print
Regular price
€63,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa white crew neck top for girls
Regular price
From
€52,00
PE26
15% off at checkout
VERSACE KIDS
Versace Kids multicolored swimsuit for baby girls with Medusa motif print
Regular price
€220,00
PE26
15% off at checkout
MONNALISA KIDS
Monnalisa blue striped dress for girls
Regular price
€203,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa girls' blue shorts with striped pattern
Regular price
€87,00
PE26
-15% at checkout
MONNALISA KIDS
Monnalisa red shorts for girls with striped pattern
Regular price
€87,00
PE26
-10% Add to cart
Ralph Lauren kids
Polo Ralph Lauren Kids White Polo Bear Baby Romper, Hat, and Bib Set
Regular price
€139,00
PE26
-15% at checkout
MOLO KIDS
Molo Kids beige baby girl swimsuit with all-over print
Regular price
€55,00
PE26
15% off at checkout
MOLO KIDS
Molo Kids beige baby costume with all-over banana print
Regular price
€55,00
PE26
15% off at checkout
MOLO KIDS
Beige Molo baby costume with banana print
Regular price
€35,00
PE26
-15% at checkout
DOLCE & GABBANA KIDS
Dolce & Gabbana Kids white ballet flats with logo for girls
Regular price
€325,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids pink sweatshirt for girls with logo print on the front
Regular price
€90,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids grey jacket with Bugs graphic print
Regular price
€165,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids yellow sweatshirt with bug print on the front
Regular price
€85,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids green sweatshirt with graphic print on the back
Regular price
€85,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids girls' denim shorts with floral crochet decorations on the back
Regular price
€105,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids pink floral print tracksuit bottoms for girls
Regular price
€90,00
PE26
15% off at checkout
MOLO KIDS
Molo Kids yellow baby girl's swimsuit with all-over lemon print
Regular price
€55,00
PE26
-15% at checkout
MOLO KIDS
Molo Kids Blue Long-Sleeved Girls' Costume
Regular price
From
€69,00
PE26
-15% at checkout
MOLO KIDS
Molo Kids beige floral print baby girl costume
Regular price
€35,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids white drawstring shorts for girls
Regular price
€75,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids green trousers with heart details for girls
Regular price
€145,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids white shorts for girls with floral print on the back
Regular price
€105,00
PE26
-15% at checkout
MOLO KIDS
Beige Molo baby girl costume with all-over print
Regular price
€39,00
PE26
-15% at checkout
MOLO KIDS
Molo Kids Blue Graphic Print Swimsuit for Boys
Regular price
From
€49,00
PE26
-15% at checkout
BURBERRY KIDS
Burberry Kids blue polo shirt with embroidered logo for babies
Regular price
€140,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids red dress for girls with all-over horse print
Regular price
€140,00
PE26
-15% at checkout
DOLCE & GABBANA KIDS
Dolce & Gabbana Kids black bow tie with logo
Regular price
€95,00
PE26
-15% at checkout
BURBERRY KIDS
Burberry Kids Sand Beige Baby Blanket with Frayed Edge
Regular price
€351,00
PE26
-15% at checkout
BURBERRY KIDS
Burberry Kids cornflower blue checked shorts for boys
Regular price
€250,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids multicoloured baby girl dress with all-over logo print
Regular price
€115,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids yellow T-shirt with graphic print on the front
Regular price
€60,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids white T-shirt with graphic print on the front
Regular price
€60,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids grey T-shirt with graphic writing on the front
Regular price
€60,00
PE26
-15% at checkout
STELLA McCARTNEY KIDS
Stella McCartney Kids yellow T-shirt with "Stella McCartney" lettering on the front
Regular price
€65,00
« Previous
·
1
…
147
148
149
150
151
·
Next »
Your cart
Close
Spend
€99,00
more for
free shipping
!
Your order is eligible for free shipping!
Close
Your cart is empty
Close
MOSCHINO ORA AL -40%
Limited time
Bambina & Neonata
Bambino & Neonato
