Diffusers by Archipelago Botanicals

Diffusers by Archipelago Botanicals :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

Account

About Us

Diffusers

Diffusers deliver months of fragrance. Our complex & powerful fragrance blends are continuously diffused into the air.

Filters

Clear All

Type After selecting the option, the page will be refreshed and focus will be shift to the top of the page.View AllBar SoapBody ButterBody OilBody ScrubBody WashBoxed CandlesBubble BathCleaning SprayCleaning SpraysDiffuser RefillsDish SoapEau De ToiletteGift SetsGlass Jar CandlesHand CrèmesHand LotionHand SpraysHand WashIron WaterLaundry DetergentLinen SprayLotionMatchesPetite CandlesPura Smart Home DiffuserReed DiffusersRefillRoom SprayTapered CandlesTin CandlesVotiveVotive CandlesXL 3-Wick CandlesReed Sticks

View AllBar SoapBody ButterBody OilBody ScrubBody WashBoxed CandlesBubble BathCleaning SprayCleaning SpraysDiffuser RefillsDish SoapEau De ToiletteGift SetsGlass Jar CandlesHand CrèmesHand LotionHand SpraysHand WashIron WaterLaundry DetergentLinen SprayLotionMatchesPetite CandlesPura Smart Home DiffuserReed DiffusersRefillRoom SprayTapered CandlesTin CandlesVotiveVotive CandlesXL 3-Wick CandlesReed Sticks

Fragrance After selecting the option, the page will be refreshed and focus will be shift to the top of the page.View AllAgaveArugulaAspenBamboo TeakBergamotBergamot CedarBergamot EucalyptusBergamot TobaccoBig SurBirchBlack ForestBlack HoneyBora BoraBotanico de HavanaBreckenridgeCharcoal RoseCharlestonClassicCoconutCurrantDubaiEnfleurageEucalyptusEucalyptus MintForest LeatherGrapefruitGrassHamptonsHavanaHerbésJasmineKashmirKennebunkportKey WestLagunaLanaiLavandeLavenderLavender ThymeLemmongrassLindenwoodLunaMadagascarMagnoliaMalibuMango TangerineMartha's VinefyardMilkMintMontaukMontereyMorning Mintragrance:NantucketNapaNaplesNashvilleOat MilkOlivewood AshPalm BeachPark CityPeonyPineapple GingerPink GrapefruitPomegranatePomegranate CitrusPositanoPumpkinPumpkin MacchiatoRaspberry CassisRue Saint-HonoréSanibel IslandSantoriniSavannahSeaSecret CanopySpiceSohoSorrentoSouth BeachSoy MilkSt. LuciaStonehengeSun ValleyTulumVailVerbenaVerbena BasilWild TerraWinter Frost

View AllAgaveArugulaAspenBamboo TeakBergamotBergamot CedarBergamot EucalyptusBergamot TobaccoBig SurBirchBlack ForestBlack HoneyBora BoraBotanico de HavanaBreckenridgeCharcoal RoseCharlestonClassicCoconutCurrantDubaiEnfleurageEucalyptusEucalyptus MintForest LeatherGrapefruitGrassHamptonsHavanaHerbésJasmineKashmirKennebunkportKey WestLagunaLanaiLavandeLavenderLavender ThymeLemmongrassLindenwoodLunaMadagascarMagnoliaMalibuMango TangerineMartha's VinefyardMilkMintMontaukMontereyMorning Mintragrance:NantucketNapaNaplesNashvilleOat MilkOlivewood AshPalm BeachPark CityPeonyPineapple GingerPink GrapefruitPomegranatePomegranate CitrusPositanoPumpkinPumpkin MacchiatoRaspberry CassisRue Saint-HonoréSanibel IslandSantoriniSavannahSeaSecret CanopySpiceSohoSorrentoSouth BeachSoy MilkSt. LuciaStonehengeSun ValleyTulumVailVerbenaVerbena BasilWild TerraWinter Frost

Fragrance family After selecting the option, the page will be refreshed and focus will be shift to the top of the page.View AllCitrus & FruitDestinationsFloralGreen & HerbalGourmandHolidayOzonicSpaSpiceWood

View AllCitrus & FruitDestinationsFloralGreen & HerbalGourmandHolidayOzonicSpaSpiceWood

Clear All

Sort by

After selecting the option, the page will be refreshed and focus will be shift to the top of the page.

FeaturedBest sellingAlphabetically, A-ZAlphabetically, Z-APrice: low to highPrice: high to low

Black Forest Diffuser Oil Refill

Sold Out

Black Forest Diffuser Oil Refill

121 Reviews

Regular price:

$ 42.00

Botanico de Havana Room Spray

Quick Shop

Botanico de Havana Room Spray

5 Reviews

Regular price:

$ 31.00

Havana Diffuser Oil Refill

Top Seller

Quick Shop

Havana Diffuser Oil Refill

139 Reviews

Regular price:

$ 38.00

Verbena Basil Diffuser Oil Refill

Sold Out

Verbena Basil Diffuser Oil Refill

47 Reviews

Regular price:

$ 38.00

[↑](/content/collections/diffusers#backtoheader "Back to top"/index.html)

Your wishlist is empty!

Explore more and shortlist some items

Continue Shopping

This website uses cookies to ensure you get the best experience on our website. Privacy Policy

Do not sellAccept

shoparchipelago.com

shoparchipelago.com is blocked