/* ==========================================================================
   Acessórios Aparecida - Páginas de produto
   Carregar DEPOIS de css/main.css (cabeçalho, rodapé, botões e banner de
   cookies ficam no main.css; aqui só o que é específico destas páginas).
   ========================================================================== */

/* === PRODUCT HERO === */
.product-hero{padding:150px 0 80px;background:var(--graphite);position:relative;overflow:hidden}
.product-hero::before{content:'';position:absolute;top:0;right:0;width:50%;height:100%;background:linear-gradient(135deg,transparent,rgba(20,93,160,.05));pointer-events:none}
.product-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.product-hero-img{position:relative}
.product-hero-img img{width:100%;height:auto;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.product-hero-img::before{content:'';position:absolute;top:-15px;left:-15px;width:80px;height:80px;border-top:3px solid var(--red);border-left:3px solid var(--red);z-index:1}
.product-hero-img::after{content:'';position:absolute;bottom:-15px;right:-15px;width:80px;height:80px;border-bottom:3px solid var(--blue);border-right:3px solid var(--blue)}
.product-hero-text h1{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4.5rem);line-height:.95;letter-spacing:2px;margin-bottom:20px}
.product-hero-text h1 span{color:var(--red)}
.product-hero-text p{font-size:1.1rem;color:rgba(255,255,255,.75);line-height:1.8;margin-bottom:24px}
.product-hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.5)}
.breadcrumb{font-family:var(--font-condensed);font-size:.85rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:24px}
.breadcrumb a{color:var(--blue-light);transition:color .3s}
.breadcrumb a:hover{color:var(--white)}

/* === PRODUCT DETAILS === */
.product-details{padding:80px 0;background:var(--navy)}
.product-details::before{content:'';display:block;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent);margin-bottom:80px}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.details-text h2{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:1px;margin-bottom:20px}
.details-text p{color:rgba(255,255,255,.7);font-size:1rem;line-height:1.8;margin-bottom:16px}
.details-features{margin-top:32px}
.details-features h3{font-family:var(--font-condensed);font-size:1.2rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px;color:var(--red)}
.feature-list{display:flex;flex-direction:column;gap:12px}
.feature-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-left:3px solid var(--blue);transition:all .3s}
.feature-item:hover{border-left-color:var(--red);background:rgba(20,93,160,.05)}
.feature-icon{width:24px;height:24px;flex-shrink:0;color:var(--blue)}
.feature-item p{font-size:.95rem;color:rgba(255,255,255,.75);line-height:1.6}

/* === PRODUCT GALLERY === */
.product-gallery{padding:80px 0;background:var(--graphite)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:40px}
.gallery-item{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.06);aspect-ratio:4/3}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,31,51,.4),transparent);pointer-events:none}

/* === CTA SECTION === */
.product-cta{padding:80px 0;background:var(--navy);text-align:center;position:relative}
.product-cta::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--red),transparent)}
.product-cta h2{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);letter-spacing:1px;margin-bottom:16px}
.product-cta p{font-size:1.1rem;color:rgba(255,255,255,.7);max-width:600px;margin:0 auto 32px}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* === RESPONSIVE === */
@media(max-width:900px){
  .product-hero-grid,.details-grid{grid-template-columns:1fr}
  .product-hero-img{order:-1}
  .product-hero{padding:120px 0 60px}
}
@media(max-width:600px){
  .gallery-grid{grid-template-columns:1fr}
  .product-hero-buttons,.cta-buttons{flex-direction:column}
  .product-hero-buttons .btn,.cta-buttons .btn{width:100%;justify-content:center}
}