/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme - Multi-Department Fashion Retailer
 Author:       XTemos / AskGarments
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ==========================================================================
   1. GLOBAL HEADER & TOP BAR STYLING (Fashion Department Store)
   ========================================================================== */

/* Top announcement bar: Sleek contrast & readable micro-copy - Force black background */
.whb-top-bar,
.whb-row.whb-top-bar {
  background-color: #111111 !important;
  color: #ffffff !important;
  font-size: 12px;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.whb-top-bar .whb-top-bar-inner {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.whb-top-bar .whb-col,
.whb-top-bar span,
.whb-top-bar p,
.whb-top-bar strong {
  color: #ffffff !important;
}

/* ==========================================================================
   2. MAIN NAVIGATION (Multi-Department Hierarchy)
   ========================================================================== */

/* Department level category links: clean editorial fashion typography */
.whb-header-bottom .wd-nav-main > li > a {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  padding-top: 14px;
  padding-bottom: 14px;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.whb-header-bottom .wd-nav-main > li:hover > a {
  color: #000000;
  opacity: 0.85;
}

/* Subtle active / hover bottom line */
.whb-header-bottom .wd-nav-main > li > a:after {
  height: 2px;
  background-color: #111111;
}

/* ==========================================================================
   3. PROMOTIONAL BADGES & ACCENTS
   ========================================================================== */

/* SALE / DEALS Accent highlight */
.wd-nav-main > li.menu-item-sale > a,
.wd-nav-main > li > a .menu-label-sale {
  color: #d32f2f !important;
}

.wd-nav-main .menu-label-sale {
  background-color: #d32f2f !important;
  color: #ffffff !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 1px 5px;
}

/* NEW IN / HOT Badge */
.wd-nav-main .menu-label-new,
.wd-nav-main .menu-label-hot {
  background-color: #111111 !important;
  color: #ffffff !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 1px 5px;
}

/* ==========================================================================
   4. SEARCH FORM: BORDERLESS BY DEFAULT, HOVER/FOCUS-ACTIVATED BORDER
   ========================================================================== */

/* Outer search wrapper: remove any container borders */
.whb-general-header .wd-search-form {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Unified search form: clean white borderless pill by default */
.whb-general-header .wd-search-form .searchform {
  border: 1px solid transparent !important;
  background-color: #ffffff !important;
  border-radius: 6px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* On mouse hover: show the border */
.whb-general-header .wd-search-form:hover .searchform,
.whb-general-header .wd-search-form .searchform:hover {
  border-color: #111111 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;
}

/* When user focuses or types to search: maintain active border */
.whb-general-header .wd-search-form:focus-within .searchform,
.whb-general-header .wd-search-form .searchform:focus-within {
  border-color: #111111 !important;
  box-shadow: 0 0 0 1px #111111, 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Remove separate input border / box */
.whb-general-header .wd-search-form .searchform input[type="text"].s,
.whb-general-header .wd-search-form .searchform input[type="text"] {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  color: #222222 !important;
  padding-inline-start: 16px !important;
  height: 44px !important;
}

/* Remove separate category selector border / box */
.whb-general-header .wd-search-form .searchform .wd-search-cat {
  border: none !important;
  box-shadow: none !important;
  inset-block: 0 !important;
}

.whb-general-header .wd-search-form .searchform .wd-search-cat-btn {
  border: none !important;
  border-inline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  color: #666666 !important;
  transition: all 0.2s ease !important;
}

/* Subtle separator for category on hover/focus */
.whb-general-header .wd-search-form:hover .searchform .wd-search-cat-btn,
.whb-general-header .wd-search-form:focus-within .searchform .wd-search-cat-btn,
.whb-general-header .wd-search-form .searchform:hover .wd-search-cat-btn,
.whb-general-header .wd-search-form .searchform:focus-within .wd-search-cat-btn {
  border-inline-start: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #222222 !important;
}

/* Search Submit Button */
.whb-general-header .wd-search-form .searchform .searchsubmit {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #555555 !important;
  transition: color 0.2s ease !important;
}

.whb-general-header .wd-search-form:hover .searchform .searchsubmit,
.whb-general-header .wd-search-form:focus-within .searchform .searchsubmit,
.whb-general-header .wd-search-form .searchform:hover .searchsubmit,
.whb-general-header .wd-search-form .searchform:focus-within .searchsubmit {
  color: #111111 !important;
}

.whb-general-header .wd-search-form .searchform .wd-clear-search {
  border: none !important;
}


/* ==========================================================================
   5. USER ACTIONS & CART
   ========================================================================== */

.whb-general-header .wd-header-cart .wd-cart-subtotal {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.whb-general-header .wd-header-cart .wd-cart-number {
  background-color: #111111;
  color: #ffffff;
}

/* ==========================================================================
   6. STICKY HEADER REFINEMENT
   ========================================================================== */

.whb-sticked {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   7. REMOVE RIGHT SLIDING / STICKY SOCIAL MEDIA BAR
   ========================================================================== */
.wd-sticky-social {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   8. HEADER UNASSIGNED MENU SUPPRESSION
   ========================================================================== */
.whb-header .create-nav-msg,
.whb-header span:has(> a[href*="nav-menus.php"]) {
  display: none !important;
}

/* ==========================================================================
   9. CUSTOM ASK GARMENTS FOOTER SYSTEM
   ========================================================================== */
.ask-custom-footer {
  background-color: #fcfcfc !important;
  border-top: 1px solid #eaeaea !important;
  color: #555555 !important;
  padding-top: 55px !important;
  font-family: inherit;
  clear: both;
}

.ask-custom-footer .main-footer {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 25px 45px !important;
}

.ask-footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1.6fr !important;
  gap: 40px !important;
  align-items: start !important;
}

@media (max-width: 1024px) {
  .ask-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 35px 25px !important;
  }
}

@media (max-width: 640px) {
  .ask-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

/* Brand column */
.ask-footer-brand .footer-logo-link {
  display: inline-block;
  margin-bottom: 16px;
}

.ask-footer-brand .footer-logo-img {
  max-width: 210px !important;
  height: auto !important;
  display: block;
}

.ask-footer-brand .footer-brand-desc {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: #666666 !important;
  margin: 0 !important;
  max-width: 300px;
}

/* Column Titles */
.ask-footer-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #111111 !important;
  margin: 0 0 20px 0 !important;
  padding-bottom: 8px;
  position: relative;
}

.ask-footer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background-color: #111111;
}

/* Brands List */
.ask-footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ask-footer-links li {
  margin-bottom: 10px !important;
  padding: 0 !important;
}

.ask-footer-links li a {
  font-size: 14px !important;
  color: #555555 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}

.ask-footer-links li a:hover {
  color: #000000 !important;
  transform: translateX(4px);
}

/* Social Links */
.ask-footer-social-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ask-footer-social-list li {
  margin-bottom: 12px !important;
  padding: 0 !important;
}

.ask-footer-social-list .footer-social-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 14px !important;
  color: #555555 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.ask-footer-social-list .footer-social-link .social-icon-box {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background-color: #f0f0f0 !important;
  color: #222222 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
}

.ask-footer-social-list .footer-social-link:hover {
  color: #000000 !important;
}

.ask-footer-social-list .footer-social-link:hover .social-icon-box {
  background-color: #111111 !important;
  color: #ffffff !important;
  transform: scale(1.08);
}

/* Contact Us */
.ask-footer-contact-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: #555555 !important;
}

.ask-footer-contact-list li {
  margin-bottom: 7px !important;
  padding: 0 !important;
}

.ask-footer-contact-list .contact-lbl {
  font-weight: 600 !important;
  color: #222222 !important;
  display: inline-block !important;
  margin-right: 4px !important;
}

.ask-footer-contact-list a {
  color: #555555 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.ask-footer-contact-list a:hover {
  color: #000000 !important;
  text-decoration: underline !important;
}

.ask-footer-contact-list .contact-addr {
  margin-top: 10px !important;
  line-height: 1.6 !important;
}

/* Copyright Bottom Bar */
.ask-copyright-bar {
  border-top: 1px solid #eaeaea !important;
  background-color: #f7f7f7 !important;
  padding: 18px 0 !important;
}

.ask-copyright-inner {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 25px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  font-size: 13px !important;
  color: #777777 !important;
}

.ask-copyright-inner .copyrights-text strong {
  color: #222222;
}

.ask-copyright-inner .footer-payment-icons {
  font-size: 12px;
  color: #888888;
}

/* ==========================================================================
   10. HERO BANNER / SLIDER TYPOGRAPHY & BALANCED ARROW POSITIONING
   ========================================================================== */

/* Main Banner Headline: Bigger, prominent and balanced */
.wd-slider .wd-slide .title,
.wd-slider .wd-slide h4,
.wd-slider .wd-slide .wd-entities-title {
  font-size: clamp(38px, 5.2vw, 68px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
  letter-spacing: -0.01em !important;
}

/* Banner Description: Increased readability & size */
.wd-slider .wd-slide p,
.wd-slider .wd-slide .wd-text-block p {
  font-size: clamp(15px, 1.35vw, 18px) !important;
  line-height: 1.65 !important;
  color: #f5f5f5 !important;
  max-width: 650px !important;
  margin-bottom: 25px !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Banner Call to Action Button */
.wd-slider .wd-slide .wd-button-wrapper a,
.wd-slider .wd-slide a.btn {
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 13px 32px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.25s ease !important;
}

/* Vertically balance the slide content so the headline sits cleanly ABOVE the arrow keys */
.wd-slider .wd-slide-container {
  padding-top: 40px !important;
  padding-bottom: 60px !important;
  display: flex !important;
  align-items: center !important;
}

.wd-slider .wd-slide-inner {
  transform: translateY(-20px);
}

/* Position navigation arrows below the headline line for clean visual balance */
.wd-slider .wd-slider-arrows .wd-btn-arrow,
.wd-slider .wd-nav-arrows.wd-pos-sep .wd-btn-arrow {
  top: 58% !important;
  opacity: 0.85 !important;
  transition: all 0.25s ease !important;
}

.wd-slider:hover .wd-slider-arrows .wd-btn-arrow,
.wd-slider:hover .wd-nav-arrows.wd-pos-sep .wd-btn-arrow {
  opacity: 1 !important;
}