/*
Theme Name: Divinshka Hello Child
Theme URI: https://divinshkachocolate.com/casablanca/
Description: Theme enfant de Hello Elementor pour Divinshka Chocolate — chocolaterie artisanale russe, Casablanca. Palette terracotta / creme / brun chocolat, typographies Cormorant Garamond + Karla.
Author: Divinshka Chocolate
Template: hello-elementor
Version: 1.0.0
Text Domain: divinshka-hello-child
*/

/* ==========================================================================
   1. Design tokens (couleurs, typographies, espacements)
   ========================================================================== */
:root {
  --dvk-cream: #F7F1E8;
  --dvk-cream-light: #FBF7F0;
  --dvk-white: #FFFFFF;
  --dvk-ink: #241209;
  --dvk-ink-soft: #5C3A22;
  --dvk-muted: #8C7A68;
  --dvk-border: #EFE7D9;
  --dvk-dark: #1E1712;
  --dvk-black-bar: #141110;
  --dvk-terracotta: #C1734A;
  --dvk-terracotta-dark: #A65E39;
  --dvk-sage: #7A9B7E;

  --dvk-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --dvk-font-body: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif;

  --dvk-radius-sm: 4px;
  --dvk-radius-md: 12px;
  --dvk-radius-lg: 20px;
  --dvk-radius-pill: 999px;

  --dvk-container: 1280px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body {
  font-family: var(--dvk-font-body);
  color: var(--dvk-ink);
  background: var(--dvk-white);
}

h1, h2, h3, h4, h5,
.elementor-heading-title {
  font-family: var(--dvk-font-display);
  font-weight: 500;
  color: var(--dvk-ink);
}

a {
  color: var(--dvk-ink);
}

a:hover {
  color: var(--dvk-terracotta);
}

/* ==========================================================================
   3. Announcement bar (bandeau noir "Livraison au centre de Casablanca...")
   ========================================================================== */
.dvk-announcement-bar {
  background: var(--dvk-black-bar);
  color: var(--dvk-cream);
  text-align: center;
  padding: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==========================================================================
   4. Header
   ========================================================================== */
.site-header,
.elementor-location-header {
  background: var(--dvk-white);
}

.dvk-search-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--dvk-cream);
  border-radius: var(--dvk-radius-pill);
  padding: 12px 20px;
}

.dvk-search-pill input {
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--dvk-muted);
  width: 100%;
  outline: none;
}

.dvk-logo-block {
  text-align: center;
}

.dvk-logo-block .dvk-logo-word {
  font-family: var(--dvk-font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--dvk-ink);
}

.dvk-logo-block .dvk-logo-tagline {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--dvk-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Nav pill menu */
.dvk-nav-pill {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--dvk-border);
  border-bottom: 1px solid var(--dvk-border);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dvk-nav-pill a {
  padding: 8px 16px;
  border-radius: var(--dvk-radius-pill);
  display: inline-block;
}

.dvk-nav-pill a:hover,
.dvk-nav-pill li.current-menu-item > a {
  background: var(--dvk-terracotta);
  color: var(--dvk-white);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.dvk-btn,
.elementor-button.dvk-btn-style {
  display: inline-block;
  background: var(--dvk-terracotta);
  color: var(--dvk-white) !important;
  padding: 14px 30px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--dvk-radius-pill);
  border: none;
  text-decoration: none;
  transition: background 0.2s ease;
}

.dvk-btn:hover {
  background: var(--dvk-terracotta-dark);
  color: var(--dvk-white) !important;
}

.dvk-btn-outline {
  background: transparent;
  border: 1px solid var(--dvk-ink);
  color: var(--dvk-ink) !important;
}

.dvk-btn-outline:hover {
  background: var(--dvk-ink);
  color: var(--dvk-white) !important;
}

.dvk-btn-dark {
  background: var(--dvk-ink);
}

.dvk-btn-dark:hover {
  background: #000;
}

/* ==========================================================================
   6. Cards / Products
   ========================================================================== */
.dvk-card {
  background: var(--dvk-white);
}

.dvk-card-image {
  border-radius: var(--dvk-radius-sm);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  position: relative;
}

.dvk-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--dvk-ink);
  color: var(--dvk-cream);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 5px 11px;
  border-radius: var(--dvk-radius-pill);
  text-transform: uppercase;
}

.dvk-badge-sans-sucre {
  background: var(--dvk-sage);
  color: var(--dvk-white);
}

/* WooCommerce product loop restyle */
ul.products li.product {
  text-align: left;
}

ul.products li.product img {
  border-radius: var(--dvk-radius-sm);
}

ul.products li.product .price {
  font-family: var(--dvk-font-body);
  font-weight: 600;
  color: var(--dvk-ink);
}

ul.products li.product .price ins {
  color: var(--dvk-terracotta);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button {
  background: var(--dvk-terracotta) !important;
  color: var(--dvk-white) !important;
  border-radius: var(--dvk-radius-pill) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 13px 26px !important;
  border: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover {
  background: var(--dvk-terracotta-dark) !important;
}

/* ==========================================================================
   7. Newsletter band
   ========================================================================== */
.dvk-newsletter-band {
  background: var(--dvk-terracotta);
  color: var(--dvk-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 56px;
  flex-wrap: wrap;
  gap: 20px;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.site-footer,
.elementor-location-footer {
  background: var(--dvk-dark);
  color: var(--dvk-cream);
}

.dvk-footer-heading {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--dvk-terracotta);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
}

.dvk-footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: #C9B69C;
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .dvk-nav-pill {
    flex-wrap: wrap;
    gap: 4px;
  }
  .dvk-newsletter-band {
    flex-direction: column;
    text-align: center;
  }
}