/* Scoped to the new shade component. Existing format/card styles are untouched. */
.p2ag-buy {
  --p2-shade-size:44px; --p2-shade-gap:8px; --p2-shade-radius:4px;
  --p2-shade-text-radius:6px; --p2-shade-text-min-height:40px;
  --p2-shade-text-padding:10px 14px;
  --p2-shade-panel-height:280px; --p2-shade-image-fit:contain;
  --p2-shade-border:#ddd8dc;
  --p2-shade-hover-border:var(--p2-accent,#84596c);
  --p2-shade-selected-border:var(--p2-ink,#202326);
  --p2-shade-selected-width:2px;
  --p2-shade-background:#fff; --p2-shade-selected-background:#fff;
  --p2-shade-text:var(--p2-ink,#202326); --p2-shade-hover-text:var(--p2-ink,#202326);
  --p2-shade-selected-text:var(--p2-ink,#202326);
  --p2-shade-disabled-opacity:.38; --p2-shade-stock-mark:var(--p2-ink,#202326);
}
.p2ag-buy fieldset.p2ag-shades { min-width:0; width:100%; border:0; padding:0; margin:0 0 18px; color:var(--p2-ink); }
.p2ag-buy .p2ag-shades .p2ag-shades-sr { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.p2ag-buy .p2ag-shades-heading { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:10px; margin:0 0 10px; }
.p2ag-buy .p2ag-shades-selection { min-width:min(160px,100%); flex:1 1 160px; font-size:14px; line-height:1.5; padding:8px 0; overflow-wrap:anywhere; }
.p2ag-buy .p2ag-shades-label { color:var(--p2-muted); font-weight:400; }
.p2ag-buy .p2ag-shades-selected { color:var(--p2-ink); font-size:inherit; font-weight:600; }
.p2ag-buy button.p2ag-shades-toggle { appearance:none; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:0; max-width:100%; width:auto; min-height:40px; margin:0; padding:8px 0 8px 6px; border:0; border-radius:0; background:transparent; color:var(--p2-ink); font:inherit; font-size:12px; line-height:1.4; font-weight:500; letter-spacing:normal; text-transform:none; text-decoration:none; cursor:pointer; box-shadow:none!important; }
.p2ag-buy button.p2ag-shades-toggle:hover { background:transparent; color:var(--p2-accent); text-decoration:underline; }
.p2ag-buy .p2ag-shades-toggle > span:first-child { min-width:0; overflow-wrap:break-word; }
.p2ag-buy .p2ag-shades-chevron { flex:0 0 6px; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.p2ag-buy .is-expanded .p2ag-shades-chevron { transform:translateY(2px) rotate(225deg); }
.p2ag-buy .p2ag-shades-preview { display:flex; align-items:flex-start; flex-wrap:nowrap; gap:var(--p2-shade-gap); min-width:0; width:100%; padding:0; }
/* Short lists are fully visible at every breakpoint, not cropped to one row.
   Keep the menu unavailable even if a theme overrides the hidden attribute. */
.p2ag-buy .p2ag-shades.is-inline > .p2ag-shades-preview { flex-wrap:wrap; }
.p2ag-buy .p2ag-shades.is-inline > .p2ag-shades-panel,
.p2ag-buy .p2ag-shades.is-inline .p2ag-shades-toggle { display:none!important; }
.p2ag-buy .p2ag-shades-panel { box-sizing:border-box; width:100%; min-width:0; padding:14px; border:1px solid var(--p2-line,#e0d6db); border-radius:6px; background:#fff; }
.p2ag-buy .p2ag-shades-search-wrap { display:flex; gap:12px; align-items:center; margin:0 0 14px; min-width:0; }
/* Keep the search geometry identical before and during focus. Elementor's
   radius control targets the same states and remains authoritative. */
.p2ag-buy input.p2ag-shades-search,
.p2ag-buy input.p2ag-shades-search:focus,
.p2ag-buy input.p2ag-shades-search:focus-visible { -webkit-appearance:none; appearance:none; display:block; min-width:0; width:100%; flex:1 1 auto; min-height:40px; height:auto; margin:0; padding:9px 12px; border:1px solid var(--p2-line,#e0d6db); border-radius:4px; background:#fff; color:var(--p2-ink); font:inherit; font-size:13px; line-height:1.4; box-shadow:none!important; }
.p2ag-buy input.p2ag-shades-search::placeholder { color:var(--p2-muted); opacity:1; }
.p2ag-buy input.p2ag-shades-search:focus,
.p2ag-buy input.p2ag-shades-search:focus-visible { border-color:var(--p2-accent,#84596c); }
/* Override the generic guided-mode and theme focus rings only here. Do not
   remove focus indicators from other controls or add an outer selection ring. */
.p2ag-buy .p2ag-shades input.p2ag-shades-search,
.p2ag-buy .p2ag-shades input.p2ag-shades-search:focus,
.p2ag-buy .p2ag-shades input.p2ag-shades-search:focus-visible,
.p2ag-buy .p2ag-shades button.p2ag-shade,
.p2ag-buy .p2ag-shades button.p2ag-shade:focus,
.p2ag-buy .p2ag-shades button.p2ag-shade:focus-visible,
.p2ag-buy .p2ag-shades button.p2ag-shade .p2ag-shade-face {
  outline:0!important; outline-offset:0!important; box-shadow:none!important;
}
.p2ag-buy .p2ag-shades-count { flex:0 0 auto; color:var(--p2-muted); font-size:11px; font-weight:400; line-height:1.4; }
.p2ag-buy .p2ag-shades-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--p2-shade-size),1fr)); gap:var(--p2-shade-gap); justify-items:center; align-items:start; width:100%; max-height:var(--p2-shade-panel-height); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-gutter:stable; padding:0 4px 0 0; }
.p2ag-buy button.p2ag-shade { appearance:none; box-sizing:border-box; position:relative; display:flex; flex:0 0 var(--p2-shade-size); flex-direction:column; align-items:center; justify-content:flex-start; gap:0; width:var(--p2-shade-size); max-width:100%; min-width:0; min-height:var(--p2-shade-size); height:auto; margin:0; padding:0; border:0; border-radius:var(--p2-shade-radius); background:transparent; color:var(--p2-shade-text); font:inherit; font-size:12px; font-weight:500; line-height:1.3; letter-spacing:normal; text-transform:none; text-align:center; cursor:pointer; box-shadow:none!important; transition:none; }
.p2ag-buy .p2ag-shade-face { --p2-shade-face-width:1px; --p2-shade-face-color:var(--p2-shade-border); display:flex; align-items:center; justify-content:center; position:relative; box-sizing:border-box; width:var(--p2-shade-size); max-width:100%; height:var(--p2-shade-size); aspect-ratio:1; min-width:0; overflow:hidden; border:0; border-radius:var(--p2-shade-radius); background:var(--p2-shade-background); }
/* Exactly one real CSS border, painted inward over the swatch. An absolutely
   positioned layer keeps both images and fallback text stable at any width. */
.p2ag-buy .p2ag-shade-face::before { content:""; position:absolute; inset:0; z-index:2; box-sizing:border-box; border:var(--p2-shade-face-width) solid var(--p2-shade-face-color); border-radius:inherit; pointer-events:none; }
.p2ag-buy .p2ag-shade-image { display:block; width:100%; height:100%; max-width:100%; margin:0; padding:0; border:0; border-radius:0; object-fit:var(--p2-shade-image-fit); object-position:center; }
/* Real text alternatives: intrinsic width, their own radius and padding.
   Color/image swatches keep their fixed geometry and never acquire a caption. */
.p2ag-buy button.p2ag-shade.is-text { flex:0 0 auto; width:max-content; max-width:100%; min-height:var(--p2-shade-text-min-height); border-radius:var(--p2-shade-text-radius); }
.p2ag-buy .p2ag-shade.is-text .p2ag-shade-face { width:100%; max-width:100%; height:auto; min-height:var(--p2-shade-text-min-height); aspect-ratio:auto; border-radius:var(--p2-shade-text-radius); }
.p2ag-buy .p2ag-shade-fallback { box-sizing:border-box; display:block; max-width:100%; padding:var(--p2-shade-text-padding); font-size:13px; line-height:1.35; font-weight:500; white-space:normal; word-break:normal; overflow-wrap:break-word; hyphens:none; }
/* Mixed catalogs must not force a long text alternative into a swatch column. */
.p2ag-buy .p2ag-shades.has-text-options .p2ag-shades-grid { box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; justify-content:flex-start; }
.p2ag-buy button.p2ag-shade:hover:not(:disabled) { background:transparent; color:var(--p2-shade-hover-text); }
.p2ag-buy button.p2ag-shade:hover:not(:disabled):not([aria-pressed="true"]) .p2ag-shade-face { --p2-shade-face-color:var(--p2-shade-hover-border); }
.p2ag-buy button.p2ag-shade[aria-pressed="true"] { background:transparent; color:var(--p2-shade-selected-text); }
.p2ag-buy button.p2ag-shade[aria-pressed="true"] .p2ag-shade-face { --p2-shade-face-width:var(--p2-shade-selected-width); --p2-shade-face-color:var(--p2-shade-selected-border); background-color:var(--p2-shade-selected-background); }
/* Keyboard focus changes the SAME inner border to dashed, not a second ring.
   Keep it visible even when the saved selection width is zero. */
.p2ag-buy button.p2ag-shade:focus-visible .p2ag-shade-face::before { border-width:max(2px,var(--p2-shade-face-width)); border-style:dashed; border-color:var(--p2-shade-selected-border); }
@media (forced-colors:active) {
  .p2ag-buy button.p2ag-shade[aria-pressed="true"] .p2ag-shade-face::before,
  .p2ag-buy button.p2ag-shade:focus-visible .p2ag-shade-face::before { border-color:Highlight; }
  .p2ag-buy input.p2ag-shades-search:focus,
  .p2ag-buy input.p2ag-shades-search:focus-visible { border-color:Highlight; }
}
.p2ag-buy button.p2ag-shade:disabled { opacity:var(--p2-shade-disabled-opacity); cursor:not-allowed; background:transparent; }
.p2ag-buy .p2ag-shade.is-out-of-stock .p2ag-shade-face::after { content:""; position:absolute; width:145%; height:1px; background:var(--p2-shade-stock-mark); left:-22.5%; top:50%; transform:rotate(-45deg); pointer-events:none; }
.p2ag-buy .p2ag-shade.is-text.is-out-of-stock .p2ag-shade-face::after { display:none; }
.p2ag-buy .p2ag-shade.is-text.is-out-of-stock .p2ag-shade-face::before { border-style:dashed; }
.p2ag-buy .p2ag-shades-empty { margin:8px 0; font-size:13px; line-height:1.5; color:var(--p2-muted); }
.p2ag-buy .p2ag-variations-all-enhanced { display:none!important; }
.p2ag-buy .p2ag-shades [hidden] { display:none!important; }
@media (max-width:480px) {
  .p2ag-buy .p2ag-shades-heading { gap:6px; }
  .p2ag-buy .p2ag-shades-selection { font-size:13px; }
  .p2ag-buy button.p2ag-shades-toggle { font-size:11px; gap:6px; }
  .p2ag-buy .p2ag-shades-panel { padding:10px; }
  .p2ag-buy .p2ag-shades-search-wrap { flex-wrap:wrap; gap:6px; }
  .p2ag-buy .p2ag-shades-count { width:100%; }
}
/* Mixed-attribute products need a usable reset after a selection. */
.p2ag-buy.p2ag-has-shades.p2ag-guided-active .reset_variations { display:inline-block!important; }

/* Widget-local style sample, copied to the body-level popup on every opening. */
.p2ag-shade-tooltip,
.p2ag-buy .p2ag-shade-tooltip-skin {
  box-sizing:border-box; padding:8px 12px; max-width:260px; border:0; border-radius:6px;
  background:#24282b; color:#fff; font-family:inherit; font-size:12px; font-weight:500;
  font-style:normal; line-height:1.4; letter-spacing:normal; word-spacing:normal;
  text-transform:none; text-decoration:none; text-align:center;
  --p2-shade-tooltip-offset:8px;
}
.p2ag-buy .p2ag-shade-tooltip-skin { display:none!important; }
.p2ag-shade-tooltip {
  position:fixed; z-index:2147483000; display:block; width:max-content; min-width:0; min-height:0;
  height:auto; margin:0; white-space:normal; overflow-wrap:anywhere; overflow-y:auto;
  pointer-events:auto; box-shadow:none; transition:none; animation:none; cursor:default;
}
.p2ag-shade-tooltip[hidden] { display:none!important; }

/* Observe CSS-only changes to size and gap in Elementor's live editor. */
.p2ag-buy .p2ag-shades-measure {
  position:absolute; left:0; top:0; width:calc(var(--p2-shade-size) + var(--p2-shade-gap));
  height:1px; visibility:hidden; overflow:hidden; pointer-events:none;
}