/* v451 — one catalogue ruler for every 2040 collection + fourth CHICK PICK case. */

/* Keep all desktop collections on one shared five-column ruler: case 1 sits under case 1,
   case 2 under case 2, etc. Incomplete rows simply leave the remaining right slots empty. */
@media (min-width:1181px){
  :root[data-visual-style="2040"][data-theme="hub"] .page-cases{
    --k451-ruler-bleed:clamp(72px,5.8vw,112px);
    --k451-ruler-gap:clamp(22px,1.55vw,30px);
  }

  :root[data-visual-style="2040"][data-theme="hub"] .page-cases :is(
    .hub-showcase-collection,
    .k221-oscar-section,
    .k449-chick-pick-section
  ){
    width:calc(100% + (var(--k451-ruler-bleed) * 2))!important;
    max-width:none!important;
    margin-left:calc(var(--k451-ruler-bleed) * -1)!important;
    margin-right:calc(var(--k451-ruler-bleed) * -1)!important;
  }

  /* Every collection label starts on exactly the same X coordinate and uses one typography. */
  :root[data-visual-style="2040"][data-theme="hub"] .page-cases :is(
    .collection-heading,
    .k221-oscar-heading,
    .k449-chick-pick-heading
  ){
    width:100%!important;
    min-height:30px!important;
    margin:38px 0 13px!important;
    padding:0 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:0!important;
    text-align:left!important;
    box-sizing:border-box!important;
  }
  :root[data-visual-style="2040"][data-theme="hub"] .page-cases :is(
    .collection-heading,
    .k221-oscar-heading,
    .k449-chick-pick-heading
  )::before{
    content:""!important;
    display:block!important;
    width:7px!important;
    height:7px!important;
    flex:0 0 7px!important;
    margin:0 11px 0 0!important;
    border-radius:50%!important;
    background:#f5eee7!important;
    box-shadow:0 0 13px rgba(255,248,240,.38)!important;
  }
  :root[data-visual-style="2040"][data-theme="hub"] .page-cases :is(
    .collection-heading,
    .k221-oscar-heading,
    .k449-chick-pick-heading
  )>span{
    color:#d9d0c8!important;
    font-family:var(--k371-case-display,"Jost",Manrope,Inter,system-ui,sans-serif)!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:600!important;
    letter-spacing:.12em!important;
    white-space:nowrap!important;
  }
  :root[data-visual-style="2040"][data-theme="hub"] .page-cases :is(
    .collection-heading,
    .k221-oscar-heading,
    .k449-chick-pick-heading
  )::after{
    content:""!important;
    display:block!important;
    height:1px!important;
    flex:1 1 auto!important;
    margin-left:14px!important;
    background:linear-gradient(90deg,rgba(255,255,255,.24),rgba(255,255,255,.045),transparent)!important;
  }

  /* Do not let the collapse button disturb the ruler or title start point. */
  :root[data-visual-style="2040"][data-theme="hub"] .page-cases :is(
    .collection-heading,
    .k221-oscar-heading,
    .k449-chick-pick-heading
  ) .collection-collapse-toggle{
    margin-left:12px!important;
    flex:0 0 auto!important;
  }

  /* One exact five-slot grid for every shelf. */
  :root[data-visual-style="2040"][data-theme="hub"] .page-cases :is(
    .hub-static-grid,
    .k221-oscar-grid,
    .k449-chick-pick-grid
  ){
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    column-gap:var(--k451-ruler-gap)!important;
    row-gap:24px!important;
    justify-content:start!important;
    align-items:start!important;
  }

  /* Frames may add internal padding, so make the normal shelves share the same outer ruler. */
  :root[data-visual-style="2040"][data-theme="hub"] .page-cases .hub-showcase-frame{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }

  /* CHICK PICK stays borderless but follows the same slot geometry. */
  :root[data-visual-style="2040"][data-theme="hub"] .page-cases .k449-chick-pick-grid{
    padding:4px 0 8px!important;
  }
}

/* Full-HD / browser scaling: keep the same ruler, only reduce the bleed. */
@media (min-width:1181px) and (max-width:1600px){
  :root[data-visual-style="2040"][data-theme="hub"] .page-cases{
    --k451-ruler-bleed:clamp(34px,3vw,48px);
    --k451-ruler-gap:18px;
  }
}