: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; */ /* used as theme editor setting values - do not change var names */ --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"; --local-grid-template-areas: var(--wrapped-thumbnail-position-start); /* border radius */ --local-border-radius-scale: 60; --local-border-radius-xs: calc(var(--local-border-radius-scale, 65) / 100 * 1rem); --local-border-radius-sm: calc(var(--local-border-radius-scale, 65) / 100 * 1.5rem); --local-border-radius-base: calc(var(--local-border-radius-scale, 65) / 100 * 2.5rem); --local-dialog-border-surface: rgba(0,0,0,0); --local-border-width: 1px; --local-outline-width: calc(var(--local-border-width) + 0.5px); /* buttons */ /* used as theme editor setting values - do not change var names */ --wrapped-hover-style-light: #ffffff; --wrapped-hover-style-dark: #000000; --local-hover-style: var(--wrapped-hover-style-light, --wrapped-hover-style-light); --local-primary-button-surface: rgba(0,0,0,0); --local-primary-button-surface--active: color-mix(in srgb, var(--local-primary-button-surface), var(--local-hover-style) 20%); --local-primary-button-surface--hover: color-mix(in srgb, var(--local-primary-button-surface), var(--local-hover-style) 16%); --local-primary-button-text-color: #1c1d1d; --local-primary-button-text-color--active: color-mix(in srgb, var(--local-primary-button-text-color), var(--local-hover-style) 20%); --local-primary-button-text-color--hover: color-mix(in srgb, var(--local-primary-button-text-color), var(--local-hover-style) 16%); --local-primary-button-border-surface: rgba(0,0,0,0); --local-primary-button-border-surface--active: transparent; --local-primary-button-border-surface--hover: transparent; --local-secondary-button-surface: #0000000f; --local-secondary-button-surface--active: color-mix(in srgb, var(--local-secondary-button-surface), var(--local-hover-style) 20%); --local-secondary-button-surface--hover: color-mix(in srgb, var(--local-secondary-button-surface), var(--local-hover-style) 16%); --local-secondary-button-text-color: #333333; --local-secondary-button-text-color--active: color-mix(in srgb, var(--local-secondary-button-text-color), var(--local-hover-style) 20%); --local-secondary-button-text-color--hover: color-mix(in srgb, var(--local-secondary-button-text-color), var(--local-hover-style) 16%); --local-secondary-button-border-surface: rgba(0,0,0,0); --local-secondary-button-border-surface--active: transparent; --local-secondary-button-border-surface--hover: transparent; /* do not change the root text size */ --local-font-size: 16px; /* text and fonts */ --local-font-family: inherit; --local-font-scale: calc(100 / 100); --local-font-size-sm: clamp(12px, calc(14px * var(--local-font-scale)), 16px); --local-font-size-base: clamp(12px, calc(16px * var(--local-font-scale)), 20px); --local-font-size-lg: clamp(16px, calc(24px * var(--local-font-scale)), 28px); --local-font-weight-base: var(--wrapped-font-weight-base, 400); --local-font-weight-md: 500; --local-font-weight-lg: 600; --local-letter-spacing: var(--wrapped-letter-spacing, normal); --local-line-height-base: 1.5em; /* transitions */ --local-transition-duration: 0.1s; --local-spinner-duration: 0.7s; /* disabled */ --local-disabled-opacity-sm: 0.16; --local-disabled-opacity: 0.32; --local-disabled-opacity-md: 0.4; --local-disabled-opacity-lg: 0.64; /* Pre-calculated percentages for color-mix */ --local-disabled-opacity-percent: 32%; --local-disabled-opacity-sm-percent: 16%; --local-disabled-opacity-md-percent: 40%; --local-disabled-opacity-lg-percent: 64%; --local-disabled-cursor: not-allowed; /* form elements */ --local-form-element-surface: #ffffff; --local-form-element-surface--disabled: color-mix(in srgb, var(--local-form-element-surface) var(--local-disabled-opacity-percent), var(--local-secondary-text-color) 8%); --local-form-element-border-color: #0000000f; --local-form-element-border-color--active: color-mix(in srgb, var(--local-form-element-border-color), white 83%); --local-form-element-border-color--disabled: color-mix(in srgb, var(--local-form-element-border-color) var(--local-disabled-opacity-percent), var(--local-secondary-text-color) 8%); --local-form-element-text-color: #333333; --local-form-element-text-color--disabled: color-mix(in srgb, var(--local-form-element-text-color), var(--local-secondary-text-color) 8%); --local-form-element-placeholder-text-color: color-mix(in srgb, var(--local-form-element-text-color) var(--local-disabled-opacity-percent), transparent); --local-form-element-placeholder-text-color--disabled: color-mix(in srgb, var(--local-form-element-text-color) var(--local-disabled-opacity-percent), var(--local-secondary-text-color) 8%); --local-form-element-selection-color: #000000; --local-form-element-selection-color--active: color-mix(in srgb, var(--local-form-element-selection-color), var(--local-hover-style) 40%); --local-form-element-selection-color--hover: color-mix(in srgb, var(--local-form-element-selection-color), var(--local-hover-style) 32%); /* primary colors */ --local-primary-surface: #ffffff; --local-primary-text-color: #000000; --local-primary-text-color--hover: color-mix(in srgb, var(--local-primary-text-color), var(--local-hover-style) 32%); /* secondary colors */ --local-secondary-surface: #f3f3f3; --local-secondary-text-color: #333333; --local-secondary-text-color--disabled: color-mix(in srgb, var(--local-secondary-text-color) var(--local-disabled-opacity-lg-percent), var(--local-secondary-text-color) 8%); /* Typography customizations */ --local-button-text-transform: var(--wrapped-button-text-transform, none); --local-button-letter-spacing: var(--wrapped-button-letter-spacing, var(--local-letter-spacing, normal)); --local-button-font-style: var(--wrapped-button-font-style, normal); /* spacing */ /* used as theme editor setting values - do not change var names */ --wrapped-spacing-scale-base: 1; --wrapped-spacing-scale-less: 0.75; --wrapped-spacing-scale-more: 1.166; --local-spacing-scale: var(--wrapped-spacing-scale-base, 1); --local-spacing-fixed: 4px; --local-spacing-base: clamp(12px, calc(16px * var(--local-spacing-scale)), 24px); --local-spacing-lg: clamp(16px, calc(24px * var(--local-spacing-scale)), 28px); --local-spacing-sm: clamp(8px, calc(12px * var(--local-spacing-scale)), 14px); --local-spacing-xs: clamp(6px, calc(8px * var(--local-spacing-scale)), 10px); /* shadows */ --local-shadow-blur: 1.5rem; --local-shadow-color: rgba(0, 0, 0, 0.25); --local-shadow-offset: 0.75rem; /* default styles */ all: revert; box-sizing: border-box; cursor: default; display: block; font-family: var(--local-font-family); font-size: var(--local-font-size); line-height: var(--local-line-height-base); letter-spacing: var(--local-letter-spacing); margin-block-start: var(--local-spacing-xs); margin-block-end: var(--local-spacing-xs); text-align: start; width: -webkit-fill-available; white-space: normal; } *, *::before, *::after { box-sizing: inherit; } /* gift block launcher */ gift-block-launcher { display: contents; } .gift-block__launcher { background-color: var(--local-primary-button-surface); border-color: var(--local-primary-button-border-surface); border-width: var(--local-border-width); border-radius: var(--local-border-radius-sm); border-style: solid; color: var(--local-primary-button-text-color); padding: var(--local-spacing-sm); font-family: var(--local-font-family); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-base); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); max-width: var(--wrapped-launcher-button-max-width, 440px); text-transform: var(--local-button-text-transform); width: 100%; &:hover { cursor: pointer; background-color: var(--local-primary-button-surface--hover); border-color: var(--local-primary-button-border-surface--hover); } &:active { background-color: var(--local-primary-button-surface--active); border-color: var(--local-primary-button-border-surface--active); } &:focus, &:focus-visible { outline: none; } &[with-checkmark] { position: relative; display: inline-flex; align-items: center; gap: var(--local-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(--local-transition-duration) * 3) ease forwards; */ } } } &[variant="link"] { background: none; border: none; color: var(--local-primary-text-color); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-base); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); text-transform: var(--local-button-text-transform); text-decoration: none; padding: 0; width: auto; &:hover { cursor: pointer; color: var(--local-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(--local-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(--local-disabled-cursor); opacity: var(--local-disabled-opacity); pointer-events: none; &[with-checkmark] { .icon-wrapper { opacity: var(--local-disabled-opacity-md); } } } /* gift block modal */ .gift-block-modal { background-color: var(--local-primary-surface); border: none; border-radius: var(--local-border-radius-base); box-shadow: 0 var(--local-shadow-offset) var(--local-shadow-blur) var(--local-shadow-color); outline: var(--local-border-width) solid var(--local-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(--local-border-width) solid var(--local-dialog-border-surface); } @media (max-width: 768px) { .gift-block-modal { max-height: calc(100% - var(--local-spacing-sm)); max-width: calc(100% - var(--local-spacing-sm)); overscroll-behavior: contain; } } /* gift block modal layout */ .gift-block-modal-layout { display: grid; grid-template-areas: var(--local-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(--local-primary-surface); display: flex; flex-direction: row; gap: var(--local-spacing-fixed); grid-area: gift-dialog-header; justify-content: space-between; padding: var(--local-spacing-lg); position: sticky; top: 0; z-index: 1; & h1 { color: var(--local-primary-text-color); font-size: var(--local-font-size-lg); font-weight: var(--local-font-weight-md); line-height: 1.25em; margin: 0; } & button { background-color: color-mix(in srgb, var(--local-secondary-text-color) 8%, transparent); color: var(--local-secondary-text-color); border-radius: var(--local-border-radius-xs); font-size: var(--local-font-size-sm); font-weight: var(--local-font-weight-lg); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); text-transform: var(--local-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(--local-transition-duration) ease, color var(--local-transition-duration) ease; &:hover { background-color: color-mix(in srgb, var(--local-secondary-text-color) 6%, var(--local-hover-style) 12%); } &:active { background-color: color-mix(in srgb, var(--local-secondary-text-color) 16%, var(--local-hover-style) 16%); } &:disabled { pointer-events: none; opacity: var(--local-disabled-opacity); } } } gift-dialog-actions { align-items: flex-end; background-color: var(--local-primary-surface); bottom: 0; display: flex; flex-direction: column; gap: var(--local-spacing-sm); grid-area: gift-dialog-actions; overscroll-behavior: contain; position: sticky; padding: var(--local-spacing-lg); z-index: 1; & button { border-radius: var(--local-border-radius-sm); border-width: var(--local-border-width); border-style: solid; cursor: pointer; font-family: var(--local-font-family); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-md); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); text-transform: var(--local-button-text-transform); padding: var(--local-spacing-sm); position: relative; width: 100%; transition: background-color var(--local-transition-duration) ease, border-color var(--local-transition-duration) ease, color var(--local-transition-duration) ease, opacity var(--local-transition-duration) ease; &.primary { background-color: var(--local-primary-button-surface); border-color: var(--local-primary-button-border-surface); color: var(--local-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(--local-primary-button-surface--hover); border-color: var(--local-primary-button-border-surface--hover); color: var(--local-primary-button-text-color--hover); } &:active { background-color: var(--local-primary-button-surface--active); border-color: var(--local-primary-button-border-surface--active); color: var(--local-primary-button-text-color--active); } &[loading] { background-color: var(--local-primary-button-surface--active); border-color: var(--local-primary-button-border-surface--active); color: var(--local-primary-button-text-color--active); pointer-events: none; .button-content { opacity: 0; } } } &.secondary { background-color: var(--local-secondary-button-surface); border-color: var(--local-secondary-button-border-surface); color: var(--local-secondary-button-text-color); display: flex; align-items: center; justify-content: center; .button-content { display: flex; align-items: center; justify-content: center; gap: var(--local-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(--local-transition-duration) ease-in-out; } } &:hover { background-color: var(--local-secondary-button-surface--hover); border-color: var(--local-secondary-button-border-surface--hover); color: var(--local-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(--local-secondary-button-surface--active); border-color: var(--local-secondary-button-border-surface--active); .icon-wrapper { transition: filter var(--local-transition-duration) ease-in-out; } } &[hidden] { display: none; } &[loading] { background-color: var(--local-secondary-button-surface--active); border-color: var(--local-secondary-button-border-surface--active); color: var(--local-secondary-button-text-color--active); pointer-events: none; .button-content { opacity: 0; } .spinner .svg-wrapper svg { fill: var(--local-secondary-button-text-color--active); } } } &:disabled { cursor: var(--local-disabled-cursor); opacity: var(--local-disabled-opacity); pointer-events: none; .button-content { pointer-events: none; opacity: calc(var(--local-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(--local-spinner-duration) cubic-bezier(0, 0, 1, 1) infinite; fill: var(--local-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(--local-secondary-surface); grid-area: media; grid-row: 1 / 4; height: 100%; padding: var(--local-spacing-lg); position: sticky; top: 0; transition: order var(--local-transition-duration) ease, width var(--local-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(--local-border-radius-sm); width: 100%; height: auto; } } } section#content { grid-area: content; background-color: var(--local-primary-surface); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding: var(--local-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(--local-spacing-lg); transition: order var(--local-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(--local-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(--local-spacing-base); column-gap: var(--local-spacing-sm); } & .gift-product-content { display: flex; flex: 1 1 50%; flex-direction: column; gap: var(--local-spacing-xs); } & .gift-product-media { display: flex; align-items: center; &:has(shopify-media) { --local-inline-media-max-size: 60px; --local-inline-media-size: clamp(40px, 60px, var(--local-inline-media-max-size)); border-radius: var(--local-border-radius-sm); height: var(--local-inline-media-size); width: var(--local-inline-media-size); overflow: hidden; margin-inline-start: auto; margin-inline-end: auto; } & shopify-media { & img { border-radius: var(--local-border-radius-sm); width: 100%; height: auto; } } } & .gift-product-title { color: var(--local-primary-text-color); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-md); margin: 0; } & .gift-product-pricing { display: flex; gap: var(--local-spacing-xs); margin: 0; font-weight: var(--local-font-weight-base); /* font-size: var(--local-font-size-base); */ font-size: clamp(12px, calc(var(--local-font-size-base) * 0.94), 18px); line-height: 1em; } & .gift-product-price { color: var(--local-secondary-text-color); } & .gift-product-price--compare { color: var(--local-secondary-text-color); text-decoration: line-through; opacity: var(--local-disabled-opacity); } & .gift-product-description { font-weight: var(--local-font-weight-base); color: var(--local-secondary-text-color); font-size: clamp(12px, calc(var(--local-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(--local-spacing-lg); } } } /* gift messaging fields */ & gift-dialog-message { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--local-spacing-base); } & .option-group { display: flex; flex-direction: column; gap: var(--local-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(--local-disabled-cursor); pointer-events: none; opacity: var(--local-disabled-opacity-md); transition: background-color var(--local-transition-duration) ease, color var(--local-transition-duration) ease; & .message-field { background-color: var(--local-form-element-surface--disabled); color: transparent; outline-color: var(--local-form-element-border-color--disabled); pointer-events: none; } } &.option-group-hidden { display: none; } & label { font-size: var(--local-font-size-sm); font-weight: var(--local-font-weight-base); color: var(--local-secondary-text-color); line-height: 1em; } & .message-field { background-color: var(--local-form-element-surface); color: var(--local-form-element-text-color); width: 100%; padding: var(--local-spacing-sm); border: none; border-radius: var(--local-border-radius-sm); font-family: var(--local-font-family); font-size: var(--local-font-size-base); outline: var(--local-border-width) solid var(--local-form-element-border-color); min-height: 42px; } & .message-field:active, & .message-field:focus, & .message-field:focus-within, & .message-field:focus-visible { outline-color: var(--local-form-element-selection-color); outline-width: var(--local-outline-width); /* UX verification needed &::placeholder { color: transparent; } */ } & .message-field::placeholder { color: var(--local-form-element-placeholder-text-color); } & textarea.message-field { min-height: 100px; resize: vertical; } & .counter { color: var(--local-secondary-text-color); font-size: var(--local-font-size-sm); line-height: normal; } } } /* shopify variant selector */ shopify-variant-selector { font-size: var(--local-font-size-sm); width: 100%; } shopify-variant-selector::part(form) { gap: var(--local-spacing-base); } shopify-variant-selector::part(radio) { background-color: var(--local-form-element-surface); color: var(--local-form-element-text-color); border: none; border-radius: var(--local-border-radius-sm); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-base); outline: var(--local-border-width) solid var(--local-form-element-border-color); padding: calc(var(--local-spacing-sm) * 0.5) var(--local-spacing-base); transition: color var(--local-transition-duration) ease, outline-color var(--local-transition-duration) ease, outline-width var(--local-transition-duration) ease; } shopify-variant-selector::part(radio):active { outline-color: var(--local-form-element-selection-color--active); outline-width: var(--local-outline-width); } shopify-variant-selector::part(radio):hover { outline-color: var(--local-form-element-selection-color--hover); } shopify-variant-selector::part(radio-disabled) { background-color: var(--local-form-element-surface--disabled); color: var(--local-form-element-text-color--disabled); opacity: var(--local-disabled-opacity); /* do not transition opacity - it causes a flash when changing variants */ outline-color: var(--local-form-element-border-color--disabled); pointer-events: none; } shopify-variant-selector::part(radio-selected) { outline-color: var(--local-form-element-selection-color); outline-width: var(--local-outline-width); pointer-events: none; } shopify-variant-selector::part(select) { color: var(--local-form-element-text-color); border: none; border-radius: var(--local-border-radius-sm); font-family: var(--local-font-family); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-base); margin-top: var(--local-spacing-xs); width: 100%; max-width: 100%; padding: var(--local-spacing-sm); padding-right: calc(var(--local-spacing-sm) + 1.5rem); outline: var(--local-border-width) solid var(--local-form-element-border-color); appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--local-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(--local-form-element-selection-color); outline-width: var(--local-outline-width); } shopify-variant-selector::part(color-swatch) { border: none; outline: var(--local-border-width) solid rgba(0, 0, 0, .1); transition: color var(--local-transition-duration) ease, outline-color var(--local-transition-duration) ease, outline-width var(--local-transition-duration) ease; } shopify-variant-selector::part(color-swatch):active { outline-color: var(--local-form-element-selection-color--active); outline-width: var(--local-outline-width); } shopify-variant-selector::part(color-swatch):hover { outline-color: var(--local-form-element-selection-color--hover); } shopify-variant-selector::part(color-swatch-selected) { outline-color: var(--local-form-element-selection-color); outline-width: var(--local-outline-width); } shopify-variant-selector::part(color-swatch-selected):after { content: unset; } shopify-variant-selector::part(color-swatch-label) { color: var(--local-secondary-text-color); } shopify-variant-selector::part(color-swatch-disabled) { opacity: var(--local-disabled-opacity); /* do not transition opacity - it causes a flash when changing variants */ pointer-events: none; } shopify-variant-selector::part(label) { color: var(--local-secondary-text-color); display: inline-block; font-size: var(--local-font-size-sm); font-weight: var(--local-font-weight-base); line-height: 1em; margin-bottom: calc(var(--local-spacing-sm) - 6px); } /* media queries */ /* md - and above */ @media (min-width: 768px) { :host { --local-section-max-width: 420px; } gift-dialog-content > section { min-width: var(--local-section-max-width); max-width: var(--local-section-max-width); } gift-dialog-header, gift-dialog-actions { min-width: var(--local-section-max-width); max-width: var(--local-section-max-width); } } /* md - and below */ @media (max-width: 768px) { :host { --local-section-max-width: 390px; } gift-dialog-content > section { min-width: var(--local-section-max-width); max-width: var(--local-section-max-width); } gift-dialog-header, gift-dialog-actions { min-width: var(--local-section-max-width); max-width: var(--local-section-max-width); padding: var(--local-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(--local-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(--local-section-max-width); max-height: var(--local-section-max-width); } } } section#content { overflow-y: unset; padding: var(--local-spacing-base); &.with-media-inline { padding-top: 0; } & .gift-product-media { &:has(shopify-media) { --local-inline-media-max-size: 330px; } } } } /* sm - and below */ @media (max-width: 480px) { :host { --local-section-max-width: 100%; } section#media { & shopify-media { & img { border-radius: unset; min-height: 350px; max-height: 350px; } } } } /* animations for loaders */ @keyframes spin { 100% { transform: rotate(1turn); } } @keyframes unblur { from { filter: blur(2px); } to { filter: blur(0px); } }
Skip to content
Pause slideshow
Play slideshow
CUE THE COCOA☕CHRISTMAS IS HERE!
🎁SHOP NOW🎁
🤍Meet your matches!🤍
✨TAKE THE NEWBORN STYLE QUIZ✨
icon-X
Close menu
🎄 CHRISTMAS
🦃THANKSGIVING
🎃 HALLOWEEN
🎀 SHOP GIRL
💙 SHOP BOY
🍼 NEWBORN
👶 SWADDLES
☁️ PAJAMAS
🖍️ COLORABLE
👜 COMING HOME OUTFITS
🎁 GIFT GUIDE
New Arrivals
New This Week
New Arrivals For Girls
New Arrivals For Boys
The Ultimate Newborn Gift
Best Sellers
Best Sellers for Baby
Best Selling Personalized
The Ultimate Newborn Gift
Take The Newborn Gift Guide Quiz
🎄Christmas
🦃 Thanksgiving
🎃Halloween
🧵Embroidery
🤍 Diaper Bag Backpacks & Totes
🎁 The Ultimate Newborn Gift Box
🖍️ The Colorable Collection
🧇 NEW Bamboo Waffle
🐻 Cuddle Plush Friends
💉 Conceive Fertility Collection
Newborn
Gift Sets
Newborn + Preemie Knotted Gowns
Printed Knot Gowns
Solid Bamboo Knot Gowns
Bamboo Waffle Knot Gowns
Personalized Knot Gowns
Preemie Knot Gowns
Zipper Footies
Infant Apparel
Zipper Footies
2pc Bamboo Matching Sets
Convertible Rompers
Embroidered Outfits
Knit Sweater Romper Sets
Personalized Full Length Snap Rompers
Bubble Rompers
Infant Graphic Bodysuits
Knit Sweater Sets
Swaddles + Blankets
Personalized Swaddles
Printed Swaddles
Solid Bamboo Swaddles
Personalized Blankets
CuddleLane™ Luxe Collection
CuddleLane™ Blankets
Baby Name Signs & Keepsakes
Wood Name Signs
Color Name Signs
Wood Decision Coins
Personalized Wood Brushes
Personalized Wood Hangers
Cuddle Plush Friends
Newborn Accessories
Bows & Headwraps
Baby Beanies
Personalized Paci Clips
Knotted Hats
Personalized Knotted Hats
Bib & Burp Sets
Hooded Bath Towels
Diaper Bags
Need Help Finding The Perfect Gift?
Baby + Kids
Pajamas
2pc Pajama Sets
Convertible Rompers
Footies
Colorable Pajama Sets
Girls Nightgowns
Zipper Rompers
Zipper Footies
Printed Zipper Footies
Solid Bamboo Zipper Footies
Personalized Kids Blankets
Color & Font Blankets
Graphics & Font Blankets
Themed Blankets
CuddleLane™ Luxe Blankets
CuddleLane™ Blankets
Kids Apparel
Boy's Apparel
Girl's Apparel
CloudActive™ Athleisure
Tutus & Leotards
Graphic Tees
Sibling Shirts
Gifts & More
Silicone Essentials & Playsets
Whiteboards
Water Bottles
Embroidered Outfits & Accessories
Personalized Books
Backpacks
Personalized Step Stools
Hooded Towels
Cuddle Plush Animals
Holiday
Halloween
Glow In the Dark Pajamas
Family Matching Pajamas
Treat Bags and Accessories
Kids & Baby Graphic Tees & Bodysuits
Adult Halloween Pajamas
Halloween Blankets
Christmas
Family Matching Pajamas
Christmas Bamboo Waffle
Christmas Nightgowns
Christmas Keepsakes
Family Graphic Tees & Bodysuits
Personalized Baby & Kids Gift Guide
Hanukkah
Family Matching
Bamboo Pajamas
Family Graphic Tees & Bodysuits
Hanukkah Gifts
Thanksgiving
Family Matching Pajamas
Bamboo Pajamas
Family Graphic Tees & Bodysuits
Thanksgiving Gifts
For Mom
Best Sellers
Mommy & Me Hospital Sets
Mommy & Me Flare Lounge Sets
Mommy Robes
Labor & Delivery Nightgowns
Matching Family Pajamas
Mom & Grandma Blankets
Graphic T-shirts
Conceive Fertility Foundation
Diaper Bags & Totes
Diaper Bag Backpacks
Diaper Bag Totes
Weekender Bags
Hospital Bag Must-Haves
Nursing Covers
Nursing Pillow Covers
Multi-Use Carseat Covers
Personalized
Best Sellers
Swaddles + Blankets
Personalized Pacifier Clips
Personalized Leather Patch Beanies
Silicone Bottle Labels
Personalized Snap Rompers
Kids Water Bottles
Baby Name Wood Signs
Activity Boards & Dry Erase Whiteboards
Kids Puzzles
Personalized For Baby
Swaddles
Blankets
Personalized Newborn Outfits
Wood Signs & Keepsakes
Silicone Bottle Labels
Personalized Books
Embroidered Outfits & Gifts
Graphic Tees & Bodysuits
Accessories
Hooded & Beach Towels
Nursing Pillow Covers
Milestone Blankets
For Mom + Dad + Grandma
Holiday Tees
Blankets
Nursing Pillow Covers
Nursery
All Crib Sheets
Solid Crib Sheets
Printed Crib Sheets
Personalized Crib Sheets
Changing Pad Covers
Solid Changing Pad Covers
Printed Changing Pad Covers
Personalized Changing Pad Covers
Baby Blankets
Printed Baby Blankets
Personalized Blankets
Swaddles
Personalized Swaddles
Nursery Decor
Printable Digital Wall Art
Wallpaper
Personalized Throw Pillows
Nursing Pillow Covers
Sale
Newborn Style Quiz
Colorable Pajamas
Personalized Favorites
Newborn Outfits
Swaddles & Blankets
Rewards
I'm That Mom Podcast
Wholesale
Log in
instagram
Instagram
Facebook
YouTube
Pinterest
TikTok
LinkedIn
Newborn Style Quiz
Colorable Pajamas
Personalized Favorites
Newborn Outfits
Swaddles & Blankets
Rewards
I'm That Mom Podcast
Wholesale
Currency
United States (USD $)
Albania (ALL L)
Algeria (DZD د.ج)
Andorra (EUR €)
Angola (USD $)
Anguilla (XCD $)
Antigua & Barbuda (XCD $)
Argentina (USD $)
Armenia (AMD դր.)
Aruba (AWG ƒ)
Australia (AUD $)
Austria (EUR €)
Azerbaijan (AZN ₼)
Bahamas (BSD $)
Bahrain (USD $)
Bangladesh (BDT ৳)
Barbados (BBD $)
Belgium (EUR €)
Belize (BZD $)
Benin (XOF Fr)
Bermuda (USD $)
Bolivia (BOB Bs.)
Bosnia & Herzegovina (BAM КМ)
Botswana (BWP P)
Brazil (USD $)
British Virgin Islands (USD $)
Brunei (BND $)
Bulgaria (BGN лв.)
Burkina Faso (XOF Fr)
Burundi (USD $)
Cambodia (KHR ៛)
Cameroon (XAF CFA)
Cape Verde (CVE $)
Caribbean Netherlands (USD $)
Cayman Islands (KYD $)
Chad (XAF CFA)
Chile (USD $)
China (CNY ¥)
Colombia (USD $)
Comoros (KMF Fr)
Cook Islands (NZD $)
Costa Rica (CRC ₡)
Croatia (EUR €)
Curaçao (ANG ƒ)
Cyprus (EUR €)
Czechia (CZK Kč)
Denmark (DKK kr.)
Djibouti (DJF Fdj)
Dominica (XCD $)
Dominican Republic (DOP $)
Ecuador (USD $)
Egypt (EGP ج.م)
El Salvador (USD $)
Equatorial Guinea (XAF CFA)
Estonia (EUR €)
Eswatini (USD $)
Ethiopia (ETB Br)
Falkland Islands (FKP £)
Faroe Islands (DKK kr.)
Fiji (FJD $)
Finland (EUR €)
France (EUR €)
French Guiana (EUR €)
French Polynesia (XPF Fr)
Gabon (XOF Fr)
Gambia (GMD D)
Georgia (USD $)
Germany (EUR €)
Ghana (USD $)
Gibraltar (GBP £)
Greece (EUR €)
Greenland (DKK kr.)
Grenada (XCD $)
Guadeloupe (EUR €)
Guatemala (GTQ Q)
Guernsey (GBP £)
Guinea (GNF Fr)
Guinea-Bissau (XOF Fr)
Guyana (GYD $)
Haiti (USD $)
Honduras (HNL L)
Hong Kong SAR (USD $)
Hungary (HUF Ft)
Iceland (ISK kr)
India (INR ₹)
Indonesia (IDR Rp)
Ireland (EUR €)
Italy (EUR €)
Jamaica (JMD $)
Japan (JPY ¥)
Jersey (USD $)
Jordan (USD $)
Kazakhstan (KZT ₸)
Kenya (KES KSh)
Kiribati (USD $)
Kyrgyzstan (KGS som)
Laos (LAK ₭)
Latvia (EUR €)
Lesotho (USD $)
Liechtenstein (CHF CHF)
Lithuania (EUR €)
Luxembourg (EUR €)
Macao SAR (MOP P)
Madagascar (USD $)
Malawi (MWK MK)
Malaysia (MYR RM)
Maldives (MVR MVR)
Malta (EUR €)
Martinique (EUR €)
Mauritania (USD $)
Mauritius (MUR ₨)
Mayotte (EUR €)
Mexico (USD $)
Moldova (MDL L)
Monaco (EUR €)
Mongolia (MNT ₮)
Montenegro (EUR €)
Montserrat (XCD $)
Morocco (MAD د.م.)
Mozambique (USD $)
Namibia (USD $)
Nauru (AUD $)
Nepal (NPR Rs.)
Netherlands (EUR €)
New Caledonia (AUD $)
New Zealand (AUD $)
Nicaragua (NIO C$)
Nigeria (NGN ₦)
Niue (NZD $)
North Macedonia (USD $)
Norway (USD $)
Oman (USD $)
Pakistan (PKR ₨)
Panama (USD $)
Papua New Guinea (AUD $)
Paraguay (PYG ₲)
Peru (PEN S/)
Philippines (PHP ₱)
Poland (PLN zł)
Portugal (EUR €)
Qatar (USD $)
Réunion (EUR €)
Romania (RON Lei)
Rwanda (RWF FRw)
Samoa (WST T)
San Marino (EUR €)
São Tomé & Príncipe (STD Db)
Saudi Arabia (SAR ر.س)
Senegal (XOF Fr)
Serbia (RSD РСД)
Seychelles (USD $)
Sierra Leone (SLL Le)
Singapore (USD $)
Slovakia (EUR €)
Slovenia (EUR €)
Solomon Islands (SBD $)
South Africa (USD $)
South Korea (KRW ₩)
Spain (EUR €)
Sri Lanka (LKR ₨)
St. Barthélemy (EUR €)
St. Kitts & Nevis (XCD $)
St. Lucia (XCD $)
St. Martin (EUR €)
St. Vincent & Grenadines (XCD $)
Suriname (USD $)
Sweden (SEK kr)
Switzerland (CHF CHF)
Taiwan (TWD $)
Tanzania (TZS Sh)
Thailand (THB ฿)
Timor-Leste (USD $)
Togo (XOF Fr)
Tonga (TOP T$)
Trinidad & Tobago (TTD $)
Tunisia (USD $)
Turks & Caicos Islands (USD $)
Tuvalu (AUD $)
Uganda (UGX USh)
United Arab Emirates (AED د.إ)
United Kingdom (GBP £)
United States (USD $)
Uruguay (UYU $U)
Uzbekistan (UZS so'm)
Vanuatu (VUV Vt)
Vietnam (USD $)
Zambia (USD $)
icon-search
Search
icon-hamburger
Site navigation
New Arrivals
New This Week
All New Arrivals
New For Girls
New For Boys
New For Newborns
New for Kids
Best Sellers
Best Sellers for Baby
Best Sellers for Kids
Personalized Best Sellers
The Ultimate Newborn Gift
🎄Christmas
🦃 Thanksgiving
🎃Halloween
🧵Embroidery
🤍 Diaper Bag Backpacks & Totes
🎁 The Ultimate Newborn Gift Box
🖍️ The Colorable Collection
🧇 NEW Bamboo Waffle
🐻 Cuddle Plush Friends
💉 Conceive Fertility Collection
Baby
Newborn + Preemie Knotted Gowns
Printed Knot Gowns
Solid Bamboo Knot Gowns
Bamboo Waffle Knot Gowns
Personalized Knot Gowns
Preemie Knot Gowns
Infant Apparel
Zipper Footies
2pc Bamboo Matching Sets
Knit Sweater Romper Sets
Embroidered Outfits
Personalized Full Length Snap Rompers
Bubble Rompers
Infant Graphic Bodysuits
Swaddles + Blankets
Personalized Swaddles
Printed Swaddles
Solid Bamboo Swaddles
Personalized Blankets
CuddleLane™ Luxe Collection
Baby Name Signs & Keepsakes
Gift Sets
Wood Name Signs
Color Name Signs
Personalized Wood Brushes
Personalized Wood Hangers
Cuddle Plush Animals
Newborn Accessories
Bows & Headwraps
Baby Beanies
Personalized Paci Clips
Knotted Hats
Personalized Knotted Hats
Bib & Burp Sets
Hooded Bath Towels
Kids
Pajamas
2pc Pajama Sets
Convertible Rompers
Colorable Pajama Sets
Girls Nightgowns
Zipper Footies
Printed Zipper Footies
Solid Bamboo Zipper Footies
Personalized Kids Blankets
Color & Font Blankets
Graphics & Font Blankets
Themed Blankets
CuddleLane™ Luxe Blankets
Double Sided Bamboo Blankets
Kids Apparel
Boy's Apparel
Girl's Apparel
CloudActive™ Athleisure
Sibling Shirts
Tutus & Leotards
Graphic Tees
Gifts & More
Whiteboards
Silicone Essentials & Playsets
Water Bottles
Personalized Books
Hooded Towels
Personalized Step Stools
Backpacks
Cuddle Plush Animals
Holidays
Halloween
Glow In the Dark Pajamas
Family Matching Pajamas
Treat Bags and Accessories
Kids & Baby Graphic Tees & Bodysuits
Adult Halloween Pajamas
Halloween Blankets
Christmas
Family Matching Pajamas
Christmas Bamboo Waffle
Christmas Nightgowns
Christmas Keepsakes
Family Graphic Tees & Bodysuits
Baby & Kids Gift Guide
Hanukkah
Family Matching
Bamboo Pajamas
Family Graphic Tees & Bodysuits
Hanukkah Gifts
Thanksgiving
Family Matching Pajamas
Bamboo Pajamas
Family Graphic Tees & Bodysuits
Thanksgiving Gifts
Mom
Best Sellers
Mommy + Me Hospital Sets
Mommy + Me Flare Lounge Sets
Mommy Robes
Labor & Delivery Nightgowns
Matching Family Pajamas
Mom & Grandma Blankets
Graphic T-Shirts
Conceive Fertility Foundation
Diaper Bags & Totes
Diaper Bag Backpacks
Diaper Bag Totes
Weekender Bags
Hospital Bag Must-Haves
Mommy & Me Matching
Maternity Robes
Labor & Delivery Nightgowns
Nursing Covers
Nursing Pillow Covers
Multi-Use Car Seat Covers
Personalized
Best Sellers
Best Selling Personalized Gifts
Knit Sweater Romper Sets
Swaddles & Blankets
Personalized Pacifier Clips
Personalized Leather Patch Beanies
Silicone Bottle Labels
Personalized Snap Rompers
Kids Water Bottles
Wood Name Signs
Activity Boards & Dry Erase Whiteboards
Kids Puzzles
Personalized For Baby
Swaddles
Blankets
Personalized Newborn Outfits
Wood Signs & Keepsakes
Silicone Bottle Labels
Personalized Books
Graphic Tees & Bodysuits
Accessories
Hooded & Beach Towels
Nursing Pillow Covers
Milestone Blankets
Personalized for Kids
Blankets
Kids Water Bottles
Activity Boards & Dry Erase Whiteboards
Kids Puzzles
Personalized Books
Two-Piece Pajama Sets
Step Stools
Graphic Tees & Sweatshirts
Tote Bags
Silicone Kitchen Sets
Hooded & Beach Towels
For Mom + Dad + Grandma
Graphic Tees
Blankets
Nursing Pillow Covers
Nursery
All Crib Sheets
Solid Crib Sheets
Printed Crib Sheets
Personalized Crib Sheets
Changing Pad Covers
Solid Changing Pad Covers
Printed Changing Pad Covers
Personalized Changing Pad Covers
Baby Blankets
Printed Baby Blankets
Personalized Blankets
Swaddles
Personalized Swaddles
Nursery Decor
Printable Digital Wall Art
Wallpaper
Personalized Throw Pillows
Nursing Pillow Covers
Sale
New To Sale
Swim Sale
account
Log in
Account
Wishlist
icon-search
Search
Cart
Search
Search
Christmas
Halloween
Pajamas
Knot Gowns
Swaddles
Footies
Rompers
Colorable
Personalized
Blankets
Graphic Tee Shirts For Dad
Shop By Size
SMALL
(4)
MEDIUM
(4)
LARGE
(4)
XL
(4)
XXL
(4)
3XL
(4)
Shop By Gender
Boy
(2)
Men
(2)
Shop By Print
Freshwater Friends
Freshwater Friends
Silly Skellies
Silly Skellies
Trick or Treat
Trick or Treat
Wavy Days
Wavy Days
Shop By Color
Neutral
Neutral
Orange
Orange
White
White
Shop By Type
Men's Graphic Tees
(2)
Women's Graphic Tees
(2)
Shop By Price
Filter
icon-X
Close menu
Shop By Size
SMALL
(4)
MEDIUM
(4)
LARGE
(4)
XL
(4)
XXL
(4)
3XL
(4)
Shop By Gender
Boy
(2)
Men
(2)
Shop By Print
Freshwater Friends
Freshwater Friends
Silly Skellies
Silly Skellies
Trick or Treat
Trick or Treat
Wavy Days
Wavy Days
Shop By Color
Neutral
Neutral
Orange
Orange
White
White
Shop By Type
Men's Graphic Tees
(2)
Women's Graphic Tees
(2)
Shop By Price
icon-filter
Filter
4 products
Sort
Sort
Featured
Best selling
Alphabetically, A-Z
Alphabetically, Z-A
Price, low to high
Price, high to low
Date, old to new
Date, new to old
Freshwater Friends Dad Graphic Tee | White
White
Wavy Days Dad Graphic Tee | White
White
Deady Adult Graphic Tee | White
White
Dadcula Adult Graphic Tee | White
White
THE PERFECT SLEEPER
View all
🎄 LIMITED EDITION
Christmas Bamboo Waffle Zipper Footies
Sleigh Ride Sweets
Santa Baby
Coquette Christmas
Santa Baby Ruffle
SALE!
🎃 LIMITED EDITION
Halloween Zipper Footies
Regular price
$36.00
Sale price
from
Trick or Treat Ruffle
Silly Skellies
Midnight Mummies
Boo Babes
Trick or Treat
Turkey Treats Bamboo Waffle Zipper Footie
Cookie Cuddles Zipper Footie
View all
119 products
icon-X
"Close (esc)"
icon-X
icon-chevron
icon-X
Graphic Tee Shirts For Dad
Skip
Powered by
{"themeColor":"#574CD5","iconColor":"#574CD5","showLogo":true,"topBottomPosition":10,"rightLeftPosition":10,"iconSize":"small","iconCustomSize":64,"position":"middle-right"}
{ "items": [ ] }