/* GHD SINGLE PRODUCT — CSS exclusivo da pagina. Header e footer globais. */
/* SINGLE PRODUCT — HERO ============================================================ */
    .sp-hero {
      position: relative;
      min-height: max(100svh, 680px);
      overflow: hidden;
      background: #f4f5f6;
      isolation: isolate;
    }

    .sp-hero-bg {
      position: absolute;
      inset: 0;
      z-index: -2;
    }

    .sp-hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center bottom;
    }

    .sp-hero-inner {
      position: relative;
      z-index: 2;
      min-height: inherit;
      display: flex;
      align-items: center;
      padding: calc(var(--nav-h) + 1.5rem) var(--pad-x) 5rem;
    }

    /* --- Texto ------------------------------------------------- */
    .sp-copy {
      width: min(100%, 31rem);
      position: relative;
      z-index: 3;
    }

    .sp-label {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      margin-block-end: 1.25rem;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
    }

    .sp-label::before {
      content: '';
      width: 28px;
      height: 1.5px;
      background: var(--gold);
      border-radius: 2px;
    }

    .sp-title {
      display: flex;
      flex-direction: column;
      font-size: clamp(2.8rem, 5.6vw, 5.2rem);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.04em;
      color: var(--dark);
    }

    .accent {
      background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-dark) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: var(--gold);
      padding-block-end: 0.08em;
    }

    .sp-desc {
      max-width: 26rem;
      margin-block-start: 1.5rem;
      font-size: 0.98rem;
      line-height: 1.7;
      color: var(--steel-dark);
    }

    /* --- Seletor de cores ------------------------------------- */
    .sp-colors {
      margin-block-start: 2rem;
    }

    .sp-colors-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--dark);
    }

    .sp-colors-label strong {
      color: var(--gold-dark);
    }

    .sp-swatches {
      display: flex;
      flex-wrap: wrap;
      gap: 1.1rem;
      margin-block-start: 0.9rem;
    }

    .sp-swatch {
      display: grid;
      justify-items: center;
      gap: 0.45rem;
      font: inherit;
      font-size: 0.7rem;
      color: var(--steel-dark);
      background: none;
      border: none;
      cursor: pointer;
    }

    .sp-swatch span {
      display: block;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--c);
      border: 1px solid rgba(17, 19, 24, 0.14);
      outline: 2px solid transparent;
      outline-offset: 3px;
      box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08);
      transition: outline-color 0.25s var(--ease), transform 0.25s var(--ease);
    }

    .sp-swatch:hover span {
      transform: scale(1.08);
    }

    .sp-swatch.is-active span {
      outline-color: var(--gold);
    }

    .sp-swatch.is-active {
      color: var(--dark);
      font-weight: 600;
    }

    .sp-swatch:focus-visible span {
      outline-color: var(--dark);
    }

    .sp-cta {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      margin-block-start: 2.25rem;
      padding: 1rem 1.6rem;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--white);
      background: linear-gradient(135deg, var(--gold-light), var(--gold));
      border-radius: 10px;
      box-shadow: 0 10px 24px rgba(232, 150, 12, 0.3);
      transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
    }

    .sp-cta svg {
      width: 1.1rem;
      height: 1.1rem;
      transition: transform 0.3s var(--ease);
    }

    .sp-cta:hover,
    .sp-cta:focus-visible {
      transform: translateY(-2px);
      background: linear-gradient(135deg, var(--gold), var(--gold-dark));
      box-shadow: 0 14px 30px rgba(232, 150, 12, 0.4);
    }

    .sp-cta:hover svg {
      transform: translateX(4px);
    }

    /* --- Foto do caminhão ------------------------------------- */
    .sp-stage {
      position: absolute;
      z-index: 2;
      right: 4vw;
      bottom: 4%;
      width: min(52vw, 94svh);
      aspect-ratio: 4 / 3;
    }

    .sp-photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 22px 28px rgba(17, 19, 24, 0.22));
    }

    .sp-track {
      position: absolute;
      inset: 0;
    }

    .sp-truck {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateX(calc(var(--o, 0) * 14%)) scale(0.96);
      transition: opacity 0.7s var(--ease), transform 0.9s cubic-bezier(0.65, 0, 0.25, 1);
      pointer-events: none;
    }

    .sp-truck.is-active {
      opacity: 1;
      transform: none;
    }

    .sp-truck img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 22px 28px rgba(17, 19, 24, 0.22));
    }

    /* sombra de contato no chão, fixa */
    .sp-ground {
      position: absolute;
      inset-inline: 6% 4%;
      bottom: 15%;
      height: 5%;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(17, 19, 24, 0.28) 0%, transparent 70%);
      filter: blur(6px);
    }

    .sp-arrow {
      position: absolute;
      top: 46%;
      z-index: 5;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      color: var(--dark);
      background: rgba(255, 255, 255, 0.92);
      border: 1.5px solid rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), scale 0.2s var(--ease);
    }

    .sp-arrow svg {
      width: 20px;
      height: 20px;
    }

    .sp-arrow:hover,
    .sp-arrow:focus-visible {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--white);
      box-shadow: 0 6px 22px rgba(232, 150, 12, 0.4);
      scale: 1.07;
    }

    .sp-arrow:active {
      scale: 0.96;
    }

    .sp-arrow-prev {
      left: 4%;
    }

    .sp-arrow-next {
      right: 2%;
    }

    .sp-dots {
      position: absolute;
      inset-inline: 0;
      bottom: -2.2rem;
      display: flex;
      justify-content: center;
      gap: 0.6rem;
    }

    .sp-dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border: none;
      border-radius: 50%;
      background: rgba(17, 19, 24, 0.22);
      cursor: pointer;
      transition: background 0.3s var(--ease), width 0.3s var(--ease), border-radius 0.3s var(--ease);
    }

    .sp-dot.is-active {
      width: 24px;
      border-radius: 4px;
      background: var(--gold);
    }

    /* --- Responsivo: Cores e botão abaixo do caminhão --------- */
    @media (max-width: 900px) {
      .sp-hero {
        min-height: auto;
      }

      .sp-hero-bg picture {
        display: block;
        width: 100%;
        height: 100%;
      }

      .sp-hero-bg img {
        object-position: 20% bottom;
      }

      .sp-colors-label {
        display: none;
      }

      .sp-hero-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: calc(var(--nav-h) + 1.25rem) 1.5rem 3.5rem;
      }

      .sp-copy {
        display: contents;
      }

      .sp-label {
        order: 1;
      }

      .sp-title {
        order: 2;
      }

      .sp-desc {
        order: 3;
        max-width: 100%;
        margin-block: 1rem 1.5rem;
      }

      .sp-stage {
        order: 4;
        position: relative;
        inset: auto;
        width: 100%;
        max-width: 520px;
        aspect-ratio: 4 / 3;
        margin: 0 auto 1.5rem;
        align-self: center;
      }

      .sp-colors {
        order: 5;
        margin-block: 0 1.5rem;
        width: 100%;
        text-align: center;
      }

      .sp-swatches {
        justify-content: center;
      }

      .sp-colors-note {
        text-align: center;
      }

      .sp-cta {
        order: 6;
        align-self: center;
        margin-block-start: 0.5rem;
      }
    }

    /* --- Mais cores / troca de foto ---------------------------- */
    .sp-photo {
      transition: opacity 0.18s var(--ease);
    }

    .sp-photo.is-swapping {
      opacity: 0;
    }

    .sp-swatch-more span {
      display: grid;
      place-items: center;
      background: transparent;
      border: 1.5px dashed var(--steel);
      box-shadow: none;
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 1;
      color: var(--steel-dark);
      transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
    }

    .sp-swatch-more:hover span {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--white);
    }

    .sp-colors-note {
      margin-block-start: 1rem;
      font-size: 0.8rem;
      color: var(--steel-dark);
    }

    .sp-colors-note a {
      color: var(--gold-dark);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
    }


    /* ============================================================
   TEXTOS COMPARTILHADOS (copiados do index: label, título, desc)
   ============================================================ */
    .produtos-label {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      margin-block-end: 1.5rem;
    }

    .produtos-label::before,
    .produtos-label::after {
      content: '';
      display: block;
      width: 28px;
      height: 1.5px;
      background: var(--gold);
      border-radius: 2px;
    }

    .sobre-label {
      margin-block-end: 1.5rem;
    }

    .sobre-label::before {
      display: none;
    }

    .sobre-title {
      font-size: clamp(2.4rem, 4.8vw, 4.2rem);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.035em;
      color: var(--dark);
    }

    .sobre-title-accent {
      color: var(--gold);
    }

    .sobre-desc {
      margin-block-start: 1.75rem;
      max-width: 25rem;
      font-size: 0.95rem;
      line-height: 1.7;
      color: var(--steel-dark);
    }

    /* ============================================================
   SECTIONS — detalhes e informações técnicas
   ============================================================ */
    .sp-section {
      padding: 3rem var(--pad-x);
      background: var(--white);
    }

    .sp-card {
      background: #f6f6f7;
      border: 1px solid rgba(17, 19, 24, 0.05);
      border-radius: 24px;
    }

    .sp-h2 {
      font-size: clamp(2.4rem, 4.6vw, 4rem);
      font-weight: 800;
      line-height: 1.02;
      letter-spacing: -0.04em;
      color: var(--dark);
    }

    .sp-text {
      margin-block-start: 1.5rem;
      max-width: 25rem;
      font-size: 0.95rem;
      line-height: 1.7;
      color: var(--steel-dark);
    }

    .sp-btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      margin-block-start: 2rem;
      padding: 0.95rem 1.6rem;
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--dark);
      background: var(--white);
      border: 1.5px solid var(--dark);
      border-radius: 10px;
      transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
    }

    .sp-btn-outline svg {
      width: 1rem;
      height: 1rem;
      transition: transform 0.3s var(--ease);
    }

    .sp-btn-outline:hover,
    .sp-btn-outline:focus-visible {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--white);
    }

    .sp-btn-outline:hover svg {
      transform: translateX(4px);
    }

    .sp-details {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      align-items: center;
      gap: clamp(1.5rem, 4vw, 4rem);
      padding: clamp(1.5rem, 3.5vw, 3rem);
    }

    .sp-gallery {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.9rem;
    }

    .sp-shot {
      aspect-ratio: 1 / 0.82;
      border-radius: 14px;
      background: #dfe2e6;
      box-shadow: inset 0 0 0 1px rgba(17, 19, 24, 0.06);
      transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    }

    .sp-shot:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px rgba(17, 19, 24, 0.14);
    }

    button.sp-shot {
      padding: 0;
      border: none;
      text-align: left;
      cursor: pointer;
    }

    /* ── Lightbox (visible only on mobile) ─────────────────────── */
    .sp-lightbox {
      display: none;
    }

    @media (max-width: 900px) {
      .sp-shot-zoomable {
        position: relative;
      }

      .sp-shot-zoomable::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: rgba(0,0,0,0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 22px no-repeat;
        opacity: 0;
        transition: opacity 0.25s;
      }

      .sp-shot-zoomable:active::after {
        opacity: 1;
        background-color: rgba(0,0,0,0.25);
      }

      /* Lightbox container */
      .sp-lightbox {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        z-index: 9000;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .sp-lightbox.is-open {
        opacity: 1;
        pointer-events: auto;
      }

      .sp-lightbox-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(10, 10, 14, 0.92);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
      }

      .sp-lightbox-img {
        position: relative;
        z-index: 1;
        max-width: 92vw;
        max-height: 80vh;
        width: auto;
        height: auto;
        border-radius: 14px;
        object-fit: contain;
        box-shadow: 0 24px 64px rgba(0,0,0,0.5);
        transform: scale(0.88);
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .sp-lightbox.is-open .sp-lightbox-img {
        transform: scale(1);
      }

      .sp-lightbox-close {
        position: absolute;
        top: 1.1rem;
        right: 1.1rem;
        z-index: 2;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 50%;
        cursor: pointer;
        color: #fff;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: background 0.2s, transform 0.2s;
      }

      .sp-lightbox-close:active {
        background: rgba(255,255,255,0.24);
        transform: scale(0.93);
      }

      .sp-lightbox-close svg {
        width: 18px;
        height: 18px;
      }
    }

    .sp-shot-photo {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .sp-specs-top {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      align-items: center;
      gap: clamp(1.5rem, 4vw, 4rem);
    }

    .sp-blueprint {
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
      align-items: center;
      gap: 1rem;
      padding: 1.5rem;
    }

    .sp-bp-side {
      position: relative;
      aspect-ratio: 4 / 3;
    }

    .sp-bp-side img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: grayscale(1) contrast(1.15) brightness(1.08);
      opacity: 0.85;
    }

    .sp-bp-side svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .dim {
      fill: none;
      stroke: var(--dark);
      stroke-width: 3;
    }

    .dim-label text {
      fill: var(--dark);
      font: 600 26px var(--font);
      letter-spacing: 0.06em;
    }

    .sp-bp-rear {
      position: relative;
    }

    .sp-bp-rear svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .sp-bp-rear .dim {
      stroke-width: 1.2;
    }

    .bp-draw {
      fill: none;
      stroke: var(--steel-dark);
      stroke-width: 1.4;
    }

    .sp-bp-cap {
      position: absolute;
      font-size: 0.6rem;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--dark);
    }

    .sp-bp-cap-w {
      inset-block-start: -0.9rem;
      inset-inline: 0;
      text-align: center;
    }

    .sp-bp-cap-h {
      inset-block-start: 38%;
      inset-inline-end: -1.4rem;
    }

    .sp-spec-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      margin-block-start: 2.5rem;
    }

    .sp-spec {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.25rem 1.4rem;
      background: var(--white);
      border: 1px solid rgba(17, 19, 24, 0.07);
      border-radius: 16px;
      transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
    }

    .sp-spec:hover {
      transform: translateY(-3px);
      border-color: rgba(232, 150, 12, 0.4);
      box-shadow: 0 14px 28px rgba(17, 19, 24, 0.07);
    }

    .sp-spec-icon {
      flex: none;
      display: grid;
      place-items: center;
      width: 3.4rem;
      height: 3.4rem;
      border-radius: 50%;
      color: var(--gold);
      background: #fdf3e0;
    }

    .sp-spec-icon svg {
      width: 1.6rem;
      height: 1.6rem;
    }

    .sp-spec strong {
      display: block;
      font-size: 0.95rem;
      color: var(--dark);
    }

    .sp-spec span {
      font-size: 0.82rem;
      line-height: 1.45;
      color: var(--steel-dark);
    }

    @media (max-width: 1000px) {

      .sp-details,
      .sp-specs-top {
        grid-template-columns: 1fr;
      }

      .sp-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 600px) {
      .sp-blueprint {
        grid-template-columns: 1fr;
      }

      .sp-spec-grid {
        grid-template-columns: 1fr;
      }

      .sp-bp-rear {
        max-width: 220px;
        margin-inline: auto;
      }
    }
    /* ============================================================
   
SECTION CONTATO — texto + info à esquerda, formulário à direita
   ============================================================ */
    .contato {
      position: relative;
      background: linear-gradient(180deg, var(--white) 0%, #f4f4f5 100%);
      padding: 6rem 0;
    }

    .contato-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      gap: clamp(2rem, 6vw, 6rem);
      align-items: center;
      padding-inline: var(--pad-x);
    }

    .contato-desc {
      max-width: 28rem;
    }

    .btn-whatsapp {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      margin-block-start: 2rem;
      padding: 0.95rem 1.5rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--white);
      background: var(--dark);
      border-radius: 10px;
      box-shadow: 0 10px 24px rgba(17, 19, 24, 0.22);
      transition: transform 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
    }

    .btn-whatsapp .wa-icon {
      width: 1.3rem;
      height: 1.3rem;
      color: var(--gold-light);
    }

    .btn-whatsapp .arrow {
      width: 1rem;
      height: 1rem;
      transition: transform 0.3s var(--ease);
    }

    .btn-whatsapp:hover,
    .btn-whatsapp:focus-visible {
      transform: translateY(-2px);
      background: var(--gold);
      box-shadow: 0 14px 30px rgba(232, 150, 12, 0.35);
    }

    .btn-whatsapp:hover .wa-icon {
      color: var(--white);
    }

    .btn-whatsapp:hover .arrow {
      transform: translateX(3px);
    }


    .contato-form {
      padding: clamp(1.5rem, 3vw, 2.5rem);
      background: var(--white);
      border-radius: 20px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: 0 30px 60px rgba(17, 19, 24, 0.08);
    }

    .form-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--dark);
      letter-spacing: -0.02em;
    }

    .form-sub {
      margin-block: 0.4rem 1.5rem;
      font-size: 0.9rem;
      color: var(--steel-dark);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .field-full {
      grid-column: 1 / -1;
    }

    .field label {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--dark);
    }

    .field .req {
      color: var(--gold);
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      padding: 0.8rem 0.95rem;
      font: inherit;
      font-size: 0.9rem;
      color: var(--dark);
      background: #f7f7f8;
      border: 1.5px solid transparent;
      border-radius: 10px;
      outline: none;
      transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }

    .field textarea {
      resize: vertical;
      min-height: 6rem;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      background: var(--white);
      border-color: var(--gold);
      box-shadow: 0 0 0 4px rgba(232, 150, 12, 0.14);
    }

    .field.is-invalid input,
    .field.is-invalid select,
    .field.is-invalid textarea {
      border-color: #d93025;
      background: #fff6f5;
    }

    .btn-enviar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.8rem;
      width: 100%;
      margin-block-start: 1.5rem;
      padding: 1rem 1.5rem;
      font: inherit;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--white);
      background: linear-gradient(135deg, var(--gold-light), var(--gold));
      border: none;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(232, 150, 12, 0.28);
      transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
    }

    .btn-enviar svg {
      width: 1rem;
      height: 1rem;
      transition: transform 0.3s var(--ease);
    }

    .btn-enviar:hover,
    .btn-enviar:focus-visible {
      transform: translateY(-2px);
      background: linear-gradient(135deg, var(--gold), var(--gold-dark));
      box-shadow: 0 14px 30px rgba(232, 150, 12, 0.38);
    }

    .btn-enviar:hover svg {
      transform: translateX(3px);
    }

    .btn-enviar.is-sent {
      background: #1e8e3e;
      box-shadow: 0 10px 24px rgba(30, 142, 62, 0.3);
      pointer-events: none;
    }

    @media (max-width: 900px) {
      .contato {
        padding: 4rem 0;
      }

      .contato-inner {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 560px) {
      .form-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================================
   
/* Isolamento visual da pagina de produto: header/footer sao globais. */
.ghd-single-product .sp-title { display: block; overflow-wrap: normal; }
.ghd-single-product .sp-title .accent { display: inline; }
.ghd-single-product .sp-photo { transition: opacity .2s ease; }
.ghd-single-product .sp-colors-note, .ghd-single-product .sp-arrow, .ghd-single-product .sp-dots { display:none !important; }
.ghd-single-product .sp-colors + .sp-cta { margin-block-start: 1.2rem; }
.ghd-single-product .sp-specs-top { align-items: center; }
/* Foto tecnica e linhas compartilham a MESMA caixa de dimensoes. */
.ghd-single-product .sp-bp-side { aspect-ratio: 4 / 3; width:100%; min-width:0; }
.ghd-single-product .sp-bp-side img { display:block; width:100%; height:100%; object-fit:contain; }
.ghd-single-product .sp-bp-side .sp-dimension-overlay { inset:0; width:100%; height:100%; overflow:hidden; }
.ghd-single-product .sp-dimension-overlay .dim { stroke-width: 2; }
.ghd-single-product .sp-bp-side .dim-label text { font-size: 20px; }
.ghd-single-product .sp-bp-rear { aspect-ratio:4 / 3; }
.ghd-single-product .sp-bp-rear > img { width:100%; height:100%; object-fit:contain; display:block; }
.ghd-single-product .sp-bp-rear > svg { position:absolute; inset:0; width:100%; height:100%; }
.ghd-single-product .sp-bp-cap-w { inset-block-start: 0; }
.ghd-single-product .sp-bp-cap-h { inset-inline-end: 0; }
.ghd-single-product .sp-spec-grid .sp-spec { min-width:0; }
.ghd-single-product .sp-spec > div { min-width:0; }
.ghd-single-product .sp-spec span:not(.sp-spec-icon) { overflow-wrap:anywhere; }
.ghd-single-product .sp-shot { background-color:#e5e7eb; }
.ghd-single-product .sp-shot:disabled { cursor:default; }
@media(max-width:900px) {
  /* Sem espacamento excessivo abaixo da navbar no mobile. */
  .ghd-single-product .sp-hero-inner { padding-top: calc(var(--nav-h, 88px) + .5rem); }
  .ghd-single-product .sp-cta { margin-block-start: .5rem; }
  .ghd-single-product .contato-inner { grid-template-columns: 1fr; }
}
@media(max-width:560px) {
  .ghd-single-product .sp-title { font-size:clamp(2.3rem,10vw,3.5rem); }
  .ghd-single-product .sp-bp-cap-h { right:-.25rem; }
  .ghd-single-product .sp-spec-grid { grid-template-columns:1fr; }
  .ghd-single-product .contato-inner { padding-inline:1.5rem; }
}

.ghd-single-product .ghd-contact-feedback {margin:0 0 1rem;padding:.8rem 1rem;border-radius:10px;font-size:.88rem;}
.ghd-single-product .ghd-contact-feedback--success {background:#e9f7ee;color:#176332;}
.ghd-single-product .ghd-contact-feedback--error {background:#fff2f0;color:#99271d;}
.ghd-single-product .ghd-honeypot {position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;}
.ghd-single-product .btn-enviar:disabled {opacity:.75;cursor:progress;}
.ghd-single-product .sp-stage:has(.sp-photo) {pointer-events:none;}

/* GHD - dimensoes tecnicas: foto traseira reduzida e textos fora da imagem. */
.ghd-single-product .sp-bp-rear {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.7rem;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  column-gap: .7rem;
  row-gap: .6rem;
  width: 100%;
  min-width: 0;
  aspect-ratio: auto;
}
.ghd-single-product .sp-bp-rear > img {
  grid-column: 1;
  grid-row: 2;
  width: min(100%, 170px);
  height: auto;
  max-height: 160px;
  object-fit: contain;
  display: block;
}
.ghd-single-product .sp-bp-rear .sp-bp-cap {
  position: static;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: .6rem;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}
.ghd-single-product .sp-bp-rear .sp-bp-cap-w {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}
.ghd-single-product .sp-bp-rear .sp-bp-cap-h {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  right: auto;
  inset: auto;
}
@media (max-width: 600px) {
  .ghd-single-product .sp-bp-rear {
    max-width: 290px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) 4.7rem;
  }
}

/* Informacoes tecnicas: apenas titulo, descricao e topicos (sem desenhos). */
.ghd-single-product .sp-specs-top { display: block; }
.ghd-single-product .sp-specs-copy { max-width: 720px; }
.ghd-single-product .sp-spec-grid { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }

/* A terceira e a quarta fotos de detalhes aparecem inteiras, sem cortes. */
.ghd-single-product .sp-shot.sp-shot-full {
  background-color: #ffffff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Contato no single product: mesmo alinhamento responsivo da Home. */
@media (max-width: 900px) {
  .ghd-single-product .contato-content {
    display: flex;
    flex-direction: column;
  }

  .ghd-single-product .contato-content .btn-whatsapp {
    align-self: center;
  }
}

/* Quinta opcao de cor: acesso direto ao atendimento para outras cores. */
.ghd-single-product .sp-swatch-more {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .45rem;
  text-decoration: none;
  width: 76px;
  color: var(--steel-dark);
}
.ghd-single-product .sp-swatch-more > span:first-child {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 1.5px dashed var(--steel);
  box-shadow: none;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
  color: var(--steel-dark);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.ghd-single-product .sp-swatch-more:hover > span:first-child,
.ghd-single-product .sp-swatch-more:focus-visible > span:first-child {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  transform: scale(1.08);
}
.ghd-single-product .sp-swatch-more .sp-more-label {
  display: block;
  width: max-content;
  max-width: 90px;
  height: auto;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: inherit;
}
.ghd-single-product .sp-swatch-more:hover .sp-more-label,
.ghd-single-product .sp-swatch-more:focus-visible .sp-more-label {
  color: var(--dark);
}
html:has(.ghd-single-product) { scroll-behavior: smooth; }
.ghd-single-product #contato { scroll-margin-top: calc(var(--nav-h, 80px) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html:has(.ghd-single-product) { scroll-behavior: auto; }
}