:host {
/* breakpoints: not-implemented / reference only */
/* --wrapped-breakpoint-xs: 320px; */
/* --wrapped-breakpoint-sm: 490px; */
/* --wrapped-breakpoint-md: 768px; */
/* --wrapped-breakpoint-lg: 1040px; */
/* --wrapped-breakpoint-xl: 1440px; */
--wrapped-thumbnail-position-start:
"media gift-dialog-header"
"media content"
"media gift-block-actions";
--wrapped-thumbnail-position-end:
"gift-dialog-header media"
"content media"
"gift-block-actions media";
--shadow-grid-template-areas: var(--wrapped-thumbnail-position-start);
/* border radius */
--shadow-border-radius-scale: 60;
--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-block-border-surface: rgba(0,0,0,0);
--shadow-border-width: 1px;
--shadow-outline-width: calc(var(--shadow-border-width) + 0.5px);
/* buttons */
--wrapped-hover-style-light: #ffffff;
--wrapped-hover-style-dark: #000000;
--shadow-hover-style: var(--wrapped-hover-style-light, --wrapped-hover-style-light);
--shadow-primary-button-surface: #2f2f2f;
--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: #ffffff;
--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-primary-button-border-surface: #2f2f2f;
--shadow-primary-button-border-surface--active: color-mix(in srgb, var(--shadow-primary-button-border-surface), var(--shadow-hover-style) 20%);
--shadow-primary-button-border-surface--hover: color-mix(in srgb, var(--shadow-primary-button-border-surface), var(--shadow-hover-style) 16%);
--shadow-secondary-button-surface: #0000000f;
--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: #333333;
--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%);
--shadow-secondary-button-border-surface: rgba(0,0,0,0);
--shadow-secondary-button-border-surface--active: transparent;
--shadow-secondary-button-border-surface--hover: transparent;
/* do not change the root text size */
--shadow-font-size: 16px;
/* text and fonts */
--shadow-font-family: var(--wrapped-font-family, inherit);
--shadow-font-scale: calc(100 / 100);
--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-base: var(--wrapped-font-weight-base, 400);
--shadow-font-weight-md: 500;
--shadow-font-weight-lg: 600;
--shadow-letter-spacing: var(--wrapped-letter-spacing, normal);
--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: #f7f3f4;
--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: #e6dadb;
--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: #6f6a6b;
--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: #2f2f2f;
--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-surface: #ffffff;
--shadow-primary-text-color: #000000;
--shadow-primary-text-color--hover: color-mix(in srgb, var(--shadow-primary-text-color), var(--shadow-hover-style) 32%);
/* secondary colors */
--shadow-secondary-surface: #f3f3f3;
--shadow-secondary-text-color: #9b9899;
--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%);
/* Typography customizations */
--shadow-button-text-transform: var(--wrapped-button-text-transform, none);
--shadow-button-letter-spacing: var(--wrapped-button-letter-spacing, var(--shadow-letter-spacing, normal));
--shadow-button-font-style: var(--wrapped-button-font-style, normal);
/* spacing */
--wrapped-spacing-scale-base: 1;
--wrapped-spacing-scale-less: 0.75;
--wrapped-spacing-scale-more: 1.166;
--shadow-spacing-scale: var(--wrapped-spacing-scale-base, 1);
--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-thumbnail-size: clamp(40px, 60px, 200px);
--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;
/* 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(--wrapped-block-margin-start, var(--shadow-spacing-xs));
margin-block-end: var(--wrapped-block-margin-end, var(--shadow-spacing-xs));
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(--wrapped-launcher-button-alignment, normal);
& 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(--wrapped-launcher-button-surface, var(--shadow-primary-button-surface));
border-color: var(--wrapped-launcher-button-border-surface, var(--shadow-primary-button-border-surface));
border-width: var(--wrapped-launcher-button-border-width, var(--shadow-border-width));
border-radius: var(--wrapped-launcher-button-border-radius, var(--shadow-border-radius-sm));
border-style: solid;
color: var(--shadow-primary-button-text-color);
padding: var(--shadow-spacing-sm);
font-family: var(--shadow-font-family);
font-size: var(--shadow-font-size-base);
font-weight: var(--wrapped-launcher-button-font-weight, var(--shadow-font-weight-base));
font-style: var(--shadow-button-font-style);
letter-spacing: var(--shadow-button-letter-spacing);
max-width: var(--wrapped-launcher-button-max-width, 500px);
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;
}
& .button-content {
justify-content: var(--wrapped-launcher-button-content-justify-content, space-between);
}
&[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(--wrapped-launcher-button-content-flex-direction, row-reverse);
justify-content: var(--wrapped-launcher-button-content-justify-content, center);
width: 100%;
& .label {
text-align: start;
}
}
& .icon-wrapper {
display: none;
align-items: center;
justify-content: center;
width: 1.5em;
height: 1.5em;
svg {
fill: currentColor;
height: 100%;
width: 100%;
}
.checkmark-icon {
display: none;
}
}
}
.gift-block__launcher:disabled,
.gift-block__launcher[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(--wrapped-header-font-family, var(--shadow-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 */
--wrapped-actions-gap: var(--shadow-spacing-sm);
--wrapped-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 {
--wrapped-thumbnail-position-start: row;
--wrapped-thumbnail-position-end: row-reverse;
align-items: center;
display: flex;
flex-direction: var(--wrapped-thumbnail-position-start);
flex-wrap: wrap;
row-gap: var(--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: 60px;
--shadow-inline-media-size: clamp(40px, 60px, 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(--wrapped-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);
}
}
}
/* gift messaging fields */
& gift-block-message {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--shadow-spacing-base);
& wrapped-message-field {
flex: 0 0 100%;
}
@media (min-width: 768px) {
& wrapped-message-field[type="input"] {
flex: 1 1 0%;
}
}
}
}
: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-form-element-selection-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 */
shopify-variant-selector {
font-size: var(--shadow-font-size-sm);
width: 100%;
&[variants-count="1"] {
display: none;
}
}
shopify-variant-selector::part(form) {
gap: var(--shadow-spacing-base);
}
shopify-variant-selector::part(radio) {
background-color: var(--shadow-form-element-surface);
color: var(--shadow-form-element-text-color);
border: none;
border-radius: var(--shadow-border-radius-sm);
font-size: var(--shadow-font-size-base);
font-weight: var(--shadow-font-weight-base);
outline: var(--shadow-border-width) solid var(--shadow-form-element-border-color);
padding: calc(var(--shadow-spacing-sm) * 0.5) var(--shadow-spacing-base);
transition: color var(--shadow-transition-duration) ease,
outline-color var(--shadow-transition-duration) ease,
outline-width var(--shadow-transition-duration) ease;
}
shopify-variant-selector::part(radio):active {
outline-color: var(--shadow-form-element-selection-color--active);
outline-width: var(--shadow-outline-width);
}
shopify-variant-selector::part(radio):hover {
outline-color: var(--shadow-form-element-selection-color--hover);
}
shopify-variant-selector::part(radio-disabled) {
background-color: var(--shadow-form-element-surface--disabled);
color: var(--shadow-form-element-text-color--disabled);
opacity: var(--shadow-disabled-opacity); /* do not transition opacity - it causes a flash when changing variants */
outline-color: var(--shadow-form-element-border-color--disabled);
pointer-events: none;
}
shopify-variant-selector::part(radio-selected) {
outline-color: var(--shadow-form-element-selection-color);
outline-width: var(--shadow-outline-width);
pointer-events: none;
}
shopify-variant-selector::part(select) {
color: var(--shadow-form-element-text-color);
border: none;
border-radius: var(--shadow-border-radius-sm);
font-family: var(--shadow-font-family);
font-size: var(--shadow-font-size-base);
font-weight: var(--shadow-font-weight-base);
margin-top: var(--shadow-spacing-xs);
width: 100%;
max-width: 100%;
padding: var(--shadow-spacing-sm);
padding-right: calc(var(--shadow-spacing-sm) + 1.5rem);
outline: var(--shadow-border-width) solid var(--shadow-form-element-border-color);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: var(--shadow-form-element-surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M6.24 8.2a.75.75 0 0 1 1.06.04l2.7 2.908 2.7-2.908a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0l-3.25-3.5a.75.75 0 0 1 .04-1.06Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 1em 1em;
}
shopify-variant-selector::part(select):focus,
shopify-variant-selector::part(select):focus-visible {
outline-color: var(--shadow-form-element-selection-color);
outline-width: var(--shadow-outline-width);
}
shopify-variant-selector::part(color-swatch) {
border: none;
outline: var(--shadow-border-width) solid rgba(0, 0, 0, .1);
transition: color var(--shadow-transition-duration) ease,
outline-color var(--shadow-transition-duration) ease,
outline-width var(--shadow-transition-duration) ease;
}
shopify-variant-selector::part(color-swatch):active {
outline-color: var(--shadow-form-element-selection-color--active);
outline-width: var(--shadow-outline-width);
}
shopify-variant-selector::part(color-swatch):hover {
outline-color: var(--shadow-form-element-selection-color--hover);
}
shopify-variant-selector::part(color-swatch-selected) {
outline-color: var(--shadow-form-element-selection-color);
outline-width: var(--shadow-outline-width);
}
shopify-variant-selector::part(color-swatch-selected):after {
content: unset;
}
shopify-variant-selector::part(color-swatch-label) {
color: var(--shadow-secondary-text-color);
}
shopify-variant-selector::part(color-swatch-disabled) {
opacity: var(--shadow-disabled-opacity); /* do not transition opacity - it causes a flash when changing variants */
pointer-events: none;
}
shopify-variant-selector::part(label) {
color: var(--shadow-secondary-text-color);
display: inline-block;
font-size: var(--shadow-font-size-sm);
font-weight: var(--shadow-font-weight-base);
line-height: 1em;
margin-bottom: calc(var(--shadow-spacing-sm) - 6px);
}
:host(wrapped-gift-block[gift-option-optional]:not([gift-option-included])) shopify-variant-selector::part(radio-selected) {
outline-color: var(--shadow-form-element-border-color);
outline-width: var(--shadow-border-width);
}
:host(wrapped-gift-block[gift-option-optional]:not([gift-option-included])) shopify-variant-selector::part(color-swatch-selected) {
outline-color: rgba(0, 0, 0, .1);
outline-width: var(--shadow-border-width);
}
:host(wrapped-gift-block[gift-option-optional]:not([gift-option-included])) shopify-variant-selector::part(select) {
outline-color: var(--shadow-form-element-border-color);
outline-width: var(--shadow-border-width);
}
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 {
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) {
--wrapped-thumbnail-position-start: -1;
--wrapped-thumbnail-position-end: 2;
--shadow-thumbnail-order: var(--wrapped-thumbnail-position-start, -1);
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(--wrapped-block-margin-start, var(--shadow-block-margin-block-start)) !important;
margin-block-end: var(--wrapped-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(--wrapped-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"][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: 0.6em;
}
}
}
}
: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);
}
& 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;
}
}
: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-form-element-selection-color);
border-color: var(--shadow-form-element-selection-color);
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) [feature="variant"] [part="container"] {
padding: var(--shadow-spacing-sm) var(--shadow-spacing-sm) 0;
& fieldset {
background-color: var(--shadow-form-element-surface) !important;
border-color: var(--shadow-form-element-border-color) !important;
border-radius: var(--shadow-border-radius-sm) !important;
border-style: solid !important;
border-width: var(--shadow-border-width) !important;
color: var(--shadow-primary-text-color) !important;
font-family: inherit;
font-size: calc(var(--shadow-font-size-base) * 0.9) !important;
margin-bottom: 0.5em !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow-x: hidden !important;
overflow-y: var(--wrapped-variant-list-overflow, scroll) !important;
overscroll-behavior: contain !important; /* stop the list from chaining its scroll to the page */
padding: 0 !important;
max-height: calc(calc(var(--shadow-feature-max-height) * 0.5) - calc(var(--shadow-spacing-sm) * 4)) !important;
min-width: 100% !important;
max-width: 100% !important;
width: 100% !important;
-webkit-appearance: auto !important;
-moz-appearance: auto !important;
& label {
background-color: initial;
container-type: inline-size;
padding: var(--shadow-spacing-sm) calc(var(--shadow-spacing-sm) / 2);
margin-bottom: 0 !important;
transition: background-color 0.1s, box-shadow 0.1s ease-out;
transition-delay: 0.1s;
width: auto;
& input[type="radio"] {
appearance: var(--wrapped-radio-appearance, auto) !important;
clip: unset !important;
cursor: default;
display: inline-block !important;
height: var(--shadow-font-size-base) !important;
margin: 0 !important;
min-height: revert !important;
position: unset !important;
top: unset !important;
vertical-align: top;
width: var(--shadow-font-size-base) !important;
accent-color: var(--shadow-form-element-selection-color);
}
& div[part="wrapper"] {
display: flex;
flex-direction: row;
flex-grow: 1;
& span {
border: unset !important;
font-size: var(--shadow-font-size-sm);
&[part="title"] {
width: 100%;
}
&[part="pricing"] {
padding-right: calc(var(--shadow-spacing-sm) / 2);
white-space: nowrap;
}
}
}
@container (max-width: 400px) {
div[part="wrapper"] {
flex-direction: column;
}
}
&[data-available="false"] {
opacity: var(--shadow-disabled-opacity-md) !important;
pointer-events: none !important;
}
&[data-filtered="true"] {
opacity: var(--shadow-disabled-opacity-md) !important;
pointer-events: none !important;
}
&:has(input:checked) {
background-color: var(--shadow-secondary-surface);
box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.029);
}
&:hover {
background-color: var(--shadow-secondary-surface);
box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.029);
transition-delay: 0s;
}
}
}
& select {
background-color: var(--shadow-form-element-surface) !important;
background-image: none !important;
border: none;
border-radius: var(--shadow-border-radius-sm) !important;
color: var(--shadow-form-element-text-color) !important;
font-family: var(--shadow-font-family);
font-size: var(--shadow-font-size-base) !important;
height: auto;
margin-bottom: 0.5em !important;
min-height: 42px;
outline: var(--shadow-border-width) solid var(--shadow-form-element-border-color);
padding: var(--shadow-spacing-sm) !important;
min-width: 100% !important;
max-width: 100% !important;
width: 100% !important;
-webkit-appearance: auto !important;
-moz-appearance: auto !important;
}
& select:is(:active, :focus, :focus-visible) {
outline-color: var(--shadow-form-element-selection-color);
outline-width: var(--shadow-outline-width);
}
}
:host(wrapped-extension) [feature="variant"][selector-type="images"] [part="container"] {
& fieldset {
& label {
flex-direction: row;
& input[type="radio"] {
appearance: none !important;
background-color: var(--shadow-form-element-surface) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
border-color: lightgrey !important;
border-width: 0.2em !important;
border-style: solid !important;
border-radius: 0.4em !important;
box-sizing: border-box !important;
flex: 0 0 auto !important;
width: var(--shadow-thumbnail-size) !important;
height: var(--shadow-thumbnail-size) !important;
min-width: 40px !important;
max-width: 200px !important;
-webkit-appearance: none !important;
&:checked {
--wrapped-swatch-accent: var(--shadow-form-element-selection-color);
border-color: var(--wrapped-swatch-accent) !important;
&::before {
background-color: unset;
}
}
}
& div[part="wrapper"] {
flex-direction: column;
}
}
@media (max-width: 640px) {
& label {
flex-direction: column;
& div[part="wrapper"] {
padding-top: var(--shadow-spacing-sm);
width: 100%;
}
}
}
}
}
:host(wrapped-extension) [feature="variant"][selector-type="images-modern"] [part="container"] {
& fieldset {
background: none !important;
border: none !important;
display: grid !important;
gap: calc(var(--shadow-spacing-sm) * 0.8) !important;
& label {
opacity: 0.8 !important;
margin: var(--shadow-border-width) !important;
flex-direction: row !important;
padding: 2px !important;
padding-right: var(--shadow-spacing-sm) !important;
box-sizing: border-box !important;
box-shadow: 0 0 0 var(--shadow-border-width) transparent !important;
background-color: var(--shadow-form-element-surface) !important;
border-color: color-mix(in srgb, var(--shadow-form-element-border-color) 25%, transparent) !important;
border-radius: var(--shadow-border-radius-sm) !important;
border-style: solid !important;
border-width: var(--shadow-border-width) !important;
color: var(--shadow-primary-text-color) !important;
transition: box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
border-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
opacity 0.1s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
& input[type="radio"] {
cursor: pointer;
appearance: none !important;
background-color: var(--shadow-form-element-surface) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
border: none !important;
border-radius: max(0px, calc(var(--shadow-border-radius-sm) - 2px)) !important;
box-sizing: border-box !important;
flex: 0 0 auto !important;
width: var(--shadow-thumbnail-size) !important;
height: var(--shadow-thumbnail-size) !important;
min-width: 40px !important;
max-width: 200px !important;
-webkit-appearance: none !important;
&:checked {
border-color: var(--shadow-form-element-selection-color) !important;
&::before {
background-color: unset;
}
}
}
& div[part="wrapper"] {
flex-direction: row;
gap: var(--shadow-spacing-sm);
}
&:has(input:checked) {
--wrapped-row-accent: var(--shadow-form-element-selection-color);
border-color: var(--wrapped-row-accent) !important;
border-width: var(--shadow-border-width) !important;
box-shadow: 0 0 0 var(--shadow-border-width) var(--wrapped-row-ring, var(--wrapped-row-accent)) !important;
opacity: var(--wrapped-row-opacity, 1) !important;
pointer-events: none !important;
}
&:hover {
opacity: 1 !important;
}
&[data-available="false"] {
opacity: var(--shadow-disabled-opacity-md) !important;
pointer-events: none !important;
}
&[data-filtered="true"] {
opacity: var(--shadow-disabled-opacity-md) !important;
pointer-events: none !important;
}
}
}
}
: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"]:not([gift-option-included])) [feature="variant"] [part="container"] fieldset label:has(input:checked) {
--wrapped-row-accent: color-mix(in srgb, var(--shadow-form-element-border-color) 25%, transparent);
--wrapped-row-ring: transparent;
--wrapped-row-opacity: 0.8;
background-color: initial;
box-shadow: none;
}
:host(wrapped-extension[gift-option-optional="true"]:not([gift-option-included])) [feature="variant"] [part="container"] fieldset label input[type="radio"]:checked {
--wrapped-swatch-accent: lightgrey;
}
:host(wrapped-extension[gift-option-optional="true"]:not([gift-option-included])) [feature="variant"]:not([selector-type="images"]):not([selector-type="images-modern"]) [part="container"] fieldset label input[type="radio"]:checked {
--wrapped-radio-appearance: none;
background-color: var(--shadow-form-element-surface);
border: var(--shadow-border-width) solid var(--shadow-form-element-border-color);
border-radius: 50%;
box-sizing: border-box;
}
:host(wrapped-extension) [feature="variant"] [part="container"] fieldset label:has(input:focus-visible) {
outline: var(--shadow-outline-width) solid var(--shadow-form-element-selection-color);
outline-offset: calc(var(--shadow-outline-width) * -1);
}
:host(wrapped-extension) [feature="variant"] [part="container"] fieldset label input[type="radio"]:focus-visible {
outline: none;
}
:host(wrapped-extension[gift-option-optional="true"]) [feature="variant"][singular="true"] [part="container"] fieldset {
--wrapped-variant-list-overflow: auto;
}
:host(wrapped-extension) gift-block-message {
display: flex;
flex-wrap: wrap;
gap: var(--shadow-spacing-sm);
padding: var(--shadow-spacing-sm);
& wrapped-message-field {
flex: 1 1 40%;
& label {
color: var(--shadow-primary-text-color);
}
& textarea {
min-height: var(--shadow-textarea-min-height);
}
& span.counter {
align-self: flex-end;
}
}
& wrapped-message-field:not([type="input"]) {
flex: 0 0 100%;
}
}
:host(wrapped-extension) gift-block-actions {
--wrapped-actions-gap: var(--shadow-spacing-xs);
--wrapped-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 {
--wrapped-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); }
}
Passer au contenu
Panier
Votre panier est vide
Zoomer sur l'image
Coffee Lover Bag Charm for Women, Cute Purse Accessory, Neutral Handbag Charm, Trendy Tote Bag Accessory, Aesthetic Coffee Keychain 🎁 Fait avec amour en famille. Joliment emballé
✓ 100% Gift-Ready
✓ Handmade in Florida
✓ Loved by 5,000+ Gift Givers
American Express
Apple Pay
Google Pay
Mastercard
PayPal
Shop Pay
Visa
Add a cozy café-inspired touch to your favorite handbag with this trendy Coffee Lover Bag Charm — a neutral aesthetic purse accessory designed for everyday style. Featuring layered rope tassels, a soft coffee cup charm, and a handcrafted star detail, this handbag charm creates the perfect minimalist boutique look for coffee lovers and trendy fashion enthusiasts.
This neutral bag charm is lightweight, stylish, and easy to attach to tote bags, purses, backpacks, travel bags, work bags, and everyday handbags. The warm brown and cream color palette creates a cozy coffee-shop aesthetic that pairs beautifully with minimalist fashion and neutral accessories.
Perfect for:
Coffee lovers
Trendy handbag styling
Tote bag accessories
Neutral aesthetic lovers
Boho fashion accessories
Cute purse charms
Best friend gifts
Birthday gifts for her
Everyday luxury styling
Café aesthetic fashion
FEATURES:
• Lightweight handbag charm
• Layered rope tassel design
• Soft neutral brown and cream palette
• Handmade coffee cup charm
• Stylish boutique aesthetic
• Easy clip-on attachment
• Handmade with attention to detail
This trendy coffee-inspired purse charm is designed to make everyday bags feel more stylish, playful, and personalized without being overly flashy. The neutral tones make it easy to pair with beige, ivory, brown, mocha, cream, black, or minimalist handbags.
Perfect for styling:
tote bags
shoulder bags
work bags
backpacks
travel totes
beach bags
café outfits
cozy neutral fashion looks
This bag charm arrives beautifully packaged and gift ready, making it a thoughtful present for coffee lovers, sisters, friends, coworkers, students, or anyone who loves trendy accessories and cozy café aesthetics.
Ready to gift
Ships next business day
Perfect for everyday fashion lovers, vacation styling, trendy tote bags, and colorful handbag aesthetics.
Perfect for lovers of:
quiet luxury fashion, coastal style, feminine accessories, personalized handbags, aesthetic keychains, chic purse charms, floral accessories, and elegant tote bag styling.
Whether used as a personalized purse accessory or thoughtful gift for someone special, this elegant handbag charm adds stylish feminine detail to any everyday bag.
This is the ultimate trendy bag charm for women who want their handbag to feel stylish, feminine, and effortlessly aesthetic.
Minimal effort.
Instant handbag upgrade.
coffee lover bag charm, neutral purse charm for women, trendy handbag accessory, cute coffee bag charm, minimalist purse accessory, aesthetic tote bag charm, boho handbag charm, coffee themed keychain, trendy coffee girl accessory, layered tassel bag charm, neutral aesthetic handbag accessory, cute purse charm aesthetic, everyday luxury handbag charm, coffee inspired purse accessory, tote bag accessory for women, cozy café aesthetic accessory, fashionable bag charm for purse, coffee lover gift for women, trendy neutral bag accessory, minimalist coffee purse charm
Coffee Lover Bag Charm for Women, Cute Purse Accessory, Neutral Handbag Charm, Trendy Tote Bag Accessory, Aesthetic Coffee Keychain
Prix de vente $21.98
Prix normal $31.40
Ajouter au panier
Choisir les options
Fermer
Aller à l'élément 1
Aller à l'élément 2
Aller à l'élément 3
Aller à l'élément 4
Aller à l'élément 5
Aller à l'élément 6
Aller à l'élément 7
Aller à l'élément 8
Aller à l'élément 9
Aller à l'élément 10
Aller à l'élément 11
Aller à l'élément 12
Let customers speak for us
from 790 reviews