/* Editorial Room stylesheet.
 *
 * Adapted from prototypes/vacuum-indonesia/styles.css so the published artifact looks like the
 * vacuum prototype. The Blade templates use the prototype's own class names, so every class they
 * emit is defined here. Two deliberate deviations: the hero uses a gradient instead of the
 * prototype's local scene photo (canonical artifacts carry no prototype assets), and the mobile
 * menu uses a <details> toggle instead of JS (canonical audit rejects inline scripts).
 */
:root{--ink:#18231f;--green:#18372f;--leaf:#2f7359;--mint:#e7f1eb;--paper:#f8f7f1;--line:#d8ddd8;--sun:#e9d071;--muted:#58645f}html{color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,sans-serif}main,section,article,aside,header,footer{min-width:0}p,li,dd,a{overflow-wrap:anywhere}a{color:inherit}img{max-width:100%;display:block}:focus-visible{outline:3px solid #9b6d00;outline-offset:3px}
.skip-link{position:absolute;left:-999px}.skip-link:focus{left:1rem}.shell{width:min(1180px,calc(100% - 2rem));margin-inline:auto}.section{padding:clamp(3rem,7vw,5rem) 0}.section-intro{max-width:68ch;color:var(--muted)}
header{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:.8rem max(1rem,calc((100% - 1180px)/2));border-bottom:1px solid var(--line);position:sticky;top:0;background:#f8f7f1ee;backdrop-filter:blur(12px);z-index:5}.logo{font:900 1.4rem Georgia,serif;text-decoration:none}.logo span{color:var(--leaf)}.logo small{display:block;font:600 .6rem system-ui;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.navigation{margin-left:auto}.navigation summary{cursor:pointer;list-style:none;border:1px solid var(--line);border-radius:8px;background:white;padding:.5rem .7rem;font-weight:700}.navigation summary::-webkit-details-marker{display:none}.navigation nav{display:flex;gap:.4rem;flex-wrap:wrap;padding:.8rem 0}.navigation nav a{padding:.45rem .6rem;border-radius:8px;text-decoration:none;font-weight:700}.navigation nav a[aria-current]{background:var(--mint)}
/* A closed <details> lays out its summary only. Hiding that summary leaves the links with no box,
   so the nav sits beside the control. Under 900px it stays hidden until the control opens. */
header>nav#nav{display:none}details.navigation[open]~nav#nav{display:flex;flex-direction:column;flex:1 0 100%;gap:.4rem;position:static;width:100%;min-width:0;margin:.75rem 0 0;padding:.75rem;background:var(--paper,#f8f7f1);color:var(--ink,#18231f);border:1px solid var(--line,#d8ddd8);z-index:1}details.navigation[open]~nav#nav a{display:block;width:100%;color:inherit;padding:.55rem .7rem;white-space:normal;overflow-wrap:normal;word-break:normal}
@media(min-width:900px){header{flex-wrap:wrap}.logo{flex:0 0 auto;min-width:max-content}header details.navigation{display:none}.navigation>summary{display:none}header>nav#nav{display:flex;flex:0 0 auto;flex-wrap:nowrap;align-items:center;gap:1rem;margin-left:auto;position:static;width:max-content;min-width:max-content;background:none;border:0;padding:0}header>nav#nav a{padding:.35rem 0;white-space:nowrap;overflow-wrap:normal}}
.hero{min-height:560px;background:linear-gradient(105deg,#102b24f2,#18372fcf 55%,#18372f55);color:white;display:flex;align-items:center}.hero-shade{width:100%}.hero-copy{color:white}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;font-weight:900;color:var(--leaf)}.hero-copy .eyebrow{color:#d8ed80}h1,h2,h3{font-family:Georgia,serif;line-height:1.05}h1{font-size:clamp(2.6rem,7vw,5rem);max-width:850px;margin:.4rem 0}.lede{max-width:680px;font-size:1.15rem}.actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1rem}.button{background:var(--sun);color:var(--ink);padding:.85rem 1rem;border-radius:4px;text-decoration:none;font-weight:900;border:0}.button.ghost{background:transparent;color:#fff;border:1px solid #fff}.button.light{color:var(--ink)}.button.ghost.light{color:#fff;background:transparent;border-color:#fff}.button.full{width:100%;text-align:center}.hero-note{opacity:.85;font-size:.9rem}
.journey{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}.journey article{background:white;border:1px solid var(--line);border-radius:12px;padding:1.5rem}.journey span{font-weight:900;color:var(--leaf)}.journey b{display:block;margin:.3rem 0}.journey p{margin:0;color:var(--muted)}
.needs{display:grid;gap:.8rem;margin-top:1rem}.needs a{display:flex;gap:1rem;align-items:baseline;background:white;border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem;text-decoration:none}.needs b{font-size:1.05rem}.needs span{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start}.grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:white;border:1px solid var(--line);border-radius:12px;padding:1.2rem;min-width:0;display:flex;flex-direction:column;height:auto;align-self:start}.card-body{display:flex;flex-direction:column;flex:0 0 auto}.card-body>*+*{margin-top:.6rem}.card-body p{flex:0 0 auto}.brand-mark{font-weight:900;color:var(--leaf);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}.card h3{margin:.2rem 0;font-size:1.1rem}.card h3 a{text-decoration:none}.card-actions{margin-top:.6rem}.card-price{display:block}.card-disclosure{font-size:.85rem;color:var(--muted)}
.product-hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:1.5rem;align-items:start}.product-media{margin:0}.product-media img{border-radius:12px}.product-media figcaption{font-size:.85rem;color:var(--muted)}.image-fallback{display:grid;place-items:center;gap:.4rem;background:var(--mint);border:1px dashed var(--line);border-radius:12px;min-height:220px;color:var(--muted);text-align:center;padding:1.5rem}.image-fallback.full{min-height:320px}.image-fallback small{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}.image-fallback span{font-size:2rem;line-height:1;opacity:.6}.empty-cell{padding:.75rem .625rem;color:var(--muted);text-align:center;font-style:italic}
.price{font-size:1.4rem;font-weight:900}.compare-price{font-variant-numeric:tabular-nums}.offer-status{font-size:.9rem}.muted{color:var(--muted)}.source{font-size:.85rem;font-weight:700}.source-list{list-style:none;padding:0}.source-list li{padding:.4rem 0;border-top:1px solid var(--line)}
.facts{list-style:none;padding:0;display:grid;gap:.5rem}.facts li{background:white;border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem}.claim{display:inline-block;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;border-radius:6px;padding:.15rem .45rem;margin-right:.5rem;background:var(--mint);color:var(--green)}.claim.official{background:#dcefe4}.claim.editorial{background:#fdf0d5}.claim.third{background:#e8e4f6}
.detail{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1.5rem;margin-top:1.5rem}.detail aside{background:white;border:1px solid var(--line);border-radius:12px;padding:1.2rem;align-self:start}.yes{border-left:4px solid var(--leaf);padding-left:.6rem}.no{border-left:4px solid #b3541e;padding-left:.6rem}
.prose{max-width:72ch}.prose h2{margin-top:1.5rem}.editorial{background:white;border:1px solid var(--line);border-radius:12px;padding:1.5rem}.panel{background:white;border:1px solid var(--line);border-radius:12px;padding:1.5rem;margin:1.5rem 0}
.brands .brand-mark{display:block;background:white;border:1px solid var(--line);border-radius:12px;padding:1.2rem;text-decoration:none}.category{display:flex;flex-direction:column;height:100%;background:white;border:1px solid var(--line);border-radius:12px;padding:1.2rem;text-decoration:none}.category>div{display:flex;flex-direction:column;flex:1 1 auto;height:100%}.category h3{margin:.2rem 0}.category p{flex:1 1 auto}.category .textlink,.category .text-link{margin-top:auto}.textlink{font-weight:700}.text-link{font-weight:700;color:var(--leaf)}
.compare table,.spec-table{width:100%;border-collapse:collapse;background:white}.compare th,.compare td,.spec-table th,.spec-table td{border:1px solid var(--line);padding:.6rem;text-align:left;vertical-align:top}
.result-heading{background:var(--mint);border-radius:12px;padding:.8rem 1rem}.trust{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;background:white;border:1px solid var(--line);border-radius:12px;padding:1.5rem;margin-top:1.5rem}.sources{font-size:.95rem}.disclosure{font-size:.9rem;color:var(--muted)}
footer{display:grid;grid-template-columns:1fr 1fr;gap:2rem;background:var(--green);color:white;padding:3rem max(1rem,calc((100% - 1180px)/2))}footer a{color:white}
.empty{background:white;border:1px dashed var(--line);border-radius:12px;padding:1.5rem}.empty h3{margin-top:0}.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid,.grid.two,.three,.journey,.product-hero,.detail,.trust{grid-template-columns:1fr}h1{font-size:clamp(2.2rem,10vw,3.2rem)}footer{grid-template-columns:1fr}}
/* Interface elements the templates use that neither the theme's own sheet nor the prototype it was
   adapted from defines. Only custom properties are used, so each theme gets these in its own
   colours. Generated by tools/theme-residual-styles.php. */
.buy-box-header{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--line,#ddd);margin-bottom:1rem}
.buy-box-header h2,.buy-box-header h3{margin:0}
.calc-range{width:100%;accent-color:var(--brand,var(--purple,#6f2cff))}
.slider-control{display:grid;gap:.35rem;margin-bottom:1rem}
.slider-control label{font-size:.875rem;opacity:.85}
.compare-form{display:grid;gap:1rem;padding:1rem;border:1px solid var(--line,#ddd);border-radius:.5rem;margin-bottom:1.5rem}
.compare-form select,.compare-form input{width:100%;padding:.5rem;border:1px solid var(--line,#ddd);border-radius:.35rem;background:var(--paper,#fff);color:inherit;font:inherit}
.aspect-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:1.5rem 0}
.aspect-card{padding:1rem;border:1px solid var(--line,#ddd);border-radius:.5rem}
.aspect-card h3{margin:0 0 .5rem}
.aspect-diff{display:grid;gap:.35rem}
.aspect-diff>div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dashed var(--line,#ddd)}
.aspect-winner-row{font-weight:700;color:var(--brand,var(--purple,#6f2cff))}
/* Shared layout structure. The layout names these the same way in every theme, and no theme
   defined them, so they rendered with browser defaults: a skip link visible on the page, a
   three-column grid that was one column, a secondary button with no affordance. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:.6rem 1rem;background:var(--ink,#17332d);color:var(--paper,#fff);text-decoration:none}
.skip-link:focus{left:0}
.three{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.prose>:first-child{margin-top:0}
.prose>*:last-child{margin-bottom:0}
.lede{font-size:1.125rem;line-height:1.6;opacity:.88;margin:0 0 1rem}
.section-intro{max-width:60ch;opacity:.85;margin:0 0 1.5rem}
.hero-note{padding:.75rem 1rem;border:1px solid currentColor;border-radius:.5rem;opacity:.9}
.result-heading{font-size:1.25rem;margin:0 0 .75rem}
.footer-label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.journey,.needs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.trust{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center}
/* Residual interface elements: structures the shared layout names that neither a theme's own sheet
   nor the prototype it was adapted from ever defined. */
.navigation{display:flex;align-items:center}
.navigation>summary{cursor:pointer;list-style:none}
.navigation>summary::-webkit-details-marker{display:none}
.navigation[open]>summary~nav{position:absolute;right:1rem;top:100%;min-width:14rem;padding:.75rem;background:var(--paper,#fff);border:1px solid var(--line,#ccc);z-index:30}

/* The menu is a closed <details>. Above 900px the summary is hidden and the links have to
   show without a click. A closed details sizes to its summary, and with the summary hidden
   that width is 0. min-width:0 plus overflow-wrap:anywhere then stacks each letter. The bar
   is sized to the links instead, and the links stay on one line. */
@media(min-width:900px){
header{flex-wrap:wrap}
.logo{flex:0 0 auto;min-width:max-content}
header details.navigation{display:none}
.navigation>summary{display:none}
header>nav#nav{position:static;display:flex;flex:0 0 auto;flex-wrap:nowrap;align-items:center;gap:1rem;margin-left:auto;background:none;border:0;padding:0;width:max-content;min-width:max-content}
header>nav#nav a{padding:.35rem 0;white-space:nowrap;overflow-wrap:normal}
}
.ghost{background:none;border:1px solid currentColor;border-radius:.35rem}
.ghost:hover{opacity:.8}
.shell.hero-copy,.hero-copy{min-width:0}
.theme-mark,.brand-spark{display:inline-flex;align-items:center;gap:.35rem}
.buy-box-header{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--line,#ddd);margin-bottom:1rem}
.buy-box-header h2,.buy-box-header h3{margin:0}
.calc-range{width:100%;accent-color:var(--brand,var(--purple,#6f2cff))}
.slider-control{display:grid;gap:.35rem;margin-bottom:1rem}
.slider-control label{font-size:.875rem;opacity:.85}
.compare-form{display:grid;gap:1rem;padding:1rem;border:1px solid var(--line,#ddd);border-radius:.5rem;margin-bottom:1.5rem}
.compare-form select,.compare-form input{width:100%;padding:.5rem;border:1px solid var(--line,#ddd);border-radius:.35rem;background:var(--paper,#fff);color:inherit;font:inherit}
.aspect-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:1.5rem 0}
.aspect-card{padding:1rem;border:1px solid var(--line,#ddd);border-radius:.5rem}
.aspect-card h3{margin:0 0 .5rem}
.aspect-diff{display:grid;gap:.35rem}
.aspect-diff>div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dashed var(--line,#ddd)}
.aspect-winner-row{font-weight:700;color:var(--brand,var(--purple,#6f2cff))}
/* Sprint 52 homepage pattern. Card photos keep their ratio inside a square frame, so a
   1024px height attribute cannot stretch a narrow column into a 240x1024 hole. The open
   mobile menu stays in the header flow, under the wordmark, and does not cover the title.
   Trust and the footer keep a gap so they read as two sections. */
img{max-width:100%;height:auto}
.card>.product-media{aspect-ratio:1;position:relative;overflow:hidden;background:var(--mint);border-radius:12px;margin:0 0 .8rem}
.card>.product-media img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center}
.hero{min-height:0;padding:clamp(2.25rem,6vw,4.5rem) 0}
main>section.trust{margin-bottom:clamp(2.75rem,8vw,5rem)}
footer{margin-top:clamp(1.5rem,4vw,2.5rem)}
.footer-legal{grid-column:1 / -1;margin:.75rem 0 0;max-width:68ch}
.name-source{margin:.15rem 0 .35rem}
@media(max-width:900px){
header{flex-wrap:wrap;align-items:center}
header>.logo{flex:1 1 auto;min-width:0}
header details.navigation{flex:0 0 auto;margin-left:auto}
details.navigation[open]~nav#nav{display:flex;flex-direction:column;flex:1 0 100%;position:static;top:auto;right:auto;width:100%;min-width:0;max-width:100%;margin:.75rem 0 0;gap:.4rem;padding:.75rem;background:var(--paper,#f8f7f1);color:var(--ink,#18231f);border:1px solid var(--line,#d8ddd8);z-index:1}
details.navigation[open]~nav#nav a{display:block;width:100%;color:inherit;padding:.55rem .7rem;white-space:normal;overflow-wrap:normal;word-break:normal;line-height:1.4}
}
 pre,code{white-space:pre-wrap;overflow-wrap:anywhere}