Maison d'Etre – Maison d'Etre

wrapped-preset { /\* 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-field-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-launcher-button-surface--active: color-mix(in srgb, var(--shadow-launcher-button-surface), var(--shadow-hover-style) 20%); --shadow-launcher-button-surface--hover: color-mix(in srgb, var(--shadow-launcher-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%);

/\* 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-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);

/\* inline block */ --shadow-feature-max-height: 500px; --shadow-textarea-min-height: 80px;

/\* 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-field-border-width: var(--shadow-border-width); --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-launcher-button-border-surface--active: transparent; --shadow-launcher-button-border-surface--hover: transparent; --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-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; --shadow-block-padding: var(--shadow-block-padding-block-start, var(--shadow-spacing-sm)) var(--shadow-block-padding-inline-end, var(--shadow-spacing-sm)) var(--shadow-block-padding-block-end, var(--shadow-spacing-sm)) var(--shadow-block-padding-inline-start, var(--shadow-spacing-sm));

font-family: var(--shadow-font-family); line-height: var(--shadow-line-height-base); letter-spacing: var(--shadow-letter-spacing); }

:host { /\* do not change the root text size */ --shadow-font-size: 16px;

/\* spacing */

--shadow-spacing-scale-base: 1; --shadow-spacing-scale-less: 0.75; --shadow-spacing-scale-more: 1.166; --shadow-spacing-scale: var(--shadow-spacing-scale-base, 1); --shadow-spacing-xs: clamp(6px, calc(8px * var(--shadow-spacing-scale)), 10px);

/\* inline block */ --shadow-block-margin-block-start: calc(1em * var(--shadow-spacing-scale)); --shadow-block-margin-block-end: calc(2em * var(--shadow-spacing-scale));

/\* default styles */ all: revert; box-sizing: border-box; cursor: default; display: block; font-size: var(--shadow-font-size); 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; margin-inline-start: var(--shadow-block-margin-inline-start, 0) !important; margin-inline-end: var(--shadow-block-margin-inline-end, 0) !important; text-align: start; width: -webkit-fill-available; white-space: normal; }

*, *::before, *::after { box-sizing: border-box; }

.gift-block__launcher .icon-wrapper svg, :host(wrapped-extension) gift-block-launcher [data-part="container"] label svg, :host(wrapped-extension) [feature="gift-option"] [data-part="container"] label svg, :host(wrapped-gift-block) gift-block-option-heading label svg { box-sizing: border-box; border: calc(var(--shadow-field-border-width) + 0.5px) solid; border-radius: max(0px, calc(min(0.20625em, var(--shadow-border-radius-sm)) + min(var(--shadow-border-radius-sm) * 1000, var(--shadow-field-border-width) - 1px))); height: calc(var(--shadow-font-size-base) * 0.7875 + 3.5 * var(--shadow-field-border-width) - 0.5px); overflow: visible; width: calc(var(--shadow-font-size-base) * 0.7875 + 3.5 * var(--shadow-field-border-width) - 0.5px); }

.gift-block__launcher .icon-wrapper svg, :host(wrapped-extension) gift-block-launcher [data-part="container"] label svg { height: calc(var(--shadow-block-launcher-font-size, var(--shadow-launcher-font-size, var(--shadow-font-size-base))) * 0.7875 + 3.5 * var(--shadow-field-border-width) - 0.5px); width: calc(var(--shadow-block-launcher-font-size, var(--shadow-launcher-font-size, var(--shadow-font-size-base))) * 0.7875 + 3.5 * var(--shadow-field-border-width) - 0.5px); }

.checkmark-icon { fill: none; stroke-linecap: var(--shadow-tick-cap, round); stroke-linejoin: var(--shadow-tick-join, round); stroke-width: 1.5px; }

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-block-padding-inline-end, var(--shadow-spacing-sm)) 0 var(--shadow-block-padding-inline-start, 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-block-padding); font-family: var(--shadow-font-family); font-size: var(--shadow-block-launcher-font-size, var(--shadow-launcher-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-launcher-button-surface--hover); border-color: var(--shadow-launcher-button-border-surface--hover); }

