: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: 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); } }
Passa ai contenuti
EXTRA -30% - CLICCA QUI PER SCOPRIRE I PRODOTTI
10% Nuovi Arrivi PE26
Paese/Regione
Italia (EUR €)
Italia (EUR €)
Lingua
Italiano
Italiano
English
Cerca
Nuovi arrivi
Bimba (04-16A)
Bimbo (04-16A)
Neonato (0-36M)
Neonata (0-36M)
Calzature
Accessori
Brands
Boutique
Account
Cerca
Carrello
Nuovi arrivi
Bambina
Abbigliamento
Scarpe
Borse & Accessori
𝗩𝗲𝗱𝗶 𝘁𝘂𝘁𝘁𝗶 𝗶 𝗽𝗿𝗼𝗱𝗼𝘁𝘁𝗶 𝗕𝗮𝗺𝗯𝗶𝗻𝗮
Bambino
Abbigliamento
Scarpe
Zaini & Accessori
𝗩𝗲𝗱𝗶 𝘁𝘂𝘁𝘁𝗶 𝗶 𝗽𝗿𝗼𝗱𝗼𝘁𝘁𝗶 𝗕𝗮𝗺𝗯𝗶𝗻𝗼
Neonata
Abbigliamento
Scarpe
Borse & Accessori
𝗩𝗲𝗱𝗶 𝘁𝘂𝘁𝘁𝗶 𝗶 𝗽𝗿𝗼𝗱𝗼𝘁𝘁𝗶 𝗡𝗲𝗼𝗻𝗮𝘁𝗮
Neonato
Abbigliamento
Scarpe
Borse & Accessori
𝗩𝗲𝗱𝗶 𝘁𝘂𝘁𝘁𝗶 𝗶 𝗽𝗿𝗼𝗱𝗼𝘁𝘁𝗶 𝗡𝗲𝗼𝗻𝗮𝘁𝗼
Bimba (04-16A)
Abbigliamento
T-Shirt & Magliette
Felpe
Pantaloni
Gonne
Abiti
Cerimoniale
Shorts e Bermuda
Costumi
Giubbini
Completi
Maglieria
Giacche
Camicie
Intimo
Cappotti
Accessori
Borse
Cinture/Bretelle
Accessori per capelli
Cappelli
Occhiali
Zaini
Sciarpe
Marsupi
Accappatoi
Telo Mare
Calze & Calzini
Portachiavi
Guanti
Calzature
Sneakers
Ballerine
Sandali
Ciabatte
Stivali
Stivali da neve & Pioggia
Bimbo (04-16A)
Abbigliamento
Abiti
T-Shirt
Felpe
Pantaloni
Shorts e Bermuda
Giubbini
Costumi
Camicie
Giacche
Maglieria
Cappotti
Completi
Intimo
Accessori
Cinture/Bretelle
Cappelli
Zaini
Sciarpe
Papillon e Cravatte
Marsupi
Occhiali
Telo Mare
Guanti
Trolley
Calzature
Sneakers
Scarpe classiche
Ciabatte
Sandali
Stivali
Stivali da neve & pioggia
Neonato (0-36M)
Abbigliamento
Tutine/Pigiama
Cerimoniale
Completi
T-shirt
Pantaloni
Maglieria
Felpe
Shorts e Bermuda
Costumi
Cappotti
Giubbini
Giacche
Camicie
Accessori
Borse
Coperte e lenzuola
Bavaglini
Passeggini & Accessori
Cappelli
Sacco Nanna
Calzini
Biberon
Giocattoli
Papillon & Cravatte
Guanti
Calzature
Sneakers
Ballerine
Stivali
Sandali & Ciabatte
Neonata (0-36M)
Abbigliamento
Tutine/Pigiama
T-shirt
Abiti
Completi
Cerimoniale
Pantaloni
Gonne
Maglieria
Felpe
Shorts e Bermuda
Costumi
Cappotti
Giubbini
Giacche
Camicie
Accessori
Borse
Coperte & Lenzuola
Bavaglini
Accessori per capelli
Cappelli
Sacco Nanna
Calzini
Biberon
Giocattoli
Guanti
Calzature
Sneakers
Stivali
Sandali & Ciabatte
Calzature
Girl
Stivali
Sneakers
Ballerine
Sandali
Ciabatte
Stivali da neve & pioggia
Boy
Sneakers
Scarpe Eleganti
Ciabatte
Sandali
Stivali
Stivali da neve & pioggia
Neonato
Sneakers
Stivali
Sandali
Stivali da neve & pioggia
Neonata
Sneakers
Stivali
Sandali
Accessori
Girl
Borse
Accessori per capelli
Cappelli
Cinture
Occhiali
Zaini
Sciarpe
Marsupi
Accappatoi
Telo mare
Calze & Calzini
Portachiavi
Guanti e Muffole
Bambole
Boy
Cinture e Bretelle
Cappelli
Zaini
Sciarpe
Papillon e Cravatte
Marsupi
Occhiali
Telo Mare
Guanti e Muffole
Trolley e Valigie
Neonato
Borse mamma
Coperte e lenzuola
Bavaglini
Passeggini
Cappelli
Sacco Nanna
Set calzini
Biberon & Ciucci
Giocattoli & Peluche
Cravatte & Papillon
Guanti & Muffole
Neonata
Accessori per capelli
Borse Mamma
Coperte & Lenzuola
Bavaglini
Cappelli
Sacco Nanna
Calzini & Calze
Biberon
Peluche
Guanti
Brands
Top Brand
Christian Louboutin Kids
Moschino Kids
Monnalisa
Stella McCartney
UGG
Balmain
Givenchy
Kenzo
Molo
Dolce & Gabbana
Ralph Lauren
Fendi
Elisabetta Franchi
Moncler Enfant
Versace
Palm Angels
Scopri Tutti dalla A alla Z
Boutique
Prodotti
Filtro
10653 prodotti
Ordina per
In ordine alfabetico, A-Z
Best seller
In ordine alfabetico, A-Z
In ordine alfabetico, Z-A
Prezzo crescente
Prezzo decrescente
Data, da meno a più recente
Data, da più a meno recente
Filtri
Ordina per
Best seller
In ordine alfabetico, A-Z
In ordine alfabetico, Z-A
Prezzo crescente
Prezzo decrescente
Data, da meno a più recente
Data, da più a meno recente
PE26
Exclusive
ElISABETTA FRANCHI
Bavaglino per neonata Elisabetta Franchi La Mia Bambina rosa con logo ricamato
Prezzo normale
€50,00
UNI
PE26
Exclusive
MONNALISA
Bavaglino per neonata Monnalisa bianco con ruches
Prezzo normale
€41,00
01M
03M
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux bianco con stampa
Prezzo normale
€48,00
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux bianco con stampa
Prezzo normale
€48,00
Esaurito
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux bianco con stampa
Prezzo normale
€48,00
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux bianco con stampa
Prezzo normale
€48,00
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux bianco con stampa
Prezzo normale
€48,00
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux bianco con stampa
Prezzo normale
€48,00
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux bianco con stampa
Prezzo normale
€48,00
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux bianco con stampa
Prezzo normale
€48,00
Esaurito
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux bianco con stampa carosello
Prezzo normale
€48,00
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux bianco con stampa carosello
Prezzo normale
€48,00
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux Dollhouse bianco con stampa grafica
Prezzo normale
€48,00
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux giallo con stampa zodiacale
Prezzo normale
€48,00
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux multicolore con stampa Paris
Prezzo normale
€48,00
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux Paris bianco con decorazione natalizia
Prezzo normale
€48,00
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Bavaglino per neonati Atelier Choux verde con stampa
Prezzo normale
€48,00
UNI
PE26
Exclusive
DONSJE
Bavaglino per neonati Donsje marrone con ricamo coniglietto
Prezzo normale
€39,00
UNI
PE26
Exclusive
PETIT BATEAU
Bavaglino per neonati Petit Bateau bianco con stampa a cuori all-over
Prezzo normale
€15,00
UNI
PE26
Exclusive
PETIT BATEAU
Bavaglino per neonati Petit Bateau bianco con stampa cuori all-over
Prezzo normale
€15,00
UNI
AI25
-30% Extra Al Checkout
LA STUPENDERIA
Bavaglino per neonato La Stupenderia azzurro con dettaglio ricamato
Prezzo di vendita
€35,00
Prezzo normale
€50,00
-30%
UNI
AI25
-30% Extra Al Checkout
LA STUPENDERIA
Bavaglino per neonato La Stupenderia bianco con motivo a cuore azzurro
Prezzo di vendita
€26,00
Prezzo normale
€38,00
-31%
UNI
PE26
Exclusive
ATELIER CHOUX PARIS
Baviglino in Bloom per neonati Atelier Choux multicolore con stampa grafica all-over
Prezzo normale
€48,00
UNI
PE26
Exclusive
MONNALISA
Bear Trick per bambina Monnalisa beige con fiore rosa
Prezzo normale
€52,00
UNI
PE26
Exclusive
MONNALISA
Bear Trick per bambina Monnalisa beige con iconico fiocco
Prezzo normale
€52,00
UNI
AI25
-30% Extra Al Checkout
AVERY ROW
Beauty case per neonati Avery Row beige trapuntato in cotone biologico
Prezzo di vendita
€31,00
Prezzo normale
€45,00
-31%
UNI
AI25
-30% Extra Al Checkout
AVERY ROW
Beauty case per neonati Avery Row grigio chiaro trapuntato in cotone biologico
Prezzo di vendita
€31,00
Prezzo normale
€45,00
-31%
UNI
PE26
Exclusive
BONPOINT
Beautycase per neonati Bonpoint bianca con logo sul davanti
Prezzo normale
€60,00
UNI
PE26
Exclusive
MONNALISA
Bermuda per bambina Monnalisa bianco con pieghe
Prezzo normale
Da
€133,00
04A
06A
08A
10A
12A
14A
15A
16A
PE25
Sales
MOLO
Bermuda cargo per bambino Molo beige con due tasche laterali
Prezzo di vendita
Da
€29,00
Prezzo normale
€59,00
-50%
02A
03A
04A
05A
06A
08A
10A
12A
14A
15A
16A
PE25
Sales
ElISABETTA FRANCHI
Bermuda con logo per bambina Elisabetta Franchi La Mia Bambina rosa con dettaglio fiocco
Prezzo di vendita
Da
€80,00
Prezzo normale
€160,00
-50%
03A
04A
06A
08A
10A
12A
14A
PE25
Sales
MONCLER ENFANT
Bermuda con logo per bambino Moncler Enfant blu con passanti
Prezzo di vendita
Da
€100,00
Prezzo normale
€200,00
-50%
04A
06A
08A
10A
12A
14A
PE25
Sales
MOSCHINO KIDS
Bermuda con logo per bambino Moschino Kids rosso con tessuto in spugna
Prezzo di vendita
Da
€34,00
Prezzo normale
€69,00
-50%
04A
06A
08A
10A
12A
14A
PE25
Sales
MSGM KIDS
Bermuda con logo per bambino MSGM Kids beige con due tasche laterali
Prezzo di vendita
€35,00
Prezzo normale
€70,00
-50%
04A
06A
08A
10A
12A
14A
PE25
Sales
OFF WHITE KIDS
Bermuda con logo per bambino Off-White Kids verde con due tasche posteriori
Prezzo di vendita
Da
€123,00
Prezzo normale
€247,00
-50%
04A
06A
08A
10A
12A
14A
PE25
Sales
MOSCHINO KIDS
Bermuda con logo per neonata Moschino Kids indaco con vita elasticizzata
Prezzo di vendita
€52,00
Prezzo normale
€105,00
-50%
06M
09M
12M
18M
02A
03A
PE25
Sales
DOLCE & GABBANA KIDS
Bermuda con logo per neonato Dolce & Gabbana Kiids blu con tasca posteriore sagomata
Prezzo di vendita
€147,00
Prezzo normale
€295,00
-50%
06M
09M
12M
18M
02A
PE25
Sales
MOSCHINO KIDS
Bermuda con logo per neonato Moschino Kids beige con vita elasticizzata
Prezzo di vendita
€34,00
Prezzo normale
€69,00
-50%
06M
09M
12M
18M
02A
03A
PE25
Sales
PALM ANGELS KIDS
Bermuda con stampa per neonato Palm Angels Kids verde con vita elasticizzata
Prezzo di vendita
€67,00
Prezzo normale
€135,00
-50%
06M
09M
18M
02A
03A
PE25
Sales
ASPESI
Bermuda in lino per bambino Aspesi Kids verde con passanti
Prezzo di vendita
Da
€66,00
Prezzo normale
€133,00
-50%
06A
08A
10A
12A
14A
16A
PE25
Sales
FENDI KIDS
Bermuda junior in cotone per bambino Fendi Kids blu con logo allover
Prezzo di vendita
Da
€285,00
Prezzo normale
€570,00
-50%
03A
04A
06A
08A
10A
12A
14A
PE25
Sales
MSGM KIDS
Bermuda per bambina MSGM Kids giallo con applicazione posteriore con logo
Prezzo di vendita
€35,00
Prezzo normale
€70,00
-50%
04A
06A
08A
10A
12A
14A
PE25
Sales
MSGM KIDS
Bermuda per bambina MSGM Kids nero con applicazione posteriore con logo
Prezzo di vendita
€35,00
Prezzo normale
€70,00
-50%
04A
06A
08A
10A
12A
14A
PE25
Sales
MSGM KIDS
Bermuda per bambina MSGM Kids turchese con applicazione posteriore con logo
Prezzo di vendita
€35,00
Prezzo normale
€70,00
-50%
04A
06A
08A
10A
12A
14A
PE25
Sales
SCOTCH&SODA
Bermuda per bambina Scotch & Soda Kids bianco con stampa astratta
Prezzo di vendita
€49,00
Prezzo normale
€70,00
-30%
04A
06A
08A
10A
12A
14A
16A
PE26
Exclusive
STELLA McCARTNEY KIDS
Bermuda per bambina Stella McCartney Kids rosa con stampa grafica all-over
Prezzo normale
€55,00
06M
09M
12M
18M
02A
03A
AI25
-30% Extra Al Checkout
AMIRI
Bermuda per bambino AMIRI KIDS azzurro con pieghe
Prezzo di vendita
€178,00
Prezzo normale
€255,00
-30%
04A
06A
08A
10A
12A
PE26
Exclusive
BALMAIN KIDS
Bermuda per bambino Balmain Kids beige con bottoni color oro
Prezzo normale
Da
€270,00
04A
06A
08A
10A
12A
13A
14A
PE26
Exclusive
BILLIEBLUSH
Bermuda per bambino Billieblush beige con stampa
Prezzo normale
Da
€49,00
02A
03A
04A
05A
06A
08A
10A
12A
PE26
Exclusive
BILLIEBLUSH
Bermuda per bambino Billieblush verde con applicazione
Prezzo normale
Da
€39,00
02A
03A
04A
05A
06A
08A
10A
12A
« Indietro
·
1
…
21
22
23
24
25
…
214
·
Avanti »
Il tuo carrello
Chiudi
Spendi
€99,00
in più per ottenere la
spedizione gratuita
!
Il tuo ordine è idoneo per la spedizione gratuita!
Chiudi
Il tuo carrello è vuoto
