/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ============================================================
   BRAND VARIABLES (ProfChem.md brandbook v1.0)
   ============================================================ */
:root {
  --wd-brand-orange: #F76E02;
  --wd-brand-graphite: #2A3338;
  --wd-brand-mist: #EEF0F1;
}

body {
  background: #EEF0F1;
}


/* ============================================================
   CATEGORY GRID / ROW CARDS
   (content-product-cat-default.php override)
   ============================================================ */

.wd-cats.elements-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--wd-col-lg, 4), 1fr);
  gap: 10px !important;
}

@media (max-width: 1024px) {
  .wd-cats.elements-grid {
    grid-template-columns: repeat(var(--wd-col-md, 4), 1fr);
    gap: var(--wd-gap-sm, 10px) !important;
  }
  .pc-cat-code { display: none; }
}

@media (max-width: 767px) {
  .wd-cats.elements-grid {
    grid-template-columns: repeat(var(--wd-col-sm, 2), 1fr);
    gap: var(--wd-gap-sm, 10px) !important;
  }
  .pc-cat-code { display: none; }
}

.wd-cats.elements-grid .pc-cat-row {
  margin: 0 !important;
  width: auto !important;
}

.pc-cat-row {
  position: relative;
  background: #FFFFFF;
  border-radius: 4px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 10px !important;
  transition: 0.15s;
}
.pc-cat-row:hover {
  background: #FFE6CC;
}
.pc-cat-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #A9B1B5;
  flex: none;
}
.pc-cat-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #2A3338;
  line-height: 1.25;
}
.pc-cat-qty {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #F76E02;
}
.pc-cat-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* ============================================================
   PRODUCT GRID — reads column count from Theme Settings
   (same pattern as category grid: consumes Woodmart's own
   --wd-col-lg / --wd-col-md / --wd-col-sm inline variables,
   set by Theme settings → Product archive → Products grid)
   ============================================================ */

ul.products {
  display: grid !important;
  grid-template-columns: repeat(var(--wd-col-lg, 4), 1fr);
  gap: var(--wd-gap-lg, 20px) !important;
  align-items: stretch;
}

@media (max-width: 1024px) {
  ul.products {
    grid-template-columns: repeat(var(--wd-col-md, 3), 1fr);
    gap: var(--wd-gap-sm, 10px) !important;
  }
}

@media (max-width: 767px) {
  ul.products {
    grid-template-columns: repeat(var(--wd-col-sm, 2), 1fr);
    gap: var(--wd-gap-sm, 10px) !important;
  }
}

ul.products li.product {
  margin: 0 !important;
  width: auto !important;
}

.pc-pcard-desc {
  text-align:left;
  font-size: 13px;
  color: #6C777D;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   PRODUCT META LINE (single product page)
   ============================================================ */

.pc-product-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #A9B1B5;
}

.pc-product-meta a {
  color: #A9B1B5;
  text-decoration: none;
}
.pc-product-meta a:hover {
  color: #374151;
  text-decoration: underline;
}


/* ============================================================
   PRODUCT CARD (grid) — overrides Woodmart's default
   product card markup via content-product-standard.php
   ============================================================ */

.pc-pcard {
  background: #FFFFFF;
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  transition: 0.15s;
}
.pc-pcard:hover {
  box-shadow: 0 8px 22px rgba(42,51,56,.08);
}
.pc-pcard-img {
  aspect-ratio: 4/3;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: #F5F6F7;
}
.pc-pcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pc-pcard-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #A9B1B5;
  text-align: left;
}
.pc-pcard-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}
.pc-pcard-title a {
  color: #2A3338;
}

/* Price + button row */
.pc-pcard-foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pc-pcard-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: #2A3338;
}
.pc-pcard-price del {
  color: #A9B1B5;
  font-weight: 400;
  margin-right: 4px;
}
.pc-pcard-price ins {
  text-decoration: none;
  color: #F76E02;
}

.pc-pcard-quote {
    z-index:200;
  }

/* ============================================================
   PRODUCT CARD — mobile layout
   Price stacks above button instead of side-by-side
   ============================================================ */

