:root {
  --cream: #fff5e5;
  --paper: #fffbf2;
  --ink: #20201d;
  --muted: #66685f;
  --forest: #242421;
  --rose: #eb5d22;
  --border: #d7c8af;
  --shadow: 0 24px 60px #5c45231a;
}

body { background: var(--cream); }
.demo-strip { background: #22211e; color: #fff9eb; font-size: 10px; letter-spacing: .15em; }
.site-header { height: 76px; }
.brand { font-size: 24px; }
.brand em, .brand-mark { color: var(--rose); }
.site-header nav a:hover, .text-link:hover { color: var(--rose); }
.header-cta { border-color: var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 var(--ink); }
.header-cta:hover { background: #fff2df; }

.hero { min-height: 520px; padding: 34px 5% 65px; gap: 30px; }
.hero h1, .builder-intro h2 { font-family: 'DM Sans', Arial, sans-serif; font-weight: 700; letter-spacing: -.065em; }
.hero h1 { font-size: clamp(58px, 6.2vw, 94px); line-height: .98; margin-bottom: 28px; }
.hero h1 em, .builder-intro h2 em { color: var(--rose); font-style: normal; font-weight: 700; }
.hero .eyebrow { margin-bottom: 23px; color: #a54420; }
.hero-description { max-width: 480px; line-height: 1.65; margin-bottom: 27px; }
.button-dark { background: var(--rose); color: white; border: 1px solid #27221d; box-shadow: 4px 4px 0 #27221d; border-radius: 6px; }
.button-dark:hover { background: #d84d19; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #27221d; }
.button-dark:disabled { background: #e6ac8c; color: #4a3429; border-color: #ae8067; box-shadow: none; opacity: 1; }
.hero-art { height: 470px; }
.hero-art-halo { width: 430px; height: 430px; right: 7%; top: 5%; background: #f0e2ca; }
.hero-frame { aspect-ratio: 1; border: 2px solid #2a271f; padding: 8px; background: #fff9ed; box-shadow: 12px 17px 30px #44382430; }
.hero-frame:before { display: none; }
.hero-frame-back { position: absolute; width: min(290px,52%); left: 7%; top: 55px; transform: rotate(-10deg); }
.hero-frame-front { position: absolute; width: min(335px,62%); right: 8%; top: 85px; transform: rotate(7deg); }
.hero-frame img { object-fit: cover; }
.hero-stamp { right: 0; bottom: 4%; width: 124px; height: 124px; background: var(--rose); font-family: 'DM Sans',Arial,sans-serif; font-size: 14px; font-weight: 700; transform: rotate(10deg); }
.hero-caption { left: 12%; bottom: -16px; font-size: 15px; }

.builder-section { padding-top: 38px; }
.builder-intro { max-width: 100%; text-align: left; margin-bottom: 27px; }
.builder-intro .eyebrow { justify-content: flex-start; margin-bottom: 9px; }
.builder-intro h2 { font-size: clamp(32px,3.3vw,48px); }
.builder-intro p:last-child { max-width: none; margin: 10px 0 0; line-height: 1.5; }
.auto-layout { grid-template-columns: minmax(0,1.08fr) minmax(410px,.92fr); border: 1px solid #b8a98e; border-radius: 17px; overflow: visible; background: #fffaf0; box-shadow: 0 20px 60px #4b372014; }
.auto-input { min-width: 0; padding: 38px 40px 35px; }
.auto-section-top, .auto-eyebrow { color: var(--rose); }
.auto-input h3, .auto-styles h3, .auto-products h3 { font-family: 'DM Sans',Arial,sans-serif; letter-spacing: -.045em; font-weight: 700; }
.auto-input h3 { font-size: 29px; margin: 12px 0 6px; }
.auto-lead { margin-bottom: 19px; }
.auto-upload { min-height: 152px; background: #fff8eb; border: 1.5px dashed #86745f; border-radius: 8px; }
.auto-upload:hover, .auto-upload.dragging { border-color: var(--rose); background: #fff0dc; }
.auto-upload .upload-icon { margin-bottom: 3px; color: var(--rose); font-size: 27px; }
.auto-upload strong { font-size: 14px; }
.auto-upload small { margin-top: 4px; }

.auto-input .auto-styles { padding: 24px 0 0; margin-top: 28px; background: none; border: 0; border-top: 1px solid #dfd4c1; border-radius: 0; }
.auto-input .auto-styles-heading { align-items: baseline; gap: 14px; }
.auto-input .auto-styles h3 { font-size: 25px; margin: 5px 0 0; }
.auto-input .auto-styles-heading p { max-width: 225px; }
.style-auto-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.style-auto-row > span { font-size: 10px; line-height: 1.35; color: #77756a; }
.style-library { margin-top: 18px; border: 1px solid #c5b59d; border-radius: 9px; background: #fffaf0; }
.style-library > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 12px 16px; cursor: pointer; list-style: none; }
.style-library > summary::-webkit-details-marker { display: none; }
.style-library > summary:hover { background: #f8eddb; }
.style-library > summary:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.style-library-copy strong, .style-library-copy small { display: block; }
.style-library-copy strong { font-size: 13px; color: var(--ink); }
.style-library-copy small { margin-top: 4px; font-size: 11px; color: #6e675d; }
.style-library-arrow { color: var(--rose); font-size: 22px; line-height: 1; transition: transform .2s ease; }
.style-library[open] .style-library-arrow { transform: rotate(180deg); }
.style-library[open] > summary { border-bottom: 1px solid #dfd4c1; }
.style-library > .template-heading, .style-library > .template-grid, .style-library > .style-detail-label, .style-library > .style-detail-input, .style-library > .style-detail-hint { margin-right: 15px; margin-left: 15px; }
.style-library > .style-detail-hint { margin-bottom: 16px; }
.royal-options { margin: 19px 0 8px; padding: 17px; border: 1px solid #c7a979; border-radius: 8px; background: #f7ead4; }
.royal-options[hidden] { display: none; }
.royal-options-head h4 { margin: 6px 0 4px; font-family: 'DM Sans',Arial,sans-serif; font-size: 19px; letter-spacing: -.04em; }
.royal-options-head p, .royal-options-note { margin: 0; color: #716b5c; font-size: 10px; line-height: 1.5; }
.royal-role-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 14px; }
.royal-role { min-width: 0; padding: 5px; border: 1px solid #ad9b80; border-radius: 6px; background: #fffaf0; color: var(--ink); text-align: left; cursor: pointer; }
.royal-role:hover { border-color: var(--rose); }
.royal-role.selected { border: 2px solid var(--rose); padding: 4px; box-shadow: 2px 2px 0 #ae4c20; }
.royal-role:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.royal-role:disabled { opacity: .6; cursor: wait; }
.royal-role img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 28%; border-radius: 3px; }
.royal-role strong { display: block; margin: 7px 2px 2px; font-size: 11px; }
.royal-role small { display: block; margin: 0 2px 3px; color: #777466; font-size: 8px; line-height: 1.25; }
.royal-options-note { margin-top: 11px; }
.auto-input .quick-style { min-height: 44px; padding: 7px 11px; border-radius: 6px; border-color: #a79a84; font-size: 11px; }
.auto-input .quick-style:hover, .auto-input .quick-style.selected { background: #22211e; border-color: #22211e; color: white; }
.auto-input .template-heading { margin: 21px 0 10px; }
.auto-input .template-heading-additional { margin-top: 26px; padding-top: 20px; border-top: 1px solid #dfd4c1; }
.auto-input .template-heading strong { font-family: 'DM Sans',Arial,sans-serif; font-size: 14px; font-weight: 700; }
.auto-input .template-heading strong small { display: inline-block; margin-left: 6px; padding: 4px 6px; border-radius: 4px; background: #f0e4d1; color: #735c40; font-size: 9px; font-weight: 700; vertical-align: 1px; }
.auto-input .template-heading span { font-size: 9px; }
.auto-input .template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.auto-input .template-style { min-width: 0; min-height: 75px; padding: 6px; border-color: #a79a84; border-radius: 6px; background: #fffaf0; }
.auto-input .template-style:hover { border-color: #22211e; }
.auto-input .template-style.selected { padding: 5px; color: white; background: #22211e; border: 2px solid var(--rose); box-shadow: 3px 3px 0 var(--rose); }
.auto-input .template-style.selected small { color: #e3caba; }
.auto-input .template-style img { width: 62px; height: 62px; border-radius: 3px; }
.auto-input .template-style strong { font-size: 11px; }
.auto-input .template-style small { font-size: 9px; }
.auto-input .style-detail-label { margin-top: 22px; }
.auto-input .style-detail-input { border-color: #a79a84; border-radius: 6px; background: #fffaf0; }
.auto-rights { margin-top: 22px; padding: 16px; font-size: 12px; line-height: 1.55; }
.generate-button { width: 100%; margin-top: 17px; min-height: 52px; justify-content: space-between; padding: 14px 18px; font-size: 14px; }
.auto-status { margin-top: 14px; font-size: 11px; line-height: 1.5; }
.real-demo-picker { margin-top: 22px; padding-top: 18px; }
.real-demo-picker summary { cursor: pointer; font-size: 11px; font-weight: 700; color: var(--forest); }
.real-demo-picker summary:hover { color: var(--rose); }
.demo-source-note { font-size: 10px; color: #81877f; margin: 7px 0 13px; }
.auto-sample { margin-top: 15px; font-size: 11px; }

.auto-result { align-self: start; position: sticky; top: 20px; min-height: 640px; padding: 24px 30px 27px; background: #f4e8d2; border-left: 1px solid #dcc8a9; border-radius: 0 17px 17px 0; }
.auto-result-top { color: #514f43; }
.result-pill { background: #fff9ed; color: #4f544b; }
.portrait-display { min-height: 470px; padding: 35px 10px; }
.portrait-display:before { width: min(32vw,420px); height: min(32vw,420px); background: #ead7b9; }
.portrait-display img { width: min(100%,400px); height: auto; aspect-ratio: 1; object-fit: contain; border: 8px solid #fffdf7; border-radius: 3px; box-shadow: 9px 14px 30px #3b352443; transform: rotate(1deg); }
.portrait-display img.raw-photo { object-fit: contain; }
.portrait-fullscreen-button { align-self: center; z-index: 1; margin: -9px 0 20px; padding: 9px 15px; border: 1px solid #b79b75; border-radius: 100px; background: #fffaf0; color: #493e2d; font-size: 11px; font-weight: 700; }
.portrait-fullscreen-button:hover { border-color: var(--rose); color: var(--rose); }
dialog.portrait-lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #1e1b18; color: #fffaf0; }
dialog.portrait-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.portrait-lightbox-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px max(20px, env(safe-area-inset-right)); border-bottom: 1px solid #ffffff2b; }
.portrait-lightbox-header strong { font-size: 14px; font-weight: 700; }
.portrait-lightbox-header button { padding: 9px 13px; border: 1px solid #ffffff80; border-radius: 100px; background: transparent; color: inherit; font-size: 12px; font-weight: 700; }
.portrait-lightbox-header button:hover { background: #ffffff20; }
.portrait-lightbox-header button span { margin-left: 8px; font-size: 18px; line-height: 0; vertical-align: -1px; }
.portrait-lightbox-media { min-height: 0; display: flex; align-items: center; justify-content: center; padding: 18px; cursor: zoom-out; }
.portrait-lightbox-media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; }
.auto-result-foot { border-top-color: #d7c7ae; }
.auto-result-foot strong { font-family: 'DM Sans',Arial,sans-serif; font-size: 20px; font-weight: 700; }
.auto-result-foot p { color: #686f65; font-size: 11px; }
.result-products-link { display: inline-block; margin-top: 15px; color: var(--rose); font-size: 12px; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

.auto-products { margin-top: 62px; }
.auto-products h3 { font-size: clamp(30px,3.2vw,44px); }
.product-card { border: 1px solid #cdbca4; border-radius: 9px; box-shadow: 0 12px 25px #4c422c0e; }
.product-art { background: #f3e9d7; }
.product-card h4 { font-family: 'DM Sans',Arial,sans-serif; font-size: 19px; font-weight: 700; }
.auto-product-note { background: #f2e7d4; }

/* Galeria arată produsul întreg; desenul CSS rămâne vizibil până sosește macheta Printful. */
.product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.product-card { min-width: 0; }
.product-art { height: clamp(380px,40vw,520px); }
.product-preview-status { position: absolute; z-index: 3; top: 15px; left: 15px; max-width: calc(100% - 30px); padding: 7px 10px; border: 1px solid #d5c6af; border-radius: 100px; background: #fffbf2eb; color: #645b4c; font-size: 10px; font-weight: 700; line-height: 1.2; box-shadow: 0 3px 12px #31271912; }
.product-preview-status.is-official, .official-mockup .product-preview-status { border-color: #aac7b1; background: #e9f5e9f2; color: #27593a; }
.product-gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 10px 15px; border-bottom: 1px solid #e4d9c9; background: #fffaf1; }
.product-angles, .product-lightbox-angles { display: flex; align-items: center; gap: 7px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.product-angles button, .product-lightbox-angles button { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 3px; border: 1px solid #d1c4b2; border-radius: 6px; background: #fff; color: #4c453a; font-size: 10px; font-weight: 700; cursor: pointer; }
.product-angles button:hover, .product-lightbox-angles button:hover { border-color: var(--rose); }
.product-angles button[aria-pressed="true"], .product-lightbox-angles button[aria-pressed="true"] { border: 2px solid var(--rose); padding: 2px; }
.product-angles button:focus-visible, .product-lightbox-angles button:focus-visible, .product-expand:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.product-angles button img, .product-lightbox-angles button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-expand { flex: none; min-height: 38px; padding: 8px 12px; border: 1px solid #a99679; border-radius: 6px; background: #fffdf8; color: #453d30; font-size: 11px; font-weight: 700; cursor: pointer; }
.product-expand:hover { border-color: var(--rose); color: var(--rose); }
.product-retry { flex: none; min-height: 38px; padding: 8px 11px; border: 1px solid var(--rose); border-radius: 6px; background: #fff1e7; color: #ab441f; font-size: 11px; font-weight: 700; cursor: pointer; }
.product-retry:hover { background: #ffe4d1; }
.product-retry:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.product-mockup-message { margin: 0; padding: 10px 15px; border-bottom: 1px solid #ead2bf; background: #fff1e7; color: #8d3a20; font-size: 12px; line-height: 1.45; }
.mug-wrap-preview img { height: auto; aspect-ratio: auto; object-fit: contain; }
.product-request { display: block; width: 100%; margin-top: 16px; padding: 11px 13px; border: 1px solid #bd5b36; border-radius: 7px; background: #fff1e7; color: #9d3c1b; font-size: 12px; font-weight: 700; cursor: pointer; }
.product-request:hover { background: #ffe4d0; }
.product-request:disabled { cursor: default; opacity: .7; }
.product-request[hidden] { display: none; }
.product-art.poster .product-object { width: 220px; height: 220px; padding: 7px; background: #fffdf7; box-shadow: 12px 20px 27px #26382b24; }
.product-art.poster .product-object img { object-fit: cover; }
.product-art.framed .product-object { width: 226px; height: 226px; padding: 11px; border: 12px solid #2c2925; background: #fffdf7; box-shadow: 12px 20px 27px #26382b30; }
.product-art.framed .product-object img { object-fit: cover; }
.product-art.framed[data-variant="10755"] .product-object { border-color: #faf7ed; }
.product-art.tote .product-object { width: 205px; height: 220px; margin-top: 30px; padding: 12px 14px 20px; border: 1px solid #d6c5a9; border-radius: 2px 2px 20px 20px; background: #eee4d1; box-shadow: inset -12px -8px 17px #8d785b2b, 12px 20px 27px #26382b24; }
.product-art.tote .product-object:before { content: ''; position: absolute; width: 105px; height: 75px; top: -65px; left: 50%; transform: translateX(-50%); border: 12px solid #d9c7aa; border-bottom: 0; border-radius: 52% 52% 0 0; }
.product-art.tote[data-variant="4533"] .product-object:before { border-color: #262522; }
.product-art.tote[data-variant="8904"] .product-object:before { border-color: #a62f2b; }
.product-art.tote[data-variant="8905"] .product-object:before { border-color: #e0b42e; }
.product-art.tote .product-object img { position: relative; object-fit: cover; }
.product-art.mousepad .product-object { width: 230px; height: 230px; padding: 8px; border-radius: 50%; background: #282a29; box-shadow: 12px 20px 27px #26382b30; }
.product-art.mousepad .product-object img { border-radius: 50%; object-fit: cover; }
.product-art.coaster .product-object { width: 205px; height: 205px; padding: 9px; border: 9px solid #b89265; border-radius: 12px; background: #b89265; box-shadow: 12px 20px 27px #26382b30; transform: rotate(-5deg); }
.product-art.coaster .product-object img { border-radius: 3px; object-fit: cover; }
.product-art.apron .product-object { width: 205px; height: 285px; margin-top: 38px; padding: 58px 16px 20px; background: #3c3c3c; clip-path: polygon(24% 0,76% 0,87% 25%,100% 39%,89% 100%,11% 100%,0 39%,13% 25%); box-shadow: 12px 20px 27px #26382b24; }
.product-art.apron .product-object img { height: 175px; object-fit: cover; }
.product-art.apron[data-variant="14454"] .product-object { background: #27334a; }
.product-art.apron[data-variant="14455"] .product-object { background: #9c3637; }
.product-art.apron[data-variant="14456"] .product-object { background: #c7b798; }
.product-art.shirt .product-object { width: 280px; height: 255px; background: #fffdf5; clip-path: polygon(28% 0,42% 0,50% 9%,58% 0,72% 0,100% 20%,84% 42%,75% 36%,75% 100%,25% 100%,25% 36%,16% 42%,0 20%); filter: drop-shadow(10px 16px 12px #26382b24); }
.product-art.shirt .product-object img { position: absolute; left: 31%; top: 25%; width: 38%; height: 45%; object-fit: cover; }
.product-art.shirt[data-variant="4017"] .product-object, .product-art.shirt[data-variant="4018"] .product-object { background: #272728; }
.product-art.official-mockup { background: #f8f5ef; }
.product-art.official-mockup:before, .product-art.official-mockup .product-object:before, .product-art.official-mockup .product-object:after { content: none; display: none; }
.product-art.official-mockup .product-object { display: block; width: 100%; height: 100%; margin: 0; padding: 18px; border: 0; border-radius: 0; background: none; box-shadow: none; filter: none; transform: none; clip-path: none; overflow: hidden; }
.product-art.official-mockup[data-variant] .product-object { border: 0; background: none; }
.product-art.official-mockup .product-object img { position: static; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; object-fit: contain; object-position: center; }
.product-art.pillow.official-mockup .product-object { padding: 12px; }
dialog.product-lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #1e1b18; color: #fffaf0; }
dialog.product-lightbox[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.product-lightbox-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px max(20px,env(safe-area-inset-right)); border-bottom: 1px solid #ffffff2b; }
.product-lightbox-header strong { font-size: 14px; font-weight: 700; }
.product-lightbox-header button { padding: 9px 13px; border: 1px solid #ffffff80; border-radius: 100px; background: transparent; color: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.product-lightbox-header button:hover { background: #ffffff20; }
.product-lightbox-header button span { margin-left: 8px; font-size: 18px; line-height: 0; vertical-align: -1px; }
.product-lightbox-media { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 16px; }
.product-lightbox-media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.product-lightbox-angles { justify-content: center; min-height: 70px; padding: 9px 20px max(9px,env(safe-area-inset-bottom)); border-top: 1px solid #ffffff2b; }
.product-lightbox-angles:empty { display: none; }

.portrait-review { margin: 26px 0 18px; padding: 23px; border: 1px solid #d7bea0; border-radius: 15px; background: #fffaf0; }
.portrait-review[hidden], .auto-products[hidden] { display: none; }
.portrait-review h3 { margin: 8px 0 17px; font: 700 clamp(20px,2vw,27px)/1.15 'DM Sans',Arial,sans-serif; letter-spacing: -.035em; }
.portrait-review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.portrait-review figure { min-width: 0; margin: 0; }
.portrait-review figure img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 9px; background: #eee8dc; }
.portrait-review figcaption { margin-top: 8px; color: #263c34; font-size: 11px; font-weight: 700; }
.portrait-review p { margin: 13px 0 0; color: #59665c; font-size: 12px; line-height: 1.55; }
.portrait-review .review-note { padding-top: 12px; border-top: 1px solid #e6d8c5; }
.portrait-compare, .portrait-try-style { min-height: 42px; margin: 9px 8px 0 0; padding: 8px 13px; border: 1px solid #b69b79; border-radius: 100px; background: #fffaf0; color: #254338; font-size: 11px; font-weight: 700; cursor: pointer; }
.portrait-compare[hidden], .portrait-try-style[hidden] { display: none; }
.portrait-compare:hover, .portrait-try-style:hover { border-color: #b86446; }
.auto-result[data-artifact-kind="generated-artwork"] .portrait-display img { width: min(100%,470px); max-height: min(66vh,540px); }

.how-section { background: #f0e1c8; padding: 75px 5% 85px; }
.how-grid article { border: 1px solid #bcae96; border-radius: 8px; }
.how-number { color: var(--rose); }
.how-grid h3 { font-family: 'DM Sans',Arial,sans-serif; font-size: 19px; font-weight: 700; }

@media (max-width: 1100px) {
  .auto-layout { grid-template-columns: minmax(0,1fr) minmax(350px,.85fr); }
  .auto-input { padding: 30px 27px; }
  .auto-result { padding: 22px; }
  .portrait-display { min-height: 390px; }
  .portrait-display img { width: min(100%,330px); }
  .auto-input .template-heading span { display: none; }
}

@media (max-width: 760px) {
  .portrait-review { padding: 18px; }
  .portrait-review-grid { gap: 10px; }
  .site-header { height: 68px; }
  .site-header nav { display: none; }
  .header-cta { font-size: 11px; padding: 10px 12px; }
  .header-cta span { margin-left: 4px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; padding: 40px 6% 35px; gap: 5px; }
  .hero h1 { font-size: clamp(46px,10vw,70px); }
  .hero-description { font-size: 14px; line-height: 1.55; }
  .hero-art { width: 100%; height: 345px; }
  .hero-art-halo { width: 300px; height: 300px; top: 12px; right: 8%; }
  .hero-frame-back { width: 205px; left: 7%; top: 37px; }
  .hero-frame-front { width: 230px; right: 10%; top: 58px; }
  .hero-stamp { width: 90px; height: 90px; font-size: 10px; bottom: 3%; }
  .hero-caption { bottom: -3px; font-size: 12px; }
  .builder-section { padding-top: 28px; }
  .auto-layout { grid-template-columns: 1fr; overflow: hidden; }
  .auto-input { padding: 27px 20px 31px; }
  .auto-result { position: static; min-height: 420px; border-left: 0; border-top: 1px solid #dcc8a9; border-radius: 0 0 17px 17px; }
  .portrait-display { min-height: 310px; }
  .portrait-display:before { width: 270px; height: 270px; }
  .portrait-display img { width: min(100%,290px); }
  .auto-input .auto-styles-heading { display: block; }
  .auto-input .auto-styles-heading p { max-width: none; margin-top: 7px; }
  .auto-input .template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .royal-role-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .auto-input .template-style { display: flex; min-height: 68px; }
  .auto-input .template-style img { flex: none; width: 53px; height: 53px; margin: 0; }
  .auto-input .template-style strong { font-size: 10px; }
  .auto-input .template-style small { font-size: 8px; }
  .auto-products { margin-top: 43px; }
  .product-grid { grid-template-columns: 1fr; gap: 17px; }
  .product-art { height: clamp(280px,74vw,430px); }
  .product-gallery-toolbar { min-height: 65px; }
}

@media (max-width: 390px) {
  .auto-input .template-style { display: block; }
  .auto-input .template-style img { width: 100%; height: 82px; margin-bottom: 6px; }
}