.shopping-page { max-width: 1180px; font-family: 'Manrope', system-ui, sans-serif; }
.shopping-page h1 { max-width: 20ch; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(36px, 5.4vw, 65px); }
.shop-intro { padding: 10px 0 30px; }
.shop-kicker { font: 500 11px 'DM Mono', monospace; color: var(--accent); letter-spacing: .06em; }
.shop-lead { font-size: 18px; max-width: 58ch; color: var(--muted); }
.shop-jump, .shop-actions, .shop-result-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.shop-jump a { font-size: 13px; text-decoration: none; border-bottom: 1px solid var(--line); }
.shop-tool { border-top: 2px solid var(--ink); padding: 20px 0 44px; scroll-margin-top: 24px; }
.shop-tool h2 { margin: 0 0 20px; }
.shop-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.shop-common { grid-template-columns: repeat(3, minmax(0,1fr)); }
.shop-field { min-width: 0; }
.shop-field label, #incorpora label { display: block; font-size: 12px; font-weight: 600; line-height: 1.6; margin-bottom: 7px; }
.shop-field input, .shop-field select, .embed-code, .shop-manual-link { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--field-bg); color: var(--ink); font: 500 16px 'DM Mono', monospace; }
.shop-field small, .shop-hint { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 12px; }
.shop-products { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; margin: 28px 0; }
.shop-formats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.shop-product, .shop-offer { min-width: 0; border: 0; border-top: 1px solid var(--line); margin: 0; padding: 16px 0 0; }
.shop-product legend, .shop-offer legend { padding: 0 12px 0 0; font-size: 19px; font-weight: 600; color: var(--accent); }
.shop-formats .shop-fields { grid-template-columns: minmax(0,1fr); }
.shop-offers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 28px 0; }
.shop-offer .shop-field + .shop-field { margin-top: 12px; }
.shop-actions { margin-top: 24px; }
.shop-actions button, .shop-result-actions button { min-height: 46px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--ink); font: 600 13px 'Manrope', sans-serif; cursor: pointer; transition: background .2s, transform .2s; }
.shop-actions button[type=submit] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.shop-actions button:hover, .shop-result-actions button:hover { border-color: var(--accent); transform: translateY(-1px); }
.shop-actions button:active, .shop-result-actions button:active { transform: translateY(1px); }
.shop-output { margin-top: 28px; padding: 24px; background: var(--paper); border-left: 3px solid var(--accent); }
.shop-output p:last-child { margin-bottom: 0; }
.shop-empty { color: var(--muted); font-size: 14px; }
.shop-result-actions { margin-top: 16px; gap: 10px; }
.shop-error { color: var(--accent); margin: 15px 0 0; font-weight: 600; }
[aria-invalid=true] { border-color: var(--accent) !important; outline: 1px solid var(--accent); }
.shop-feedback { margin-top: 12px; font-size: 13px; color: var(--muted); }
.shopping-page .draft-bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:14px 0; margin-bottom:22px; border-bottom:1px solid var(--line); }
.shopping-page .draft-status { margin:0; font-size:12px; color:var(--muted); flex:1 1 240px; }
.shopping-page .draft-reset,.shopping-page .draft-confirm button { min-height:44px; padding:9px 13px; border:1px solid var(--line); border-radius:3px; color:var(--ink); background:var(--paper); font:600 12px 'Manrope',system-ui,sans-serif; cursor:pointer; }
.shopping-page .draft-confirm { flex-basis:100%; padding-top:12px; }
.shopping-page .draft-confirm p { font-size:13px; }
.shopping-page .draft-confirm button { margin-right:10px; }
.shop-summary { margin: 0 0 20px; font-size: 19px; font-weight: 600; }
.shop-table-wrap { overflow-x: auto; max-width: 100%; }
.shop-table { width: 100%; min-width:0; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.shop-table th, .shop-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
.shop-table th:first-child, .shop-table td:first-child { text-align: left; padding-left: 0; }
.shop-table thead th { color: var(--accent); }
.shop-table tbody th { font-weight: 500; }
.shop-table td { font-family: 'DM Mono', monospace; }
.shop-diagrams { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.shop-diagrams figure { margin: 0; min-width: 0; }
.shop-diagrams figcaption { font-weight: 600; margin-bottom: 14px; }
.shop-diagrams svg { width: 100%; height: auto; display: block; max-height: 360px; background: var(--field-bg); color: var(--accent); }
.shop-diagrams p { font-size: 12px; margin: 12px 0 0; }
.embed-code { font-size: 13px; line-height: 1.7; resize: vertical; margin-bottom: 20px; }
.shop-widget { max-width: 640px; padding: 18px; font-family: system-ui, sans-serif; }
.shop-widget header { margin-bottom: 16px; padding-bottom: 12px; }
.shop-widget h1 { font-size: 29px; }
.shop-widget .shop-tool { border-top: 0; padding-bottom: 0; }
.shop-widget .shop-output { margin-top: 18px; padding: 16px; }
.shop-widget footer { margin-top: 20px; padding-top: 12px; }
.shop-widget .shop-table { font-size: 12px; }
@media(max-width:760px) { .shop-common { grid-template-columns: repeat(2,minmax(0,1fr)); } .shop-products,.shop-formats { grid-template-columns: minmax(0,1fr); gap: 26px; } .shop-formats .shop-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .shop-fields,.shop-common,.shop-offers,.shop-formats .shop-fields,.shop-diagrams { grid-template-columns: minmax(0,1fr); } .shop-output { padding: 16px; } .shop-table th,.shop-table td { padding: 10px 8px; font-size: 12px; } .embed-code { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .shop-actions button,.shop-result-actions button { transition: none; } }
@media print { .shopping-page header,.shop-actions,.shop-result-actions,.shop-jump,#incorpora,.shop-feedback,.shopping-page .draft-bar { display:none !important; } .shop-tool { break-inside: avoid; } .shop-output { border:1px solid #aaa; } .shop-table-wrap { overflow:visible; } }