/* =========================================================================
   Untd. Performance — YMM Search skin
   -------------------------------------------------------------------------
   The Year / Make / Model selector is rendered entirely by the YMM Search
   plugin (Pektsekye). The theme never reimplements it — reimplementing it
   would detach the markup from the plugin's own jQuery widget and the
   picker would stop fetching levels. Instead this sheet re-skins the
   plugin's real DOM to the Untd. design.

   Anatomy the plugin emits (view/frontend/templates/horizontal_selector.php):

     .widget.ymm-selector.ymm-horizontal#ymm_<widgetId>
       .ymm-title > .widget-title
       .ymm-title-right > .ymm-garage
            .ymm-garage-text, select.ymm-garage-select, a.ymm-remove-from-garage
       .ymm-clear
       .block-content
            .level  (one per configured level: _make / _model / _year)
            .ymm-extra > .ymm-category-container, .ymm-search
            button.button.ymm-submit-any-selection
            .ymm-filter-links > a.ymm-search-all-link, a.ymm-clear-filter

   Loaded with a dependency on the plugin's own 'ymm' handle so it always
   cascades after view/frontend/web/main.css.
   ========================================================================= */

/* -- Shared shell ------------------------------------------------ */
.ymm-selector{
  font-family:var(--font-ui);color:var(--text-body);
  background:transparent;border:0;box-shadow:none;margin:0;padding:0;
}
.ymm-selector *{box-sizing:border-box}
/* The plugin lays out with floats and uses .ymm-clear spacers. Flex makes
   those spacers redundant; collapsing them prevents phantom gaps. */
.ymm-selector .ymm-clear{display:none}
.ymm-selector .ymm-title{margin:0 0 var(--space-4)}
.ymm-selector .ymm-title .widget-title,
.ymm-selector .widget-title{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-400);display:block;
}

/* -- Level selects ----------------------------------------------- */
.ymm-selector .level{display:flex;flex-direction:column;gap:6px;float:none}
.ymm-selector .level label{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--chrome-300);margin:0;
}
.ymm-selector .level select,
.ymm-selector select.ymm-select,
.ymm-selector select.ymm-garage-select{
  height:44px;width:100%;
  padding:0 var(--space-7) 0 var(--space-4);
  background-color:var(--surface-sunken);
  background-image:linear-gradient(45deg,transparent 50%,var(--chrome-300) 50%),linear-gradient(135deg,var(--chrome-300) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 12px) 20px;
  background-size:6px 6px;background-repeat:no-repeat;
  border:1px solid var(--border-default);border-radius:var(--radius-2);
  box-shadow:var(--inset-well);
  color:var(--white);font-family:var(--font-ui);font-size:14px;line-height:1.2;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  transition:var(--transition-control);
}
.ymm-selector .level select:hover{border-color:var(--border-strong)}
.ymm-selector .level select:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.ymm-selector .level select[disabled],
.ymm-selector select[disabled]{opacity:.45;cursor:not-allowed}
.ymm-selector option{background:var(--ink-900);color:var(--white)}

/* -- Submit ------------------------------------------------------- */
.ymm-selector button.ymm-submit-any-selection,
.ymm-selector .ymm-td-button button.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  height:44px;padding:0 var(--space-6);
  background:var(--surface-accent);color:var(--text-on-accent);
  border:1px solid var(--surface-accent);border-radius:var(--radius-control);
  clip-path:var(--clip-shear-sm);cursor:pointer;
  font-family:var(--font-ui);font-size:var(--label);font-weight:var(--weight-bold);
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  box-shadow:var(--shadow-1);transition:var(--transition-control);
}
.ymm-selector button.ymm-submit-any-selection:hover,
.ymm-selector .ymm-td-button button.button:hover{
  background:var(--surface-accent-hover);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-accent);
}
.ymm-selector button.ymm-submit-any-selection:active{transform:scale(var(--press-scale))}
.ymm-selector button.ymm-submit-any-selection[disabled]{opacity:.45;pointer-events:none;transform:none}
/* The plugin wraps the label in nested spans on the word-search button. */
.ymm-selector button.button span{display:contents}

/* -- Garage ------------------------------------------------------- */
.ymm-selector .ymm-title-right{float:none;margin:0}
.ymm-selector .ymm-garage{
  display:flex;align-items:flex-end;gap:var(--space-3);flex-wrap:wrap;
}
.ymm-selector .ymm-garage-text{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--chrome-300);display:block;margin-bottom:6px;
}
.ymm-selector .ymm-garage>select{min-width:190px}
.ymm-selector a.ymm-remove-from-garage,
.ymm-selector .ymm-filter-links a{
  font-family:var(--font-mono);font-size:11px;color:var(--chrome-300);
  text-decoration:underline;white-space:nowrap;
}
.ymm-selector a.ymm-remove-from-garage:hover,
.ymm-selector .ymm-filter-links a:hover{color:var(--white)}
.ymm-selector .ymm-filter-links{
  display:inline-flex;align-items:center;gap:var(--space-4);color:var(--ink-500);
}

