: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: 100;
--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: #000000;
--shadow-primary-button-surface--active: color-mix(in srgb, var(--shadow-primary-button-surface), var(--shadow-hover-style) 20%);
--shadow-primary-button-surface--hover: color-mix(in srgb, var(--shadow-primary-button-surface), var(--shadow-hover-style) 16%);
--shadow-primary-button-text-color: #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: rgba(0,0,0,0);
--shadow-primary-button-border-surface--active: transparent;
--shadow-primary-button-border-surface--hover: transparent;
--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: #ffffff;
--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: #0000000f;
--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: #333333;
--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: #000000;
--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: #333333;
--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-more, 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(--shadow-spacing-xs);
margin-block-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);
& 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 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%;
}
}
}
}
/* 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);
}
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;
font-size: var(--shadow-font-size-base) !important;
height: fit-content !important;
margin-block-start: var(--shadow-block-margin-block-start) !important;
margin-block-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: 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;
outline: none;
}
& 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;
appearance: auto !important;
clip: unset !important;
display: inline-block !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;
}
}
}
& label input[type="checkbox"] {
accent-color: var(--shadow-form-element-selection-color);
}
}
:host(wrapped-extension[hidden-checkbox="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: 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: 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-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: var(--shadow-font-size-sm) !important;
height: auto;
margin-bottom: 0.5em !important;
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;
}
}
: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 {
border-color: var(--shadow-form-element-selection-color) !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) {
border-color: var(--shadow-form-element-selection-color) !important;
border-width: var(--shadow-border-width) !important;
box-shadow: 0 0 0 var(--shadow-border-width) var(--shadow-form-element-selection-color) !important;
pointer-events: none !important;
opacity: 1 !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-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); }
}
All MatchaAll grades, all regionsCeremonial MatchaOur highest grades
Premium MatchaBest for lattes
Culinary MatchaBaking, ice cream
Bulk MatchaWholesale & large formats
Matcha Tea SetsCurated sets for every level
Matcha TeawareMade for whisking
Matcha BowlsMade for whisking
Matcha SamplesTry before you buy · incl. RYŌKA
Matcha SweetsChocolate & treats
Earth Day Matcha AKA Windows XPA playful Windows XP–inspired matcha latte with KIYOKA Saemidori hills, thick cream clouds and a butterfly pea sky.
Black Sesame Matcha RecipeA rich black sesame matcha latte made with umami-forward Okumidori matcha. Creamy, nutty and perfectly balanced for a refined iced matcha experience.
Easy Iced Matcha Coconut Water RecipeA refreshing matcha coconut water recipe made with pure Japanese matcha. Light, hydrating and easy to prepare with a shaker in under a minute.
Ultra Rich Matcha Cloud RecipeA step-by-step recipe tutorial for making an ultra rich matcha cloud drink using the Ninja Luxe Cafe machine
Iced Oolong Matcha RecipeWhile Earl Grey iced matcha has become increasingly popular, this version uses a Japanese Koshun cultivar oolong a tea known for its delicate grape, honey and floral notes.All MatchaAll grades, all regionsCeremonial MatchaOur highest gradesPremium MatchaBest for lattesCulinary MatchaBaking, ice creamBulk MatchaWholesale & large formatsMatcha Tea SetsCurated sets for every levelMatcha TeawareMade for whiskingMatcha BowlsMade for whiskingMatcha SamplesTry before you buy · incl. RYŌKAMatcha SweetsChocolate & treatsEarth Day Matcha AKA Windows XPA playful Windows XP–inspired matcha latte with KIYOKA Saemidori hills, thick cream clouds and a butterfly pea sky.Black Sesame Matcha RecipeA rich black sesame matcha latte made with umami-forward Okumidori matcha. Creamy, nutty and perfectly balanced for a refined iced matcha experience.Easy Iced Matcha Coconut Water RecipeA refreshing matcha coconut water recipe made with pure Japanese matcha. Light, hydrating and easy to prepare with a shaker in under a minute.Ultra Rich Matcha Cloud RecipeA step-by-step recipe tutorial for making an ultra rich matcha cloud drink using the Ninja Luxe Cafe machineIced Oolong Matcha RecipeWhile Earl Grey iced matcha has become increasingly popular, this version uses a Japanese Koshun cultivar oolong a tea known for its delicate grape, honey and floral notes.
Furoshiki with rings — tote, scarf or gift wrap
Kata Kata koala print on warm yellow cotton
Kata Kata ocean motif, soft blue 50cm cotton
Kata Kata stencil-dyed bear and bird, 50cm cotton
Kata Kata katazome sea otter, rich blue cotton
Takayama bamboo scoop — one-of-a-kind wavy grain
Hokusai Great Wave on 48cm cotton wrap
Kuniyoshi cat Tokaido print, 48cm rayon furoshiki
Utamaro Ukiyo-e print on 48cm cotton furoshiki
Lucky cat folk-art motif on 70cm Japanese cotton
Hokusai Red Fuji on bold 68cm rayon furoshiki
Utamaro Ukiyo-e kimono print on 68cm rayon
The Purematcha Boxing Day sale our final sale event of the year. Shop our sale for the best matcha powder, loose leaf teas, matcha tea sets, tea gifts, teapots and so much more. Same day dispatch, shipping Australia wide and worldwide.
