:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #26322d; background: #f8f8f5; }
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
button { cursor: pointer; }
.site-header { height: 78px; padding: 0 clamp(20px, 5vw, 76px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; background: rgba(255,255,253,.94); border-bottom: 1px solid #eaebe6; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; color: #26322d; text-decoration: none; font-size: .75rem; font-weight: 800; letter-spacing: .13em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: #2d5b4c; font-size: 1rem; letter-spacing: 0; }
.brand-logo { display: block; width: clamp(188px, 17vw, 238px); height: auto; }
.brand-logo-footer { width: min(238px, 58vw); }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a { padding: 29px 0 25px; color: #67736c; text-decoration: none; font-size: .9rem; border-bottom: 3px solid transparent; }
.site-nav a:hover, .site-nav a.active { color: #2d5b4c; border-color: #2d5b4c; }
.account-menu { justify-self: end; position: relative; }
.account-button, .tool-icon, .modal-close, .back-button { border: 0; background: transparent; color: #26322d; }
.account-button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 999px; }
.account-button:hover { background: #eff2ed; }.account-button .material-icons { font-size: 27px; color: #2d5b4c; }
.account-popover { position: absolute; top: calc(100% + 13px); right: 0; width: min(360px, calc(100vw - 32px)); padding: 25px; background: #fff; border: 1px solid #eaebe6; border-radius: 17px; box-shadow: 0 18px 50px rgba(33, 49, 40, .16); z-index: 20; }
.account-popover h2, .modal-card h2, .workspace-heading h2, .order-panel h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.account-popover h2 { font-size: 1.65rem; }.eyebrow { margin: 0 0 7px; color: #2d5b4c; font-size: .68rem; font-weight: 800; letter-spacing: .15em; }.muted { color: #728078; font-size: .9rem; line-height: 1.55; }
.compact-form, .account-form { display: grid; gap: 13px; margin-top: 20px; }.compact-form label, .account-form label, .order-details-grid label, .tool-label { display: grid; gap: 6px; color: #526057; font-size: .78rem; font-weight: 700; }.compact-form input, .account-form input, .account-form textarea, .order-details-grid select, .order-details-grid textarea, .toolbar select, .toolbar input { width: 100%; border: 1px solid #dce1dc; border-radius: 9px; padding: 10px 11px; color: #26322d; background: #fff; outline-color: #6e9b8b; font-weight: 400; }.compact-form input:focus, .account-form input:focus, .account-form textarea:focus, .order-details-grid select:focus, .order-details-grid textarea:focus, .toolbar select:focus, .toolbar input:focus { border-color: #6e9b8b; box-shadow: 0 0 0 3px rgba(110,155,139,.15); }.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 43px; border: 0; border-radius: 10px; padding: 10px 15px; background: #2d5b4c; color: #fff; font-weight: 700; box-shadow: 0 7px 15px rgba(45,91,76,.18); }.primary-button:hover { background: #24493d; }.text-button { margin-top: 16px; padding: 0; border: 0; background: transparent; color: #2d5b4c; text-decoration: underline; font-size: .85rem; }.back-button { display: inline-flex; align-items: center; gap: 4px; padding: 0; color: #526057; font-size: .82rem; }.back-button .material-icons { font-size: 17px; }.menu-action { width: 100%; display: grid; grid-template-columns: 28px 1fr 20px; gap: 11px; align-items: center; padding: 14px 0; border: 0; border-top: 1px solid #eef0ec; background: transparent; color: #26322d; text-align: left; }.menu-action:first-of-type { margin-top: 18px; }.menu-action:hover { color: #2d5b4c; }.menu-action .material-icons { color: #2d5b4c; }.menu-action small { display: block; margin-top: 3px; color: #728078; font-size: .74rem; }.sign-out { color: #9c3f3f; }
.address-fieldset { min-width: 0; margin: 6px 0 0; padding: 15px; border: 1px solid #cfddd3; border-radius: 12px; background: #f8faf7; }.address-fieldset legend { padding: 0 7px; color: #2d5b4c; font-size: .82rem; font-weight: 800; }.address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.address-grid .address-street { grid-column: 1 / -1; }.compact-form .address-toggle, .account-form .address-toggle { display: flex; grid-template-columns: none; align-items: center; gap: 9px; }.address-toggle input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: #2d5b4c; }.account-details-card { width: min(720px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }.account-popover #register-panel { max-height: min(76vh, 760px); overflow-y: auto; padding-right: 4px; }
.account-modal-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 20px 0 18px; padding: 5px; border-radius: 11px; background: #edf1eb; }.account-modal-tabs button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border: 0; border-radius: 8px; color: #68776e; background: transparent; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 750; }.account-modal-tabs button[aria-selected="true"] { color: #2d5b4c; background: #fff; box-shadow: 0 2px 7px rgba(37,51,43,.08); }.account-modal-tabs .material-icons { font-size: 18px; }.account-tab-panel[hidden] { display: none; }.account-personal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.account-form > .primary-button { justify-self: end; min-width: 150px; }.account-form > .form-status { margin: -4px 0 0; text-align: right; }
main { max-width: 1180px; margin: 0 auto; padding: clamp(35px, 5.33vw, 63px) 24px 70px; }.hero { max-width: 590px; margin: 0 auto 52px; text-align: center; }.hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.7rem, 6vw, 4.7rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }.hero > p:last-child { max-width: 450px; margin: 20px auto 0; color: #718078; line-height: 1.65; }.workspace-card { padding: clamp(20px, 4vw, 40px); background: #fff; border: 1px solid #ecece7; border-radius: 22px; box-shadow: 0 18px 55px rgba(37, 51, 43, .08); }.workspace-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 27px; }.workspace-heading h2 { font-size: 2rem; }.workspace-heading p { margin: 8px 0 0; color: #728078; line-height: 1.5; }.bed-dimensions { flex: 0 0 auto; padding: 9px 12px; border-radius: 999px; background: #eff5ef; color: #2d5b4c !important; font-size: .8rem; font-weight: 700; }.toolbar { display: flex; flex-wrap: wrap; gap: 9px; align-items: end; padding: 12px; background: #f7f8f5; border: 1px solid #e8ebe5; border-radius: 13px; }.tool-label { min-width: 165px; }.toolbar select, .toolbar input { min-height: 39px; padding: 8px 10px; font-size: .85rem; }.toolbar input[type="number"] { width: 76px; }.toolbar > select { width: 145px; }.toolbar-divider { height: 33px; width: 1px; margin: 0 2px; background: #dfe4de; }.tool-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 9px; background: #fff; border: 1px solid #dfe4de; }.tool-icon:hover { border-color: #82a99b; background: #eff5ef; }.selection-dimensions { min-height: 1.3em; margin: 15px 0 10px; color: #728078; font-size: .8rem; }#workspace-canvas-wrapper { max-width: 100%; overflow: auto; padding: 3px; border-radius: 12px; background: #edf0eb; }#workspace-canvas-wrapper .canvas-container { background: #fff; box-shadow: 0 4px 15px rgba(38,50,45,.14); }.order-panel { display: grid; grid-template-columns: 1fr 2fr auto; gap: 20px; align-items: end; margin-top: 29px; padding: 20px; border-radius: 14px; background: #f5f8f4; }.order-panel h2 { font-size: 1.45rem; }.order-panel p { margin: 6px 0 0; color: #728078; font-size: .86rem; line-height: 1.45; }.order-details-grid { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(200px, 1.4fr); gap: 12px; }.order-details-grid label span, .account-form label span { color: #89938c; font-weight: 400; }.order-details-grid textarea { resize: vertical; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.modal-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(27, 39, 33, .38); z-index: 30; }.modal-overlay[hidden], .account-popover[hidden] { display: none; }.modal-card { position: relative; width: min(580px, 100%); max-height: min(720px, calc(100vh - 40px)); overflow: auto; padding: 33px; border-radius: 19px; background: #fff; box-shadow: 0 25px 70px rgba(18,30,24,.24); }.modal-card h2 { font-size: 2rem; }.modal-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; }.modal-close:hover { background: #f0f2ee; }.order-submission-notice { margin: 18px 0 0; padding: 12px 14px; border: 1px solid #bfd5c8; border-radius: 10px; background: #f1f7f3; color: #2d5b4c; font-weight: 700; }.review-order-status { min-height: 1.4em; margin: 14px 0 0; color: #53665c; font-size: .88rem; }#customer-orders-list { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }#customer-orders-list li { padding: 15px; border: 1px solid #e6e9e4; border-radius: 11px; background: #fbfcfa; }.order-history-item-title { display: block; margin-bottom: 5px; color: #2d5b4c; }.order-history-item-detail { color: #728078; font-size: .83rem; }
@media (max-width: 780px) { .site-header { height: 67px; grid-template-columns: 1fr auto; padding: 0 18px; }.site-nav { display: none; }.brand { font-size: .64rem; }.brand-logo { width: min(174px, 52vw); }.account-button-label { display: none; } main { padding: 48px 16px; }.workspace-card { padding: 19px; }.workspace-heading { display: block; }.bed-dimensions { display: inline-block; margin-top: 14px !important; }.toolbar-divider { display: none; }.order-panel { grid-template-columns: 1fr; gap: 15px; }.order-details-grid { grid-template-columns: 1fr; }.order-panel .primary-button { width: 100%; }.hero { margin-bottom: 35px; } }

/* Styled on-page dropdown popovers */
.custom-select { position: relative; min-width: 100%; }
.compact-select { min-width: 145px; }
.custom-select-trigger { width: 100%; min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid #dce1dc; border-radius: 9px; color: #26322d; background: #fff; text-align: left; font-size: .85rem; font-weight: 400; }
.custom-select-trigger:hover, .custom-select-trigger[aria-expanded="true"] { border-color: #82a99b; box-shadow: 0 0 0 3px rgba(110,155,139,.12); }
.custom-select-trigger .material-icons { color: #61716a; font-size: 18px; }
.custom-select-options { position: absolute; top: calc(100% + 7px); left: 0; z-index: 8; width: max-content; min-width: 100%; max-width: min(310px, calc(100vw - 48px)); max-height: 250px; overflow: auto; padding: 6px; border: 1px solid #e1e6df; border-radius: 11px; background: #fff; box-shadow: 0 14px 30px rgba(37,51,43,.15); }
.custom-select-options[hidden] { display: none; }
.custom-select-options button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; color: #314139; background: transparent; text-align: left; cursor: pointer; font-size: .84rem; white-space: nowrap; }
.custom-select-options button:hover, .custom-select-options button[aria-selected="true"] { background: #edf4ed; color: #2d5b4c; }

/* Home page and design gallery */
.site-view { display: none; }.site-view.active { display: block; }
.hero-button { margin-top: 27px; }.gallery-section { margin: 86px calc(clamp(24px, 5vw, 76px) * -1) 0; padding: 58px 0 4px; overflow: hidden; background: #eef3ec; }.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; max-width: 1180px; margin: 0 auto 31px; padding: 0 24px; }.gallery-heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; letter-spacing: -.035em; }.gallery-heading > p { max-width: 330px; margin: 0; color: #718078; line-height: 1.6; }.design-carousel { width: 100%; overflow: hidden; padding: 2px 0 48px; }.carousel-track { display: flex; width: max-content; gap: 20px; animation: carousel-scroll 34s linear infinite; }.design-carousel:hover .carousel-track { animation-play-state: paused; }.design-card { width: 216px; height: 255px; flex: 0 0 216px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 19px; border: 1px solid rgba(44,77,64,.13); border-radius: 16px; color: #2d5b4c; background: #fbfcfa; box-shadow: 0 11px 23px rgba(37,51,43,.08); }.design-card svg { width: 132px; height: 132px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.design-card svg text { fill: currentColor; stroke: none; font-family: Georgia, serif; font-size: 55px; }.design-card span { color: #526057; font-size: .82rem; font-weight: 700; }.design-card--botanical { color: #54816c; background: #f8fbf6; }.design-card--monogram { color: #9a7156; background: #fdf9f5; }.design-card--sign { color: #547685; background: #f5fafc; }.design-card--ornament { color: #95726f; background: #fcf8f7; }.design-card--geometric { color: #77728c; background: #f8f7fc; }@keyframes carousel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }@media (prefers-reduced-motion: reduce) { .carousel-track { animation: none; } }.site-nav a[data-site-nav].active { color: #2d5b4c; border-color: #2d5b4c; }
@media (max-width: 780px) { .gallery-section { margin-top: 57px; padding-top: 42px; }.gallery-heading { display: block; padding: 0 16px; }.gallery-heading > p { margin-top: 13px; }.design-carousel { padding-bottom: 38px; }.design-card { width: 185px; height: 220px; flex-basis: 185px; } }

/* Sliding segmented navigation and page transitions */
.site-nav { position: relative; gap: 2px; height: auto; padding: 5px; border-radius: 11px; background: #edf1eb; }.site-nav a { position: relative; z-index: 1; padding: 9px 14px; border: 0; border-radius: 8px; color: #65736a; font-size: .84rem; transition: color .28s ease; }.site-nav a:hover, .site-nav a.active { color: #2d5b4c; border: 0; }.sliding-tab-group .tab-indicator { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; border-radius: 8px; background: #fff; box-shadow: 0 2px 7px rgba(37,51,43,.08); transition: transform .42s cubic-bezier(.22, .8, .25, 1), width .42s cubic-bezier(.22, .8, .25, 1); }.site-view { display: none; }.site-view.active, .site-view.exiting { display: block; }.site-view.exiting { position: relative; pointer-events: none; }.site-view.enter-from-right, .site-view.enter-from-left { position: absolute; inset: 0 0 auto; z-index: 1; width: 100%; }.site-view.enter-from-right { animation: content-in-right .36s .18s cubic-bezier(.22, .8, .25, 1) both; }.site-view.enter-from-left { animation: content-in-left .36s .18s cubic-bezier(.22, .8, .25, 1) both; }.site-view.exit-to-left { animation: content-out-left .36s ease both; }.site-view.exit-to-right { animation: content-out-right .36s ease both; }@keyframes content-in-right { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }@keyframes content-in-left { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: translateX(0); } }@keyframes content-out-left { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-34px); } }@keyframes content-out-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(34px); } }@media (prefers-reduced-motion: reduce) { .sliding-tab-group .tab-indicator, .site-view.enter-from-right, .site-view.enter-from-left, .site-view.exit-to-left, .site-view.exit-to-right { animation: none; transition: none; } }

/* Keep Home compact on shorter screens and more spacious on tall displays */
#home-view .hero { margin-bottom: 0; }#home-view .gallery-section { margin-top: clamp(18px, 3.5vh, 55px); padding-top: clamp(20px, 3.5vh, 42px); }#home-view .gallery-heading { margin-bottom: clamp(13px, 2vh, 24px); }#home-view .design-carousel { padding-bottom: clamp(18px, 3vh, 35px); }#home-view .design-card { height: clamp(150px, 20vh, 215px); }#home-view .design-card svg { width: clamp(76px, 11vh, 110px); height: clamp(76px, 11vh, 110px); }
main { position: relative; }

/* Align the temporary absolute page with its final padded position. */
main { --site-view-top: clamp(35px, 5.33vw, 63px); --site-view-inline: 24px; }
.site-view.enter-from-right, .site-view.enter-from-left { top: var(--site-view-top); right: var(--site-view-inline); bottom: auto; left: var(--site-view-inline); width: auto; }
@media (max-width: 780px) { main { --site-view-top: 48px; --site-view-inline: 16px; } }

/* Gentle entrance motion for menus and dialogs */
.account-popover:not([hidden]) { animation: popover-enter .22s ease-out both; }.custom-select-options:not([hidden]) { animation: dropdown-enter .18s ease-out both; }.modal-overlay:not([hidden]) { animation: overlay-enter .2s ease-out both; }.modal-overlay:not([hidden]) .modal-card { animation: modal-enter .24s cubic-bezier(.22, .8, .25, 1) both; }@keyframes dropdown-enter { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }@keyframes popover-enter { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }@keyframes overlay-enter { from { opacity: 0; } to { opacity: 1; } }@keyframes modal-enter { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }@media (prefers-reduced-motion: reduce) { .account-popover:not([hidden]), .custom-select-options:not([hidden]), .modal-overlay:not([hidden]), .modal-overlay:not([hidden]) .modal-card { animation: none; } }

/* A balanced, compact desktop workspace */
main { --content-edge: clamp(18px, 2vw, 26px); padding-top: var(--content-edge); padding-bottom: var(--content-edge); --site-view-top: var(--content-edge); }
@media (min-width: 1050px) { #create-view.active { width: 100%; }#create-view .workspace-card { display: grid; grid-template-columns: 255px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; gap: 12px 24px; padding: 20px; }.workspace-heading { grid-column: 1 / -1; margin-bottom: 2px; }.toolbar { grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch; gap: 8px; }.toolbar .tool-label, .toolbar .custom-select, .toolbar .compact-select { width: 100%; min-width: 0; }.toolbar .toolbar-divider { width: 100%; height: 1px; margin: 2px 0; }.toolbar .tool-icon { width: 100%; height: 34px; }.toolbar input[type="number"] { width: 100%; }.selection-dimensions { grid-column: 1; grid-row: 3; margin: 0; }.order-panel { grid-column: 1; grid-row: 4; display: block; align-self: end; margin-top: 0; padding: 14px; }.order-panel h2 { font-size: 1.25rem; }.order-panel p { margin-bottom: 13px; }.order-details-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }.order-panel .primary-button { width: 100%; }.order-panel textarea { min-height: 54px; }.workspace-card #workspace-canvas-wrapper { grid-column: 2; grid-row: 2 / span 3; display: flex; align-items: center; justify-content: center; min-height: 430px; padding: 12px; }.workspace-card #workspace-canvas-wrapper .canvas-container { flex: 0 0 auto; } }
@media (max-width: 780px) { main { --content-edge: 16px; --site-view-top: var(--content-edge); } }

@media (min-width: 1050px) { #create-view .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 8px; }.toolbar .tool-label { grid-column: 1 / -1; }.toolbar .toolbar-divider { display: none; }.toolbar .tool-icon { min-width: 0; }.toolbar #font-size { grid-column: 1; }.workspace-card .order-panel { padding: 12px; }.workspace-card .order-panel h2 { font-size: 1.15rem; }.workspace-card .order-panel p { display: none; }.workspace-card .order-details-grid { gap: 7px; margin: 8px 0 10px; }.workspace-card .order-details-grid label { font-size: .7rem; }.workspace-card .order-panel textarea { height: 42px; min-height: 42px; }.workspace-card .order-panel .primary-button { min-height: 38px; padding: 8px 12px; }.workspace-card #workspace-canvas-wrapper { min-height: 430px; } }

@media (min-width: 1050px) { #create-view.active { display: flex; align-items: center; min-height: calc(100vh - 131px); }.workspace-card .toolbar { gap: 3px; padding: 5px; }.workspace-card .toolbar .tool-label { gap: 3px; }.workspace-card .toolbar .tool-icon { height: 30px; }.workspace-card .order-panel { padding: 8px; }.workspace-card .order-panel h2 { font-size: 1.05rem; }.workspace-card .order-details-grid { gap: 4px; margin: 5px 0 7px; }.workspace-card .order-details-grid label { gap: 3px; font-size: .66rem; }.workspace-card .order-panel textarea { height: 36px; min-height: 36px; }.workspace-card .order-panel .primary-button { min-height: 34px; padding: 6px 10px; }.workspace-card #workspace-canvas-wrapper { min-height: 430px; } }

@media (min-width: 1050px) { main { max-width: 1400px; }.workspace-card { width: 100%; grid-template-columns: 280px minmax(0, 1fr) !important; column-gap: 28px !important; }.workspace-card .toolbar { padding: 4px; } }

/* Live measurements inside the cutting-bed window */
#workspace-canvas-wrapper { position: relative; }.workspace-card #workspace-canvas-wrapper .canvas-container { position: relative; z-index: 1; }#canvas-selection-measurements { position: absolute; z-index: 2; right: 18px; bottom: 14px; display: flex; align-items: baseline; gap: 10px; padding: 8px 11px; border: 1px solid rgba(45,91,76,.16); border-radius: 9px; color: #526057; background: rgba(255,255,253,.92); box-shadow: 0 5px 14px rgba(37,51,43,.09); pointer-events: none; backdrop-filter: blur(8px); font-size: .72rem; }.workspace-card #canvas-selection-measurements span { color: #718078; font-weight: 700; }.workspace-card #canvas-selection-measurements strong { color: #2d5b4c; font-size: .8rem; }

/* Clear, full-width design actions */
.tool-action-button { width: 100%; min-height: 39px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid #dce1dc; border-radius: 9px; color: #26322d; background: #fff; text-align: left; font-size: .85rem; font-weight: 400; }.tool-action-button:hover { border-color: #82a99b; background: #eff5ef; }.tool-action-button .material-icons, .shape-insert-select .material-icons, .material-select .material-icons { color: #2d5b4c; font-size: 19px; }.shape-insert-select .custom-select-trigger, .material-select .custom-select-trigger { min-height: 39px; }.shape-insert-select .tool-action-label, .material-select .tool-action-label { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }.shape-insert-select .tool-action-label > .material-icons, .material-select .tool-action-label > .material-icons { flex: 0 0 auto; }.shape-insert-select .custom-select-label, .material-select .custom-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.shape-insert-select .custom-select-trigger > .material-icons:last-child, .material-select .custom-select-trigger > .material-icons:last-child { margin-left: auto; color: #61716a; font-size: 18px; }.shape-insert-select .custom-select-options button { display: flex; align-items: center; gap: 9px; }.shape-insert-select .custom-select-options .material-icons { flex: 0 0 auto; color: #5d8374; font-size: 18px; }
@media (min-width: 1050px) { .workspace-card .toolbar .material-select, .workspace-card .toolbar #add-text-btn, .workspace-card .toolbar .shape-insert-select, .workspace-card .toolbar #upload-btn { grid-column: 1 / -1; }.workspace-card .toolbar [data-select="font-family"] { grid-column: 1; }.workspace-card .toolbar #font-size { grid-column: 2; width: 100%; min-height: 39px; }.workspace-card .toolbar .tool-action-button { height: 39px; min-height: 39px; }.workspace-card .toolbar .material-select, .workspace-card .toolbar .shape-insert-select { width: 100%; } }

@media (min-width: 1050px) { .workspace-card .toolbar { padding: 10px; gap: 7px; } }

/* Guided image upload */
.image-upload-card { width: min(760px, 100%); }.image-upload-card > h2 { max-width: 590px; font-size: clamp(1.7rem, 4vw, 2.25rem); line-height: 1.08; }.image-kind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }.image-kind-option { display: grid; gap: 9px; padding: 12px; border: 1px solid #dfe5de; border-radius: 13px; color: #314139; background: #fbfcfa; text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.image-kind-option:hover, .image-kind-option.selected { border-color: #6e9b8b; box-shadow: 0 8px 18px rgba(45,91,76,.11); transform: translateY(-1px); }.image-kind-option strong { font-size: .93rem; }.image-kind-option small { color: #718078; font-size: .76rem; }.image-kind-placeholder { position: relative; display: grid; place-items: center; height: 130px; overflow: hidden; border-radius: 9px; background: #edf4ed; color: #4e806d; }.vector-placeholder svg { width: 83%; height: 83%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }.raster-placeholder { color: #6a8492; background: linear-gradient(135deg, #d7e9ed, #f5e5c8); }.raster-placeholder .material-icons { position: relative; z-index: 1; font-size: 54px; color: rgba(42,83,94,.82); }.pixel-grid { position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(90deg, rgba(255,255,255,.62) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.62) 1px, transparent 1px); background-size: 10px 10px; }.image-choice-prompt { margin: 16px 0 0; color: #718078; text-align: center; font-size: .82rem; }.image-kind-details { margin-top: 18px; padding: 17px; border: 1px solid #e2e8e1; border-radius: 12px; background: #f7f9f6; }.image-kind-details h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; font-weight: 500; }.image-kind-details p { margin: 8px 0 0; color: #5d6d64; line-height: 1.55; font-size: .88rem; }.raster-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 15px; }.raster-examples > div > span { color: #526057; font-size: .75rem; font-weight: 800; }.raster-example-row { display: grid; gap: 7px; margin-top: 7px; }.raster-file { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 7px; font-size: .73rem; }.raster-file .material-icons { font-size: 16px; }.raster-file.good { color: #2d5b4c; background: #e9f3e9; }.raster-file.bad { color: #875a50; background: #f7ebe8; }.select-image-file-button { width: 100%; margin-top: 17px; }.select-image-file-button:disabled { cursor: not-allowed; opacity: .52; box-shadow: none; }@media (max-width: 560px) { .image-upload-card { padding: 26px 20px; }.image-kind-grid, .raster-examples { grid-template-columns: 1fr; }.image-kind-placeholder { height: 108px; } }

@media (min-width: 561px) { .image-upload-card { max-height: none; overflow: visible; padding: 25px; }.image-kind-grid { margin-top: 17px; }.image-kind-placeholder { height: 106px; }.image-choice-prompt { margin-top: 11px; }.image-kind-details { margin-top: 12px; padding: 13px; }.raster-examples { margin-top: 10px; }.select-image-file-button { margin-top: 12px; } }

/* Catalogue-first launch page */
.catalogue-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, .65fr); gap: clamp(30px, 7vw, 100px); align-items: center; min-height: min(570px, calc(100vh - 120px)); padding: clamp(38px, 7vw, 92px) 0; }.catalogue-hero h1, .catalogue-section h2, .process-section h2, .materials-section h2 { margin: 8px 0 17px; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.045em; line-height: .98; }.catalogue-hero h1 { max-width: 680px; font-size: clamp(3.1rem, 7vw, 6.2rem); }.catalogue-hero > div > p:not(.eyebrow) { max-width: 605px; color: #5b6b61; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7; }.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }.secondary-button { min-height: 43px; padding: 10px 17px; border: 1px solid #b9c8bb; border-radius: 9px; color: #2d5b4c; background: transparent; font-weight: 700; }.secondary-button:hover { border-color: #2d5b4c; background: #edf4ed; }.hero-note { display: grid; gap: 18px; align-content: center; min-height: 255px; padding: 31px; border-radius: 22px; color: #f5f6ed; background: #315f51; box-shadow: 0 20px 50px rgba(31, 74, 61, .18); transform: rotate(2deg); }.hero-note .material-icons { font-size: 74px; color: #dfe9d8; }.hero-note p { margin: 0; line-height: 1.6; }.hero-note strong { font-size: 1.15rem; }
.catalogue-section, .process-section, .materials-section { scroll-margin-top: 95px; padding: clamp(55px, 8vw, 105px) 0; }.catalogue-section { border-top: 1px solid #dfe5de; }.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 35px; align-items: end; margin-bottom: 35px; }.section-heading h2, .process-section h2, .materials-section h2 { font-size: clamp(2.25rem, 4.8vw, 4.25rem); }.section-heading > p:last-child { max-width: 410px; margin: 0 0 8px; color: #66756b; line-height: 1.65; }.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }.product-card { display: flex; flex-direction: column; padding: 12px; border: 1px solid #e1e6df; border-radius: 16px; background: #fff; box-shadow: 0 8px 25px rgba(37,51,43,.05); }.product-card h3 { margin: 11px 0 5px; color: #2e4036; font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 500; }.product-card > p:not(.product-tag) { min-height: 67px; margin: 0; color: #6a786e; font-size: .88rem; line-height: 1.55; }.product-tag { margin: 15px 0 0; color: #55806e; font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.product-request { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding: 17px 0 3px; color: #2d5b4c; font-weight: 800; text-align: left; }.product-request .material-icons { font-size: 18px; }.product-visual { position: relative; display: grid; place-items: center; min-height: 185px; overflow: hidden; border-radius: 10px; text-align: center; }.product-visual span { position: relative; z-index: 1; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 700; line-height: 1.1; }.product-visual--qr { color: #f8f8f2; background: #284b42; }.product-visual--qr i { width: 74px; height: 74px; margin-top: 34px; background: repeating-linear-gradient(90deg, #f8f8f2 0 7px, transparent 7px 12px), repeating-linear-gradient(#f8f8f2 0 6px, transparent 6px 11px); }.product-visual--hours { color: #f7f1e7; background: #9b624b; }.product-visual small { font-family: Arial, sans-serif; font-size: .64rem; letter-spacing: .06em; }.product-visual--name { color: #553f75; background: #e8e0f2; }.product-visual--name b, .product-visual--key b { position: absolute; right: 19px; bottom: 14px; font-size: 2rem; }.product-visual--key { color: #4c3a29; background: #dfc5a6; }.process-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; border-top: 1px solid #dfe5de; }.process-section ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: steps; }.process-section li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 15px; padding: 20px 0; border-bottom: 1px solid #dfe5de; counter-increment: steps; }.process-section li::before { content: "0" counter(steps); grid-row: span 2; color: #6a9a84; font-weight: 800; }.process-section li strong { color: #314139; }.process-section li span { color: #6a786e; font-size: .9rem; line-height: 1.5; }.materials-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; }.materials-section > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }.materials-section article { padding: 18px; border-radius: 13px; background: #eef3ec; }.materials-section article .material-icons { color: #4e806d; }.materials-section article h3 { margin: 12px 0 5px; font-size: 1rem; }.materials-section article p { margin: 0; color: #68776d; font-size: .87rem; line-height: 1.5; }.materials-section .secondary-button { grid-column: 1 / -1; justify-self: start; margin-top: 5px; }.request-card { width: min(600px, 100%); }.request-card .account-form { margin-top: 20px; }.form-status { min-height: 1.3em; margin: 4px 0 0; color: #2d5b4c; font-size: .88rem; }.designer-link { margin: 20px 0 0; color: #6a786e; font-size: .84rem; }.designer-link a { color: #2d5b4c; font-weight: 700; }
.product-card > .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 43px; margin-top: auto; padding: 10px 14px; border: 1px solid #b9c8bb; border-radius: 9px; color: #2d5b4c; background: #edf4ed; text-decoration: none; font-weight: 750; line-height: 1.1; white-space: nowrap; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.product-card > .text-button:hover { border-color: #2d5b4c; background: #e2eee6; transform: translateY(-1px); }
.product-card > .text-button .material-icons { flex: 0 0 auto; font-size: 19px; line-height: 1; }
.collection-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.collection-links a { display: grid; gap: 8px; min-height: 200px; padding: 24px; border: 1px solid #dfe5de; border-radius: 16px; color: #314139; background: #f1f5ef; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }.collection-links a:hover { box-shadow: 0 12px 25px rgba(37,51,43,.1); transform: translateY(-2px); }.collection-links > a > .material-icons { color: #4f806c; font-size: 30px; }.collection-links strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.75rem; font-weight: 500; }.collection-links small { color: #68776d; font-size: .9rem; }.collection-links a > span:last-child { display: flex; align-items: center; gap: 4px; margin-top: auto; color: #2d5b4c; font-size: .84rem; font-weight: 800; }.collection-links a > span:last-child .material-icons { font-size: 17px; }.category-section { padding-top: clamp(30px, 5vw, 60px); }
.sign-customiser { scroll-margin-top: 96px; display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 32px; margin-top: 28px; padding: clamp(20px, 4vw, 38px); border: 1px solid #cad9cb; border-radius: 19px; background: #f1f6ef; }.sign-customiser h3 { margin: 7px 0 9px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -.035em; }.sign-customiser-intro > p:last-child { margin: 0; color: #68776d; line-height: 1.6; }.sign-customiser form { display: grid; gap: 22px; }.sign-customiser fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }.sign-customiser legend { margin-bottom: 10px; color: #314139; font-size: .85rem; font-weight: 800; }.sign-customiser legend span { color: #738177; font-weight: 400; }.choice-grid { display: grid; gap: 9px; }.shape-choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.choice-grid label { position: relative; display: grid; justify-items: center; gap: 7px; padding: 11px 7px; border: 1px solid #d3ded3; border-radius: 10px; background: #fff; color: #4b5d51; text-align: center; cursor: pointer; }.choice-grid input { position: absolute; opacity: 0; }.choice-grid label:has(input:checked) { border-color: #4e806d; box-shadow: 0 0 0 3px rgba(78,128,109,.15); color: #2d5b4c; }.choice-grid strong { font-size: .72rem; }.shape-swatch { display: block; width: 47px; height: 33px; border: 3px solid currentColor; }.shape-swatch--circle { width: 36px; height: 36px; border-radius: 50%; }.shape-swatch--square { width: 36px; height: 36px; }.shape-swatch--rounded { border-radius: 11px; }.sign-text-label { display: grid; gap: 7px; color: #526057; font-size: .8rem; font-weight: 700; }.sign-text-label input { width: 100%; padding: 11px; border: 1px solid #d3ded3; border-radius: 9px; background: #fff; outline-color: #6e9b8b; }.arrow-choice-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }.arrow-choice-grid label > span { font-size: 1.5rem; line-height: 1; }.sign-customiser .primary-button { justify-self: start; }
.sign-customiser-modal .sign-customiser { width: min(850px, 100%); max-height: min(860px, calc(100vh - 40px)); margin: 0; overflow: auto; box-shadow: 0 25px 70px rgba(18,30,24,.24); }.sign-customiser-modal .modal-close { z-index: 1; }.sign-type-choice-grid, .qr-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.sign-type-choice-grid .material-icons, .qr-choice-grid .material-icons { font-size: 25px; color: #4e806d; }.qr-choice-grid label:last-child { grid-column: 1 / -1; }.sign-text-label small { color: #718078; font-size: .75rem; font-weight: 400; line-height: 1.45; }
.table-number-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.single-table-number-field, .table-range-fields { margin-top: 12px; }.table-range-fields > span { color: #526057; }.table-range-fields small { color: #718078; font-size: .75rem; font-weight: 400; line-height: 1.45; }
.sign-customiser-modal .sign-customiser { grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr); gap: 0; padding: 0; background: #fff; }.sign-customiser-modal .sign-customiser-intro { position: sticky; top: 0; align-self: start; min-height: 100%; padding: 36px 28px; background: #eff5ed; }.sign-customiser-modal .sign-customiser form { max-height: min(860px, calc(100vh - 40px)); overflow-y: auto; padding: 36px 32px; }.sign-preview { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(45,91,76,.16); }.preview-kicker { margin: 0 0 12px; color: #628070; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }.sign-preview-board { position: relative; display: grid; place-items: center; width: min(100%, 235px); aspect-ratio: 1.38; margin: 0 auto; padding: 26px; overflow: hidden; color: #f8f8f2; background: #315f51; text-align: center; transition: border-radius .2s ease; }.sign-preview-board--circle { width: min(100%, 205px); aspect-ratio: 1; border-radius: 50%; }.sign-preview-board--square { width: min(100%, 205px); aspect-ratio: 1; }.sign-preview-board--rounded-rectangle { border-radius: 24px; }.sign-preview-board span { position: relative; z-index: 1; max-width: 100%; overflow-wrap: anywhere; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.05rem, 2.2vw, 1.45rem); font-weight: 700; line-height: 1.05; }.sign-preview-board i { position: absolute; right: 13px; bottom: 10px; font-size: 2rem; font-style: normal; }.sign-preview-board b { position: absolute; right: 12px; top: 11px; color: #dce9d7; font-size: 30px; }.sign-preview-board em { position: absolute; left: 0; right: 0; bottom: 10px; color: #dce9d7; font-size: .61rem; font-style: normal; font-weight: 800; letter-spacing: .12em; }.sign-preview-board--table { color: #49351e; background: #d7bd91; }.sign-preview-board--table b, .sign-preview-board--table em { color: #664c2c; }.sign-preview-board--table span { margin-bottom: 15px; }.sign-preview > p:last-child { margin: 15px 0 0; color: #65766b; font-size: .79rem; line-height: 1.5; }
.sign-preview-board--circle b { top: 50%; right: auto; left: 50%; font-size: 54px; transform: translate(-50%, -50%); }.sign-preview-board--circle span { transform: translateY(-55px); }.sign-preview-board--circle i { bottom: 24px; right: 50%; transform: translateX(50%); }
.qr-position-field { margin-top: 14px; }.qr-position-field > p { margin: 0 0 8px; color: #526057; font-size: .8rem; font-weight: 700; }.qr-position-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.sign-preview-board--with-qr span { max-width: 78%; }.sign-preview-board--qr-top b { top: 12px; right: auto; left: 50%; transform: translateX(-50%); }.sign-preview-board--qr-middle b { top: 50%; right: auto; left: 50%; font-size: 54px; transform: translate(-50%, -50%); }.sign-preview-board--qr-bottom b { top: auto; right: auto; bottom: 12px; left: 50%; transform: translateX(-50%); }.sign-preview-board--qr-top span { transform: translateY(27px); }.sign-preview-board--qr-middle span { transform: translateY(-47px); }.sign-preview-board--qr-bottom span { transform: translateY(-27px); }.sign-preview-board--circle.sign-preview-board--qr-top b { top: 28px; }.sign-preview-board--circle.sign-preview-board--qr-middle b { top: 50%; }.sign-preview-board--circle.sign-preview-board--qr-bottom b { top: auto; bottom: 28px; }.sign-preview-board--circle.sign-preview-board--qr-top span { transform: translateY(35px); }.sign-preview-board--circle.sign-preview-board--qr-middle span { transform: translateY(-55px); }.sign-preview-board--circle.sign-preview-board--qr-bottom span { transform: translateY(-35px); }.sign-preview-board--compact-text span { font-size: clamp(.9rem, 1.8vw, 1.15rem); }.sign-preview-board--tiny-text span { font-size: clamp(.72rem, 1.4vw, .9rem); line-height: 1.15; }
.sign-size-step > p { margin: -3px 0 12px; color: #718078; font-size: .78rem; line-height: 1.45; }.sign-size-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.sign-size-choice-grid small { min-height: 1em; color: #688775; font-size: .62rem; font-weight: 700; }.sign-preview-board--qr-left b { right: auto; left: 12px; transform: none; }.sign-preview-board--qr-right b { right: 12px; left: auto; transform: none; }.sign-preview-board--qr-centre.sign-preview-board--qr-top b, .sign-preview-board--qr-centre.sign-preview-board--qr-bottom b { right: auto; left: 50%; transform: translateX(-50%); }.sign-preview-board--qr-centre.sign-preview-board--qr-middle b { right: auto; left: 50%; transform: translate(-50%, -50%); }.sign-preview-board--with-qr.sign-preview-board--qr-middle span { max-width: 64%; font-size: clamp(.7rem, 1.35vw, .88rem); line-height: 1.1; transform: translateY(-57px); }.sign-preview-board--circle.sign-preview-board--qr-middle span { max-width: 59%; transform: translateY(-61px); }.sign-preview-board--qr-left.sign-preview-board--qr-top span, .sign-preview-board--qr-right.sign-preview-board--qr-top span { transform: translateY(31px); }.sign-preview-board--qr-left.sign-preview-board--qr-bottom span, .sign-preview-board--qr-right.sign-preview-board--qr-bottom span { transform: translateY(-31px); }
.qr-choice-grid label:last-child { grid-column: auto; }.table-text-alignment { margin-top: 14px; }.table-text-alignment > p { margin: 0 0 8px; color: #526057; font-size: .8rem; font-weight: 700; }.table-text-align-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.sign-preview-board--text-left span { justify-self: start; text-align: left; }.sign-preview-board--text-centre span { justify-self: center; text-align: center; }.sign-preview-board--text-right span { justify-self: end; text-align: right; }
.table-presentation-field { margin-top: 14px; }.table-presentation-field > p, .table-number-size > p { margin: 0 0 8px; color: #526057; font-size: .8rem; font-weight: 700; }.table-format-choice-grid, .table-number-size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.table-format-choice-grid strong { line-height: 1.25; }.table-number-size { margin-top: 14px; }.table-presentation-field .sign-text-label { margin-top: 13px; }.sign-preview-board--table span { white-space: pre-line; }.sign-preview-board--table em { z-index: 2; max-width: 86%; overflow-wrap: anywhere; text-align: center; }.sign-preview-board--circle em { right: 16px; bottom: 14px; left: 16px; max-width: none; }.sign-preview-board--text-left em { left: 12px; right: auto; text-align: left; }.sign-preview-board--text-right em { right: 12px; left: auto; text-align: right; }.sign-preview-qr-group { position: absolute; z-index: 3; display: grid; justify-items: center; gap: 3px; color: #dce9d7; text-align: center; }.sign-preview-board .sign-preview-qr-group > b { position: static; color: inherit; font-size: 30px; transform: none; }.sign-preview-qr-group small { max-width: 100px; color: inherit; font-size: .52rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }.sign-preview-board--table .sign-preview-qr-group { color: #664c2c; }.sign-preview-board--qr-top .sign-preview-qr-group { top: 12px; left: 50%; transform: translateX(-50%); }.sign-preview-board--qr-middle .sign-preview-qr-group { top: 50%; left: 50%; transform: translate(-50%, -50%); }.sign-preview-board--qr-middle .sign-preview-qr-group > b { font-size: 54px; }.sign-preview-board--qr-bottom .sign-preview-qr-group { bottom: 12px; left: 50%; transform: translateX(-50%); }.sign-preview-board--circle.sign-preview-board--qr-top .sign-preview-qr-group { top: 27px; }.sign-preview-board--circle.sign-preview-board--qr-bottom .sign-preview-qr-group { bottom: 25px; }.sign-preview-board--qr-left.sign-preview-board--qr-top .sign-preview-qr-group, .sign-preview-board--qr-left.sign-preview-board--qr-bottom .sign-preview-qr-group { right: auto; left: 12px; transform: none; }.sign-preview-board--qr-right.sign-preview-board--qr-top .sign-preview-qr-group, .sign-preview-board--qr-right.sign-preview-board--qr-bottom .sign-preview-qr-group { right: 12px; left: auto; transform: none; }.sign-preview-board--qr-left.sign-preview-board--qr-middle .sign-preview-qr-group { right: auto; left: 12px; transform: translateY(-50%); }.sign-preview-board--qr-right.sign-preview-board--qr-middle .sign-preview-qr-group { right: 12px; left: auto; transform: translateY(-50%); }.sign-preview-board--with-qr.sign-preview-board--qr-top .table-preview-text { transform: translateY(35px); }.sign-preview-board--with-qr.sign-preview-board--qr-middle .table-preview-text { transform: translateY(-64px); }.sign-preview-board--with-qr.sign-preview-board--qr-bottom .table-preview-text { transform: translateY(-40px); }.table-preview-text { display: inline-flex; align-items: center; justify-content: center; gap: .18em; white-space: normal !important; }.table-preview-text--beside { flex-wrap: nowrap; max-width: none; white-space: nowrap !important; overflow-wrap: normal !important; }.table-preview-text--beside > * { flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal; }.table-preview-text--below { flex-direction: column; gap: 0; }.table-preview-text--number { display: inline-flex; }.table-preview-text small { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .42em; font-weight: 800; letter-spacing: .08em; }.table-preview-text .table-number { display: inline-block; line-height: .88; white-space: nowrap; overflow-wrap: normal; }.table-preview-text .table-number--small { font-size: 2.15em; }.table-preview-text .table-number--medium { font-size: 2.65em; }.table-preview-text .table-number--large { font-size: 3.15em; }.table-preview-text--beside .table-number--large { font-size: 2.85em; }.sign-preview-board--circle .table-preview-text { max-width: 58%; }.sign-preview-board--circle .table-preview-text--beside { max-width: none; }.sign-preview-board--table-top .table-preview-text { transform: translateY(-48px); }.sign-preview-board--table-middle .table-preview-text { transform: translateY(0); }.sign-preview-board--table-bottom .table-preview-text { transform: translateY(43px); }.table-preview-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }.table-preview-controls button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #bdd0bf; border-radius: 50%; color: #2d5b4c; background: #fff; }.table-preview-controls strong { min-width: 94px; color: #526057; font-size: .77rem; text-align: center; }.sign-preview-board--slide-next { animation: table-sign-next .34s ease both; }.sign-preview-board--slide-previous { animation: table-sign-previous .34s ease both; }@keyframes table-sign-next { 0% { opacity: .15; transform: translateX(-14px); } 55% { opacity: 1; transform: translateX(7px); } 100% { opacity: 1; transform: translateX(0); } }@keyframes table-sign-previous { 0% { opacity: .15; transform: translateX(14px); } 55% { opacity: 1; transform: translateX(-7px); } 100% { opacity: 1; transform: translateX(0); } }
.sign-preview-summary { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 7px 12px; margin: 18px 0 0; padding: 15px 0 0; border-top: 1px solid rgba(45,91,76,.16); }.sign-preview-summary dt { color: #718078; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.sign-preview-summary dd { min-width: 0; margin: 0; color: #405248; font-size: .78rem; font-weight: 700; overflow-wrap: anywhere; text-align: right; }.sign-preview-board--circle.sign-preview-board--table #sign-preview-text.table-preview-text { position: absolute; z-index: 2; left: 50%; width: max-content; max-width: calc(100% - 32px); transform: translate(-50%, -50%) !important; }.sign-preview-board--circle.sign-preview-board--table.sign-preview-board--table-top #sign-preview-text.table-preview-text { top: 23%; }.sign-preview-board--circle.sign-preview-board--table.sign-preview-board--table-middle #sign-preview-text.table-preview-text { top: 48%; }.sign-preview-board--circle.sign-preview-board--table.sign-preview-board--table-bottom #sign-preview-text.table-preview-text { top: 69%; }.sign-preview-board--circle.sign-preview-board--table .sign-preview-qr-group { z-index: 3; transform: translate(-50%, -50%) !important; }.sign-preview-board--circle.sign-preview-board--table.sign-preview-board--qr-top .sign-preview-qr-group { top: 22%; }.sign-preview-board--circle.sign-preview-board--table.sign-preview-board--qr-middle .sign-preview-qr-group { top: 48%; }.sign-preview-board--circle.sign-preview-board--table.sign-preview-board--qr-bottom .sign-preview-qr-group { top: 69%; bottom: auto; }.sign-preview-board--circle.sign-preview-board--table em { z-index: 4; right: 16px; bottom: 7%; left: 16px; max-width: none; }.sign-preview-board--circle.sign-preview-board--with-qr .table-preview-text--below .table-number--large { font-size: 2.9em; }.sign-preview-board--circle.sign-preview-board--with-qr .table-preview-text--beside .table-number--large { font-size: 2.7em; }
.table-footer-position { margin-top: 14px; }.table-footer-position > p { margin: 0 0 8px; color: #526057; font-size: .8rem; font-weight: 700; }.sign-preview-board--circle.sign-preview-board--table.sign-preview-board--footer-top em { top: 22%; bottom: auto; transform: translateY(-50%); }.sign-preview-board--circle.sign-preview-board--table.sign-preview-board--footer-middle em { top: 48%; bottom: auto; transform: translateY(-50%); }.sign-preview-board--circle.sign-preview-board--table.sign-preview-board--footer-bottom em { top: auto; bottom: 7%; transform: none; }.sign-preview-board--table.sign-preview-board--footer-top:not(.sign-preview-board--circle) em { top: 12px; bottom: auto; }.sign-preview-board--table.sign-preview-board--footer-middle:not(.sign-preview-board--circle) em { top: 50%; bottom: auto; transform: translateY(-50%); }.sign-preview-board--table.sign-preview-board--footer-bottom:not(.sign-preview-board--circle) em { top: auto; bottom: 10px; transform: none; }
.sign-preview-board--table:not(.sign-preview-board--circle) #sign-preview-text.table-preview-text { position: absolute; z-index: 2; width: max-content; max-width: calc(100% - 28px); transform: translateY(-50%) !important; }.sign-preview-board--table.sign-preview-board--table-vertical-top:not(.sign-preview-board--circle) #sign-preview-text.table-preview-text { top: 24%; }.sign-preview-board--table.sign-preview-board--table-vertical-middle:not(.sign-preview-board--circle) #sign-preview-text.table-preview-text { top: 50%; }.sign-preview-board--table.sign-preview-board--table-vertical-bottom:not(.sign-preview-board--circle) #sign-preview-text.table-preview-text { top: 76%; }.sign-preview-board--table.sign-preview-board--text-left:not(.sign-preview-board--circle) #sign-preview-text.table-preview-text { left: 14px; right: auto; text-align: left; }.sign-preview-board--table.sign-preview-board--text-centre:not(.sign-preview-board--circle) #sign-preview-text.table-preview-text { right: auto; left: 50%; text-align: center; transform: translate(-50%, -50%) !important; }.sign-preview-board--table.sign-preview-board--text-right:not(.sign-preview-board--circle) #sign-preview-text.table-preview-text { right: 14px; left: auto; text-align: right; }.sign-preview-board--table.sign-preview-board--footer-left:not(.sign-preview-board--circle) em { right: auto; left: 12px; text-align: left; }.sign-preview-board--table.sign-preview-board--footer-centre:not(.sign-preview-board--circle) em { right: 0; left: 0; text-align: center; }.sign-preview-board--table.sign-preview-board--footer-right:not(.sign-preview-board--circle) em { right: 12px; left: auto; text-align: right; }
/* Table signs use their own coordinate system.  Legacy counter-sign transforms
   deliberately do not participate here, which keeps a selected cell and the
   preview in lockstep. */
.sign-preview-board--layout-clean { --table-text-x: 50%; --table-text-y: 50%; --table-text-max: 72%; --qr-x: 50%; --qr-y: 24%; --qr-max: 44%; --footer-x: 50%; --footer-y: 76%; --footer-max: 72%; }.sign-preview-board--layout-clean #sign-preview-text.table-preview-text, .sign-preview-board--layout-clean .sign-preview-qr-group, .sign-preview-board--layout-clean em { position: absolute !important; box-sizing: border-box; margin: 0 !important; }.sign-preview-board--layout-clean #sign-preview-text.table-preview-text { z-index: 2; top: var(--table-text-y) !important; right: auto !important; bottom: auto !important; left: var(--table-text-x) !important; width: var(--table-text-max) !important; max-width: var(--table-text-max) !important; transform: translate(-50%, -50%) !important; text-align: center !important; }.sign-preview-board--layout-clean .sign-preview-qr-group { z-index: 3; top: var(--qr-y) !important; right: auto !important; bottom: auto !important; left: var(--qr-x) !important; width: var(--qr-max); max-width: var(--qr-max); transform: translate(-50%, -50%) !important; }.sign-preview-board--layout-clean .sign-preview-qr-group > b { font-size: 30px !important; }.sign-preview-board--layout-clean em { z-index: 4; top: var(--footer-y) !important; right: auto !important; bottom: auto !important; left: var(--footer-x) !important; width: var(--footer-max); max-width: var(--footer-max) !important; transform: translate(-50%, -50%) !important; color: #664c2c; font-size: clamp(.55rem, 1.35vw, .72rem); line-height: 1.16; letter-spacing: .055em; overflow-wrap: anywhere; text-align: center !important; white-space: normal; }.sign-preview-board--layout-clean .table-preview-text { display: inline-flex; justify-content: center; gap: .16em; overflow-wrap: normal; }.sign-preview-board--layout-clean .table-preview-text--beside { flex-wrap: nowrap; max-width: var(--table-text-max) !important; white-space: nowrap !important; }.sign-preview-board--layout-clean .table-preview-text--beside small, .sign-preview-board--layout-clean .table-preview-text--beside .table-number { flex: 0 1 auto; min-width: 0; white-space: nowrap; }.sign-preview-board--layout-clean .table-preview-text--below { flex-direction: column; gap: .05em; }.sign-preview-board--layout-clean .table-preview-text small { font-size: .42em; }.sign-preview-board--layout-clean .table-number { line-height: .82; }.sign-preview-board--layout-clean .table-number--small { font-size: 2.15em; }.sign-preview-board--layout-clean .table-number--medium { font-size: 2.65em; }.sign-preview-board--layout-clean .table-number--large { font-size: 3.15em; }.sign-preview-board--layout-clean .table-preview-text--beside .table-number--large { font-size: min(2.8em, 14vw); }.sign-preview-board--layout-clean.sign-preview-board--circle #sign-preview-text.table-preview-text { max-width: min(var(--table-text-max), calc(100% - 58px)) !important; }.sign-preview-board--layout-clean.sign-preview-board--circle em { max-width: min(var(--footer-max), calc(100% - 58px)) !important; }.sign-preview-board--layout-clean.sign-preview-board--circle .sign-preview-qr-group { max-width: min(var(--qr-max), calc(100% - 72px)); }.sign-preview-board--layout-clean.sign-preview-board--circle .table-preview-text--beside { font-size: clamp(.82rem, 2vw, 1rem); }.sign-preview-board--layout-clean.sign-preview-board--circle .table-preview-text--below .table-number--large { font-size: 2.7em; }
.sign-preview-board--layout-clean.sign-preview-board--table:not(.sign-preview-board--circle) #sign-preview-text.table-preview-text { transform: translate(-50%, -50%) !important; }
@media (max-width: 920px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.catalogue-hero, .process-section, .materials-section, .sign-customiser { grid-template-columns: 1fr; }.catalogue-hero { min-height: auto; }.section-heading { grid-template-columns: 1fr; gap: 8px; }.process-section { gap: 12px; }.materials-section { gap: 10px; } }
@media (max-width: 700px) { .sign-customiser-modal .sign-customiser { grid-template-columns: 1fr; max-height: calc(100vh - 24px); }.sign-customiser-modal .sign-customiser-intro { position: static; min-height: auto; padding: 28px 24px 22px; }.sign-customiser-modal .sign-customiser form { max-height: none; overflow: visible; padding: 24px; }.sign-preview { margin-top: 14px; } }
@media (max-width: 560px) { .catalogue-hero { padding-top: 30px; }.catalogue-hero h1 { font-size: 3.15rem; }.product-grid, .materials-section > div:last-child, .collection-links, .shape-choice-grid, .sign-type-choice-grid, .qr-choice-grid, .table-number-choice-grid, .table-range-fields { grid-template-columns: 1fr; }.product-card > p:not(.product-tag) { min-height: auto; }.materials-section .secondary-button { grid-column: auto; }.arrow-choice-grid, .qr-position-choice-grid, .sign-size-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.table-format-choice-grid, .table-number-size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.qr-choice-grid label:last-child { grid-column: auto; }.site-header .site-nav { display: none; } }

/* Keep the optional additional-text field visually consistent with the other table-sign headings. */
.table-presentation-field .table-additional-text-label { gap: 7px; }.table-presentation-field .table-field-heading { display: flex; align-items: baseline; gap: 7px; color: #526057; font-size: .8rem; font-weight: 700; }.table-presentation-field .table-field-heading small { color: #718078; font-size: .75rem; font-weight: 400; line-height: 1.45; }.sign-customiser-modal .sign-preview > p:last-child { margin-top: 13px; color: #718078; font-size: .72rem; line-height: 1.45; }

/* Number scale follows the chosen physical table-sign size: compact, standard or large. */
.sign-preview-board--layout-clean .table-number--small { font-size: calc(2.6em * var(--table-number-scale, 1)); }.sign-preview-board--layout-clean .table-number--medium { font-size: calc(3.6em * var(--table-number-scale, 1)); }.sign-preview-board--layout-clean .table-number--large { font-size: calc(4.75em * var(--table-number-scale, 1)); }.sign-preview-board--layout-clean .table-preview-text--beside .table-number--large { font-size: calc(4.05em * var(--table-number-scale, 1)); }

/* Finishing step */
.finish-card { width: min(650px, 100%); }.finish-card > .muted { margin: 10px 0 0; }.finish-form { display: grid; gap: 24px; margin-top: 25px; }.finish-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }.finish-form legend { margin-bottom: 10px; color: #314139; font-size: .85rem; font-weight: 800; }.finish-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.finish-text-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.finish-choice-grid label { align-content: start; min-height: 72px; padding: 9px 8px; gap: 3px; }.finish-choice-grid strong { font-size: .73rem; }.finish-choice-grid small { color: #718078; font-size: .64rem; font-weight: 400; line-height: 1.25; }.finish-form .sign-text-label { margin-top: 12px; }.finish-form select { width: 100%; border: 1px solid #d3ded3; border-radius: 9px; padding: 11px; color: #26322d; background: #fff; outline-color: #6e9b8b; }.finish-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.finish-actions .secondary-button, .finish-actions .primary-button { margin: 0; }@media (max-width: 560px) { .finish-choice-grid, .finish-text-choice-grid { grid-template-columns: 1fr; }.finish-card { padding: 27px 22px; }.finish-actions { align-items: stretch; flex-direction: column; }.finish-actions > * { width: 100%; justify-content: center; } }

.finish-sign-preview {
  display: grid;
  place-items: center;
  min-height: 220px;
  margin: 20px 0 4px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid #dbe5dc;
  border-radius: 14px;
  background: #f6f8f4;
}

.finish-sign-preview .sign-preview-board {
  width: min(100%, 260px);
  max-width: 260px;
}

.finish-sign-preview .sign-preview-board--circle,
.finish-sign-preview .sign-preview-board--square {
  width: min(100%, 235px);
}

.gift-finish-artwork {
  position: relative;
  width: min(100%, 360px);
  max-height: 360px;
  overflow: hidden;
  color: var(--review-text-colour);
  background: var(--review-background-colour);
}

.gift-finish-artwork--circle { border-radius: 50%; }
.gift-finish-artwork--rounded { border-radius: 14%; }
.gift-finish-artwork--square { aspect-ratio: 1 !important; }
.gift-finish-artwork__svg,
.gift-finish-artwork__svg svg { width: 100%; height: 100%; }
.gift-finish-artwork__svg { position: absolute; inset: 0; }
.gift-finish-artwork__svg svg * {
  fill: var(--review-text-colour) !important;
  stroke: var(--review-text-colour) !important;
}
.gift-finish-artwork__svg svg [fill="none"] { fill: none !important; }
.gift-finish-artwork__svg svg [stroke="none"] { stroke: none !important; }
.review-sign-board--natural.gift-finish-artwork {
  background-color: #d5b783;
  background-image: repeating-linear-gradient(12deg, rgba(86, 52, 24, .12) 0 1px, transparent 1px 15px), repeating-linear-gradient(176deg, rgba(255, 247, 219, .22) 0 3px, transparent 3px 28px);
}

/* Keep ranged table-sign details tidy beneath the live preview. */
.finish-actions .secondary-button,
.finish-actions .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 17px;
  font-size: .92rem;
  line-height: 1;
  text-align: center;
}

.finish-actions .material-icons {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.table-preview-controls {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
  width: min(100%, 235px);
  margin: 14px auto 0;
}

.table-preview-controls strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 1px 7px;
  min-width: 0;
  color: #526057;
  font-size: .77rem;
  line-height: 1.25;
  text-align: center;
}

.table-preview-controls strong span,
.table-preview-controls strong small {
  white-space: nowrap;
}

.table-preview-controls strong small {
  color: #718078;
  font-size: .68rem;
  font-weight: 700;
}

.sign-preview-caption--set {
  text-align: center;
}

.sign-preview-caption--set span {
  display: block;
  margin-top: 2px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Rebuilt catalogue sign customiser */
body.modal-open {
  position: fixed;
  top: var(--modal-scroll-y);
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.sign-customiser-modal .sign-customiser-v2-form {
  display: block;
  max-height: min(860px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 30px 32px 38px;
  overscroll-behavior: contain;
}

.sign-customiser-v2-form > .option-group {
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid #79a08f;
  border-radius: 14px;
  background: #fbfdfb;
  box-shadow: 0 4px 12px rgba(45, 91, 76, .045);
}

.sign-customiser-v2-form > .option-group + .option-group {
  margin-top: 20px;
}

.sign-customiser-v2-form > .option-group[hidden],
.sign-customiser-v2-form [hidden] {
  display: none !important;
}

.sign-customiser-v2-form legend {
  padding: 0 7px;
  color: #2d5b4c;
  background: #fff;
  font-size: .96rem;
  font-weight: 850;
}

.sign-customiser-v2-form legend small,
.sign-customiser-v2-form .field-heading small {
  color: #819087;
  font-size: .74rem;
  font-weight: 400;
}

.sign-customiser-v2-form .step-note {
  margin: 0 0 13px;
  color: #718078;
  font-size: .76rem;
  line-height: 1.45;
}

.sign-customiser-v2-form .choice-grid {
  gap: 9px;
}

.sign-customiser-v2-form .choice-grid label {
  min-height: 46px;
  padding: 7px 9px;
  align-content: center;
  border-color: #d3ded4;
  border-radius: 10px;
  background: #fff;
}

.sign-customiser-v2-form .choice-grid label:has(input:checked) {
  border-color: #2f705d;
  box-shadow: 0 0 0 4px rgba(75, 127, 107, .12);
}

.sign-customiser-v2-form .shape-choice-grid,
.sign-customiser-v2-form .three-choice-grid,
.sign-customiser-v2-form .sign-size-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sign-customiser-v2-form .two-choice-grid,
.sign-customiser-v2-form .sign-type-choice-grid,
.sign-customiser-v2-form .qr-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sign-customiser-v2-form .sign-type-choice-grid label,
.sign-customiser-v2-form .shape-choice-grid label,
.sign-customiser-v2-form .qr-choice-grid label {
  min-height: 62px;
  padding: 9px;
}

.sign-customiser-v2-form .table-format-choice-grid label {
  min-height: 66px;
}

.sign-customiser-v2-form .sign-size-choice-grid label {
  min-height: 42px;
  padding-block: 6px;
}

.sign-customiser-v2-form .corner-choice,
.sign-customiser-v2-form .progressive-fields,
.sign-customiser-v2-form .placement-fields,
.sign-customiser-v2-form .spaced-subgroup {
  margin-top: 20px;
}

.sign-customiser-v2-form .corner-choice > p,
.sign-customiser-v2-form .placement-fields p,
.sign-customiser-v2-form .progressive-fields > div > p,
.sign-customiser-v2-form .subheading {
  margin: 0 0 9px;
  color: #2d5b4c;
  font-size: .8rem;
  font-weight: 750;
}

.sign-customiser-v2-form .field-heading > span:first-child {
  color: #2d5b4c;
}

.sign-customiser-v2-form .placement-fields {
  display: grid;
  gap: 18px;
}

.sign-customiser-v2-form .text-font-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(150px, .8fr) 44px;
  gap: 13px;
  align-items: end;
}

.sign-customiser-v2-form .counter-subtext-lines {
  display: grid;
  gap: 13px;
  margin-top: 13px;
}

.sign-customiser-v2-form .counter-subtext-lines:not(:empty) {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(45,91,76,.18);
}

.sign-customiser-v2-form .counter-subtext-row + .counter-subtext-row {
  padding-top: 18px;
  border-top: 1px solid rgba(45,91,76,.14);
}

.sign-customiser-v2-form .counter-wrap-toggle {
  grid-column: 1 / 2;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 7px;
  color: #718078;
  font-size: .76rem;
  font-weight: 500;
}

.sign-customiser-v2-form .counter-subtext-row .counter-font-size {
  grid-column: 2 / -1;
  justify-content: flex-end;
  margin-top: 0;
}

.sign-customiser-v2-form .counter-wrap-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #2d5b4c;
}

.sign-customiser-v2-form .counter-line-spacing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: #2d5b4c;
  font-size: .8rem;
  font-weight: 700;
}

.sign-customiser-v2-form .counter-font-size {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: #2d5b4c;
  font-size: .8rem;
  font-weight: 700;
}

.sign-customiser-v2-form .counter-line-spacing > div {
  display: flex;
  gap: 7px;
}

.sign-customiser-v2-form .counter-font-size > div {
  display: flex;
  gap: 7px;
}

.sign-customiser-v2-form .counter-line-spacing button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #a8c2b0;
  border-radius: 8px;
  color: #2d5b4c;
  background: #f6faf6;
}

.sign-customiser-v2-form .counter-font-size button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #a8c2b0;
  border-radius: 8px;
  color: #2d5b4c;
  background: #f6faf6;
}

.sign-customiser-v2-form .counter-text-add,
.sign-customiser-v2-form .counter-text-remove {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #a8c2b0;
  border-radius: 9px;
  color: #2d5b4c;
  background: #f6faf6;
}

.sign-customiser-v2-form .counter-text-add:hover,
.sign-customiser-v2-form .counter-text-remove:hover {
  border-color: #4e806d;
  background: #eaf3eb;
}

.sign-customiser-v2-form .counter-text-remove {
  color: #76513a;
  border-color: #d9c3b3;
  background: #fffaf6;
}

.sign-customiser-v2-form .sign-text-label {
  gap: 8px;
  color: #2d5b4c;
}

.sign-customiser-v2-form .sign-text-label input,
.sign-customiser-v2-form .sign-text-label select {
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid #cbd9cd;
  border-radius: 9px;
  color: #26322d;
  background: #fff;
  outline-color: #6e9b8b;
  font-weight: 400;
}

.sign-customiser-v2-form .sign-font-picker {
  position: relative;
}

.sign-customiser-v2-form .sign-font-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid #cbd9cd;
  border-radius: 9px;
  color: #26322d;
  background: #fff;
  text-align: left;
  font-weight: 400;
}

.sign-customiser-v2-form .sign-font-picker-trigger:hover,
.sign-customiser-v2-form .sign-font-picker-trigger[aria-expanded="true"] {
  border-color: #6e9b8b;
  box-shadow: 0 0 0 3px rgba(110,155,139,.14);
}

.sign-customiser-v2-form .sign-font-picker-trigger .material-icons {
  color: #61716a;
  font-size: 18px;
}

.sign-customiser-v2-form .sign-font-picker-options {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  min-width: 100%;
  max-width: min(280px, calc(100vw - 64px));
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #d7e2d8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(37,51,43,.16);
}

.sign-customiser-v2-form .sign-font-picker-options button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  color: #314139;
  background: transparent;
  text-align: left;
  white-space: nowrap;
}

.sign-customiser-v2-form .sign-font-picker-options button:hover {
  color: #2d5b4c;
  background: #edf4ed;
}

.sign-customiser-v2-form .field-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 8px;
}

.sign-customiser-v2-form .table-format-choice-grid strong {
  display: grid;
  justify-items: center;
  gap: 3px;
}

.sign-customiser-v2-form .table-format-choice-grid small {
  color: #718078;
  font-size: .62rem;
  font-weight: 500;
}

.corner-choice .choice-grid label {
  min-height: 62px;
}

.corner-style-icon {
  display: block;
  width: 36px;
  height: 24px;
  border: 3px solid currentColor;
}

.corner-style-icon--rounded {
  border-radius: 9px;
}

.icon-menu-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.icon-category-button {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 5px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d3ded4;
  border-radius: 10px;
  color: #405248;
  background: #fff;
  text-align: left;
}

.icon-category-button[data-icon-none] {
  grid-template-columns: auto 1fr;
}

.icon-category-button.selected {
  border-color: #2f705d;
  box-shadow: 0 0 0 4px rgba(75, 127, 107, .12);
}

.icon-category-button .material-icons {
  color: #396c5b;
}

.icon-category-button .chevron {
  font-size: 17px;
}

.icon-popover-anchor {
  position: relative;
}

.icon-option-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: 190px;
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid #bad0c0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 15px 35px rgba(27, 53, 43, .19);
}

.icon-option-popover--wide {
  right: 0;
  left: auto;
  width: 230px;
}

.icon-option-popover button {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 0;
  border-radius: 7px;
  color: #405248;
  background: transparent;
  text-align: left;
  font-size: .78rem;
}

.icon-option-popover button:hover {
  background: #edf4ed;
}

.qr-option-group .qr-details {
  margin-top: 24px;
}

.qr-option-group .qr-caption-input {
  margin-top: 22px;
}

.qr-option-group .qr-link-input {
  margin-top: 19px;
}

.qr-option-group .qr-link-input small {
  color: #819087;
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.4;
}

.sign-builder-submit {
  margin-top: 22px;
}

.sign-customiser-modal .sign-customiser-intro {
  height: min(860px, calc(100vh - 40px));
  min-height: 0;
  overflow: hidden;
}

.sign-customiser-intro #sign-customiser-title {
  margin: 6px 0 13px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.02;
  transition: font-size .18s ease, margin .18s ease, opacity .18s ease;
  color: #2d5b4c;
}

.sign-customiser-intro #sign-customiser-product {
  margin: 0;
  color: #405248;
  font-size: .82rem;
  line-height: 1.42;
  transition: font-size .18s ease, line-height .18s ease;
}

.sign-customiser-intro #sign-customiser-product strong {
  color: #30463a;
  font-weight: 850;
}

.sign-customiser-intro.intro-compact-title #sign-customiser-title {
  margin: 3px 0 9px;
  font-size: 1.65rem;
}

.sign-customiser-intro.intro-compact-copy #sign-customiser-product {
  font-size: .7rem;
  line-height: 1.32;
}

.sign-customiser-intro.intro-hide-product #sign-customiser-product {
  display: none;
}

.sign-customiser-modal .sign-preview {
  margin-top: 16px;
  padding-top: 14px;
}

.sign-customiser-modal .sign-preview > p:last-of-type,
.sign-customiser-modal #sign-preview-caption {
  margin: 11px 0 0;
  color: #819087;
  font-size: .68rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

.sign-preview-board--v2 {
  position: relative;
  display: block;
  width: min(100%, 235px);
  aspect-ratio: 1.5;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  color: #f8f8f2;
  background: #315f51;
  border-radius: 0;
}

.sign-preview-board--v2-circle,
.sign-preview-board--v2-square {
  width: min(100%, 210px);
  aspect-ratio: 1;
}

.sign-preview-board--v2-circle {
  border-radius: 50%;
}

.sign-preview-board--v2-rounded {
  border-radius: 24px;
}

.sign-preview-board--v2 .v2-preview-item {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  box-sizing: border-box;
  margin: 0 !important;
}

.sign-preview-board--v2 .v2-main-text {
  z-index: 2;
  display: block;
  max-width: none;
  color: inherit;
  font-weight: 750;
  line-height: 1.06;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.sign-preview-board--v2 .v2-counter-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0;
  min-width: 0;
}

.sign-preview-board--v2 .v2-counter-main-line,
.sign-preview-board--v2 .v2-counter-sub-line {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-wrap: wrap;
}

.sign-preview-board--v2 .v2-counter-main-line {
  font-family: inherit;
  font-size: var(--v2-counter-main-size, inherit);
  font-weight: inherit;
  line-height: 1.06;
  margin-bottom: var(--v2-counter-main-after-gap, 4px);
}

.sign-preview-board--v2 .v2-counter-sub-line {
  font-size: var(--v2-counter-sub-size, .58em);
  font-weight: 650;
  line-height: 1.12;
}

.sign-preview-board--v2 .v2-counter-sub-line + .v2-counter-sub-line {
  margin-top: var(--v2-counter-line-gap, 4px) !important;
}

.sign-preview-board--v2 .v2-counter-sub-line[data-wrap="false"] {
  white-space: nowrap !important;
  text-wrap: nowrap;
}

.sign-preview-board--v2 .v2-preview-icon {
  z-index: 3;
  color: inherit;
  font-size: 34px;
  font-style: normal;
  line-height: 1;
  text-align: center;
}

.sign-preview-board--v2 .v2-preview-qr {
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: inherit;
  text-align: center;
}

.sign-preview-board--v2 .v2-preview-qr > b {
  position: static;
  color: inherit;
  font-size: 34px;
  transform: none;
}

.sign-preview-board--v2 .v2-preview-qr small {
  max-width: 100%;
  color: inherit;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: .56rem;
  font-weight: 700;
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.sign-preview-board--v2 .v2-preview-additional {
  z-index: 3;
  display: block;
  color: inherit;
  font-size: 15px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.sign-preview-board--v2.sign-preview-board--table {
  color: #51391f;
  background: #d7bd91;
}

.sign-preview-board--v2 .v2-table-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .14em;
  font-size: 18px;
  white-space: nowrap;
}

.sign-preview-board--v2 .v2-table-text[data-format="below"] {
  flex-direction: column;
  gap: 1px;
}

.sign-preview-board--v2 .v2-table-text small {
  position: static;
  max-width: none;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}

.sign-preview-board--v2 .v2-table-text strong {
  display: inline-block;
  line-height: .82;
  white-space: nowrap;
}

.sign-preview-board--v2 .v2-table-text[data-number-size="small"] strong {
  font-size: calc(54px + var(--v2-number-size-adjustment, 0px));
}

.sign-preview-board--v2 .v2-table-text[data-number-size="medium"] strong {
  font-size: calc(70px + var(--v2-number-size-adjustment, 0px));
}

.sign-preview-board--v2 .v2-table-text[data-number-size="large"] strong {
  font-size: calc(88px + var(--v2-number-size-adjustment, 0px));
}

.sign-preview-board--v2 .v2-table-text[data-format="beside"][data-number-size="small"] strong {
  font-size: calc(50px + var(--v2-number-size-adjustment, 0px));
}

.sign-preview-board--v2 .v2-table-text[data-format="beside"][data-number-size="medium"] strong {
  font-size: calc(66px + var(--v2-number-size-adjustment, 0px));
}

.sign-preview-board--v2 .v2-table-text[data-format="beside"][data-number-size="large"] strong {
  font-size: calc(82px + var(--v2-number-size-adjustment, 0px));
}

.sign-customiser-modal .sign-preview-summary {
  gap: 5px 10px;
  margin-top: 13px;
  padding-top: 12px;
}

.sign-customiser-modal .sign-preview-summary dt {
  font-size: .61rem;
}

.sign-customiser-modal .sign-preview-summary dd {
  font-size: .69rem;
}

.sign-price-estimate {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(45, 91, 76, .22);
  border-radius: 10px;
  background: rgba(255, 255, 255, .7);
}

.sign-price-estimate[hidden] {
  display: none;
}

.sign-price-estimate > span {
  color: #628070;
  font-size: .59rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sign-price-estimate > strong {
  color: #2d5b4c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.15;
}

.sign-price-estimate > small {
  color: #718078;
  font-size: .65rem;
  line-height: 1.35;
}

.sign-price-estimate.is-updating {
  opacity: .76;
}

.sign-price-estimate--wide {
  margin: 16px 0 0;
  padding: 13px 15px;
  background: #f2f7f1;
}

.sign-price-estimate--wide > strong {
  font-size: 1.45rem;
}

.review-sign-board #sign-preview-icon,
.review-sign-board #sign-preview-arrow,
.review-sign-board .v2-preview-icon {
  color: var(--review-text-colour) !important;
}

@media (max-width: 700px) {
  body.modal-open {
    position: fixed;
  }
  .sign-customiser-modal .sign-customiser-intro {
    height: auto;
    overflow: visible;
  }
  .sign-customiser-modal .sign-customiser-v2-form {
    max-height: none;
    overflow: visible;
    padding: 23px 20px 30px;
  }
  .sign-customiser-intro.intro-hide-title #sign-customiser-title {
    display: block;
  }
}

@media (max-width: 560px) {
  .sign-customiser-v2-form .text-font-row,
  .icon-menu-row {
    grid-template-columns: 1fr;
  }
  .sign-customiser-v2-form .counter-text-add,
  .sign-customiser-v2-form .counter-text-remove {
    width: 100%;
  }
  .sign-customiser-v2-form .counter-wrap-toggle,
  .sign-customiser-v2-form .counter-subtext-row .counter-font-size {
    grid-column: 1 / -1;
  }
  .sign-customiser-v2-form .counter-subtext-row .counter-font-size {
    justify-content: space-between;
    margin-top: 0;
  }
  .sign-customiser-v2-form .shape-choice-grid,
  .sign-customiser-v2-form .three-choice-grid,
  .sign-customiser-v2-form .sign-size-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .icon-option-popover,
  .icon-option-popover--wide {
    right: auto;
    left: 0;
    width: min(260px, calc(100vw - 80px));
  }
}

/* Final review: preserve the live sign layout and apply the selected treatments. */
.review-card { width: min(760px, 100%); }.review-sign-preview { display: grid; place-items: center; min-height: 310px; margin: 22px 0; padding: 22px; overflow: hidden; border: 1px solid #dbe5dc; border-radius: 14px; background: #f6f8f4; }.review-sign-preview .sign-preview-board { width: min(100%, 300px); max-width: 300px; }.review-sign-preview .sign-preview-board--circle, .review-sign-preview .sign-preview-board--square { width: min(100%, 280px); }.review-sign-board--natural { background-color: #d5b783 !important; background-image: repeating-linear-gradient(12deg, rgba(86, 52, 24, .12) 0 1px, transparent 1px 15px), repeating-linear-gradient(176deg, rgba(255, 247, 219, .22) 0 3px, transparent 3px 28px) !important; }.review-sign-board--painted { background: var(--review-background-colour) !important; }.review-sign-board #sign-preview-text, .review-sign-board #sign-preview-table, .review-sign-board .sign-preview-qr-group, .review-sign-board .sign-preview-qr-group small { color: var(--review-text-colour) !important; }.review-sign-board.review-text--gold-leaf #sign-preview-text, .review-sign-board.review-text--gold-leaf #sign-preview-table, .review-sign-board.review-text--gold-leaf #sign-preview-icon, .review-sign-board.review-text--gold-leaf #sign-preview-arrow, .review-sign-board.review-text--gold-leaf .v2-preview-icon, .review-sign-board.review-text--gold-leaf .sign-preview-qr-group { color: #b98b23 !important; text-shadow: 0 1px 0 rgba(255, 239, 172, .55); }.review-order-summary { padding: 17px 18px; border: 1px solid #dbe5dc; border-radius: 12px; background: #fafcf9; }.review-order-summary h3 { margin: 0 0 10px; color: #314139; font-size: 1rem; }.review-order-summary ul { display: grid; gap: 6px; margin: 0; padding-left: 19px; color: #526057; font-size: .8rem; line-height: 1.4; }.review-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }.review-actions .secondary-button, .review-actions .primary-button { margin: 0; }@media (max-width: 560px) { .review-sign-preview { min-height: 270px; padding: 16px; }.review-actions { align-items: stretch; }.review-actions > * { width: 100%; justify-content: center; } }

/* The finishing-step actions have their own fixed, centred button treatment. */
.finish-choice-grid label {
  display: grid;
  place-items: center;
  align-content: center;
  height: 62px;
  min-height: 62px;
  padding: 7px 10px;
}

.finish-choice-grid .finish-choice-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  color: inherit;
  text-align: center;
}

.finish-choice-grid .finish-choice-content strong {
  display: block;
  font-size: .88rem;
  line-height: 1.15;
}

.finish-choice-grid .finish-choice-content small {
  display: block;
  margin: 0;
  font-size: .71rem;
  line-height: 1.25;
}

.finish-actions > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  margin: 0 !important;
  padding: 0 18px !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  text-align: center;
}

.finish-actions > button .material-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  margin: 0;
  font-size: 19px;
  line-height: 1;
}

@media (max-width: 560px) {
  .address-grid, .account-personal-grid { grid-template-columns: 1fr; }
  .address-grid .address-street { grid-column: auto; }
}

/* Public catalogue navigation */
.custom-signs-subnav {
  position: sticky;
  top: 78px;
  z-index: 9;
  display: flex;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid rgba(45, 91, 76, .1);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: rgba(237, 241, 235, .97);
  box-shadow: 0 8px 22px rgba(37, 51, 43, .09);
  backdrop-filter: blur(14px);
  animation: custom-subnav-enter .22s ease-out both;
  isolation: isolate;
}
.custom-signs-subnav::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  right: calc(50% - 50vw);
  bottom: -26px;
  left: calc(50% - 50vw);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(248, 248, 245, .88) 0%, rgba(248, 248, 245, .78) 56%, rgba(248, 248, 245, 0) 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.custom-signs-subnav a {
  position: relative;
  z-index: 1;
  padding: 9px 14px;
  border-radius: 8px;
  color: #65736a;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 650;
  white-space: nowrap;
  transition: color .28s ease;
}
.custom-signs-subnav a:hover,
.custom-signs-subnav a.active { color: #2d5b4c; }
#shop,
#how-it-works,
#small-business-signs,
#personal-signs-gifts { scroll-margin-top: 142px; }
@keyframes custom-subnav-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .custom-signs-subnav { animation: none; }
}
@media (max-width: 780px) {
  .site-header {
    height: 112px;
    grid-template-rows: 67px 45px;
    row-gap: 0;
  }
  .site-header .brand,
  .site-header .account-menu,
  .site-header .storefront-header-actions { grid-row: 1; }
  .site-header .site-nav {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    padding: 4px;
  }
  .site-header .site-nav a { padding: 8px 12px; font-size: .77rem; }
  .custom-signs-subnav {
    top: 112px;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    scrollbar-width: none;
  }
  .custom-signs-subnav::-webkit-scrollbar { display: none; }
  .custom-signs-subnav a { padding: 8px 12px; font-size: .75rem; }
  #shop,
  #how-it-works,
  #small-business-signs,
  #personal-signs-gifts { scroll-margin-top: 190px; }
}
@media (max-width: 620px) {
  .site-header .site-nav { max-width: calc(100vw - 16px); }
  .site-header .site-nav a { padding: 8px 8px; font-size: .69rem; white-space: nowrap; }
}
@media (max-width: 360px) {
  .site-header .site-nav a { padding: 8px 6px; font-size: .64rem; }
}

.service-placeholder-main {
  min-height: calc(100vh - 78px);
}
.service-account-link { text-decoration: none; }

/* Personalised signs and gifts customer customiser */
.gift-customer-modal { padding: 14px; }
.gift-customer-card { position: relative; width: min(1280px,100%); max-height: calc(100vh - 28px); overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 28px 80px rgba(18,30,24,.28); }
.gift-customer-card > .modal-close { z-index: 8; top: 18px; right: 18px; width: 42px; height: 42px; border: 1px solid #cbd9d0; color: #2d5b4c; background: rgba(255,255,255,.96); box-shadow: 0 5px 18px rgba(30,48,39,.12); }
.gift-customer-layout { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(440px,1.1fr); min-height: min(820px,calc(100vh - 28px)); }
.gift-customer-options { max-height: calc(100vh - 28px); overflow-y: auto; padding: 34px 32px 42px; }
.gift-customer-heading h2 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(2rem,3.5vw,3rem); font-weight: 500; letter-spacing: -.035em; }
.gift-customer-heading > p:last-child { margin: 10px 0 0; color: #718078; line-height: 1.55; }
.gift-customer-options fieldset { min-width: 0; margin: 25px 0 0; padding: 17px; border: 1px solid #77a08f; border-radius: 14px; }
.gift-customer-options legend { padding: 0 10px; color: #2d5b4c; font-size: .88rem; font-weight: 850; }
.gift-customer-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.gift-customer-choice-grid label, .gift-template-choice-list label { position: relative; display: grid; place-items: center; align-content: center; min-height: 68px; gap: 4px; padding: 10px; border: 1px solid #d3ded3; border-radius: 10px; color: #4c5f54; background: #fff; text-align: center; cursor: pointer; }
.gift-customer-choice-grid input, .gift-template-choice-list input { position: absolute; opacity: 0; pointer-events: none; }
.gift-customer-choice-grid label:has(input:checked), .gift-template-choice-list label:has(input:checked) { border-color: #4e806d; color: #2d5b4c; box-shadow: 0 0 0 3px rgba(78,128,109,.14); }
.gift-customer-choice-grid strong, .gift-template-choice-list strong { font-size: .76rem; }
.gift-customer-choice-grid small, .gift-template-choice-list small { color: #718078; font-size: .65rem; line-height: 1.3; }
.gift-shape-symbol { display: block; width: 42px; height: 31px; border: 2px solid currentColor; }
.gift-shape-symbol.circle { width: 34px; height: 34px; border-radius: 50%; }
.gift-shape-symbol.oval { border-radius: 50%; }
.gift-shape-symbol.square { width: 34px; height: 34px; }
.gift-shape-symbol.rounded { border-radius: 9px; }
.gift-shape-symbol.uploaded { border-style: dashed; border-radius: 45% 18% 40% 22%; }
.gift-mode-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.gift-template-choice-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.gift-editable-fields { display: grid; gap: 10px; margin-top: 16px; }
.gift-editable-fields label, #gift-custom-text-step > label { display: grid; gap: 6px; color: #526057; font-size: .77rem; font-weight: 750; }
.gift-editable-fields input, #gift-custom-text-step input, #gift-custom-text-step select { width: 100%; padding: 11px; border: 1px solid #d3ded3; border-radius: 9px; }
#gift-custom-text-step { gap: 11px; }
#gift-custom-text-step:not([hidden]) { display: grid; }
#gift-custom-text-step [hidden] { display: none !important; }
.gift-customer-adjustment-stack { display: grid; gap: 8px; }
.gift-customer-adjustment { display: grid; grid-template-columns: minmax(0,1fr) auto 38px 38px; align-items: center; gap: 7px; color: #526057; font-size: .77rem; font-weight: 750; }
.gift-customer-adjustment output { min-width: 48px; color: #718078; text-align: right; }
.gift-customer-adjustment button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #a7c2b2; border-radius: 9px; color: #2d5b4c; background: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.gift-customer-adjustment button:hover { background: #eff5ed; }
.gift-custom-decoration-builder { display: grid; gap: 12px; margin-top: 5px; padding-top: 16px; border-top: 1px solid #d8e2da; }
.gift-custom-decoration-builder h3 { margin: 0; color: #2d5b4c; font-family: inherit; font-size: .84rem; }
.gift-custom-decoration-builder h3 span, .gift-custom-decoration-builder p { color: #718078; font-size: .72rem; font-weight: 500; }
.gift-custom-decoration-builder p { margin: 3px 0 0; }
.gift-custom-decoration-add { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; }
.gift-custom-decoration-add label { display: grid; gap: 6px; color: #526057; font-size: .77rem; font-weight: 750; }
.gift-custom-decoration-add select { width: 100%; padding: 11px; border: 1px solid #d3ded3; border-radius: 9px; background: #fff; }
.gift-custom-decoration-add > button { display: inline-flex; align-items: center; justify-content: center; min-height: 41px; gap: 4px; padding: 8px 13px; border: 1px solid #4e806d; border-radius: 9px; color: #fff; background: #2d5b4c; font-weight: 750; cursor: pointer; }
.gift-custom-decoration-add > button:disabled { opacity: .45; cursor: not-allowed; }
.gift-custom-decoration-list { display: grid; gap: 9px; }
.gift-custom-decoration-card { display: grid; gap: 10px; padding: 11px; border: 1px solid #d3ded3; border-radius: 10px; background: #fbfcfa; }
.gift-custom-decoration-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gift-custom-decoration-card-header strong { color: #2d5b4c; font-size: .78rem; }
.gift-custom-decoration-card-header button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #d8b8a4; border-radius: 8px; color: #75472e; background: #fff9f5; cursor: pointer; }
.gift-custom-decoration-card .gift-customer-adjustment { grid-template-columns: minmax(0,1fr) auto; }
.gift-custom-decoration-card .gift-customer-adjustment > div { display: flex; align-items: center; gap: 7px; }
.gift-custom-decoration-card .gift-customer-adjustment output { min-width: 52px; text-align: center; }
.gift-custom-decoration-position { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.gift-custom-decoration-position label { display: grid; gap: 5px; color: #526057; font-size: .7rem; font-weight: 750; }
.gift-custom-decoration-position select { width: 100%; padding: 9px; border: 1px solid #d3ded3; border-radius: 8px; background: #fff; }
.gift-continue-button { width: 100%; margin-top: 25px; }
.gift-customer-preview-panel { position: sticky; top: 0; display: grid; place-items: center; align-content: center; min-width: 0; padding: 35px; overflow: hidden; background: #eff5ed; }
.gift-customer-preview-panel > .eyebrow { justify-self: start; align-self: start; }
.gift-customer-preview-frame { position: relative; display: grid; place-items: center; width: min(100%,560px); max-width: 100%; overflow: hidden; background: #dbc39a; box-shadow: 0 18px 48px rgba(47,66,55,.18); }
.gift-customer-preview-frame--circle { aspect-ratio: 1; border-radius: 50%; }
.gift-customer-preview-frame--oval { border-radius: 50%; }
.gift-customer-preview-frame--square { aspect-ratio: 1; }
.gift-customer-preview-frame--rounded { border-radius: 34px; }
.gift-customer-preview-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .25; pointer-events: none; }
.gift-customer-preview-frame .canvas-container { z-index: 1; width: 100%!important; height: 100%!important; max-width: 100%; max-height: 100%; }
.gift-customer-preview-frame .canvas-container canvas { width: 100%!important; height: 100%!important; }
.gift-customer-preview-frame > canvas { width: 100%!important; height: 100%!important; min-width: 0; }
.gift-preview-note { max-width: 520px; margin: 18px 0 0; color: #7b887f; font-size: .72rem; line-height: 1.5; text-align: center; }
.gift-customer-preview-panel .sign-preview-summary { width: min(100%,560px); }
body:has(.gift-customer-modal:not([hidden])) { overflow: hidden; }
@media (max-width: 880px) {
  .gift-customer-card { overflow-y: auto; }
  .gift-customer-layout { grid-template-columns: minmax(0,1fr); }
  .gift-customer-options { max-height: none; overflow: visible; }
  .gift-customer-preview-panel { position: static; min-height: 560px; }
}
@media (max-width: 520px) {
  .gift-customer-modal { padding: 6px; }
  .gift-customer-card { max-height: calc(100vh - 12px); border-radius: 15px; }
  .gift-customer-options { padding: 28px 18px; }
  .gift-customer-choice-grid, .gift-template-choice-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gift-customer-preview-panel { min-height: 440px; padding: 24px 16px; }
}
/* Admin-managed homepage enhancements preserve the original card structure. */
.product-card-photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;margin-bottom:22px}.homepage-card-carousel{display:flex!important;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-color:#9eb7aa transparent}.homepage-card-carousel>.product-card{flex:0 0 min(360px,82vw);scroll-snap-align:start}.category-section[data-alignment="centre"] .section-heading{text-align:center;justify-content:center}.category-section[data-alignment="centre"] .section-heading>p{margin-inline:auto}
.homepage-preset-author-page{overflow:hidden}.homepage-preset-author-page .site-header,.homepage-preset-author-page #custom-signs-subnav,.homepage-preset-author-page .footer{display:none!important}.homepage-preset-author-page .sign-customiser-modal,.homepage-preset-author-page .gift-customer-modal{padding-bottom:94px}.homepage-preset-author-page .sign-customiser-modal .modal-close,.homepage-preset-author-page .gift-customer-modal .modal-close,.homepage-preset-author-page .sign-builder-submit,.homepage-preset-author-page .gift-continue-button{display:none!important}.homepage-preset-author-toolbar{position:fixed;z-index:25000;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 24px;background:#fff;border-top:1px solid #cbd9d0;box-shadow:0 -8px 28px rgba(34,54,44,.14)}.homepage-preset-author-toolbar p{display:grid;gap:2px;margin:0;color:#506159}.homepage-preset-author-toolbar p strong{color:#2d5b4c}.homepage-preset-author-error{margin:40px;padding:22px;border:1px solid #d9b9a8;border-radius:14px;color:#75472e;background:#fff8f4}
/* Homepage section presentation controlled by the admin content editor. */
[data-home-alignment="left"] { text-align: left; }
[data-home-alignment="centre"] { text-align: center; }
[data-home-alignment="right"] { text-align: right; }
[data-home-alignment="justify"] { text-align: justify; }
[data-home-alignment] h1,[data-home-alignment] h2 { line-height: var(--home-heading-line-height,.98); }
[data-home-alignment="centre"] .section-heading { text-align: center; }
[data-home-alignment="centre"] .section-heading > p:last-child { margin-right: auto; margin-left: auto; }
[data-home-alignment="right"] .section-heading { text-align: right; }
[data-home-alignment="right"] .section-heading > p:last-child { margin-left: auto; }
[data-home-alignment="justify"] .section-heading { text-align: justify; }
[data-home-alignment="centre"] .hero-actions { justify-content: center; }
[data-home-alignment="right"] .hero-actions { justify-content: flex-end; }
.account-security-page { min-height: 100vh; margin: 0; background: #f2f6f0; color: #26372f; }
.account-security-shell { width: min(92vw, 580px); margin: 0 auto; padding: clamp(32px, 8vh, 90px) 0; }
.account-security-brand { display: inline-block; width: min(290px, 75vw); margin: 0 0 28px; }
.account-security-brand img { display: block; width: 100%; height: auto; }

/* Product photography must always show the complete uploaded image. */
.product-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  background: #fff;
}
.account-security-card { padding: clamp(26px, 5vw, 46px); border: 1px solid #cfdbd1; border-radius: 22px; background: #fff; box-shadow: 0 18px 45px rgba(38,55,47,.09); }
.account-security-card h1 { margin: 8px 0 12px; color: #26372f; font-family: Georgia, serif; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.02; }
.account-security-card .compact-form { margin: 24px 0 14px; }
.account-security-card .form-status { min-height: 1.5em; margin: 16px 0; color: #51665b; }
.account-security-card .primary-button { display: inline-flex; margin-top: 18px; text-decoration: none; }
.verification-resend-panel { margin: 24px 0 16px; padding-top: 18px; border-top: 1px solid #d7e0d8; }
.verification-resend-panel summary { color: #2d5b4c; cursor: pointer; font-weight: 750; }
.verification-resend-panel .compact-form { margin-bottom: 0; }
.legal-consent-group { display: grid; gap: 10px; margin-top: 4px; padding: 13px; border: 1px solid #cfddd3; border-radius: 11px; background: #f8faf7; }
.legal-collection-note, .account-legal-links { margin: 0; color: #718078; font-size: .72rem; line-height: 1.5; }
.compact-form .legal-consent, .account-form .legal-consent { display: flex; grid-template-columns: none; align-items: flex-start; gap: 9px; color: #46584e; font-size: .74rem; font-weight: 600; line-height: 1.4; }
.legal-consent input { width: 18px; height: 18px; flex: 0 0 auto; margin: 1px 0 0; padding: 0; accent-color: #2d5b4c; }
.legal-consent a, .legal-collection-note a, .account-legal-links a { color: #2d5b4c; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.legal-consent small { color: #87938c; font-weight: 500; }
.account-marketing-consent { margin-top: 4px; padding: 12px 13px; border: 1px solid #cfddd3; border-radius: 11px; background: #f8faf7; }