/* ==========================================================================
   BrikPanel – Simplified Product Editor
   ========================================================================== */

.brikpanel-pe{--pe-bg:#f1f1f1;--pe-card:#fff;--pe-text:#303030;--pe-text-secondary:#616161;--pe-text-muted:#8a8a8a;--pe-border:#e3e3e3;--pe-input-border:#8a8a8a;--pe-input-focus:#303030;--pe-primary:#303030;--pe-primary-hover:#1a1a1a;--pe-success:#1a8917;--pe-error:#d72c0d;--pe-radius-sm:.5rem;--pe-radius:.75rem;--pe-transition:all .2s ease;--pe-shadow:0 1px 3px rgba(0,0,0,.08);--pe-field-max:22rem;--pe-panel-max:34rem;--pe-prose-max:48rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;color:var(--pe-text);line-height:1.5}

.brikpanel-product-editor-page #wpcontent{padding-left:0}
.brikpanel-product-editor-page #wpbody-content{padding-bottom:0;margin-top:0!important}
.brikpanel-product-editor-page #wpbody-content>.wrap{margin:0;padding:0}
.brikpanel-product-editor-page .notice:not(.brikpanel-pe-notice):not(.notice-error),
.brikpanel-product-editor-page .updated:not(.brikpanel-pe-notice),
.brikpanel-product-editor-page .update-nag{display:none!important;margin:0!important;padding:0!important;height:0!important;border:0!important}
.brikpanel-pe{max-width:100%;min-height:100vh;background:var(--pe-bg)}

/* Header — sticks just below the BrikPanel global topbar (52px tall, fixed). */
.brikpanel-pe-header{position:sticky;top:var(--bp-topbar-height,52px);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 2rem;background:var(--pe-card);border-bottom:1px solid var(--pe-border);box-shadow:var(--pe-shadow)}
.brikpanel-pe-header-left{display:flex;align-items:center;gap:1rem}
.brikpanel-pe-header-left h1{font-size:1.125rem;font-weight:600;margin:0;padding:0;color:var(--pe-text)}
.brikpanel-pe-back{display:inline-flex;align-items:center;gap:.25rem;font-size:.8125rem;color:var(--pe-text-secondary);text-decoration:none;padding:.375rem .5rem;border-radius:var(--pe-radius-sm);transition:var(--pe-transition)}
.brikpanel-pe-back:hover{color:var(--pe-text);background:var(--pe-bg)}
.brikpanel-pe-header-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.brikpanel-pe-header-right a.brikpanel-pe-btn{text-decoration:none}
.brikpanel-pe-featured-star{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;background:transparent;color:var(--pe-text-secondary,#616161);border-radius:var(--pe-radius-sm,.375rem);cursor:pointer;transition:color .15s ease,background .15s ease,transform .08s ease}
.brikpanel-pe-featured-star:hover{background:#f1f1f1;color:var(--pe-text,#303030)}
.brikpanel-pe-featured-star:active{transform:scale(.92)}
.brikpanel-pe-featured-star:focus-visible{outline:2px solid var(--pe-text,#303030);outline-offset:1px}
.brikpanel-pe-featured-star.is-on{color:#eab308}
.brikpanel-pe-featured-star.is-on:hover{color:#ca8a04;background:#fef9c3}

/* Header overflow ("More actions") menu — on desktop the wrapper and its menu
   are display:contents so View product / Duplicate / Add new render inline in
   the header exactly as before, and the kebab trigger is hidden. The mobile
   breakpoint (≤782px) re-enables the wrapper as a real popover to keep the
   sticky header compact. */
.brikpanel-pe-header-overflow{display:contents}
.brikpanel-pe-overflow-trigger{display:none}
.brikpanel-pe-overflow-menu{display:contents}

/* Content */
.brikpanel-pe-content{max-width:820px;margin:0 auto;padding:1.5rem 2rem 3rem;display:flex;flex-direction:column;gap:1rem}

/* Product-type note — shown when the product owns a WooCommerce panel this
   editor cannot render (bundles, composites, bookings). Deliberately quiet:
   it states a fact, it is not a warning. Literal colour fallbacks because the
   `--pe-*` tokens live on `.brikpanel-pe` and an unresolved var() would render
   the note transparent. */
.brikpanel-pe-typenote{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem 1rem;background:var(--pe-card,#fff);border:1px solid var(--pe-border,#e3e3e3);border-radius:var(--pe-radius-sm,.5rem);box-shadow:var(--pe-shadow,0 1px 3px rgba(0,0,0,.08));font-size:.8125rem;color:var(--pe-text-secondary,#616161)}
.brikpanel-pe-typenote svg{flex:0 0 auto;margin-top:.125rem;color:var(--pe-text-muted,#8a8a8a)}
.brikpanel-pe-typenote a{color:var(--pe-text,#303030);text-decoration:underline}
.brikpanel-pe-typenote a:hover{color:var(--pe-primary-hover,#1a1a1a)}

/* Widescreen — OPT-IN, off by default (Settings ▸ "Use the full screen width").
   Everything here hangs off `.brikpanel-pe-widescreen` on the editor root, so
   with the setting off none of it matches and the layout is the plain centred
   820px column, exactly as it has always been.

   When on, two things change together, and they only make sense together.

   WIDTH IS A PERCENTAGE, NOT PIXELS. This used to step 820 → 1240 → 1500px and
   stop. A merchant on a ~3000px monitor still saw a 1500px editor marooned in
   the middle with 750px of empty page on each side, which is the complaint that
   started this: "it looks small on a very big screen". A percentage has no such
   ceiling — the editor is always 90% of the space it is given, so it grows with
   the monitor instead of ignoring it.

   THE COLUMN SPLITS IN TWO. Percentage width alone would make it worse, not
   better: a Cost of goods card holding one price box has no use for 2700px, and
   a row of them reads as a stack of near-empty bars. So the flex column becomes
   a two-column grid. Short cards pair up; cards whose content genuinely wants
   the room — the variations table, the description editors, embedded
   third-party panels — take the whole row via `.brikpanel-pe-card-wide` below.

   Two columns at every size above the breakpoint, not `auto-fill`: three or four
   columns of form fields stop reading as a form and start reading as a
   dashboard, and the eye loses the top-to-bottom order the merchant arranged. */
@media screen and (min-width:1360px){
.brikpanel-pe-widescreen .brikpanel-pe-content{max-width:90%}
/* border-box so a card measures the same here as it does below the breakpoint,
   where it is sized by the column rather than by its own width. The grid track
   already sets the width, so no width:100% is needed. */
.brikpanel-pe-widescreen .brikpanel-pe-content *{box-sizing:border-box}


/* Short-value controls keep a readable measure instead of stretching across a
   1500px card. A price box 700px wide is no more usable than a 320px one, and
   it parks the value far from its own label. Long-form controls — the title,
   the description editors, the variations table, the image dropzone, embedded
   third-party metaboxes — are deliberately NOT capped here: those are the ones
   that actually earn the extra width, and they are why the setting exists.
   justify-content:start keeps the capped columns packed to the left instead of
   spreading them across the card with gaps between. */
.brikpanel-pe-widescreen .brikpanel-pe-row{grid-template-columns:repeat(2,minmax(0,var(--pe-field-max)));justify-content:start}
.brikpanel-pe-widescreen .brikpanel-pe-row-3{grid-template-columns:repeat(3,minmax(0,var(--pe-field-max)));justify-content:start}
/* Search-plus-list pickers (Category, Brand, Upsells, Cross-sells) get their
   own slightly roomier cap: a term tree needs more than a price box, but a
   1450px-wide "Search categories..." field with checkboxes hugging the far
   left is the single worst-looking control on a large monitor. Capping the
   WRAPPER rather than the input keeps the search field, the term list and the
   absolutely-positioned results dropdown on the same edge. */
.brikpanel-pe-widescreen .brikpanel-pe-cat-wrap,
.brikpanel-pe-widescreen .brikpanel-pe-linked{max-width:var(--pe-panel-max)}
/* Same cap for the fields WooCommerce and other plugins render INSIDE our
   cards ("Additional product data", "Fields from your other plugins"). The
   base rule above forces width:100%!important on those so a foreign field
   inherits this editor's look; at 1500px that turned a Regular Price box into
   a 1450px trough. Needs !important to beat that rule, and the extra
   `.brikpanel-pe-widescreen` gives it the specificity to win.
   textarea and input[type=url] are left out on purpose: a purchase note or a
   download URL is genuinely long-form and does want the room. */
.brikpanel-pe-widescreen .brikpanel-pe-wc-fields-content input[type="text"],
.brikpanel-pe-widescreen .brikpanel-pe-wc-fields-content input[type="number"],
.brikpanel-pe-widescreen .brikpanel-pe-wc-fields-content input[type="email"],
.brikpanel-pe-widescreen .brikpanel-pe-wc-fields-content input[type="search"],
.brikpanel-pe-widescreen .brikpanel-pe-wc-fields-content input[type="tel"],
.brikpanel-pe-widescreen .brikpanel-pe-wc-fields-content input[type="date"],
.brikpanel-pe-widescreen .brikpanel-pe-wc-fields-content select,
.brikpanel-pe-widescreen .brikpanel-pe-metabox-content input[type="text"],
.brikpanel-pe-widescreen .brikpanel-pe-metabox-content input[type="number"],
.brikpanel-pe-widescreen .brikpanel-pe-metabox-content input[type="email"],
.brikpanel-pe-widescreen .brikpanel-pe-metabox-content input[type="search"],
.brikpanel-pe-widescreen .brikpanel-pe-metabox-content input[type="tel"],
.brikpanel-pe-widescreen .brikpanel-pe-metabox-content input[type="date"],
.brikpanel-pe-widescreen .brikpanel-pe-metabox-content select,
.brikpanel-pe-widescreen .brikpanel-pe-var-extras input[type="text"],
.brikpanel-pe-widescreen .brikpanel-pe-var-extras input[type="number"],
.brikpanel-pe-widescreen .brikpanel-pe-var-extras input[type="email"],
.brikpanel-pe-widescreen .brikpanel-pe-var-extras input[type="search"],
.brikpanel-pe-widescreen .brikpanel-pe-var-extras input[type="tel"],
.brikpanel-pe-widescreen .brikpanel-pe-var-extras input[type="date"],
.brikpanel-pe-widescreen .brikpanel-pe-var-extras select{max-width:var(--pe-field-max)!important}

/* BrikPanel's own lone short fields. These sit directly in a card rather than
   in a two-up row, so nothing else was holding them back: Menu order and
   Weight were rendering 1450px wide. The slug group opts out by class — its
   prefix is a whole store URL and needs the room. Token fields (tags,
   attribute terms) and the product title are untouched on purpose: they hold
   many values or a long one, and the width is the point. */
.brikpanel-pe-widescreen .brikpanel-pe-field > input[type="number"],
.brikpanel-pe-widescreen .brikpanel-pe-field > .brikpanel-pe-input-group:not(.brikpanel-pe-slug-group){max-width:var(--pe-field-max)}
/* "+ Add new category/brand" opens under the picker; lining the two up keeps
   the card from growing a second, wider left edge. */
.brikpanel-pe-widescreen .brikpanel-pe-inline-form{max-width:var(--pe-panel-max)}

/* SEO card: the CARD lines up with the rest, its BODY keeps the measure it was
   designed at. Two different things live behind this one card. BrikPanel's own
   SEO form is a meta title (70 chars) and a meta description (160) sitting under
   a Google snippet preview — stretched to 1450px the preview stops resembling a
   search result and the counters drift far from the text they count. A foreign
   SEO panel (Yoast, Rank Math, All in One SEO) is a short-field form that 3.2.92
   deliberately kept narrow for the same reason. Both get the old ~820px card's
   inner width, so nothing inside them moved; only the card edge did.
   SEOPress is the exception and says so with .brikpanel-pe-seo-panel-native: its
   panel is a three-column layout tuned and measured at the full width in 3.2.92,
   and squeezing it back would undo that work. */
.brikpanel-pe-widescreen .brikpanel-pe-seo-card:not(.brikpanel-pe-seo-panel-native) > *{max-width:var(--pe-prose-max)}

/* A textarea sitting on its own in a card is prose, not a document: the
   purchase note is a couple of sentences mailed to the buyer, and at 1450px it
   was the widest thing on the page, wedged between two 352px fields. Same
   measure as the SEO body, so the two read as one system. The description
   editors are contenteditable divs, not textareas, and keep the full width —
   they are the reason someone switches this setting on. */
.brikpanel-pe-widescreen .brikpanel-pe-field > textarea{max-width:var(--pe-prose-max)}
}

/* The two column wrappers are inert until widescreen turns them on.
   `display:contents` removes the wrapper box entirely and hands its children
   straight to `.brikpanel-pe-content`, so with the setting off — or on a narrow
   screen — the cards are flex items of the same single column they have always
   been, byte for byte the old layout. */
.brikpanel-pe-col-main,.brikpanel-pe-col-side{display:contents}

/* TWO COLUMNS — main + side, the WordPress/WooCommerce shape.

   An earlier revision made this an even 2×1fr grid over the flat card list.
   It measured fine and looked terrible: pairing was decided by whatever two
   cards happened to be adjacent in the merchant's order, so Permalink (139px
   tall) sat beside Product images (272px) with a 133px hole under it, and any
   odd card — Price, Brand, the Digital toggles — left the whole other half of
   its row empty. Four empty half-rows on one product.

   A main column and a side column fix that by construction: each column flows
   independently, so a short card is simply followed by the next short card and
   no hole can open. Which column a card lands in is decided in PHP by what the
   card HOLDS (see $bpe_side_slugs), not by where it happens to sit in the list.

   The side track is proportional with a floor and a ceiling: ~256px on a 1440px
   laptop, growing to 24rem and stopping there. 22% rather than a rounder 25%
   because the variations table is the widest thing in the main column and every
   percent taken by the sidebar comes straight out of it — at 24% the table was
   7px short of fitting on a 1920px screen and fell back to its scrollbar. Fixed pixels would eat the main
   column on small laptops (a 22rem side leaves main at 716px, narrower than the
   820px you get with the setting off), and an uncapped fraction would give a
   3000px monitor a 700px sidebar of one-line fields. clamp() keeps main at or
   above its old width at every size. */
@media screen and (min-width:1360px){
.brikpanel-pe-widescreen .brikpanel-pe-content{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(16rem,22%,24rem);
  /* align-items:start so a short column does not stretch to the tall one. */
  align-items:start;
}
.brikpanel-pe-widescreen .brikpanel-pe-col-main,
.brikpanel-pe-widescreen .brikpanel-pe-col-side{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:0;
}
/* The side column is narrow by design, so the field caps that keep a price box
   readable in a wide card would otherwise leave it floating in a column barely
   wider than itself. Inside the sidebar every control simply fills it. */
.brikpanel-pe-widescreen .brikpanel-pe-col-side .brikpanel-pe-row,
.brikpanel-pe-widescreen .brikpanel-pe-col-side .brikpanel-pe-row-3{grid-template-columns:minmax(0,1fr)}
.brikpanel-pe-widescreen .brikpanel-pe-col-side .brikpanel-pe-cat-wrap,
.brikpanel-pe-widescreen .brikpanel-pe-col-side .brikpanel-pe-linked,
.brikpanel-pe-widescreen .brikpanel-pe-col-side .brikpanel-pe-inline-form,
.brikpanel-pe-widescreen .brikpanel-pe-col-side .brikpanel-pe-field>input[type="number"],
.brikpanel-pe-widescreen .brikpanel-pe-col-side .brikpanel-pe-field>.brikpanel-pe-input-group,
.brikpanel-pe-widescreen .brikpanel-pe-col-side .brikpanel-pe-field>textarea{max-width:none}
/* "+ Add new category/brand" is a name + parent + button on one line. That line
   needs ~500px; the sidebar is 260px on a laptop, so it used to push the parent
   dropdown clean out of the column. Stack it instead — same treatment the phone
   breakpoint already gives it. */
.brikpanel-pe-widescreen .brikpanel-pe-col-side .brikpanel-pe-inline-form{flex-wrap:wrap}
.brikpanel-pe-widescreen .brikpanel-pe-col-side .brikpanel-pe-inline-form>*{flex:1 1 100%}
}
/* Card.
   Literal fallbacks are intentional: a card must NEVER lose its background,
   border or shadow even if it ends up outside the `.brikpanel-pe` cascade root
   (e.g. a third-party metabox script reparents the postbox subtree, or another
   plugin resets the custom properties). Without fallbacks the card's
   var(--pe-*) values resolve to empty and the whole card renders fully
   transparent — the "Additional fields" metabox card looked background-less. */
.brikpanel-pe-card{background:var(--pe-card,#fff);border-radius:var(--pe-radius,.75rem);border:1px solid var(--pe-border,#e3e3e3);padding:1.25rem 1.5rem;box-shadow:var(--pe-shadow,0 1px 3px rgba(0,0,0,.08))}
.brikpanel-pe-card>label:first-child{display:block;font-size:.8125rem;font-weight:600;color:var(--pe-text);margin-bottom:.75rem}

/* Fields */
.brikpanel-pe-field{margin-bottom:.75rem}
.brikpanel-pe-field:last-child{margin-bottom:0}
.brikpanel-pe-field label{display:block;font-size:.8125rem;font-weight:600;color:var(--pe-text);margin-bottom:.375rem}
.brikpanel-pe-field input[type="text"],.brikpanel-pe-field input[type="number"],.brikpanel-pe-field input[type="url"],.brikpanel-pe-field textarea,.brikpanel-pe-field select{width:100%;padding:.625rem .75rem;font-size:.875rem;color:var(--pe-text);background:var(--pe-card);border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);outline:none;transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box;line-height:1.5}
.brikpanel-pe-field input:focus,.brikpanel-pe-field textarea:focus,.brikpanel-pe-field select:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-field input::placeholder,.brikpanel-pe-field textarea::placeholder{color:var(--pe-text-muted)}
.brikpanel-pe-field input.has-error,.brikpanel-pe-field textarea.has-error{border-color:var(--pe-error);box-shadow:0 0 0 1px var(--pe-error)}
.brikpanel-pe-field-error{font-size:.75rem;color:var(--pe-error);margin-top:.25rem;min-height:0;overflow:hidden}

/* Input Group */
.brikpanel-pe-input-group{display:flex;align-items:stretch;border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.brikpanel-pe-input-group:focus-within{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-input-group input{border:none!important;box-shadow:none!important;border-radius:0!important;flex:1;min-width:0}
.brikpanel-pe-input-prefix,.brikpanel-pe-input-suffix{display:flex;align-items:center;padding:0 .75rem;font-size:.875rem;font-weight:500;color:var(--pe-text-secondary);background:#f7f7f7;border-right:1px solid var(--pe-border);white-space:nowrap;user-select:none}
.brikpanel-pe-input-suffix{border-right:none;border-left:1px solid var(--pe-border)}
.brikpanel-pe-slug-prefix{max-width:60%;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:calc(2.5rem - 2px)}
.brikpanel-pe-input-group.small{height:2rem}
/* min-height:0 is the load-bearing part: WP admin forces min-height:40px on
   text inputs, so inside this 32px group the field stayed 40px tall, spilled
   past the border and centred its text ~4px BELOW the prefix. Height 100% plus
   a normal line-height puts both back on the same middle. */
.brikpanel-pe-input-group.small input{padding:0 .5rem;font-size:.8125rem;height:100%;min-height:0;line-height:normal}
.brikpanel-pe-input-group.small .brikpanel-pe-input-prefix{padding:0 .5rem;font-size:.8125rem}
.brikpanel-pe-input.small{height:2rem;padding:0 .5rem!important;font-size:.8125rem!important;width:80px}

/* Row */
.brikpanel-pe-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* Toggle Row */
.brikpanel-pe-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.25rem 0;margin-bottom:.5rem}
.brikpanel-pe-toggle-row:last-child{margin-bottom:0}
.brikpanel-pe-toggle-row>span{font-size:.875rem;font-weight:500;color:var(--pe-text)}
.brikpanel-pe-toggle-row+.brikpanel-pe-toggle-row{margin-top:.25rem;padding-top:.75rem;border-top:1px solid var(--pe-border)}
.brikpanel-pe-toggle-label{display:flex;flex-direction:column;gap:.125rem;min-width:0;flex:1}
.brikpanel-pe-toggle-help{font-size:.75rem;font-weight:400;color:var(--pe-text-muted);line-height:1.4}
.brikpanel-pe-switch input:disabled+.brikpanel-pe-slider{cursor:not-allowed;opacity:.6}

/* Switch */
.brikpanel-pe-switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.brikpanel-pe-switch input{opacity:0;width:0;height:0}
.brikpanel-pe-slider{position:absolute;inset:0;background:#ccc;border-radius:22px;cursor:pointer;transition:background .15s ease}
.brikpanel-pe-slider::before{content:"";position:absolute;width:16px;height:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .15s ease;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.brikpanel-pe-switch input:checked+.brikpanel-pe-slider{background:var(--pe-primary)}
.brikpanel-pe-switch input:checked+.brikpanel-pe-slider::before{transform:translateX(18px)}

/* Collapse — GPU-accelerated via transform for smooth feel */
.brikpanel-pe-collapse{display:grid;grid-template-rows:0fr;grid-template-columns:minmax(0,1fr);opacity:0;transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1),opacity .2s ease;margin-top:0}
.brikpanel-pe-collapse>*{overflow:hidden;min-width:0}
.brikpanel-pe-collapse.open{grid-template-rows:1fr;opacity:1;margin-top:.75rem}
.brikpanel-pe-collapse.open>.brikpanel-pe-var-wizard{overflow:visible}

/* Buttons */
.brikpanel-pe-btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.5rem 1rem;font-size:.8125rem;font-weight:550;border:none;border-radius:var(--pe-radius-sm);cursor:pointer;transition:background .15s ease,box-shadow .1s ease;white-space:nowrap;line-height:1.3}
.brikpanel-pe-btn.primary{background:var(--pe-primary);color:#fff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.1)}
.brikpanel-pe-btn.primary:hover{background:var(--pe-primary-hover)}
.brikpanel-pe-btn.primary:active{box-shadow:inset 0 2px 0 rgba(0,0,0,.3)}
.brikpanel-pe-btn.secondary{background:var(--pe-card);color:var(--pe-text);box-shadow:inset 0 0 0 1px var(--pe-border),0 1px 0 rgba(0,0,0,.05)}
.brikpanel-pe-btn.secondary:hover{background:#f7f7f7}
.brikpanel-pe-btn.small{padding:.25rem .625rem;font-size:.75rem;height:2rem}
.brikpanel-pe-btn-text{display:inline-flex;align-items:center;gap:.25rem;background:none;border:none;color:var(--pe-text-secondary);font-size:.8125rem;font-weight:500;cursor:pointer;padding:.25rem .5rem;border-radius:var(--pe-radius-sm);transition:background .15s ease}
.brikpanel-pe-btn-text:hover{color:var(--pe-text);background:var(--pe-bg)}
.brikpanel-pe-btn:disabled{opacity:.5;cursor:not-allowed}

/* Link */
.brikpanel-pe-link{display:inline-block;font-size:.8125rem;color:var(--pe-text-secondary);text-decoration:none;margin-top:.5rem;cursor:pointer;transition:color .15s ease}
.brikpanel-pe-link:hover{color:var(--pe-text)}

/* Tooltip */
.brikpanel-pe-tooltip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;font-weight:700;color:var(--pe-text-muted);border:1px solid var(--pe-text-muted);border-radius:50%;cursor:help;position:relative;vertical-align:middle;margin-left:.25rem}
.brikpanel-pe-tooltip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--pe-text);color:#fff;font-size:.6875rem;font-weight:400;padding:.5rem .625rem;border-radius:var(--pe-radius-sm);white-space:normal;width:220px;line-height:1.4;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease;z-index:100}
.brikpanel-pe-tooltip:hover::after{opacity:1;visibility:visible}

/* Char Count */
.brikpanel-pe-char-count{display:block;text-align:right;font-size:.6875rem;color:var(--pe-text-muted);margin-top:.25rem}

/* Inline Form */
.brikpanel-pe-inline-form{display:flex;gap:.5rem;align-items:flex-end}
.brikpanel-pe-inline-form input,.brikpanel-pe-inline-form select{flex:1;padding:.5rem .625rem;font-size:.8125rem;border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);outline:none}
.brikpanel-pe-inline-form input:focus,.brikpanel-pe-inline-form select:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}

/* Images */
.brikpanel-pe-images{display:flex;flex-direction:column;gap:.75rem}
.brikpanel-pe-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem;border:2px dashed var(--pe-border);border-radius:var(--pe-radius);background:#fafafa;cursor:pointer;transition:border-color .15s ease,background .15s ease;min-height:120px}
.brikpanel-pe-dropzone:hover,.brikpanel-pe-dropzone.dragover{border-color:var(--pe-text-muted);background:#f5f5f5}
.brikpanel-pe-dropzone p{font-size:.8125rem;color:var(--pe-text-muted);margin:0}
.brikpanel-pe-gallery{display:flex;flex-wrap:wrap;gap:.5rem}
.brikpanel-pe-gallery-item{position:relative;width:80px;height:80px;border-radius:var(--pe-radius-sm);overflow:hidden;border:2px solid transparent;cursor:grab;background:#f7f7f7}
.brikpanel-pe-gallery-item:first-child{border-color:var(--pe-primary)}
.brikpanel-pe-gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.brikpanel-pe-gallery-item-badge{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:.5625rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#fff;background:var(--pe-primary);padding:1px 0}
.brikpanel-pe-gallery-item-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;font-size:14px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.brikpanel-pe-gallery-item:hover .brikpanel-pe-gallery-item-remove{display:flex}
.brikpanel-pe-gallery-item-video{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;line-height:0;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.brikpanel-pe-gallery-item:hover .brikpanel-pe-gallery-item-video{display:flex}
.brikpanel-pe-gallery-item-video.is-active{display:flex;background:var(--pe-primary)}
/* Upload spinner placeholder */
.brikpanel-pe-gallery-item.is-uploading{border-color:var(--pe-primary);animation:bpe-pulse 1.2s ease-in-out infinite}
.brikpanel-pe-gallery-item.is-uploading::after{content:"";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.7);border-radius:inherit;z-index:3}
.brikpanel-pe-gallery-item.is-uploading::before{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:2.5px solid var(--pe-border);border-top-color:var(--pe-primary);border-radius:50%;z-index:4;animation:bpe-spin .6s linear infinite}
@keyframes bpe-spin{to{transform:rotate(360deg)}}
@keyframes bpe-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.brikpanel-pe-gallery-item.ui-sortable-helper{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:scale(1.05)}
.brikpanel-pe-gallery-item.ui-sortable-placeholder{visibility:visible!important;background:var(--pe-bg);border:2px dashed var(--pe-border)}

/* Categories — hierarchy */
.brikpanel-pe-cat-wrap{border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);overflow:hidden}
.brikpanel-pe-cat-search{width:100%;padding:.5rem .75rem;font-size:.8125rem;border:none;border-bottom:1px solid var(--pe-border);outline:none;background:#fafafa;box-sizing:border-box}
.brikpanel-pe-cat-search:focus{background:var(--pe-card)}
.brikpanel-pe-cat-list{max-height:200px;overflow-y:auto;padding:.5rem}
.brikpanel-pe-cat-tree{list-style:none;margin:0;padding:0}
/* Shown instead of the tree when the taxonomy has no terms at all, so an
   empty Category or Brand box reads as "nothing here yet" rather than broken. */
.brikpanel-pe-cat-empty{margin:0;padding:.5rem .25rem;font-size:.8125rem;color:var(--pe-text-muted,#8a8a8a)}
.brikpanel-pe-cat-children{list-style:none;margin:0;padding:0 0 0 1rem;border-left:1px solid var(--pe-border);margin-left:.625rem}
.brikpanel-pe-cat-tree li{margin:0;padding:0}
.brikpanel-pe-cat-tree label{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;padding:.25rem .375rem;border-radius:4px;cursor:pointer;transition:background .1s ease;color:var(--pe-text);font-weight:400!important;margin:0}
.brikpanel-pe-cat-tree label:hover{background:var(--pe-bg)}
.brikpanel-pe-cat-tree input[type="checkbox"]{margin:0;flex-shrink:0}

/* Rich Text Editor */
.brikpanel-pe-editor-toolbar{display:flex;gap:2px;padding:.375rem;border:1px solid var(--pe-input-border);border-bottom:none;border-radius:var(--pe-radius-sm) var(--pe-radius-sm) 0 0;background:#fafafa}
.brikpanel-pe-editor-toolbar button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;border-radius:4px;cursor:pointer;color:var(--pe-text-secondary);font-size:.8125rem;transition:background .1s ease}
.brikpanel-pe-editor-toolbar button:hover:not(:disabled){background:var(--pe-border);color:var(--pe-text)}
.brikpanel-pe-editor-toolbar button:disabled{opacity:.35;cursor:not-allowed}
.brikpanel-pe-editor-toolbar button.is-active{background:var(--pe-text);color:#fff}
.brikpanel-pe-editor-toolbar button.is-active:hover{background:var(--pe-text);color:#fff}
.brikpanel-pe-editor-toolbar .brikpanel-pe-html-toggle{margin-left:auto}
/* Custom block-format dropdown (replaces a native <select>, which steals the
   contenteditable selection when its popup opens). Selectors are scoped so
   they beat the generic `.brikpanel-pe-editor-toolbar button` sizing rule. */
.brikpanel-pe-editor-toolbar .brikpanel-pe-fmt{position:relative;display:flex;flex:0 0 auto;margin-right:2px}
.brikpanel-pe-editor-toolbar .brikpanel-pe-fmt-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:.5rem;width:auto;min-width:6.25rem;height:28px;box-sizing:border-box;padding:0 .5rem 0 .625rem;border:1px solid transparent;border-radius:4px;background:none;color:var(--pe-text);font-size:.8125rem;font-weight:550;line-height:1;cursor:pointer;transition:background .1s ease,border-color .1s ease}
.brikpanel-pe-editor-toolbar .brikpanel-pe-fmt-trigger:hover:not(:disabled){background:var(--pe-border);color:var(--pe-text)}
.brikpanel-pe-fmt.is-open .brikpanel-pe-fmt-trigger{background:#fff;border-color:var(--pe-input-border);color:var(--pe-text)}
.brikpanel-pe-editor-toolbar .brikpanel-pe-fmt-trigger:disabled{opacity:.35;cursor:not-allowed}
.brikpanel-pe-fmt-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brikpanel-pe-fmt-trigger svg{flex:none;color:var(--pe-text-muted);transition:transform .15s ease}
.brikpanel-pe-fmt.is-open .brikpanel-pe-fmt-trigger svg{transform:rotate(180deg)}
.brikpanel-pe-editor-toolbar .brikpanel-pe-fmt-menu{position:absolute;top:calc(100% + .375rem);left:0;z-index:50;min-width:11rem;display:none;flex-direction:column;padding:.3125rem;background:var(--pe-card);border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);box-shadow:0 6px 20px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.04)}
.brikpanel-pe-fmt.is-open .brikpanel-pe-fmt-menu{display:flex}
.brikpanel-pe-editor-toolbar .brikpanel-pe-fmt-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;height:auto;min-height:34px;padding:0 .625rem;background:none;border:none;border-radius:5px;color:var(--pe-text);font-size:.8125rem;font-weight:450;text-align:left;cursor:pointer;transition:background .1s ease}
.brikpanel-pe-editor-toolbar .brikpanel-pe-fmt-item:hover{background:var(--pe-bg);color:var(--pe-text)}
.brikpanel-pe-editor-toolbar .brikpanel-pe-fmt-item.is-active,
.brikpanel-pe-editor-toolbar .brikpanel-pe-fmt-item.is-active:hover{background:var(--pe-bg);color:var(--pe-text);font-weight:550}
.brikpanel-pe-fmt-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pe-text);line-height:1.2}
.brikpanel-pe-fmt-item[data-format="h1"] .brikpanel-pe-fmt-name{font-size:1rem;font-weight:700}
.brikpanel-pe-fmt-item[data-format="h2"] .brikpanel-pe-fmt-name{font-size:.9375rem;font-weight:650}
.brikpanel-pe-fmt-item[data-format="h3"] .brikpanel-pe-fmt-name{font-size:.875rem;font-weight:600}
.brikpanel-pe-fmt-item[data-format="h4"] .brikpanel-pe-fmt-name{font-size:.8125rem;font-weight:600}
.brikpanel-pe-fmt-item[data-format="h5"] .brikpanel-pe-fmt-name{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.brikpanel-pe-fmt-item[data-format="blockquote"] .brikpanel-pe-fmt-name{font-style:italic;color:var(--pe-text-secondary)}
.brikpanel-pe-fmt-check{flex:none;color:var(--pe-text);opacity:0;transition:opacity .1s ease}
.brikpanel-pe-fmt-item.is-active .brikpanel-pe-fmt-check{opacity:1}
/* Text-colour dropdown (mirrors the format dropdown's popover styling). */
.brikpanel-pe-editor-toolbar .brikpanel-pe-colorpick{position:relative;display:flex;flex:0 0 auto}
.brikpanel-pe-editor-toolbar .brikpanel-pe-color-trigger{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:4px;background:none;cursor:pointer}
.brikpanel-pe-editor-toolbar .brikpanel-pe-color-trigger:hover:not(:disabled){background:var(--pe-border)}
.brikpanel-pe-colorpick.is-open .brikpanel-pe-color-trigger{background:#fff;box-shadow:inset 0 0 0 1px var(--pe-input-border)}
.brikpanel-pe-color-a{font-weight:700;font-size:.8125rem;color:var(--pe-text);border-bottom:3px solid #d72c0d;line-height:1;padding-bottom:1px}
.brikpanel-pe-colorpick-menu{position:absolute;top:calc(100% + .375rem);left:0;z-index:50;display:none;grid-template-columns:repeat(4,1fr);gap:6px;padding:.5rem;background:var(--pe-card);border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);box-shadow:0 6px 20px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.04)}
.brikpanel-pe-colorpick.is-open .brikpanel-pe-colorpick-menu{display:grid}
.brikpanel-pe-editor-toolbar .brikpanel-pe-color-swatch{width:22px;height:22px;padding:0;border:1px solid rgba(0,0,0,.18);border-radius:5px;cursor:pointer;transition:transform .1s ease}
.brikpanel-pe-editor-toolbar .brikpanel-pe-color-swatch:hover{transform:scale(1.12)}
/* Link dialog */
/* The dialog is appended to <body>, outside .brikpanel-pe, so the design
   tokens must be redeclared here or var(--pe-*) resolves to nothing and the
   box/buttons render transparent. */
.brikpanel-pe-linkdlg{--pe-bg:#f1f1f1;--pe-card:#fff;--pe-text:#303030;--pe-text-secondary:#616161;--pe-text-muted:#8a8a8a;--pe-border:#e3e3e3;--pe-input-border:#8a8a8a;--pe-input-focus:#303030;--pe-primary:#303030;--pe-primary-hover:#1a1a1a;--pe-radius-sm:.5rem;--pe-radius:.75rem;position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.brikpanel-pe-linkdlg[hidden]{display:none}
.brikpanel-pe-linkdlg-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.brikpanel-pe-linkdlg-box{position:relative;width:380px;max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);overflow-y:auto;background:var(--pe-card);border:1px solid var(--pe-border);border-radius:var(--pe-radius);box-shadow:0 12px 40px rgba(0,0,0,.18);padding:1.25rem 1.5rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.brikpanel-pe-linkdlg-title{font-size:1rem;font-weight:600;color:var(--pe-text);margin:0 0 .875rem}
.brikpanel-pe-linkdlg-lbl{display:block;font-size:.8125rem;font-weight:600;color:var(--pe-text);margin:0 0 .375rem}
.brikpanel-pe-linkdlg-url{width:100%;box-sizing:border-box;padding:.625rem .75rem;font-size:.875rem;color:var(--pe-text);background:var(--pe-card);border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);outline:none;transition:border-color .15s,box-shadow .15s}
.brikpanel-pe-linkdlg-url:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-linkdlg-check{display:flex;align-items:center;gap:.5rem;margin:.875rem 0 0;font-size:.8125rem;color:var(--pe-text);cursor:pointer}
.brikpanel-pe-linkdlg-check input{margin:0;width:15px;height:15px;cursor:pointer}
.brikpanel-pe-linkdlg-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem}
.brikpanel-pe-editor-divider{width:1px;align-self:center;height:18px;margin:0 4px;background:var(--pe-border);flex:none}
.brikpanel-pe-editor{min-height:120px;padding:.75rem;font-size:.875rem;line-height:1.6;border:1px solid var(--pe-input-border);border-radius:0 0 var(--pe-radius-sm) var(--pe-radius-sm);outline:none;transition:border-color .15s ease,box-shadow .15s ease;overflow-y:auto;color:var(--pe-text)}
.brikpanel-pe-editor:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-editor:empty:before{content:attr(data-placeholder);color:var(--pe-text-muted);pointer-events:none}
.brikpanel-pe-editor ul,.brikpanel-pe-editor ol{padding-left:1.5rem;margin:.5rem 0}
.brikpanel-pe-editor ul{list-style:disc outside}
.brikpanel-pe-editor ol{list-style:decimal outside}
.brikpanel-pe-editor ul ul{list-style:circle outside}
.brikpanel-pe-editor ul ul ul{list-style:square outside}
.brikpanel-pe-editor li{display:list-item;list-style:inherit;margin:.25rem 0}
.brikpanel-pe-editor p{margin:0 0 .5rem}
.brikpanel-pe-editor h2{font-size:1.125rem;font-weight:600;line-height:1.3;margin:.75rem 0 .375rem}
.brikpanel-pe-editor h3{font-size:1rem;font-weight:600;line-height:1.3;margin:.625rem 0 .375rem}
.brikpanel-pe-editor h4{font-size:.9375rem;font-weight:600;line-height:1.3;margin:.5rem 0 .25rem}
.brikpanel-pe-editor h2:first-child,.brikpanel-pe-editor h3:first-child,.brikpanel-pe-editor h4:first-child{margin-top:0}
.brikpanel-pe-editor a{color:#2563eb;text-decoration:underline}
.brikpanel-pe-editor blockquote{margin:.5rem 0;padding:.25rem 0 .25rem .875rem;border-left:3px solid var(--pe-border);color:var(--pe-text-secondary)}
.brikpanel-pe-editor code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;background:#f1f1f1;padding:.1em .35em;border-radius:3px}
.brikpanel-pe-editor table{border-collapse:collapse;width:100%;margin:.625rem 0;font-size:.8125rem}
.brikpanel-pe-editor table td,.brikpanel-pe-editor table th{border:1px solid var(--pe-border);padding:.375rem .5rem;text-align:left;vertical-align:top}
.brikpanel-pe-editor table th{background:#fafafa;font-weight:600}
.brikpanel-pe-editor table caption{padding:.25rem 0;font-size:.75rem;color:var(--pe-text-secondary);text-align:left}
.brikpanel-pe-editor-source{display:block;width:100%;min-height:160px;padding:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem;line-height:1.5;color:var(--pe-text);background:#fafafa;border:1px solid var(--pe-input-border);border-radius:0 0 var(--pe-radius-sm) var(--pe-radius-sm);outline:none;resize:vertical;box-sizing:border-box;white-space:pre-wrap;transition:border-color .15s ease,box-shadow .15s ease}
.brikpanel-pe-editor-source:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-editor-source[hidden]{display:none!important}
.brikpanel-pe-editor[hidden]{display:none!important}
/* Inserted images + the four WordPress alignment classes (mirrors front-end
   theme behaviour so the editor preview matches the live product page). */
.brikpanel-pe-editor img{max-width:100%;height:auto;border-radius:4px;cursor:pointer}
.brikpanel-pe-editor img.alignleft{float:left;margin:.25rem 1rem .5rem 0}
.brikpanel-pe-editor img.alignright{float:right;margin:.25rem 0 .5rem 1rem}
.brikpanel-pe-editor img.aligncenter{display:block;margin-left:auto;margin-right:auto}
.brikpanel-pe-editor img.alignnone{display:inline-block}
.brikpanel-pe-editor img.brikpanel-lightbox{outline:2px dashed var(--pe-border);outline-offset:2px}
/* Image dialog (rides on .brikpanel-pe-linkdlg base for vars/box/backdrop) */
.brikpanel-pe-imgdlg-preview{display:flex;align-items:center;justify-content:center;min-height:120px;margin:0 0 .75rem;padding:.5rem;background:var(--pe-bg);border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);overflow:hidden}
.brikpanel-pe-imgdlg-preview.is-empty{color:var(--pe-text-muted);font-size:.8125rem}
.brikpanel-pe-imgdlg-preview img{max-width:100%;max-height:220px;border-radius:4px}
.brikpanel-pe-imgdlg-choose{width:100%;justify-content:center}
.brikpanel-pe-imgdlg-align,.brikpanel-pe-imgdlg-size{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem;padding:.25rem;background:var(--pe-bg);border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm)}
.brikpanel-pe-imgdlg-align button,.brikpanel-pe-imgdlg-size button{padding:.4375rem .25rem;font-size:.8125rem;font-weight:550;color:var(--pe-text-secondary);background:none;border:none;border-radius:calc(var(--pe-radius-sm) - .1875rem);cursor:pointer;transition:background .1s ease,color .1s ease}
.brikpanel-pe-imgdlg-align button:hover,.brikpanel-pe-imgdlg-size button:hover{background:var(--pe-border);color:var(--pe-text)}
.brikpanel-pe-imgdlg-align button.is-active,.brikpanel-pe-imgdlg-size button.is-active{background:var(--pe-primary);color:#fff}

/* Blocksy product video dialog (rides on .brikpanel-pe-linkdlg base) */
.brikpanel-pe-viddlg-help{font-size:.8125rem;color:var(--pe-text-muted);line-height:1.5;margin:0 0 1rem}
.brikpanel-pe-viddlg-filerow{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--pe-bg);border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm)}
.brikpanel-pe-viddlg-filename{flex:1;min-width:0;font-size:.8125rem;color:var(--pe-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brikpanel-pe-viddlg-filerow .brikpanel-pe-btn{flex-shrink:0}
.brikpanel-pe-viddlg-actions{align-items:center}

/* Variation Wizard */
.brikpanel-pe-var-wizard{position:relative;min-width:0;max-width:100%}
.brikpanel-pe-var-step{min-width:0;max-width:100%}
.brikpanel-pe-var-step{animation:bpe-slide-in .2s cubic-bezier(.4,0,.2,1)}
@keyframes bpe-slide-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
.brikpanel-pe-var-step h3{font-size:.875rem;font-weight:600;margin:0 0 .75rem;color:var(--pe-text)}
.brikpanel-pe-var-step-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.brikpanel-pe-var-step-header h3{margin:0}
.brikpanel-pe-var-step-header .brikpanel-pe-var-forward{margin-left:auto}

/* Choice cards — variation templates + the attributes box, evenly sized */
.brikpanel-pe-var-templates{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem}
.brikpanel-pe-var-template{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1.25rem 1rem;border:1px solid var(--pe-border);border-radius:var(--pe-radius);cursor:pointer;text-align:center;transition:border-color .15s ease,box-shadow .15s ease;background:var(--pe-card)}
.brikpanel-pe-var-template:hover{border-color:var(--pe-text-muted);background:#fafafa}
.brikpanel-pe-var-template.active{border-color:var(--pe-primary);box-shadow:0 0 0 1px var(--pe-primary)}
.brikpanel-pe-var-template-icon{color:var(--pe-text-secondary);margin-bottom:.25rem}
.brikpanel-pe-var-template strong{font-size:.875rem;font-weight:600;color:var(--pe-text)}
.brikpanel-pe-var-template small{font-size:.6875rem;color:var(--pe-text-muted)}
/* Count badge on the "Attributes" box — shows how many specs are defined */
.brikpanel-pe-attr-count{position:absolute;top:.5rem;right:.5rem;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:600;line-height:1;color:#fff;background:var(--pe-primary);border-radius:9px}
.brikpanel-pe-attr-count[hidden]{display:none}

/* Add-attribute controls: existing-attribute select + new-name input + quick add */
.brikpanel-pe-attr-add{margin-bottom:1rem}
/* Searchable attribute picker — custom popover dropdown that replaces the
   plain native <select>. Trigger looks like a field; panel holds a search box
   and a scrollable, hoverable option list. */
.brikpanel-pe-combo{position:relative}
.brikpanel-pe-combo-trigger{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.5rem .75rem;font-size:.8125rem;color:var(--pe-text);background:var(--pe-card);border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);cursor:pointer;text-align:left;transition:border-color .15s ease,box-shadow .15s ease}
.brikpanel-pe-combo-trigger:hover{border-color:var(--pe-text-muted)}
.brikpanel-pe-combo.open .brikpanel-pe-combo-trigger{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-combo-value{flex:1;color:var(--pe-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brikpanel-pe-combo-chevron{flex-shrink:0;color:var(--pe-text-muted);transition:transform .15s ease}
.brikpanel-pe-combo.open .brikpanel-pe-combo-chevron{transform:rotate(180deg)}
.brikpanel-pe-combo-panel{display:none;position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:30;background:var(--pe-card);border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);box-shadow:0 6px 20px rgba(0,0,0,.12);overflow:hidden}
.brikpanel-pe-combo.open .brikpanel-pe-combo-panel{display:block}
.brikpanel-pe-combo-search{position:relative;padding:.5rem;border-bottom:1px solid var(--pe-border)}
.brikpanel-pe-combo-search svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--pe-text-muted);pointer-events:none}
.brikpanel-pe-combo-search input{width:100%;box-sizing:border-box;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);outline:none;padding:.4375rem .625rem .4375rem 2rem;font-size:.8125rem;color:var(--pe-text);background:var(--pe-bg)}
.brikpanel-pe-combo-search input:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus);background:var(--pe-card)}
.brikpanel-pe-combo-search input::placeholder{color:var(--pe-text-muted)}
.brikpanel-pe-combo-list{list-style:none;margin:0;padding:.25rem;max-height:240px;overflow-y:auto}
.brikpanel-pe-combo-option{padding:.5rem .625rem;font-size:.8125rem;color:var(--pe-text);border-radius:.375rem;cursor:pointer;transition:background .1s ease}
.brikpanel-pe-combo-option:hover,.brikpanel-pe-combo-option.active{background:var(--pe-bg)}
.brikpanel-pe-combo-empty{padding:.625rem;font-size:.8125rem;color:var(--pe-text-muted);text-align:center}
.brikpanel-pe-attr-divider{display:flex;align-items:center;gap:.625rem;margin:.75rem 0;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--pe-text-muted)}
.brikpanel-pe-attr-divider::before,.brikpanel-pe-attr-divider::after{content:"";flex:1;height:1px;background:var(--pe-border)}
.brikpanel-pe-attr-inputgroup{display:flex;align-items:stretch;border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);background:var(--pe-card);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.brikpanel-pe-attr-inputgroup:focus-within{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-attr-inputgroup input{flex:1;min-width:0;border:none;outline:none;background:transparent;padding:.5rem .75rem;font-size:.8125rem;color:var(--pe-text)}
.brikpanel-pe-attr-inputgroup input::placeholder{color:var(--pe-text-muted)}
.brikpanel-pe-attr-inputgroup button{flex-shrink:0;border:none;border-left:1px solid var(--pe-border);background:var(--pe-card);color:var(--pe-text);padding:0 1.125rem;font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .15s ease}
.brikpanel-pe-attr-inputgroup button:hover{background:#f7f7f7}
.brikpanel-pe-attr-inputgroup button:active{background:#f0f0f0}
.brikpanel-pe-attr-quickrow{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:.625rem}
.brikpanel-pe-attr-quicklabel{font-size:.75rem;color:var(--pe-text-muted)}
.brikpanel-pe-chip-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.3125rem .6875rem;font-size:.75rem;font-weight:550;color:var(--pe-text-secondary);background:var(--pe-bg);border:1px solid var(--pe-border);border-radius:999px;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}
.brikpanel-pe-chip-btn:hover{color:var(--pe-text);border-color:var(--pe-text-muted);background:#fff}

/* Tag Input */
.brikpanel-pe-tag-group{margin-bottom:1rem}
.brikpanel-pe-tag-group>label{display:block;font-size:.8125rem;font-weight:600;margin-bottom:.375rem;color:var(--pe-text)}
.brikpanel-pe-tag-input-wrap{display:flex;flex-wrap:wrap;gap:.375rem;padding:.5rem;border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);background:var(--pe-card);min-height:40px;align-items:center;cursor:text;transition:border-color .15s ease,box-shadow .15s ease}
.brikpanel-pe-tag-input-wrap:focus-within{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.1875rem .5rem;font-size:.8125rem;font-weight:500;background:var(--pe-bg);border:1px solid var(--pe-border);border-radius:4px;color:var(--pe-text);white-space:nowrap;animation:bpe-tag-in .15s ease}
@keyframes bpe-tag-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.brikpanel-pe-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;background:none;border:none;cursor:pointer;color:var(--pe-text-muted);font-size:14px;line-height:1;padding:0;border-radius:50%;transition:color .1s ease}
.brikpanel-pe-tag-remove:hover{color:var(--pe-error);background:rgba(215,44,13,.1)}
.brikpanel-pe-tag-input-wrap input{flex:1;min-width:80px;border:none;outline:none;font-size:.8125rem;padding:.125rem 0;background:transparent;color:var(--pe-text)}

/* Drag-to-reorder attribute values. Not cosmetic: this order becomes the term
   order WooCommerce uses for the storefront dropdown, so the tags advertise
   themselves as draggable. The helper drops the entry animation, which would
   otherwise replay on every pickup. */
/* float has NO layout effect on a flex item (CSS Flexbox §3), so this is inert
   visually — verified by comparing every tag's box before and after. It exists
   solely because jQuery UI decides a sortable list is horizontal via
   _isFloating(), which tests `float` and `display` (wp-includes/js/jquery/ui/
   sortable.js:87). Our tags are authored `display:inline-flex`, but a flex item
   gets its display blockified to `flex`, so that test failed, sortable assumed
   a VERTICAL list, compared only Y — identical for every tag on a row — and
   never found an intersection: dragging did nothing at all. The computed value
   of `float` survives blockification, so this restores the correct detection. */
.brikpanel-pe-tag{cursor:grab;float:left}
.brikpanel-pe-tag:active{cursor:grabbing}
.brikpanel-pe-tag.ui-sortable-helper{animation:none;cursor:grabbing;opacity:.95;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.brikpanel-pe-tag-placeholder{display:inline-flex;align-items:center;min-width:48px;height:26px;border:1px dashed var(--pe-input-border);border-radius:4px;background:var(--pe-bg);visibility:visible!important}
.brikpanel-pe-attr-order-note{margin:.375rem 0 0;font-size:.75rem;line-height:1.5;color:var(--pe-text-muted)}

/* Tag Suggestions dropdown */
.brikpanel-pe-tag-suggestions{position:relative;z-index:10;display:none;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);background:var(--pe-card);box-shadow:0 4px 12px rgba(0,0,0,.1);margin-top:.25rem;max-height:200px;overflow-y:auto}
.brikpanel-pe-tag-suggestion{padding:.5rem .75rem;font-size:.8125rem;cursor:pointer;transition:background .1s ease;color:var(--pe-text)}
.brikpanel-pe-tag-suggestion:hover{background:var(--pe-bg)}
/* "Add <what you typed>" row — a value the attribute does not have yet. Set
   apart from the real terms below it so it never reads as an existing option. */
.brikpanel-pe-tag-suggestion-new{font-weight:550;border-bottom:1px solid var(--pe-border)}

/* "Select all (N)" / "Clear all" for a global attribute, in the row's label line. */
.brikpanel-pe-attr-selectall{margin-right:auto;padding:.125rem .5rem;font-family:inherit;font-size:.75rem;font-weight:550;line-height:1.5;color:var(--pe-text-secondary);background:var(--pe-card);border:1px solid var(--pe-border);border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .15s ease,color .15s ease}
.brikpanel-pe-attr-selectall:hover{background:var(--pe-bg);color:var(--pe-text)}

/* Attribute term suggestions (absolute positioned) */
.brikpanel-pe-attr-input-container{position:relative}
.brikpanel-pe-attr-term-suggestions{position:absolute;top:100%;left:0;right:0;z-index:20;margin-top:.125rem}

/* Product attributes (specs) — the third box inside the variations card */
.brikpanel-pe-var-step[data-step="attr"] .brikpanel-pe-help-text{margin:-.25rem 0 .75rem;font-size:.75rem;color:var(--pe-text-secondary)}
#bpe-attr-list{display:flex;flex-direction:column;gap:.25rem}
.brikpanel-pe-attr-row{position:relative;padding-left:1.25rem}
.brikpanel-pe-attr-drag{position:absolute;left:-.125rem;top:.3rem;display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.25rem;color:var(--pe-text-muted);cursor:grab;opacity:0;transition:opacity .12s ease,color .12s ease;touch-action:none}
.brikpanel-pe-attr-row:hover .brikpanel-pe-attr-drag,.brikpanel-pe-attr-drag:focus-visible{opacity:1}
.brikpanel-pe-attr-drag:hover{color:var(--pe-text-secondary)}
.brikpanel-pe-attr-drag:active{cursor:grabbing}
.brikpanel-pe-attr-row.ui-sortable-helper{opacity:.9;box-shadow:var(--pe-shadow)}
.brikpanel-pe-attr-row-placeholder{border:1px dashed var(--pe-input-border);border-radius:var(--pe-radius-sm);background:#fafafa;margin-bottom:.5rem;visibility:visible!important}
.brikpanel-pe-attr-row .brikpanel-pe-tag-group{margin-bottom:.5rem}
.brikpanel-pe-attr-row .brikpanel-pe-tag-group>label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.brikpanel-pe-attr-remove{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:transparent;border:1px solid var(--pe-border);border-radius:50%;cursor:pointer;color:var(--pe-text-muted);font-size:14px;line-height:1;padding:0;transition:color .1s ease,border-color .1s ease,background .1s ease;font-weight:400}
.brikpanel-pe-attr-remove:hover{color:var(--pe-error);border-color:var(--pe-error);background:rgba(215,44,13,.06)}

/* "Variable product" toggle row: stacked label + hint */
.brikpanel-pe-toggle-text{display:flex;flex-direction:column;gap:.125rem}
.brikpanel-pe-toggle-text>span{font-size:.875rem;font-weight:600;color:var(--pe-text)}
.brikpanel-pe-toggle-text small{font-size:.75rem;color:var(--pe-text-muted);font-weight:400}

/* Card header band: "Variable product" title + subtitle on the left, switch on
   the right, separated from the attribute editor by an inset divider so the card
   reads as header → body like a Shopify admin card. */
.brikpanel-pe-var-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--pe-border)}

/* Unified attribute editor + per-row "Use for variations" switch */
.brikpanel-pe-attr-editor{margin-top:0}
.brikpanel-pe-attr-label{display:block;font-size:.8125rem;font-weight:600;color:var(--pe-text);margin-bottom:.375rem}
.brikpanel-pe-attr-row-controls{display:inline-flex;align-items:center;gap:.625rem;flex-shrink:0}
.brikpanel-pe-usevar{display:none;align-items:center;gap:.375rem;cursor:pointer;font-size:.75rem;color:var(--pe-text-secondary);user-select:none}
#bpe-var-card.bpe-variable-on .brikpanel-pe-usevar{display:inline-flex}
/* "Show on product page" — same switch, but always visible: a simple product's
   specs need it just as much as a variable product's axes. */
.brikpanel-pe-showpage{display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;font-size:.75rem;color:var(--pe-text-secondary);user-select:none}
.brikpanel-pe-showpage input{position:absolute;opacity:0;width:0;height:0}
.brikpanel-pe-showpage input:checked+.brikpanel-pe-usevar-slider{background:var(--pe-primary)}
.brikpanel-pe-showpage input:checked+.brikpanel-pe-usevar-slider::before{transform:translateX(14px)}
.brikpanel-pe-showpage input:focus-visible+.brikpanel-pe-usevar-slider,.brikpanel-pe-usevar input:focus-visible+.brikpanel-pe-usevar-slider{outline:2px solid var(--pe-input-focus);outline-offset:2px}
.brikpanel-pe-usevar input{position:absolute;opacity:0;width:0;height:0}
.brikpanel-pe-usevar-slider{position:relative;display:inline-block;width:32px;height:18px;background:#ccc;border-radius:18px;transition:background .15s ease;flex-shrink:0}
.brikpanel-pe-usevar-slider::before{content:"";position:absolute;width:12px;height:12px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.brikpanel-pe-usevar input:checked+.brikpanel-pe-usevar-slider{background:var(--pe-primary)}
.brikpanel-pe-usevar input:checked+.brikpanel-pe-usevar-slider::before{transform:translateX(14px)}
.brikpanel-pe-usevar-text{white-space:nowrap}

/* Variation builder (Generate + table), only shown while Variable is on */
.brikpanel-pe-var-build{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--pe-border)}
/* Build actions row. The wrapper exists because .brikpanel-pe-var-build also
   holds the variation table, so it cannot be the flex row itself. `gap` is the
   only spacing here — the stale hint drops its own margin inside this row. */
.brikpanel-pe-var-build-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.brikpanel-pe-var-build-actions #bpe-clear-vars{margin-left:auto}
.brikpanel-pe-var-build-actions #bpe-clear-vars[hidden]{display:none}
.brikpanel-pe-var-stale-hint{display:inline-block;margin-left:.625rem;font-size:.75rem;font-weight:550;color:var(--pe-error);vertical-align:middle}
.brikpanel-pe-var-build-actions .brikpanel-pe-var-stale-hint{margin-left:0}
.brikpanel-pe-var-stale-hint[hidden]{display:none}
/* Destructive secondary button — same palette as the per-row variation delete:
   monochrome at rest so it never shouts from the corner of the strip, red only
   once the pointer commits to it. */
.brikpanel-pe-btn.brikpanel-pe-btn-danger:hover{background:#fce4e4;color:var(--pe-error,#d72c0d);box-shadow:inset 0 0 0 1px #f1b0b0,0 1px 0 rgba(0,0,0,.05)}
.brikpanel-pe-btn.brikpanel-pe-btn-danger:disabled{opacity:.6;cursor:default}
.brikpanel-pe-btn.brikpanel-pe-btn-danger:disabled:hover{background:#fff;color:var(--pe-text)}
.brikpanel-pe-var-table-section{margin-top:1rem}

/* Select styling */
.brikpanel-pe-select{width:100%;padding:.625rem .75rem;font-size:.875rem;color:var(--pe-text);background:var(--pe-card);border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);outline:none;transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23616161' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}
.brikpanel-pe-select:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}

/* Select styling */
.brikpanel-pe-select{width:100%;padding:.625rem .75rem;font-size:.875rem;color:var(--pe-text);background:var(--pe-card);border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);outline:none;transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23616161' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem}
.brikpanel-pe-select:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}

/* Product type field — sits right under the name inside the first card */
.brikpanel-pe-type-field{margin-top:.75rem}

/* ============================================================
   Third-party metabox + WC Product Data — full design override
   ============================================================ */

/* Card containers */
.brikpanel-pe-metaboxes-wrap .brikpanel-pe-metabox{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--pe-border)}
.brikpanel-pe-metaboxes-wrap .brikpanel-pe-metabox:first-of-type{margin-top:0;padding-top:0;border-top:none}
.brikpanel-pe-metabox-title{font-size:.875rem;font-weight:600;color:var(--pe-text);margin:0 0 .75rem}

/* Base reset — force BrikPanel font + color on ALL content */
.brikpanel-pe-metabox-content,.brikpanel-pe-wc-fields-content{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif!important;font-size:.875rem;line-height:1.5;color:var(--pe-text)}
.brikpanel-pe-metabox-content *,.brikpanel-pe-wc-fields-content *{box-sizing:border-box}
.brikpanel-pe-metabox-content *:not(.dashicons):not([class*="dashicons-"]):not(.mce-ico):not([class*="mce-i-"]):not(.acf-accordion-icon):not(.acf-icon-picker-list-icon),.brikpanel-pe-wc-fields-content *:not(.dashicons):not([class*="dashicons-"]):not(.mce-ico):not([class*="mce-i-"]):not(.acf-accordion-icon):not(.acf-icon-picker-list-icon){font-family:inherit!important}
.brikpanel-pe-metabox-content .dashicons,.brikpanel-pe-metabox-content [class*="dashicons-"],.brikpanel-pe-metabox-content .acf-accordion-icon,.brikpanel-pe-metabox-content .acf-icon-picker-list-icon,.brikpanel-pe-wc-fields-content .dashicons,.brikpanel-pe-wc-fields-content [class*="dashicons-"],.brikpanel-pe-wc-fields-content .acf-accordion-icon,.brikpanel-pe-wc-fields-content .acf-icon-picker-list-icon{font-family:dashicons!important}

/* ALL text inputs, textareas, selects — full override with !important */
.brikpanel-pe-metabox-content input[type="text"],.brikpanel-pe-metabox-content input[type="number"],.brikpanel-pe-metabox-content input[type="url"],.brikpanel-pe-metabox-content input[type="email"],.brikpanel-pe-metabox-content input[type="search"],.brikpanel-pe-metabox-content input[type="tel"],.brikpanel-pe-metabox-content textarea,.brikpanel-pe-metabox-content select,
.brikpanel-pe-wc-fields-content input[type="text"],.brikpanel-pe-wc-fields-content input[type="number"],.brikpanel-pe-wc-fields-content input[type="url"],.brikpanel-pe-wc-fields-content input[type="email"],.brikpanel-pe-wc-fields-content input[type="search"],.brikpanel-pe-wc-fields-content textarea,.brikpanel-pe-wc-fields-content select{width:100%!important;max-width:100%!important;padding:.625rem .75rem!important;font-size:.875rem!important;color:var(--pe-text)!important;background:var(--pe-card)!important;border:1px solid var(--pe-input-border)!important;border-radius:var(--pe-radius-sm)!important;outline:none!important;box-sizing:border-box!important;transition:border-color .15s ease,box-shadow .15s ease!important;height:auto!important;line-height:1.5!important;box-shadow:none!important;margin:0!important}
.brikpanel-pe-metabox-content input:focus,.brikpanel-pe-metabox-content textarea:focus,.brikpanel-pe-metabox-content select:focus,
.brikpanel-pe-wc-fields-content input:focus,.brikpanel-pe-wc-fields-content textarea:focus,.brikpanel-pe-wc-fields-content select:focus{border-color:var(--pe-input-focus)!important;box-shadow:0 0 0 1px var(--pe-input-focus)!important}
.brikpanel-pe-metabox-content input::placeholder,.brikpanel-pe-wc-fields-content input::placeholder{color:var(--pe-text-muted)!important}

/* ALL labels */
.brikpanel-pe-metabox-content label,.brikpanel-pe-wc-fields-content label{display:block!important;float:none!important;width:auto!important;font-size:.8125rem!important;font-weight:600!important;color:var(--pe-text)!important;margin:0 0 .375rem!important;padding:0!important;line-height:1.5!important}
/* Restore plugin-owned hidden labels (ACF icon picker accessibility labels,
   etc.) — our blanket label rule above otherwise unhides them. */
.brikpanel-pe-metabox-content .acf-icon-picker-list-icon label,.brikpanel-pe-wc-fields-content .acf-icon-picker-list-icon label,.brikpanel-pe-metabox-content .screen-reader-text,.brikpanel-pe-wc-fields-content .screen-reader-text{display:none!important;clip:rect(1px,1px,1px,1px);position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important}
/* Inline labels for checkboxes/radios */
.brikpanel-pe-metabox-content label input[type="checkbox"],.brikpanel-pe-metabox-content label input[type="radio"],.brikpanel-pe-wc-fields-content label input[type="checkbox"],.brikpanel-pe-wc-fields-content label input[type="radio"]{width:auto!important;height:auto!important;margin:0 .375rem 0 0!important;padding:0!important;border:revert!important;border-radius:revert!important}
.brikpanel-pe-metabox-content label:has(input[type="checkbox"]),.brikpanel-pe-metabox-content label:has(input[type="radio"]),.brikpanel-pe-wc-fields-content label:has(input[type="checkbox"]),.brikpanel-pe-wc-fields-content label:has(input[type="radio"]){display:inline-flex!important;align-items:center!important;font-weight:400!important;cursor:pointer}

/* Visible, on-brand checkbox for metabox / WC-data content (e.g. the WP
   core Brands / taxonomy checklists). The rule above resets these to
   `border:revert;width:auto;height:auto`, which on top of wp-admin's
   `appearance:none` collapses the box to a 0px, border-less element —
   the merchant cannot see what to click. Re-style it as a square
   checkbox that matches the BrikPanel radio. Selectors carry `label` so
   they tie the reset rule's specificity and win by source order; the
   label-less variants cover checkboxes rendered outside a <label>. */
.brikpanel-pe-metabox-content input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]),.brikpanel-pe-metabox-content label input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]),.brikpanel-pe-wc-fields-content input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]),.brikpanel-pe-wc-fields-content label input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]){appearance:none!important;-webkit-appearance:none!important;width:16px!important;min-width:16px!important;height:16px!important;min-height:16px!important;flex:0 0 16px!important;margin:0 .4rem 0 0!important;padding:0!important;border:1px solid var(--pe-input-border)!important;border-radius:4px!important;background:#fff!important;box-shadow:none!important;cursor:pointer;position:relative;box-sizing:border-box!important;vertical-align:middle;transition:border-color .15s ease,background .15s ease}
.brikpanel-pe-metabox-content input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):hover,.brikpanel-pe-metabox-content label input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):hover,.brikpanel-pe-wc-fields-content input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):hover,.brikpanel-pe-wc-fields-content label input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):hover{border-color:var(--pe-text-secondary)!important}
.brikpanel-pe-metabox-content input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):checked,.brikpanel-pe-metabox-content label input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):checked,.brikpanel-pe-wc-fields-content input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):checked,.brikpanel-pe-wc-fields-content label input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):checked{background:var(--pe-primary)!important;border-color:var(--pe-primary)!important}
.brikpanel-pe-metabox-content input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):checked::after,.brikpanel-pe-metabox-content label input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):checked::after,.brikpanel-pe-wc-fields-content input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):checked::after,.brikpanel-pe-wc-fields-content label input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):checked::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);box-sizing:border-box}
.brikpanel-pe-metabox-content input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):focus,.brikpanel-pe-metabox-content label input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):focus,.brikpanel-pe-wc-fields-content input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):focus,.brikpanel-pe-wc-fields-content label input[type="checkbox"]:not([class*="switch"]):not([class*="toggle"]):focus{outline:none;border-color:var(--pe-primary)!important;box-shadow:0 0 0 1px var(--pe-primary)!important}

