/* ============================================================
   USLEEP CATEGORY REDESIGN — STEP 1
   Scope: desktop/tablet category page only.
   Product cards are intentionally NOT redesigned in this step.
   ============================================================ */

body.usleep-category-step1 {
  --us-blue:#003080;
  --us-blue-hover:#002464;
  --us-text:#0f2f67;
  --us-muted:#667895;
  --us-border:#dbe5f2;
  --us-soft:#f7f9fc;
  --us-soft-blue:#f3f7fd;
}

/* Common page rhythm */
@media (min-width:768px){
  body.usleep-category-step1 #content{
    padding-top:6px;
  }

  body.usleep-category-step1 .breadcrumb{
    margin:18px 0 14px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    font-size:13px!important;
    line-height:1.35!important;
  }

  body.usleep-category-step1 .breadcrumb > li,
  body.usleep-category-step1 .breadcrumb > li > a{
    color:#71809a!important;
    font-weight:400!important;
    text-decoration:none!important;
  }

  body.usleep-category-step1 .breadcrumb > li:last-child,
  body.usleep-category-step1 .breadcrumb > li:last-child > a{
    color:var(--us-text)!important;
  }

  body.usleep-category-step1 #content > h1,
  body.usleep-category-step1 .usleep-category-main-title{
    margin:10px 0 18px!important;
    color:#102e62!important;
    font-size:28px!important;
    line-height:1.15!important;
    font-weight:500!important;
    letter-spacing:-.02em!important;
  }

  /* ----------------------------------------------------------
     SUBCATEGORY CARDS
     JS marks the current category links safely as .usleep-subcat-card
     ---------------------------------------------------------- */
  body.usleep-category-step1 .usleep-subcat-wrap{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
    margin:0 0 20px!important;
  }

  body.usleep-category-step1 a.usleep-subcat-card{
    position:relative!important;
    min-height:142px!important;
    padding:18px 15px 14px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    overflow:hidden!important;
    border:1px solid var(--us-border)!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 3px 13px rgba(0,48,128,.025)!important;
    color:#153671!important;
    text-align:center!important;
    text-decoration:none!important;
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
  }

  body.usleep-category-step1 a.usleep-subcat-card:hover{
    border-color:#b9cceb!important;
    box-shadow:0 8px 22px rgba(0,48,128,.07)!important;
    transform:translateY(-1px)!important;
    color:var(--us-blue)!important;
  }

  body.usleep-category-step1 a.usleep-subcat-card::before{
    content:""!important;
    position:absolute!important;
    top:15px!important;
    left:50%!important;
    width:76px!important;
    height:62px!important;
    transform:translateX(-50%)!important;
    border-radius:50%!important;
    background:#f5f8fd!important;
    z-index:0!important;
  }

  body.usleep-category-step1 a.usleep-subcat-card img{
    position:relative!important;
    z-index:1!important;
    width:68px!important;
    height:58px!important;
    max-width:68px!important;
    max-height:58px!important;
    margin:0 0 3px!important;
    object-fit:contain!important;
    opacity:.86!important;
    filter:saturate(.68) contrast(.96)!important;
  }

  body.usleep-category-step1 a.usleep-subcat-card .usleep-subcat-label{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    margin-top:auto!important;
    color:#153671!important;
    font-size:14px!important;
    line-height:1.28!important;
    font-weight:500!important;
  }

  /* If theme text is a direct text node, JS wraps it into the label */
  body.usleep-category-step1 a.usleep-subcat-card > span:not(.usleep-subcat-label){
    position:relative!important;
    z-index:1!important;
  }

  /* ----------------------------------------------------------
     LEFT FILTER / OCFILTER
     ---------------------------------------------------------- */
  body.usleep-category-step1 .usleep-filter-title{
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    margin:0 0 10px!important;
    color:#102e62!important;
    font-size:20px!important;
    line-height:1.2!important;
    font-weight:500!important;
  }

  body.usleep-category-step1 #column-left,
  body.usleep-category-step1 .usleep-filter-column{
    padding-right:18px!important;
  }

  body.usleep-category-step1 #ocfilter,
  body.usleep-category-step1 .ocfilter,
  body.usleep-category-step1 .ocf-filter,
  body.usleep-category-step1 .usleep-filter-panel{
    border:0!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  body.usleep-category-step1 #column-left .panel,
  body.usleep-category-step1 #column-left .list-group,
  body.usleep-category-step1 .usleep-filter-column .panel,
  body.usleep-category-step1 .usleep-filter-column .list-group{
    margin-bottom:14px!important;
    overflow:hidden!important;
    border:1px solid var(--us-border)!important;
    border-radius:11px!important;
    background:#fff!important;
    box-shadow:0 3px 14px rgba(0,48,128,.025)!important;
  }

  body.usleep-category-step1 #column-left .panel-heading,
  body.usleep-category-step1 #column-left .list-group-item:first-child,
  body.usleep-category-step1 .usleep-filter-column .panel-heading{
    padding:14px 15px 10px!important;
    border:0!important;
    background:#fff!important;
    color:#19386f!important;
    font-size:13px!important;
    line-height:1.25!important;
    font-weight:700!important;
  }

  body.usleep-category-step1 #column-left .panel-body,
  body.usleep-category-step1 .usleep-filter-column .panel-body{
    padding:8px 15px 14px!important;
    background:#fff!important;
  }

  body.usleep-category-step1 #column-left .list-group-item,
  body.usleep-category-step1 .usleep-filter-column .list-group-item{
    padding:9px 14px!important;
    border-color:#eef2f7!important;
    background:#fff!important;
    color:#5b6f90!important;
    font-size:12.5px!important;
    line-height:1.35!important;
  }

  body.usleep-category-step1 #column-left label,
  body.usleep-category-step1 .usleep-filter-column label{
    color:#4f6487!important;
    font-size:12.5px!important;
    font-weight:400!important;
  }

  body.usleep-category-step1 #column-left input[type="checkbox"],
  body.usleep-category-step1 #column-left input[type="radio"]{
    accent-color:var(--us-blue)!important;
  }

  body.usleep-category-step1 #column-left .btn-primary,
  body.usleep-category-step1 #column-left .btn-info,
  body.usleep-category-step1 .usleep-filter-column .btn-primary{
    border-color:var(--us-blue)!important;
    border-radius:8px!important;
    background:var(--us-blue)!important;
    color:#fff!important;
  }

  body.usleep-category-step1 #column-left .btn-default,
  body.usleep-category-step1 .usleep-filter-column .btn-default{
    border:1px solid var(--us-border)!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#506484!important;
  }

  /* Popular filters — keep the content usable without a huge block */
  body.usleep-category-step1 .usleep-filter-column .usleep-popular-filter-box{
    max-height:270px!important;
    overflow:auto!important;
    scrollbar-width:thin!important;
    scrollbar-color:#b9cff0 transparent!important;
  }

  /* ----------------------------------------------------------
     SORT / LIMIT / VIEW TOOLBAR
     ---------------------------------------------------------- */
  body.usleep-category-step1 .usleep-category-toolbar{
    min-height:54px!important;
    margin:0 0 16px!important;
    padding:8px 10px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    border:1px solid #edf1f6!important;
    border-radius:10px!important;
    background:#f8f9fb!important;
  }

  body.usleep-category-step1 .usleep-category-toolbar .btn,
  body.usleep-category-step1 .usleep-category-toolbar button{
    min-width:40px!important;
    min-height:38px!important;
    padding:7px 10px!important;
    border:1px solid transparent!important;
    border-radius:8px!important;
    background:transparent!important;
    color:#536684!important;
    box-shadow:none!important;
  }

  body.usleep-category-step1 .usleep-category-toolbar .btn.active,
  body.usleep-category-step1 .usleep-category-toolbar .btn:hover,
  body.usleep-category-step1 .usleep-category-toolbar button.active,
  body.usleep-category-step1 .usleep-category-toolbar button:hover{
    border-color:#e6edf7!important;
    background:#fff!important;
    color:var(--us-blue)!important;
    box-shadow:0 3px 10px rgba(0,48,128,.05)!important;
  }

  body.usleep-category-step1 .usleep-category-toolbar select,
  body.usleep-category-step1 .usleep-category-toolbar .form-control{
    height:38px!important;
    min-height:38px!important;
    padding:6px 30px 6px 11px!important;
    border:1px solid #e2e8f1!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#354c72!important;
    font-size:12px!important;
    box-shadow:none!important;
  }

  body.usleep-category-step1 .usleep-toolbar-spacer{
    flex:1 1 auto!important;
  }

  /* Do not touch actual product cards in Step 1 */
  body.usleep-category-step1 .product-layout,
  body.usleep-category-step1 .product-thumb{
    /* intentionally untouched */
  }
}

/* Intermediate tablet */
@media (min-width:768px) and (max-width:1199px){
  body.usleep-category-step1 .usleep-subcat-wrap{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Mobile is a separate redesign step. Keep current Chameleon layout intact. */
@media (max-width:767px){
  body.usleep-category-step1 .usleep-subcat-card,
  body.usleep-category-step1 .usleep-category-toolbar{
    /* no forced mobile redesign in Step 1 */
  }
}