/* ==========================================================================
   1. COLLAPSIBLE SPECIFICATIONS ACCORDION (DETAILS ELEMENT)
   ========================================================================== */

/* Remove default native browser arrow blocks */
details summary::-webkit-details-marker {
  display: none;
}
details summary {
  list-style: none;
}

/* Muted, text-only button layout anchored on the LHS */
details summary {
  background: transparent !important;
  border: 1px solid #cccccc !important; 
  padding: 6px 16px !important;
  cursor: pointer !important;
  margin-top: 12px !important;
  user-select: none !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  border-radius: 4px !important;
  font-size: 0 !important; /* Hides the hardcoded HTML text cleanly */
  float: none !important; /* Forces it to stay on the Left-Hand Side (LHS) */
}

/* Hover feedback action */
details summary:hover {
  border-color: #000000 !important;
  background: #f9f9f9 !important;
}

/* Inject dynamic text using CSS pseudo-elements */
details summary::before {
  content: "Show More Customization Specs" !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #666666 !important;
}

details summary:hover::before {
  color: #000000 !important;
}

/* OPENED STATE: Stays on LHS, drops scale, and switches vocabulary automatically */
details[open] summary {
  float: none !important; 
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  border-color: #e5e5e5 !important;
}

/* Changes text directly to Show Less when the grid expands */
details[open] summary::before {
  content: "Show Less Specs" !important;
  font-size: 12px !important; 
  color: #999999 !important;
}