/* =========================================================
   SCATHAN PRODUCTS V4
   Catálogo compacto e padronizado
   ========================================================= */

#produtos {
  position: relative;
  padding: 76px 20px 90px;
  background:
    radial-gradient(circle at 50% 0%, rgba(210,174,91,.075), transparent 34%),
    #070707;
}

#produtos .sp-anchor {
  position: absolute;
  top: -110px;
}

#produtos .sp-wrap {
  width: min(1240px, 100%);
  margin: 0 auto;
}

#produtos .sp-heading {
  max-width: 720px;
  margin: 0 auto 34px;
  text-align: center;
}

#produtos .sp-kicker {
  display: block;
  margin-bottom: 8px;
  color: #d4ad59;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
}

#produtos .sp-heading h2 {
  margin: 0;
  color: #f5f2e9;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  font-weight: 650;
}

#produtos .sp-heading p {
  max-width: 620px;
  margin: 13px auto 0;
  color: rgba(245,242,233,.62);
  font-size: 14px;
  line-height: 1.55;
}


/* =========================================================
   GRID
   ========================================================= */

#produtos .sp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}


/* =========================================================
   CARD
   ========================================================= */

#produtos .sp-card {
  min-width: 0;
  overflow: hidden;

  display: grid;
  grid-template-rows:
    auto
    auto
    auto
    minmax(42px, auto)
    auto;

  align-content: start;

  border: 1px solid rgba(215,181,105,.25);
  border-radius: 17px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.006)
    ),
    #0c0c0d;

  box-shadow: 0 8px 22px rgba(0,0,0,.20);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

@media (hover:hover) and (pointer:fine) {
  #produtos .sp-card:hover {
    transform: translateY(-3px);
    border-color: rgba(215,181,105,.58);
    box-shadow: 0 15px 32px rgba(0,0,0,.30);
  }
}


/* =========================================================
   IMAGEM
   ========================================================= */

#produtos .sp-image-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #080a0d;

  border-bottom: 1px solid rgba(215,181,105,.12);
}

#produtos .sp-image-stage::after {
  display: none;
}

#produtos .sp-image {
  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center;

  margin: 0;

  filter: none;

  transition: transform .22s ease;
}

@media (hover:hover) and (pointer:fine) {
  #produtos .sp-card:hover .sp-image {
    transform: scale(1.012);
  }
}

#produtos .sp-image-stage.is-missing::before {
  content: "SCATHAN";
  color: rgba(215,181,105,.38);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
}

#produtos .sp-image-stage.is-missing .sp-image {
  display: none;
}


/* =========================================================
   TEXTO CARD
   ========================================================= */

#produtos .sp-name {
  margin: 0;
  padding: 15px 12px 0;

  color: #f5f2ea;

  font-size: 17px;
  font-weight: 750;
  line-height: 1.15;

  text-align: center;
}

#produtos .sp-dose {
  margin: 4px 0 0;
  padding: 0 12px;

  color: #d7b569;

  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .045em;

  text-align: center;
}

#produtos .sp-short {
  margin: 8px 0 0;
  padding: 0 14px;

  color: rgba(245,242,234,.62);

  font-size: 11.5px;
  line-height: 1.42;

  text-align: center;

  display: flex;
  align-items: flex-start;
  justify-content: center;
}


/* =========================================================
   BOTÃO
   ========================================================= */

#produtos .sp-details {
  appearance: none;

  min-height: 34px;

  margin: 12px auto 15px;
  padding: 0 15px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(215,181,105,.56);
  border-radius: 999px;

  background: transparent;

  color: #dfbd6d;

  font-family: inherit;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .075em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

#produtos .sp-details::after {
  content: "→";
  margin-left: 7px;
  font-size: 12px;
}

#produtos .sp-details:hover,
#produtos .sp-details:focus-visible {
  border-color: #e5c570;
  background: rgba(215,181,105,.07);
  color: #efd28a;
  outline: none;
}


/* =========================================================
   MODAL
   ========================================================= */

.sp-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: none;
  place-items: center;

  padding: 20px;
}

.sp-modal.is-open {
  display: grid;
}

.sp-modal-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,.88);

  backdrop-filter: blur(8px);
}

.sp-modal-panel {
  position: relative;
  z-index: 1;

  width: min(920px, 100%);
  max-height: calc(100vh - 40px);

  overflow-y: auto;
  overflow-x: hidden;

  padding: 48px 34px 32px;

  border: 1px solid rgba(215,181,105,.38);
  border-radius: 20px;

  background:
    radial-gradient(circle at 22% 18%, rgba(215,181,105,.06), transparent 31%),
    #0c0c0d;

  box-shadow: 0 30px 90px rgba(0,0,0,.70);

  color: #f4f1e9;
}

