/*
 * HorecaDepot CSS migration.
 * Source of truth: local WoodMart Theme Settings backup dated 2026-07-14.
 * Structural migration only; declarations and selectors are preserved.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   §0  DESIGN TOKENS (CSS Custom Properties)
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Legacy tokens: migrate gradually, one component at a time. */
  --hp-accent:           #fdb913;
  --hp-accent-hover:     #e6a610;
  --hp-accent-shadow:    rgba(253, 185, 19, 0.35);
  --hp-accent-text:      #1a1a1a;
  --hp-bg-page:          #f7f7f7;
  --hp-bg-white:         #ffffff;
  --hp-text-primary:     #1a1a1a;
  --hp-text-secondary:   #444444;
  --hp-text-muted:       #888888;
  --hp-border:           #e8e8e8;
  --hp-border-mid:       #d4d4d4;
  --hp-radius-sm:        4px;
  --hp-radius-md:        8px;
  --hp-radius-lg:        12px;
  --hp-shadow-xs:        0 1px 3px rgba(0,0,0,0.06);
  --hp-shadow-sm:        0 2px 8px rgba(0,0,0,0.07);
  --hp-shadow-md:        0 4px 20px rgba(0,0,0,0.09);
  --hp-gap-main:         clamp(24px, 3vw, 52px);
  --hp-gap-inner:        clamp(10px, 1.4vw, 20px);
  --hp-pad-section:      clamp(20px, 3vw, 44px);

  /* HorecaDepot design-system tokens. */
  --hd-color-brand-navy: #232F3E;
  --hd-color-nav-navy: #314358;
  --hd-color-dark-deep: #0C0F14;
  --hd-color-dark-surface: #131921;
  --hd-color-dark-raised: #1E293B;

  --hd-color-accent: #FDB913;
  --hd-color-accent-hover: #E6A610;
  --hd-color-accent-muted: #DC992A;

  --hd-color-text-primary: #1A1A1A;
  --hd-color-text-secondary: #444444;
  --hd-color-text-muted: #666666;

  --hd-color-surface: #FFFFFF;
  --hd-color-surface-subtle: #F7F7F7;
  --hd-color-border: #E8E8E8;
  --hd-color-border-strong: #D4D4D4;

  --hd-space-1: 4px;
  --hd-space-2: 8px;
  --hd-space-3: 12px;
  --hd-space-4: 16px;
  --hd-space-5: 20px;
  --hd-space-6: 24px;
  --hd-space-7: 32px;
  --hd-space-8: 40px;
  --hd-space-9: 48px;
  --hd-space-10: 64px;

  --hd-radius-xs: 4px;
  --hd-radius-sm: 6px;
  --hd-radius-md: 8px;
  --hd-radius-lg: 12px;
  --hd-radius-pill: 999px;

  --hd-shadow-xs: 0 1px 3px rgba(0,0,0,.06);
  --hd-shadow-sm: 0 2px 8px rgba(0,0,0,.07);
  --hd-shadow-md: 0 8px 24px rgba(19,25,33,.10);
  --hd-shadow-overlay: 0 24px 64px rgba(0,0,0,.45);
  --hd-shadow-accent: 0 4px 16px rgba(253,185,19,.30);
  --hd-shadow-accent-hover: 0 8px 24px rgba(253,185,19,.40);

  --hd-control-compact: 36px;
  --hd-control-standard: 44px;
  --hd-control-commerce: 48px;
  --hd-control-form-action: 52px;

  --hd-motion-fast: 160ms;
  --hd-motion-standard: 220ms;
  --hd-motion-complex: 320ms;
  --hd-motion-overlay: 450ms;
  --hd-ease-standard: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  html body .custom-promo-popup,
  html body .custom-promo-popup .popup-top-bar,
  html body .custom-promo-popup .popup-badge-dot,
  html body .custom-promo-popup .popup-reg-btn::after,
  html body .product-grid-item .product-wrapper,
  html body .product-grid-item .product-element-bottom .wd-entities-title a,
  html body .product-grid-item .wd-product-thumb a > img,
  html body .product-grid-item .wd-product-thumb .hover-img,
  html body .product-grid-item .wd-add-btn-replace .quantity,
  html body .product-grid-item .wd-add-btn-replace .quantity button.btn,
  html body .product-grid-item .wd-add-btn-replace .quantity input.btn,
  html body .product-grid-item .wd-add-btn-replace a.add_to_cart_button,
  html body .category-grid-item .wd-cat-inner,
  html body .category-grid-item .wd-cat-thumb img,
  html body .category-grid-item .wd-cat-content,
  html body .category-grid-item .wd-cat-content .wd-entities-title,
  html body .category-grid-item .wd-cat-content .wd-entities-title a,
  html body .horeca-step-card,
  html body .special-menu-btn a,
  html body .whb-header-bottom-inner ul.menu > li.special-menu-btn > a.woodmart-nav-link,
  html body .whb-header-bottom-inner .wd-button-wrapper a.btn {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  html body .custom-promo-popup,
  html body .custom-promo-popup .popup-reg-btn:hover,
  html body .product-grid-item:hover .product-wrapper,
  html body .product-grid-item:active .product-wrapper,
  html body .product-grid-item .wd-product-thumb:not(:has(.hover-img)):hover a > img,
  html body .product-grid-item .wd-product-thumb:has(.hover-img):hover a > img,
  html body .product-grid-item .wd-product-thumb:has(.hover-img):hover .hover-img,
  html body .product-grid-item .wd-add-btn-replace a.add_to_cart_button:hover,
  html body .product-grid-item .wd-add-btn-replace a.add_to_cart_button:active,
  html body .category-grid-item:hover .wd-cat-inner,
  html body .category-grid-item:active .wd-cat-inner,
  html body .category-grid-item:hover .wd-cat-thumb img,
  html body .category-grid-item:active .wd-cat-thumb img,
  html body .horeca-step-card:hover,
  html body .special-menu-btn a:hover,
  html body .special-menu-btn a:active,
  html body .whb-header-bottom-inner ul.menu > li.special-menu-btn > a.woodmart-nav-link:hover,
  html body .whb-header-bottom-inner ul.menu > li.special-menu-btn > a.woodmart-nav-link:active,
  html body .whb-header-bottom-inner .wd-button-wrapper a.btn:hover,
  html body .whb-header-bottom-inner .wd-button-wrapper a.btn:active {
    transform: none !important;
  }
}