&:active { background-color: var(--shadow-launcher-button-surface--active); border-color: var(--shadow-launcher-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-block-launcher-font-size, var(--shadow-launcher-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: var(--shadow-block-padding-block-start, 0) var(--shadow-block-padding-inline-end, 0) var(--shadow-block-padding-block-end, 0) var(--shadow-block-padding-inline-start, 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; min-height: 1.5em; min-width: 1.5em;

svg { border-color: currentColor; }

.checkmark-icon { display: none; stroke: currentColor; } } } .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[data-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); }

: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-block-padding-block-start, var(--shadow-spacing-sm)) var(--shadow-block-padding-inline-end, var(--shadow-spacing-base)) var(--shadow-block-padding-block-end, var(--shadow-spacing-sm)) var(--shadow-block-padding-inline-start, var(--shadow-spacing-base)); --shadow-picker-rows-padding: var(--shadow-block-padding); }

: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-field-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-field-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-field-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) { display: flex; flex-direction: column !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; padding: unset !important; width: unset !important; }

:host(wrapped-extension) wrapped-preset { background-color: var(--shadow-primary-surface); border: var(--shadow-border-width) solid var(--shadow-block-border-surface); border-radius: var(--shadow-border-radius-sm); color: var(--shadow-primary-text-color); display: flex; flex-direction: column; font-size: var(--shadow-font-size-base); overflow: hidden; }

:host(wrapped-extension[option-type="order"]) { margin-left: var(--shadow-block-margin-inline-start, auto) !important; margin-right: var(--shadow-block-margin-inline-end, 0) !important; width: -moz-available !important; width: -webkit-fill-available !important; width: stretch !important; }

:host(wrapped-extension[target-group="drawer"]) { width: -moz-available !important; width: -webkit-fill-available !important; width: stretch !important; }

:host(wrapped-extension[target-group="drawer"][option-type="order"]) { max-width: unset !important; margin-left: var(--shadow-block-margin-inline-start, 0) !important; margin-right: var(--shadow-block-margin-inline-end, 0) !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-gift-block) wrapped-preset { display: contents; }

