/* ==========================================================================
   Athenian Product Add-ons — Compact “Pro” Dark UI (Token-aware)
   + Adds the “single-row micro-grid” styling for Width/Thickness/Layers
     (works when you wrap them in .ath-ap-row--w-t-l, OR you can add that
     wrapper via JS as we did in console)

   Safe-scoped: only touches .athenian-addons and its children
   ========================================================================== */

/* 0) Base scope + sensible resets */
.athenian-addons,
.athenian-addons * { box-sizing: border-box; }

.athenian-addons :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

.athenian-addons :where(label) { cursor: pointer; }

/* 1) Design tokens (defaults) */
.athenian-addons {
  /* Density + radius */
  --apadd-pad: 10px;
  --apadd-gap: 8px;
  --apadd-radius: 12px;
  --apadd-radius-sm: 10px;
  --apadd-radius-xs: 9px;

  /* Typography */
  --apadd-font: 12px;
  --apadd-label-font: 12px;
  --apadd-help-font: 11px;
  --apadd-title-font: 11px;

  /* Dark palette */
  --apadd-bg: rgba(15, 23, 42, 0.72);   /* outer */
  --apadd-bg2: rgba(2, 6, 23, 0.34);    /* group */
  --apadd-surface: rgba(2, 6, 23, 0.28);
  --apadd-border: rgba(148, 163, 184, 0.16);
  --apadd-border-soft: rgba(148, 163, 184, 0.12);

  --apadd-text: rgba(226, 232, 240, 0.92);
  --apadd-muted: rgba(226, 232, 240, 0.66);
  --apadd-help: rgba(226, 232, 240, 0.54);

  /* Accent (Columbia Coatings default) */
  --apadd-accent: #ec8639;
  --apadd-accent-2: rgba(236, 134, 57, 0.22);

  /* Shadows + blur */
  --apadd-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  --apadd-shadow-soft: 0 6px 14px rgba(0, 0, 0, 0.18);

  /* Focus ring */
  --apadd-ring: 0 0 0 1px rgba(236, 134, 57, 0.55), 0 0 0 4px rgba(236, 134, 57, 0.20);

  /* Inputs */
  --apadd-input-bg: rgba(2, 6, 23, 0.28);
  --apadd-input-border: rgba(148, 163, 184, 0.18);

  /* Chips */
  --apadd-chip-bg: rgba(2, 6, 23, 0.22);
  --apadd-chip-bg-hover: rgba(2, 6, 23, 0.36);
  --apadd-chip-border: rgba(148, 163, 184, 0.14);

  /* Motion */
  --apadd-ease: cubic-bezier(.2,.8,.2,1);
  --apadd-fast: 120ms;
  --apadd-med: 180ms;
}

/* 2) Token bridge (optional theme tokens) */
.athenian-addons {
  /* Surfaces */
  --apadd-bg: var(--ast-surface-2, var(--ath-surface-2, var(--apadd-bg)));
  --apadd-bg2: var(--ast-surface-1, var(--ath-surface-1, var(--apadd-bg2)));
  --apadd-border: var(--ast-border, var(--ath-border, var(--apadd-border)));
  --apadd-border-soft: var(--ast-border-soft, var(--ath-border-soft, var(--apadd-border-soft)));

  /* Text */
  --apadd-text: var(--ast-text, var(--ath-text, var(--apadd-text)));
  --apadd-muted: var(--ast-text-muted, var(--ath-text-muted, var(--apadd-muted)));
  --apadd-help: var(--ast-text-subtle, var(--ath-text-subtle, var(--apadd-help)));

  /* Accent */
  --apadd-accent: var(--ast-accent, var(--ath-accent, var(--apadd-accent)));
}

