/*
Theme Name: Chamber Vacuum Sealer
Template: aff-base
Description: Clean kitchen-tech look for chamber-vacuum-sealer.com: ice blue, deep teal and brushed stainless, with crimped seal-strip motifs.
Version: 1.0.0
*/

:root {
	--bg: #f3f7f9;
	--surface: #ffffff;
	--surface-2: #e5eef2;
	--ink: #0e2a32;
	--ink-2: #34505a;
	--muted: #637a84;
	--line: #d4e0e6;
	--accent: #0b5560;
	--accent-ink: #ffffff;
	--accent-soft: #dcf0f5;
	--accent-2: #0f7d88;
	--good: #1d7a5a;
	--bad: #b8452f;
	--radius: 20px;
	--radius-sm: 10px;
	--shadow: 0 1px 2px rgba(11, 58, 68, .05), 0 10px 28px rgba(11, 58, 68, .08);
	--font-display: "Sora", "Segoe UI", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, sans-serif;
	--display-weight: 600;
	--display-tracking: -0.025em;
	--steel: linear-gradient(90deg, #b7c4ca, #eef3f5 22%, #a9b8bf 48%, #e8eef1 74%, #b7c4ca);
	--crimp: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px);
}

/* Header: frosted white with a brushed-stainless strip underneath */
.site-header { background: rgba(255, 255, 255, .88); border-bottom: 0; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--steel); }
.brand__name { font-size: 19px; font-weight: 700; }
.nav__list a { font-weight: 500; }
.nav__list a:hover, .nav__list .current-menu-item a { background: var(--accent-soft); color: var(--accent); }

