/* signature theme on pages that still use the current (Bootstrap) templates — cart, checkout, sign-in,
   the customer portal, policies, contact, collections, Split Print. Same fonts, type and colours as the
   rebuilt pages; layout stays as it is. !important only where a template carries its own <style>. */

/* ── type ─────────────────────────────────────────────────────────────── */
.th-legacy #main, .th-legacy #main :where(p, li, td, th, label, input, select, textarea, button, a, span, div, small, strong, b, em, dd, dt) {
  font-family: var(--sans) !important;
}
.th-legacy #main :where(.fa, .fas, .far, .fab, .fal, [class^="fa-"], [class*=" fa-"]) { font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important; }
.th-legacy #main .fab { font-family: "Font Awesome 5 Brands" !important; }
.th-legacy #main :where(h1, h2, h3, .h1, .h2, .h3, .section-heading, .masthead-heading, .intro-heading, .intro-lead-in, .page-title, .card-title, .modal-title):not(.collection-seo-section *) {
  font-family: var(--serif) !important; font-variation-settings: "SOFT" 20, "WONK" 0;
  font-weight: 400 !important; text-transform: none !important; letter-spacing: -.01em !important; color: inherit; font-style: normal !important;
}
.th-legacy #main :where(h4, h5, h6, .h4, .h5, .h6):not(.collection-seo-section *) { font-family: var(--sans) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: .005em !important; font-style: normal !important; }
.th-legacy #main h1:not(.collection-seo-section *), .th-legacy #main .h1:not(.collection-seo-section *) { font-size: clamp(32px, 1.8vw + 25px, 52px); line-height: 1.04; }
.th-legacy #main h2:not(.collection-seo-section *), .th-legacy #main .h2:not(.collection-seo-section *), .th-legacy #main .section-heading:not(.collection-seo-section *) { font-size: clamp(26px, 1vw + 21px, 38px); line-height: 1.1; }
.th-legacy #main h3:not(.collection-seo-section *), .th-legacy #main .h3:not(.collection-seo-section *) { font-size: clamp(21px, .5vw + 18px, 26px); line-height: 1.2; }
.th-legacy #main { color: var(--walnut); }
.th-legacy #main a:not(.btn):not(.collection-seo-section *) { color: var(--walnut); text-underline-offset: 3px; }
.th-legacy #main .text-muted:not(.collection-seo-section *), .th-legacy #main .section-subheading:not(.collection-seo-section *) { color: var(--oak) !important; font-style: normal !important; }
.th-legacy #main .text-primary, .th-legacy #main .text-gold, .th-legacy #main .text-warning { color: var(--ochre) !important; }
.th-legacy #main .text-success { color: var(--sage) !important; }

/* ── backgrounds ──────────────────────────────────────────────────────── */
.th-legacy, .th-legacy #app, .th-legacy #main { background: var(--chalk); }
.th-legacy #main .bg-light, .th-legacy #main .page-section.bg-light { background: var(--plaster) !important; }
.th-legacy #main .bg-dark { background: var(--walnut) !important; }
.th-legacy #main .bg-white { background: #fff !important; }

/* ── buttons: one yellow action, walnut outlines for the rest ─────────── */
.th-legacy #main .btn { font-family: var(--sans) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: .01em !important; border-radius: var(--r) !important; box-shadow: none !important; }
.th-legacy #main :is(.btn-primary, .btn-warning, .btn-success, .btn-xl, .btn-gold, .btn-yellow) {
  background: var(--yellow) !important; border-color: var(--yellow) !important; color: var(--walnut) !important;
}
.th-legacy #main :is(.btn-primary, .btn-warning, .btn-success, .btn-xl, .btn-gold, .btn-yellow):hover { background: #EDC93F !important; border-color: #EDC93F !important; }
.th-legacy #main :is(.btn-dark, .btn-secondary, .btn-info) { background: var(--walnut) !important; border-color: var(--walnut) !important; color: var(--chalk) !important; }
.th-legacy #main :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light, .btn-light, .btn-default) {
  background: transparent !important; border: 1.5px solid var(--walnut) !important; color: var(--walnut) !important;
}
.th-legacy #main .btn-danger { background: #8E3B2E !important; border-color: #8E3B2E !important; color: #fff !important; }
.th-legacy #main .btn-link { color: var(--walnut) !important; text-decoration: underline; }

