­

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](/content/collections/diffusers#MainContent/index.html) [Go to Accessibility Statement](/content/pages/accessibility-statement/index.html)

Close searchSearch

Your Cart
0
items

Close mobile menu

[Account](/content/account/index.html)

[About Us](/content/pages/about-us/index.html)

# 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](/content/collections/diffusers/products/black-forest-diffuser-refill/index.html)

Sold Out

[Black Forest Diffuser Oil Refill](/content/collections/diffusers/products/black-forest-diffuser-refill/index.html)

121 Reviews

Regular price:

$ 42.00

[Botanico de Havana Room Spray](/content/collections/diffusers/products/botanico-de-havana-room-spray/index.html)

Quick Shop

[Botanico de Havana Room Spray](/content/collections/diffusers/products/botanico-de-havana-room-spray/index.html)

5 Reviews

Regular price:

$ 31.00

[Havana Diffuser Oil Refill](/content/collections/diffusers/products/havana-diffuser-oil-refill/index.html)

Top Seller

Quick Shop

[Havana Diffuser Oil Refill](/content/collections/diffusers/products/havana-diffuser-oil-refill/index.html)

139 Reviews

Regular price:

$ 38.00

[Verbena Basil Diffuser Oil Refill](/content/collections/diffusers/products/verbena-basil-diffuser-refill/index.html)

Sold Out

[Verbena Basil Diffuser Oil Refill](/content/collections/diffusers/products/verbena-basil-diffuser-refill/index.html)

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](/content/collections/all/index.html)

0

This website uses cookies to ensure you get the best experience on our website. [Privacy Policy](/content/pages/privacy-policy/index.html)

Do not sellAccept

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

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

## Your Cart

[Login](/content/account/login/index.html)

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.

[Shop Now](/content/collections/all/index.html)

#### BEFORE YOU GO...

##### [Oat Milk Body Lotion](/content/collections/diffusers/products/oatmilkbodylotion?variant=6679540291&_rdiscovery-handle=oatmilkbodylotion&_rdiscovery-widget=243896/index.html)

Price$ 36.00

ADD

##### [Pomegranate 17 oz. Body Lotion](/content/collections/diffusers/products/pomegranate-17-oz-lotion?variant=18480385687610&_rdiscovery-handle=pomegranate-17-oz-lotion&_rdiscovery-widget=243896/index.html)

Price$ 24.00

ADD

##### [Havana Jar Candle](/content/collections/diffusers/products/havana-glass-jar-candle?variant=21505974009914&_rdiscovery-handle=havana-glass-jar-candle&_rdiscovery-widget=243896/index.html)

Price$ 32.00

ADD

##### [Charcoal Rose Laundry Detergent](/content/collections/diffusers/products/charcoal-rose-laundry-detergent?variant=39726664515642&_rdiscovery-handle=charcoal-rose-laundry-detergent&_rdiscovery-widget=243896/index.html)

Price$ 30.00

ADD

##### [Oat Milk Travel Size Lotion](/content/collections/diffusers/products/oat-milk-travel-lotion?variant=22015829147706&_rdiscovery-handle=oat-milk-travel-lotion&_rdiscovery-widget=243896/index.html)

Price$ 4.50

ADD

[Powered by Rebuy](https://rebuyengine.com/?shop=archipelago-2.myshopify.com)

Checkout →

Earn Rewards

✕

[archipelagobotanicals](https://www.instagram.com/archipelagobotanicals)

The first signs of fall, lit at home. Meet Velvet Harvest. 🍂⁠

September 22

✕

[archipelagobotanicals](https://www.instagram.com/archipelagobotanicals)

Warm ginger & cinnamon. Rich chocolate. Creamy sandalwood.⁠
⁠
A new kind of warmth is almost here. Meet Velvet Harvest, coming tomorrow.

September 21

✕

[archipelagobotanicals](https://www.instagram.com/archipelagobotanicals)

For slow afternoons and open windows. Wild Terra.

September 18

✕

[archipelagobotanicals](https://www.instagram.com/archipelagobotanicals)

A softer kind of atmosphere. The new Terra collection brings warmth, texture, and a subtle layer of fragrance to the room.

September 16

✕

[archipelagobotanicals](https://www.instagram.com/archipelagobotanicals)

Wild oats. White tea. Vetiver. Milk bathes your skin in a light, long lasting fragrance that never overpowers. Fan favorite status: earned.

September 14

✕

[archipelagobotanicals](https://www.instagram.com/archipelagobotanicals)

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