/* Product Configurator by Drog — storefront switcher styles (Phase 3 + 6 + availability v1.9) */
/* ── v2.8 button fill variants (config.style.variant): outline | solid | soft | minimal ──
   Each variant restyles .pc-item + .pc-active; --pc-accent drives the brand colour. */
.pc-switcher .pc-item { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }

/* solid: filled chips, accent fill when active */
.pc-fill-solid .pc-item { background:#f1f3f5; border-color:transparent; color:#46505a; }
.pc-fill-solid .pc-item:hover { background:#e6e9ed; border-color:transparent; }
.pc-fill-solid .pc-item.pc-active { background:var(--pc-accent,#2196a5); border-color:var(--pc-accent,#2196a5); color:#fff; box-shadow:none; font-weight:600; }
.pc-fill-solid .pc-item.pc-active:hover { filter:brightness(.95); }

/* soft: tinted accent wash when active (calm, modern) */
.pc-fill-soft .pc-item { background:#fff; border-color:#e4e4e4; color:#555; }
.pc-fill-soft .pc-item:hover { border-color:var(--pc-accent,#2196a5); color:var(--pc-accent,#2196a5); }
.pc-fill-soft .pc-item.pc-active { background:#eaf6f8; background:color-mix(in srgb, var(--pc-accent,#2196a5) 12%, #fff); border-color:var(--pc-accent,#2196a5); color:var(--pc-accent,#2196a5); box-shadow:none; font-weight:600; }

/* minimal: borderless, accent underline when active */
.pc-fill-minimal .pc-item { background:transparent; border-color:transparent; border-radius:0; color:#555; padding-left:4px; padding-right:4px; }
.pc-fill-minimal .pc-item:hover { color:var(--pc-accent,#2196a5); background:transparent; border-color:transparent; }
.pc-fill-minimal .pc-item.pc-active { color:var(--pc-accent,#2196a5); border-bottom:2px solid var(--pc-accent,#2196a5); border-radius:0; box-shadow:none; font-weight:600; }

.pc-switcher {
  margin: 16px 0; display: block; box-sizing: border-box; max-width: 560px;
  /* themeable defaults; overridden per-group via inline custom props (config.style) */
  --pc-accent: #2196a5;
  --pc-radius: 6px;
  --pc-pad: 9px 16px;
  --pc-fs: 15px;
  --pc-gap: 8px;
}
.pc-switcher * { box-sizing: border-box; }

/* calculator */
.pc-calc { margin: 16px 0; padding: 14px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fafafa; }
.pc-calc-inputs { display: flex; flex-wrap: wrap; gap: 12px; }
.pc-calc-field { display: flex; flex-direction: column; gap: 3px; }
.pc-calc-field label { font-size: 12px; font-weight: 600; }
.pc-calc-field .pc-calc-unit { color: #999; font-weight: 400; }
.pc-calc-field input, .pc-calc-field select { padding: 5px 8px; border: 1px solid #ccc; border-radius: 5px; min-width: 120px; }
.pc-calc-result { margin-top: 12px; font-size: 18px; }
.pc-calc-result .pc-calc-value { color: #2196a5; font-weight: 700; }
.pc-calc-result-label { color: #555; font-size: 14px; }
.pc-row { margin-bottom: 14px; }
.pc-row-label { font-weight: 600; margin-bottom: 6px; font-size: 13px; }
.pc-items { display: flex; flex-wrap: wrap; gap: var(--pc-gap, 8px); }
/* jagged custom layout (axis "row pattern" like 2,1,3): each strip holds an exact count, no wrap */
.pc-items-row { flex-wrap: nowrap; margin-bottom: var(--pc-gap, 8px); }
.pc-items-row:last-child { margin-bottom: 0; }
/* PDP price range "from min — to max" (opt-in per group via style.price_range) */
.pc-price-range { font-size: 13px; color: #555; margin: 0 0 10px; }
.pc-price-range .pc-pr-dash { color: #aaa; margin: 0 2px; }
/* tidy grid alignment for compact button-like values (numbers, short labels) */
.pc-ui-button .pc-item, .pc-ui-chips .pc-item, .pc-ui-tabs .pc-item, .pc-ui-swatch_color .pc-item { min-width: 56px; justify-content: center; text-align: center; }

/* subgroup ("series") row — kept visually distinct by the top divider + uppercase label,
   but its buttons follow the group's chosen variant (pc-fill-*) just like the axis rows.
   (No active-state override here — that forced a solid accent fill regardless of variant.) */
.pc-switcher .pc-row-subgroup { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #ececec; }
.pc-switcher .pc-row-subgroup .pc-row-label { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: #888; }

/* base item */
.pc-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--pc-pad, 9px 16px); border: 1px solid #d6d6d6; border-radius: var(--pc-radius, 6px);
  background: #fff; color: #333; text-decoration: none; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  line-height: 1.2; font-size: var(--pc-fs, 15px);
}
.pc-item:hover { border-color: #999; text-decoration: none; }
.pc-item.pc-active { border-color: var(--pc-accent, #2196a5); box-shadow: 0 0 0 2px rgba(33,150,165,.25); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-accent, #2196a5) 25%, transparent); font-weight: 600; }
.pc-item.pc-disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* PARTIAL: exists, but only in a different combination than the current selection.
   Still clickable in 'mark' mode (navigates to nearest sibling; other params shift).
   Clean look: faded + solid light border + a small corner dot (no noisy stripes).
   !important + .pc-switcher prefix so theme button/input styling can't mask the marker. */
.pc-switcher .pc-item.pc-partial { position: relative; border-style: solid !important; border-color: #e4e4e4 !important; color: #a6a6a6 !important; background-image: none !important; background-color: #fcfcfc !important; opacity: 1; }
.pc-switcher .pc-item.pc-partial:hover { border-color: var(--pc-accent, #2196a5) !important; color: #5a5a5a !important; }
.pc-switcher .pc-item.pc-partial::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: #d2d2d2; pointer-events: none; }
.pc-switcher .pc-item.pc-partial:hover::after { background: var(--pc-accent, #2196a5); }
.pc-switcher .pc-item.pc-partial.pc-disabled { text-decoration: none; cursor: not-allowed; }
.pc-switcher .pc-item.pc-partial .pc-label { font-weight: 400; }
/* partial option in a <select> — keep the trailing dot marker but muted */
.pc-switcher .pc-select option { color: #333; }

/* availability legend (!important: theme styles last-child text larger) */
.pc-switcher .pc-legend { display: flex !important; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 11px !important; line-height: 1.4 !important; color: #888; font-weight: 400 !important; }
.pc-switcher .pc-legend .pc-legend-item { display: inline-flex !important; align-items: center; gap: 5px; font-size: 11px !important; color: #888 !important; }
.pc-lg-swatch { display: inline-block; width: 13px; height: 13px; border-radius: 3px; border: 1px solid #d6d6d6; }
.pc-lg-active { border-color: var(--pc-accent, #2196a5); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-accent, #2196a5) 25%, transparent); }
.pc-lg-partial { position: relative; border-color: #e4e4e4; background: #fcfcfc; }
.pc-lg-partial::after { content: ""; position: absolute; top: 1px; right: 1px; width: 4px; height: 4px; border-radius: 50%; background: #d2d2d2; }
.pc-lg-oos { border-style: dashed; border-color: #e0524b; }
.pc-item .pc-label { white-space: nowrap; display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* in grid/modal cells labels may be narrower — let them shrink with the cell */
.pc-switcher.pc-layout-matrix .pc-item .pc-label { max-width: 150px; }
.pc-item .pc-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; display: block; }

/* out of stock (0 quantity) — red dashed outline + muted */
.pc-item.pc-oos { border-color: #e0524b; border-style: dashed; color: #b23a34; }
.pc-item.pc-oos:hover { border-color: #c0392b; }
.pc-item.pc-oos.pc-active { box-shadow: 0 0 0 2px rgba(224,82,75,.25); }
.pc-item.pc-oos::after { content: ""; }
.pc-item.pc-oos .pc-color,
.pc-item.pc-oos .pc-thumb { outline: 2px solid #e0524b; outline-offset: 1px; opacity: .8; }

/* disabled product (status off) — dim + dotted */
.pc-item.pc-off { opacity: .5; border-style: dotted; }

/* chips */
.pc-ui-chips .pc-item { padding: 3px 10px; border-radius: 999px; font-size: 12px; }

/* tabs */
.pc-ui-tabs .pc-items { gap: 0; border-bottom: 1px solid #ddd; }
.pc-ui-tabs .pc-item { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 14px; }
.pc-ui-tabs .pc-item.pc-active { border-bottom-color: #2196a5; box-shadow: none; }

/* checkbox view (radio behaviour, checkbox look) */
.pc-ui-checkbox .pc-items { flex-direction: column; gap: 4px; align-items: stretch; }
.pc-ui-checkbox .pc-item { justify-content: flex-start; }
.pc-check {
  display: inline-block; width: 16px; height: 16px; flex: 0 0 16px;
  border: 1px solid #b5b5b5; border-radius: 3px; background: #fff; position: relative;
}
.pc-ui-checkbox .pc-item.pc-active .pc-check { background: #2196a5; border-color: #2196a5; }
.pc-ui-checkbox .pc-item.pc-active .pc-check::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.pc-ui-checkbox .pc-item.pc-oos .pc-check { border-color: #e0524b; }

/* link list */
.pc-ui-link_list .pc-items { gap: 4px 14px; }
.pc-ui-link_list .pc-item { border: none; padding: 0; background: none; color: #2196a5; text-decoration: underline; }
.pc-ui-link_list .pc-item.pc-active { color: #333; text-decoration: none; }

/* color swatch */
.pc-ui-swatch_color .pc-item { padding: 4px; }
.pc-color { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }

/* image swatch */
.pc-ui-swatch_image .pc-item { padding: 3px; }
.pc-ui-swatch_image .pc-thumb { width: 44px; height: 44px; }

/* button with image / card */
.pc-ui-button_image .pc-item,
.pc-ui-card .pc-item { flex-direction: column; text-align: center; max-width: 120px; }
.pc-ui-card .pc-item { padding: 10px; }
.pc-ui-card .pc-thumb { width: 90px; height: 90px; }

/* select — constrained to the block so long option labels can't overflow the column */
.pc-switcher .pc-select { width: 100% !important; max-width: 100% !important; min-width: 0 !important; text-overflow: ellipsis; }

/* select_image — image+label buttons */
.pc-ui-select_image .pc-item { flex-direction: column; text-align: center; max-width: 110px; }
.pc-ui-select_image .pc-thumb { width: 70px; height: 70px; }

/* range slider */
.pc-range-wrap { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; }
.pc-range { flex: 1; }
.pc-range-label { font-weight: 700; color: #2196a5; min-width: 60px; }

/* stepper */
.pc-ui-stepper .pc-items { align-items: center; gap: 10px; }
.pc-step-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid #d6d6d6; border-radius: 50%; font-size: 18px; text-decoration: none; color: #333; cursor: pointer;
}
.pc-step-arrow:hover { border-color: #2196a5; color: #2196a5; text-decoration: none; }
.pc-step-arrow.pc-disabled { opacity: .35; pointer-events: none; }
.pc-step-cur { font-weight: 700; min-width: 70px; text-align: center; }

/* ===== LAYOUTS (container arrangement of axes) ===== */
/* rows: default stacked (no extra rules needed) */

/* grid (key "matrix"): axes flow in a responsive grid of cards */
.pc-switcher.pc-layout-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 18px; max-width: 760px; }
.pc-switcher.pc-layout-matrix > .pc-row { margin-bottom: 0; min-width: 0; } /* min-width:0 prevents long selects blowing out the grid track */
.pc-switcher.pc-layout-matrix > .pc-legend { grid-column: 1 / -1; }

/* accordion: each axis is a collapsible panel (JS toggles .pc-open) */
.pc-switcher.pc-layout-accordion .pc-row { margin-bottom: 0; border: 1px solid #e5e5e5; border-radius: var(--pc-radius, 6px); margin-bottom: 6px; overflow: hidden; }
.pc-switcher.pc-layout-accordion .pc-row-label { margin: 0; padding: 9px 12px; background: #f7f7f7; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; }
.pc-switcher.pc-layout-accordion .pc-row-label::after { content: "\25be"; color: #999; transition: transform .15s; }
.pc-switcher.pc-layout-accordion .pc-row.pc-open .pc-row-label::after { transform: rotate(180deg); }
.pc-switcher.pc-layout-accordion .pc-items, .pc-switcher.pc-layout-accordion .pc-select { padding: 10px 12px; }
.pc-switcher.pc-layout-accordion .pc-row:not(.pc-open) .pc-items,
.pc-switcher.pc-layout-accordion .pc-row:not(.pc-open) .pc-select { display: none; }

/* tabs: axis labels become a tab bar (JS), one axis body visible */
.pc-switcher.pc-layout-tabs { border: 1px solid #e5e5e5; border-radius: var(--pc-radius, 6px); overflow: hidden; }
.pc-tabbar { display: flex; flex-wrap: wrap; gap: 0; background: #f7f7f7; border-bottom: 1px solid #e5e5e5; }
.pc-tabbar button { border: none; background: none; padding: 9px 14px; cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent; color: #555; }
.pc-tabbar button.pc-tab-active { color: var(--pc-accent, #2196a5); border-bottom-color: var(--pc-accent, #2196a5); font-weight: 600; }
.pc-switcher.pc-layout-tabs .pc-row { margin: 0; padding: 12px; }
.pc-switcher.pc-layout-tabs .pc-row > .pc-row-label { display: none; }
.pc-switcher.pc-layout-tabs .pc-row.pc-tabhide { display: none; }

/* modal: collapsed to a trigger button; JS shows overlay with the full switcher */
.pc-modal-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--pc-accent, #2196a5); color: var(--pc-accent, #2196a5); background: #fff; border-radius: var(--pc-radius, 6px); cursor: pointer; font-size: 14px; }
.pc-modal-trigger:hover { background: var(--pc-accent, #2196a5); color: #fff; }
.pc-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pc-modal-box { background: #fff; border-radius: 10px; max-width: 520px; width: 100%; max-height: 86vh; overflow: auto; padding: 20px 22px; position: relative; }
.pc-modal-box .pc-switcher { max-width: 100%; margin: 8px 0 0; }
.pc-modal-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; padding-right: 28px; }
.pc-modal-close { position: absolute; top: 12px; right: 14px; border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #999; }
.pc-modal-close:hover { color: #333; }

/* ===== category teaser (lean variant indicator on category cards) =====
   - Chips WRAP first; a lone chip wider than the card truncates with a REAL
     ellipsis on the inner block .pc-ct-cl (text-overflow is ignored on flex).
   - Only .pc-ct-chips clips, and only between whole rows (clip lands in the
     empty inter-row gap, never mid-word, never a half-row sliver).
   - .pc-ct-foot is a sibling OUTSIDE every clip -> price/count always visible.
   - Range chip + +N are short, non-shrinking text nodes (no .pc-ct-cl needed).
   - Works to ~320px; survives one ultra-long word ("Шкірозамінник").       */
.pc-cat-teaser {
  --pc-accent: #2196a5;
  display: block; text-decoration: none !important; color: inherit;
  margin: 6px 0 0; overflow: hidden;
  max-height: 0; opacity: 0; transform: translateY(-2px);
  transition: max-height .18s ease, opacity .18s ease, transform .18s ease;
}
/* reveal only on the hovered CARD (not the whole grid) — scope to per-card wrappers across themes */
.product-layout__item:hover .pc-cat-teaser,
.product-wrap:hover .pc-cat-teaser,
.product-thumb:hover .pc-cat-teaser,
.product-grid > div:hover .pc-cat-teaser,
.pc-cat-teaser:hover, .pc-cat-teaser:focus {
  max-height: 72px; opacity: 1; transform: none;
}
.pc-ct-compact { padding-top: 7px; border-top: 1px solid #eee; }
.pc-ct-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--pc-accent);
  background: #eef7f8; background: color-mix(in srgb, var(--pc-accent) 10%, #fff);
  padding: 3px 11px; border-radius: 999px; line-height: 1.5;
}
.pc-ct-ico { font-size: 12px; }

.pc-ct-axis {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px;
  flex-wrap: wrap; min-width: 0;            /* let the chips strip shrink     */
}
.pc-ct-label { font-size: 11px; color: #8a8a8a; white-space: nowrap; flex: 0 0 auto; }

/* The ONLY clipped region. Takes the rest of the axis row, wraps, and caps
   its height to a whole number of chip rows so card heights stay predictable.
   max-height = rows*(row + gap): the +1 gap lands the clip in the empty
   inter-row gutter, so a row is never shaved and the next row never peeks. */
.pc-ct-chips {
  display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start;
  gap: var(--pc-chip-gap);
  flex: 1 1 0; min-width: 0;                /* critical: lets chips truncate not overflow */
  max-height: calc(var(--pc-chip-rows) * (var(--pc-chip-row) + var(--pc-chip-gap)));
  overflow: hidden;                         /* hides extra ROWS only, never the foot      */
}

/* Chip stays inline-flex so the dot can sit beside the label. It sizes to
   content but can never exceed the strip (max-width:100%), so a lone long
   chip truncates instead of overflowing. Ellipsis is on .pc-ct-cl, not here. */
.pc-ct-chip {
  display: inline-flex; align-items: center; gap: 4px;
  box-sizing: border-box; max-width: 100%; min-width: 0;
  font-size: 11px; line-height: 1.4; padding: 1px 7px;
  border: 1px solid #d8dee0; border-radius: 11px; color: #444; background: #fff;
  white-space: nowrap; transition: border-color .12s;
}

/* The real ellipsis surface: a BLOCK box (text-overflow works here, not on
   the flex chip). overflow-wrap:anywhere lets a single unbreakable word
   shrink so the ellipsis fires instead of forcing the chip past the card.   */
.pc-ct-cl {
  display: block; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  overflow-wrap: anywhere;
}

/* Range chip + total: short, never shrink, never need to ellipsis (bare text
   nodes, so they have no .pc-ct-cl carrier — keeping them rigid is the fix). */
.pc-ct-chip.pc-ct-range { font-weight: 600; color: #16707c; border-color: #bfe0e4; flex: 0 0 auto; }
.pc-ct-num { font-size: 11px; color: #aaa; flex: 0 0 auto; }

/* "+N" overflow indicator: never shrinks, stays readable on a visible row.   */
.pc-ct-chip.pc-ct-more { color: #8a8a8a; border-style: dashed; flex: 0 0 auto; }

/* Dot: fixed size, vertically centred on the label line (chip is align-items:center). */
.pc-ct-dot {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
  border: 1px solid rgba(0,0,0,.15); flex: 0 0 auto;
}

/* Foot: sibling AFTER the clipped chips -> ALWAYS fully visible. flex-wrap
   lets count drop under price on ~320px instead of being clipped.            */
.pc-ct-foot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pc-ct-price { font-size: 12px; color: #555; flex: 0 0 auto; }
.pc-ct-price + .pc-ct-count::before { content: "\00b7"; color: #ccc; margin-right: 6px; }
.pc-ct-count { font-size: 11px; color: #9a9a9a; flex: 0 0 auto; }

@media (max-width: 767px) {
  .pc-items { gap: 6px; }
  .pc-ui-button_image .pc-item, .pc-ui-card .pc-item { max-width: 90px; }
  .pc-cat-teaser { max-height: 72px; opacity: 1; transform: none; }  /* no hover on touch → always show */
}