/* Headings inside metaboxes */
.brikpanel-pe-metabox-content h1,.brikpanel-pe-metabox-content h2,.brikpanel-pe-metabox-content h3,.brikpanel-pe-metabox-content h4,.brikpanel-pe-wc-fields-content h1,.brikpanel-pe-wc-fields-content h2,.brikpanel-pe-wc-fields-content h3,.brikpanel-pe-wc-fields-content h4{font-size:.875rem!important;font-weight:600!important;color:var(--pe-text)!important;margin:0 0 .5rem!important;padding:0!important;border:none!important;background:none!important}

/* Paragraphs, divs used as field wrappers */
.brikpanel-pe-metabox-content > div,.brikpanel-pe-metabox-content > div > div,.brikpanel-pe-wc-fields-content > div,.brikpanel-pe-wc-fields-content > p{margin-bottom:.75rem}
.brikpanel-pe-metabox-content > div:last-child,.brikpanel-pe-wc-fields-content > div:last-child,.brikpanel-pe-wc-fields-content > p:last-child{margin-bottom:0}

/* WC form-field pattern (from woocommerce_wp_text_input etc.) */
.brikpanel-pe-wc-fields-content .form-field,.brikpanel-pe-metabox-content .form-field,.brikpanel-pe-wc-fields-content .options_group,.brikpanel-pe-metabox-content .options_group{margin-bottom:.75rem!important;padding:0!important;border:none!important}
.brikpanel-pe-wc-fields-content .form-field:last-child,.brikpanel-pe-metabox-content .form-field:last-child{margin-bottom:0!important}
.brikpanel-pe-wc-fields-content p.form-field,.brikpanel-pe-metabox-content p.form-field{display:flex!important;flex-direction:column!important}
.brikpanel-pe-wc-fields-content .form-field .description,.brikpanel-pe-metabox-content .form-field .description{display:block!important;font-size:.75rem!important;color:var(--pe-text-muted)!important;margin-top:.25rem!important;font-style:normal!important;font-weight:400!important}
.brikpanel-pe-wc-fields-content .form-field input.short,.brikpanel-pe-wc-fields-content .form-field input.long{width:100%!important}
.brikpanel-pe-wc-fields-content .woocommerce_options_panel{padding:0!important}