.sp-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;

  z-index: 5;

  width: 38px;
  height: 38px;

  border: 1px solid rgba(215,181,105,.34);
  border-radius: 999px;

  background: rgba(255,255,255,.025);

  color: #e0c078;

  font-size: 23px;

  cursor: pointer;
}


/* =========================================================
   MODAL LAYOUT
   ========================================================= */

.sp-modal-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 44fr)
    minmax(0, 56fr);

  gap: 32px;

  align-items: start;
}

.sp-modal-visual {
  width: 100%;
  aspect-ratio: 3 / 2;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(215,181,105,.14);
  border-radius: 14px;

  background: #080a0d;
}

.sp-modal-visual::after {
  display: none;
}

.sp-modal-image {
  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center;

  margin: 0;

  filter: none;
}

.sp-modal-visual.is-missing::before {
  content: "SCATHAN";

  color: rgba(215,181,105,.38);

  font-size: 15px;
  letter-spacing: .3em;
}

.sp-modal-visual.is-missing .sp-modal-image {
  display: none;
}


/* =========================================================
   REMOVE BRANDING DUPLICADO
   ========================================================= */

.sp-brand-lab,
.sp-brand-name,
.sp-brand-sub {
  display: none !important;
}


/* =========================================================
   MODAL TEXTO
   ========================================================= */

.sp-modal-copy {
  min-width: 0;
}

.sp-modal-product {
  margin: 0;

  color: #f5f2ea;

  font-size: clamp(29px, 3.6vw, 40px);
  line-height: 1.04;
  font-weight: 700;
}

.sp-modal-dose {
  margin: 6px 0 17px;

  color: #d7b569;

  font-size: 16px;
  font-weight: 750;
}

.sp-modal-purpose {
  margin: 0 0 10px;

  color: #d7b569;

  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.35;

  letter-spacing: .10em;
  text-transform: uppercase;
}

.sp-modal-text {
  margin: 0;

  color: rgba(245,242,234,.78);

  font-size: 13.5px;
  line-height: 1.58;
}


/* =========================================================
   INFORMAÇÕES TÉCNICAS
   ========================================================= */

.sp-modal-tech {
  margin-top: 17px;
  padding: 14px 15px;

  border: 1px solid rgba(215,181,105,.17);
  border-radius: 13px;

  background: rgba(255,255,255,.012);
}

.sp-modal-tech[hidden] {
  display: none;
}

.sp-modal-tech h4 {
  margin: 0 0 10px;

  color: #d7b569;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .11em;
  text-transform: uppercase;
}

.sp-modal-tech ul {
  margin: 0;
  padding: 0;

  display: grid;
  gap: 7px;

  list-style: none;
}

.sp-modal-tech li {
  position: relative;

  padding-left: 22px;

  color: rgba(245,242,234,.73);

  font-size: 11.5px;
  line-height: 1.4;
}

.sp-modal-tech li::before {
  content: "✓";

  position: absolute;
  top: 0;
  left: 0;

  width: 15px;
  height: 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(215,181,105,.60);
  border-radius: 50%;

  color: #d7b569;

  font-size: 8px;
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.sp-modal-whatsapp {
  width: 100%;
  min-height: 43px;

  margin-top: 18px;
  padding: 0 19px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #d7b569;
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #e2c16d,
      #c89d47
    );

  color: #090909;

  text-decoration: none;

  font-size: 12px;
  font-weight: 800;
}

.sp-modal-whatsapp:hover {
  filter: brightness(1.05);
}

