/* PickCleverly — public catalog pages (categories, category, product).
   Loaded AFTER home.css on the catalog pages only. It adds no colour, font or radius of its own: every value is a design token
   (pc-tokens.css) and every card, button, chip and tile is the Home R2 one. Desktop uses the same canvas units as home.css
   (calc(var(--u) * N), N canvas px of the 1024px composition); below 1000px it uses fixed sizes, exactly as home.css does.
   Strict CSP: styling lives only in the three stylesheets, never inline. */

.catalog{display:block}
.crumbs ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;color:var(--text-muted)}
.crumbs li+li::before{content:"/";margin:0 .55em;color:var(--border)}
.crumbs a{color:var(--blue-deep)}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--text);font-weight:600}
.prod .pc-chip--orange{background:var(--orange-tint);color:var(--accent-text)}
.prod__list{list-style:none;margin:0;padding:0}
.prod__list li{display:flex;gap:.6em;align-items:flex-start}
.prod__list .ic{color:var(--positive-text);margin-top:.2em}
.prod__list--con .prod__dash{color:var(--negative);font-weight:700;flex:none;width:1em;text-align:center}
.prod__score{display:inline-block;border-radius:var(--radius-pill)}
.prod__meta,.prod__bestfor{color:var(--text-muted)}
.prod__text p+p{margin-top:.8em}
.offer{border:1px solid var(--divider);border-radius:var(--radius-lg);background:var(--surface-muted)}
.offer--available{background:var(--surface);border-color:var(--border)}
.offer__title{font-weight:700;color:var(--navy)}
.offer__price b{color:var(--navy)}
.offer__note{color:var(--text-muted)}
.offer__note a{color:var(--blue-deep);text-decoration:underline}
.spec{width:100%;border-collapse:collapse}
.spec caption{text-align:left;font-weight:700;color:var(--navy)}
.spec th,.spec td{text-align:left;vertical-align:top;border-top:1px solid var(--divider)}
.spec th{font-weight:600;color:var(--text);width:34%}
.spec td{color:var(--text-muted)}
.pager{display:flex;align-items:center;justify-content:center}
.pager__link{border:1px solid var(--navy);border-radius:var(--radius-pill);color:var(--navy);font-weight:700}
.pager__link:hover{background:var(--surface-muted)}
.pager__now{color:var(--text-muted)}
/* An advertising position is rendered only when something is served (App\Core\AdSlot); an empty one has no markup at all. */
.adslot{display:flex;justify-content:center}
.adslot:empty{display:none}

@media (min-width:1000px){
.crumbs{width:calc(var(--u) * 1024);margin:0 auto;padding:calc(var(--u) * 14) calc(var(--u) * 47) 0;font-size:calc(var(--u) * 10);line-height:calc(var(--u) * 14)}
.cat-head{padding-top:calc(var(--u) * 14)}
.h2--page{font-size:calc(var(--u) * 28);line-height:calc(var(--u) * 36);font-weight:800}
.cat-head .section__sub{margin-top:calc(var(--u) * 4);max-width:calc(var(--u) * 640)}
.cat-list,.cat-picks{padding-bottom:calc(var(--u) * 8)}
.cat-picks{padding-top:calc(var(--u) * 22)}
.cat-list{padding-top:calc(var(--u) * 12)}
.cats--index{grid-template-columns:repeat(8,calc(var(--u) * 111))}
.cats--index li{display:block}
.cats--index .cat{width:100%}
.picks--list{grid-template-columns:repeat(4,calc(var(--u) * 224));row-gap:calc(var(--u) * 13)}
.cat-picks .empty{margin-top:calc(var(--u) * 10)}
.pager{gap:calc(var(--u) * 16);margin-top:calc(var(--u) * 22);font-size:calc(var(--u) * 10.4)}
.pager__link{padding:calc(var(--u) * 6) calc(var(--u) * 16)}
.adslot{width:calc(var(--u) * 1024);margin:calc(var(--u) * 16) auto 0;padding:0 calc(var(--u) * 47)}
.prod{padding-top:calc(var(--u) * 16);padding-bottom:calc(var(--u) * 12)}
.prod__grid{display:grid;grid-template-columns:calc(var(--u) * 300) 1fr;gap:calc(var(--u) * 28)}
.prod__media{height:calc(var(--u) * 280);border:1px solid var(--divider);border-radius:calc(var(--u) * 9);background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:calc(var(--u) * 12)}
.prod__media img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.prod__badge{margin-bottom:calc(var(--u) * 6)}
.prod__meta{font-size:calc(var(--u) * 11);line-height:calc(var(--u) * 16);margin-top:calc(var(--u) * 2)}
.prod__bestfor{font-size:calc(var(--u) * 11.5);line-height:calc(var(--u) * 16);margin-top:calc(var(--u) * 6)}
.prod__score{margin-top:calc(var(--u) * 8);padding:calc(var(--u) * 5) calc(var(--u) * 14);font-size:calc(var(--u) * 11.6);line-height:calc(var(--u) * 16)}
.prod__summary{margin-top:calc(var(--u) * 10);font-size:calc(var(--u) * 12);line-height:calc(var(--u) * 18);color:var(--text)}
.offer{margin-top:calc(var(--u) * 14);padding:calc(var(--u) * 14) calc(var(--u) * 16)}
.offer__title{font-size:calc(var(--u) * 12.5);line-height:calc(var(--u) * 18)}
.offer__price{font-size:calc(var(--u) * 12);line-height:calc(var(--u) * 18);margin-bottom:calc(var(--u) * 8)}
.offer__note{font-size:calc(var(--u) * 10);line-height:calc(var(--u) * 14.5);margin-top:calc(var(--u) * 6)}
.offer .pc-btn{height:calc(var(--u) * 30);padding:0 calc(var(--u) * 18);font-size:calc(var(--u) * 10.6);font-weight:700;border-radius:calc(var(--u) * 15);gap:calc(var(--u) * 6)}
.offer .pc-btn .ic{font-size:calc(var(--u) * 11);stroke-width:2.2}
.prod__sec{margin-top:calc(var(--u) * 26)}
.prod__sec .h2{margin-bottom:calc(var(--u) * 10)}
.prod__list{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 8) calc(var(--u) * 24);font-size:calc(var(--u) * 11.5);line-height:calc(var(--u) * 17)}
.prod__pc{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 24)}
.prod__pc h3{font-size:calc(var(--u) * 12.5);line-height:calc(var(--u) * 18);margin-bottom:calc(var(--u) * 6);color:var(--navy)}
.prod__pc .prod__list{grid-template-columns:1fr}
.prod__text p{font-size:calc(var(--u) * 11.5);line-height:calc(var(--u) * 18);max-width:calc(var(--u) * 700)}
.spec{font-size:calc(var(--u) * 11);line-height:calc(var(--u) * 16);margin-bottom:calc(var(--u) * 14)}
.spec caption{font-size:calc(var(--u) * 11.5);padding-bottom:calc(var(--u) * 6)}
.spec th,.spec td{padding:calc(var(--u) * 7) calc(var(--u) * 8) calc(var(--u) * 7) 0}
}

