/*
Theme Name: Shoptimizer Child
Theme URI: https://dogzhop.com
Description: Child theme Dogzhop pour Shoptimizer — overrides pixel-perfect + custom page templates + skin de marque
Author: Dogzhop
Author URI: https://dogzhop.com
Template: shoptimizer
Version: 1.1.0
Text Domain: shoptimizer-child
*/

/* ============================================================================
   DOGZHOP — SKIN GLOBAL SUR SHOPTIMIZER
   Charte : Bleu Onde #2B7FB8, Bleu Nuit #1A5478, Corail #E89373, Sable #F4ECDD
   ============================================================================ */

:root {
  --dzp-bleu-onde: #2B7FB8;
  --dzp-bleu-nuit: #1A5478;
  --dzp-bleu-clair: #EAF3FA;
  --dzp-sable: #F4ECDD;
  --dzp-corail: #E89373;
  --dzp-blanc-casse: #FBFAF7;
  --dzp-anthracite: #1F2A37;
  --dzp-gris-doux: #5B6573;

  /* Surcharge des variables CSS Shoptimizer si elles existent */
  --primary: #2B7FB8;
  --primary-dark: #1A5478;
}

/* ============================================================================
   1. Masque la barre orange "Flash sale" (header-1 widget area)
   ============================================================================ */
.header-banner,
#header-area-1,
.header-area-1,
[data-widget-area="header-1"] {
  display: none !important;
}

/* ============================================================================
   2. Topbar — fond Bleu Nuit full-width + texte centré
   Le wrapper `.col-full.topbar-wrapper` est limite a 1170px par Kirki.
   On le casse pour qu'il prenne toute la largeur ET que la couleur s'etende.
   ============================================================================ */
