/*
Theme Name: PopularFX Child - Olho de Sogra
Theme URI: https://olhodesogra.com.br
Description: Tema filho do PopularFX para Olho de Sogra - Customizações locais
Author: Rafael Pereira
Author URI: https://rafaeldevseo.com.br
Template: popularfx
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: popularfx-child
*/

/* ==========================================================================
   OLHO DE SOGRA - DESIGN SYSTEM
   Paleta: Preto (#000) | Branco (#fff) | Laranja (#ff6600)
   ========================================================================== */

/* ==================== RESET & BASE ==================== */

.ods-page-wrapper {
   background: #000;
   color: #fff;
   min-height: 100vh;
}

.ods-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 40px;
}

/* ==================== HERO SECTION ==================== */

.ods-hero {
   position: relative;
   min-height: 500px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.ods-hero-bg {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
   z-index: 1;
}

.ods-hero-product .ods-hero-bg {
   background-size: cover;
   background-position: center;
   filter: brightness(0.3) saturate(0.5);
}

.ods-hero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.6);
   z-index: 2;
}

.ods-hero-content {
   position: relative;
   z-index: 3;
   text-align: center;
   padding: 60px 40px;
}

.ods-hero-title {
   font-size: 72px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 8px;
   margin: 0 0 20px;
   color: #fff;
   text-shadow: 0 4px 30px rgba(255, 102, 0, 0.3);
}

.ods-hero-subtitle {
   font-size: 24px;
   color: #ccc;
   font-weight: 300;
   margin: 0;
   letter-spacing: 2px;
}

.ods-highlight {
   color: #ff6600;
   font-weight: 700;
}

.ods-hero-cats {
   margin-top: 30px;
   display: flex;
   gap: 15px;
   justify-content: center;
   flex-wrap: wrap;
}

.ods-cat-badge {
   background: rgba(255, 102, 0, 0.2);
   border: 1px solid #ff6600;
   color: #ff6600;
   padding: 8px 20px;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 2px;
   border-radius: 30px;
}

/* ==================== PRODUCTS SECTION ==================== */

.ods-products-section {
   padding: 80px 0;
   background: #000;
}

.ods-products-intro {
   text-align: center;
   margin-bottom: 60px;
}

.ods-intro-text {
   font-size: 20px;
   color: #888;
   max-width: 600px;
   margin: 0 auto;
   line-height: 1.6;
}

.ods-products-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 40px;
}

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

.ods-product-card {
   background: linear-gradient(145deg, #111 0%, #0a0a0a 100%);
   border: 1px solid #222;
   border-radius: 16px;
   overflow: hidden;
   transition: all 0.4s ease;
}

.ods-product-card:hover {
   border-color: #ff6600;
   transform: translateY(-10px);
   box-shadow: 0 30px 60px rgba(255, 102, 0, 0.15);
}

.ods-product-link {
   text-decoration: none;
   display: block;
}

.ods-product-image {
   position: relative;
   height: 280px;
   overflow: hidden;
   background: #1a1a1a;
}

.ods-product-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.ods-product-card:hover .ods-product-image img {
   transform: scale(1.1);
}

.ods-product-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
}

.ods-no-image {
   display: flex;
   align-items: center;
   justify-content: center;
}

.ods-placeholder-icon {
   font-size: 80px;
   color: #333;
}

.ods-product-info {
   padding: 30px;
}

.ods-product-title {
   font-size: 24px;
   font-weight: 800;
   color: #fff;
   margin: 0 0 15px;
   text-transform: uppercase;
   letter-spacing: 1px;
   line-height: 1.3;
}

.ods-product-excerpt {
   font-size: 15px;
   color: #888;
   line-height: 1.6;
   margin: 0 0 20px;
}

.ods-product-cta {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: #ff6600;
   font-weight: 700;
   text-transform: uppercase;
   font-size: 14px;
   letter-spacing: 2px;
   transition: gap 0.3s ease;
}

.ods-product-card:hover .ods-product-cta {
   gap: 20px;
}

.ods-arrow {
   font-size: 18px;
}

/* ==================== NO PRODUCTS ==================== */

.ods-no-products {
   text-align: center;
   padding: 100px 40px;
}

