:host {
 /\\* breakpoints: not-implemented / reference only \*/
 /\\* --shadow-breakpoint-xs: 320px; \*/
 /\\* --shadow-breakpoint-sm: 490px; \*/
 /\\* --shadow-breakpoint-md: 768px; \*/
 /\\* --shadow-breakpoint-lg: 1040px; \*/
 /\\* --shadow-breakpoint-xl: 1440px; \*/

--shadow-thumbnail-position-start:
 "media gift-dialog-header"
 "media content"
 "media gift-block-actions";
 --shadow-thumbnail-position-end:
 "gift-dialog-header media"
 "content media"
 "gift-block-actions media";

/\\* border radius \*/
 --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-outline-width: calc(var(--shadow-border-width) + 0.5px);

/\\* buttons \*/

--shadow-hover-style-light: #ffffff;
 --shadow-hover-style-dark: #000000;

--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--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-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--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%);

/\\* do not change the root text size \*/
 --shadow-font-size: 16px;

/\\* text and fonts \*/
 --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-md: 500;
 --shadow-font-weight-lg: 600;
 --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--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--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--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--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-text-color--hover: color-mix(in srgb, var(--shadow-primary-text-color), var(--shadow-hover-style) 32%);

/\\* secondary colors \*/
 --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%);

/\\* spacing \*/

--shadow-spacing-scale-base: 1;
 --shadow-spacing-scale-less: 0.75;
 --shadow-spacing-scale-more: 1.166;

--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);

/\\* inline block \*/
 --shadow-feature-max-height: 500px;
 --shadow-textarea-min-height: 80px;
 --shadow-block-margin-block-start: calc(1em \* var(--shadow-spacing-scale));
 --shadow-block-margin-block-end: calc(2em \* var(--shadow-spacing-scale));

/\\* shadows \*/
 --shadow-shadow-blur: 1.5rem;
 --shadow-shadow-color: rgba(0, 0, 0, 0.25);
 --shadow-shadow-offset: 0.75rem;

/\\* the default look: what a shop without a presets entry paints; a saved entry overrides these per option type below \*/
 --shadow-font-family: inherit;
 --shadow-header-font-family: inherit;
 --shadow-font-weight-base: 400;
 --shadow-letter-spacing: normal;
 --shadow-button-text-transform: none;
 --shadow-button-letter-spacing: normal;
 --shadow-button-font-style: normal;
 --shadow-launcher-button-font-weight: 400;
 --shadow-launcher-button-max-width: 500px;
 --shadow-launcher-button-alignment: center;
 --shadow-launcher-button-content-justify-content: space-between;
 --shadow-launcher-button-content-flex-direction: row-reverse;
 --shadow-grid-template-areas: var(--shadow-thumbnail-position-start);
 --shadow-border-radius-scale: 60;
 --shadow-block-border-surface: #00000000;
 --shadow-border-width: 1px;
 --shadow-hover-style: var(--shadow-hover-style-light, --shadow-hover-style-light);
 --shadow-launcher-button-surface: #000000;
 --shadow-launcher-button-text-color: #ffffff;
 --shadow-launcher-button-border-surface: #00000000;
 --shadow-primary-button-surface: #000000;
 --shadow-primary-button-text-color: #ffffff;
 --shadow-primary-button-border-surface: #00000000;
 --shadow-primary-button-border-surface--active: transparent;
 --shadow-primary-button-border-surface--hover: transparent;
 --shadow-secondary-button-surface: #0000000f;
 --shadow-secondary-button-text-color: #333333;
 --shadow-secondary-button-border-surface: #00000000;
 --shadow-secondary-button-border-surface--active: transparent;
 --shadow-secondary-button-border-surface--hover: transparent;
 --shadow-font-scale: calc(100 / 100);
 --shadow-form-element-surface: #ffffff;
 --shadow-form-element-border-color: #0000000f;
 --shadow-form-element-text-color: #333333;
 --shadow-form-element-selection-color: #000000;
 --shadow-selection-accent-color: var(--shadow-form-element-selection-color);
 --shadow-selection-checked-surface: var(--shadow-form-element-selection-color);
 --shadow-selection-swatch-color: var(--shadow-form-element-selection-color);
 --shadow-primary-surface: #ffffff;
 --shadow-primary-text-color: #000000;
 --shadow-secondary-surface: #f3f3f3;
 --shadow-secondary-text-color: #333333;
 --shadow-spacing-scale: var(--shadow-spacing-scale-base, 1);
 --shadow-gift-thumbnail-size: 60px;
 --shadow-thumbnail-size: clamp(40px, var(--shadow-gift-thumbnail-size), 200px);
 --shadow-thumbnail-flex-direction: row;
 --shadow-thumbnail-order: -1;
 --shadow-thumbnail-margin-left: 0;
 --shadow-thumbnail-margin-right: 0.6em;