/* Hero: centered, ice-blue frost with a fine dot grid */
.hero { border-bottom: 0; padding-bottom: 40px; background:
	radial-gradient(circle at 1px 1px, rgba(15, 125, 136, .13) 1px, transparent 1.6px) 0 0 / 22px 22px,
	radial-gradient(900px 420px at 50% 0%, #d6eef4, transparent 70%),
	linear-gradient(180deg, #eaf5f8, var(--bg)); }
.hero__title { font-weight: 700; max-width: 15em; margin-left: auto; margin-right: auto; }
.hero .kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); color: var(--accent); }
.hero .kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3fc4cf; box-shadow: 0 0 0 4px rgba(63, 196, 207, .2); }
.hero-center .hero__art { width: 100%; max-width: 680px; }
.btn--ghost { border-color: var(--accent); color: var(--accent); background: rgba(255, 255, 255, .7); }
.btn--ghost:hover { background: var(--accent); color: #fff; }
.btn--primary { background: linear-gradient(180deg, #11707c, var(--accent)); box-shadow: 0 6px 16px rgba(11, 85, 96, .22); }

/* Silo tiles: white pouches with a crimped seal strip at the bottom */
.silo { position: relative; overflow: hidden; padding: 22px 22px 30px; background: linear-gradient(180deg, #fff, #f6fafc); border-color: var(--line); }
.silo::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 12px; height: 7px; color: var(--accent-2); background: var(--crimp); opacity: .3; border-radius: 2px; transition: opacity .15s; }
.silo:hover::after { opacity: .7; }
.silo__icon { width: 58px; height: 58px; padding: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--accent-soft) 70%); box-shadow: inset 0 0 0 1.5px #b8dde6; color: var(--accent); }
.silo-head { background:
	radial-gradient(circle at 1px 1px, rgba(15, 125, 136, .12) 1px, transparent 1.6px) 0 0 / 22px 22px,
	radial-gradient(900px 300px at 90% -20%, var(--accent-soft), transparent 70%); }
.card--lg .card__link { background: linear-gradient(160deg, #e2f3f7, var(--surface) 62%); }
.card__icon { color: var(--accent-2); }

/* Quick picks: numbered steel tags */
.quick-picks { counter-reset: qp; border-radius: var(--radius); }
.quick-picks li { position: relative; padding-left: 64px; counter-increment: qp; }
.quick-picks li::before { content: counter(qp, decimal-leading-zero); position: absolute; left: 18px; top: 15px; width: 32px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--steel); box-shadow: inset 0 0 0 1px #9fb0b8; font: 700 12px/1 var(--font-display); color: var(--accent); letter-spacing: .02em; }

/* Product box: crimped seal strip across the top edge */
.aff-product { position: relative; overflow: hidden; padding-top: 26px; border-color: #c8dbe2; }
.aff-product::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; color: var(--accent-2); background: var(--crimp), linear-gradient(#e7f4f7, #e7f4f7); opacity: .55; }
.aff-product__icon { background: radial-gradient(circle at 35% 30%, #fff, var(--accent-soft) 75%); box-shadow: inset 0 0 0 1.5px #b8dde6; color: var(--accent); border-radius: 50%; }
.aff-product__btn, .aff-cta__btn { background: linear-gradient(180deg, #12909b, var(--accent-2)); }
.aff-cta { border-left-color: var(--accent-2); }

.promise__item { border-top: 0; position: relative; padding-top: 30px; border-radius: var(--radius); border: 1px solid var(--line); }
.promise__item::before { content: ""; position: absolute; left: 24px; right: 24px; top: 14px; height: 6px; color: var(--accent-2); background: var(--crimp); opacity: .45; }
.teaser__inner { background: linear-gradient(135deg, #dff1f6, #eef5f8 60%, #e3ebef); box-shadow: inset 0 0 0 1px #cfe2e9; }

/* Footer: deep teal with a stainless strip */
.site-footer { background: #0a262d; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--steel); opacity: .9; }
.site-footer .brand__mark .ags-logo__plate { fill: #128a96; }
.site-footer .brand__mark .ags-logo__food { fill: #0a262d; }

/* ---------- Tools ---------- */
.agt-tool-note { font-size: 14px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }
.agt-tool-src { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); line-height: 1.5; }
.agt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.agt-chips button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); font: 600 14px/1.2 var(--font-body); color: var(--ink-2); cursor: pointer; }
.agt-chips button:hover { border-color: var(--accent-2); }
.agt-chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.agt-fieldlabel { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }

/* Storage chart */
.agt-store__warn { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0 0 16px; border-radius: var(--radius-sm); background: #fff4ec; border: 1.5px solid #f1c9ad; color: #5a2c16; font-size: 15px; line-height: 1.5; }
.agt-store__warn svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; }
.agt-store__warn strong { color: #5a2c16; }
.agt-store__mode { margin-bottom: 16px; }
.agt-store__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.agt-store__tile { padding: 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid #c3e1e8; }
.agt-store__tile h4 { margin: 0 0 4px; font: 700 12px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.agt-store__tile .agt-store__time { display: block; font: 700 20px/1.25 var(--font-display); color: var(--ink); letter-spacing: -0.01em; margin-bottom: 6px; }
.agt-store__tile p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.agt-store__tile.is-never { background: #fdf1ee; border-color: #efc4b8; }
.agt-store__tile.is-never .agt-store__time { color: var(--bad); }
.agt-store__extra { margin: 10px 0 0; font-size: 14.5px; }
.agt-store__filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 20px 0 10px; }
.agt-store__count { font-size: 13.5px; color: var(--muted); margin: 0 0 6px; }
.agt-store .table-wrap { margin: 0; }
.agt-store table { min-width: 600px; }
.agt-store tr.is-picked td { background: var(--accent-soft); }
.agt-store td.is-never { color: var(--bad); font-weight: 600; }
.agt-store td small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }

/* Chamber vs external diagram */
.agt-diag__steps { margin-bottom: 16px; }
.agt-diag__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.agt-diag__panel { margin: 0; padding: 12px; border-radius: var(--radius-sm); background: linear-gradient(180deg, #f5fafc, #fff); border: 1px solid var(--line); }
.agt-diag__panel figcaption { font: 700 15px/1.3 var(--font-display); color: var(--ink); margin: 2px 2px 8px; }
.agt-diag__panel figcaption span { display: block; font: 500 13px/1.4 var(--font-body); color: var(--muted); margin-top: 2px; }
.agt-diag__panel svg { display: block; width: 100%; height: auto; }
.agt-diag__panel p { margin: 10px 2px 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.agt-diag .agd-step { display: none; }
.agt-diag[data-step="1"] .agd-on1, .agt-diag[data-step="2"] .agd-on2, .agt-diag[data-step="3"] .agd-on3 { display: inline; }
.agt-diag[data-step="1"] .agd-faint { opacity: .45; }
.agt-diag .agd-flow { stroke-dasharray: 6 6; animation: agd-flow 1.2s linear infinite; }
@keyframes agd-flow { to { stroke-dashoffset: -12; } }

/* Comparison table filter */
.agt-cmp__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.agt-cmp__group { margin-bottom: 14px; }
.agt-cmp__group[hidden], .agt-cmp__field[hidden] { display: none; }
.agt-cmp .aff-tool__result { font-size: 15px; }
.agt-cmp + .agt-tool-note { margin-top: 8px; }
.agt-cmp-table tr.is-dim td { opacity: .35; }

@media (max-width: 760px) {
	.agt-store__tiles, .agt-diag__grid, .agt-store__filters, .agt-cmp__row { grid-template-columns: 1fr; }
	.agt-store__tile .agt-store__time { font-size: 18px; }
	.quick-picks li { padding-left: 58px; }
	.quick-picks li::before { left: 14px; }
	.aff-tool { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.agt-diag .agd-flow { animation: none; }
}