/* Ensure the dropdown layers correctly when open */
.field:has(.action-menu._active) { isolation: auto !important; }

/* 1) Kill the legacy triangle arrow */
.admin__action-multiselect-wrap .admin__action-multiselect::after,
.action-select-wrap .action-select::after {
  content: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* 2) Lock trigger height; keep size stable */
.admin__action-multiselect-wrap .admin__action-multiselect,
.action-select-wrap .action-select {
  min-height: calc(3.2rem + 2px) !important;
  height: calc(3.2rem + 2px) !important;
  padding-right: 3.2rem !important; /* space for right box */
  position: relative;
  box-sizing: border-box;
}

/* 3) Rewrite the right-side box and chevron in ::before */
/* Base state */
.action-select-wrap .action-select::before,
.admin__action-multiselect-wrap .admin__action-multiselect::before {
  content: "" !important;
  position: absolute !important;
  right: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3.2rem !important; height: 100% !important;
  /* remove legacy border box */
  border: none !important;
  background-color: #fff !important;
  border-left: 1px solid #d9dcf0 !important;
  box-sizing: border-box !important;

  /* modern chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%232d337f' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/%3E%3C/svg%3E") !important; /* down */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}

/* Active state */
.action-select-wrap._active .action-select::before,
.admin__action-multiselect-wrap._active .admin__action-multiselect::before {
  border-left-color: #b89b65 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23b89b65' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z'/%3E%3C/svg%3E") !important; /* up */
}

