/* WMW variant picker — collapsed 2-axis dropdown UI
 * Hides FC's tile list and shows dropdowns instead, for products with >1 variant.
 */

/* Hide FC's tile list whenever our custom picker is active. Each column-type
 * variant is listed explicitly so our selector's specificity exceeds FC's
 * mobile override at @media (max-width: 480px) — see variant-picker.js. */
.wmw-picker-active.fct-product-variants,
.wmw-picker-active.fct-product-variants.column-type-one,
.wmw-picker-active.fct-product-variants.column-type-two,
.wmw-picker-active.fct-product-variants.column-type-three,
.wmw-picker-active.fct-product-variants.column-type-four,
.wmw-picker-active.fct-product-variants.column-type-masonry {
  display: none !important;
}
@media (max-width: 480px) {
  .wmw-picker-active.fct-product-variants,
  .wmw-picker-active.fct-product-variants.column-type-one,
  .wmw-picker-active.fct-product-variants.column-type-two,
  .wmw-picker-active.fct-product-variants.column-type-three,
  .wmw-picker-active.fct-product-variants.column-type-four,
  .wmw-picker-active.fct-product-variants.column-type-masonry {
    display: none !important;
  }
}

.wmw-variant-picker {
  display: grid;
  gap: 14px;
  margin: 14px 0 20px;
}

/* When we have >= 2 axes, lay them side-by-side on desktop */
.wmw-variant-picker:has(> .wmw-variant-picker__field:nth-child(2)) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wmw-variant-picker__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wmw-variant-picker__label {
  font-family: 'Chakra Petch', -apple-system, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A9A49C;
}

.wmw-variant-picker__select {
  appearance: none;
  -webkit-appearance: none;
  background: #1A1917 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23F66332' d='M5 8l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center/18px 18px;
  border: 1px solid rgba(236,234,231,0.15);
  color: #ECEAE7;
  font-family: 'Rajdhani', -apple-system, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 38px 11px 14px;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

.wmw-variant-picker__select:hover {
  border-color: rgba(246,99,50,0.4);
}

.wmw-variant-picker__select:focus {
  outline: none;
  border-color: #F66332;
  box-shadow: 0 0 0 2px rgba(246,99,50,0.2);
}

.wmw-variant-picker__select option {
  background: #1A1917;
  color: #ECEAE7;
}