: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(--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: 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
EXTRA -20% - CLICCA QUI PER SCOPRIRE I PRODOTTI
SALE: UP TO 40% OFF
Country/Region
Italy (EUR €)
Italy (EUR €)
Language
English
Italiano
English
Search
New arrivals
Baby girl (04-16A)
Child (04-16A)
Newborn (0-36M)
Newborn (0-36M)
Footwear
Accessories
Brands
Boutiques
Account
Search
Cart
New arrivals
Girl
Child
Newborn
Newborn
Baby girl (04-16A)
Clothing
T-Shirts & T-Shirts
Sweatshirts
Trousers
skirts
Clothes
Ceremonial
Shorts and Bermuda shorts
Costumes
Jackets
Complete
Knitwear
Jackets
Shirts
Intimate
Coats
Accessories
Bags
Belts/Braces
Hair accessories
Hair
Eyeglasses
Backpacks
Scarves
fanny packs
Bathrobes
Beach towel
Socks & Stockings
Keychain
Gloves
Footwear
Sneakers
Dancers
Sandals
Slippers
Boots
Snow & Rain Boots
Child (04-16A)
Clothing
Clothes
T-Shirts
Sweatshirts
Trousers
Shorts and Bermuda shorts
Jackets
Costumes
Shirts
Jackets
Knitwear
Coats
Complete
Intimate
Accessories
Belts/Braces
Hair
Backpacks
Scarves
Bow Ties and Ties
fanny packs
Eyeglasses
Beach towel
Gloves
Trolleys
Footwear
Sneakers
Classic shoes
Slippers
Sandals
Boots
Snow & Rain Boots
Newborn (0-36M)
Clothing
Rompers/Pajamas
Ceremonial
Complete
T-shirts
Trousers
Knitwear
Sweatshirts
Shorts and Bermuda shorts
Costumes
Coats
Jackets
Jackets
Shirts
Accessories
Bags
Blankets and sheets
bibs
Strollers & Accessories
Hair
Sleeping bag
Socks
baby bottle
Toys
Bow Ties & Ties
Gloves
Footwear
Sneakers
Dancers
Boots
Sandals & Slippers
Newborn (0-36M)
Clothing
Rompers/Pajamas
T-shirts
Clothes
Complete
Ceremonial
Trousers
skirts
Knitwear
Sweatshirts
Shorts and Bermuda shorts
Costumes
Coats
Jackets
Jackets
Shirts
Accessories
Bags
Blankets & Sheets
bibs
Hair accessories
Hair
Sleeping bag
Socks
baby bottle
Toys
Gloves
Footwear
Sneakers
Boots
Sandals & Slippers
Footwear
Girl
Boots
Sneakers
Dancers
Sandals
Slippers
Snow & Rain Boots
Boy
Sneakers
Elegant shoes
Slippers
Sandals
Boots
Snow & Rain Boots
Newborn
Sneakers
Boots
Sandals
Snow & Rain Boots
Newborn
Sneakers
Boots
Sandals
Accessories
Girl
Bags
Hair accessories
Hair
Belts
Eyeglasses
Backpacks
Scarves
fanny packs
Bathrobes
Beach towel
Stockings & Socks
Keychain
Gloves and Mittens
Dolls
Boy
Belts and Suspenders
Hair
Backpacks
Scarves
Bow Ties and Ties
fanny packs
Eyeglasses
Beach towel
Gloves and Mittens
Trolleys and Suitcases
Newborn
Mom bags
Blankets and sheets
bibs
Strollers
Hair
Sleeping bag
Socks set
Bottles & Pacifiers
Toys & Soft Toys
Ties & Bow Ties
Gloves & Mittens
Newborn
Hair accessories
Mom Bags
Blankets & Sheets
bibs
Hair
Sleeping bag
Socks & Stockings
baby bottle
Plush toy
Gloves
Brands
Top Brand
Christian Louboutin Kids
Moschino Kids
Mona Lisa
Stella McCartney
UGG
Balmain
Givenchy
Kenzo
Wharf
Dolce & Gabbana
Ralph Lauren
Fendi
Elizabeth Franchi
Moncler Enfant
Versace
Palm Angels
Discover everything from A to Z
Boutiques
Saldi - Neonato
Filter
2425 products
Sort by
Best selling
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
Season
Estivo
597
Invernale
1828
Type
Girl
8
Bambino
7
Newborn
1009
Neonato
1398
Brand
A'LAPAGE
15
ALBUM DI FAMIGLIA
32
ATTIPAS
15
AVERY ROW
29
BABYWALKER
1
BALMAIN KIDS
28
BARONI
14
BILLIEBLUSH
34
BOBO CHOSES
13
BONPOINT
137
BOSS KIDS
87
BURBERRY KIDS
36
CALVIN KLEIN KIDS
6
CHLOE' KIDS
30
COLORICHIARI
36
DOLCE & GABBANA KIDS
23
DONSJE
108
DOUUOD
6
Dr martens kids
2
ElI
19
ElIE SAAB
3
ElISABETTA FRANCHI
45
EMILIO PUCCI JUNIOR
11
EMPORIO ARMANI KIDS
63
ETRO KIDS
32
FAY KIDS
9
FENDI KIDS
82
GENSAMI
38
GIVENCHY KIDS
37
GOLDEN GOOSE KIDS
1
HERNO KIDS
4
IL GUFO
79
JESURUM
31
JOHN RICHMOND JUNIOR
26
K-WAY KIDS
16
KARL LAGERFELD KIDS
1
KENZO KIDS
29
KOEKA
16
KONGES SLOJD
2
LA STUPENDERIA
143
LOUISE MISHA
16
MAISON AVA
1
MARIELLA FERRARI
90
MIMISOL
1
MINI RODINI
11
MISSONI KIDS
14
MOLO
75
MONCLER ENFANT
6
MONNALISA
174
MONTELPARE TRADITION
2
MOSCHINO KIDS
299
MSGM KIDS
8
OFF WHITE KIDS
10
PAIO CRIPPA
5
PALM ANGELS KIDS
9
PaZ RODRIGUEZ
71
PEPECE'
4
PETIT BATEAU
66
Ralph Lauren kids
35
STELLA McCARTNEY KIDS
87
STORY LORIS
2
TArtine & Chocolat
36
THE MARC JACOBS KIDS
4
TIMBERLAND KIDS
1
TOMMY HILFIGER JUNIOR
4
TRUSSARDI JUNIOR
35
VERSACE KIDS
20
Product type
baby bottle
7
Bags
33
bibs
8
Blankets and sheets
67
Boots
31
Bow ties and ties
4
Clothes
230
Coats
20
Complete
153
Costumes
14
Dancers
2
Elegant Dresses
43
Elegant shoes
13
Gloves
9
Hair
108
Hair accessories
4
Jackets
125
Knitwear
236
Pants
1
Rompers
262
Sandals
6
Shirts
71
Shorts
113
skirts
46
Sleeping bag
12
Sneakers
43
Socks
6
Strollers
2
Sweatshirts
150
T-shirt
2
T-shirts
341
Toys
15
Trousers
246
Waistcoat
2
Price
€
€
Cut
XXS
2
XS
2
16
20
17
35
18
36
19
51
20
25
21
20
22
19
23
2
24
6
25
6
40
1
44
3
46
3
48
4
50
2
52
1
01A
1
02A
1634
03A
1089
04A
221
05A
48
06A
19
08A
1
10A
1
12A
1
14A
1
0M
89
00M
1
01M
224
03M
543
06M
1949
09M
1657
12M
1887
18M
1787
24M
34
36M
1
I
27
II
30
III
28
IV
2
T0
8
T1
22
T2
14
T3
8
UNI
140
Color
Animal print
1
Beige
3
Bianco
698
Black
79
Blu
274
Brown
56
Fuchsia
19
Gold
7
Green
93
Grey
79
Multicolor
94
Neutral Tones
325
Orange
17
Red
114
Rose
330
Silver
1
Sky blue
191
Viola
19
Yellow
25
Out of stock
Show
Hide
Sort by
Best selling
Alphabetically, A-Z
Alphabetically, Z-A
Price, low to high
Price, high to low
Date, old to new
Date, new to old
PE25
Sales
IL GUFO
Il Gufo pink floral print dress for newborn girls with crew neck
Sale price
From
€75,00
Regular price
€151,00
-50%
06M
09M
12M
18M
PE25
Sales
IL GUFO
Il Gufo green floral print dress for baby girls with ruffled neckline
Sale price
From
€60,00
Regular price
€120,00
-50%
06M
09M
12M
18M
PE25
Sales
MONCLER ENFANT
Moncler Enfant pink leggings for baby girls with logo application on the leg
Sale price
€60,00
Regular price
€120,00
-50%
06M
09M
12M
18M
02A
03A
PE25
Sales
BALMAIN KIDS
Balmain Kids white embroidered tracksuit bottoms for babies with ribbed cuffs
Sale price
€102,00
Regular price
€145,00
-29%
06M
09M
12M
18M
02A
03A
PE25
Sales
MONNALISA
Monnalisa white baby girl bodysuit with rhinestones and ruffled collar
Sale price
€36,00
Regular price
€73,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
FENDI KIDS
Fendi Kids white baby blanket with pink embroidery and logo
Sale price
€295,00
Regular price
€590,00
-50%
UNI
AI25
Christmas Sale
MONTELPARE TRADITION
Andrea Montelpare blue lace-up shoes for newborns
Sale price
€63,00
Regular price
€91,00
-30%
17
18
19
AI25
Christmas Sale
MONTELPARE TRADITION
Andrea Montelpare white lace-up shoes for newborns with laces
Sale price
€63,00
Regular price
€91,00
-30%
17
18
19
PE25
Christmas Sale
DOLCE & GABBANA KIDS
Dolce & Gabbana Kids blue baby shorts with side pockets
Sale price
€172,00
Regular price
€345,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
IL GUFO
White Il Gufo baby girl dress with floral embroidery and knot closure
Sale price
From
€75,00
Regular price
€151,00
-50%
06M
09M
12M
18M
PE25
Sales
MONNALISA
Monnalisa green tulle miniskirt for newborns with flared hem
Sale price
€45,00
Regular price
€90,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
BONPOINT
Set of three Bonpoint multicolor baby rompers with boat neckline
Sale price
€52,00
Regular price
€105,00
-50%
01M
03M
06M
12M
18M
02A
PE25
Sales
BONPOINT
Bonpoint white striped baby shirt with classic collar
Sale price
From
€57,00
Regular price
€115,00
-50%
06M
12M
18M
02A
03A
PE25
Sales
CALVIN KLEIN KIDS
Calvin Klein Kids Black Monogram Baby Girl Leggings with Leg Print
Sale price
€12,00
Regular price
€25,00
-52%
06M
09M
12M
18M
02A
03A
PE25
Sales
VERSACE KIDS
Versace Kids gray baby girl dress set with Baroque print
Sale price
€294,00
Regular price
€420,00
-30%
06M
09M
12M
18M
PE25
Sales
FENDI KIDS
Fendi Kids pink overalls for baby girls with yellow stripes and ruffles on the front
Sale price
€295,00
Regular price
€590,00
-50%
03M
06M
09M
12M
18M
02A
PE25
Sales
MONNALISA
Monnalisa white baby girl dress with horizontal striped inserts on the skirt
Sale price
€54,00
Regular price
€108,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
MONNALISA
Monnalisa white floral dress for newborn with satin trim
Sale price
€115,00
Regular price
€230,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
MONNALISA
Monnalisa white tulle dress for newborns with embroidered design
Sale price
€155,00
Regular price
€311,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
BONPOINT
Bonpoint Sardinia bikini bottoms for newborns in red with ruffled insert
Sale price
From
€47,00
Regular price
€95,00
-50%
12M
18M
02A
03A
PE25
Sales
BONPOINT
Bonpoint Nuage white baby girl dress with ruffled trim
Sale price
From
€122,00
Regular price
€245,00
-50%
06M
12M
18M
02A
03A
PE25
Sales
BONPOINT
Bonpoint Cira white baby girl T-shirt with text print
Sale price
From
€27,00
Regular price
€55,00
-50%
06M
12M
18M
02A
03A
PE25
Sales
MONNALISA
Monnalisa pink baby girl jacket with ruffles
Sale price
€70,00
Regular price
€141,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
BONPOINT
Bonpoint Cira beige baby girl's T-shirt with button closure at the back
Sale price
From
€27,00
Regular price
€55,00
-50%
06M
12M
18M
02A
03A
PE25
Sales
PALM ANGELS KIDS
Palm Angels Kids green printed Bermuda shorts for babies with elastic waistband
Sale price
€67,00
Regular price
€135,00
-50%
06M
09M
18M
02A
03A
PE25
Sales
FENDI KIDS
Fendi Kids white baby trousers with logo pocket on the leg
Sale price
€175,00
Regular price
€350,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
PALM ANGELS KIDS
Palm Angels Kids Yellow Curved Brim Embroidery Baseball Cap
Sale price
€70,00
Regular price
€140,00
-50%
I
II
PE25
Sales
MONNALISA
Monnalisa green shorts for girls with logo and side pockets
Sale price
€39,00
Regular price
€79,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
OFF WHITE KIDS
Off-White Kids Pink Stretch Printed Leggings for Baby Girls
Sale price
€48,00
Regular price
€96,00
-50%
06M
09M
18M
02A
03A
PE25
Sales
OFF WHITE KIDS
Off-White Kids Pink Butterfly Print T-Shirt for Baby Girls with Straight Hem
Sale price
€53,00
Regular price
€107,00
-50%
06M
09M
18M
02A
03A
PE25
Sales
MONNALISA
Monnalisa white and pink rhinestone baby girl T-shirt
Sale price
€30,00
Regular price
€60,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
MONNALISA
Monnalisa white t-shirt and leggings set for newborns with pink print
Sale price
€53,00
Regular price
€106,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
MONNALISA
Monnalisa white biker jacket for newborns with ruffled detail
Sale price
€70,00
Regular price
€141,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
MONNALISA
Monnalisa pink baby girl skirt with all-over rose print
Sale price
€57,00
Regular price
€114,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
MOLO
Molo Niko baby swimsuit in blue with shark print
Sale price
€24,00
Regular price
€49,00
-51%
18M
02A
PE25
Sales
FENDI KIDS
Fendi Kids white and beige baby boy's set with front buttons
Sale price
€310,00
Regular price
€620,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
BONPOINT
Bonpoint Evie baby girl bodysuit in beige with ruffled trim
Sale price
€67,00
Regular price
€135,00
-50%
01M
03M
06M
12M
18M
PE25
Sales
BONPOINT
Bonpoint red gold dress for girls with cap sleeves
Sale price
From
€82,00
Regular price
€165,00
-50%
06M
12M
18M
02A
03A
PE25
Sales
BONPOINT
Bonpoint red Naomie blouse for newborns with button fastening at the back
Sale price
From
€62,00
Regular price
€125,00
-50%
06M
12M
18M
02A
03A
PE25
Sales
BONPOINT
Bonpoint white baby girl blouse with lace collar
Sale price
From
€52,00
Regular price
€105,00
-50%
06M
12M
18M
02A
03A
PE25
Sales
BONPOINT
Bonpoint blue logo-patch hat for newborns with curved visor
Sale price
€57,00
Regular price
€115,00
-50%
T1
T2
PE25
Sales
MOLO
Molo baby swimsuit in blue with all-over graphic pattern
Sale price
€24,00
Regular price
€49,00
-51%
18M
02A
PE25
Sales
FENDI KIDS
Fendi Kids gold baby girl dress with bow appliqué
Sale price
€475,00
Regular price
€950,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
FENDI KIDS
Fendi Kids white baby polo shirt with straight hem
Sale price
€175,00
Regular price
€350,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
BURBERRY KIDS
Burberry Kids black baby shorts with Equestrian Knight embroidery on the back
Sale price
€105,00
Regular price
€210,00
-50%
06M
12M
18M
02A
PE25
Sales
BURBERRY KIDS
Burberry Kids beige baby shorts with Equestrian Knight embroidery on the back
Sale price
€105,00
Regular price
€210,00
-50%
06M
12M
18M
02A
PE25
Sales
FENDI KIDS
Fendi Kids blue polo shirt for newborns with contrasting logo collar
Sale price
€175,00
Regular price
€350,00
-50%
06M
09M
12M
18M
02A
FW24
Sales
KOEKA
Koeka Teddy Oslo Baby Sleeping Bag, Natural Beige
Sale price
€48,00
Regular price
€96,00
-50%
0M
FW24
Sales
KOEKA
Koeka Amsterdam Bonn Changing Table Cover in Natural Green with Honeycomb Fabric
Sale price
€30,00
Regular price
€60,00
-50%
UNI
FW24
Sales
KOEKA
Koeka Dijon Daily Baby Bib with Sleeves, Clay Brown
Sale price
€12,00
Regular price
€24,00
-50%
UNI
« Previous
·
1
…
45
46
47
48
49
·
Next »
Your cart
Close
Spend
€99,00
more for
free shipping
!
Your order is eligible for free shipping!
Close
Your cart is empty