.ods-no-products p {
   font-size: 20px;
   color: #666;
   margin-bottom: 30px;
}

/* ==================== CTA SECTION ==================== */

.ods-cta-section {
   padding: 100px 0;
   background: linear-gradient(135deg, #111 0%, #0a0a0a 100%);
   text-align: center;
   border-top: 1px solid #222;
}

.ods-cta-text {
   font-size: 28px;
   font-style: italic;
   color: #888;
   margin: 0 0 40px;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
}

/* ==================== BUTTONS ==================== */

.ods-btn,
.ods-btn-primary {
   display: inline-block;
   padding: 18px 50px;
   background: #ff6600;
   color: #000;
   font-weight: 800;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 3px;
   text-decoration: none;
   border: 2px solid #ff6600;
   border-radius: 50px;
   transition: all 0.3s ease;
   cursor: pointer;
}

.ods-btn:hover,
.ods-btn-primary:hover {
   background: transparent;
   color: #ff6600;
}

/* ==================== PRODUCT DETAIL PAGE ==================== */

.ods-product-detail {
   padding: 80px 0;
   background: #000;
}

.ods-product-layout {
   display: grid;
   grid-template-columns: 380px 1fr;
   gap: 60px;
   align-items: start;
}

/* Sidebar */
.ods-product-sidebar {
   position: sticky;
   top: 100px;
}

.ods-sidebar-image {
   margin-bottom: 30px;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid #222;
}

.ods-sidebar-image img {
   width: 100%;
   height: auto;
   display: block;
}

.ods-sidebar-box {
   background: linear-gradient(145deg, #111 0%, #0a0a0a 100%);
   border: 1px solid #222;
   border-radius: 12px;
   padding: 30px;
   margin-bottom: 20px;
}

.ods-sidebar-title {
   font-size: 16px;
   font-weight: 700;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 2px;
   margin: 0 0 20px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.ods-icon {
   color: #ff6600;
   font-size: 14px;
}

.ods-info-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.ods-info-list li {
   display: flex;
   justify-content: space-between;
   padding: 12px 0;
   border-bottom: 1px solid #222;
   font-size: 14px;
}

.ods-info-list li:last-child {
   border-bottom: none;
}

.ods-info-list strong {
   color: #888;
}

.ods-info-list span {
   color: #fff;
}

/* Price Box */
.ods-price-box {
   border-color: #ff6600;
   background: linear-gradient(145deg, #1a0f00 0%, #0a0500 100%);
}

.ods-price-display {
   font-size: 28px;
   font-weight: 900;
   color: #ff6600;
   text-align: center;
   margin-bottom: 20px;
   text-transform: uppercase;
   letter-spacing: 2px;
}

/* Content */
.ods-product-content {
   min-width: 0;
}

.ods-content-block {
   margin-bottom: 50px;
}

.ods-section-title {
   font-size: 20px;
   font-weight: 700;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 3px;
   margin: 0 0 30px;
   padding-bottom: 15px;
   border-bottom: 2px solid #ff6600;
   display: flex;
   align-items: center;
   gap: 10px;
}

.ods-description {
   color: #ccc;
   font-size: 16px;
   line-height: 1.8;
}

.ods-description h2,
.ods-description h3,
.ods-description h4 {
   color: #fff;
   margin-top: 40px;
   margin-bottom: 20px;
}

.ods-description ul {
   margin: 20px 0;
   padding-left: 0;
   list-style: none;
}

.ods-description li {
   padding: 10px 0 10px 30px;
   position: relative;
}

.ods-description li::before {
   content: '▸';
   color: #ff6600;
   position: absolute;
   left: 0;
}

.ods-description strong {
   color: #ff6600;
}

.ods-description blockquote {
   margin: 40px 0;
   padding: 30px 40px;
   background: linear-gradient(145deg, #111 0%, #0a0a0a 100%);
   border-left: 4px solid #ff6600;
   font-style: italic;
   color: #ccc;
}

/* Quote Form */
.ods-quote-block {
   background: linear-gradient(145deg, #111 0%, #0a0a0a 100%);
   border: 1px solid #222;
   border-radius: 12px;
   padding: 40px;
}

.ods-quote-intro {
   color: #888;
   margin-bottom: 30px;
}

/* WooCommerce Button Override */
.ods-page-wrapper .single_add_to_cart_button,
.ods-page-wrapper .button {
   width: 100%;
   background: #ff6600 !important;
   color: #000 !important;
   border: 2px solid #ff6600 !important;
   padding: 18px 30px !important;
   font-size: 14px !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: 2px !important;
   border-radius: 50px !important;
   cursor: pointer;
   transition: all 0.3s ease !important;
}

.ods-page-wrapper .single_add_to_cart_button:hover,
.ods-page-wrapper .button:hover {
   background: transparent !important;
   color: #ff6600 !important;
}

/* Contact Form 7 Override */
.ods-page-wrapper .wpcf7 input[type="text"],
.ods-page-wrapper .wpcf7 input[type="email"],
.ods-page-wrapper .wpcf7 input[type="tel"],
.ods-page-wrapper .wpcf7 textarea {
   width: 100%;
   background: #0a0a0a;
   border: 1px solid #333;
   color: #fff;
   padding: 15px 20px;
   font-size: 16px;
   border-radius: 8px;
   margin-bottom: 20px;
   transition: border-color 0.3s ease;
}

.ods-page-wrapper .wpcf7 input:focus,
.ods-page-wrapper .wpcf7 textarea:focus {
   border-color: #ff6600;
   outline: none;
}

.ods-page-wrapper .wpcf7 input[type="submit"] {
   background: #ff6600;
   color: #000;
   border: 2px solid #ff6600;
   padding: 18px 50px;
   font-size: 14px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 2px;
   border-radius: 50px;
   cursor: pointer;
   transition: all 0.3s ease;
}

.ods-page-wrapper .wpcf7 input[type="submit"]:hover {
   background: transparent;
   color: #ff6600;
   transition: color 0.3s ease, background 0.3s ease;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 992px) {

   .ods-product-layout {
      grid-template-columns: 1fr;
   }

   .ods-product-sidebar {
      position: static;
   }

   .ods-hero-title {
      font-size: 48px;
      letter-spacing: 4px;
   }

   .ods-container {
      padding: 0 20px;
   }
}

@media (max-width: 768px) {
   .ods-hero {
      min-height: 400px;
   }

   .ods-hero-title {
      font-size: 36px;
      letter-spacing: 2px;
   }

   .ods-hero-subtitle {
      font-size: 18px;
   }

   .ods-products-grid {
      grid-template-columns: 1fr;
   }

   .ods-cta-text {
      font-size: 20px;
   }

   .ods-btn-primary {
      padding: 15px 40px;
      font-size: 12px;
   }
}

@media (max-width: 480px) {
   .ods-hero-title {
      font-size: 28px;
   }

   .ods-product-title {
      font-size: 20px;
   }

   .ods-section-title {
      font-size: 16px;
   }
}

/* ==================== CART & CHECKOUT ==================== */

.woocommerce-cart .ods-page-wrapper,
.woocommerce-checkout .ods-page-wrapper {
   background: #000;
   min-height: 100vh;
}

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
   background: #000;
}

body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce-account #primary {
   background: #000;
   color: #fff;
   padding: 60px 40px;
   max-width: 1200px;
   margin: 0 auto;
}

body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce,
body.woocommerce-account .woocommerce {
   background: #000;
   color: #fff;
}

body.woocommerce-cart table,
body.woocommerce-checkout table {
   background: #111;
   color: #fff;
}

body.woocommerce-cart th,
body.woocommerce-checkout th {
   background: #ff6600;
   color: #000;
}

body.woocommerce-cart td,
body.woocommerce-checkout td {
   border-color: #333;
}

body.woocommerce-cart a,
body.woocommerce-checkout a,
body.woocommerce-account a {
   color: #ff6600;
}

body.woocommerce-cart input,
body.woocommerce-checkout input,
body.woocommerce-cart textarea,
body.woocommerce-checkout textarea {
   background: #111;
   border: 1px solid #333;
   color: #fff;
   padding: 12px 15px;
}

body.woocommerce-cart input:focus,
body.woocommerce-checkout input:focus {
   border-color: #ff6600;
}

/* ==================== HEADER PADRÃO - OLHO DE SOGRA ==================== */

.ods-header {
   background-color: #fff;
   border-bottom: 1px solid #222;
   padding: 1rem 0;
   position: sticky;
   top: 0;
   z-index: 999;
}

.ods-header-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
}

.ods-header-logo img {
   height: 50px;
   width: auto;
}

.ods-header-nav {
   flex: 1;
   text-align: center;
}

.ods-nav-menu {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
   gap: 2rem;
}

.ods-nav-menu li {
   position: relative;
}

.ods-nav-menu a {
   color: #000;
   text-decoration: none;
   font-size: 16px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: color 0.3s;
}

.ods-nav-menu a:hover {
   color: #ff6600;
}

.ods-nav-menu .sub-menu {
   position: absolute;
   top: 100%;
   left: 0;
   background: #fff;
   border: 1px solid #222;
   padding: 1rem;
   min-width: 250px;
   display: none;
   list-style: none;
}

.ods-nav-menu li:hover .sub-menu {
   display: block;
}

.ods-nav-menu .sub-menu li {
   margin-bottom: 0.5rem;
}

.ods-nav-menu .sub-menu a {
   font-size: 14px;
   font-weight: 500;
   text-transform: none;
   letter-spacing: 0.5px;
}

.ods-header-social a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background: #fff;
   border: 2px solid #ff6600;
   border-radius: 50%;
   transition: background 0.3s;
}

.ods-header-social a:hover {
   background: #ff6600;
}

.ods-header-social a:hover svg {
   fill: #fff;
}

.ods-menu-toggle {
   display: none;
   background: none;
   border: none;
   font-size: 24px;
   cursor: pointer;
   color: #000;
}

/* ==================== FOOTER PADRÃO - OLHO DE SOGRA ==================== */

.ods-footer {
   background-color: #000;
   padding: 3rem 0;
   margin-top: 4rem;
}

.ods-footer-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 2rem;
}

.ods-footer-columns {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 2rem;
   align-items: center;
}

.ods-footer-left {
   color: #fff;
}

.ods-footer-copyright {
   color: #fff;
   font-size: 14px;
   margin: 0 0 0.5rem 0;
}

.ods-footer-tagline {
   color: #888;
   font-size: 14px;
   margin: 0;
   font-style: italic;
}

.ods-footer-right {
   text-align: right;
}

.ods-footer-social-linkedin {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   background-color: #ff6600;
   border-radius: 50%;
   transition: background-color 0.3s, transform 0.3s;
}

.ods-footer-social-linkedin:hover {
   background-color: #ff8833;
   transform: translateY(-5px);
}

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

@media (max-width: 992px) {

   .ods-header-nav,
   .ods-header-social {
      display: none;
   }

   .ods-menu-toggle {
      display: block;
   }
}

@media (max-width: 768px) {
   .ods-footer-columns {
      grid-template-columns: 1fr;
      text-align: center;
   }

   .ods-footer-right {
      text-align: center;
   }

   .ods-header-container {
      padding: 0 1rem;
      gap: 1rem;
   }

   .ods-footer-container {
      padding: 0 1rem;
   }
}

/* ==================== CORREÇÕES DE HEADER E FOOTER ==================== */

/* Homepage: Ocultar menu duplicado */
/* Oculta qualquer header que NÃO seja o #masthead principal ou o do Pagelayer (se for o usado) */
/* Estrategia: Ocultar headers gerados pelo Pagelayer se o tema já estiver gerando um */
body.home .pagelayer-header {
   display: none !important;
}

body.home header:not(#masthead) {
   display: none !important;
}

/* Landing Pages: Ocultar footer duplicado do tema */
/* Nestas páginas, priorizamos o primeiro footer (do conteúdo) e ocultamos o do tema (#colophon) */
body.page-para-seu-negocio #colophon,
body.page-para-seu-cliente #colophon,
body.page-para-seu-mercado #colophon,
body.page-para-sua-marca #colophon {
   display: none;
}

/* ==================== AJUSTES DE TEMA PAI (OVERRIDE) ==================== */

/* Zera a margem nativa da tag figure vinda do PopularFX pai */
figure {
   margin: 0 !important;
}

/* Oculta e zera completamente parágrafos vazios criados acidentalmente pelo editor/plugin */
p:empty {
   margin: 0 !important;
   padding: 0 !important;
   display: none !important;
}