/* 3) Container + groups (cleaner, less “nested boxes”) */
.athenian-addons--product {
  margin: 12px 0;
  padding: calc(var(--apadd-pad) + 2px);
  border-radius: calc(var(--apadd-radius) + 2px);
  border: 1px solid var(--apadd-border);
  background: var(--apadd-bg);
  box-shadow: var(--apadd-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.athenian-addons__group {
  margin: 0 0 var(--apadd-gap);
  padding: var(--apadd-pad);
  border-radius: var(--apadd-radius);
  background: color-mix(in srgb, var(--apadd-bg2) 84%, transparent);
  border: 1px solid var(--apadd-border-soft);
  box-shadow: none;
}

.athenian-addons__group:last-child { margin-bottom: 0; }

.athenian-addons__group-title {
  font-size: var(--apadd-title-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  color: var(--apadd-muted);
}

/* 4) Fields + labels */
.athenian-addons__field { margin-top: 8px; }

.athenian-addons__label {
  display: block;
  font-size: var(--apadd-label-font);
  font-weight: 750;
  margin: 0 0 6px;
  color: var(--apadd-text);
}

.athenian-addons__required { color: #ef4444; font-weight: 900; }

/* 5) Inputs (tight, modern, consistent) */
.athenian-addons__input {
  width: 100%;
  max-width: 100%;
  border-radius: var(--apadd-radius-sm);
  border: 1px solid var(--apadd-input-border);
  padding: 7px 10px;
  font-size: var(--apadd-font);
  line-height: 1.2;
  color: var(--apadd-text);
  background-color: var(--apadd-input-bg);
  transition:
    border-color var(--apadd-fast) var(--apadd-ease),
    box-shadow var(--apadd-fast) var(--apadd-ease),
    background-color var(--apadd-fast) var(--apadd-ease),
    transform var(--apadd-fast) var(--apadd-ease);
}

.athenian-addons__input::placeholder { color: var(--apadd-muted); opacity: 0.92; }

.athenian-addons__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--apadd-accent) 55%, transparent);
  box-shadow: var(--apadd-ring);
  background-color: color-mix(in srgb, var(--apadd-input-bg) 72%, rgba(0,0,0,0.18));
}

.athenian-addons__input:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/* Multi-select height, still dense */
.athenian-addons__input--multi-select {
  min-height: 120px;
  padding: 8px 10px;
}

/* ---- Select chrome modernization (arrow + truncation) ---- */
.athenian-addons select.athenian-addons__input,
.athenian-addons select.athenian-addons__input--select{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px; /* room for arrow */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* 6) Choice chips (radio/checkbox “pills”) */
.athenian-addons__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.athenian-addons__choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--apadd-chip-border);
  background: var(--apadd-chip-bg);
  color: var(--apadd-text);
  cursor: pointer;
  transition:
    background-color var(--apadd-fast) var(--apadd-ease),
    border-color var(--apadd-fast) var(--apadd-ease),
    transform var(--apadd-fast) var(--apadd-ease),
    box-shadow var(--apadd-fast) var(--apadd-ease);
}

.athenian-addons__choice input { accent-color: var(--apadd-accent); }

.athenian-addons__choice:hover {
  background: var(--apadd-chip-bg-hover);
  border-color: color-mix(in srgb, var(--apadd-border) 75%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--apadd-shadow-soft);
}

/* Selected (supports modern browsers) */
.athenian-addons__choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--apadd-accent) 55%, transparent);
  box-shadow: 0 0 0 3px var(--apadd-accent-2);
  background: color-mix(in srgb, var(--apadd-chip-bg) 70%, var(--apadd-accent-2));
}

/* Keyboard focus inside chip */
.athenian-addons__choice:has(input:focus-visible) {
  box-shadow: var(--apadd-ring);
  border-color: color-mix(in srgb, var(--apadd-accent) 60%, transparent);
}

/* 7) Image choices (compact thumb + label) */
.athenian-addons__choices--image .athenian-addons__choice,
.athenian-addons__choices--image-swatch .athenian-addons__choice {
  border-radius: var(--apadd-radius-sm);
  padding: 7px 9px;
}