body.sp-modal-lock {
  overflow: hidden;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

  #produtos .sp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sp-modal-layout {
    grid-template-columns:
      minmax(0, 43fr)
      minmax(0, 57fr);

    gap: 25px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  #produtos {
    padding: 54px 10px 68px;
  }

  #produtos .sp-heading {
    margin-bottom: 24px;
  }

  #produtos .sp-heading p {
    font-size: 13px;
  }

  #produtos .sp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #produtos .sp-card {
    border-radius: 14px;
  }

  #produtos .sp-name {
    padding: 11px 7px 0;

    font-size: 13px;
    line-height: 1.15;
  }

  #produtos .sp-dose {
    margin-top: 3px;
    padding: 0 7px;

    font-size: 10.5px;
  }

  #produtos .sp-short {
    min-height: 39px;

    margin-top: 6px;
    padding: 0 7px;

    font-size: 9px;
    line-height: 1.32;
  }

  #produtos .sp-details {
    min-height: 29px;

    margin: 9px auto 11px;
    padding: 0 9px;

    font-size: 7.8px;
  }

  #produtos .sp-details::after {
    margin-left: 5px;
    font-size: 10px;
  }


  /* MODAL MOBILE */

  .sp-modal {
    padding: 7px;
  }

  .sp-modal-panel {
    width: 100%;
    max-height: calc(100vh - 14px);

    padding: 40px 12px 17px;

    border-radius: 16px;
  }

  .sp-modal-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sp-modal-visual {
    width: 100%;
    aspect-ratio: 3 / 2;

    border-radius: 12px;
  }

  .sp-modal-product {
    font-size: 25px;
  }

  .sp-modal-dose {
    margin: 4px 0 12px;

    font-size: 14px;
  }

  .sp-modal-purpose {
    margin-bottom: 8px;

    font-size: 8.5px;
  }

  .sp-modal-text {
    font-size: 12.5px;
    line-height: 1.5;
  }

  .sp-modal-tech {
    margin-top: 13px;
    padding: 12px;
  }

  .sp-modal-tech h4 {
    margin-bottom: 9px;

    font-size: 9px;
  }

  .sp-modal-tech ul {
    gap: 6px;
  }

  .sp-modal-tech li {
    padding-left: 20px;

    font-size: 10.5px;
    line-height: 1.35;
  }

  .sp-modal-tech li::before {
    width: 14px;
    height: 14px;

    font-size: 7px;
  }

  .sp-modal-whatsapp {
    min-height: 41px;

    margin-top: 14px;

    font-size: 11px;
  }
}


/* =========================================================
   MOBILE MUITO ESTREITO
   ========================================================= */

@media (max-width: 380px) {

  #produtos {
    padding-left: 7px;
    padding-right: 7px;
  }

  #produtos .sp-grid {
    gap: 7px;
  }

  #produtos .sp-name {
    font-size: 12px;
  }

  #produtos .sp-short {
    font-size: 8.5px;
  }
}

.sp-dialog {border:0;padding:0;background:transparent;color:#f5f2ea;width:min(920px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:visible;}
.sp-dialog::backdrop {background:rgba(0,0,0,.88);backdrop-filter:blur(8px);}
.sp-modal-panel {width:100%;max-height:calc(100dvh - 24px);}
.sp-modal-close {width:44px;height:44px;}
#produtos .sp-card {display:flex;flex-direction:column;}
#produtos .sp-short {flex:1;font-size:13px;color:#bab7b0;line-height:1.5;}
#produtos .sp-details {min-height:44px;font-size:11px;margin-top:16px;}
#produtos .sp-name {min-height:54px;}
#produtos .sp-dose {font-size:14px;}
.sp-modal-tech h3 {font-size:13px;color:#d7b569;}
.sp-modal-tech li {font-size:13px;}
.sp-modal-purpose {font-size:11px;}
.sp-modal-text {font-size:15px;}
@media(max-width:760px) {#produtos .sp-short {font-size:12px;} #produtos .sp-name {font-size:14px;min-height:47px;} #produtos .sp-details{font-size:10px;padding-inline:12px;} .sp-modal-panel{padding-top:60px;} }

/* ===== Catalog Mobile Hotfix 2026-10-13 ===== */
@media (max-width: 430px) {
  #produtos { padding-left: 13px; padding-right: 13px; }
  #produtos .sp-grid { grid-template-columns: 1fr; gap: 14px; }
  #produtos .sp-card { min-width: 0; }
  #produtos .sp-image-stage { aspect-ratio: 16 / 10; }
  #produtos .sp-name { min-height: auto; font-size: 16px; padding-top: 14px; }
  #produtos .sp-dose { font-size: 13px; }
  #produtos .sp-short { min-height: auto; font-size: 12px; padding-inline: 16px; }
  #produtos .sp-details { min-height: 42px; font-size: 10px; margin: 13px auto 16px; }

  .sp-dialog { width: calc(100% - 14px); max-height: calc(100dvh - 14px); }
  .sp-modal-panel { max-height: calc(100dvh - 14px); padding: 54px 12px 16px; overflow-y: auto; }
  .sp-modal-close { position: absolute; top: 8px; right: 8px; z-index: 4; }
  .sp-modal-layout { grid-template-columns: 1fr; gap: 12px; }
  .sp-modal-visual { aspect-ratio: 16 / 10; }
  .sp-modal-product { font-size: 23px; line-height: 1.08; overflow-wrap: anywhere; }
}