/* TinyBook section/base layer. Shared system recipes and components have explicit precedence. */
@layer website-base {
.appearance-section { background:#f5f5f7; padding-block:80px; }
.appearance-layout { display:grid; gap:20px; }
.appearance-intro { min-width:0; }
.appearance-preview { margin:0; min-width:0; }
.appearance-preview img { display:block; width:100%; height:auto; aspect-ratio:6 / 5; object-fit:contain; }
.appearance-float-stage { position:relative; --appearance-float-rise:clamp(6px,1.1vw,10px); }
.appearance-float-stage img { position:relative; z-index:1; animation:appearance-float 4.8s ease-in-out infinite; }
.appearance-float-stage::after { content:""; position:absolute; left:50%; bottom:2.5%; width:38%; height:5%; pointer-events:none; background:radial-gradient(ellipse at center,rgba(29,29,31,.18),rgba(29,29,31,.06) 45%,transparent 75%); transform:translateX(-50%); opacity:.7; animation:appearance-float-shadow 4.8s ease-in-out infinite; }
@keyframes appearance-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(calc(-1 * var(--appearance-float-rise))); }
}
@keyframes appearance-float-shadow {
  0%,100% { transform:translateX(-50%) scaleX(1); opacity:.7; }
  50% { transform:translateX(-50%) scaleX(1.12); opacity:.4; }
}
@media (prefers-reduced-motion:reduce) {
  .appearance-float-stage img,.appearance-float-stage::after { animation:none; }
}
.appearance-controls fieldset { border:0; padding:0; margin:0; min-width:0; }
.appearance-view { margin:0 !important; }
.appearance-view label { flex:1; cursor:pointer;}
.appearance-view span { place-items:center;}
.appearance-controls { min-width:0; display:grid; gap:24px; align-content:center; }
.appearance-intro .section-heading { font-size:clamp(32px,4vw,52px); line-height:1.08; letter-spacing:-.025em; }
.appearance-description { margin:18px 0 0; max-width:400px; font-size:18px; line-height:1.45; color:var(--secondary); }
.appearance-styles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.appearance-style { min-width:0; cursor:pointer;}
.appearance-style-card { display:flex; flex-direction:column; justify-content:center; text-align:center;}
.appearance-style strong { overflow-wrap:anywhere;}
.appearance-finishes { margin-top:0 !important; }
.appearance-controls legend { margin-bottom:12px; }
.appearance-swatches { display:flex; flex-wrap:wrap; gap:8px 12px; }
.appearance-finish { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; cursor:pointer; }
.appearance-finish[hidden] { display:none; }
.appearance-swatch { display:block; width:28px; height:28px; border-radius:50%; background:var(--finish); box-shadow:inset 0 0 0 1px #00000020; }
.appearance-finish:has(input:checked) { box-shadow:inset 0 0 0 2px var(--ink); }.appearance-finish:has(input:focus-visible) { outline:3px solid var(--blue); outline-offset:4px; border-radius:16px; }
.appearance-finish:has(input:focus-visible) { border-radius:50%; }
.appearance-note { min-height:2.8em; margin:20px 0 8px; font-size:14px; line-height:1.4; color:var(--secondary); }
.appearance-section fieldset:disabled label { cursor:default; }
@media (min-width:900px) {
  .appearance-layout { grid-template-columns:minmax(0,1.1fr) minmax(360px,1fr); align-items:start; gap:24px 64px; }
  .appearance-preview { grid-column:1; grid-row:1 / span 2; align-self:center; }
  .appearance-intro,.appearance-controls { grid-column:2; }
}
@media (max-width:899px) {
  .appearance-intro { text-align:center; }
  .appearance-description { margin-inline:auto; }
  .appearance-preview { margin-top:-8px; }
  .appearance-finishes { margin-top:0!important; }
}
@media (max-width:359px) {
}

.appearance-toolbar { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:12px; }
.appearance-toolbar .appearance-view { width:auto; }
.appearance-controls #appearance-ar { justify-self:start; }
.appearance-ar-dialog { width:min(420px,calc(100vw - 40px)); padding:32px; border:0; border-radius:28px; color:var(--ink); background:var(--white); text-align:center; }
.appearance-ar-dialog::backdrop { background:#0005; }
.appearance-ar-dialog h2 { font:600 24px/1.2 var(--font); letter-spacing:-.02em; margin:0 0 12px; }
.appearance-ar-dialog p { color:var(--secondary); font-size:16px; line-height:1.5; }
.appearance-ar-qr { display:block; width:224px; max-width:100%; height:auto; margin:24px auto; }
.appearance-ar-dialog .ar-selection { color:var(--ink); font-size:14px; }
.appearance-ar-dialog .ar-dialog-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:20px; }
.appearance-ar-page { display:grid; justify-items:center; align-content:center; min-height:100svh; padding:48px 24px; text-align:center; background:var(--wash); }
.appearance-ar-page h1 { font:600 32px/1.15 var(--font); letter-spacing:-.025em; margin:0; }
.appearance-ar-page .ar-product-image { width:min(100%,560px); height:auto; margin:24px auto 0; }
.appearance-ar-page p { color:var(--secondary); font-size:16px; line-height:1.5; max-width:32ch; margin:16px 0 24px; }
.appearance-ar-page .ar-return { margin-top:24px; }
@media(max-width:650px) {
  .appearance-3d-stage { aspect-ratio:1; }
  .appearance-controls { gap:20px; }
}

.appearance-ar-page .ar-credit { font-size:12px; margin:28px 0 0; }
.appearance-ar-page .ar-credit a { color:inherit; text-underline-offset:2px; }

}