/* Indexable pages (WP-E): /ofertas, /descuentos-bancarios, /p/. Mobile first (390 px),
   light and dark through css/tokens.css ([data-theme]). css/styles.css + css/mobile.css load
   first for the site header only; the rules marked below undo their page-wide resets. */

/* styles.css resets every margin/padding: give the page content its browser defaults back
   (zero specificity, so every rule here still wins) */
:where(.seo-main) * { margin: revert; padding: revert; }

.seo-page {
    --seo-max: 760px;
    --seo-price: var(--success-text);
    --seo-link: var(--text-link);
    --seo-badge-good-bg: #047857;
    --seo-badge-info-bg: rgba(59, 130, 246, 0.2);
    --seo-badge-info-fg: #93c5fd;
    --seo-warn-bg: rgba(245, 158, 11, 0.12);
    --seo-info-bg: rgba(59, 130, 246, 0.1);
    --seo-best-bg: rgba(16, 185, 129, 0.1);
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg-primary);
    background-image: var(--surface-app);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    display: block;  /* styles.css makes body a flex column (content would shrink to fit) */
    height: auto;    /* and pins it to the viewport on iOS */
}

[data-theme="light"] .seo-page {
    --seo-price: #047857;
    --seo-link: #1d4ed8;
    --seo-badge-info-bg: #dbeafe;
    --seo-badge-info-fg: #1d4ed8;
    --seo-warn-bg: #fef3c7;
    --seo-info-bg: #eff6ff;
    --seo-best-bg: #ecfdf5;
}

.seo-page *, .seo-page *::before, .seo-page *::after { box-sizing: border-box; }
.seo-page [hidden] { display: none !important; }
:is(.seo-main) a { color: var(--seo-link); }  /* the header keeps the site's colours */
:is(.seo-main) :is(a, button, input, summary):focus-visible {
    outline: 2px solid var(--brand-primary-hover);
    outline-offset: 2px;
}
.seo-page img { max-width: 100%; }

.seo-skip {
    position: absolute; left: -9999px; top: 8px; z-index: 5001;  /* over the site header */
    padding: 8px 12px; border-radius: var(--radius-sm);
    background: var(--brand-primary); color: #fff !important;
}
.seo-skip:focus { left: 8px; }