.athenian-addons__choice-thumb {
  width: 28px;
  height: 28px;
  border-radius: var(--apadd-radius-xs);
  overflow: hidden;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--apadd-border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.athenian-addons__choice-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   MICRO-GRID SINGLE ROW (Width + Thickness + Layers)
   - Works when those fields are wrapped in .ath-ap-row--w-t-l
   - You can add wrapper in markup or via JS (console test)
   ========================================================================== */

.athenian-addons__group{
  /* local row tokens */
  --apadd-wtl-gap: 8px;
  --apadd-wtl-label: 11px;
  --apadd-wtl-ctl-h: 30px;
  --apadd-wtl-ctl-r: 9px;
  --apadd-wtl-ctl-px: 8px;
  --apadd-wtl-ctl-fs: 12.5px;
}

/* wrapper row */
.athenian-addons .ath-ap-row--w-t-l{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--apadd-wtl-gap);
  align-items: end;
  margin: 0 0 10px 0;
}

/* make the 3 fields inside the row behave like tight controls */
.athenian-addons .ath-ap-row--w-t-l .athenian-addons__field{
  margin: 0 !important;
  padding: 0 !important;
}

/* micro label inside row */
.athenian-addons .ath-ap-row--w-t-l .athenian-addons__label{
  margin: 0 0 6px 0 !important;
  font-size: var(--apadd-wtl-label) !important;
  line-height: 1.05 !important;
  letter-spacing: .2px !important;
  color: var(--apadd-muted) !important;
  font-weight: 750 !important;
}

/* unified height + padding for inputs in the row */
.athenian-addons .ath-ap-row--w-t-l .athenian-addons__input{
  height: var(--apadd-wtl-ctl-h) !important;
  min-height: var(--apadd-wtl-ctl-h) !important;
  padding: 0 var(--apadd-wtl-ctl-px) !important;
  border-radius: var(--apadd-wtl-ctl-r) !important;
  font-size: var(--apadd-wtl-ctl-fs) !important;
  line-height: 1 !important;
}

/* keep modern arrow + ensure it doesn't get cramped */
.athenian-addons .ath-ap-row--w-t-l select.athenian-addons__input{
  padding-right: calc(var(--apadd-wtl-ctl-px) + 18px) !important;
}

/* optional: hide help text to keep the row clean (Thickness help) */
.athenian-addons .ath-ap-row--w-t-l .athenian-addons__help{
  display: none !important;
}