/\\* 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-block-margin-start, var(--shadow-spacing-xs)) !important;
 margin-block-end: var(--shadow-block-margin-end, var(--shadow-spacing-xs)) !important;
 text-align: start;
 width: -webkit-fill-available;
 white-space: normal;
}

:host(\[option-type="product"\]) {
 --shadow-font-family: inherit;
 --shadow-header-font-family: inherit;
 --shadow-font-weight-base: 400;
 --shadow-letter-spacing: normal;
 --shadow-button-text-transform: none;
 --shadow-button-letter-spacing: normal;
 --shadow-button-font-style: normal;
 --shadow-launcher-button-font-weight: 400;
 --shadow-launcher-button-max-width: 500px;
 --shadow-launcher-button-alignment: center;
 --shadow-launcher-button-content-justify-content: space-between;
 --shadow-launcher-button-content-flex-direction: row-reverse;
 --shadow-grid-template-areas: var(--shadow-thumbnail-position-start);

/\\* border radius \*/
 --shadow-border-radius-scale: 40;

--shadow-block-border-surface: #e0e0dd;
 --shadow-border-width: 1px;

/\\* buttons \*/
 --shadow-hover-style: var(--shadow-hover-style-light, --shadow-hover-style-light);

--shadow-launcher-button-surface: #ffffff;
 --shadow-launcher-button-text-color: #141414;
 --shadow-launcher-button-border-surface: #e0e0dd;

--shadow-primary-button-surface: #ffffff;
 --shadow-primary-button-text-color: #141414;
 --shadow-primary-button-border-surface: #e0e0dd;

--shadow-primary-button-border-surface--active: color-mix(in srgb, var(--shadow-primary-button-border-surface), var(--shadow-hover-style) 20%);
 --shadow-primary-button-border-surface--hover: color-mix(in srgb, var(--shadow-primary-button-border-surface), var(--shadow-hover-style) 16%);

--shadow-secondary-button-surface: #141414;
 --shadow-secondary-button-text-color: #ffffff;
 --shadow-secondary-button-border-surface: #ffffff;

--shadow-secondary-button-border-surface--active: color-mix(in srgb, var(--shadow-secondary-button-border-surface), var(--shadow-hover-style) 20%);
 --shadow-secondary-button-border-surface--hover: color-mix(in srgb, var(--shadow-secondary-button-border-surface), var(--shadow-hover-style) 16%);

/\\* text and fonts \*/
 --shadow-font-scale: calc(100 / 100);

/\\* form elements \*/
 --shadow-form-element-surface: #ffffff;
 --shadow-form-element-border-color: #8f8e8c;
 --shadow-form-element-text-color: #141414;
 --shadow-form-element-selection-color: #2d2d38;

--shadow-selection-accent-color: var(--shadow-form-element-selection-color);
 --shadow-selection-checked-surface: var(--shadow-form-element-selection-color);
 --shadow-selection-swatch-color: var(--shadow-form-element-selection-color);

/\\* primary colors \*/
 --shadow-primary-surface: #ffffff;
 --shadow-primary-text-color: #141414;

/\\* secondary colors \*/
 --shadow-secondary-surface: #ffffff;
 --shadow-secondary-text-color: #141414;

/\\* spacing \*/
 --shadow-spacing-scale: var(--shadow-spacing-scale-base, 1);

/\\* media \*/
 --shadow-gift-thumbnail-size: 60px;
 --shadow-thumbnail-size: clamp(40px, var(--shadow-gift-thumbnail-size), 200px);

--shadow-thumbnail-flex-direction: row;
 --shadow-thumbnail-order: -1;
 --shadow-thumbnail-margin-left: 0;
 --shadow-thumbnail-margin-right: 0.6em;
}

