/* smartydevices — device picker, model landing pages, mobile filter drawer (navsearch compat stream, 2026-09-27).
   Loaded as a remote asset (?v=filemtime) on listing pages and on the module's pages; outside the CCC bundles. */

/* ---------------------------------------------------------------- device picker */
.smd-picker{margin:0 0 16px;padding:12px 14px 14px;border:1px solid #e3e3e3;border-radius:8px;background:#fff}
.smd-picker__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px}
.smd-picker__title{margin:0;font-size:15px;font-weight:600;line-height:1.3;color:#222}
.smd-picker__all{flex:0 0 auto;font-size:13px;color:#077f99;text-decoration:underline}
.smd-picker__all:hover{color:#055f73}
.smd-picker__row{display:flex;gap:8px;max-width:680px}
.smd-picker__field{position:relative;min-width:0}
.smd-picker__field--brand{flex:0 0 36%;max-width:220px}
.smd-picker__field--model{flex:1 1 auto}
.smd-picker__brand,.smd-picker__input{display:block;width:100%;height:44px;margin:0;padding:0 12px;border:1px solid #c9c9c9;border-radius:6px;background-color:#fff;color:#222;font-size:16px;line-height:42px;box-shadow:none}
.smd-picker__brand{padding-right:28px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;text-overflow:ellipsis;cursor:pointer}
.smd-picker__brand:focus,.smd-picker__input:focus{outline:none;border-color:#077f99;box-shadow:0 0 0 2px rgba(7,127,153,.25)}
.smd-picker__input::placeholder{color:#8a8a8a}
.smd-picker__list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;max-height:min(60vh,380px);margin:0;padding:4px 0;overflow-y:auto;list-style:none;background:#fff;border:1px solid #c9c9c9;border-radius:6px;box-shadow:0 10px 28px rgba(0,0,0,.14);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.smd-picker__list[hidden]{display:none}
.smd-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin:0;padding:6px 12px;font-size:15px;line-height:1.3;color:#222;cursor:pointer}
.smd-opt:hover,.smd-opt[aria-selected=true]{background:#eaf5f7}
.smd-opt__name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.smd-opt__n{flex:0 0 auto;min-width:26px;padding:1px 8px;border-radius:10px;background:#f0f0f0;color:#555;font-size:12px;text-align:center}
.smd-opt-group{margin:0;padding:10px 12px 4px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#777}
.smd-opt-msg{margin:0;padding:10px 12px;font-size:14px;line-height:1.4;color:#555}
.smd-opt-msg a{color:#077f99;text-decoration:underline}
.smd-picker.is-going{opacity:.6;pointer-events:none}
/* phones: the suggestion list spans the whole row (brand + model), not just the model field */
@media (max-width:767px){
  .smd-picker__row{position:relative}
  .smd-picker__field--model{position:static}
}
@media (max-width:575px){
  .smd-picker{padding:10px 10px 12px}
  .smd-picker__title{font-size:14px}
  .smd-picker__all{font-size:12px}
  .smd-picker__field--brand{flex-basis:38%}
}

/* ---------------------------------------------------------------- model landing page + hub */
.smd-landing{margin:0 0 8px}
.smd-landing[aria-busy=true] .smd-types{opacity:.6}
.smd-intro{max-width:920px;margin:0 0 12px;font-size:15px;line-height:1.55;color:#444}
.smd-series,.smd-types{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.smd-series__label{margin-right:2px;font-size:13px;color:#666}
.smd-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border:1px solid #cdd7da;border-radius:20px;background:#fff;color:#222;font-size:14px;line-height:1.2;text-decoration:none;white-space:nowrap}
.smd-chip:hover,.smd-chip:focus{border-color:#077f99;color:#077f99;text-decoration:none}
.smd-chip--active,.smd-chip--current,.smd-chip--active:hover,.smd-chip--active:focus{border-color:#077f99;background:#077f99;color:#fff}
.smd-chip__n{font-size:12px;opacity:.75}
.smd-landing__tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;margin:0 0 12px}
.smd-hint{margin:0;font-size:13px;line-height:1.4;color:#666}
.smd-change{flex:1 1 100%}
.smd-change>summary{display:inline-flex;align-items:center;min-height:44px;color:#077f99;font-size:14px;text-decoration:underline;cursor:pointer;list-style:none}
.smd-change>summary::-webkit-details-marker{display:none}
.smd-change>summary::before{content:"";display:inline-block;width:0;height:0;margin-right:8px;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.smd-change[open]>summary::before{transform:rotate(90deg)}
.smd-change .smd-picker{margin:4px 0 8px}
.smd-others{clear:both;margin:28px 0 12px;padding-top:18px;border-top:1px solid #eee}
.smd-others__title,.smd-hub__title{margin:0 0 12px;font-size:18px;font-weight:600;line-height:1.3;text-transform:none;color:#222}
.smd-others__list,.smd-hub__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 20px;margin:0;padding:0;list-style:none}
.smd-others__list li,.smd-hub__list li{display:flex;align-items:center;gap:8px;min-height:40px;margin:0;font-size:14px}
.smd-others__list a,.smd-hub__list a{color:#222;text-decoration:underline;text-underline-offset:2px}
.smd-others__list a:hover,.smd-hub__list a:hover{color:#077f99}
.smd-others__n,.smd-hub__n{font-size:12px;color:#888}
.smd-others__more>summary{display:inline-flex;align-items:center;min-height:44px;color:#077f99;font-size:14px;text-decoration:underline;cursor:pointer}
.smd-others__links{display:flex;flex-wrap:wrap;gap:8px 24px;margin:12px 0 0;font-size:14px}
.smd-others__links a,.smd-hub__all a,.smd-hub__root a{color:#077f99;text-decoration:underline}
.smd-hub .smd-picker{margin-bottom:24px}
/* family anchors (#smd-<family>, linked from the menu): land the heading 16 px under the theme's fixed header, i.e. the
   59 px menu bar from 992 px and the logo + menu/search block below it (144 px on phones today, taller on tablets).
   smartydevices.js sets --smd-hdr to the header's live height, and re-aligns when the jump itself makes the theme fix it */
.smd-hub__family{margin:0 0 24px;scroll-margin-top:calc(var(--smd-hdr,59px) + 16px)}
@media (max-width:991px){.smd-hub__family{scroll-margin-top:calc(var(--smd-hdr,144px) + 16px)}}
.smd-hub__all{margin:8px 0 0;font-size:14px}
.smd-hub__root{margin:8px 0 24px;font-size:14px}

/* product grid of the landing page (layout-full-width): 5 per row on desktop, then the theme's category widths */
@media (min-width:1200px){#module-smartydevices-model #products.grid .tv-grid-list-wrapper-info-box{width:20%}}
@media (max-width:1024px){#module-smartydevices-model .tv-grid-list-wrapper-info-box{width:25%}}
@media (max-width:767px){#module-smartydevices-model .tv-grid-list-wrapper-info-box{width:33.33%}}
@media (max-width:575px){#module-smartydevices-model .tv-grid-list-wrapper-info-box{width:50%}}
@media (max-width:335px){#module-smartydevices-model .tv-grid-list-wrapper-info-box{width:100%}}

/* ---------------------------------------------------------------- "Filtrer" button (products-top.tpl) */
.smd-filter-col{display:none}
.smd-filter-btn,.smd-filter-pill{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;margin:0;padding:0 14px;font-size:15px;font-weight:600;line-height:1;cursor:pointer}
.smd-filter-btn{width:100%;border:1px solid #c9c9c9;border-radius:4px;background:#fff;color:#222}
.smd-filter-btn:hover,.smd-filter-btn:focus{border-color:#077f99;color:#077f99}
.smd-filter-btn .material-icons,.smd-filter-pill .material-icons{font-size:20px}
.smd-filter-btn__n:empty{display:none}
.smd-filter-btn__n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#077f99;color:#fff;font-size:12px;line-height:20px;text-align:center}
.smd-filter-pill{position:fixed;left:50%;bottom:16px;z-index:9990;display:none;padding:0 22px;border:0;border-radius:22px;background:#222;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.28);transform:translateX(-50%)}
.smd-filter-pill.is-visible{display:flex}
.smd-filter-pill .smd-filter-btn__n{background:#fff;color:#222}
@media (max-width:1199px){
  .smd-filter-col{display:block}
  .sort-by-row:has(.smd-filter-col){display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px;margin-left:0;margin-right:0}
  .sort-by-row:has(.smd-filter-col)>.sort-by{display:none}
  .sort-by-row:has(.smd-filter-col)>.products-sort-order{order:2;flex:1 1 50%;width:auto;max-width:none;padding:0}
  .sort-by-row:has(.smd-filter-col)>.smd-filter-col{order:1;flex:1 1 50%;width:auto;max-width:none;padding:0}
}
@media (min-width:1200px){.smd-filter-col,.smd-filter-pill{display:none!important}}

/* ---------------------------------------------------------------- filter drawer (#left-column, under 1200 px) */
@media (max-width:1199px){
  html.smd-has-drawer #left-column:not(.smd-drawer){display:none!important}
  #left-column.smd-drawer{display:block!important;position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;z-index:100000;width:auto!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;float:none!important;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;transform:none!important}
  #left-column.smd-drawer>.theiaStickySidebar{position:static!important;top:auto!important;left:auto!important;width:auto!important;min-height:0!important;margin:0!important;padding:0 16px 8px!important;transform:none!important}
  #left-column.smd-drawer .tvleft-column-remove,
  #left-column.smd-drawer #search_filter_controls,
  #left-column.smd-drawer #search_filters .tvleft-right-title-wrapper,
  #left-column.smd-drawer #_desktop_search_filters_clear_all,
  #left-column.smd-drawer .tvfilter-dropdown-wrapper>p.facet-title{display:none!important}
  #left-column.smd-drawer #search_filters_wrapper{margin:0!important}
  #left-column.smd-drawer #search_filters,
  #left-column.smd-drawer .tvserach-filter-wrapper,
  #left-column.smd-drawer .tvsearch-filter-content-wrapper{display:block!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important}
  #left-column.smd-drawer #search_filters .facet{margin:0;padding:0;border-bottom:1px solid #eee}
  #left-column.smd-drawer .tvfilter-search-types-title{display:flex!important;align-items:center;justify-content:space-between;min-height:52px;margin:0;padding:0 2px;cursor:pointer}
  #left-column.smd-drawer .tvfilter-search-types-title .facet-title{margin:0;padding:0;font-size:15px;font-weight:600;text-transform:none;color:#222}
  #left-column.smd-drawer .tvfilter-search-types-title .material-icons{transition:transform .15s}
  #left-column.smd-drawer .tvfilter-search-types-title.smd-open .material-icons{transform:rotate(180deg)}
  #left-column.smd-drawer .tvfilter-search-types-dropdown{max-height:none!important;overflow:visible!important;margin:0 0 10px!important;padding:0 2px!important}
  #left-column.smd-drawer .tvfilter-search-types-dropdown li{margin:0;padding:0}
  #left-column.smd-drawer .tvfilter-search-types-dropdown .facet-label{display:flex;align-items:center;min-height:44px;margin:0;padding:0}
  #left-column.smd-drawer .tvfilter-search-types-dropdown .facet-label a{flex:1 1 auto;padding:10px 0;font-size:15px}
  #left-column.smd-drawer .sc-model-search{top:56px!important}
  #left-column.smd-drawer[aria-busy=true] #search_filters{opacity:.55;pointer-events:none;transition:opacity .15s}
  html.smd-drawer-open,html.smd-drawer-open body{overflow:hidden!important}
  html.smd-drawer-open .smd-filter-pill{display:none!important}
}
.smd-drawer__head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 6px 0 16px;border-bottom:1px solid #e6e6e6;background:#fff}
.smd-drawer__title{margin:0;font-size:18px;font-weight:600;color:#222}
.smd-drawer__close{width:44px;height:44px;margin:0;padding:0;border:0;background:none;color:#222;font-size:30px;line-height:44px;cursor:pointer}
.smd-drawer__foot{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid #e6e6e6;background:#fff}
.smd-drawer__clear{flex:0 0 auto;height:48px;margin:0;padding:0 16px;border:1px solid #c9c9c9;border-radius:6px;background:#fff;color:#222;font-size:15px;cursor:pointer}
.smd-drawer__clear[hidden]{display:none}
.smd-drawer__apply{flex:1 1 auto;height:48px;margin:0;padding:0 12px;border:0;border-radius:6px;background:#077f99;color:#fff;font-size:16px;font-weight:600;cursor:pointer}
.smd-drawer__apply:disabled{opacity:.7;cursor:progress}