/* =========================================
   PURE CSS LOGIC (No Javascript needed!)
   ========================================= */
/* ----------------------------------

HOW TO ADD NEW ENTRIES
HTML_1: add new line at the top: <input type="radio" name="acc_tab" id="acc-3" class="sx-hidden-radio">
HTML_2: Add a tr with class sx-row-3 for the table and a div with class sx-panel-3 for the specs
CSS: add two more lines in the sx-category-family.css:
.sx-accessory-family:has(#acc-3:checked) .sx-panel-3 { display: block; animation: fadeIn 0.3s ease; }
.sx-accessory-family:has(#acc-3:checked) .sx-row-3 { background: rgba(45, 132, 205, 0.08); border-left-color: #2d84cd; }

---------------------------------- */

.sx-hidden-radio { display: none; }
.sx-panel { display: none; }

/* The Magic: When a radio is checked, show the matching panel */
/* Base for up to 15 items */
.sx-accessory-family:has(#acc-1:checked) .sx-panel-1,
.sx-accessory-family:has(#acc-2:checked) .sx-panel-2,
.sx-accessory-family:has(#acc-3:checked) .sx-panel-3,
.sx-accessory-family:has(#acc-4:checked) .sx-panel-4,
.sx-accessory-family:has(#acc-5:checked) .sx-panel-5,
.sx-accessory-family:has(#acc-6:checked) .sx-panel-6,
.sx-accessory-family:has(#acc-7:checked) .sx-panel-7,
.sx-accessory-family:has(#acc-8:checked) .sx-panel-8,
.sx-accessory-family:has(#acc-9:checked) .sx-panel-9,
.sx-accessory-family:has(#acc-10:checked) .sx-panel-10,
.sx-accessory-family:has(#acc-11:checked) .sx-panel-11,
.sx-accessory-family:has(#acc-12:checked) .sx-panel-12,
.sx-accessory-family:has(#acc-13:checked) .sx-panel-13,
.sx-accessory-family:has(#acc-14:checked) .sx-panel-14,
.sx-accessory-family:has(#acc-15:checked) .sx-panel-15 {
  display: block;
  animation: fadeIn 0.3s ease;
}

/* The Magic: Highlight the row when selected */
/* Highlight for up to 15 items */
.sx-accessory-family:has(#acc-1:checked) .sx-row-1,
.sx-accessory-family:has(#acc-2:checked) .sx-row-2,
.sx-accessory-family:has(#acc-3:checked) .sx-row-3,
.sx-accessory-family:has(#acc-4:checked) .sx-row-4,
.sx-accessory-family:has(#acc-5:checked) .sx-row-5,
.sx-accessory-family:has(#acc-6:checked) .sx-row-6,
.sx-accessory-family:has(#acc-7:checked) .sx-row-7,
.sx-accessory-family:has(#acc-8:checked) .sx-row-8,
.sx-accessory-family:has(#acc-9:checked) .sx-row-9,
.sx-accessory-family:has(#acc-10:checked) .sx-row-10,
.sx-accessory-family:has(#acc-11:checked) .sx-row-11,
.sx-accessory-family:has(#acc-12:checked) .sx-row-12,
.sx-accessory-family:has(#acc-13:checked) .sx-row-13,
.sx-accessory-family:has(#acc-14:checked) .sx-row-14,
.sx-accessory-family:has(#acc-15:checked) .sx-row-15 {
  background: rgba(45, 132, 205, 0.08);
}
.sx-accessory-family:has(#acc-1:checked) .sx-row-1 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-2:checked) .sx-row-2 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-3:checked) .sx-row-3 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-4:checked) .sx-row-4 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-5:checked) .sx-row-5 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-6:checked) .sx-row-6 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-7:checked) .sx-row-7 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-8:checked) .sx-row-8 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-9:checked) .sx-row-9 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-10:checked) .sx-row-10 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-11:checked) .sx-row-11 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-12:checked) .sx-row-12 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-13:checked) .sx-row-13 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-14:checked) .sx-row-14 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-15:checked) .sx-row-15 { border-left-color: #2d84cd; }
.sx-accessory-family:has(#acc-1:checked) .sx-row-1 label { font-weight: 600; }
.sx-accessory-family:has(#acc-2:checked) .sx-row-2 label { font-weight: 600; }
.sx-accessory-family:has(#acc-3:checked) .sx-row-3 label { font-weight: 600; }
.sx-accessory-family:has(#acc-4:checked) .sx-row-4 label { font-weight: 600; }
.sx-accessory-family:has(#acc-5:checked) .sx-row-5 label { font-weight: 600; }
.sx-accessory-family:has(#acc-6:checked) .sx-row-6 label { font-weight: 600; }
.sx-accessory-family:has(#acc-7:checked) .sx-row-7 label { font-weight: 600; }
.sx-accessory-family:has(#acc-8:checked) .sx-row-8 label { font-weight: 600; }
.sx-accessory-family:has(#acc-9:checked) .sx-row-9 label { font-weight: 600; }
.sx-accessory-family:has(#acc-10:checked) .sx-row-10 label { font-weight: 600; }
.sx-accessory-family:has(#acc-11:checked) .sx-row-11 label { font-weight: 600; }
.sx-accessory-family:has(#acc-12:checked) .sx-row-12 label { font-weight: 600; }
.sx-accessory-family:has(#acc-13:checked) .sx-row-13 label { font-weight: 600; }
.sx-accessory-family:has(#acc-14:checked) .sx-row-14 label { font-weight: 600; }
.sx-accessory-family:has(#acc-15:checked) .sx-row-15 label { font-weight: 600; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   STYLING & LAYOUT
   ========================================= */
.sx-accessory-family {
  --brand: #2d84cd;
  --brand-gray: #6c757d;
  --bg-soft: #f4f8fb;
  --text: #212529;
  --text-muted: #666666;
  --border: 1px solid rgba(0,0,0,0.06);
  max-width: 1200px;
  margin: 48px auto;
  font-family: system-ui, sans-serif;
  color: var(--text);
}

.sx-family-main {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  align-items: start;
}

/* Left Side: Real HTML Table */
.sx-real-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.sx-real-table th {
  text-align: left;
  padding: 14px 16px;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--brand-gray);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.sx-real-table tr {
  border-left: 4px solid transparent;
  transition: background 0.2s ease;
}

.sx-real-table tr:hover {
  background: rgba(45, 132, 205, 0.05);
}

/* Remove cell padding so labels stretch completely */
.sx-real-table td {
  padding: 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Make labels act as big clickable blocks */
.sx-real-table label {
  display: block;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.95rem;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.sx-real-table td:first-child label {
  color: var(--brand);
  font-weight: 600;
}

/* Right Side: Specs Panel */
.sx-family-selected {
  background: #ffffff;
  border-radius: 12px;
  padding: 44px;
  border: var(--border);
  position: relative;
  min-height: 280px;
}

.sx-family-selected::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--brand);
  border-radius: 12px 12px 0 0;
}

/* --- Final visual treatment: direct image with tiny shadow + small radius ---
   Remove the bluish placeholder band and let the image be the visual focal point.
   Keep the visual centered and constrained for consistent layout. */
.sx-product-visual {
  max-width: 480px;          /* control how wide the visual area can grow */
  margin: 0 auto 20px;       /* centered within the specs panel */
  padding: 0;                /* no extra padding */
  height: auto;              /* remove fixed height */
  background: transparent;   /* no pale background band */
  border-radius: 0;          /* image itself will have the radius */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-sizing: border-box;
}

/* Force a clean 4:3 image while preserving the full photo.
   Tiny shadow and small rounded corners as requested. */
.sx-selected-image {
  width: 100%;
  max-width: 420px;     /* keeps image comfortably inside the visual area */
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: contain;  /* preserves full photo; use 'cover' to crop if desired */
  display: block;
  border-radius: 6px;   /* small rounding */
  box-shadow: 0 6px 12px rgba(0,0,0,0.06); /* tiny shadow */
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Subtle hover lift on image (optional but pleasant) */
.sx-selected-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* Title and specs */
.sx-selected-model { margin: 0 0 18px 0; font-size: 1.65rem; border-bottom: var(--border); padding-bottom: 14px; }
.sx-spec-category { font-size: 1.25rem; font-weight: 700; color: var(--brand); margin-bottom: 20px;}

.spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 0.95rem;
  align-items: baseline;
}

.spec-label { color: var(--text-muted); font-weight: 500; }
.spec-value { font-weight: 650; }
.sx-btn { display: inline-flex; padding: 10px 22px; border-radius: 8px; font-weight: 650; background: var(--brand); color: #fff; text-decoration: none; margin-top: 10px; transition: transform 0.2s; }
.sx-btn:hover { transform: translateY(-1px); background: #236a9f;}

@media (max-width: 980px) {
  .sx-family-main { grid-template-columns: 1fr; }

  /* On small screens allow the image to be full width but keep aspect */
  .sx-product-visual {
    max-width: 100%;
    margin: 0 0 18px 0;
    padding: 0;
  }

  .sx-selected-image {
    max-width: 360px;
  }
}