/* Fix-forward 2026-07-16: homepage does not enqueue catalog/category-cards.css. */
body.home .category-grid-item {
  display: flex !important;
  height: auto !important;
  min-height: 0 !important;
}

body.home .category-grid-item .wd-cat-inner {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--hd-color-border) !important;
  border-radius: var(--hd-radius-lg) !important;
  background: var(--hd-color-surface) !important;
  box-shadow: var(--hd-shadow-sm) !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body.home .category-grid-item .wd-cat-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  background: var(--hd-color-surface-subtle) !important;
}

body.home .category-grid-item .wd-cat-thumb img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body.home .category-grid-item .wd-cat-content {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: 18px 14px !important;
  border-top: 1px solid #f0f0f0 !important;
  background: var(--hd-color-surface) !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
  transform: none !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

body.home .category-grid-item .wd-cat-content .wd-entities-title,
body.home .category-grid-item .wd-cat-content .wd-entities-title a {
  margin: 0 !important;
  color: var(--hd-color-brand-navy) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body.home .category-grid-item .wd-fill {
  z-index: 10 !important;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  body.home .category-grid-item:hover .wd-cat-inner {
    box-shadow: var(--hd-shadow-md) !important;
    transform: translateY(-4px) !important;
  }

  body.home .category-grid-item:hover .wd-cat-thumb img {
    transform: scale(1.04) !important;
  }

  body.home .category-grid-item:hover .wd-cat-content {
    border-top-color: var(--hd-color-brand-navy) !important;
    background: var(--hd-color-brand-navy) !important;
  }

  body.home .category-grid-item:hover .wd-cat-content .wd-entities-title,
  body.home .category-grid-item:hover .wd-cat-content .wd-entities-title a {
    color: var(--hd-color-surface) !important;
  }
}

@media (max-width: 576px) {
  body.home .category-grid-item .wd-cat-content {
    min-height: 50px !important;
    padding: 12px 10px !important;
  }

  body.home .category-grid-item .wd-cat-content .wd-entities-title,
  body.home .category-grid-item .wd-cat-content .wd-entities-title a {
    font-size: 14px !important;
  }
}