:host(\[option-type="order"\]) {
 --shadow-font-family: inherit;
 --shadow-header-font-family: inherit;
 --shadow-font-weight-base: 400;
 --shadow-letter-spacing: normal;
 --shadow-button-text-transform: none;
 --shadow-button-letter-spacing: normal;
 --shadow-button-font-style: normal;
 --shadow-launcher-button-font-weight: 400;
 --shadow-launcher-button-max-width: 500px;
 --shadow-launcher-button-alignment: center;
 --shadow-launcher-button-content-justify-content: space-between;
 --shadow-launcher-button-content-flex-direction: row-reverse;
 --shadow-grid-template-areas: var(--shadow-thumbnail-position-start);

/\\* border radius \*/
 --shadow-border-radius-scale: 40;

--shadow-block-border-surface: #e0e0dd;
 --shadow-border-width: 1px;

/\\* buttons \*/
 --shadow-hover-style: var(--shadow-hover-style-light, --shadow-hover-style-light);

--shadow-launcher-button-surface: #ffffff;
 --shadow-launcher-button-text-color: #141414;
 --shadow-launcher-button-border-surface: #e0e0dd;

--shadow-primary-button-surface: #ffffff;
 --shadow-primary-button-text-color: #141414;
 --shadow-primary-button-border-surface: #e0e0dd;

--shadow-secondary-button-surface: #141414;
 --shadow-secondary-button-text-color: #ffffff;
 --shadow-secondary-button-border-surface: #ffffff;

/\\* text and fonts \*/
 --shadow-font-scale: calc(100 / 100);

/\\* primary colors \*/
 --shadow-primary-surface: #ffffff;
 --shadow-primary-text-color: #141414;

/\\* secondary colors \*/
 --shadow-secondary-surface: #ffffff;
 --shadow-secondary-text-color: #141414;

/\\* spacing \*/
 --shadow-spacing-scale: var(--shadow-spacing-scale-base, 1);

/\\* media \*/
 --shadow-gift-thumbnail-size: 60px;
 --shadow-thumbnail-size: clamp(40px, var(--shadow-gift-thumbnail-size), 200px);

--shadow-thumbnail-flex-direction: row;
 --shadow-thumbnail-order: -1;
 --shadow-thumbnail-margin-left: 0;
 --shadow-thumbnail-margin-right: 0.6em;
}

:host(\[uuid="b3390e26-6936-4d55-85e0-2bec17c27322"\]) {

--shadow-block-launcher-button-max-width: 100%;

}

\*,
\*::before,
\*::after {
 box-sizing: border-box;
}

gift-block-launcher:not(\[variant="inline"\]) {
 display: flex;
 flex-direction: column;
 gap: var(--shadow-spacing-xs);
 align-items: var(--shadow-launcher-button-alignment);

& 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-launcher-button-surface);
 border-color: var(--shadow-launcher-button-border-surface);
 border-width: var(--shadow-launcher-button-border-width, var(--shadow-border-width));
 border-radius: var(--shadow-launcher-button-border-radius, var(--shadow-border-radius-sm));
 border-style: solid;
 color: var(--shadow-launcher-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-launcher-button-font-weight);
 font-style: var(--shadow-button-font-style);
 letter-spacing: var(--shadow-button-letter-spacing);
 max-width: var(--shadow-block-launcher-button-max-width, var(--shadow-launcher-button-max-width));
 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;
 }

