/* =========================================================
   FT — SINGLE PRODUCT PAGE (VARIATION DROPDOWN STYLING)
   ---------------------------------------------------------
   Scope:   Single product pages only (.single-product)
   Purpose: Reskins the WooCommerce variation dropdown as
            an underline-only editorial form field. The
            underline stays soft at all states — no focus
            darkening — to preserve the quiet editorial feel.
            Selected variation text matches the short
            description color for a cohesive form treatment.
   
   Design intent:
   - Underline only — no border, no background, no shadow,
     no border-radius. Reads as a line of text with a
     hairline underneath indicating interactivity.
   - Custom chevron on the right signals the field is a
     select input without relying on visual weight.
   - Underline color stays soft (#d8d5d0) at all states,
     including focus. Darkening on focus would introduce
     heaviness that doesn't match the brand's quiet pillar.
   - Selected text color matches the short description
     color (#555) so the dropdown feels like a continuation
     of the descriptive content, not a form declaration.
   - Consistent with the "Quietly Confident, Craft-Reverent"
     brand pillars — whitespace and typography do the work.
   ========================================================= */


/* --- STRUCTURE RESET --- */

.single-product table.variations {
  width: 100%;
  border: none;
  margin-bottom: 0em;
}

.single-product table.variations tr {
  display: block;
  margin-bottom: 0px;
}

.single-product table.variations th.label,
.single-product table.variations td.value {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
}

/* Hide labels visually, keep for screen readers */
.single-product table.variations th.label {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Hide "Clear" reset link */
.single-product .reset_variations {
  display: none !important;
}


/* --- UNDERLINE-ONLY SELECT --- */

.single-product table.variations select {
  width: 100%;
  height: 44px;
  padding: 10px 28px 12px 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  color: #555;
  background: transparent;
  border: none;
  border-bottom: 1px solid #d8d5d0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.single-product table.variations select:focus {
  border-bottom-color: #d8d5d0;
  outline: none;
  box-shadow: none;
}


/* --- CUSTOM CHEVRON --- */

.single-product table.variations td.value {
  position: relative;
}

.single-product table.variations td.value::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='1.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}