/** Shopify CDN: Minification failed

Line 19:9 Unexpected "{"
Line 19:18 Expected ":"
Line 19:25 Unexpected "{"
Line 288:19 Unexpected "{"
Line 288:28 Expected ":"
Line 294:19 Unexpected "{"
Line 294:28 Expected ":"
Line 300:21 Unexpected "{"
Line 300:30 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:portfolio-klasme-group (INDEX:80) */
#marcas-{{ section.id }} {
    --ink-950: #050505;
    --ivory-50: #f7f4ee;
  }

  .brands-section {
    position: relative;
    background: var(--ink-950);
    border-top: 1px solid rgba(247, 244, 238, .08);
    padding: var(--brands-padding-top, 56px) var(--page-margin, 20px) var(--brands-padding-bottom, 64px);
  }

  @media (min-width: 768px) {
    .brands-section {
      padding-left: 56px;
      padding-right: 56px;
    }
  }

  .brands-section .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(247, 244, 238, .18);
    background: #050505;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(247, 244, 238, .7);
    margin-bottom: 32px;
  }

  .brands-intro {
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
  }

  .brands-intro-heading {
    margin-top: 18px;
    font-weight: 500;
    font-size: clamp(1.6rem, 3.6vw, 2.5rem);
    line-height: 1.35;
    color: var(--ivory-50);
  }

  /* ---- Grid (default) ---- */
  .brands-grid {
    max-width: 100%;
    margin: 56px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  @media (min-width: 640px) {
    .brands-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .brands-grid {
      margin-top: 72px;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
  }

  /* ---- Slider variant (mobile only — reverts to the normal grid at the
     same breakpoint the grid itself switches to 2 columns). Same
     negative-margin technique used elsewhere in the theme's mobile
     carousels: children are wider than 100%, so the next card always
     peeks in at the edge as a hint there's more to scroll through. ---- */
  @media (max-width: 639px) {
    .brands-grid--slider {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      touch-action: pan-x;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      gap: 14px;
      margin-inline: calc(var(--page-margin, 20px) * -1);
      padding-inline: var(--page-margin, 20px);
      scroll-padding-left: var(--page-margin, 20px);
    }

    .brands-grid--slider::-webkit-scrollbar {
      display: none;
    }

    .brands-grid--slider .brand-card {
      scroll-snap-align: start;
      flex: 0 0 78vw;
      outline: none;
    }

    /* O reveal-on-scroll (pensado pra grade vertical) esconde o card até
       ~15% dele entrar na viewport — mas a "espiada" do próximo card no
       slider mostra só uma fatia bem menor que isso na carga inicial, então
       ele nunca disparava sozinho. No slider, os cards já nascem visíveis. */
    .brands-grid--slider [data-reveal] {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  .brand-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 3 / 4;
    border-radius: 18px;
    border: 1px solid rgba(247, 244, 238, .1);
    background: rgba(247, 244, 238, .02);
    padding: 22px;
    text-decoration: none;
    transition: border-color .35s ease, transform .35s ease;
  }

  a.brand-card:hover {
    border-color: rgba(247, 244, 238, .3);
  }

  .brand-card--static {
    cursor: default;
  }

  .brand-card-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    padding: 14%;
    background: linear-gradient(160deg, #171512 0%, #050505 70%);
  }

  /* Logo shown by default, product photo swaps in on hover — same trick
     as the source page: two images stacked with absolute + inset + auto
     margins, only one opaque at a time. */
  .brand-card-media img {
    position: absolute;
    inset: 10% 10% 38% 10%;
    margin: auto;
    max-width: 52%;
    max-height: 46%;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5));
    transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
  }

  .brand-card-product {
    opacity: 0;
  }

  /* Cards "Em breve" trocam a foto normalmente no hover, mas em
     escala de cinza — reforça que o produto ainda não está disponível. */
  .brand-card--static .brand-card-product {
    filter: grayscale(1) drop-shadow(0 20px 30px rgba(0, 0, 0, .5));
  }

  /* Scoped to devices with a real pointer — on touch, :hover latches onto
     a tap with no matching "unhover" gesture, which would leave the card
     stuck showing the product photo with no way back to the logo. */
  @media (hover: hover) {
    .brand-card:hover .brand-card-logo {
      opacity: 0;
    }

    .brand-card:hover .brand-card-product {
      opacity: 1;
    }

    .brand-card:hover .brand-card-media img {
      transform: scale(1.06) translateY(-4px);
    }
  }

  .brand-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .1) 60%, transparent 100%);
  }

  .brand-card-num {
    font-size: 10px;
    letter-spacing: .18em;
    color: rgba(247, 244, 238, .4);
  }

  .brand-card-name {
    margin-top: 8px;
    font-weight: 500;
    font-size: 17px;
    color: #ffffff;
  }

  .brand-card-desc {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(247, 244, 238, .5);
  }

  .brand-card-arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(247, 244, 238, .5);
    background: rgba(5, 5, 5, .4);
    backdrop-filter: blur(8px);
    color: rgba(247, 244, 238, .5);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity .3s ease, transform .3s ease, border-color .3s ease, color .3s ease;
  }

  a.brand-card:hover .brand-card-arrow {
    opacity: 1;
    transform: translate(0, 0);
    border-color: rgba(247, 244, 238, .9);
    color: rgba(247, 244, 238, .9);
  }

  .brand-card-arrow svg {
    width: 14px;
    height: 14px;
  }

  /* Tag: "Em breve" (automático em cards não clicáveis) ou o texto
     customizado em tag_label (ex.: "Grupo" no card da própria Klasmē). */
  .brand-card-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(247, 244, 238, .08);
    color: rgba(247, 244, 238, .55);
  }

  @media (hover: none) {
    a.brand-card .brand-card-arrow {
      opacity: 1;
      transform: none;
    }
  }

  /* Reveal-on-scroll baseline; JS below adds .is-visible when each card
     enters the viewport. No JS (or reduced motion) → stays visible. */
  html.js #marcas-{{ section.id }} [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
  }

  html.js #marcas-{{ section.id }} [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    html.js #marcas-{{ section.id }} [data-reveal] {
      transition: none;
      transform: none;
    }
  }
/* END_SECTION:portfolio-klasme-group */