/* La tienda INTER: escaparate, ficha, administración. Superficie blanca = el fondo oficial de las fotos, para que la cuadrícula se funda en un solo escaparate. */
.shop-bar { gap: var(--s2); }
.shop-bar h1 { font-size: 1rem; letter-spacing: .01em; line-height: 1.15; }
.shop-bar h1 { white-space: normal; overflow: visible; text-overflow: clip; }
.lang-btn { min-width: 48px; font-weight: 700; }
.searchbar { display: flex; align-items: center; gap: var(--s2); background: var(--surface-2); border-radius: 14px; padding: 0 var(--s3); min-height: 48px; color: var(--muted); }
.searchbar .search { border: 0; background: transparent; box-shadow: none; flex: 1; padding-left: 0; min-width: 0; }
.searchbar .search:focus { box-shadow: none; }
.toolbar { display: flex; align-items: center; gap: var(--s2); }
.chips { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px 0; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip { flex: none; min-height: 40px; padding: 0 var(--s4); border-radius: 999px; background: var(--surface-2); color: var(--text); font-weight: 600; font-size: var(--t-sm); display: inline-flex; align-items: center; gap: 6px; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-contrast); }
.chip .n { opacity: .7; font-weight: 500; font-variant-numeric: tabular-nums; }
.wide-chip { width: auto; }
.count { background: var(--accent); color: var(--accent-contrast); border-radius: 999px; min-width: 20px; height: 20px; display: inline-grid; place-items: center; font-size: 12px; padding: 0 5px; margin-left: 4px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.grid .wide { grid-column: 1 / -1; }
.card { display: grid; gap: var(--s2); text-decoration: none; color: inherit; align-content: start; }
.tile { position: relative; aspect-ratio: 1 / 1; background: var(--catalog-bg); border-radius: 14px; overflow: hidden; }
.tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.badge { position: absolute; top: 8px; left: 8px; background: var(--accent); color: var(--accent-contrast); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.badge.offer { background: #B42318; color: #fff; }
.meta { display: grid; gap: 2px; padding: 0 2px; }
.meta .brand, .brand { font-size: var(--t-meta); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.meta .name { font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta .sub, .sub { color: var(--muted); font-size: var(--t-sm); }
.price { font-weight: 800; font-variant-numeric: tabular-nums; }
.price s { color: var(--muted); font-weight: 500; margin-right: 4px; }
.price.big { font-size: 1.6rem; }
.skel-card { aspect-ratio: 1 / 1.35; border-radius: 14px; }
.hero { max-width: 520px; width: 100%; margin: 0 auto; border: 1px solid var(--surface-2); }
.product .title { font-size: 1.35rem; line-height: 1.25; }
.original { color: var(--muted); font-size: var(--t-sm); }
.desc { line-height: 1.5; }
.info { display: grid; gap: var(--s3); }
.info-row { display: grid; gap: 2px; padding-top: var(--s3); border-top: 1px solid var(--surface-2); }
.info-row dt { font-size: var(--t-meta); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.info-row dd { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.allergen-line { display: block; }
.check { display: flex; gap: var(--s2); align-items: flex-start; color: var(--muted); font-size: var(--t-sm); }
.lang-list { display: grid; gap: 2px; }
.lang-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--s3); border-radius: 12px; font-size: var(--t-body); font-weight: 600; }
.lang-row[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.filters { display: grid; gap: var(--s4); }
.foot-actions { display: grid; gap: var(--s2); grid-auto-flow: row; }
.photo-slot { display: grid; grid-template-columns: 88px 1fr; grid-template-rows: auto auto; column-gap: var(--s4); align-items: center; padding: var(--s3); border: 1.5px dashed var(--border); border-radius: 16px; min-height: 104px; cursor: pointer; }
.photo-slot.done { border-style: solid; border-color: var(--accent); }
.photo-slot:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-preview { grid-row: 1 / 3; width: 88px; height: 88px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-title { font-weight: 700; align-self: end; }
.photo-hint { color: var(--muted); font-size: var(--t-sm); align-self: start; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
.form { display: grid; gap: var(--s4); }
.progress-box h2 { font-size: 1.25rem; }
.stages { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s2); }
.stages li { padding: var(--s3) var(--s4); border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.stages li.done { color: var(--text); }
.stages li.done::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.stages li.now { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.progress-done { display: flex; gap: var(--s3); align-items: center; }
.mini-tile { width: 64px; height: 64px; border-radius: 10px; background: var(--catalog-bg); object-fit: contain; border: 1px solid var(--surface-2); flex: none; }
.progress-done .mini-tile { width: 96px; height: 96px; }
.manage-list { display: grid; gap: var(--s3); }
.manage-row { display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); align-items: center; padding: var(--s3); border-radius: 14px; background: var(--surface-2); }
.manage-main { display: grid; gap: 2px; min-width: 0; }
.manage-main strong { overflow-wrap: anywhere; }
.manage-actions { grid-column: 1 / -1; display: flex; gap: var(--s2); justify-content: flex-end; }
.status { font-size: var(--t-meta); font-weight: 700; }
.status.published { color: var(--accent); }
.status.attention { color: #B42318; }
.reason { font-size: var(--t-meta); color: var(--muted); overflow-wrap: anywhere; }
.metric, .ai-status { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.empty.wide, .notice.wide { padding: var(--s6) var(--s3); text-align: center; display: grid; gap: var(--s3); justify-items: center; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chip.static { cursor: default; background: var(--accent-soft); color: var(--accent); min-height: 32px; }
.ai-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.login-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); counter-reset: step; }
.login-steps li { display: grid; gap: var(--s2); }
.login-steps code { font-size: 1.4rem; letter-spacing: .12em; font-weight: 700; }
.sticky-action { position: sticky; bottom: 0; z-index: 2; padding: var(--s3) 0 var(--s2); background: linear-gradient(to bottom, transparent, var(--bg) 28%); }
.shop-footer { display: grid; gap: var(--s2); justify-items: center; text-align: center; color: var(--muted); font-size: var(--t-sm); padding: var(--s6) 0 calc(var(--s6) + var(--sab)); }
.shop-footer p { margin: 0; }
.shop-footer a { color: var(--accent); font-weight: 600; text-decoration: underline; padding: var(--s3); }
.privacy-box { text-align: left; background: var(--surface-2); border-radius: 12px; padding: var(--s3) var(--s4); display: grid; gap: var(--s2); max-width: 60ch; }
.privacy-box p { margin: 0; line-height: 1.45; }