&\[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(--shadow-launcher-button-content-flex-direction);
 justify-content: var(--shadow-launcher-button-content-justify-content);
 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\[usage-limit-reached\],
.gift-block\_\_launcher\[region-unavailable\] {
 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-block-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-block-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-block-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(--shadow-header-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-block-modal-layout gift-block-actions {
 background-color: var(--shadow-primary-surface);
 bottom: 0;
 grid-area: gift-block-actions;
 overscroll-behavior: contain;
 position: sticky;
 z-index: 1;

/\\* the buttons live in the component's own shadow; only its layout knobs are ours \*/
 --shadow-actions-gap: var(--shadow-spacing-sm);
 --shadow-actions-padding: var(--shadow-spacing-lg);
}

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-block-option-heading {
 display: block;

& span\[part="label"\] {
 color: var(--shadow-primary-text-color);
 display: block;
 font-size: var(--shadow-font-size-base);
 font-weight: var(--shadow-font-weight-md, 500);
 line-height: 1.25em;
 }
 }

& .gift-option-group {
 display: flex;
 flex-direction: column;
 gap: var(--shadow-spacing-lg);
 }

/\\* gift product details \*/
 & .gift-product {
 display: flex;
 flex-direction: column;
 gap: var(--shadow-spacing-base);
 }

& .gift-product-header {
 align-items: center;
 display: flex;
 flex-direction: var(--shadow-thumbnail-flex-direction);
 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: var(--shadow-gift-thumbnail-size);
 --shadow-inline-media-size: clamp(40px, var(--shadow-gift-thumbnail-size), 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(--shadow-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);
 }
 }
 }
}

:host(wrapped-gift-block) gift-block-option-heading label {
 align-items: center;
 cursor: pointer;
 display: flex;
 gap: var(--shadow-spacing-sm);

& input\[type="checkbox"\] {
 accent-color: var(--shadow-selection-accent-color);
 cursor: pointer;
 flex: 0 0 auto;
 height: var(--shadow-font-size-base);
 margin: 0;
 width: var(--shadow-font-size-base);
 }
}

:host(wrapped-gift-block\[gift-option-optional\]) section#content .gift-option-group {
 border-radius: var(--shadow-border-radius-sm);
 position: relative;
}

:host(wrapped-gift-block\[gift-option-optional\]:not(\[gift-option-included\])) section#content .gift-option-group {
 pointer-events: none;
}

:host(wrapped-gift-block\[gift-option-optional\]:not(\[gift-option-included\])) section#content .gift-option-group::after {
 background-color: color-mix(in srgb, var(--shadow-primary-surface) 62%, transparent);
 border-radius: inherit;
 content: '';
 inset: calc(var(--shadow-spacing-sm) \* -1);
 position: absolute;
}

/\\* shopify variant selector \*/

:host(wrapped-extension) gift-variant-selector {
 --shadow-picker-padding: var(--shadow-spacing-sm) var(--shadow-spacing-base);
 --shadow-picker-rows-padding: var(--shadow-spacing-sm);
}

:host(wrapped-extension\[saving="true"\]) gift-variant-selector {
 --shadow-picker-opacity: 0.7;
 --shadow-picker-pointer-events: none;
}

:host(wrapped-gift-block\[gift-option-optional\]:not(\[gift-option-included\])) gift-variant-selector {
 --shadow-picker-selection-color: var(--shadow-form-element-border-color);
 --shadow-picker-selection-width: var(--shadow-border-width);
 --shadow-picker-swatch-selection-color: rgba(0, 0, 0, .1);
}

