press
press– Archipelago :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; }
*, *::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); } }
Skip to content Go to Accessibility Statement
Close searchSearch
Your Cart 0 items
Close mobile menu
press
- [All](/content/blogs/press ""/index.html)
- [bath and body](/content/blogs/press/tagged/bath-and-body "Show articles tagged bath and body"/index.html)
- [beauty](/content/blogs/press/tagged/beauty "Show articles tagged beauty"/index.html)
- [blog](/content/blogs/press/tagged/blog "Show articles tagged blog"/index.html)
- [diffuser](/content/blogs/press/tagged/diffuser "Show articles tagged diffuser"/index.html)
- [editorial](/content/blogs/press/tagged/editorial "Show articles tagged editorial"/index.html)
- [fitness](/content/blogs/press/tagged/fitness "Show articles tagged fitness"/index.html)
- [health](/content/blogs/press/tagged/health "Show articles tagged health"/index.html)
- [home fragrance](/content/blogs/press/tagged/home-fragrance "Show articles tagged home fragrance"/index.html)
- [men](/content/blogs/press/tagged/men "Show articles tagged men"/index.html)
- [natural candle](/content/blogs/press/tagged/natural-candle "Show articles tagged natural candle"/index.html)
- [natural soy wax](/content/blogs/press/tagged/natural-soy-wax "Show articles tagged natural soy wax"/index.html)
- [spa](/content/blogs/press/tagged/spa "Show articles tagged spa"/index.html)
In Touch
Cosmopolitan for Latinas
Cosmopolitan for Latinas
Desert Companion
New Beauty
Allure
Vegas Player
Organic Spa
The Good Life
1–9 of 46 Results
1[2](/content/blogs/press?page=2 ""/index.html)[3](/content/blogs/press?page=3 ""/index.html)…[6](/content/blogs/press?page=6 ""/index.html)[→Next page](/content/blogs/press?page=2 ""/index.html)
How Long Should You Keep Your Candle Burning?
How Long Should You Keep Your Candle Burning?
How To Make Your Laundry Smell Irresistible: 4 Techniques
How To Make Your Laundry Smell Irresistible: 4 Techniques
Discover eco-friendly tips for enhancing the scent of your clothes and enjoying long-lasting, delightful freshness.
How to Wash Colored Clothes: A Beginners Guide
How to Wash Colored Clothes: A Beginners Guide
Knowing how to wash colored clothes is very important. Read our guide on everything you need to know about washing colored clothing.
How To Fix And Prevent Candle Tunneling
How To Fix And Prevent Candle Tunneling
Do Candles Expire?
[↑](/content/blogs/press#backtoheader "Back to top"/index.html)
Your wishlist is empty!
Explore more and shortlist some items
0
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
shoparchipelago.com
shoparchipelago.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
shoparchipelago.com
shoparchipelago.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
shoparchipelago.com
shoparchipelago.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
This website uses cookies to ensure you get the best experience on our website. Privacy Policy
PreferencesRejectAccept
Your Cart
Close Cart
Free Shipping
Progress: 0%
You are $ 70.00 away from FREE SHIPPING!
Your cart is empty!
Add your favorite items to your cart.
BEFORE YOU GO...
Oat Milk Body Lotion
Price$ 36.00
ADD
Pomegranate 17 oz. Body Lotion
Price$ 24.00
ADD
Havana Jar Candle
Price$ 32.00
ADD
Charcoal Rose Laundry Detergent
Price$ 30.00
ADD
Oat Milk Travel Size Lotion
Price$ 4.50
ADD
Checkout →
Earn Rewards
✕
The first signs of fall, lit at home. Meet Velvet Harvest. 🍂
September 22
✕
Warm ginger & cinnamon. Rich chocolate. Creamy sandalwood. A new kind of warmth is almost here. Meet Velvet Harvest, coming tomorrow.
September 21
✕
For slow afternoons and open windows. Wild Terra.
September 18
✕
A softer kind of atmosphere. The new Terra collection brings warmth, texture, and a subtle layer of fragrance to the room.
September 16
✕
Wild oats. White tea. Vetiver. Milk bathes your skin in a light, long lasting fragrance that never overpowers. Fan favorite status: earned.
September 14
✕
The Terra Collection is here 🍂 5 new scents, 3 new vessels, built around the calm of a forest after rain and the clarity of clear skies. Earthy, atmospheric, restorative.
September 10