/* Runtime catalog variants reconciled against their exact Figma sources. */

/* No-image card — desktop source node 19247:3409 (311 x 287px media area).
   The dedicated SVG owns the Figma 22% logo opacity. */
.brave-catalog [data-node-id="19247:3408"] > a:has(img[src*="imgCatalogPlaceholder-f3fae268.svg"]) > div:first-child,
.brave-category [data-node-id="19247:4274"] > a:has(img[src*="imgCatalogPlaceholder-f3fae268.svg"]) > div:first-child,
.brave-cat-card:has(img[src*="imgCatalogPlaceholder-f3fae268.svg"]) .brave-cat-card__img{
  background-color:#381b11}

.brave-catalog [data-node-id="19247:3408"] > a img[src*="imgCatalogPlaceholder-f3fae268.svg"],
.brave-category [data-node-id="19247:4274"] > a img[src*="imgCatalogPlaceholder-f3fae268.svg"],
.brave-cat-card__img img[src*="imgCatalogPlaceholder-f3fae268.svg"]{
  inset:auto!important;
  left:15.755627%!important;
  top:39.372822%!important;
  width:68.674116%!important;
  height:10.815401%!important;
  max-width:none!important;
  object-fit:fill!important;
  padding:0!important;
  opacity:1!important}

/* Keep square product images inside the shorter desktop media pane. Without
   this clip, the image can spill into the copy area and expose a grey strip. */
.brave-catalog [data-node-id="19247:3408"] > a > div:first-child,
.brave-category [data-node-id="19247:4274"] > a > div:first-child,
.brave-cat-card__img{
  overflow:clip}

/* The supplied source is desktop-only. On mobile, retain the measured mobile
   card/image pane and center the same exact placeholder without distortion. */
.brave-catalog [data-node-id="19247:5137"] > a:has(img[src*="imgCatalogPlaceholder-f3fae268.svg"]) > div:first-child,
.brave-category [data-node-id="19247:5301"] > a:has(img[src*="imgCatalogPlaceholder-f3fae268.svg"]) > div:first-child,
.brave-cat-card-m:has(img[src*="imgCatalogPlaceholder-f3fae268.svg"]) .brave-cat-card-m__img{
  background-color:#381b11}

.brave-catalog [data-node-id="19247:5137"] > a img[src*="imgCatalogPlaceholder-f3fae268.svg"],
.brave-category [data-node-id="19247:5301"] > a img[src*="imgCatalogPlaceholder-f3fae268.svg"],
.brave-cat-card-m__img img[src*="imgCatalogPlaceholder-f3fae268.svg"]{
  inset:auto!important;
  left:15.755627%!important;
  top:50%!important;
  width:68.674116%!important;
  height:9.423209%!important;
  max-width:none!important;
  object-fit:contain!important;
  padding:0!important;
  opacity:1!important;
  transform:translateY(-50%)}

/* Product cards lift by 1vw on pointer hover and settle back on mouse leave.
   Filter controls are intentionally outside this selector set. */
@media (hover:hover) and (pointer:fine){
  .brave-catalog [data-node-id="19247:3408"] > a,
  .brave-catalog [data-node-id="19247:5137"] > a,
  .brave-category [data-node-id="19247:4274"] > a,
  .brave-category [data-node-id="19247:5301"] > a,
  .brave-cat-card,
  .brave-cat-card-m{
    transform:translateY(0);
    transition:transform 300ms var(--brave-ease);
    will-change:transform}

  .brave-catalog [data-node-id="19247:3408"] > a:hover,
  .brave-catalog [data-node-id="19247:5137"] > a:hover,
  .brave-category [data-node-id="19247:4274"] > a:hover,
  .brave-category [data-node-id="19247:5301"] > a:hover,
  .brave-cat-card:hover,
  .brave-cat-card-m:hover{
    transform:translateY(-1vw)}
}

@media (hover:none), (pointer:coarse){
  .brave-catalog [data-node-id="19247:5137"] > a,
  .brave-category [data-node-id="19247:5301"] > a,
  .brave-cat-card-m{
    transform:translateY(0);
    transition:transform 300ms var(--brave-ease);
    will-change:transform;
    touch-action:manipulation}

  .brave-catalog [data-node-id="19247:5137"] > a:active,
  .brave-category [data-node-id="19247:5301"] > a:active,
  .brave-cat-card-m:active{
    transform:translateY(-1vw)}
}

@media (prefers-reduced-motion:reduce){
  .brave-catalog [data-node-id="19247:3408"] > a,
  .brave-catalog [data-node-id="19247:5137"] > a,
  .brave-category [data-node-id="19247:4274"] > a,
  .brave-category [data-node-id="19247:5301"] > a,
  .brave-cat-card,
  .brave-cat-card-m{
    transition:none}}

/* Catalog loading motion: existing results stay steady while only the visible
   filter area and newly rendered card rows rise into place. */
@keyframes brave-catalog-row-rise{
  from{transform:translateY(1.25vw)}
  to{transform:translateY(0)}}

.brave-catalog.is-filtering [data-node-id="19247:3408"] > a,
.brave-catalog.is-filtering [data-node-id="19247:5137"] > a{
  opacity:1}

.brave-catalog .brave-catalog-stagger-enter,
.brave-category .brave-catalog-stagger-enter{
  animation:brave-catalog-row-rise 520ms cubic-bezier(.22,1,.36,1) var(--brave-catalog-stagger-delay,0ms) both;
  will-change:transform}

@media (max-width:767px){
  @keyframes brave-catalog-row-rise{
    from{transform:translateY(6.153846vw)}
    to{transform:translateY(0)}}
}

@media (prefers-reduced-motion:reduce){
  .brave-catalog .brave-catalog-stagger-enter,
  .brave-category .brave-catalog-stagger-enter{
    animation:none;
    transform:none}}

/* Mobile and portrait-tablet filter rail. Keep the Figma pill measurements,
   expose only the viewport-width slice, and let touch/trackpad users reach
   every filter without wrapping the row. */
@media (max-width:767px), (max-width:1024px) and (orientation:portrait){
  .brave-catalog__desktop,
  .brave-category__desktop{display:none}
  .brave-catalog__mobile,
  .brave-category__mobile{display:block}

  html:not(.brave-capturing) .brave-catalog [data-node-id="19247:5174"],
  html:not(.brave-capturing) .brave-category [data-node-id="19247:5334"]{
    position:fixed;
    top:0;
    left:50%;
    z-index:100;
    transform:translateX(-50%)}

  html:not(.brave-capturing) .brave-catalog [data-node-id="19247:5232"],
  html:not(.brave-capturing) .brave-category [data-node-id="19247:5391"]{
    position:fixed;
    top:auto;
    bottom:6.923077vw;
    left:50%;
    z-index:60;
    transform:translateX(-50%)}

  /* Updated mobile product card - Figma node 19372:481 (352 x 179 at 390px).
     The generated and AJAX cards keep their existing semantic markup; this
     shared layer reconciles both variants to the revised visual component. */
  .brave-catalog [data-node-id="19247:5137"] > a,
  .brave-category [data-node-id="19247:5301"] > a,
  .brave-cat-card-m{
    width:90.25641vw;
    height:45.897436vw;
    border-radius:10.512821vw;
    background:rgba(255,255,255,.1)}

  .brave-catalog [data-node-id="19247:5137"] > a > [data-node-id$="19207:98"] > div > img:not([src*="imgCatalogPlaceholder-f3fae268.svg"]),
  .brave-category [data-node-id="19247:5301"] > a > [data-node-id$="19207:98"] > div > img:not([src*="imgCatalogPlaceholder-f3fae268.svg"]),
  .brave-cat-card-m__img > img:not([src*="imgCatalogPlaceholder-f3fae268.svg"]){
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover}

  .brave-catalog [data-node-id="19247:5137"] > a > [data-node-id$="19207:98"] > div[aria-hidden="true"] > div:last-child,
  .brave-category [data-node-id="19247:5301"] > a > [data-node-id$="19207:98"] > div[aria-hidden="true"] > div:last-child,
  .brave-cat-card-m__img::after{
    right:-1px}

  .brave-catalog [data-node-id="19247:5137"] > a > [data-node-id$="19207:104"],
  .brave-category [data-node-id="19247:5301"] > a > [data-node-id$="19207:104"],
  .brave-cat-card-m__body{
    position:static;
    width:46.923077vw;
    height:100%;
    padding:5.128205vw;
    gap:3.076923vw;
    align-items:flex-end;
    justify-content:flex-start;
    background:#140702}

  .brave-catalog [data-node-id="19247:5137"] > a [data-node-id$="19207:105"],
  .brave-category [data-node-id="19247:5301"] > a [data-node-id$="19207:105"],
  .brave-cat-card-m__text{
    width:41.794872vw;
    gap:2.564103vw;
    align-items:flex-end;
    justify-content:center}

  .brave-catalog [data-node-id="19247:5137"] > a [data-node-id$="19207:106"],
  .brave-category [data-node-id="19247:5301"] > a [data-node-id$="19207:106"],
  .brave-cat-card-m__title{
    font-family:'Polin',sans-serif;
    font-size:4.615385vw;
    font-weight:700;
    line-height:1.3;
    letter-spacing:0}

  .brave-catalog [data-node-id="19247:5137"] > a [data-node-id$="19207:107"],
  .brave-category [data-node-id="19247:5301"] > a [data-node-id$="19207:107"],
  .brave-cat-card-m__spec{
    display:none}

  .brave-catalog [data-node-id="19247:5137"] > a [data-node-id$="19207:103"],
  .brave-category [data-node-id="19247:5301"] > a [data-node-id$="19207:103"],
  .brave-cat-card-m__sku{
    font-family:'Polin',sans-serif;
    font-size:4.102564vw;
    font-weight:400;
    line-height:1.35;
    letter-spacing:0;
    white-space:nowrap}

  .brave-catalog [data-node-id="19247:5137"] > a [data-node-id$="19242:2715"],
  .brave-category [data-node-id="19247:5301"] > a [data-node-id$="19242:2715"],
  .brave-cat-card-m__skurow{
    position:static;
    width:auto;
    gap:0;
    justify-content:flex-end}

  .brave-catalog [data-node-id="19247:5137"] > a [data-node-id$="19207:101"],
  .brave-category [data-node-id="19247:5301"] > a [data-node-id$="19207:101"],
  .brave-cat-card-m__arrow{
    position:absolute;
    z-index:2;
    right:5.128205vw;
    left:auto;
    bottom:5.128205vw;
    width:7.852564vw;
    height:7.852564vw}

  .brave-catalog [data-node-id="19247:5137"] > a [data-node-id$="19207:101"] img,
  .brave-category [data-node-id="19247:5301"] > a [data-node-id$="19207:101"] img,
  .brave-cat-card-m__arrow img{
    content:url("../svg/imgArrowUpLeft-mobile-card-19360-236.svg")}

  .brave-catalog [data-node-id="19247:5140"]{
    display:flex;
    flex-direction:row-reverse;
    flex-wrap:nowrap;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    direction:rtl;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y}

  /* The mobile filter rail is a viewport-wide scroller. The surrounding
     product grid keeps its Figma width while the pills can reach both edges. */
  .brave-catalog [data-node-id="19247:5138"]{
    align-self:center;
    width:100vw;
    max-width:100vw;
    padding-inline:0}

  /* The contact-section flares extend hundreds of pixels beyond their Figma
     frame. Clip them at the section boundary so later paint cannot cover the
     final product cards while the dynamically sized hero pushes this section. */
  .brave-catalog [data-node-id="19247:5181"]{
    overflow:clip}

  .brave-catalog [data-node-id="19247:5140"]{
    width:100vw;
    max-width:100vw;
    padding-inline:0}

  .brave-catalog [data-node-id="19247:5140"] > [data-behavior~="filter-toggle"]{
    border-width:1px;
    border-color:rgba(243,243,243,.1);
    transition:border-color .2s ease,background-color .2s ease}

  .brave-catalog [data-node-id="19247:5140"] > [data-behavior~="filter-toggle"].is-active-filter{
    border-color:#fb4b19}

  .brave-catalog [data-node-id="19247:5140"]::-webkit-scrollbar{
    display:none}

  .brave-catalog [data-node-id="19247:5140"] > div{
    flex:0 0 41.025641vw;
    direction:rtl;
    scroll-snap-align:start}

  .brave-filter-popup__close{
    top:calc(var(--brave-filter-popup-top, 8vw) + 5.128205vw);
    right:auto;
    left:calc(50% - 43.076923vw);
    z-index:3;
    display:grid;
    width:8.205128vw;
    height:8.205128vw;
    padding:0;
    background:rgba(20,7,2,.72);
    border:1px solid rgba(255,255,255,.45);
    border-radius:50%;
    font-size:4.615385vw;
    line-height:1;
    place-items:center}

  .brave-filter-popup{
    align-items:flex-start;
    padding-top:var(--brave-filter-popup-top, 8vw)}

  .brave-filter-popup [data-node-id="19247:5245"]{
    height:min(102.820513vw,calc(100dvh - var(--brave-filter-popup-top, 8vw) - 2.564103vw));
    padding-inline:calc(3.846154vw - 1px);
    border:1px solid rgba(255,255,255,.2)}

  .brave-filter-popup [data-node-id="19247:5248"] > div{
    cursor:pointer}

  .brave-filter-popup [data-node-id="19247:5248"]{
    width:100%;
    max-height:77.435897vw;
    overflow-x:hidden;
    overflow-y:auto;
    direction:rtl;
    overscroll-behavior:contain;
    scrollbar-color:rgba(255,255,255,.55) transparent;
    scrollbar-width:thin}

  .brave-filter-popup [data-node-id="19247:5248"]::-webkit-scrollbar{
    width:4px}

  .brave-filter-popup [data-node-id="19247:5248"]::-webkit-scrollbar-track{
    background:transparent}

  .brave-filter-popup [data-node-id="19247:5248"]::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.55);
    border-radius:999px}

  .brave-filter-popup [data-node-id="19247:5247"]{
    width:auto}

  .brave-filter-popup .brave-filter-popup__option-row{
    display:flex;
    position:relative;
    flex:0 0 7.692308vw;
    align-items:center;
    justify-content:flex-end;
    direction:ltr;
    gap:4.102564vw;
    width:100%;
    min-height:7.692308vw;
    padding-right:2.051282vw;
    padding-block:2.564103vw}

  .brave-filter-popup .brave-filter-popup__option-text{
    position:static;
    width:66.153846vw;
    color:#fff;
    font-family:'Polin',sans-serif;
    font-size:4.615385vw;
    font-weight:400;
    line-height:1.3;
    letter-spacing:.138462vw;
    text-align:right;
    white-space:nowrap}

  .brave-filter-popup .brave-filter-popup__option-marker{
    flex:0 0 6.153846vw;
    width:6.153846vw;
    height:6.153846vw;
    border:1px solid #fff;
    border-radius:1.538462vw}

  .brave-filter-popup .brave-filter-popup__option-marker.is-selected{
    border-color:#fb4b19;
    background:#fb4b19}

  .brave-filter-popup .brave-filter-popup__empty{
    width:100%;
    padding-block:5.128205vw;
    color:rgba(255,255,255,.72);
    font-family:'Polin',sans-serif;
    font-size:4.102564vw;
    line-height:1.35;
    text-align:right}

  .brave-filter-popup [data-node-id="19247:5248"] > div > p{
    position:static}

  .brave-filter-popup .brave-filter-option{
    position:static}

  .brave-filter-popup .brave-filter-option::after{
    position:absolute;
    inset:0;
    z-index:2;
    content:""}

  .brave-filter-popup .brave-filter-option:focus-visible{
    outline:none}

  .brave-filter-popup .brave-filter-option:focus-visible::after{
    border-radius:1.538462vw;
    outline:2px solid var(--brave-accent);
    outline-offset:2px}
}

/* Catalog enquiry form — desktop source node 19247:3113.
   The generated form already has the correct structure and live controls;
   these measured overrides restore the equal-column field grid from Figma. */
@media (min-width:768px){
  .brave-catalog [data-node-id="19247:3635"],
  .brave-catalog [data-node-id="19247:3637"],
  .brave-catalog [data-node-id="19247:3639"],
  .brave-catalog [data-node-id="19247:3641"],
  .brave-catalog [data-node-id="19247:3643"]{
    padding-inline:.520833vw}

  .brave-catalog [data-node-id="19247:3635"],
  .brave-catalog [data-node-id="19247:3637"],
  .brave-catalog [data-node-id="19247:3639"],
  .brave-catalog [data-node-id="19247:3643"]{
    width:22.638889vw}

  .brave-catalog [data-node-id="19247:3641"]{
    width:47.569444vw}

  .brave-catalog [data-node-id="19247:3643"]{
    direction:ltr}

  .brave-catalog [data-node-id="19247:3647"],
  .brave-catalog [data-node-id="19247:3652"]{
    direction:ltr}

}