/* =====================================================================================================
   DESIGNER, STEP 1 "Quick Edit" (CHG-013) - design: Designer.dc.html.
   CSS ONLY: restyles the Designbuy React editor (#root .App .main-quick-edit); no template, script or behaviour changes.
   The editor uses Tailwind-style utility classes, so the rules below hook onto its stable structural classes / ids
   (.main-quick-edit, .quick-edit-right-panel, #rightMenu, .layer-main, #mps-save-quick-editor ...).
   Scope: pages that contain .main-quick-edit. Tokens (--bs-*) come from bluesprings.css.
   ===================================================================================================== */
body.catalog-product-view:has(.main-quick-edit), body.catalog-product-view:has(.main-quick-edit) .page-wrapper { background: var(--bs-cream); color: var(--bs-ink); font-family: var(--bs-font-text); }
body.catalog-product-view:has(.main-quick-edit) .breadcrumbs { max-width: 1488px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 24px 24px 0; font-size: 14px; color: var(--bs-muted); background: transparent; }
body.catalog-product-view:has(.main-quick-edit) .breadcrumbs ul.items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.catalog-product-view:has(.main-quick-edit) .breadcrumbs li.item { display: flex; gap: 8px; margin: 0; padding: 0; font-size: 14px; line-height: normal; color: var(--bs-ink); }
body.catalog-product-view:has(.main-quick-edit) .breadcrumbs li.item:not(:last-child)::after { content: "/"; color: var(--bs-muted); margin: 0; padding: 0; font-size: 14px; line-height: normal; }
body.catalog-product-view:has(.main-quick-edit) .breadcrumbs li.item a, body.catalog-product-view:has(.main-quick-edit) .breadcrumbs li.item a:hover { color: var(--bs-muted); text-decoration: none; font-size: 14px; line-height: normal; font-family: var(--bs-font-text); }
body.catalog-product-view:has(.main-quick-edit) .breadcrumbs li.item strong { font-weight: 400; font-size: 14px; line-height: normal; font-family: var(--bs-font-text); }
body.catalog-product-view:has(.main-quick-edit) .page-main { max-width: 1488px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 20px 24px 80px; }
body.catalog-product-view:has(.main-quick-edit) .page-main .columns { padding: 0 !important; margin: 0 !important; max-width: none; width: 100%; float: none; }
body.catalog-product-view:has(.main-quick-edit) .page-main .columns > .column.main { padding: 0; margin: 0; max-width: none; width: 100%; float: none; }
body.catalog-product-view:has(.main-quick-edit) #root, body.catalog-product-view:has(.main-quick-edit) #root .App { width: 100%; max-width: none; padding: 0; margin: 0; }