/* ── forms ────────────────────────────────────────────────────────────── */
.th-legacy #main :is(.form-control, .custom-select, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea) {
  border: 1.5px solid var(--ctl) !important; border-radius: var(--r) !important; background-color: #fff; color: var(--walnut); box-shadow: none !important;
}
.th-legacy #main :is(.form-control, input, select, textarea):focus { border-color: var(--walnut) !important; outline: 2px solid rgba(42,33,27,.15); outline-offset: 0; }
.th-legacy #main .input-group-text { background: var(--plaster); border-color: var(--ctl); color: var(--oak); }
.th-legacy #main label { color: var(--walnut); font-weight: 600; font-size: 14px; }
.th-legacy #main .custom-control-input:checked ~ .custom-control-label::before { background: var(--walnut); border-color: var(--walnut); }

/* ── cards, tables, lists, alerts, badges ─────────────────────────────── */
.th-legacy #main .card { border: 1px solid var(--line) !important; border-radius: var(--r) !important; box-shadow: none !important; background: #fff; }
.th-legacy #main .card-header { background: var(--plaster) !important; border-bottom: 1px solid var(--line) !important; color: var(--walnut) !important; }
.th-legacy #main .card-header * { color: var(--walnut) !important; }
.th-legacy #main .table { color: var(--walnut); }
.th-legacy #main .table :is(th, td) { border-color: var(--line) !important; }
.th-legacy #main .table thead th { background: var(--plaster); border-bottom: 1px solid var(--line) !important; font-weight: 600; font-size: 14px; }
.th-legacy #main .list-group-item { border-color: var(--line); }
.th-legacy #main .list-group-item.active { background: var(--walnut); border-color: var(--walnut); color: var(--chalk); }
.th-legacy #main .alert { border-radius: var(--r); border: 1px solid var(--line); background: var(--plaster); color: var(--walnut); }
.th-legacy #main .alert-danger { background: #F6E7E2; border-color: #E6C3B9; color: #6E2A1F; }
.th-legacy #main .alert-success { background: #EAEEE6; border-color: #CBD3C5; color: #3E4A39; }
.th-legacy #main .badge { border-radius: 2px; font-weight: 600; }
.th-legacy #main :is(.badge-primary, .badge-warning) { background: var(--yellow); color: var(--walnut); }
.th-legacy #main :is(.badge-dark, .badge-secondary) { background: var(--walnut); color: var(--chalk); }
.th-legacy #main .nav-tabs .nav-link.active, .th-legacy #main .nav-pills .nav-link.active { background: var(--walnut); color: var(--chalk) !important; border-color: var(--walnut); }
.th-legacy #main .breadcrumb { background: transparent; padding-left: 0; font-size: 13.5px; }
.th-legacy #main hr { border-color: var(--line); }

/* the old navbar left room for itself; the theme header is in the flow */
.th-legacy #app { margin-top: 0 !important; padding-top: 0 !important; }
.th-legacy body, body.th-legacy { padding-top: 0 !important; }

/* ── page banners (contact, policies, product pages still on the old template): the photo banner
      becomes a quiet plaster title band in the theme's type ── */
