/* AI 创意油画页（ai_art）。由 tpl_ai_art_default.php 显式加载（带 ?v= 版本号，不能改回 ai_art.css，见模板注释）；配色沿用询价页（海军蓝 / 米色 / 金 / Georgia）。 */
.aa-page {
  --aa-navy: #0c2839;
  --aa-blue: #379adc;
  --aa-blue-dark: #1e71a9;
  --aa-ink: #182a35;
  --aa-muted: #66747d;
  --aa-line: #dfe5e8;
  --aa-ivory: #f4f0e8;
  --aa-ivory-light: #faf8f3;
  --aa-gold: #b79463;
  --aa-red: #b4402f;
  --aa-serif: Georgia, "Times New Roman", serif;
  --aa-sans: "Roboto", Arial, sans-serif;
  color: var(--aa-ink);
  font-family: var(--aa-sans);
  font-size: 15px;
  line-height: 1.6;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px 48px;
  box-sizing: border-box;
}
.aa-page *, .aa-page *::before, .aa-page *::after { box-sizing: border-box; }
.aa-page img { max-width: 100%; height: auto; display: block; }
.aa-page [hidden] { display: none !important; }

.aa-h2 { font-family: var(--aa-serif); font-size: 26px; font-weight: 400; color: var(--aa-navy); margin: 0 0 8px; text-transform: none; letter-spacing: 0; }
.aa-muted { color: var(--aa-muted); }
.aa-small { font-size: 13px; }
.aa-center { text-align: center; }
.aa-section { margin-top: 44px; }
.aa-panel { background: var(--aa-ivory-light); border: 1px solid var(--aa-line); border-radius: 8px; padding: 28px; }

