: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: 4; --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: #394a3f; --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: #ffffff; --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: #fefdfb; --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: #000000; --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: #fefdfb; --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: #ffffff; --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); 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
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop In-Stock & Ready To Ship Furniture
__________________________________
Free Shipping On Orders Over $500. No Code Necessary.
__________________________________
Furniture Ships Free! White Glove Delivery Available.
__________________________________
Shop
Interior Design
Registry
Rewards
Events
Fine Art
About
Stores
Search
Furniture
Lighting
Decor
Kitchen & Table
Books
Apothecary
Apparel & Accessories
Lifestyle
Vermont
Sale
Account
Search
Cart
Recommended For You
Four Hands
Vases, Jars & Jugs
Entertaining
Gift Guide
Occasions
Gift Cards
Furniture
Shop By Room
Entryway
Living Room
Dining Room
Kitchen
Bedroom
Home Office
All Furniture
Sofas & Sectionals
Dining Tables & Chairs
Console Tables & Sideboards
Cabinets
Swivel & Arm Chairs
Coffee Tables
End & Side Tables
Ottomans, Stools & Poufs
Bookcases and Shelves
Dressers & Chests
Beds & Nightstands
Desks
Benches
Bar & Counter Stools
Amber Lewis x Four Hands
In Stock & Ready To Ship
Lighting
All Lighting
New Lighting
Table Lamps
Floor Lamps
Chandeliers & Pendants
Sconces
Mood Lighting
Cordless Lighting
Mini Lamps
Lanterns & Hurricanes
Candles
Mini Table Lamps
Trunk Lamps
Decor
All Decor
Throw Pillows
Mirrors
Picture Frames
Storage Boxes
Baskets
Vases & Jars
Faux Florals
Decorative Bowls
Decorative Sculptures
Trays
Blankets & Throws
Rugs
Wall Decor
Bookends
Bathroom Accessories
Candles & Fragrance
Tapers & Taper Holders
Votives, Pillars & Tea Lights
Scented Candles, Diffusers & Room Spray
Lanterns & Hurricanes
Birthday & Celebration Candles
Matches & Candle Accessories
Featured Collections
Only At Addison West
The Vintage Shop
Copper Decor
Brass Decor
Artisan Handcrafted Baskets
Picture Frames
Mirrors
Kitchen & Table
Kitchen
All Kitchen
Cookware
Bakeware & Baking Tools
Cookbooks
Kitchen Tools & Utensils
Linens
Coffee, Tea & Accessories
Pantry
Cleaning Tools
Countertop Organization
Natural Wood Conditioner
Tabletop
All Tabletop
Dinnerware
Flatware & Serving Utensils
Mugs
Linens
Cocktail Napkins
Glassware
Coasters
Placemats
Parties & Entertaining
Cheese Boards & Knives
Barware
Flasks & Insulated Drinkware
Serveware
All Serveware
Plates & Platters
Bowls
Artisan Ceramics
Serving Pitchers & Carafes
Handmade Wood Boards & Bowls
Featured Brands
Smithey
Staub
Made In
Beatriz Ball
Laura Zindel
JK Adams
Farmhouse Pottery
For Your Table
Books
All Books
Cookbooks
Gardening
Coffee Table Books
Nature & The Outdoors
Little Books That Make Great Gifts
Home & Design
Cookbooks
Home & Design
Apothecary
Apparel & Accessories
All Apparel & Accessories
Women
Hats
Bags & Totes
Jewelry
New Apparel & Accessories
Elli Parr Jewelry
Lifestyle
All Lifestyle
Games & Puzzles
Arts & Crafts
For The Dogs
Garden & Outdoor
Greeting Cards, Stationary & Journals
All Greeting Cards, Stationary & Journals
Greeting Cards & Note Cards
Journals
Writing Accessories
Desk Accessories
Arts & Crafts
Games & Puzzles
Vermont
Kitchen & Tabletop
All Kitchen & Tabletop
Artisan Ceramics
Wood Cutting & Serving Boards
Kitchen Tools
Pantry
Decor
All Decor
Artwork
Baskets
Vases
Candle Holders
Lifestyle
Crafts Kits
Jewelry
Journals
Featured Brands
Simon Pearce
Farmhouse Pottery
Festive Folds
JK Adams
Katie Babic
Mount Mansfield Maple Products
Naturally Inspired
Runamok
The Bowl Mill
Wink Designs
Alice & Blue
Laura Zindel
Elli Parr
Laura Zindel
Sale
Gifts Just Because
Filter
Sort by
Best selling
Featured
Best selling
Price, low to high
Price, high to low
Oldest
Newest
Filters
Out of stock
Show
Hide
Price
$
$
Product Type
Apothecary
Aprons
Art & Craft Kits
Bakeware
Baking Dishes
Bar
Bar Soaps
Barware
Bath & Body
Bath Bomb
Bluetooth Speaker
Books
Bottle Openers
Bowls
Bracelets
Camping Survival Kits
Candle Holders
Candles
Chocolate Bars
Cloth Napkins
Coasters
Cocktail Mixes
Cocktail Shakers
Colanders & Strainers
Cookbooks
Cookie Cutters
Cookware
Cordless Lighting
Cosmetic & Toiletry Bags
Crocks
Cutting Boards
Decanters
Decorative Boxes
Decorative Objects
Decorative Sculptures
Decorative Trays
Diffusers
Dresses
Drinkware
Earrings
Faux Florals
Fireplace & Wood Stove Accessories
Flasks
Flatware Sets
Flower Presses
Fondue
Games
Gloves & Mittens
Greeting Cards
Griddles & Grill Pans
Holiday Ornaments
Incense
Insulated Waterbottles
Jewelry
Jigsaw Puzzles
Journals
Kitchen Tools & Utensils
Kitchen Towels
Lanterns
Liquid Hand Soap
Lotion & Moisturizer
Matches
Measuring Cups & Spoons
Mugs
Nail Polishes
Needlecraft Kits
Notebooks & Notepads
Oven Mitts & Pot Holders
Pantry
Paperweights
Pens
Personal Care Kits
Picnic Baskets
Picture Frames
Plates
Playing Cards
Pocket Knives
Pouches
Puzzles
Salad Servers
Salt
Salt & Pepper Shakers
Scented Candles
Serving Bowls
Serving Pitchers & Carafes
Serving Platters
Serving Utensils
Socks
Stemware
Sweaters
Tablecloths
Tech Kits
Tees
Throw Pillows
Tote Bags
Trunk Lights
Umbrellas
Vases
Wall Decor
Whisks
Brand
Alice & Blue
Barebones
Beatriz Ball
Bürstenhaus Redecker
Chandler 4 Corners
Crab & Cleek
Dski Design
Elli Parr
Emile Henry
Emily Lex Studio
Farmhouse Pottery
Festive Folds
Four Hands
Friday Sock Co.
Furbish
Graf Lantz
INK + ALLOY
JK Adams
Katie Babic
LAFCO New York
Laguiole
Latico Leathers
Laura Zindel
Liberty Puzzles
Lothantique
Made In
Opinel
Original Duckhead
Peterman's Boards & Bowls
Runamok
Simon Pearce
Smithey
Soap & Paper Factory
Steele
Stephanie Verdun
Stonewall Kitchen
Sugar Bob's Finest Kind
The Bowl Mill
Thymes
Trudon
Ursa Major
Wink Designs
Zafferano
Shape
Rectangular
Square
Round
Oval
Sort by
Featured
Best selling
Price, low to high
Price, high to low
Oldest
Newest
Apply
Quick View
Sunshine Block Print Throw Blanket
Regular price
$78.00
Quick View
Light and Sound LED Lantern with Speaker in Sky Blue
Regular price
$165.00
Quick View
Orchard Apples Matches
Regular price
$6.00
Quick View
Swissmar 8 Person Raclette with Cast Iron Grill
Regular price
$180.00
Quick View
Swissmar Lugano 9 Piece Cast Iron Fondue Set - Cherry Red
Regular price
$130.00
40% off
Quick View
Beatriz Ball Rio Resin Large Bowl in Green & Blue
Sale price
$149.99
Regular price
$248.00
Sale
Quick View
Small Golden Whale
Regular price
$18.00
Quick View
Antique Pewter Butterfly
Regular price
$28.00
16% off
Quick View
Muzen Button Mini Candy Bluetooth Speaker in Berry Blue
Sale price
$68.99
Regular price
$82.00
Sale
Quick View
12" Tapers Candles in Lemon Zest, Set of 6
Regular price
$28.00
Quick View
Hand Block Print Tote in Check
Regular price
$48.00
Quick View
Original Duckhead Umbrella in Kelly
Regular price
$44.00
Quick View
Original Duckhead Umbrella in Red
Regular price
$44.00
Quick View
Original Duckhead Umbrella in Olive
Regular price
$44.00
19% off
Quick View
French Garden Green and Blue Napkins - Set of 4
Sale price
$46.99
Regular price
$58.00
Sale
20% off
Quick View
French Garden Green and Blue Tablecloth - 59" x 86"
Sale price
$94.99
Regular price
$118.00
Sale
Quick View
Abigail Ahern Faux Cosmos in Burgundy
Regular price
$20.00
Quick View
Abigail Ahern Faux Sedum in Cream
Regular price
$18.00
Quick View
Lothantique Grapefruit Hand & Body Lotion
Regular price
$58.00
Quick View
Belle De Provence Sisal Sponge
Regular price
$10.00
Quick View
High Camp Flask Parkside 750 in Granite
Regular price
$129.00
Quick View
Pink Butterfly Large Kit Flying Wish Paper
Regular price
$18.00
Quick View
Brown Trout Hand Hooked Pillow
Regular price
$88.00
Quick View
Flower Cookie Cutter with Recipe Card
Regular price
$6.00
Previous
·
1
…
30
31
32
33
34
…
39
·
Next
Your cart
Close
Close
Your cart is empty
Start Shopping
Added to your
Cart