/* --- layout --- */
.seo-main { max-width: var(--seo-max); margin: 0 auto; padding: 80px 16px 24px; }  /* clears the fixed header pill */
.seo-hero { padding: 16px 0 4px; }
.seo-hero h1, .seo-error h1 {
    margin: 0 0 4px; font-size: 1.5rem; line-height: 1.25; color: var(--text-heading); letter-spacing: -0.01em;
}
.seo-lead { margin: 0 0 12px; color: var(--text-secondary); font-size: 0.95rem; }
.seo-card {
    margin: 16px 0; padding: 16px;
    background: var(--surface-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.seo-card h2 { margin: 0 0 8px; font-size: 1.1rem; line-height: 1.3; color: var(--text-heading); }
.seo-card p { margin: 8px 0 0; }
.seo-muted { color: var(--text-tertiary); }
.seo-small { font-size: 0.8rem; }
.seo-plain { margin: 0; padding: 0; list-style: none; }
.seo-plain li { padding: 4px 0; }
.seo-method { margin: 12px 0; }

.seo-notice {
    margin: 12px 0; padding: 10px 12px; border-radius: var(--radius-sm);
    font-size: 0.9rem; color: var(--text-primary);
}
.seo-notice-info { background: var(--seo-info-bg); border-left: 3px solid var(--brand-primary); }
.seo-notice-warn { background: var(--seo-warn-bg); border-left: 3px solid var(--warning-primary); }

/* chips (regions, categories, days): one scrollable row, never wraps into a wall */
.seo-chips {
    position: relative; display: flex; gap: 8px; margin: 8px -16px; padding: 2px 16px;
    overflow-x: auto; scrollbar-width: none;
}
.seo-chips::-webkit-scrollbar { display: none; }
.seo-chip {
    flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
    border: 1px solid var(--border-medium); border-radius: var(--radius-full);
    background: var(--surface-control); color: var(--text-primary) !important;
    text-decoration: none; font-size: 0.875rem; white-space: nowrap;
}
.seo-days-nav { gap: 6px; }
.seo-days-nav .seo-chip { padding: 6px 10px; }
.seo-chip[aria-current="page"] { background: var(--brand-primary); border-color: transparent; color: #fff !important; font-weight: 600; }

.seo-error .seo-plain { margin-top: 12px; }

/* --- badges --- */
.seo-badge {
    display: inline-block; padding: 2px 8px; border-radius: var(--radius-full);
    font-size: 0.72rem; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle;
}
.seo-badge-pct, .seo-badge-best { background: var(--seo-badge-good-bg); color: #fff; }
.seo-badge-mb { background: var(--color-amber-500); color: #1f1300; }
.seo-badge-low, .seo-badge-today { background: var(--seo-badge-info-bg); color: var(--seo-badge-info-fg); }
.seo-badge-offer { background: var(--surface-control-hover); color: var(--text-primary); border: 1px solid var(--border-medium); }
.seo-unit { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }

/* --- deals feed --- */
.seo-deals { margin: 12px 0; padding: 0; list-style: none; }
/* the card itself: css/product-card.css, shared with search */
.seo-deal-link { color: inherit !important; text-decoration: none; }
.seo-deal-out { color: var(--text-tertiary); font-size: 0.85rem; }
.seo-deal-page { display: inline-block; padding: 10px 0; }
.seo-mine { margin: 10px 0 0; font-size: 0.9rem; }
.seo-mine-change {
    padding: 4px 0; border: 0; background: none; color: var(--text-link); font: inherit;
    text-decoration: underline; cursor: pointer;
}
.seo-deal-img-empty { display: block; background: var(--surface-control); }
.seo-deal-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.seo-deal-ref { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--text-tertiary); line-height: 1.35; }
.seo-sponsored-slot { margin: 0 0 8px; }

/* --- buttons --- */
.seo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.seo-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px;
    border: 1px solid var(--border-medium); border-radius: var(--radius-md);
    background: var(--surface-control); color: var(--text-primary) !important;
    font-weight: 600; font-size: 0.95rem; text-decoration: none;
}
.seo-btn-primary { background: var(--brand-primary); border-color: transparent; color: #fff !important; }
.seo-btn-primary:hover { background: var(--brand-primary-hover); }
.seo-share { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0; font-weight: 600; color: var(--seo-price) !important; }
.seo-pager { display: flex; justify-content: space-between; gap: 8px; margin: 16px 0; }

/* --- bank days --- */
.seo-days { margin: 12px 0; padding: 0; list-style: none; }
.seo-day { margin: 0 0 8px; }
.seo-day a {
    display: block; padding: 12px 16px;
    background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    color: inherit !important; text-decoration: none;
}
.seo-day-name { display: block; font-weight: 700; color: var(--text-strong); }
.seo-day-sum { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--text-secondary); }
.seo-promos { margin: 0; padding: 0; list-style: none; }
.seo-promo { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.seo-promo:first-child { border-top: 0; padding-top: 4px; }
.seo-promo-pct { flex: none; min-width: 52px; font-size: 1.3rem; font-weight: 800; color: var(--seo-price); line-height: 1.2; }
.seo-promo-body { min-width: 0; flex: 1; }
.seo-promo-bank { display: block; font-weight: 600; color: var(--text-strong); }
.seo-promo-lines span { display: block; font-size: 0.85rem; color: var(--text-secondary); }
.seo-cond { margin-top: 6px; font-size: 0.85rem; }
.seo-cond summary, .seo-weeks-table summary { cursor: pointer; color: var(--seo-link); min-height: 32px; display: list-item; }
.seo-cond p { margin: 4px 0 0; color: var(--text-tertiary); overflow-wrap: anywhere; }

/* --- product --- */
.seo-product-hero { display: flex; gap: 12px; align-items: center; }
.seo-product-img { flex: none; width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: var(--radius-md); }
.seo-product-head { min-width: 0; }
.seo-product-head p { margin: 0; font-size: 0.9rem; }
.seo-summary { margin: 0 !important; font-size: 1.05rem; }
.seo-summary strong { font-size: 1.4rem; color: var(--seo-price); }
.seo-region-best { margin-top: 8px; font-size: 0.9rem; }
.seo-region-best li { padding: 2px 0; }
.seo-prices { margin: 0; padding: 0; list-style: none; }
.seo-price-row {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
    padding: 10px 8px; margin: 0 -8px; border-top: 1px solid var(--border-subtle);
}
.seo-price-row:first-child { border-top: 0; }
.seo-price-best { background: var(--seo-best-bg); border-radius: 8px; border-top-color: transparent; }
.seo-price-best + .seo-price-row { border-top-color: transparent; }
/* stale or doubtful rows: dim only the chain and the price, never the notes that say why
   (row opacity pushed those warnings below 4.5:1 in both themes) */
.seo-price-stale .seo-price-chain, .seo-price-stale .seo-price-amount { color: var(--text-secondary); font-weight: 500; }
.seo-price-stale .seo-price-amount strong { font-weight: 600; }
.seo-price-stale { border-left: 3px dashed var(--border-medium); padding-left: 5px; }  /* 5 + 3 = the 8 px of the others */
.seo-price-chain { font-weight: 600; color: var(--text-strong); }
.seo-price-amount { text-align: right; white-space: nowrap; }
.seo-price-amount strong { font-size: 1.05rem; }
.seo-price-notes, .seo-price-meta, .seo-out { grid-column: 1 / -1; }
.seo-price-notes { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 0.85rem; }
.seo-price-meta { font-size: 0.78rem; color: var(--text-tertiary); }
.seo-out { font-size: 0.85rem; justify-self: start; padding: 4px 0; }
.seo-weeks table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.9rem; }
.seo-weeks th, .seo-weeks td { padding: 4px 0; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.seo-weeks th:last-child, .seo-weeks td:last-child { text-align: right; }

@media (min-width: 560px) {
    .seo-hero h1 { font-size: 1.9rem; }
    .seo-columns { columns: 2; }
}