/* Hand-maintained: fits the Set 5 homepage (home.css, generated) into the app's shared header/footer and backend data. */
.fp-home .product .media img{width:78%;height:78%;object-fit:contain;transition:transform .6s var(--ease)}
.fp-home .product:hover .media img{transform:scale(1.06)}
.fp-home .product h3 a{color:inherit}
.fp-home .product[data-href] .media{cursor:pointer}
.fp-home .wc-brand-img{max-height:38px;width:auto;object-fit:contain}

/* phones: keep the quick-action bar from covering the bottom of the site footer (homepage only: other pages using
   this header and footer have no bar) */
@media (max-width:760px){
  body:has(.m-dock){padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .fp-home{padding-bottom:0}
}

/* the real space between the headline words (see import-home-theme.mjs); inline so it disappears when the line wraps */
.fp-home .hero h1 .line>span.hero-sp{display:inline}

/* header and footer wrappers (component/home/homeHeader.js, homeFooter.js) */
.fp-home.fp-home-shell{background:none;overflow:visible;padding:0}
.fp-home .fp-cart{position:relative}
.fp-home .fp-cart-badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--grad-primary);color:#fff;font:700 11px/18px var(--font-head);text-align:center}
.fp-home .fp-account{position:relative;display:inline-flex}
/* signed in: photo or initials on an orange circle instead of the outline icon (homeHeader.js) */
.fp-home .icon-btn.fp-me,.fp-home .icon-btn.fp-me:hover{border-radius:50%;overflow:hidden;background:var(--primary);color:#fff}
.fp-home .fp-me:has(.fp-me-av) svg{display:none}
.fp-home .fp-me-av{display:grid;place-items:center;width:100%;height:100%;font:800 15px var(--font-head)}
.fp-home .fp-me-av img{width:100%;height:100%;object-fit:cover}
.fp-home .fp-news-error{margin-top:6px;font-size:12.5px;color:#FCA5A5}

/* The site's global CSS (styles/utilities.css body + p, styles/style.css .price, Bootstrap's h2 / .btn / .row / .card)
   also matches the homepage markup. The theme was designed on browser defaults, so put those back inside it. */
body{background:#fff}
[data-theme="dark"] body{background:#0B0B0C}
.fp-home{font-weight:400;letter-spacing:normal}
.fp-home p{font-weight:inherit}
.fp-home .rent3-copy h2{font-weight:700}
.fp-home .btn{line-height:inherit;text-align:revert;vertical-align:baseline;user-select:auto;border-width:0}
.fp-home .btn--ghost,.fp-home .btn--dark-ghost{border-width:1px}
.fp-home .price{line-height:inherit}
.fp-home .card{word-wrap:normal;color:inherit}
.fp-home .holo .row,.fp-home .scr .row{flex-wrap:nowrap;margin:0}
.fp-home .holo .row>*,.fp-home .scr .row>*{width:auto;max-width:none;flex-shrink:1;padding:0;margin:0}
.fp-home .nav{flex-wrap:nowrap}

/* FixPapa Assistant (assistant.css) mounts on <body>, outside .fp-home: same global-CSS reset for it */
.fpa-root{font-weight:400;letter-spacing:normal;line-height:1.6;color:#0B1220}
:where(.fpa-root) button{font:inherit}
.fpa-root p{font-weight:inherit}

/* other pages drawing this header (component/layout.js): room for the fixed bar, as tall as it is before scrolling */
.fp-hdr-space{height:var(--fp-hdr-h,124px)}
@media (max-width:1024px){.fp-hdr-space{height:var(--fp-hdr-h,71px)}}

/* refurbished tiles: one column per category (refurbishedCategories.js has five, laptops to servers) */
@media (min-width:1101px){.fp-home .rfh-cats{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* section labels: a plain, still dot. home.css and repair.css give it a halo ring and a looping pulse. 5px + 1px margin
   keeps the 6px box, so the label text does not move. */
.fp-home .eyebrow::before{width:5px;height:5px;margin-right:1px;flex:none;box-shadow:none;animation:none}
.fp-home #ewaste .eyebrow::before{box-shadow:none}
.fp-home .sys-online::before{box-shadow:none}

/* "You save" under the price: plain orange text, without the theme's green dot (the theme's deeper orange, for small text) */
.fp-home .rf-save{gap:0;font-weight:500;color:#E85D04}
.fp-home .rf-save::before{content:none}

/* status labels: plain text instead of green pills; the "% off" sits beside the old price */
.fp-home .rf-pct{padding:0;border-radius:0;background:none;color:#E85D04;font-weight:600}
.fp-home .rcalc-pct{padding:0;border-radius:0;background:none;color:#FDBA74}
/* condition label on a card ("Like New", "Good Condition"): flat brand orange instead of the theme's black; white text stays readable on it */
.fp-home .rf-grade{background:var(--primary)}
/* "% Off" on a product card: solid so it reads on any photo, and above the image, which would otherwise cover it. Same flat orange as .rf-grade. */
.fp-home .product .off,[data-theme="dark"] .fp-home .product .off{z-index:2;background:var(--primary);color:#fff}
/* live indicators: a still dot, without the halo or pulse */
.fp-home .ts3-live i,.fp-home .fpp-live i,.fp-home .tk-live i,.fp-home .status-chip .dot{box-shadow:none;animation:none}

/* warranty check: no serial number, so the card under the heading is one line of copy and the button */
.fp-home .wc-panel{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 20px;align-items:center;align-content:center;padding:20px 22px;border-radius:18px;background:#fff;border:1px solid var(--border)}
.fp-home .wc-panel-copy b{display:block;font-weight:700;font-size:15.5px;color:var(--ink)}
.fp-home .wc-panel-copy b span{color:var(--primary)}
.fp-home .wc-panel-copy small{display:block;margin-top:4px;font-size:13px;color:var(--ink-3)}
.fp-home .wc-panel .btn{height:50px;border-radius:14px}
.fp-home .wc-panel .wc-state{grid-column:1/-1;margin-top:0}
/* clearing the search goes back to the first brand: without this the browser holds the list on the brand that was found */
.fp-home .wc-scroll .wc-list{overflow-anchor:none}
[data-theme="dark"] .fp-home .wc-panel{background:#1C1D24}
@media (max-width:640px){
  .fp-home .wc-panel{grid-template-columns:minmax(0,1fr);padding:16px}
  .fp-home .wc-panel .btn{width:100%;justify-content:center}
}