:host(wrapped-extension\[gift-option-optional="true"\]:not(\[gift-option-included\])) gift-variant-selector,
:host(wrapped-gift-block\[gift-option-optional="true"\]:not(\[gift-option-included\])) gift-variant-selector {
 --shadow-picker-card-accent: color-mix(in srgb, var(--shadow-form-element-border-color) 25%, transparent);
 --shadow-picker-card-opacity: 0.8;
 --shadow-picker-card-ring: transparent;
 --shadow-picker-radio-appearance: none;
 --shadow-picker-radio-border: var(--shadow-border-width) solid var(--shadow-form-element-border-color);
 --shadow-picker-radio-surface: var(--shadow-form-element-surface);
 --shadow-picker-row-shadow: none;
 --shadow-picker-row-surface: initial;
}

wrapped-message-field {
 gap: var(--shadow-spacing-xs);

& label {
 color: var(--shadow-secondary-text-color);
 font-size: var(--shadow-font-size-sm);
 font-weight: var(--shadow-font-weight-base);
 line-height: 1em;
 }

& :is(input, textarea) {
 background-color: var(--shadow-form-element-surface);
 border: none;
 border-radius: var(--shadow-border-radius-sm);
 color: var(--shadow-form-element-text-color);
 font-family: var(--shadow-font-family);
 font-size: var(--shadow-font-size-base);
 margin: 0;
 min-height: 42px;
 outline: var(--shadow-border-width) solid var(--shadow-form-element-border-color);
 padding: var(--shadow-spacing-sm);
 width: 100%;
 }

& :is(input, textarea):is(:active, :focus, :focus-visible) {
 outline-color: var(--shadow-form-element-selection-color);
 outline-width: var(--shadow-outline-width);
 }

& :is(input, textarea)::placeholder {
 color: var(--shadow-form-element-placeholder-text-color);
 }

& textarea {
 min-height: 100px;
 resize: vertical;
 }

& span.counter {
 align-self: flex-end;
 color: var(--shadow-secondary-text-color);
 font-size: var(--shadow-font-size-sm);
 line-height: normal;
 }
}

wrapped-message-field\[disabled\] {
 cursor: var(--shadow-disabled-cursor);
 opacity: var(--shadow-disabled-opacity-md);
 pointer-events: none;
 transition: background-color var(--shadow-transition-duration) ease,
 color var(--shadow-transition-duration) ease;

& :is(input, textarea) {
 background-color: var(--shadow-form-element-surface--disabled);
 color: transparent;
 outline-color: var(--shadow-form-element-border-color--disabled);
 }
}

:host(wrapped-extension) {
 background-color: var(--shadow-primary-surface) !important;
 border: var(--shadow-border-width) solid var(--shadow-block-border-surface) !important;
 border-radius: var(--shadow-border-radius-sm) !important;
 color: var(--shadow-primary-text-color) !important;
 display: flex;
 flex-direction: column !important;
 font-size: var(--shadow-font-size-base) !important;
 height: fit-content !important;
 margin-block-start: var(--shadow-block-margin-start, var(--shadow-block-margin-block-start)) !important;
 margin-block-end: var(--shadow-block-margin-end, var(--shadow-block-margin-block-end)) !important;
 min-width: unset !important;
 max-width: 640px !important;
 overflow: hidden !important;
 padding: unset !important;
 width: unset !important;
}

:host(wrapped-extension\[option-type="order"\]) {
 margin-left: auto !important;
 margin-right: 0 !important;
 width: stretch !important;
}

:host(wrapped-extension\[target-group="drawer"\]\[option-type="order"\]) {
 max-width: unset !important;
 margin-left: unset !important;
 margin-right: unset !important;
 margin-block-end: var(--shadow-block-margin-end, calc(var(--shadow-block-margin-block-end) \* 0.5)) !important;
}

wrapped-advanced-mode,
wrapped-basic-mode {
 display: contents;
}

