/** Shopify CDN: Minification failed
Line 44:0 All "@import" rules must come first
Line 578:0 All "@import" rules must come first
Line 978:0 All "@import" rules must come first
**/
/* START_SECTION:auto-link-terms (INDEX:15) */
.auto-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted currentColor;
padding-bottom: 0;
cursor: pointer;
transition: color 0.22s ease, border-bottom-color 0.22s ease, border-bottom-style 0.22s ease;
}
.auto-link:hover,
.auto-link:focus-visible {
color: var(--auto-link-hover, #9f8d5f);
border-bottom-color: var(--auto-link-hover, #9f8d5f);
border-bottom-style: solid;
outline: none;
}
.auto-link::after {
content: '';
display: inline-block;
width: 0.48em;
height: 0.48em;
margin-left: 0.22em;
vertical-align: 0.08em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
opacity: 0.45;
transition: opacity 0.22s ease, transform 0.22s ease;
}
.auto-link:hover::after,
.auto-link:focus-visible::after {
opacity: 1;
transform: translate(1px, -1px);
}
/* END_SECTION:auto-link-terms */
/* START_SECTION:collection-drawer (INDEX:17) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Inter:wght@200;300;400;500&display=swap');
.cdr {
position: fixed;
inset: 0;
z-index: 9990;
pointer-events: none;
opacity: 0;
display: none;
width: 100vw;
max-width: 100vw;
overflow: hidden;
transition: opacity 0.32s ease;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
font-weight: 300;
letter-spacing: 0.01em;
color: var(--cdr-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cdr.open {
display: block;
pointer-events: auto;
opacity: 1;
}
.cdr-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* BACKDROP — warm dim with subtle radial vignette */
.cdr-backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(120% 80% at 80% 50%, rgba(201,184,138,0.10), transparent 60%),
var(--cdr-backdrop);
opacity: 0;
transition: opacity 0.5s ease;
backdrop-filter: blur(1.5px);
-webkit-backdrop-filter: blur(1.5px);
}
.cdr.open .cdr-backdrop { opacity: 1; }
/* PANEL */
.cdr-panel {
position: absolute;
top: 0; right: 0;
height: 100%;
width: min(var(--cdr-width), 94vw);
background: var(--cdr-panel-bg);
display: flex;
flex-direction: column;
box-shadow: -36px 0 80px -32px rgba(0,0,0,0.30);
border-top-left-radius: var(--cdr-radius);
border-bottom-left-radius: var(--cdr-radius);
transform: translateX(102%);
transition: transform 0.52s var(--cdr-anim-ease);
outline: none;
overflow: hidden;
}
.cdr.open .cdr-panel { transform: translateX(0); }
/* HEAD */
.cdr-head {
position: relative;
padding: var(--cdr-head-pad-y) var(--cdr-head-pad-x) 26px;
background: var(--cdr-panel-bg);
border-bottom: 1px solid var(--cdr-border);
flex-shrink: 0;
}
.cdr-head-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.cdr-eyebrow {
font-size: 0.65rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--cdr-accent);
font-weight: 500;
transform: translateY(8px);
opacity: 0;
transition: transform 0.6s var(--cdr-anim-ease) 0.18s, opacity 0.5s ease 0.18s;
}
.cdr-count {
font-size: 0.62rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cdr-muted);
font-weight: 400;
opacity: 0;
transition: opacity 0.5s ease 0.28s;
}
.cdr-count:not(:empty) { opacity: 1; }
.cdr-title {
margin: 0 64px 0 0;
font-family: 'Cormorant Garamond', 'Playfair Display', serif;
font-size: 2.4rem;
line-height: 1.08;
font-weight: 300;
letter-spacing: 0.012em;
color: var(--cdr-text);
transform: translateY(14px);
opacity: 0;
transition: transform 0.7s var(--cdr-anim-ease) 0.22s, opacity 0.6s ease 0.22s;
}
.cdr.open .cdr-eyebrow,
.cdr.open .cdr-title { opacity: 1; transform: translateY(0); }
.cdr-rule {
display: block;
width: 32px;
height: 1px;
background: var(--cdr-accent);
margin-top: 18px;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.7s var(--cdr-anim-ease) 0.32s;
}
.cdr.open .cdr-rule { transform: scaleX(1); }
/* CLOSE BUTTON — refined */
.cdr-close {
position: absolute;
top: calc(var(--cdr-head-pad-y) - 4px);
right: calc(var(--cdr-head-pad-x) - 6px);
width: 44px;
height: 44px;
border: none;
background: transparent;
color: var(--cdr-text);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 5;
transition: color 0.3s ease;
}
.cdr-close-ring {
position: absolute;
inset: 0;
border: 1px solid var(--cdr-border);
border-radius: 50%;
transition: border-color 0.4s ease, background 0.4s ease, transform 0.45s var(--cdr-anim-ease);
}
.cdr-close svg {
position: relative;
width: 15px;
height: 15px;
transition: transform 0.45s var(--cdr-anim-ease);
}
.cdr-close:hover .cdr-close-ring {
background: var(--cdr-text);
border-color: var(--cdr-text);
transform: scale(1.06);
}
.cdr-close:hover { color: var(--cdr-panel-bg); }
.cdr-close:hover svg { transform: rotate(90deg); }
.cdr-close:focus-visible .cdr-close-ring { border-color: var(--cdr-accent); }
/* BODY */
.cdr-body {
flex: 1;
position: relative;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
background: var(--cdr-panel-bg);
}
.cdr-body::-webkit-scrollbar { width: 8px; }
.cdr-body::-webkit-scrollbar-track { background: transparent; }
.cdr-body::-webkit-scrollbar-thumb { background: var(--cdr-border); border-radius: 8px; }
.cdr-body::-webkit-scrollbar-thumb:hover { background: var(--cdr-accent); }
/* LOADER — skeleton */
.cdr-loader {
position: absolute;
inset: 0;
background: var(--cdr-panel-bg);
z-index: 3;
padding: 28px var(--cdr-head-pad-x);
display: flex;
flex-direction: column;
}
.cdr-loader[hidden] { display: none; }
.cdr-skeleton {
display: grid;
grid-template-columns: repeat(var(--cdr-grid-cols), 1fr);
gap: 0;
border-top: 1px solid var(--cdr-border);
border-left: 1px solid var(--cdr-border);
}
.cdr-skeleton-card {
border-right: 1px solid var(--cdr-border);
border-bottom: 1px solid var(--cdr-border);
padding: 0 0 22px;
display: flex;
flex-direction: column;
background: linear-gradient(120deg, rgba(245,243,238,0.6) 0%, rgba(245,243,238,1) 50%, rgba(245,243,238,0.6) 100%);
background-size: 220% 100%;
animation: cdr-shimmer 1.8s linear infinite;
}
.cdr-skeleton-img {
aspect-ratio: 1 / 1;
background: rgba(0,0,0,0.04);
}
.cdr-skeleton-line {
height: 9px;
background: rgba(0,0,0,0.06);
margin: 16px 18px 6px;
width: 70%;
}
.cdr-skeleton-line--short { width: 35%; margin-top: 6px; }
@keyframes cdr-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* CONTENT WRAP */
.cdr-content {
padding: 0;
min-height: 50vh;
}
.cdr-content .cdrc-desc {
margin: 22px var(--cdr-head-pad-x) 6px;
color: var(--cdr-text);
font-size: 0.85rem;
line-height: 1.75;
font-style: italic;
font-weight: 300;
max-width: 540px;
}
.cdr-content .cdrc-grid {
display: grid;
grid-template-columns: repeat(var(--cdr-grid-cols), 1fr);
gap: 0;
margin-top: 26px;
border-top: 1px solid var(--cdr-border);
border-left: 1px solid var(--cdr-border);
}
/* PRODUCT CARD — mirrors .mc-card vocabulary */
.cdr-content .cdrc-card {
position: relative;
background: var(--cdr-panel-bg);
border-right: 1px solid var(--cdr-border);
border-bottom: 1px solid var(--cdr-border);
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: background 0.4s ease;
opacity: 0;
transform: translateY(18px);
animation: cdr-card-in 0.7s var(--cdr-anim-ease) forwards;
}
.cdr-content .cdrc-card:hover { background: var(--cdr-hover-bg); }
.cdr-content .cdrc-card:nth-child(1) { animation-delay: 0.10s; }
.cdr-content .cdrc-card:nth-child(2) { animation-delay: 0.16s; }
.cdr-content .cdrc-card:nth-child(3) { animation-delay: 0.22s; }
.cdr-content .cdrc-card:nth-child(4) { animation-delay: 0.28s; }
.cdr-content .cdrc-card:nth-child(5) { animation-delay: 0.34s; }
.cdr-content .cdrc-card:nth-child(6) { animation-delay: 0.40s; }
.cdr-content .cdrc-card:nth-child(7) { animation-delay: 0.46s; }
.cdr-content .cdrc-card:nth-child(8) { animation-delay: 0.52s; }
.cdr-content .cdrc-card:nth-child(n+9) { animation-delay: 0.58s; }
@keyframes cdr-card-in {
to { opacity: 1; transform: translateY(0); }
}
.cdr-content .cdrc-img {
position: relative;
flex: none;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f5f4f0;
}
.cdr-content .cdrc-img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.7s var(--cdr-anim-ease), opacity 0.5s ease;
display: block;
}
.cdr-content .cdrc-img-hover {
opacity: 0;
}
.cdr-content .cdrc-card:hover .cdrc-img > img:first-of-type { transform: scale(1.045); }
.cdr-content .cdrc-card:hover .cdrc-img-hover { opacity: 1; }
.cdr-content .cdrc-badge {
position: absolute;
top: 14px;
left: 14px;
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
color: var(--cdr-text);
z-index: 2;
background: transparent;
}
.cdr-content .cdrc-wish {
position: absolute;
top: 12px;
right: 12px;
width: 22px;
height: 22px;
z-index: 2;
color: var(--cdr-text);
opacity: 0.6;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.cdr-content .cdrc-card:hover .cdrc-wish { opacity: 1; transform: scale(1.05); }
.cdr-content .cdrc-wish svg { width: 100%; height: 100%; }
.cdr-content .cdrc-info {
padding: 14px 18px 22px;
background: transparent;
}
.cdr-content .cdrc-name {
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 9px;
font-weight: 400;
line-height: 1.4;
color: var(--cdr-text);
}
.cdr-content .cdrc-price {
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0.02em;
}
.cdr-content .cdrc-price s {
color: var(--cdr-muted);
margin-left: 6px;
font-weight: 300;
}
.cdr-content .cdrc-price strong {
color: #b34040;
font-weight: 400;
margin-right: 4px;
}
/* HOVER "ADD +" — same vocabulary as main collection */
.cdr-content .cdrc-add {
position: absolute;
bottom: 18px;
right: 18px;
background: transparent;
border: none;
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
color: var(--cdr-text);
font-family: inherit;
padding: 0;
z-index: 3;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
.cdr-content .cdrc-card:hover .cdrc-add {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cdr-content .cdrc-add:hover { color: var(--cdr-accent); }
/* EMPTY STATE */
.cdr-content .cdrc-empty {
padding: 80px 28px;
text-align: center;
color: var(--cdr-muted);
font-size: 0.88rem;
line-height: 1.65;
font-weight: 300;
}
.cdr-content .cdrc-empty a { color: var(--cdr-accent); border-bottom: 1px solid currentColor; }
/* FOOTER — Atelier CTA */
.cdr-foot {
position: sticky;
bottom: 0;
background:
radial-gradient(120% 90% at 50% 0%, var(--cdr-accent-soft) 0%, transparent 70%),
var(--cdr-panel-bg);
border-top: 1px solid var(--cdr-border);
padding: 26px var(--cdr-head-pad-x) 28px;
text-align: center;
z-index: 4;
box-shadow: 0 -12px 22px -22px rgba(0,0,0,0.1);
}
.cdr-foot[hidden] { display: none; }
.cdr-foot-rule {
display: block;
width: 28px;
height: 1px;
background: var(--cdr-accent);
margin: 0 auto 14px;
}
.cdr-foot-atelier {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
max-width: 520px;
margin: 0 auto;
}
.cdr-foot-eyebrow {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.6rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--cdr-muted);
font-weight: 500;
}
.cdr-foot-link {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Cormorant Garamond', 'Playfair Display', serif;
font-size: 1.45rem;
letter-spacing: 0.02em;
text-transform: none;
color: var(--cdr-text);
text-decoration: none;
font-weight: 400;
padding: 2px 0;
position: relative;
line-height: 1.2;
}
.cdr-foot-text { position: relative; font-style: italic; }
.cdr-foot-text::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -3px;
height: 1px;
background: currentColor;
transform: scaleX(0.4);
transform-origin: left center;
transition: transform 0.5s var(--cdr-anim-ease), background 0.4s ease;
}
.cdr-foot-link:hover .cdr-foot-text::after,
.cdr-foot-link:focus-visible .cdr-foot-text::after {
transform: scaleX(1);
background: var(--cdr-accent);
}
.cdr-foot-arrow {
width: 16px;
height: 16px;
transition: transform 0.4s var(--cdr-anim-ease), color 0.3s;
color: var(--cdr-accent);
}
.cdr-foot-link:hover .cdr-foot-arrow,
.cdr-foot-link:focus-visible .cdr-foot-arrow { transform: translateX(6px); }
.cdr-foot-link:hover,
.cdr-foot-link:focus-visible { color: var(--cdr-accent); }
.cdr-foot-link:focus-visible { outline: 2px solid var(--cdr-accent); outline-offset: 6px; border-radius: 2px; }
.cdr-foot-hint {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.78rem;
line-height: 1.65;
color: var(--cdr-muted);
margin: 2px 0 0;
font-weight: 300;
max-width: 440px;
}
body.cdr-locked {
overflow: hidden;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.cdr { --cdr-grid-cols: 2; }
.cdr-panel { width: 96vw; }
.cdr-head { padding: 24px 24px 22px; }
.cdr-title { font-size: 1.95rem; margin-right: 56px; }
.cdr-close { top: 22px; right: 22px; width: 40px; height: 40px; }
.cdr-content .cdrc-desc { margin-left: 24px; margin-right: 24px; }
.cdr-foot { padding: 18px 24px; }
}
@media (max-width: 520px) {
.cdr { --cdr-grid-cols: 1; }
.cdr-panel { width: 100vw; }
.cdr-head { padding: 20px 20px 18px; }
.cdr-title { font-size: 1.6rem; margin-right: 50px; }
.cdr-close { top: 18px; right: 18px; width: 38px; height: 38px; }
.cdr-content .cdrc-card { }
.cdr-content .cdrc-info { padding: 12px 16px 18px; }
.cdr-content .cdrc-name { font-size: 0.66rem; letter-spacing: 0.12em; }
.cdr-content .cdrc-desc { margin-left: 20px; margin-right: 20px; font-size: 0.82rem; }
.cdr-foot { padding: 22px 20px 24px; }
.cdr-foot-link { font-size: 1.25rem; }
.cdr-foot-eyebrow { font-size: 0.55rem; letter-spacing: 0.3em; }
.cdr-foot-hint { font-size: 0.74rem; line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
.cdr, .cdr-backdrop, .cdr-panel,
.cdr-eyebrow, .cdr-title, .cdr-rule,
.cdr-content .cdrc-card,
.cdr-close, .cdr-close-ring, .cdr-close svg,
.cdr-foot-text::after, .cdr-foot-arrow {
transition: none !important;
animation: none !important;
}
.cdr-eyebrow, .cdr-title { opacity: 1; transform: none; }
.cdr-rule { transform: scaleX(1); }
.cdr-content .cdrc-card { opacity: 1; transform: none; }
.cdr-skeleton-card { animation-duration: 3.5s; }
}
/* END_SECTION:collection-drawer */
/* START_SECTION:mejuri-announcement (INDEX:49) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap');
.mj-announce {
width: 100%;
background: var(--mja-bg, #000);
color: var(--mja-text, #fff);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
font-weight: var(--mja-font-weight, 400);
}
.mj-an-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: var(--mja-pad-y, 10px) var(--mja-pad-x, 24px);
max-width: var(--mja-max-width, 1600px);
margin: 0 auto;
position: relative;
}
.mj-an-track {
display: flex;
align-items: center;
flex: 0 1 auto;
}
.mj-an-item {
display: flex;
align-items: center;
gap: var(--mja-gap, 6px);
font-size: var(--mja-font-size, 0.78rem);
letter-spacing: var(--mja-letter-spacing, 0.04em);
}
.mj-an-link {
color: var(--mja-link-color, inherit);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
}
.mj-an-link:hover { opacity: 0.7; }
.mj-an-arrow {
background: transparent;
border: none;
color: inherit;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
opacity: var(--mja-arrow-opacity, 0.85);
}
.mj-an-arrow:hover { opacity: 1; }
.mj-an-arrow svg { width: var(--mja-arrow-size, 14px); height: var(--mja-arrow-size, 14px); display: block; }
/* Position arrows at far edges */
.mj-an-inner > .mj-an-arrow:first-child { position: absolute; left: var(--mja-pad-x, 24px); }
.mj-an-inner > .mj-an-arrow:last-child { position: absolute; right: var(--mja-pad-x, 24px); }
@media (max-width: 600px) {
.mj-an-item { font-size: calc(var(--mja-font-size, 0.78rem) - 0.08rem); }
.mj-an-inner > .mj-an-arrow:first-child { left: 8px; }
.mj-an-inner > .mj-an-arrow:last-child { right: 8px; }
}
/* END_SECTION:mejuri-announcement */
/* START_SECTION:mejuri-beliefs (INDEX:53) */
.mjbel-section {
background: var(--mjbel-bg, #fff);
padding: var(--mjbel-pad-top, 88px) var(--mjbel-pad-x, 5%) var(--mjbel-pad-bottom, 96px);
text-align: var(--mjbel-align, center);
}
.mjbel-inner {
max-width: var(--mjbel-max-width, 1100px);
margin: 0 auto;
}
.mjbel-quote {
font-family: 'Times New Roman', Times, serif;
font-size: clamp(var(--mjbel-quote-size-min, 1.5rem), 3.4vw, var(--mjbel-quote-size-max, 2.4rem));
font-weight: var(--mjbel-quote-weight, 700);
letter-spacing: var(--mjbel-quote-spacing, 0.02em);
line-height: 1.3;
color: var(--mjbel-quote-color, #111);
margin: 0 0 24px;
text-transform: uppercase;
}
.mjbel-sub {
font-size: var(--mjbel-sub-size, 0.95rem);
color: var(--mjbel-sub-color, #444);
line-height: 1.7;
max-width: var(--mjbel-sub-max-width, 760px);
margin: 0 auto;
letter-spacing: 0.01em;
}
/* END_SECTION:mejuri-beliefs */
/* START_SECTION:mejuri-footer (INDEX:64) */
a[href*="uppromote"],
a[href*="af.uppromote.com"] {
display: none !important;
}
.mjf {
background: var(--mjf-bg, #fff);
color: var(--mjf-text, #1d1d1b);
font-family: 'Inter', -apple-system, sans-serif;
width: 100%;
}
.mjf * { box-sizing: border-box; }
/* Newsletter */
.mjf-newsletter {
background: #f5f4ef;
padding: 36px 4%;
}
.mjf-newsletter__inner {
max-width: 1600px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
}
.mjf-newsletter__title {
font-family: 'Times New Roman', serif;
font-size: 1.6rem;
font-weight: 400;
margin: 0 0 4px;
color: #1d1d1b;
}
.mjf-newsletter__desc {
font-size: 0.85rem;
color: #555;
margin: 0;
}
.mjf-newsletter__form {
display: flex;
align-items: center;
flex-wrap: wrap;
border-bottom: 1px solid #111;
min-width: 360px;
flex: 0 1 480px;
min-height: 48px;
}
.mjf-newsletter__status {
flex: 0 0 100%;
margin: 0 0 8px;
font-size: 0.72rem;
line-height: 1.4;
color: #1d1d1b;
}
.mjf-newsletter__status--error {
color: #8f1f12;
}
.mjf-newsletter__form input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 14px 0;
font-size: 0.9rem;
font-family: inherit;
color: #1d1d1b;
}
.mjf-newsletter__form input::placeholder {
color: #999;
}
.mjf-newsletter__form button {
background: transparent;
border: none;
cursor: pointer;
color: #1d1d1b;
padding: 0 4px;
display: inline-flex;
}
.mjf-main {
background: var(--mjf-main-bg, #fff);
padding: var(--mjf-main-pad-top, 56px) var(--mjf-pad-x, 4%) var(--mjf-main-pad-bottom, 40px);
border-top: 1px solid var(--mjf-divider, #e8e8e8);
}
.mjf-main__inner {
max-width: var(--mjf-max-width, 1600px);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(var(--mjf-main-cols, 5), 1fr);
gap: var(--mjf-col-gap, 32px);
}
.mjf-col__title {
font-family: 'Inter', sans-serif;
font-size: var(--mjf-col-title-size, 0.95rem);
font-weight: 600;
margin: 0 0 18px;
color: var(--mjf-text, #1d1d1b);
}
.mjf-col__list {
list-style: none;
margin: 0;
padding: 0;
}
.mjf-col__list li {
margin-bottom: 10px;
}
.mjf-col__list a {
font-size: var(--mjf-col-link-size, 0.82rem);
color: var(--mjf-col-link-color, #1d1d1b);
text-decoration: none;
font-weight: 400;
}
.mjf-col__list a:hover {
text-decoration: underline;
}
/* Certifications */
.mjf-col--certs .mjf-col__title {
margin-bottom: 22px;
}
.mjf-certs {
display: grid;
grid-template-columns: repeat(3, 60px);
gap: 12px;
}
.mjf-certs img {
width: 60px;
height: 60px;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.85;
}
.mjf-member {
background: var(--mjf-member-bg, #fff);
border-top: 1px solid var(--mjf-divider, #e8e8e8);
padding: var(--mjf-member-pad, 24px) var(--mjf-pad-x, 4%);
}
.mjf-member__inner {
max-width: 1600px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.mjf-member__text {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.mjf-member__brand {
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.02em;
}
.mjf-member__head {
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mjf-member__desc {
font-size: 0.85rem;
color: #555;
margin: 0;
flex: 1 1 100%;
max-width: 660px;
}
.mjf-member__btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--mjf-member-btn-border, #111);
background: var(--mjf-member-btn-bg, transparent);
color: var(--mjf-member-btn-color, #111);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
padding: 12px 24px;
transition: background .2s, color .2s;
font-family: 'Inter', sans-serif;
white-space: nowrap;
cursor: pointer;
position: relative;
overflow: hidden;
}
.mjf-member__btn > span:first-child {
position: relative;
z-index: 1;
pointer-events: none;
}
.mjf-member__btn:hover {
background: var(--mjf-member-btn-hover-bg, #111);
color: var(--mjf-member-btn-hover-color, #fff);
}
.mjf-bottom {
background: var(--mjf-bottom-bg, #000);
color: var(--mjf-bottom-color, #fff);
padding: var(--mjf-bottom-pad, 18px) var(--mjf-pad-x, 4%);
}
.mjf-bottom__inner {
max-width: var(--mjf-max-width, 1600px);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-size: var(--mjf-bottom-size, 0.78rem);
}
.mjf-country {
display: inline-flex;
align-items: center;
gap: 6px;
color: #fff;
}
.mjf-bottom__left {
display: inline-flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.mjf-bottom__center {
display: flex;
align-items: center;
gap: 10px;
}
.mjf-bottom__center a {
color: #fff;
text-decoration: none;
}
.mjf-bottom__center a:hover {
text-decoration: underline;
}
.mjf-bottom__sep { color: #555; }
.mjf-bottom__right {
display: flex;
align-items: center;
gap: 16px;
}
.mjf-copy {
color: #fff;
font-size: 0.78rem;
}
.mjf-bottom__right a {
color: #fff;
display: inline-flex;
}
.mjf-bottom__right a:hover {
opacity: 0.7;
}
@media (max-width: 999px) {
.mjf-main__inner {
grid-template-columns: repeat(2, 1fr);
gap: 36px 20px;
}
}
@media (max-width: 599px) {
.mjf-newsletter {
padding: 22px 18px;
}
.mjf-newsletter__inner {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.mjf-newsletter__title {
font-size: 1.16rem;
margin-bottom: 2px;
}
.mjf-newsletter__desc {
font-size: 0.78rem;
line-height: 1.45;
}
.mjf-newsletter__form { min-width: 100%; width: 100%; }
.mjf-newsletter__form {
flex: 0 0 auto;
height: 44px !important;
min-height: 0 !important;
max-height: 44px;
}
.mjf-newsletter__form input { padding: 10px 0; }
.mjf-main {
padding-top: 34px;
padding-bottom: 28px;
}
.mjf-main__inner { grid-template-columns: 1fr; }
.mjf-bottom__inner {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.mjf-bottom__left {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.mjf-member__inner { flex-direction: column; align-items: flex-start; }
}
/* END_SECTION:mejuri-footer */
/* START_SECTION:mejuri-header (INDEX:65) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');
.mj-header {
width: 100%;
background: var(--mjh-bg, #ffffff);
border-bottom: 1px solid var(--mjh-border, #ececea);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
color: var(--mjh-text, #1d1d1b);
font-weight: 400;
z-index: 100;
}
.mj-sticky { position: sticky; top: 0; }
.mj-hd-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--mjh-pad-y, 18px) var(--mjh-pad-x, 32px);
max-width: var(--mjh-max-width, 1800px);
margin: 0 auto;
gap: var(--mjh-gap, 24px);
}
/* LEFT side: logo + nav */
.mj-hd-left { display: flex; align-items: center; gap: 32px; flex: 1; }
.mj-logo { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.mj-logo-text { font-size: var(--mjh-logo-size, 1.25rem); font-weight: var(--mjh-logo-weight, 300); letter-spacing: var(--mjh-logo-spacing, 0.12em); text-transform: uppercase; }
.mj-logo img { display: block; max-height: 32px; width: auto; }
.mj-nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: var(--mjh-nav-gap, 24px);
}
.mj-nav-item { position: relative; }
.mj-nav-item > a {
color: inherit;
text-decoration: none;
font-size: var(--mjh-nav-size, 0.72rem);
letter-spacing: var(--mjh-nav-spacing, 0.14em);
text-transform: uppercase;
font-weight: 400;
padding: 18px 0;
display: inline-block;
transition: opacity 0.2s ease;
}
.mj-nav-item > a:hover { opacity: 0.6; }
.mj-submenu {
position: absolute;
top: 100%;
left: 0;
background: var(--mjh-submenu-bg, #fff);
border: 1px solid rgba(29, 29, 27, 0.1);
min-width: 260px;
padding: 12px;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: 30;
box-shadow: 0 18px 48px rgba(29, 29, 27, 0.11);
}
.mj-nav-item.has-sub:hover .mj-submenu,
.mj-nav-item.has-sub:focus-within .mj-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mj-submenu ul { display: block; padding: 0; }
.mj-submenu li { display: block; }
.mj-submenu a {
display: flex;
align-items: center;
min-height: 38px;
padding: 10px 18px;
font-size: 0.72rem;
letter-spacing: 0.105em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
white-space: nowrap;
line-height: 1.25;
border-radius: 2px;
}
.mj-submenu a:hover,
.mj-submenu a:focus-visible { background: var(--mjh-submenu-hover-bg, #f7f7f5); outline: none; }
.mj-submenu--shop {
min-width: 270px;
}
.mj-submenu--shop .has-subgroup {
position: relative;
}
.mj-submenu--shop .has-subgroup > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.mj-submenu--shop .has-subgroup > a::after {
content: "";
width: 7px;
height: 7px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(45deg);
opacity: 0.7;
}
.mj-submenu--shop .mj-submenu-nested {
position: absolute;
top: -10px;
left: calc(100% + 8px);
min-width: 236px;
margin-top: 0 !important;
padding: 12px;
border: 1px solid rgba(29, 29, 27, 0.1);
background: var(--mjh-submenu-bg, #fff);
opacity: 0;
visibility: hidden;
transform: translateX(8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
box-shadow: 0 18px 48px rgba(29, 29, 27, 0.11);
}
.mj-submenu--shop .has-subgroup:hover .mj-submenu-nested,
.mj-submenu--shop .has-subgroup:focus-within .mj-submenu-nested {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.mj-submenu--mega {
min-width: 720px;
padding: 22px 24px;
}
.mj-submenu--mega > ul {
display: grid;
grid-template-columns: repeat(5, minmax(110px, 1fr));
gap: 18px;
}
.mj-submenu--mega .has-subgroup > a {
padding: 0 0 12px;
font-weight: 500;
border-bottom: 1px solid var(--mjh-border, #ececea);
}
.mj-submenu--mega .has-subgroup > a:hover { background: transparent; opacity: 0.65; }
.mj-submenu-nested {
margin-top: 10px !important;
}
.mj-submenu-nested a {
padding: 10px 16px;
font-size: 0.68rem;
letter-spacing: 0.08em;
}
.mj-submenu-nested a:hover { background: var(--mjh-submenu-hover-bg, #f7f7f5); opacity: 1; }
.mj-burger {
display: none;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid var(--mjh-border, #ececea);
color: var(--mjh-text, #1d1d1b);
width: 42px;
height: 42px;
flex-direction: column;
gap: 5px;
padding: 0 10px;
cursor: pointer;
flex: 0 0 42px;
position: relative;
z-index: 2;
}
.mj-burger span {
height: 1px;
width: 20px;
background: currentColor;
display: block;
flex: 0 0 auto;
}
/* RIGHT side: search + actions */
.mj-hd-right { display: flex; align-items: center; gap: 22px; }
.mj-search {
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid #d4d4d2;
padding: 4px 0;
min-width: 200px;
transition: border-color 0.2s ease;
}
.mj-search:focus-within { border-color: #1d1d1b; }
.mj-search-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
.mj-search input {
border: none;
outline: none;
background: transparent;
width: 100%;
font: inherit;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #1d1d1b;
padding: 4px 0;
}
.mj-search input::placeholder { color: #1d1d1b; opacity: 1; letter-spacing: 0.14em; }
.mj-action {
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 400;
position: relative;
flex: 0 0 auto;
}
.mj-action:hover { opacity: 0.6; }
.mj-action svg { width: var(--mjh-action-size, 18px); height: var(--mjh-action-size, 18px); display: block; flex: 0 0 auto; }
.mj-account {
width: 40px;
height: 40px;
justify-content: center;
overflow: hidden;
}
.mj-stores span {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mj-bag-count {
position: absolute;
top: -4px;
right: -8px;
background: var(--mjh-cart-badge-bg, #1d1d1b);
color: var(--mjh-cart-badge-color, #fff);
font-size: 0.6rem;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0;
font-weight: 500;
}
/* Mobile drawer */
.mj-drawer {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
z-index: 1000;
}
.mj-drawer.open { opacity: 1; visibility: visible; }
body.mj-menu-open { overflow: hidden; }
.mj-drawer-inner {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 80%; max-width: 360px;
background: #fff;
padding: 32px 24px 42px;
transform: translateX(-100%);
transition: transform 0.3s ease;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.mj-drawer.open .mj-drawer-inner { transform: translateX(0); }
.mj-drawer-close {
background: none; border: none;
font-size: 1.6rem;
cursor: pointer;
margin-bottom: 24px;
}
.mj-drawer-menu,
.mj-drawer-submenu {
list-style: none;
}
.mj-drawer-menu { padding: 0; margin: 0; }
.mj-drawer-menu-item { border-bottom: 1px solid #ececea; }
.mj-drawer-menu-link {
display: block;
padding: 14px 0;
color: #1d1d1b;
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.mj-drawer-submenu {
margin: -4px 0 12px;
padding: 0 0 0 14px;
}
.mj-drawer-submenu .mj-drawer-menu-item { border-bottom: none; }
.mj-drawer-submenu .mj-drawer-menu-link {
padding: 8px 0;
font-size: 0.76rem;
letter-spacing: 0.1em;
color: #555;
}
.mj-drawer-submenu .mj-drawer-submenu {
margin: 0 0 8px;
padding-left: 14px;
}
.mj-drawer-submenu .mj-drawer-submenu .mj-drawer-menu-link {
font-size: 0.72rem;
color: #777;
text-transform: none;
letter-spacing: 0.02em;
}
.mj-drawer-submenu .mj-drawer-submenu .mj-drawer-submenu {
border-left: 1px solid #ececea;
margin-left: 2px;
}
@media (max-width: 1280px) {
.mj-stores span { display: none; }
.mj-search { min-width: 140px; }
.mj-nav ul { gap: 18px; }
.mj-nav-item > a { font-size: 0.68rem; }
}
@media (max-width: 1024px) {
.mj-nav { display: none; }
.mj-burger { display: flex; }
.mj-hd-left { gap: 14px; flex: 1 1 auto; min-width: 0; }
.mj-search { min-width: 0; max-width: 160px; }
}
@media (max-width: 640px) {
.mj-hd-inner { padding: 14px 18px; gap: 12px; }
.mj-hd-left { gap: 12px; }
.mj-burger { width: 40px; height: 40px; flex-basis: 40px; }
.mj-hd-right { gap: 8px; }
.mj-search {
display: flex;
position: relative;
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
justify-content: center;
border: 1px solid var(--mjh-border, #ececea);
}
.mj-search:focus-within {
width: min(44vw, 164px);
justify-content: flex-start;
padding: 0 10px;
}
.mj-search input {
position: absolute;
width: 1px;
opacity: 0;
pointer-events: none;
}
.mj-search:focus-within input {
position: static;
width: 100%;
opacity: 1;
pointer-events: auto;
}
.mj-stores { display: none; }
.mj-account { display: inline-flex; width: 40px; height: 40px; border: 1px solid var(--mjh-border, #ececea); }
.mj-logo-text { font-size: 1.05rem; }
}
/* ============================================================
GLOBAL MEJURI THEME OVERRIDES — product cards, grids, typography
Applies to: collection pages, product recommendations, search,
featured-product blocks. Anywhere using .
============================================================ */
.mj-hd-apps {
display: flex;
align-items: center;
gap: 6px;
min-height: 42px;
flex: 0 0 auto;
}
.mj-hd-apps:empty {
display: none;
}
.mj-hd-apps .eat-languageSelector {
position: relative !important;
inset: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
top: auto !important;
z-index: 1 !important;
flex: 0 0 auto;
}
.mj-hd-apps .eat-languageSelector {
width: 42px !important;
height: 42px !important;
}
.mj-app-label-hidden {
display: none !important;
}
.mj-smile-launcher-shell {
position: fixed;
right: 16px;
bottom: calc(96px + env(safe-area-inset-bottom));
width: 125px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
cursor: pointer;
z-index: 2147483646;
padding: 0;
overflow: hidden;
}
.mj-smile-launcher-visual {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
height: 100%;
border-radius: inherit;
background: #111;
color: #fff;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
pointer-events: none;
z-index: 1;
}
.mj-smile-launcher-visual svg {
width: 22px;
height: 22px;
fill: currentColor;
display: block;
}
.mj-smile-launcher-shell:hover .mj-smile-launcher-visual,
.mj-smile-launcher-shell:focus-within .mj-smile-launcher-visual {
background: #000;
}
body #smile-ui-lite-launcher-frame-container.mj-smile-native-overlay {
display: block !important;
position: fixed !important;
inset: auto !important;
left: auto !important;
top: auto !important;
right: 16px !important;
bottom: calc(96px + env(safe-area-inset-bottom)) !important;
width: 125px !important;
min-width: 125px !important;
height: 65px !important;
min-height: 65px !important;
opacity: 0.01 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
z-index: 2147483647 !important;
overflow: hidden !important;
}
body .smile-launcher-frame-container.mj-smile-native-overlay {
display: block !important;
visibility: visible !important;
opacity: 0.01 !important;
position: fixed !important;
inset: auto !important;
left: auto !important;
top: auto !important;
right: 16px !important;
bottom: calc(96px + env(safe-area-inset-bottom)) !important;
width: 125px !important;
min-width: 125px !important;
height: 65px !important;
min-height: 65px !important;
pointer-events: auto !important;
overflow: hidden !important;
z-index: 2147483647 !important;
}
body #smile-ui-lite-launcher-frame-container.mj-smile-native-overlay iframe,
body .smile-launcher-frame-container.mj-smile-native-overlay iframe {
display: block !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
min-width: 100% !important;
height: 100% !important;
min-height: 100% !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
body #smile-ui-lite-launcher-frame-container.mj-smile-native-suppressed,
body .smile-launcher-frame-container.mj-smile-native-suppressed {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important;
min-width: 0 !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
body #smile-ui-lite-launcher-frame-container.mj-smile-native-suppressed iframe,
body .smile-launcher-frame-container.mj-smile-native-suppressed iframe {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
.mj-smile-panel-open body #ShopifyChat,
.mj-smile-panel-open body inbox-online-store-chat#ShopifyChat {
display: none !important;
}
body .eat-languageSelector {
display: none !important;
}
body .eat-languageSelector.mj-language-in-footer {
position: absolute !important;
inset: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
top: 0 !important;
z-index: 2 !important;
display: inline-flex !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
box-shadow: none !important;
}
@media (max-width: 1024px) {
.mj-hd-apps {
display: none;
}
body .ea-buttonLabel {
display: none !important;
}
body #ShopifyChat,
body inbox-online-store-chat#ShopifyChat {
position: fixed !important;
left: auto !important;
top: auto !important;
right: 16px !important;
bottom: calc(16px + env(safe-area-inset-bottom)) !important;
width: auto !important;
max-width: calc(100vw - 32px) !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
border-radius: 999px !important;
}
.mj-smile-launcher-shell {
left: calc(100vw - 81px) !important;
right: auto !important;
bottom: calc(96px + env(safe-area-inset-bottom)) !important;
width: 65px;
height: 65px;
border-radius: 50%;
}
body #smile-ui-lite-launcher-frame-container.mj-smile-native-overlay,
body .smile-launcher-frame-container.mj-smile-native-overlay {
left: calc(100vw - 81px) !important;
right: auto !important;
bottom: calc(96px + env(safe-area-inset-bottom)) !important;
width: 65px !important;
min-width: 65px !important;
height: 65px !important;
min-height: 65px !important;
border-radius: 50% !important;
}
.mj-smile-launcher-visual {
gap: 0 !important;
}
.mj-smile-launcher-shell .mj-smile-launcher-visual > span,
.mj-smile-launcher-shell--mobile-icon .mj-smile-launcher-visual > span {
display: none !important;
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.mj-smile-launcher-visual svg {
width: 29px;
height: 29px;
}
}
@media (min-width: 1025px) and (max-width: 1500px) {
.mj-hd-inner {
display: grid;
grid-template-columns: minmax(150px, 1fr) auto;
grid-template-areas:
"brand actions"
"nav nav";
align-items: center;
column-gap: 18px;
row-gap: 9px;
padding: 14px 22px 13px;
}
.mj-hd-left {
display: contents;
}
.mj-logo {
grid-area: brand;
justify-self: start;
}
.mj-nav {
grid-area: nav;
justify-self: center;
width: 100%;
}
.mj-nav ul {
justify-content: center;
flex-wrap: nowrap;
gap: clamp(12px, 1.15vw, 18px);
}
.mj-nav-item > a {
padding: 8px 0 10px;
line-height: 1.16;
text-align: center;
}
.mj-hd-right {
grid-area: actions;
justify-self: end;
gap: 12px;
min-width: 0;
flex-wrap: nowrap;
}
.mj-search {
flex: 0 1 176px;
width: clamp(128px, 15vw, 176px);
min-width: 0;
max-width: 176px;
}
.mj-hd-apps {
flex: 0 0 auto;
}
}
/* Product card unified Mejuri style */
.resource-card {
position: relative;
background: #fbfaf7;
margin: 0;
padding: 0;
transition: background .2s;
}
.resource-card:hover {
background: #f4f2ec;
}
.resource-card__media {
--resource-card-aspect-ratio: 1 / 1 !important;
background: #f5f4ef;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
.resource-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity .35s ease;
}
.resource-card__image--secondary {
position: absolute;
inset: 0;
opacity: 0;
}
.resource-card:hover .resource-card__image--secondary {
opacity: 1;
}
.resource-card__content {
padding: 14px 16px 18px;
text-align: left;
}
.resource-card__title,
.resource-card__title.paragraph {
font-family: 'Inter', sans-serif !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.07em !important;
color: #1d1d1b !important;
margin: 0 0 6px !important;
line-height: 1.4 !important;
}
.resource-card .price,
.resource-card .price-item,
.resource-card .price__regular .price,
.resource-card .price__sale .price {
font-family: 'Inter', sans-serif !important;
font-size: 0.82rem !important;
font-weight: 400 !important;
color: #333 !important;
letter-spacing: 0.02em !important;
}
/* BLACK GRID LINES between product cards — collection pages */
.mc-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 0 !important;
border-top: 1px solid #111;
border-left: 1px solid #111;
background: #111;
}
.mc-grid > * {
border-right: 1px solid #111;
border-bottom: 1px solid #111;
margin: 0;
}
@media (max-width: 999px) {
.mc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 699px) {
.mc-grid { grid-template-columns: repeat(2, 1fr); }
}
/* BLACK GRID LINES — product recommendations / You May Also Like */
.product-recommendations,
product-recommendations {
--grid-line-color: #111;
}
.product-recommendations__list,
.product-recommendations [class*="product-list"],
.product-recommendations slideshow-slides,
.product-list,
product-list {
gap: 0 !important;
border-top: 1px solid #111;
border-left: 1px solid #111;
}
.product-recommendations__list > *,
.product-recommendations [class*="product-list"] > *,
.product-list > *,
.product-list-item,
product-list > * {
border-right: 1px solid #111;
border-bottom: 1px solid #111;
margin: 0 !important;
}
/* Typography tightening for consistency across theme */
.resource-card__content .price__sale .price--compare {
text-decoration: line-through;
color: #999 !important;
margin-right: 6px;
}
/* ============================================================
JS-LOADED PRODUCT CARDS — custom element
Used in: product-recommendations (You May Also Like),
featured-product blocks, product-grid blocks across the theme.
============================================================ */
product-card.product-card {
background: #fbfaf7 !important;
display: block;
position: relative;
transition: background .2s;
}
product-card.product-card:hover {
background: #f4f2ec !important;
}
/* Square image area, unified gray background */
product-card .card-gallery,
product-card .product-media-container,
product-card .product-media-container--image {
background: #f5f4ef !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden;
}
product-card .product-media {
background: #f5f4ef !important;
width: 100%;
height: 100%;
}
product-card .product-media__image {
width: 100%;
height: 100%;
object-fit: cover !important;
}
/* Force product title to uppercase Mejuri style */
product-card .text-block p[role="heading"],
product-card p[role="heading"],
product-card .product-grid-view-zoom-out--details h3 {
font-family: 'Inter', -apple-system, sans-serif !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.07em !important;
color: #1d1d1b !important;
line-height: 1.4 !important;
margin: 0 !important;
}
/* Price standardised */
product-card product-price,
product-card .price,
product-card .price__regular .price,
product-card .price__sale .price,
product-card .price-item--regular,
product-card .price-item--sale {
font-family: 'Inter', sans-serif !important;
font-size: 0.82rem !important;
font-weight: 400 !important;
color: #333 !important;
letter-spacing: 0.02em !important;
}
/* BLACK GRID LINES — borders on each card */
.resource-list .resource-list__item {
border-right: 1px solid #111;
margin: 0;
}
/* Grid layout: full border box with internal cross-hair lines */
.resource-list.resource-list--grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
border-top: 1px solid #111;
border-bottom: 1px solid #111;
border-left: 1px solid #111;
}
@media (max-width: 999px) {
.resource-list.resource-list--grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 699px) {
.resource-list.resource-list--grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.resource-list.resource-list--grid .resource-list__item {
border-right: 1px solid #111;
border-bottom: 1px solid #111;
}
/* Carousel layout: horizontal scroll with vertical dividers */
.resource-list.resource-list__carousel {
border-top: 1px solid #111;
border-bottom: 1px solid #111;
gap: 0 !important;
}
.resource-list.resource-list__carousel .resource-list__slide {
border-right: 1px solid #111;
}
.resource-list.resource-list__carousel .resource-list__slide:first-child {
border-left: 1px solid #111;
}
.resource-list.resource-list__carousel .resource-list__item {
border-right: none;
}
/* Skeleton placeholder also styled to match */
.product-recommendations__skeleton-item {
background: #f5f4ef !important;
border-right: 1px solid #111;
aspect-ratio: 1 / 1.3;
}
/* Remove unwanted inner padding/borders from inner product-card content */
product-card .product-card__content.border-style {
border: none !important;
}
product-card .product-card__content {
padding: 0 !important;
background: transparent !important;
}
product-card .text-block {
padding: 14px 16px 4px !important;
}
product-card product-price.text-block {
padding: 0 16px 16px !important;
}
/* END_SECTION:mejuri-header */
/* START_SECTION:mejuri-product-page (INDEX:71) */
/* ===== MEJURI PRODUCT PAGE ===== */
.mjpd-page {
background: var(--mjpd-page-bg, #fff);
width: 100%;
max-width: 100%;
min-width: 0;
}
.mjpd-page,
.mjpd-page * {
box-sizing: border-box;
}
/* Layout: gallery + info side by side */
.mjpd-layout {
display: grid;
grid-template-columns: 1fr;
align-items: start;
width: 100%;
max-width: 100%;
min-width: 0;
}
@media (min-width: 990px) {
.mjpd-page--55_45 .mjpd-layout { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
.mjpd-page--60_40 .mjpd-layout { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
.mjpd-page--50_50 .mjpd-layout { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); }
.mjpd-page--65_35 .mjpd-layout { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); }
.mjpd-page--gallery-right .mjpd-gallery { order: 2; }
.mjpd-page--gallery-right .mjpd-info { order: 1; }
}
/* ===== GALLERY ===== */
.mjpd-gallery {
display: grid;
grid-template-columns: repeat(var(--mjpd-gallery-cols, 2), minmax(0, 1fr));
gap: var(--mjpd-gallery-gap, 8px);
background: var(--mjpd-gallery-bg, #f8f8f8);
width: 100%;
max-width: 100%;
min-width: 0;
}
.mjpd-gallery__item { width: 100%; line-height: 0; overflow: hidden; }
.mjpd-gallery__img { width: 100%; height: auto; display: block; object-fit: cover; }
@media (max-width: 989px) {
.mjpd-gallery {
display: flex;
flex-direction: row;
gap: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.mjpd-gallery::-webkit-scrollbar { display: none; }
.mjpd-gallery__item { flex: 0 0 100%; scroll-snap-align: start; }
.mjpd-gallery__img { aspect-ratio: 1 / 1; object-fit: cover; height: auto; }
}
/* ===== INFO PANEL ===== */
.mjpd-info {
padding: var(--mjpd-info-pad-top, 24px) var(--mjpd-info-pad-x, 28px) var(--mjpd-info-pad-bottom, 48px);
background: var(--mjpd-info-bg, #fff);
width: 100%;
max-width: 100%;
min-width: 0;
}
@media (min-width: 990px) {
.mjpd-info--sticky {
position: static;
top: auto;
max-height: none;
overflow: visible;
scrollbar-width: auto;
}
.mjpd-info--sticky::-webkit-scrollbar { display: none; }
}
/* ===== BREADCRUMB ===== */
.mjpd-breadcrumb {
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--mjpd-breadcrumb-color, #888);
margin-bottom: 18px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.mjpd-bc__link { color: var(--mjpd-breadcrumb-color, #888); text-decoration: none; }
.mjpd-bc__link:hover { color: var(--mjpd-breadcrumb-current, #000); text-decoration: underline; }
.mjpd-bc__sep { color: #bbb; }
.mjpd-bc__current { color: var(--mjpd-breadcrumb-current, #000); }
/* ===== TITLE + RATING ===== */
.mjpd-header { margin-bottom: 10px; }
.mjpd-title {
font-family: var(--font-heading--family, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: var(--mjpd-title-size, 1rem);
font-weight: var(--mjpd-title-weight, 400);
letter-spacing: var(--mjpd-title-letter-spacing, 0.08em);
text-transform: var(--mjpd-title-transform, uppercase);
color: var(--mjpd-title-color, #111);
margin: 0 0 8px 0;
line-height: 1.4;
}
.mjpd-rating {
display: inline-flex;
align-items: center;
gap: 5px;
text-decoration: none;
color: var(--mjpd-rating-color, #68675e);
font-size: 0.78rem;
}
.mjpd-stars { display: flex; gap: 2px; color: var(--mjpd-rating-color, #68675e); }
.mjpd-rating__text { color: var(--mjpd-rating-color, #68675e); }
.mjpd-judgeme-badge { display: inline-flex; align-items: center; }
.mjpd-judgeme-badge .jdgm-star,
.mjpd-judgeme-badge .jdgm-prev-badge__text {
color: var(--mjpd-rating-color, #68675e) !important;
}
/* ===== PRICE ===== */
.mjpd-price-wrap {
display: flex;
align-items: baseline;
gap: 8px;
margin: 12px 0 20px;
}
.mjpd-price {
font-family: var(--font-body--family, sans-serif);
font-size: var(--mjpd-price-size, 0.95rem);
color: var(--mjpd-price-color, #111);
}
.mjpd-price--sale { color: var(--mjpd-price-sale-color, #c0392b); }
.mjpd-price--compare {
color: var(--mjpd-price-compare-color, #999);
font-size: 0.85rem;
text-decoration: line-through;
}
/* ===== VARIANT OPTIONS ===== */
.mjpd-options { margin-bottom: 20px; }
.mjpd-option { margin-bottom: 16px; }
.mjpd-option__label {
font-size: 0.8rem;
letter-spacing: 0.04em;
color: var(--mjpd-option-label-color, #555);
margin: 0 0 8px;
}
.mjpd-option__val { font-weight: 500; color: #111; }
.mjpd-option__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mjpd-opt-btn {
border: 1px solid var(--mjpd-option-border, #d0d0d0);
background: #fff;
color: #111;
font-size: 0.8rem;
padding: 7px 14px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
letter-spacing: 0.02em;
font-family: var(--font-body--family, sans-serif);
}
.mjpd-opt-btn:hover { border-color: #111; }
.mjpd-opt-btn.is-active {
border-color: var(--mjpd-option-active-bg, #111);
background: var(--mjpd-option-active-bg, #111);
color: var(--mjpd-option-active-color, #fff);
}
.mjpd-opt-btn[disabled] {
color: #bbb;
border-color: #eee;
cursor: not-allowed;
text-decoration: line-through;
}
/* ===== BRACELET SIZE + GUIDE ENTRY ===== */
.mjpd-size-module {
margin: 0 0 18px;
padding: 14px;
border: 1px solid #e5e1d8;
background: #fafaf7;
}
.mjpd-guide-actions {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 16px;
}
.mjpd-guide-action {
min-height: 64px;
border: 1px solid #d9d1c0;
background: #fff;
color: #171717;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
text-align: left;
cursor: pointer;
font-family: var(--font-body--family, sans-serif);
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.mjpd-guide-action:hover {
border-color: #171717;
background: #f4f1ec;
}
.mjpd-guide-action--primary {
background: #171717;
border-color: #171717;
color: #fff;
}
.mjpd-guide-action--primary:hover {
background: #2b2a26;
color: #fff;
}
.mjpd-guide-action span {
display: grid;
gap: 4px;
min-width: 0;
font-size: 0.78rem;
line-height: 1.2;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mjpd-guide-action small {
display: block;
color: inherit;
opacity: 0.7;
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: none;
}
.mjpd-guide-action svg { flex: 0 0 auto; }
.mjpd-size-label {
display: block;
margin: 0 0 8px;
color: #171717;
font-size: 0.76rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mjpd-size-entry {
display: grid;
grid-template-columns: minmax(0, 1fr) 88px;
border: 1px solid #d9d1c0;
background: #fff;
}
.mjpd-size-input,
.mjpd-size-unit {
height: 48px;
border: 0;
background: transparent;
color: #171717;
font-family: var(--font-body--family, sans-serif);
font-size: 0.92rem;
}
.mjpd-size-input {
min-width: 0;
padding: 0 14px;
border-right: 1px solid #e5e1d8;
}
.mjpd-size-unit {
padding: 0 12px;
cursor: pointer;
}
.mjpd-size-input:focus,
.mjpd-size-unit:focus {
outline: 1px solid #171717;
outline-offset: -1px;
}
.mjpd-size-input.is-error {
background: #fff8f5;
}
.mjpd-size-help,
.mjpd-size-error {
margin: 8px 0 0;
font-size: 0.76rem;
line-height: 1.5;
}
.mjpd-size-help { color: #68675e; }
.mjpd-size-error { color: #9f2f21; }
@media (min-width: 480px) {
.mjpd-guide-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ===== ADD TO CART ===== */
.mjpd-atc {
width: 100%;
background: var(--mjpd-atc-bg, #111);
color: var(--mjpd-atc-color, #fff);
border: none;
font-size: var(--mjpd-atc-font-size, 0.8rem);
font-family: var(--font-body--family, sans-serif);
letter-spacing: var(--mjpd-atc-letter-spacing, 0.1em);
text-transform: uppercase;
padding: 0 24px;
height: var(--mjpd-atc-height, 52px);
cursor: pointer;
transition: background 0.2s, opacity 0.2s;
margin-bottom: 10px;
}
.mjpd-atc:hover:not([disabled]) { background: var(--mjpd-atc-hover-bg, #333); }
.mjpd-atc[disabled] { background: #999; cursor: not-allowed; }
.mjpd-custom-own {
box-sizing: border-box;
width: 100%;
min-height: var(--mjpd-atc-height, 52px);
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 24px;
padding: 0 24px;
border: 1px solid #171717;
background: transparent;
color: #171717;
font-family: var(--font-body--family, sans-serif);
font-size: var(--mjpd-atc-font-size, 0.8rem);
font-weight: 600;
letter-spacing: var(--mjpd-atc-letter-spacing, 0.1em);
line-height: 1.2;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mjpd-custom-own:hover,
.mjpd-custom-own:focus-visible {
background: #171717;
border-color: #171717;
color: #fff;
}
.mjpd-goodapi-impact {
margin: 8px 0 12px;
}
.mjpd-app-impact {
margin: 8px 0 14px;
}
.mjpd-app-impact > * + * {
margin-top: 8px;
}
/* ===== BENEFIT ICONS ===== */
.mjpd-benefits {
list-style: none;
margin: 0 0 22px;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
}
.mjpd-benefit {
display: flex;
align-items: flex-start;
gap: 11px;
min-width: 0;
padding: 12px 0;
color: var(--mjpd-trust-color, #333);
border-bottom: 1px solid rgba(229, 225, 216, 0.8);
}
.mjpd-benefit--gift {
grid-column: 1 / -1;
position: relative;
display: block;
text-align: center;
padding: 18px 16px 20px;
border: 1px solid #e5e1d8;
background: #fafaf7;
}
.mjpd-benefit--gift svg {
position: absolute;
top: 19px;
left: 50%;
margin: 0;
transform: translateX(-80px);
}
.mjpd-benefit--gift span {
display: grid;
justify-items: center;
max-width: 420px;
margin: 0 auto;
}
.mjpd-benefit svg {
flex: 0 0 auto;
color: #171717;
opacity: 0.82;
}
.mjpd-benefit span {
display: grid;
gap: 4px;
min-width: 0;
}
.mjpd-benefit strong {
color: #171717;
font-size: 0.82rem;
font-weight: 500;
line-height: 1.35;
}
.mjpd-benefit small {
color: #68675e;
font-size: 0.76rem;
line-height: 1.45;
}
/* ===== DESCRIPTION ===== */
.mjpd-desc {
font-size: var(--mjpd-desc-size, 0.875rem);
line-height: 1.7;
color: var(--mjpd-desc-color, #444);
margin-bottom: 28px;
}
.mjpd-desc p { margin: 0 0 10px; }
.mjpd-desc p:last-child { margin: 0; }
/* ===== PRODUCT INFO TABS ===== */
.mjpd-info-tabs {
border-top: 1px solid var(--mjpd-accordion-border, #e5e5e5);
margin: 0 0 28px;
}
.mjpd-info-tab,
.mjpd-info-link {
border-bottom: 1px solid var(--mjpd-accordion-border, #e5e5e5);
}
.mjpd-info-tab__summary,
.mjpd-info-link {
width: 100%;
min-height: 54px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 17px 0;
background: transparent;
border-left: 0;
border-right: 0;
border-top: 0;
color: var(--mjpd-accordion-color, #111);
cursor: pointer;
font-family: var(--font-heading--family, sans-serif);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-align: left;
text-transform: uppercase;
list-style: none;
}
.mjpd-info-tab__summary::-webkit-details-marker { display: none; }
.mjpd-info-tab__chevron,
.mjpd-info-link svg {
flex: 0 0 auto;
transition: transform 0.2s ease;
}
.mjpd-info-tab[open] .mjpd-info-tab__chevron { transform: rotate(180deg); }
.mjpd-info-tab__body {
padding: 0 0 20px;
}
.mjpd-detail-block {
padding: 16px 0;
border-top: 1px solid #f0ede5;
}
.mjpd-detail-block:first-of-type { border-top: 0; }
.mjpd-detail-block h4 {
margin: 0 0 8px;
color: #171717;
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mjpd-detail-block__content {
color: var(--mjpd-accordion-body-color, #555);
font-size: 0.86rem;
line-height: 1.7;
}
.mjpd-detail-block__content p,
.mjpd-detail-block__content ul,
.mjpd-detail-block__content ol { margin-top: 0; }
.mjpd-product-details {
border: 1px solid #e5e1d8;
background: #fbfaf7;
}
.mjpd-detail-list {
margin: 0;
}
.mjpd-detail-list > div {
display: grid;
grid-template-columns: minmax(96px, 0.28fr) minmax(0, 1fr);
gap: 18px;
padding: 14px 16px;
border-top: 1px solid #ebe6dc;
}
.mjpd-detail-list > div:first-child {
border-top: 0;
}
.mjpd-detail-list dt {
margin: 0;
color: #171717;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.45;
text-transform: uppercase;
}
.mjpd-detail-list dd {
margin: 0;
color: #4d4b45;
font-size: 0.88rem;
line-height: 1.65;
}
.mjpd-stone-size-ref {
margin: 18px 0 0;
border: 1px solid #e5e1d8;
background: #fafaf7;
overflow: hidden;
}
.mjpd-stone-size-ref img {
display: block;
width: 100%;
height: auto;
}
.mjpd-stone-size-ref figcaption {
padding: 11px 13px;
border-top: 1px solid #e5e1d8;
color: #68675e;
font-size: 0.76rem;
line-height: 1.45;
}
.mjpd-stone-subtabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mjpd-stone-subtabs button {
min-height: 38px;
border: 1px solid #d9d1c0;
background: #fafaf7;
color: #171717;
padding: 0 13px;
font: inherit;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
}
.mjpd-stone-subtabs button:hover {
border-color: #171717;
background: #fff;
}
/* ===== BRACELET GUIDE DRAWER ===== */
body.mjpd-guide-open { overflow: hidden; }
.mjpd-guide-drawer {
position: fixed;
inset: 0;
z-index: 2147483000;
pointer-events: none;
visibility: hidden;
}
.mjpd-guide-drawer[aria-hidden="false"] {
pointer-events: auto;
visibility: visible;
}
.mjpd-guide-backdrop {
position: absolute;
inset: 0;
border: 0;
padding: 0;
background: rgba(18, 18, 16, 0.42);
opacity: 0;
cursor: pointer;
transition: opacity 0.24s ease;
}
.mjpd-guide-drawer[aria-hidden="false"] .mjpd-guide-backdrop { opacity: 1; }
.mjpd-guide-panel {
position: absolute;
top: 0;
right: 0;
width: min(560px, calc(100vw - 24px));
height: 100%;
background: #fff;
color: #171717;
box-shadow: -28px 0 60px rgba(0, 0, 0, 0.16);
transform: translateX(100%);
transition: transform 0.28s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}
.mjpd-guide-drawer[aria-hidden="false"] .mjpd-guide-panel { transform: translateX(0); }
.mjpd-guide-head {
flex: 0 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding: 28px 30px 18px;
border-bottom: 1px solid #e5e1d8;
background: #fff;
}
.mjpd-guide-eyebrow,
.mjpd-guide-kicker {
display: block;
color: #9f8d5f;
font-size: 0.66rem;
line-height: 1.2;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.mjpd-guide-title {
margin: 6px 0 0;
color: #171717;
font-family: var(--font-heading--family, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: clamp(1.3rem, 2vw, 1.75rem);
font-weight: 400;
line-height: 1.15;
}
.mjpd-guide-close {
width: 40px;
height: 40px;
border: 1px solid #e5e1d8;
background: #fafaf7;
color: #171717;
display: inline-grid;
place-items: center;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.mjpd-guide-close:hover {
background: #f4f1ec;
border-color: #d9d1c0;
}
.mjpd-guide-tabs {
flex: 0 0 auto;
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border-bottom: 1px solid #e5e1d8;
background: #fafaf7;
cursor: grab;
}
.mjpd-guide-tabs.is-dragging { cursor: grabbing; user-select: none; }
.mjpd-guide-tabs::-webkit-scrollbar { display: none; }
.mjpd-guide-tab {
flex: 0 0 auto;
min-width: 142px;
min-height: 52px;
border: 0;
border-right: 1px solid #e5e1d8;
background: transparent;
color: #68675e;
font-family: var(--font-body--family, sans-serif);
font-size: 0.76rem;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
.mjpd-guide-tab:last-child { border-right: 0; }
.mjpd-guide-tab.is-active {
background: #fff;
color: #171717;
}
.mjpd-guide-tabs-nav {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 16px 10px;
border-bottom: 1px solid #e5e1d8;
background: #fafaf7;
}
.mjpd-guide-tabs-arrow {
width: 26px;
height: 26px;
border: 1px solid #d9d1c0;
background: #fff;
color: #171717;
display: inline-grid;
place-items: center;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.mjpd-guide-tabs-arrow:hover:not([disabled]) {
background: #f4f1ec;
border-color: #c9b88a;
}
.mjpd-guide-tabs-arrow[disabled] {
opacity: 0.38;
cursor: default;
}
.mjpd-guide-tabs-hint {
color: #68675e;
font-family: var(--font-body--family, sans-serif);
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mjpd-guide-scroll {
flex: 1 1 auto;
overflow-y: auto;
padding: 24px 30px 34px;
}
.mjpd-guide-content[hidden] { display: none; }
.mjpd-guide-content {
display: grid;
gap: 22px;
}
.mjpd-guide-size-type-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border: 1px solid #e5e1d8;
}
.mjpd-guide-size-type-tab {
min-height: 44px;
border: 0;
border-right: 1px solid #e5e1d8;
background: #fff;
color: #68675e;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
.mjpd-guide-size-type-tab:last-child { border-right: 0; }
.mjpd-guide-size-type-tab.is-active {
background: #171717;
color: #fff;
}
.mjpd-guide-size-type-panel[hidden] { display: none; }
.mjpd-guide-size-type-panel {
display: grid;
gap: 22px;
}
.mjpd-guide-figure {
margin: 0;
border: 1px solid #e5e1d8;
overflow: hidden;
line-height: 0;
}
.mjpd-guide-figure img {
width: 100%;
height: auto;
display: block;
}
.mjpd-guide-figure--inline {
margin-bottom: 18px;
}
.mjpd-guide-block {
border: 1px solid #e5e1d8;
background: #fff;
padding: 20px;
}
.mjpd-guide-block h3,
.mjpd-guide-calc h3 {
margin: 8px 0 10px;
color: #171717;
font-family: var(--font-heading--family, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: 1.12rem;
font-weight: 400;
line-height: 1.3;
}
.mjpd-guide-block h4,
.mjpd-guide-steps h4,
.mjpd-guide-deepgrid h4 {
margin: 0 0 7px;
color: #171717;
font-size: 0.8rem;
line-height: 1.3;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mjpd-guide-block p,
.mjpd-guide-steps p,
.mjpd-guide-deepgrid p,
.mjpd-guide-calc p {
margin: 0;
color: #5f5f5b;
font-size: 0.86rem;
line-height: 1.65;
}
.mjpd-guide-inline-link {
display: inline-block;
margin-top: 14px;
color: #171717;
border-bottom: 1px solid currentColor;
text-decoration: none;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.mjpd-guide-inline-link:hover {
color: #9f8d5f;
}
.mjpd-guide-formula {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 8px;
align-items: center;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #e5e1d8;
color: #171717;
font-size: 0.72rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.mjpd-guide-formula span {
text-align: center;
min-width: 0;
}
.mjpd-guide-steps,
.mjpd-guide-deepgrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.mjpd-guide-steps article,
.mjpd-guide-deepgrid div {
border: 1px solid #e5e1d8;
background: #fafaf7;
padding: 16px;
}
.mjpd-guide-steps span {
display: block;
margin-bottom: 16px;
color: #9f8d5f;
font-size: 0.68rem;
letter-spacing: 0.12em;
}
.mjpd-guide-calc {
display: grid;
gap: 16px;
border: 1px solid #d9d1c0;
background: #f4f1ec;
padding: 20px;
}
.mjpd-guide-calcbox {
background: #fff;
border: 1px solid #e5e1d8;
padding: 16px;
}
.mjpd-guide-fieldrow {
display: grid;
grid-template-columns: minmax(0, 1fr) 92px;
gap: 10px;
}
.mjpd-guide-fieldrow label {
display: grid;
gap: 7px;
color: #68675e;
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mjpd-guide-fieldrow input,
.mjpd-guide-fieldrow select {
width: 100%;
height: 42px;
border: 1px solid #d9d1c0;
background: #fff;
color: #171717;
padding: 0 12px;
font-family: var(--font-body--family, sans-serif);
}
.mjpd-guide-fit-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 12px 0;
border: 1px solid #d9d1c0;
}
.mjpd-guide-fit-tabs button {
min-height: 38px;
border: 0;
border-right: 1px solid #d9d1c0;
background: #fff;
color: #68675e;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
}
.mjpd-guide-fit-tabs button:last-child { border-right: 0; }
.mjpd-guide-fit-tabs button.is-active {
background: #171717;
color: #fff;
}
.mjpd-guide-length-pills {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin: 12px 0;
}
.mjpd-guide-length-pills button {
min-height: 36px;
border: 1px solid #d9d1c0;
background: #fff;
color: #68675e;
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
}
.mjpd-guide-length-pills button.is-active {
background: #171717;
color: #fff;
border-color: #171717;
}
.mjpd-guide-result {
border-top: 1px solid #e5e1d8;
padding-top: 14px;
}
.mjpd-guide-result span {
display: block;
color: #68675e;
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mjpd-guide-result strong {
display: block;
margin: 5px 0;
color: #171717;
font-size: 1.45rem;
font-weight: 400;
}
.mjpd-guide-tablewrap {
overflow-x: auto;
border: 1px solid #e5e1d8;
}
.mjpd-guide-table {
width: 100%;
min-width: 480px;
border-collapse: collapse;
background: #fff;
}
.mjpd-guide-table th,
.mjpd-guide-table td {
padding: 13px 12px;
border-bottom: 1px solid #e5e1d8;
text-align: left;
vertical-align: top;
color: #5f5f5b;
font-size: 0.78rem;
line-height: 1.45;
}
.mjpd-guide-table th {
color: #171717;
background: #fafaf7;
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mjpd-guide-table tr:last-child td { border-bottom: 0; }
.mjpd-guide-note {
margin-top: 14px;
padding-left: 12px;
border-left: 2px solid #c9b88a;
}
.mjpd-guide-block--warm {
background: #f4f1ec;
border-color: #d9d1c0;
}
.mjpd-guide-content[data-mjpd-remote-url].is-loading [data-mjpd-remote-content] {
opacity: 0.72;
}
.mjpd-guide-import {
display: block;
}
.mjpd-guide-import .mjfc-policy,
.mjpd-guide-import .mjcg-section {
max-width: none;
padding: 0;
background: transparent;
color: #171717;
font-size: 0.88rem;
line-height: 1.7;
}
.mjpd-guide-import .mjcg-header,
.mjpd-guide-import .mjcg-inner,
.mjpd-guide-import .mjcg-editorial,
.mjpd-guide-import .mjcg-matrix,
.mjpd-guide-import .mjcg-cadence {
padding: 0;
max-width: none;
}
.mjpd-guide-import .mjcg-section {
display: grid;
gap: 18px;
}
.mjpd-guide-import .mjcg-header,
.mjpd-guide-import .mjcg-standard,
.mjpd-guide-import .mjcg-split,
.mjpd-guide-import .mjcg-cadence-grid,
.mjpd-guide-import .mjcg-deep-grid,
.mjpd-guide-import .mjfc-grid,
.mjpd-guide-import .mjfc-steps {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.mjpd-guide-import .mjcg-heading,
.mjpd-guide-import .mjfc-policy h2 {
margin: 0 0 10px;
color: #171717;
font-family: var(--font-heading--family, sans-serif);
font-size: 1.24rem;
font-weight: 400;
line-height: 1.3;
}
.mjpd-guide-import .mjcg-intro,
.mjpd-guide-import .mjfc-lead {
margin: 0 0 16px;
color: #4f4e49;
font-size: 0.92rem;
line-height: 1.7;
}
.mjpd-guide-import .mjcg-standard article,
.mjpd-guide-import .mjcg-deep-grid div,
.mjpd-guide-import .mjcg-cadence-grid article,
.mjpd-guide-import .mjfc-card,
.mjpd-guide-import .mjfc-step,
.mjpd-guide-import .mjfc-note {
border: 1px solid #e5e1d8;
background: #fafaf7;
padding: 16px;
}
.mjpd-guide-import .mjcg-image {
margin: 0;
border: 1px solid #e5e1d8;
overflow: hidden;
}
.mjpd-guide-import .mjcg-image img {
width: 100%;
height: auto;
display: block;
}
.mjpd-guide-import h3,
.mjpd-guide-import h4,
.mjpd-guide-import .mjfc-policy h3,
.mjpd-guide-import .mjfc-policy h4 {
color: #171717;
}
.mjpd-guide-import table {
width: 100%;
border-collapse: collapse;
border: 1px solid #e5e1d8;
}
.mjpd-guide-import th,
.mjpd-guide-import td {
padding: 11px 12px;
border-bottom: 1px solid #e5e1d8;
text-align: left;
vertical-align: top;
}
.mjpd-stone-figure img {
aspect-ratio: 4 / 3;
object-fit: cover;
}
.mjpd-stone-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
}
.mjpd-stone-meta div {
border: 1px solid #e5e1d8;
background: #fafaf7;
padding: 12px;
}
.mjpd-stone-meta span {
display: block;
margin-bottom: 5px;
color: #9f8d5f;
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mjpd-stone-meta strong {
display: block;
color: #171717;
font-size: 0.82rem;
font-weight: 500;
line-height: 1.4;
}
@media (max-width: 640px) {
.mjpd-guide-panel { width: 100vw; }
.mjpd-guide-head { padding: 22px 20px 16px; }
.mjpd-guide-tabs-nav { padding: 8px 12px 10px; }
.mjpd-guide-tabs-hint { font-size: 0.62rem; letter-spacing: 0.06em; }
.mjpd-guide-scroll { padding: 20px 18px 28px; }
.mjpd-guide-steps,
.mjpd-guide-deepgrid { grid-template-columns: 1fr; }
.mjpd-guide-size-type-tabs { grid-template-columns: 1fr; }
.mjpd-guide-size-type-tab {
border-right: 0;
border-bottom: 1px solid #e5e1d8;
}
.mjpd-guide-size-type-tab:last-child { border-bottom: 0; }
.mjpd-guide-length-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mjpd-guide-formula {
grid-template-columns: 1fr;
text-align: left;
}
.mjpd-guide-formula span { text-align: left; }
.mjpd-benefits { grid-template-columns: 1fr; }
.mjpd-benefit--gift { grid-column: auto; }
.mjpd-detail-list > div {
grid-template-columns: 1fr;
gap: 5px;
padding: 13px 14px;
}
.mjpd-stone-meta { grid-template-columns: 1fr; }
}
/* ===== ACCORDIONS ===== */
.mjpd-accordions { border-top: 1px solid var(--mjpd-accordion-border, #e5e5e5); }
.mjpd-accordion { border-bottom: 1px solid var(--mjpd-accordion-border, #e5e5e5); }
.mjpd-accordion__toggle {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
cursor: pointer;
list-style: none;
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mjpd-accordion-color, #111);
font-family: var(--font-heading--family, sans-serif);
user-select: none;
}
.mjpd-accordion__toggle::-webkit-details-marker { display: none; }
.mjpd-accordion__chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.mjpd-accordion[open] .mjpd-accordion__chevron { transform: rotate(180deg); }
.mjpd-accordion__body {
padding: 0 0 18px;
font-size: 0.85rem;
line-height: 1.7;
color: var(--mjpd-accordion-body-color, #555);
}
.mjpd-accordion__body p { margin: 0 0 8px; }
.mjpd-accordion__body p:last-child { margin: 0; }
/* END_SECTION:mejuri-product-page */
/* START_SECTION:mejuri-recommendations (INDEX:74) */
.mjyl-section {
background: #fff;
padding: 56px 0 72px;
}
.mjyl-section {
padding-top: var(--mjyl-section-pad-top, 60px);
padding-bottom: var(--mjyl-section-pad-bottom, 60px);
background: var(--mjyl-section-bg, #fff);
}
/* Header — title aligned with page content */
.mjyl-header {
max-width: 1600px;
margin: 0 auto 28px;
padding: 0 4%;
text-align: var(--mjyl-title-align, left);
}
.mjyl-title {
font-family: 'Times New Roman', Times, serif;
font-size: var(--mjyl-title-size, 1.5rem);
font-weight: var(--mjyl-title-weight, 700);
letter-spacing: var(--mjyl-title-spacing, 0.02em);
color: var(--mjyl-title-color, #1d1d1b);
margin: 0;
text-transform: uppercase;
}
/* Carousel — full bleed, edge to edge */
.mjyl-carousel-outer {
width: 100%;
overflow: hidden;
border-top: 1px solid var(--mjyl-carousel-border, #111);
border-bottom: 1px solid var(--mjyl-carousel-border, #111);
cursor: grab;
user-select: none;
}
.mjyl-carousel-outer.is-dragging { cursor: grabbing; }
/* Scrollable track */
.mjyl-track {
display: flex;
overflow-x: scroll;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
user-select: none;
}
.mjyl-track::-webkit-scrollbar { display: none; }
.mjyl-track.is-dragging {
scroll-behavior: auto;
cursor: grabbing;
}
.mjyl-track.is-dragging a,
.mjyl-track.is-dragging img {
pointer-events: none;
}
/* Card width: cards-per-view configurable, peek of next card */
.mjyl-card.resource-card {
flex: 0 0 calc(100% / var(--mjyl-cards-desktop, 4.3));
min-width: var(--mjyl-card-min-width, 200px);
position: relative;
background: var(--mjyl-card-bg, #fff);
margin: 0;
padding: 0;
border-right: 1px solid var(--mjyl-card-border, #111);
box-sizing: border-box;
}
.mjyl-card.resource-card:last-child {
border-right: none;
}
@media (max-width: 999px) {
.mjyl-card.resource-card { flex: 0 0 calc(100% / var(--mjyl-cards-tablet, 3.2)); }
}
@media (max-width: 699px) {
.mjyl-card.resource-card { flex: 0 0 calc(100% / var(--mjyl-cards-mobile, 2.2)); }
}
/* Card link overlay */
.mjyl-card .resource-card__link {
position: absolute;
inset: 0;
z-index: 1;
}
/* Wishlist heart */
.mjyl-wishlist {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
background: transparent;
border: none;
cursor: pointer;
color: var(--mjyl-wishlist-color, #1d1d1b);
padding: 4px;
display: inline-flex;
transition: color .2s;
}
.mjyl-wishlist:hover { color: var(--mjyl-wishlist-hover, #b30000); }
/* Media */
.mjyl-card .resource-card__media {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
background: #fff;
overflow: hidden;
}
.mjyl-card .resource-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity .35s ease;
-webkit-user-drag: none;
}
.mjyl-card .resource-card__image--secondary { opacity: 0; }
.mjyl-card:hover .resource-card__image--secondary { opacity: 1; }
/* Content */
.mjyl-content {
padding: var(--mjyl-card-content-pad, 18px) var(--mjyl-card-content-pad, 18px) calc(var(--mjyl-card-content-pad, 18px) + 4px);
background: var(--mjyl-card-bg, #fff);
}
.mjyl-card-title {
font-family: 'Inter', -apple-system, sans-serif;
font-size: var(--mjyl-card-title-size, 0.78rem);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mjyl-card-title-color, #1d1d1b);
margin: 0 0 6px;
line-height: 1.4;
}
.mjyl-price-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.mjyl-price-row .price {
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
color: var(--mjyl-card-price-color, #1d1d1b);
}
.mjyl-price-row .price--compare {
text-decoration: line-through;
color: var(--mjyl-card-compare-color, #999);
font-size: 0.75rem;
}
.mjyl-card-type {
font-size: 0.72rem;
color: var(--mjyl-card-type-color, #777);
margin: 0;
letter-spacing: 0.02em;
}
/* ── Bottom nav: arrow + progress bar + arrow ── */
.mjyl-nav-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 28px;
padding: 0 4%;
}
.mjyl-nav-btn {
width: 32px;
height: 32px;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--mjyl-nav-color, #1d1d1b);
padding: 0;
transition: opacity .2s;
}
.mjyl-nav-btn:hover:not(:disabled) { opacity: 0.6; }
.mjyl-nav-btn:disabled {
opacity: 0.2;
cursor: default;
}
.mjyl-progress {
position: relative;
width: var(--mjyl-progress-width, 140px);
height: 1px;
background: var(--mjyl-progress-bg, #d9d9d9);
}
.mjyl-progress-fill {
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 30%;
background: var(--mjyl-progress-fill, #1d1d1b);
transition: left .2s ease-out, width .2s ease-out;
}
/* Skeleton */
.mjyl-skeleton { pointer-events: none; }
.mjyl-skeleton .resource-card__media {
background: linear-gradient(90deg, #f0eee8 25%, #f7f5f0 50%, #f0eee8 75%);
background-size: 200% 100%;
animation: mjyl-shimmer 1.4s infinite;
}
.mjyl-skel-line {
height: 10px;
background: linear-gradient(90deg, #f0eee8 25%, #f7f5f0 50%, #f0eee8 75%);
background-size: 200% 100%;
animation: mjyl-shimmer 1.4s infinite;
margin-bottom: 8px;
width: 80%;
}
.mjyl-skel-line--short { width: 40%; }
@keyframes mjyl-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* END_SECTION:mejuri-recommendations */
/* START_SECTION:mejuri-reviews (INDEX:75) */
.mjrev-section {
background: var(--mjrev-bg, #f5f5f3);
padding: var(--mjrev-pad-top, 64px) var(--mjrev-pad-x, 4%) var(--mjrev-pad-bottom, 96px);
color: var(--mjrev-body-color, #2a2a28);
}
.mjrev-wrap {
max-width: var(--mjrev-max-width, 1600px);
margin: 0 auto;
}
.mjrev-judge-shell {
border-top: 0;
padding-top: 0;
}
.mjrev-judge-carousel {
margin: 14px 0 28px;
}
.mjrev-empty-note {
margin: 6px 0 0;
font-size: 0.8rem;
color: #7e7d78;
}
.mjrev-judge-status {
margin: 18px 0 0;
font-size: var(--mjrev-body-size, 0.9rem);
color: var(--mjrev-body-color, #2a2a28);
}
.mjrev-judge-status[hidden] {
display: none !important;
}
.mjrev-api-source[hidden] {
display: none !important;
}
/* Header */
.mjrev-header {
margin-bottom: 0;
}
.mjrev-header__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 16px;
}
.mjrev-judge-shell .mjrev-header__right {
gap: 10px;
}
.mjrev-title {
font-family: var(--font-heading--family, "Helvetica Neue", Helvetica, Arial, sans-serif);
font-size: var(--mjrev-title-size, 0.9rem);
font-weight: 700;
letter-spacing: 0.09em;
color: var(--mjrev-title-color, #1d1d1b);
margin: 0;
line-height: 1.2;
text-transform: uppercase;
}
.mjrev-header__right {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.mjrev-summary {
display: flex;
align-items: center;
gap: 10px;
}
.mjrev-stars {
display: flex;
gap: 4px;
color: var(--mjrev-star-color, #1d1d1b);
}
.mjrev-star--empty { color: var(--mjrev-star-empty-color, #bdbcb7); }
.mjrev-score {
font-size: 0.9rem;
font-weight: 500;
color: var(--mjrev-title-color, #1d1d1b);
font-family: var(--font-body--family, sans-serif);
}
.mjrev-actions {
display: flex;
align-items: center;
gap: 12px;
}
.mjrev-action-link {
font-size: 0.82rem;
color: var(--mjrev-link-color, #1d1d1b);
text-decoration: underline;
text-underline-offset: 2px;
text-transform: uppercase;
letter-spacing: 0.055em;
font-family: var(--font-body--family, sans-serif);
line-height: 1.2;
}
.mjrev-action-link-btn {
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.mjrev-action-sep { color: #a6a59f; }
.mjrev-tabs-row {
border-bottom: 1px solid var(--mjrev-divider, #d8d7d2);
margin-bottom: 30px;
}
.mjrev-tab {
display: inline-block;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--mjrev-title-color, #1d1d1b);
padding-bottom: 12px;
border-bottom: 1px solid var(--mjrev-tab-underline, #1d1d1b);
margin-bottom: -1px;
text-transform: uppercase;
}
/* Controls */
.mjrev-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
gap: 18px;
flex-wrap: wrap;
}
.mjrev-search-bar {
display: flex;
align-items: center;
gap: 9px;
border-bottom: 1px solid #1d1d1b;
padding-bottom: 8px;
min-width: min(300px, 100%);
max-width: 360px;
font-size: 0.95rem;
color: #8a8984;
cursor: pointer;
font-family: var(--font-body--family, sans-serif);
}
.mjrev-sort-btn {
background: none;
border: none;
cursor: pointer;
font-size: 0.82rem;
letter-spacing: 0.04em;
color: #1d1d1b;
padding: 0;
font-family: var(--font-body--family, sans-serif);
text-transform: uppercase;
}
/* Judge.me skin */
.mjrev-judge-shell .jdgm-widget,
.mjrev-judge-shell .jdgm-rev-widg {
background: transparent !important;
color: var(--mjrev-body-color, #2a2a28) !important;
border: 0 !important;
font-family: var(--font-body--family, sans-serif) !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-review-widget,
.mjrev-judge-shell #judgeme_product_reviews .jm-review-widget__header,
.mjrev-judge-shell #judgeme_product_reviews .jm-review-widget__body {
background: transparent !important;
color: var(--mjrev-body-color, #2a2a28) !important;
border: 0 !important;
font-family: var(--font-body--family, sans-serif) !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-review-widget {
padding: 6px 0 0 !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-review-widget__header-and-body {
gap: 18px !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-review-widget-minimal-header__title,
.mjrev-judge-shell #judgeme_product_reviews .jm-average-rating-display {
display: none !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-action-buttons {
display: none !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-review-widget-header__filters-wrapper {
width: 100% !important;
flex: 1 1 100% !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-cluster.jm-filters {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 20px !important;
width: 100% !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-review-widget-minimal-header__button-and-filters {
justify-content: flex-end !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-search-bar {
border: 0 !important;
border-bottom: 1px solid #1d1d1b !important;
border-radius: 0 !important;
background: transparent !important;
max-inline-size: none !important;
padding: 0 0 8px !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-search-bar.jm-search-bar--inline {
margin-right: auto !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-search-bar__icon {
color: #1d1d1b !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-search-bar__input {
color: #1d1d1b !important;
font-size: 0.95rem !important;
padding: 0 !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-search-bar__input::placeholder {
color: #8a8984 !important;
opacity: 1 !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-filters__buttons {
justify-content: flex-end !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-filters--compact .jm-search-filter__toggle,
.mjrev-judge-shell #judgeme_product_reviews .jm-filters--compact .jm-sort-filter__select {
border-radius: 0 !important;
border-color: #1d1d1b !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-sort-filter {
flex-grow: 0 !important;
font-size: 0.82rem !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-filters--compact .jm-sort-filter__select {
border: 0 !important;
padding: 2px 20px 2px 0 !important;
min-inline-size: auto !important;
inline-size: auto !important;
background: transparent !important;
text-transform: uppercase !important;
font-size: 0.82rem !important;
letter-spacing: 0.04em !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-sort-filter__icon--sort {
display: none !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-review-content__body-content,
.mjrev-judge-shell #judgeme_product_reviews .jm-text {
color: var(--mjrev-body-color, #2a2a28) !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-reviewer-info__name {
color: var(--mjrev-name-color, #1d1d1b) !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-action-buttons__button {
color: #ffffff !important;
background: #1d1d1b !important;
border-color: #1d1d1b !important;
}
.mjrev-judge-shell .jdgm-rev-widg {
margin: 0 !important;
}
.mjrev-judge-shell .jdgm-rev-widg__header {
border-bottom: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.mjrev-judge-shell .jdgm-rev-widg__title,
.mjrev-judge-shell .jdgm-rev-widg__summary,
.mjrev-judge-shell .jdgm-rev-widg__header .jdgm-write-rev-link {
display: none !important;
}
.mjrev-judge-shell .jdgm-histogram {
display: none !important;
}
.mjrev-judge-shell .jdgm-row-search {
float: left !important;
width: min(360px, 100%) !important;
margin: 0 0 18px !important;
}
.mjrev-judge-shell .jdgm-row-search .jdgm-search-bar,
.mjrev-judge-shell .jdgm-row-search input,
.mjrev-judge-shell .jdgm-rev-widg input[type="search"],
.mjrev-judge-shell .jdgm-rev-widg input[type="text"] {
width: 100% !important;
border: 0 !important;
border-bottom: 1px solid #1d1d1b !important;
border-radius: 0 !important;
background: transparent !important;
color: #1d1d1b !important;
font-size: 0.95rem !important;
padding: 2px 0 8px !important;
line-height: 1.35 !important;
}
.mjrev-judge-shell .jdgm-row-search input::placeholder,
.mjrev-judge-shell .jdgm-rev-widg input::placeholder {
color: #8a8984 !important;
opacity: 1 !important;
}
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 18px !important;
float: right !important;
margin: 0 0 18px !important;
}
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper select,
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper button,
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper .jdgm-sort-dropdown,
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper .jdgm-sort-dropdown-wrapper,
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper .jdgm-custom-forms-filters {
border: 0 !important;
border-bottom: 1px solid transparent !important;
background: transparent !important;
font-size: 0.82rem !important;
letter-spacing: 0.04em !important;
color: var(--mjrev-title-color, #1d1d1b) !important;
padding: 2px 0 !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
}
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper label,
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper .jdgm-sort-dropdown-text,
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper .jdgm-custom-forms-filters__label {
color: var(--mjrev-title-color, #1d1d1b) !important;
font-size: 0.82rem !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper .jdgm-sort-dropdown::after,
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper .jdgm-custom-forms-filters::after {
border-color: currentColor !important;
}
.mjrev-judge-shell .jdgm-rev-widg__reviews {
clear: both !important;
margin-top: 0 !important;
}
.mjrev-judge-shell #judgeme_product_reviews[hidden],
.mjrev-judge-shell #judgeme_product_reviews.mjrev-widget-hidden,
.mjrev-judge-shell .mjrev-judge-metafield-source[hidden] {
display: none !important;
}
.mjrev-judge-shell .jm-no-reviews-state,
.mjrev-judge-shell .jm-loading-overlay:has(.jm-text),
.mjrev-judge-shell #judgeme_product_reviews.mjrev-widget-hidden + .mjrev-judge-metafield-source + .mjrev-judge-status {
display: none !important;
}
.mjrev-judge-shell .jdgm-rev {
display: grid !important;
grid-template-columns: var(--mjrev-row-author-width, 260px) 1fr !important;
gap: 36px !important;
padding: 18px 0 !important;
border-top: 1px solid var(--mjrev-divider, #e8e8e8) !important;
margin: 0 !important;
}
.mjrev-judge-shell .jdgm-rev__header {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
padding-top: 2px !important;
}
.mjrev-judge-shell .jdgm-row-profile {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 3px !important;
}
.mjrev-judge-shell .jdgm-row-rating {
order: 2 !important;
}
.mjrev-judge-shell .jdgm-rev__content {
grid-column: 2 !important;
}
.mjrev-judge-shell .jdgm-rev__actions,
.mjrev-judge-shell .jdgm-rev__reply {
grid-column: 2 !important;
}
.mjrev-judge-shell .jdgm-rev__icon,
.mjrev-judge-shell .jdgm-rev__location,
.mjrev-judge-shell .jdgm-rev__social,
.mjrev-judge-shell .jdgm-rev__votes,
.mjrev-judge-shell .jdgm-rev__transparency-badge-wrapper {
display: none !important;
}
.mjrev-judge-shell .jdgm-rev__rating {
display: inline-flex !important;
gap: 2px !important;
margin: 0 0 6px !important;
color: var(--mjrev-star-color, #1d1d1b) !important;
}
.mjrev-judge-shell .jdgm-rev__timestamp {
order: 2 !important;
font-size: 0.8rem !important;
line-height: 1.35 !important;
color: var(--mjrev-date-color, #7c7b76) !important;
}
.mjrev-judge-shell .jdgm-rev__author-wrapper {
order: 1 !important;
}
.mjrev-judge-shell .jdgm-rev__author {
font-size: 0.95rem !important;
font-weight: 500 !important;
color: var(--mjrev-name-color, #1d1d1b) !important;
}
.mjrev-judge-shell .jdgm-rev__buyer-badge-wrapper {
order: 3 !important;
}
.mjrev-judge-shell .jdgm-rev__buyer-badge {
font-size: 0.8rem !important;
font-weight: 400 !important;
color: var(--mjrev-verified-color, #5f5e5a) !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
.mjrev-judge-shell .jdgm-rev__prod-link,
.mjrev-judge-shell .jdgm-rev__prod-info-wrapper,
.mjrev-judge-shell .jdgm-rev__product,
.mjrev-judge-shell .jdgm-rev__product-title,
.mjrev-judge-shell [class*="prod-link" i],
.mjrev-judge-shell [class*="product-title" i],
.mjrev-judge-shell [class*="product_name" i] {
display: none !important;
}
.mjrev-judge-shell .jdgm-rev__title {
font-family: var(--font-heading--family, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
font-size: var(--mjrev-body-size, 0.9rem) !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--mjrev-rev-title-color, #1d1d1b) !important;
margin: 0 0 6px !important;
text-transform: uppercase !important;
line-height: 1.15 !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-review-content__title,
.mjrev-judge-shell #judgeme_product_reviews .jm-review-title,
.mjrev-judge-shell #judgeme_product_reviews [class*="review-title" i] {
font-size: var(--mjrev-body-size, 0.9rem) !important;
font-weight: 600 !important;
line-height: 1.35 !important;
}
.mjrev-judge-shell .jdgm-rev__body,
.mjrev-judge-shell .jdgm-rev__body p {
font-size: var(--mjrev-body-size, 1.01rem) !important;
line-height: 1.48 !important;
color: var(--mjrev-body-color, #2a2a28) !important;
margin: 0 !important;
}
.mjrev-judge-shell .jdgm-paginate {
display: flex !important;
justify-content: center !important;
margin-top: 34px !important;
}
.mjrev-judge-shell .jdgm-paginate__page,
.mjrev-judge-shell .jdgm-paginate__next-page,
.mjrev-judge-shell .jdgm-paginate__last-page {
color: var(--mjrev-title-color, #1d1d1b) !important;
}
.mjrev-page-hidden {
display: none !important;
}
.mjrev-page-controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 28px;
}
.mjrev-page-gap {
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 3px;
color: #77736b;
}
.mjrev-page-btn {
min-width: 34px;
height: 34px;
padding: 0 10px;
border: 1px solid var(--mjrev-divider, #d8d7d2);
background: transparent;
color: var(--mjrev-title-color, #1d1d1b);
cursor: pointer;
font: inherit;
font-size: 0.82rem;
}
.mjrev-page-btn[aria-current="page"] {
background: #1d1d1b;
border-color: #1d1d1b;
color: #fff;
}
.mjrev-page-btn:disabled {
opacity: 0.35;
cursor: default;
}
.mjrev-judge-shell .jdgm-widget a,
.mjrev-judge-shell .jdgm-widget label,
.mjrev-judge-shell .jdgm-widget select,
.mjrev-judge-shell .jdgm-widget option {
color: var(--mjrev-title-color, #1d1d1b) !important;
}
.mjrev-judge-shell .jdgm-widget .jdgm-btn,
.mjrev-judge-shell .jdgm-widget .jdgm-submit-btn {
background: #1d1d1b !important;
border-color: #1d1d1b !important;
color: #ffffff !important;
}
.mjrev-judge-shell .jdgm-widget .jdgm-star,
.mjrev-judge-shell .jdgm-widget .jdgm-star.jdgm--on {
color: var(--mjrev-star-color, #1d1d1b) !important;
}
.mjrev-judge-shell .jdgm-widget .jdgm-star.jdgm--off {
color: var(--mjrev-star-empty-color, #bdbcb7) !important;
}
.mjrev-judge-shell .jdgm-widget .jdgm-histogram__bar-content,
.mjrev-judge-shell .jdgm-widget .jdgm-rev__buyer-badge,
.mjrev-judge-shell .jdgm-widget .jdgm-medal {
background: #1d1d1b !important;
border-color: #1d1d1b !important;
color: #ffffff !important;
}
@media (max-width: 699px) {
.mjrev-controls {
align-items: flex-start;
gap: 14px;
}
.mjrev-search-bar {
min-width: 100%;
max-width: 100%;
}
.mjrev-judge-shell .jdgm-row-search,
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper {
float: none !important;
width: 100% !important;
justify-content: flex-start !important;
}
.mjrev-judge-shell .jdgm-rev {
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 16px 0 !important;
}
.mjrev-judge-shell .jdgm-rev__content,
.mjrev-judge-shell .jdgm-rev__actions,
.mjrev-judge-shell .jdgm-rev__reply {
grid-column: 1 !important;
}
.mjrev-judge-shell .jdgm-rev-widg__sort-wrapper {
justify-content: flex-start !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-review-widget-minimal-header__button-and-filters,
.mjrev-judge-shell #judgeme_product_reviews .jm-review-widget-minimal-header__filters,
.mjrev-judge-shell #judgeme_product_reviews .jm-cluster.jm-filters.jm-filters--compact {
width: 100% !important;
justify-content: flex-start !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-cluster.jm-filters {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
}
.mjrev-judge-shell #judgeme_product_reviews .jm-filters__buttons {
justify-content: flex-start !important;
}
}
/* Review rows */
.mjrev-list {
margin-top: 0;
}
.mjrev-row {
display: grid;
grid-template-columns: var(--mjrev-row-author-width, 260px) 1fr;
gap: var(--mjrev-row-gap, 60px);
padding: var(--mjrev-row-padding, 32px) 0;
border-top: 1px solid var(--mjrev-divider, #e8e8e8);
}
@media (max-width: 699px) {
.mjrev-row {
grid-template-columns: 1fr;
gap: 12px;
}
}
.mjrev-row__author {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 2px;
}
.mjrev-row__name { font-size: 0.95rem; font-weight: 500; color: var(--mjrev-name-color, #1d1d1b); }
.mjrev-row__verified { font-size: 0.8rem; color: var(--mjrev-verified-color, #5f5e5a); }
.mjrev-row__date { font-size: 0.8rem; color: var(--mjrev-date-color, #7c7b76); }
.mjrev-row__stars {
display: flex;
gap: 4px;
color: var(--mjrev-star-color, #1d1d1b);
margin-bottom: 8px;
}
.mjrev-row__title {
font-family: var(--font-heading--family, "Helvetica Neue", Helvetica, Arial, sans-serif);
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0;
color: var(--mjrev-rev-title-color, #1d1d1b);
margin: 0 0 8px;
line-height: 1.15;
text-transform: uppercase;
}
.mjrev-row__body {
font-size: var(--mjrev-body-size, 1.01rem);
line-height: 1.6;
color: var(--mjrev-body-color, #2a2a28);
margin: 0;
}
/* Empty state */
.mjrev-empty {
text-align: center;
padding: 48px 0;
color: #5f5e5a;
border-top: 1px solid var(--mjrev-divider, #d8d7d2);
}
.mjrev-empty p {
margin-bottom: 20px;
font-size: 0.95rem;
}
/* END_SECTION:mejuri-reviews */
/* START_SECTION:mejuri-sustainability (INDEX:79) */
.mjsus-section {
background: var(--mjsus-bg, #c2bdb4);
padding: var(--mjsus-pad-y, 56px) var(--mjsus-pad-x, 4%);
}
.mjsus-wrap {
max-width: var(--mjsus-max-width, 1600px);
margin: 0 auto;
display: grid;
grid-template-columns: var(--mjsus-left-cols, 1fr) var(--mjsus-right-cols, 1.8fr);
gap: var(--mjsus-gap, 100px);
align-items: center;
}
.mjsus-title {
font-family: var(--font-heading--family, sans-serif);
font-size: var(--mjsus-title-size, 1.1rem);
font-weight: var(--mjsus-title-weight, 700);
letter-spacing: var(--mjsus-title-spacing, 0.1em);
text-transform: uppercase;
color: var(--mjsus-title-color, #111);
margin: 0 0 20px;
line-height: 1.3;
}
.mjsus-link {
font-size: var(--mjsus-link-size, 0.75rem);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mjsus-link-color, #111);
text-decoration: underline;
text-underline-offset: 3px;
font-family: var(--font-heading--family, sans-serif);
font-weight: 600;
}
.mjsus-text {
font-size: var(--mjsus-text-size, 0.9rem);
line-height: 1.75;
color: var(--mjsus-text-color, #333);
margin: 0 0 24px;
}
.mjsus-text:last-child { margin: 0; }
.mjsus-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
margin-top: 16px;
}
.mjsus-stat { display: flex; gap: 12px; align-items: flex-start; }
.mjsus-stat__icon { color: var(--mjsus-title-color, #111); flex-shrink: 0; }
.mjsus-stat__label {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mjsus-title-color, #111);
margin-bottom: 4px;
}
.mjsus-stat__value { font-size: 0.82rem; color: var(--mjsus-text-color, #333); line-height: 1.5; }
@media (max-width: 699px) {
.mjsus-wrap { grid-template-columns: 1fr; gap: 24px; }
.mjsus-section { padding: 40px 5%; }
}
/* END_SECTION:mejuri-sustainability */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:255) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
display: none;
}
media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
/* Needed for safari to stretch to full grid height */
height: 100%;
}
@media screen and (min-width: 750px) {
.media-gallery--two-column .media-gallery__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Display grid view as a carousel on mobile, grid on desktop */
media-gallery:is(.media-gallery--grid) slideshow-component {
display: none;
}
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
display: grid;
}
}
.product-media-container__zoom-button {
position: absolute;
width: 100%;
height: 100%;
z-index: var(--layer-flat);
cursor: zoom-in;
background-color: transparent;
&:hover {
background-color: transparent;
}
}
slideshow-slide.product-media-container--tallest {
content-visibility: visible;
}
.product-media__drag-zoom-wrapper {
aspect-ratio: inherit;
min-height: inherit;
min-width: inherit;
display: inherit;
flex: inherit;
}
.media-gallery__mobile-controls {
grid-area: auto;
}
.product-media-container--zoomable.product-media-container--image {
cursor: zoom-in;
}
/* END_SNIPPET:product-media-gallery-content-styles */
/* START_SNIPPET:quick-add-modal-styles (INDEX:259) */
#quick-add-dialog {
display: contents;
}
@media screen and (min-width: 750px) {
.quick-add-modal {
width: var(--quick-add-modal-width);
height: var(--quick-add-modal-height);
max-width: none;
}
}
.quick-add-modal {
padding: 0;
border: var(--style-border-popover);
overflow: hidden;
box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));
@media screen and (max-width: 749px) {
position: fixed;
margin: auto 0 0 0;
min-height: unset;
max-width: 100%;
border-radius: 0;
overflow: clip;
height: fit-content;
}
}
.quick-add-modal[open] {
@media screen and (max-width: 750px) {
border-top-left-radius: var(--style-border-radius-popover);
border-top-right-radius: var(--style-border-radius-popover);
}
}
.quick-add-modal[open] {
@media screen and (min-width: 750px) {
display: flex;
}
}
.quick-add-modal .view-more-details__wrapper {
@media screen and (max-width: 749px) {
display: none;
}
}
.quick-add-modal[open] {
animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
}
.quick-add-modal.dialog-closing {
animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
}
.quick-add-modal__close {
position: absolute;
top: var(--margin-2xs);
right: var(--margin-2xs);
transition: transform 0.15s var(--animation-timing-bounce);
z-index: var(--layer-raised);
overflow: visible;
transform-origin: center;
}
.quick-add-modal__close:active {
transform: scale(0.99) translateY(1px);
}
.quick-add-modal__close {
&:focus-visible {
outline: none;
}
&:focus-visible::after {
content: '';
position: absolute;
inset: 0;
border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
outline: var(--focus-outline-width) solid currentColor;
}
}
.quick-add-modal__content {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 100% 1fr;
position: relative;
overflow-y: auto;
max-height: 100vh;
flex-grow: 1;
@media screen and (max-width: 749px) {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
padding-inline: var(--padding-xl);
padding-block: var(--padding-xl);
gap: var(--gap-lg);
flex: 1;
min-height: 0;
overflow-y: auto;
height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
max-height: 100vh;
}
}
.quick-add-modal__content .media-gallery--grid .media-gallery__grid {
grid-template-columns: 1fr;
}
.quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
grid-column: auto;
}
.quick-add-modal__content {
/* One column */
.media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
/* Two column, small first image */
.media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
.product-media-container:nth-of-type(odd)
.product-media > *,
/* Two column, large first image */
.media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
.product-media-container:is(:first-of-type, :nth-of-type(even))
.product-media > *,
/* Carousel */
.media-gallery--carousel slideshow-container {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.quick-add-modal__content .view-more-details__wrapper {
display: flex;
justify-content: flex-start;
width: 100%;
}
.view-more-details__wrapper .view-more-details {
display: flex;
align-items: center;
width: fit-content;
}
.quick-add-modal__content .product-header {
@media screen and (max-width: 749px) {
display: flex;
flex-direction: column;
grid-column: 2 / -1;
grid-row: 1;
padding-right: var(--padding-2xl);
}
}
.quick-add-modal__content .product-header a:not(product-price *) {
@media screen and (max-width: 749px) {
font-size: var(--font-size--md);
font-weight: 500;
color: inherit;
width: fit-content;
}
}
.quick-add-modal__content variant-picker,
.quick-add-modal__content product-form-component {
@media screen and (max-width: 749px) {
grid-column: 1 / -1;
}
}
.quick-add-modal__content .product-media-container__zoom-button {
cursor: default;
}
.quick-add-modal__content .product-details {
grid-column: 4 / -1;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
justify-content: stretch;
height: 100%;
min-height: 0;
overflow-y: auto;
position: relative;
dialog[open] & {
animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
animation-delay: 0.1s;
}
@media screen and (max-width: 749px) {
grid-column: 2 / span 2;
grid-row: span 1;
max-height: 100%;
height: 100%;
}
}
@property --quick-add-modal-mask-start {
syntax: '';
initial-value: 0px;
inherits: false;
}
@property --quick-add-modal-mask-end {
syntax: '';
initial-value: 0px;
inherits: true;
}
@keyframes detect-scroll {
from,
to {
--can-scroll: ;
}
}
@supports (animation-timeline: scroll(self)) {
dialog[open] .quick-add-modal__content .product-details {
mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
scrollEnd 1s linear both, detect-scroll 1ms linear none;
animation-timeline: auto, scroll(self), scroll(self), scroll(self);
animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
}
}
@keyframes scrollStart {
from {
--quick-add-modal-mask-start: 0px;
}
to {
--quick-add-modal-mask-start: 48px;
}
}
@keyframes scrollEnd {
from {
--quick-add-modal-mask-end: 0px;
}
to {
--quick-add-modal-mask-end: 48px;
}
}
.quick-add-modal__content .product-details > .group-block {
flex-grow: 1;
width: auto;
}
.quick-add-modal__content > * {
min-height: 0;
}
.quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
flex: 0 0 auto;
}
.quick-add-modal__content .product-details :is(.buy-buttons-block) {
margin-top: auto;
position: sticky;
bottom: 0;
padding-bottom: var(--padding-3xl);
background-color: var(--color-background);
z-index: var(--layer-raised);
&::before {
--quick-add-modal-mask-end-progressive-enhanced: 0px;
position: absolute;
content: '';
display: block;
inset: auto 0 100% 0;
pointer-events: none;
height: min(var(--gap-2xl), var(--gap));
background-color: inherit;
mask-image: linear-gradient(
to top,
#000 0%,
#000 calc(var(--gap-2xs)),
transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
transparent
);
}
}
.quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
position: static;
padding-bottom: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
display: none;
}
.quick-add-modal__content .product-details .buy-buttons-block__bar {
display: block;
position: sticky;
bottom: 0;
margin-top: auto;
padding-block: var(--gap-md) var(--padding-3xl);
background-color: var(--color-background);
z-index: var(--layer-raised);
&::before {
--quick-add-modal-mask-end-progressive-enhanced: 0px;
position: absolute;
content: '';
display: block;
inset: auto 0 100% 0;
pointer-events: none;
height: min(var(--gap-2xl), var(--gap));
background-color: inherit;
mask-image: linear-gradient(
to top,
#000 0%,
#000 calc(var(--gap-2xs)),
transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
transparent
);
}
}
@supports (animation-timeline: scroll(self)) {
.quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
.quick-add-modal__content .product-details .buy-buttons-block__bar::before {
--mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
--mask-if-no-scroll: 48px;
--quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
height: calc(var(--gap-2xs) + 48px);
}
}
.quick-add-modal__content .product-details .variant-picker {
flex: 0 0 auto;
padding-block: min(var(--gap-2xl), var(--gap));
margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
}
.quick-add-modal__content .variant-option--swatches {
padding-inline-start: var(--padding-2xs);
}
.quick-add-modal__content .variant-option--swatches legend {
margin-inline-start: calc(-1 * var(--padding-2xs));
}
.quick-add-modal__content:not(:has(.product-information__media)) .product-details {
grid-column: 1 / -1;
}
.quick-add-modal__content .view-product-title {
display: flex;
padding-block: 0;
margin-block-end: 12px;
/* Prevent overlap between title and close button */
padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
}
.quick-add-modal__content .view-product-title a {
color: inherit;
text-decoration: none;
text-align: left;
font-size: var(--font-size--2xl);
font-weight: 600;
line-height: 1.2;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s var(--animation-easing);
}
.quick-add-modal__content .product-details product-price {
--text-align: left;
}
.quick-add-modal__content .product-details product-price.text-block--align-center {
margin-inline: 0;
}
.quick-add-modal__content .product-details product-price.text-center {
--text-align: left;
}
.quick-add-modal__content .product-details product-price > * {
text-align: left;
}
.quick-add-modal__content
.product-details
*:not(
.group-block,
.group-block-content,
.buy-buttons-block,
.buy-buttons-block *,
.view-product-title,
.view-product-title *,
variant-picker,
variant-picker *,
product-price,
product-price *,
product-inventory,
product-inventory *,
.view-more-details__wrapper,
.view-more-details__wrapper *
) {
@media screen and (min-width: 750px) {
/* stylelint-disable-next-line declaration-no-important */
display: none !important;
}
}
.quick-add-modal__content
.group-block:not(
:has(
.buy-buttons-block,
.buy-buttons-block *,
.view-product-title,
.view-product-title *,
variant-picker,
variant-picker *,
product-price,
product-price *,
product-inventory,
product-inventory *,
.view-more-details__wrapper,
.view-more-details__wrapper *
),
.buy-buttons-block
) {
display: none;
}
@media screen and (min-width: 750px) {
.quick-add-modal__content .group-block-content {
gap: 0;
}
.quick-add-modal__content .media-gallery__grid {
gap: min(var(--gap-2xs), var(--image-gap));
border-radius: var(--style-border-radius-popover, 0);
}
.quick-add-modal__content .media-gallery--grid .product-media img {
border-radius: 0;
}
}
.quick-add-modal__content .product-details > .group-block {
padding-block: var(--padding-3xl) 0;
}
.quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
padding-inline: var(--padding-3xl);
}
.quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
content-visibility: auto;
}
.quick-add-modal__content .product-information__media {
width: 100%;
grid-column: 1 / span 1;
grid-row: 1;
position: relative;
top: 0;
animation: fadeIn 0.4s var(--animation-timing-fade-in) both;
@media screen and (min-width: 750px) {
position: sticky;
grid-column: 1 / 4;
width: var(--quick-add-modal-gallery-width);
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
&::-webkit-scrollbar {
display: none;
}
}
.quick-add-modal__content .product-information__media media-gallery {
pointer-events: none;
@media screen and (min-width: 750px) {
position: absolute;
inset: 0;
}
}
.quick-add-modal media-gallery {
padding: 0;
}
.quick-add-modal__content .product-information__media slideshow-arrows {
display: none;
}
.quick-add-modal__content .product-information__media slideshow-container {
display: block;
}
.quick-add-modal__content .product-information__media slideshow-slides {
display: flex;
flex-direction: column;
gap: var(--gap-2xs);
overflow: visible;
scroll-snap-type: none;
}
.quick-add-modal__content .product-information__media slideshow-slide {
width: 100%;
flex: none;
scroll-snap-align: unset;
position: relative;
transform: none;
opacity: 1;
visibility: visible;
transition: opacity 0.3s var(--animation-easing);
}
.quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
@media screen and (max-width: 749px) {
display: none;
}
}
.quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
}
.quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
animation-delay: 0.05s;
}
.quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
animation-delay: 0.1s;
}
.quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
display: none;
}
.quick-add-modal__content .sticky-content,
.quick-add-modal__content .sticky-content--desktop {
top: 0;
}
.quick-add-modal__content .text-block.rte:not(product-price),
.quick-add-modal__content .view-more-details__wrapper {
display: none;
}
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* END_SNIPPET:quick-add-modal-styles */
/* START_SNIPPET:resource-card (INDEX:263) */
.resource-card {
--resource-card-secondary-image-opacity: 0;
--resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));
display: flex;
flex-direction: column;
row-gap: var(--padding-xs);
position: relative;
text-decoration: none;
height: 100%;
opacity: 0;
animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
}
.resource-card__link {
position: absolute;
inset: 0;
z-index: 1;
}
.resource-card__content {
display: flex;
flex-direction: column;
color: var(--color-foreground);
gap: var(--padding-3xs);
.price {
font-weight: 500;
}
.volume-pricing-note {
display: block;
margin-top: var(--padding-3xs);
font-family: var(--font-body--family);
font-weight: normal;
font-size: min(0.85em, var(--font-paragraph--size));
line-height: normal;
letter-spacing: normal;
text-transform: none;
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
}
.resource-card[data-resource-type='article'] .resource-card__content,
.resource-card[data-resource-type='page'] .resource-card__content {
gap: var(--padding-xs);
}
.resource-card__image {
aspect-ratio: var(--resource-card-aspect-ratio, auto);
object-fit: cover;
border-radius: var(--resource-card-corner-radius);
opacity: var(--resource-card-primary-image-opacity);
}
.resource-card__image--secondary {
position: absolute;
top: 0;
opacity: var(--resource-card-secondary-image-opacity);
border-radius: var(--resource-card-corner-radius);
}
.resource-card__media:empty {
display: none;
}
.resource-card__image-placeholder {
padding: var(--padding-sm);
font-size: var(--font-size--lg);
line-height: var(--line-height--display-loose);
word-break: break-word;
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
aspect-ratio: var(--resource-card-aspect-ratio, auto);
border-radius: var(--resource-card-corner-radius);
color: var(--color-foreground);
}
.resource-card__title {
margin-block: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.3;
word-break: break-word;
overflow-wrap: break-word;
}
.resource-card__title.paragraph {
line-height: 1.3;
}
.resource-card--overlay {
height: 100%;
&::before {
content: '';
position: absolute;
inset: 50% 0 0;
background: var(--gradient-image-overlay);
border-radius: var(--resource-card-corner-radius);
pointer-events: none;
z-index: var(--layer-flat);
}
}
.resource-card--overlay .resource-card__image {
height: 100%;
}
.resource-card--overlay .resource-card__content {
position: absolute;
inset: auto 0 0;
padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
z-index: var(--layer-raised);
}
.resource-card--overlay .resource-card__title {
color: var(--color-white);
}
/* Collection images */
.resource-card__image-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap-2xs);
}
.resource-card__collection-image {
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
}
.resource-card__subtext {
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
margin-block-start: 0;
}
.resource-card__subtext.paragraph {
font-size: var(--font-size--body-sm);
line-height: var(--line-height--body-tight);
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
.resource-card:has(.resource-card__image--secondary) {
&:hover,
&:focus {
--resource-card-secondary-image-opacity: 1;
}
}
/* END_SNIPPET:resource-card */
/* START_SNIPPET:search-modal (INDEX:268) */
/* Search modal style */
.search-modal {
--search-border-radius: var(--style-border-radius-popover);
--search-border-width: var(--style-border-width);
}
.search-modal__content {
/* Approx set the top so when the content is at max height, the modal is centered */
--modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
--modal-width: 66dvw;
padding: 0;
border: var(--style-border-popover);
@media screen and (min-width: 750px) {
width: var(--modal-width);
margin-block-start: var(--modal-top-margin);
overflow: hidden;
}
}
/* Hide the default dialog backdrop on small screens */
@media screen and (max-width: 749px) {
.search-modal__content::backdrop {
display: none;
}
}
.dialog-modal[open].search-modal__content {
transform-origin: bottom center;
animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
border-radius: var(--search-border-radius);
box-shadow: var(--shadow-popover);
@media screen and (max-width: 749px) {
border-radius: 0;
}
}
.dialog-modal.search-modal__content.dialog-closing {
animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
}
.search-modal__content[open] {
display: flex;
}
.search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
position: relative;
}
.dialog-modal
.predictive-search-form__header:has(
.predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
)::before {
content: '';
position: absolute;
right: calc(var(--padding-sm) + var(--minimum-touch-target));
top: 0;
bottom: 0;
width: var(--border-width-sm);
background-color: var(--color-border);
}
.dialog-modal
.predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
> .predictive-search__close-modal-button {
&::before {
content: none;
}
}
@media screen and (min-width: 750px) {
.dialog-modal
.predictive-search-form__header:has(
.predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
)::before {
right: calc(var(--padding-2xl) * 2);
}
}
predictive-search-component {
--resource-card-corner-radius: var(--product-corner-radius);
display: flex;
width: 100%;
position: relative;
margin-inline: auto;
align-items: center;
background-color: var(--color-background);
z-index: var(--layer-heightened);
}
.predictive-search-form__footer {
display: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
@media screen and (min-width: 750px) {
--to-top-gradient-background: linear-gradient(
to top,
rgb(var(--color-background-rgb) / var(--opacity-90)),
rgb(var(--color-background-rgb) / var(--opacity-80)),
rgb(var(--color-background-rgb) / var(--opacity-40)),
transparent
);
padding-block: var(--padding-xs) var(--padding-lg);
background-image: var(--to-top-gradient-background);
}
}
predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
.predictive-search-form__footer {
display: block;
}
.predictive-search-form {
position: relative;
width: 100%;
align-self: flex-start;
}
.predictive-search-form__content {
max-height: 50dvh;
overflow-y: auto;
background-color: var(--color-background);
/* Firefox */
scrollbar-width: none;
/* Webkit browsers */
&::-webkit-scrollbar {
display: none;
}
}
.predictive-search-form__content-wrapper {
position: absolute;
top: 100%;
width: 100%;
left: 0;
z-index: var(--layer-raised);
display: flex;
flex-direction: column;
border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
transition: box-shadow var(--animation-speed) var(--animation-easing);
transform: translateZ(0);
will-change: transform, opacity;
overflow: hidden;
@media screen and (max-width: 749px) {
border-radius: 0;
}
@media screen and (min-width: 750px) {
max-height: var(--modal-max-height);
}
}
/* Add new rule to apply bottom padding only when search button exists */
.predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
> .predictive-search-form__content {
padding-block-end: var(--padding-6xl);
}
.predictive-search-form__header-inner {
background: var(--color-background);
border: var(--search-border-width) solid var(--color-border);
color: var(--color-foreground);
border-radius: var(--style-border-radius-popover);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
@media screen and (max-width: 749px) {
border-radius: var(--style-border-radius-inputs);
border: none;
}
}
.predictive-search-form__header-inner:focus-within {
outline-offset: var(--focus-outline-offset);
@media screen and (min-width: 750px) {
outline: var(--focus-outline-width) solid var(--color-primary);
}
}
.predictive-search-form__header {
display: flex;
position: sticky;
top: 0;
z-index: var(--layer-heightened);
width: 100%;
align-items: center;
background-color: var(--color-input-background);
border: var(--search-border-width) solid var(--color-border);
border-radius: var(--style-border-radius-inputs);
@media screen and (max-width: 749px) {
padding: var(--padding-2xs) var(--padding-sm);
}
}
.predictive-search-form__header:focus-within,
.predictive-search-form__header-inner:focus-within,
.predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
outline: none;
box-shadow: none;
/* stylelint-disable-next-line declaration-no-important */
border-color: var(--color-border) !important;
}
input.search-input {
border-radius: var(--style-border-radius-inputs);
padding-block: var(--padding-sm);
font-size: var(--font-size--md);
width: 100%;
color: var(--color-foreground);
padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
background: transparent;
text-overflow: ellipsis;
overflow: hidden;
outline: none;
border: 0;
}
.search-input::placeholder {
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
.search-input,
.search-input:is(:focus, :focus-visible, :focus-within),
.predictive-search-form__header *:is(:focus, :focus-visible) {
outline: none;
box-shadow: none;
}
.search-input:hover {
background-color: transparent;
}
.predictive-search__icon {
position: absolute;
left: var(--margin-xl);
top: auto;
width: var(--icon-size-lg);
height: var(--icon-size-lg);
color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
@media screen and (min-width: 750px) {
left: var(--margin-md);
}
}
.predictive-search__icon > svg {
width: var(--icon-size-md);
height: var(--icon-size-md);
}
.predictive-search__reset-button {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
min-width: var(--minimum-touch-target);
height: var(--minimum-touch-target);
padding: 0;
margin-inline-end: var(--margin-md);
background: transparent;
color: var(--color-foreground);
opacity: 0.68;
transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
visibility var(--animation-speed-medium) var(--animation-timing-fade-out);
&:hover {
color: var(--color-foreground);
}
&:active {
transform: scale(0.9);
transition: transform 100ms var(--animation-timing-active);
}
@media screen and (min-width: 750px) {
margin-inline-end: var(--margin-2xs);
}
}
.predictive-search__reset-button[hidden] {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.predictive-search__reset-button-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--icon-size-lg);
height: var(--icon-size-lg);
transition: background-color var(--animation-speed-medium) ease-in-out,
transform var(--animation-speed-medium) var(--animation-timing-bounce);
border-radius: 50%;
&:hover {
background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
}
}
.predictive-search__reset-button:active .predictive-search__reset-button-icon {
transform: scale(0.85);
transition-timing-function: var(--animation-timing-active);
transition-duration: 100ms;
}
.predictive-search__reset-button svg {
width: var(--icon-size-md);
height: var(--icon-size-md);
}
.predictive-search__reset-button-text {
display: none;
}
.predictive-search__search-button {
margin: auto;
z-index: var(--layer-raised);
transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
transform-origin: center;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
}
&:active {
transform: scale(0.97);
transition: transform 100ms var(--animation-timing-active);
box-shadow: none;
}
}
.predictive-search__close-modal-button {
--button-color: var(--color-foreground);
--button-background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
width: var(--minimum-touch-target);
height: var(--minimum-touch-target);
margin-inline-start: var(--margin-sm);
padding: 0;
box-shadow: none;
&:active {
transform: scale(0.8);
transition: transform 100ms var(--animation-timing-active);
}
.svg-wrapper,
svg {
width: var(--icon-size-xs);
height: var(--icon-size-xs);
}
}
.predictive-search__close-modal-button:hover {
--button-color: var(--color-foreground);
--button-background-color: transparent;
}
/* END_SNIPPET:search-modal */
/* START_SNIPPET:skip-to-content-link (INDEX:272) */
.skip-to-content-link {
position: absolute;
left: -99999px;
}
.skip-to-content-link:focus {
z-index: var(--layer-temporary);
overflow: auto;
width: auto;
height: auto;
padding: var(--padding-lg) var(--padding-4xl);
left: var(--margin-lg);
top: var(--margin-lg);
background-color: var(--color-background);
box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
}
/* END_SNIPPET:skip-to-content-link */