/** Shopify CDN: Minification failed
Line 1631:0 All "@import" rules must come first
Line 2165:0 All "@import" rules must come first
Line 2536:0 All "@import" rules must come first
**/
/* START_SECTION:atelier-builder (INDEX:2) */
.atb { background: var(--atb-bg, #fafaf7); color: var(--atb-text, #1d1d1b); padding: var(--atb-pad-y, 60px) 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 300; }
.atb-shell { max-width: var(--atb-max-w, 1500px); margin: 0 auto; padding: 0 24px; }
@media (min-width: 1200px) {
.atb-shell { max-width: none; padding-left: 14px; padding-right: 14px; }
.atb-grid { grid-template-columns: minmax(0, 2.05fr) minmax(430px, 1fr); gap: 20px; }
}
@media (min-width: 1600px) {
.atb-shell { padding-left: 10px; padding-right: 10px; }
.atb-grid { gap: 16px; }
}
.atb-header { text-align: center; margin-bottom: 36px; }
.atb-eyebrow { font-size: 0.72rem; letter-spacing: 0.3em; color: var(--atb-accent); margin: 0 0 12px; font-weight: 500; }
.atb-title { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; margin: 0 0 12px; letter-spacing: 0.02em; }
.atb-sub { color: var(--atb-muted); max-width: 580px; margin: 0 auto; font-size: 0.95rem; line-height: 1.55; }
.atb-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); gap: 28px; align-items: start; transition: opacity 0.25s; }
.atb-grid.is-locked { opacity: 1; pointer-events: auto; filter: none; }
@media (max-width: 980px) {
/* Mobile layout: stack blocks vertically for stable Safari rendering */
.atb-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.atb-left,
.atb-right {
width: 100%;
min-width: 0;
}
}
/* SIZE BANNER */
.atb-size-banner { background: linear-gradient(180deg, #fff 0%, #faf7ee 100%); border: 1px solid var(--atb-border); border-radius: 8px; padding: 32px 24px; margin-bottom: 24px; transition: all 0.3s; }
.atb-size-banner-prompt { text-align: center; margin-bottom: 20px; }
.atb-size-banner-prompt .atb-eyebrow { margin-bottom: 8px; }
.atb-size-banner-title { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 8px; letter-spacing: 0.01em; }
.atb-size-banner-sub { color: var(--atb-muted); font-size: 0.85rem; margin: 0; }
.atb-size-controls { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.atb-size-input-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 4px; }
.atb-size-input { font-family: inherit; font-size: 1.8rem; font-weight: 300; text-align: center; width: 130px; padding: 12px 10px; border: 1px solid var(--atb-border); border-radius: 6px; background: #fff; outline: none; transition: border-color 0.2s, box-shadow 0.2s; color: var(--atb-text); letter-spacing: 0.04em; -moz-appearance: textfield; appearance: textfield; }
.atb-size-input::-webkit-inner-spin-button,
.atb-size-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.atb-size-input:focus { border-color: var(--atb-text); box-shadow: 0 0 0 3px rgba(29,29,27,0.07); }
.atb-size-input.is-error { border-color: #9f2f21; box-shadow: 0 0 0 3px rgba(159,47,33,0.09); }
.atb-size-unit { min-height: 54px; padding: 0 12px; border: 1px solid var(--atb-border); border-radius: 6px; background: #fff; color: var(--atb-text); font-family: inherit; font-size: 0.9rem; font-weight: 400; cursor: pointer; }
.atb-guide-link { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid var(--atb-border); border-radius: 4px; background: #fff; color: var(--atb-text); cursor: pointer; font-family: inherit; font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.atb-guide-link:hover { border-color: var(--atb-text); background: #faf7ee; }
.atb-size-hint { font-size: 0.75rem; color: var(--atb-muted); text-align: center; margin: 6px 0 0; white-space: pre-line; }
.atb-size-banner-compact { display: none; align-items: center; gap: 14px; }
.atb-size-banner-eyebrow { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--atb-muted); }
.atb-size-banner-current { font-weight: 500; font-size: 0.95rem; }
.atb-size-change { background: transparent; border: 1px solid var(--atb-border); border-radius: 4px; padding: 8px 14px; font-family: inherit; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; margin-left: auto; transition: all 0.2s; }
.atb-size-guide-compact { margin-left: 0; }
.atb-size-change:hover { border-color: var(--atb-text); }
.atb-size-banner.is-compact { padding: 14px 22px; }
.atb-size-banner.is-compact .atb-size-banner-prompt,
.atb-size-banner.is-compact .atb-size-controls,
.atb-size-banner.is-compact .atb-size-hint { display: none; }
.atb-size-banner.is-compact .atb-size-banner-compact { display: flex; }
.atb-primary-cta-wrap { margin: 0 0 22px; display: flex; justify-content: center; }
.atb-add-btn--primary { min-width: min(420px, 100%); }
.atb-primary-cta-wrap--inline { margin: 18px 0 14px; }
.atb-primary-cta-wrap--inline .atb-add-btn--primary { width: 100%; min-width: 0; }
.atb-app-impact {
margin: 6px 0 14px;
}
.atb-app-impact > * + * {
margin-top: 8px;
}
.atb-goodapi-impact {
margin: 10px 0 10px;
}
/* ZOOM CONTROLS */
.atb-circle-view { position: relative; }
.atb-zoom-ctrls { position: absolute; top: 14px; right: 14px; transform: none; display: flex; flex-direction: column; gap: 4px; z-index: 5; align-items: stretch; }
.atb-tool-group-label { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atb-muted); padding: 0 4px 2px; user-select: none; text-align: left; }
.atb-tool-group-label--spaced { margin-top: 8px; }
.atb-zoom-glyph { font-size: 1.05rem; line-height: 1; flex-shrink: 0; min-width: 20px; text-align: center; }
.atb-zoom-glyph--pct { font-size: 0.7rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.atb-zoom-text { font-size: 0.72rem; line-height: 1; flex: 1; text-align: left; white-space: nowrap; }
.atb-zoom-kbd, .atb-select-tool-kbd {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 0.6rem;
letter-spacing: 0.02em;
padding: 2px 5px;
border: 1px solid var(--atb-border);
border-radius: 3px;
background: rgba(0,0,0,0.04);
color: var(--atb-muted);
line-height: 1;
white-space: nowrap;
flex-shrink: 0;
}
.atb-select-tool.is-active .atb-select-tool-kbd,
.atb-zoom-btn.is-active .atb-zoom-kbd { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.85); }
.atb-select-tools { position: absolute; top: 14px; left: 14px; transform: none; display: flex; flex-direction: column; gap: 4px; z-index: 5; align-items: stretch; }
.atb-select-tools-label { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atb-muted); padding: 0 4px 2px; user-select: none; }
.atb-select-tools-label--spaced { margin-top: 8px; }
.atb-select-tool { min-height: 34px; padding: 6px 12px 6px 10px; border-radius: 4px; background: rgba(255,255,255,0.94); border: 1px solid var(--atb-border); cursor: pointer; color: var(--atb-text); display: inline-flex; align-items: center; gap: 8px; transition: all 0.18s; font-family: inherit; }
.atb-select-tool:hover { background: #fff; border-color: var(--atb-text); }
.atb-select-tool.is-active { background: var(--atb-text); border-color: var(--atb-text); color: #fff; }
.atb-select-tool-icon { flex-shrink: 0; }
.atb-select-tool-label { font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; flex: 1; text-align: left; }
/* Same-type mode uses a custom SVG cursor — a magic wand with a sparkly star
at the tip. This is the universal "select similar" icon (Photoshop, Illustrator)
so the user immediately reads the mode. Hotspot is at the star tip (24,6),
the same convention as native magic-wand tools. Fallback to copy cursor on
browsers that reject the data URL. !important is needed because bead
wrappers set inline cursor:grab for the default Move mode. */
.atb-circle-view.atb-mode-same-type,
.atb-circle-view.atb-mode-same-type .atb-svg-bead,
.atb-circle-view.atb-mode-same-type .atb-svg-bead * {
cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 27 L21 11' stroke='%23ffffff' stroke-width='5.2' fill='none'/%3E%3Cpath d='M5 27 L21 11' stroke='%231d1d1b' stroke-width='2.4' fill='none'/%3E%3Cpath d='M25 4 L26.2 8.2 L30.4 9.4 L26.2 10.6 L25 14.8 L23.8 10.6 L19.6 9.4 L23.8 8.2 Z' fill='%23ffd34a' stroke='%231d1d1b' stroke-width='1.4'/%3E%3Ccircle cx='15' cy='5' r='1.1' fill='%23ffd34a' stroke='%231d1d1b' stroke-width='0.8'/%3E%3Ccircle cx='29' cy='18' r='1.1' fill='%23ffd34a' stroke='%231d1d1b' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E") 25 9, copy !important;
}
.atb-circle-view.atb-mode-draw-area { cursor: crosshair; }
.atb-circle-view.atb-mode-draw-area .atb-svg-bead,
.atb-circle-view.atb-mode-draw-area .atb-svg-bead * { cursor: crosshair !important; pointer-events: none; }
.atb-circle-view:not(.atb-mode-same-type):not(.atb-mode-draw-area) .atb-svg-bead.is-group-draggable,
.atb-circle-view:not(.atb-mode-same-type):not(.atb-mode-draw-area) .atb-svg-bead.is-group-draggable .atb-selected-drag-hit { cursor: move !important; pointer-events: all; }
.atb-circle-view.atb-mode-draw-area .atb-svg-bead.is-group-draggable,
.atb-circle-view.atb-mode-draw-area .atb-svg-bead.is-group-draggable .atb-selected-drag-hit { cursor: grab !important; pointer-events: all; }
@media (max-width: 760px) {
.atb-select-tools { top: 50%; left: 10px; transform: translateY(-50%); }
.atb-select-tool { min-height: 32px; padding: 4px 10px; }
.atb-select-tool-label { font-size: 0.66rem; }
}
.atb-zoom-btn {
min-height: 32px;
padding: 5px 8px 5px 10px;
border-radius: 4px;
background: rgba(255,255,255,0.94);
border: 1px solid var(--atb-border);
cursor: pointer;
color: var(--atb-text);
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.18s;
font-family: inherit;
text-align: left;
}
.atb-zoom-btn:hover { background: #fff; border-color: var(--atb-text); }
.atb-zoom-btn.is-active { background: var(--atb-text); border-color: var(--atb-text); color: #fff; }
.atb-zoom-reset .atb-zoom-glyph { font-size: 0.7rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.atb-rotate-ctrls { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.atb-history-ctrls { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--atb-border); }
.atb-rotate-btn { width: 38px; height: 32px; border-radius: 4px; background: rgba(255,255,255,0.92); border: 1px solid var(--atb-border); cursor: pointer; font-family: inherit; font-size: 0.9rem; color: var(--atb-text); padding: 0; transition: all 0.18s; display: flex; align-items: center; justify-content: center; line-height: 1; }
.atb-rotate-btn:hover { background: #fff; border-color: var(--atb-text); }
/* LEFT */
.atb-left { background: var(--atb-panel-bg); border: 1px solid var(--atb-border); border-radius: 6px; padding: 26px; }
@media (min-width: 981px) {
.atb-left { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; }
.atb-left::-webkit-scrollbar { width: 4px; }
.atb-left::-webkit-scrollbar-thumb { background: var(--atb-border); border-radius: 2px; }
}
.atb-preview { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #fdfcf8 0%, #f4f1ea 100%); border-radius: 4px; padding: 12px; position: relative; overflow: hidden; }
.atb-preview::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.04) 100%); pointer-events: none; }
/* WRIST VIEW — large, dominates the left panel */
.atb-circle-view { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 620px; touch-action: none; }
.atb-circle-view.is-dragover .atb-circle-svg { outline: 2px dashed var(--atb-accent); outline-offset: 4px; border-radius: 50%; }
.atb-circle-svg { width: 100%; max-width: 720px; height: auto; position: relative; z-index: 2; }
.atb-svg-length-label { fill: var(--atb-muted); font-size: 9.4px; letter-spacing: 1.2px; text-transform: uppercase; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; }
.atb-svg-length-pill { fill: rgba(255,255,255,0.9); stroke: rgba(229,225,216,0.95); stroke-width: 1; vector-effect: non-scaling-stroke; }
.atb-svg-length-value { fill: var(--atb-text); font-size: 11.5px; letter-spacing: 0.35px; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }
.atb-circle-view.is-panning,
.atb-circle-view.is-rotating { cursor: grabbing; }
.atb-preview-fs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 12px;
right: 12px;
z-index: 12;
min-height: 28px;
min-width: 42px;
padding: 0 10px;
border: 1px solid var(--atb-border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: var(--atb-text);
font-family: inherit;
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
touch-action: manipulation;
}
.atb-preview-fs-btn--close {
min-width: 28px;
padding: 0;
font-size: 1rem;
line-height: 1;
}
.atb-center-design-btn {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 11;
min-height: 26px;
padding: 0 12px;
border: 1px solid var(--atb-border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.95);
color: var(--atb-text);
font-family: inherit;
font-size: 0.64rem;
letter-spacing: 0.02em;
line-height: 1.1;
white-space: nowrap;
cursor: pointer;
touch-action: manipulation;
}
.atb-center-design-btn:active { transform: translateX(-50%) scale(0.98); }
@media (max-width: 980px) {
.atb-left {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
}
.atb-variation-mobile {
display: block;
margin: 0 0 12px;
padding: 10px 12px 12px;
border: 1px solid var(--atb-border);
border-radius: 6px;
background: #fff;
}
.atb-variation-mobile .atb-stone-size-reference { margin: 0 0 10px; }
.atb-variation-mobile .atb-stone-size-reference img { max-height: 190px; object-fit: contain; }
.atb-variation-mobile .atb-variation-note { margin-bottom: 0; }
/* Taller preview on mobile so bracelet/necklace has more vertical room */
.atb-preview {
height: min(100dvh, 980px);
width: 100%;
max-height: none;
margin: 0;
padding: 0;
position: relative;
top: auto;
z-index: 2;
border: 0;
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
}
.atb-preview::before { display: none; }
.atb-circle-view {
min-height: 0;
flex: 1 1 auto;
height: auto;
padding: 8px 0 0;
}
.atb-circle-svg { max-width: 100%; max-height: 100%; }
.atb-select-tools { top: 50%; bottom: auto; transform: translateY(-50%); z-index: 8; }
.atb-zoom-ctrls { top: 50%; bottom: auto; transform: translateY(-50%); z-index: 8; }
.atb-select-tools {
left: 4px;
right: auto;
flex-direction: column;
gap: 1px;
padding: 2px;
border: 1px solid var(--atb-border);
border-radius: 4px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
max-width: min(18vw, 66px);
}
.atb-zoom-ctrls {
right: 4px;
left: auto;
display: flex;
flex-direction: column;
gap: 1px;
padding: 2px;
border: 1px solid var(--atb-border);
border-radius: 4px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
max-width: min(19vw, 68px);
}
.atb-select-tools-label,
.atb-tool-group-label,
.atb-zoom-kbd,
.atb-select-tool-kbd,
.atb-zoom-glyph,
.atb-select-tool-icon { display: none; }
.atb-zoom-btn[data-zoom-reset],
.atb-zoom-btn[data-rotate-reset] { display: none; }
.atb-select-tool,
.atb-zoom-btn {
width: 100%;
min-width: 0;
min-height: 14px;
padding: 0 2px;
gap: 2px;
justify-content: center;
border-radius: 4px;
}
.atb-select-tool-label,
.atb-zoom-text {
display: inline;
font-size: 0.36rem;
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.atb-preview-fs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 4px;
right: 4px;
z-index: 12;
min-height: 14px;
min-width: 32px;
padding: 0 5px;
border: 1px solid var(--atb-border);
border-radius: 5px;
background: rgba(255, 255, 255, 0.94);
color: var(--atb-text);
font-family: inherit;
font-size: 0.42rem;
letter-spacing: 0.07em;
text-transform: uppercase;
touch-action: manipulation;
}
.atb-preview-fs-btn--close {
min-width: 18px;
padding: 0;
font-size: 0.7rem;
line-height: 1;
}
.atb-center-design-btn {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
z-index: 11;
min-height: 16px;
padding: 0 8px;
border: 1px solid var(--atb-border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.95);
color: var(--atb-text);
font-family: inherit;
font-size: 0.44rem;
letter-spacing: 0.03em;
line-height: 1.1;
white-space: nowrap;
cursor: pointer;
touch-action: manipulation;
}
.atb-center-design-btn:active { transform: translateX(-50%) scale(0.98); }
.atb-mobile-palette-host {
display: block;
width: 100%;
min-width: 0;
flex: 0 0 auto;
margin-top: 0;
min-height: 230px;
max-height: 340px;
border-top: 0;
padding-top: 6px;
overflow: visible;
order: 3;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"],
.atb-right[data-atb-mobile-docked="true"] {
display: block;
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
padding: 0;
height: 100%;
width: 100%;
min-width: 0;
max-width: 100%;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-tabs,
.atb-right[data-atb-mobile-docked="true"] .atb-tabs {
border-bottom: 1px solid var(--atb-border);
gap: 4px;
overflow-x: hidden;
width: 100%;
min-width: 0;
scrollbar-width: none;
touch-action: auto;
justify-content: flex-start;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-tabs::-webkit-scrollbar,
.atb-right[data-atb-mobile-docked="true"] .atb-tabs::-webkit-scrollbar { display: none; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-tab,
.atb-right[data-atb-mobile-docked="true"] .atb-tab {
flex: 1 1 0;
min-width: 0;
padding: 5px 6px;
font-size: 0.52rem;
letter-spacing: 0.08em;
border-radius: 999px;
border: 1px solid var(--atb-border);
background: #fff;
text-align: center;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-tab[data-tab="design"],
.atb-right[data-atb-mobile-docked="true"] .atb-tab[data-tab="design"] {
display: inline-flex;
align-items: center;
justify-content: center;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-tab.is-active,
.atb-right[data-atb-mobile-docked="true"] .atb-tab.is-active { background: #1d1d1b; color: #fff; border-color: #1d1d1b; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-panel,
.atb-right[data-atb-mobile-docked="true"] .atb-panel {
padding: 4px 0 0;
width: 100%;
min-width: 0;
max-width: 100%;
max-height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-panel.is-active,
.atb-right[data-atb-mobile-docked="true"] .atb-panel.is-active {
display: flex;
flex-direction: column;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-panel[data-panel="design"],
.atb-right[data-atb-mobile-docked="true"] .atb-panel[data-panel="design"] {
padding-top: 4px;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-mobile-design-panel,
.atb-right[data-atb-mobile-docked="true"] .atb-mobile-design-panel {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-mobile-design-panel .atb-design-id-row,
.atb-right[data-atb-mobile-docked="true"] .atb-mobile-design-panel .atb-design-id-row,
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-mobile-design-panel .atb-order-list,
.atb-right[data-atb-mobile-docked="true"] .atb-mobile-design-panel .atb-order-list {
margin-top: 0 !important;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-filter,
.atb-right[data-atb-mobile-docked="true"] .atb-filter,
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-filter-grid,
.atb-right[data-atb-mobile-docked="true"] .atb-filter-grid,
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-size-help,
.atb-right[data-atb-mobile-docked="true"] .atb-size-help {
display: block;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-size-help,
.atb-right[data-atb-mobile-docked="true"] .atb-size-help {
display: none !important;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-filter,
.atb-right[data-atb-mobile-docked="true"] .atb-filter {
display: flex !important;
flex-wrap: nowrap;
gap: 6px;
width: 100%;
margin: 0 0 6px;
padding: 0 1px 2px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-filter::-webkit-scrollbar,
.atb-right[data-atb-mobile-docked="true"] .atb-filter::-webkit-scrollbar { display: none; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-search,
.atb-right[data-atb-mobile-docked="true"] .atb-search {
flex: 0 0 min(52vw, 170px);
min-width: min(52vw, 170px);
min-height: 26px;
padding: 0 8px;
font-size: 0.56rem;
letter-spacing: 0.04em;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-clear-filters-btn,
.atb-right[data-atb-mobile-docked="true"] .atb-clear-filters-btn {
flex: 0 0 auto;
min-height: 26px;
padding: 0 10px;
font-size: 0.52rem;
letter-spacing: 0.05em;
white-space: nowrap;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-filter-grid,
.atb-right[data-atb-mobile-docked="true"] .atb-filter-grid {
display: flex !important;
flex-wrap: nowrap;
gap: 6px;
width: 100%;
margin: 0 0 6px;
padding: 0 1px 2px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-filter-grid::-webkit-scrollbar,
.atb-right[data-atb-mobile-docked="true"] .atb-filter-grid::-webkit-scrollbar { display: none; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-filter-grid .atb-intent,
.atb-right[data-atb-mobile-docked="true"] .atb-filter-grid .atb-intent,
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-filter .atb-intent,
.atb-right[data-atb-mobile-docked="true"] .atb-filter .atb-intent {
flex: 0 0 auto;
min-width: 120px;
min-height: 26px;
padding: 0 8px;
font-size: 0.54rem;
letter-spacing: 0.03em;
white-space: nowrap;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-panel[data-panel="stones"] .atb-search,
.atb-right[data-atb-mobile-docked="true"] .atb-panel[data-panel="stones"] .atb-search {
flex: 0 0 min(36vw, 122px);
min-width: min(36vw, 122px);
padding: 0 7px;
font-size: 0.52rem;
letter-spacing: 0.03em;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-panel[data-panel="stones"] .atb-clear-filters-btn,
.atb-right[data-atb-mobile-docked="true"] .atb-panel[data-panel="stones"] .atb-clear-filters-btn {
min-height: 24px;
padding: 0 8px;
font-size: 0.48rem;
letter-spacing: 0.04em;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-panel[data-panel="stones"] .atb-filter-grid .atb-intent,
.atb-right[data-atb-mobile-docked="true"] .atb-panel[data-panel="stones"] .atb-filter-grid .atb-intent {
min-width: 90px;
max-width: 112px;
padding: 0 7px;
font-size: 0.5rem;
letter-spacing: 0.02em;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-stone-info,
.atb-right[data-atb-mobile-docked="true"] .atb-stone-info {
display: none !important;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-grid-palette,
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-clasps-grid,
.atb-right[data-atb-mobile-docked="true"] .atb-grid-palette,
.atb-right[data-atb-mobile-docked="true"] .atb-clasps-grid {
display: flex;
gap: 8px;
width: 100%;
min-width: 0;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
max-height: none;
align-items: flex-start;
padding: 1px 1px 4px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
touch-action: pan-x;
overflow-y: visible;
scrollbar-width: none;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-grid-palette::-webkit-scrollbar,
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-clasps-grid::-webkit-scrollbar,
.atb-right[data-atb-mobile-docked="true"] .atb-grid-palette::-webkit-scrollbar,
.atb-right[data-atb-mobile-docked="true"] .atb-clasps-grid::-webkit-scrollbar { display: none; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-item,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-item {
flex: 0 0 clamp(124px, 36vw, 144px);
width: clamp(124px, 36vw, 144px);
scroll-snap-align: start;
align-self: flex-start;
padding: 5px 4px 7px;
gap: 2px;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-name,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-name { font-size: 0.62rem; min-height: 2.45em; margin-top: 1px; white-space: normal; line-height: 1.2; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-shape,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-shape { display: block; font-size: 0.56rem; line-height: 1.15; min-height: 0.95em; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-size,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-size { font-size: 0.58rem; line-height: 1.15; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-item img,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-item img {
width: 56%;
max-width: 60px;
max-height: 60px;
aspect-ratio: 1;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-qty-row,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-qty-row { order: 1; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-item img,
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-item svg,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-item img,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-item svg { order: 2; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-name,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-name { order: 3; font-size: 0.62rem; min-height: 2.35em; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-shape,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-shape { order: 4; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-size,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-size { order: 5; font-size: 0.58rem; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-actions,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-actions { order: 6; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-replace-selected,
.atb-right[data-atb-mobile-docked="true"] .atb-replace-selected { order: 7; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-qty,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-qty { width: 30px; flex-basis: 30px; font-size: 0.62rem; padding: 3px 2px; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-qty-row,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-qty-row { margin-bottom: 2px; gap: 3px; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-add,
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-action,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-add,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-action { min-height: 22px; font-size: 0.5rem; letter-spacing: 0.03em; padding: 0 4px; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-action,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-action { font-size: 0.44rem; letter-spacing: 0.015em; padding: 0 3px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-actions,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-actions {
margin-top: 2px;
gap: 3px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-replace-selected,
.atb-right[data-atb-mobile-docked="true"] .atb-replace-selected {
display: none !important;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-clasp-item,
.atb-right[data-atb-mobile-docked="true"] .atb-clasp-item {
flex: 0 0 min(72vw, 220px);
width: min(72vw, 220px);
scroll-snap-align: start;
padding: 9px 10px;
}
.atb.is-mobile-tab-collapsed .atb-mobile-palette-host {
min-height: 34px;
max-height: 34px;
border-top: none;
padding-top: 0;
margin-top: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
display: flex;
align-items: flex-end;
}
.atb.is-mobile-tab-collapsed .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-panel,
.atb.is-mobile-tab-collapsed .atb-right[data-atb-mobile-docked="true"] .atb-panel {
display: none !important;
}
.atb.is-mobile-tab-collapsed .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-tabs,
.atb.is-mobile-tab-collapsed .atb-right[data-atb-mobile-docked="true"] .atb-tabs {
border-bottom: none;
}
.atb-selection-tools {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: 6 !important;
margin-top: 4px !important;
margin-bottom: 8px !important;
padding: 6px 8px !important;
border-radius: 5px !important;
order: 2;
}
.atb-selection-count {
font-size: 0.54rem;
letter-spacing: 0.08em;
}
.atb-selection-actions {
width: 100% !important;
margin-left: 0 !important;
gap: 4px !important;
}
.atb-selection-btn {
flex: 1;
min-height: 22px;
padding: 4px 6px;
font-size: 0.5rem;
letter-spacing: 0.05em;
}
.atb-svg-length-label { font-size: 8px; letter-spacing: 1px; }
.atb-svg-length-value { font-size: 10px; }
.atb-rotate-hit { stroke-width: 48 !important; }
.atb-rotate-label { font-size: 10px; letter-spacing: 0.1em; }
/* Re-card the meta/design-id/order rows since .atb-left wrapper is dissolved */
.atb-preview-meta {
margin-top: 0;
background: var(--atb-panel-bg);
border: 1px solid var(--atb-border);
border-radius: 6px;
padding: 12px 16px;
}
.atb-design-id-row {
margin-top: 12px;
background: var(--atb-panel-bg);
border: 1px solid var(--atb-border);
border-radius: 6px;
padding: 12px 16px;
}
.atb-design-id-label { font-size: 0.66rem; letter-spacing: 0.08em; }
.atb-design-id-badge { font-size: 0.82rem; }
.atb-order-list {
margin-top: 12px;
border-top: none;
background: var(--atb-panel-bg);
border: 1px solid var(--atb-border);
border-radius: 6px;
padding: 16px;
min-height: 140px;
max-height: 320px !important;
}
.atb-order-item { font-size: 0.9rem; padding: 10px 0; gap: 10px; }
.atb-order-thumb { width: 34px; height: 34px; }
.atb-order-qty { font-size: 0.86rem; width: 50px; flex-basis: 50px; }
.atb-order-size { font-size: 0.76rem; }
.atb-order-remove { min-height: 30px; font-size: 0.68rem; }
.atb-order-empty { font-size: 0.92rem; }
.atb-order-list::-webkit-scrollbar {
width: 6px;
}
}
@media (max-width: 980px) and (orientation: landscape) {
.atb-grid {
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.atb-left {
background: var(--atb-panel-bg);
border: 1px solid var(--atb-border);
border-radius: 6px;
padding: 12px;
}
.atb-right {
display: block;
background: var(--atb-panel-bg);
border: 1px solid var(--atb-border);
border-radius: 6px;
overflow: hidden;
}
.atb-preview {
position: relative;
top: auto;
height: min(78vh, 520px);
min-height: 320px;
border-radius: 4px;
padding: 8px;
gap: 4px;
}
.atb-preview::before { display: none; }
.atb-circle-view {
padding: 18px 4px 4px;
min-height: 0;
}
.atb-mobile-palette-host {
display: none !important;
}
.atb-selection-tools {
position: absolute !important;
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
margin: 0 !important;
order: initial;
}
.atb-grid-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atb-grid-palette--charms, .atb-grid-palette--spacers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atb-mobile-sticky { display: none !important; }
.atb-preview-fs-btn { top: 8px; right: 8px; }
.atb-center-design-btn { top: 8px; }
.atb-tab { font-size: 0.62rem; letter-spacing: 0.1em; padding: 12px 6px; }
.atb-panel { padding: 12px; }
.atb-search, .atb-intent { font-size: 0.72rem; padding: 8px 10px; }
.atb-clear-filters-btn { font-size: 0.58rem; padding: 8px 9px; }
.atb-palette-name { font-size: 0.62rem; }
.atb-palette-shape, .atb-palette-size { font-size: 0.54rem; }
.atb-palette-action, .atb-palette-add { min-height: 22px; font-size: 0.5rem; letter-spacing: 0.03em; }
.atb-palette-action { font-size: 0.46rem; letter-spacing: 0.015em; padding: 0 3px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atb-palette-item { padding: 7px 5px; gap: 2px; }
.atb-palette-item img, .atb-palette-item svg { width: 84%; max-width: 58px; }
.atb-palette-actions { gap: 3px; }
.atb-palette-qty-row { gap: 3px; }
.atb-palette-qty { width: 30px; flex-basis: 30px; font-size: 0.58rem; }
.atb-right[data-atb-mobile-docked="true"] .atb-palette-item {
flex: unset;
width: auto;
}
}
.atb [data-preview-fullscreen-close] { display: none !important; }
.atb.is-preview-fullscreen .atb-preview {
position: fixed;
inset: 0;
width: 100vw;
height: 100dvh;
max-height: 100dvh;
margin: 0;
border-radius: 0;
border: none;
z-index: 9999;
background: linear-gradient(180deg, #fdfcf8 0%, #f4f1ea 100%);
}
.atb.is-preview-fullscreen .atb-circle-view { padding-top: 44px; }
.atb.is-preview-fullscreen .atb-mobile-palette-host {
min-height: 230px;
max-height: 46vh;
max-height: min(46dvh, 380px);
overflow: visible;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-panel,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-panel {
overflow-y: auto;
padding-bottom: 10px;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-grid-palette,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-grid-palette {
padding-bottom: 8px;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-item,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-item {
flex: 0 0 clamp(132px, 35vw, 154px);
width: clamp(132px, 35vw, 154px);
padding: 6px 5px 8px;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-name,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-name {
font-size: 0.64rem;
min-height: 2.55em;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-shape,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-shape {
font-size: 0.58rem;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-size,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-size {
font-size: 0.6rem;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-action,
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-add,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-action,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-add {
min-height: 24px;
font-size: 0.52rem;
letter-spacing: 0.03em;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-action,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-action {
font-size: 0.46rem;
letter-spacing: 0.015em;
padding: 0 3px;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 980px) and (orientation: landscape) {
.atb.is-preview-fullscreen .atb-circle-view {
padding-top: 32px;
}
.atb.is-preview-fullscreen .atb-mobile-palette-host {
min-height: 210px;
max-height: 56vh;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-search,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-search {
min-height: 22px;
padding: 0 6px;
font-size: 0.48rem;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-clear-filters-btn,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-clear-filters-btn,
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-filter-grid .atb-intent,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-filter-grid .atb-intent {
min-height: 22px;
font-size: 0.46rem;
letter-spacing: 0.02em;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-item,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-item {
flex: 0 0 118px;
width: 118px;
padding: 4px 4px 6px;
gap: 1px;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-item img,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-item img {
width: 44%;
max-width: 46px;
max-height: 46px;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-name,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-name {
font-size: 0.56rem;
min-height: 1.45em;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-shape,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-shape,
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-size,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-size {
font-size: 0.5rem;
line-height: 1.05;
min-height: 0;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-qty,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-qty {
width: 26px;
flex-basis: 26px;
font-size: 0.56rem;
padding: 2px 1px;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-qty-row,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-qty-row {
gap: 2px;
margin-bottom: 1px;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-action,
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-add,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-action,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-add {
min-height: 18px;
font-size: 0.44rem;
padding: 0 3px;
}
.atb.is-preview-fullscreen .atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-action,
.atb.is-preview-fullscreen .atb-right[data-atb-mobile-docked="true"] .atb-palette-action {
letter-spacing: 0.015em;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.atb.is-preview-fullscreen [data-preview-fullscreen-open] { display: none !important; }
.atb.is-preview-fullscreen [data-preview-fullscreen-close] { display: inline-flex !important; align-items: center; justify-content: center; }
.atb.is-preview-fullscreen .atb-mobile-sticky { display: none !important; }
body.atb-preview-lock { overflow: hidden; touch-action: none; }
.atb-svg-bead { transition: opacity 0.18s; }
.atb-svg-bead:hover { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18)); }
.atb-bead-dragging { opacity: 0.35; }
/* Translucent preview clones rendered during cluster drag */
.atb-svg-bead--ghost { opacity: 0.5; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); pointer-events: none; }
/* Original beads that ARE being dragged in a cluster fade out so the ghost reads */
.atb-svg-bead.atb-bead-cluster-source { opacity: 0.22; }
.atb-placeholder-bead { fill: rgba(255,255,255,0.78); stroke: var(--atb-accent); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.72; }
.atb-placeholder-dot { fill: var(--atb-border); opacity: 0.9; }
.atb-placeholder-text { fill: var(--atb-muted); font-family: inherit; font-size: 12px; }
.atb-svg-ot-slot { cursor: pointer; opacity: 0.86; pointer-events: all; transition: filter 0.18s ease, opacity 0.18s ease; }
.atb-svg-ot-slot:hover, .atb-svg-ot-slot:focus, .atb-svg-ot-slot.is-armed, .atb-svg-ot-slot.is-drop-target { filter: drop-shadow(0 2px 8px rgba(201,184,138,0.42)); opacity: 1; outline: none; }
.atb-svg-ot-slot-stem, .atb-svg-ot-slot-body { stroke: var(--atb-accent); stroke-dasharray: 5 5; stroke-width: 1.8; transition: fill 0.18s ease, stroke-width 0.18s ease; }
.atb-svg-ot-slot-stem { stroke-linecap: round; }
.atb-svg-ot-slot-body { fill: rgba(255,255,255,0.3); }
.atb-svg-ot-slot-plus { stroke: var(--atb-accent); stroke-linecap: round; stroke-width: 2; }
.atb-svg-ot-slot:hover .atb-svg-ot-slot-body, .atb-svg-ot-slot:focus .atb-svg-ot-slot-body, .atb-svg-ot-slot.is-armed .atb-svg-ot-slot-body, .atb-svg-ot-slot.is-drop-target .atb-svg-ot-slot-body { fill: rgba(255,255,255,0.74); stroke-width: 2.4; }
.atb-svg-ot-pendant { cursor: pointer; pointer-events: all; transition: filter 0.18s ease; }
.atb-svg-ot-pendant:hover, .atb-svg-ot-pendant:focus, .atb-svg-ot-pendant.is-drop-target { filter: drop-shadow(0 2px 8px rgba(201,184,138,0.5)); outline: none; }
.atb-svg-ot-pendant-hit { fill: transparent; pointer-events: all; }
.atb-preview-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: 0.82rem; color: var(--atb-muted); }
.atb-bead-count { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.atb-preview-meta-label { color: var(--atb-muted); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.atb-bead-count [data-length-estimate] { color: var(--atb-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.atb-clear-btn { background: none; border: none; color: var(--atb-muted); cursor: pointer; font-family: inherit; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 0; }
.atb-clear-btn:hover { color: var(--atb-text); text-decoration: underline; }
.atb-order-list { margin-top: 18px; border-top: 1px solid var(--atb-border); padding-top: 18px; max-height: 160px; overflow-y: auto; }
.atb-order-list::-webkit-scrollbar { width: 4px; }
.atb-order-list::-webkit-scrollbar-thumb { background: var(--atb-border); border-radius: 2px; }
.atb-order-empty { color: var(--atb-muted); text-align: center; font-size: 0.85rem; margin: 12px 0; }
.atb-order-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 0.85rem; }
.atb-order-qty { color: var(--atb-text); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; width: 44px; flex: 0 0 44px; text-align: center; padding: 2px 0; background: var(--atb-bg); border: 1px solid var(--atb-border); border-radius: 12px; font-variant-numeric: tabular-nums; }
.atb-order-thumb { width: 28px; height: 28px; flex-shrink: 0; }
.atb-order-thumb img, .atb-order-thumb svg { width: 100%; height: 100%; object-fit: contain; }
.atb-order-name { flex: 1; }
.atb-order-size { color: var(--atb-muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.atb-order-item--ot { border-top: 1px dashed var(--atb-border); margin-top: 5px; padding-top: 12px; }
.atb-order-slot { color: var(--atb-accent); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-align: right; text-transform: uppercase; width: 22px; }
.atb-order-remove { min-height: 26px; padding: 0 8px; border: 1px solid var(--atb-border); border-radius: 3px; background: #fff; color: var(--atb-muted); cursor: pointer; font: inherit; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.atb-order-remove:hover { border-color: var(--atb-text); color: var(--atb-text); }
.atb-selection-tools { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 0; padding: 10px 12px; border: 1px solid var(--atb-border); border-radius: 6px; background: rgba(255,255,255,0.94); backdrop-filter: blur(2px); flex-wrap: wrap; }
.atb-selection-tools[hidden] { display: none; }
.atb-selection-count { color: var(--atb-text); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.atb-selection-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.atb-selection-btn { background: transparent; border: 1px solid var(--atb-border); border-radius: 4px; padding: 7px 10px; color: var(--atb-muted); cursor: pointer; font-family: inherit; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; }
.atb-selection-btn:hover:not(:disabled) { border-color: var(--atb-text); color: var(--atb-text); }
.atb-selection-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.atb-selection-btn--remove { border-color: #d7c0bf; color: #8a3a34; }
.atb-selection-btn--remove:hover:not(:disabled) { border-color: #8a3a34; color: #8a3a34; background: #fff; }
.atb-order-select { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--atb-text); cursor: pointer; }
.atb-order-item.is-selected { background: #fff4c8; outline: 2px solid #d19f00; outline-offset: -1px; border-radius: 4px; padding-left: 6px; padding-right: 6px; }
.atb-svg-bead.is-selected { filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 12px rgba(255,186,0,0.95)); }
.atb-svg-bead.is-selected .atb-svg-select-ring { display: block; }
.atb-svg-select-ring { display: none; fill: rgba(255, 196, 0, 0.24); stroke: #d39a00; stroke-width: 2.4; vector-effect: non-scaling-stroke; pointer-events: none; }
.atb-rotate-handle { cursor: grab; pointer-events: all; }
.atb-rotate-handle.is-dragging { cursor: grabbing; }
.atb-rotate-arc { fill: none; stroke: #1d1d1b; stroke-width: 1.2; opacity: 0.7; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; marker-start: url(#atb-rot-arrow-start); marker-end: url(#atb-rot-arrow-end); }
.atb-rotate-label { fill: #1d1d1b; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.78; pointer-events: all; user-select: none; cursor: grab; }
.atb-rotate-hit { fill: none; stroke: transparent; stroke-width: 34; pointer-events: stroke; }
/* RIGHT */
.atb-right { background: var(--atb-panel-bg); border: 1px solid var(--atb-border); border-radius: 6px; padding: 0; overflow: hidden; }
.atb-tabs { display: flex; border-bottom: 1px solid var(--atb-border); }
.atb-tab { flex: 1; padding: 16px 8px; background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--atb-muted); font-weight: 400; transition: color 0.2s, background 0.2s, transform 0.18s ease; -webkit-tap-highlight-color: transparent; }
.atb-tab[data-tab="design"] { display: none; }
.atb-tab:hover { color: var(--atb-text); }
.atb-tab:active { transform: translateY(1px); background: rgba(0,0,0,0.03); transition-duration: 0.08s; }
.atb-tab.is-active { color: var(--atb-text); border-bottom-color: var(--atb-text); }
.atb-panel { display: none; padding: 22px; }
.atb-panel.is-active { display: block; }
.atb-mobile-design-panel { display: flex; flex-direction: column; gap: 10px; }
.atb-filter { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
.atb-search, .atb-intent { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--atb-border); border-radius: 4px; background: #fafaf7; font-family: inherit; font-size: 0.82rem; color: var(--atb-text); }
.atb-search:focus, .atb-intent:focus { outline: none; border-color: var(--atb-accent); background: #fff; }
.atb-clear-filters-btn { flex: 0 0 auto; background: transparent; border: 1px solid var(--atb-border); border-radius: 4px; padding: 9px 12px; font-family: inherit; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--atb-muted); cursor: pointer; transition: all 0.18s; white-space: nowrap; }
.atb-clear-filters-btn:hover { color: var(--atb-text); border-color: var(--atb-text); background: #fff; }
.atb-filter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.atb-filter-grid .atb-intent { width: 100%; }
@media (min-width: 1100px) { .atb-filter-grid { grid-template-columns: repeat(3, 1fr); } }
.atb-stone-info { margin-top: 14px; border-top: 1px solid var(--atb-border); padding-top: 10px; }
.atb-stone-info summary { cursor: pointer; padding: 6px 0; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--atb-muted); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.atb-stone-info summary::-webkit-details-marker { display: none; }
.atb-stone-info summary::after { content: '+'; color: var(--atb-muted); font-size: 1.1rem; transition: transform 0.2s; }
.atb-stone-info[open] summary::after { content: '-'; }
.atb-stone-info summary:hover { color: var(--atb-text); }
.atb-stone-info[open] summary { color: var(--atb-text); margin-bottom: 12px; }
.atb-stone-info .atb-stone-size-reference,
.atb-stone-info .atb-variation-note { margin-bottom: 10px; }
.atb-size-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.atb-chip { background: #fff; border: 1px solid var(--atb-border); border-radius: 999px; padding: 6px 12px; font-size: 0.7rem; letter-spacing: 0.06em; font-family: inherit; color: var(--atb-muted); cursor: pointer; transition: all 0.18s; }
.atb-chip:hover { color: var(--atb-text); border-color: var(--atb-accent); }
.atb-chip.is-active { background: var(--atb-text); color: #fff; border-color: var(--atb-text); }
.atb-stone-size-reference { margin: 0 0 14px; border: 1px solid var(--atb-border); border-radius: 4px; overflow: hidden; background: #fafaf7; }
.atb-stone-size-reference img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; object-position: center; }
.atb-stone-size-reference figcaption { padding: 10px 12px; border-top: 1px solid var(--atb-border); color: var(--atb-muted); font-size: 0.75rem; line-height: 1.45; }
.atb-variation-note { margin: 0 0 16px; padding: 14px 15px; border: 1px solid #e4d7b9; border-radius: 4px; background: #fffaf0; }
.atb-variation-note span { display: block; margin-bottom: 6px; color: #7a6030; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.atb-variation-note p { margin: 0; color: #5f5748; font-size: 0.8rem; line-height: 1.55; }
.atb-grid-palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
.atb-grid-palette--charms, .atb-grid-palette--spacers { grid-template-columns: repeat(3, 1fr); }
.atb-grid-palette::-webkit-scrollbar { width: 4px; }
.atb-grid-palette::-webkit-scrollbar-thumb { background: var(--atb-border); border-radius: 2px; }
.atb-palette-item { background: #fff; border: 1px solid var(--atb-border); border-radius: 4px; padding: 10px 6px; cursor: grab; text-align: center; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 4px; user-select: none; min-width: 0; -webkit-tap-highlight-color: transparent; }
.atb-palette-item:hover { border-color: var(--atb-accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.atb-palette-item:active, .atb-palette-item.is-pressed { transform: translateY(1px) scale(0.96); box-shadow: inset 0 2px 6px rgba(0,0,0,0.10), 0 0 0 0 rgba(0,0,0,0); border-color: var(--atb-text); transition-duration: 0.08s; }
.atb-palette-item.is-dragging { opacity: 0.4; }
.atb-palette-item img, .atb-palette-item svg { width: 100%; aspect-ratio: 1; object-fit: contain; pointer-events: none; }
.atb-palette-name { font-size: 0.7rem; line-height: 1.25; color: var(--atb-text); margin-top: 4px; min-height: 1.6em; pointer-events: none; }
/* Quantity input + Add button row (primary action of each palette card) */
.atb-palette-qty-row { width: 100%; display: flex; gap: 4px; align-items: stretch; margin-bottom: 4px; cursor: default; }
.atb-palette-qty { width: 42px; flex: 0 0 42px; padding: 5px 4px; border: 1px solid var(--atb-border); border-radius: 3px; font-family: inherit; font-size: 0.78rem; text-align: center; font-variant-numeric: tabular-nums; background: #fff; color: var(--atb-text); -moz-appearance: textfield; }
.atb-palette-qty::-webkit-outer-spin-button, .atb-palette-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.atb-palette-qty:focus { outline: none; border-color: var(--atb-text); }
.atb-palette-add { flex: 1; min-width: 0; min-height: 30px; padding: 0 8px; border: 1px solid var(--atb-text); border-radius: 3px; background: var(--atb-text); color: #fff; font-family: inherit; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease, transform 0.12s ease; -webkit-tap-highlight-color: transparent; }
.atb-palette-add:hover { background: #000; }
.atb-palette-add:active { transform: translateY(1px) scale(0.97); }
.atb-palette-shape { font-size: 0.62rem; color: var(--atb-muted); pointer-events: none; letter-spacing: 0.06em; font-style: italic; line-height: 1.25; min-height: 0.9em; }
.atb-palette-size { font-size: 0.6rem; color: var(--atb-muted); pointer-events: none; letter-spacing: 0.06em; }
.atb-palette-actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 5px; cursor: default; }
.atb-palette-actions--ot { display: none; }
.atb.is-ot-style .atb-palette-actions--ot { display: grid; }
.atb-palette-action { min-width: 0; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border: 1px solid var(--atb-border); border-radius: 3px; background: #fafaf7; color: var(--atb-text); font-family: inherit; font-size: 0.54rem; letter-spacing: 0.06em; line-height: 1.05; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atb-palette-action { transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.18s ease; -webkit-tap-highlight-color: transparent; }
.atb-palette-action:hover { border-color: var(--atb-text); background: #fff; }
.atb-palette-action:active { transform: translateY(1px) scale(0.97); box-shadow: inset 0 2px 4px rgba(0,0,0,0.18); transition-duration: 0.08s; }
.atb-palette-action--primary { background: var(--atb-text); border-color: var(--atb-text); color: #fff; }
.atb-palette-action--primary:hover { background: #000; color: #fff; }
.atb-size-help { color: var(--atb-muted); font-size: 0.85rem; line-height: 1.55; margin: 0 0 16px; }
.atb-size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.atb-size-item { background: #fff; border: 1px solid var(--atb-border); border-radius: 4px; padding: 16px 8px; cursor: pointer; font-family: inherit; transition: transform 0.18s ease, border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.18s ease; -webkit-tap-highlight-color: transparent; }
.atb-size-item:hover { border-color: var(--atb-accent); }
.atb-size-item:active { transform: translateY(1px) scale(0.98); box-shadow: inset 0 2px 6px rgba(0,0,0,0.10); transition-duration: 0.08s; }
.atb-size-item.is-active { border-color: var(--atb-text); background: var(--atb-text); color: #fff; }
.atb-size-label { display: block; font-size: 1rem; font-weight: 500; letter-spacing: 0.1em; }
.atb-size-meta { display: block; font-size: 0.7rem; opacity: 0.7; margin-top: 4px; }
.atb-clasps-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.atb-clasp-item { background: #fff; border: 1px solid var(--atb-border); border-radius: 4px; padding: 14px 16px; cursor: pointer; font-family: inherit; transition: transform 0.18s ease, border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.18s ease; text-align: left; display: flex; flex-direction: column; gap: 4px; -webkit-tap-highlight-color: transparent; }
.atb-clasp-item:hover { border-color: var(--atb-accent); }
.atb-clasp-item:active { transform: translateY(1px) scale(0.99); box-shadow: inset 0 2px 6px rgba(0,0,0,0.10); transition-duration: 0.08s; }
.atb-clasp-item.is-active { border-color: var(--atb-text); background: var(--atb-text); color: #fff; }
.atb-clasp-label { font-size: 0.92rem; font-weight: 500; letter-spacing: 0.04em; }
.atb-clasp-meta { font-size: 0.75rem; opacity: 0.7; }
/* FOOTER — no price; price only shown in confirm modal */
.atb-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 24px; padding: 22px 26px; background: var(--atb-panel-bg); border: 1px solid var(--atb-border); border-radius: 6px; flex-wrap: wrap; }
.atb-footer-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 60%; }
.atb-footer-hint { font-size: 0.78rem; color: var(--atb-muted); line-height: 1.5; }
.atb-footer-right { display: flex; gap: 10px; align-items: center; }
.atb-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: transparent; border: 1px solid var(--atb-border); border-radius: 4px; color: var(--atb-text); cursor: pointer; font-family: inherit; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.2s; }
.atb-share-btn:hover { border-color: var(--atb-text); }
.atb-add-btn { padding: 14px 28px; background: var(--atb-text); color: #fff; border: 1px solid var(--atb-text); border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; transition: all 0.25s; }
.atb-add-btn:hover:not(:disabled) { background: #000; }
.atb-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.atb-product-like { margin-top: 18px; padding: 0 22px 22px; border-top: 1px solid var(--atb-border); }
.atb-variation-mobile { display: none; }
.atb-variation-mobile__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; margin-bottom: 6px; color: #1d1d1b; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--atb-border); }
.atb-variation-mobile__head span:last-child { font-size: 1rem; line-height: 1; color: var(--atb-muted); }
.atb-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; padding: 0; list-style: none; }
.mjpd-benefit { display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 12px 0; color: #333; border-bottom: 1px solid rgba(229, 225, 216, 0.8); }
.mjpd-benefit svg { flex: 0 0 auto; margin-top: 1px; color: #3b3a36; }
.mjpd-benefit span { display: grid; gap: 4px; min-width: 0; }
.mjpd-benefit strong { display: block; color: #1c1c1a; font-family: var(--font-heading--family, sans-serif); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.35; }
.mjpd-benefit small { display: block; color: #6f6d65; font-size: 0.78rem; line-height: 1.5; }
.mjpd-benefit--gift { grid-column: 1 / -1; position: relative; display: block; text-align: center; padding: 18px 16px 20px; margin-top: 2px; border: 1px solid #e5e1d8; background: #f4f3ef; }
.mjpd-benefit--gift svg { position: absolute; top: 19px; left: 50%; flex: 0 0 22px; margin: 0; transform: translateX(-82px); }
.mjpd-benefit--gift span { justify-items: center; max-width: 420px; margin: 0 auto; }
.mjpd-benefit--gift strong { font-size: 0.95rem; }
.mjpd-info-tabs { border-top: 1px solid #e5e5e5; margin: 0 0 28px; }
.atb-info-tabs { margin: 18px 0 0; }
.mjpd-info-tab, .mjpd-info-link { border-bottom: 1px solid #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: 0; 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__summary svg, .mjpd-info-link svg { flex-shrink: 0; transition: transform 0.2s ease; }
.mjpd-info-tab[open] .mjpd-info-tab__chevron { transform: rotate(180deg); }
.mjpd-info-tab__body { padding: 0 0 18px; color: #555; font-size: 0.86rem; line-height: 1.7; }
.mjpd-product-details { border: 1px solid #e5e1d8; background: #fff; }
.mjpd-detail-list { margin: 0; padding: 0; }
.mjpd-detail-list > div { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr); gap: 14px; padding: 13px 15px; border-bottom: 1px solid #ece8dc; }
.mjpd-detail-list > div:last-child { border-bottom: 0; }
.mjpd-detail-list dt { margin: 0; color: #171717; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.mjpd-detail-list dd { margin: 0; color: #5f5f5b; font-size: 0.82rem; line-height: 1.6; }
.atb-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--atb-text); color: #fff; padding: 14px 24px; border-radius: 4px; font-size: 0.85rem; opacity: 0; transition: all 0.4s; pointer-events: none; z-index: 9999; max-width: 90vw; }
.atb-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* CONFIRM MODAL */
.atb-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.atb-modal[hidden] { display: none; }
.atb-modal-backdrop { position: absolute; inset: 0; background: rgba(29, 29, 27, 0.55); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.3s; }
.atb-modal.is-open .atb-modal-backdrop { opacity: 1; }
.atb-modal-content { position: relative; background: #fff; border-radius: 8px; max-width: 460px; width: 100%; padding: 36px 36px 28px; box-shadow: 0 30px 80px rgba(0,0,0,0.25); transform: translateY(20px); opacity: 0; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.atb-modal.is-open .atb-modal-content { transform: translateY(0); opacity: 1; }
.atb-modal-x { position: absolute; top: 14px; right: 16px; background: transparent; border: none; font-size: 26px; color: var(--atb-muted); cursor: pointer; line-height: 1; padding: 4px 8px; }
.atb-modal-x:hover { color: var(--atb-text); }
.atb-modal-title { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-size: 1.7rem; font-weight: 300; margin: 6px 0 24px; letter-spacing: 0.01em; }
.atb-modal-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.atb-modal-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9rem; gap: 16px; }
.atb-modal-label { color: var(--atb-muted); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.atb-modal-label small { display: block; font-size: 0.85em; opacity: 0.75; margin-top: 2px; letter-spacing: 0.04em; text-transform: none; }
.atb-modal-row--major { padding-top: 14px; border-top: 1px solid var(--atb-border); align-items: center; }
.atb-modal-final { font-size: 1.8rem; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--atb-text); }
.atb-modal-fineprint { font-size: 0.75rem; color: var(--atb-muted); margin: 0 0 18px; line-height: 1.5; }
.atb-modal-actions { display: flex; gap: 10px; }
.atb-modal-cancel, .atb-modal-confirm { flex: 1; padding: 14px 18px; font-family: inherit; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; border-radius: 4px; transition: all 0.2s; }
.atb-modal-cancel { background: transparent; border: 1px solid var(--atb-border); color: var(--atb-text); }
.atb-modal-cancel:hover { border-color: var(--atb-text); }
.atb-modal-confirm { background: var(--atb-text); border: 1px solid var(--atb-text); color: #fff; font-weight: 500; }
.atb-modal-confirm:hover:not(:disabled) { background: #000; }
.atb-modal-confirm:disabled { opacity: 0.55; cursor: not-allowed; }
.atb-small-size-warning { margin: 0 0 18px; padding: 15px; border: 1px solid #d9a28c; border-radius: 5px; background: #fff6f1; color: #552315; }
.atb-small-size-warning span { display: block; margin-bottom: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.atb-small-size-warning p { margin: 0 0 12px; color: #6d3626; font-size: 0.82rem; line-height: 1.55; }
.atb-small-size-actions { display: grid; gap: 10px; }
.atb-small-size-confirm { display: flex; align-items: flex-start; gap: 8px; color: #4d2d24; font-size: 0.8rem; line-height: 1.4; cursor: pointer; }
.atb-small-size-confirm input { margin-top: 2px; accent-color: var(--atb-text); }
.atb-length-warning { margin: 0 0 18px; padding: 15px; border: 1px solid #d9a28c; border-radius: 5px; background: #fff6f1; color: #552315; }
.atb-length-warning span { display: block; margin-bottom: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.atb-length-warning p { margin: 0; color: #6d3626; font-size: 0.84rem; line-height: 1.55; }
/* DESIGN ID */
.atb-design-id-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.72rem; color: var(--atb-muted); }
.atb-design-id-label { letter-spacing: 0.12em; text-transform: uppercase; }
.atb-design-id-badge { font-family: 'Courier New', Courier, monospace; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; background: #faf0d9; color: #7a6030; padding: 4px 10px; border-radius: 3px; border: 1px solid #e8d9b0; }
.atb-modal-design-id-block { margin: 16px 0; padding: 14px 16px; background: #faf7ee; border: 1px solid #ede8d8; border-radius: 5px; }
.atb-modal-design-id-block .atb-modal-label { display: block; margin-bottom: 8px; }
.atb-modal-design-id-code { font-family: 'Courier New', Courier, monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.14em; color: #7a6030; background: none; }
/* PRODUCT PAGE SIZE 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; border-bottom: 1px solid #e5e1d8; background: #fafaf7; scrollbar-width: none; 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.is-active { background: #fff; color: #171717; }
.mjpd-guide-tabs-nav { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 18px 10px; border-bottom: 1px solid #ece8dc; background: #fafaf7; }
.mjpd-guide-tabs-arrow { width: 28px; height: 28px; 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: #cfc5af; }
.mjpd-guide-tabs-arrow[disabled] { opacity: 0.35; cursor: default; }
.mjpd-guide-tabs-hint { color: #7a766c; font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; text-align: center; }
.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-content[data-mjpd-remote-url].is-loading [data-atb-remote-content] { opacity: 0.55; }
.mjpd-guide-import { display: grid; gap: 16px; }
.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 { 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-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 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mjpd-guide-steps article { 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; }
.atb-mobile-sticky { display: none; }
/* OUR STONES GUIDE PANEL */
.mjsg-proot { position: fixed; inset: 0; z-index: 99998; pointer-events: none; visibility: hidden; }
.mjsg-proot[aria-hidden="false"] { visibility: visible; pointer-events: auto; }
.mjsg-pbd { position: absolute; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.28s ease; }
.mjsg-proot[aria-hidden="false"] .mjsg-pbd { opacity: 1; }
body.mjsg-locked { overflow: hidden; }
.mjsg-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.36s cubic-bezier(0.32,0.72,0,1); box-shadow: -16px 0 40px rgba(0,0,0,0.08); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif; color: #1d1d1b; }
.mjsg-proot[aria-hidden="false"] .mjsg-panel { transform: translateX(0); }
.mjsg-ptopbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid #e5e5e2; flex-shrink: 0; background: #fff; }
.mjsg-ptopbar-label { font-family: 'Inter', sans-serif; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #1d1d1b; font-weight: 500; }
.mjsg-pclose { background: transparent; border: none; cursor: pointer; color: #1d1d1b; padding: 4px; display: flex; align-items: center; opacity: 0.85; transition: opacity 0.15s; }
.mjsg-pclose:hover { opacity: 1; }
.mjsg-pscroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: #fff; }
.mjsg-pimg-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #f4f3ef; overflow: hidden; }
.mjsg-pimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.mjsg-pimg-wrap.is-hidden { display: none; }
.mjsg-pcontent { padding: 30px 26px 24px; }
.mjsg-pname { font-family: var(--font-heading--family, 'Cormorant Garamond', 'Playfair Display', serif); font-size: 2rem; font-weight: 400; letter-spacing: 0.04em; margin: 0 0 8px; color: #1d1d1b; line-height: 1.15; }
.mjsg-pmeta { font-family: 'Inter', sans-serif; font-size: 0.74rem; color: #8a8a87; margin: 0 0 3px; line-height: 1.55; font-weight: 300; }
.mjsg-pelement { font-family: 'Inter', sans-serif; font-size: 0.65rem; color: #c9b88a; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; margin: 12px 0 0; }
.mjsg-pdiv { border: none; border-top: 1px solid #e5e5e2; margin: 22px 0; }
.mjsg-psection { margin-bottom: 20px; }
.mjsg-plabel { font-family: 'Inter', sans-serif; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: #1d1d1b; font-weight: 500; margin: 0 0 10px; }
.mjsg-pval { font-family: 'Inter', sans-serif; font-size: 0.82rem; color: #1d1d1b; line-height: 1.6; font-weight: 300; }
.mjsg-ptags { display: flex; flex-wrap: wrap; gap: 6px; }
.mjsg-ptag { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid #e5e5e2; font-family: 'Inter', sans-serif; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #1d1d1b; background: #fff; line-height: 1.4; font-weight: 400; }
.mjsg-paffirm { font-family: var(--font-heading--family, 'Cormorant Garamond', 'Playfair Display', serif); font-size: 1.2rem; font-weight: 400; font-style: italic; color: #1d1d1b; line-height: 1.6; margin: 0; padding: 4px 0 4px 18px; border-left: 2px solid #c9b88a; }
.mjsg-ppara { font-family: 'Inter', sans-serif; font-size: 0.84rem; line-height: 1.75; color: #1d1d1b; margin: 0; font-weight: 300; }
.mjsg-pswitch { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 18px; margin-top: 26px; background: transparent; color: #1d1d1b; border: 1px solid #1d1d1b; font-family: 'Inter', sans-serif; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.mjsg-pswitch:hover { background: #1d1d1b; color: #fff; }
.mjsg-pfoot { flex-shrink: 0; padding: 16px 24px; border-top: 1px solid #e5e5e2; background: #fff; }
.mjsg-pcta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 0; background: #1d1d1b; color: #fff; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; transition: opacity 0.18s; }
.mjsg-pcta:hover { opacity: 0.85; }
.mjsg-pcolhead { text-align: center; padding: 4px 4px 28px; margin-bottom: 0; }
.mjsg-pcolhead-eyebrow { display: block; font-family: 'Inter', sans-serif; font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: #8a8a87; font-weight: 400; margin-bottom: 14px; }
.mjsg-pname--col { font-size: 1.95rem; margin: 0 0 10px; }
.mjsg-pcolhead-count { display: block; font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; color: #8a8a87; text-transform: uppercase; }
.mjsg-pempty { text-align: center; padding: 56px 16px; font-family: 'Inter', sans-serif; font-size: 0.82rem; color: #8a8a87; font-weight: 300; }
.mjsg-pprods, .mjsg-ploading { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e5e5e2; margin: 0 -26px; border-top: 1px solid #e5e5e2; border-bottom: 1px solid #e5e5e2; }
.mjsg-pprod { position: relative; background: #ffffff; overflow: hidden; aspect-ratio: 1 / 1.45; display: flex; flex-direction: column; text-decoration: none; color: #1d1d1b; transition: background 0.3s ease; }
.mjsg-pprod:hover { background: #f7f7f5; }
.mjsg-pprod-img { flex: 1; position: relative; overflow: hidden; }
.mjsg-pprod-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease, opacity 0.4s ease; display: block; }
.mjsg-pprod-img-b { opacity: 0; }
.mjsg-pprod:hover .mjsg-pprod-img-a { transform: scale(1.03); }
.mjsg-pprod:hover .mjsg-pprod-img-b { opacity: 1; }
.mjsg-pprod-info { padding: 14px 18px 22px; background: transparent; }
.mjsg-pprod-name { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 10px; font-weight: 400; color: #1d1d1b; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mjsg-pprod-price { font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 400; letter-spacing: 0.01em; color: #1d1d1b; margin: 0; }
.mjsg-pprod-sale { color: #b34040; margin-right: 6px; }
.mjsg-pprod-price s { color: #8a8a87; font-size: 0.76rem; font-weight: 400; }
.mjsg-pskel { aspect-ratio: 1 / 1.45; background: linear-gradient(90deg, #f4f3ef 0%, #fafaf8 50%, #f4f3ef 100%); background-size: 200% 100%; animation: mjsg-shimmer 1.4s linear infinite; }
@keyframes mjsg-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (max-width: 540px) {
.atb-shell { padding-bottom: 90px; }
.atb-product-like { padding: 0 16px 16px; }
.atb-variation-mobile { display: block; margin: 0 0 12px; padding: 10px 12px 12px; border: 1px solid var(--atb-border); border-radius: 6px; background: #fff; }
.atb-variation-mobile .atb-stone-size-reference { margin: 0 0 10px; }
.atb-variation-mobile .atb-stone-size-reference img { max-height: 190px; object-fit: contain; }
.atb-variation-mobile .atb-variation-note { margin-bottom: 0; }
.atb-primary-cta-wrap--inline { margin: 14px 0 12px; }
.atb-grid-palette { grid-template-columns: repeat(3, 1fr); }
.atb-grid-palette--charms, .atb-grid-palette--spacers { grid-template-columns: repeat(2, 1fr); }
.atb-footer { flex-direction: column; align-items: stretch; }
.atb-footer-left { max-width: 100%; }
.atb-footer-right { justify-content: flex-start; }
.atb-add-btn { flex: 1; }
.atb-size-banner-compact { flex-wrap: wrap; }
.atb-size-change { margin-left: 0; }
.atb-benefits { grid-template-columns: 1fr; }
.mjpd-benefit--gift { grid-column: auto; }
.mjpd-detail-list > div { grid-template-columns: 1fr; gap: 6px; }
.mjpd-guide-panel, .mjsg-panel { width: 100vw; }
.mjpd-guide-tabs-nav { padding: 8px 12px 10px; }
.mjpd-guide-tabs-hint { font-size: 0.62rem; letter-spacing: 0.06em; }
.mjsg-pcontent { padding: 24px 20px 18px; }
.mjsg-pname { font-size: 1.7rem; }
.mjsg-pname--col { font-size: 1.65rem; }
.mjsg-pprods, .mjsg-ploading { margin: 0 -20px; }
.mjsg-pprod-info { padding: 12px 14px 16px; }
.mjpd-guide-head { padding: 22px 20px 16px; }
.mjpd-guide-scroll { padding: 20px 18px 28px; }
.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-steps, .mjpd-guide-formula { grid-template-columns: 1fr; }
.mjpd-guide-formula span { text-align: left; }
.atb-mobile-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483100; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(250, 248, 244, 0.96); border-top: 1px solid #e5e1d8; backdrop-filter: blur(6px); }
.atb-mobile-sticky .atb-add-btn { width: 100%; min-height: 48px; letter-spacing: 0.12em; font-size: 0.76rem; }
}
@media (max-width: 980px) {
.atb-design-id-row {
margin-top: 12px !important;
padding: 12px 16px !important;
}
.atb-order-list {
margin-top: 12px !important;
min-height: 140px !important;
max-height: 320px !important;
padding: 16px !important;
}
}
/* Late mobile hotfixes:
Keep these at the end so they override earlier duplicated rules. */
@media (max-width: 980px) {
.atb-shell {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (max-width: 980px) and (orientation: portrait) {
.atb-preview {
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.atb-circle-view {
padding: 0 !important;
min-height: 0 !important;
}
.atb-select-tools {
top: 50% !important;
left: 2px !important;
transform: translateY(-50%) !important;
max-width: 58px !important;
}
.atb-zoom-ctrls {
top: 50% !important;
right: 2px !important;
transform: translateY(-50%) !important;
max-width: 58px !important;
}
.atb-select-tool,
.atb-zoom-btn {
min-height: 13px !important;
padding: 0 2px !important;
border-radius: 3px !important;
}
.atb-select-tool-label,
.atb-zoom-text {
font-size: 0.34rem !important;
letter-spacing: 0.01em !important;
}
.atb-selection-tools[hidden] {
display: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
}
.atb-selection-tools:not([hidden]) {
margin: 4px 0 6px !important;
}
.atb-mobile-palette-host {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
min-height: 220px !important;
max-height: min(40dvh, 320px) !important;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-tabs,
.atb-right[data-atb-mobile-docked="true"] .atb-tabs {
margin-top: 0 !important;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-item,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-item {
min-height: 186px !important;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-name,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-name {
min-height: 2.6em !important;
font-size: 0.66rem !important;
line-height: 1.2 !important;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-shape,
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-size,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-shape,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-size {
min-height: 1.05em !important;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-action,
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-add,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-action,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-add {
min-height: 24px !important;
font-size: 0.54rem !important;
padding: 0 6px !important;
white-space: nowrap !important;
}
.atb-mobile-palette-dock[data-atb-mobile-docked="true"] .atb-palette-action,
.atb-right[data-atb-mobile-docked="true"] .atb-palette-action {
font-size: 0.44rem !important;
letter-spacing: 0.015em !important;
padding: 0 3px !important;
line-height: 1 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
@media (max-width: 980px) and (orientation: landscape) {
.atb-shell {
padding-left: 4px !important;
padding-right: 4px !important;
}
.atb-grid {
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
gap: 8px !important;
}
.atb-left {
padding: 6px !important;
border: 0 !important;
background: transparent !important;
}
.atb-preview {
height: min(88dvh, 560px) !important;
min-height: 320px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}
.atb-circle-view {
padding: 0 !important;
}
.atb-right {
padding: 0 !important;
}
.atb-tabs {
overflow-x: auto !important;
}
.atb-panel {
padding: 10px !important;
}
.atb-filter {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin: 0 0 8px !important;
}
.atb-filter-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
margin-bottom: 10px !important;
}
.atb-grid-palette,
.atb-grid-palette--charms,
.atb-grid-palette--spacers {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
max-height: min(50dvh, 330px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 2px !important;
}
.atb-palette-item {
min-height: 170px !important;
padding: 8px 6px !important;
gap: 3px !important;
}
.atb-palette-item img,
.atb-palette-item svg {
width: min(72px, 72%) !important;
max-width: 72px !important;
max-height: 72px !important;
}
.atb-palette-name {
font-size: 0.68rem !important;
min-height: 2.6em !important;
line-height: 1.2 !important;
}
.atb-palette-shape,
.atb-palette-size {
font-size: 0.58rem !important;
line-height: 1.2 !important;
}
.atb-palette-qty {
width: 32px !important;
flex-basis: 32px !important;
font-size: 0.62rem !important;
}
.atb-palette-action,
.atb-palette-add {
min-height: 24px !important;
font-size: 0.56rem !important;
padding: 0 6px !important;
}
.atb-palette-action {
font-size: 0.46rem !important;
letter-spacing: 0.015em !important;
padding: 0 3px !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.atb-palette-actions {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 4px !important;
}
}
/* END_SECTION:atelier-builder */
/* 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-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-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_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 */