/* ===================================================================================================== PRODUCT PAGE, STEP 2 "Checkout options" (CHG-012) - design: Product.dc.html. CSS ONLY: restyles the existing Magento / Codazon / Designbuy markup, no template or behaviour changes. Scope: pages that contain .product-right (step 2). The designer (step 1, React app) is not touched. Tokens (--bs-*) come from bluesprings.css. ===================================================================================================== */ body.catalog-product-view:has(.product-right), body.catalog-product-view:has(.product-right) .page-wrapper { background: var(--bs-cream); color: var(--bs-ink); font-family: var(--bs-font-text); } body.catalog-product-view:has(.product-right) .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(.product-right) .breadcrumbs ul.items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } body.catalog-product-view:has(.product-right) .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(.product-right) .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(.product-right) .breadcrumbs li.item a, body.catalog-product-view:has(.product-right) .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(.product-right) .breadcrumbs li.item strong { font-weight: 400; font-size: 14px; line-height: normal; font-family: var(--bs-font-text); } body.catalog-product-view:has(.product-right) .page-main { max-width: 1488px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 20px 24px 96px; } body.catalog-product-view:has(.product-right) .page-main > .columns, body.catalog-product-view:has(.product-right) .columns > .column.main, body.catalog-product-view:has(.product-right) .row.main-inner, body.catalog-product-view:has(.product-right) .product-main-top { padding: 0; margin: 0; max-width: none; width: 100%; float: none; } body.catalog-product-view:has(.product-right) .page-main > .page.messages { margin: 0; } /* two columns: saved design (left, sticky) | title, price, options (right) */ body.catalog-product-view .row.product-info-main.full-width:has(.product-right) { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; margin: 0; padding: 0; width: 100%; } body.catalog-product-view .row.product-info-main.full-width:has(.product-right)::before, body.catalog-product-view .row.product-info-main.full-width:has(.product-right)::after { content: none; display: none; } body.catalog-product-view .product-left { flex: 1 1 420px; width: auto; min-width: 0; float: none; padding: 0; margin: 0; position: sticky; top: 24px; } body.catalog-product-view .product-right { flex: 2 1 560px; width: auto; min-width: 0; float: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } body.catalog-product-view .product-right > * { margin-left: 0; margin-right: 0; } /* YOUR DESIGN card (the saved design image comes from the designer app) */ body.catalog-product-view .product-left .advance-option-preview { position: relative; background: #FFFFFF; border-radius: 28px; padding: 20px 20px 20px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; width: 100%; height: auto; min-height: 0; } body.catalog-product-view .product-left .advance-option-preview::before { content: "YOUR DESIGN"; display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; line-height: 40px; color: var(--bs-muted); align-self: flex-start; text-align: left; } body.catalog-product-view .product-left .advance-option-preview > .absolute { position: absolute; top: 20px; right: 20px; left: auto; z-index: 2; } body.catalog-product-view .product-left .advance-option-preview > .absolute > div { background: none; width: auto; height: auto; } body.catalog-product-view .product-left .advance-option-preview > .absolute button { height: 40px; min-width: 96px; padding: 0 18px; border: 1px solid var(--bs-navy); border-radius: 999px; background: #FFFFFF; color: var(--bs-navy); font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; } body.catalog-product-view .product-left .advance-option-preview > .absolute button:hover { background: var(--bs-sky); } body.catalog-product-view .product-left .advance-option-preview > div:not(.absolute) { margin: 0; width: 100%; max-width: none; } body.catalog-product-view .product-left .advance-option-preview > div:not(.absolute) > div { width: 100%; } body.catalog-product-view .product-left .advance-option-preview img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 18px; object-fit: contain; } /* title, stock / SKU / review link, price */ body.catalog-product-view .product-right .page-title-wrapper.product { margin: 0; padding: 0; } body.catalog-product-view .product-right h1.page-title { margin: 0; padding: 0; font-family: var(--bs-font-display); font-weight: 500; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.12; letter-spacing: -0.02em; color: var(--bs-ink); text-transform: none; } body.catalog-product-view .product-right h1.page-title .base { font: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } body.catalog-product-view .product-right .product-info-main-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0; padding: 0; } body.catalog-product-view .product-right .product-info-price { display: contents; } body.catalog-product-view .product-right .product-info-stock-sku { display: contents; } body.catalog-product-view .product-right .stock.available { order: 1; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; font-size: 14px; font-weight: 700; line-height: normal; color: #1F6B3A; text-transform: none; } body.catalog-product-view .product-right .stock.available::before { content: "✓"; font-size: 16px; font-weight: 700; color: #1F6B3A; } body.catalog-product-view .product-right .stock.available span { font-size: 14px; font-weight: 700; color: #1F6B3A; } body.catalog-product-view .product-right .product.attribute.sku { order: 2; display: flex; gap: 6px; align-items: baseline; margin: 0; padding: 0; font-size: 14px; color: var(--bs-muted); line-height: normal; } body.catalog-product-view .product-right .product.attribute.sku .type { font-weight: 400; text-transform: none; font-size: 14px; color: var(--bs-muted); } body.catalog-product-view .product-right .product.attribute.sku .value { font-weight: 700; font-size: 14px; color: var(--bs-ink); } body.catalog-product-view .product-right .product-reviews-summary { order: 3; margin: 0; padding: 0; float: none; display: block; } body.catalog-product-view .product-right .product-reviews-summary .reviews-actions { margin: 0; padding: 0; } body.catalog-product-view .product-right .product-reviews-summary a.action.add, body.catalog-product-view .product-right .product-reviews-summary a.action.add:hover { font-size: 14px; font-weight: 600; color: var(--bs-navy); text-decoration: none; text-transform: none; line-height: normal; } body.catalog-product-view .product-right .price-box.price-final_price { order: 4; flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 4px 0 0; padding: 0; } body.catalog-product-view .product-right .price-box .price-container, body.catalog-product-view .product-right .price-box .price-wrapper { display: inline; } body.catalog-product-view .product-right .price-box .price { font-family: var(--bs-font-display); font-size: 42px; font-weight: 600; line-height: 1; color: var(--bs-rust); } body.catalog-product-view .product-right .price-box.price-final_price::after { content: "Monument price. Choose installation and delivery below."; font-size: 15px; font-weight: 400; line-height: normal; color: var(--bs-ink-2); } body.catalog-product-view .product-right .product-add-form { order: 5; flex: 0 0 100%; margin: 12px 0 0; padding: 0; } /* options card: banner + groups of choices */ body.catalog-product-view .product-right form#product_addtocart_form { display: flex; flex-direction: column; gap: 22px; margin: 0; background: #FFFFFF; border-radius: 24px; padding: 0 clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px); overflow: hidden; } body.catalog-product-view .product-right form#product_addtocart_form:has(.product-options-wrapper .fieldset .field)::before { content: "Checkout options"; display: block; margin: 0 calc(-1 * clamp(20px, 2.4vw, 28px)); padding: clamp(24px, 2.8vw, 32px) clamp(20px, 2.4vw, 28px); background: linear-gradient(120deg, #1E3A5F 0%, #2A4E7A 100%); color: #FFFFFF; font-family: var(--bs-font-display); font-size: 28px; font-weight: 500; line-height: 1.15; } body.catalog-product-view .product-right .product-options-wrapper { margin: 0; padding: 0; } body.catalog-product-view .product-right .product-options-wrapper .fieldset { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; border: 0; } body.catalog-product-view .product-right .product-options-wrapper .field { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px 0 0; border-top: 1px solid #ECE6DC; width: auto; float: none; clear: none; } body.catalog-product-view .product-right .product-options-wrapper .fieldset > .field:first-of-type { border-top: 0; padding-top: 4px; } body.catalog-product-view .product-right .product-options-wrapper .field > label.label { display: block; width: auto; float: none; margin: 0; padding: 0 0 0 10px; border: 0; border-left: 3px solid var(--bs-rust); background: none; font-family: var(--bs-font-text); font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--bs-navy); text-align: left; text-transform: none; } body.catalog-product-view .product-right .product-options-wrapper .field.required > label.label > span::after { content: " *"; color: var(--bs-rust); font-weight: 700; margin: 0; } body.catalog-product-view .product-right .product-options-wrapper .field > label.label::after { content: none; } body.catalog-product-view .product-right .product-options-wrapper .field > .control { width: 100%; float: none; margin: 0; padding: 0; } body.catalog-product-view .product-right .product-options-wrapper .options-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } body.catalog-product-view .product-right .product-options-wrapper .options-list .field.choice { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border: 2px solid #E2DCD2; border-radius: 14px; background: #FFFFFF; cursor: pointer; width: auto; position: relative; } body.catalog-product-view .product-right .product-options-wrapper .options-list .field.choice:has(input:checked) { border-color: var(--bs-navy); background: #F2F6FA; } body.catalog-product-view .product-right .product-options-wrapper .options-list .field.choice:focus-within { outline: 2px solid var(--bs-navy); outline-offset: 2px; } body.catalog-product-view .product-right .product-options-wrapper .options-list .field.choice input[type="radio"], body.catalog-product-view .product-right .product-options-wrapper .options-list .field.choice input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--bs-navy); position: static; opacity: 1; } body.catalog-product-view .product-right .product-options-wrapper .options-list .field.choice > label.label { flex: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 0; padding: 0; border: 0; font-family: var(--bs-font-text); font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--bs-ink); cursor: pointer; text-transform: none; } body.catalog-product-view .product-right .product-options-wrapper .options-list .field.choice > label.label > span:first-child { flex: 1; min-width: 0; } body.catalog-product-view .product-right .product-options-wrapper .options-list .field.choice > label.label .price-notice { flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--bs-rust); white-space: nowrap; } body.catalog-product-view .product-right .product-options-wrapper .options-list .field.choice > label.label .price-notice .price-wrapper, body.catalog-product-view .product-right .product-options-wrapper .options-list .field.choice > label.label .price-notice .price-container { font-size: 14px; font-weight: 700; color: var(--bs-rust); } body.catalog-product-view .product-right .product-options-wrapper input[type="text"], body.catalog-product-view .product-right .product-options-wrapper input.input-text { height: 48px; width: 100%; max-width: 520px; box-sizing: border-box; border: 1px solid #CFC7BA; border-radius: 12px; padding: 0 14px; font-family: var(--bs-font-text); font-size: 16px; color: var(--bs-ink); background: #FBFAF7; box-shadow: none; } body.catalog-product-view .product-right .product-options-wrapper textarea { width: 100%; box-sizing: border-box; min-height: 100px; border: 1px solid #CFC7BA; border-radius: 12px; padding: 12px 14px; font-family: var(--bs-font-text); font-size: 16px; color: var(--bs-ink); background: #FBFAF7; resize: vertical; box-shadow: none; } body.catalog-product-view .product-right .product-options-wrapper input[type="text"]:focus, body.catalog-product-view .product-right .product-options-wrapper textarea:focus { outline: 2px solid var(--bs-navy); outline-offset: 1px; border-color: var(--bs-navy); } body.catalog-product-view .product-right .product-options-wrapper .field.file .control { display: block; border: 2px dashed #CFC7BA; border-radius: 14px; padding: 16px; font-size: 14px; color: var(--bs-ink-2); background: #FFFFFF; box-sizing: border-box; } body.catalog-product-view .product-right .product-options-wrapper .field.file input[type="file"] { font-family: var(--bs-font-text); font-size: 13px; max-width: 100%; } body.catalog-product-view .product-right .product-options-wrapper div.mage-error, body.catalog-product-view .product-right .product-options-wrapper label.mage-error { margin: 0; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #B42318; background: none; } body.catalog-product-view .product-right .product-options-wrapper .note, body.catalog-product-view .product-right .product-options-wrapper .note small { font-size: 13px; color: var(--bs-muted); } /* add to cart card */ body.catalog-product-view .product-right .product-options-bottom { margin: 0; padding: 0; } body.catalog-product-view .product-right .box-tocart, body.catalog-product-view .product-right .box-tocart.large-box-tocart { background: #FFFFFF; border-radius: 24px; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; position: static; box-shadow: none; border: 0; width: auto; } body.catalog-product-view .product-right .box-tocart .fieldset { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; border: 0; } body.catalog-product-view .product-right .box-tocart .scr-pinfo { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; } body.catalog-product-view .product-right .box-tocart .scr-qty-thumb img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; display: block; } body.catalog-product-view .product-right .box-tocart .scr-pname { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--bs-ink); } body.catalog-product-view .product-right .box-tocart .field.qty { display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; } body.catalog-product-view .product-right .box-tocart .field.qty > label.label { border: 0; padding: 0; font-size: 15px; font-weight: 600; color: var(--bs-ink-2); } body.catalog-product-view .product-right .box-tocart .actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; padding: 0; } body.catalog-product-view .product-right .box-tocart .actions button.action.primary { height: 56px; width: 100%; border: 0; border-radius: 999px; padding: 0 24px; margin: 0; font-family: var(--bs-font-text); font-size: 17px; font-weight: 700; line-height: normal; text-transform: none; letter-spacing: normal; color: #FFFFFF; background: var(--bs-navy); box-shadow: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } body.catalog-product-view .product-right .box-tocart .actions button.action.primary:hover { background: #17304F; } body.catalog-product-view .product-right .box-tocart .actions button.action.primary.buy-now, body.catalog-product-view .product-right .box-tocart .actions button.action.primary.buy-now:hover { background: var(--bs-rust); } body.catalog-product-view .product-right .box-tocart .actions button.action.primary.buy-now:hover { background: #9A4515; } body.catalog-product-view .product-right .box-tocart .actions button.action.primary > span { font: inherit; color: inherit; } /* wishlist / compare / share row */ body.catalog-product-view .product-right .product-social-links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; font-size: 14px; font-weight: 600; } body.catalog-product-view .product-right .product-addto-links { display: flex; gap: 20px; margin: 0; padding: 0; } body.catalog-product-view .product-right .product-addto-links .action { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none; font-family: var(--bs-font-text); font-size: 14px; font-weight: 600; color: var(--bs-navy); text-decoration: none; text-transform: none; box-shadow: none; height: auto; min-width: 0; } body.catalog-product-view .product-right .product-addto-links .action:hover { color: var(--bs-rust); } body.catalog-product-view .product-right ul.cdz-social-listing { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; } /* fixes after first measurement */ body.catalog-product-view:has(.product-right) .page-main .columns { padding: 0 !important; margin: 0 !important; } body.catalog-product-view .product-right h1.page-title .base, body.catalog-product-view .product-right h1.page-title { text-transform: none; } body.catalog-product-view .product-right .product-info-main-inner > .product-reviews-summary { position: static; inset: auto; width: auto; height: auto; } body.catalog-product-view .product-right .stock.available, body.catalog-product-view .product-right .product.attribute.sku { flex: 0 0 auto; width: auto; float: none; } /* ===================================================================================================== "Added to cart" popup (Codazon ShoppingCartPro, #cdz-minicart-popup) + the "check spellings" confirmation (Designbuy #mps-add-to-cart-modal) Design: Product.dc.html "Added to cart modal". CSS only; the knockout templates of the popup are untouched. ===================================================================================================== */ .modals-overlay { background: rgba(18, 26, 36, 0.55); } aside.modal-popup:has(#cdz-minicart-popup), aside.modal-popup:has(#mps-add-to-cart-modal) { font-family: var(--bs-font-text); color: var(--bs-ink); } aside.modal-popup:has(#cdz-minicart-popup) .modal-inner-wrap, aside.modal-popup:has(#mps-add-to-cart-modal) .modal-inner-wrap { position: relative; background: #FFFFFF; border-radius: 28px; box-shadow: 0 40px 90px rgba(18, 26, 36, 0.3); box-sizing: border-box; border: 0; overflow: visible; } aside.modal-popup:has(#cdz-minicart-popup) .modal-inner-wrap { width: 1040px; max-width: calc(100% - 32px); max-height: calc(100vh - 32px); margin: 16px auto; padding: clamp(22px, 3vw, 36px); } aside.modal-popup:has(#cdz-minicart-popup) .modal-header, aside.modal-popup:has(#mps-add-to-cart-modal) .modal-header { padding: 0; margin: 0; border: 0; background: none; min-height: 0; } aside.modal-popup:has(#cdz-minicart-popup) .modal-header .action-close, aside.modal-popup:has(#mps-add-to-cart-modal) .modal-header .action-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--bs-cream); color: var(--bs-ink); padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; box-shadow: none; } aside.modal-popup:has(#cdz-minicart-popup) .modal-header .action-close::before, aside.modal-popup:has(#mps-add-to-cart-modal) .modal-header .action-close::before { content: "✕"; font-family: var(--bs-font-text); font-size: 17px; line-height: 1; color: var(--bs-ink); margin: 0; } aside.modal-popup:has(#cdz-minicart-popup) .modal-header .action-close > span, aside.modal-popup:has(#mps-add-to-cart-modal) .modal-header .action-close > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } aside.modal-popup:has(#cdz-minicart-popup) .modal-content { padding: 0; margin: 0; background: none; border: 0; overflow: visible; max-height: none; } #cdz-minicart-popup { font-family: var(--bs-font-text); } #cdz-minicart-popup .block-minicartpro, #cdz-minicart-popup .block-content.block-minicart { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; width: auto; position: static; max-width: none; } #cdz-minicart-popup .section.section-top { padding: 0; margin: 0; border: 0; background: none; } #cdz-minicart-popup .section-top-inner { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; padding: 0; align-items: stretch; } #cdz-minicart-popup .section-top-inner::before, #cdz-minicart-popup .section-top-inner::after { content: none; display: none; } #cdz-minicart-popup .section-top-inner > [class*="col-"] { float: none; width: auto; padding: 0; margin: 0; min-width: 0; } #cdz-minicart-popup .newst-added-item { flex: 1 1 260px; display: flex; flex-direction: column; gap: 14px; } #cdz-minicart-popup .cart-items { flex: 1.3 1 300px; display: flex; flex-direction: column; gap: 14px; padding: 0 28px; border-left: 1px solid #ECE6DC; border-right: 1px solid #ECE6DC; } #cdz-minicart-popup .minicartpro-summary { flex: 1 1 240px; background: var(--bs-cream); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; border: 0; } #cdz-minicart-popup strong.subtitle { display: block; margin: 0; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; line-height: normal; text-transform: uppercase; color: var(--bs-muted); } #cdz-minicart-popup .items-total { display: flex !important; justify-content: space-between; align-items: center; gap: 8px; } #cdz-minicart-popup .items-total .count { display: inline; background: none; width: auto; height: auto; padding: 0; margin: 0 6px 0 0; border: 0; font-size: inherit; font-weight: 700; color: inherit; line-height: normal; } #cdz-minicart-popup .items-total > span { display: inline; } #cdz-minicart-popup .items-total .count + span { margin-right: auto; } #cdz-minicart-popup .items-total a.action.viewcart, #cdz-minicart-popup .items-total a.action.viewcart:hover { font-size: 14px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--bs-navy); text-decoration: none; } #cdz-minicart-popup .minicart-items-wrapper, #cdz-minicart-popup .section-content-inner { max-height: 300px; overflow-y: auto; padding: 0; margin: 0; border: 0; } #cdz-minicart-popup ol.minicart-items { list-style: none; margin: 0; padding: 0; } #cdz-minicart-popup .minicart-items .product-item { margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid #ECE6DC; } #cdz-minicart-popup .minicart-items .product-item:last-child { border-bottom: 0; } #cdz-minicart-popup .product-item-name, #cdz-minicart-popup .product-item-name a, #cdz-minicart-popup .product-item-name span { font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--bs-ink); text-decoration: none; text-transform: none; } #cdz-minicart-popup .newst-added-item .product-item-name, #cdz-minicart-popup .newst-added-item .product-item-name span { font-size: 15px; } #cdz-minicart-popup .product-image-container { border-radius: 12px; overflow: hidden; background: #ECE6DC; display: block; } #cdz-minicart-popup .product-image-container img { border-radius: 12px; object-fit: cover; } #cdz-minicart-popup .product.options .toggle, #cdz-minicart-popup .product.options .toggle span { font-size: 14px; font-weight: 700; color: var(--bs-navy); text-transform: none; cursor: pointer; background: none; border: 0; padding: 0; } #cdz-minicart-popup .product.options .content { font-size: 14px; color: var(--bs-ink-2); } #cdz-minicart-popup .price-container .price, #cdz-minicart-popup .product-item-pricing .price { font-family: var(--bs-font-text); font-size: 15px; font-weight: 700; color: var(--bs-rust); line-height: normal; } #cdz-minicart-popup .newst-added-item .product-item-pricing .price { font-family: var(--bs-font-display); font-size: 22px; font-weight: 600; } #cdz-minicart-popup a.action.delete { width: 28px; height: 28px; border-radius: 999px; background: var(--bs-cream); color: #9A3B10; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; box-shadow: none; text-decoration: none; font-weight: 700; } #cdz-minicart-popup .minicartpro-summary .section-content { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; border: 0; } #cdz-minicart-popup .minicartpro-summary .total-qty, #cdz-minicart-popup .minicartpro-summary .subtotal { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 0; font-size: 15px; color: var(--bs-ink-2); border: 0; } #cdz-minicart-popup .minicartpro-summary .total-qty .amount { font-weight: 700; color: var(--bs-ink); } #cdz-minicart-popup .minicartpro-summary .subtotal .amount .price, #cdz-minicart-popup .minicartpro-summary .subtotal .price { font-family: var(--bs-font-display); font-size: 26px; font-weight: 600; color: var(--bs-ink); line-height: normal; } #cdz-minicart-popup .minicartpro-summary .actions { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; } #cdz-minicart-popup .minicartpro-summary .actions .primary { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; width: 100%; } #cdz-minicart-popup .minicartpro-summary .actions button { width: 100%; box-sizing: border-box; border-radius: 999px; font-family: var(--bs-font-text); font-weight: 700; line-height: normal; text-transform: none; letter-spacing: normal; cursor: pointer; margin: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; } #cdz-minicart-popup .minicartpro-summary .actions button#minicartpro-btn-checkout { order: 1; height: auto; padding: 15px; margin-top: 6px; border: 0; background: var(--bs-rust); color: #FFFFFF; font-size: 16px; } #cdz-minicart-popup .minicartpro-summary .actions button#minicartpro-btn-checkout:hover { background: #9A4515; } #cdz-minicart-popup .minicartpro-summary .actions button.action.close { order: 2; height: 48px; border: 1px solid #CFC7BA; background: #FFFFFF; color: var(--bs-ink); font-size: 15px; } #cdz-minicart-popup .minicartpro-summary .actions button.action.close span { font: inherit; color: inherit; text-transform: none; } /* "check spellings" confirmation (Designbuy) */ aside.modal-popup:has(#mps-add-to-cart-modal) .modal-inner-wrap { width: 460px; max-width: calc(100% - 32px); margin: 16px auto; padding: 32px 28px 28px; } aside.modal-popup:has(#mps-add-to-cart-modal) .modal-content { padding: 0; margin: 0; } #mps-add-to-cart-modal { font-family: var(--bs-font-text); } #mps-add-to-cart-modal form, #mps-add-to-cart-modal fieldset { margin: 0; padding: 0; border: 0; } #mps-add-to-cart-modal fieldset > div:first-child { margin: 0 0 20px !important; font-size: 16px; line-height: 1.5; color: var(--bs-ink-2); text-align: center; } #mps-add-to-cart-modal fieldset > div:first-child span { font-size: 16px; line-height: 1.5; color: var(--bs-ink-2); } #mps-add-to-cart-modal .actions-toolbar { display: flex; gap: 12px; margin: 0; padding: 0; } #mps-add-to-cart-modal .mps-action-buttons { flex: 1; margin: 0; padding: 0; width: auto; float: none; } #mps-add-to-cart-modal .mps-action-buttons button { width: 100% !important; height: 52px; border-radius: 999px; box-shadow: none; font-family: var(--bs-font-text); font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: normal; cursor: pointer; padding: 0 20px; margin: 0; display: flex; align-items: center; justify-content: center; } #mps-add-to-cart-modal #mps-btn-add-to-cart-agree { border: 0; background: var(--bs-rust); color: #FFFFFF; } #mps-add-to-cart-modal #mps-btn-add-to-cart-agree:hover { background: #9A4515; } #mps-add-to-cart-modal #mps-btn-add-to-cart-disagree { border: 1px solid #CFC7BA; background: #FFFFFF; color: var(--bs-ink); } #mps-add-to-cart-modal button span { font: inherit; color: inherit; text-transform: none; } aside.modal-popup.mps-add-to-cart-popup._show { display: flex; align-items: center; justify-content: center; } aside.modal-popup.mps-add-to-cart-popup .modal-inner-wrap { background: #FFFFFF !important; left: auto; right: auto; top: auto; transform: none; position: relative; } aside.modal-popup.mps-add-to-cart-popup .modal-content { background: transparent !important; width: auto; max-width: none; } aside.modal-popup.mps-add-to-cart-popup #mps-add-to-cart-modal { width: 100%; } #cdz-minicart-popup .section-top-inner > .cart-items { padding: 0 28px; } #cdz-minicart-popup .section-top-inner > .minicartpro-summary { padding: 22px; } #cdz-minicart-popup .cart-items .product-item-left { flex: 0 0 64px; width: 64px; max-width: 64px; position: relative; } #cdz-minicart-popup .cart-items .product-item-left .product-image-container, #cdz-minicart-popup .cart-items .product-item-left .product-image-wrapper { width: 64px !important; height: 64px; } #cdz-minicart-popup .cart-items .product-item-left img { width: 64px; height: 64px; object-fit: cover; } #cdz-minicart-popup .cart-items .product.row { display: flex; gap: 12px; align-items: flex-start; margin: 0; } #cdz-minicart-popup .cart-items .product-item-details { flex: 1; width: auto; min-width: 0; padding: 0; } #cdz-minicart-popup .newst-added-item .product.flex-grid { display: flex; gap: 14px; align-items: flex-start; } #cdz-minicart-popup .newst-added-item .left-part { flex: 0 0 92px; width: 92px; } #cdz-minicart-popup .newst-added-item .product-image-container, #cdz-minicart-popup .newst-added-item .product-image-wrapper { width: 92px !important; height: 92px; } #cdz-minicart-popup .newst-added-item .product-item-details { flex: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #cdz-minicart-popup .cart-items .product-item-left { flex: 0 0 auto; width: auto; max-width: none; display: flex; flex-direction: row; gap: 12px; align-items: flex-start; } #cdz-minicart-popup .cart-items .product-item-left a.action.delete { position: static; order: -1; flex-shrink: 0; margin: 0; } #cdz-minicart-popup .cart-items .product-item-left .product-item-photo { display: block; width: 64px; height: 64px; } /* standard (non-designer) products share the page: gallery in a white card, no options banner when there are no options */ body.catalog-product-view .product-left .product.media { background: #FFFFFF; border-radius: 28px; padding: 20px; box-sizing: border-box; width: 100%; float: none; margin: 0; } body.catalog-product-view .product-right form#product_addtocart_form:not(:has(.product-options-wrapper .fieldset .field)) { padding-top: clamp(20px, 2.4vw, 28px); } /* compare block under the gallery: card instead of the old yellow bar */ body.catalog-product-view .product-left .block-compare { position: static; background: #FFFFFF; border: 0; border-radius: 20px; padding: 16px 18px; margin: 16px 0 0; width: 100%; box-sizing: border-box; box-shadow: none; } body.catalog-product-view .product-left .block-compare .block-title { background: none; color: var(--bs-ink); padding: 0; margin: 0 0 8px; border: 0; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } body.catalog-product-view .product-left .block-compare .block-title strong { background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; } body.catalog-product-view .product-left .block-compare .block-content, body.catalog-product-view .product-left .block-compare .empty { padding: 0; margin: 0; font-size: 14px; color: var(--bs-ink-2); background: none; border: 0; } /* ---- CHG-012 follow-up: "Added to cart" popup - cart rows laid out like the design (remove | image | name + qty | price), no inner scrollbars ---- */ #cdz-minicart-popup .cart-items .minicart-items-wrapper, #cdz-minicart-popup .cart-items .section-content-inner { height: auto !important; max-height: 340px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; } #cdz-minicart-popup .cart-items .section-content-inner > * { max-width: 100%; } #cdz-minicart-popup .cart-items .items-total { margin: 0; } #cdz-minicart-popup .cart-items li.product-item .product.row { display: grid; grid-template-columns: 28px 64px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: start; margin: 0; width: 100%; } #cdz-minicart-popup .cart-items .product-item-left, #cdz-minicart-popup .cart-items .product-item-details, #cdz-minicart-popup .cart-items .product-item-details > .row, #cdz-minicart-popup .cart-items .product-item-actions, #cdz-minicart-popup .cart-items .product-item-pricing { display: contents; } #cdz-minicart-popup .cart-items .product-item-left > a.action.delete { grid-column: 1; grid-row: 1; align-self: start; margin: 0; } #cdz-minicart-popup .cart-items .product-item-left > .product-item-photo { grid-column: 2; grid-row: 1 / span 3; width: 64px; height: 64px; } #cdz-minicart-popup .cart-items .product-item-left > a.action.edit { grid-column: 3; grid-row: 4; justify-self: start; font-size: 13px; font-weight: 700; color: var(--bs-navy); text-decoration: none; background: none; border: 0; padding: 0; width: auto; height: auto; } #cdz-minicart-popup .cart-items .product-info { grid-column: 3; grid-row: 1; width: auto; padding: 0; float: none; min-width: 0; } #cdz-minicart-popup .cart-items .product-info .product-item-name { display: block; overflow-wrap: anywhere; } #cdz-minicart-popup .cart-items .product-info .product.options, #cdz-minicart-popup .cart-items .product-info .details-wrapper { margin: 6px 0 0; } #cdz-minicart-popup .cart-items .price-container { grid-column: 4; grid-row: 1; justify-self: end; text-align: right; white-space: nowrap; } #cdz-minicart-popup .cart-items .details-qty { grid-column: 3; grid-row: 2; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; width: auto; float: none; } #cdz-minicart-popup .cart-items .details-qty label.label { position: static; width: auto; height: auto; clip: auto; overflow: visible; margin: 0; padding: 0; font-size: 13px; font-weight: 400; color: var(--bs-muted); } #cdz-minicart-popup .cart-items .cdz-qty-box { display: flex; align-items: center; height: 36px; margin: 0; border: 1px solid #CFC7BA; border-radius: 10px; overflow: hidden; background: #FFFFFF; width: auto; } #cdz-minicart-popup .cart-items .cdz-qty-box .m-btn { position: relative; width: 32px; height: 100%; margin: 0; padding: 0; border: 0; background: #FFFFFF; cursor: pointer; flex: none; } #cdz-minicart-popup .cart-items .cdz-qty-box .m-btn:hover { background: var(--bs-sky); } #cdz-minicart-popup .cart-items .cdz-qty-box .m-btn::before, #cdz-minicart-popup .cart-items .cdz-qty-box .m-btn::after { content: none; } #cdz-minicart-popup .cart-items .cdz-qty-box .m-minus::after { content: "−"; display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; font-size: 18px; font-weight: 700; color: var(--bs-ink); } #cdz-minicart-popup .cart-items .cdz-qty-box .m-plus::after { content: "+"; display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; font-size: 18px; font-weight: 700; color: var(--bs-ink); } #cdz-minicart-popup .cart-items .cdz-qty-box input.cart-item-qty { width: 40px; height: 100%; margin: 0; padding: 0; border: 0; border-left: 1px solid #ECE6DC; border-right: 1px solid #ECE6DC; border-radius: 0; text-align: center; font-family: var(--bs-font-text); font-size: 14px; font-weight: 700; color: var(--bs-ink); background: #FFFFFF; box-shadow: none; -moz-appearance: textfield; } #cdz-minicart-popup .cart-items .update-cart-item { grid-column: 3; height: 32px; border: 0; border-radius: 999px; background: var(--bs-navy); color: #FFFFFF; font-weight: 700; padding: 0 14px; } #cdz-minicart-popup .cart-items .product-item-left a.action.delete { position: static; } #cdz-minicart-popup .newst-added-item .product.flex-grid { align-items: flex-start; } #cdz-minicart-popup .newst-added-item .product-item-photo, #cdz-minicart-popup .newst-added-item .product-image-container { border-radius: 14px; } #cdz-minicart-popup a.action.delete { position: relative; background: var(--bs-cream); border: 1px solid #E2DCD2; } #cdz-minicart-popup a.action.delete > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } #cdz-minicart-popup a.action.delete::before { content: "✕"; position: static; display: block; font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; line-height: 1; color: #9A3B10; margin: 0; opacity: 1; } #cdz-minicart-popup a.action.delete::after { content: none; } #cdz-minicart-popup a.action.delete:hover { background: #F3DDD0; } /* ---- design parity (measured against Product.dc.html popup): content-box columns like the artboard, "Open cart" link text ---- */ #cdz-minicart-popup .cart-items, #cdz-minicart-popup .minicartpro-summary { box-sizing: content-box; } #cdz-minicart-popup .cart-items .items-total { display: flex !important; justify-content: space-between; align-items: center; } #cdz-minicart-popup .cart-items .items-total a.action.viewcart { font-size: 14px; width: auto; height: auto; text-indent: 0; background: none; padding: 0; margin: 0; display: inline-flex; align-items: center; } #cdz-minicart-popup .cart-items .items-total a.action.viewcart > span, #cdz-minicart-popup .cart-items .items-total a.action.viewcart::before, #cdz-minicart-popup .cart-items .items-total a.action.viewcart svg { display: none; } #cdz-minicart-popup .cart-items .items-total a.action.viewcart::after { content: "Open cart ↗"; font-size: 14px; font-weight: 700; color: var(--bs-navy); } aside.modal-popup:has(#cdz-minicart-popup) .modal-inner-wrap { display: flex; flex-direction: column; } aside.modal-popup:has(#cdz-minicart-popup) .modal-content { flex: 1 1 auto; width: 100%; max-width: 100%; box-sizing: border-box; } #cdz-minicart-popup .minicartpro-summary .cdz-cart-validation-message:empty, #cdz-minicart-popup .minicartpro-summary .minicart-widgets:empty, #cdz-minicart-popup .minicartpro-summary .actions .primary > div:empty { display: none; } #cdz-minicart-popup .minicartpro-summary .section-content { gap: 12px; } #cdz-minicart-popup .minicartpro-summary .total-qty .label span, #cdz-minicart-popup .minicartpro-summary .subtotal .label span { text-transform: lowercase; display: inline-block; } #cdz-minicart-popup .minicartpro-summary .total-qty .label span::first-letter, #cdz-minicart-popup .minicartpro-summary .subtotal .label span::first-letter { text-transform: uppercase; } #cdz-minicart-popup .minicartpro-summary .section-content { gap: 0; } #cdz-minicart-popup .minicartpro-summary .total-qty, #cdz-minicart-popup .minicartpro-summary .subtotal { line-height: 18px; } #cdz-minicart-popup .minicartpro-summary .total-qty .label, #cdz-minicart-popup .minicartpro-summary .subtotal .label { line-height: 18px; height: auto; } #cdz-minicart-popup .minicartpro-summary .subtotal { margin-top: 12px; } #cdz-minicart-popup .minicartpro-summary .actions { margin-top: 12px; } #cdz-minicart-popup .minicartpro-summary .cdz-cart-validation-message, #cdz-minicart-popup .minicartpro-summary .minicart-widgets { margin: 0; padding: 0; } /* ---- step 2 design parity: "Edit design" pill with pencil, banner with icon + ALMOST DONE + sub-text + chips (generated text, English only) ---- */ body.catalog-product-view .product-left .advance-option-preview > .absolute button { font-size: 0; display: inline-flex; align-items: center; gap: 8px; letter-spacing: normal; text-transform: none; } body.catalog-product-view .product-left .advance-option-preview > .absolute button::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--bs-navy); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } body.catalog-product-view .product-left .advance-option-preview > .absolute button::after { content: "Edit design"; font-size: 14px; font-weight: 700; } body.catalog-product-view .product-right form#product_addtocart_form:has(.product-options-wrapper .fieldset .field)::before { content: "Checkout options\A Tell us how to deliver and install your monument. Your price updates as you choose."; white-space: pre-line; padding: calc(clamp(24px, 2.8vw, 32px) + 24px) clamp(20px, 2.4vw, 28px) clamp(24px, 2.8vw, 32px) calc(clamp(20px, 2.4vw, 28px) + 72px); font-family: var(--bs-font-text); font-size: 15px; font-weight: 400; line-height: 1.45; color: #C9D3DE; background: url("data:image/svg+xml;utf8,") no-repeat clamp(20px, 2.4vw, 28px) 50% / 52px 52px, linear-gradient(120deg, #1E3A5F 0%, #2A4E7A 100%); } body.catalog-product-view .product-right form#product_addtocart_form:has(.product-options-wrapper .fieldset .field)::before { } body.catalog-product-view .product-right form#product_addtocart_form:has(.product-options-wrapper .fieldset .field)::first-line { font-family: var(--bs-font-display); font-size: 28px; font-weight: 500; line-height: 1.15; color: #FFFFFF; } body.catalog-product-view .product-right form#product_addtocart_form:has(.product-options-wrapper .fieldset .field)::after { content: "ALMOST DONE"; position: absolute; top: calc(clamp(24px, 2.8vw, 32px) + 2px); left: calc(clamp(20px, 2.4vw, 28px) + 72px); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; line-height: 1; color: #F0B98C; } body.catalog-product-view .product-right form#product_addtocart_form .product-options-wrapper::before { content: "✓ Free design proof ✓ Installed locally"; white-space: pre; position: absolute; top: calc(clamp(24px, 2.8vw, 32px) + 12px); right: 120px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; font-size: 13px; font-weight: 600; line-height: 1.2; z-index: 1; } body.catalog-product-view .product-right form#product_addtocart_form .product-options-wrapper::after { content: "* Required"; position: absolute; top: calc(clamp(24px, 2.8vw, 32px) + 12px); right: clamp(20px, 2.4vw, 28px); padding: 7px 12px; border-radius: 999px; background: var(--bs-rust); color: #FFFFFF; font-size: 13px; font-weight: 700; line-height: 1.2; z-index: 1; } @media (max-width: 1499px) { body.catalog-product-view .product-right form#product_addtocart_form .product-options-wrapper::before, body.catalog-product-view .product-right form#product_addtocart_form .product-options-wrapper::after { display: none; } } /* banner v2: title = form::before (Fraunces), eyebrow + sub-text = .product-add-form pseudo-elements (a pseudo-element cannot style its own first line) */ body.catalog-product-view .product-right .product-add-form { position: relative; } body.catalog-product-view .product-right form#product_addtocart_form { position: static; } body.catalog-product-view .product-right form#product_addtocart_form:has(.product-options-wrapper .fieldset .field)::before { content: "Checkout options"; white-space: normal; padding: calc(clamp(24px, 2.8vw, 32px) + 20px) clamp(20px, 2.4vw, 28px) calc(clamp(24px, 2.8vw, 32px) + 56px) calc(clamp(20px, 2.4vw, 28px) + 72px); font-family: var(--bs-font-display); font-size: 28px; font-weight: 500; line-height: 1.15; color: #FFFFFF; } body.catalog-product-view .product-right form#product_addtocart_form:has(.product-options-wrapper .fieldset .field)::after { content: none; } body.catalog-product-view .product-right .product-add-form:has(.product-options-wrapper .fieldset .field)::before { content: "ALMOST DONE"; position: absolute; z-index: 1; top: calc(clamp(24px, 2.8vw, 32px) + 2px); left: calc(clamp(20px, 2.4vw, 28px) + 72px); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; line-height: 1; color: #F0B98C; } body.catalog-product-view .product-right .product-add-form:has(.product-options-wrapper .fieldset .field)::after { content: "Tell us how to deliver and install your monument. Your price updates as you choose."; position: absolute; z-index: 1; top: calc(clamp(24px, 2.8vw, 32px) + 20px + 32px + 8px); left: calc(clamp(20px, 2.4vw, 28px) + 72px); right: 420px; font-size: 15px; font-weight: 400; line-height: 1.45; color: #C9D3DE; } body.catalog-product-view .product-right form#product_addtocart_form .product-options-wrapper::before { top: calc(clamp(24px, 2.8vw, 32px) + 18px); } body.catalog-product-view .product-right form#product_addtocart_form .product-options-wrapper::after { top: calc(clamp(24px, 2.8vw, 32px) + 18px); } @media (max-width: 1499px) { body.catalog-product-view .product-right .product-add-form:has(.product-options-wrapper .fieldset .field)::after { right: 28px; } } /* review link: same look in every state (theme hover turned it black/yellow) - design: navy, 600, underlined */ body.catalog-product-view .product-right .product-reviews-summary .reviews-actions a.action.add, body.catalog-product-view .product-right .product-reviews-summary .reviews-actions a.action.add:hover, body.catalog-product-view .product-right .product-reviews-summary .reviews-actions a.action.add:focus, body.catalog-product-view .product-right .product-reviews-summary .reviews-actions a.action.add:active, body.catalog-product-view .product-right .product-reviews-summary .reviews-actions a.action.add:visited { color: var(--bs-navy); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-transform: none; letter-spacing: normal; opacity: 1; background: none; } /* banner chips as three separate pills like the artboard: Free design proof | Installed locally | * Required */ body.catalog-product-view .product-right form#product_addtocart_form .product-options-wrapper::before { content: "✓ Free design proof"; white-space: pre; right: calc(clamp(20px, 2.4vw, 28px) + 92px + 8px + 136px + 8px); width: 128px; text-align: center; padding: 7px 0; box-sizing: content-box; } body.catalog-product-view .product-right form#product_addtocart_form:has(.product-options-wrapper .fieldset .field)::after { content: "✓ Installed locally"; white-space: pre; position: absolute; z-index: 1; top: calc(clamp(24px, 2.8vw, 32px) + 18px); right: calc(clamp(20px, 2.4vw, 28px) + 92px + 8px); width: 128px; text-align: center; padding: 7px 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; font-size: 13px; font-weight: 600; line-height: 1.2; box-sizing: content-box; } body.catalog-product-view .product-right form#product_addtocart_form .product-options-wrapper::after { width: 80px; text-align: center; padding: 7px 0; box-sizing: content-box; } @media (max-width: 1499px) { body.catalog-product-view .product-right form#product_addtocart_form:has(.product-options-wrapper .fieldset .field)::after { display: none; } } body.catalog-product-view .product-right form#product_addtocart_form:has(.product-options-wrapper .fieldset .field)::after { left: auto; font-family: var(--bs-font-text); letter-spacing: normal; } /* "Your price so far" card (CHG-014): template block in the left column; only shown with a saved design (step 2) */ .bs-price-card { display: none; } body.catalog-product-view .product-left .bs-price-card { background: var(--bs-navy); color: #FFFFFF; border-radius: 24px; padding: 22px 24px; box-sizing: border-box; flex-direction: column; gap: 10px; margin-top: 16px; } body.catalog-product-view:has(.advance-option-preview) .product-left .bs-price-card { display: flex; } .bs-price-card__eyebrow { font-family: var(--bs-font-text); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; line-height: normal; color: #F0B98C; } .bs-price-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .bs-price-card__label { font-family: var(--bs-font-text); font-size: 15px; color: #D5DFEA; } .bs-price-card__value { font-family: var(--bs-font-display); font-size: 34px; font-weight: 600; line-height: 1.1; color: #FFFFFF; } .bs-price-card__note { font-family: var(--bs-font-text); font-size: 14px; line-height: 1.4; color: #D5DFEA; } body.catalog-product-view .product-info-main > .bs-price-card { background: var(--bs-navy); color: #FFFFFF; border-radius: 24px; padding: 22px 24px; box-sizing: border-box; flex-direction: column; gap: 10px; } body.catalog-product-view:has(.advance-option-preview) .product-info-main > .bs-price-card { display: flex; } /* sticky left column: saved design + price card scroll together under the sticky site header (the card is moved into .product-left by js/bs-price-card.js because the designer app rebuilds that column) */ body.catalog-product-view .product-left { position: sticky; top: 170px; align-self: flex-start; display: flex; flex-direction: column; gap: 16px; } body.catalog-product-view .product-left .bs-price-card { margin-top: 0; width: 100%; } body.catalog-product-view .product-info-main > .bs-price-card { flex: 1 1 100%; margin-top: 16px; } /* fallback (script not run / stale): card still sits right under the saved design, not at the bottom - only when it is a direct child of the row */ @media (min-width: 1060px) { body.catalog-product-view .row.product-info-main.full-width:has(.product-right):has(> .bs-price-card) { display: grid; grid-template-columns: calc(33.333% + 82.67px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 32px; row-gap: 16px; align-items: start; } body.catalog-product-view .product-info-main:has(> .bs-price-card) > .product-left { grid-column: 1; grid-row: 1; position: static; } body.catalog-product-view .product-info-main:has(> .bs-price-card) > .product-right { grid-column: 2; grid-row: 1 / span 2; } body.catalog-product-view .product-info-main > .bs-price-card { grid-column: 1; grid-row: 2; margin-top: 0; position: sticky; top: 170px; align-self: start; } } /* validation messages: clear gap above, tinted box with icon so they are easy to spot */ body.catalog-product-view .product-right .product-options-wrapper div.mage-error, body.catalog-product-view .product-right .product-options-wrapper label.mage-error { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 12px 16px; border: 1px solid #F3B8AE; border-left: 5px solid #C0392B; border-radius: 12px; background: #FDEEEA; font-size: 14px; font-weight: 700; line-height: 1.4; color: #9B1C0F; } body.catalog-product-view .product-right .product-options-wrapper div.mage-error::before, body.catalog-product-view .product-right .product-options-wrapper label.mage-error::before { content: "!"; flex: none; width: 22px; height: 22px; border-radius: 999px; background: #C0392B; color: #FFFFFF; font-size: 14px; font-weight: 800; line-height: 22px; text-align: center; } /* the option group that failed: tint the question + cards border */ body.catalog-product-view .product-right .product-options-wrapper .field:has(.mage-error) > label.label, body.catalog-product-view .product-right .product-options-wrapper .field:has(div.mage-error) > .label { border-left-color: #C0392B; } body.catalog-product-view .product-right .product-options-wrapper .field:has(.mage-error) .control { scroll-margin-top: 200px; } /* same look for the designer text inputs (e.g. Add text fields) */ body.catalog-product-view .product-right .product-options-wrapper input.mage-error, body.catalog-product-view .product-right .product-options-wrapper textarea.mage-error, body.catalog-product-view .product-right .product-options-wrapper select.mage-error { border-color: #C0392B !important; background: #FFF8F6 !important; } /* QA: "check spellings" popup on narrow phones - the slide-modal base rule left it 44px off the left edge and its content kept a 265px minimum, so it spilled out of the white box at 320-360px */ aside.modal-popup.mps-add-to-cart-popup { left: 0; right: 0; } aside.modal-popup.mps-add-to-cart-popup .modal-content { min-width: 0; } @media (max-width: 420px) { aside.modal-popup.mps-add-to-cart-popup .modal-inner-wrap { padding: 28px 18px 22px; } #mps-add-to-cart-modal .actions-toolbar { flex-wrap: wrap; } #mps-add-to-cart-modal .mps-action-buttons { flex: 1 1 100%; } } /* CHG-036 (SEO): the long product description. The designer stylesheet hides .product.info.detailed, so it is shown again here as a white card under the two columns. Only the description panel is shown (tab titles and the empty Reviews tab stay hidden); the Codazon "More view" clamp is removed so the text is fully readable. */ body.catalog-product-view .column.main > .product.info.detailed { display: block; max-width: 1488px; width: 100%; box-sizing: border-box; margin: 40px auto 0; padding: 0; } body.catalog-product-view .product.info.detailed .product.data.items > .data.item.title, body.catalog-product-view .product.info.detailed #reviews { display: none; } body.catalog-product-view .product.info.detailed #description { display: block; background: #FFFFFF; border-radius: 28px; padding: 36px 40px; box-sizing: border-box; margin: 0; } body.catalog-product-view .product.info.detailed #description::before { content: "ABOUT THIS MONUMENT"; display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--bs-muted); margin-bottom: 12px; } body.catalog-product-view .product.info.detailed #description .content-outer { max-height: none !important; overflow: visible !important; } body.catalog-product-view .product.info.detailed #description .content-toolbar { display: none; } body.catalog-product-view .product.info.detailed #description .value { max-width: 860px; font-family: var(--bs-font-text); font-size: 16px; line-height: 1.65; color: var(--bs-ink-2); } body.catalog-product-view .product.info.detailed #description .value p { margin: 0 0 16px; } body.catalog-product-view .product.info.detailed #description .value h3 { font-family: var(--bs-font-display); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--bs-navy); margin: 28px 0 10px; } body.catalog-product-view .product.info.detailed #description .value ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; } body.catalog-product-view .product.info.detailed #description .value li { margin: 0 0 6px; } body.catalog-product-view .product.info.detailed #description .value strong { color: var(--bs-ink); } @media (max-width: 767px) { body.catalog-product-view .column.main > .product.info.detailed { margin-top: 28px; } body.catalog-product-view .product.info.detailed #description { padding: 24px 20px; border-radius: 22px; } body.catalog-product-view .product.info.detailed #description .value h3 { font-size: 20px; } } /* the designer app renders the description itself in a zero-width column (one letter per line), so its copies are hidden and the card above is the readable version; the card sits under the designer */ body.catalog-product-view .main-quick-edit .description-section .description { display: none !important; } body.catalog-product-view .column.main:has(> #root) { display: flex; flex-direction: column; } body.catalog-product-view .column.main:has(> #root) > #root { order: 1; width: 100%; } body.catalog-product-view .column.main:has(> #root) > .product.info.detailed { order: 2; } body.catalog-product-view .product.info.detailed .product.data.items { background: none; padding: 0; border: 0; margin: 0; box-shadow: none; } body.catalog-product-view .product.info.detailed #description .content-outer::after { display: none; } /* the theme shows its own accordion titles ("Details", "Reviews") on phones with !important: hide them too, the card has its own heading */ body.catalog-product-view .product.info.detailed .product.data.items > .data.item.title, body.catalog-product-view .product.info.detailed .product.data.items > .data.item.title.visible-xs { display: none !important; } body.catalog-product-view .product.info.detailed #reviews { display: none !important; } /* QA 2026-10-22: "Customer login" pop-up that opens from Save in the designer (aside.customer-popup-ajax): old yellow SIGN IN, square yellow close, Roboto. Same look as the Bluesprings login page. */ aside.modal-popup.customer-popup-ajax .modal-inner-wrap { position: relative; width: 440px !important; max-width: calc(100% - 32px) !important; box-sizing: border-box; margin: 24px auto; padding: 32px 32px 28px; background: #FFFFFF; border: 0; border-radius: 24px; box-shadow: 0 40px 90px rgba(18, 26, 36, 0.3); } aside.modal-popup.customer-popup-ajax .modal-header { margin: 0 0 14px; padding: 0 48px 12px 0; border: 0; border-bottom: 1px solid #ECE6DC; background: none; display: flex; flex-direction: column; gap: 6px; } aside.modal-popup.customer-popup-ajax .modal-header::before { content: "WELCOME BACK"; font-family: var(--bs-font-text); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--bs-rust); } aside.modal-popup.customer-popup-ajax .modal-header .modal-title { margin: 0; padding: 0; border: 0; font-family: var(--bs-font-display); font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: normal; text-transform: lowercase; text-align: left; color: var(--bs-ink); } aside.modal-popup.customer-popup-ajax .modal-header .modal-title::first-letter { text-transform: uppercase; } aside.modal-popup.customer-popup-ajax .modal-header .action-close { position: absolute; top: 14px; right: 14px; left: auto; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--bs-cream); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; } aside.modal-popup.customer-popup-ajax .modal-header .action-close::before { content: "\2715"; position: static; margin: 0; width: auto; height: auto; font-family: var(--bs-font-text); font-size: 17px; line-height: 1; color: var(--bs-ink); } aside.modal-popup.customer-popup-ajax .modal-header .action-close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } aside.modal-popup.customer-popup-ajax .modal-content { margin: 0; padding: 0; overflow: visible; } aside.modal-popup.customer-popup-ajax form.form-login, aside.modal-popup.customer-popup-ajax fieldset.login { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; font-family: var(--bs-font-text); } aside.modal-popup.customer-popup-ajax fieldset.login::before, aside.modal-popup.customer-popup-ajax fieldset.login::after { content: none; display: none; } aside.modal-popup.customer-popup-ajax .field { margin: 0; padding: 0; width: auto; float: none; display: flex; flex-direction: column; gap: 6px; } aside.modal-popup.customer-popup-ajax .field.note { font-size: 15px; line-height: 1.5; color: var(--bs-ink-2); } aside.modal-popup.customer-popup-ajax .field > label.label { display: block; float: none; width: auto; margin: 0; padding: 0; text-align: left; font-size: 14px; font-weight: 600; color: var(--bs-ink); } aside.modal-popup.customer-popup-ajax .field > .control { margin: 0; padding: 0; width: auto; float: none; } aside.modal-popup.customer-popup-ajax input.input-text { width: 100%; height: 50px; box-sizing: border-box; margin: 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); } aside.modal-popup.customer-popup-ajax input.input-text:focus { border-color: var(--bs-navy); outline: 2px solid rgba(30, 58, 95, 0.25); outline-offset: 0; } aside.modal-popup.customer-popup-ajax .actions-toolbar { margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 14px; } aside.modal-popup.customer-popup-ajax .actions-toolbar > .primary, aside.modal-popup.customer-popup-ajax .actions-toolbar > .secondary { margin: 0; padding: 0; float: none; width: 100%; display: block; text-align: center; } aside.modal-popup.customer-popup-ajax button.action.login.primary { width: 100%; height: 52px; border: 0; border-radius: 999px; background: var(--bs-navy); color: #FFFFFF; font-family: var(--bs-font-text); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: none; cursor: pointer; } aside.modal-popup.customer-popup-ajax button.action.login.primary:hover { background: #17304F; } aside.modal-popup.customer-popup-ajax .actions-toolbar a.action.remind { font-family: var(--bs-font-text); font-size: 15px; font-weight: 600; color: var(--bs-rust); text-decoration: none; } aside.modal-popup.customer-popup-ajax .actions-toolbar a.action.remind:hover { text-decoration: underline; } aside.modal-popup.customer-popup-ajax .messages { margin: 0; } aside.modal-popup.customer-popup-ajax._show { display: flex !important; align-items: center; justify-content: center; } aside.modal-popup.customer-popup-ajax._show .modal-inner-wrap { margin: 0 auto; max-height: calc(100vh - 32px); overflow-y: auto; } /* CHG-051: Codazon "sticky add to cart" bar (box-tocart.att-scr-qty.active) turns the Add to Cart box into a fixed white bar over the header and the page text when scrolling; the design has none */ body.catalog-product-view .box-tocart.att-scr-qty.active { position: static !important; display: block !important; width: auto !important; padding: 0 !important; animation: none !important; box-shadow: none !important; border: 0 !important; } /* CHG-052: below 1060px the saved design and the options are stacked; a sticky left column then slides over the title and price while scrolling (mobile: image on top of the text) */ @media (max-width: 1059px) { body.catalog-product-view .product-left, body.catalog-product-view .product-info-main > .bs-price-card { position: static; } }