/* CMP-001 (UI/UX overhaul Phase 7): the compare page (templates/compare/list.phtml, layout ipatio_cmp.xml), in the
   Phase 3 design: header with count + "Show differences only" switch + Print / Clear list, one card per product (the
   listing card's lines), a compact product bar that sticks while the specs scroll, specs grouped like the product page.
   One grid template (--ipx-cmp-cols) for the cards, the bar and every spec row, so the columns always line up.
   Desktop: label column + one column per product (220–340 px); more than fits scrolls sideways inside the table, the
   label column stays. Phones (< 768 px): two products side by side, each row's label above its values; a third product
   by swiping inside the table (or the arrows). Theme overrides carry a "body " prefix (styles-l.css loads later). */
body.ipx-cmp-page{--ipx-cmp-lab:240px;--ipx-cmp-col:minmax(220px,340px);--ipx-cmp-gap:24px;--ipx-cmp-top:0px}
/* the column template is resolved on .ipx-cmp, where the product count (--ipx-cmp-n, inline) is set */
.ipx-cmp{--ipx-cmp-cols:var(--ipx-cmp-lab) repeat(var(--ipx-cmp-n,2),var(--ipx-cmp-col))}
/* JetTheme's .page-wrapper is a scroll container, which disables position:sticky (the product bar): clip instead */
body.ipx-cmp-page .page-wrapper{overflow-x:clip;overflow-y:visible}
body.ipx-cmp-page .page-main{padding-top:0}
.ipx-cmp{position:relative;margin:24px 0 64px;color:var(--ipx-ink);font-family:var(--ipx-font);letter-spacing:normal}
.ipx-cmp *{letter-spacing:normal}
.ipx-cmp .ipx-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ipx-cmp__sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* ---- header ---- */
.ipx-cmp__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:0 0 6px}
.ipx-cmp__title{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
body .ipx-cmp .ipx-cmp__h{margin:0;padding:0;font:700 clamp(26px,1.2vw + 16px,34px)/1.15 var(--ipx-font-bold);color:var(--ipx-ink);text-transform:none}
.ipx-cmp__count{margin:0;font-size:15px;font-weight:600;color:var(--ipx-grey)}
.ipx-cmp__tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
body .ipx-cmp .ipx-cmp__btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;height:44px;margin:0;padding:0 16px;
  border:1px solid var(--ipx-line-2);border-radius:var(--ipx-r-pill);background:#fff;box-shadow:none;color:var(--ipx-ink);font:700 14px/1 var(--ipx-font);text-transform:none;text-decoration:none;cursor:pointer;white-space:nowrap}
body .ipx-cmp .ipx-cmp__btn:hover{background:var(--ipx-stone);border-color:var(--ipx-grey);color:var(--ipx-ink)}
body .ipx-cmp .ipx-cmp__btn.-primary{border-color:var(--ipx-orange);background:var(--ipx-orange)}
body .ipx-cmp .ipx-cmp__btn.-primary:hover{background:var(--ipx-orange-hover)}
.ipx-cmp__btn .ipx-i{width:17px;height:17px}
.ipx-cmp__legend{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:13.5px;font-weight:500;color:var(--ipx-grey)}
.ipx-cmp__dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--ipx-orange)}
.ipx-cmp.-diffonly .ipx-cmp__legend{visibility:hidden}

/* switch (role=switch, aria-checked) */
body .ipx-cmp button.ipx-switch{box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;min-height:44px;height:auto;margin:0;padding:0 14px 0 6px;border:0;border-radius:var(--ipx-r-pill);
  background:none;box-shadow:none;color:var(--ipx-ink);font:700 14.5px/1.25 var(--ipx-font);text-transform:none;cursor:pointer;text-align:left}