/* small screens: 2 columns + layers full width */
@media (max-width: 720px){
  .athenian-addons .ath-ap-row--w-t-l{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .athenian-addons .ath-ap-row--w-t-l
  .athenian-addons__field[data-field-name="layers"]{
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   MULTI-SELECT WITH PER-OPTION UPLOAD
   - each option becomes a compact “row card” with an upload reveal
   ========================================================================== */

.athenian-addons__choices--multi-upload {
  display: grid;
  gap: 8px;
}

.athenian-addons__choice--multi-upload {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: var(--apadd-radius);
  border: 1px solid var(--apadd-chip-border);
  background: color-mix(in srgb, var(--apadd-chip-bg) 86%, transparent);
  transition:
    background-color var(--apadd-fast) var(--apadd-ease),
    border-color var(--apadd-fast) var(--apadd-ease),
    box-shadow var(--apadd-fast) var(--apadd-ease),
    transform var(--apadd-fast) var(--apadd-ease);
}

.athenian-addons__choice--multi-upload:hover {
  border-color: color-mix(in srgb, var(--apadd-border) 78%, transparent);
  background: var(--apadd-chip-bg-hover);
  box-shadow: var(--apadd-shadow-soft);
  transform: translateY(-1px);
}

.athenian-addons__choice--multi-upload .athenian-addons__choice-main {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.athenian-addons__choice--multi-upload input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--apadd-accent);
}

.athenian-addons__choice--multi-upload .athenian-addons__choice-label {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.athenian-addons__choice-price {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--apadd-border-soft);
  color: var(--apadd-muted);
  background: rgba(0,0,0,0.12);
}

.athenian-addons__choice-upload {
  padding-left: 26px; /* aligns under label text */
  display: grid;
  gap: 6px;
}
/* ==========================================================================
   MULTI-UPLOAD — OPEN STATE STACK + BIGGER HEADER (label + price)
   Target: Image Placement / multi_select with per-option upload
   ========================================================================== */

/* knobs (easy tune) */
.athenian-addons{
  --apadd-mu-head-fs: 15px;       /* label font size */
  --apadd-mu-price-fs: 13px;      /* price font size */
  --apadd-mu-head-pad: 10px;      /* header padding */
  --apadd-mu-head-gap: 10px;      /* space between label and price */
}

/* --- OPEN/CHECKED: force a true 2-row layout (header above upload UI) --- */
.athenian-addons__choice--multi-upload:has(> label.athenian-addons__choice-main > input:checked){
  display: block !important; /* overrides your grid layout so it stacks */
  padding: 0 !important;     /* header + body get their own padding */
}

/* header bar (title + price) */
.athenian-addons__choice--multi-upload:has(> label.athenian-addons__choice-main > input:checked)
  > label.athenian-addons__choice-main{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--apadd-mu-head-gap) !important;

  padding: var(--apadd-mu-head-pad) !important;
  margin: 0 !important;

  border-bottom: 1px solid var(--apadd-border-soft) !important;
}

/* hide checkbox box in OPEN state (keeps accessibility, removes left column feel) */
.athenian-addons__choice--multi-upload:has(> label.athenian-addons__choice-main > input:checked)
  > label.athenian-addons__choice-main > input[type="checkbox"]{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* label+price becomes full-width row that can space-between */
.athenian-addons__choice--multi-upload:has(> label.athenian-addons__choice-main > input:checked)
  .athenian-addons__choice-label{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 12px !important;

  font-size: var(--apadd-mu-head-fs) !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
  line-height: 1.1 !important;
}

/* BIG price pill */
.athenian-addons__choice--multi-upload:has(> label.athenian-addons__choice-main > input:checked)
  .athenian-addons__choice-price{
  flex: 0 0 auto !important;

  font-size: var(--apadd-mu-price-fs) !important;
  font-weight: 900 !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;

  color: rgba(226,232,240,.96) !important;
  border: 1px solid color-mix(in srgb, var(--apadd-accent) 45%, var(--apadd-border-soft)) !important;
  background: color-mix(in srgb, rgba(0,0,0,.22) 70%, var(--apadd-accent-2)) !important;

  white-space: nowrap !important;
}

/* upload UI below header (full width) */
.athenian-addons__choice--multi-upload:has(> label.athenian-addons__choice-main > input:checked)
  > .athenian-addons__choice-upload{
  display: block !important;
  width: 100% !important;
  padding: 10px !important;
}

/* keep your "buttons row + filename below" behavior, but let it breathe */
.athenian-addons__choice--multi-upload:has(> label.athenian-addons__choice-main > input:checked)
  .apadd-file-ui__top{
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
}

.athenian-addons__choice--multi-upload:has(> label.athenian-addons__choice-main > input:checked)
  .apadd-file-ui__name{
  flex: 1 1 100% !important;
  order: 99 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  color: var(--apadd-muted) !important;
}

/* ==========================================================================
   Enhanced file UI (JS wrapper)
   ========================================================================== */

.apadd-file-ui {
  display: grid;
  gap: 6px;
}

/* Always hide the native input: prevents double “Choose file” */
.apadd-file-ui__native {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep a belt-and-suspenders fallback (some themes force file input display) */
.apadd-file-ui input[type="file"].apadd-file-ui__native { display: none !important; }

.apadd-file-ui__top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.apadd-file-ui__btn,
.apadd-file-ui__clear {
  appearance: none;
  border: 1px solid var(--apadd-border-soft);
  background: color-mix(in srgb, var(--apadd-surface) 70%, rgba(0,0,0,0.08));
  color: var(--apadd-text);
  padding: 7px 10px;
  border-radius: var(--apadd-radius-sm);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition:
    border-color var(--apadd-fast) var(--apadd-ease),
    box-shadow var(--apadd-fast) var(--apadd-ease),
    background-color var(--apadd-fast) var(--apadd-ease),
    transform var(--apadd-fast) var(--apadd-ease);
}

.apadd-file-ui__btn:hover {
  border-color: color-mix(in srgb, var(--apadd-accent) 45%, var(--apadd-border-soft));
  box-shadow: 0 0 0 3px var(--apadd-accent-2);
  transform: translateY(-1px);
}

.apadd-file-ui__btn:focus-visible,
.apadd-file-ui__clear:focus-visible {
  outline: none;
  box-shadow: var(--apadd-ring);
  border-color: color-mix(in srgb, var(--apadd-accent) 60%, transparent);
}

.apadd-file-ui__name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--apadd-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Clear: a little “danger” affordance but still subtle */
.apadd-file-ui__clear {
  color: var(--apadd-muted);
  font-weight: 700;
}

.apadd-file-ui__clear:hover {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.apadd-file-ui__preview {
  display: none;
  width: 100%;
  max-width: 240px;
  border-radius: var(--apadd-radius);
  overflow: hidden;
  border: 1px solid var(--apadd-border-soft);
  background: rgba(0,0,0,0.14);
}

.apadd-file-ui__preview.is-visible { display: block; }

.apadd-file-ui__preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hint text under upload */
.athenian-addons__file-hint {
  font-size: var(--apadd-help-font);
  color: var(--apadd-help);
  opacity: 0.9;
}

/* 8) Help text */
.athenian-addons__help {
  margin: 4px 0 0;
  font-size: var(--apadd-help-font);
  color: var(--apadd-help);
}

/* Meta lines */
.athenian-addons__file-meta,
.athenian-addons__url-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--apadd-help);
}

.athenian-addons__file-link {
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

.athenian-addons__file-link:hover { border-bottom-style: solid; }

/* ==========================================================================
   SWATCHES — Ultra compact 4-col tiles (dot on top, label under)
   Safe-scoped: ONLY affects .athenian-addons__field--swatch
   ========================================================================== */

.athenian-addons__field--swatch {
  --sw-size: 14px;
  --sw-gap: 6px;
  --sw-radius: 12px;

  --sw-bg: var(--apadd-chip-bg);
  --sw-bg-hover: var(--apadd-chip-bg-hover);
  --sw-border: var(--apadd-chip-border);
  --sw-text: var(--apadd-text);
  --sw-ring: var(--apadd-ring);
  --sw-accent-2: var(--apadd-accent-2);
}

.athenian-addons__field--swatch .athenian-addons__choices--swatch {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--sw-gap) !important;
  margin-top: 6px;
}

.athenian-addons__field--swatch .athenian-addons__choice--swatch {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  user-select: none;
}

.athenian-addons__field--swatch .athenian-addons__choice--swatch > input[type="radio"],
.athenian-addons__field--swatch .athenian-addons__choice--swatch > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.athenian-addons__field--swatch .athenian-addons__choice-inner {
  display: grid;
  justify-items: center;
  padding: 3px 3px;
  border-radius: var(--sw-radius);
  border: 1px solid var(--sw-border);
  background: var(--sw-bg);
  transition:
    transform var(--apadd-fast) var(--apadd-ease),
    background var(--apadd-fast) var(--apadd-ease),
    border-color var(--apadd-fast) var(--apadd-ease),
    box-shadow var(--apadd-fast) var(--apadd-ease);
  min-height: 0;
}

.athenian-addons__field--swatch .athenian-addons__choice--swatch:hover .athenian-addons__choice-inner {
  background: var(--sw-bg-hover);
  border-color: color-mix(in srgb, var(--apadd-border) 78%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--apadd-shadow-soft);
}

.athenian-addons__field--swatch .athenian-addons__swatch {
  width: var(--sw-size);
  height: var(--sw-size);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.32);
}

.athenian-addons__field--swatch .athenian-addons__swatch[style*="#FFF"],
.athenian-addons__field--swatch .athenian-addons__swatch[style*="#fff"] {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    inset 0 0 0 2px rgba(0,0,0,0.25);
}

.athenian-addons__field--swatch .athenian-addons__choice-label-text {
  display: block;
  text-align: center;
  font-size: 8px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--sw-text);
  margin: 0;
  max-width: 100%;
  word-break: break-word;
  hyphens: auto;
}

