✕
: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; */ /* used as theme editor setting values - do not change var names */ --wrapped-thumbnail-position-start: "media gift-dialog-header" "media content" "media gift-dialog-actions"; --wrapped-thumbnail-position-end: "gift-dialog-header media" "content media" "gift-dialog-actions media"; --local-grid-template-areas: var(--wrapped-thumbnail-position-start); /* border radius */ --local-border-radius-scale: 60; --local-border-radius-xs: calc(var(--local-border-radius-scale, 65) / 100 * 1rem); --local-border-radius-sm: calc(var(--local-border-radius-scale, 65) / 100 * 1.5rem); --local-border-radius-base: calc(var(--local-border-radius-scale, 65) / 100 * 2.5rem); --local-dialog-border-surface: rgba(0,0,0,0); --local-border-width: 1px; --local-outline-width: calc(var(--local-border-width) + 0.5px); /* buttons */ /* used as theme editor setting values - do not change var names */ --wrapped-hover-style-light: #ffffff; --wrapped-hover-style-dark: #000000; --local-hover-style: var(--wrapped-hover-style-light, --wrapped-hover-style-light); --local-primary-button-surface: #000000; --local-primary-button-surface--active: color-mix(in srgb, var(--local-primary-button-surface), var(--local-hover-style) 20%); --local-primary-button-surface--hover: color-mix(in srgb, var(--local-primary-button-surface), var(--local-hover-style) 16%); --local-primary-button-text-color: #ffffff; --local-primary-button-text-color--active: color-mix(in srgb, var(--local-primary-button-text-color), var(--local-hover-style) 20%); --local-primary-button-text-color--hover: color-mix(in srgb, var(--local-primary-button-text-color), var(--local-hover-style) 16%); --local-primary-button-border-surface: rgba(0,0,0,0); --local-primary-button-border-surface--active: transparent; --local-primary-button-border-surface--hover: transparent; --local-secondary-button-surface: #0000000f; --local-secondary-button-surface--active: color-mix(in srgb, var(--local-secondary-button-surface), var(--local-hover-style) 20%); --local-secondary-button-surface--hover: color-mix(in srgb, var(--local-secondary-button-surface), var(--local-hover-style) 16%); --local-secondary-button-text-color: #333333; --local-secondary-button-text-color--active: color-mix(in srgb, var(--local-secondary-button-text-color), var(--local-hover-style) 20%); --local-secondary-button-text-color--hover: color-mix(in srgb, var(--local-secondary-button-text-color), var(--local-hover-style) 16%); --local-secondary-button-border-surface: rgba(0,0,0,0); --local-secondary-button-border-surface--active: transparent; --local-secondary-button-border-surface--hover: transparent; /* do not change the root text size */ --local-font-size: 16px; /* text and fonts */ --local-font-family: inherit; --local-font-scale: calc(100 / 100); --local-font-size-sm: clamp(12px, calc(14px * var(--local-font-scale)), 16px); --local-font-size-base: clamp(12px, calc(16px * var(--local-font-scale)), 20px); --local-font-size-lg: clamp(16px, calc(24px * var(--local-font-scale)), 28px); --local-font-weight-base: var(--wrapped-font-weight-base, 400); --local-font-weight-md: 500; --local-font-weight-lg: 600; --local-letter-spacing: var(--wrapped-letter-spacing, normal); --local-line-height-base: 1.5em; /* transitions */ --local-transition-duration: 0.1s; --local-spinner-duration: 0.7s; /* disabled */ --local-disabled-opacity-sm: 0.16; --local-disabled-opacity: 0.32; --local-disabled-opacity-md: 0.4; --local-disabled-opacity-lg: 0.64; /* Pre-calculated percentages for color-mix */ --local-disabled-opacity-percent: 32%; --local-disabled-opacity-sm-percent: 16%; --local-disabled-opacity-md-percent: 40%; --local-disabled-opacity-lg-percent: 64%; --local-disabled-cursor: not-allowed; /* form elements */ --local-form-element-surface: #ffffff; --local-form-element-surface--disabled: color-mix(in srgb, var(--local-form-element-surface) var(--local-disabled-opacity-percent), var(--local-secondary-text-color) 8%); --local-form-element-border-color: #0000000f; --local-form-element-border-color--active: color-mix(in srgb, var(--local-form-element-border-color), white 83%); --local-form-element-border-color--disabled: color-mix(in srgb, var(--local-form-element-border-color) var(--local-disabled-opacity-percent), var(--local-secondary-text-color) 8%); --local-form-element-text-color: #333333; --local-form-element-text-color--disabled: color-mix(in srgb, var(--local-form-element-text-color), var(--local-secondary-text-color) 8%); --local-form-element-placeholder-text-color: color-mix(in srgb, var(--local-form-element-text-color) var(--local-disabled-opacity-percent), transparent); --local-form-element-placeholder-text-color--disabled: color-mix(in srgb, var(--local-form-element-text-color) var(--local-disabled-opacity-percent), var(--local-secondary-text-color) 8%); --local-form-element-selection-color: #000000; --local-form-element-selection-color--active: color-mix(in srgb, var(--local-form-element-selection-color), var(--local-hover-style) 40%); --local-form-element-selection-color--hover: color-mix(in srgb, var(--local-form-element-selection-color), var(--local-hover-style) 32%); /* primary colors */ --local-primary-surface: #ffffff; --local-primary-text-color: #000000; --local-primary-text-color--hover: color-mix(in srgb, var(--local-primary-text-color), var(--local-hover-style) 32%); /* secondary colors */ --local-secondary-surface: #f3f3f3; --local-secondary-text-color: #333333; --local-secondary-text-color--disabled: color-mix(in srgb, var(--local-secondary-text-color) var(--local-disabled-opacity-lg-percent), var(--local-secondary-text-color) 8%); /* Typography customizations */ --local-button-text-transform: var(--wrapped-button-text-transform, none); --local-button-letter-spacing: var(--wrapped-button-letter-spacing, var(--local-letter-spacing, normal)); --local-button-font-style: var(--wrapped-button-font-style, normal); /* spacing */ /* used as theme editor setting values - do not change var names */ --wrapped-spacing-scale-base: 1; --wrapped-spacing-scale-less: 0.75; --wrapped-spacing-scale-more: 1.166; --local-spacing-scale: var(--wrapped-spacing-scale-base, 1); --local-spacing-fixed: 4px; --local-spacing-base: clamp(12px, calc(16px * var(--local-spacing-scale)), 24px); --local-spacing-lg: clamp(16px, calc(24px * var(--local-spacing-scale)), 28px); --local-spacing-sm: clamp(8px, calc(12px * var(--local-spacing-scale)), 14px); --local-spacing-xs: clamp(6px, calc(8px * var(--local-spacing-scale)), 10px); /* shadows */ --local-shadow-blur: 1.5rem; --local-shadow-color: rgba(0, 0, 0, 0.25); --local-shadow-offset: 0.75rem; /* default styles */ all: revert; box-sizing: border-box; cursor: default; display: block; font-family: var(--local-font-family); font-size: var(--local-font-size); line-height: var(--local-line-height-base); letter-spacing: var(--local-letter-spacing); margin-block-start: var(--local-spacing-xs); margin-block-end: var(--local-spacing-xs); text-align: start; width: -webkit-fill-available; white-space: normal; } *, *::before, *::after { box-sizing: inherit; } /* gift block launcher */ gift-block-launcher { display: contents; } .gift-block__launcher { background-color: var(--local-primary-button-surface); border-color: var(--local-primary-button-border-surface); border-width: var(--local-border-width); border-radius: var(--local-border-radius-sm); border-style: solid; color: var(--local-primary-button-text-color); padding: var(--local-spacing-sm); font-family: var(--local-font-family); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-base); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); max-width: var(--wrapped-launcher-button-max-width, 440px); text-transform: var(--local-button-text-transform); width: 100%; &:hover { cursor: pointer; background-color: var(--local-primary-button-surface--hover); border-color: var(--local-primary-button-border-surface--hover); } &:active { background-color: var(--local-primary-button-surface--active); border-color: var(--local-primary-button-border-surface--active); } &:focus, &:focus-visible { outline: none; } &[with-checkmark] { position: relative; display: inline-flex; align-items: center; gap: var(--local-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(--local-transition-duration) * 3) ease forwards; */ } } } &[variant="link"] { background: none; border: none; color: var(--local-primary-text-color); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-base); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); text-transform: var(--local-button-text-transform); text-decoration: none; padding: 0; width: auto; &:hover { cursor: pointer; color: var(--local-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(--local-spacing-fixed); 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[orders-limit-reached] { cursor: var(--local-disabled-cursor); opacity: var(--local-disabled-opacity); pointer-events: none; &[with-checkmark] { .icon-wrapper { opacity: var(--local-disabled-opacity-md); } } } /* gift block modal */ .gift-block-modal { background-color: var(--local-primary-surface); border: none; border-radius: var(--local-border-radius-base); box-shadow: 0 var(--local-shadow-offset) var(--local-shadow-blur) var(--local-shadow-color); outline: var(--local-border-width) solid var(--local-dialog-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(--local-border-width) solid var(--local-dialog-border-surface); } @media (max-width: 768px) { .gift-block-modal { max-height: calc(100% - var(--local-spacing-sm)); max-width: calc(100% - var(--local-spacing-sm)); overscroll-behavior: contain; } } /* gift block modal layout */ .gift-block-modal-layout { display: grid; grid-template-areas: var(--local-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-dialog-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(--local-primary-surface); display: flex; flex-direction: row; gap: var(--local-spacing-fixed); grid-area: gift-dialog-header; justify-content: space-between; padding: var(--local-spacing-lg); position: sticky; top: 0; z-index: 1; & h1 { color: var(--local-primary-text-color); font-size: var(--local-font-size-lg); font-weight: var(--local-font-weight-md); line-height: 1.25em; margin: 0; } & button { background-color: color-mix(in srgb, var(--local-secondary-text-color) 8%, transparent); color: var(--local-secondary-text-color); border-radius: var(--local-border-radius-xs); font-size: var(--local-font-size-sm); font-weight: var(--local-font-weight-lg); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); text-transform: var(--local-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(--local-transition-duration) ease, color var(--local-transition-duration) ease; &:hover { background-color: color-mix(in srgb, var(--local-secondary-text-color) 6%, var(--local-hover-style) 12%); } &:active { background-color: color-mix(in srgb, var(--local-secondary-text-color) 16%, var(--local-hover-style) 16%); } &:disabled { pointer-events: none; opacity: var(--local-disabled-opacity); } } } gift-dialog-actions { align-items: flex-end; background-color: var(--local-primary-surface); bottom: 0; display: flex; flex-direction: column; gap: var(--local-spacing-sm); grid-area: gift-dialog-actions; overscroll-behavior: contain; position: sticky; padding: var(--local-spacing-lg); z-index: 1; & button { border-radius: var(--local-border-radius-sm); border-width: var(--local-border-width); border-style: solid; cursor: pointer; font-family: var(--local-font-family); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-md); font-style: var(--local-button-font-style); letter-spacing: var(--local-button-letter-spacing); text-transform: var(--local-button-text-transform); padding: var(--local-spacing-sm); position: relative; width: 100%; transition: background-color var(--local-transition-duration) ease, border-color var(--local-transition-duration) ease, color var(--local-transition-duration) ease, opacity var(--local-transition-duration) ease; &.primary { background-color: var(--local-primary-button-surface); border-color: var(--local-primary-button-border-surface); color: var(--local-primary-button-text-color); display: flex; align-items: center; justify-content: center; .button-content { display: flex; align-items: center; justify-content: center; width: 100%; } .label { flex: 0 1 auto; min-width: 0; text-align: center; } .label.out-of-stock { display: none; } .icon-wrapper { width: 0em; height: 1.25em; } &:hover { background-color: var(--local-primary-button-surface--hover); border-color: var(--local-primary-button-border-surface--hover); color: var(--local-primary-button-text-color--hover); } &:active { background-color: var(--local-primary-button-surface--active); border-color: var(--local-primary-button-border-surface--active); color: var(--local-primary-button-text-color--active); } &[loading] { background-color: var(--local-primary-button-surface--active); border-color: var(--local-primary-button-border-surface--active); color: var(--local-primary-button-text-color--active); pointer-events: none; .button-content { opacity: 0; } } } &.secondary { background-color: var(--local-secondary-button-surface); border-color: var(--local-secondary-button-border-surface); color: var(--local-secondary-button-text-color); display: flex; align-items: center; justify-content: center; .button-content { display: flex; align-items: center; justify-content: center; gap: var(--local-spacing-fixed); width: 100%; } .label { flex: 0 1 auto; min-width: 0; text-align: center; } .icon-wrapper { --icon-stroke-width: 1.5px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; svg { width: 1.25em; height: 1.25em; stroke-width: var(--icon-stroke-width); } .remove-icon-top, .remove-icon-bottom { transition: transform var(--local-transition-duration) ease-in-out; } } &:hover { background-color: var(--local-secondary-button-surface--hover); border-color: var(--local-secondary-button-border-surface--hover); color: var(--local-secondary-button-text-color--hover); .icon-wrapper { .remove-icon-top { transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg); } .remove-icon-bottom { transform: translateY(var(--icon-stroke-width)); } } } &:active { background-color: var(--local-secondary-button-surface--active); border-color: var(--local-secondary-button-border-surface--active); .icon-wrapper { transition: filter var(--local-transition-duration) ease-in-out; } } &[hidden] { display: none; } &[loading] { background-color: var(--local-secondary-button-surface--active); border-color: var(--local-secondary-button-border-surface--active); color: var(--local-secondary-button-text-color--active); pointer-events: none; .button-content { opacity: 0; } .spinner .svg-wrapper svg { fill: var(--local-secondary-button-text-color--active); } } } &:disabled { cursor: var(--local-disabled-cursor); opacity: var(--local-disabled-opacity); pointer-events: none; .button-content { pointer-events: none; opacity: calc(var(--local-disabled-opacity) * 1.5); } } /* spinner styles */ .spinner { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); & .svg-wrapper svg { animation: spin var(--local-spinner-duration) cubic-bezier(0, 0, 1, 1) infinite; fill: var(--local-primary-button-text-color); height: 1.5em; } & [role="status"] { visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } &[loading] { pointer-events: none; .spinner { opacity: 1; } } } &:has(button[loading]:not([hidden])) { & button { pointer-events: none; opacity: 0.8; } } &:is([out-of-stock]) { & button.primary { pointer-events: none !important; opacity: 0.6 !important; & .label { display: none; } & .label.out-of-stock { display: block; } } } } gift-dialog-content { display: contents; } section#media { align-self: stretch; background-color: var(--local-secondary-surface); grid-area: media; grid-row: 1 / 4; height: 100%; padding: var(--local-spacing-lg); position: sticky; top: 0; transition: order var(--local-transition-duration) ease, width var(--local-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(--local-border-radius-sm); width: 100%; height: auto; } } } section#content { grid-area: content; background-color: var(--local-primary-surface); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding: var(--local-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(--local-spacing-lg); transition: order var(--local-transition-duration) ease; @media (max-width: 768px) { & > *:first-child:not(:only-child) { margin-top: unset; } } /* gift product details */ & .gift-product { display: flex; flex-direction: column; gap: var(--local-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(--local-spacing-base); column-gap: var(--local-spacing-sm); } & .gift-product-content { display: flex; flex: 1 1 50%; flex-direction: column; gap: var(--local-spacing-xs); } & .gift-product-media { display: flex; align-items: center; &:has(shopify-media) { --local-inline-media-max-size: 60px; --local-inline-media-size: clamp(40px, 60px, var(--local-inline-media-max-size)); border-radius: var(--local-border-radius-sm); height: var(--local-inline-media-size); width: var(--local-inline-media-size); overflow: hidden; margin-inline-start: auto; margin-inline-end: auto; } & shopify-media { & img { border-radius: var(--local-border-radius-sm); width: 100%; height: auto; } } } & .gift-product-title { color: var(--local-primary-text-color); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-md); margin: 0; } & .gift-product-pricing { display: flex; gap: var(--local-spacing-xs); margin: 0; font-weight: var(--local-font-weight-base); /* font-size: var(--local-font-size-base); */ font-size: clamp(12px, calc(var(--local-font-size-base) * 0.94), 18px); line-height: 1em; } & .gift-product-price { color: var(--local-secondary-text-color); } & .gift-product-price--compare { color: var(--local-secondary-text-color); text-decoration: line-through; opacity: var(--local-disabled-opacity); } & .gift-product-description { font-weight: var(--local-font-weight-base); color: var(--local-secondary-text-color); font-size: clamp(12px, calc(var(--local-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(--local-spacing-lg); } } } /* gift messaging fields */ & gift-dialog-message { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--local-spacing-base); } & .option-group { display: flex; flex-direction: column; gap: var(--local-spacing-xs); flex: 0 0 100%; @media (min-width: 768px) { &:has(input[id="receiver-input"]), &:has(input[id="sender-input"]) { flex: 1 1 0%; } } &.option-group-disabled { cursor: var(--local-disabled-cursor); pointer-events: none; opacity: var(--local-disabled-opacity-md); transition: background-color var(--local-transition-duration) ease, color var(--local-transition-duration) ease; & .message-field { background-color: var(--local-form-element-surface--disabled); color: transparent; outline-color: var(--local-form-element-border-color--disabled); pointer-events: none; } } &.option-group-hidden { display: none; } & label { font-size: var(--local-font-size-sm); font-weight: var(--local-font-weight-base); color: var(--local-secondary-text-color); line-height: 1em; } & .message-field { background-color: var(--local-form-element-surface); color: var(--local-form-element-text-color); width: 100%; padding: var(--local-spacing-sm); border: none; border-radius: var(--local-border-radius-sm); font-family: var(--local-font-family); font-size: var(--local-font-size-base); outline: var(--local-border-width) solid var(--local-form-element-border-color); min-height: 42px; } & .message-field:active, & .message-field:focus, & .message-field:focus-within, & .message-field:focus-visible { outline-color: var(--local-form-element-selection-color); outline-width: var(--local-outline-width); /* UX verification needed &::placeholder { color: transparent; } */ } & .message-field::placeholder { color: var(--local-form-element-placeholder-text-color); } & textarea.message-field { min-height: 100px; resize: vertical; } & .counter { color: var(--local-secondary-text-color); font-size: var(--local-font-size-sm); line-height: normal; } } } /* shopify variant selector */ shopify-variant-selector { font-size: var(--local-font-size-sm); width: 100%; } shopify-variant-selector::part(form) { gap: var(--local-spacing-base); } shopify-variant-selector::part(radio) { background-color: var(--local-form-element-surface); color: var(--local-form-element-text-color); border: none; border-radius: var(--local-border-radius-sm); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-base); outline: var(--local-border-width) solid var(--local-form-element-border-color); padding: calc(var(--local-spacing-sm) * 0.5) var(--local-spacing-base); transition: color var(--local-transition-duration) ease, outline-color var(--local-transition-duration) ease, outline-width var(--local-transition-duration) ease; } shopify-variant-selector::part(radio):active { outline-color: var(--local-form-element-selection-color--active); outline-width: var(--local-outline-width); } shopify-variant-selector::part(radio):hover { outline-color: var(--local-form-element-selection-color--hover); } shopify-variant-selector::part(radio-disabled) { background-color: var(--local-form-element-surface--disabled); color: var(--local-form-element-text-color--disabled); opacity: var(--local-disabled-opacity); /* do not transition opacity - it causes a flash when changing variants */ outline-color: var(--local-form-element-border-color--disabled); pointer-events: none; } shopify-variant-selector::part(radio-selected) { outline-color: var(--local-form-element-selection-color); outline-width: var(--local-outline-width); pointer-events: none; } shopify-variant-selector::part(select) { color: var(--local-form-element-text-color); border: none; border-radius: var(--local-border-radius-sm); font-family: var(--local-font-family); font-size: var(--local-font-size-base); font-weight: var(--local-font-weight-base); margin-top: var(--local-spacing-xs); width: 100%; max-width: 100%; padding: var(--local-spacing-sm); padding-right: calc(var(--local-spacing-sm) + 1.5rem); outline: var(--local-border-width) solid var(--local-form-element-border-color); appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--local-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(--local-form-element-selection-color); outline-width: var(--local-outline-width); } shopify-variant-selector::part(color-swatch) { border: none; outline: var(--local-border-width) solid rgba(0, 0, 0, .1); transition: color var(--local-transition-duration) ease, outline-color var(--local-transition-duration) ease, outline-width var(--local-transition-duration) ease; } shopify-variant-selector::part(color-swatch):active { outline-color: var(--local-form-element-selection-color--active); outline-width: var(--local-outline-width); } shopify-variant-selector::part(color-swatch):hover { outline-color: var(--local-form-element-selection-color--hover); } shopify-variant-selector::part(color-swatch-selected) { outline-color: var(--local-form-element-selection-color); outline-width: var(--local-outline-width); } shopify-variant-selector::part(color-swatch-selected):after { content: unset; } shopify-variant-selector::part(color-swatch-label) { color: var(--local-secondary-text-color); } shopify-variant-selector::part(color-swatch-disabled) { opacity: var(--local-disabled-opacity); /* do not transition opacity - it causes a flash when changing variants */ pointer-events: none; } shopify-variant-selector::part(label) { color: var(--local-secondary-text-color); display: inline-block; font-size: var(--local-font-size-sm); font-weight: var(--local-font-weight-base); line-height: 1em; margin-bottom: calc(var(--local-spacing-sm) - 6px); } /* media queries */ /* md - and above */ @media (min-width: 768px) { :host { --local-section-max-width: 420px; } gift-dialog-content > section { min-width: var(--local-section-max-width); max-width: var(--local-section-max-width); } gift-dialog-header, gift-dialog-actions { min-width: var(--local-section-max-width); max-width: var(--local-section-max-width); } } /* md - and below */ @media (max-width: 768px) { :host { --local-section-max-width: 390px; } gift-dialog-content > section { min-width: var(--local-section-max-width); max-width: var(--local-section-max-width); } gift-dialog-header, gift-dialog-actions { min-width: var(--local-section-max-width); max-width: var(--local-section-max-width); padding: var(--local-spacing-base); } .gift-block-modal-layout { grid-template-areas: "gift-dialog-header" "media" "content" "gift-dialog-actions"; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; max-height: calc(100dvh - var(--local-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(--local-section-max-width); max-height: var(--local-section-max-width); } } } section#content { overflow-y: unset; padding: var(--local-spacing-base); &.with-media-inline { padding-top: 0; } & .gift-product-media { &:has(shopify-media) { --local-inline-media-max-size: 330px; } } } } /* sm - and below */ @media (max-width: 480px) { :host { --local-section-max-width: 100%; } section#media { & shopify-media { & img { border-radius: unset; min-height: 350px; max-height: 350px; } } } } /* animations for loaders */ @keyframes spin { 100% { transform: rotate(1turn); } } @keyframes unblur { from { filter: blur(2px); } to { filter: blur(0px); } }
Shop new arrivals
Shop new arrivals
Shop new arrivals
Shop new arrivals
Shop new arrivals
Shop new arrivals
Shop new arrivals
Shop new arrivals
Shop new arrivals
Shop new arrivals
Liquid error (sections/marquee line 50): Could not find asset snippets/icon-arrow.liquid
Skip to content
Close menu
Home
New Arrivals
Collection
All Products
Fall/Winter Collection
Sets
Evening Wear
Denim
Jackets | Cardigans
Coats
Tops
Office Wear
Pants | Skirts
Dresses | Jumpsuit
Accessories
Loungewear
Gift Cards
Top Sellers
About
The Designer
About Us
Where to Shop
Contact Us
Shipping Policy
Privacy Policy
Terms & Conditions
Log in
Instagram
Facebook
Cart
Close cart
Order note
Your cart is currently empty.
Search
Site navigation
Log in
Search
Cart
Home
New Arrivals
Collection
All Products
Fall/Winter Collection
Sets
Evening Wear
Denim
Jackets | Cardigans
Coats
Tops
Office Wear
Pants | Skirts
Dresses | Jumpsuit
Accessories
Loungewear
Gift Cards
Top Sellers
About
The Designer
About Us
Where to Shop
Contact Us
Shipping Policy
Privacy Policy
Terms & Conditions
Search
"Close (esc)"
SHOP BY
All Products
Fall/Winter Collection
Sets
Evening Wear
Denim
Jackets | Cardigans
Coats
Tops
Office Wear
Pants | Skirts
Dresses | Jumpsuit
Accessories
Loungewear
Gift Cards
Filter
Sort
Sort
Featured
Best selling
Alphabetically, A-Z
Alphabetically, Z-A
Price, low to high
Price, high to low
Date, old to new
Date, new to old
Quick view
Beige Denim
LE 3,500.00
Quick view
Ripped Wide Leg In Dark Grey
LE 3,990.00
Quick view
Ripped Asymmetrical Grey Top
LE 5,990.00
Quick view
Barrel Waterproof Black Pants
LE 4,000.00
Quick view
Waterproof Puplum T-Shirt In Black
LE 5,500.00
Quick view
Patch Work Cropped Wide Leg
LE 4,300.00
Quick view
Oversize Quarter Sleeves Top Cream
LE 4,999.00
Quick view
Ripped Wide Leg In Beige
LE 3,990.00
Quick view
Ripped Beige Cardigan
LE 5,000.00
Quick view
Waterproof Navy Trench Coat
LE 9,000.00
Quick view
Elastic Waist Wide Leg Pants Navy
LE 4,500.00
Quick view
Oversize Bell Sleeves Top Navy
LE 4,999.00
Quick view
Oversize Short Trench Coat Off White
LE 8,800.00
Quick view
Ripped Asymmetrical Skirt
LE 4,900.00
Quick view
Elastic Waist Wide Leg Pants Coffee
LE 4,500.00
Quick view
Maxi Coffee Cardigan
LE 6,000.00
Quick view
Oversize Half Sleeves T-Shirt Black
LE 4,000.00
Quick view
Oversize Half Sleeves T-shirt White
LE 4,000.00
Quick view
Maxi Waterproof Rain Coat In Black
LE 9,000.00
Quick view
Bottom V Ruffle Top
LE 6,600.00
Quick view
Ruffles Maxi Cardigan In Brown
LE 9,000.00
Quick view
Waterproof Peplum T-Shirt In White
LE 5,500.00
Quick view
Cropped Pointed Sides Pants
LE 3,890.00
Quick view
Cropped Pointed Sleeves Jacket
LE 4,700.00
Quick view
Navy PJ Set
LE 9,500.00
Quick view
Washed Brick Denim Pants
LE 4,900.00
Quick view
Oversize Short Trench Coat Brick
LE 8,800.00
Quick view
Barrel Suit Pants In Blue
LE 4,500.00
1
2
3
…
7
Next
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
"Close (esc)"
×
