: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: 0; --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: #4c4c4b; --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: #ffffff; --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: inherit; --shadow-font-scale: calc(75 / 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: #4c4c4b; --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-base, 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(--shadow-primary-button-surface); border-color: var(--shadow-primary-button-border-surface); border-width: var(--shadow-border-width); 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, 440px); 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-size: var(--shadow-font-size-lg); font-weight: var(--shadow-font-weight-md); line-height: 1.25em; margin: 0; } & 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(--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); 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: var(--shadow-font-size-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); /* UX verification needed &::placeholder { color: transparent; } */ } & .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); } }
Ir al contenido
Carrito de compra
Tu cesta está vacía.
Comenzar a comprar.
Nueva
Colección Terracota
Ya Disponible
Envíos gratuitos a partir de 100€
Izquierda
Derecha
Moneda
España (EUR €)
Abajo
Afganistán
(AFN ؋)
Albania
(ALL L)
Alemania
(EUR €)
Andorra
(EUR €)
Angola
(EUR €)
Anguila
(XCD $)
Antigua y Barbuda
(XCD $)
Arabia Saudí
(SAR ر.س)
Argelia
(DZD د.ج)
Argentina
(EUR €)
Armenia
(AMD դր.)
Aruba
(AWG ƒ)
Australia
(AUD $)
Austria
(EUR €)
Azerbaiyán
(AZN ₼)
Bahamas
(BSD $)
Bangladés
(BDT ৳)
Barbados
(BBD $)
Baréin
(EUR €)
Bélgica
(EUR €)
Belice
(BZD $)
Benín
(XOF Fr)
Bermudas
(USD $)
Bielorrusia
(EUR €)
Bolivia
(BOB Bs.)
Bosnia y Herzegovina
(BAM КМ)
Botsuana
(BWP P)
Brasil
(EUR €)
Brunéi
(BND $)
Bulgaria
(BGN лв.)
Burkina Faso
(XOF Fr)
Burundi
(BIF Fr)
Bután
(EUR €)
Cabo Verde
(CVE $)
Camboya
(KHR ៛)
Camerún
(XAF CFA)
Canadá
(CAD $)
Caribe neerlandés
(USD $)
Catar
(QAR ر.ق)
Chad
(XAF CFA)
Chequia
(CZK Kč)
Chile
(EUR €)
China
(CNY ¥)
Chipre
(EUR €)
Ciudad del Vaticano
(EUR €)
Colombia
(EUR €)
Comoras
(KMF Fr)
Congo
(XAF CFA)
Corea del Sur
(KRW ₩)
Costa Rica
(CRC ₡)
Côte d’Ivoire
(XOF Fr)
Croacia
(EUR €)
Curazao
(ANG ƒ)
Dinamarca
(DKK kr.)
Dominica
(XCD $)
Ecuador
(USD $)
Egipto
(EGP ج.م)
El Salvador
(USD $)
Emiratos Árabes Unidos
(AED د.إ)
Eritrea
(EUR €)
Eslovaquia
(EUR €)
Eslovenia
(EUR €)
España
(EUR €)
Estados Unidos
(USD $)
Estonia
(EUR €)
Esuatini
(EUR €)
Etiopía
(ETB Br)
Filipinas
(PHP ₱)
Finlandia
(EUR €)
Fiyi
(FJD $)
Francia
(EUR €)
Gabón
(XOF Fr)
Gambia
(GMD D)
Georgia
(EUR €)
Ghana
(EUR €)
Gibraltar
(GBP £)
Granada
(XCD $)
Grecia
(EUR €)
Groenlandia
(DKK kr.)
Guadalupe
(EUR €)
Guatemala
(GTQ Q)
Guayana Francesa
(EUR €)
Guernesey
(GBP £)
Guinea
(GNF Fr)
Guinea Ecuatorial
(XAF CFA)
Guinea-Bisáu
(XOF Fr)
Guyana
(GYD $)
Haití
(EUR €)
Honduras
(HNL L)
Hungría
(HUF Ft)
India
(INR ₹)
Indonesia
(IDR Rp)
Irak
(EUR €)
Irlanda
(EUR €)
Isla Norfolk
(AUD $)
Isla de Man
(GBP £)
Isla de Navidad
(AUD $)
Isla de la Ascensión
(SHP £)
Islandia
(ISK kr)
Islas Aland
(EUR €)
Islas Caimán
(KYD $)
Islas Cocos
(AUD $)
Islas Cook
(NZD $)
Islas Feroe
(DKK kr.)
Islas Georgia del Sur y Sandwich del Sur
(GBP £)
Islas Malvinas
(FKP £)
Islas Pitcairn
(NZD $)
Islas Salomón
(SBD $)
Islas Turcas y Caicos
(USD $)
Islas Vírgenes Británicas
(USD $)
Islas menores alejadas de EE. UU.
(USD $)
Israel
(ILS ₪)
Italia
(EUR €)
Jamaica
(JMD $)
Japón
(JPY ¥)
Jersey
(EUR €)
Jordania
(EUR €)
Kazajistán
(KZT ₸)
Kenia
(KES KSh)
Kirguistán
(KGS som)
Kiribati
(EUR €)
Kosovo
(EUR €)
Kuwait
(EUR €)
Laos
(LAK ₭)
Lesoto
(EUR €)
Letonia
(EUR €)
Líbano
(LBP ل.ل)
Liberia
(EUR €)
Libia
(EUR €)
Liechtenstein
(CHF CHF)
Lituania
(EUR €)
Luxemburgo
(EUR €)
Macedonia del Norte
(MKD ден)
Madagascar
(EUR €)
Malasia
(MYR RM)
Malaui
(MWK MK)
Maldivas
(MVR MVR)
Mali
(XOF Fr)
Malta
(EUR €)
Marruecos
(MAD د.م.)
Martinica
(EUR €)
Mauricio
(MUR ₨)
Mauritania
(EUR €)
Mayotte
(EUR €)
México
(EUR €)
Moldavia
(MDL L)
Mónaco
(EUR €)
Mongolia
(MNT ₮)
Montenegro
(EUR €)
Montserrat
(XCD $)
Mozambique
(EUR €)
Myanmar (Birmania)
(MMK K)
Namibia
(EUR €)
Nauru
(AUD $)
Nepal
(NPR Rs.)
Nicaragua
(NIO C$)
Níger
(XOF Fr)
Nigeria
(NGN ₦)
Niue
(NZD $)
Noruega
(EUR €)
Nueva Caledonia
(XPF Fr)
Nueva Zelanda
(NZD $)
Omán
(EUR €)
Países Bajos
(EUR €)
Pakistán
(PKR ₨)
Panamá
(USD $)
Papúa Nueva Guinea
(PGK K)
Paraguay
(PYG ₲)
Perú
(PEN S/)
Polinesia Francesa
(XPF Fr)
Polonia
(PLN zł)
Portugal
(EUR €)
RAE de Hong Kong (China)
(HKD $)
RAE de Macao (China)
(MOP P)
Reino Unido
(GBP £)
República Centroafricana
(XAF CFA)
República Democrática del Congo
(CDF Fr)
República Dominicana
(DOP $)
Reunión
(EUR €)
Ruanda
(RWF FRw)
Rumanía
(RON Lei)
Rusia
(EUR €)
Sáhara Occidental
(MAD د.م.)
Samoa
(WST T)
San Bartolomé
(EUR €)
San Cristóbal y Nieves
(XCD $)
San Marino
(EUR €)
San Martín
(EUR €)
San Pedro y Miquelón
(EUR €)
San Vicente y las Granadinas
(XCD $)
Santa Elena
(SHP £)
Santa Lucía
(XCD $)
Santo Tomé y Príncipe
(STD Db)
Senegal
(XOF Fr)
Serbia
(RSD РСД)
Seychelles
(EUR €)
Sierra Leona
(SLL Le)
Singapur
(SGD $)
Sint Maarten
(ANG ƒ)
Somalia
(EUR €)
Sri Lanka
(LKR ₨)
Sudáfrica
(EUR €)
Sudán
(EUR €)
Sudán del Sur
(EUR €)
Suecia
(SEK kr)
Suiza
(CHF CHF)
Surinam
(EUR €)
Svalbard y Jan Mayen
(EUR €)
Tailandia
(THB ฿)
Taiwán
(TWD $)
Tanzania
(TZS Sh)
Tayikistán
(TJS ЅМ)
Territorio Británico del Océano Índico
(USD $)
Territorios Australes Franceses
(EUR €)
Territorios Palestinos
(ILS ₪)
Timor-Leste
(USD $)
Togo
(XOF Fr)
Tokelau
(NZD $)
Tonga
(TOP T$)
Trinidad y Tobago
(TTD $)
Tristán de Acuña
(GBP £)
Túnez
(EUR €)
Turkmenistán
(EUR €)
Turquía
(EUR €)
Tuvalu
(AUD $)
Ucrania
(UAH ₴)
Uganda
(UGX USh)
Uruguay
(UYU $U)
Uzbekistán
(UZS so'm)
Vanuatu
(VUV Vt)
Venezuela
(USD $)
Vietnam
(VND ₫)
Wallis y Futuna
(XPF Fr)
Yemen
(YER ﷼)
Yibuti
(DJF Fdj)
Zambia
(EUR €)
Zimbabue
(USD $)
Buscar
HOME
Colección TERRACOTA
VER TODO
PERSONALIZADOS
OUTLET
Cuenta
Buscar
Carrito
HOME
Colección TERRACOTA
Alternar menú
BLUSAS Y TOPS
PUNTO
VESTIDOS Y FALDAS
PANTALONES Y KIMONOS
CINTURONES
VER TODO
Alternar menú
Kimonos
Vestidos
Faldas
Pantalones
Blusas y Tops
Blusas especiales
Jerseys & Cardigan
Accesorios
PERSONALIZADOS
Alternar menú
Complementos
Sudaderas y camisetas
Mini personalizados
Hogar
OUTLET
Alternar menú
BLUSAS Y TOPS
FALDAS Y PANTALONES
KIMONOS Y CHALECOS
VESTIDOS
PUNTO
CINTURONES
BLUSAS Y TOPS
FALDAS Y PANTALONES
KIMONOS Y CHALECOS
VESTIDOS
PUNTO
CINTURONES
REBAJAS
Refinar
Derecha
89 productos
Ordenar por
Más vendidos
Abajo
Más vendidos
Alfabéticamente, A-Z
Alfabéticamente, Z-A
Precio, menor a mayor
Precio, mayor a menor
Fecha: antiguo(a) a reciente
Fecha: reciente a antiguo(a)
Refinar
Agotado
Mostrar
Ocultar
Price
Abajo
€
€
Ordenar por
Abajo
Más vendidos
Alfabéticamente, A-Z
Alfabéticamente, Z-A
Precio, menor a mayor
Precio, mayor a menor
Fecha: antiguo(a) a reciente
Fecha: reciente a antiguo(a)
Enviar
-84%
Izquierda
Derecha
VESTIDO OLIVIA
€30,00 EUR
€185,00
SALE
Azul
Azul marino
Rojo
Verde
+ 1 más
XS
S
M
L
XL
-61%
Izquierda
Derecha
TOP HARPER
€30,00 EUR
€75,95
SALE
VERDE
XS
S
M
L
XL
2XL
-61%
Izquierda
Derecha
TOP CAMILA
€30,00 EUR
€75,95
SALE
TEJA
XS
S
M
L
XL
2XL
-43%
Izquierda
Derecha
VESTIDO ZAZA
€80,00 EUR
€139,90
SALE
Multicolor
XS
S
M
L
XL
-67%
Izquierda
Derecha
FALDA CAMILA
€40,00 EUR
€120,00
SALE
Teja
XS
S
M
L
XL
-61%
Izquierda
Derecha
TOP ROY
€30,00 EUR
€75,95
SALE
AZUL
XS
S
M
L
XL
-45%
Izquierda
Derecha
PALAZZO COLUMBA
€60,00 EUR
€110,00
SALE
multicolor
XS
S
M
L
XL
2XL
-35%
Izquierda
Derecha
FALDA FELICIA
€30,00 EUR
€45,95
SALE
rosa
XS
S
M
L
XL
-47%
Izquierda
Derecha
TOP TRINIDAD
€40,00 EUR
€75,95
SALE
verde
xs
s
m
l
xl
-50%
Izquierda
Derecha
FALDA TRINIDAD
€60,00 EUR
€120,00
SALE
verde
xs
s
m
l
xl
-58%
Izquierda
Derecha
VESTIDO AGRA
€40,00 EUR
€95,00
SALE
gris
xs
s
m
l
xl
2xl
-35%
Izquierda
Derecha
FALDA PAOLA
€30,00 EUR
€45,95
SALE
azul
xs
s
m
l
xl
-55%
Izquierda
Derecha
VESTIDO MINAR
€50,00 EUR
€110,00
SALE
multicolor
XS
s
m
l
xl
-57%
Izquierda
Derecha
BLUSA FELICIA
€30,00 EUR
€69,95
SALE
rosa
xs
s
m
l
xl
2xl
-64%
Izquierda
Derecha
VESTIDO SOLEIL
€50,00 EUR
€139,90
SALE
xs
s
m
l
xl
-58%
Izquierda
Derecha
FALDA ROY
€50,00 EUR
€120,00
Agotado
Azul
XS
S
M
L
XL
-55%
Izquierda
Derecha
PANTALON BOMBAY
€30,00 EUR
€65,95
SALE
rosa
s
m
l
xl
-58%
Izquierda
Derecha
TOP RENE GRIS
€15,00 EUR
€35,95
SALE
gris
s
m
l
-64%
Izquierda
Derecha
VESTIDO PARAISO
€40,00 EUR
€110,00
SALE
xs
s
m
l
xl
2xl
blanco
-69%
Izquierda
Derecha
VESTIDO LINDT
€30,00 EUR
€95,95
SALE
GRANATE
XS
S
M
L
XL
-55%
Izquierda
Derecha
PANTALÓN GOA
€30,00 EUR
€65,95
SALE
teja
s
m
l
xl
-66%
Izquierda
Derecha
CHALECO BRUNA
€25,00 EUR
€72,95
SALE
VERDE
XS
S
M
L
XL
2XL
-57%
Izquierda
Derecha
AMERICANA LUISA
€50,00 EUR
€115,00
SALE
MARRON
XS
S
M
L
XL
2XL
-84%
Izquierda
Derecha
VESTIDO LEONORA PLOMO
€15,00 EUR
€95,90
Agotado
AZUL PLOMO
S
M
L
1
2
3
4
·
Siguiente »