@media (max-width: 480px) {
  .pc-pcard-foot {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .pc-pcard-quote {
    width: 100%;
    justify-content: center !important;
  }

  .pc-pcard-price {
    font-size: 15px;
  }
}


/* ============================================================
   REQUEST BUTTON — opens Popup Maker popup
   (replaces YITH Request a Quote, removed in v10)
   ============================================================ */

/* ============================================================
   REQUEST BUTTON — opens Popup Maker popup
   (replaces YITH Request a Quote, removed in v10)
   ============================================================ */

.pc-pcard-quote {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pc-request-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F76E02;
  border: none;
  border-radius: 4px;
  padding: 8px 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #FFFFFF;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.15s;
}

.pc-request-btn:hover {
  background: #ff8425;
  color:white;
}

.pc-request-btn:active {
  background: #e05f00;
}

/* ============================================================
   RESULT COUNT (loop/result-count.php override)
   ============================================================ */

.pc-result-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #A9B1B5;
  margin: 0;
}


/* ============================================================
   BREADCRUMB (global/breadcrumb.php override)
   ============================================================ */

.pc-breadcrumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.pc-crumb-link,
.pc-crumb-current,
.pc-crumb-sep {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
}
.pc-crumb-link {
  color: #A9B1B5;
  text-decoration: none;
}
.pc-crumb-link:hover {
  color: #F76E02;
}
.pc-crumb-current {
  color: #2A3338;
  font-weight: 500;
}
.pc-crumb-sep {
  color: #C6CCCF;
}

/* ============================================================
   OrderBy (loop/orderby.php override)
   ============================================================ */

.pc-orderby-form {
  margin: 0;
}

.pc-orderby-form select.pc-orderby {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #FFFFFF !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 4px;
  padding: 10px 32px 10px 14px;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #2A3338 !important;
  cursor: pointer;
}

.pc-orderby-form select.pc-orderby:hover {
  background-color: #FFE6CC !important;
}

.pc-orderby-form select.pc-orderby:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #F76E02 !important;
}

/* ============================================================
   FILTER WIDGET (WOODMART_Widget_Layered_Nav) — restyled to
   match prototype's .chip pill style. No template file exists
   for this widget (custom PHP class, not wc_get_template), so
   this is a pure CSS override of Woodmart's generated markup.
   ============================================================ */

.wd-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc-layered-nav-term {
  margin: 0;
}

.wc-layered-nav-term .layered-nav-link,
.wc-layered-nav-term > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #DFE3E5;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 9px 15px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #5B666C;
  text-decoration: none;
  transition: 0.15s;
}

.wc-layered-nav-term .layered-nav-link:hover {
  border-color: #F76E02;
}

.wc-layered-nav-term.wd-active .layered-nav-link,
.wc-layered-nav-term.wd-active > span {
  border-color: #F76E02;
  background: #FFE6CC;
  color: #2A3338;
  font-weight: 600;
}

.wc-layered-nav-term .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #A9B1B5;
}

.wc-layered-nav-term.wd-active .count {
  color: #F76E02;
}

/* Hide Woodmart's own swatch elements — not needed for text-only
   attributes like Тип материала / Упаковка (no color/image swatches set) */
.wd-swatch {
  display: none;
}


/* ============================================================
   PRICE FILTER WIDGET (WooCommerce native price_filter widget)
   jQuery UI slider — structure/positioning is JS-driven, only
   restyling the visual skin here, no markup changes possible.
   ============================================================ */

.widget_price_filter .widget-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: var(--wd-widget-title-font-size);
  color: #2A3338;
  margin: 0 0 16px 0;
}

/* Slider track */
.widget_price_filter .price_slider {
  height: 4px;
  background: #DFE3E5;
  border: none;
  border-radius: 2px;
  margin-bottom: 20px;
}

/* Filled/selected range on the track */
.widget_price_filter .ui-slider-range {
  background: #F76E02;
  border-radius: 2px;
}

/* Drag handles */
.widget_price_filter .ui-slider-handle {
  width: 14px;
  height: 14px;
  top: -5px;
  background: #FFFFFF;
  border: 2px solid #F76E02;
  border-radius: 50%;

  cursor: grab;
  outline: none;
}

.widget_price_filter .ui-slider-handle:active {
  cursor: grabbing;
}

/* Bottom row: price label + filter button */
.widget_price_filter .price_slider_amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.widget_price_filter .price_label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #5B666C;
}

.widget_price_filter .price_label .from,
.widget_price_filter .price_label .to {
  color: #2A3338;
  font-weight: 500;
}

/* "Filter" button — matches your outline button style */
.widget_price_filter .button {
  background: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #2A3338;
  cursor: pointer;
  transition: 0.15s;
}