:host(wrapped-extension) \[part="feature"\],
:host(wrapped-extension) gift-block-launcher {
 overflow: hidden !important;

& \[part="container"\] {
 display: flex;
 flex-direction: column;
 row-gap: 0.25em;

& label {
 align-items: center !important;
 column-gap: var(--shadow-spacing-sm) !important;
 cursor: pointer !important;
 display: flex;
 line-height: normal !important;
 margin: 0 !important;
 pointer-events: auto !important;
 text-align: left !important;
 text-transform: unset !important;
 }
 }
}

:host(wrapped-extension) \[part="feature"\] {
 background-color: var(--shadow-secondary-surface);
}

:host(wrapped-extension) \[part="feature"\]:is(\[feature="variant"\], \[feature="gift-option"\]) {
 display: block;
}

:host(wrapped-extension) \[part="feature"\]\[enabled="false"\] {
 display: none;
 opacity: 0;
 visibility: hidden;
}

:host(wrapped-extension) \[part="disclosure"\] {
 display: grid;
 grid-template-rows: 0fr;
 transition: grid-template-rows 0.25s cubic-bezier(0.42, 0, 0.58, 1);
}

:host(wrapped-extension) \[part="disclosure-content"\] {
 display: flex;
 flex-direction: column;
 min-height: 0;
 opacity: 0;
 overflow: hidden;
 visibility: hidden;
 transition: opacity 0.25s, visibility 0.25s;
}

:host(wrapped-extension\[expanded="true"\]) gift-block-launcher:has(~ \[part="disclosure"\] \[part="feature"\]\[enabled="true"\]:not(\[singular="true"\])) {
 border-bottom: var(--shadow-border-width) solid var(--shadow-block-border-surface);
}

:host(wrapped-extension\[expanded="true"\]) \[part="disclosure"\],
:host(wrapped-extension\[hidden-checkbox="true"\]) \[part="disclosure"\] {
 grid-template-rows: 1fr;
}

:host(wrapped-extension\[expanded="true"\]) \[part="disclosure-content"\],
:host(wrapped-extension\[hidden-checkbox="true"\]) \[part="disclosure-content"\] {
 opacity: 1;
 visibility: visible;
}

:host(wrapped-extension\[hidden-checkbox="true"\]) gift-block-launcher {
 display: none;
 opacity: 0;
 visibility: hidden;
}

:host(wrapped-extension\[limited="true"\]),
:host(wrapped-extension\[region-unavailable="true"\]) {
 cursor: none !important;
 pointer-events: none !important;
 opacity: 0.6 !important;

& \[part="container"\] {
 & label {
 pointer-events: none !important;
 }
 }
}