/* -- Word / category search sub-block ----------------------------- */
.ymm-selector .ymm-extra{width:100%}
.ymm-selector .ymm-or-search{
  font-family:var(--font-mono);font-size:11px;color:var(--chrome-400);
  letter-spacing:.06em;margin-bottom:var(--space-3);
}
.ymm-selector .ymm-search table{width:100%;border-collapse:separate;border-spacing:var(--space-3) 0;margin:0}
.ymm-selector .ymm-search td{padding:0;border:0;background:none}
.ymm-selector .ymm-td-button{width:1%;white-space:nowrap}
.ymm-selector input.ymm-search-field{
  height:44px;width:100%;padding:0 var(--space-4);
  background:var(--surface-sunken);border:1px solid var(--border-default);
  border-radius:var(--radius-2);box-shadow:var(--inset-well);
  color:var(--white);font-family:var(--font-ui);font-size:14px;
}
.ymm-selector input.ymm-search-field::placeholder{color:var(--chrome-400)}

/* -- Horizontal variant: the header fitment bar ------------------
   The plugin emits .ymm-title-right (the garage) as a SIBLING of
   .block-content, not a child of it, so the row has to be established on the
   selector itself and the two put back in the design's order. */
.untd-fitment .ymm-selector.ymm-horizontal{
  width:100%;display:flex;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;
}
.untd-fitment .ymm-selector.ymm-horizontal .ymm-title{order:0;flex:1 0 100%;margin:0}
.untd-fitment .ymm-selector.ymm-horizontal .block-content{
  order:1;flex:1 1 460px;min-width:0;
  display:flex;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;
}
.untd-fitment .ymm-selector.ymm-horizontal .level{flex:1 1 150px;min-width:140px;float:none;margin:0}
/* Year is the narrowest of the three levels. */
.untd-fitment .ymm-selector.ymm-horizontal .level:nth-of-type(3){flex:0 1 120px;min-width:104px}
.untd-fitment .ymm-selector.ymm-horizontal .ymm-extra{flex:1 1 100%}
.untd-fitment .ymm-selector.ymm-horizontal .ymm-filter-links{margin-left:auto}

/* Garage rail, pinned to the right of the row. */
.untd-fitment .ymm-selector.ymm-horizontal .ymm-title-right{
  order:2;flex:0 0 auto;margin:0;
  padding-left:var(--space-5);border-left:1px solid var(--border-hairline);
}
.untd-fitment .ymm-selector.ymm-horizontal .ymm-garage{align-items:flex-end;gap:var(--space-3)}
.untd-fitment .ymm-selector.ymm-horizontal select.ymm-garage-select{width:200px;min-width:0}
.untd-fitment .ymm-selector.ymm-horizontal a.ymm-remove-from-garage{padding-bottom:14px}

/* -- Vertical variant: sidebar / footer widget -------------------- */
.untd-widget .ymm-selector .block-content,
.widget_pektsekye_ymm_widget_selector .ymm-selector .block-content{
  display:flex;flex-direction:column;gap:var(--space-4);
}
.untd-widget .ymm-selector button.ymm-submit-any-selection{width:100%}

/* -- Product page fitment tab ------------------------------------- */
.ymm-restriction-table,.woocommerce-Tabs-panel--ymm table{
  width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12px;
}
.ymm-restriction-table th,.woocommerce-Tabs-panel--ymm th{
  text-align:left;padding:var(--space-4) var(--space-5);background:var(--surface-sunken);
  font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chrome-300);border-bottom:1px solid var(--border-hairline);
}
.ymm-restriction-table td,.woocommerce-Tabs-panel--ymm td{
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-hairline);color:var(--chrome-200);
}

/* -- Responsive --------------------------------------------------- */
@media (max-width:980px){
  .untd-fitment .ymm-selector.ymm-horizontal .ymm-title-right{
    order:0;margin-left:0;padding-left:0;border-left:0;flex:1 1 100%;
  }
  .untd-fitment .ymm-selector.ymm-horizontal .ymm-filter-links{margin-left:0}
}
@media (max-width:760px){
  .untd-fitment .ymm-selector.ymm-horizontal .block-content{gap:var(--space-3)}
  .untd-fitment .ymm-selector.ymm-horizontal .level{flex:1 1 100%}
  .untd-fitment .ymm-selector.ymm-horizontal .level:nth-child(3){flex:1 1 100%}
  .untd-fitment .ymm-selector.ymm-horizontal button.ymm-submit-any-selection{width:100%}
  .untd-fitment__garage-label{flex:1 1 100%;border-right:0;padding-right:0;padding-bottom:var(--space-3)}
}

/* -- Garage internals -------------------------------------------
   The plugin renders the label, the select and the remove link as inline
   siblings separated by &nbsp;. Making the label a full-width flex item puts
   it above the control, as the design has it, without touching the markup. */
.untd-fitment .ymm-selector.ymm-horizontal .ymm-garage{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3);
}
.untd-fitment .ymm-selector.ymm-horizontal .ymm-garage-text{
  flex:1 0 100%;margin:0 0 2px;
}

/* -- "Your garage" caption -------------------------------------
   The theme's own label block that opens the row, to the left of the
   plugin's selects. */
.untd-fitment__garage-label{
  display:flex;flex-direction:column;gap:2px;
  padding-right:var(--space-5);border-right:1px solid var(--border-hairline);
  align-self:stretch;justify-content:center;
}
.untd-fitment__garage-label b{
  font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-400);
}
.untd-fitment__garage-label span{
  font-family:var(--font-mono);font-size:11px;color:var(--chrome-400);
}