.widget_price_filter .button:hover {
  background: #2A3338;
  color: #FFFFFF;
}

/* Hide the leftover .clear div — pure layout artifact, no visual purpose */
.widget_price_filter .clear {
  display: none;
}

/* ============================================================
   MOBILE SIDEBAR — close button + "show sidebar" trigger
   Icon font glyphs render via ::before — font-family must stay
   untouched there or the icon breaks (renders as a box/tofu char).
   Only recolor via `color`, never override font-family on ::before.
   ============================================================ */

.wd-heading {
  padding: 16px 18px;
  border-bottom: 1px solid #DFE3E5;
  margin-bottom: 16px;
}

.close-side-widget {
  display: flex;
  justify-content: flex-end;
}

.close-side-widget a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #2A3338;
  text-decoration: none;
}

.close-side-widget a:hover {
  color: #F76E02;
}

.close-side-widget a::before {
  color: #2A3338;
}

.close-side-widget a:hover::before {
  color: #F76E02;
}

.wd-off-canvas-btn {
  display: inline-flex;
  align-items: center;
}

.wd-off-canvas-btn a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #2A3338;
  text-decoration: none;
}

.wd-off-canvas-btn a:hover {
  color: #F76E02;
}

.wd-off-canvas-btn a::before {
  color: #2A3338;
}

.wd-off-canvas-btn a:hover::before {
  color: #F76E02;
}

/* ============================================================
   HEADER PHONE NUMBER
   ============================================================ */

.pc-header-tel {
  display: flex;
  align-items: center;
}

.pc-header-tel a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #2A3338;
  text-decoration: none;
  white-space: nowrap;
}

.pc-header-tel a:hover {
  color: #F76E02;
}

/* ============================================================
   CUSTOM PRODUCT COUNTER
   ============================================================ */

.pc-product-counter {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 2px;
}
.pc-counter-number {
  font-family: 'JetBrains Mono',ui-monospace,monospace;
  font-size: 12px;
  line-height: 1;
  color: #8A959B;
}
.pc-counter-label {
  font-family: 'JetBrains Mono',ui-monospace,monospace;
  font-size: 12px;
  color: #8A959B;
}

/* ============================================================
   LANGUAGE SWITCHER — clean rebuild, no dropdown
   (languages.php override)
   ============================================================ */

.pc-lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pc-lang-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #A9B1B5;
  text-decoration: none;
  padding: 4px 2px;
}

.pc-lang-link:hover {
  color: #2A3338;
}

.pc-lang-link.pc-lang-active {
  color: #2A3338;
  font-weight: 700;
}

.pc-lang-sep {
  color: #C6CCCF;
  font-size: 12px;
}

.btn-border-custom{
    border: 1px solid #2A3338;
    padding: 12px 20px !important;
}

/* ============================================================
   MAIN NAV — hover color
   ============================================================ */

.wd-header-main-nav .woodmart-nav-link {
  color: #5B666C !important;
  transition: color 0.15s;
}

.wd-header-main-nav .woodmart-nav-link:hover {
    font-weight: 600 !important;
  color: #2A3338 !important;
}

/* ============================================================
   CF7 POPUP FORM — product request quote
   ============================================================ */

.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pc-cf7-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pc-cf7-field label {
  font-family: 'JetBrains Mono', sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #A9B1B5;
}

.pc-required {
  color: #F76E02;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  background: #F6F6F6;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 13px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #afafaf;
  width: 100%;
  box-sizing: border-box;
  transition: 0.15s;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: #F76E02;
  background: #FFFFFF;
}

.wpcf7-form textarea {
  resize: vertical;
  min-height: 76px;
}

.pc-cf7-submit input[type="submit"] {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #FFFFFF;
  background: #F76E02;
  padding: 13px 24px;
  border-radius: 28px;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: 0.15s;
}

.pc-cf7-submit input[type="submit"]:hover {
  background: #ff8425;
}

.wpcf7-not-valid-tip {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #E53935;
  margin-top: 4px;
}

.wpcf7-response-output {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  border-radius: 4px;
  padding: 10px 14px;
  margin-top: 12px;
}

.wpcf7-form p {
  margin: 0;
}

.pc-cf7-field p br {
  display: none;
}

/* ============================================================
   MOBILE MENU BURGER (Header Builder "Mobile menu" element)
   Child theme override: header-elements/burger.php adds
   pc-burger* classes alongside Woodmart's own — we style only
   through these, Woodmart's native .wd-tools-* CSS/JS stays intact.
   ============================================================ */