/* two columns: preview stage (white card) | design panel */
body.catalog-product-view .main-quick-edit { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; width: 100%; max-width: none; padding: 0; margin: 0; box-sizing: border-box; }
body.catalog-product-view .main-quick-edit > div:first-child { flex: 999 1 560px; min-width: 0; width: auto; height: auto; background: #FFFFFF; border-radius: 28px; padding: clamp(20px, 3vw, 40px); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 24px; position: relative; }
body.catalog-product-view .main-quick-edit > div:first-child > div:first-child { width: 100%; margin: 0; padding: 0; justify-content: center; text-align: center; font-family: var(--bs-font-display); font-weight: 500; font-size: clamp(24px, 2vw, 30px); line-height: 1.2; color: var(--bs-ink); text-transform: none; }
body.catalog-product-view .main-quick-edit > div:first-child > div:first-child * { font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-transform: none; }
body.catalog-product-view .main-quick-edit .quick-edit-canvas { width: 100%; max-width: 100%; margin: 0; }
body.catalog-product-view .main-quick-edit .quick-edit-canvas .canvas-container { max-width: 100%; margin: 0 auto; }
body.catalog-product-view .main-quick-edit > div:first-child > div:last-child:not(.quick-edit-canvas) { width: min(560px, 100%); height: auto; margin: 0; padding: 0; }
body.catalog-product-view .main-quick-edit > div:first-child > div:last-child:not(.quick-edit-canvas) > div, body.catalog-product-view .main-quick-edit > div:first-child > div:last-child:not(.quick-edit-canvas) img { width: 100%; height: auto; max-width: 100%; }

/* right panel */
body.catalog-product-view .quick-edit-right-panel { flex: 1 1 380px; width: auto; max-width: 460px; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; }
body.catalog-product-view .quick-edit-right-panel hr { display: none; }
body.catalog-product-view .quick-edit-right-panel .description-section { background: #FFFFFF; border-radius: 24px; padding: 20px 22px; margin: 0; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; height: auto; }
body.catalog-product-view .quick-edit-right-panel .description-section > div { margin: 0; padding: 0; width: auto; height: auto; position: static; }

/* ---- price / availability card (Training video link moves to the bottom of it) ---- */
body.catalog-product-view .quick-edit-right-panel .description-section { flex-direction: column; }
body.catalog-product-view .quick-edit-right-panel .description-section > div:first-child { order: 3; margin-top: 4px; }
body.catalog-product-view .quick-edit-right-panel .description-section > div:first-child > div { background: none; width: auto; height: auto; border-radius: 0; margin: 0; }
body.catalog-product-view .quick-edit-right-panel .description-section > div:first-child button { height: 36px; width: auto; padding: 0 16px; border: 1px solid var(--bs-navy); border-radius: 999px; background: #FFFFFF; color: var(--bs-navy); font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; text-transform: none; cursor: pointer; }
body.catalog-product-view .quick-edit-right-panel .description-section > div:first-child button:hover { background: var(--bs-sky); }
body.catalog-product-view .quick-edit-right-panel .description-section > div:nth-child(2) { order: 1; display: flex; flex-direction: column; gap: 6px; }
body.catalog-product-view .quick-edit-right-panel .description-section > div:nth-child(2) > div { margin: 0 !important; padding: 0; width: auto; height: auto; position: static; }
body.catalog-product-view .quick-edit-right-panel .description-section > div:nth-child(2) > div > div { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; padding: 0; }
body.catalog-product-view .quick-edit-right-panel .description-section label { font-family: var(--bs-font-text); text-transform: none; }
body.catalog-product-view .quick-edit-right-panel .description-section .fs-30, body.catalog-product-view .quick-edit-right-panel .description-section .fs-30 label { font-family: var(--bs-font-display); font-size: 36px; font-weight: 600; color: var(--bs-rust); line-height: 1; padding: 0; margin: 0; }
body.catalog-product-view .quick-edit-right-panel .description-section h5 { display: block; margin: 0; padding: 0; font-family: var(--bs-font-text); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--bs-ink-2); }
body.catalog-product-view .quick-edit-right-panel .description-section .absolute { position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; width: auto; height: auto; }
body.catalog-product-view .quick-edit-right-panel .description-section .absolute > div { margin: 0; padding: 0; width: auto; height: auto; position: static; }
body.catalog-product-view .quick-edit-right-panel .description-section .absolute label, body.catalog-product-view .quick-edit-right-panel .description-section .absolute span { font-size: 14px; font-weight: 400; line-height: normal; color: var(--bs-ink-2); padding: 0; margin: 0; }
body.catalog-product-view .quick-edit-right-panel .description-section .absolute .black label { color: var(--bs-ink-2); }
body.catalog-product-view .quick-edit-right-panel .description-section .absolute .w-full label { color: #1F6B3A; font-weight: 700; }
body.catalog-product-view .quick-edit-right-panel .description-section .absolute .w-full label::before { content: "✓ "; }
body.catalog-product-view .quick-edit-right-panel .description-section .absolute span.font-bold { font-weight: 400; }
body.catalog-product-view .quick-edit-right-panel .description-section .absolute span.yellow { color: var(--bs-ink); font-weight: 700; }

/* ---- panel card: eyebrow + numbered accordion headers ---- */
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col { background: #FFFFFF; border: 0; border-radius: 24px; padding: 10px; box-sizing: border-box; align-items: stretch; width: 100%; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col > div:first-child { background: none; display: flex; gap: 8px; padding: 10px 12px 4px; width: auto; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col > div:first-child > div { width: auto; margin: 0; padding: 0; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col > div:first-child label { font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; line-height: normal; color: var(--bs-muted); text-transform: uppercase; margin: 0; padding: 0; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col > div:first-child > div:nth-child(2) > div::before { content: "·"; margin-right: 8px; color: var(--bs-muted); }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col > div.w-\[90\%\] { width: 100%; }
body.catalog-product-view .quick-edit-right-panel .panels-wrapper { max-height: none; overflow: visible; padding: 0; }
body.catalog-product-view .quick-edit-right-panel #rightMenu { padding: 0; display: flex; flex-direction: column; gap: 6px; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main { height: auto; min-height: 48px; padding: 8px 14px 8px 0; margin: 0; background: #FFFFFF; color: var(--bs-ink); border: 0; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main > div:first-child { padding-left: 12px; display: flex; align-items: center; gap: 12px; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main .fs-16 { width: 28px; height: 28px; padding: 0; margin: 0; border-radius: 999px; background: #E9E3DA; color: var(--bs-ink); display: flex; align-items: center; justify-content: center; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main span:not(.fs-16) { font-family: var(--bs-font-text); font-size: 15px; font-weight: 700; line-height: normal; color: var(--bs-ink); text-transform: capitalize; padding: 0; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main svg { width: 14px; height: 14px; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main svg path { stroke: var(--bs-muted); fill: none; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main:has(+ div:not(.layer-main)) { background: var(--bs-cream); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -6px; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main:has(+ div:not(.layer-main)) .fs-16 { background: var(--bs-navy); color: #FFFFFF; }
body.catalog-product-view .quick-edit-right-panel #rightMenu > div:not(.layer-main):not(.mt-\[10px\]) { background: var(--bs-cream); border: 0; border-radius: 0 0 16px 16px; padding: 0 14px 16px; width: auto; box-sizing: border-box; max-width: 100%; }
body.catalog-product-view .quick-edit-right-panel #rightMenu h6 { margin: 8px 0 0; padding: 10px 12px 4px; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--bs-muted); text-transform: uppercase; }
body.catalog-product-view .quick-edit-right-panel #rightMenu > div.mt-\[10px\] { background: none; padding: 8px 0 0; border: 0; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .black, body.catalog-product-view .quick-edit-right-panel #rightMenu label { font-family: var(--bs-font-text); color: var(--bs-ink); }
body.catalog-product-view .quick-edit-right-panel #rightMenu label { font-size: 13px; font-weight: 600; }
body.catalog-product-view .quick-edit-right-panel #rightMenu input[type="text"] { height: 44px !important; width: 100%; box-sizing: border-box; border: 1px solid #CFC7BA; border-radius: 10px; padding: 0 12px; margin-top: 4px; font-family: var(--bs-font-text); font-size: 15px; color: var(--bs-ink); background: #FFFFFF; box-shadow: none; }
body.catalog-product-view .quick-edit-right-panel #rightMenu input[type="text"]:focus { outline: 2px solid var(--bs-navy); outline-offset: 1px; border-color: var(--bs-navy); }
body.catalog-product-view .quick-edit-right-panel #rightMenu .border.rounded.h-\[31px\], body.catalog-product-view .quick-edit-right-panel #rightMenu .rounded.border { border: 1px solid #CFC7BA; border-radius: 10px; background: #FFFFFF; height: 44px; }
body.catalog-product-view .quick-edit-right-panel #rightMenu button { font-family: var(--bs-font-text); }

/* ---- Save / Print / Download, Next step, mode buttons ---- */
body.catalog-product-view .quick-edit-right-panel > div:has(#mps-save-quick-editor) { height: auto; }
body.catalog-product-view .quick-edit-right-panel > div:has(#mps-save-quick-editor) > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; width: 100%; }
body.catalog-product-view .quick-edit-right-panel > div:has(#mps-save-quick-editor) > div > div { padding: 0; width: auto; height: auto; }
body.catalog-product-view .quick-edit-right-panel > div:has(#mps-save-quick-editor) > div > div > div { width: 100%; height: auto; background: none; border-radius: 0; }
body.catalog-product-view .quick-edit-right-panel > div:has(#mps-save-quick-editor) button { width: 100%; height: 44px; border: 1px solid #CFC7BA; border-radius: 999px; background: #FFFFFF; color: var(--bs-ink); font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: normal; cursor: pointer; margin: 0; padding: 0; }
body.catalog-product-view .quick-edit-right-panel > div:has(#mps-save-quick-editor) button:hover { background: var(--bs-sky); }
body.catalog-product-view .quick-edit-right-panel > div:has(button span.fs-12) { margin: 0; padding: 0; width: 100%; }
body.catalog-product-view .quick-edit-right-panel > div:has(button span.fs-12) > div { width: 100%; }
body.catalog-product-view .quick-edit-right-panel > div:has(button span.fs-12) button { width: 100%; margin: 0; height: auto; padding: 18px; border: 0; border-radius: 999px; background: var(--bs-rust); color: #FFFFFF; font-family: var(--bs-font-text); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-transform: none; }
body.catalog-product-view .quick-edit-right-panel > div:has(button span.fs-12) button:hover { background: #9A4515; }
body.catalog-product-view .quick-edit-right-panel > div:has(button span.fs-12) button span { font-size: 18px; font-weight: 700; padding: 0; color: #FFFFFF; text-transform: none; }
body.catalog-product-view .quick-edit-right-panel > div:has(button span.fs-12) button::after { content: "→"; }
body.catalog-product-view .quick-edit-right-panel > div.mt-\[10px\], body.catalog-product-view .quick-edit-right-panel > div.mt-\[10px\].lg\:mt-\[10px\] { background: #FFFFFF; margin: 0; padding: 16px 18px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; box-sizing: border-box; }
body.catalog-product-view .quick-edit-right-panel > div.mt-\[10px\] > div, body.catalog-product-view .quick-edit-right-panel > div.mt-\[10px\] > div > div { width: 100%; margin: 0; padding: 0; float: none; }
body.catalog-product-view .quick-edit-right-panel > div.mt-\[10px\] button { width: 100%; margin: 0; height: 46px; border: 0; border-radius: 999px; background: var(--bs-navy); color: #FFFFFF; font-family: var(--bs-font-text); font-size: 15px; font-weight: 700; text-transform: none; cursor: pointer; }
body.catalog-product-view .quick-edit-right-panel > div.mt-\[10px\] button:hover { background: #17304F; }
body.catalog-product-view .quick-edit-right-panel > div.mt-\[10px\] p { margin: 0; font-family: var(--bs-font-text); font-size: 14px; line-height: 1.5; color: var(--bs-ink-2); text-align: left; }
body.catalog-product-view .quick-edit-right-panel > div.mt-\[10px\]:last-of-type button { background: #FFFFFF; color: var(--bs-ink); border: 1px solid #CFC7BA; }
body.catalog-product-view .quick-edit-right-panel > div.mt-\[10px\]:first-of-type { border-radius: 22px 22px 0 0; padding-bottom: 6px; }
body.catalog-product-view .quick-edit-right-panel > div.mt-\[10px\]:last-of-type { border-radius: 0 0 22px 22px; margin-top: -14px; padding-top: 6px; }

/* ---- pass 3: eyebrow on one line ---- */
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col > div:first-child { flex-wrap: nowrap; align-items: center; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col > div:first-child > div { flex: 0 0 auto; height: auto; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col > div:first-child > div > div { width: auto; height: auto; padding: 0; margin: 0; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col > div:first-child label { white-space: nowrap; display: inline; height: auto; width: auto; }

/* ---- pass 4: closed vs open accordion sections, action row alignment ---- */
body.catalog-product-view .quick-edit-right-panel #rightMenu > div[class~="h-[0px]"] { display: none; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main:has(+ div:not(.layer-main)) { background: #FFFFFF; border-radius: 16px; margin-bottom: 0; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main:has(+ div:not(.layer-main)) .fs-16 { background: #E9E3DA; color: var(--bs-ink); }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main:has(+ div:not(.layer-main):not([class~="h-[0px]"])) { background: var(--bs-cream); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -6px; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main:has(+ div:not(.layer-main):not([class~="h-[0px]"])) .fs-16 { background: var(--bs-navy); color: #FFFFFF; }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main:has(+ div:not(.layer-main):not([class~="h-[0px]"])) svg { transform: rotate(180deg); }
body.catalog-product-view .quick-edit-right-panel #rightMenu .layer-main { border-bottom: 0; }
body.catalog-product-view .quick-edit-right-panel #rightMenu * { scrollbar-width: thin; }
body.catalog-product-view .quick-edit-right-panel > div:has(#mps-save-quick-editor) > div > div > div { margin: 0; padding: 0; }

/* ---- pass 5: stray yellow rule under the last accessories header ---- */
body.catalog-product-view .quick-edit-right-panel #rightMenu .border-quick-edit { border-color: transparent; }
body.catalog-product-view .quick-edit-right-panel #rightMenu > div.mt-\[10px\] > div[class~="h-[0px]"], body.catalog-product-view .quick-edit-right-panel #rightMenu > div.mt-\[10px\] > div.border-quick-edit { border: 0; }

/* ---- pass 6: narrow screens - fit the 800px design canvas into the stage card (fabric maps pointer positions through CSS scaling) ---- */
@media (max-width: 880px) {
  body.catalog-product-view .main-quick-edit > div:first-child { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  body.catalog-product-view .main-quick-edit .quick-edit-canvas { width: 100%; max-width: 100%; height: auto; }
  body.catalog-product-view .main-quick-edit .quick-edit-canvas .canvas-container { display: grid !important; width: 100% !important; height: auto !important; max-width: 100%; position: relative !important; }
  body.catalog-product-view .main-quick-edit .quick-edit-canvas .canvas-container canvas { grid-area: 1 / 1; position: static !important; width: 100% !important; height: auto !important; max-width: 100%; }
  body.catalog-product-view .main-quick-edit > div:first-child img { max-width: 100%; height: auto; }
}

/* ---- pass 7: DIMENSIONS toggle as an outline pill ---- */
body.catalog-product-view .main-quick-edit > div:first-child .w-full.float-left button { background: #FFFFFF; color: var(--bs-ink); border: 1px solid #CFC7BA; border-radius: 999px; height: 36px; padding: 0 18px; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; width: auto; margin: 0; }
body.catalog-product-view .main-quick-edit > div:first-child .w-full.float-left button:hover { background: var(--bs-sky); }
body.catalog-product-view .main-quick-edit > div:first-child .w-full.float-left > div { width: auto; height: auto; margin: 8px 0 0 0; }
body.catalog-product-view .main-quick-edit > div:first-child .w-full.float-left > div > div { background: none; height: auto; width: auto; }

/* ---- pass 8: designer confirmation dialogs (Customize Design / Expert Designer / ...) ---- */
body.catalog-product-view .main-quick-edit > .fixed { background: rgba(22, 32, 43, 0.55); z-index: 100050; padding: 16px; }
body.catalog-product-view .main-quick-edit > .fixed > div { width: 520px; max-width: 100%; border: 0; border-radius: 24px; background: #FFFFFF; box-shadow: 0 24px 60px rgba(22, 32, 43, 0.35); overflow: hidden; font-family: var(--bs-font-text); color: var(--bs-ink); }
body.catalog-product-view .main-quick-edit > .fixed > div > div:first-child { background: var(--bs-cream); padding: 18px 56px 14px 28px; box-sizing: border-box; }
body.catalog-product-view .main-quick-edit > .fixed > div > div:first-child header { background: none; padding: 0; font-family: var(--bs-font-display); font-size: 22px; font-weight: 600; color: var(--bs-ink); }
body.catalog-product-view .main-quick-edit > .fixed > div > div:first-child > span { top: 14px; right: 18px; width: 32px; height: 32px; padding: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--bs-ink-2); }
body.catalog-product-view .main-quick-edit > .fixed > div > div:first-child > span:hover { background: var(--bs-sky); }
body.catalog-product-view .main-quick-edit > .fixed > div h3, body.catalog-product-view .main-quick-edit > .fixed > div h3 p { font-family: var(--bs-font-text); font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--bs-ink-2); padding: 0; }
body.catalog-product-view .main-quick-edit > .fixed > div h3 { padding: 24px 28px 6px; margin: 0; }
body.catalog-product-view .main-quick-edit > .fixed > div > div:last-child > div:last-child { width: 100%; padding: 16px 28px 28px; box-sizing: border-box; display: flex; flex-direction: row-reverse; justify-content: center; gap: 12px; margin: 0; }
body.catalog-product-view .main-quick-edit > .fixed > div > div:last-child > div:last-child > div { margin: 0; min-width: 130px; height: 46px; padding: 0 24px; border-radius: 999px; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; justify-content: center; box-sizing: border-box; }
body.catalog-product-view .main-quick-edit > .fixed > div > div:last-child > div:last-child > div:first-child { background: var(--bs-navy); color: #FFFFFF; border: 1px solid var(--bs-navy); }
body.catalog-product-view .main-quick-edit > .fixed > div > div:last-child > div:last-child > div:first-child:hover { background: #17304F; }
body.catalog-product-view .main-quick-edit > .fixed > div > div:last-child > div:last-child > div:last-child { background: #FFFFFF; color: var(--bs-ink); border: 1px solid #CFC7BA; }
body.catalog-product-view .main-quick-edit > .fixed > div > div:last-child > div:last-child > div:last-child:hover { background: var(--bs-sky); }


/* =====================================================================================================
   DESIGNER, "Customize Design" mode (?step=customize) - same CSS-only approach; scope: pages containing .main-section-body
   toolbar (navy) | spec rail (white card) | canvas stage (white card) | design panel (same rules as Quick Edit, copied below)
   ===================================================================================================== */
body.catalog-product-view:has(.App .main-section-body), body.catalog-product-view:has(.App .main-section-body) .page-wrapper { background: var(--bs-cream); color: var(--bs-ink); font-family: var(--bs-font-text); }
body.catalog-product-view:has(.App .main-section-body) .breadcrumbs { max-width: 1488px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 24px 24px 0; font-size: 14px; color: var(--bs-muted); background: transparent; }
body.catalog-product-view:has(.App .main-section-body) .breadcrumbs ul.items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.catalog-product-view:has(.App .main-section-body) .breadcrumbs li.item { display: flex; gap: 8px; margin: 0; padding: 0; font-size: 14px; line-height: normal; color: var(--bs-ink); }
body.catalog-product-view:has(.App .main-section-body) .breadcrumbs li.item:not(:last-child)::after { content: "/"; color: var(--bs-muted); margin: 0; padding: 0; font-size: 14px; line-height: normal; }
body.catalog-product-view:has(.App .main-section-body) .breadcrumbs li.item a, body.catalog-product-view:has(.App .main-section-body) .breadcrumbs li.item a:hover { color: var(--bs-muted); text-decoration: none; font-size: 14px; line-height: normal; font-family: var(--bs-font-text); }
body.catalog-product-view:has(.App .main-section-body) .breadcrumbs li.item strong { font-weight: 400; font-size: 14px; line-height: normal; font-family: var(--bs-font-text); }
body.catalog-product-view:has(.App .main-section-body) .page-main { max-width: 1488px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 20px 24px 80px; }
body.catalog-product-view:has(.App .main-section-body) .page-main .columns { padding: 0 !important; margin: 0 !important; max-width: none; width: 100%; float: none; }
body.catalog-product-view:has(.App .main-section-body) .page-main .columns > .column.main { padding: 0; margin: 0; max-width: none; width: 100%; float: none; }
body.catalog-product-view:has(.App .main-section-body) #root, body.catalog-product-view:has(.App .main-section-body) #root .App { width: 100%; max-width: none; padding: 0; margin: 0; }
body.catalog-product-view .App > div.flex.w-\[100\%\] { display: flex; flex-direction: column; gap: 16px; width: 100%; height: auto; }

/* toolbar */
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child { background: var(--bs-navy); width: 100%; border-radius: 18px; padding: 8px 12px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 16px; height: auto; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child > div:first-child { width: auto; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child > div:first-child button { margin: 0; width: auto; height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; background: transparent; color: #FFFFFF; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; cursor: pointer; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child > div:first-child button:hover { background: rgba(255, 255, 255, 0.12); }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child > div:first-child button span { font-size: 13px; color: #FFFFFF; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child > div:first-child button svg * { stroke: #FFFFFF; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; height: auto; width: auto; flex: 1 1 auto; background: none; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .tooltip, body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .alignment-tab { margin: 0; min-width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; padding: 0 6px; box-sizing: border-box; position: relative; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .tooltip:hover { background: rgba(255, 255, 255, 0.2); }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav svg { filter: brightness(0) invert(1); }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .zoom-dropdown-text { border: 0; display: flex; align-items: center; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .zoom-dropdown-text h6 { color: #FFFFFF; margin: 0; padding: 0; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .zoom-dropdown-text svg { filter: brightness(0) invert(1); }

/* body: spec rail | stage | panel */
body.catalog-product-view .App .main-section-body { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
body.catalog-product-view .App .main-section-body > .left-panel-wrapper { flex: 0 1 180px; max-width: 180px; width: 180px; background: #FFFFFF; border-radius: 22px; padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; }
body.catalog-product-view .App .main-section-body > .left-panel-wrapper .left-panel-properties-wrapper { padding: 10px 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 2px; border: 0; border-bottom: 1px solid #ECE6DC; }
body.catalog-product-view .App .main-section-body > .left-panel-wrapper .left-panel-properties-wrapper p { margin: 0; padding: 0; max-width: none; text-align: left; font-family: var(--bs-font-text); }
body.catalog-product-view .App .main-section-body > .left-panel-wrapper .left-panel-headings { font-size: 13px; font-weight: 400; color: var(--bs-muted); text-transform: none; }
body.catalog-product-view .App .main-section-body > .left-panel-wrapper .left-panel-properties-wrapper p.black { font-size: 15px; font-weight: 700; color: var(--bs-ink); }
body.catalog-product-view .App .main-section-body > .left-panel-wrapper > div:last-child > div { margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
body.catalog-product-view .App .main-section-body > .left-panel-wrapper > div:last-child > div > div { margin: 0; padding: 0; width: 100%; }
body.catalog-product-view .App .main-section-body > .left-panel-wrapper > div:last-child > div > div > div, body.catalog-product-view .App .main-section-body > .left-panel-wrapper [aria-label="Training Video Button"] > div { width: 100%; height: 42px; padding: 0; background: #FFFFFF; color: var(--bs-ink); border: 1px solid #CFC7BA; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; text-transform: none; box-sizing: border-box; }
body.catalog-product-view .App .main-section-body > .left-panel-wrapper > div:last-child > div > div > div:hover, body.catalog-product-view .App .main-section-body > .left-panel-wrapper [aria-label="Training Video Button"] > div:hover { background: var(--bs-sky); }
body.catalog-product-view .App .main-section-body > .left-panel-wrapper [aria-label="Training Video Button"] { margin: 12px 0 0; padding: 0; width: 100%; }
body.catalog-product-view .App .main-section-body > .canvas-main { flex: 999 1 460px; min-width: 0; width: auto; max-width: none; background: #FFFFFF; border-radius: 28px; padding: clamp(20px, 3vw, 40px); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 20px; }
body.catalog-product-view .App .main-section-body > .canvas-main > div:first-child { width: 100%; margin: 0; padding: 0; text-align: center; }
body.catalog-product-view .App .main-section-body > .canvas-main > div:first-child h1 { margin: 0; font-family: var(--bs-font-display); font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; color: var(--bs-ink); word-break: normal; overflow-wrap: anywhere; }
body.catalog-product-view .App .main-section-body > .canvas-main .canvas-area-wrapper { width: 100%; margin: 0; max-width: 100%; }
body.catalog-product-view .App .main-section-body > .canvas-main .canvas-scroll-dev { max-width: 100%; }

/* ---- design panel (copy of the Quick Edit panel rules, hooked onto the right column) ---- */
body.catalog-product-view .App .main-section-body > div:nth-child(3) { flex: 1 1 380px; width: auto; max-width: 460px; margin: 0; }

/* right panel */
body.catalog-product-view .App .main-section-body > div:nth-child(3) { flex: 1 1 380px; width: auto; max-width: 460px; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) hr { display: none; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section { background: #FFFFFF; border-radius: 24px; padding: 20px 22px; margin: 0; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; height: auto; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div { margin: 0; padding: 0; width: auto; height: auto; position: static; }

/* ---- price / availability card (Training video link moves to the bottom of it) ---- */
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section { flex-direction: column; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div:first-child { order: 3; margin-top: 4px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div:first-child > div { background: none; width: auto; height: auto; border-radius: 0; margin: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div:first-child button { height: 36px; width: auto; padding: 0 16px; border: 1px solid var(--bs-navy); border-radius: 999px; background: #FFFFFF; color: var(--bs-navy); font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; text-transform: none; cursor: pointer; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div:first-child button:hover { background: var(--bs-sky); }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row { order: 1; display: flex; flex-direction: column; gap: 6px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div { margin: 0 !important; padding: 0; width: auto; height: auto; position: static; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div > div { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; padding: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section label { font-family: var(--bs-font-text); text-transform: none; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section .fs-30, body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section .fs-30 label { font-family: var(--bs-font-display); font-size: 36px; font-weight: 600; color: var(--bs-rust); line-height: 1; padding: 0; margin: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section h5 { display: block; margin: 0; padding: 0; font-family: var(--bs-font-text); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--bs-ink-2); }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section .absolute { position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; width: auto; height: auto; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section .absolute > div { margin: 0; padding: 0; width: auto; height: auto; position: static; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section .absolute label, body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section .absolute span { font-size: 14px; font-weight: 400; line-height: normal; color: var(--bs-ink-2); padding: 0; margin: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section .absolute .black label { color: var(--bs-ink-2); }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section .absolute .w-full label { color: #1F6B3A; font-weight: 700; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section .absolute .w-full label::before { content: "✓ "; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section .absolute span.font-bold { font-weight: 400; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section .absolute span.yellow { color: var(--bs-ink); font-weight: 700; }

/* ---- panel card: eyebrow + numbered accordion headers ---- */
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col { background: #FFFFFF; border: 0; border-radius: 24px; padding: 10px; box-sizing: border-box; align-items: stretch; width: 100%; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col > div:first-child { background: none; display: flex; gap: 8px; padding: 10px 12px 4px; width: auto; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col > div:first-child > div { width: auto; margin: 0; padding: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col > div:first-child label { font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; line-height: normal; color: var(--bs-muted); text-transform: uppercase; margin: 0; padding: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col > div:first-child > div:nth-child(2) > div::before { content: "·"; margin-right: 8px; color: var(--bs-muted); }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col > div.w-\[90\%\] { width: 100%; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .panels-wrapper { max-height: none; overflow: visible; padding: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu { padding: 0; display: flex; flex-direction: column; gap: 6px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main { height: auto; min-height: 48px; padding: 8px 14px 8px 0; margin: 0; background: #FFFFFF; color: var(--bs-ink); border: 0; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main > div:first-child { padding-left: 12px; display: flex; align-items: center; gap: 12px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main .fs-16 { width: 28px; height: 28px; padding: 0; margin: 0; border-radius: 999px; background: #E9E3DA; color: var(--bs-ink); display: flex; align-items: center; justify-content: center; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main span:not(.fs-16) { font-family: var(--bs-font-text); font-size: 15px; font-weight: 700; line-height: normal; color: var(--bs-ink); text-transform: capitalize; padding: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main svg { width: 14px; height: 14px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main svg path { stroke: var(--bs-muted); fill: none; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main:has(+ div:not(.layer-main)) { background: var(--bs-cream); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -6px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main:has(+ div:not(.layer-main)) .fs-16 { background: var(--bs-navy); color: #FFFFFF; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu > div:not(.layer-main):not(.mt-\[10px\]) { background: var(--bs-cream); border: 0; border-radius: 0 0 16px 16px; padding: 0 14px 16px; width: auto; box-sizing: border-box; max-width: 100%; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu h6 { margin: 8px 0 0; padding: 10px 12px 4px; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--bs-muted); text-transform: uppercase; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu > div.mt-\[10px\] { background: none; padding: 8px 0 0; border: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .black, body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu label { font-family: var(--bs-font-text); color: var(--bs-ink); }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu label { font-size: 13px; font-weight: 600; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu input[type="text"] { height: 44px !important; width: 100%; box-sizing: border-box; border: 1px solid #CFC7BA; border-radius: 10px; padding: 0 12px; margin-top: 4px; font-family: var(--bs-font-text); font-size: 15px; color: var(--bs-ink); background: #FFFFFF; box-shadow: none; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu input[type="text"]:focus { outline: 2px solid var(--bs-navy); outline-offset: 1px; border-color: var(--bs-navy); }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .border.rounded.h-\[31px\], body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .rounded.border { border: 1px solid #CFC7BA; border-radius: 10px; background: #FFFFFF; height: 44px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu button { font-family: var(--bs-font-text); }

/* ---- Save / Print / Download, Next step, mode buttons ---- */
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(#mps-save-quick-editor) { height: auto; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(#mps-save-quick-editor) > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; width: 100%; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(#mps-save-quick-editor) > div > div { padding: 0; width: auto; height: auto; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(#mps-save-quick-editor) > div > div > div { width: 100%; height: auto; background: none; border-radius: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(#mps-save-quick-editor) button { width: 100%; height: 44px; border: 1px solid #CFC7BA; border-radius: 999px; background: #FFFFFF; color: var(--bs-ink); font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: normal; cursor: pointer; margin: 0; padding: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(#mps-save-quick-editor) button:hover { background: var(--bs-sky); }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(button span.fs-12) { margin: 0; padding: 0; width: 100%; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(button span.fs-12) > div { width: 100%; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(button span.fs-12) button { width: 100%; margin: 0; height: auto; padding: 18px; border: 0; border-radius: 999px; background: var(--bs-rust); color: #FFFFFF; font-family: var(--bs-font-text); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-transform: none; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(button span.fs-12) button:hover { background: #9A4515; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(button span.fs-12) button span { font-size: 18px; font-weight: 700; padding: 0; color: #FFFFFF; text-transform: none; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(button span.fs-12) button::after { content: "→"; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\], body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\].lg\:mt-\[10px\] { background: #FFFFFF; margin: 0; padding: 16px 18px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; box-sizing: border-box; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\] > div, body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\] > div > div { width: 100%; margin: 0; padding: 0; float: none; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\] button { width: 100%; margin: 0; height: 46px; border: 0; border-radius: 999px; background: var(--bs-navy); color: #FFFFFF; font-family: var(--bs-font-text); font-size: 15px; font-weight: 700; text-transform: none; cursor: pointer; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\] button:hover { background: #17304F; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\] p { margin: 0; font-family: var(--bs-font-text); font-size: 14px; line-height: 1.5; color: var(--bs-ink-2); text-align: left; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\]:last-of-type button { background: #FFFFFF; color: var(--bs-ink); border: 1px solid #CFC7BA; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\]:first-of-type { border-radius: 22px 22px 0 0; padding-bottom: 6px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\]:last-of-type { border-radius: 0 0 22px 22px; margin-top: -14px; padding-top: 6px; }

/* ---- pass 3: eyebrow on one line ---- */
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col > div:first-child { flex-wrap: nowrap; align-items: center; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col > div:first-child > div { flex: 0 0 auto; height: auto; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col > div:first-child > div > div { width: auto; height: auto; padding: 0; margin: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col > div:first-child label { white-space: nowrap; display: inline; height: auto; width: auto; }

/* ---- pass 4: closed vs open accordion sections, action row alignment ---- */
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu > div[class~="h-[0px]"] { display: none; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main:has(+ div:not(.layer-main)) { background: #FFFFFF; border-radius: 16px; margin-bottom: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main:has(+ div:not(.layer-main)) .fs-16 { background: #E9E3DA; color: var(--bs-ink); }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main:has(+ div:not(.layer-main):not([class~="h-[0px]"])) { background: var(--bs-cream); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -6px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main:has(+ div:not(.layer-main):not([class~="h-[0px]"])) .fs-16 { background: var(--bs-navy); color: #FFFFFF; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main:has(+ div:not(.layer-main):not([class~="h-[0px]"])) svg { transform: rotate(180deg); }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .layer-main { border-bottom: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu * { scrollbar-width: thin; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:has(#mps-save-quick-editor) > div > div > div { margin: 0; padding: 0; }

/* ---- pass 5: stray yellow rule under the last accessories header ---- */
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu .border-quick-edit { border-color: transparent; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu > div.mt-\[10px\] > div[class~="h-[0px]"], body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu > div.mt-\[10px\] > div.border-quick-edit { border: 0; }


/* ---- Customize mode: price / availability card (different markup from Quick Edit) ---- */
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; width: 100%; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div { margin: 0; padding: 0; width: auto; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div:first-child > div { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div:first-child > div > div { margin: 0; padding: 0; width: auto; height: auto; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div:first-child label { font-family: var(--bs-font-display); font-size: 36px; font-weight: 600; line-height: 1; color: var(--bs-rust); padding: 0; margin: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div:last-child { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div:last-child > div { display: flex; flex-direction: row; align-items: center; gap: 4px; width: auto; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div:last-child > div > div { margin: 0; padding: 0; width: auto; height: auto; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div:last-child label { font-family: var(--bs-font-text); font-size: 14px; font-weight: 400; line-height: normal; color: var(--bs-ink-2); margin: 0; padding: 0; text-transform: none; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div:last-child > div:first-child > div:nth-child(2) label { color: #1F6B3A; font-weight: 700; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div:last-child > div:first-child > div:nth-child(2) label::before { content: "✓ "; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div:last-child > div:last-child > div:nth-child(2) label { color: var(--bs-ink); font-weight: 700; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section h5 { color: var(--bs-ink-2); font-family: var(--bs-font-text); font-size: 14px; font-weight: 400; margin: 0; padding: 0; }


/* ---- Customize mode: rail height, Back / Expert Designer card ---- */
body.catalog-product-view .App .main-section-body > .left-panel-wrapper { height: auto; align-self: flex-start; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:nth-last-child(2):not(.mt-\[10px\]) { background: #FFFFFF; border-radius: 22px 22px 0 0; margin: 0; padding: 16px 18px 6px; width: 100%; box-sizing: border-box; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:nth-last-child(2):not(.mt-\[10px\]) > div { width: 100%; margin: 0; padding: 0; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:nth-last-child(2):not(.mt-\[10px\]) button { width: 100%; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--bs-navy); color: #FFFFFF; font-family: var(--bs-font-text); font-size: 15px; font-weight: 700; cursor: pointer; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:nth-last-child(2):not(.mt-\[10px\]) button:hover { background: #17304F; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\]:last-child { background: #FFFFFF; border-radius: 0 0 22px 22px; margin: 0; padding: 6px 18px 16px; box-sizing: border-box; width: 100%; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\]:last-child button { width: 100%; height: 46px; margin: 0; padding: 0; border: 1px solid #CFC7BA; border-radius: 999px; background: #FFFFFF; color: var(--bs-ink); font-family: var(--bs-font-text); font-size: 15px; font-weight: 700; cursor: pointer; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.mt-\[10px\]:last-child button:hover { background: var(--bs-sky); }

/* ---- Customize mode: ADD TEXT / canvas action buttons ---- */
body.catalog-product-view .App .main-section-body > .canvas-main button.bg-yellow { background: #FFFFFF; color: var(--bs-ink); border: 1px solid #CFC7BA; border-radius: 999px; height: 40px; width: auto; min-width: 120px; padding: 0 20px; margin: 0 8px; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; }
body.catalog-product-view .App .main-section-body > .canvas-main button.bg-yellow:hover { background: var(--bs-sky); }

/* ---- phones: "rotate your screen" notice for Customize Design ---- */
body.catalog-product-view #root .App > div.bg-\[\#D9D9D9\] { background: #FFFFFF; border-radius: 24px; height: auto; min-height: 220px; padding: 32px 24px; box-sizing: border-box; }
body.catalog-product-view #root .App > div.bg-\[\#D9D9D9\] p { margin: 0; font-family: var(--bs-font-display); font-size: 20px; font-weight: 500; line-height: 1.3; text-transform: none; color: var(--bs-ink); }


/* =====================================================================================================
   PASS 12 - panel contents matched to Designer.dc.html (no inner scrollbars, swatch/radio cards, inputs, accessories)
   body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu = the open/closed accordion container of Quick Edit and Customize
   ===================================================================================================== */
/* open bodies: natural height, no inner scrollers, transparent so the cream card shows */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div:not(.layer-main):not([class~="h-[0px]"]) { height: auto; min-height: 0; max-height: none; overflow: visible; background: var(--bs-cream); padding: 0 14px 16px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div:not(.layer-main) .bg-white { background: transparent; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div:not(.layer-main) > div:first-child:not(.layer-main) { height: auto; max-height: none; overflow: visible; padding: 0; margin: 0; width: auto; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div.mt-\[10px\] > div:not(.layer-main):not([class~="h-[0px]"]) { background: var(--bs-cream); padding: 4px 14px 16px; height: auto; max-height: none; border-radius: 0 0 16px 16px; }

/* --- 1. Monument Color: type radios as segmented buttons, granite as swatch cards --- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right:has(.container-radio) { padding-top: 4px; display: flex; flex-direction: column; gap: 12px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right:has(.container-radio) > div:first-child { display: flex; gap: 8px; height: auto; margin: 0; padding: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right:has(.container-radio) > div:first-child > div { flex: 1 1 0; margin: 0; padding: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .container-radio { box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 2px solid #E2DCD2; border-radius: 12px; background: #FFFFFF; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; color: var(--bs-ink); cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .container-radio input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .container-radio .checkmark { display: none; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .container-radio:has(input:checked) { border-color: var(--bs-navy); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right > div.mt-\[4px\] { margin: 0; padding: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right > div.mt-\[4px\] > div { max-height: none; overflow: visible; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right .grid.grid-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right .grid.grid-cols-3 > div { float: none; width: auto; margin: 0; padding: 6px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; border: 2px solid #E2DCD2; border-radius: 12px; background: #FFFFFF; cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right .grid.grid-cols-3 > div > div:first-child { width: 100%; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right .grid.grid-cols-3 img { display: block; width: 100%; height: 40px; object-fit: cover; border-radius: 8px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right .grid.grid-cols-3 > div > div:last-child { margin: 0; padding: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right .grid.grid-cols-3 span { font-family: var(--bs-font-text); font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--bs-ink); }

/* --- 2. Front engraving: label above a 44px input, one column --- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu [class*="columns-1"] { columns: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu [class*="columns-1"] > div { width: auto; margin: 0; padding: 0; height: auto; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu [class*="columns-1"] label, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .linked-sku-text { font-family: var(--bs-font-text); font-size: 13px; font-weight: 600; text-decoration: none; color: var(--bs-ink); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu input[type="text"] { margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu [class*="columns-1"] input[type="text"] { margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .rounded.border.cursor-pointer { margin: 0; height: 44px; width: 100%; align-items: center; box-sizing: border-box; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .linked-sku-text, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .linked-sku-text p { margin: 0; padding: 0 0 0 12px; font-size: 15px; font-weight: 500; max-width: none; display: flex; align-items: center; height: 100%; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .linked-sku-menu-bar-icon { margin: 0; top: 14px; right: 12px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="lg:w-[115px]"] { width: 100%; margin: 0 0 4px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="lg:w-[115px]"] + div, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="lg:w-[115px]"] + div > div { margin: 0; padding: 0; width: 100%; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .flex.items-center.justify-center[class*="mt-[12px]"] > p { margin: 0 8px 0 0; font-family: var(--bs-font-text); font-size: 13px; line-height: 1.5; color: var(--bs-ink-2); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .flex.items-center.justify-center[class*="mt-[12px]"] { flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-top: 10px; }

/* --- 3. Cliparts note + the "Customize Design" buttons inside the bodies --- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu p.black, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .black.text-\[14px\] { font-family: var(--bs-font-text); font-size: 14px; line-height: 1.5; color: var(--bs-ink-2); margin: 0; padding: 4px 0 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .bg-black, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu button.bg-black { background: var(--bs-navy); color: #FFFFFF; border: 0; border-radius: 999px; height: 40px; width: auto; min-width: 150px; padding: 0 20px; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; text-transform: none; cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .bg-black:hover { background: #17304F; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .mb-\[5px\].mt-\[16px\] { margin: 12px 0 0; }

/* --- accessories: product cards in a 2-column grid --- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div { margin: 0; width: auto; padding: 10px; box-sizing: border-box; background: #FFFFFF; border: 1px solid #E2DCD2; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div > div { margin: 0; width: 100%; padding: 0; justify-content: center; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div > div:first-child { justify-content: flex-start; align-items: flex-start; gap: 8px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--bs-navy); cursor: pointer; flex: none; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display label { font-family: var(--bs-font-text); color: var(--bs-ink); margin: 0; padding: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display label.truncate { white-space: normal; overflow: visible; text-overflow: clip; font-size: 12px; font-weight: 600; line-height: 1.3; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display label.fs-14 { font-size: 14px; font-weight: 700; color: var(--bs-rust); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display label.fs-12 { font-size: 12px; font-weight: 400; color: var(--bs-muted); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display .vase-image { max-width: 100%; max-height: 80px; width: auto; height: auto; object-fit: contain; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.font-semibold > label { font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; color: var(--bs-ink); padding: 0; margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.font-semibold { margin: 12px 0 0; padding: 0; width: auto; height: auto; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .justify-space-btw.mt-\[10px\].mb-\[6px\] { margin: 10px 0 0; justify-content: flex-start; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu h4.black { margin: 0 12px 0 0; font-family: var(--bs-font-text); font-size: 13px; font-weight: 600; color: var(--bs-ink); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center > .flex { display: flex; align-items: center; height: 36px; border: 1px solid #CFC7BA; border-radius: 10px; overflow: hidden; background: #FFFFFF; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; color: var(--bs-ink); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center > .flex > div { height: 100%; min-width: 34px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: #FFFFFF; padding: 0 6px; box-sizing: border-box; cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center > .flex > div:hover { background: var(--bs-sky); }

/* accessory header rows: label only, 600 */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .mt-\[10px\].w-\[100\%\] ~ .layer-main span:not(.fs-16), body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > .mt-\[10px\].mb-\[10px\] .layer-main span:not(.fs-16) { font-weight: 600; }

/* --- price card (Quick Edit): price | in stock  /  note | SKU --- */
body.catalog-product-view .quick-edit-right-panel .description-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: baseline; padding: 20px 22px; }
body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row, body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row > div, body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row > div > div { display: contents; }
body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row > div > div > div:first-child { grid-column: 1; grid-row: 1; order: 0; margin: 0; padding: 0; }
body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row > div > div > h5 { grid-column: 1; grid-row: 2; order: 0; }
body.catalog-product-view .quick-edit-right-panel .description-section > div:nth-child(1) { grid-column: 1 / -1; grid-row: 4; order: 0; margin: 4px 0 0; }
body.catalog-product-view .quick-edit-right-panel .description-section > div:nth-child(2) { grid-column: 1 / -1; grid-row: 3; order: 0; display: block; }

/* ---- pass 13: accordion states without a body (Cliparts when closed) ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div.mt-\[10px\]:not(.layer-main) { background: none; padding: 8px 0 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-main:has(+ div.mt-\[10px\]) { background: #FFFFFF; border-radius: 16px; margin-bottom: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-main:has(+ div.mt-\[10px\]) .fs-16 { background: #E9E3DA; color: var(--bs-ink); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-main:has(+ div.mt-\[10px\]) svg { transform: none; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right { height: auto; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right .grid.grid-cols-3 > div { height: auto; min-height: 0; }

/* ---- pass 14: sentence-case labels like the design, ACCESSORIES spacing ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-main span:not(.fs-16) { text-transform: lowercase; display: block; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-main span:not(.fs-16)::first-letter { text-transform: uppercase; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div.mt-\[10px\].w-\[100\%\] { padding: 0; margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div.mt-\[10px\].w-\[100\%\] h6 { margin: 0; padding: 14px 12px 4px; }

/* ---- pass 15: accessories groups stack vertically; label alignment ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.mt-\[12px\].pt-1 { display: block; width: auto; margin: 0 0 8px; padding: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.mt-\[12px\].pt-1 > div:first-child { margin: 12px 0 0; padding: 0; width: auto; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.mt-\[12px\].pt-1 > div:first-child label { display: block; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display { width: 100%; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="lg:w-[115px]"] label { margin: 0; padding: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="lg:w-[115px]"] > div { margin: 0; padding: 0; width: auto; }

/* ---- pass 16: Next Step pill without card; Customize / Expert as one seamless white card ---- */
body.catalog-product-view .quick-edit-right-panel > div:nth-child(4) { background: none; border-radius: 0; padding: 0; margin: 0; height: auto; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(4) > div { margin: 0; padding: 0; width: 100%; height: auto; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(5), body.catalog-product-view .quick-edit-right-panel > div:nth-child(6) { background: #FFFFFF; margin: 0; padding: 0 18px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; border-radius: 0; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(5) { border-radius: 22px 22px 0 0; padding-top: 16px; padding-bottom: 12px; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(6) { border-radius: 0 0 22px 22px; padding-top: 0; padding-bottom: 16px; margin-top: -14px; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(5) > div, body.catalog-product-view .quick-edit-right-panel > div:nth-child(6) > div { width: 100%; margin: 0; padding: 0; float: none; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(5) p, body.catalog-product-view .quick-edit-right-panel > div:nth-child(6) p { margin: 0; padding: 0; text-align: left; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(5) button, body.catalog-product-view .quick-edit-right-panel > div:nth-child(6) button { width: 100%; margin: 0; }

/* ---- pass 17: corrected child indexes (1-based: 4 save row, 5 next step, 6 customize, 7 expert) ---- */
body.catalog-product-view .quick-edit-right-panel > div:nth-child(4) { background: none; border-radius: 0; padding: 0; margin: 0; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(5) { background: none; border-radius: 0; padding: 0; margin: 0; height: auto; display: block; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(5) > div { margin: 0; padding: 0; width: 100%; height: auto; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(6), body.catalog-product-view .quick-edit-right-panel > div:nth-child(7) { background: #FFFFFF; margin: 0; padding: 0 18px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(6) { border-radius: 22px 22px 0 0; padding-top: 16px; padding-bottom: 12px; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(7) { border-radius: 0 0 22px 22px; padding-top: 0; padding-bottom: 16px; margin-top: -14px; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(6) > div, body.catalog-product-view .quick-edit-right-panel > div:nth-child(7) > div { width: 100%; margin: 0; padding: 0; float: none; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(6) p, body.catalog-product-view .quick-edit-right-panel > div:nth-child(7) p { margin: 0; padding: 0; text-align: left; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(6) button, body.catalog-product-view .quick-edit-right-panel > div:nth-child(7) button { width: 100%; margin: 0; }
body.catalog-product-view .quick-edit-right-panel > div:nth-child(6) > div:last-child, body.catalog-product-view .quick-edit-right-panel > div:nth-child(7) > div:last-child { margin: 0; padding: 0; width: 100%; }

/* ---- pass 18: same as 17 with enough specificity (wrappers carry .flex.flex-col) ---- */
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col:nth-child(5) { background: none; border-radius: 0; padding: 0; margin: 0; display: block; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col:nth-child(6), body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col:nth-child(7) { background: #FFFFFF; margin: 0; padding: 0 18px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col:nth-child(6) { border-radius: 22px 22px 0 0; padding-top: 16px; padding-bottom: 12px; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col:nth-child(7) { border-radius: 0 0 22px 22px; padding-top: 0; padding-bottom: 16px; margin-top: -14px; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col:nth-child(6) > div, body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col:nth-child(7) > div { width: 100%; margin: 0; padding: 0; float: none; }

/* ---- pass 19: Next Step pill full width + font; spacing of the last accessories row ---- */
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col:nth-child(5) > div { padding: 0; margin: 0; width: 100%; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col:nth-child(5) button, body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col:nth-child(5) button span { font-family: var(--bs-font-text); }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col:nth-child(5) button { width: 100%; margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div.mt-\[10px\].mb-\[10px\] { margin: 0; padding: 0; }

/* ---- pass 20: price card - stock + SKU wrappers live inside the price block ---- */
body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row > div:nth-child(2) { display: contents; }
body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row > div:nth-child(2) > div:first-child { display: flex; align-items: center; justify-self: end; grid-column: 2; grid-row: 1; margin: 0; padding: 0; width: auto; }
body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row > div:nth-child(2) > div:first-child > div:first-child { display: none; }
body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row > div:nth-child(2) > div:first-child > div { margin: 0; padding: 0; width: auto; height: auto; }
body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row > div:nth-child(2) > div:last-child { display: block; justify-self: end; grid-column: 2; grid-row: 2; margin: 0; padding: 0; width: auto; position: static; }
body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row > div:nth-child(2) > div:last-child > div { display: flex; position: static; margin: 0; padding: 0; width: auto; height: auto; gap: 6px; white-space: nowrap; }
body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row > div:nth-child(2) > div:last-child span { width: auto; margin: 0; padding: 0; }
body.catalog-product-view .quick-edit-right-panel .description-section > div.flex-row > div > div > h5 { grid-column: 1; grid-row: 2; }

/* ---- pass 21: absolute DIMENSIONS toggle (desktop) + FRONT/BACK toggles ---- */
body.catalog-product-view .main-quick-edit > div:first-child .dimension-btn { width: auto; top: 16px; right: 16px; }
body.catalog-product-view .main-quick-edit > div:first-child .dimension-btn > div, body.catalog-product-view .main-quick-edit > div:first-child .dimension-btn > div > div { background: none; width: auto; height: auto; border-radius: 0; }
body.catalog-product-view .main-quick-edit > div:first-child button.bg-black, body.catalog-product-view .main-quick-edit > div:first-child .dimension-btn button, body.catalog-product-view .main-quick-edit > div:first-child button[class*="bg-black"] { background: #FFFFFF; color: var(--bs-ink); border: 1px solid #CFC7BA; border-radius: 999px; height: 36px; width: auto; padding: 0 18px; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; margin: 0; }
body.catalog-product-view .main-quick-edit > div:first-child button.bg-black:hover, body.catalog-product-view .main-quick-edit > div:first-child .dimension-btn button:hover { background: var(--bs-sky); }

/* ---- pass 22: DIMENSIONS toggle sits in the flow under the canvas (was absolute over the title) ---- */
body.catalog-product-view .main-quick-edit > div:first-child > div:has(> .dimension-btn) { height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.catalog-product-view .main-quick-edit > div:first-child .dimension-btn { position: static; right: auto; top: auto; margin: 0; }

/* ---- pass 23: Customize - remaining yellow action buttons (tablet/phone variants), availability label ---- */
body.catalog-product-view .App .main-section-body .bg-yellow.text-center:not(.layer-main):not(button) { background: #FFFFFF; color: var(--bs-ink); border: 1px solid #CFC7BA; border-radius: 999px; padding: 0 18px; height: 40px; width: auto; min-width: 100px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; text-transform: none; cursor: pointer; }
body.catalog-product-view .App .main-section-body .bg-yellow.text-center:not(.layer-main):not(button):hover { background: var(--bs-sky); }
body.catalog-product-view .App .main-section-body > div:nth-child(3) .description-section > div.flex-row > div:last-child > div:first-child > div:first-child { display: none; }

/* ---- pass 24: Customize - text / font / size / move controls without yellow ---- */
body.catalog-product-view .App .main-section-body .bg-yellow.text-center:not(.layer-main):not(button) { }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col > div:first-child.bg-yellow { background: none; border: 0; border-radius: 0; height: auto; min-width: 0; padding: 10px 12px 4px; display: flex; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu svg [fill="#ffb700"], body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu svg[fill="#ffb700"] { fill: var(--bs-navy); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu svg [stroke="#ffb700"], body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu svg[stroke="#ffb700"] { stroke: var(--bs-navy); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu svg path[fill="black"] { fill: currentColor; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .yellow, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu label.yellow { color: var(--bs-navy); font-weight: 700; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu input[type="checkbox"] { accent-color: var(--bs-navy); width: 18px; height: 18px; margin: 0 6px 0 0; cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .dropdown-main-wrapper.border-radius { height: auto; width: 100%; margin: 0 0 12px; border: 0; padding: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu #demoText { height: 44px; width: 100%; box-sizing: border-box; border: 1px solid #CFC7BA; border-radius: 10px; padding: 0 12px; font-family: var(--bs-font-text); font-size: 15px; color: var(--bs-ink); background: #FFFFFF; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="h-[350px]"] { height: auto; width: 100%; margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="h-[350px]"] > label { height: auto; margin: 0 0 4px; padding: 0; display: block; font-family: var(--bs-font-text); font-size: 13px; font-weight: 600; text-transform: none; color: var(--bs-ink); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="h-[350px]"] > label::first-letter { text-transform: uppercase; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .rounded.border-quick-edit { margin: 0 0 12px; width: 100%; height: 44px; border: 1px solid #CFC7BA; border-radius: 10px; background: #FFFFFF; display: flex; align-items: center; box-sizing: border-box; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .input-bind-with-range { border: 1px solid #CFC7BA !important; border-radius: 8px !important; background: #FFFFFF; font-family: var(--bs-font-text); font-size: 14px; color: var(--bs-ink); box-shadow: none; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu [class*="border-grey"] { border: 1px solid #CFC7BA; border-radius: 8px; background: #FFFFFF; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .bg-lighter-grey { background: var(--bs-sky); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .opacity-50 { opacity: 0.45; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu label.fs-12, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu label.fs-14 { font-family: var(--bs-font-text); color: var(--bs-ink); }

/* ---- pass 25: editor checkboxes use the native control in navy; remaining yellow vector fills ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; background: none; border: 0; accent-color: var(--bs-navy); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .CheckedSvg path, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .CheckedSvg path[fill] { fill: var(--bs-navy); }

/* ---- pass 26: Customize - action cards (Next Step / Back to Quick Edit / Expert) and yellow ADD TEXT ---- */
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div[class]:nth-last-child(3) { background: none; border-radius: 0; padding: 0; margin: 0; height: auto; display: block; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div[class]:nth-last-child(3) > div { margin: 0; padding: 0; width: 100%; height: auto; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div[class]:nth-last-child(3) button { width: 100%; margin: 0; font-family: var(--bs-font-text); }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:nth-last-child(2) { margin: 14px 0 0; border-radius: 22px 22px 0 0; padding: 16px 18px 6px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div[class]:nth-last-child(1) { margin: 0; padding: 6px 18px 16px; border-radius: 0 0 22px 22px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div:nth-last-child(2) button { text-transform: none; font-family: var(--bs-font-text); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu button.bg-yellow { background: var(--bs-navy); color: #FFFFFF; border: 0; border-radius: 999px; height: 40px; width: auto; min-width: 120px; padding: 0 20px; margin: 8px 0 0; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu button.bg-yellow:hover { background: #17304F; }

/* ---- pass 27: Customize - verse / additional text rows stacked like the design ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex.items-center.mx-\[8px\] { flex-direction: column; align-items: stretch; justify-content: flex-start; margin: 0 0 10px; gap: 4px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex.items-center.mx-\[8px\] > div { width: 100%; margin: 0; padding: 0; height: auto; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex.items-center.mx-\[8px\] > div > .rounded { margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex.items-center.mx-\[8px\] > div:first-child label { font-family: var(--bs-font-text); font-size: 13px; font-weight: 600; color: var(--bs-ink); text-transform: none; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu #verseText { height: 44px; width: 100%; box-sizing: border-box; border: 1px solid #CFC7BA; border-radius: 10px; padding: 0 12px; margin: 0; font-family: var(--bs-font-text); font-size: 15px; color: var(--bs-ink); background: #FFFFFF; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu span.text-\[11px\] { margin: 6px 0 0; font-family: var(--bs-font-text); font-size: 12px; line-height: 1.4; color: var(--bs-muted); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex.items-center.mx-\[8px\] .justify-center { justify-content: flex-start; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu button.bg-yellow.mr-\[48px\] { margin: 8px 0 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .border-quick-edit .text-\[\#AAAAAA\] { color: var(--bs-muted); font-family: var(--bs-font-text); font-size: 15px; font-weight: 400; padding: 0 0 0 12px; display: flex; align-items: center; height: 100%; }

/* ---- pass 28: Customize - wrappers that carry .flex.flex-col must not get the eyebrow rules ---- */
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col:nth-last-child(3) > div:first-child { padding: 0; display: block; background: none; width: 100%; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div[class]:nth-last-child(1) { margin-top: -14px; }

/* ---- pass 29: long lists (clipart browser, accessory catalogues) scroll inside a capped body, everything else grows ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div:not(.layer-main):not([class~="h-[0px]"]):has(.grid-cols-10) { max-height: 560px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div:not(.layer-main):not([class~="h-[0px]"]):has(.vases-grid-display) { max-height: 560px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-10 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }

/* ---- pass 30: clipart disclaimer dialog ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.inset-0 { background: rgba(22, 32, 43, 0.55); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="border-[#FFB700]"][class*="fixed"] { border: 0; border-radius: 24px; background: #FFFFFF; box-shadow: 0 24px 60px rgba(22, 32, 43, 0.35); padding: 24px 28px; width: min(460px, calc(100vw - 32px)); height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; box-sizing: border-box; font-family: var(--bs-font-text); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="border-[#FFB700]"][class*="fixed"] > span:first-child { font-family: var(--bs-font-display); font-size: 24px; font-weight: 600; color: var(--bs-ink); margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="border-[#FFB700]"][class*="fixed"] ol, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="border-[#FFB700]"][class*="fixed"] span.text-\[13px\] { font-family: var(--bs-font-text); font-size: 14px; line-height: 1.55; color: var(--bs-ink-2); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="border-[#FFB700]"][class*="fixed"] .bg-yellow { background: var(--bs-navy); color: #FFFFFF; border: 0; border-radius: 999px; height: 44px; padding: 0 24px; display: flex; align-items: center; justify-content: center; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; }

/* ---- pass 31: selected swatch = rust ring (editor marks it with .border.rounded) ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-dropdown-right .grid.grid-cols-3 > div.rounded { border-color: var(--bs-rust); }

/* ---- pass 32: design templates - segmented layout radios (done above) + 2-column card grid, 330px scroll like the design ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div .flex.gap-\[2px\] { margin: 0 0 12px; gap: 8px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 330px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; scrollbar-width: thin; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-2 > div { margin: 0; padding: 6px; box-sizing: border-box; background: #FFFFFF; border: 2px solid #E2DCD2; border-radius: 12px; gap: 6px; justify-content: flex-start; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-2 > div:hover { border-color: var(--bs-navy); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-2 > div > div:first-child { margin: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #F2F4F6; display: flex; align-items: center; justify-content: center; position: relative; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-2 > div > div:first-child img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-2 > div > div:first-child img.absolute { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-2 > div > div:last-child, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-2 > div > div:last-child > div { margin: 0; padding: 0; width: auto; height: auto; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-2 label { font-family: var(--bs-font-text); font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--bs-ink); text-align: center; }

/* ---- pass 33: field titles left-aligned ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu [class*="columns-1"], body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu [class*="columns-1"] > div, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu [class*="columns-1"] label, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="lg:w-[115px]"] label, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex.items-center.mx-\[8px\] > div:first-child, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex.items-center.mx-\[8px\] label { text-align: left; align-items: flex-start; justify-content: flex-start; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu [class*="columns-1"] > div { display: block; width: 100%; }

/* ---- pass 34: Customize - panel body fills the card (wrapper carries lg:w-[90%]); wider right column ---- */
body.catalog-product-view .App .main-section-body > div:nth-child(3) > div.flex.flex-col > div:nth-child(2), body.catalog-product-view .App .main-section-body > div:nth-child(3) .panels-wrapper { width: 100%; }
body.catalog-product-view .quick-edit-right-panel > div.flex.flex-col > div:nth-child(2) { width: 100%; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) { flex: 1 1 480px; max-width: 580px; }

/* ---- pass 35: disclaimer overlay must sit above the clipart list it dims ---- */
body.catalog-product-view .App #rightMenu div.fixed.inset-0 { z-index: 50; }
body.catalog-product-view .App #rightMenu div[class*="border-[#FFB700]"][class*="fixed"] { z-index: 60; }

/* ---- pass 36: clipart browser - tool tiles, Sandblasting / Laser segmented buttons, category select, clipart cards ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="w-[28px]"][class*="border-gray-300"] { width: 40px; height: 40px; margin: 8px 8px 8px 0; padding: 0; border: 1px solid #CFC7BA; border-radius: 10px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="w-[28px]"][class*="border-gray-300"]:hover { background: var(--bs-sky); border-color: var(--bs-navy); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="w-[28px]"][class*="border-gray-300"] svg, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div[class*="w-[28px]"][class*="border-gray-300"] img { width: 22px; height: 22px; margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .border-b.border-gray-300 { border-color: #E2DCD2; margin-bottom: 10px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex-col.justify-center.items-center.w-full.pr-4 { flex-direction: row; gap: 8px; padding: 0; margin: 0 0 12px; align-items: stretch; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex-col.justify-center.items-center.w-full.pr-4 > div { flex: 1 1 0; width: auto; height: 40px; margin: 0; padding: 0; position: relative; border: 2px solid #E2DCD2 !important; border-radius: 12px; background: #FFFFFF; color: var(--bs-ink); box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex-col.justify-center.items-center.w-full.pr-4 > div:has(input:checked) { border-color: var(--bs-navy) !important; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex-col.justify-center.items-center.w-full.pr-4 > div label { font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; color: var(--bs-ink); cursor: pointer; margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex-col.justify-center.items-center.w-full.pr-4 > div input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.relative.w-\[95\%\] { width: 100%; margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.relative.w-\[95\%\] > .rounded { margin: 0; height: 44px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.grid.grid-cols-1[class*="lg:grid-cols-3"] { width: 100%; margin: 14px 0 0; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.grid.grid-cols-1[class*="lg:grid-cols-3"] > div { background: #FFFFFF; border: 1px solid #E2DCD2; border-radius: 12px; padding: 6px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.grid.grid-cols-1[class*="lg:grid-cols-3"] > div:hover { border-color: var(--bs-navy); box-shadow: 0 2px 8px rgba(22, 32, 43, 0.12); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.grid.grid-cols-1[class*="lg:grid-cols-3"] > div > div:first-child { height: 130px; padding: 8px; background: #FFFFFF; border-radius: 8px; box-sizing: border-box; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.grid.grid-cols-1[class*="lg:grid-cols-3"] img { width: 100%; height: 100%; object-fit: contain; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.grid.grid-cols-1[class*="lg:grid-cols-3"] > div > div:last-child { margin: 0; gap: 2px; padding: 0 0 4px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.grid.grid-cols-1[class*="lg:grid-cols-3"] p { margin: 0; font-family: var(--bs-font-text); font-size: 12px; line-height: 1.3; color: var(--bs-muted); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.grid.grid-cols-1[class*="lg:grid-cols-3"] p:first-child { font-weight: 700; color: var(--bs-ink); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.grid.grid-cols-1[class*="lg:grid-cols-3"] p:last-child { font-weight: 700; color: var(--bs-rust); }

/* ---- pass 37: Customize toolbar - tooltips below the tiles (they sat on top of the buttons and swallowed the clicks); whole zoom tile clickable ---- */
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .tooltiptext { position: absolute; top: calc(100% + 8px); left: 50%; right: auto; bottom: auto; transform: translateX(-50%); width: max-content; max-width: 160px; margin: 0; padding: 6px 10px; background: var(--bs-ink); color: #FFFFFF; border-radius: 8px; font-family: var(--bs-font-text); font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; pointer-events: none; z-index: 120; box-shadow: 0 4px 12px rgba(22, 32, 43, 0.25); }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .tooltiptext::before { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; background: var(--bs-ink); transform: translateX(-50%) rotate(45deg); }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .zoom-arrow-icon { position: static; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .zoom-arrow-icon::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .zoom-dropdown-text { position: static; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .zoom-dropdown-text h6 { pointer-events: none; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .zoom-drop-down-menu { top: calc(100% + 6px); left: 0; width: 84px; padding: 6px 0; background: #FFFFFF; border: 1px solid #E2DCD2; border-radius: 12px; box-shadow: 0 12px 28px rgba(22, 32, 43, 0.22); z-index: 200; text-align: left; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .zoom-drop-down-menu .zoom-drop-down-menu-items { margin: 0; padding: 0; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .zoom-drop-down-menu li { margin: 0; padding: 7px 16px; list-style: none; font-family: var(--bs-font-text); font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--bs-ink); cursor: pointer; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .zoom-drop-down-menu li:hover { background: var(--bs-sky); }

/* ---- pass 38: site header + mega menu stay above the editor (menu dropdowns were hidden behind the toolbar) ---- */
body.catalog-product-view:is(:has(.App .main-section-body), :has(.main-quick-edit)) .page-header, body.catalog-product-view:is(:has(.App .main-section-body), :has(.main-quick-edit)) .page-header .cdz-menu, body.catalog-product-view:is(:has(.App .main-section-body), :has(.main-quick-edit)) .page-header .cdz-vermenu { position: relative; z-index: 1000; }
body.catalog-product-view:is(:has(.App .main-section-body), :has(.main-quick-edit)) .page-header .cdz-dropdown, body.catalog-product-view:is(:has(.App .main-section-body), :has(.main-quick-edit)) .page-header .groupmenu-drop, body.catalog-product-view:is(:has(.App .main-section-body), :has(.main-quick-edit)) .page-header .cdz-sub-menu { z-index: 1001; }
body.catalog-product-view:has(.App .main-section-body) #root, body.catalog-product-view:has(.App .main-section-body) #root .App { position: relative; z-index: 0; }

/* ---- pass 39: editor loading indicator (animated dots + LOADING text) - centred, navy, readable ---- */
body.catalog-product-view .App .loader { position: static; inset: auto; transform: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: auto; min-height: 120px; margin: 0; padding: 24px 12px; box-sizing: border-box; text-align: center; }
body.catalog-product-view .App .loader svg { display: block; width: 56px; height: auto; margin: 0 auto; }
body.catalog-product-view .App .loader .loader-color, body.catalog-product-view .App .loader svg * { fill: var(--bs-navy); }
body.catalog-product-view .App .loader span { display: block; margin: 0; padding: 0; font-family: var(--bs-font-text); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; color: var(--bs-muted); white-space: nowrap; }
body.catalog-product-view .App .main-quick-edit > div:first-child .loader, body.catalog-product-view .App .canvas-main .loader { min-height: 320px; }

/* ---- pass 40: Customize toolbar below 1024px - tiles in a wrapping row (editor stacks them in a column), small Back button restyled ---- */
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav { flex-direction: row; justify-content: flex-start; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav > div.lg\:hidden { margin: 0; padding: 0; width: auto; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .back_btn { position: static; display: flex; align-items: center; gap: 6px; width: auto; height: 40px; margin: 0; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; background: transparent; color: #FFFFFF; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .back_btn span, body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav .back_btn span svg * { color: #FFFFFF; font-size: 13px; stroke: #FFFFFF; }

/* ---- pass 41: loader dots in navy, centred ---- */
body.catalog-product-view .App .lds-ellipsis { display: block; flex: none; margin: 0 auto; position: relative; }
body.catalog-product-view .App .lds-ellipsis div { background: var(--bs-navy); }

/* ---- pass 42: loading-state leftovers - yellow FRONT/BACK boxes, collapsed toolbar ---- */
body.catalog-product-view .App div.bg-yellow:not(.layer-main):not(.flex):not(button) { background: #FFFFFF; color: var(--bs-ink); border: 1px solid #CFC7BA; border-radius: 999px; padding: 0 18px; height: 36px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child { min-height: 60px; }
body.catalog-product-view .App > div.flex.w-\[100\%\] > div:first-child .sidebar_nav { margin: 0; }

/* ---- pass 43: measured against Designer.dc.html at 1920 - step header 56px, accessory rows 45px, eyebrows 29/33px ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-main { min-height: 56px; padding-top: 0; padding-bottom: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div.mt-\[10px\].w-\[100\%\] ~ .layer-main, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu > div.mt-\[10px\].mb-\[10px\] .layer-main { min-height: 45px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu h6 { line-height: 15px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) > div.flex.flex-col > div:first-child label { line-height: 15px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) > div.flex.flex-col > div:first-child { padding-bottom: 4px; }
body.catalog-product-view .quick-edit-right-panel > div:has(#mps-save-quick-editor) { height: auto; min-height: 44px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) > div.flex.flex-col > div:first-child, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) > div.flex.flex-col > div:first-child div { line-height: 15px; height: auto; }

/* ---- pass 44: Customize spec rail like the artboard: 180px content + 18px padding, 56px rows ---- */
body.catalog-product-view .App .main-section-body > .left-panel-wrapper { box-sizing: content-box; flex: 0 0 180px; width: 180px; max-width: 180px; }
body.catalog-product-view .App .main-section-body > .left-panel-wrapper .left-panel-properties-wrapper { min-height: 56px; box-sizing: border-box; justify-content: center; }

/* ---- pass 45: one chevron style for every row (accessory rows ship a double chevron) ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-main svg { width: 14px; height: 14px; flex: none; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-main svg path:nth-child(n+2) { display: none; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-main svg path { stroke: var(--bs-muted); stroke-width: 1.4; fill: none; }

/* ---- pass 46: size / link-proportions controls (W, H, lock icon, bracket) and remaining yellow vector parts ---- */
body.catalog-product-view .App .main-section-body svg path[style*="255, 183, 0"], body.catalog-product-view .App .main-section-body svg [style*="255, 183, 0"], body.catalog-product-view .App .main-section-body svg [style*="#ffb700"], body.catalog-product-view .App .main-section-body svg [style*="#FFB700"] { fill: var(--bs-navy) !important; }
body.catalog-product-view .App .main-section-body svg [stroke="#ffb700" i], body.catalog-product-view .App .main-section-body svg [stroke="#FFB700"] { stroke: var(--bs-navy) !important; }
body.catalog-product-view .App .main-section-body svg [fill="#ffb700" i], body.catalog-product-view .App .main-section-body svg [fill="#FFB700"] { fill: var(--bs-navy) !important; }
body.catalog-product-view .App .main-section-body [class*="border-[#FFB700]"], body.catalog-product-view .App .main-section-body [class*="border-[#ffb700]"], body.catalog-product-view .App .main-section-body [class*="border-yellow"], body.catalog-product-view .App .main-section-body .\!border-yellow-500 { border-color: #CFC7BA !important; }
body.catalog-product-view .App .main-section-body .brackets { transform: translateX(12px); }
body.catalog-product-view .App .main-section-body .brackets svg path { stroke: var(--bs-navy); }
body.catalog-product-view .App .main-section-body .CheckedSvg { transform: translateX(26px); }
body.catalog-product-view .App .main-section-body .CheckedSvg svg { cursor: pointer; }
body.catalog-product-view .App .main-section-body .CheckedSvg svg path { fill: var(--bs-navy) !important; }
body.catalog-product-view .App .main-section-body #rightMenu div:has(> #width), body.catalog-product-view .App .main-section-body #rightMenu div:has(> #height) { margin-left: 16px !important; }

/* ---- pass 47: Expert Designer access-code dialog (same dialog family, extra input + message) ---- */
body.catalog-product-view .main-quick-edit > .fixed > div h4 { font-family: var(--bs-font-text); font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--bs-ink-2); padding: 24px 28px 8px; margin: 0; text-align: center; }
body.catalog-product-view .main-quick-edit > .fixed > div input.expert_text_field { width: calc(100% - 56px); height: 46px; box-sizing: border-box; margin: 6px 28px 0; border: 1px solid #CFC7BA; border-radius: 12px; padding: 0 14px; background: #FBFAF7; font-family: var(--bs-font-text); font-size: 16px; color: var(--bs-ink); box-shadow: none; }
body.catalog-product-view .main-quick-edit > .fixed > div input.expert_text_field:focus { outline: 2px solid var(--bs-navy); outline-offset: 1px; border-color: var(--bs-navy); }
body.catalog-product-view .main-quick-edit > .fixed > div div.text-center[class*="justify-space-btw"] { width: 100%; padding: 18px 28px 6px; box-sizing: border-box; display: flex; flex-direction: row-reverse; justify-content: center; gap: 12px; margin: 0; }
body.catalog-product-view .main-quick-edit > .fixed > div div.text-center[class*="justify-space-btw"] > div { margin: 0; min-width: 130px; height: 46px; padding: 0 24px; border-radius: 999px; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; justify-content: center; box-sizing: border-box; }
body.catalog-product-view .main-quick-edit > .fixed > div div.text-center[class*="justify-space-btw"] > div:first-child { background: var(--bs-navy); color: #FFFFFF; border: 1px solid var(--bs-navy); }
body.catalog-product-view .main-quick-edit > .fixed > div div.text-center[class*="justify-space-btw"] > div:last-child { background: #FFFFFF; color: var(--bs-ink); border: 1px solid #CFC7BA; }
body.catalog-product-view .main-quick-edit > .fixed > div span.text-\[\#FF0000\] { display: block; margin: 8px 28px 22px; padding: 10px 14px; border-radius: 12px; background: #FDEEEA; border-left: 4px solid #C0392B; color: #9B1C0F; font-family: var(--bs-font-text); font-size: 14px; font-weight: 600; text-align: left; width: calc(100% - 56px); box-sizing: border-box; }

/* ---- pass 55: "Confirmation Popup" (Add template into canvas) - a second dialog family of the designer (.confirmation-popup: header / body / footer, no overlay) that was still the old yellow header + black square buttons ---- */
body.catalog-product-view .confirmation-popup { position: fixed !important; inset: 0 !important; left: 0 !important; top: 0 !important; margin: auto !important; width: 520px !important; max-width: calc(100vw - 32px) !important; height: fit-content !important; min-height: 0 !important; display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; border: 0 !important; padding: 0 !important; border-radius: 24px; background: #FFFFFF !important; overflow: hidden; box-shadow: 0 0 0 100vmax rgba(22, 32, 43, 0.55), 0 24px 60px rgba(22, 32, 43, 0.35); font-family: var(--bs-font-text); color: var(--bs-ink); z-index: 100050 !important; }
body.catalog-product-view .confirmation-popup > header { position: relative; background: var(--bs-cream) !important; padding: 18px 56px 14px 28px !important; font-family: var(--bs-font-display); font-size: 22px; font-weight: 600; line-height: normal; color: var(--bs-ink); display: block; }
body.catalog-product-view .confirmation-popup > header > span:first-child { font: inherit; color: inherit; }
body.catalog-product-view .confirmation-popup > header > span:last-child { position: absolute; top: 14px; right: 18px; width: 32px; height: 32px; padding: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--bs-font-text); font-size: 15px; font-weight: 400; color: var(--bs-ink-2); cursor: pointer; }
body.catalog-product-view .confirmation-popup > header > span:last-child:hover { background: var(--bs-sky); }
body.catalog-product-view .confirmation-popup > div { height: auto !important; padding: 24px 28px 8px; gap: 10px; align-items: center; justify-content: center; text-align: center; }
body.catalog-product-view .confirmation-popup > div > span { font-family: var(--bs-font-display); font-size: 20px !important; font-weight: 600; line-height: 1.3; color: var(--bs-ink); }
body.catalog-product-view .confirmation-popup > div > h6 { margin: 0; padding: 0 !important; font-family: var(--bs-font-text); font-size: 14px !important; font-weight: 400; line-height: 1.55; letter-spacing: normal !important; text-transform: none !important; color: var(--bs-ink-2); }
body.catalog-product-view .confirmation-popup > footer { height: auto !important; padding: 16px 28px 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
body.catalog-product-view .confirmation-popup > footer > div { margin: 0 !important; min-width: 130px; width: auto !important; height: 46px !important; padding: 0 24px !important; box-sizing: border-box; border-radius: 999px !important; display: flex; align-items: center; justify-content: center; font-family: var(--bs-font-text); font-size: 14px !important; font-weight: 700; letter-spacing: 0.04em; line-height: normal; text-transform: uppercase; }
body.catalog-product-view .confirmation-popup > footer > div:first-child { background: var(--bs-navy) !important; color: #FFFFFF !important; border: 1px solid var(--bs-navy) !important; }
body.catalog-product-view .confirmation-popup > footer > div:first-child:hover { background: #17304F !important; }
body.catalog-product-view .confirmation-popup > footer > div:last-child { background: #FFFFFF !important; color: var(--bs-ink) !important; border: 1px solid #CFC7BA !important; }
body.catalog-product-view .confirmation-popup > footer > div:last-child:hover { background: var(--bs-sky) !important; }
/* the dialog's own title is the generic "Confirmation Popup": shown as "Please confirm" instead (display text only, the designer's markup is untouched) */
body.catalog-product-view .confirmation-popup > header > span:first-child { font-size: 0 !important; }
body.catalog-product-view .confirmation-popup > header > span:first-child::before { content: "Please confirm"; font-size: 22px; font-family: var(--bs-font-display); font-weight: 600; color: var(--bs-ink); }

/* ---- QA 2026-10-22: design template thumbnails are landscape (about 2:1, 320x163 / 240x120 / 800x420), the card box was 4:3 so the picture sat in the top part with grey below. Box is 2:1 now and the picture fills it. ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-2 > div > div:first-child { aspect-ratio: 2 / 1; display: block; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-2 > div > div:first-child img, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .grid.grid-cols-2 > div > div:first-child img.absolute { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; max-width: none; max-height: none; transform: none; object-fit: contain; }

/* ---- QA 2026-10-22: porcelain photo "Choose File" control. The generic .bg-black pill rule (min-width 150px, 40px high) hit the "Choose File" span inside the narrow card (134px, overflow hidden) so it was cut and the "No File Chosen" text shrank to 8px. Button on top, file name under it, both full width of the card. ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section { width: 100%; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section > div, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section > div > div { width: 100%; height: auto; margin: 0; padding: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section div.flex { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; height: auto; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; z-index: 2; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section span.bg-black { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 36px; margin: 0; padding: 0 12px; box-sizing: border-box; font-size: 13px; line-height: 1; text-align: center; white-space: nowrap; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section span.truncate { display: block; width: 100%; margin: 0; padding: 0 2px; box-sizing: border-box; font-family: var(--bs-font-text); font-size: 12px; font-weight: 400; line-height: 1.3; color: var(--bs-ink-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- QA 2026-10-22: Quantity stepper inside the 2-column accessory cards (porcelain photos etc.). The general stepper rule (36px high, 34px cells, label beside it) needs 172px but the card content is 134px, so it stuck out of the card. Here the label and a smaller stepper wrap inside the card. ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] { width: 100%; min-width: 0; box-sizing: border-box; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center:has(> div > h4) { width: 100%; min-width: 0; flex-wrap: wrap; justify-content: flex-start; gap: 4px 8px; margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center > div { margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] h4.black { margin: 0; font-size: 12px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center > .flex { height: 30px; border-radius: 8px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center > .flex > div { min-width: 28px; width: 28px; padding: 0; font-size: 14px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center > .flex { width: auto; flex: none; }

/* ---- QA 2026-10-22 (2): Quantity label and stepper on one row (cells 22px so both fit in the 134px card); the uploaded file name wraps over as many lines as it needs instead of being cut, and the card keeps room under it. ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center:has(> div > h4) { flex-wrap: nowrap; align-items: center; gap: 0 6px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center:has(> div > h4) > div:first-child { flex: none; width: auto; margin: 0; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center > .flex { height: 28px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center > .flex > div { min-width: 22px; width: 22px; font-size: 13px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section span.truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; height: auto; line-height: 1.35; padding: 0 2px 8px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div { padding-bottom: 12px; }

/* ---- QA 2026-10-22 (3): the Choose File pill was squeezed flat when the file name wrapped (flex item shrank). Button and the rest of the upload block never shrink. ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section span.bg-black { flex: none; height: 36px; min-height: 36px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section span.truncate { flex: none; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section > div, body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section > div > div { height: auto; min-height: 0; max-height: none; overflow: visible; }
/* the generic input rule (#rightMenu .rounded.border.cursor-pointer { height: 44px }) also hit the upload wrapper, so it never grew with a wrapped file name */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .upload-section div.flex.rounded.border { height: auto !important; min-height: 0 !important; }
/* narrow phones (cards about 100px wide): label and stepper wrap onto two lines instead of sticking out */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center:has(> div > h4) { flex-wrap: wrap; gap: 4px 6px; }
/* phones: cards are only ~120px wide, so Quantity + stepper are tightened to stay on one row (down to 360px; below that they wrap) and long titles break instead of poking out */
@media (max-width: 480px) {
  body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div { padding-left: 8px; padding-right: 8px; }
  body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] h4.black { font-size: 11px; }
  body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center:has(> div > h4) { gap: 4px 3px; }
  body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display > div .justify-space-btw.mt-\[10px\].mb-\[6px\] .flex.items-center > .flex > div { min-width: 16px; width: 16px; font-size: 12px; }
}
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .vases-grid-display label.truncate { overflow-wrap: anywhere; max-width: 100%; }

/* ---- QA 2026-10-22 (4): "Are you sure want to remove this accessory?" dialog (third dialog family of the designer): the box was see-through (the generic .bg-white rule above) with yellow text and yellow buttons. Same look as the other Bluesprings dialogs. ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.inset-0 > div.bg-white { background: #FFFFFF; border-radius: 20px; box-shadow: 0 24px 60px rgba(22, 32, 43, 0.28); padding: 28px 28px 24px; width: 420px; max-width: calc(100vw - 32px); box-sizing: border-box; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.inset-0 > div.bg-white > div:first-child span { font-family: var(--bs-font-display); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--bs-ink); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.inset-0 > div.bg-white > div:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.inset-0 > div.bg-white button { margin: 0; min-width: 110px; height: 44px; padding: 0 22px; border-radius: 999px; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.inset-0 > div.bg-white button:first-child { background: var(--bs-navy); color: #FFFFFF; border: 1px solid var(--bs-navy); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.inset-0 > div.bg-white button:first-child:hover { background: #17304F; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.inset-0 > div.bg-white button:last-child { background: #FFFFFF; color: var(--bs-ink); border: 1px solid #CFC7BA; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.inset-0 > div.bg-white button:last-child:hover { background: var(--bs-sky); }

/* ---- QA 2026-10-22 (5): customize screen (?step=customize). The designer prints the product description inside its price card (as one-letter-wide wrapped text) and the price card styling used "child 2" selectors, which broke once a description was there (price small and yellow). Price block is now picked by class (div.flex-row) and the designer's own description copies are hidden everywhere: the readable one is the "About this monument" card under the designer. ---- */
body.catalog-product-view .description-section .description { display: none !important; }
/* customize screen on laptop widths: the row (left panel 216 + canvas 460 + options 480 + gaps) needed 1204px, so below about 1250px the options column dropped under the canvas. Smaller bases let all three sit side by side from about 1130px. */
body.catalog-product-view .App .main-section-body > .canvas-main { flex-basis: 380px; }
body.catalog-product-view .App .main-section-body > div:nth-child(3) { flex: 1 1 400px; max-width: 540px; }

/* ---- QA 2026-10-22 (6): customize screen alerts + lists ---- */
/* "First 50 characters free ... I Understand" alert (fourth dialog family: fixed box, see-through because of the generic .bg-white rule, yellow text, tiny button) */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.shadow-2xl { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 480px; max-width: calc(100vw - 32px); height: auto; margin: 0; padding: 28px 28px 24px; box-sizing: border-box; background: #FFFFFF; border: 0; border-radius: 20px; box-shadow: 0 24px 60px rgba(22, 32, 43, 0.28); z-index: 999; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.shadow-2xl > div.flex-col { width: 100%; align-items: center; gap: 4px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.shadow-2xl h6 { margin: 0; padding: 0; font-family: var(--bs-font-display); font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: normal; text-transform: none; text-align: center; color: var(--bs-ink); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.shadow-2xl .bg-yellow { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 28px; border-radius: 999px; background: var(--bs-navy); color: #FFFFFF; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: none; cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.shadow-2xl .bg-yellow:hover { background: #17304F; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.fixed.shadow-2xl > div.flex-col > div.mt-4 { margin-top: 18px; }
/* verse drop-down list */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .linked-sku-list-items { background: #FFFFFF; border: 1px solid #CFC7BA; border-radius: 12px; box-shadow: 0 12px 28px rgba(22, 32, 43, 0.14); padding: 6px; max-height: 260px; overflow-y: auto; box-sizing: border-box; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .linked-sku-list-items ul { margin: 0; padding: 0; list-style: none; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .linked-sku-list-items li { padding: 8px 10px; border-radius: 8px; font-family: var(--bs-font-text); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--bs-ink); cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .linked-sku-list-items li:hover { background: var(--bs-sky); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .linked-sku-list-items li span { font-family: inherit; margin: 0; white-space: normal; }

/* toolbar "Align" panel (icons + "Relative to" list) */
body.catalog-product-view .App div[class~="w-[335px]"][class~="h-[104px]"] { height: auto; min-height: 104px; padding: 10px 10px 14px; box-sizing: border-box; background: #FFFFFF; border: 1px solid #E2DCD2; border-radius: 14px; box-shadow: 0 16px 36px rgba(22, 32, 43, 0.18); }
body.catalog-product-view .App div[class~="w-[335px]"][class~="h-[104px]"] > div:first-child { margin: 0; gap: 4px; }
body.catalog-product-view .App div[class~="w-[335px]"][class~="h-[104px]"] label { font-family: var(--bs-font-text); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--bs-muted); text-transform: uppercase; }
body.catalog-product-view .App div[class~="w-[335px]"][class~="h-[104px]"] .linked-sku-text { font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; color: var(--bs-ink); }
body.catalog-product-view .App div[class~="w-[335px]"][class~="h-[104px]"] div.rounded.border { border: 1px solid #CFC7BA; border-radius: 10px; background: #FFFFFF; }
/* the toolbar icon rule turns every svg white (filter), so the six align icons were white on the white panel: dark here, with a hover tint */
body.catalog-product-view .App div[class~="w-[335px]"][class~="h-[104px]"] > div:first-child svg { filter: brightness(0) !important; opacity: 0.85; }
body.catalog-product-view .App div[class~="w-[335px]"][class~="h-[104px]"] > div:first-child > div { border-radius: 10px; cursor: pointer; }
body.catalog-product-view .App div[class~="w-[335px]"][class~="h-[104px]"] > div:first-child > div:hover { background: var(--bs-sky); }
body.catalog-product-view .App div[class~="w-[335px]"][class~="h-[104px]"] { width: auto; min-width: 335px; max-width: calc(100vw - 24px); }
body.catalog-product-view .App div[class~="w-[335px]"][class~="h-[104px]"] > div:first-child { flex-wrap: wrap; }

/* font drop-down ("Choose font") - the list was see-through (generic .bg-white rule), so the names printed over the controls below it */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .list-items-text { background: #FFFFFF !important; border: 1px solid #CFC7BA; border-radius: 12px; box-shadow: 0 12px 28px rgba(22, 32, 43, 0.16); padding: 6px; box-sizing: border-box; z-index: 30; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .list-items-text ul { margin: 0; padding: 0; list-style: none; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .list-items-text li { padding: 6px 10px; border-radius: 8px; font-size: 16px; line-height: 1.3; color: var(--bs-ink); cursor: pointer; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .list-items-text li:hover { background: var(--bs-sky); }

/* ---- QA 2026-10-22 (7): "Preview mode" window of Print / Download (fifth dialog family): full-height white box under the site header, yellow square buttons ---- */
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto { z-index: 1000; background: rgba(22, 32, 43, 0.55); }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto > div.flex { padding: 16px; min-height: 100%; align-items: center; justify-content: center; }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto > div.flex > div.relative.bg-white { position: relative; width: min(860px, 100%); max-width: 100%; min-height: 0; max-height: calc(100vh - 32px); margin: 0; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 24px; box-shadow: 0 40px 90px rgba(18, 26, 36, 0.3); overflow: hidden; }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto > div.flex > div.relative.bg-white > div:first-child { flex: 1 1 auto; min-height: 0; max-height: none; padding: 24px 28px 8px; overflow: auto; background: #FFFFFF; }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto #modal-title { margin: 0 0 8px; font-family: var(--bs-font-display); font-size: 26px; font-weight: 500; line-height: 1.2; color: var(--bs-ink); text-align: left; }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto .min-h-\[60vh\] { min-height: 0; padding: 12px; background: var(--bs-cream); border-radius: 16px; }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto .min-h-\[60vh\] img { max-width: 100%; max-height: calc(100vh - 260px); width: auto; height: auto; object-fit: contain; }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto > div.flex > div.relative.bg-white > div:last-child { flex: none; display: flex; flex-direction: row-reverse; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 0; padding: 14px 28px 24px; }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto > div.flex > div.relative.bg-white > div:last-child > div { padding: 0; margin: 0; }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto button.bg-\[\#ffb700\] { margin: 0; min-width: 130px; height: 46px; padding: 0 24px; border: 1px solid var(--bs-navy); border-radius: 999px; background: var(--bs-navy) !important; color: #FFFFFF !important; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: none; box-shadow: none; cursor: pointer; }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto button.bg-\[\#ffb700\]:hover { background: #17304F !important; }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto > div.flex > div.relative.bg-white > div:last-child > div:first-child button.bg-\[\#ffb700\] { background: #FFFFFF !important; color: var(--bs-ink) !important; border-color: #CFC7BA; }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto > div.flex > div.relative.bg-white > div:last-child > div:first-child button.bg-\[\#ffb700\]:hover { background: var(--bs-sky) !important; }
/* the designer app sits in its own stacking layer (z 0), so its pop-ups ended up under the sticky site header (z 1000): lift the app while one is open */
body.catalog-product-view .App:has(div.fixed.z-10.inset-0.overflow-y-auto), body.catalog-product-view .App:has(.confirmation-popup), body.catalog-product-view .App:has(#rightMenu div.fixed.inset-0) { z-index: 1100 !important; }
body.catalog-product-view div.fixed.z-10.inset-0.overflow-y-auto button.bg-\[\#ffb700\] { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
body.catalog-product-view #root:has(div.fixed.z-10.inset-0.overflow-y-auto), body.catalog-product-view #root:has(.confirmation-popup), body.catalog-product-view #root:has(#rightMenu div.fixed.inset-0) { z-index: 1100 !important; }

/* ---- QA 2026-10-22 (8): "Expert Designer" access-code window (sixth dialog family: yellow header bar, square yellow buttons) ---- */
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) { position: fixed; top: 50% !important; left: 50% !important; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 480px !important; max-width: calc(100vw - 32px); height: auto; padding: 0 !important; box-sizing: border-box; background: #FFFFFF; border: 0 !important; border-radius: 20px; box-shadow: 0 24px 60px rgba(22, 32, 43, 0.28); overflow: hidden; z-index: 1200; }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) > div:first-child { position: relative; width: 100%; box-sizing: border-box; padding: 18px 64px 14px 28px; background: var(--bs-cream); }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) > div:first-child > header { font-size: 0; }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) > div:first-child > header::before { content: "Expert designer"; font-family: var(--bs-font-display); font-size: 22px; font-weight: 600; color: var(--bs-ink); }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) > div:first-child > span { top: 14px; right: 18px; width: 32px; height: 32px; padding: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--bs-font-text); font-size: 15px; color: var(--bs-ink); }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) > div:first-child > span:hover { background: var(--bs-sky); }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) > div:last-child { width: 100%; box-sizing: border-box; padding: 22px 28px 26px; gap: 14px; }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) h4 { margin: 0; padding: 0; font-family: var(--bs-font-display); font-size: 20px; font-weight: 600; line-height: 1.3; text-align: center; color: var(--bs-ink); }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) input.expert_text_field { width: 100%; height: 48px; box-sizing: border-box; padding: 0 14px; border: 1px solid #CFC7BA; border-radius: 12px; background: #FBFAF7; font-family: var(--bs-font-text); font-size: 16px; color: var(--bs-ink); }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) input.expert_text_field:focus { border-color: var(--bs-navy); outline: 2px solid rgba(30, 58, 95, 0.25); outline-offset: 0; }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) .mt-4 { width: 100%; margin: 4px 0 0; padding: 0; justify-content: center; gap: 12px; }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) .bg-yellow { margin: 0; min-width: 130px; height: 46px; padding: 0 22px; box-sizing: border-box; border-radius: 999px; background: var(--bs-navy); color: #FFFFFF; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: none; }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) .bg-yellow:hover { background: #17304F; }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) .bg-yellow:last-child { background: #FFFFFF; color: var(--bs-ink); border: 1px solid #CFC7BA; }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) .bg-yellow:last-child:hover { background: var(--bs-sky); }
body.catalog-product-view div.shadow-2xl:has(.expert_text_field) span.text-\[\#FF0000\] { font-family: var(--bs-font-text); font-size: 13px; text-align: center; margin: 0; }
body.catalog-product-view #root:has(div.shadow-2xl .expert_text_field), body.catalog-product-view .App:has(div.shadow-2xl .expert_text_field) { z-index: 1100 !important; }

/* ---- QA 2026-10-22 (9): EXPERT designer ---- */
/* Upload panel: VECTOR / RASTER pills (VECTOR wraps a file input and carries .font-semibold, so a generic "div.font-semibold { height: auto; padding: 0 }" rule flattened it) */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex.justify-around > div:has(> div.bg-yellow) { width: auto; height: auto; flex: 0 0 auto; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex.justify-around > div > div.bg-yellow { position: relative; display: flex; align-items: center; justify-content: center; width: 120px; height: 40px !important; padding: 0 18px !important; box-sizing: border-box; border: 1px solid var(--bs-navy); border-radius: 999px; background: #FFFFFF; color: var(--bs-navy); font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; overflow: hidden; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex.justify-around > div > div.bg-yellow:hover { background: var(--bs-sky); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.flex.justify-around > div > div.bg-yellow > input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Expert > Upload > RASTER: "Add image" window (7th dialog family). It is appended inside .main-section-body, so it also used to steal the "last child" styling of the options column (selectors now use nth-child(3)). */
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) { position: fixed; top: 50% !important; left: 50% !important; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 560px !important; max-width: calc(100vw - 32px); height: auto !important; padding: 22px 24px 20px; box-sizing: border-box; gap: 14px; background: #FFFFFF; border: 0 !important; border-radius: 20px; box-shadow: 0 24px 60px rgba(22, 32, 43, 0.28), 0 0 0 100vmax rgba(22, 32, 43, 0.45); z-index: 1200; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div:first-child { width: 100%; align-items: center; justify-content: space-between; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div:first-child > div:first-child { width: auto; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) #modal-title { margin: 0; font-family: var(--bs-font-display); font-size: 24px; font-weight: 500; line-height: 1.2; text-transform: none; color: var(--bs-ink); }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div:first-child > div.cursor-pointer { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--bs-cream); }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div:first-child > div.cursor-pointer:hover { background: var(--bs-sky); }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div:first-child > div.cursor-pointer svg { width: 18px; height: 18px; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div.grid { width: 100% !important; min-height: 150px; max-height: 300px; margin: 0; padding: 12px; box-sizing: border-box; gap: 10px; border: 2px dashed #CFC7BA; border-radius: 14px; background: #FBFAF7; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div.grid:empty { display: flex; align-items: center; justify-content: center; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div.grid:empty::before { content: "Add JPG or PNG images, then press Start uploading"; font-family: var(--bs-font-text); font-size: 14px; color: var(--bs-muted); text-align: center; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div.grid img { border-radius: 8px; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div:last-child { width: 100% !important; height: auto !important; margin: 0; padding: 14px; box-sizing: border-box; gap: 10px; flex-wrap: wrap; background: var(--bs-cream); border-radius: 14px; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div:last-child > div:has(> .bg-yellow) { width: auto !important; height: auto !important; margin: 0; flex: 0 0 auto; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div:last-child .bg-yellow { width: auto; min-width: 130px; height: 42px !important; padding: 0 20px !important; border-radius: 999px; border: 1px solid var(--bs-navy); background: #FFFFFF; color: var(--bs-navy); font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.03em; display: flex; align-items: center; justify-content: center; white-space: nowrap; cursor: pointer; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div:last-child > div:nth-child(2) .bg-yellow { background: var(--bs-navy); color: #FFFFFF; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div:last-child > div:nth-child(2) .bg-yellow:hover { background: #17304F; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) > div:last-child > div.flex.items-center { margin: 0; flex: 1 1 200px; gap: 10px; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) .w3-light-grey { flex: 1 1 auto; width: auto !important; min-width: 90px; height: 12px !important; border: 0 !important; border-radius: 999px; background: #E2DCD2; overflow: hidden; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) .w3-grey { height: 100%; border-radius: 999px; background: var(--bs-navy) !important; }
body.catalog-product-view .App .main-section-body > div.fixed:has(#modal-title) .fs-12 { font-family: var(--bs-font-text); font-size: 13px; color: var(--bs-ink-2); margin: 0; white-space: nowrap; }
body.catalog-product-view #root:has(.main-section-body > div.fixed #modal-title), body.catalog-product-view .App:has(.main-section-body > div.fixed #modal-title) { z-index: 1100 !important; }
/* Expert > Text: the ADD TEXT pill (40px) sat in a 25px high wrapper and stuck out of the panel */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div:has(> button.bg-yellow).h-\[25px\] { height: auto !important; min-height: 40px; padding-bottom: 6px; }
/* Expert > Layers list: rounded thumbnails, soft row hover, navy outline for the selected layer (was a hard black box) */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-inner { margin-top: 8px; padding: 6px; border: 1px solid transparent !important; border-radius: 14px; box-sizing: border-box; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-inner:hover { background: var(--bs-sky); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-inner.border { border: 2px solid var(--bs-navy) !important; background: #FFFFFF; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-inner > div > div:first-child { border-radius: 10px; overflow: hidden; border: 1px solid #E2DCD2; background: #F2F4F6; flex: none; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-inner > div > div:first-child svg { color: var(--bs-navy); }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layer-inner p { font-family: var(--bs-font-text); font-size: 13px; font-weight: 600; color: var(--bs-ink); text-transform: none; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layers-icons > div { padding: 4px; border-radius: 8px; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu .layers-icons > div:hover { background: #FFFFFF; }
/* "Uploading..." spinner window (8th dialog family) */
body.catalog-product-view div.fixed:has(> div[role="status"]) { position: fixed; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: 320px !important; max-width: calc(100vw - 32px); height: auto !important; padding: 32px 24px 28px !important; box-sizing: border-box; background: #FFFFFF; border: 0 !important; border-radius: 20px; box-shadow: 0 24px 60px rgba(22, 32, 43, 0.28); z-index: 1300; }
body.catalog-product-view div.fixed:has(> div[role="status"]) > span { top: 12px; right: 14px; width: 32px; height: 32px; padding: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--bs-font-text); font-size: 15px; color: var(--bs-ink); }
body.catalog-product-view div.fixed:has(> div[role="status"]) > span:hover { background: var(--bs-sky); }
body.catalog-product-view div.fixed:has(> div[role="status"]) h4 { margin: 20px 0 0; font-family: var(--bs-font-display); font-size: 20px; font-weight: 600; color: var(--bs-ink); }
body.catalog-product-view #root:has(div.fixed > div[role="status"]), body.catalog-product-view .App:has(div.fixed > div[role="status"]) { z-index: 1100 !important; }

/* ---- QA 2026-10-22 (10): Quick edit title. The designer gives it a fixed 70px box (h-[70px]); the longer SEO names wrap to 3-4 lines on phones and tablets, and the picture slid over the last line. The box grows with the text now. ---- */
body.catalog-product-view .main-quick-edit div.h-\[70px\].font-bold.text-black { height: auto !important; min-height: 70px; padding-bottom: 12px; box-sizing: border-box; }

/* ---- QA 2026-10-22 (11): a long chosen verse ("BELOVED DAUGHTER, SISTER, MOTHER & GRANDMOTHER") ran out of its drop-down box. The text wrapper was wider than the box (flex item without min-width 0), so the ellipsis never kicked in. ---- */
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu div.linked-sku-text { flex: 1 1 0%; min-width: 0; max-width: calc(100% - 40px); overflow: hidden; box-sizing: border-box; }
body.catalog-product-view :is(.quick-edit-right-panel, .App .main-section-body > div:nth-child(3)) #rightMenu p.linked-sku-text { display: block; width: 100%; max-width: 100% !important; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: normal; }
/* the same long verse stretched the whole options panel to its text width on phones (460px on a 375px screen): flex items default to min-width:auto, so the panel chain may shrink now */
body.catalog-product-view .quick-edit-right-panel, body.catalog-product-view .quick-edit-right-panel > div, body.catalog-product-view .quick-edit-right-panel > div > div, body.catalog-product-view .quick-edit-right-panel .panels-wrapper, body.catalog-product-view .quick-edit-right-panel #rightMenu { min-width: 0; max-width: 100%; box-sizing: border-box; }
body.catalog-product-view .App .main-section-body > div:nth-child(3), body.catalog-product-view .App .main-section-body > div:nth-child(3) #rightMenu, body.catalog-product-view .App .main-section-body > div:nth-child(3) .panels-wrapper { min-width: 0; max-width: 100%; box-sizing: border-box; }