/* 4) Make CLEAR more prominent and separate from tabs */
.cg-cat-tree .cg-cat-toolbar { display:flex; justify-content:flex-end; padding:8px 12px; background:linear-gradient(180deg,#fff 60%,rgba(255,255,255,0)); border-bottom:1px solid #d9dcf0; }
.cg-cat-tree .cg-cat-toolbar .action-secondary {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:1px solid #2d337f; background:#fff; color:#2d337f; font-weight:700;
}
.cg-cat-tree .cg-cat-toolbar .action-secondary:hover { background:#2d337f; color:#fff; }

/* 5) Search icon cleanup */
.cg-cat-tree .admin__action-multiselect-search-label::before {
  content: ""; display:inline-block; width:14px; height:14px; margin-right:6px; background:#2d337f;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.49 21.49 20zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.49 21.49 20zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Keep the search input tidy */
.cg-cat-tree .admin__action-multiselect-search { height:36px; border:1px solid #d9dcf0; border-radius:10px; padding-left:36px; }
.cg-cat-tree .admin__action-multiselect-search:focus { border-color:#b89b65; box-shadow:0 0 0 3px rgba(184,155,101,.28); }
/* =====================
   Search field + icon
   ===================== */
.cg-cat-tree .admin__action-multiselect-search-wrap {
  position: sticky; top: 0; z-index: 2;
  background: var(--cg-surface);
  border-bottom: 1px solid var(--cg-border);
  padding: 8px 12px;
}
.cg-cat-tree .admin__action-multiselect-search {
  height: 36px;
  padding-left: 36px;                 /* room for icon */
  border: 1px solid var(--cg-border);
  border-radius: 10px;
  transition: border-color .22s cubic-bezier(.16,.8,.36,1), box-shadow .22s cubic-bezier(.16,.8,.36,1);
}
.cg-cat-tree .admin__action-multiselect-search:focus {
  border-color: var(--cg-accent);
  box-shadow: 0 0 0 3px rgba(184,155,101,.28);
}
.cg-cat-tree .admin__action-multiselect-search-label {
  position: absolute;
  left: 24px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #68708b;
}

/* ---- Tabs: spacing + wrapping (no ellipsis) ---- */
.cg-tabsbar {
  padding: 16px 16px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* wider tiles */
  gap: 12px 12px; /* row/col gap */
}

.cg-tab {
  /* remove the cramped single-line pill */
  height: auto !important;
  min-height: 42px;
  padding: 10px 14px 11px;
  white-space: normal !important;     /* allow wrapping */
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25;
  word-break: break-word;              /* break long words if needed */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;                  /* center multiline text */
  font-size: 15px;                     /* slightly larger for legibility */
}

/* Active tab stays bold/clear */
.cg-tab._active {
  filter: none;
}

/* ---- Panel breathing room ---- */
.cg-tabcontent {
  padding: 16px 16px 20px;
  max-height: 58vh;
  overflow: auto;
}

/* ---- Subcategory list: spacing + clarity ---- */
.admin__action-multiselect-menu-inner {
  padding: 10px 16px 18px;
}

.admin__action-multiselect-menu-inner-item {
  margin: 8px 0;                       /* more vertical rhythm */
}

.admin__action-multiselect-menu-inner-item .action-menu-item {
  padding: 12px 14px;                  /* more air in rows */
  background: #f7f8ff;                 /* softer */
  border-radius: 12px;
}

.admin__action-multiselect-menu-inner-item .action-menu-item:hover {
  background: #eef1f9;
}

/* Selected: stronger but not heavy */
.admin__action-multiselect-menu-inner-item .action-menu-item._selected {
  background: color-mix(in oklab, #b89b65 12%, #fff);
  border-color: color-mix(in oklab, #b89b65 45%, #fff);
  box-shadow: inset 3px 0 0 #b89b65;
}

/* Label readability */
.admin__action-multiselect-label > span {
  font-weight: 700;
  color: #2d337f;
  font-size: 15px;
}

/* Nested indentation guide (lighter, subtler) */
.admin__action-multiselect-menu-inner .admin__action-multiselect-menu-inner {
  margin-left: 20px;
}
.admin__action-multiselect-menu-inner .admin__action-multiselect-menu-inner::before {
  left: 8px;
  opacity: .6;
}

/* ---- Responsive tweaks ---- */
@media (max-width: 900px) {
  .cg-tabsbar { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 640px) {
  .cg-tabsbar { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .cg-tab { min-height: 40px; padding: 9px 12px; font-size: 14px; }
  .cg-tabcontent { max-height: 54vh; }
}
/* CaptainGreek — Subcategory list premium */

.cg-tabcontent .admin__action-multiselect-menu-inner {
  --cg-blue: #2d337f;
  --cg-accent: #b89b65;
  --cg-border: #d9dcf0;
  --ease: cubic-bezier(.16,.8,.36,1);

  --row-bg: #f7f8ff;
  --row-bg-hover: #eef1f9;
  --row-bg-selected: color-mix(in oklab, var(--cg-accent) 12%, #fff);
  --row-border-selected: color-mix(in oklab, var(--cg-accent) 45%, #fff);

  padding: 12px 16px 18px;
  scroll-padding-top: 12px; /* when scrolled into view */
}

/* Each item container */
.admin__action-multiselect-menu-inner-item {
  margin: 10px 0;                     /* breathing room between rows */
  border-radius: 12px;
}

/* Clickable row */
.admin__action-multiselect-menu-inner-item .action-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 12px 16px;
  background: var(--row-bg);
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease), transform .18s var(--ease);
}

/* Hover (soft lift) */
.admin__action-multiselect-menu-inner-item .action-menu-item:hover {
  background: var(--row-bg-hover);
  box-shadow: 0 2px 10px rgba(45,51,127,.06);
}

/* Selected emphasis (gold accent + subtle inset bar) */
.admin__action-multiselect-menu-inner-item .action-menu-item._selected {
  background: var(--row-bg-selected);
  border-color: var(--row-border-selected);
  box-shadow: inset 3px 0 0 var(--cg-accent), 0 2px 12px rgba(45,51,127,.06);
}

/* Keyboard focus */
.admin__action-multiselect-menu-inner-item .action-menu-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,155,101,.28);
}

/* Checkbox (bigger, brand accent) */
.admin__control-checkbox {
  width: 18px; height: 18px;
  accent-color: var(--cg-accent);
  flex: 0 0 auto;
}

/* Label block */
.admin__action-multiselect-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin__action-multiselect-label > span {
  font-weight: 700;
  color: var(--cg-blue);
  letter-spacing: .2px;
  font-size: 15px;
}
.admin__action-multiselect-label .cg-path {
  font-size: 12px;
  color: #4b4f5a;
  opacity: .65;
}

/* Subtle “action hint” glyph at row end (plus on hover, check when selected) */
.admin__action-multiselect-menu-inner-item .action-menu-item::after {
  content: "";
  margin-left: auto;
  width: 18px; height: 18px;
  opacity: 0;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  background: var(--cg-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 11V6h2v5h5v2h-5v5h-2v-5H6v-2z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 11V6h2v5h5v2h-5v5h-2v-5H6v-2z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.admin__action-multiselect-menu-inner-item .action-menu-item:hover::after { opacity: .35; }
.admin__action-multiselect-menu-inner-item .action-menu-item._selected::after {
  opacity: 1;
  background: var(--cg-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Nesting guide (tidy vertical rail) */
.admin__action-multiselect-menu-inner .admin__action-multiselect-menu-inner {
  margin-left: 22px;
  padding-left: 8px;
  position: relative;
}
.admin__action-multiselect-menu-inner .admin__action-multiselect-menu-inner::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, #e5e8f5 0, #d9dcf0 100%);
  opacity: .9;
}

/* Optional zebra to help scanning long lists */
.admin__action-multiselect-menu-inner > .admin__action-multiselect-menu-inner-item:nth-child(odd) .action-menu-item:not(._selected) {
  background: #fbfcff;
}

/* Compact footer alignment (if present) */
.cg-tabcontent .admin__action-multiselect-actions-wrap {
  border-top: 1px solid var(--cg-border);
  padding: 12px 16px;
}
/* Remove legacy dashed connectors on each LI */
.admin__action-multiselect-tree .admin__action-multiselect-menu-inner-item::before,
.admin__action-multiselect-tree .admin__action-multiselect-menu-inner-item::after {
  content: none !important;
  border: 0 !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}
/* CaptainGreek — apply cg-chip styling to selected category chips */
.cg-cat-tree .admin__action-multiselect-crumb {
  /* chip core */
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .9rem .3rem .9rem;              /* room around text */
  margin: .3rem .3rem .3rem 0;                     /* tidy wrap flow */
  font: 600 1.25rem/1 var(--cg-font, "Inter", sans-serif);
  color: var(--cg-blue, #2d337f);
  background: color-mix(in srgb, var(--cg-blue, #2d337f) 6%, #fff 94%);
  border: 1px solid rgba(45, 51, 127, .15);
  border-radius: 9999px;
  user-select: none;
  position: relative;
  transition: background .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.16,.8,.36,1), border-color .18s ease;
}

.cg-cat-tree .admin__action-multiselect-crumb:hover {
  background: color-mix(in srgb, var(--cg-blue, #2d337f) 10%, #fff 90%);
  border-color: rgba(45, 51, 127, .25);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(45,51,127,.08);
}

.cg-cat-tree .admin__action-multiselect-crumb:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,155,101,.28);
}

/* chip label */
.cg-cat-tree .admin__action-multiselect-crumb > span {
  font-weight: 600;
  color: var(--cg-blue, #2d337f);
}

/* close button inside chip */
.cg-cat-tree .admin__action-multiselect-crumb .action-close {
  margin-left: .25rem;
  width: 20px; height: 20px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  transition: background .18s ease;
}
.cg-cat-tree .admin__action-multiselect-crumb .action-close:hover {
  background: rgba(184,155,101,.12);
}

/* draw a crisp “×” icon via mask (keeps fonts out of it) */
.cg-cat-tree .admin__action-multiselect-crumb .action-close::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px; height: 12px;
  background: var(--cg-blue, #2d337f);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* hide the verbose 'Close' text but keep it accessible */
.cg-cat-tree .admin__action-multiselect-crumb .action-close .action-close-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* optional: compact chips on small screens */
@media (max-width: 640px) {
  .cg-cat-tree .admin__action-multiselect-crumb {
    font-size: 1.1rem;
    padding: .3rem .75rem .28rem .75rem;
  }
  .cg-cat-tree .admin__action-multiselect-crumb .action-close {
    width: 18px; height: 18px;
  }
  .cg-cat-tree .admin__action-multiselect-crumb .action-close::before {
    width: 11px; height: 11px;
  }
}
/* Base placeholder box */
.gallery .image-placeholder{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height: 200px;
  padding: 18px;
  border: 1px dashed color-mix(in oklab, var(--cg-blue) 70%, #ffffff 30%);
  border-radius: 14px;
  background: var(--cg-surface);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Kill legacy camera/text/sprites from core themes */
.gallery .image-placeholder > img.spacer{ display:none !important; }
.gallery .image-placeholder .image-placeholder-text{ display:none !important; }
.gallery .image-placeholder::before,
.gallery .image-placeholder .image-placeholder-text::before{ display:none !important; content:none !important; }

/* Modern content */
.cg-drop-ui{ text-align:center; pointer-events:none; max-width: 360px; }
.cg-icon{
  display:block; margin: 0 auto;
  color: var(--cg-blue);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.02));
}
.cg-drop-head{
  margin-top: 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--cg-blue);
}
.cg-drop-sub{
  font-size: 12px;
  opacity: .9;
  color: var(--cg-accent);
}
.cg-drop-meta{
  font-size: 12px;
  opacity: .75;
  margin-top: 4px;
  color: var(--cg-ink);
}

/* Make the entire box clickable via Webkul's button overlay */
#marketplaceProductImage_Uploader .fileinput-button{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}

/* Premium interaction states */
.gallery .image-placeholder:hover,
.gallery .image-placeholder:focus-within{
  border-color: var(--cg-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--cg-accent) 25%, transparent);
}
.gallery .image-placeholder.is-dragover{
  border-color: var(--cg-accent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--cg-accent) 6%, #fff) 0%, #fff 100%);
}

/* Video “Add” button brand alignment */
.add-video-button-container .action-secondary{
  border:1px solid var(--cg-accent);
  color: var(--cg-blue);
  background:#fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight:600;
}
.add-video-button-container .action-secondary:hover{
  background: var(--cg-accent);
  color:#fff;
}

/* CaptainGreek — Product Type Switcher (subtle / premium)
   CSS-only: paste into your theme CSS/LESS (e.g. _extend.less)
   Toned down blue usage; neutral ink + light accents only.
*/
.cg-type-switch{
  --cg-blue:#2d337f;                 /* brand blue (used sparingly) */
  --cg-accent:#b89b65;               /* gold accent */
  --cg-ink:#2a2e3a;                  /* neutral text */
  --cg-muted:#6b7280;                /* secondary text */
  --cg-border:#d9dcf0;               /* soft border */
  --cg-surface:#fff;

  margin:16px 0 !important;
  padding:16px 18px !important;
  border:1px solid var(--cg-border) !important;
  border-left:3px solid var(--cg-accent) !important; /* accent used as a thin cue */
  border-radius:12px !important;
  background:#fff !important;        /* no blue wash */
  box-shadow:0 6px 18px rgba(20,25,40,.06);
}

/* Title (Current product type: …) — neutral ink, not blue */
.cg-type-switch > div:first-child > div:first-child > div:first-child{
  color:var(--cg-ink);
  font-weight:700;
  font-size:16px;
  line-height:1.25;
}

/* Description — calmer secondary tone */
.cg-type-switch > div:first-child > div:first-child > div:first-child + div{
  color:var(--cg-muted);
  opacity:1 !important;              /* override inline .85 */
  font-size:14px;
}

/* Switch button — neutral by default, accent only on hover */
.cg-type-switch .cg-type-action{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #cfd3e1;
  background:#fff;
  color:var(--cg-ink);
  font-weight:700;
  text-decoration:none;
  transition:transform .18s cubic-bezier(.16,.8,.36,1),
             background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.cg-type-switch .cg-type-action:hover{
  background:var(--cg-accent);
  border-color:var(--cg-accent);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(184,155,101,.22);
}
.cg-type-switch .cg-type-action:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(184,155,101,.26);
}

/* Details (When to use…) — neutral frame with subtle chevron */
.cg-type-switch details{
  margin-top:.5rem !important;
  border:1px solid var(--cg-border);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}
.cg-type-switch summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  color:var(--cg-ink);
  font-weight:600;
  position:relative;
}
.cg-type-switch summary::-webkit-details-marker{ display:none; }

/* Chevron: neutral by default; turns accent when open */
.cg-type-switch summary::after{
  content:"";
  position:absolute;
  right:12px; top:50%;
  width:10px; height:10px;
  border-right:2px solid #8a8f9c;   /* neutral chevron */
  border-bottom:2px solid #8a8f9c;
  transform:translateY(-60%) rotate(45deg);
  transition:transform .18s cubic-bezier(.16,.8,.36,1), border-color .18s;
}
.cg-type-switch details[open] summary::after{
  transform:translateY(-40%) rotate(-135deg);
  border-color:var(--cg-accent);
}

.cg-type-switch details > ul{
  margin:0;
  padding:8px 12px 12px 24px;
  color:var(--cg-ink);
  background:linear-gradient(180deg,#fff 0%, #fafbff 100%);
}
.cg-type-switch details > ul li{
  margin:6px 0;
  line-height:1.35;
}

/* Mobile: let the button breathe */
@media (max-width:700px){
  .cg-type-switch .cg-type-action{
    margin-top:8px;
    width:100%;
    justify-content:center;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .cg-type-switch .cg-type-action,
  .cg-type-switch summary::after{ transition:none !important; }
}
/* ---------------------------------------------
   Captain-Greek ▸ Webkul raw labels (no <span>)
   Make them look like the rest of the cg-skin
   --------------------------------------------- */

/* 1) Neutralize any theme's default required star on the label */
.cg-skin .field.required > .label::after,
.cg-skin .field._required > .label::after{
  content:none !important;
}

/* 2) Float the label like a “chip” even when there's no <span> wrapper */
.cg-skin .field > .label{
  position:absolute; left:12px; top:0;
  transform:translateY(calc(-50% + 6px));
  margin:0; line-height:1; pointer-events:none; z-index:2;
  font:600 1rem/1 var(--cg-font, "Inter","Helvetica Neue",sans-serif);
  color:var(--cg-blue, #2d337f);
}

/* If the label has no <span>, style the label element itself as the chip */
.cg-skin .field > .label:not(:has(span)){
  display:inline-block;
  background:#fff; padding:0 .55rem;
  border-radius:6px; box-shadow:0 0 0 3px #fff; /* notch out the border behind */
}

/* Our required star inside the chip */
.cg-skin .field.required  > .label:not(:has(span))::after,
.cg-skin .field._required > .label:not(:has(span))::after{
  content:"*"; margin-left:.3rem; color:#d63638; font-weight:700;
}

/* 3) Make Webkul controls match the white fields (height/border/radius) */
.cg-skin .field .control select,
.cg-skin .field .control input:not([type=checkbox]):not([type=radio]),
.cg-skin .field .control textarea{
  width:100%;
  height:42px;                        /* consistent control height */
  padding:.75rem 1rem;
  border:1px solid #d8dee9;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 0 rgba(13,35,70,.08) inset;
  font:500 1.1rem/1.35 var(--cg-font, "Inter","Helvetica Neue",sans-serif);
  color:#222;
  box-sizing:border-box;
  transition:border-color .18s, box-shadow .18s, background-color .18s;
}

/* Textareas need taller height; keep the same skin */
.cg-skin .field .control textarea{ min-height:120px; height:auto; resize:vertical; }

/* Focus state */
.cg-skin .field .control :where(input,select,textarea):focus{
  outline:none;
  border-color:var(--cg-accent, #b89b65);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cg-accent, #b89b65) 28%, transparent);
}

/* Magento error hook: red ring on invalid */
.cg-skin .field .control :where(input,select,textarea).mage-error{
  border-color:#d63638 !important;
  box-shadow:0 0 0 3px color-mix(in srgb,#d63638 20%, transparent);
}

/* 4) Nice select arrow + padding (matches other selects in your skin) */
.cg-skin .field .control select{
  appearance:none;
  padding-right:2rem;
  background:
    #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232d337f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right .7rem center / 12px;
}

/* 5) Give fields a bit of top room for the floating chip */
.cg-skin .field{ position:relative; isolation:isolate; padding-top:.9rem; }
/* CaptainGreek ▸ Webkul Listing Toolbar / Filters / Pager — LARGE & MINIMAL  */
.page-layout-seller-2columns-left{
  --cg-blue:#2d337f; --cg-accent:#b89b65; --cg-neutral:#30323a;
  --cg-surface:#ffffff; --cg-surface-edge:#d9dcf0;
  --cg-font:"Inter","Helvetica Neue",Arial,sans-serif;

  /* scale up */
  --cg-font-base:1.6rem;          /* ~16px in Magento admin */
  --cg-control-h:3.6rem;          /* min touch size ~44px */
  --cg-radius:14px;
  --cg-pill:9999px;
}

/* Webkul forces content-box – fix sizing in the grid header area */
.page-layout-seller-2columns-left .admin__data-grid-header *{ box-sizing:border-box !important; }

/* =========================
   HEADER CARD
   ========================= */
.page-layout-seller-2columns-left .admin__data-grid-header{
  background:var(--cg-surface) !important;
  border:1px solid var(--cg-surface-edge) !important;
  border-radius:var(--cg-radius) !important;
  box-shadow:0 6px 18px rgba(20,25,40,.06) !important;
  padding:1.1rem 1.4rem !important;
  margin:14px 0 18px !important;
  font:500 var(--cg-font-base)/1.45 var(--cg-font) !important;
}

/* =========================
   FILTERS BUTTON (bigger, pill)
   ========================= */
.page-layout-seller-2columns-left .data-grid-filters-actions-wrap .action-default::before,
.page-layout-seller-2columns-left .data-grid-filters-action-wrap .action-default::before{ content:none !important; }
.page-layout-seller-2columns-left .data-grid-filters-actions-wrap .action-default{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  min-height:var(--cg-control-h) !important; padding:.6rem 1.4rem !important;
  border-radius:var(--cg-pill) !important; border:1px solid var(--cg-accent) !important;
  background:#fff !important; color:var(--cg-neutral) !important; font:700 1.4rem/1 var(--cg-font) !important;
  transition:transform .18s cubic-bezier(.16,.8,.36,1), box-shadow .22s ease, background .22s ease, color .22s ease;
}
.page-layout-seller-2columns-left .data-grid-filters-actions-wrap .action-default:hover,
.page-layout-seller-2columns-left .data-grid-filters-actions-wrap .action-default._active{
  background:var(--cg-accent) !important; color:#fff !important; transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(184,155,101,.22);
}

/* =========================
   ACTIVE FILTER CHIPS (larger)
   ========================= */
.page-layout-seller-2columns-left .admin__data-grid-filters-current._show{
  background:#fff !important; border:1px solid var(--cg-surface-edge) !important;
  border-radius:var(--cg-radius) !important; padding:.8rem 1rem !important; margin:.8rem 0 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.05) !important;
}
.page-layout-seller-2columns-left .admin__current-filters-title{ 
  color:var(--cg-neutral) !important; font:700 1.4rem/1 var(--cg-font) !important; 
}
.page-layout-seller-2columns-left .admin__current-filters-list > li{
  display:inline-flex; align-items:center; gap:.55rem; 
  padding:.55rem 1.1rem; margin:.35rem .55rem .35rem 0;
  border-radius:var(--cg-pill); background:color-mix(in srgb,#2d337f 6%, #fff);
  border:1px solid rgba(45,51,127,.15); color:#2d337f; font:700 1.3rem/1 var(--cg-font);
}
.page-layout-seller-2columns-left .admin__current-filters-list .action-remove{
  width:22px; height:22px; border:0; border-radius:50%; background:transparent;
}
.page-layout-seller-2columns-left .admin__current-filters-list .action-remove:before{
  content:""; display:block; width:14px; height:14px; margin:auto; background:#2d337f;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* =========================
   FILTERS DRAWER (larger inputs)
   ========================= */
.page-layout-seller-2columns-left .admin__data-grid-filters-wrap._show{
  background:#fff !important; border:1px solid var(--cg-surface-edge) !important;
  border-radius:var(--cg-radius) !important; padding:1.2rem !important; margin:.8rem 0 0 !important;
  box-shadow:0 6px 18px rgba(20,25,40,.06) !important;
}
.page-layout-seller-2columns-left .admin__filters-legend span{ 
  font:700 1.5rem/1.2 var(--cg-font) !important; color:#2d337f !important;
}
.page-layout-seller-2columns-left .admin__form-field{
  background:#fff !important; border:1px solid #e9ecf6 !important;
  border-radius:12px !important; padding:1rem 1.1rem !important; margin:.8rem !important;
}
.page-layout-seller-2columns-left .admin__form-field-legend span,
.page-layout-seller-2columns-left .admin__form-field-label span{
  font:600 1.35rem/1 var(--cg-font) !important; color:#2d337f !important;
}
.page-layout-seller-2columns-left .admin__form-field-control .input-text,
.page-layout-seller-2columns-left .admin__form-field-control .select{
  width:100% !important; min-height:var(--cg-control-h) !important;
  border:1px solid var(--cg-accent) !important; border-radius:24px !important;
  padding:.85rem 2.4rem .85rem 1.2rem !important;
  font:600 1.35rem/1.35 var(--cg-font) !important; color:var(--cg-neutral) !important;
  background:linear-gradient(#fff,#f8f9fb) padding-box, var(--cg-accent) border-box !important;
  box-shadow:0 1px 2px rgba(0,0,0,.05) inset !important;
}

/* =========================
   “PER PAGE” SELECTMENU — make it visible & premium
   ========================= */
.page-layout-seller-2columns-left .selectmenu{
  position:relative !important; display:inline-block !important; z-index:10040 !important;
  border:1px solid var(--cg-accent) !important; border-radius:24px !important; background:#fff !important;
  min-width: 9.5rem !important; /* readable width */
  overflow:visible !important; float:none !important;
}
.page-layout-seller-2columns-left .selectmenu-value input{
  border:none !important; height:calc(var(--cg-control-h) - 1rem) !important;
  padding:.6rem 2.6rem .6rem 1.1rem !important; width:100% !important; 
  background:transparent !important; font:700 1.35rem/1 var(--cg-font) !important; color:var(--cg-neutral) !important;
}
.page-layout-seller-2columns-left .selectmenu-toggle{ position:absolute !important; inset:0 !important; width:100% !important; }
.page-layout-seller-2columns-left .selectmenu-toggle::before{
  content:"" !important; position:absolute !important; right:0 !important; top:0 !important; bottom:0 !important;
  width:3.2rem !important; border-left:1px solid var(--cg-accent) !important; background:transparent !important;
}
.page-layout-seller-2columns-left .selectmenu-toggle::after{
  /* replace tiny triangle with clean chevron */
  content:"" !important; position:absolute !important; right:1.1rem !important; top:50% !important; margin-top:-5px !important;
  width:12px !important; height:10px !important; border:0 !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%232d337f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") center/100% 100% no-repeat !important;
}

/* Dropdown panel (make it actually show) */
.page-layout-seller-2columns-left .selectmenu-items{
  position:absolute !important; top:calc(100% + 8px) !important; left:0 !important;
  display:none !important; /* default hidden */
  min-width: 220px !important; max-width: 420px !important;
  max-height: clamp(240px, 56vh, 560px) !important; overflow:auto !important;
  z-index:10060 !important; pointer-events:auto !important;
  background:#fff !important; border:1px solid var(--cg-accent) !important;
  border-radius:12px !important; box-shadow:0 12px 32px rgba(0,0,0,.16) !important;
}
.page-layout-seller-2columns-left .selectmenu-items._active{ display:block !important; }  /* <-- show it */
.page-layout-seller-2columns-left .selectmenu-items .selectmenu-item{ padding:.6rem 1rem !important; }
.page-layout-seller-2columns-left .selectmenu-items .selectmenu-item-action{
  width:100% !important; text-align:left !important; border:0 !important; background:transparent !important;
  font:700 1.35rem/1.2 var(--cg-font) !important; color:#2d337f !important; cursor:pointer !important;
}
.page-layout-seller-2columns-left .selectmenu-items .selectmenu-item-action:hover{
  background: color-mix(in srgb,var(--cg-accent) 12%, #fff) !important;
}

/* =========================
   PAGER (bigger, touch-friendly)
   ========================= */
.page-layout-seller-2columns-left .admin__data-grid-pager-wrap{ display:flex; align-items:center; justify-content:flex-end; }
.page-layout-seller-2columns-left .admin__data-grid-pager{ display:inline-flex; align-items:center; gap:.6rem; }
.page-layout-seller-2columns-left .admin__data-grid-pager .action-previous,
.page-layout-seller-2columns-left .admin__data-grid-pager .action-next{
  width:var(--cg-control-h) !important; height:var(--cg-control-h) !important; border-radius:10px !important;
  background:#fff !important; border:1px solid var(--cg-surface-edge) !important; 
  box-shadow:0 1px 2px rgba(0,0,0,.05) !important;
  transition:transform .18s cubic-bezier(.16,.8,.36,1), border-color .18s, background .18s;
  font-size:1.8rem !important; /* makes icon font bigger */
}
.page-layout-seller-2columns-left .admin__data-grid-pager .action-previous:hover,
.page-layout-seller-2columns-left .admin__data-grid-pager .action-next:hover{
  transform:translateY(-1px); border-color:var(--cg-accent) !important;
}
.page-layout-seller-2columns-left .admin__data-grid-pager .admin__control-text{
  width:5.2rem !important; min-height:var(--cg-control-h) !important; text-align:center !important;
  border:1px solid var(--cg-accent) !important; border-radius:24px !important; background:#fff !important;
  font:700 1.35rem/1 var(--cg-font) !important; color:var(--cg-neutral) !important;
}
.page-layout-seller-2columns-left .admin__control-support-text{
  font:600 1.3rem/1 var(--cg-font) !important; color:var(--cg-neutral) !important;
}

/* =========================
   ACCESSIBILITY / FOCUS
   ========================= */
.page-layout-seller-2columns-left .data-grid-filters-actions-wrap .action-default:focus-visible,
.page-layout-seller-2columns-left .admin__form-field-control :is(input,select):focus-visible,
.page-layout-seller-2columns-left .selectmenu .selectmenu-value input:focus-visible,
.page-layout-seller-2columns-left .selectmenu-items .selectmenu-item-action:focus-visible,
.page-layout-seller-2columns-left .admin__data-grid-pager :is(.action-previous,.action-next,.admin__control-text):focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cg-accent) 40%, transparent) !important;
}
 /* FIX 1: Remove the orange underline bar on active “Filters” */
.page-layout-seller-2columns-left .data-grid-filters-action-wrap .action-default._active::after,
.page-layout-seller-2columns-left .data-grid-filters-actions-wrap .action-default._active::after{
  content:none !important;
  display:none !important;
  background:none !important;
  height:0 !important;
  border:0 !important;
}

/* FIX 2: Remove the vertical divider inside the per-page selectmenu */
.page-layout-seller-2columns-left .selectmenu-toggle::before{
  content:none !important;
  width:0 !important;
  border:0 !important;
  background:transparent !important;
}

/*───────────────────────────────────────────────────────────
  CAPTAIN‑GREEK ▸ Webkul Grids (WK Marketplace “data‑grid”)
  Scope: seller panel only
  Paste AFTER your current CSS
───────────────────────────────────────────────────────────*/

.page-layout-seller-2columns-left .admin__data-grid-wrap{
  /* glass card shell like your other tables */
  margin:0 0 2.4rem;
  padding:1.6rem 1.8rem;
  background:color-mix(in srgb,#fff 78%,var(--cg-blue) 6%);
  backdrop-filter:blur(12px) saturate(145%);
  border:1px solid rgba(45,51,127,.08);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  overflow:auto;                               /* horizontal safety */
}

/* base table */
.page-layout-seller-2columns-left .admin__data-grid-wrap .data-grid{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 !important;
  font-size:1.25rem;
}

/*──────────────── HEADER ───────────────*/
.page-layout-seller-2columns-left .data-grid thead th{
  background:color-mix(in srgb,var(--cg-blue) 6%,#fff 94%) !important;
  backdrop-filter:blur(8px) saturate(155%) !important;

  color:var(--cg-blue) !important;
  font:600 1.15rem/1 var(--cg-font,"Inter","Helvetica Neue",sans-serif) !important;
  text-align:center;
  letter-spacing:.1px;
  padding:1rem 1.4rem !important;

  border-right:1px solid rgba(45,51,127,.10) !important;
  border-bottom:1px solid rgba(45,51,127,.10) !important;
}
.page-layout-seller-2columns-left .data-grid thead th:last-child{
  border-right:none !important;
}

/* checkbox header cell width */
.page-layout-seller-2columns-left .data-grid thead .data-grid-multicheck-cell{
  width:48px;
}

/* sort chevrons */
.page-layout-seller-2columns-left .data-grid-th._sortable .data-grid-cell-content{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  position:relative;
}
.page-layout-seller-2columns-left .data-grid-th._sortable .data-grid-cell-content::after{
  content:""; width:12px; height:12px; display:inline-block;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%232d337f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity:.55; transform:rotate(180deg);          /* default: up */
}
.page-layout-seller-2columns-left .data-grid-th._ascend  .data-grid-cell-content::after{ transform:rotate(180deg); opacity:1; }
.page-layout-seller-2columns-left .data-grid-th._descend .data-grid-cell-content::after{ transform:none;            opacity:1; }

/*──────────────── BODY ───────────────*/
.page-layout-seller-2columns-left .data-grid tbody td{
  padding:1rem 1.4rem !important;
  font:500 1.25rem/1.45 var(--cg-font,"Inter","Helvetica Neue",sans-serif) !important;

  border-right:1px solid rgba(45,51,127,.06) !important;
  border-bottom:1px solid rgba(45,51,127,.06) !important;
  background:transparent;
}
.page-layout-seller-2columns-left .data-grid tbody td:last-child{
  border-right:none !important;
}

/* zebra stripes */
.page-layout-seller-2columns-left .data-grid tbody tr:nth-child(odd){
  background:color-mix(in srgb,var(--cg-blue) 3%,#fff 97%) !important;
}
.page-layout-seller-2columns-left .data-grid tbody tr:nth-child(even){
  background:color-mix(in srgb,var(--cg-accent) 3%,#fff 97%) !important;
}

/* row hover tint */
.page-layout-seller-2columns-left .data-grid tbody tr:hover{
  background:color-mix(in srgb,var(--cg-accent) 10%,#fff 90%) !important;
  transition:background .18s ease;          /* visual only */
}

/* alignments for common columns */
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-id-cell .data-grid-cell-content{ text-align:center; }
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-price-cell .data-grid-cell-content{
  text-align:right; font-weight:700; color:var(--cg-accent);
}

/* checkbox cells */
.page-layout-seller-2columns-left .data-grid .data-grid-checkbox-cell{ text-align:center; }
.page-layout-seller-2columns-left .data-grid .admin__control-checkbox{
  width:1.4rem; height:1.4rem; accent-color:var(--cg-accent);
}

/* thumbnail cell */
.page-layout-seller-2columns-left .data-grid .data-grid-thumbnail-cell .thumbnail-wrapper{
  display:block; width:56px; height:56px;
  border-radius:10px; overflow:hidden;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.08) inset;
}
.page-layout-seller-2columns-left .data-grid .data-grid-thumbnail-cell .admin__control-thumbnail{
  width:100% !important; height:100% !important; object-fit:cover;
}

/* status “pill” (generic – applies to Enabled/Disabled text) */
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .data-grid-cell-content{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:6.2rem; padding:.25rem .9rem .2rem;
  font:600 1.15rem/1 var(--cg-font);
  color:#fff; border-radius:18px;
  backdrop-filter:blur(8px) saturate(140%);
  box-shadow:0 1px 1px rgba(255,255,255,.25) inset, 0 3px 6px rgba(0,0,0,.08) inset;
  background:color-mix(in srgb,var(--cg-blue) 85%,rgba(255,255,255,.75));
}

/* if Webkul adds helper classes, tint “Disabled” softly */
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .disabled,
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .status-disabled{
  background:color-mix(in srgb,#8e2222 85%,rgba(255,255,255,.75)) !important;
}
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .enabled,
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .status-enabled{
  background:color-mix(in srgb,#0a662e 85%,rgba(255,255,255,.75)) !important;
}

/*──────────────── MULTI‑CHECK “Options” ───────────────*/
.page-layout-seller-2columns-left .action-multicheck-wrap{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.page-layout-seller-2columns-left .action-multicheck-toggle{
  appearance:none; border:1px solid rgba(45,51,127,.15);
  border-radius:16px; background:#fff; color:var(--cg-blue);
  padding:.35rem .8rem; font:600 1.1rem/1 var(--cg-font);
  cursor:pointer; transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.page-layout-seller-2columns-left .action-multicheck-toggle._active,
.page-layout-seller-2columns-left .action-multicheck-toggle:hover{
  background:color-mix(in srgb,var(--cg-accent) 10%,#fff);
  border-color:var(--cg-accent);
  transform:translateY(-2px);
}
.page-layout-seller-2columns-left .action-multicheck-wrap .action-menu{
  margin-top:.35rem; padding:.35rem 0;
  background:#fff; border:1px solid rgba(45,51,127,.15);
  border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.10);
}
.page-layout-seller-2columns-left .action-multicheck-wrap .action-menu-item{
  display:block; padding:.65rem 1rem;
  font:600 1.1rem/1.2 var(--cg-font); color:var(--cg-blue);
  cursor:pointer;
}
.page-layout-seller-2columns-left .action-multicheck-wrap .action-menu-item:hover{
  background:color-mix(in srgb,var(--cg-blue) 6%,#fff 94%);
}

/*──────────────── MOBILE SAFE ───────────────*/
@media (max-width:640px){
  .page-layout-seller-2columns-left .admin__data-grid-wrap{ padding:1.2rem; }
  .page-layout-seller-2columns-left .data-grid thead th{ padding:.9rem 1rem !important; }
  .page-layout-seller-2columns-left .data-grid tbody td{ padding:.9rem 1rem !important; }
}

/*──────────────── Reduced‑motion ─────────────*/
@media (prefers-reduced-motion:reduce){
  .page-layout-seller-2columns-left .data-grid tbody tr:hover,
  .page-layout-seller-2columns-left .action-multicheck-toggle{ transition:none; transform:none; }
}
/* Center the status pill horizontally and keep it inside the cell */
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell{
  text-align:center !important;             /* center baseline */
}
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .data-grid-cell-content{
  display:inline-flex !important;           /* pill layout */
  align-items:center; justify-content:center;
  margin-inline:auto;                       /* center within td */
  max-width:100%;                           /* never overflow */
  white-space:nowrap;                       /* keep pill on one line */
  box-sizing:border-box;
}
/* CaptainGreek — Product link blocks (Related/Upsell/Crosssell) title */
#crosssell-product-block .title,
#upsell-product-block   .title,
#related-product-block  .title{
  /* tokens fall back to your existing root vars */
  --cg-blue:#2d337f; --cg-accent:#b89b65; --cg-font:"Inter","Helvetica Neue",sans-serif;

  display:flex;                 /* title + decorative rule on one line */
  align-items:center;
  gap:.8rem;
  margin:.2rem 0 .8rem;         /* breathe above grid */
  padding:0;
  font:700 1.9rem/1.25 var(--cg-font);
  color:var(--cg-blue);
  background:transparent;       /* neutral, no bar */
  border:0;
}

/* gold underline that fills the remaining row */
#crosssell-product-block .title::after,
#upsell-product-block   .title::after,
#related-product-block  .title::after{
  content:"";
  flex:1 1 auto;
  height:3px;
  border-radius:3px;
  background:linear-gradient(
    90deg,
    var(--cg-accent) 0%,
    color-mix(in srgb,var(--cg-accent) 25%, #fff) 100%
  );
  opacity:.95;
}

/* optional: calm the descriptive sentence under the title */
#crosssell-product-block{
  --cg-neutral:#4b4f5a;
  font-family:var(--cg-font);
}
#crosssell-product-block .title + *{
  /* if that line is wrapped in a tag on your build it will pick this up */
  color:var(--cg-neutral);
  font:500 1.3rem/1.5 var(--cg-font);
  margin-bottom:.8rem;
}

.cg-skin .cg-form-nav{
justify-content: center !important; 
gap: 12px 14px !important; 
border-radius: 14px;
}

.cg-skin .cg-form-nav a{
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
white-space: normal; 
flex: 1 1 240px; 
min-height: 48px;
padding: .9rem 1.2rem;
border: 1px solid #e7e9f5;
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 0 rgba(13,35,70,.05) inset;
font-weight: 800;
font-size: clamp(1.05rem, .95rem + .4vw, 1.4rem); 
line-height: 1.2;
letter-spacing: .2px;
color: #2d337f;
}

/* Active chip (same logic you already use with :target) */
:root:has(#cg-basics:target) .cg-form-nav a[href="#cg-basics"],
:root:has(#cg-pricing:target) .cg-form-nav a[href="#cg-pricing"],
:root:has(#cg-shipping:target) .cg-form-nav a[href="#cg-shipping"],
:root:has(#cg-seo:target) .cg-form-nav a[href="#cg-seo"],
:root:not(:has(#cg-basics:target, #cg-pricing:target, #cg-shipping:target, #cg-seo:target))
.cg-form-nav a[href="#cg-basics"]{
border-color: #b89b65;
background: color-mix(in srgb, #b89b65 16%, #fff);
box-shadow: 0 2px 10px rgba(184,155,101,.18);
}

/* Mobile: stack but keep the larger “title” look */
@media (max-width: 700px){
.cg-skin .cg-form-nav a{ flex-basis: 100%; }
}


.cg-skin .wk-mp-page-title.legend{
display: flex;
flex-wrap: wrap; 
align-items: center;
gap: 8px 10px;
}
.cg-skin .wk-mp-page-title.legend > span:first-child{
flex: 1 1 100%; 
font-weight: 800;
font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
line-height: 1.25;
color: #2d337f;
}
.cg-skin .wk-mp-page-title.legend > .button{
flex: 0 0 auto; 
margin-left: 0 !important; 
}



.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .data-grid-cell-content{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 6.2rem;
padding: .25rem .9rem .2rem;
font: 600 1.15rem/1 var(--cg-font, "Inter", sans-serif);
color: #fff;
border-radius: 18px;
backdrop-filter: blur(8px) saturate(140%);
box-shadow: 0 1px 1px rgba(255,255,255,.25) inset, 0 3px 6px rgba(0,0,0,.08) inset;
background: #6b7280; 
}

/* GREEN when the cell OR a child carries an “enabled” class */
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .data-grid-cell-content.enabled,
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .data-grid-cell-content.status-enabled,
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .data-grid-cell-content:has(.enabled),
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .data-grid-cell-content:has(.status-enabled){
background: #0a662e !important;
}

/* RED when the cell OR a child carries a “disabled” class */
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .data-grid-cell-content.disabled,
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .data-grid-cell-content.status-disabled,
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .data-grid-cell-content:has(.disabled),
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .data-grid-cell-content:has(.status-disabled){
background: #8e2222 !important;
}

/* Center the pill in its cell (keep from your current block) */
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell{ text-align:center !important; }
.page-layout-seller-2columns-left .data-grid .wk-mp-grid-status-cell .data-grid-cell-content{
margin-inline:auto; max-width:100%; white-space:nowrap; box-sizing:border-box;
}

/* NOTE:
CSS cannot “read” plain text like “Enabled/Disabled”.
The rules above color the pill when Webkul outputs
.enabled/.disabled or .status-enabled/.status-disabled,
whether on the pill itself or a child span.
If your markup is plain text only, the neutral gray will show. */


.cg-skin .admin__action-multiselect-wrap .admin__action-multiselect,
.cg-skin .action-select-wrap .action-select{
border: 1px solid #d8dee9 !important;
border-radius: 10px !important;
background: #fff !important;
min-height: 42px !important;
padding-right: 3.2rem !important; 
box-shadow: 0 1px 0 rgba(13,35,70,.08) inset !important;
}

/* keep your custom chevron box on the right from previous block */
.admin__action-multiselect-wrap .admin__action-multiselect::before,
.action-select-wrap .action-select::before{
border-left: 1px solid #d9dcf0 !important;
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}


.cg-skin .admin__action-multiselect-wrap .admin__action-multiselect:focus,
.cg-skin .action-select-wrap .action-select:focus{
outline: none !important;
box-shadow: 0 0 0 3px rgba(184,155,101,.28) !important; 
border-color: #b89b65 !important;
}



/**************************************************************
 Captain‑Greek ▸ Add Product — CSS‑only Wizard (no PHTML/JS)
 Paste AFTER your existing styles
***************************************************************/

/* 0) Comfortable page width */
.cg-skin #wk-bodymain{
  max-width: 1260px;
  margin-inline: auto;
}

/* 1) Sticky step chips (your existing nav) */
.cg-skin .cg-form-nav{
  position: sticky; top: 8px; z-index: 70;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px; border: 1px solid #e7e9f5; border-radius: 12px; background:#fff;
  box-shadow: 0 6px 18px rgba(20,25,40,.06);
}
.cg-skin .cg-form-nav a{
  font-weight: 700; padding: .55rem .9rem; border-radius: 9999px; text-decoration: none;
}





/* Optional “show all” (no markup change): type #edit-product or #wk-bodymain at end of URL */
:root:has(#edit-product:target) .wk-mp-fieldset > section,
:root:has(#wk-bodymain:target)  .wk-mp-fieldset > section{ display:block; }

/* Anchor offset so sticky nav doesn’t cover headings */
.cg-skin section{ scroll-margin-top: 84px; }
html{ scroll-behavior: smooth; }

/* 3) Robust layout: 1‑col by default, 2‑col grid on wide screens (no squished fields) */
.cg-skin section{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-auto-rows: min-content;
  row-gap: 14px; column-gap: 16px;
  padding-block: 18px 14px;
  margin-block: 14px 22px;
}
/* Full‑width by default for everything that is not a .field (e.g., H2, notices) */
.cg-skin section > *{ grid-column: 1 / -1; }

/* Grid children must be allowed to shrink inside columns */
.cg-skin section .field,
.cg-skin section .control{ min-width: 0; }

/* Two columns on desktops — but only for standard fields */
@media (min-width: 1100px){
  .cg-skin section{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .cg-skin section .field{ grid-column: span 1; margin: 0; }  /* no forced widths */
}

/* 3a) Keep “wide” widgets truly full‑width (no overflow) */
@media (min-width: 1100px){
  .cg-skin section .field:has(textarea),
  .cg-skin section .field:has(.mce-tinymce),
  .cg-skin section .field:has(#media_gallery_content),
  .cg-skin section .field:has(.gallery),
  .cg-skin section .field:has([data-bind*="sellerCategory"]),
  .cg-skin section .field:has(.admin__action-multiselect),
  .cg-skin section .field:has(select[multiple]),
  .cg-skin section .field:has(.wk-field),
  .cg-skin #cg-seo .field{
    grid-column: 1 / -1;
  }
  /* Ensure heavy widgets can’t overflow the grid */
  .cg-skin .mce-tinymce,
  .cg-skin .admin__action-multiselect,
  .cg-skin #media_gallery_content,
  .cg-skin [data-bind*="sellerCategory"],
  .cg-skin .gallery{ max-width: 100%; }
}

/* 3b) Typical small fields that work well side‑by‑side */
@media (min-width: 1100px){
  /* Pricing pairs */
  #cg-pricing .field:has(#price),
  #cg-pricing .field:has(#special-price),
  #cg-pricing .field:has(#special-from-date),
  #cg-pricing .field:has(#special-to-date),
  #cg-pricing .field:has(#qty),
  #cg-pricing .field:has(#stock-availability),
  /* Shipping weight input */
  #cg-shipping #cg-weight-field{
    grid-column: span 1;
  }
}

/* 4) Tidy labels and hints (no visual overhaul) */
.cg-skin .field > .label{
  max-width: 95%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-skin .hint-container{ margin-top: .3rem; opacity: .92; }

/* 5) Keep bottom “Save / Duplicate / Draft” bar reachable */
.cg-skin .button-container.related-buttons-container{
  position: sticky; bottom: 0; z-index: 60;
}



/* 7) Minor breathing room under gallery and KO trees */
#media_gallery_content{ margin-top: .35rem; }
[data-bind*="sellerCategory"]{ margin-top: .35rem; }


/* Section titles (Basics, Pricing, Shipping, SEO) */
.cg-skin section > h2{
    display:flex; align-items:center; gap:.75rem;
    margin:12px 0 6px;
    font:800 clamp(1.35rem,1.1rem + .6vw,1.9rem)/1.25 "Inter","Helvetica Neue",sans-serif;
    color:var(--cg-blue, #2d337f);
    letter-spacing:.2px;
  }
  .cg-skin section > h2::after{
    content:""; flex:1 1 auto; height:3px; border-radius:3px;
    background:linear-gradient(90deg, var(--cg-accent, #b89b65) 0%, color-mix(in srgb, var(--cg-accent, #b89b65) 24%, #fff) 100%);
    opacity:.95;
  }
  .cg-skin section{ scroll-margin-top: 96px; }
  
  /*─────────────────────────────────────────────────────────────
  Help Dock (consolidated)
  Paste AFTER any previous rules so these win the cascade
──────────────────────────────────────────────────────────────*/
#cg-help-dock{
    /* base */
    font-family: var(--cg-font, "Inter","Helvetica Neue",sans-serif);
    font-size: 16px !important;                 /* baseline so rem/em scale up */
    background: #fff !important;
    border: 1px solid var(--cg-surfaceEdge, #d9dcf0) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.14) !important;
  }
  
  #cg-help-dock-title{
    display: block;
    margin: 0 0 6px 0;
    color: var(--cg-blue, #2d337f);
    font-weight: 700;
    font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem) !important;
    line-height: 1.3 !important;
  }
  
  #cg-help-dock-body{
    color: var(--cg-neutral, #4b4f5a) !important;
    font-weight: 500;
    font-size: clamp(1.2rem, .95rem + .7vw, 1.45rem) !important;
    line-height: 1.65 !important;
  }
  
  #cg-help-dock-toggle{
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    border: 1px solid rgba(45,51,127,.12) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--cg-blue, #2d337f) 8%, #fff) !important;
    color: var(--cg-blue, #2d337f) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    cursor: pointer;
  }
  
  #cg-help-dock-toggle:hover{
    background: var(--cg-accent, #b89b65) !important;
    border-color: var(--cg-accent, #b89b65) !important;
    color: #fff !important;
  }
  
  #cg-help-dock-toggle:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--cg-accent, #b89b65) 35%, transparent) !important;
    outline-offset: 2px;
  }
  
  
  .admin__action-multiselect-search-wrap{
	display: none;
		
}

/* ──────────────────────────────────────────────────────────
   Downloadable ▸ make section full-width + card layout
   Put AFTER everything else
   ────────────────────────────────────────────────────────── */

/* 1) Let the wrapper show overflow (prevents clipping) */
#downloadable_items-wrapper,
#downloadable_items-content { overflow: visible !important; }

/* 2) Full-bleed the inner panel to the viewport with negative margins */
#downloadable_items_content{
  /* stretch to viewport edges no matter the page column */
  width: auto !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;   /* bleed to left edge */
  margin-right: calc(50% - 50vw) !important;  /* bleed to right edge */
  padding-left: clamp(18px, 4vw, 36px) !important;
  padding-right: clamp(18px, 4vw, 36px) !important;
  box-sizing: border-box;
}

/* 3) Slightly larger UI in this area */
#downloadable_items_content{
  --dl-blue: var(--cg-blue, #2d337f);
  --dl-accent: var(--cg-accent, #b89b65);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.18rem);
}
#downloadable_items_content .control-text,
#downloadable_items_content .control-select{
  min-height: 48px;
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  padding: .7rem 1rem;
}

/* 4) Card layout for link rows on ALL widths
      (Title row, Price big at the right, then File/URL, then Max Downloads) */
#downloadable_items_content .control-table thead{
  position: absolute; clip: rect(0 0 0 0); width:1px; height:1px; overflow:hidden;
}
#downloadable_items_content .control-table{
  width:100%;
  border-collapse: separate; border-spacing: 0;
}
#downloadable_items_content .control-table tbody tr{
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  margin: 12px 0; padding: 14px 16px;
  border: 1px solid rgba(45,51,127,.12);
  border-radius: 12px; background:#fff;
  box-shadow: 0 2px 10px rgba(45,51,127,.06);
}
#downloadable_items_content .control-table tbody td{ border:0; padding:0; min-width:0; }

/* Column flow + sizes */
#downloadable_items_content .control-table tbody td.col-sort   { order:0;  flex:0 0 120px; }
#downloadable_items_content .control-table tbody td.col-title  { order:1;  flex:1 1 600px; }
#downloadable_items_content .control-table tbody td.col-price  { order:2;  flex:0 0 260px; justify-content:flex-end; display:flex; }
#downloadable_items_content .control-table tbody td.col-file   { order:3;  flex:1 1 100%; }
#downloadable_items_content .control-table tbody td.col-limit  { order:4;  flex:0 0 260px; }
#downloadable_items_content .control-table tbody td.col-sample { order:5;  flex:1 1 100%; }
#downloadable_items_content .control-table tbody td.col-actions{ order:99; margin-left:auto; }

/* Price bigger & bold, readable on the right */
#downloadable_items_content .col-price .control-addon .control-text{
  min-height: 52px; font-weight:800;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  text-align: right;
}

/* Hide Shareable (we’re forcing it to No in the template) */
#downloadable_items_content th.col-share,
#downloadable_items_content td.col-share{ display:none !important; }

/* Mobile “labels” when stacked (keeps your earlier mapping) */
@media (max-width: 900px){
  fieldset[data-ui-id="downloadable-links"] .control-table tbody td.col-sort::before   { content:"Sort Order"; }
  fieldset[data-ui-id="downloadable-links"] .control-table tbody td.col-title::before  { content:"Title"; }
  fieldset[data-ui-id="downloadable-links"] .control-table tbody td.col-price::before  { content:"Price"; }
  fieldset[data-ui-id="downloadable-links"] .control-table tbody td.col-file::before   { content:"Attach File or Enter Link"; }
  fieldset[data-ui-id="downloadable-links"] .control-table tbody td.col-sample::before { content:"Sample"; }
  fieldset[data-ui-id="downloadable-links"] .control-table tbody td.col-limit::before  { content:"Max. Downloads"; }
  fieldset[data-ui-id="downloadable-links"] .control-table tbody td.col-actions::before{ content:"Actions"; }

  #downloadable_items_content .control-table tbody td{
    width:100%; border-bottom:1px dashed rgba(45,51,127,.08); padding-bottom:10px;
  }
  #downloadable_items_content .control-table tbody tr td:last-child{ border-bottom:0; }
  #downloadable_items_content .control-table tbody td::before{
    flex:0 0 45%; font-weight:700; color:var(--dl-blue); margin-right:8px;
  }
}

/* 5) Minor polish */
#downloadable_items_content .fileinput-button{
  padding:.65rem 1rem; border-radius:12px;
  border:1px solid var(--dl-accent); background:#fff; color:var(--dl-blue);
  font-weight:700; transition:transform .18s, box-shadow .18s, background .18s;
}
#downloadable_items_content .fileinput-button:hover{
  background:var(--dl-accent); color:#fff; transform:translateY(-1px);
}
#downloadable_items_content .draggable-handle{ width:18px; height:18px; display:inline-block; }
/* ── Downloadable ▸ full-bleed alignment fix (shift to the right) ── */
/* Adjust this once to match your left page gutter (gold rule).       */
/* 80–100px is typical; start with 88px and tweak ±2px if needed.     */
:root { --dl-left-gutter: 88px; }

/* keep overflow safe */
#downloadable_items-wrapper,
#downloadable_items-content { overflow: visible !important; }

/* same full-bleed as before, but compensated by the gutter */
#downloadable_items_content{
  width: auto !important;
  max-width: none !important;
  /* shift right by the gutter without changing width */
  margin-left:  calc(100% - 50vw + var(--dl-left-gutter)) !important;
  margin-right: calc(20% - 50vw - var(--dl-left-gutter)) !important;
  padding-left:  clamp(18px, 4vw, 36px) !important;
  padding-right: clamp(18px, 4vw, 36px) !important;
  box-sizing: border-box;
}

/* On narrower screens remove the shift so it’s perfectly balanced */
@media (max-width: 1100px){
  #downloadable_items_content{
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* ──────────────────────────────────────────────────────────
   Downloadable ▸ Buttons + Checkboxes (premium / usable)
   Put AFTER your existing CSS
   ────────────────────────────────────────────────────────── */

/* === 1) Premium “Add New Link” button ==================== */
#downloadable_items_content .downloadable-form .action-add{
  display:inline-flex !important;
  align-items:center; justify-content:center; gap:.55rem;
  padding:.65rem 1.15rem !important;
  border-radius:999px !important;
  border:1px solid var(--dl-accent, #b89b65) !important;
  background:var(--dl-accent, #b89b65) !important;
  color:#fff !important;
  font-weight:800 !important; line-height:1 !important;
  text-shadow:none !important;
  box-shadow:0 6px 14px rgba(184,155,101,.25);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
#downloadable_items_content .downloadable-form .action-add:hover{
  transform:translateY(-1px);
  background:color-mix(in srgb, var(--dl-accent, #b89b65) 88%, #fff 12%) !important;
  border-color:currentColor !important;
}
#downloadable_items_content .downloadable-form .action-add:focus-visible{
  outline:3px solid rgba(184,155,101,.35) !important;
  outline-offset:2px;
}
#downloadable_items_content .downloadable-form .action-add[disabled]{
  opacity:.55; pointer-events:none; box-shadow:none;
}

/* === 2) “Ghost” tertiary / quaternary actions ============ */
#downloadable_items_content .action-tertiary,
#downloadable_items_content .action-quaternary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .95rem !important;
  border-radius:10px !important;
  background:#fff !important;
  border:1px solid rgba(45,51,127,.18) !important;
  color:#007bdb !important;
  font-weight:700 !important;
  text-shadow:none !important;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
#downloadable_items_content .action-tertiary:hover,
#downloadable_items_content .action-quaternary:hover{
  background:rgba(0,123,219,.06) !important;
  border-color:#007bdb !important;
  transform:translateY(-1px);
}
#downloadable_items_content .action-tertiary:focus-visible,
#downloadable_items_content .action-quaternary:focus-visible{
  outline:3px solid rgba(0,123,219,.28) !important; outline-offset:2px;
}

/* === 3) Make the checkboxes/radios REAL (visible & clickable) === */
/* Some Magento/Webkul skins “hide” inputs for custom skins; restore native */
#downloadable_items_content input.control-checkbox[type="checkbox"],
#downloadable_items_content input.control-radio[type="radio"]{
  -webkit-appearance:auto !important;
  appearance:auto !important;
  position:static !important;
  opacity:1 !important;
  width:18px !important; height:18px !important;
  margin-right:.5rem !important;
  vertical-align:middle;
  accent-color: var(--dl-accent, #b89b65);
}
#downloadable_items_content input.control-checkbox[type="checkbox"]:focus-visible,
#downloadable_items_content input.control-radio[type="radio"]:focus-visible{
  outline:2px solid var(--dl-accent, #b89b65); outline-offset:2px;
}

/* Label next to the input is the click target – keep it nice & clickable */
#downloadable_items_content .field-option .field-label{
  display:inline-flex; align-items:center; gap:.45rem;
  cursor:pointer; pointer-events:auto;
  font-weight:600; color:var(--dl-blue,#2d337f);
}

/* If you also want the generic direct-sibling label clickable: */
#downloadable_items_content .field > input[type="checkbox"] + label{
  cursor:pointer; font-weight:600 !important;
}

/* === 4) Optional: unify text-transform coming from marketplace skin === */
.page-layout-seller-2columns-left *{ text-transform:inherit; }

/* Your global label style (kept, but scoping here avoids unintended bleed) */
#downloadable_items_content label{
  font-size:14px !important;
  font-weight:bold !important;
  color:#2d337f !important;
}