.pc-burger-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #2A3338;
  text-decoration: none;
}

.pc-burger-icon {
  color: #2A3338;
  transition: color 0.15s;
}

/* If the icon renders as inline SVG rather than an icon font,
   uncomment this so the fill follows the same color: */
/*
.pc-burger-icon svg {
  fill: currentColor;
}
*/

.pc-burger-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #2A3338;
  transition: color 0.15s;
}

.pc-burger:hover .pc-burger-icon,
.pc-burger:hover .pc-burger-text {
  color: #F76E02;
}

/* ============================================================
   MOBILE MENU PANEL (the sliding off-canvas menu itself)
   Child theme override: woodmart_mobile_menu() in functions.php
   adds pc-mobile-nav* classes alongside Woodmart's own — we style
   only through these, Woodmart's native .mobile-nav / .wd-nav-mobile
   CSS/JS (open/close animation, drilldown, etc.) stays intact.
   ============================================================ */

/* Panel background — soft mist gray, so the white cards below can
   float on top of it, same layering as the rest of the site */
.pc-mobile-nav {
  background: #EEF0F1;
}

/* Close bar + tabs sit on their own white "toolbar" strip at top */
.pc-mobile-nav-heading {
  background: #FFFFFF;
  padding: 16px 18px;
  border-bottom: 1px solid #DFE3E5;
}

.pc-mobile-nav-close a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #2A3338;
  text-decoration: none;
}

.pc-mobile-nav-close a:hover {
  color: #F76E02;
}

.pc-mobile-nav-close a::before {
  color: #2A3338;
}

.pc-mobile-nav-close a:hover::before {
  color: #F76E02;
}

.pc-mobile-nav-tabs {
  background: #FFFFFF;
  margin: 0 !important;
  padding: 0 18px;
  border-bottom: 1px solid #DFE3E5;
}

/* "Menu / Categories" tab switcher */
.pc-mobile-nav-tab a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600 !important;
  font-size: 13px;
  color: #5B666C;
}

.pc-mobile-nav-tab.wd-active a {
  color: #2A3338;
}

.pc-mobile-nav-tab.wd-active {
  border-color: #F76E02;
}

/* Nav links — each item is its own white rounded card on the
   mist background, matching .pc-cat-row on the homepage */
.pc-mobile-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  margin: 0 !important;
}

.pc-mobile-nav-menu > li {
  position: relative;
  background: #FFFFFF;
  border-radius: 4px;
  overflow: hidden;
}

.pc-mobile-nav-menu > li > a.woodmart-nav-link {
  display: block;
  background: transparent;
  border-radius: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #2A3338 !important;
  padding: 16px 54px 16px 18px;
  transition: background 0.15s;
}

.pc-mobile-nav-menu > li > a.woodmart-nav-link:hover,
.pc-mobile-nav-menu > li.wd-active > a.woodmart-nav-link {
  background: #FFE6CC;
  color: #2A3338 !important;
}

/* Submenu opener chevron (e.g. language switcher's arrow) —
   sits inside the same white card, separated by a thin divider,
   instead of floating as its own detached box */
.pc-mobile-nav-menu > li > .wd-nav-opener {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #EEF0F1;
  border-bottom: none;
  color: #8A959B;
  cursor: pointer;
}

.pc-mobile-nav-menu > li > .wd-nav-opener::before {
  color: inherit;
}

.pc-mobile-nav-menu > li > .wd-nav-opener:hover {
  background: #FFE6CC;
  color: #F76E02;
}

/* Submenu items (nested one level deeper, e.g. language switcher) —
   slightly indented, sit inside the same card treatment */
.pc-mobile-nav-menu .wd-sub-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 0;
  margin: 0 !important;
}

.pc-mobile-nav-menu .wd-sub-menu > li > a.woodmart-nav-link {
  background: #FFFFFF;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  text-transform: none !important;
  color: #5B666C !important;
  padding: 12px 18px 12px 26px;
}



.pc-mobile-nav-menu .wd-sub-menu > li > a.woodmart-nav-link:hover {
  background: #FFE6CC;
  color: #2A3338 !important;
}

/* Bottom widget area (wishlist/account/compare icons, if shown) */
.pc-mobile-nav-widgets {
  background: #FFFFFF;
  border-top: 1px solid #DFE3E5;
  padding: 16px 18px;
}