.col-full.topbar-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: var(--dzp-bleu-nuit) !important;
  border-bottom: none !important;
}
.top-bar {
  background: transparent !important;
  color: #fff !important;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0 !important;
}
.top-bar > .col-full {
  max-width: 1170px !important;
  margin: 0 auto !important;
  padding: 0.55rem 1.5rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.top-bar a { color: #fff !important; }
.top-bar p { margin: 0 !important; }
.top-bar .top-bar-left {
  text-align: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  margin: 0 auto !important;
}
.top-bar .top-bar-right,
.top-bar .top-bar.widget_text,
.top-bar > .col-full > .widget_text:empty,
.top-bar .widget_custom_html:empty,
.top-bar .widget:has(.custom-html-widget:empty) { display: none !important; }
.top-bar-right { display: none !important; }

/* ============================================================================
   3. Couleur primaire Bleu Onde sur tous les CTA / liens / accents Shoptimizer
   ============================================================================ */
.button,
button.button,
input[type="submit"],
.added_to_cart,
.shop-button,
.single_add_to_cart_button,
.checkout-button,
.btn-primary,
.cs-btn {
  background: var(--dzp-bleu-onde) !important;
  border-color: var(--dzp-bleu-onde) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
.button:hover,
button.button:hover,
input[type="submit"]:hover,
.shop-button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background: var(--dzp-bleu-nuit) !important;
  border-color: var(--dzp-bleu-nuit) !important;
}

/* Liens et titres */
a { color: var(--dzp-bleu-onde); }
a:hover { color: var(--dzp-bleu-nuit); }

/* Prix */
.price,
.amount,
.woocommerce-Price-amount,
ins .woocommerce-Price-amount {
  color: var(--dzp-bleu-nuit) !important;
}

/* ============================================================================
   NAV PRINCIPAL — passe de fond noir #222 (Shoptimizer par defaut) a fond blanc
   Selecteurs trouves dans l'inline Kirki : .col-full-nav + menu-primary-menu-container
   ============================================================================ */
@media (min-width: 993px) {
  .col-full-nav { background-color: #fff !important; border-bottom: 1px solid #eee; }
  .menu-primary-menu-container > ul > li > a,
  .menu-primary-menu-container > ul > li.nolink > span { color: var(--dzp-anthracite) !important; }
  .menu-primary-menu-container > ul.menu:hover > li > a { opacity: 1 !important; }
  .menu-primary-menu-container > ul > li > a:hover,
  .menu-primary-menu-container > ul > li.current-menu-item > a {
    color: var(--dzp-bleu-onde) !important;
  }
  /* Caret triangle des items "menu-item-has-children" */
  .main-navigation ul.menu > li.menu-item-has-children > a::after { background-color: var(--dzp-anthracite) !important; }
  .main-navigation ul.menu > li.menu-item-has-children:hover > a::after { background-color: var(--dzp-bleu-onde) !important; }
}

/* Submenu hover */
.main-navigation ul.menu ul li.menu-item:not(.menu-item-image):not(.heading) > a:hover {
  color: var(--dzp-bleu-onde) !important;
  background: var(--dzp-blanc-casse);
}
.main-navigation ul.menu ul.sub-menu { background-color: #fff !important; }

/* ============================================================================
   PANIER / CART — Kirki utilise plusieurs selecteurs pour le badge orange #dc9814
   On override TOUS les enclos pour basculer en Corail Pelage.
   ============================================================================ */
/* Badge count : fond Corail + texte blanc + bordure Corail */
.shoptimizer-cart a.cart-contents .count,
.shoptimizer-cart a.cart-contents:hover .count,
.shoptimizer-cart a.cart-contents:not(:hover) .count {
  background-color: var(--dzp-corail) !important;
  color: #fff !important;
  border-color: var(--dzp-corail) !important;
}
.shoptimizer-cart a.cart-contents .count:after,
.shoptimizer-cart a.cart-contents:hover .count:after { border-color: var(--dzp-corail) !important; }

/* Icone panier SVG : stroke Bleu Nuit (au lieu de orange Shoptimizer) */
.shoptimizer-cart-icon svg,
.shoptimizer-cart a.cart-contents svg,
.shoptimizer-cart a.cart-contents:hover svg,
.shoptimizer-cart-icon i { stroke: var(--dzp-bleu-nuit) !important; color: var(--dzp-bleu-nuit) !important; }

/* Cache le subtotal "0,00 €" a cote de l'icone panier dans le header desktop */
.shoptimizer-cart .amount,
.site-header-cart .amount,
.shoptimizer-cart a.cart-contents > span.amount { display: none !important; }

/* ============================================================================
   LIENS — Bleu Onde au lieu du bleu Shoptimizer #1e68c4
   ============================================================================ */
a { color: var(--dzp-bleu-onde); }
a:hover { color: var(--dzp-bleu-nuit) !important; }

/* ============================================================================
   4. Cart icon + count badge
   ============================================================================ */
.cart-contents-count,
.site-header-cart .count {
  background: var(--dzp-corail) !important;
  color: #fff !important;
}

/* ============================================================================
   5. Trust bar (below-content) — 2 items centres, fond sable, icones Bleu Onde
   Shoptimizer fait du grid sur .below-content .col-full (4 cols). On force flex
   center pour que nos 2 items restants soient cote a cote au centre.
   ============================================================================ */
.below-content {
  background: var(--dzp-sable) !important;
  padding: 1.75rem 1rem !important;
  text-align: center !important;
}
.below-content > .col-full,
.below-content .col-full {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4rem !important;
  flex-wrap: wrap;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 1170px !important;
  margin: 0 auto !important;
}
.below-content .widget {
  display: inline-flex !important;
  align-items: center;
  gap: 0.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  text-align: left;
  position: relative !important;
}
.below-content .widget h4,
.below-content .widget .widget-title,
.below-content .widget .widgettitle,
.below-content .widget .gamma {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--dzp-bleu-nuit) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  position: static !important;
  display: inline-block !important;
  order: 2 !important;
}
/* La textwidget contient l'icone SVG : on la met en premier (order:1) pour avoir [icone] [titre] */
.below-content .widget .textwidget,
.below-content .widget .custom-html-widget {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
.below-content .widget p {
  font-size: 0.78rem !important;
  color: var(--dzp-gris-doux) !important;
  margin: 0 !important;
  line-height: 1.3;
}
.below-content .widget svg {
  width: 32px !important;
  height: 32px !important;
  stroke: var(--dzp-bleu-onde) !important;
  stroke-width: 2 !important;
  fill: none !important;
  flex-shrink: 0;
  color: var(--dzp-bleu-onde) !important;
  position: static !important;
  margin: 0 !important;
}
.below-content .widget .ri { color: var(--dzp-bleu-onde) !important; }

/* ============================================================================
   6. Footer — palette sombre + bouton newsletter (s'il reste) couleur corail
   ============================================================================ */
.site-footer { background: var(--dzp-anthracite) !important; color: #fff !important; }
.site-footer .widget-title,
.site-footer .footer-widget-title { color: rgba(255,255,255,0.6) !important; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.site-footer a { color: rgba(255,255,255,0.85) !important; }
.site-footer a:hover { color: #fff !important; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer ul li { margin-bottom: 0.6rem; }
.site-footer p { color: rgba(255,255,255,0.75); }

/* Copyright */
.site-info,
.copyright-area,
#copyright {
  background: rgba(0,0,0,0.2) !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.site-info a,
.copyright-area a { color: rgba(255,255,255,0.7) !important; }

/* ============================================================================
   7. Logo — un peu plus haut pour eviter le clipping du "p" du wordmark
   Kirki fixe height:38px mais avec padding bas insuffisant, le "p" est clipped.
   On passe en 44px et on retire les contraintes height pour respecter l'aspect ratio.
   ============================================================================ */
.site-header .custom-logo-link img,
.custom-logo-link img,
.site-logo img {
  height: 44px !important;
  max-height: none !important;
  width: auto !important;
  display: block;
}

/* ============================================================================
   8. Sticky header propre
   ============================================================================ */
.site-header.is-sticky {
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ============================================================================
   9. PAGE TEMPLATE HOMEPAGE TEST — supprime la marge blanche autour du hero
   La structure DOM rendue par Shoptimizer pour cette page est :
     #content.site-content > .shoptimizer-archive > [.archive-header > .col-full > .woocommerce] + .col-full > .apc-homepage-test
   Les wrappers .shoptimizer-archive, .archive-header, .col-full ajoutent padding/margin.
   On les neutralise sur cette page uniquement.
   ============================================================================ */
body.page-template-apc-homepage-test #content,
body.page-template-apc-homepage-test #content.site-content,
body.page-template-apc-homepage-test #primary,
body.page-template-apc-homepage-test #main,
body.page-template-apc-homepage-test .content-area,
body.page-template-apc-homepage-test .entry-content,
body.page-template-apc-homepage-test article.page,
body.page-template-apc-homepage-test .site-content,
body.page-template-apc-homepage-test .shoptimizer-archive,
body.page-template-apc-homepage-test .shoptimizer-archive > .col-full {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
body.page-template-apc-homepage-test .archive-header,
body.page-template-apc-homepage-test .archive-header > .col-full,
body.page-template-apc-homepage-test .archive-header .woocommerce,
body.page-template-apc-homepage-test .entry-header,
body.page-template-apc-homepage-test header.woocommerce-products-header,
body.page-template-apc-homepage-test .shoptimizer-category-banner { display: none !important; }