:host(wrapped-extension\[saving="true"\]) {
 & \[part="container"\] {
 & label {
 pointer-events: none !important;

& input\[type="checkbox"\], input\[type="radio"\], span {
 opacity: 0.7 !important;
 transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 }

& select {
 pointer-events: none !important;
 opacity: 0.7 !important;
 }

& button {
 pointer-events: none;
 opacity: 0.7;
 transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 }
}

:host(wrapped-extension) gift-block-launcher \[part="container"\] {
 padding: var(--shadow-spacing-sm);

& label {
 padding: 0 !important;

& input\[type="checkbox"\] {
 cursor: pointer;
 clip: unset !important;
 display: inline-block !important;
 flex-shrink: 0 !important;
 height: var(--shadow-font-size-base) !important;
 margin: 0 !important;
 min-height: revert !important;
 position: unset !important;
 top: unset !important;
 width: var(--shadow-font-size-base) !important;

&::before {
 content: unset !important;
 }
 &::after {
 content: unset !important;
 }

&:checked::before {
 content: unset !important;
 }

&:checked::after {
 content: unset !important;
 }
 }

& span {
 &\[part="label"\] {
 border: unset !important;
 flex-grow: 1;
 padding: unset !important;
 }

&\[part="pricing"\] {
 align-content: center;
 font-size: var(--shadow-font-size-sm);
 white-space: nowrap;
 }

&\[part="thumbnail"\] {
 background-color: var(--shadow-form-element-surface);
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 border: var(--shadow-border-width) solid #ddd;
 border-color: var(--shadow-form-element-border-color);
 border-radius: var(--shadow-border-radius-sm);
 min-height: var(--shadow-thumbnail-size);
 max-height: var(--shadow-thumbnail-size);
 min-width: var(--shadow-thumbnail-size);
 max-width: var(--shadow-thumbnail-size);
 height: 100%;
 width: 100%;
 display: inline-block;
 overflow: hidden;
 vertical-align: middle;
 order: var(--shadow-thumbnail-order);

margin-right: var(--shadow-thumbnail-margin-right);
 margin-left: var(--shadow-thumbnail-margin-left);
 }
 }
 }

}

:host(wrapped-extension) \[feature="gift-option"\] \[part="container"\] {
 padding: var(--shadow-spacing-sm);

& label {
 align-items: center;
 cursor: pointer;
 display: flex;
 gap: var(--shadow-spacing-sm);
 }

& input\[type="checkbox"\] {
 cursor: pointer;
 flex: 0 0 auto;
 height: var(--shadow-font-size-base);
 margin: 0;
 width: var(--shadow-font-size-base);
 }

:host(wrapped-extension) gift-block-launcher \[part="container"\] label input\[type="checkbox"\],
:host(wrapped-extension) \[feature="gift-option"\] \[part="container"\] label input\[type="checkbox"\] {
 appearance: none;
 background-color: var(--shadow-form-element-surface);
 background-position: center;
 background-repeat: no-repeat;
 background-size: 82%;
 border: var(--shadow-border-width) solid var(--shadow-form-element-border-color);
 border-radius: min(4px, var(--shadow-border-radius-sm));
 box-sizing: border-box;

&:checked {
 background-color: var(--shadow-selection-checked-surface);
 border-color: var(--shadow-selection-checked-surface);

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6'/%3E%3C/svg%3E");
 }

&:focus-visible {
 outline: var(--shadow-outline-width) solid var(--shadow-form-element-selection-color);
 outline-offset: var(--shadow-border-width);
 }
}

:host(wrapped-extension\[hidden-checkbox="false"\]\[gift-option-optional="false"\]) \[feature="variant"\]\[enabled="true"\]\[singular="true"\] {
 display: none;
}

:host(wrapped-extension\[gift-option-optional="true"\]) .gift-option-group {
 transition: opacity 0.25s cubic-bezier(0.42, 0, 0.58, 1);
}

:host(wrapped-extension\[gift-option-optional="true"\]:not(\[gift-option-included\])) .gift-option-group {
 opacity: 0.5;
 pointer-events: none;
}

:host(wrapped-extension\[gift-option-optional="true"\]) \[feature="variant"\]\[singular="true"\] gift-variant-selector {
 --shadow-picker-list-overflow: auto;
}

:host(wrapped-extension) gift-block-message {
 --shadow-message-gap: var(--shadow-spacing-sm);
 --shadow-message-padding: var(--shadow-spacing-sm);
 --shadow-message-input-flex: 1 1 40%;

& wrapped-message-field {

& label {
 color: var(--shadow-primary-text-color);
 }

& textarea {
 min-height: var(--shadow-textarea-min-height);
 }
 }
}

:host(wrapped-extension) gift-block-actions {
 --shadow-actions-gap: var(--shadow-spacing-xs);
 --shadow-actions-padding: var(--shadow-spacing-sm);
}

/\\* 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-block-modal-layout gift-block-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-block-modal-layout gift-block-actions {
 min-width: var(--shadow-section-max-width);
 max-width: var(--shadow-section-max-width);
 }

gift-dialog-header {
 padding: var(--shadow-spacing-base);
 }

.gift-block-modal-layout gift-block-actions {
 --shadow-actions-padding: var(--shadow-spacing-base);
 }

.gift-block-modal-layout {
 grid-template-areas:
 "gift-dialog-header"
 "media"
 "content"
 "gift-block-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;
 }
 }
 }
}