.athenian-addons__field--swatch
  .athenian-addons__choice--swatch > input[type="radio"]:checked
  + .athenian-addons__choice-inner,
.athenian-addons__field--swatch
  .athenian-addons__choice--swatch > input[type="checkbox"]:checked
  + .athenian-addons__choice-inner {
  border-color: color-mix(in srgb, var(--apadd-accent) 60%, transparent);
  box-shadow: 0 0 0 3px var(--sw-accent-2);
  background: color-mix(in srgb, var(--sw-bg) 70%, var(--sw-accent-2));
}

.athenian-addons__field--swatch
  .athenian-addons__choice--swatch > input[type="radio"]:focus-visible
  + .athenian-addons__choice-inner,
.athenian-addons__field--swatch
  .athenian-addons__choice--swatch > input[type="checkbox"]:focus-visible
  + .athenian-addons__choice-inner {
  box-shadow: var(--sw-ring);
}

/* Ensure no legacy pseudo-checkmark */
.athenian-addons__field--swatch
  .athenian-addons__choice--swatch > input[type="radio"]:checked
  + .athenian-addons__choice-inner::after,
.athenian-addons__field--swatch
  .athenian-addons__choice--swatch > input[type="checkbox"]:checked
  + .athenian-addons__choice-inner::after {
  content: none !important;
}