@media (max-width:999.98px){
.crumbs{padding:14px var(--m) 0;font-size:12px;line-height:18px}
.cat-head{padding-top:16px}
.h2--page{font-size:26px;line-height:32px;font-weight:800;color:var(--navy)}
.cat-head .section__sub{margin-top:6px}
.cat-list,.cat-picks{padding-bottom:8px}
.cat-picks{padding-top:24px}
.cat-list{padding-top:14px}
.cats--index{grid-template-columns:repeat(4,1fr)}
.cats--index li{display:block}
.cats--index .cat{width:100%}
.picks--list{grid-template-columns:repeat(2,1fr)}
.pager{gap:14px;margin-top:20px;font-size:13px}
.pager__link{padding:8px 16px}
.adslot{margin:16px var(--m) 0}
.prod{padding-top:16px;padding-bottom:12px}
.prod__grid{display:grid;grid-template-columns:1fr;gap:18px}
.prod__media{height:260px;border:1px solid var(--divider);border-radius:9px;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px}
.prod__media img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.prod__badge{margin-bottom:8px}
.prod__meta{font-size:13px;line-height:18px;margin-top:2px}
.prod__bestfor{font-size:13px;line-height:19px;margin-top:6px}
.prod__score{margin-top:10px;padding:4px 12px;font-size:13px;line-height:18px}
.prod__summary{margin-top:10px;font-size:14px;line-height:21px}
.offer{margin-top:16px;padding:14px 16px}
.offer__title{font-size:14px;line-height:20px}
.offer__price{font-size:14px;line-height:20px;margin-bottom:10px}
.offer__note{font-size:12px;line-height:17px;margin-top:8px}
.offer .pc-btn{height:40px;padding:0 20px;font-size:13px;font-weight:700;border-radius:20px;gap:6px}
.offer .pc-btn .ic{font-size:13px;stroke-width:2.2}
.prod__sec{margin-top:28px}
.prod__sec .h2{margin-bottom:12px}
.prod__list{display:grid;grid-template-columns:1fr;gap:10px;font-size:14px;line-height:20px}
.prod__pc{display:grid;grid-template-columns:1fr;gap:20px}
.prod__pc h3{font-size:14px;line-height:20px;margin-bottom:8px;color:var(--navy)}
.prod__text p{font-size:14px;line-height:22px}
.spec{font-size:13px;line-height:18px;margin-bottom:16px}
.spec caption{font-size:14px;padding-bottom:6px}
.spec th,.spec td{padding:8px 6px 8px 0}
}

@media (max-width:640px){
.cats--index{grid-template-columns:repeat(2,1fr)}
.picks--list{grid-template-columns:1fr}
.spec th{width:42%}
}