/*
Theme Name: RoomMuse
Theme URI: https://roommuse.209.250.232.5.nip.io/
Author: RoomMuse
Description: Warm Bootstrap-based landing theme for AI room-matched wall art.
Version: 2.0.1
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: roommuse
*/

:root {
      --ivory: #faf7f2;
      --paper: #fffdf9;
      --linen: #efe7dc;
      --stone: #d8cec1;
      --charcoal: #25211d;
      --gray: #6f665d;
      --taupe: #9a8d80;
      --terracotta: #b86f52;
      --clay: #c68e70;
      --olive: #7d846a;
      --espresso: #3a2e27;
      --sage: #dfe5d5;
      --shadow: 0 24px 70px rgba(58, 46, 39, .12);
    }

    body {
      background: var(--ivory);
      color: var(--charcoal);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    h1, h2, h3, .brand {
      font-family: Fraunces, Georgia, serif;
      letter-spacing: 0;
    }

    h1 {
      font-size: clamp(3rem, 7vw, 6.8rem);
      line-height: .92;
    }

    h2 {
      font-size: clamp(2.2rem, 4vw, 4.25rem);
      line-height: 1;
    }

    .text-soft { color: var(--gray); }
    .bg-paper { background: var(--paper); }
    .bg-linen { background: var(--linen); }
    .rounded-xl { border-radius: 28px; }
    .shadow-soft { box-shadow: var(--shadow); }
    .ms-n2 { margin-left: -.5rem; }

    .navbar {
      background: rgba(250, 247, 242, .88);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(58, 46, 39, .08);
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      color: var(--paper);
      background: var(--espresso);
      border-radius: 14px;
    }

    .btn-main {
      --bs-btn-bg: var(--espresso);
      --bs-btn-border-color: var(--espresso);
      --bs-btn-hover-bg: #251b16;
      --bs-btn-hover-border-color: #251b16;
      --bs-btn-color: #fffdf9;
      --bs-btn-hover-color: #fffdf9;
      border-radius: 999px;
      padding: .9rem 1.35rem;
      font-weight: 700;
    }

    .btn-ghost {
      border: 1px solid rgba(58, 46, 39, .18);
      color: var(--espresso);
      background: rgba(255, 253, 249, .7);
      border-radius: 999px;
      padding: .9rem 1.35rem;
      font-weight: 700;
    }

    .btn-ghost:hover {
      border-color: var(--espresso);
      background: var(--paper);
      color: var(--espresso);
    }

    .hero {
      position: relative;
      min-height: 92vh;
      padding: 8rem 0 3.5rem;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(37, 29, 24, .82) 0%, rgba(58, 46, 39, .66) 38%, rgba(58, 46, 39, .18) 74%),
        linear-gradient(0deg, rgba(250, 247, 242, .12), rgba(250, 247, 242, .12)),
        url("assets/ai-room-wall-art-hero.png") center/cover;
      color: var(--paper);
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 120px;
      background: linear-gradient(to bottom, transparent, var(--ivory));
      pointer-events: none;
    }

    .hero > .container {
      position: relative;
      z-index: 1;
    }

    .hero-panel .text-soft {
      color: rgba(255, 253, 249, .78);
    }

    .hero-panel {
      max-width: 760px;
      padding-top: 3rem;
    }

    .hero-visual {
      position: relative;
      min-height: 520px;
    }

    .room-photo {
      width: 100%;
      height: 610px;
      object-fit: cover;
      border-radius: 36px;
      box-shadow: var(--shadow);
    }

    .floating-card {
      position: absolute;
      background: rgba(255, 253, 249, .9);
      border: 1px solid rgba(58, 46, 39, .08);
      backdrop-filter: blur(14px);
      box-shadow: 0 18px 45px rgba(58, 46, 39, .13);
      border-radius: 22px;
      color: var(--charcoal);
    }

    .hero .floating-card .text-soft {
      color: var(--gray);
    }

    .palette-card {
      left: 0;
      bottom: 48px;
      padding: 1rem;
    }

    .art-options {
      right: 0;
      top: 86px;
      padding: .8rem;
      width: 210px;
    }

    .hero-process {
      left: 0;
      top: 86px;
      padding: 1rem;
      max-width: 300px;
    }

    .hero-proof {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .75rem;
      padding: .7rem .95rem;
      border-radius: 999px;
      background: rgba(255, 253, 249, .14);
      border: 1px solid rgba(255, 253, 249, .22);
      backdrop-filter: blur(14px);
      color: rgba(255, 253, 249, .88);
    }

    .art-thumb {
      height: 82px;
      border-radius: 14px;
      background:
        radial-gradient(circle at 25% 25%, rgba(184, 111, 82, .75), transparent 30%),
        radial-gradient(circle at 70% 35%, rgba(125, 132, 106, .65), transparent 28%),
        linear-gradient(135deg, #f3e6d8, #d9c6b4);
      border: 8px solid #fffaf3;
      box-shadow: inset 0 0 0 1px rgba(58, 46, 39, .08);
    }

    .art-thumb:nth-child(2) {
      background:
        linear-gradient(120deg, transparent 42%, rgba(58, 46, 39, .18) 42% 48%, transparent 48%),
        radial-gradient(circle at 30% 68%, rgba(198, 142, 112, .9), transparent 26%),
        linear-gradient(145deg, #f8efe7, #dfe5d5);
    }

    .art-thumb:nth-child(3) {
      background:
        radial-gradient(circle at 72% 70%, rgba(58, 46, 39, .5), transparent 18%),
        radial-gradient(circle at 26% 30%, rgba(125, 132, 106, .8), transparent 30%),
        linear-gradient(135deg, #f1e5d7, #cbbba9);
    }

    .commerce-shell {
      padding: 8.5rem 0 5rem;
      min-height: 80vh;
      background: var(--ivory);
    }

    .woocommerce .woocommerce-breadcrumb {
      margin-bottom: 1.25rem;
      color: var(--gray);
    }

    .woocommerce .woocommerce-products-header__title,
    .woocommerce div.product .product_title {
      font-family: Fraunces, Georgia, serif;
      color: var(--charcoal);
    }

    .woocommerce ul.products li.product,
    .woocommerce div.product .summary,
    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
      border-radius: 22px;
    }

    .woocommerce ul.products li.product {
      background: var(--paper);
      border: 1px solid rgba(58, 46, 39, .08);
      padding: 1rem 1rem 1.15rem;
      box-shadow: 0 18px 45px rgba(58, 46, 39, .08);
    }

    .woocommerce ul.products li.product a img {
      border-radius: 16px;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background: var(--linen);
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
      color: var(--charcoal);
      font-family: Inter, system-ui, sans-serif;
      font-size: 1rem;
      font-weight: 800;
      line-height: 1.25;
    }

    .woocommerce ul.products li.product .price,
    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
      color: var(--espresso);
      font-weight: 800;
    }

    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .woocommerce button.single_add_to_cart_button {
      background: var(--espresso);
      color: var(--paper);
      border-radius: 999px;
      font-weight: 800;
      padding: .85rem 1.15rem;
    }

    .woocommerce a.button:hover,
    .woocommerce button.button:hover,
    .woocommerce input.button:hover,
    .woocommerce #respond input#submit:hover,
    .woocommerce button.single_add_to_cart_button:hover {
      background: #251b16;
      color: var(--paper);
    }

    .chip {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 3px solid rgba(255, 253, 249, .9);
      box-shadow: 0 6px 16px rgba(58, 46, 39, .12);
    }

    .section-pad { padding: 6rem 0; }

    .step-card,
    .style-card,
    .product-card,
    .use-card,
    .faq-card {
      background: var(--paper);
      border: 1px solid rgba(58, 46, 39, .08);
      border-radius: 8px;
      box-shadow: 0 14px 45px rgba(58, 46, 39, .06);
    }

    .icon-pill {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: var(--linen);
      color: var(--terracotta);
      font-size: 1.35rem;
    }

    .upload-box {
      background:
        linear-gradient(145deg, rgba(255, 253, 249, .94), rgba(239, 231, 220, .88)),
        radial-gradient(circle at 85% 10%, rgba(184, 111, 82, .16), transparent 35%);
      border: 1px solid rgba(58, 46, 39, .1);
      border-radius: 16px;
      box-shadow: var(--shadow);
    }

    .drop-zone {
      border: 2px dashed rgba(184, 111, 82, .45);
      border-radius: 26px;
      background: rgba(255, 253, 249, .7);
      min-height: 210px;
      display: grid;
      place-items: center;
      text-align: center;
      transition: .2s ease;
    }

    .drop-zone:hover {
      border-color: var(--terracotta);
      transform: translateY(-2px);
    }

    .drop-zone.is-dragging,
    .drop-zone.has-file {
      border-color: var(--terracotta);
      background: rgba(255, 253, 249, .9);
      box-shadow: inset 0 0 0 1px rgba(184, 111, 82, .18);
    }

    .surprise-toggle {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: .75rem;
      align-items: start;
      padding: 1rem;
      border: 1px solid rgba(58, 46, 39, .1);
      border-radius: 8px;
      background: rgba(255, 253, 249, .72);
      cursor: pointer;
    }

    .surprise-toggle strong,
    .surprise-toggle small {
      display: block;
    }

    .surprise-toggle small {
      color: var(--gray);
      font-weight: 700;
    }

    .surprise-toggle .form-check-input {
      margin-top: .2rem;
    }

    .wizard-panel.has-surprise-mode textarea {
      background: rgba(239, 231, 220, .55);
      color: var(--gray);
    }

    .wizard-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
      gap: .65rem;
    }

    .wizard-step {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      min-height: 48px;
      border: 1px solid rgba(58, 46, 39, .12);
      border-radius: 8px;
      background: rgba(255, 253, 249, .72);
      color: var(--gray);
      font-weight: 700;
      transition: .18s ease;
    }

    .wizard-step span {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: var(--linen);
      color: var(--espresso);
      font-size: .85rem;
    }

    .wizard-step.is-active {
      border-color: rgba(184, 111, 82, .55);
      background: #fffaf3;
      color: var(--charcoal);
      box-shadow: 0 12px 28px rgba(58, 46, 39, .08);
    }

    .wizard-step.is-active span,
    .wizard-step.is-complete span {
      background: var(--terracotta);
      color: #fffaf3;
    }

    .wizard-panel {
      display: none;
    }

    .wizard-panel.is-active {
      display: block;
    }

    .wizard-panel-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .style-choice-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .85rem;
      max-height: 545px;
      overflow: auto;
      padding-right: .25rem;
    }

    .choice-card,
    .ratio-card {
      position: relative;
      cursor: pointer;
      border: 1px solid rgba(58, 46, 39, .1);
      border-radius: 8px;
      background: rgba(255, 253, 249, .82);
      transition: .18s ease;
      overflow: hidden;
    }

    .choice-card input,
    .ratio-card input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .choice-card img {
      display: block;
      width: 100%;
      aspect-ratio: 1 / .72;
      object-fit: cover;
      background: var(--linen);
    }

    .choice-card span {
      display: block;
      padding: .72rem .8rem;
      color: var(--charcoal);
      font-weight: 800;
      line-height: 1.2;
    }

    .choice-card:hover,
    .ratio-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 32px rgba(58, 46, 39, .11);
    }

    .choice-card:has(input:checked),
    .ratio-card:has(input:checked) {
      border-color: var(--terracotta);
      box-shadow: 0 0 0 3px rgba(184, 111, 82, .16);
      background: #fffaf3;
    }

    .ratio-choice-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .85rem;
    }

    .print-size-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .9rem;
    }

    .ratio-preview-card {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: .75rem 1rem;
      padding: 1rem;
      border: 1px solid rgba(58, 46, 39, .1);
      border-radius: 8px;
      background: rgba(255, 253, 249, .82);
    }

    .ratio-preview-card strong,
    .ratio-preview-card small {
      display: block;
    }

    .ratio-preview-card small {
      color: var(--gray);
      font-weight: 700;
    }

    .ratio-card {
      display: grid;
      gap: .45rem;
      justify-items: center;
      padding: 1rem .75rem;
      text-align: center;
    }

    .ratio-card strong {
      color: var(--charcoal);
      line-height: 1.1;
    }

    .ratio-card small {
      color: var(--gray);
      font-weight: 700;
    }

    .ratio-thumb {
      display: grid;
      place-items: center;
      border: 8px solid #fffaf3;
      background:
        linear-gradient(135deg, rgba(184,111,82,.18), rgba(125,132,106,.22)),
        radial-gradient(circle at 32% 34%, #d8cec1 0 14%, transparent 15%),
        linear-gradient(145deg, #faf7f2, #c68e70);
      box-shadow: 0 14px 28px rgba(58, 46, 39, .13);
    }

    .ratio-square {
      width: 86px;
      aspect-ratio: 1 / 1;
    }

    .ratio-portrait {
      width: 70px;
      aspect-ratio: 2 / 3;
    }

    .ratio-landscape {
      width: 104px;
      aspect-ratio: 3 / 2;
    }

    .ratio-custom {
      width: 56px;
      min-height: 86px;
      max-width: 112px;
      max-height: 132px;
    }

    .wizard-actions .btn {
      min-width: 118px;
    }

    .palette-result {
      min-height: 330px;
    }

    .palette-swatches {
      display: grid;
      gap: .75rem;
    }

    .palette-section {
      padding: 1rem;
      border-radius: 8px;
      border: 1px solid rgba(58, 46, 39, .08);
      background: rgba(250, 247, 242, .55);
    }

    .palette-row {
      display: grid;
      grid-template-columns: 74px 1fr;
      align-items: center;
      gap: 1rem;
      padding: .72rem;
      border: 1px solid rgba(58, 46, 39, .08);
      border-radius: 8px;
      background: rgba(250, 247, 242, .6);
    }

    .palette-swatch {
      width: 74px;
      height: 54px;
      border-radius: 8px;
      border: 4px solid #fffaf3;
      box-shadow: 0 10px 26px rgba(58, 46, 39, .13);
    }

    .palette-prompt {
      padding: 1rem;
      border-radius: 8px;
      background: var(--linen);
      border: 1px solid rgba(58, 46, 39, .08);
    }

    .generated-art-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }

    .generated-art-card {
      --art-ratio: auto;
      margin: 0;
    }

    .generated-art-card:first-child {
      grid-column: auto;
    }

    .generated-art-select {
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      text-align: inherit;
    }

    .generated-art-card img {
      display: block;
      width: 100%;
      aspect-ratio: var(--art-ratio);
      max-height: 560px;
      object-fit: contain;
      border-radius: 8px;
      border: 10px solid #fffaf3;
      box-shadow: 0 18px 45px rgba(58, 46, 39, .14);
      background: var(--linen);
    }

    .generated-art-card.is-selected img {
      border-color: var(--terracotta);
      box-shadow: 0 0 0 4px rgba(184, 111, 82, .2), 0 22px 55px rgba(58, 46, 39, .18);
    }

    .generated-art-card figcaption {
      margin-top: .45rem;
      color: var(--gray);
      font-size: .85rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
    }

    .generated-art-card figcaption .btn {
      padding: .38rem .65rem;
      font-size: .78rem;
      white-space: nowrap;
    }

    .generated-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: .35rem;
    }

    .upscale-link {
      color: var(--terracotta);
      font-size: .78rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .element-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .75rem;
    }

    .element-group {
      padding: .85rem;
      border-radius: 8px;
      background: var(--paper);
      border: 1px solid rgba(58, 46, 39, .08);
    }

    .mini-swatch-list {
      display: flex;
      align-items: center;
    }

    .mini-swatch {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 3px solid #fffaf3;
      box-shadow: 0 8px 18px rgba(58, 46, 39, .12);
    }

    .mini-swatch + .mini-swatch {
      margin-left: -.45rem;
    }

    .sample-room {
      min-height: 330px;
      border-radius: 26px;
      background:
        linear-gradient(to bottom, rgba(250, 247, 242, .15), rgba(58, 46, 39, .28)),
        url("assets/ai-room-wall-art-hero.png") center/cover;
      position: relative;
      overflow: hidden;
    }

    .creator-page {
      background:
        radial-gradient(circle at 86% 8%, rgba(184, 111, 82, .14), transparent 30%),
        var(--ivory);
      min-height: 100vh;
    }

    .creator-shell {
      padding-top: 8.5rem;
    }

    .creator-title {
      font-size: clamp(2.8rem, 6vw, 5.5rem);
    }

    .creator-card {
      max-width: 1180px;
      margin: 0 auto;
    }

    .creator-style-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      max-height: none;
      overflow: visible;
    }

    .creator-size-grid {
      max-width: 760px;
      margin: 0 auto;
    }

    .creator-generated-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: start;
    }

    .empty-generation-state {
      border: 1px dashed rgba(58, 46, 39, .14);
    }

    .art-lightbox {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: none;
      place-items: center;
      padding: 2rem;
      background: rgba(37, 33, 29, .84);
      backdrop-filter: blur(10px);
    }

    .art-lightbox.is-open {
      display: grid;
    }

    .art-lightbox img {
      display: block;
      max-width: min(94vw, 1200px);
      max-height: 88vh;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
      background: var(--paper);
    }

    .lightbox-close {
      position: absolute;
      top: 1.25rem;
      right: 1.25rem;
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: var(--paper);
      color: var(--espresso);
    }

    .frame-preview-stage {
      min-height: 560px;
      display: grid;
      place-items: center;
      padding: 2rem;
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(255,253,249,.94), rgba(239,231,220,.78)),
        radial-gradient(circle at 22% 18%, rgba(125,132,106,.14), transparent 30%);
      border: 1px solid rgba(58, 46, 39, .08);
    }

    .frame-preview {
      position: relative;
      width: min(100%, 430px);
      aspect-ratio: 4 / 5.65;
      padding: 11.5%;
      background: var(--frame-face);
      box-shadow:
        0 30px 70px rgba(58, 46, 39, .22),
        inset 0 0 0 1px rgba(255, 255, 255, .42),
        inset 0 0 0 8px rgba(255, 255, 255, .08);
      isolation: isolate;
      transition: background .2s ease, box-shadow .2s ease;
    }

    .frame-preview::before {
      content: "";
      position: absolute;
      inset: 3.8%;
      border: 1px solid rgba(255, 255, 255, .38);
      box-shadow:
        inset 0 0 0 1px rgba(58, 46, 39, .2),
        inset 0 8px 16px rgba(255, 255, 255, .18),
        inset 0 -10px 20px rgba(0, 0, 0, .2);
      pointer-events: none;
      z-index: 3;
    }

    .frame-preview::after {
      content: "";
      position: absolute;
      inset: 10.8%;
      border: 1px solid rgba(58, 46, 39, .2);
      box-shadow:
        0 0 0 2px rgba(255, 253, 249, .28),
        inset 0 10px 18px rgba(0, 0, 0, .12);
      pointer-events: none;
      z-index: 4;
    }

    .frame-preview-art,
    .frame-preview-mat,
    .frame-preview-overlay,
    .frame-preview-frame,
    .frame-preview-glass {
      position: absolute;
      display: block;
    }

    .frame-preview-art {
      inset: 11.5%;
      width: 77%;
      height: 77%;
      object-fit: cover;
      z-index: 1;
      background: var(--linen);
    }

    .frame-preview-frame {
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.22), transparent 16% 84%, rgba(0,0,0,.18)),
        repeating-linear-gradient(90deg, var(--grain-a) 0 2px, var(--grain-b) 2px 5px, var(--grain-c) 5px 8px);
      mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      padding: 11.5%;
      mask-composite: exclude;
      -webkit-mask-composite: xor;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .34),
        inset 0 0 0 10px rgba(255, 255, 255, .06),
        inset 0 0 24px rgba(0, 0, 0, .16);
    }

    .frame-preview-glass {
      inset: 11.5%;
      z-index: 5;
      pointer-events: none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.22) 0 12%, transparent 13% 64%, rgba(255,255,255,.13) 65% 70%, transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 38%);
      mix-blend-mode: screen;
      opacity: .65;
    }

    .frame-preview-overlay {
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      z-index: 6;
      pointer-events: none;
      display: none;
    }

    .frame-preview[data-frame="black"],
    .frame-swatch-black {
      --frame-face: #171513;
      --grain-a: #050505;
      --grain-b: #1c1a17;
      --grain-c: #2a2824;
    }

    .frame-preview[data-frame="white"],
    .frame-swatch-white {
      --frame-face: #f2eee7;
      --grain-a: #fffdf9;
      --grain-b: #e4dfd6;
      --grain-c: #f8f4ed;
    }

    .frame-preview[data-frame="natural"],
    .frame-swatch-natural {
      --frame-face: #c7ad84;
      --grain-a: #d8c49c;
      --grain-b: #a98f67;
      --grain-c: #ead9b7;
    }

    .frame-preview[data-frame="antique-gold"],
    .frame-swatch-antique-gold {
      --frame-face: #c49a43;
      --grain-a: #e6c673;
      --grain-b: #9f7629;
      --grain-c: #f1d98c;
    }

    .frame-preview[data-frame="antique-silver"],
    .frame-swatch-antique-silver {
      --frame-face: #c7c8c4;
      --grain-a: #efefea;
      --grain-b: #9d9f9c;
      --grain-c: #d7d8d4;
    }

    .frame-preview[data-frame="brown"],
    .frame-swatch-brown {
      --frame-face: #69402a;
      --grain-a: #8a5637;
      --grain-b: #452619;
      --grain-c: #754b32;
    }

    .frame-preview[data-frame="dark-grey"],
    .frame-swatch-dark-grey {
      --frame-face: #4f626a;
      --grain-a: #687a82;
      --grain-b: #334248;
      --grain-c: #5a6e77;
    }

    .frame-preview[data-frame="light-grey"],
    .frame-swatch-light-grey {
      --frame-face: #b4b8ac;
      --grain-a: #d0d4c9;
      --grain-b: #8d9488;
      --grain-c: #c2c6bb;
    }

    .frame-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .75rem;
    }

    .analysis-palette-panel,
    .room-analysis-card {
      border: 1px solid rgba(58, 46, 39, .08);
    }

    .room-analysis-card.is-info {
      color: var(--warm-gray);
      background: rgba(239, 231, 220, .75) !important;
    }

    .room-analysis-card.is-success {
      color: #31533a;
      background: rgba(125, 132, 106, .16) !important;
    }

    .room-analysis-card.is-error {
      color: #7b2d22;
      background: rgba(184, 111, 82, .16) !important;
    }

    .analysis-palette-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: .75rem;
    }

    .palette-choice {
      display: grid;
      grid-template-columns: 42px 1fr;
      align-items: center;
      gap: .75rem;
      padding: .65rem;
      border: 1px solid rgba(58, 46, 39, .1);
      border-radius: 8px;
      background: rgba(255, 253, 249, .82);
      color: var(--charcoal);
      text-align: left;
    }

    .palette-choice.is-selected {
      border-color: var(--terracotta);
      box-shadow: 0 0 0 3px rgba(184, 111, 82, .16);
      background: #fffaf3;
    }

    .palette-choice-swatch {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      box-shadow: inset 0 0 0 1px rgba(58, 46, 39, .14);
    }

    .palette-choice strong,
    .palette-choice small {
      display: block;
    }

    .palette-choice small {
      color: var(--warm-gray);
      margin-top: .05rem;
    }

    .prompt-ideas-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .85rem;
    }

    .prompt-idea-card {
      min-height: 128px;
      padding: 1rem;
      border: 1px solid rgba(58, 46, 39, .1);
      border-radius: 8px;
      background: rgba(255, 253, 249, .82);
      color: var(--charcoal);
      text-align: left;
      transition: .18s ease;
    }

    .prompt-idea-card:hover,
    .prompt-idea-card.is-selected {
      border-color: var(--terracotta);
      box-shadow: 0 0 0 3px rgba(184, 111, 82, .16);
      background: #fffaf3;
    }

    .prompt-idea-card strong,
    .prompt-idea-card span {
      display: block;
    }

    .prompt-idea-card strong {
      font-weight: 850;
      margin-bottom: .45rem;
    }

    .prompt-idea-card span {
      color: var(--warm-gray);
      font-size: .9rem;
      line-height: 1.35;
    }

    .choice-card {
      position: relative;
    }

    .recommendation-badge {
      position: absolute;
      top: .75rem;
      left: .75rem;
      padding: .28rem .55rem;
      border-radius: 999px;
      background: rgba(255, 253, 249, .92);
      color: var(--terracotta);
      font-size: .72rem;
      font-weight: 800;
      box-shadow: 0 8px 18px rgba(58, 46, 39, .1);
    }

    .frame-option {
      display: grid;
      grid-template-columns: 54px 1fr;
      align-items: center;
      gap: .75rem;
      padding: .7rem;
      border: 1px solid rgba(58, 46, 39, .1);
      border-radius: 8px;
      background: rgba(255, 253, 249, .82);
      color: var(--charcoal);
      font-weight: 800;
      text-align: left;
      transition: .18s ease;
    }

    .frame-option:hover,
    .frame-option.is-selected {
      border-color: var(--terracotta);
      box-shadow: 0 0 0 3px rgba(184, 111, 82, .16);
      background: #fffaf3;
    }

    .frame-option-thumb {
      width: 54px;
      height: 70px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.2), transparent 70%),
        repeating-linear-gradient(90deg, var(--grain-a) 0 2px, var(--grain-b) 2px 5px, var(--grain-c) 5px 8px);
      overflow: hidden;
      box-shadow:
        inset 0 0 0 8px var(--frame-face),
        inset 0 0 0 13px rgba(255, 253, 249, .82);
    }

    .frame-option-thumb img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .frame-preview {
      aspect-ratio: var(--frame-aspect, 1086 / 1448);
      padding: 0;
      background: transparent;
      box-shadow: 0 32px 75px rgba(58, 46, 39, .18);
    }

    .frame-preview::before,
    .frame-preview::after,
    .frame-preview-frame,
    .frame-preview-glass {
      display: none;
    }

    .frame-preview-art {
      right: auto;
      bottom: auto;
      left: var(--frame-art-left, 7.6%);
      top: var(--frame-art-top, 5.6%);
      width: var(--frame-art-width, 84.8%);
      height: var(--frame-art-height, 88.7%);
      object-fit: cover;
      object-position: center center;
      z-index: 1;
      user-select: none;
    }

    .frame-preview-mat {
      display: none;
      right: auto;
      bottom: auto;
      left: var(--frame-mat-left, 7.6%);
      top: var(--frame-mat-top, 5.6%);
      width: var(--frame-mat-width, 84.8%);
      height: var(--frame-mat-height, 88.7%);
      background:
        linear-gradient(135deg, rgba(255,255,255,.55), transparent 36%),
        #fbfaf6;
      box-shadow:
        inset 0 0 0 1px rgba(58, 46, 39, .08),
        inset 0 10px 22px rgba(255,255,255,.7),
        inset 0 -12px 22px rgba(58,46,39,.06);
      z-index: 1;
      pointer-events: none;
    }

    .frame-preview.has-mount-mat .frame-preview-mat {
      display: block;
    }

    .frame-preview.has-mount-mat .frame-preview-art {
      box-shadow:
        0 8px 18px rgba(58, 46, 39, .14),
        0 0 0 1px rgba(58, 46, 39, .12);
      z-index: 2;
    }

    .frame-preview-overlay {
      display: block;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      z-index: 3;
    }

    .mount-toggle {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: .75rem;
      align-items: start;
      padding: .9rem 1rem;
      border: 1px solid rgba(58, 46, 39, .1);
      border-radius: 8px;
      background: rgba(255, 253, 249, .82);
      cursor: pointer;
    }

    .mount-toggle .form-check-input {
      margin-top: .22rem;
      border-color: rgba(58, 46, 39, .34);
    }

    .mount-toggle .form-check-input:checked {
      background-color: var(--terracotta);
      border-color: var(--terracotta);
    }

    .mount-toggle strong,
    .mount-toggle small {
      display: block;
    }

    .mount-toggle strong {
      color: var(--charcoal);
      font-weight: 800;
    }

    .mount-toggle small {
      color: var(--warm-gray);
      margin-top: .1rem;
      line-height: 1.35;
    }

    .frame-option-thumb {
      background: rgba(250, 247, 242, .9);
      box-shadow: inset 0 0 0 1px rgba(58, 46, 39, .08);
    }

    .frame-option-thumb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .creation-share-card {
      border: 1px solid rgba(58, 46, 39, .08);
      box-shadow: 0 12px 30px rgba(58, 46, 39, .06);
    }

    .creation-share-card .form-control {
      font-size: .86rem;
      color: var(--warm-gray);
      background: #fffdf9;
    }

    .sandbox-order-card {
      border: 1px solid rgba(58, 46, 39, .08);
      box-shadow: 0 12px 30px rgba(58, 46, 39, .06);
    }

    .sandbox-order-status {
      padding: .75rem .85rem;
      border-radius: 8px;
      line-height: 1.35;
    }

    .sandbox-order-status.is-info {
      color: var(--warm-gray);
      background: rgba(239, 231, 220, .75);
    }

    .sandbox-order-status.is-success {
      color: #31533a;
      background: rgba(125, 132, 106, .16);
    }

    .sandbox-order-status.is-error {
      color: #7b2d22;
      background: rgba(184, 111, 82, .16);
    }

    .commerce-shell {
      min-height: 100vh;
      padding: 8.25rem 0 5rem;
      background:
        linear-gradient(180deg, rgba(250, 247, 242, .92), rgba(255, 253, 249, .98) 42%),
        var(--ivory);
    }

    .commerce-shell .container {
      max-width: 1160px;
    }

    .commerce-shell .entry-title,
    .commerce-shell h1,
    .commerce-shell h2,
    .commerce-shell h3 {
      color: var(--charcoal);
      font-family: 'Fraunces', serif;
      letter-spacing: 0;
    }

    .commerce-shell h1,
    .commerce-shell .cart_totals h2,
    .commerce-shell #order_review_heading {
      margin-bottom: 1.15rem;
      font-size: clamp(2rem, 4vw, 3.25rem);
      line-height: .98;
    }

    .commerce-shell .woocommerce {
      color: var(--charcoal);
    }

    .commerce-shell .woocommerce-notices-wrapper,
    .commerce-shell .wc-empty-cart-message {
      margin-bottom: 1.25rem;
    }

    .commerce-shell .woocommerce-info,
    .commerce-shell .woocommerce-message,
    .commerce-shell .woocommerce-error {
      border: 1px solid rgba(58, 46, 39, .1);
      border-radius: 8px;
      background: rgba(255, 253, 249, .9);
      box-shadow: 0 14px 36px rgba(58, 46, 39, .06);
      color: var(--warm-gray);
      line-height: 1.45;
    }

    .commerce-shell .woocommerce-info::before,
    .commerce-shell .woocommerce-message::before {
      color: var(--terracotta);
    }

    .commerce-shell .cart-empty {
      padding: 1.1rem 1.25rem 1.1rem 3.2rem;
    }

    .commerce-shell .return-to-shop .button,
    .commerce-shell .button,
    .commerce-shell button.button,
    .commerce-shell input.button,
    .commerce-shell #place_order,
    .commerce-shell .wc-proceed-to-checkout a.checkout-button {
      min-height: 46px;
      border: 0;
      border-radius: 999px;
      background: var(--espresso);
      color: var(--paper);
      font-weight: 800;
      line-height: 1.1;
      padding: .92rem 1.35rem;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .commerce-shell .button:hover,
    .commerce-shell button.button:hover,
    .commerce-shell input.button:hover,
    .commerce-shell #place_order:hover,
    .commerce-shell .wc-proceed-to-checkout a.checkout-button:hover {
      background: var(--terracotta);
      color: #fff;
      box-shadow: 0 14px 30px rgba(184, 111, 82, .22);
      transform: translateY(-1px);
    }

    .commerce-shell .button:disabled,
    .commerce-shell button.button:disabled,
    .commerce-shell input.button:disabled {
      background: rgba(58, 46, 39, .28);
      color: rgba(255, 253, 249, .85);
      transform: none;
      box-shadow: none;
    }

    .commerce-shell table.shop_table {
      overflow: hidden;
      border: 1px solid rgba(58, 46, 39, .08);
      border-collapse: separate;
      border-radius: 8px;
      background: var(--paper);
      box-shadow: 0 20px 56px rgba(58, 46, 39, .08);
    }

    .commerce-shell table.shop_table th,
    .commerce-shell table.shop_table td {
      border-color: rgba(58, 46, 39, .08);
      padding: 1.1rem 1rem;
      vertical-align: middle;
    }

    .commerce-shell table.shop_table th {
      color: var(--warm-gray);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      background: rgba(239, 231, 220, .42);
    }

    .commerce-shell .woocommerce-cart-form .product-thumbnail img {
      width: 92px;
      border-radius: 8px;
      background: var(--ivory);
      box-shadow: 0 12px 28px rgba(58, 46, 39, .1);
    }

    .commerce-shell .woocommerce-cart-form .product-thumbnail .roommuse-cart-preview,
    .roommuse-cart-preview {
      position: relative;
      width: 104px;
      aspect-ratio: 1086 / 1448;
      overflow: hidden;
      border-radius: 8px;
      background: #efe7dc;
      box-shadow: 0 16px 34px rgba(58, 46, 39, .14);
      isolation: isolate;
    }

    .commerce-shell .woocommerce-cart-form .product-thumbnail .roommuse-cart-preview img,
    .roommuse-cart-preview img {
      width: auto;
      max-width: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .roommuse-cart-preview-art {
      position: absolute;
      left: 6.2%;
      top: 4.65%;
      z-index: 1;
      width: 87.3% !important;
      height: 90.8% !important;
      object-fit: cover;
      object-position: center;
    }

    .roommuse-cart-preview-mat {
      position: absolute;
      left: 6.2%;
      top: 4.65%;
      z-index: 1;
      display: none;
      width: 87.3%;
      height: 90.8%;
      background: #fbfaf6;
      box-shadow: inset 0 0 0 1px rgba(58, 46, 39, .08);
    }

    .roommuse-cart-preview.has-mat .roommuse-cart-preview-mat {
      display: block;
    }

    .roommuse-cart-preview.has-mat .roommuse-cart-preview-art {
      left: 18%;
      top: 17%;
      z-index: 2;
      width: 64% !important;
      height: 66% !important;
    }

    .roommuse-cart-preview-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain;
      pointer-events: none;
    }

    .commerce-shell .product-name a,
    .commerce-shell .woocommerce-checkout-review-order-table .product-name {
      color: var(--charcoal);
      font-weight: 800;
      text-decoration: none;
    }

    .commerce-shell .product-name a:hover {
      color: var(--terracotta);
    }

    .commerce-shell .variation {
      display: grid;
      gap: .2rem .65rem;
      margin: .55rem 0 0;
      color: var(--warm-gray);
      font-size: .84rem;
      line-height: 1.35;
    }

    .commerce-shell .variation dt {
      margin: 0;
      color: var(--soft-taupe);
      font-weight: 800;
    }

    .commerce-shell .variation dd {
      margin: 0 0 .35rem;
    }

    .commerce-shell .variation a {
      color: var(--terracotta);
      word-break: break-all;
    }

    .commerce-shell .product-remove a.remove {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 999px;
      background: rgba(184, 111, 82, .12);
      color: var(--terracotta) !important;
      font-size: 1.2rem;
      font-weight: 600;
      text-decoration: none;
    }

    .commerce-shell .product-remove a.remove:hover {
      background: var(--terracotta);
      color: #fff !important;
    }

    .commerce-shell .quantity .qty {
      width: 76px;
      min-height: 42px;
      border: 1px solid rgba(58, 46, 39, .14);
      border-radius: 8px;
      background: #fffdf9;
      color: var(--charcoal);
      font-weight: 700;
      text-align: center;
    }

    .commerce-shell .coupon {
      display: flex;
      gap: .75rem;
      align-items: center;
    }

    .commerce-shell .coupon .input-text,
    .commerce-shell .input-text,
    .commerce-shell textarea,
    .commerce-shell select,
    .commerce-shell .select2-container--default .select2-selection--single {
      min-height: 48px;
      border: 1px solid rgba(58, 46, 39, .14);
      border-radius: 8px;
      background: #fffdf9;
      color: var(--charcoal);
      box-shadow: none;
      padding: .78rem .9rem;
    }

    .commerce-shell textarea {
      min-height: 110px;
    }

    .commerce-shell .input-text:focus,
    .commerce-shell textarea:focus,
    .commerce-shell select:focus,
    .commerce-shell .select2-container--open .select2-selection--single {
      border-color: rgba(184, 111, 82, .55);
      outline: 0;
      box-shadow: 0 0 0 .22rem rgba(184, 111, 82, .12);
    }

    .commerce-shell .cart-collaterals {
      margin-top: 1.6rem;
    }

    .commerce-shell .cart_totals,
    .commerce-shell .woocommerce-checkout-review-order,
    .commerce-shell .woocommerce-billing-fields,
    .commerce-shell .woocommerce-shipping-fields,
    .commerce-shell .woocommerce-additional-fields,
    .commerce-shell .woocommerce-form-coupon,
    .commerce-shell .woocommerce-form-login {
      border: 1px solid rgba(58, 46, 39, .08);
      border-radius: 8px;
      background: rgba(255, 253, 249, .92);
      box-shadow: 0 20px 56px rgba(58, 46, 39, .08);
      padding: 1.35rem;
    }

    .commerce-shell .cart_totals {
      width: min(100%, 430px);
    }

    .commerce-shell .cart_totals table,
    .commerce-shell .woocommerce-checkout-review-order table {
      box-shadow: none;
      border-radius: 8px;
      background: transparent;
    }

    .commerce-shell .cart_totals .order-total th,
    .commerce-shell .cart_totals .order-total td,
    .commerce-shell .woocommerce-checkout-review-order .order-total th,
    .commerce-shell .woocommerce-checkout-review-order .order-total td {
      color: var(--charcoal);
      font-size: 1.08rem;
      font-weight: 900;
    }

    .commerce-shell .wc-proceed-to-checkout {
      padding-bottom: 0;
    }

    .commerce-shell .wc-proceed-to-checkout a.checkout-button {
      display: block;
      margin-bottom: 0;
      font-size: 1rem;
      text-align: center;
    }

    body.woocommerce-checkout .commerce-shell form.checkout.woocommerce-checkout,
    .commerce-shell form.checkout {
      display: grid !important;
      grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
      gap: 1.5rem !important;
      align-items: start !important;
    }

    body.woocommerce-checkout .commerce-shell form.checkout > .col2-set,
    .commerce-shell form.checkout > .col2-set {
      grid-column: 1 !important;
      grid-row: 1 / span 2 !important;
      width: auto !important;
      max-width: none !important;
      float: none !important;
      clear: none !important;
    }

    body.woocommerce-checkout .commerce-shell form.checkout #order_review_heading,
    .commerce-shell form.checkout #order_review_heading {
      grid-column: 2 !important;
      grid-row: 1 !important;
      width: auto !important;
      max-width: none !important;
      margin: 0 0 .75rem !important;
      float: none !important;
      clear: none !important;
      font-size: 1.7rem;
      align-self: start;
    }

    body.woocommerce-checkout .commerce-shell form.checkout #order_review,
    .commerce-shell form.checkout #order_review {
      grid-column: 2 !important;
      grid-row: 1 !important;
      width: auto !important;
      max-width: none !important;
      margin-top: 3.25rem !important;
      float: none !important;
      clear: none !important;
      align-self: start;
    }

    .commerce-shell .col2-set .col-1,
    .commerce-shell .col2-set .col-2 {
      display: block;
      flex: none;
      float: none !important;
      width: 100% !important;
      max-width: none !important;
    }

    .commerce-shell .woocommerce-billing-fields h3,
    .commerce-shell .woocommerce-additional-fields h3 {
      margin-bottom: 1rem;
      font-size: 1.55rem;
    }

    .commerce-shell form .form-row {
      padding: 0;
      margin: 0 0 1rem;
    }

    .commerce-shell form .form-row label {
      margin-bottom: .4rem;
      color: var(--warm-gray);
      font-size: .82rem;
      font-weight: 800;
    }

    .commerce-shell .woocommerce-checkout-payment {
      border-radius: 8px;
      background: rgba(239, 231, 220, .48) !important;
    }

    .commerce-shell #payment ul.payment_methods {
      border-color: rgba(58, 46, 39, .08);
    }

    .commerce-shell #payment div.payment_box {
      border-radius: 8px;
      background: #fffdf9;
      color: var(--warm-gray);
    }

    .commerce-shell #payment div.payment_box::before {
      border-bottom-color: #fffdf9;
    }

    .commerce-shell .place-order {
      padding: 1rem !important;
    }

    .commerce-shell .woocommerce-privacy-policy-text {
      color: var(--warm-gray);
      font-size: .86rem;
      line-height: 1.55;
    }

    .commerce-shell .woocommerce-privacy-policy-text a,
    .commerce-shell .woocommerce-terms-and-conditions-checkbox-text a {
      color: var(--terracotta);
    }

    .mini-frame {
      width: 82px;
      height: 104px;
      border: 10px solid #fffaf3;
      box-shadow: 0 18px 40px rgba(58, 46, 39, .18);
      background:
        radial-gradient(circle at 28% 32%, rgba(184, 111, 82, .8), transparent 28%),
        linear-gradient(135deg, #efe1d2, #7d846a);
    }

    .gallery-card {
      border-radius: 8px;
      overflow: hidden;
      background: var(--paper);
      border: 1px solid rgba(58, 46, 39, .08);
      box-shadow: 0 16px 45px rgba(58, 46, 39, .08);
    }

    .gallery-img {
      min-height: 260px;
      background:
        linear-gradient(to bottom, transparent, rgba(58, 46, 39, .16)),
        url("assets/ai-room-wall-art-hero.png") center/cover;
    }

    .gallery-card:nth-child(2) .gallery-img { filter: hue-rotate(-12deg) saturate(.9); }
    .gallery-card:nth-child(3) .gallery-img { filter: hue-rotate(28deg) saturate(.85); }
    .gallery-card:nth-child(4) .gallery-img { filter: hue-rotate(52deg) saturate(.75); }

    .style-swatch {
      height: 150px;
      border-radius: 20px;
      border: 10px solid #fffaf3;
      background: linear-gradient(135deg, #efe7dc, #d8cec1);
      box-shadow: inset 0 0 0 1px rgba(58, 46, 39, .08);
    }

    .swatch-abstract { background: radial-gradient(circle at 30% 35%, #b86f52, transparent 25%), radial-gradient(circle at 78% 55%, #7d846a, transparent 25%), #efe7dc; }
    .swatch-japandi { background: linear-gradient(140deg, #faf7f2 40%, #dfe5d5 40% 64%, #9a8d80 64%); }
    .swatch-boho { background: radial-gradient(circle at 50% 110%, #b86f52 0 36%, transparent 37%), linear-gradient(135deg, #f5dfc8, #c68e70); }
    .swatch-organic { background: radial-gradient(circle at 30% 45%, #d8cec1, transparent 24%), linear-gradient(135deg, #fffdf9, #7d846a); }
    .swatch-kids { background: radial-gradient(circle at 32% 35%, #c68e70 0 13%, transparent 14%), radial-gradient(circle at 68% 42%, #7d846a 0 13%, transparent 14%), #f8eee4; }

    .product-img {
      min-height: 210px;
      border-radius: 22px;
      background:
        linear-gradient(to bottom, rgba(255,253,249,.28), rgba(58,46,39,.16)),
        url("assets/ai-room-wall-art-hero.png") center/cover;
    }

    .quality-band {
      background: var(--espresso);
      color: var(--paper);
      border-radius: 16px;
    }

    .quality-band .text-soft { color: rgba(255, 253, 249, .72); }

    .accordion-button {
      background: var(--paper);
      color: var(--charcoal);
      font-weight: 700;
    }

    .accordion-button:not(.collapsed) {
      background: #f7efe7;
      color: var(--espresso);
      box-shadow: none;
    }

    .final-cta {
      background:
        linear-gradient(90deg, rgba(58, 46, 39, .72), rgba(58, 46, 39, .32)),
        url("assets/ai-room-wall-art-hero.png") center/cover;
      color: var(--paper);
      border-radius: 16px;
      overflow: hidden;
    }

    .mobile-sticky {
      position: fixed;
      left: 1rem;
      right: 1rem;
      bottom: 1rem;
      z-index: 1030;
      display: none;
    }

    @media (max-width: 991.98px) {
      .hero {
        min-height: auto;
        padding-top: 6.5rem;
        background:
          linear-gradient(0deg, rgba(37, 29, 24, .84), rgba(58, 46, 39, .48)),
          url("assets/ai-room-wall-art-hero.png") center/cover;
      }
      .hero-panel { padding-top: 0; }
      .hero-visual { min-height: auto; }
      .room-photo { height: 420px; border-radius: 28px; }
      .floating-card { position: static; margin-top: 1rem; }
      .art-options { width: 100%; }
      .mobile-sticky { display: block; }
      .creator-style-grid,
      .creator-generated-grid,
      .prompt-ideas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .frame-preview-stage {
        min-height: 420px;
      }
      .commerce-shell {
        padding-top: 7rem;
      }
      .commerce-shell form.checkout {
        grid-template-columns: 1fr !important;
      }
      .commerce-shell form.checkout > .col2-set,
      .commerce-shell form.checkout #order_review_heading,
      .commerce-shell form.checkout #order_review {
        grid-column: auto !important;
        grid-row: auto !important;
        margin-top: 0 !important;
      }
      .commerce-shell .cart_totals {
        width: 100%;
      }
    }

    @media (max-width: 575.98px) {
      .wizard-steps {
        grid-template-columns: 1fr;
      }

      .style-choice-grid,
      .ratio-choice-grid,
      .print-size-grid,
      .generated-art-grid,
      .creator-style-grid,
      .creator-generated-grid,
      .prompt-ideas-grid,
      .frame-options {
        grid-template-columns: 1fr;
      }

      .generated-art-card:first-child {
        grid-column: auto;
      }

      .ratio-preview-card {
        grid-template-columns: 1fr;
      }

      .commerce-shell {
        padding-top: 6.5rem;
      }

      .commerce-shell table.shop_table {
        border-radius: 8px;
      }

      .commerce-shell table.shop_table_responsive tr {
        margin-bottom: 1rem;
        border: 1px solid rgba(58, 46, 39, .08);
        border-radius: 8px;
        background: var(--paper);
        box-shadow: 0 14px 34px rgba(58, 46, 39, .07);
      }

      .commerce-shell table.shop_table_responsive tr td {
        padding: .85rem 1rem;
        border-color: rgba(58, 46, 39, .07);
      }

      .commerce-shell table.shop_table_responsive tr td::before {
        color: var(--soft-taupe);
        font-weight: 800;
      }

      .commerce-shell .coupon {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
      }

      .commerce-shell .coupon .input-text,
      .commerce-shell .coupon .button,
      .commerce-shell table.cart td.actions .button {
        width: 100%;
      }

      .commerce-shell .woocommerce-cart-form .product-thumbnail img {
        width: 76px;
      }

      .commerce-shell .woocommerce-cart-form .product-thumbnail .roommuse-cart-preview,
      .roommuse-cart-preview {
        width: 82px;
      }
    }
/* Studio: compact navigation, unframed sections, and ratio-aware print previews. */
.creator-page .creator-shell { padding-top: 112px; background: #f8faf9; }
.creator-page .creator-title { font-size: 32px; line-height: 1.2; letter-spacing: 0; }
.creator-workspace { background: transparent; padding: 20px 0; }
.creator-page .wizard-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.creator-page .wizard-step { min-width: 0; padding: 10px 4px; border-radius: 4px; font-size: 14px; letter-spacing: 0; }
.creator-page .wizard-step span { flex-shrink: 0; }
.creator-page .wizard-panel { min-height: 330px; }
.creator-page .wizard-panel-head h2 { font-size: 24px; letter-spacing: 0; }
.creator-page .bg-paper, .creator-page .rounded-xl { border-radius: 6px !important; box-shadow: none; }
.creator-page .palette-result, .creator-page .analysis-palette-panel, .creator-page .sandbox-order-card,
.creator-page .selected-frame-summary { background: transparent; border: 0; padding-left: 0 !important; padding-right: 0 !important; }
.creator-page .choice-card { border-radius: 6px; }
.creator-page .choice-card span { overflow-wrap: anywhere; }
.creator-page .drop-zone { border-radius: 6px; min-height: 250px; overflow: hidden; }
.creator-page #roomPhotoPreview { max-width: 100%; width: 220px; max-height: 200px; object-fit: contain; border-radius: 4px; }
.creator-page .drop-zone.has-file { display: flex; flex-direction: column; gap: 12px; }
.creator-page .drop-zone.has-file .bi-cloud-arrow-up { display: none !important; }
.creator-page #roomUploadLabel { overflow-wrap: anywhere; }
.creator-page .creator-size-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.orientation-control { display: flex; flex-wrap: wrap; gap: 8px; }
.orientation-control label { display: flex; align-items: center; gap: 8px; border: 1px solid #cbd4ce; border-radius: 4px; padding: 10px 12px; cursor: pointer; }
.orientation-control label:has(:checked) { background: #e1eee8; border-color: #28715a; }
.creator-page .frame-preview-stage { padding: 18px; min-height: 300px; background: #edf1ef; }
.creator-page .frame-preview { box-sizing: content-box; aspect-ratio: var(--frame-aspect, 2 / 3); width: min(calc(100% - 36px), 420px); max-height: none; height: auto; border: 18px solid transparent; border-image: var(--frame-image) 70 71 70 72 / 18px stretch; background: #fff; padding: 0; }
.creator-page .frame-preview-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.creator-page .frame-preview.has-mount-mat .frame-preview-art { inset: 13.5%; width: 73%; height: 73%; }
.creator-page .frame-preview-mat, .creator-page .frame-preview-frame, .creator-page .frame-preview-glass, .creator-page .frame-preview-overlay { display: none !important; }
.creator-page .frame-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.creator-page .frame-option { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; width: 100%; height: 90px; padding: 6px; font-size: 12px; border-radius: 4px; }
.creator-page .frame-option-thumb { display: block; width: 40px; height: 48px; overflow: hidden; }
.creator-page .frame-option-thumb img { width: 40px; height: 48px; object-fit: fill; }
.creator-page .frame-option > span:last-child { min-height: 18px; line-height: 1.1; text-align: center; }
.creator-page .generated-art-card { border-radius: 6px; overflow: hidden; min-width: 0; }
.creator-page .generated-art-select { display: block; width: 100%; border: 0; padding: 0; background: #edf1ef; }
.creator-page .generated-art-select img { display: block; height: auto; width: 100%; object-fit: contain; }
.creator-page .prompt-idea-card { border-radius: 6px; }
.creator-page .prompt-idea-card strong, .creator-page .prompt-idea-card span { display: block; overflow-wrap: anywhere; }
.creator-page .creation-share-card { background: #eef3f1; border-radius: 6px; }
.creator-page .creation-share-card input { min-width: 0; }
.creator-page :focus-visible { outline: 3px solid #29735e; outline-offset: 3px; }
.roommuse-cart-preview { box-sizing: content-box; height: auto !important; border-radius: 0; border: 5px solid transparent; border-image: var(--frame-image) 70 71 70 72 / 5px stretch; background: #fff; overflow: visible; }
.roommuse-cart-preview .roommuse-cart-preview-art,
.roommuse-cart-preview.has-mat .roommuse-cart-preview-art { left: var(--opening-left); top: var(--opening-top); width: var(--opening-width) !important; height: var(--opening-height) !important; }
.roommuse-cart-preview .roommuse-cart-preview-mat { display: none; }
.commerce-shell .cart_totals h2 { font-size: 24px; line-height: 1.25; letter-spacing: 0; }
.commerce-shell .coupon { display: flex; flex-wrap: wrap; gap: 10px; }
.commerce-shell .coupon .input-text { width: 180px !important; max-width: 100%; }
@media (max-width: 767px) {
  .creator-page .creator-shell { padding-top: 96px; }
  .creator-page .creator-title { font-size: 26px; }
  .creator-page .wizard-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creator-page .wizard-step { flex-direction: row; justify-content: center; gap: 6px; min-height: 40px; font-size: 12px; }
  .creator-page .wizard-step span { width: 23px; height: 23px; font-size: 12px; }
  .creator-page .wizard-panel-head { gap: 12px; flex-wrap: wrap; }
  .creator-page .wizard-panel-head h2 { font-size: 21px; }
  .creator-page .creator-size-grid { grid-template-columns: minmax(0, 1fr); }
  .creator-page .creator-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-page .frame-preview-stage { padding: 12px; }
  .creator-page .frame-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .creator-page .wizard-actions { justify-content: space-between; gap: 8px !important; }
  .commerce-shell table.shop_table_responsive tr td.product-thumbnail { display: block !important; text-align: center !important; }
  .commerce-shell table.shop_table_responsive tr td.product-thumbnail::before { display: none; }
  .commerce-shell .product-thumbnail .roommuse-cart-preview { margin: 0 auto; }
}