/* APF safety reiteration */
[data-apf="common"] .athenian-addons__field--swatch .athenian-addons__choices--swatch,
.apf-pricing .athenian-addons__field--swatch .athenian-addons__choices--swatch {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* 9) Responsive tweaks (keep compact) */
@media (max-width: 640px) {
  .athenian-addons--product { margin: 10px 0; padding: 10px; }
  .athenian-addons__group { padding: 10px; }
  .athenian-addons__choices { gap: 6px; }
  .athenian-addons__field--swatch .athenian-addons__choices--swatch { gap: 6px !important; }
}
/* ==========================================================================
   FILAMENT COLORS — 6 COLUMN GRID (LOCKED-IN)
   - Desktop: 6 columns
   - Tablet: 4 columns
   - Mobile: 3 → 2 columns
   - Safely overrides legacy 4-col safety rules
   ========================================================================== */

/* Base (desktop / wide screens) */
.athenian-addons__field--swatch
.athenian-addons__choices.athenian-addons__choices--swatch{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

/* Tablet / medium screens */
@media (max-width: 1024px){
  .athenian-addons__field--swatch
  .athenian-addons__choices.athenian-addons__choices--swatch{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Small tablets / large phones */
@media (max-width: 720px){
  .athenian-addons__field--swatch
  .athenian-addons__choices.athenian-addons__choices--swatch{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Phones */
@media (max-width: 480px){
  .athenian-addons__field--swatch
  .athenian-addons__choices.athenian-addons__choices--swatch{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* JS-injected header above upload buttons */
.athenian-addons .apadd-upload-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding: 10px 10px 8px;
  margin: 0 0 8px;

  border-bottom: 1px solid var(--apadd-border-soft);
}

.athenian-addons .apadd-upload-head__title{
  font-size: 15px;      /* bigger label */
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--apadd-text);
}

.athenian-addons .apadd-upload-head__price{
  font-size: 13px;      /* bigger price */
  font-weight: 950;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;

  color: rgba(226,232,240,.96);
  border: 1px solid color-mix(in srgb, var(--apadd-accent) 45%, var(--apadd-border-soft));
  background: color-mix(in srgb, rgba(0,0,0,.22) 70%, var(--apadd-accent-2));
}