:host(wrapped-extension) [data-part="feature"], :host(wrapped-extension) gift-block-launcher { overflow: hidden !important;

& [data-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) [data-part="feature"] { background-color: var(--shadow-secondary-surface); }

:host(wrapped-extension) [data-part="feature"]:is([feature="variant"], [feature="gift-option"]) { display: block; }

:host(wrapped-extension) [data-part="feature"][enabled="false"] { display: none; opacity: 0; visibility: hidden; }

:host(wrapped-extension) [data-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) [data-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(~ [data-part="disclosure"] [data-part="feature"][enabled="true"]:not([singular="true"])) { border-bottom: var(--shadow-border-width) solid var(--shadow-block-border-surface); }

:host(wrapped-extension[expanded="true"]) [data-part="disclosure"], :host(wrapped-extension[hidden-checkbox="true"]) [data-part="disclosure"] { grid-template-rows: 1fr; }

:host(wrapped-extension[expanded="true"]) [data-part="disclosure-content"], :host(wrapped-extension[hidden-checkbox="true"]) [data-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;

& [data-part="container"] { & label { pointer-events: none !important; } } }

:host(wrapped-extension[saving="true"]) { & [data-part="container"] { & label { pointer-events: none !important;

& svg, 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 [data-part="container"] { padding: var(--shadow-block-padding);

& label { padding: 0 !important;

& span { &[data-part="label"] { border: unset !important; flex-grow: 1; font-size: var(--shadow-block-launcher-font-size, var(--shadow-launcher-font-size, var(--shadow-font-size-base))); padding: unset !important; }

&[data-part="pricing"] { align-content: center; font-size: var(--shadow-font-size-sm); white-space: nowrap; }

&[data-part="thumbnail"] { background-color: var(--shadow-form-element-surface); background-size: cover; background-position: center; background-repeat: no-repeat; 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"] [data-part="container"] { padding: var(--shadow-block-padding);

& label { align-items: center; cursor: pointer; display: flex; gap: var(--shadow-spacing-sm); }

:host(wrapped-extension) gift-block-launcher [data-part="container"] label, :host(wrapped-extension) [feature="gift-option"] [data-part="container"] label, :host(wrapped-gift-block) gift-block-option-heading label { position: relative;

& input[type="checkbox"] { height: 1px; margin: 0; opacity: 0; pointer-events: none; position: absolute; width: 1px; }

& svg { background: var(--shadow-form-element-surface); border-color: var(--shadow-form-element-border-color); cursor: pointer; flex: 0 0 auto;

& .checkmark-icon { display: none; } }

& input:checked + svg { background: var(--shadow-selection-checked-surface); border-color: var(--shadow-selection-checked-surface);

& .checkmark-icon { display: block; stroke: white; } }

& input:focus-visible + svg { outline: var(--shadow-outline-width) solid var(--shadow-form-element-selection-color); outline-offset: var(--shadow-field-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-block-padding); --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-block-padding); }

/\* media queries */ /\* md - and above */ @media (min-width: 768px) { wrapped-preset { --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) { wrapped-preset { --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) { wrapped-preset { --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); } }

Select your locale

Your currently selected language is English.

English

Select your country

Your currently selected location is the United States and your order will be billed in USD. The delivery methods, conditions of sale and delivery points will be updated when you change the country.

United States (USD $)

Shop SALE section!

Have a question? Contact us here!

Live in the neighborhood? In store pick-up available!

Read our return policy here!

Orders over $250 ship FREE!

Shop SALE section!

Have a question? Contact us here!

Live in the neighborhood? In store pick-up available!

Read our return policy here!

Orders over $250 ship FREE!

Shop SALE section!

Have a question? Contact us here!

Live in the neighborhood? In store pick-up available!

Read our return policy here!

Orders over $250 ship FREE!

English United states (USD $)

Cart 0

Your cart is currently empty.

Start Shopping

Celebrate life at home

Home is where we go to be replenished, where we find our essentials for life. Home is a canvas for self expression, a haven that reflects our essence and nourishes our spirit, a gathering place for family and friends. Home is the ongoing story of our lives.

Wearable wonders of nature

Trovelore

Hand-embroidered brooches inspired by nature, crafted in small batches with intricate detail and traditional techniques.

Explore

Shop the look

[Dazzling Bee Brooch](/content/products/dazzling-bee-brooch-pin "Dazzling Bee Brooch"/index.html)$82.00/

Quick view

[Emperor Mopane Moth Brooch](/content/products/emperor-mopane-moth-brooch-pin "Emperor Mopane Moth Brooch"/index.html)$93.00/

Quick view

[Pearl Bee Brooch](/content/products/pearl-bee-brooch "Pearl Bee Brooch"/index.html)$81.00/

Quick view

[True Shrimp Brooch](/content/products/true-shrimp-brooch-pin "True Shrimp Brooch"/index.html)$81.00/

Quick view

[Red Rose Bud Brooch](/content/products/red-rose-bud-brooch "Red Rose Bud Brooch"/index.html)$75.00/

Quick view

[Sardine Brooch](/content/products/sardine-brooch-pin "Sardine Brooch"/index.html)$76.00/

Quick view

[Red Radish Brooch](/content/products/radish-brooch "Red Radish Brooch"/index.html)$72.00/

Quick view

Shop the look

[Emperor Mopane Moth Brooch](/content/products/emperor-mopane-moth-brooch-pin "Emperor Mopane Moth Brooch"/index.html)$93.00/

Quick view

[Pearl Bee Brooch](/content/products/pearl-bee-brooch "Pearl Bee Brooch"/index.html)$81.00/

Quick view

[Dazzling Bee Brooch](/content/products/dazzling-bee-brooch-pin "Dazzling Bee Brooch"/index.html)$82.00/

Quick view

Baby & Kids

Little treasures

Thoughtfully curated gifts for the little ones in your life. From cozy plush toys to beautifully crafted keepsakes, our Baby & Kids collection is filled with charming finds to delight both parents and children.

[Shop Now](/content/collections/kids-corner "Shop Now"/index.html)

Explore Our In-Store Exclusives

Abyss & Habidecor

Finest towels and rugs made in Portugal.

experience the exceptional quality

100% Egyptian Cotton

Egyptian Cotton Giza - ELS (Extra Long Staple) is used to produce Abyss towels and rugs. It is considered the best cotton in the World. Cultivated on the banks of the Nile, the cotton is picked by

hand, then twisted and treated to create a yarn of exceptional quality.

discover the Full spectrum

Special Orders Welcome

Visit us to view the full range of color samples. We have many towels and rugs available in store, however, you can place a special order for any color you desire.

Shop by Brand

Shop Small, Stay Connected

Support a small, local business while staying in the know! Sign up for our newsletter for updates on new arrivals, special events, and exclusive offers—plus, enjoy 15% off your first online order.

Follow Us On Instagram

Follow us on Instagram to stay updated with our latest products and inspirations! Join our community and discover what's new.

@maisondetreoakland

Visit Us In Store

Explore our store on College Ave!

We're open every day:

11:00am - 6:00pm

Come discover our curated selection firsthand. Visit us at 5640 College Ave, Oakland, or call 510-658-2801 for more details.

We look forward to seeing you!

Map

Shipping PolicyReturns + Exchange Policy

Shipping Policy

Thank you for shopping at Maison d'Etre! We are committed to delivering your order accurately, in good condition, and always on time.

Order Processing Time:

All orders are processed within 3 business days (excluding holidays) after receiving your order confirmation. You will receive a notification once your order has been shipped.

Shipping Rates and Delivery Estimates:

Shipping charges are flat rate based on weight.

We offer the following shipping methods:

USPS Priority
UPS Ground

If you have a preference, please include it in the notes.

Delivery times vary depending on your location.

Orders over $250 ship for free.

Shipment Confirmation and Order Tracking:

You will receive a shipment confirmation email containing tracking information once your order has shipped.

Customs, Duties, and Taxes:

Maison d'Etre is not responsible for any customs and taxes applied to your order. All fees imposed during or after shipping are the responsibility of the customer (tariffs, taxes, etc.).

Damages:

Maison d'Etre is not liable for any products damaged or lost during shipping. If you receive your order damaged, please contact the shipment carrier to file a claim. However, we prioritize customer satisfaction, so feel free to reach out to us directly regarding damaged items. Please save all packaging material and damaged goods before filing a claim.

Lost Packages:

If your order is lost in transit and the tracking information indicates it was delivered, please contact the carrier directly to investigate further.

Returns Policy:

Please refer to our Returns + Exchanges policy for detailed information about options and procedures for returning your order.

Shipping Restrictions:

We currently ship to addresses within the United States. We do not ship to PO Boxes. Please provide a physical address for shipping.

Questions:

If you have any questions about the shipping and delivery of your order, please contact us at contact@maisondetre.com or call us at 510-658-2801.

Returns + Exchange Policy

Eligibility: Merchandise purchased online may be returned within 14 days of the ship date for a refund or exchange equal to the purchase price. Items must be in original condition, with product packaging and tags attached. Shipping costs are non-refundable.

Exclusions: The following items are final sale and not eligible for return or exchange:

Shower curtain liners
Socks and other intimate items
Sale or discounted merchandise

Return Shipping: Customers are responsible for the cost of return shipping.

How to Start a Return:

We offer self-serve returns for your convenience:

Log in to your account on our website.
Go to your Order History and select the order containing the item(s).
Click Initiate Return next to the item(s).
Follow the prompts to select a return reason and choose a refund or exchange.
You’ll receive return instructions by email, including packaging and shipping details.

Damaged Items:

If your order arrives damaged, please contact us within 3 days of delivery. Include photos of the damaged item(s) and packaging for our records. We’ll ship a replacement as quickly as possible.

Select options

Start a new chat?

Sign inContinue without signing in

www.maisondetre.com

www.maisondetre.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