/* Category browser (t350/t366, 2026-10-19): left-rail card under Sponsored (>= 1800px) and a
   collapsible "Categories" section on narrower screens. Text colours are >= 4.5:1 on white. */
.cbr__list, .cbr__sub { list-style: none; margin: 0; padding: 0; }
.cbr__list { display: grid; gap: 2px; }
.cbr__row, .cbr__link {
  display: flex; align-items: center; gap: .5rem; min-height: 40px; padding: .35rem .55rem;
  border-radius: 10px; color: #0f2648; text-decoration: none; font-size: .9rem; line-height: 1.25; cursor: pointer;
}
.cbr__row:hover, .cbr__link:hover { background: #eef6fb; }
.cbr__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cbr__count { font-size: .76rem; font-weight: 700; color: #3d4f66; font-variant-numeric: tabular-nums; }
.cbr summary { list-style: none; }
.cbr summary::-webkit-details-marker { display: none; }
.cbr__caret { width: .55rem; height: .55rem; border-right: 2px solid #3d4f66; border-bottom: 2px solid #3d4f66; transform: rotate(-45deg); transition: transform .15s ease; flex: none; margin-left: .1rem; }
details[open] > summary .cbr__caret { transform: rotate(45deg); }
.cbr__sub { display: grid; gap: 1px; margin: 2px 0 6px .55rem; padding-left: .45rem; border-left: 2px solid #d5ecf5; }
.cbr__sub .cbr__link { min-height: 36px; font-size: .85rem; }
.cbr__item.is-current > .cbr__row, .cbr__item.is-current > details > summary { font-weight: 700; }
.cbr__link.is-active { background: #e2f3f8; color: #08485c; font-weight: 700; box-shadow: inset 3px 0 0 #0f7a96; }
.cbr__row:focus-visible, .cbr__link:focus-visible, .cbr-drawer__toggle:focus-visible { outline: 3px solid #7a3e00; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cbr__caret { transition: none; } }

/* Rail card */
.sf-card--cats .sf-card__body { gap: 0; }

/* Narrow screens: collapsible section at the top of the page (the side rail only exists >= 1800px). */
.cbr-drawer { margin-top: .75rem; margin-bottom: .25rem; position: relative; z-index: 3; }
.cbr--drawer { background: #fff; border: 1px solid #d5ecf5; border-radius: 14px; box-shadow: 0 6px 16px rgba(12, 30, 54, .06); }
.cbr-drawer__toggle { display: flex; align-items: center; gap: .55rem; min-height: 48px; padding: .4rem .9rem; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1rem; color: #0f2648; cursor: pointer; border-radius: 14px; }
.cbr-drawer__toggle > span:nth-child(2) { flex: none; }
.cbr-drawer__cur { flex: 1; font-family: inherit; font-size: .82rem; font-weight: 600; color: #3d4f66; text-align: right; }
.cbr-drawer__icon { width: 18px; height: 14px; flex: none; background: linear-gradient(#0f2648, #0f2648) 0 0/100% 2px no-repeat, linear-gradient(#0f2648, #0f2648) 0 6px/70% 2px no-repeat, linear-gradient(#0f2648, #0f2648) 0 12px/85% 2px no-repeat; }
.cbr--drawer > nav { padding: 0 .55rem .7rem; max-height: min(70vh, 560px); overflow-y: auto; }
.cbr--drawer > nav .cbr__list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: .6rem; align-items: start; }
@media (min-width: 1200px) { .cbr-drawer { display: none; } }

/* t350 filter bar (category + search results) */
.cf { margin: 0 0 1rem; scroll-margin-top: 140px; }
.cf__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .55rem .65rem; background: #fff; border: 1px solid #d5ecf5; border-radius: 14px; }
.cf__title { font-weight: 800; font-size: .86rem; color: #0f2648; margin-right: .15rem; }
.cf__group { position: relative; }
.cf__group summary { list-style: none; }
.cf__group summary::-webkit-details-marker { display: none; }
.cf__toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .3rem .75rem; border: 1px solid #b9c7d6; border-radius: 999px; background: #fff; color: #0f2648; font-size: .86rem; font-weight: 600; cursor: pointer; }
.cf__toggle small { font-size: .78rem; font-weight: 700; color: #08485c; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf__group.is-on > .cf__toggle { border-color: #0f7a96; background: #e2f3f8; }
.cf__toggle:focus-visible, .cf__opt:focus-visible, .cf__chip:focus-visible { outline: 3px solid #7a3e00; outline-offset: 2px; }
.cf__opts { list-style: none; margin: 0; padding: .35rem; position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 230px; max-width: min(320px, 86vw); max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #c9d8e6; border-radius: 12px; box-shadow: 0 14px 30px rgba(12, 30, 54, .16); }
.cf__opt { display: flex; align-items: center; gap: .5rem; min-height: 38px; padding: .3rem .5rem; border-radius: 8px; color: #0f1111; text-decoration: none; font-size: .86rem; }
.cf__opt:hover { background: #eef6fb; }
.cf__check { width: 16px; height: 16px; flex: none; border: 2px solid #5b6b7f; border-radius: 4px; }
.cf__opt.is-active .cf__check { background: #0f7a96 radial-gradient(circle, #fff 30%, transparent 32%); border-color: #0f7a96; }
.cf__opt.is-active { font-weight: 700; }
.cf__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cf__count { font-size: .76rem; font-weight: 700; color: #3d4f66; font-variant-numeric: tabular-nums; }
.cf__shown { margin-left: auto; font-size: .82rem; font-weight: 600; color: #3d4f66; }
.cf__chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .55rem; }
.cf__chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .2rem .65rem; border-radius: 999px; background: #0f2648; color: #fff; font-size: .8rem; font-weight: 600; text-decoration: none; }
.cf__clear { font-size: .82rem; font-weight: 700; color: #00616f; }
.cf__none { padding: .9rem 1rem; background: #fff; border: 1px solid #d5ecf5; border-radius: 12px; }
@media (max-width: 560px) {
  .cf__opts { position: static; box-shadow: none; margin-top: .35rem; max-width: none; }
  .cf__group[open] { flex-basis: 100%; }
  .cf__shown { flex-basis: 100%; margin-left: 0; }
}

/* t367: Everything, empty categories (greyed but still >= 4.5:1), third level */
.cbr__everything { font-weight: 700; }
.cbr__everything::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 4px;
  background: conic-gradient(from 45deg, #0f7a96 0 25%, #E8890C 0 50%, #0f2648 0 75%, #19a35b 0); }
.cbr__hint { font-size: .72rem; font-weight: 700; color: #08485c; background: #e2f3f8; border-radius: 999px; padding: .1rem .45rem; }
.cbr__item.is-empty > .cbr__row, .cbr__item.is-empty > details > summary,
.cbr__sub li.is-empty > .cbr__link { color: #5b6676; }
.cbr__sub li.is-empty > .cbr__link .cbr__count, .cbr__item.is-empty .cbr__count { color: #5b6676; font-weight: 600; }
.cbr__link--l2 { list-style: none; }
.cbr__sub--l3 { margin-left: .4rem; }
.cbr__sub--l3 .cbr__link { min-height: 34px; font-size: .83rem; }
.cbr__link.has-more .cbr__name::after { content: " ›"; color: #3d4f66; }
.sf-card--cats .sf-card__body { max-height: none; }

/* t368 value-level filter checklist (left rail >= 1200px; "Filters" panel below that). */
.sf-card--filters .sf-card__body { padding-top: .2rem; }
.cfl { display: grid; gap: .1rem; }
.cfl__sec { border-top: 1px solid #e3eef5; padding: .15rem 0; }
.cfl__sec:first-child { border-top: 0; }
.cfl__head { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 36px; cursor: pointer; font-weight: 800; font-size: .86rem; color: #0f2648; }
.cfl__head::-webkit-details-marker, .cfl__moreBtn::-webkit-details-marker { display: none; }
.cfl__sec[open] > .cfl__head .cbr__caret { transform: rotate(45deg); }
.cfl__list { list-style: none; margin: 0 0 .3rem; padding: 0; display: grid; gap: 1px; }
.cfl__opt { display: flex; align-items: center; gap: .5rem; min-height: 32px; padding: .2rem .35rem; border-radius: 8px; color: #1d2b3f; text-decoration: none; font-size: .84rem; line-height: 1.25; }
.cfl__opt:hover { background: #eef7fb; }
.cfl__opt:focus-visible { outline: 3px solid #7a3e00; outline-offset: 1px; }
.cfl__box { flex: none; width: 16px; height: 16px; border: 1.5px solid #6b7c93; border-radius: 4px; background: #fff; display: grid; place-items: center; }
.cfl__box--radio { border-radius: 50%; }
.cfl__opt.is-on .cfl__box { background: #0f7a96; border-color: #0f7a96; }
.cfl__opt.is-on .cfl__box::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.cfl__opt.is-on .cfl__box--radio::after { width: 6px; height: 6px; border: 0; border-radius: 50%; background: #fff; transform: none; }
.cfl__opt.is-on .cfl__name { font-weight: 700; }
.cfl__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cfl__n { flex: none; font-size: .76rem; color: #3d4f66; font-variant-numeric: tabular-nums; }
.cfl__opt.is-zero { color: #5b6676; }
.cfl__opt.is-zero .cfl__box { border-color: #9aa6b5; }
.cfl__opt.is-zero.is-on .cfl__box { background: #9aa6b5; border-color: #9aa6b5; }
.cfl__more { margin: 0 0 .3rem; }
.cfl__moreBtn { list-style: none; cursor: pointer; display: inline-flex; gap: .25rem; min-height: 32px; align-items: center; padding: 0 .35rem; font-size: .82rem; font-weight: 700; color: #0b5f75; }
.cfl__more[open] > .cfl__moreBtn { display: none; }
.cfl__find { width: 100%; box-sizing: border-box; min-height: 34px; margin: .1rem 0 .3rem; padding: .3rem .6rem; border: 1px solid #b8cad8; border-radius: 9px; font: inherit; font-size: .84rem; }
.cfl__clear { justify-self: start; margin-top: .3rem; font-size: .84rem; font-weight: 700; color: #0b5f75; }
.cf--t368 .cf__bar { gap: .6rem; }
.cf-panel { width: 100%; }
.cf-panel__toggle { list-style: none; display: flex; align-items: center; gap: .55rem; min-height: 44px; cursor: pointer; font-weight: 800; color: #0f2648; }
.cf-panel__toggle::-webkit-details-marker { display: none; }
.cf-panel__icon { width: 18px; height: 14px; flex: none; background: linear-gradient(#0f2648, #0f2648) 0 1px/100% 2px no-repeat, linear-gradient(#0f2648, #0f2648) 3px 6px/70% 2px no-repeat, linear-gradient(#0f2648, #0f2648) 6px 11px/45% 2px no-repeat; }
.cf-panel__n { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #0f7a96; color: #fff; font-size: .74rem; display: inline-grid; place-items: center; }
.cf-panel .cbr__caret { margin-left: auto; }
.cf-panel[open] > summary .cbr__caret { transform: rotate(45deg); }
.cf-panel__body { padding: .2rem 0 .4rem; }
@media (min-width: 1200px) {
  .page-main--rails .cf-panel { display: none; }
}
/* t368: category names are longer now ("Computers & Laptops"); keep the sidebar heading on whole words. */
.page-main--rails .catalog-sidebar h1 { overflow-wrap: normal; word-break: normal; hyphens: auto; font-size: clamp(1.25rem, 1.55vw, 1.9rem); line-height: 1.15; }

/* t377: filter column (middle column on category, search and store pages; replaces the old Browse sidebar). */
.catalog-sidebar.cf-col { display: block; padding: .9rem .95rem 1rem; background: #fff; border: 1px solid #d5d9d9; border-radius: 12px; color: #0f1111; box-shadow: none; position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cf-col__head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 0 0 .35rem; }
.cf-col__title { display: flex; align-items: center; gap: .5rem; margin: 0; font: 800 1.05rem/1.2 inherit; color: #0f2648; letter-spacing: 0; }
.cf-col__n { font-size: .82rem; font-weight: 700; color: #4a5562; white-space: nowrap; }
.cf-col__ctx { margin: 0 0 .5rem; font-size: .8rem; color: #4a5562; line-height: 1.35; }
.cf-col__chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .2rem 0 .6rem; padding-bottom: .6rem; border-bottom: 1px solid #e3e7ec; }
.cf-col .cfl__clear { display: none; } /* Clear all sits with the chips at the top */
.cf-col .cfl__sec:first-child { border-top: 0; }
.catalog-layout.catalog-layout--solo, body.sf-fluid .catalog-layout.catalog-layout--solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1023px) {
  .catalog-sidebar.cf-col { display: none; }
}
@media (min-width: 1024px) {
  /* The column carries the checklist and chips; the results bar keeps the count only. */
  .catalog-layout--cf .cf-panel, .catalog-layout--cf .cf__chips { display: none; }
  .catalog-layout--gc.catalog-layout--cf .gc-types { display: none; }
}
.store-intro { display: grid; gap: .35rem; margin: 0 0 1rem; }
.store-intro h1 { margin: 0; font-size: clamp(1.4rem, 1.2rem + 1vw, 2.1rem); line-height: 1.15; }
.store-intro p { margin: 0; }
.store-intro .chat-start--btn { justify-self: start; }