/*
 * J&E — consolidated product page UI (variable product + WCPA width form)
 * Install: WPCode -> Add Snippet -> CSS Snippet -> Auto Insert -> Site Wide Header.
 * (Code Type MUST be CSS Snippet, not JavaScript.) Then clear WP Rocket + CDN cache.
 * Pairs with the "Consolidated product JS" snippet (metal buttons + image swap).
 */

/* 1. Band Width options: tidy 2-column grid, styled to match the metal buttons.
   Beat theme `body .wcpa_wrap .wcpa_group_field { display:flex }` and keep two
   columns in the narrow PDP summary (auto-fill/minmax(150px) was collapsing to 1). */
body .wcpa_wrap .wcpa_type_radio-group .wcpa_group_field,
body .wcpa_wrap .wcpa_type_radio-group .wcpa_grp_items{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:.5rem;
  width:100%;
  flex-wrap:unset;
}
.wcpa_type_radio-group .wcpa_radio{ margin:0; }
.wcpa_type_radio-group .wcpa_radio label{
  display:flex; align-items:center; justify-content:center; text-align:center;
  gap:.25rem; margin:0;
  border:1px solid #d6dbd6; padding:.55rem .5rem;
  cursor:pointer; line-height:1.2;
  white-space:normal; font-size:.72rem; min-height:2.4em;
}
/* make the width stand out, the price smaller and muted */
.wcpa_type_radio-group .wcpa_radio label .wcpa_option_price{ font-size:.8em; color:#6b756e; }
/* Band Width title styled like the "Metal" title */
.wcpa_type_radio-group .wcpa_field_label{
  font-family:Poppins, sans-serif; font-size:15px; font-weight:500; color:#2B3632;
  text-transform:none; margin-bottom:6px;
}
/* drop the radio circle/input so the chips look like the metal buttons */
.wcpa_type_radio-group .wcpa_radio label .wcpa_radio_custom,
.wcpa_type_radio-group .wcpa_radio label input[type=radio]{ display:none !important; }
.wcpa_type_radio-group .wcpa_radio label:hover{ border-color:#2B3632; }
.wcpa_type_radio-group .wcpa_radio label:has(input:checked){
  border-color:#2B3632; background:#f3f5f3;
}

/* 2. Metal selector buttons (built by the JS snippet), with colour swatches. */
.je-metal-buttons{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:.5rem; margin:.25rem 0 .5rem;
}
.je-metal-btn{
  display:inline-flex; align-items:center; justify-content:flex-start; gap:.45rem;
  font-family:Poppins, sans-serif; font-size:.8rem; color:#2B3632;
  border:1px solid #d6dbd6; background:#fff;
  padding:.55rem .65rem; cursor:pointer; line-height:1.2; text-align:left;
}
.je-metal-btn:hover{ border-color:#2B3632; }
.je-metal-btn.is-active{ border-color:#2B3632; background:#f3f5f3; font-weight:500; }
select.je-native-hidden{ display:none !important; }
/* swatch dots — approximate metal shades (carat-differentiated).
   Swap these for photographed swatch images later if exact shades are wanted. */
.je-metal-btn::before{
  content:""; width:12px; height:12px; border-radius:50%; flex:0 0 auto;
  border:1px solid rgba(0,0,0,.15); background:#ccc;
}
.je-metal-btn[data-val="9ct-yellow-gold"]::before{ background:#E5C76B; }
.je-metal-btn[data-val="14ct-yellow-gold"]::before{ background:#E6C04F; }
.je-metal-btn[data-val="18ct-yellow-gold"]::before{ background:#E8B844; }
.je-metal-btn[data-val="9ct-rose-gold"]::before{ background:#E6B49A; }
.je-metal-btn[data-val="14ct-rose-gold"]::before{ background:#E3A687; }
.je-metal-btn[data-val="18ct-rose-gold"]::before{ background:#E09877; }
.je-metal-btn[data-val="9ct-white-gold"]::before{ background:#EAEAE7; }
.je-metal-btn[data-val="14ct-white-gold"]::before{ background:#E7E7E5; }
.je-metal-btn[data-val="18ct-white-gold"]::before{ background:#E4E5E6; }
.je-metal-btn[data-val="950-platinum"]::before{ background:#D9DBDD; }

/* 3. Hide the theme's FREE DELIVERY / duplicate-price block injected into the
      variation area (the real summary with Total stays at the bottom of the form). */
.woocommerce-variation.single_variation .tmb-25{ display:none !important; }

/* 4. Hide the empty "?" tooltip next to the Metal label (no description set). */
.entry-summary .question{ display:none; }

/* 5. Hide the admin-only blue "Form" quick-edit links WCPA shows to logged-in admins. */
.single-product a[href*="wcpa-admin-ui"]{ display:none !important; }

/* 6. Product header: bigger title, dynamic metal subheading, bigger "From" price.
      (The subheading text + the From-price trim are set by the JS snippet.) */
.single-product .entry-summary h1,
.single-product .summary h1{ font-size:34px !important; line-height:1.12; }
.je-subtitle{ font-family:Poppins, sans-serif; font-size:1.02rem; color:#5b655f; margin:.2rem 0 .6rem; font-weight:400; }
.je-price-big > div{ font-size:22px !important; }