/* HP BETA 03.22 — exclusive to the new homepage offer list. */
.hpt24-home-listing:has(.hpt322-section){width:100%;max-width:100%;min-width:0;margin:0 auto}
.hpt322-section,.hpt322-section *{box-sizing:border-box}
.hpt322-section{width:100%;max-width:100%;min-width:0;margin:26px auto 25px;color:#11254b;overflow:visible}
.hpt322-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 15px}
.hpt322-head-copy{min-width:0;flex:1 1 auto}
.hpt322-head h2{font-size:clamp(19px,1.8vw,25px);font-weight:750;letter-spacing:-.65px;line-height:1.22;margin:0 0 5px;color:#101f3e}
.hpt322-head p{font-size:12px;font-weight:400;color:#667b97;margin:0;line-height:1.55}
.hpt322-sort{display:flex;align-items:center;gap:7px;justify-content:flex-end;flex:0 0 auto;min-width:0}
.hpt322-sort-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 13px;border:1px solid #d9e5f7;border-radius:9px;background:linear-gradient(#fff,#f7faff);color:#182c50;white-space:nowrap;font-size:11px;line-height:1;font-weight:600;box-shadow:0 2px 5px rgba(22,70,144,.07);cursor:pointer;transition:color .15s,background .15s,border-color .15s,box-shadow .15s}
.hpt322-sort-btn i{font-size:12px;flex:0 0 auto}
.hpt322-sort-btn:hover{border-color:#9dc6fc;background:#f0f7ff}
.hpt322-sort-btn.is-active{color:#fff;border-color:#066de3;background:linear-gradient(140deg,#158aff,#0759db);box-shadow:0 3px 8px rgba(11,101,233,.2)}
.hpt322-sort-btn:focus-visible,.hpt322-action:focus-visible,.hpt322-all:focus-visible{outline:2px solid #1479ed;outline-offset:3px}
.hpt322-list{display:flex;flex-direction:column;gap:6px;min-width:0;transition:opacity .18s ease}
.hpt322-list.is-loading{opacity:.6;pointer-events:none}
.hpt322-offer{position:relative;display:grid;grid-template-columns:minmax(95px,12%) minmax(175px,20%) minmax(0,1fr) minmax(118px,12%) minmax(91px,9%) minmax(104px,10%);column-gap:10px;align-items:center;min-width:0;min-height:62px;padding:8px 10px 8px 15px;border:1px solid #e1e9f5;border-radius:12px;background:#fff;box-shadow:0 3px 11px rgba(27,67,133,.07);transition:border-color .16s,box-shadow .16s}
.hpt322-offer:hover{border-color:#b7d4fc;box-shadow:0 5px 15px rgba(35,82,163,.12)}
.hpt322-brand{display:flex;align-items:center;justify-content:center;min-width:0;max-width:100%;height:43px;overflow:hidden;padding:1px 4px 1px 9px;color:#123c73}
.hpt322-brand .hpt322-logo{display:block!important;width:auto!important;max-width:100%!important;height:auto!important;max-height:41px!important;object-fit:contain!important;border:0!important;background:transparent!important;box-shadow:none!important;margin:0 auto!important}
.hpt322-brand span.hpt322-logo{display:grid!important;place-items:center;width:45px!important;height:40px!important;border-radius:9px;background:#eff6ff!important;font-size:23px;color:#0667d5}
.hpt322-identity{display:flex;align-items:center;gap:9px;min-width:0}
.hpt322-category{display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;max-width:43%;min-width:0;min-height:24px;padding:4px 8px;border-radius:7px;background:#eaf2ff;color:#155aca;font-weight:600;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.hpt322-name{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#122449;font-size:12px;font-weight:700;line-height:1.3}
.hpt322-name:hover{color:#0668db}
.hpt322-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:8px;min-width:0}
.hpt322-specs>span{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;font-size:10px;color:#526580;white-space:nowrap}
.hpt322-specs>span>i{font-size:12px;flex:0 0 auto;color:#5c7196}
.hpt322-specs>span>span{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hpt322-price{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}
.hpt322-price-label{font-size:10px;line-height:1.2;color:#71809a;font-weight:450}
.hpt322-price strong{color:#0760e2;font-size:16px;line-height:1.2;font-weight:750;white-space:nowrap;min-width:0}
.hpt322-price .hpc-convert-price{font-size:inherit!important;font-weight:inherit!important;letter-spacing:-.35px;white-space:nowrap}
.hpt322-price .hpc-convert-price small{font-size:10px!important;font-weight:450!important;color:#4d6eac}
.hpt322-price-missing{font-size:11px;color:#7b8da7;font-weight:500}
.hpt322-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;min-height:33px;padding:7px 8px;border-radius:8px;text-decoration:none!important;font-size:10.5px;font-weight:650;white-space:nowrap;line-height:1.2;cursor:pointer}
.hpt322-action i{font-size:11px;flex:0 0 auto}
.hpt322-inspect{background:linear-gradient(140deg,#137dff,#075bdc);color:#fff!important;border:1px solid #0968ec;box-shadow:0 2px 7px rgba(5,88,206,.17)}
.hpt322-inspect:hover{filter:brightness(1.06)}
.hpt322-compare{color:#1553a9;border:1px solid #c6d8f2;background:#fff;box-shadow:0 1px 4px rgba(20,66,130,.07)}
.hpt322-compare.is-selected{background:#e7f7ed;color:#087949;border-color:#88ceae}
.hpt322-best{border-color:#b8e9d2;padding-left:26px}
.hpt322-best-rail{position:absolute;inset:0 auto 0 0;display:flex;align-items:center;justify-content:center;gap:4px;writing-mode:vertical-rl;transform:rotate(180deg);width:17px;border-radius:0 8px 8px 0;background:linear-gradient(180deg,#00a36a,#10c487);color:#fff;font-size:9px;line-height:1;font-weight:700;white-space:nowrap;overflow:hidden}
.hpt322-best-rail i{font-size:9px}
.hpt322-footer{display:flex;justify-content:center;padding:17px 0 0}
.hpt322-all{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:38px;padding:9px 29px;border:1px solid #c8daf5;border-radius:9px;background:linear-gradient(180deg,#fff,#f6f9ff);color:#1d4d95;font-weight:650;font-size:12px;box-shadow:0 2px 9px rgba(28,74,140,.08)}
.hpt322-all:hover{color:#0568d7;border-color:#98bff9}
.hpt322-all i{font-size:13px}
.hpt322-empty{padding:30px 18px;text-align:center;color:#667b96;background:#fff;border:1px solid #e1e9f5;border-radius:12px}
@media(min-width:1101px) and (max-width:1399px){
 .hpt322-offer{grid-template-columns:minmax(86px,11%) minmax(155px,18%) minmax(0,1fr) minmax(111px,12%) 91px 104px;gap:7px;padding-left:12px;padding-right:9px}
 .hpt322-specs{gap:4px}
 .hpt322-specs>span{font-size:9.3px;gap:4px}
 .hpt322-identity{gap:6px}
 .hpt322-category{font-size:9px;padding:4px 5px}
 .hpt322-name{font-size:11px}
}
@media(max-width:1100px) and (min-width:951px){
 .hpt322-head{align-items:start;flex-wrap:wrap}
 .hpt322-sort{justify-content:flex-start;width:100%}
 .hpt322-offer{grid-template-columns:115px minmax(155px,1fr) minmax(0,1.35fr) 115px 83px 100px;gap:6px;padding:8px}
 .hpt322-specs>span{font-size:9px;gap:4px}
 .hpt322-price strong{font-size:14px}
 .hpt322-action{font-size:9.5px;padding:7px 5px}
}
/* Screenshot's compact mobile layout: logo/name on top, three features, actions on bottom. */
@media(max-width:950px){
 .hpt322-section{margin:20px auto 21px;min-width:0}
 .hpt322-head{display:block;margin-bottom:12px}
 .hpt322-head h2{font-size:19px;letter-spacing:-.45px;margin-bottom:4px}
 .hpt322-head p{font-size:10.5px;line-height:1.4}
 .hpt322-sort{margin-top:11px;display:flex;justify-content:flex-start;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;gap:6px;padding:1px 1px 5px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 .hpt322-sort::-webkit-scrollbar{display:none}
 .hpt322-sort-btn{min-height:32px;flex:0 0 auto;padding:7px 9px;font-size:10.5px;gap:5px}
 .hpt322-sort-btn i{font-size:11px}
 .hpt322-list{gap:7px}
 .hpt322-offer{display:grid;grid-template-columns:122px minmax(0,1fr);grid-template-areas:'brand identity' 'specs specs' 'price actions';grid-template-rows:minmax(43px,auto) 26px auto;align-items:center;gap:6px 8px;min-height:130px;padding:9px 10px 10px 13px;border-radius:12px}
 .hpt322-brand{grid-area:brand;height:43px;justify-content:center;padding:0 5px}
 .hpt322-brand .hpt322-logo{max-height:39px!important}
 .hpt322-identity{grid-area:identity;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:0}
 .hpt322-category{max-width:100%;font-size:9px;min-height:19px;padding:3px 8px}
 .hpt322-name{flex:none;width:100%;min-width:0;font-size:11.5px}
 .hpt322-specs{grid-area:specs;gap:0;background:#f4f7fd;border-radius:7px;min-height:25px;padding:3px 5px}
 .hpt322-specs>span{justify-content:center;gap:5px;min-width:0;font-size:9.5px;padding:0 4px}
 .hpt322-specs>span+span{border-left:1px solid #d5e1f1}
 .hpt322-specs>span>i{font-size:11px}
 .hpt322-price{grid-area:price;align-self:end;gap:1px;min-width:0;padding-left:6px}
 .hpt322-price-label{font-size:9px}
 .hpt322-price strong{font-size:17px}
 .hpt322-compare{grid-area:compare;justify-self:stretch;align-self:end}
 .hpt322-inspect{grid-area:inspect;justify-self:stretch;align-self:end}
 .hpt322-action{min-height:32px;padding:6px 8px;font-size:10.5px}
 .hpt322-offer{grid-template-areas:'brand identity' 'specs specs' 'price actions';grid-template-columns:115px minmax(0,1fr);grid-template-rows:minmax(43px,auto) 26px auto;}
 .hpt322-price{grid-area:price;align-self:end}
 .hpt322-compare{grid-area:actions;justify-self:start;width:calc(50% - 4px);margin-right:auto}
 .hpt322-inspect{grid-area:actions;justify-self:end;width:calc(50% - 4px);margin-left:auto}
 .hpt322-best{padding-left:25px}
 .hpt322-best-rail{width:17px}
 .hpt322-footer{padding-top:12px}
 .hpt322-all{width:100%;min-height:39px;font-size:11px;padding:9px 10px}
}
@media(min-width:701px) and (max-width:950px){
 .hpt322-offer{grid-template-columns:130px minmax(0,1fr) 135px 135px;grid-template-areas:'brand identity identity identity' 'specs specs specs specs' 'price price compare inspect';grid-template-rows:auto 30px auto;gap:7px 10px;min-height:138px;padding:12px 15px}
 .hpt322-identity{flex-direction:row;justify-content:flex-start;align-items:center;gap:12px}
 .hpt322-identity .hpt322-name{flex:0 1 auto;max-width:70%}
 .hpt322-specs{min-height:30px}
 .hpt322-price{align-self:center}
 .hpt322-compare,.hpt322-inspect{width:100%;margin:0;justify-self:stretch;align-self:center}
 .hpt322-compare{grid-area:compare}
 .hpt322-inspect{grid-area:inspect}
}
@media(max-width:365px){
 .hpt322-offer{grid-template-columns:92px minmax(0,1fr);column-gap:5px;padding-left:9px;padding-right:8px}
 .hpt322-brand{height:38px;padding:0 2px}
 .hpt322-brand .hpt322-logo{max-height:36px!important}
 .hpt322-name{font-size:10.5px}
 .hpt322-specs>span{font-size:8px;gap:3px;padding:0 2px}
 .hpt322-specs>span>i{font-size:9px}
 .hpt322-price strong{font-size:14px}
 .hpt322-price .hpc-convert-price small{font-size:9px!important}
 .hpt322-action{font-size:9px;gap:4px;padding:5px 3px}
 .hpt322-action i{font-size:9px}
 .hpt322-sort-btn{font-size:10px}
}
/* Keep theme's existing dark-mode palette and functionality. */
html[data-hpt-theme="dark"] .hpt322-section{color:#e8f2ff}
html[data-hpt-theme="dark"] .hpt322-head h2{color:#edf5ff}
html[data-hpt-theme="dark"] .hpt322-head p{color:#9bb5d5}
html[data-hpt-theme="dark"] .hpt322-offer,html[data-hpt-theme="dark"] .hpt322-empty{background:#172b43;border-color:#304a67;box-shadow:none}
html[data-hpt-theme="dark"] .hpt322-name{color:#eef4ff}
html[data-hpt-theme="dark"] .hpt322-category{background:#233f60;color:#9bc6ff}
html[data-hpt-theme="dark"] .hpt322-specs>span{color:#b5cbe7}
html[data-hpt-theme="dark"] .hpt322-price-label{color:#b1c7e5}
html[data-hpt-theme="dark"] .hpt322-price strong{color:#75b9ff}
html[data-hpt-theme="dark"] .hpt322-price .hpc-convert-price small{color:#acccec}
html[data-hpt-theme="dark"] .hpt322-sort-btn:not(.is-active),html[data-hpt-theme="dark"] .hpt322-compare,html[data-hpt-theme="dark"] .hpt322-all{background:#1f3854;color:#d7e9ff;border-color:#426080}
html[data-hpt-theme="dark"] .hpt322-compare.is-selected{background:#194e3b;color:#b6f6d9}
@media(max-width:950px){html[data-hpt-theme="dark"] .hpt322-specs{background:#203751}html[data-hpt-theme="dark"] .hpt322-specs>span+span{border-color:#3b5675}}