/* The catalogue beside its filters (M441, M442, release 1.31.0): the short header, the column of filters and its
   promo boxes, the categories inside, the count and Sort by, cards with their pictures and one badge, the box across
   the list, and the two windows (all the filters, Quick look), a sheet from the foot on a phone. */

.cms-sec:has(> .listing > .cl-head){padding:0}
.cms-sec:has(> .listing > .cl-head) + .cms-sec--part{padding-top:0}
.cl-head{background:linear-gradient(135deg,var(--blue) 0%,color-mix(in oklab,var(--blue) 78%,#000) 100%);color:#fff}
.cl-head__in{max-width: var(--page-w);width:calc(100% - 44px);margin:0 auto;padding:30px 0 34px}
.cl-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:color-mix(in oklab,#fff 78%,transparent)}
.cl-crumbs a{color:inherit;text-decoration:none}.cl-crumbs a:hover{color:#fff;text-decoration:underline}
.cl-crumbs [aria-current]{color:#fff;font-weight:600}
.cl-head__t{margin:10px 0 6px;font:800 clamp(30px,4vw,44px)/1.1 var(--font-display);color:#fff;letter-spacing:-.01em}
.cl-head__l{margin:0;max-width:62ch;font-size:16.5px;line-height:1.5;color:color-mix(in oklab,#fff 86%,transparent)}

.cl{max-width: var(--page-w);width:calc(100% - 44px);margin:0 auto;padding:30px 0 56px;display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start}
.cl-side{display:grid;gap:18px;position:sticky;top:calc(var(--hold-top,0px) + 16px)}
.cl-side__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cl-side__h h2{margin:0;font:800 21px var(--font-display);color:var(--ink)}
.cl-side__h a{font-size:14px;font-weight:600;color:var(--blue);text-decoration:none}.cl-side__h a:hover{text-decoration:underline}
.cl-form{display:grid}
.cl-g{border:0;margin:0;padding:16px 0;border-bottom:1px solid var(--border);display:grid;gap:4px;min-width:0}
.cl-g:first-of-type{padding-top:4px}
.cl-g legend{float:left;width:100%;padding:0 0 4px;font:800 15px var(--font-display);color:var(--ink)}
.cl-c{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:4px 0;font-size:15px;color:var(--ink);cursor:pointer}
.cl-c input{width:18px;height:18px;margin:0;accent-color:var(--blue);cursor:pointer}
.cl-c span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-c small{font-size:13px;color:var(--muted)}
.cl-c.is-none{color:var(--muted);cursor:default}.cl-c.is-none input{cursor:default}
.cl-c mark{background:color-mix(in oklab,var(--gold) 35%,transparent);color:inherit;border-radius:2px}
.cl-all{justify-self:start;display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:0;border:0;background:none;color:var(--blue);font:600 14.5px var(--font-body);cursor:pointer}
.cl-all svg{width:13px;height:13px}.cl-all:hover{text-decoration:underline}
.cl-more,.cl-phone{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 16px;border:1px solid var(--border);border-radius:12px;background:var(--card,var(--bg));color:var(--ink);font:700 15px var(--font-body);cursor:pointer}
.cl-more{margin-top:18px;width:100%}.cl-more svg,.cl-phone svg{width:16px;height:16px}
.cl-more small{font-size:12.5px;font-weight:600;color:var(--muted)}
.cl-more:hover,.cl-phone:hover{border-color:color-mix(in oklab,var(--ink) 35%,var(--border))}
.cl-phone{display:none}.cl-phone b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--blue);color:var(--on-blue, #fff);font-size:12px}
.cl-apply{margin-top:12px}

.cl-subs{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.cl-sub{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border:1px solid var(--border);border-radius:14px;background:var(--card,var(--bg));color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.cl-sub:hover{border-color:color-mix(in oklab,var(--blue) 45%,var(--border));transform:translateY(-1px)}
.cl-sub__ic{width:36px;height:36px;display:grid;place-items:center;flex:none}.cl-sub__ic svg,.cl-sub__ic img{width:36px;height:36px}
.cl-sub b{display:block;font:700 15px var(--font-display)}.cl-sub small{font-size:13px;color:var(--muted)}

.cl-bar{display:flex;align-items:center;gap:14px;margin-bottom:16px;min-height:44px}
.cl-count{font-size:15px;color:var(--muted)}.cl-count b{color:var(--ink)}
.cl-sort{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--muted)}
.cl-sort select{padding:10px 34px 10px 13px;border:1px solid var(--border);border-radius:11px;background:var(--card,var(--bg)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center/14px;color:var(--ink);font:600 14.5px var(--font-body);appearance:none;-webkit-appearance:none;cursor:pointer}
.cl-none{padding:40px 24px;border:1px dashed var(--border);border-radius:16px;text-align:center;color:var(--muted)}.cl-none b{color:var(--ink)}.cl-none a{color:var(--blue);font-weight:600}

.cl-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* A card with its own pictures: the first, the second on hover, one badge, Quick look */
.pcard__pic{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;background:color-mix(in oklab,var(--blue) 10%,var(--card,var(--bg)))}
.pcard__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform .5s}
.pcard__pic2{opacity:0}
@media (hover:hover) and (prefers-reduced-motion:no-preference) and (min-width:901px){
  .pcard:hover .pcard__pic--two .pcard__pic2{opacity:1}
  .pcard:hover .pcard__pic img:first-child{transform:scale(1.03)}
}
.pcard__badge{position:absolute;top:12px;left:12px;z-index:2;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:800;letter-spacing:.02em;background:var(--card,#fff);color:var(--ink);box-shadow:0 2px 8px rgba(8,20,50,.12)}
.pcard__badge--off{background:#d93b3b;color:#fff}
.pcard__badge--new{background:#1f9d55;color:#fff}
.pcard__badge--feat{background:var(--gold-grad,var(--gold));color:var(--on-gold,#1b1b1b)}
.pcard__badge--soon{background:color-mix(in oklab,var(--ink) 80%,transparent);color:var(--bg)}
.pcard__flag--off{background:#d93b3b;color:#fff}.pcard__flag--new{background:#1f9d55;color:#fff}
.pcard__look{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:99px;background:var(--card,#fff);color:var(--ink);font:700 14px var(--font-body);box-shadow:0 6px 18px rgba(8,20,50,.18);cursor:pointer;z-index:2}
.pcard__look svg{width:16px;height:16px}
.pcard__media{position:relative}
.pcard__media .pcard__look{position:absolute;left:50%;bottom:14px;transform:translate(-50%,6px);opacity:0;transition:opacity .2s,transform .2s}
.pcard__top .pcard__look{position:absolute;right:20px;bottom:0;padding:7px 13px;font-size:13px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.pcard:hover .pcard__look,.pcard:focus-within .pcard__look{opacity:1}
.pcard:hover .pcard__media .pcard__look,.pcard:focus-within .pcard__media .pcard__look{transform:translate(-50%,0)}
.pcard:hover .pcard__top .pcard__look,.pcard:focus-within .pcard__top .pcard__look{transform:none}
@media (hover:none){.pcard .pcard__look{opacity:1}.pcard .pcard__media .pcard__look{transform:translate(-50%,0)}.pcard .pcard__top .pcard__look{transform:none}}

/* Promo boxes: in the column, and across the list */
.cl-box{position:relative;overflow:hidden;border-radius:16px;display:grid;gap:14px}
.cl-box__t{display:grid;gap:8px;align-content:start}
.cl-box__k{justify-self:start;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cl-box b{font:800 21px/1.25 var(--font-display)}
.cl-box p{margin:0;font-size:15px;line-height:1.5}
.cl-box__code{justify-self:start;padding:4px 10px;border:1.5px dashed currentColor;border-radius:8px;font:800 14px var(--font-body);letter-spacing:.06em}
.cl-box__go{justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:11px 16px;border-radius:11px;font:800 15px var(--font-body);text-decoration:none}
.cl-box__go svg{width:14px;height:14px}
.cl-box small{font-size:13px;opacity:.8}
.cl-box--column{padding:20px;background:linear-gradient(150deg,var(--blue),color-mix(in oklab,var(--blue) 70%,#000));color:#fff}
.cl-box--column .cl-box__k{justify-self:start;padding:4px 10px;border-radius:99px;background:var(--gold-grad,var(--gold));color:var(--on-gold,#1b1b1b);letter-spacing:.02em;text-transform:none;font-size:13px}
.cl-box--column .cl-box__go{background:#fff;color:#0f1d3a}
.cl-box--column .cl-box__pic{display:none}
.cl-box--list{grid-column:1/-1;grid-template-columns:minmax(0,1fr);padding:30px 26px;border:1px solid color-mix(in oklab,var(--blue) 16%,var(--border));background:color-mix(in oklab,var(--blue) 6%,var(--card,var(--bg)));color:var(--ink)}
.cl-box--list.cl-box--pic{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:26px}
.cl-box--list .cl-box__k{color:var(--blue)}
.cl-box--list p{color:var(--muted)}
.cl-box--list .cl-box__go{background:var(--gold-grad,var(--gold));color:var(--on-gold,#1b1b1b)}
.cl-box__pic{border-radius:14px;overflow:hidden;aspect-ratio:16/9}.cl-box__pic img{width:100%;height:100%;object-fit:cover;display:block}
.cl-box--echo{display:none}

/* The windows: all the filters, and Quick look */
.cl-win{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px}
.cl-win[hidden]{display:none}
.cl-win__dim{position:absolute;inset:0;background:color-mix(in oklab,#0b1220 46%,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.cl-win__box{position:relative;width:min(720px,100%);max-height:min(640px,calc(100vh - 32px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--card,var(--bg));color:var(--ink);border-radius:22px;box-shadow:0 30px 80px rgba(8,20,50,.35);overflow:hidden}
.cl-win__h{display:flex;align-items:center;gap:12px;padding:18px 20px 16px;border-bottom:1px solid var(--border)}
.cl-win__h h2{margin:0;font:800 21px var(--font-display)}.cl-win__h span{font-size:14px;color:var(--muted)}
.cl-win__x{margin-left:auto;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border);border-radius:99px;background:var(--card,var(--bg));color:var(--ink);cursor:pointer}
.cl-win__x svg{width:14px;height:14px}
.cl-win__b{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:0}
.cl-win__nav{display:grid;align-content:start;gap:2px;padding:12px;border-right:1px solid var(--border);background:color-mix(in oklab,var(--blue) 4%,var(--card,var(--bg)));overflow:auto}
.cl-win__nav button{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border:1px solid transparent;border-radius:11px;background:none;color:var(--ink);font:600 15px var(--font-body);text-align:left;cursor:pointer}
.cl-win__nav button.on{background:var(--card,var(--bg));border-color:var(--border);box-shadow:0 1px 3px rgba(8,20,50,.06)}
.cl-win__nav b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--blue);color:var(--on-blue, #fff);font-size:12px}
.cl-win__pane{padding:16px 20px;overflow:auto;display:grid;align-content:start;gap:12px}
.cl-win__k{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cl-win__find{display:flex;align-items:center;gap:10px;padding:0 12px;border:1.5px solid var(--border);border-radius:12px}
.cl-win__find:focus-within{border-color:var(--blue)}
.cl-win__find svg{width:16px;height:16px;color:var(--muted)}
.cl-win__find input{flex:1;min-width:0;padding:11px 0;border:0;outline:0;background:none;color:var(--ink);font:500 15px var(--font-body)}
.cl-win__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px}
.cl-win__note{margin:0;font-size:14px;color:var(--muted)}.cl-win__note:empty{display:none}
.cl-win__f{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-top:1px solid var(--border);background:color-mix(in oklab,var(--blue) 4%,var(--card,var(--bg)))}
.cl-win__clear{border:0;background:none;padding:6px 0;color:var(--ink);font:700 15px var(--font-body);text-decoration:underline;cursor:pointer}
.cl-win__go{padding:12px 20px;border:0;border-radius:12px;background:var(--ink);color:var(--bg);font:800 15px var(--font-body);cursor:pointer}
.cl-win__go:disabled{opacity:.5;cursor:default}
html.cl-held{overflow:hidden}

.cl-look__box{width:min(1040px,100%);max-height:calc(100vh - 32px);grid-template-rows:minmax(0,1fr)}
.cl-look__x{position:absolute;top:14px;right:14px;z-index:3;margin:0}
.cl-look__in{overflow:auto;padding:26px 8px 20px}
.cl-look__wait{padding:60px 20px;text-align:center;color:var(--muted)}
.cl-look .pp-top{grid-template-areas:"gal box";padding:0 18px}
.cl-look .pp-inc,.cl-look .pp-bar,.cl-look .pp-toast,.cl-look .pp-save{display:none!important}
.cl-look__f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--border);font-size:14px;color:var(--muted)}
.cl-look__f a{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:700;text-decoration:none}
.cl-look__f a svg{width:13px;height:13px}.cl-look__f a:hover{text-decoration:underline}

@media (max-width:900px){
  .cl-head__in{width:calc(100% - 32px);padding:22px 0 26px}
  .cl{width:calc(100% - 32px);grid-template-columns:minmax(0,1fr);gap:0;padding-top:18px}
  .cl-side{position:static;display:contents}
  .cl-form{display:none}
  .cl-side > .cl-box--column{display:none}
  .cl-box--echo{display:grid;grid-column:1/-1}
  .cl-phone{display:inline-flex}
  .cl-count{display:none}
  .cl-sort span{display:none}
  .cl-subs{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 16px;padding:0 16px 4px}
  .cl-sub{flex:none}
  .cl-box--list.cl-box--pic{grid-template-columns:minmax(0,1fr)}
  .cl-win{place-items:end center;padding:0}
  .cl-win__box{width:100%;max-height:88vh;border-radius:22px 22px 0 0}
  .cl-win__b{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .cl-win__nav{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border);padding:10px 12px}
  .cl-win__nav button{flex:none;white-space:nowrap}
  .cl-win__list{grid-template-columns:minmax(0,1fr)}
  .cl-look .pp-top{grid-template-areas:"gal" "box";grid-template-columns:minmax(0,1fr);padding:0 14px}
}