.th-legacy header.masthead { background: var(--plaster) !important; min-height: 0 !important; height: auto !important; padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px) !important; color: var(--walnut) !important; text-align: left !important; }
.th-legacy header.masthead::before, .th-legacy header.masthead::after { display: none !important; }
.th-legacy header.masthead > .container { background: transparent !important; }
.th-legacy header.masthead .intro-text { padding: 0 !important; text-align: left !important; }
.th-legacy header.masthead .intro-lead-in { font: 500 16px/1.4 var(--sans) !important; color: var(--oak) !important; margin: 0 0 10px !important; font-style: normal !important; }
.th-legacy header.masthead .intro-heading { font-family: var(--serif) !important; font-size: clamp(38px, 2.6vw + 24px, 64px) !important; font-weight: 360 !important; line-height: 1 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--walnut) !important; margin: 0 !important; text-shadow: none !important; }
.th-legacy header.masthead .btn { margin-top: 18px; }
.th-legacy .breadcrumbs { padding-top: 14px; padding-bottom: 0; }
.th-legacy .breadcrumbs ol.arrows { background: none !important; padding: 0 !important; margin: 0; font-size: 13.5px; }
.th-legacy .breadcrumbs ol.arrows li, .th-legacy .breadcrumbs ol.arrows li a { background: none !important; color: var(--oak) !important; padding: 0 !important; font-size: 13.5px !important; text-transform: none !important; }
.th-legacy .breadcrumbs ol.arrows li a::before, .th-legacy .breadcrumbs ol.arrows li a::after { display: none !important; }
.th-legacy .breadcrumbs ol.arrows li + li::before { content: "/"; margin: 0 6px; color: var(--oak); }
.th-legacy #main .page-section { background-color: transparent; }

/* ── cart ── */
.th-legacy .cart-pg { background: var(--chalk) !important; }
.th-legacy .cart-step-num { background: var(--line) !important; color: var(--oak) !important; }
.th-legacy .cart-step-num.active, .th-legacy .cart-step.active .cart-step-num, .th-legacy .cart-step-num[class*="done"], .th-legacy .cart-step.done .cart-step-num { background: var(--walnut) !important; color: var(--chalk) !important; }
.th-legacy .cart-step-line { background: var(--line) !important; }
.th-legacy .cart-step-label { color: var(--walnut) !important; }
.th-legacy #main :is(.btn-cart-primary, .btn-checkout, .btn-cart-checkout) { background: var(--yellow) !important; border-color: var(--yellow) !important; color: var(--walnut) !important; }
.th-legacy #main [class^="cart-"] :is(h4, h5) { color: var(--walnut) !important; }

/* ── sign in / create account ── */
.th-legacy .lg-wrap { background: var(--chalk) !important; }
.th-legacy .lg-header { background: var(--walnut) !important; }
.th-legacy .lg-header * { color: var(--chalk) !important; }
.th-legacy .lg-btn-primary { color: var(--walnut) !important; }

/* ── Split Print (its own designer stays; only the colours change) ── */
.th-legacy [class^="sp-"], .th-legacy [class*=" sp-"] { --sp-green: var(--walnut); }
.th-legacy :is(.sp-type-price, .sp-type-dim, .sp-upload-change, .sp-layout-label, .sp-sel-link) { color: var(--walnut) !important; }
.th-legacy :is(.sp-type-option.active, .sp-layout-btn.active, .sp-family-btn.active, .sp-color-btn.active) { border-color: var(--walnut) !important; color: var(--walnut) !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--walnut) !important; }
.th-legacy .sp-type-dot { background: var(--walnut) !important; border-color: var(--walnut) !important; }
.th-legacy .sp-final-size { color: var(--walnut) !important; border-color: var(--ctl) !important; background: var(--plaster) !important; }
.th-legacy .sp-discount-badge { color: var(--ochre) !important; background: var(--plaster) !important; border-color: var(--line) !important; }
.th-legacy .sp-layout-btn.active svg, .th-legacy .sp-layout-btn.active rect { color: var(--walnut) !important; fill: currentColor; }
.th-legacy #main svg rect[fill="#27ae60"], .th-legacy #main svg [stroke="#27ae60"] { fill: var(--walnut); stroke: var(--walnut); }