/* buttons */
.aa-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 0; border-radius: 4px; font: 700 15px/1.2 var(--aa-sans); letter-spacing: .5px; cursor: pointer; text-decoration: none !important; transition: background-color .2s; }
.aa-btn-primary { background: var(--aa-blue); color: #fff !important; }
.aa-btn-primary:hover, .aa-btn-primary:focus { background: var(--aa-blue-dark); }
.aa-btn-primary[disabled] { background: #9fb3bf; cursor: not-allowed; }
.aa-btn-secondary { background: var(--aa-navy); color: #fff !important; }
.aa-btn-wide { width: 100%; margin-top: 18px; }
.aa-link { background: none; border: 0; padding: 0; color: var(--aa-blue-dark); text-decoration: underline; cursor: pointer; font: inherit; }

/* hero */
.aa-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; background: var(--aa-ivory); border-radius: 8px; padding: 40px; margin-top: 16px; }
.aa-kicker { margin: 0 0 8px; color: var(--aa-blue-dark); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.aa-title { font-family: var(--aa-serif); font-weight: 400; font-size: 40px; line-height: 1.15; color: var(--aa-navy); margin: 0 0 14px; text-transform: none; }
.aa-intro { font-size: 17px; margin: 0 0 22px; max-width: 520px; }
.aa-steps { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--aa-muted); }
.aa-steps li { display: flex; align-items: center; gap: 6px; }
.aa-steps span { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--aa-navy); color: #fff; font-size: 12px; font-weight: 700; align-items: center; justify-content: center; }
.aa-hero-visual { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.aa-hero-card { position: relative; margin: 0; border-radius: 6px; overflow: visible; box-shadow: 0 10px 28px rgba(12, 40, 57, .18); }
.aa-hero-card > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; }
.aa-hero-card:nth-child(2) { transform: translateY(-18px); }

/* polaroid of the source photo */
.aa-polaroid { position: absolute; right: 8px; bottom: 8px; width: 30%; max-width: 92px; background: #fff; padding: 4px 4px 12px; border-radius: 3px; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); transform: rotate(4deg); transition: transform .3s; }
.aa-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.aa-polaroid em { position: absolute; left: 0; right: 0; bottom: 0; font: 700 9px/12px var(--aa-sans); font-style: normal; color: #555; text-align: center; letter-spacing: .5px; text-transform: uppercase; }

/* themes */
.aa-theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.aa-theme { display: flex; flex-direction: column; padding: 0; text-align: left; background: #fff; border: 2px solid var(--aa-line); border-radius: 8px; overflow: hidden; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s; }
.aa-theme.is-selected { border-color: var(--aa-blue); box-shadow: 0 0 0 3px rgba(55, 154, 220, .25); }
.aa-theme-media { position: relative; display: block; background: #111; }
.aa-theme-media > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.aa-check { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--aa-blue); color: #fff; font-weight: 700; display: none; align-items: center; justify-content: center; }
.aa-theme.is-selected .aa-check { display: flex; }
.aa-theme-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.aa-tag { font-size: 11px; font-weight: 700; color: var(--aa-gold); letter-spacing: 1px; text-transform: uppercase; }
.aa-theme-title { font-family: var(--aa-serif); font-size: 18px; color: var(--aa-navy); margin: 2px 0 4px; }
.aa-theme-desc { font-size: 13px; color: var(--aa-muted); flex: 1; }
.aa-theme-pick { margin-top: 12px; align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--aa-blue-dark); }
.aa-theme.is-selected .aa-theme-pick { color: var(--aa-blue); }

/* theme filters */
.aa-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.aa-filter-label { flex: none; align-self: center; min-width: 42px; font: 600 13px/1.3 var(--aa-sans); color: var(--aa-muted); }
.aa-style-filters { margin-top: 10px; }
.aa-filter-status { margin-top: 12px; margin-bottom: 0; font-size: 13px; }
.aa-filter { padding: 7px 16px; border: 1px solid var(--aa-line); border-radius: 18px; background: #fff; color: var(--aa-ink); font: 600 13px/1.3 var(--aa-sans); cursor: pointer; }
.aa-filter.is-active { background: var(--aa-navy); border-color: var(--aa-navy); color: #fff; }
.aa-theme.is-filtered { display: none; }

/* canvas format */
.aa-size { margin: 18px 0 6px; padding: 0; border: 0; min-width: 0; }
.aa-size legend { margin: 0 0 4px; border: 0; padding: 0; font: 700 16px/1.3 var(--aa-sans); color: var(--aa-navy); width: auto; }
.aa-size-body { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 20px; align-items: center; margin-top: 10px; }
.aa-orient { display: flex; flex-wrap: wrap; gap: 8px; }
.aa-orient-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid #b9c6cd; border-radius: 4px; background: #fff; color: var(--aa-ink); font: 600 14px/1 var(--aa-sans); cursor: pointer; }
.aa-orient-btn.is-active { border-color: var(--aa-blue); box-shadow: 0 0 0 2px rgba(55, 154, 220, .25); color: var(--aa-blue-dark); }
.aa-orient-icon { display: inline-block; border: 2px solid currentColor; border-radius: 2px; }
.aa-orient-icon.is-portrait { width: 12px; height: 17px; }
.aa-orient-icon.is-landscape { width: 17px; height: 12px; }
.aa-orient-icon.is-square { width: 14px; height: 14px; }
.aa-size-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.aa-size-chip { min-width: 72px; padding: 7px 10px; border: 1px solid var(--aa-line); border-radius: 4px; background: #fff; color: var(--aa-ink); font: 600 13px/1.2 var(--aa-sans); cursor: pointer; }
.aa-size-chip.is-active { background: var(--aa-navy); border-color: var(--aa-navy); color: #fff; }
.aa-size-custom { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.aa-size-custom label { display: flex; flex-direction: column; margin: 0; font-size: 12px; font-weight: 400; color: var(--aa-muted); }
.aa-size-custom input { width: 84px; height: 42px; padding: 0 10px; border: 1px solid #b9c6cd; border-radius: 4px; font-size: 16px; color: var(--aa-ink); }
.aa-size-custom input.is-invalid { border-color: var(--aa-red); }
.aa-size-x, .aa-size-unit { padding-bottom: 11px; color: var(--aa-muted); }
/* 单位切换（in / cm），只在站点允许多个单位时出现 */
.aa-unit-toggle { display: inline-flex; margin-left: 6px; border: 1px solid #b9c6cd; border-radius: 4px; overflow: hidden; align-self: flex-end; }
.aa-unit-btn { min-width: 40px; height: 40px; padding: 0 10px; border: 0; background: #fff; color: var(--aa-ink); font: 600 13px/1 var(--aa-sans); cursor: pointer; }
.aa-unit-btn + .aa-unit-btn { border-left: 1px solid #b9c6cd; }
.aa-unit-btn.is-active { background: var(--aa-navy); color: #fff; }
.aa-page button.aa-unit-btn:hover { background: var(--aa-ivory-light) !important; color: var(--aa-navy) !important; border-radius: 0; }
.aa-page button.aa-unit-btn.is-active:hover { background: var(--aa-navy) !important; color: #fff !important; }
.aa-page button.aa-unit-btn:focus-visible { outline: 2px solid var(--aa-blue) !important; outline-offset: -2px !important; }
.aa-size-preview { display: flex; align-items: center; justify-content: center; height: 150px; }
.aa-size-preview span { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e9e2d3, #d8ccb4); border: 6px solid #6b4f2e; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); transition: width .2s, height .2s; }
.aa-size-preview em { font: 700 12px/1 var(--aa-sans); font-style: normal; color: #4b3a22; white-space: nowrap; }
.aa-result-size { margin: -4px 0 10px; color: var(--aa-muted); font-weight: 700; }

/* upload */
.aa-chosen { margin: 6px 0 2px; font-size: 16px; }
.aa-chosen strong { font-family: var(--aa-serif); font-weight: 400; color: var(--aa-navy); }
.aa-drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 200px; margin: 16px 0 8px; border: 2px dashed #b9c6cd; border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; }
.aa-drop.is-over { border-color: var(--aa-blue); background: #f0f8fd; }
.aa-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.aa-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; }
.aa-drop-status { font-size: 14px; font-weight: 700; color: var(--aa-navy); word-break: break-all; }
.aa-drop img { max-height: 340px; width: auto; margin: 12px auto; border-radius: 4px; }
.aa-consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: 13px; font-weight: 400; cursor: pointer; }
.aa-consent input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.aa-consent a { color: var(--aa-blue-dark); }
#aaTurnstile { margin-top: 12px; }
.aa-error { margin: 14px 0 0; padding: 10px 14px; border-left: 4px solid var(--aa-red); background: #fbeeeb; color: #7a2a1f; font-size: 14px; }

.aa-unlock { margin-top: 24px; padding: 22px; border-radius: 8px; background: #fff; border: 1px solid var(--aa-gold); }
.aa-unlock h3 { font-family: var(--aa-serif); font-weight: 400; font-size: 20px; color: var(--aa-navy); margin: 0 0 6px; text-transform: none; }
.aa-unlock-form { display: flex; gap: 10px; margin-top: 12px; }
.aa-unlock-form input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid #b9c6cd; border-radius: 4px; font-size: 16px; }

/* waiting */
.aa-wait { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; }
.aa-wait-art { position: relative; border-radius: 6px; overflow: hidden; }
.aa-wait-art img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: blur(3px) saturate(.6); }
.aa-wait-art::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); background-size: 250% 100%; animation: aa-shimmer 1.8s linear infinite; }
@keyframes aa-shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.aa-progress { height: 8px; border-radius: 4px; background: var(--aa-line); overflow: hidden; margin: 18px 0 14px; }
.aa-progress span { display: block; height: 100%; width: 3%; background: var(--aa-blue); border-radius: 4px; transition: width 1s linear; }
.aa-wait-tip { font-family: var(--aa-serif); font-style: italic; color: var(--aa-navy); min-height: 3em; }

/* result */
.aa-result { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 16px; }
.aa-compare { position: relative; overflow: hidden; border-radius: 6px; background: #111; user-select: none; touch-action: pan-y; box-shadow: 0 12px 32px rgba(12, 40, 57, .2); }
.aa-compare img { width: 100%; height: auto; }
.aa-compare-before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100% !important; object-fit: cover; clip-path: inset(0 50% 0 0); }
.aa-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .6); pointer-events: none; }
.aa-handle span { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; color: var(--aa-navy); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 3px 10px rgba(0, 0, 0, .4); }
.aa-range { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.aa-badge { position: absolute; top: 12px; padding: 3px 10px; border-radius: 12px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .5px; pointer-events: none; }
.aa-badge-before { left: 12px; }
.aa-badge-after { right: 12px; }
.aa-result-theme { font-family: var(--aa-serif); font-size: 22px; color: var(--aa-navy); margin: 0 0 8px; }
.aa-result-links { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; margin-top: 18px; font-size: 14px; }

/* faq */
/* FAQ：与询价页 art_request 的「Vanliga frågor」统一（art_request_custom.css 的 .faq-*）——
   居中 920px、Georgia 32px 标题、编号粗体问题、右侧蓝色 +/− 圆标、上下细线、灰色答案。用原生 <details>，无需 JS。 */
.aa-faq { max-width: 920px; margin-left: auto; margin-right: auto; }
.aa-faq-title { margin: 12px 0 28px; color: var(--aa-ink); font: 400 32px/1.2 var(--aa-serif); text-align: center; text-transform: none; letter-spacing: 0; }
.aa-faq-item { border-top: 1px solid var(--aa-line); background: #fff; }
.aa-faq-item:last-child { border-bottom: 1px solid var(--aa-line); }
.aa-faq-question { position: relative; display: block; padding: 19px 48px 19px 5px; color: #2e404c; font: 700 13px/1.5 var(--aa-sans); cursor: pointer; list-style: none; }
.aa-faq-question::-webkit-details-marker { display: none; }
.aa-faq-question::marker { content: ''; }
.aa-faq-question:focus-visible { outline: 2px solid var(--aa-blue); outline-offset: 2px; }
/* 蓝色圆标：关闭 +，展开 −（对应询价页的 glyphicon-plus-sign / minus-sign） */
.aa-faq-icon { position: absolute; top: 50%; right: 8px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--aa-blue); }
.aa-faq-icon::before, .aa-faq-icon::after { content: ''; position: absolute; top: 7px; left: 4px; width: 8px; height: 2px; background: #fff; border-radius: 1px; }
.aa-faq-icon::after { transform: rotate(90deg); transition: transform .2s; }
.aa-faq-item[open] .aa-faq-icon::after { transform: rotate(0deg); }
.aa-faq-answer { padding: 2px 45px 20px 5px; }
.aa-faq-answer p { margin: 0; color: var(--aa-muted); font-size: 12px; line-height: 1.75; }
.aa-faq a { color: var(--aa-blue-dark); }

@media (max-width: 991px) {
  .aa-hero { grid-template-columns: 1fr; padding: 28px 20px; gap: 28px; }
  .aa-theme-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .aa-result { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .aa-page { padding: 0 0 32px; font-size: 15px; }
  .aa-hero { border-radius: 0; margin-top: 0; }
  .aa-title { font-size: 30px; }
  .aa-intro { font-size: 16px; }
  .aa-section { margin-top: 32px; padding-left: 16px; padding-right: 16px; }
  .aa-panel { margin-left: 16px; margin-right: 16px; padding: 20px 16px; }
  .aa-h2 { font-size: 22px; }
  .aa-faq-title { font-size: 26px; margin-bottom: 18px; }
  .aa-faq-answer { padding-right: 16px; }
  .aa-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .aa-theme { min-width: 0; }
  .aa-theme-media > img { object-fit: contain; background: var(--aa-ivory); }
  .aa-theme .aa-tag, .aa-theme .aa-theme-pick { display: none; }
  .aa-theme-body { padding: 10px 10px 12px; }
  .aa-theme-title { font-size: 15px; }
  .aa-theme-desc { display: none; }
  /* 手机卡片只有约 150px 宽：原图小卡缩到 25%（至少 44px，保证好点），别挡住油画 */
  .aa-polaroid { width: 25%; min-width: 44px; right: 6px; padding: 3px 3px 10px; }
  .aa-theme-photo-anchor .aa-theme-photo { bottom: 6px; }   /* 比后面的 .aa-theme-photo 基础规则更具体，才能盖过它 */
  .aa-polaroid em { font-size: 8px; line-height: 10px; letter-spacing: .3px; }
  .aa-wait { grid-template-columns: 1fr; }
  .aa-wait-art { max-width: 160px; margin: 0 auto; }
  .aa-unlock-form { flex-direction: column; }
  .aa-size-body { grid-template-columns: 1fr; }
  .aa-size-preview { height: 120px; }
  /* 可横向滑动，但不显示滚动条（原来每行下面一条灰线像分隔线）；右边被截一半的标签已经提示能滑 */
  .aa-filters { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px; scrollbar-width: none; -ms-overflow-style: none; }
  .aa-filters::-webkit-scrollbar { display: none; }
  .aa-filter { flex: none; }
}

/* ==========================================================================
   悬停与键盘焦点（2026-10-22，方案与 agy 商定）
   站点全局有三条按钮规则会污染本页所有 <button>：
     button:hover { background: #1e71a9 !important }（内联样式）
     button:hover { color: #fff; border-radius: 4px }（templatecss.css）
     button:focus { outline: none !important }（templatecss.css）
   主题卡片也是 <button>，悬停时整卡变蓝、深色标题看不清。下面的选择器都是 .aa-page button.xxx:hover
   （特异性高于 button:hover），背景/颜色/轮廓用 !important 压过全局。
   ========================================================================== */
/* 主题卡片：保持白卡，金色画框边 + 文字颜色不变 */
.aa-page button.aa-theme:hover,
.aa-page button.aa-theme:focus {
  background: #fff !important;
  color: var(--aa-ink) !important;
  border-radius: 8px;
}
/* 金边只给悬停；点选后卡片带着焦点，不能盖掉选中态的蓝边 */
.aa-page button.aa-theme:hover { border-color: var(--aa-gold); }
.aa-page button.aa-theme.is-selected:hover { border-color: var(--aa-blue); }
.aa-page button.aa-theme:hover .aa-theme-pick { color: var(--aa-blue); text-decoration: underline; }
.aa-page button.aa-theme:focus-visible { outline: 3px solid var(--aa-blue) !important; outline-offset: 3px !important; }

/* 小按钮：未选中悬停 = 米色底 + 深蓝边；选中态悬停保持原样 */
.aa-page button.aa-filter:hover,
.aa-page button.aa-orient-btn:hover,
.aa-page button.aa-size-chip:hover {
  background: var(--aa-ivory-light) !important;
  border-color: var(--aa-navy);
  color: var(--aa-navy) !important;
}
.aa-page button.aa-filter:hover { border-radius: 18px; }
.aa-page button.aa-orient-btn:hover,
.aa-page button.aa-size-chip:hover { border-radius: 4px; }
.aa-page button.aa-filter.is-active:hover,
.aa-page button.aa-size-chip.is-active:hover { background: var(--aa-navy) !important; color: #fff !important; }
.aa-page button.aa-orient-btn.is-active:hover { background: #fff !important; border-color: var(--aa-blue); color: var(--aa-blue-dark) !important; }

/* 文字链按钮（「Prova ett annat motiv」） */
.aa-page button.aa-link:hover { background: transparent !important; color: var(--aa-blue) !important; }

/* 主按钮：不可用时悬停也保持灰色，不要看起来能点 */
.aa-page button.aa-btn-primary[disabled]:hover { background: #9fb3bf !important; }

.aa-page button.aa-filter:focus-visible,
.aa-page button.aa-orient-btn:focus-visible,
.aa-page button.aa-size-chip:focus-visible,
.aa-page button.aa-link:focus-visible,
.aa-page button.aa-btn:focus-visible { outline: 2px solid var(--aa-blue) !important; outline-offset: 2px !important; }

/* 上浮、拍立得放大只给真鼠标：手机上点一下 :hover 会一直挂着，卡片就停在「浮起」状态 */
@media (hover: hover) and (pointer: fine) {
  .aa-page button.aa-theme:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(12, 40, 57, .14); }
  .aa-page button.aa-theme:hover .aa-polaroid { transform: rotate(0) scale(1.15); }
}
@media (hover: none) {
  .aa-page button.aa-theme:active,
  .aa-page button.aa-filter:active,
  .aa-page button.aa-orient-btn:active,
  .aa-page button.aa-size-chip:active { transform: scale(.98); }
}

/* Mobile gallery preview, including browsers without native dialog support. */
.aa-preview[hidden] { display: none !important; }
.aa-preview { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(12, 30, 42, .78); color: var(--aa-ink); }
.aa-preview-panel { width: 100%; max-width: 540px; max-height: 100%; border-radius: 12px; background: #fff; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.aa-preview-top { padding: 10px 16px; display: flex; justify-content: flex-end; }
.aa-preview-art { background: var(--aa-ivory); touch-action: pan-y pinch-zoom; }
.aa-preview-art img { display: block; width: 100%; height: 46vh; height: 46dvh; object-fit: contain; }
.aa-preview-content { padding: 16px; }
.aa-preview-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.aa-preview .aa-h2 { font-size: 23px; }
.aa-preview-nav { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 14px; }
.aa-preview-nav button { min-width: 48px; min-height: 44px; font-size: 24px; }
.aa-preview-nav button:disabled { opacity: .3; cursor: default; }
.aa-preview #aaPreviewChoose { width: 100%; }

/* Separate controls: main artwork selects; the original photo opens details. */
.aa-theme-card { position: relative; display: flex; min-width: 0; }
.aa-theme-card > .aa-theme { width: 100%; }
.aa-theme-card.is-filtered { display: none; }
.aa-theme-photo-anchor { position: absolute; top: 2px; left: 2px; right: 2px; aspect-ratio: 3 / 4; pointer-events: none; }
.aa-theme-photo { top: auto; bottom: 8px; z-index: 1; border: 0; cursor: zoom-in; pointer-events: auto; }
.aa-page button.aa-theme-photo:hover, .aa-page button.aa-theme-photo:focus { background: #fff !important; border-radius: 3px; }
.aa-page button.aa-theme-photo:focus-visible { outline: 3px solid var(--aa-blue) !important; outline-offset: 3px; }

/* 原图小卡现在是 <button>（可点开预览）。站点 templatecss.css 有 button { width: auto !important }，
   会把 .aa-polaroid 的百分比宽度吃掉，退回图片原宽（被 max-width 卡在 92px），手机上盖住半幅油画。
   本地测试页不加载站点 CSS 看不出来，2026-10-26 线上才发现。 */
.aa-page button.aa-polaroid { width: 30% !important; }
@media (max-width: 600px) {
  .aa-page button.aa-polaroid { width: 25% !important; }   /* 必须写在上一条之后，同等优先级后者赢 */
}