: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
U.S. Outlying Islands (USD $)
U.S. Outlying Islands (USD $)
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 - Neonata
Filter
1756 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
414
Invernale
1342
Type
Girl
10
Newborn
1110
Neonato
636
Brand
A'LAPAGE
15
ALBUM DI FAMIGLIA
14
ATTIPAS
17
AVERY ROW
30
BALMAIN KIDS
16
BARONI
6
BILLIEBLUSH
36
BOBO CHOSES
7
BONPOINT
90
BOSS KIDS
3
BURBERRY KIDS
24
CALVIN KLEIN KIDS
3
CHLOE' KIDS
31
COLORICHIARI
16
DOLCE & GABBANA KIDS
16
DONSJE
94
DOUUOD
6
Dr martens kids
2
ElI
11
ElIE SAAB
3
ElISABETTA FRANCHI
47
EMILIO PUCCI JUNIOR
14
EMPORIO ARMANI KIDS
27
ETRO KIDS
19
FENDI KIDS
46
FLORENS
3
GENSAMI
28
GIVENCHY KIDS
20
GOLDEN GOOSE KIDS
5
HERNO KIDS
2
IL GUFO
43
JESURUM
19
JOHN RICHMOND JUNIOR
14
K-WAY KIDS
14
KARL LAGERFELD KIDS
1
KENZO KIDS
11
KOEKA
16
KONGES SLOJD
2
LA STUPENDERIA
103
LOUISE MISHA
8
MAISON AVA
4
MARIELLA FERRARI
81
MIMISOL
1
MINI RODINI
7
MISSONI KIDS
7
MOLO
54
MONCLER ENFANT
5
MONNALISA
192
MONTELPARE TRADITION
8
MOSCHINO KIDS
254
MOU KIDS
1
MSGM KIDS
5
OFF WHITE KIDS
2
PALM ANGELS KIDS
4
PaZ RODRIGUEZ
61
PEPECE'
4
PETIT BATEAU
58
Ralph Lauren kids
23
STELLA McCARTNEY KIDS
55
STORY LORIS
2
TArtine & Chocolat
15
THE MARC JACOBS KIDS
2
TIMBERLAND KIDS
1
TOMMY HILFIGER JUNIOR
1
VERSACE KIDS
27
Product type
baby bottle
7
Bags
33
bibs
8
Blankets and sheets
67
Boots
34
Clothes
233
Coats
16
Complete
100
Costumes
9
Dancers
37
Elegant Dresses
36
Gloves
6
Hair
78
Hair accessories
24
Jackets
73
Knitwear
149
Rompers
202
Sandals
5
Shirts
31
Shorts
46
skirts
48
Sleeping bag
13
Sneakers
37
Socks
6
Strollers
2
Sweatshirts
100
T-shirt
2
T-shirts
220
Toys
15
Trousers
118
Waistcoat
1
Cut
XXS
15
XS
15
S
1
M
1
15
2
16
33
17
46
18
51
19
66
20
41
21
38
22
36
23
15
24
12
25
9
26
4
46
1
48
1
50
1
01A
4
02A
1061
03A
668
04A
155
05A
48
06A
8
08A
1
10A
1
0M
69
01M
181
03M
416
06M
1292
09M
1070
12M
1248
18M
1167
24M
27
36M
1
I
29
II
30
III
29
IV
2
T0
2
T1
12
T2
10
T3
7
UNI
152
Color
Animal print
1
Beige
3
Bianco
570
Black
38
Blu
96
Brown
33
Fuchsia
20
Gold
10
Green
54
Grey
39
Multicolor
69
Neutral Tones
215
Orange
12
Red
91
Rose
364
Silver
1
Sky blue
104
Viola
18
Yellow
18
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
AI25
Christmas Sale
MONNALISA
Monnalisa white baby girl T-shirt with teddy bear print
Sale price
$84.00
Regular price
$122.00
-31%
06M
09M
12M
18M
02A
AI25
Christmas Sale
MONNALISA
Monnalisa pink trousers for newborns with elastic waist
Sale price
$91.00
Regular price
$131.00
-30%
06M
09M
12M
18M
02A
AI25
Christmas Sale
MONNALISA
Monnalisa white blouse for baby girls with floral print
Sale price
$66.00
Regular price
$97.00
-31%
06M
09M
12M
18M
02A
AI25
Christmas Sale
MONNALISA
Monnalisa beige skirt for girls with ruffled design
Sale price
$152.00
Regular price
$218.00
-30%
06M
09M
12M
18M
02A
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids pink baby girl T-shirt with embroidered teddy bear
Sale price
$98.00
Regular price
$141.00
-30%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
DOLCE & GABBANA KIDS
Dolce & Gabbana Kids white floral print baby girl T-shirt
Sale price
$305.00
Regular price
$437.00
-30%
06M
09M
12M
18M
02A
AI25
Christmas Sale
DOLCE & GABBANA KIDS
Dolce & Gabbana Kids white floral trousers for baby girls
Sale price
$243.00
Regular price
$348.00
-30%
06M
09M
12M
18M
02A
AI25
Christmas Sale
ElISABETTA FRANCHI
Elisabetta Franchi La Mia Bambina white dress for newborns with Peter Pan collar
Sale price
$362.00
Regular price
$517.00
-29%
06M
09M
12M
18M
02A
03A
04A
05A
AI25
Christmas Sale
ElISABETTA FRANCHI
Elisabetta Franchi La Mia Bambina white dress for newborns with geometric print
Sale price
$359.00
Regular price
$513.00
-30%
06M
09M
12M
18M
02A
03A
04A
05A
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids red cardigan for baby girls with Teddy Bear applique
Sale price
$198.00
Regular price
$284.00
-30%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids pink dress for baby girls with teddy print
Sale price
$136.00
Regular price
$195.00
-30%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids white cardigan for baby girls with Teddy Bear applique
Sale price
$198.00
Regular price
$284.00
-30%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids red graphic print baby T-shirt
Sale price
$98.00
Regular price
$141.00
-30%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
GENSAMI
Gensami Kids white baby cardigan with front button closure
Sale price
$195.00
Regular price
$278.00
-29%
03M
06M
09M
12M
18M
AI25
Christmas Sale
GENSAMI
Gensami Kids Baby Blanket, White with Yellow Trim
Sale price
$195.00
Regular price
$278.00
-29%
UNI
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids beige baby pajamas with teddy print and Peter Pan collar
Sale price
$136.00
Regular price
$195.00
-30%
01M
03M
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids White Teddy Bear Baby Onesie with Hood
Sale price
$268.00
Regular price
$383.00
-30%
01M
03M
06M
09M
12M
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids blue baby down jacket with logo print
Sale price
$398.00
Regular price
$569.00
-30%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
STELLA McCARTNEY KIDS
Stella McCartney Kids pink baby girl sweatshirt with bird print
Sale price
$93.00
Regular price
$116.00
-19%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids white hat and bib set with print
Sale price
$93.00
Regular price
$134.00
-30%
I
II
III
AI25
Christmas Sale
EMPORIO ARMANI KIDS
Emporio Armani Kids beige baby girl dress with all-over logo
Sale price
$145.00
Regular price
$241.00
-39%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
MONNALISA
Monnalisa baby girl's blue skirt with floral pattern
Sale price
$152.00
Regular price
$218.00
-30%
06M
09M
12M
18M
02A
AI25
Christmas Sale
STELLA McCARTNEY KIDS
Stella McCartney Kids white graphic print baby girl T-shirt
Sale price
$79.00
Regular price
$98.00
-19%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
MONNALISA
Monnalisa red tracksuit bottoms for baby girls with side stripes
Sale price
$84.00
Regular price
$122.00
-31%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
PaZ RODRIGUEZ
Paz Rodríguez white baby girl dress with scalloped hem
Sale price
$104.00
Regular price
$150.00
-30%
01M
03M
06M
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids baby boy's light blue romper and hat set with embroidered teddy bear
Sale price
$261.00
Regular price
$373.00
-30%
01M
03M
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids white baby romper and hat set with embroidered teddy bear
Sale price
$261.00
Regular price
$373.00
-30%
01M
03M
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids pink baby changing bag with Teddy Bear print
Sale price
$360.00
Regular price
$515.00
-30%
UNI
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids white hat and bib set for newborns with teddy bear print
Sale price
$93.00
Regular price
$134.00
-30%
I
II
III
AI25
Christmas Sale
KENZO KIDS
Kenzo Kids pink baby girl dress with logo print
Sale price
From
$138.00
Regular price
$196.00
-29%
06M
09M
12M
18M
02A
03A
04A
AI25
Christmas Sale
KENZO KIDS
Kenzo Kids pink tracksuit set for baby girls with back logo print
Sale price
From
$193.00
Regular price
$277.00
-30%
06M
09M
12M
18M
02A
03A
04A
AI25
Christmas Sale
KENZO KIDS
Kenzo Kids pink tracksuit set for baby girls with printed logo
Sale price
From
$205.00
Regular price
$294.00
-30%
06M
09M
12M
18M
02A
03A
04A
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids blue baby T-shirt with logo print
Sale price
$61.00
Regular price
$88.00
-30%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
THE MARC JACOBS KIDS
The Marc Jacobs Kids pink baby girl dress with heart print
Sale price
From
$98.00
Regular price
$141.00
-30%
01M
03M
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids Grey Baby Changing Bag with Teddy Bear Print
Sale price
$360.00
Regular price
$515.00
-30%
UNI
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids baby hat and bib set in light blue with Teddy Bear motif
Sale price
$111.00
Regular price
$159.00
-30%
I
II
III
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids pink hat and bib set for baby girls with Teddy Bear motif
Sale price
$93.00
Regular price
$134.00
-30%
I
II
III
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids baby hat and bib set in light blue with Teddy Bear motif
Sale price
$93.00
Regular price
$134.00
-30%
I
II
III
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids white baby T-shirt with teddy print
Sale price
$68.00
Regular price
$98.00
-30%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids white baby T-shirt with teddy motif
Sale price
$86.00
Regular price
$123.00
-30%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
GIVENCHY KIDS
Givenchy Kids beige t-shirt, trousers and hat set for baby girls with embroidered logo
Sale price
$442.00
Regular price
$633.00
-30%
01M
03M
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids pink baby hat with Teddy logo
Sale price
$61.00
Regular price
$88.00
-30%
I
II
III
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids red baby sweatshirt with Teddy Bear print
Sale price
$136.00
Regular price
$195.00
-30%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids baby sleeping bag in light blue with teddy print
Sale price
$230.00
Regular price
$330.00
-30%
UNI
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids baby blue onesie with Peter Pan collar
Sale price
$198.00
Regular price
$284.00
-30%
01M
03M
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids pink baby girl dress with Teddy Bear logo
Sale price
$143.00
Regular price
$205.00
-30%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
MOSCHINO KIDS
Moschino Kids pink baby girl sweatshirt with distinctive teddy motif
Sale price
$93.00
Regular price
$134.00
-30%
06M
09M
12M
18M
02A
03A
AI25
Christmas Sale
GIVENCHY KIDS
Givenchy Kids pink logo print baby girl sweatpants
Sale price
From
$193.00
Regular price
$277.00
-30%
06M
09M
12M
18M
02A
03A
Sales
LOUISE MISHA
Louise Misha Morlina yellow short-sleeved baby dress
Sale price
From
$72.00
Regular price
$143.00
-49%
12M
18M
02A
Sales
STORY LORIS
Body with decoration
Sale price
$41.00
Regular price
$82.00
-50%
01M
03M
06M
09M
12M
« Previous
·
1
…
7
8
9
10
11
…
36
·
Next »
Your cart
Close
Close
Your cart is empty