/* ── ready-to-print collections ── */
.th-legacy .set-img-check, .th-legacy #set-progress-bar { background: var(--walnut) !important; }
.th-legacy :is(.set-size-btn, .set-hint-size-btn, .set-frame-btn, .set-product-option) { border-color: var(--ctl) !important; border-radius: var(--r) !important; }
.th-legacy :is(.set-size-btn.active, .set-hint-size-btn.active) { background: var(--walnut) !important; border-color: var(--walnut) !important; color: var(--chalk) !important; }
.th-legacy :is(.set-frame-btn.active, .set-product-option.active) { border-color: var(--walnut) !important; box-shadow: inset 0 0 0 1px var(--walnut) !important; }
.th-legacy .set-order-panel { border-color: var(--line) !important; border-radius: var(--r) !important; }
.th-legacy .set-price-sale { color: var(--walnut) !important; }
.th-legacy .set-price-total { color: var(--oak) !important; }
.th-legacy .sets-tag { background: var(--plaster) !important; color: var(--oak) !important; border-radius: 2px !important; }
.th-legacy .sets-filter-tag { border-color: var(--ctl) !important; border-radius: var(--r) !important; }

/* ── contact ── */
.th-legacy .cnt-info-icon { background: var(--plaster) !important; color: var(--walnut) !important; }
.th-legacy .cnt-info-icon * { color: var(--walnut) !important; }
.th-legacy .cnt-required { color: #8E3B2E !important; }

/* ── customer portal (account, orders, designs) ── */
.th-legacy .portal-wrap { background: var(--chalk) !important; }
.th-legacy .portal-avatar, .th-legacy .portal-card-header { background: var(--walnut) !important; }
.th-legacy .portal-avatar *, .th-legacy .portal-card-header * { color: var(--chalk) !important; }
.th-legacy .portal-avatar-circle { background: var(--yellow) !important; color: var(--walnut) !important; }
.th-legacy .portal-card-header h1, .th-legacy .portal-card-header h2, .th-legacy .portal-card-header h3 { font-family: var(--serif) !important; }
.th-legacy :is(.portal-sidebar, .portal-card, .portal-nav) { border-radius: var(--r) !important; border-color: var(--line) !important; box-shadow: none !important; }
.th-legacy .portal-nav a { color: var(--walnut) !important; border-left-color: transparent !important; }
.th-legacy .portal-nav a.active { background: var(--plaster) !important; border-left-color: var(--walnut) !important; font-weight: 600; }
.th-legacy .portal-nav a i, .th-legacy .portal-nav a.active i { color: var(--oak) !important; }
.th-legacy .portal-nav-logout, .th-legacy .portal-nav-logout i { color: var(--oak) !important; }
.th-legacy [class*="pql-icon"] { background: var(--plaster) !important; color: var(--walnut) !important; border-radius: var(--r) !important; }
.th-legacy [class*="pql-icon"] i { color: var(--walnut) !important; }
.th-legacy :is(.pf-btn-primary) { background: var(--yellow) !important; border-color: var(--yellow) !important; color: var(--walnut) !important; }
.th-legacy :is(.pf-btn-primary) i { color: var(--walnut) !important; }
.th-legacy .portal-main :is(.fa-shopping-bag, .fa-bookmark) { color: var(--ctl) !important; }
.th-legacy .portal-main .fa-check-circle { color: var(--sage) !important; }
/* phones: the content column fills the width (it shrank to its contents) */
@media (max-width: 991px) { .th-legacy .portal-main { width: 100%; align-self: stretch; } }

/* ── cart with items: inline navy/green from the templates, the item lines, the promo ── */
.th-legacy #main [style*="1b2838"], .th-legacy #main [style*="1B2838"] { color: var(--walnut) !important; }
.th-legacy #main [style*="background:#1b2838"], .th-legacy #main [style*="background: #1b2838"], .th-legacy #main [style*="background-color:#1b2838"] { background: var(--walnut) !important; color: var(--chalk) !important; }
.th-legacy #main [style*="28a745"], .th-legacy #main [style*="27ae60"] { color: var(--sage) !important; }
.th-legacy #main h4[style*="text-align:center"] { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(30px, 1.6vw + 24px, 44px) !important; letter-spacing: -.012em !important; }
.th-legacy :is(.cart-item-name, .main-price) { color: var(--walnut) !important; }
.th-legacy .cart-item-name { font-weight: 600 !important; }
.th-legacy .cart-icon-btn, .th-legacy .cart-icon-btn i, .th-legacy #main .fa-sync-alt { color: var(--oak) !important; }
.th-legacy .cart-icon-btn.danger:hover, .th-legacy .cart-icon-btn.danger:hover i { color: #8E3B2E !important; }
.th-legacy .cart-summary-row[class], .th-legacy .cart-summary-row strong { color: inherit; }
.th-legacy #main .cart-summary-row :is(.text-success, [style*="28a745"]) , .th-legacy #main .cart-summary-row.text-success { color: var(--sage) !important; }
.th-legacy #main .fa-times-circle { color: var(--oak) !important; }
.th-legacy #main :is(.cart-total-row, .cart-summary-row) { border-color: var(--line) !important; }
.th-legacy #main .cart-pg img { border-color: var(--line) !important; border-radius: 2px; }
.th-legacy #main button:not(.btn):not([class*="lg-"]):not([class*="sp-"]):not([class*="set-"]):not([class*="pf-"])[style*="background"] { border-radius: var(--r) !important; }
.th-legacy .cart-promo-wrap button { background: var(--walnut) !important; border-color: var(--walnut) !important; color: var(--chalk) !important; border-radius: var(--r) !important; }
.th-legacy .cart-promo-wrap button * , .th-legacy #main .cart-summary-row button { color: inherit; }
.th-legacy #main .cart-summary-row button { color: var(--oak) !important; }
.th-legacy #main label { text-transform: none !important; letter-spacing: .005em !important; }
.th-legacy #main label + .text-danger, .th-legacy #main label .text-danger, .th-legacy #main .required-star { color: #8E3B2E !important; }
.th-legacy #main :is(input[type=radio], input[type=checkbox]) { accent-color: var(--walnut); }
.th-legacy #main :is(.address-box, .cart-address-box, [class*="addr"]) { background: var(--plaster) !important; border-color: var(--line) !important; }

/* breadcrumb strip under the title band: dark bar -> quiet line */
.th-legacy .container.breadcrumbs { background: transparent !important; border-bottom: 1px solid var(--line) !important; }
.th-legacy .breadcrumbs .arrows { padding: 12px 20px !important; }
.th-legacy .breadcrumbs .arrows li { font-weight: 500 !important; letter-spacing: 0 !important; }
.th-legacy .breadcrumbs .arrows li + li::before { color: var(--ctl) !important; content: '/' !important; }
.th-legacy header.masthead .intro-text[style] { padding-top: 0 !important; padding-bottom: 0 !important; }

/* create account */
.th-legacy .ca-header { background: var(--walnut) !important; }
.th-legacy .ca-header * { color: var(--chalk) !important; }
.th-legacy .ca-btn-primary, .th-legacy .ca-btn-primary * { color: var(--walnut) !important; }

/* old product pages (canvas / frame / wood tiles) */
.th-legacy .pk { color: var(--oak) !important; }
.th-legacy .pv, .th-legacy summary.faq-q { color: var(--walnut) !important; }
.th-legacy .j-icon { color: var(--ochre) !important; }
.th-legacy .pdet2-code-price { color: var(--walnut) !important; }
.th-legacy #main [style*="1a3050"], .th-legacy #main strong[style*="background"] { background: var(--walnut) !important; color: var(--chalk) !important; }
.th-legacy #main .spf__note, .th-legacy #main small { color: var(--oak); }
.th-legacy #main :is(.pdet2-code-label, .pdet2-price-row, .spf) strong { background: var(--walnut) !important; color: var(--chalk) !important; }

/* ── Split Print in the theme (owner, 2 Nov 2026): Photiles yellow marks what is selected, not green;
      no gap left for the old fixed menu ── */
.th-legacy .sp-app { margin-top: 0 !important; height: calc(100vh - 106px) !important; font-family: var(--sans) !important; background: var(--chalk) !important; }
@media (max-width: 960px) { .th-legacy .sp-app { height: calc(100vh - 96px) !important; } }
@media (max-width: 800px) { .th-legacy .sp-app { height: auto !important; } }
.th-legacy .sp-cell.sp-selected::after { border-color: var(--yellow) !important; border-width: 3px !important; }
.th-legacy .sp-canvas-wrap.sp-adjusting { outline-color: var(--yellow) !important; }
.th-legacy :is(.sp-upload-zone:hover, .sp-upload-zone.dragover, .sp-upload-zone.has-image) { border-color: var(--yellow) !important; background: #FBF6E4 !important; }
.th-legacy :is(.sp-lib-thumb:hover, .sp-lib-thumb.sp-lib-active) { border-color: var(--yellow) !important; }
.th-legacy :is(.sp-carousel-arrow:hover, .sp-lib-open:hover) { border-color: var(--walnut) !important; color: var(--walnut) !important; }
.th-legacy .sp-bar-count strong { color: var(--walnut) !important; }
.th-legacy .sp-adjust-btn.active, .th-legacy .sp-adjust-btn.active:hover { background: var(--yellow) !important; border-color: var(--yellow) !important; color: var(--walnut) !important; }
.th-legacy .sp-app :is(input[type=radio], input[type=checkbox], input[type=range]) { accent-color: var(--walnut); }

/* Wall art (ready-to-print listing): the same width as every other page, not edge to edge */
.th-legacy.collections #main > .container-fluid, .th-legacy.collections #main .container-fluid.px-3 { max-width: var(--wrap); width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; padding-left: 0 !important; padding-right: 0 !important; }

/* the collections' SEO landings (product/parts/*) are designed pieces with light type on photographs: they keep their own
   colours and headings; only the body font is the theme's (2 Nov 2026) */

/* collection FAQs (.faq-accordion, all 13 collections): the theme's own FAQ — plain rows on hairlines, a chevron */
.th-legacy [class*="-faq-title"] { font-family: var(--serif) !important; font-variation-settings: "SOFT" 20, "WONK" 0; font-weight: 400 !important; font-size: clamp(28px, 1vw + 22px, 38px) !important; letter-spacing: -.01em; color: var(--walnut) !important; text-transform: none !important; margin-bottom: 14px !important; }
.th-legacy .faq-accordion .card, .th-legacy #main .faq-accordion .card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; }
.th-legacy .faq-accordion .card:first-child { border-top: 1px solid var(--line) !important; }
.th-legacy .faq-accordion .card-header, .th-legacy #main .faq-accordion .card-header { background: transparent !important; border: 0 !important; padding: 0 !important; }
.th-legacy .faq-accordion .faq-question { font-family: var(--sans) !important; font-weight: 600 !important; font-size: 16px !important; color: var(--walnut) !important; padding: 18px 34px 18px 0 !important; position: relative; outline: none; box-shadow: none !important; border: 0 !important; background: none !important; }
.th-legacy .faq-accordion .faq-question:focus-visible { outline: 2px solid var(--walnut) !important; outline-offset: 2px; }
.th-legacy .faq-accordion .faq-question:hover { color: var(--walnut) !important; text-decoration: underline; text-underline-offset: 4px; }
.th-legacy .faq-accordion .faq-icon { position: absolute !important; right: 6px; top: 50%; width: 10px !important; height: 10px !important; background: none !important; border-radius: 0 !important; border-right: 1.5px solid var(--walnut); border-bottom: 1.5px solid var(--walnut); transform: translateY(-70%) rotate(45deg) !important; transition: transform .2s; }
.th-legacy .faq-accordion .faq-icon i { display: none !important; }
.th-legacy .faq-accordion .faq-question[aria-expanded="true"] .faq-icon { transform: translateY(-30%) rotate(-135deg) !important; }
.th-legacy .faq-accordion .card-body { padding: 0 0 18px !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--oak) !important; background: transparent !important; max-width: 46em; }
.th-legacy .ca-wrap, .th-legacy .lg-wrap, .th-legacy .portal-wrap { background: var(--chalk) !important; }