@keyframes unblur {
 from { filter: blur(2px); }
 to { filter: blur(0px); }
}

Close

Close

[Skip to content](/content/pages/data-request#main/index.html)

## Bag

Bag

Your bag is empty

[Continue shopping](/content/collections/all/index.html)

For You

Enjoy up to 15% off 4 full sizes of your choice with our set curator

[Get Started](/content/pages/curate-your-own-set/index.html)

Select Gifts

Close ss

0 / 0 Selected

Search for...

Data Request Portal

Tatcha Customer Rights Portal

# Data Request Portal

Thank you for contacting the Tatcha Privacy team to address

your data request. Please complete this form to submit your

request and we will respond as soon as possible. Thank you.

Type of Request

Access My Information

Correct or Update My Information

Delete My Information

Do Not Sell My Information

Email

My Request Details

First Name

Last Name

Phone Number, numeric only,

Comments (max 550 characters)

We value your privacy and are committed to protecting your personal information. Visit our website to learn more.

By submitting this request, I am confirming the above information is true and accurate.

Submit

* * *

Powered by [PieEye Inc.](https://www.pii.ai/)

Checking your Browser…

Verify you are human

Verifying...

Stuck? [Troubleshoot](https://challenges.cloudflare.com/cdn-cgi/challenge-platform/h/b/turnstile/f/av0/rch/u2bcl/0x4AAAAAADJvxuXP5y8HPNmF/auto/fbE/new/invisible?lang=auto#refresh)

Success!

Verification failed

[Troubleshoot](https://challenges.cloudflare.com/cdn-cgi/challenge-platform/h/b/turnstile/f/av0/rch/u2bcl/0x4AAAAAADJvxuXP5y8HPNmF/auto/fbE/new/invisible?lang=auto#refresh)

Verification expired

[Refresh](https://challenges.cloudflare.com/cdn-cgi/challenge-platform/h/b/turnstile/f/av0/rch/u2bcl/0x4AAAAAADJvxuXP5y8HPNmF/auto/fbE/new/invisible?lang=auto#refresh)

Verification expired

[Cloudflare, opens in a new tab](https://www.cloudflare.com/products/turnstile/?utm_source=turnstile&utm_campaign=widget)

[Privacy](https://www.cloudflare.com/privacypolicy/) • [Help](https://challenges.cloudflare.com/cdn-cgi/challenge-platform/help)

Complimentary shipping and returns on U.S. orders

Complimentary samples with every order

Made with high-quality ingredients from Japan.

Every Tatcha purchase supports education equality worldwide.

Go to item 1Go to item 2Go to item 3Go to item 4

tatcha.com

# tatcha.com is blocked

This page has been blocked by an extension

- Try disabling your extensions.

ERR\_BLOCKED\_BY\_CLIENT

Reload

This page has been blocked by an extension

tatcha.com

# tatcha.com is blocked

This page has been blocked by an extension

- Try disabling your extensions.

ERR\_BLOCKED\_BY\_CLIENT

Reload

This page has been blocked by an extension

tatcha.com

# tatcha.com is blocked

This page has been blocked by an extension

- Try disabling your extensions.

ERR\_BLOCKED\_BY\_CLIENT

Reload

This page has been blocked by an extension

[Compare](/content/pages/compare/index.html)

[Close](/content/pages/data-request#!/index.html)

shop.app

# shop.app is blocked

This page has been blocked by an extension

- Try disabling your extensions.

ERR\_BLOCKED\_BY\_CLIENT

Reload

This page has been blocked by an extension

[AI Agent by Alhena AI](https://alhena.ai/)