body .ipx-cmp button.ipx-switch:hover{background:var(--ipx-stone)}
.ipx-switch__t{position:relative;flex:none;width:40px;height:24px;border-radius:12px;background:#8f8a82;transition:background .18s var(--ipx-ease)}
.ipx-switch__k{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s var(--ipx-ease)}
.ipx-switch[aria-checked=true] .ipx-switch__t{background:var(--ipx-green-deep)}
.ipx-switch[aria-checked=true] .ipx-switch__k{transform:translateX(16px)}
body .ipx-cmp button.ipx-switch.-small{min-height:40px;padding:0 10px 0 4px;font-size:13px}
.ipx-switch.-small .ipx-switch__t{width:34px;height:20px}
.ipx-switch.-small .ipx-switch__k{width:14px;height:14px}
.ipx-switch.-small[aria-checked=true] .ipx-switch__k{transform:translateX(14px)}
.ipx-cmp :is(button,a):focus-visible{outline:2px solid var(--ipx-ink)!important;outline-offset:2px;box-shadow:0 0 0 4px #fff!important}

/* ---- the grid every row shares ---- */
.ipx-cmp__scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:4px 0 0}
.ipx-cmp__grid{min-width:0}
.ipx-cmp__cols{display:grid;grid-template-columns:var(--ipx-cmp-cols);column-gap:var(--ipx-cmp-gap)}
.ipx-cmp__lab{position:sticky;left:0;z-index:2;background:#fff}

/* product cards */
.ipx-cmp__cards{align-items:stretch;padding:0 0 22px}
.ipx-cmp__cards>.ipx-cmp__lab{background:none}
.ipx-cmp__card{position:relative;display:flex;flex-direction:column;min-width:0;padding:14px 16px 16px;border:1px solid var(--ipx-line);border-radius:var(--ipx-r-md);background:#fff;box-shadow:var(--ipx-sh-1)}
body .ipx-cmp button.ipx-cmp__x{position:absolute;top:8px;right:8px;z-index:3;box-sizing:border-box;display:grid;place-items:center;width:40px;height:40px;min-height:0;margin:0;padding:0;border:1px solid var(--ipx-line);border-radius:50%;
  background:#fff;box-shadow:var(--ipx-sh-1);color:var(--ipx-ink);cursor:pointer}
body .ipx-cmp button.ipx-cmp__x:hover{background:var(--ipx-stone);border-color:var(--ipx-grey)}
body .ipx-cmp button.ipx-cmp__x::before,body .ipx-cmp button.ipx-cmp__x::after{display:none!important}
.ipx-cmp__x .ipx-i{width:17px;height:17px}
.ipx-cmp__photo{display:block;margin:0 0 12px;border-radius:var(--ipx-r-sm);background:#fff}
body .ipx-cmp .ipx-cmp__photo .product-image-container{display:block;width:100%!important;max-width:none!important}
body .ipx-cmp .ipx-cmp__photo .product-image-wrapper{display:block;position:relative;height:160px;padding:0!important;overflow:hidden}
body .ipx-cmp .ipx-cmp__photo .product-image-photo{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;margin:0;object-fit:contain;mix-blend-mode:multiply}
.ipx-cmp__brand{margin:0 0 3px;font-size:12px;font-weight:700;line-height:1.3;color:var(--ipx-grey);text-transform:uppercase;letter-spacing:.06em!important}
body .ipx-cmp a.ipx-cmp__name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--ipx-ink);font:700 16px/1.35 var(--ipx-font);text-decoration:none;min-height:4.05em}
body .ipx-cmp a.ipx-cmp__name:hover{text-decoration:underline;text-underline-offset:3px}
.ipx-cmp__spec{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em;margin:6px 0 0;font-size:13px;font-weight:500;line-height:1.45;color:var(--ipx-grey)}
/* three lines kept for the name (its clamp) and two for the spec line: a late font swap that re-wraps them never
   moves the price, and the prices of all cards line up */
.ipx-cmp__spec i{font-style:normal;margin:0 2px;color:#8a857c}
.ipx-cmp__spec span{white-space:nowrap}
.ipx-cmp__price{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:12px 0 0}
/* the regular price stays beside the price on desktop (a wrap that a late font swap undid moved it 19 px) */
body .ipx-cmp .ipx-cmp__price .price-box{display:flex!important;flex-wrap:nowrap;white-space:nowrap;align-items:baseline;gap:2px 10px;margin:0!important;padding:0!important;text-align:left!important}
body .ipx-cmp .ipx-cmp__price .price-box .price-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
body .ipx-cmp .ipx-cmp__price .price-box :is(.special-price,.old-price,.price-container,.price-wrapper){display:inline!important;width:auto!important;margin:0!important;padding:0!important;float:none!important}
body .ipx-cmp .ipx-cmp__price .price-box .price{font-family:var(--ipx-font)!important;font-variant-numeric:tabular-nums}
body .ipx-cmp .ipx-cmp__price .price-box :is(.special-price,.price-final_price:not(.old-price *)) .price,body .ipx-cmp .ipx-cmp__price .price-box>.price-container .price{font-size:21px!important;font-weight:700!important;color:var(--ipx-ink)!important;line-height:1.2!important}
body .ipx-cmp .ipx-cmp__price .price-box .old-price .price{font-size:14px!important;font-weight:500!important;color:var(--ipx-grey)!important;text-decoration:line-through!important}
body .ipx-cmp .ipx-cmp__price .price-box .old-price{text-decoration:none!important}
.ipx-cmp__pill{display:inline-flex;align-items:center;min-height:24px;padding:3px 10px;box-sizing:border-box;border-radius:var(--ipx-r-pill);background:var(--ipx-green-tint);color:var(--ipx-green-deep);font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap}
.ipx-cmp__ship{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:13px;font-weight:600;line-height:1.3;color:var(--ipx-ink-2)}
.ipx-cmp__ship .ipx-i{width:17px;height:17px;color:var(--ipx-grey)}
.ipx-cmp__ship.-free,.ipx-cmp__ship.-free .ipx-i{color:var(--ipx-green-deep)}
.ipx-cmp__buy{display:flex;align-items:center;gap:8px;margin:auto 0 0;padding:16px 0 0}
.ipx-cmp__form{flex:1 1 auto;min-width:0;margin:0}
body .ipx-cmp button.action.tocart.ipx-cmp__cart{box-sizing:border-box!important;display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%!important;min-height:44px!important;height:44px!important;margin:0!important;padding:0 14px!important;
  border:0!important;border-radius:var(--ipx-r-sm)!important;background:var(--ipx-orange)!important;color:var(--ipx-ink)!important;font:700 15px/1 var(--ipx-font)!important;text-transform:none!important;box-shadow:var(--ipx-sh-1)!important}
body .ipx-cmp button.action.tocart.ipx-cmp__cart:hover{background:var(--ipx-orange-hover)!important}
body .ipx-cmp button.action.tocart.ipx-cmp__cart *{color:var(--ipx-ink)!important;font:inherit!important}
.ipx-cmp__stock{flex:1 1 auto;margin:0;font-size:14px;font-weight:700;color:var(--ipx-grey)}
body .ipx-cmp a.ipx-cmp__wish{box-sizing:border-box;display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--ipx-line-2);border-radius:var(--ipx-r-sm);background:#fff;color:var(--ipx-ink);text-decoration:none}
body .ipx-cmp a.ipx-cmp__wish:hover{background:var(--ipx-stone);border-color:var(--ipx-grey)}
body .ipx-cmp a.ipx-cmp__wish::before,body .ipx-cmp a.ipx-cmp__wish::after{display:none!important}
.ipx-cmp__wish .ipx-i{width:19px;height:19px}

/* compact product bar: zero-height sticky holder, the bar overlays the table once the cards are gone */
.ipx-cmp__barwrap{position:sticky;top:var(--ipx-cmp-top);z-index:60;height:0;transition:top .22s var(--ipx-ease)}
html.ipx-pinned body.ipx-cmp-page{--ipx-cmp-top:64px}
.ipx-cmp__bar{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--ipx-ease),transform .18s var(--ipx-ease),visibility 0s .18s}
.ipx-cmp__bar.-on{opacity:1;visibility:visible;transform:none;transition:opacity .18s var(--ipx-ease),transform .18s var(--ipx-ease)}
/* full-width white band behind the bar */
.ipx-cmp__bar::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-100vmax;right:-100vmax;background:#fff;border-bottom:1px solid var(--ipx-line);box-shadow:0 10px 18px -12px rgba(29,27,25,.22)}
.ipx-cmp__barscroll{overflow:hidden}
.ipx-cmp__barscroll>.ipx-cmp__cols{padding:8px 0}
.ipx-cmp__barlab{display:flex;align-items:center}
body .ipx-cmp a.ipx-cmp__mini{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ipx-ink);text-decoration:none}
.ipx-cmp__mini-i{flex:none;width:48px;height:48px;border:1px solid var(--ipx-line);border-radius:8px;background:#fff;overflow:hidden}
body .ipx-cmp .ipx-cmp__mini-i .product-image-container{display:block;width:48px!important}
body .ipx-cmp .ipx-cmp__mini-i .product-image-wrapper{position:relative;display:block;height:48px;padding:0!important}
body .ipx-cmp .ipx-cmp__mini-i img{position:absolute;inset:3px;width:calc(100% - 6px)!important;height:calc(100% - 6px)!important;object-fit:contain;mix-blend-mode:multiply}
.ipx-cmp__mini-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ipx-cmp__mini-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:700;line-height:1.3}
.ipx-cmp__mini-p{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* spec groups and rows */
.ipx-cmp__group{margin:0 0 6px}
.ipx-cmp__gh{padding:22px 0 8px;border-bottom:2px solid var(--ipx-ink)}
.ipx-cmp__ght{position:sticky;left:0;display:inline-flex;align-items:center;gap:9px;font:700 18px/1.3 var(--ipx-font-bold);color:var(--ipx-ink)}
.ipx-cmp__ght .ipx-i{width:20px;height:20px;color:var(--ipx-green-deep)}
.ipx-cmp__row{border-bottom:1px solid var(--ipx-line)}
.ipx-cmp__row>*{padding:11px 0;font-size:14.5px;line-height:1.4}
.ipx-cmp__row>.ipx-cmp__lab{display:flex;align-items:flex-start;gap:8px;padding-right:12px;color:var(--ipx-grey);font-weight:600}
.ipx-cmp__row>.ipx-cmp__lab .ipx-cmp__dot{margin-top:6px}
.ipx-cmp__row.-same>.ipx-cmp__lab{padding-left:16px}
.ipx-cmp__v{min-width:0;color:var(--ipx-ink);font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ipx-cmp__v small{display:block;margin-top:1px;font-size:12.5px;font-weight:500;color:var(--ipx-grey)}
.ipx-cmp__v.-yes{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ipx-cmp__v.-yes .ipx-i{width:17px;height:17px;color:var(--ipx-green-deep);stroke-width:2.4}
.ipx-cmp__v.-no{color:var(--ipx-grey);font-weight:500}
.ipx-cmp__v.-none{color:#8a857c;font-weight:500}
.ipx-cmp__row:hover>.ipx-cmp__v,.ipx-cmp__row:hover>.ipx-cmp__lab{background:var(--ipx-stone)}
.ipx-cmp__row:hover>.ipx-cmp__lab{color:var(--ipx-ink)}
.ipx-cmp.-diffonly .ipx-cmp__row.-same,.ipx-cmp.-diffonly .ipx-cmp__group.-same{display:none}
.ipx-cmp__nodiff{margin:24px 0;padding:16px 18px;border-radius:var(--ipx-r-md);background:var(--ipx-stone);font-size:15px;font-weight:600}
.ipx-cmp__nodiff[hidden]{display:none}
.ipx-cmp__pager{display:none}

/* empty list */
.ipx-cmp.-empty{text-align:left}
.ipx-cmp__none{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:560px;margin:20px 0 0;padding:28px;border:1px solid var(--ipx-line);border-radius:var(--ipx-r-lg);background:var(--ipx-stone)}
.ipx-cmp__none p{margin:0;font-size:17px;font-weight:700}
.ipx-cmp__none .ipx-cmp__none-s{font-size:14.5px;font-weight:500;color:var(--ipx-grey)}
.ipx-cmp .ipx-cmp__none-i{width:32px;height:32px;color:var(--ipx-green-deep)}
.ipx-cmp__none .ipx-cmp__btn{margin-top:8px}

/* tablets: narrower label column */
@media (max-width:1023px){
  body.ipx-cmp-page{--ipx-cmp-lab:170px;--ipx-cmp-col:minmax(200px,300px);--ipx-cmp-gap:16px}
}
/* phones: two products side by side, labels above their values */
@media (max-width:767px){
  body.ipx-cmp-page{--ipx-cmp-vis:calc(100vw - 2 * var(--ipx-gutter,16px));--ipx-cmp-gap:12px;
    --ipx-cmp-col:calc((var(--ipx-cmp-vis) - var(--ipx-cmp-gap)) / 2)}
  .ipx-cmp{--ipx-cmp-cols:repeat(var(--ipx-cmp-n,2),var(--ipx-cmp-col))}
  .ipx-cmp[style*="--ipx-cmp-n:1"]{--ipx-cmp-col:var(--ipx-cmp-vis)}
  html.ipx-pinned body.ipx-cmp-page{--ipx-cmp-top:58px}
  .ipx-cmp{margin:14px 0 40px}
  .ipx-cmp__head{gap:8px}
  .ipx-cmp__title{gap:2px 10px}
  .ipx-cmp__tools{width:100%;flex-wrap:nowrap;justify-content:flex-start;gap:6px}
  .ipx-cmp__tools .ipx-switch{flex:1 1 auto;min-width:0}
  /* phones: Print / Clear list as round icon buttons (their words stay for screen readers) */
  body .ipx-cmp .ipx-cmp__tools .ipx-cmp__btn{width:44px;padding:0;flex:none}
  .ipx-cmp__tools .ipx-cmp__btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ipx-cmp__legend{margin:2px 0 10px;font-size:12.5px}
  .ipx-cmp__grid{width:max-content}
  .ipx-cmp__scroll{scroll-snap-type:x mandatory;scrollbar-width:none}
  .ipx-cmp__scroll::-webkit-scrollbar{display:none}
  .ipx-cmp__card{scroll-snap-align:start;padding:10px 10px 12px}
  .ipx-cmp__cols>.ipx-cmp__lab{grid-column:1/-1;width:var(--ipx-cmp-vis)}
  .ipx-cmp__cards>.ipx-cmp__lab,.ipx-cmp__barlab{display:none!important}
  body .ipx-cmp .ipx-cmp__photo .product-image-wrapper{height:112px}
  .ipx-cmp__photo{margin-bottom:8px}
  /* a 44 px tap target drawn as a 34 px circle */
  body .ipx-cmp button.ipx-cmp__x{top:2px;right:2px;width:44px;height:44px;border:0;background:none;box-shadow:none}
  body .ipx-cmp button.ipx-cmp__x:hover{background:none}
  .ipx-cmp__x .ipx-i{box-sizing:content-box;width:15px;height:15px;padding:8px;border:1px solid var(--ipx-line);border-radius:50%;background:#fff;box-shadow:var(--ipx-sh-1)}
  .ipx-cmp__brand{font-size:11px}
  body .ipx-cmp a.ipx-cmp__name{font-size:14.5px}
  .ipx-cmp__spec{display:none}
  body .ipx-cmp .ipx-cmp__price .price-box :is(.special-price,.price-final_price:not(.old-price *)) .price,body .ipx-cmp .ipx-cmp__price .price-box>.price-container .price{font-size:18px!important}
  body .ipx-cmp .ipx-cmp__price .price-box .old-price .price{font-size:12.5px!important}
  .ipx-cmp__price{gap:4px;margin-top:8px}
  body .ipx-cmp .ipx-cmp__price .price-box{flex-wrap:wrap}
  .ipx-cmp__ship{font-size:12px;gap:5px}
  .ipx-cmp__buy{gap:6px;padding-top:12px}
  body .ipx-cmp button.action.tocart.ipx-cmp__cart{font-size:14px!important;padding:0 8px!important}
  body .ipx-cmp button.action.tocart.ipx-cmp__cart .ipx-i{display:none}
  .ipx-cmp__row>*{padding:4px 0 10px;font-size:14px}
  .ipx-cmp__row>.ipx-cmp__lab{padding:10px 0 0;font-size:12.5px;font-weight:700;background:none}
  .ipx-cmp__row.-same>.ipx-cmp__lab{padding-left:0}
  .ipx-cmp__row:hover>*{background:none!important}
  .ipx-cmp__gh{padding-top:18px}
  .ipx-cmp__ght{font-size:16.5px}
  body .ipx-cmp a.ipx-cmp__mini{gap:8px}
  .ipx-cmp__mini-i{width:40px;height:40px}
  body .ipx-cmp .ipx-cmp__mini-i .product-image-container{width:40px!important}
  body .ipx-cmp .ipx-cmp__mini-i .product-image-wrapper{height:40px}
  .ipx-cmp__mini-n{font-size:12.5px}
  .ipx-cmp__mini-p{font-size:13.5px}
  .ipx-cmp__pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--ipx-grey)}
  .ipx-cmp__arrows{display:flex;gap:8px}
  body .ipx-cmp button.ipx-cmp__arrow{box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;min-height:0;margin:0;padding:0;border:1px solid var(--ipx-line-2);border-radius:50%;background:#fff;color:var(--ipx-ink);box-shadow:none;cursor:pointer}
  body .ipx-cmp button.ipx-cmp__arrow:disabled{opacity:.4;cursor:default}
  .ipx-cmp__arrow.-prev .ipx-i{transform:scaleX(-1)}
  body.ipx-cmp-page :is(.ipx-ctray,.ipx-recent){display:none}
}
@media (max-width:767px){.ipx-cmp:not(.-many) .ipx-cmp__scroll{scroll-snap-type:none}}
@media (prefers-reduced-motion:reduce){.ipx-cmp *,.ipx-cmp__bar{transition:none!important}}
/* ---- CMP-PRINT-001: the printed sheet (.ipx-cmpp, in list.phtml). Screen: never shown. Print: only the sheet
   (header, footer, chat, back-to-top, cookie bar, compare tray and the screen version of the page are dropped),
   black on white, 10 pt text, the product row repeated
   on every page, a spec group kept on one page, "●" + bold for rows that differ, links written out. Paper: the
   shopper's (A4 or Letter); landscape from 4 products (templates/product/compare/print-orientation.phtml). ---- */
.ipx-cmpp{display:none}
@media print{
  @page{margin:12mm 11mm}
  html,body.ipx-cmp-page{background:#fff!important}
  /* only the sheet: every sibling along the path body > .page-wrapper > main > .columns > .column.main > .ipx-cmp is
     dropped (header, footer, chat, back-to-top, cookie bar, compare tray, the screen page). Plain child selectors
     (no :has()), so older Firefox / Safari print the same sheet. */
  body.ipx-cmp-page>:not(.page-wrapper),
  body.ipx-cmp-page .page-wrapper>:not(.page-main),
  body.ipx-cmp-page .page-main>:not(.columns),
  body.ipx-cmp-page .page-main>.columns>:not(.column.main),
  body.ipx-cmp-page .column.main>:not(.ipx-cmp),
  body.ipx-cmp-page .ipx-cmp>:not(.ipx-cmpp){display:none!important}
  body.ipx-cmp-page :is(.page-wrapper,.page-main,.columns,.column.main,.ipx-cmp){position:static!important;display:block!important;width:auto!important;max-width:none!important;min-height:0!important;
    margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:none!important;overflow:visible!important;float:none!important;transform:none!important}
  .ipx-cmpp{display:block;color:#000;font:10pt/1.35 var(--ipx-font);-webkit-print-color-adjust:economy;print-color-adjust:economy}
  .ipx-cmpp *{letter-spacing:normal!important;text-transform:none!important;color:#000!important;background:none!important;box-shadow:none!important;text-shadow:none!important}
  .ipx-cmpp__head{display:flex;align-items:center;gap:6mm;margin:0 0 3mm;padding:0 0 2.5mm;border-bottom:1.5pt solid #000;break-after:avoid}
  .ipx-cmpp__logo{display:block;width:26mm;height:auto;flex:none}
  .ipx-cmpp__logo.-text{font:700 18pt/1 var(--ipx-font-bold)}
  .ipx-cmpp__meta{min-width:0}
  .ipx-cmpp__meta p{margin:0}
  .ipx-cmpp__title{font:700 16pt/1.2 var(--ipx-font-bold)}
  .ipx-cmpp__title span{font:600 10pt/1 var(--ipx-font)}
  .ipx-cmpp__line{margin-top:1mm!important;font-size:9pt}
  .ipx-cmpp__url{overflow-wrap:anywhere}
  .ipx-cmpp__diffnote{display:none;font-weight:700}
  .ipx-cmp.-diffonly .ipx-cmpp__diffnote{display:block}
  .ipx-cmpp__t{width:100%;border-collapse:collapse;table-layout:fixed}
  .ipx-cmpp__lc{width:22%}
  .ipx-cmpp__t.-wide .ipx-cmpp__lc{width:17%}
  .ipx-cmpp__t thead{display:table-header-group}
  .ipx-cmpp__t tr{break-inside:avoid}
  .ipx-cmpp__t th,.ipx-cmpp__t td{font-family:var(--ipx-font)!important;padding:1mm 2mm 1mm 0;border-bottom:.5pt solid #999;text-align:left;vertical-align:top;font-size:10pt;font-weight:400;overflow-wrap:anywhere}
  .ipx-cmpp__t tbody th{font-size:9.5pt;font-weight:600}
  .ipx-cmpp__t td small{display:block;font-size:8pt;line-height:1.2}
  .ipx-cmpp__t thead th{padding:1mm 3mm 1.5mm 0;border-bottom:1pt solid #000;vertical-align:bottom}
  .ipx-cmpp__prod>span,.ipx-cmpp__info td>span{display:block}
  .ipx-cmpp__info{break-inside:avoid}
  .ipx-cmpp__info td,.ipx-cmpp__info th{padding-top:2mm;padding-bottom:2mm;border-bottom:1pt solid #000}
  .ipx-cmpp__img{display:block;width:auto;height:auto;max-width:100%;max-height:17mm;margin:0 0 1mm;object-fit:contain}
  .ipx-cmpp__name{font-weight:700;font-size:10pt;line-height:1.25}
  .ipx-cmpp__sku{font-size:9pt}
  .ipx-cmpp__price{margin-top:.6mm;font-weight:700;font-size:11pt}
  .ipx-cmpp__reg{font-size:9pt}
  /* a spec group never splits: its heading and rows go together to the next page when they do not fit */
  .ipx-cmpp__g{break-inside:avoid}
  .ipx-cmpp__gh th{padding:3mm 0 1mm;border-bottom:1pt solid #000;font-size:11.5pt!important;font-weight:700!important;line-height:1.2}
  .ipx-cmpp__t tr.-diff td{font-weight:700}
  .ipx-cmpp__dot{font-weight:700}
  .ipx-cmp.-diffonly .ipx-cmpp__t tr.-same,.ipx-cmp.-diffonly .ipx-cmpp__g.-same{display:none}
}
