: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
Moschino P26
Filter
604 products
Sort by
Most relevant
Most relevant
Best selling
Alphabetically, A-Z
Alphabetically, Z-A
Price, low to high
Price, high to low
Date, old to new
Date, new to old
Filters
Season
Spring/Summer
604
Gender
Bambina
208
Bambino
181
Neonata
276
Neonato
219
Brand
MOSCHINO KIDS
604
Product type
Bags
5
Bathrobes
1
Beach towel
1
Blankets and sheets
5
Clothes
54
Complete
60
Costumes
22
Hair
28
Jackets
15
Knitwear
11
Pants
2
Rompers
49
Shirts
12
Shorts
50
skirts
8
Sweatshirts
66
T-shirt
156
T-shirt
43
Trousers
16
Price
€
€
Size
46
48
50
52
54
56
58
02A
03A
04A
05A
06A
08A
10A
12A
14A
01M
03M
06M
09M
12M
18M
I
II
III
UNI
Color
Black
91
Black and White
2
Blue
23
Denim
34
Fuchsia
9
Green
39
Multicolor
36
Neutral Tones
28
Red
32
Rose
80
Sky blue
43
Viola
14
White
149
White
2
Yellow
22
Out of stock
Show
Hide
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
-25% At checkout
MOSCHINO KIDS
Moschino Kids black T-shirt with Teddy Bear print
Sale price
From
€33,00
Regular price
€55,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids red T-shirt with wavy logo print
Sale price
€51,00
Regular price
€85,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids green T-shirt with spiral logo on the front
Sale price
From
€39,00
Regular price
€65,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids white T-shirt with spiral logo on the front
Sale price
From
€39,00
Regular price
€65,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids white leggings for baby girls with logo on the front
Sale price
€39,00
Regular price
€65,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids black dress for girls with graphic Teddy Bear print
Sale price
From
€72,00
Regular price
€119,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids black dress for girls with logo on the front
Sale price
From
€66,00
Regular price
€109,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids pink baby girl sweatshirt with teddy print on the front
Sale price
€54,00
Regular price
€89,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids green baby T-shirt with Teddy Bear print
Sale price
€45,00
Regular price
€75,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids baby sweatshirt in light blue with graphic Teddy Bear print
Sale price
€54,00
Regular price
€89,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids white girl's T-shirt with denim print
Sale price
From
€90,00
Regular price
€149,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids baby blue T-shirt with Teddy Bear print
Sale price
€45,00
Regular price
€75,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids black T-shirt for girls with logo on the front
Sale price
From
€48,00
Regular price
€79,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids red dress for girls with graphic Teddy Bear print
Sale price
From
€72,00
Regular price
€119,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids yellow T-shirt with spiral logo on the front
Sale price
From
€39,00
Regular price
€65,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids white T-shirt for girls with rhinestone logo
Sale price
From
€54,00
Regular price
€89,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids white T-shirt for baby girls with cherry print
Sale price
€48,00
Regular price
€79,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids light blue polo-style collar T-shirt for boys
Sale price
From
€66,00
Regular price
€109,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids multicolor Teddy Bear print T-shirt and shorts set for babies
Sale price
€102,00
Regular price
€169,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids white baby romper and hat set with Teddy Bear print
Sale price
€99,00
Regular price
€165,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids pink baby girl's romper with Teddy Bear embroidery
Sale price
€75,00
Regular price
€125,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids light blue T-shirt with logo on the front
Sale price
From
€42,00
Regular price
€69,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids lilac baby girl romper and hat set with Teddy Bear print
Sale price
€99,00
Regular price
€165,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids baby blue T-shirt with embroidered details
Sale price
€48,00
Regular price
€79,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids pink baby T-shirt with embroidered details
Sale price
€48,00
Regular price
€79,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids baby blue romper with Teddy Bear embroidery
Sale price
€75,00
Regular price
€125,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids multicolored floral print skirt for girls
Sale price
From
€120,00
Regular price
€199,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids white polo-style T-shirt for boys
Sale price
From
€66,00
Regular price
€109,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids baby boy's light blue T-shirt with Teddy print on the front
Sale price
€45,00
Regular price
€75,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids yellow baby sweater with embroidered Teddy on the front
Sale price
€102,00
Regular price
€169,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids pink baby girl T-shirt with Teddy print on the front
Sale price
€45,00
Regular price
€75,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids black baby sweatshirt with embossed details
Sale price
€72,00
Regular price
€119,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids blue baby sweater with embroidered Teddy on the front
Sale price
€102,00
Regular price
€169,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids blue baby T-shirt with teddy bear embroidery
Sale price
€36,00
Regular price
€59,00
-38%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids white baby girl sweatshirt with cherry print
Sale price
€54,00
Regular price
€89,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids red baby girl dress with Teddy Bear heart print
Sale price
€57,00
Regular price
€95,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids white baby sweater with embroidered logo on the front
Sale price
€102,00
Regular price
€169,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids boys' sweater with embroidered Teddy Bear on the front
Sale price
From
€108,00
Regular price
€179,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids white T-shirt for girls with Teddy Bear print
Sale price
From
€48,00
Regular price
€79,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids baby boy's light blue T-shirt with embossed details
Sale price
€42,00
Regular price
€69,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids pink T-shirt for girls with Teddy Bear embroidery
Sale price
From
€36,00
Regular price
€59,00
-38%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids pink T-shirt for baby girls with logo on the front
Sale price
€36,00
Regular price
€59,00
-38%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids white T-shirt for girls with Teddy print on the front
Sale price
From
€42,00
Regular price
€69,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids black T-shirt with logo on the front
Sale price
From
€48,00
Regular price
€79,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids light blue T-shirt with logo on the front
Sale price
From
€48,00
Regular price
€79,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids red baby T-shirt with Teddy Bear print on the front
Sale price
€33,00
Regular price
€55,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids white baby girl dress with teddy bear detail
Sale price
€66,00
Regular price
€109,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschio Kids green baby sweatshirt with teddy print on the front
Sale price
€57,00
Regular price
€95,00
-40%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids pink baby girl T-shirt with embossed details
Sale price
€42,00
Regular price
€69,00
-39%
PE26
-25% At checkout
MOSCHINO KIDS
Moschino Kids baby boy's light blue T-shirt with three teddy bears print
Sale price
€36,00
Regular price
€59,00
-38%
« Previous
·
1
…
8
9
10
11
12
13
·
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