/* Buttons inside metaboxes. Excludes:
   - .wp-color-result (wpColorPicker writes the selected hex into the
     element's inline background-color)
   - .acf-icon-picker-list-icon (icon-grid items render the chosen icon as
     the cell's background-image)
   - .tabs button / .nav-tab (third-party panel tabs use their own active
     state; our flat-button look erases the active highlight). */
.brikpanel-pe-metabox-content button:not(.wp-color-result):not(.acf-icon-picker-list-icon):not(.nav-tab),.brikpanel-pe-metabox-content .button:not(.wp-color-result):not(.acf-icon-picker-list-icon):not(.nav-tab),.brikpanel-pe-metabox-content input[type="button"],.brikpanel-pe-metabox-content input[type="submit"],.brikpanel-pe-wc-fields-content button:not(.wp-color-result):not(.acf-icon-picker-list-icon):not(.nav-tab),.brikpanel-pe-wc-fields-content .button:not(.wp-color-result):not(.acf-icon-picker-list-icon):not(.nav-tab){display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.375rem!important;padding:.5rem 1rem!important;font-size:.8125rem!important;font-weight:550!important;border:none!important;border-radius:var(--pe-radius-sm)!important;cursor:pointer!important;background:var(--pe-card)!important;color:var(--pe-text)!important;box-shadow:inset 0 0 0 1px var(--pe-border),0 1px 0 rgba(0,0,0,.05)!important;transition:background .15s ease!important;height:auto!important;line-height:1.3!important}
.brikpanel-pe-metabox-content button:not(.wp-color-result):not(.acf-icon-picker-list-icon):not(.nav-tab):hover,.brikpanel-pe-metabox-content .button:not(.wp-color-result):not(.acf-icon-picker-list-icon):not(.nav-tab):hover,.brikpanel-pe-wc-fields-content button:not(.wp-color-result):not(.acf-icon-picker-list-icon):not(.nav-tab):hover,.brikpanel-pe-wc-fields-content .button:not(.wp-color-result):not(.acf-icon-picker-list-icon):not(.nav-tab):hover{background:#f7f7f7!important}

/* Tab-like navigation (WPCode etc.) */
.brikpanel-pe-metabox-content ul[class*="tabs"],.brikpanel-pe-metabox-content .wpcode-admin-tabs{display:flex!important;flex-wrap:wrap!important;gap:2px!important;list-style:none!important;margin:0 0 .75rem!important;padding:.25rem!important;background:#f7f7f7!important;border-radius:var(--pe-radius-sm)!important;border:1px solid var(--pe-border)!important}
.brikpanel-pe-metabox-content ul[class*="tabs"] li,.brikpanel-pe-metabox-content .wpcode-admin-tabs li{margin:0!important;padding:0!important}
.brikpanel-pe-metabox-content ul[class*="tabs"] button,.brikpanel-pe-metabox-content .wpcode-admin-tabs button{padding:.375rem .75rem!important;font-size:.75rem!important;font-weight:500!important;border-radius:4px!important;background:transparent!important;color:var(--pe-text-secondary)!important;border:none!important;box-shadow:none!important;cursor:pointer!important}
.brikpanel-pe-metabox-content ul[class*="tabs"] button.active,.brikpanel-pe-metabox-content .wpcode-admin-tabs button.active{background:var(--pe-card)!important;color:var(--pe-text)!important;font-weight:600!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important}

/* Links */
.brikpanel-pe-metabox-content a,.brikpanel-pe-wc-fields-content a{color:var(--pe-text-secondary)!important;text-decoration:none!important;font-size:.8125rem!important}
.brikpanel-pe-metabox-content a:hover,.brikpanel-pe-wc-fields-content a:hover{color:var(--pe-text)!important}

/* Blur/upgrade upsell areas — tone down */
.brikpanel-pe-metabox-content .wpcode-blur-area{opacity:.85}
.brikpanel-pe-metabox-content [class*="upgrade"],.brikpanel-pe-metabox-content [class*="pro-"],.brikpanel-pe-metabox-content [class*="upsell"]{font-size:.75rem!important;color:var(--pe-text-muted)!important}

/* Hide toolbars, WC chrome */
.brikpanel-pe-wc-fields-content .toolbar,.brikpanel-pe-metabox-content .toolbar{display:none!important}
.brikpanel-pe-wc-fields-content .panel.hidden{display:none!important}

/* Variation reorder handle — narrow first column, invisible until the row is
   hovered or the handle is keyboard-focused, so the table reads exactly as
   before at rest. Matches the attribute-row handle above. */
.brikpanel-pe-var-table .var-drag-col{width:24px}
.brikpanel-pe-var-table .var-drag-cell{width:24px;padding:.5rem .125rem;vertical-align:middle;text-align:center}
.brikpanel-pe-var-table .var-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.25rem;color:var(--pe-text-muted,#8a8a8a);cursor:grab;opacity:0;transition:opacity .12s ease,color .12s ease;touch-action:none}
.brikpanel-pe-var-table tr.var-main-row:hover .var-drag-handle,.brikpanel-pe-var-table .var-drag-handle:focus-visible{opacity:1}
.brikpanel-pe-var-table .var-drag-handle:hover{color:var(--pe-text-secondary,#616161)}
.brikpanel-pe-var-table .var-drag-handle:active{cursor:grabbing}
/* Drop target while dragging a variation row */
tr.brikpanel-pe-var-row-placeholder td{height:44px;background:#fafafa;border:1px dashed var(--pe-input-border,#8a8a8a)}
/* Row whose combination is no longer produced by the current attribute values */
.brikpanel-pe-var-table .var-orphan-badge{display:inline-flex;align-items:center;margin-left:.5rem;padding:.0625rem .375rem;border:1px solid var(--pe-border,#e3e3e3);border-radius:999px;background:#f7f7f7;color:var(--pe-text-muted,#8a8a8a);font-size:.6875rem;font-weight:550;white-space:nowrap}

/* Sort control in the variation tools strip — same control metrics as the bulk
   fields beside it so the whole strip reads as one row of equal boxes. */
.brikpanel-pe-var-bulk #bpe-var-sort{width:auto;flex:0 1 auto;min-width:0;height:2.125rem;min-height:0;line-height:normal;padding:0 1.6rem 0 .5rem;font-size:.8125rem;background-color:var(--pe-card);border-radius:var(--pe-radius-sm);background-position:right .5rem center}

/* Variation row expander — revealed only when 3rd-party extras exist */
.brikpanel-pe-var-table .var-expand-col{width:28px}
.brikpanel-pe-var-table .var-expand-cell{width:28px;padding:.5rem .25rem;vertical-align:middle}
.brikpanel-pe-var-table .var-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid var(--pe-border);border-radius:4px;background:#fff;color:var(--pe-text-secondary);cursor:pointer;transition:background .15s ease,transform .15s ease}
.brikpanel-pe-var-table .var-expand-btn:hover{background:#f7f7f7;color:var(--pe-text)}
.brikpanel-pe-var-table .var-expand-btn.open{transform:rotate(180deg);background:#f0f0f0}
/* Per-row variation delete button — last column, monochrome until hover */
.brikpanel-pe-var-table .var-delete-col{width:32px}
.brikpanel-pe-var-table .var-delete-cell{width:32px;padding:.5rem .25rem;vertical-align:middle;text-align:center}
.brikpanel-pe-var-table .var-delete-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid var(--pe-border);border-radius:4px;background:#fff;color:var(--pe-text-muted);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.brikpanel-pe-var-table .var-delete-btn:hover{background:#fce4e4;color:var(--pe-error,#d72c0d);border-color:#f1b0b0}
.brikpanel-pe-var-table tr.var-extras-row>td{padding:0;background:#fafafa;border-top:none}
.brikpanel-pe-var-table tr.var-main-row.has-extra{border-bottom:none}
.brikpanel-pe-var-extras{padding:1rem 1.25rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.875rem;color:var(--pe-text)}
.brikpanel-pe-var-extras .form-field,.brikpanel-pe-var-extras p.form-field{margin-bottom:.75rem!important;padding:0!important;border:none!important;display:flex!important;flex-direction:column!important}
.brikpanel-pe-var-extras label{display:block!important;float:none!important;width:auto!important;font-size:.8125rem!important;font-weight:600!important;margin:0 0 .375rem!important;padding:0!important;color:var(--pe-text)!important}
.brikpanel-pe-var-extras label:has(input[type=checkbox]),.brikpanel-pe-var-extras label:has(input[type=radio]){display:inline-flex!important;align-items:center!important;font-weight:400!important}
.brikpanel-pe-var-extras input[type=text],.brikpanel-pe-var-extras input[type=number],.brikpanel-pe-var-extras input[type=email],.brikpanel-pe-var-extras input[type=url],.brikpanel-pe-var-extras textarea,.brikpanel-pe-var-extras select{width:100%!important;max-width:100%!important;padding:.5rem .625rem!important;font-size:.8125rem!important;border:1px solid var(--pe-input-border)!important;border-radius:.375rem!important;outline:none!important;box-shadow:none!important;background:#fff}
.brikpanel-pe-var-extras input:focus,.brikpanel-pe-var-extras textarea:focus,.brikpanel-pe-var-extras select:focus{border-color:var(--pe-input-focus)!important;box-shadow:0 0 0 1px var(--pe-input-focus)!important}
.brikpanel-pe-var-extras .options_group{padding:0!important;border:none!important}
.brikpanel-pe-var-extras .description{font-size:.75rem!important;color:var(--pe-text-muted)!important;margin-top:.25rem!important;font-style:normal!important}

/* WC Product Data tab groups (third-party fields grouped by original tab) */
.brikpanel-pe-wc-tab-group{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--pe-border)}
.brikpanel-pe-wc-tab-group:first-of-type{margin-top:0;padding-top:0;border-top:none}
.brikpanel-pe-wc-tab-title{font-size:.8125rem!important;font-weight:600!important;color:var(--pe-text-secondary)!important;margin:0 0 .75rem!important;text-transform:uppercase;letter-spacing:.03em}
/* Force-show third-party panel wrappers — WC hides them by default because
   they are normally behind a tab. Inside BrikPanel they must always be visible. */
.brikpanel-pe-wc-fields-content .panel,.brikpanel-pe-wc-fields-content .woocommerce_options_panel,.brikpanel-pe-wc-fields-content .brikpanel-pe-wc-panel{display:block!important;padding:0!important}
/* Hidden WC-shaped tab-nav used only to fire lazy-load handlers (see capture_wc_product_data_fields). */
.brikpanel-pe-wc-tabsim{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(1px,1px,1px,1px);margin:0!important;padding:0!important;border:0!important}
/* ============================================================
   Native-editor scaffold ("datawrap") reset.
   The card recreates the native ancestor chain
   #post > #woocommerce-product-data > .inside > .panel-wrap.product_data
   so third-party DELEGATED handlers (repeater "+ Add", remove-row,
   sortables) bind and fire. But WooCommerce admin.css scopes its
   20%-tabs / 80%-panel STRUCTURAL layout under that id — panels get
   float:left (RTL: float:right) + width:80%, which scatters the group
   titles around the floats inside our stacked card. Neutralise every
   structural id-scoped rule; selectors carry the card class + id so
   they out-rank WC's (id + 1 class) in both LTR and RTL.
   ============================================================ */
.brikpanel-pe-wc-fields #woocommerce-product-data .woocommerce_options_panel,
.brikpanel-pe-wc-fields #woocommerce-product-data .wc-metaboxes-wrapper{float:none!important;width:100%!important}
.brikpanel-pe-wc-fields #woocommerce-product-data .woocommerce_options_panel .wc-radios,
.brikpanel-pe-wc-fields #woocommerce-product-data .wc-metaboxes-wrapper .wc-radios{float:none!important}
.brikpanel-pe-wc-fields #woocommerce-product-data input.dp-applied{float:none!important}
.brikpanel-pe-wc-fields #woocommerce-product-data .panel-wrap{background:transparent!important;overflow:visible!important;padding:0!important}
.brikpanel-pe-wc-fields #woocommerce-product-data .inside{margin:0!important;padding:0!important}
.brikpanel-pe-wc-postsim{display:block}

/* ============================================================
   Stray inline accents from 3rd-party plugins.
   Some plugins wrap a field block in a div carrying an inline
   coloured border-left accent — e.g. WooCommerce Multi Currency
   uses `border-left:5px solid #f78080` around its per-currency
   price inputs. It clashes with the flat BrikPanel card, so any
   inline border-left/right accent inside third-party content is
   neutralised. Inline styles are non-!important, so a single
   !important here always wins.
   ============================================================ */
.brikpanel-pe-wc-fields-content [style*="border-left"],.brikpanel-pe-metabox-content [style*="border-left"],.brikpanel-pe-var-extras [style*="border-left"]{border-left:0!important;padding-left:0!important}
.brikpanel-pe-wc-fields-content [style*="border-right"],.brikpanel-pe-metabox-content [style*="border-right"],.brikpanel-pe-var-extras [style*="border-right"]{border-right:0!important;padding-right:0!important}

/* ============================================================
   React/component builders that ship their own brand-coloured
   styles (AcoWebs "Custom Product Addons" = wcpa_*, and similar).
   The component class names carry a per-build hash suffix, so we
   match on the stable prefix. Goal: re-tint every brand colour to
   the BrikPanel palette and flatten the nested header/list boxes
   so the whole thing reads as one clean section, not a plugin UI
   bolted on.
   ============================================================ */
/* Re-tint all builder text to the BrikPanel palette (kills the #172a68 blue). */
.brikpanel-pe-wc-fields-content [class*="wcpa_"],.brikpanel-pe-metabox-content [class*="wcpa_"]{color:var(--pe-text)!important}
/* Help / description lines → muted, like every other helper text. */
.brikpanel-pe-wc-fields-content [class*="wcpa_desc"],.brikpanel-pe-metabox-content [class*="wcpa_desc"]{color:var(--pe-text-muted)!important;font-size:.75rem!important;font-weight:400!important;margin:.25rem 0 .75rem!important}
/* Builder headings (form title, list title) → BrikPanel label size/weight. */
.brikpanel-pe-wc-fields-content [class*="wcpa_formTitle"],.brikpanel-pe-wc-fields-content [class*="wcpa_formListTitle"]{font-size:.8125rem!important;font-weight:600!important;color:var(--pe-text)!important;margin:0!important;letter-spacing:0!important}
/* The outer list box → single clean card border + radius. */
.brikpanel-pe-wc-fields-content [class*="wcpa_formListBlock"]{border:1px solid var(--pe-border)!important;border-radius:var(--pe-radius-sm)!important;background:var(--pe-card)!important;overflow:hidden!important;box-shadow:none!important}
/* Inner wraps must not double up borders/backgrounds. */
.brikpanel-pe-wc-fields-content [class*="wcpa_formListWrap"]{border:0!important;background:transparent!important;box-shadow:none!important}
/* The list header row (title + search) → neutral grey strip with a divider. */
.brikpanel-pe-wc-fields-content [class*="wcpa_formTitleWrap"]{background:#f7f7f7!important;border-bottom:1px solid var(--pe-border)!important;border-radius:0!important;padding:.625rem .75rem!important;display:flex!important;align-items:center!important;gap:.625rem!important}
/* Search box inside the header → BrikPanel input (beat the plugin's own rule). */
.brikpanel-pe-wc-fields-content [class*="wcpa_formSearch"]{padding:0!important;background:transparent!important;border:0!important;flex:1!important}
.brikpanel-pe-wc-fields-content [class*="wcpa_formSearch"] input{width:100%!important;padding:.5rem .625rem!important;font-size:.8125rem!important;border:1px solid var(--pe-input-border)!important;border-radius:.375rem!important;background:#fff!important;box-shadow:none!important;margin:0!important}
/* List rows → consistent padding + readable text, hover affordance. */
.brikpanel-pe-wc-fields-content [class*="wcpa_formList"] li{color:var(--pe-text)!important;font-size:.8125rem!important;padding:.5rem .75rem!important;margin:0!important;border-top:1px solid #f0f0f0!important;list-style:none!important;display:flex!important;align-items:center!important;gap:.5rem!important}
.brikpanel-pe-wc-fields-content [class*="wcpa_formList"]>li:first-child{border-top:0!important}
/* The top toolbar row (exclude toggle + Save) → tidy spacing, no brand chrome. */
.brikpanel-pe-wc-fields-content [class*="wcpa_topSec"]{background:transparent!important;border:0!important;padding:0!important;margin:0 0 .75rem!important}

/* ============================================================
   Third-party metabox chrome reset
   Strip WP postbox + ACF internal padding so metabox content
   aligns flush with the BrikPanel card — no nested-box look,
   no right-shift from double padding.
   ============================================================ */
.brikpanel-pe-metaboxes-wrap #poststuff,
.brikpanel-pe-metaboxes-wrap #post-body,
.brikpanel-pe-metaboxes-wrap #postbox-container-2,
.brikpanel-pe-metaboxes-wrap .meta-box-sortables{margin:0!important;padding:0!important;min-height:0!important;background:transparent!important;border:none!important;box-shadow:none!important}
.brikpanel-pe-metaboxes-wrap .postbox{background:transparent!important;border:none!important;box-shadow:none!important;margin:0!important;padding:0!important;min-width:0!important}
.brikpanel-pe-metaboxes-wrap .postbox + .postbox{margin-top:1rem!important;padding-top:1rem!important;border-top:1px solid var(--pe-border)!important}
.brikpanel-pe-metaboxes-wrap .postbox-header{background:transparent!important;border:none!important;box-shadow:none!important;margin:0 0 .5rem!important;padding:0!important;min-height:0!important}
.brikpanel-pe-metaboxes-wrap .postbox-header .hndle,
.brikpanel-pe-metaboxes-wrap .postbox-header h2.hndle{font-size:.8125rem!important;font-weight:600!important;color:var(--pe-text-secondary)!important;background:transparent!important;border:none!important;box-shadow:none!important;margin:0!important;padding:0!important;text-transform:uppercase;letter-spacing:.03em;line-height:1.3!important;cursor:default!important}
.brikpanel-pe-metaboxes-wrap .postbox-header .handle-actions,
.brikpanel-pe-metaboxes-wrap .postbox-header .handlediv,
.brikpanel-pe-metaboxes-wrap .postbox-header .handle-order-higher,
.brikpanel-pe-metaboxes-wrap .postbox-header .handle-order-lower,
.brikpanel-pe-metaboxes-wrap .postbox .toggle-indicator{display:none!important}
.brikpanel-pe-metaboxes-wrap .postbox .inside,
.brikpanel-pe-metaboxes-wrap .postbox .inside.brikpanel-pe-metabox-content{margin:0!important;padding:0!important;background:transparent!important;border:none!important}
.brikpanel-pe-metaboxes-wrap .postbox,
.brikpanel-pe-metaboxes-wrap .postbox .inside,
.brikpanel-pe-metaboxes-wrap .postbox .inside > *{max-width:100%;box-sizing:border-box}
.brikpanel-pe-metaboxes-wrap .postbox input[type="text"],
.brikpanel-pe-metaboxes-wrap .postbox input[type="search"],
.brikpanel-pe-metaboxes-wrap .postbox input[type="email"],
.brikpanel-pe-metaboxes-wrap .postbox input[type="url"],
.brikpanel-pe-metaboxes-wrap .postbox input[type="tel"],
.brikpanel-pe-metaboxes-wrap .postbox input[type="number"],
.brikpanel-pe-metaboxes-wrap .postbox textarea,
.brikpanel-pe-metaboxes-wrap .postbox select{max-width:100%;box-sizing:border-box}

/* SEO card — active-plugin variant. The SEO section renders the active plugin's
   native metabox (Yoast / Rank Math / AIOSEO / SEOPress) inline. Share the same
   `.brikpanel-pe-metaboxes-wrap` reset so the plugin's markup lays out inside
   the BrikPanel card frame instead of its own postbox chrome. */
.brikpanel-pe-seo-card--plugin > label{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.brikpanel-pe-seo-plugin-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:999px;background:#f1f1f1;color:var(--pe-text-secondary);font-size:.6875rem;font-weight:550;text-transform:none;letter-spacing:normal}
.brikpanel-pe-seo-plugin-inner{margin-top:.75rem}
.brikpanel-pe-seo-plugin-inner .brikpanel-pe-seo-plugin-box{margin:0!important}
.brikpanel-pe-seo-plugin-inner .brikpanel-pe-seo-plugin-box + .brikpanel-pe-seo-plugin-box{margin-top:1rem!important;padding-top:1rem!important;border-top:1px solid var(--pe-border)!important}
.brikpanel-pe-seo-plugin-inner #poststuff{padding:0!important;margin:0!important;min-width:0!important}
/* Yoast SEO: mute its own tabbed chrome so the big analysis/readability pills
   and Yoast's internal borders don't double-frame our card. */
.brikpanel-pe-seo-plugin-inner .wpseo-metabox-sidebar{display:none!important}
.brikpanel-pe-seo-plugin-inner #wpseo_meta .inside{padding:0!important}
.brikpanel-pe-seo-plugin-inner .wpseo-meta-section{border:none!important;padding:0!important;margin:0!important}
/* Rank Math: its app renders a React shell; just contain the canvas so it
   doesn't break out of the card width on mobile. */
.brikpanel-pe-seo-plugin-inner .rank-math-metabox-wrap{margin:0!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important}
.brikpanel-pe-seo-plugin-inner #rank-math-metabox-wrapper{max-width:100%}
/* AIOSEO: Vue app root — ensure loader + settings shell fill the card width. */
.brikpanel-pe-seo-plugin-inner #aioseo-post-settings-metabox{margin:0!important}
/* SEOPress: its tabbed metabox — normalize spacing so it sits inside our card. */
.brikpanel-pe-seo-plugin-inner #seopress_cpt_fields{padding:0!important;margin:0!important;border:none!important}

/* SEOPress 9.9+ "universal metabox": the React panel we mount inside the SEO
   card (and, when hand-placed from the section picker, inside a metabox card).
   Scope on the mount node's id so both placements are covered.

   SEOPress derives its whole palette from CSS custom properties it scopes to
   that same id, and those in turn fall back to the WP admin accent (a bright
   #3858E9 blue). Rather than fight individual rules, re-point the variables at
   BrikPanel's monochrome tokens, so everything downstream (tabs, buttons,
   links, focus rings) follows from that. Specificity beats SEOPress's own
   `body :is(#…,#…)` block (id+class vs id+type), so no !important is needed
   for the variables. Semantic alert/warning/success colours are deliberately
   left alone: those carry meaning, and the design system keeps colour for
   exactly that. */
.brikpanel-pe #seopress-js-module-seo-metabox-embed{
  --wp-components-color-accent:var(--pe-primary);
  --wp-admin-theme-color:var(--pe-primary);
  --primaryColor:var(--pe-primary);
  --backgroundPrimary:var(--pe-primary);
  --backgroundPrimaryHover:var(--pe-primary-hover);
  --spWPDefaultColor:var(--pe-primary);
  --colorP:var(--pe-text);
  --colorDark:var(--pe-text);
  --titleColor:var(--pe-text);
  --color:var(--pe-text-secondary);
  --paragraphColor:var(--pe-text-secondary);
  --borderColor:var(--pe-input-border);
  --borderColorLight:var(--pe-border);
  --borderColorCard:var(--pe-border);
  --borderColorTab:var(--pe-border);
  --backgroundSecondaryHover:var(--pe-bg);
}
/* Controls: SEOPress ships wp-components' 2px radius, which reads as a
   different form language next to BrikPanel's .5rem fields. */
.brikpanel-pe #seopress-js-module-seo-metabox-embed input:not([type=checkbox]):not([type=radio]),
.brikpanel-pe #seopress-js-module-seo-metabox-embed select,
.brikpanel-pe #seopress-js-module-seo-metabox-embed textarea,
.brikpanel-pe #seopress-js-module-seo-metabox-embed .components-button{border-radius:var(--pe-radius-sm)}
/* Primary buttons pick up the same bevel as BrikPanel's own primary button so
   the panel's Save does not read as a foreign control. */
.brikpanel-pe #seopress-js-module-seo-metabox-embed .components-button.is-primary{
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.1);
  font-weight:550;
}
/* The panel is already `--embedded` (static, no shadow); drop the leftover
   card chrome so it sits flush inside ours instead of framing itself again. */
.brikpanel-pe #seopress-js-module-seo-metabox-embed .sp-seo-metabox{border:none;background:transparent}

/* ---- Layout: SEOPress sizes by viewport, we give it a container ----------
   SEOPress lays the panel out as tab sidebar + form + Google preview and sizes
   those columns as PERCENTAGES of the panel (`.sp-tabs{width:15%}`,
   `.sp-main{width:85%}`, `.w-6/12{width:50%}`), while its breakpoints key off
   the VIEWPORT (782/960/1400px in metaboxe.css). That pairing works on
   post.php, where the panel is about as wide as the window. Inside BrikPanel
   the window is wide but the container is the 820px card, so the desktop
   percentages get applied to a box that cannot carry them.

   It only became visible with SEOPress Pro: its filters switch on one more top
   tab and four more sub-tabs (Schemas, Google News, Video Sitemap, Inspect
   URL, Internal Linking), and at 15% of 770px the sidebar is 108px, so every
   one of the twelve labels wrapped onto two or three lines.

   Below 600px SEOPress's own ruleset turns the sidebar into a full-width
   wrapping row, which is the right call on a phone, so this is gated to match
   that breakpoint exactly (measured: the `.sp-tabs{width:100%;display:flex;
   flex-wrap:wrap}` override lives in metaboxe.css's `max-width:600px` block,
   NOT the 782px one). Without the gate our `width:auto` outranks their
   `width:100%` (id+class beats id+type) and a 380px phone would carry a 176px
   sidebar beside a 200px form. SEOPress keys that switch to the viewport, so
   the gate is a viewport media query too, not a container query. */
@media only screen and (min-width: 601px){
  .brikpanel-pe #seopress-js-module-seo-metabox-embed .sp-tabs{
    flex:0 0 auto;
    width:auto;
    min-width:11rem;
  }
  /* `min-width:0` is load-bearing: without it the form pane refuses to shrink
     below its content's intrinsic width and pushes the sidebar back out. */
  .brikpanel-pe #seopress-js-module-seo-metabox-embed .sp-main{
    flex:1 1 auto;
    width:auto;
    min-width:0;
  }
}

/* Stack the Google preview under the form when the PANE (not the window) is
   narrow. A container query is the right tool precisely because the mismatch
   is container-vs-viewport: one rule then behaves correctly at the default
   820px card, at the 1240px widescreen column, and inside a hand-placed
   metabox card, without any of them needing their own number. Browsers
   without container query support simply keep SEOPress's 50/50, which is
   today's behaviour rather than a broken one. */
.brikpanel-pe #seopress-js-module-seo-metabox-embed{container-type:inline-size}
@container (max-width: 60rem){
  /* The row has to be allowed to wrap, or two 100% children just shrink back
     to 50% each and nothing changes. */
  .brikpanel-pe #seopress-js-module-seo-metabox-embed .sp-main .flex:has(> .w-6\/12){flex-wrap:wrap}
  .brikpanel-pe #seopress-js-module-seo-metabox-embed .sp-main .flex > .w-6\/12{width:100%}
}

/* ACF field containers — flatten padding + borders so fields align with the
   outer card edge and stack with consistent BrikPanel spacing. */
.brikpanel-pe-metabox-content .acf-field,
.brikpanel-pe-wc-fields-content .acf-field{padding:0!important;border:none!important;background:transparent!important;margin:0 0 .75rem!important;min-width:0!important;width:auto!important}
.brikpanel-pe-metabox-content .acf-field:last-child,
.brikpanel-pe-wc-fields-content .acf-field:last-child{margin-bottom:0!important}
.brikpanel-pe-metabox-content .acf-field .acf-label,
.brikpanel-pe-wc-fields-content .acf-field .acf-label{margin:0 0 .375rem!important;padding:0!important;float:none!important;width:auto!important}
.brikpanel-pe-metabox-content .acf-field .acf-label label,
.brikpanel-pe-wc-fields-content .acf-field .acf-label label{font-size:.8125rem!important;font-weight:600!important;color:var(--pe-text)!important;margin:0!important;padding:0!important;display:block!important;line-height:1.4!important}
.brikpanel-pe-metabox-content .acf-field .acf-label p.description,
.brikpanel-pe-wc-fields-content .acf-field .acf-label p.description{font-size:.75rem!important;color:var(--pe-text-muted)!important;margin:.25rem 0 0!important;padding:0!important;font-style:normal!important;font-weight:400!important;line-height:1.4!important}
.brikpanel-pe-metabox-content .acf-field .acf-input,
.brikpanel-pe-wc-fields-content .acf-field .acf-input{margin:0!important;padding:0!important;float:none!important;width:auto!important}
.brikpanel-pe-metabox-content .acf-field .acf-input > p.description,
.brikpanel-pe-wc-fields-content .acf-field .acf-input > p.description{font-size:.75rem!important;color:var(--pe-text-muted)!important;margin:.25rem 0 0!important;font-style:normal!important;font-weight:400!important}

/* ACF file / image uploader — align with BrikPanel dropzone aesthetic */
.brikpanel-pe-metabox-content .acf-file-uploader .hide-if-value,
.brikpanel-pe-metabox-content .acf-image-uploader .hide-if-value,
.brikpanel-pe-wc-fields-content .acf-file-uploader .hide-if-value,
.brikpanel-pe-wc-fields-content .acf-image-uploader .hide-if-value{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.75rem!important;padding:.75rem 1rem!important;border:1px dashed var(--pe-border)!important;border-radius:var(--pe-radius-sm)!important;background:#fafafa!important}
.brikpanel-pe-metabox-content .acf-file-uploader .hide-if-value p,
.brikpanel-pe-wc-fields-content .acf-file-uploader .hide-if-value p{margin:0!important;font-size:.8125rem!important;color:var(--pe-text-muted)!important;display:flex!important;align-items:center!important;gap:.625rem!important;flex:1!important}
.brikpanel-pe-metabox-content .acf-file-uploader .show-if-value,
.brikpanel-pe-wc-fields-content .acf-file-uploader .show-if-value{border:1px solid var(--pe-border)!important;border-radius:var(--pe-radius-sm)!important;padding:.75rem!important;background:#fff!important}

/* ACF true/false switch — rebuild as the BrikPanel toggle */
.brikpanel-pe-metabox-content .acf-field-true-false .acf-input,
.brikpanel-pe-wc-fields-content .acf-field-true-false .acf-input{display:flex!important;align-items:center!important;gap:.625rem!important}
.brikpanel-pe-metabox-content .acf-switch,
.brikpanel-pe-wc-fields-content .acf-switch{position:relative!important;display:inline-block!important;width:40px!important;height:22px!important;border:none!important;border-radius:22px!important;background:#ccc!important;box-shadow:none!important;overflow:hidden!important;cursor:pointer!important;padding:0!important;margin:0!important;font-size:0!important;line-height:0!important;transition:background .15s ease!important;flex-shrink:0!important;float:none!important}
.brikpanel-pe-metabox-content .acf-switch.-on,
.brikpanel-pe-wc-fields-content .acf-switch.-on{background:var(--pe-primary)!important}
.brikpanel-pe-metabox-content .acf-switch .acf-switch-on,
.brikpanel-pe-metabox-content .acf-switch .acf-switch-off,
.brikpanel-pe-wc-fields-content .acf-switch .acf-switch-on,
.brikpanel-pe-wc-fields-content .acf-switch .acf-switch-off{display:none!important}
.brikpanel-pe-metabox-content .acf-switch .acf-switch-slider,
.brikpanel-pe-wc-fields-content .acf-switch .acf-switch-slider{position:absolute!important;top:3px!important;left:3px!important;right:auto!important;bottom:auto!important;width:16px!important;height:16px!important;margin:0!important;padding:0!important;background:#fff!important;border:none!important;border-radius:50%!important;box-shadow:0 1px 3px rgba(0,0,0,.2)!important;transition:transform .15s ease!important}
.brikpanel-pe-metabox-content .acf-switch.-on .acf-switch-slider,
.brikpanel-pe-wc-fields-content .acf-switch.-on .acf-switch-slider{transform:translateX(18px)!important}
.brikpanel-pe-metabox-content .acf-field-true-false .message,
.brikpanel-pe-wc-fields-content .acf-field-true-false .message{font-size:.8125rem!important;color:var(--pe-text)!important;margin:0!important;padding:0!important;font-weight:400!important}

/* ACF button styling — match BrikPanel secondary button */
.brikpanel-pe-metabox-content .acf-button.button,
.brikpanel-pe-wc-fields-content .acf-button.button{background:var(--pe-card)!important;color:var(--pe-text)!important;border:none!important;border-radius:var(--pe-radius-sm)!important;box-shadow:inset 0 0 0 1px var(--pe-border),0 1px 0 rgba(0,0,0,.05)!important;font-size:.8125rem!important;font-weight:550!important;padding:.375rem .75rem!important;line-height:1.3!important;height:auto!important;cursor:pointer!important;text-decoration:none!important;min-height:0!important}
.brikpanel-pe-metabox-content .acf-button.button:hover,
.brikpanel-pe-wc-fields-content .acf-button.button:hover{background:#f7f7f7!important;color:var(--pe-text)!important}

/* Safety net — ensure inputs inside any metabox are never pointer-blocked
   by parent containers. Third-party JS-driven fields (select2, datepickers,
   custom widgets) break when an ancestor sets `pointer-events:none` or
   stretches a stray overlay over the input. */
.brikpanel-pe-metabox-content,
.brikpanel-pe-metabox-content *,
.brikpanel-pe-wc-fields-content,
.brikpanel-pe-wc-fields-content *{pointer-events:auto}
.brikpanel-pe-metabox-content input:not([type="hidden"]):not([disabled]):not([readonly]):not([class*="switch"]):not([class*="toggle"]),
.brikpanel-pe-metabox-content textarea:not([disabled]):not([readonly]),
.brikpanel-pe-metabox-content select:not([disabled]),
.brikpanel-pe-wc-fields-content input:not([type="hidden"]):not([disabled]):not([readonly]):not([class*="switch"]):not([class*="toggle"]),
.brikpanel-pe-wc-fields-content textarea:not([disabled]):not([readonly]),
.brikpanel-pe-wc-fields-content select:not([disabled]){pointer-events:auto!important;user-select:text!important;position:relative;z-index:1}

/* Allow ACF internal labels (switch, checkbox group) to opt out of the
   generic block-label rule so their inline visual layout is preserved. */
.brikpanel-pe-metabox-content label.acf-switch,
.brikpanel-pe-wc-fields-content label.acf-switch{display:inline-block!important;width:40px!important}
.brikpanel-pe-metabox-content .acf-checkbox-list label,
.brikpanel-pe-metabox-content .acf-radio-list label,
.brikpanel-pe-wc-fields-content .acf-checkbox-list label,
.brikpanel-pe-wc-fields-content .acf-radio-list label{display:inline-flex!important;align-items:center!important;font-weight:400!important;margin:0 .75rem .25rem 0!important;width:auto!important}
.brikpanel-pe-metabox-content .acf-checkbox-list li,
.brikpanel-pe-metabox-content .acf-radio-list li,
.brikpanel-pe-wc-fields-content .acf-checkbox-list li,
.brikpanel-pe-wc-fields-content .acf-radio-list li{margin:0 0 .25rem!important;padding:0!important;list-style:none!important}
.brikpanel-pe-metabox-content .acf-checkbox-list,
.brikpanel-pe-metabox-content .acf-radio-list,
.brikpanel-pe-wc-fields-content .acf-checkbox-list,
.brikpanel-pe-wc-fields-content .acf-radio-list{margin:0!important;padding:0!important;list-style:none!important}

/* Select2 widgets used by ACF / third-party plugins — size to match inputs */
.brikpanel-pe-metabox-content .select2-container,
.brikpanel-pe-wc-fields-content .select2-container{width:100%!important;min-width:0!important}
.brikpanel-pe-metabox-content .select2-container--default .select2-selection--single,
.brikpanel-pe-wc-fields-content .select2-container--default .select2-selection--single{height:auto!important;min-height:40px!important;padding:.25rem .5rem!important;border:1px solid var(--pe-input-border)!important;border-radius:var(--pe-radius-sm)!important;background:var(--pe-card)!important}
.brikpanel-pe-metabox-content .select2-container--default .select2-selection--single .select2-selection__rendered,
.brikpanel-pe-wc-fields-content .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.8!important;color:var(--pe-text)!important;padding:0 .25rem!important}
.brikpanel-pe-metabox-content .select2-container--default .select2-selection--single .select2-selection__arrow,
.brikpanel-pe-wc-fields-content .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%!important;top:0!important;right:.25rem!important}
.brikpanel-pe-metabox-content .select2-container--default .select2-selection--multiple,
.brikpanel-pe-wc-fields-content .select2-container--default .select2-selection--multiple{min-height:40px!important;border:1px solid var(--pe-input-border)!important;border-radius:var(--pe-radius-sm)!important;padding:.25rem .375rem!important}

/* ---- ACF field-type polish ---- */
/* Range: slider + companion number input in one row (ACF's intended layout
   our blanket `input[type=number] { width:100% }` rule otherwise breaks). */
.brikpanel-pe-metabox-content .acf-range-wrap,.brikpanel-pe-wc-fields-content .acf-range-wrap{display:flex!important;align-items:center;gap:.75rem}
.brikpanel-pe-metabox-content .acf-range-wrap input[type="range"],.brikpanel-pe-wc-fields-content .acf-range-wrap input[type="range"]{flex:1 1 auto;width:auto!important;max-width:none!important;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important}
.brikpanel-pe-metabox-content .acf-range-wrap input[type="number"],.brikpanel-pe-wc-fields-content .acf-range-wrap input[type="number"]{flex:0 0 5.5rem;width:5.5rem!important;max-width:5.5rem!important;text-align:center}
/* True/False switch — full styling lives in the dedicated section above
   (".acf-switch — rebuild as the BrikPanel toggle"), no overrides needed
   here. */
/* Button group — flat segmented control */
.brikpanel-pe-metabox-content .acf-button-group,.brikpanel-pe-wc-fields-content .acf-button-group{display:inline-flex!important;border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);overflow:hidden;background:#fff}
.brikpanel-pe-metabox-content .acf-button-group label,.brikpanel-pe-wc-fields-content .acf-button-group label{display:inline-flex!important;align-items:center;padding:.5rem .9rem!important;margin:0!important;font-weight:550!important;font-size:.8125rem!important;color:var(--pe-text)!important;background:#fff;cursor:pointer;border-right:1px solid var(--pe-border);border-radius:0!important;transition:background .12s ease}
.brikpanel-pe-metabox-content .acf-button-group label:last-child,.brikpanel-pe-wc-fields-content .acf-button-group label:last-child{border-right:0}
.brikpanel-pe-metabox-content .acf-button-group label:hover,.brikpanel-pe-wc-fields-content .acf-button-group label:hover{background:#f7f7f7}
.brikpanel-pe-metabox-content .acf-button-group label.selected,.brikpanel-pe-wc-fields-content .acf-button-group label.selected{background:var(--pe-primary);color:#fff!important}
.brikpanel-pe-metabox-content .acf-button-group input,.brikpanel-pe-wc-fields-content .acf-button-group input{position:absolute;opacity:0;pointer-events:none}
/* Image / File / Link fields: ACF renders a callout-style wrapper — keep it
   visible against BrikPanel's white card by adding the brand border + radius. */
.brikpanel-pe-metabox-content .acf-image-uploader,.brikpanel-pe-metabox-content .acf-file-uploader,.brikpanel-pe-wc-fields-content .acf-image-uploader,.brikpanel-pe-wc-fields-content .acf-file-uploader{border:1px dashed var(--pe-border);border-radius:var(--pe-radius-sm);padding:.5rem .75rem;background:#fafafa}
.brikpanel-pe-metabox-content .acf-image-uploader.has-value,.brikpanel-pe-metabox-content .acf-file-uploader.has-value,.brikpanel-pe-wc-fields-content .acf-image-uploader.has-value,.brikpanel-pe-wc-fields-content .acf-file-uploader.has-value{border-style:solid;background:#fff}
/* WYSIWYG: keep TinyMCE chrome inside BrikPanel's input border */
.brikpanel-pe-metabox-content .acf-editor-wrap,.brikpanel-pe-wc-fields-content .acf-editor-wrap{border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);overflow:hidden;background:#fff}
.brikpanel-pe-metabox-content .acf-editor-wrap .wp-editor-container,.brikpanel-pe-wc-fields-content .acf-editor-wrap .wp-editor-container{border:none!important}
.brikpanel-pe-metabox-content .wp-editor-tabs,.brikpanel-pe-wc-fields-content .wp-editor-tabs{padding:0 .5rem;display:flex;gap:.25rem;align-items:flex-end;background:transparent}
.brikpanel-pe-metabox-content .wp-editor-tabs .wp-switch-editor,.brikpanel-pe-wc-fields-content .wp-editor-tabs .wp-switch-editor{font-size:.75rem!important;font-weight:550!important;padding:.375rem .75rem!important;border:1px solid var(--pe-border)!important;border-bottom:none!important;background:#fff!important;color:var(--pe-text-secondary)!important;border-radius:var(--pe-radius-sm) var(--pe-radius-sm) 0 0!important;margin:0 .125rem 0 0!important;cursor:pointer}
/* Color picker — pull the chip + button into one row */
.brikpanel-pe-metabox-content .acf-color-picker,.brikpanel-pe-wc-fields-content .acf-color-picker{display:flex;align-items:center;gap:.5rem}
.brikpanel-pe-metabox-content .acf-color-picker .wp-picker-container,.brikpanel-pe-wc-fields-content .acf-color-picker .wp-picker-container{display:inline-flex;align-items:center;gap:.5rem}
/* wp-color-result chip: wpColorPicker writes the selected color into the
   element's inline background-color, so we must NOT override `background`
   here. We restyle borders / padding only. */
.brikpanel-pe-metabox-content .acf-color-picker .wp-color-result,.brikpanel-pe-wc-fields-content .acf-color-picker .wp-color-result{margin:0!important;padding:.4rem .8rem .4rem 2.25rem!important;border:1px solid var(--pe-input-border)!important;border-radius:var(--pe-radius-sm)!important;color:#fff!important;height:auto!important;line-height:1.2!important;box-shadow:none!important;min-height:38px;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.brikpanel-pe-metabox-content .acf-color-picker .wp-color-result:after,.brikpanel-pe-wc-fields-content .acf-color-picker .wp-color-result:after{background:transparent!important;border-color:rgba(255,255,255,.5)!important}
.brikpanel-pe-metabox-content .acf-color-picker .wp-color-result-text,.brikpanel-pe-wc-fields-content .acf-color-picker .wp-color-result-text{background:transparent!important;color:inherit!important;border:none!important;padding:0!important;line-height:1.2!important;text-shadow:inherit}
/* Date / Time picker — show a calendar/clock affordance inside the input. */
.brikpanel-pe-metabox-content .acf-input-wrap.acf-date-picker input,.brikpanel-pe-metabox-content .acf-input-wrap.acf-date-time-picker input,.brikpanel-pe-metabox-content .acf-input-wrap.acf-time-picker input,.brikpanel-pe-wc-fields-content .acf-input-wrap.acf-date-picker input,.brikpanel-pe-wc-fields-content .acf-input-wrap.acf-date-time-picker input,.brikpanel-pe-wc-fields-content .acf-input-wrap.acf-time-picker input{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>")!important;background-repeat:no-repeat!important;background-position:right .75rem center!important;background-size:16px 16px!important;padding-right:2.25rem!important;cursor:pointer}
.brikpanel-pe-metabox-content .acf-input-wrap.acf-time-picker input,.brikpanel-pe-wc-fields-content .acf-input-wrap.acf-time-picker input{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>")!important}
/* ACF Tabs — pill bar, match BrikPanel chips */
.brikpanel-pe-metabox-content .acf-tab-wrap,.brikpanel-pe-wc-fields-content .acf-tab-wrap{background:#fafafa;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);padding:.25rem;margin:0 0 .75rem}
.brikpanel-pe-metabox-content .acf-tab-wrap .acf-tab-group,.brikpanel-pe-wc-fields-content .acf-tab-wrap .acf-tab-group{display:flex;gap:.25rem;margin:0;padding:0;list-style:none;border:none}
.brikpanel-pe-metabox-content .acf-tab-wrap .acf-tab-button,.brikpanel-pe-wc-fields-content .acf-tab-wrap .acf-tab-button{display:inline-flex;align-items:center;padding:.4rem .8rem;border-radius:.375rem;font-weight:550;font-size:.8125rem;color:var(--pe-text-secondary);background:transparent;text-decoration:none;border:1px solid transparent;line-height:1.2;cursor:pointer;transition:background .12s ease,color .12s ease}
.brikpanel-pe-metabox-content .acf-tab-wrap li.active .acf-tab-button,.brikpanel-pe-wc-fields-content .acf-tab-wrap li.active .acf-tab-button{background:#fff;color:var(--pe-text);border-color:var(--pe-border);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.brikpanel-pe-metabox-content .acf-tab-wrap li:not(.active) .acf-tab-button:hover,.brikpanel-pe-wc-fields-content .acf-tab-wrap li:not(.active) .acf-tab-button:hover{background:rgba(0,0,0,.04);color:var(--pe-text)}
/* Accordion: clickable row with caret */
.brikpanel-pe-metabox-content .acf-field-accordion>.acf-label label,.brikpanel-pe-wc-fields-content .acf-field-accordion>.acf-label label{display:flex!important;align-items:center;justify-content:space-between;width:100%!important;cursor:pointer;padding:.625rem .75rem!important;margin:0!important;background:#fafafa;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);font-size:.8125rem!important;font-weight:600!important}
.brikpanel-pe-metabox-content .acf-field-accordion>.acf-label .acf-accordion-icon,.brikpanel-pe-wc-fields-content .acf-field-accordion>.acf-label .acf-accordion-icon{margin-left:auto}
/* Group field: lift sub-fields with a subtle inner border */
.brikpanel-pe-metabox-content .acf-field-group>.acf-input,.brikpanel-pe-wc-fields-content .acf-field-group>.acf-input{border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);padding:.75rem;background:#fafafa}
.brikpanel-pe-metabox-content .acf-field-group .acf-fields>.acf-field,.brikpanel-pe-wc-fields-content .acf-field-group .acf-fields>.acf-field{background:#fff;padding:.625rem .75rem!important;border-radius:var(--pe-radius-sm);border:1px solid var(--pe-border);margin:0 0 .5rem!important}
/* Message field — friendly alert tile */
.brikpanel-pe-metabox-content .acf-field-message .acf-input,.brikpanel-pe-wc-fields-content .acf-field-message .acf-input{background:#f7f7f7;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);padding:.625rem .75rem;color:var(--pe-text-secondary);font-size:.8125rem}
/* Relationship field — frame the dual lists */
.brikpanel-pe-metabox-content .acf-relationship,.brikpanel-pe-wc-fields-content .acf-relationship{border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);overflow:hidden}
.brikpanel-pe-metabox-content .acf-relationship .filters,.brikpanel-pe-wc-fields-content .acf-relationship .filters{background:#fafafa;border-bottom:1px solid var(--pe-border);padding:.5rem!important;gap:.5rem;display:flex}
.brikpanel-pe-metabox-content .acf-relationship .filters .filter,.brikpanel-pe-wc-fields-content .acf-relationship .filters .filter{flex:1}
/* Repeater/flexible-content (Pro) baseline — keep table aesthetic */
.brikpanel-pe-metabox-content .acf-repeater,.brikpanel-pe-metabox-content .acf-flexible-content,.brikpanel-pe-wc-fields-content .acf-repeater,.brikpanel-pe-wc-fields-content .acf-flexible-content{border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);overflow:hidden;background:#fff}
.brikpanel-pe-metabox-content .acf-repeater .acf-table>thead>tr>th,.brikpanel-pe-wc-fields-content .acf-repeater .acf-table>thead>tr>th{background:#f7f7f7;border-bottom:1px solid var(--pe-border);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.02em;color:var(--pe-text-secondary)}

/* Variation table stock status select */
.brikpanel-pe-var-table .var-stock-status{width:100%;min-width:90px;padding:.375rem .5rem;font-size:.8125rem;border:1px solid var(--pe-border);border-radius:4px;outline:none;cursor:pointer;background:var(--pe-card);transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23616161' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center}
.brikpanel-pe-var-table .var-stock-status:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
/* Per-variation "Track" (manage stock) toggle cell */
.brikpanel-pe-var-table .var-track-cell{text-align:center;vertical-align:middle}
.brikpanel-pe-var-table th.var-track-col{text-align:center}
.brikpanel-pe-switch-sm{width:34px;height:18px}
.brikpanel-pe-switch-sm .brikpanel-pe-slider::before{width:12px;height:12px}
.brikpanel-pe-switch-sm input:checked+.brikpanel-pe-slider::before{transform:translateX(16px)}
/* When a row isn't tracking, its quantity input is inert; greyed so the
   active control (status select) reads as the source of truth. Same the
   other way for the status select while tracking is on. */
.brikpanel-pe-var-table .var-stock:disabled,.brikpanel-pe-var-table .var-stock-status:disabled{background:#f1f1f1;color:var(--pe-text-muted);cursor:not-allowed;opacity:.7}

/* Variation tools panel — one quiet gray card holding a SINGLE toolbar strip:
   bulk edits, then sorting + "Default Form Values", side by side on ONE line.
   Field names live in placeholder + aria-label + title rather than in micro-
   headings and stacked labels: at this card width (~750px of inner space, and
   ~630px on a small laptop) those cost more than three rows of height, so the
   panel is one control tall (34px). Groups are told apart by spacing, not by
   rules: a vertical divider would orphan itself the moment a row wraps.
   Only TWO flex items ever share the line (bulk edits, and the sort+defaults
   cluster), so when a translation is too wide the cluster moves down as a unit
   and the layout stays deliberate at every width, with no breakpoint guessing
   which language is being read. */
.brikpanel-pe-var-bulk{display:flex;flex-wrap:wrap;align-items:center;column-gap:.875rem;row-gap:.5rem;margin-bottom:1rem;padding:.5rem;background:#fafafa;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm)}
.brikpanel-pe-var-bulk-group{display:flex;flex-direction:row;align-items:center;min-width:0;flex:0 1 auto}
/* Leftover width goes to the bulk group (its money boxes absorb it) so the
   strip always spans the card instead of trailing off into dead space. */
.brikpanel-pe-var-bulk-group:first-child{flex:1 1 auto}
.brikpanel-pe-var-tools-right{display:flex;flex-direction:row;align-items:center;gap:.875rem;flex:0 0 auto;min-width:0}
.brikpanel-pe-var-bulk-fields{display:flex;align-items:center;gap:.375rem;min-width:0;flex:1 1 auto}
/* Every box is as wide as its OWN translated placeholder (--bpe-ph, in ch,
   written by PHP) plus room to type: a pixel width tuned for "Price" clips
   "Скидка", and clipped placeholders were the whole reason the labels could be
   dropped in the first place. max-width caps the growth so a wide card does not
   turn the money fields into slabs. */
.brikpanel-pe-var-bulk .brikpanel-pe-input-group.small{background:var(--pe-card);flex:1 1 auto;width:calc(var(--bpe-ph,5) * 1.2ch + 3.25rem);min-width:4rem;max-width:9rem}
/* Bulk "Active" select — same compact metrics as every other control in the
   row (2.125rem tall, small type) so the five boxes read as one symmetric
   strip; the generic .brikpanel-pe-select padding would make it a tall slab. */
.brikpanel-pe-var-bulk #bpe-bulk-active{width:auto;min-width:0;height:2.125rem;min-height:0;line-height:normal;padding:0 1.6rem 0 .5rem;font-size:.8125rem;background-color:var(--pe-card);border-radius:var(--pe-radius-sm);background-position:right .5rem center}
/* Every control locks to the input-group's 34px outer height (2rem content +
   1px borders): the stock input fights WP admin's min-height:40px and the
   button's natural 32px — mismatched heights break the shared bottom line. */
.brikpanel-pe-var-bulk #bpe-bulk-stock{width:calc(var(--bpe-ph,5) * 1.2ch + 1.75rem);height:2.125rem;min-height:0;flex:0 1 auto;min-width:3rem}
.brikpanel-pe-var-bulk #bpe-apply-bulk{height:2.125rem}

/* Default Form Values — third segment of the strip, collapsed behind one
   button: it holds one select per variation axis, so inline its width would
   grow with the product and break the single line. The popover drops below the
   button; the button wears a dot while any default is set. JS sets display:flex
   on the wrapper when there is something to show. */
.brikpanel-pe-var-defaults{position:relative;flex:0 0 auto;min-width:0;flex-direction:row;align-items:center;gap:.375rem}
/* Two classes on purpose: .brikpanel-pe-btn.small's 2rem height would otherwise
   win on specificity and leave this button 2px short of the rest of the strip. */
.brikpanel-pe-var-defaults .brikpanel-pe-var-defaults-toggle{position:relative;display:inline-flex;align-items:center;gap:.375rem;height:2.125rem;white-space:nowrap}
.brikpanel-pe-var-defaults-toggle svg{flex:0 0 auto;color:var(--pe-text-secondary)}
/* "A default is set" marker. It keeps its slot when hidden (visibility, not
   display): an indicator that resizes the button would resize the strip, and
   the strip only stays one line because nothing in it changes width. */
.brikpanel-pe-var-defaults-dot{visibility:hidden;flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--pe-primary)}
.brikpanel-pe-var-defaults.has-default .brikpanel-pe-var-defaults-dot{visibility:visible}
.brikpanel-pe-var-defaults-toggle[aria-expanded="true"]{background:#f1f1f1}
.brikpanel-pe-var-defaults-pop{position:absolute;top:calc(100% + .375rem);right:0;z-index:30;min-width:15rem;max-width:min(22rem,80vw);padding:.75rem;background:var(--pe-card);border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);box-shadow:0 4px 16px rgba(0,0,0,.12)}
.brikpanel-pe-var-defaults-pop[hidden]{display:none}
.brikpanel-pe-var-defaults-title{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--pe-text-muted)}
.brikpanel-pe-var-defaults-help{margin:.25rem 0 .625rem;font-size:.75rem;line-height:1.4;color:var(--pe-text-secondary)}
.brikpanel-pe-var-defaults-row{display:flex;flex-direction:column;align-items:stretch;gap:.375rem;min-width:0;margin-top:0}
.brikpanel-pe-var-defaults .bpe-var-default{width:100%;min-width:0;max-width:none;height:2.125rem;min-height:0;line-height:normal;padding:0 1.6rem 0 .5rem;font-size:.8125rem;background:var(--pe-card);border-radius:var(--pe-radius-sm);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23616161' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;cursor:pointer}

/* Variation Table */
.brikpanel-pe-var-table-wrap{overflow-x:auto;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm)}
.brikpanel-pe-var-table{width:100%;border-collapse:collapse;font-size:.8125rem;min-width:600px}
.brikpanel-pe-var-table thead{background:#f7f7f7}
.brikpanel-pe-var-table th{padding:.625rem .75rem;text-align:left;font-weight:600;font-size:.75rem;color:var(--pe-text-secondary);border-bottom:1px solid var(--pe-border);white-space:nowrap}
.brikpanel-pe-var-table td{padding:.5rem;border-bottom:1px solid var(--pe-border);vertical-align:middle}
.brikpanel-pe-var-table tr:last-child td{border-bottom:none}
.brikpanel-pe-var-table td input{width:100%;min-width:60px;padding:.375rem .5rem;font-size:.8125rem;border:1px solid var(--pe-border);border-radius:4px;outline:none;transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box}
.brikpanel-pe-var-table td input:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-var-table .var-name{font-weight:550;white-space:nowrap;color:var(--pe-text)}
/* Variation name cell carries a leading "Active" toggle (WC's Enabled state).
   Extra-small switch variant: deliberately daintier than the Track switch so
   the row reads calm — the name stays the visual anchor, not the control. */
.brikpanel-pe-switch-xs{width:26px;height:14px;border-radius:14px}
.brikpanel-pe-switch-xs .brikpanel-pe-slider{border-radius:14px;background:#d6d6d6}
.brikpanel-pe-switch-xs .brikpanel-pe-slider::before{width:10px;height:10px;left:2px;bottom:2px}
.brikpanel-pe-switch-xs input:checked+.brikpanel-pe-slider{background:var(--pe-primary)}
.brikpanel-pe-switch-xs input:checked+.brikpanel-pe-slider::before{transform:translateX(12px)}
/* Inline alignment on purpose: display:flex on a <td> stops it acting as a
   table cell, so the cell no longer stretches to the row height and its
   bottom border floats up mid-row (looked broken next to the other columns).
   vertical-align keeps real table layout and centers both pieces. */
.brikpanel-pe-var-table .var-name .var-enabled-switch{vertical-align:middle;margin-right:.55rem}
.brikpanel-pe-var-table .var-name-text{vertical-align:middle}
/* Manually added row: the combination is still being chosen, so the name cell
   holds one dropdown per axis instead of a derived label. */
.brikpanel-pe-var-table .var-attr-picks{display:inline-flex;flex-wrap:wrap;gap:.375rem;vertical-align:middle}
.brikpanel-pe-var-table .var-attr-select{min-width:8.5rem;max-width:14rem;height:2rem;padding:0 1.5rem 0 .5rem;font-size:.8125rem;font-weight:400;color:var(--pe-text);background-color:var(--pe-card);border:1px solid var(--pe-input-border);border-radius:4px}
/* Same combination twice: WooCommerce can only ever reach the first one. */
.brikpanel-pe-var-table tr.is-duplicate>td{background:#fdeeec}
.brikpanel-pe-var-table tr.is-duplicate .var-attr-select{border-color:var(--pe-error)}
/* Inactive variation: dim its editable cells so its off-state reads at a glance,
   while the Active toggle, expander and delete control stay fully legible. */
.brikpanel-pe-var-table tr.is-disabled td:not(.var-name):not(.var-drag-cell):not(.var-expand-cell):not(.var-delete-cell){opacity:.42}
.brikpanel-pe-var-table tr.is-disabled .var-name-text{color:var(--pe-text-muted)}

/* Variation Image — stacked card effect for multi-image */
.brikpanel-pe-var-table .var-image-btn{position:relative;width:40px;height:40px;border:1.5px solid #999;border-radius:4px;background:#fafafa;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:visible;padding:0;z-index:1;transition:border-color .15s ease}
.brikpanel-pe-var-table .var-image-btn::before,.brikpanel-pe-var-table .var-image-btn::after{content:"";position:absolute;width:100%;height:100%;border:1.5px solid #999;border-radius:4px;background:#f5f5f5;top:0;left:0;box-shadow:0 0 0 .5px rgba(0,0,0,.08)}
.brikpanel-pe-var-table .var-image-btn::before{transform:translate(5px,2px);z-index:-1}
.brikpanel-pe-var-table .var-image-btn::after{transform:translate(10px,4px);z-index:-2}
.brikpanel-pe-no-var-gallery .brikpanel-pe-var-table .var-image-btn::before,
.brikpanel-pe-no-var-gallery .brikpanel-pe-var-table .var-image-btn::after{display:none}
.brikpanel-pe-var-table .var-image-btn:hover{border-color:var(--pe-text-muted)}
.brikpanel-pe-var-table .var-image-btn img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2;border-radius:3px}
.brikpanel-pe-var-table .var-image-btn svg{color:var(--pe-text-muted);position:relative;z-index:2}
.var-image-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--pe-primary);color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;z-index:5;line-height:1;padding:0 4px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
/* Remove-image control — appears on hover over a variation image cell */
.brikpanel-pe-var-table .var-image-wrap{position:relative;display:inline-block}
.brikpanel-pe-var-table .var-image-remove{position:absolute;top:-7px;left:-7px;width:18px;height:18px;padding:0;border:1.5px solid #fff;border-radius:50%;background:var(--pe-primary);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:7;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:background .15s ease}
.brikpanel-pe-var-table .var-image-wrap:hover .var-image-remove{display:flex}
.brikpanel-pe-var-table .var-image-remove:hover{background:var(--pe-error)}
.brikpanel-pe-var-table .var-image-remove svg{position:relative;z-index:2}

/* Toast */
.bpe-toast-container{position:fixed;top:44px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:.5rem}
.bpe-toast{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border-radius:var(--pe-radius-sm);font-size:.875rem;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateX(110%);transition:transform .3s cubic-bezier(.4,0,.2,1);max-width:360px}
.bpe-toast.show{transform:translateX(0)}
.bpe-toast-success{background:#e4f5e1;color:#1a6b15;border:1px solid #b7e1b0}
.bpe-toast-error{background:#fce4e4;color:#c62828;border:1px solid #f1b0b0}

/* 3-column row for dimensions */
.brikpanel-pe-row-3{grid-template-columns:1fr 1fr 1fr}

/* COGS + Vendor row — equal halves so cost and supplier read as one unit.
   The vendor SKU row sits below it, occupying only the right column to
   visually tie itself to the vendor select above. */
.brikpanel-pe-row-cogs-vendor{margin-bottom:.5rem}
.brikpanel-pe-row-cogs-vendor .brikpanel-pe-field{margin-bottom:0}
.brikpanel-pe-vendor-sku-row{margin-bottom:0}
.brikpanel-pe-vendor-sku-row > .brikpanel-pe-field:first-child{display:none}
.brikpanel-pe-vendor-sku-row > .brikpanel-pe-field:last-child{grid-column:2 / 3}

/* Vendor select — slim variant of the standard select. Used inside the
   COGS card, the variations table, and stock orders. */
.brikpanel-pe-vendor-select{font-size:.875rem;line-height:1.4}

/* Variations table vendor column — kept narrow so the table stays readable.
   The column is still wide enough for "(parent: Acme Wholesale Co.)". */
.brikpanel-pe-var-table .bpe-var-vendor-th,
.brikpanel-pe-var-table .var-vendor-cell{min-width:140px;max-width:200px}
.brikpanel-pe-var-table .var-vendor{width:100%;padding:.375rem .5rem;font-size:.8125rem;border:1px solid var(--pe-input-border);border-radius:.375rem;background:#fff;line-height:1.3;transition:border-color .15s,box-shadow .15s}
.brikpanel-pe-var-table .var-vendor:focus{outline:none;border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}

/* SEO Preview */
.brikpanel-pe-seo-preview{border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);padding:.75rem;margin-bottom:1rem;background:#fafafa;font-family:Arial,sans-serif}
.brikpanel-pe-seo-preview-title{display:block;font-size:.875rem;font-weight:400;color:#1a0dab;line-height:1.3;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brikpanel-pe-seo-preview-url{display:block;font-size:.6875rem;color:#006621;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brikpanel-pe-seo-preview-desc{display:block;font-size:.75rem;color:#545454;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* SureRank "Analyze" panel — SEO checks rendered inside the SEO card */
.brikpanel-pe-sr-analysis{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--pe-border)}
.brikpanel-pe-sr-body{transition:opacity .15s ease}
.brikpanel-pe-sr-analysis.is-analyzing .brikpanel-pe-sr-body{opacity:.5}
.brikpanel-pe-sr-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}
.brikpanel-pe-sr-head-title{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;color:var(--pe-text)}
.brikpanel-pe-sr-rerun{padding:.375rem .75rem;font-size:.75rem}
.brikpanel-pe-sr-summary{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.875rem}
.brikpanel-pe-sr-pill{display:inline-flex;align-items:center;padding:.1875rem .5rem;border-radius:999px;font-size:.6875rem;font-weight:600;line-height:1.2}
.brikpanel-pe-sr-pill.error{background:#fce4e4;color:#c62828}
.brikpanel-pe-sr-pill.warning{background:#fff3cd;color:#856404}
.brikpanel-pe-sr-pill.suggestion{background:#e7f0fd;color:#1d4ed8}
.brikpanel-pe-sr-pill.success{background:#e4f5e1;color:#1a6b15}
.brikpanel-pe-sr-group{margin-top:.875rem}
.brikpanel-pe-sr-group:first-of-type{margin-top:0}
.brikpanel-pe-sr-group-title{font-size:.75rem;font-weight:600;color:var(--pe-text-secondary);text-transform:uppercase;letter-spacing:.02em;margin-bottom:.5rem}
.brikpanel-pe-sr-check{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem .625rem;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);margin-bottom:.375rem;background:#fafafa}
.brikpanel-pe-sr-check:last-child{margin-bottom:0}
.brikpanel-pe-sr-dot{flex-shrink:0;width:.5rem;height:.5rem;border-radius:50%;margin-top:.375rem}
.brikpanel-pe-sr-check--error .brikpanel-pe-sr-dot{background:#d72c0d}
.brikpanel-pe-sr-check--warning .brikpanel-pe-sr-dot{background:#e0a106}
.brikpanel-pe-sr-check--suggestion .brikpanel-pe-sr-dot{background:#1d4ed8}
.brikpanel-pe-sr-check--success .brikpanel-pe-sr-dot{background:#1a8917}
.brikpanel-pe-sr-msg{flex:1;font-size:.8125rem;color:var(--pe-text);line-height:1.4}
.brikpanel-pe-sr-tag{flex-shrink:0;font-size:.6875rem;font-weight:600;color:var(--pe-text-muted)}
/* SEO score gauge (SmartCrawl analyzer). Circular progress driven by the
   --bpe-score custom property (0-100); colour band set by the score-level
   modifier. Monochrome track, status-coloured fill only. */
.brikpanel-pe-sr-score{display:flex;align-items:center;gap:.75rem;margin-bottom:.875rem}
.brikpanel-pe-sr-score-ring{position:relative;flex-shrink:0;width:3.25rem;height:3.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--bpe-score-color,#1a8917) calc(var(--bpe-score,0)*1%),#ececec 0)}
.brikpanel-pe-sr-score-ring::before{content:"";position:absolute;inset:.3125rem;border-radius:50%;background:#fff}
.brikpanel-pe-sr-score-num{position:relative;font-size:.875rem;font-weight:600;color:var(--pe-text)}
.brikpanel-pe-sr-score--low{--bpe-score-color:#d72c0d}
.brikpanel-pe-sr-score--mid{--bpe-score-color:#e0a106}
.brikpanel-pe-sr-score--high{--bpe-score-color:#1a8917}
.brikpanel-pe-sr-score-text{display:flex;flex-direction:column;line-height:1.3}
.brikpanel-pe-sr-score-text strong{font-size:.8125rem;font-weight:600;color:var(--pe-text)}
.brikpanel-pe-sr-score-text span{font-size:.75rem;color:var(--pe-text-secondary)}

/* Low stock badges */
.brikpanel-pe-stock-badge{display:inline-block;padding:.125rem .5rem;border-radius:10px;font-size:.75rem;font-weight:550;line-height:1.5;cursor:pointer;transition:background .15s ease}
.brikpanel-pe-stock-badge:hover{background:#f0f0f0}
.brikpanel-pe-stock-low{background:#fff3cd;color:#856404}
.brikpanel-pe-stock-out{background:#fce4e4;color:#c62828}

/* Linked products (upsells & cross-sells) picker */
.brikpanel-pe-linked{position:relative}
.brikpanel-pe-linked-chips{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.375rem}
.brikpanel-pe-linked-chips:empty{display:none}
.brikpanel-pe-linked-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .5rem;background:#f1f1f1;color:var(--pe-text);border:1px solid var(--pe-border);border-radius:1rem;font-size:.75rem;font-weight:550;line-height:1.5}
.brikpanel-pe-linked-remove{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--pe-text-secondary);font-size:.875rem;line-height:1;cursor:pointer}
.brikpanel-pe-linked-remove:hover{background:#e3e3e3;color:var(--pe-text)}
.brikpanel-pe-linked-results{position:absolute;left:0;right:0;z-index:20;margin-top:.25rem;max-height:240px;overflow-y:auto;background:var(--pe-card);border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.brikpanel-pe-linked-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;border:0;background:transparent;color:var(--pe-text);font-size:.8125rem;cursor:pointer}
.brikpanel-pe-linked-option:hover{background:#f7f7f7}

/* Inline edit input in product list */
.brikpanel-pe-inline-input{width:70px;padding:2px 6px;font-size:.8125rem;border:1px solid var(--pe-input-focus);border-radius:4px;outline:none;box-shadow:0 0 0 1px var(--pe-input-focus)}

/* Downloadable files */
.brikpanel-pe-help-text{font-size:.75rem;color:var(--pe-text-muted);margin:0 0 .75rem;line-height:1.4}
.brikpanel-pe-text-muted{font-size:.8125rem;color:var(--pe-text-muted);margin:0;font-style:italic}
.brikpanel-pe-downloads{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}
.brikpanel-pe-download-item{display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);background:#fafafa}
.brikpanel-pe-download-icon{flex-shrink:0;color:var(--pe-text-secondary)}
.brikpanel-pe-download-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.brikpanel-pe-download-name{padding:.25rem .5rem;font-size:.8125rem;border:1px solid var(--pe-border);border-radius:4px;outline:none;background:#fff;width:100%;box-sizing:border-box;transition:border-color .15s ease}
.brikpanel-pe-download-name:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-download-url-row{display:flex;align-items:center;gap:.375rem}
.brikpanel-pe-download-url{flex:1;min-width:0;padding:.25rem .5rem;font-size:.6875rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--pe-text-secondary);background:#fff;border:1px solid var(--pe-border);border-radius:4px;outline:none;box-sizing:border-box;transition:border-color .15s ease}
.brikpanel-pe-download-url:focus{border-color:var(--pe-input-focus);color:var(--pe-text);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-download-browse{flex-shrink:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--pe-border);background:#fff;border-radius:4px;color:var(--pe-text-secondary);cursor:pointer;padding:0;transition:all .15s ease}
.brikpanel-pe-download-browse:hover{background:var(--pe-bg);color:var(--pe-text);border-color:var(--pe-input-border)}
.brikpanel-pe-download-remove{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:transparent;color:var(--pe-text-muted);border:none;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .15s ease}
.brikpanel-pe-download-remove:hover{background:rgba(215,44,13,.1);color:var(--pe-error)}

/* Product List Status */
.brikpanel-pe-list-status{display:inline-block;padding:.125rem .5rem;border-radius:10px;font-size:.75rem;font-weight:550;line-height:1.5}
.brikpanel-pe-list-status--published{background:#e4f5e1;color:#1a6b15}
.brikpanel-pe-list-status--draft{background:#f0f0f0;color:#616161}

/* Responsive */
/* Prevent absolutely-positioned descendants (3rd-party tooltips like SEOPress,
   etc.) from blowing out the page width on mobile. `overflow-x: clip` clips
   the box without creating a scroll container, so popovers/dropdowns that
   open downward still work. */
body.admin_page_brikpanel-product-editor{overflow-x:clip}
.brikpanel-pe{overflow-x:clip}

/* Widescreen, part two — has to sit AFTER the variation-table rules above, which
   pin the name to one line at the same specificity and would otherwise win on
   source order. With the wide card the point is to lose the table's horizontal
   scrollbar, so a long variation name wraps rather than pushing every other
   column out of view. Below the breakpoint the name stays on one line: the
   table scrolls there anyway and short rows are worth more than wrapped names.
   The min-width matters: once the name may wrap, the auto layout is free to
   squeeze that column down to its longest single word and the names turn into
   four-line stacks. This floors it at a readable width. */
@media screen and (min-width:1360px){
.brikpanel-pe-widescreen .brikpanel-pe-var-table .var-name{white-space:normal;min-width:15rem}
}

@media screen and (max-width:782px){
/* Compact two-row sticky header: row 1 = back + product title (left), the
   action cluster wraps onto row 2 (right-aligned). The secondary nav actions
   collapse into the kebab menu below, so the header stays ~2 rows instead of 3. */
/* `top` must stay keyed to the bar that is actually above it. Hardcoding WP's
   46px mobile admin-bar height parked the sticky header 46px down while the
   BrikPanel top bar occupies 0-52px, so its first 6-7px sat underneath the bar
   (and under its shadow) on every phone. The variable resolves to 52px when
   the top bar is on; the 46px fallback covers the top-bar-off case, where WP's
   own admin bar really is 46px at this breakpoint. */
.brikpanel-pe-header{top:var(--bp-topbar-height,46px);padding:.5rem .875rem;gap:.5rem;flex-wrap:wrap}
.brikpanel-pe-header-left{flex:1 1 100%;min-width:0;gap:.375rem}
.brikpanel-pe-header-left .brikpanel-pe-back{flex-shrink:0;padding:.25rem .375rem}
.brikpanel-pe-header-left h1{font-size:1.0625rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brikpanel-pe-header-right{flex:1 1 100%;gap:.375rem;justify-content:flex-end}
.brikpanel-pe-content{padding:1rem}
.brikpanel-pe-row{grid-template-columns:1fr}
.brikpanel-pe-row-3{grid-template-columns:1fr}
.brikpanel-pe-var-templates{grid-template-columns:1fr}
/* Phones: one line is off the table, so the strip becomes a small 2-column grid
   instead of seven stacked full-width boxes (which read as a form, not as a
   toolbar, and pushed the table a screenful down). Price sits next to Sale,
   Stock next to Active, and the two actions that apply to the whole grid span
   it. Every control keeps a real touch height and its own placeholder, which is
   what still names it once the row order stops carrying that meaning. */
/* Build actions stack. `margin-left:auto` on a wrapped flex item leaves the
   button alone and right-aligned on its own line, which reads as a layout
   fault rather than as distance from the other two; on a phone the row is
   already one control per line, so full width is both tidier and a real touch
   target. */
.brikpanel-pe-var-build-actions{flex-direction:column;align-items:stretch}
.brikpanel-pe-var-build-actions > .brikpanel-pe-btn{width:100%}
.brikpanel-pe-var-build-actions #bpe-clear-vars{margin-left:0}
.brikpanel-pe-var-bulk{flex-direction:column;align-items:stretch;flex-wrap:nowrap;row-gap:.5rem;padding:.625rem}
.brikpanel-pe-var-bulk-group,
.brikpanel-pe-var-bulk-group:first-child,
.brikpanel-pe-var-tools-right{flex:0 0 auto;flex-direction:column;align-items:stretch;gap:.5rem}
.brikpanel-pe-var-bulk-fields{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:.5rem;flex:0 0 auto}
/* The placeholder-derived widths and the desktop growth cap are basis values
   for a row that no longer exists; clear them so each cell fills its column.
   The money boxes need their own selector: the desktop max-width rule carries
   three classes and would otherwise keep them 144px wide in a 245px cell. */
.brikpanel-pe-var-bulk-fields > *{width:auto!important;min-width:0;max-width:none}
.brikpanel-pe-var-bulk .brikpanel-pe-input-group.small{width:auto;max-width:none;flex:0 0 auto}
.brikpanel-pe-var-bulk-fields .brikpanel-pe-btn{grid-column:1 / -1;width:100%!important}
/* Sort is a single control, so it takes the full width on its own line. */
.brikpanel-pe-var-sort .brikpanel-pe-var-bulk-fields{grid-template-columns:1fr}
/* flex:auto matters: any desktop flex-basis becomes a HEIGHT once the panel
   flips to a column layout, leaving a tall empty band under the button. The
   popover spans the panel rather than hanging off the button's right edge. */
.brikpanel-pe-var-defaults{flex:0 0 auto;flex-direction:column;align-items:stretch}
.brikpanel-pe-var-defaults .brikpanel-pe-var-defaults-toggle{width:100%;justify-content:center}
.brikpanel-pe-var-defaults-pop{left:0;right:0;min-width:0;max-width:none}
.brikpanel-pe-card{padding:1rem}
.brikpanel-pe-field input[type="text"],.brikpanel-pe-field input[type="number"],.brikpanel-pe-field textarea{font-size:1rem;padding:.75rem}
.brikpanel-pe-gallery-item{width:70px;height:70px}
.brikpanel-pe-btn{padding:.625rem 1rem;font-size:.875rem}
.brikpanel-pe-inline-form{flex-wrap:wrap}
.brikpanel-pe-tooltip::after{left:auto;right:0;transform:none}
/* Rich-text toolbar: let the formatting buttons wrap onto a second row instead
   of overflowing the card on narrow screens. Drop the auto margin so the HTML
   toggle flows inline with the rest rather than being pinned far right. */
.brikpanel-pe-editor-toolbar{flex-wrap:wrap;row-gap:2px}
.brikpanel-pe-editor-toolbar .brikpanel-pe-html-toggle{margin-left:0}

/* Header overflow menu becomes a real kebab popover on mobile/tablet. */
.brikpanel-pe-header-overflow{display:inline-block;position:relative}
.brikpanel-pe-overflow-trigger{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.25rem;height:2.25rem;padding:0;background:var(--pe-card);color:var(--pe-text-secondary);border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.05);transition:background .15s ease,color .15s ease,border-color .15s ease}
.brikpanel-pe-overflow-trigger:hover{background:#f7f7f7;color:var(--pe-text)}
.brikpanel-pe-header-overflow.is-open .brikpanel-pe-overflow-trigger{background:#f0f0f0;border-color:#d4d4d4;color:var(--pe-text)}
.brikpanel-pe-overflow-menu{display:flex;flex-direction:column;gap:.125rem;position:absolute;top:calc(100% + .375rem);left:0;min-width:190px;margin:0;padding:.375rem;list-style:none;background:var(--pe-card);border:1px solid var(--pe-border);border-radius:var(--pe-radius);box-shadow:0 6px 20px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.04);opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:200}
.brikpanel-pe-header-overflow.is-open .brikpanel-pe-overflow-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.brikpanel-pe-overflow-menu .brikpanel-pe-btn{width:100%;justify-content:flex-start;gap:.5rem;background:transparent;border:none;box-shadow:none!important;padding:.5rem .625rem;border-radius:.4375rem;font-size:.8125rem;font-weight:500;color:var(--pe-text)}
.brikpanel-pe-overflow-menu .brikpanel-pe-btn:hover{background:#f7f7f7}

/* Variations table: smoother momentum scroll + a fade hint on the right edge
   so it reads as horizontally scrollable on touch. */
.brikpanel-pe-var-table-wrap{-webkit-overflow-scrolling:touch;position:relative}
}
@media screen and (max-width:480px){
.brikpanel-pe-header-left h1{font-size:1rem}
.brikpanel-pe-dropzone{padding:1.5rem}
/* Phone: collapse the catalog-visibility control to its eye icon so the whole
   action cluster (kebab, star, status, visibility, Update) fits on one row.
   The label is still reachable inside the dropdown it opens. */
.brikpanel-pe-catvis-trigger .brikpanel-pe-catvis-label{display:none}
.brikpanel-pe-catvis-trigger{padding:.4375rem .375rem}
/* Same treatment for the publish-date control: collapse to its calendar icon so
   the header action cluster stays on one row. Date is reachable in its popover. */
.brikpanel-pe-pubdate-trigger .brikpanel-pe-pubdate-label,
.brikpanel-pe-pubdate-trigger .brikpanel-pe-pubdate-chevron{display:none}
.brikpanel-pe-pubdate-trigger{padding:.4375rem .375rem}
/* Tighten the action cluster so it stays on a single row down to ~340px
   instead of wrapping the Update button onto its own line. */
.brikpanel-pe-header-right{gap:.3125rem}
.brikpanel-pe-overflow-trigger{width:2rem;height:2rem}
.brikpanel-pe-featured-star{width:1.875rem;height:1.875rem}
}

/* ==========================================================================
   Visibility dropdown (replaces the old <select>)
   ========================================================================== */
.brikpanel-pe-status-wrap{position:relative;display:inline-block}
.brikpanel-pe-status-trigger{display:inline-flex;align-items:center;gap:.5rem;padding:.4375rem .625rem .4375rem .75rem;background:var(--pe-card);color:var(--pe-text);border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);font:inherit;font-size:.8125rem;font-weight:550;line-height:1.2;cursor:pointer;box-shadow:inset 0 0 0 0 transparent,0 1px 0 rgba(0,0,0,.03);transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;min-width:140px;justify-content:space-between}
.brikpanel-pe-status-trigger:hover{background:#f7f7f7;border-color:#d4d4d4}
.brikpanel-pe-status-trigger:focus-visible{outline:none;border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-status-wrap.is-open .brikpanel-pe-status-trigger{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-status-trigger-label{flex:1;text-align:left}
.brikpanel-pe-status-chevron{flex-shrink:0;color:var(--pe-text-muted);transition:transform .15s ease}
.brikpanel-pe-status-wrap.is-open .brikpanel-pe-status-chevron{transform:rotate(180deg)}

/* Status indicator dot — colored per state */
.brikpanel-pe-status-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0;background:var(--pe-text-muted)}
.brikpanel-pe-status-wrap[data-status="publish"] .brikpanel-pe-status-trigger .brikpanel-pe-status-dot{background:var(--pe-success);box-shadow:0 0 0 3px rgba(26,137,23,.12)}
.brikpanel-pe-status-wrap[data-status="draft"] .brikpanel-pe-status-trigger .brikpanel-pe-status-dot{background:#9ca3af;box-shadow:0 0 0 3px rgba(156,163,175,.2)}
.brikpanel-pe-status-wrap[data-status="private"] .brikpanel-pe-status-trigger .brikpanel-pe-status-dot{background:#4c1d95;box-shadow:0 0 0 3px rgba(76,29,149,.15)}
.brikpanel-pe-status-wrap[data-status="password"] .brikpanel-pe-status-trigger .brikpanel-pe-status-dot{background:#b45309;box-shadow:0 0 0 3px rgba(180,83,9,.15)}
.brikpanel-pe-status-wrap[data-status="future"] .brikpanel-pe-status-trigger .brikpanel-pe-status-dot{background:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.brikpanel-pe-status-menu li .brikpanel-pe-status-dot[data-status="publish"]{background:var(--pe-success)}
.brikpanel-pe-status-menu li .brikpanel-pe-status-dot[data-status="future"]{background:#2563eb}
.brikpanel-pe-status-menu li .brikpanel-pe-status-dot[data-status="draft"]{background:#9ca3af}
.brikpanel-pe-status-menu li .brikpanel-pe-status-dot[data-status="private"]{background:#4c1d95}
.brikpanel-pe-status-menu li .brikpanel-pe-status-dot[data-status="password"]{background:#b45309}

/* Popover menu */
.brikpanel-pe-status-menu{position:absolute;top:calc(100% + .375rem);right:0;min-width:260px;margin:0;padding:.375rem;list-style:none;background:var(--pe-card);border:1px solid var(--pe-border);border-radius:var(--pe-radius);box-shadow:0 6px 20px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.04);opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:200}
.brikpanel-pe-status-wrap.is-open .brikpanel-pe-status-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.brikpanel-pe-status-menu li{display:flex;align-items:flex-start;gap:.625rem;padding:.625rem .75rem;border-radius:.4375rem;cursor:pointer;transition:background .1s ease}
.brikpanel-pe-status-menu li:hover{background:#f7f7f7}
.brikpanel-pe-status-menu li.is-active{background:#f1f1f1}
.brikpanel-pe-status-menu li .brikpanel-pe-status-dot{margin-top:.3125rem}
.brikpanel-pe-status-option-text{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.brikpanel-pe-status-option-text strong{font-size:.8125rem;font-weight:600;color:var(--pe-text);line-height:1.3}
.brikpanel-pe-status-option-text small{font-size:.75rem;font-weight:400;color:var(--pe-text-secondary);line-height:1.35}

/* Password field — inline beside the status dropdown */
.brikpanel-pe-password-inline{display:none;align-items:center}
.brikpanel-pe-password-inline.is-visible{display:inline-flex}
.brikpanel-pe-password-inline input{width:100px;padding:.375rem .5rem;font:inherit;font-size:.75rem;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);background:var(--pe-card);color:var(--pe-text);transition:border-color .15s ease,box-shadow .15s ease}
.brikpanel-pe-password-inline input:focus{outline:none;border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}

/* Publish date — mini popover in the header (shares the datetime input with the
   scheduling flow). Mirrors the catalog-visibility control's look. */
.brikpanel-pe-pubdate-wrap{position:relative;display:inline-block}
.brikpanel-pe-pubdate-trigger{display:inline-flex;align-items:center;gap:.3rem;padding:.3125rem .5rem;background:transparent;color:var(--pe-text-secondary);border:none;font:inherit;font-size:.6875rem;font-weight:500;cursor:pointer;border-radius:var(--pe-radius-sm);transition:background .15s ease,color .15s ease;white-space:nowrap}
.brikpanel-pe-pubdate-trigger:hover{background:#f0f0f0;color:var(--pe-text)}
.brikpanel-pe-pubdate-trigger svg{flex-shrink:0}
.brikpanel-pe-pubdate-label{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.brikpanel-pe-pubdate-chevron{color:var(--pe-text-muted);transition:transform .15s ease}
.brikpanel-pe-pubdate-wrap.is-open .brikpanel-pe-pubdate-chevron{transform:rotate(180deg)}
.brikpanel-pe-pubdate-pop{position:absolute;top:calc(100% + .25rem);left:0;min-width:220px;padding:.75rem;background:var(--pe-card);border:1px solid var(--pe-border);border-radius:var(--pe-radius);box-shadow:0 6px 20px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.04);opacity:0;transform:translateY(-4px) scale(.97);transform-origin:top left;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:200}
.brikpanel-pe-pubdate-wrap.is-open .brikpanel-pe-pubdate-pop{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.brikpanel-pe-pubdate-poplabel{display:block;margin-bottom:.375rem;font-size:.8125rem;font-weight:600;color:var(--pe-text)}
.brikpanel-pe-pubdate-pop input{width:100%;box-sizing:border-box;padding:.5rem .625rem;font:inherit;font-size:.8125rem;color:var(--pe-text);border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);background:var(--pe-card);transition:border-color .15s ease,box-shadow .15s ease}
.brikpanel-pe-pubdate-pop input:focus{outline:none;border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}

/* Catalog visibility — mini dropdown in the header */
.brikpanel-pe-catvis-wrap{position:relative;display:inline-block}
.brikpanel-pe-catvis-trigger{display:inline-flex;align-items:center;gap:.3rem;padding:.3125rem .5rem;background:transparent;color:var(--pe-text-secondary);border:none;font:inherit;font-size:.6875rem;font-weight:500;cursor:pointer;border-radius:var(--pe-radius-sm);transition:background .15s ease,color .15s ease;white-space:nowrap}
.brikpanel-pe-catvis-trigger:hover{background:#f0f0f0;color:var(--pe-text)}
.brikpanel-pe-catvis-trigger svg{flex-shrink:0}
.brikpanel-pe-catvis-chevron{color:var(--pe-text-muted);transition:transform .15s ease}
.brikpanel-pe-catvis-wrap.is-open .brikpanel-pe-catvis-chevron{transform:rotate(180deg)}
.brikpanel-pe-catvis-menu{position:absolute;top:calc(100% + .25rem);right:0;min-width:160px;margin:0;padding:.25rem;list-style:none;background:var(--pe-card);border:1px solid var(--pe-border);border-radius:var(--pe-radius);box-shadow:0 6px 20px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.04);opacity:0;transform:translateY(-4px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:200}
.brikpanel-pe-catvis-wrap.is-open .brikpanel-pe-catvis-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.brikpanel-pe-catvis-menu-title{padding:.375rem .625rem .25rem;font-size:.6875rem;font-weight:600;color:var(--pe-text-muted);text-transform:uppercase;letter-spacing:.03em;cursor:default}
.brikpanel-pe-catvis-menu li[role="option"]{padding:.375rem .625rem;border-radius:.3125rem;cursor:pointer;font-size:.75rem;color:var(--pe-text);transition:background .1s ease}
.brikpanel-pe-catvis-menu li[role="option"]:hover{background:#f7f7f7}
.brikpanel-pe-catvis-menu li[role="option"].is-active{background:#f1f1f1;font-weight:600}

@media screen and (max-width:480px){
  .brikpanel-pe-status-trigger{min-width:0;gap:.375rem;padding:.4375rem .4375rem .4375rem .5rem}
  /* The status trigger sits mid-row, so anchoring its (wide) menu to the
     trigger pushes it off the right edge and it gets clipped. Re-anchor the
     menu to the full-width header-right bar instead, so it drops down as a
     near-full-width sheet that always stays on screen. */
  .brikpanel-pe-header-right{position:relative}
  .brikpanel-pe-status-wrap{position:static}
  .brikpanel-pe-status-menu{left:0;right:0;width:auto;min-width:0;max-width:none;transform-origin:top center}
}

/* Non-hierarchical taxonomy metaboxes rendered by WP core's
   `post_tags_meta_box` (Orderable Pro Product Labels, Polylang post_tag
   look-alikes, …). Without admin styles loaded the Add button wraps below
   and the chip X-icon overlaps the term name. Restyle to match the
   BrikPanel design system: input + Add inline on one row, chips as small
   pills with the remove icon on the right. */
.brikpanel-pe-metaboxes-wrap .tagsdiv{box-sizing:border-box;max-width:100%}
.brikpanel-pe-metaboxes-wrap .tagsdiv .jaxtag{display:block;box-sizing:border-box;max-width:100%}
.brikpanel-pe-metaboxes-wrap .tagsdiv .ajaxtag{display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch;width:100%;box-sizing:border-box}
.brikpanel-pe-metaboxes-wrap .tagsdiv .ajaxtag input.newtag{flex:1 1 200px;width:auto;max-width:100%;min-width:0;box-sizing:border-box;margin:0;padding:.625rem .75rem;border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);font-size:.875rem;line-height:1.4;background:#fff;color:var(--pe-text);box-shadow:none;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.brikpanel-pe-metaboxes-wrap .tagsdiv .ajaxtag input.newtag:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-metaboxes-wrap .tagsdiv .ajaxtag input.button.tagadd{flex:0 0 auto;width:auto;margin:0;padding:.5rem 1rem;background:#fff;color:var(--pe-text);border-radius:var(--pe-radius-sm);border:none;box-shadow:inset 0 0 0 1px var(--pe-border),0 1px 0 rgba(0,0,0,.05);font-size:.8125rem;font-weight:550;cursor:pointer;transition:background .15s ease}
.brikpanel-pe-metaboxes-wrap .tagsdiv .ajaxtag input.button.tagadd:hover{background:#f7f7f7}
.brikpanel-pe-metaboxes-wrap .tagsdiv p.howto{margin:.375rem 0 0;color:var(--pe-text-muted);font-size:.75rem}
.brikpanel-pe-metaboxes-wrap .tagsdiv ul.tagchecklist{display:flex;flex-wrap:wrap;gap:.375rem;margin:.75rem 0 0;padding:0;list-style:none}
.brikpanel-pe-metaboxes-wrap .tagsdiv ul.tagchecklist li{display:inline-flex;align-items:center;gap:.25rem;float:none;max-width:none;margin:0;padding:.25rem .625rem .25rem .5rem;background:#f7f7f7;color:var(--pe-text);border:1px solid var(--pe-border);border-radius:999px;font-size:.75rem;font-weight:500;line-height:1.3;white-space:nowrap;overflow:visible;text-overflow:clip}
.brikpanel-pe-metaboxes-wrap .tagsdiv ul.tagchecklist li button.ntdelbutton{display:inline-flex!important;align-items:center!important;justify-content:center!important;position:static!important;width:16px!important;height:16px!important;margin:0!important;padding:0!important;background:transparent!important;border:none!important;border-radius:50%!important;color:var(--pe-text-muted)!important;cursor:pointer!important;line-height:1!important;gap:0!important;box-shadow:none!important;text-indent:0!important;font-size:inherit!important;flex:0 0 16px!important;transition:background .15s ease,color .15s ease}
.brikpanel-pe-metaboxes-wrap .tagsdiv ul.tagchecklist li button.ntdelbutton:hover{background:#e3e3e3;color:var(--pe-text)}
.brikpanel-pe-metaboxes-wrap .tagsdiv ul.tagchecklist li button.ntdelbutton .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brikpanel-pe-metaboxes-wrap .tagsdiv ul.tagchecklist li button.ntdelbutton .remove-tag-icon{position:static;display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;background:none;font:inherit;color:inherit}
.brikpanel-pe-metaboxes-wrap .tagsdiv ul.tagchecklist li button.ntdelbutton .remove-tag-icon:before{content:"\00d7";display:inline-block;width:auto;height:auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;font-weight:600;line-height:1;color:currentColor;background:none;border:0;border-radius:0;position:static;margin:0;padding:0;text-align:center}
.brikpanel-pe-metaboxes-wrap .tagsdiv .tagcloud-link{display:inline-block;margin-top:.625rem;padding:.5rem 1rem;background:#fff;color:var(--pe-text);border:none;border-radius:var(--pe-radius-sm);box-shadow:inset 0 0 0 1px var(--pe-border),0 1px 0 rgba(0,0,0,.05);font-size:.8125rem;font-weight:550;text-decoration:underline;cursor:pointer;transition:background .15s ease}
.brikpanel-pe-metaboxes-wrap .tagsdiv .tagcloud-link:hover{background:#f7f7f7}
/* Hierarchical product taxonomy metaboxes rendered by WP core's
   `post_categories_meta_box` (plugin-registered hierarchical product
   taxonomies). Without admin styles the tabs, checklist tree and
   add-new form render as unstyled HTML. Match the BrikPanel design
   system so the output is consistent with the rest of the editor. */
.brikpanel-pe-metaboxes-wrap .categorydiv{display:block}
.brikpanel-pe-metaboxes-wrap .categorydiv ul.category-tabs{display:flex;gap:.25rem;margin:0 0 .5rem;padding:.25rem;background:#f7f7f7;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);list-style:none}
.brikpanel-pe-metaboxes-wrap .categorydiv ul.category-tabs li{flex:1;margin:0;padding:0;list-style:none;text-align:center}
.brikpanel-pe-metaboxes-wrap .categorydiv ul.category-tabs li a{display:block;padding:.375rem .625rem;color:var(--pe-text-secondary);font-size:.75rem;font-weight:550;text-decoration:none;border-radius:.3125rem;transition:background .15s ease,color .15s ease}
.brikpanel-pe-metaboxes-wrap .categorydiv ul.category-tabs li a:hover{color:var(--pe-text)}
.brikpanel-pe-metaboxes-wrap .categorydiv ul.category-tabs li.tabs a{background:var(--pe-card);color:var(--pe-text);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.brikpanel-pe-metaboxes-wrap .categorydiv div.tabs-panel{max-height:220px;overflow:auto;padding:.5rem .75rem;background:var(--pe-card);border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm)}
.brikpanel-pe-metaboxes-wrap .categorydiv ul.categorychecklist,
.brikpanel-pe-metaboxes-wrap .categorydiv ul.categorychecklist ul{margin:0;padding:0;list-style:none}
.brikpanel-pe-metaboxes-wrap .categorydiv ul.categorychecklist ul.children{margin-left:1.25rem}
.brikpanel-pe-metaboxes-wrap .categorydiv ul.categorychecklist li{margin:.25rem 0;padding:0;list-style:none;font-size:.8125rem;line-height:1.4;color:var(--pe-text)}
.brikpanel-pe-metaboxes-wrap .categorydiv ul.categorychecklist li label.selectit{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
.brikpanel-pe-metaboxes-wrap .categorydiv ul.categorychecklist li input[type="checkbox"]{margin:0;accent-color:var(--pe-primary)}
/* "+ Add New X" toggle + inline form. WP core hides the form via the
   `wp-hidden-child` class until the link is clicked — mirror that. */
.brikpanel-pe-metaboxes-wrap .categorydiv p.category-add.wp-hidden-child,
.brikpanel-pe-metaboxes-wrap .categorydiv .category-add.wp-hidden-child{display:none}
.brikpanel-pe-metaboxes-wrap .categorydiv h4,
.brikpanel-pe-metaboxes-wrap .categorydiv .taxonomy-add-new{display:inline-block;margin:.625rem 0 0;padding:0;background:none;border:0;color:var(--pe-text);font-size:.8125rem;font-weight:550;text-decoration:underline;cursor:pointer}
.brikpanel-pe-metaboxes-wrap .categorydiv .taxonomy-add-new:hover{color:var(--pe-primary)}
.brikpanel-pe-metaboxes-wrap .categorydiv p.category-add,
.brikpanel-pe-metaboxes-wrap .categorydiv .category-add{display:block;margin:.5rem 0 0;padding:.75rem;background:#fafafa;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm)}
.brikpanel-pe-metaboxes-wrap .categorydiv .category-add label{display:block;margin-bottom:.25rem;color:var(--pe-text-secondary);font-size:.75rem;font-weight:600}
.brikpanel-pe-metaboxes-wrap .categorydiv .category-add input[type="text"],
.brikpanel-pe-metaboxes-wrap .categorydiv .category-add select{width:100%;margin:0 0 .5rem;padding:.5rem .75rem;background:#fff;color:var(--pe-text);border:1px solid var(--pe-input-border);border-radius:var(--pe-radius-sm);font-size:.8125rem;line-height:1.4;box-shadow:none;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.brikpanel-pe-metaboxes-wrap .categorydiv .category-add input[type="text"]:focus,
.brikpanel-pe-metaboxes-wrap .categorydiv .category-add select:focus{border-color:var(--pe-input-focus);box-shadow:0 0 0 1px var(--pe-input-focus)}
.brikpanel-pe-metaboxes-wrap .categorydiv .category-add input.category-add-submit{display:inline-flex!important;width:auto;margin:0;padding:.5rem 1rem!important;background:var(--pe-primary)!important;color:#fff!important;border:none!important;border-radius:var(--pe-radius-sm)!important;font-size:.8125rem!important;font-weight:550!important;cursor:pointer;box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.1)!important;transition:background .15s ease!important}
.brikpanel-pe-metaboxes-wrap .categorydiv .category-add input.category-add-submit:hover{background:var(--pe-primary-hover)!important}
.brikpanel-pe-metaboxes-wrap .categorydiv .category-add input.category-add-submit:disabled{opacity:.6;cursor:not-allowed}
/* jQuery UI autocomplete popup — match card aesthetic. */
ul.ui-autocomplete.wp-tags-autocomplete{padding:.25rem;background:var(--pe-card);border:1px solid var(--pe-border);border-radius:var(--pe-radius);box-shadow:0 6px 20px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.04);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.8125rem;list-style:none}
ul.ui-autocomplete.wp-tags-autocomplete .ui-menu-item{padding:0;margin:0;list-style:none}
ul.ui-autocomplete.wp-tags-autocomplete .ui-menu-item-wrapper{padding:.375rem .625rem;border-radius:.3125rem;cursor:pointer;color:var(--pe-text);transition:background .1s ease}
ul.ui-autocomplete.wp-tags-autocomplete .ui-menu-item-wrapper.ui-state-active,
ul.ui-autocomplete.wp-tags-autocomplete .ui-menu-item-wrapper:hover{background:#f1f1f1;border:none;margin:0}

/* Backorder "Notify customer" sub-control — collapse opens when stock
   status flips to "On backorder". Reuses the standard collapse animation. */
.brikpanel-pe-backorder-collapse>div{padding:0}
.brikpanel-pe-backorder-collapse.open{margin-top:.75rem}
.brikpanel-pe-backorder-field{margin-bottom:0;padding:.875rem 1rem;background:#fafafa;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm)}
.brikpanel-pe-backorder-field>label{margin-bottom:.5rem}
.brikpanel-pe-backorder-field .brikpanel-pe-help-text{margin:.5rem 0 0}
.brikpanel-pe-radio-group{display:flex;flex-direction:column;gap:.375rem}
.brikpanel-pe-radio{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--pe-text);cursor:pointer;line-height:1.3;padding:.25rem 0;font-weight:400}
.brikpanel-pe-radio input[type=radio]{appearance:none;-webkit-appearance:none;margin:0;width:16px;min-width:16px;height:16px;min-height:16px;border:1px solid var(--pe-input-border);border-radius:50%;background:#fff;cursor:pointer;position:relative;flex-shrink:0;flex-grow:0;flex-basis:16px;transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box;padding:0}
.brikpanel-pe-radio input[type=radio]:hover{border-color:var(--pe-text-secondary)}
.brikpanel-pe-radio input[type=radio]:checked{border-color:var(--pe-primary);box-shadow:0 0 0 1px var(--pe-primary)}
.brikpanel-pe-radio input[type=radio]:checked::after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:var(--pe-primary);transform:translate(-50%,-50%)}
.brikpanel-pe-radio input[type=radio]:focus{outline:none;border-color:var(--pe-primary);box-shadow:0 0 0 1px var(--pe-primary)}
/* Per-variation backorder sub-row — sits between main row and any
   third-party extras row when the merchant picks "On backorder". */
.brikpanel-pe-var-table tr.var-backorder-row>td{padding:0;background:#fafafa;border-top:none}
.brikpanel-pe-var-table tr.var-main-row.has-backorder{border-bottom:none}
.brikpanel-pe-var-backorder{padding:.625rem 1.25rem;display:flex;align-items:center;gap:1.25rem;font-size:.8125rem;color:var(--pe-text)}
.brikpanel-pe-var-backorder .brikpanel-pe-var-backorder-label{font-weight:600;color:var(--pe-text-secondary);font-size:.75rem;text-transform:uppercase;letter-spacing:.03em}
.brikpanel-pe-var-backorder .brikpanel-pe-radio-group{flex-direction:row;gap:1rem}

/* ---- Product Catalog Feed Pro (WPWOOF) panel polish ----------------------
   The plugin's product-data panel ships WooCommerce-native float layouts plus
   per-channel "FB | G | P | T | R" help badges (Facebook / Google / Pinterest
   / TikTok / Reddit). Lifted into BrikPanel's stacked editor those badges fall
   out as raw black text and the switch row's 162px float padding overlaps its
   label. Scope everything to the plugin's own class names so only its panel is
   touched. */
/* "Exclude this product from feeds" switch row -> clean inline row. */
.brikpanel-pe-wc-fields-content .trigger_div{display:flex!important;align-items:center;gap:.625rem;padding:0!important;margin:0 0 1rem!important}
.brikpanel-pe-wc-fields-content .trigger_div .ios-switch,
.brikpanel-pe-wc-fields-content .trigger_div .switch{float:none!important;margin:0!important;flex:0 0 auto}
.brikpanel-pe-wc-fields-content .trigger_div label.woof-switcher-title{float:none!important;margin:0!important;font-size:.8125rem!important;font-weight:600!important;color:var(--pe-text)!important;cursor:pointer}
/* Channel badges -> small muted uppercase caption under the field. */
.brikpanel-pe-wc-fields-content .extra-link-2-wrapper{display:inline-block;margin:.25rem 0 0!important;font-size:.6875rem;font-weight:600;letter-spacing:.04em;line-height:1.4;color:var(--pe-text-muted);text-transform:uppercase}
.brikpanel-pe-wc-fields-content .extra-link-2-wrapper a{color:var(--pe-text-secondary);text-decoration:none}
.brikpanel-pe-wc-fields-content .extra-link-2-wrapper a:hover{text-decoration:underline}
/* Field rows -> consistent vertical rhythm (covers form-row too). */
.brikpanel-pe-wc-fields-content #woof_add_extra_fields p.form-field,
.brikpanel-pe-wc-fields-content #woof_add_extra_fields p.form-row{display:flex!important;flex-direction:column!important;margin:0 0 1rem!important;padding:0!important}
.brikpanel-pe-wc-fields-content #woof_add_extra_fields p.form-field > .wrap,
.brikpanel-pe-wc-fields-content #woof_add_extra_fields p.form-row > .wrap{display:block;width:100%}
/* Media previews (carousel / single-product ad) -> capped so a large or broken
   image can't blow the panel height open. */
.brikpanel-pe-wc-fields-content .image-preview img{max-width:120px!important;max-height:120px!important;width:auto!important;height:auto!important;border:1px solid var(--pe-border);border-radius:var(--pe-radius-sm);object-fit:cover}

/* Discovery card: other plugins add fields to this product but the setting
   that surfaces them is off. Sits in the slot those fields will occupy once
   enabled, so the promise and the payoff share a place on the page.
   Deliberately quiet — this is an offer, not a warning. */
.brikpanel-pe-tp-hint__lead{margin:0;font-size:.8125rem;color:var(--pe-text-secondary,#616161);line-height:1.5}
.brikpanel-pe-tp-hint__names{margin:.375rem 0 0;font-size:.8125rem;color:var(--pe-text,#303030);font-weight:550}
.brikpanel-pe-tp-hint__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.875rem}
.brikpanel-pe-tp-msg{margin:.75rem 0 0;font-size:.75rem;color:var(--pe-error,#d72c0d)}

/* Header row for the third-party fields card: title on the left, the undo on
   the right. The card's own `>label:first-child` rule no longer matches now
   that the label sits in this wrapper, so its styling is restated here. */
.brikpanel-pe-wc-fields-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}
.brikpanel-pe-wc-fields-head>label{display:block;font-size:.8125rem;font-weight:600;color:var(--pe-text,#303030);margin:0}
.brikpanel-pe-wc-fields-head .brikpanel-pe-wc-fields__hide{flex:0 0 auto}