/* Stack view contract. This is the only owner of the summary, product cards,
   transition groups and folders. Density changes spacing, never hides content. */
.builder-layout {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  direction: ltr;
}
.builder-sections { grid-column: 2; grid-row: 1; min-width: 0; direction: rtl; }
.stack-summary {
  position: sticky;
  top: calc(var(--header-h) + 76px);
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100dvh - var(--header-h) - 92px);
  min-height: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  direction: rtl;
}
.stack-summary [hidden] { display: none; }
.stack-summary__heading {
  display: flex;
  flex: none;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.stack-summary__heading > div > span { display: block; color: var(--teal-700); font-size: var(--text-summary-caption); font-weight: 800; }
.stack-summary__heading h2 { margin-top: 2px; font-size: 1.25rem; line-height: 1.25; }
.stack-summary__controls { display: flex; align-items: center; gap: 7px; }
.summary-currency select { width:76px; min-height:32px; padding:4px 5px; border:1px solid var(--teal-100); border-radius:10px; background:#fff; color:var(--teal-800); font:inherit; font-size:var(--text-summary-caption); }
.stack-summary__size { padding: 6px 9px; border-radius: 999px; background: var(--teal-50); color: var(--teal-700); font-size: var(--text-summary-caption); font-weight: 800; white-space: nowrap; }
.stack-summary__clear { display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:6px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:var(--text-summary-caption);font-weight:700;white-space:nowrap; }
.stack-summary__clear:hover { color:var(--danger);background:var(--danger-bg);border-color:#d8bfc0; }
.stack-summary__clear svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.summary-products-stage { position: relative; flex: 1; min-height: 0; margin-block: 10px; overflow: hidden; border-radius: 14px; }
.summary-products-stage > .stack-grid, .summary-products-stage > .stack-paged { position: absolute; inset: 0; }
.stack-grid {
  --card-columns: 2;
  --card-padding: 12px;
  --card-name-size: var(--text-body);
  --card-logo-size: 36px;
  --card-min-height: 130px;
  --card-gap: 10px;
  --card-content-gap: 7px;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  align-items: stretch;
  justify-content: center;
  gap: var(--card-gap);
  box-sizing: border-box;
  width: 100%;
  padding: 7px 3px;
  min-width: 0;
  direction: rtl;
}
.stack-grid[data-density="medium"] { --card-padding: 10px; --card-name-size: var(--text-summary-name); --card-logo-size: 32px; --card-min-height: 116px; --card-gap: 8px; }
.stack-grid[data-density="compact"] { --card-columns: 3; --card-padding: 6px; --card-name-size: var(--text-summary-name); --card-logo-size: 28px; --card-min-height: 108px; --card-gap: 6px; --card-content-gap: 5px; }
.stack-grid--measure { position: absolute; inset: 0; height: 100%; visibility: hidden; pointer-events: none; contain: layout style; }
.stack-card, .stack-folder-tile {
  flex: 0 0 calc((100% - (var(--card-columns) - 1) * var(--card-gap)) / var(--card-columns));
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--card-min-height);
  padding: var(--card-padding);
  border: 1px solid var(--card-border, var(--line));
  border-radius: 13px;
  background: var(--card-background, #fff);
  color: var(--ink);
  box-shadow: inset -3px 0 0 var(--card-accent, transparent);
  text-align: start;
  font: inherit;
  transition: border-color .16s, background-color .16s, box-shadow .16s;
}
.stack-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: var(--card-content-gap);
}
button.stack-card:hover, .stack-folder-tile:hover { border-color: var(--card-hover-border, var(--teal-300)); background: var(--card-hover-background, #f1fafa); box-shadow: inset -3px 0 0 var(--card-accent, transparent), inset 0 0 0 1px var(--card-hover-border, var(--teal-200)); }
/* Hover stays inside the card; a clipped stage cannot cover its top edge. */
.stack-card:focus-visible, .stack-folder-tile:focus-visible, .stack-summary button:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.stack-card--removed { --card-border: var(--change-border); --card-background: #fff; --card-hover-border: var(--change); --card-hover-background: var(--change-bg); }
.stack-card--kept { --card-border: var(--line); --card-background: #fff; }
.stack-card--pending { --card-border: var(--line); --card-background: #fff; }
.stack-card--discounted { --card-accent: var(--success-border); --card-border: var(--success-border); --card-background: var(--success-bg); --card-hover-border: var(--success); --card-hover-background: var(--success-bg); }
.stack-card.stack-card--wide { flex-basis: 100%; }
.stack-card__tags { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.stack-badge { display: inline-flex; flex: none; align-items: center; padding: 3px 5px; border: 1px solid transparent; border-radius: 999px; font-size: var(--text-summary-caption); font-weight: 800; line-height: 1.25; white-space: nowrap; }
.stack-badge--new { color:var(--teal-700); background:var(--teal-50); }
.stack-badge--kept { color:var(--muted); background:var(--surface); }
.stack-badge--saving { color:var(--success); background:var(--success-badge-bg); }
.stack-badge--removed, .stack-badge--change { color:var(--change); background:var(--change-badge-bg); }
.stack-badge--increase { color:var(--danger); background:var(--danger-bg); }
.stack-badge--pending, .stack-badge--review { color:var(--muted); background:var(--surface); }
.stack-badge--neutral { color: #52676c; background: #f5f8f8; border-color: #cddadd; }
.stack-card__identity { display: grid; grid-template-columns: var(--card-logo-size) minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.stack-card__identity:not(:has(.stack-card__logo)) { grid-template-columns: minmax(0, 1fr); }
.stack-card__logo { display: block; width: var(--card-logo-size); height: var(--card-logo-size); object-fit: contain; }
.stack-card__copy, .stack-card__name, .stack-card__category, .stack-card__prices, .stack-card__offer { display: block; min-width: 0; }
.stack-card__category { margin-bottom: 2px; color: var(--muted); font-size: var(--text-summary-caption); line-height: 1.3; }
.stack-card__name { font-size: var(--card-name-size); font-weight: 800; line-height: 1.5; word-break: normal; overflow-wrap: normal; }
.stack-card__prices { align-self: end; font-size: var(--text-summary-price); line-height: 1.35; }
.stack-card__price { display: block; font-size: var(--text-summary-price); color: var(--teal-700); }
.stack-card--removed .stack-card__price { color: var(--muted); }
.stack-card__price.is-previous { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.stack-card__offer { margin-top: 2px; color: var(--teal-800); font-size: var(--text-summary-price); font-weight: 800; }
.stack-card--discounted .stack-card__offer { color: var(--success); }
.stack-transition { flex:0 0 100%;min-width:0;padding:7px;border:1px solid var(--change-border);border-radius:16px;background:var(--change-bg);box-shadow:inset -2px 0 0 var(--change-border); }
.stack-transition__heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; min-width: 0; }
.stack-transition__label { color: var(--change); font-size: var(--text-summary-caption); font-weight: 800; white-space: nowrap; }
.stack-transition__sets { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); align-items: stretch; gap: 4px; min-width: 0; }
.stack-transition__collection { display: grid; align-content: center; gap: 8px; min-width: 0; }
.stack-transition__collection > .stack-card { width: 100%; min-height: 0; }
.stack-transition__sets--continuation { grid-template-columns: minmax(0, 1fr); }
.stack-transition__sets--continuation .stack-transition__collection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack-transition__sets--continuation .stack-card:only-child { grid-column: 1 / -1; }
.stack-transition__continuation { margin: 6px 0 0; color: var(--muted); font-size: var(--text-summary-caption); line-height: 1.4; }
.stack-transition__arrow { display: grid; align-content: center; justify-content: center; color: var(--change); font-size: var(--text-card-title); }
.stack-folder-tile { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-content: center; align-items: center; gap: 8px; background: var(--card-background, var(--surface)); }
.stack-folder-tile--discounted { --card-accent: var(--success-border); --card-border: var(--success-border); --card-background: var(--success-bg); --card-hover-border: var(--success); --card-hover-background: var(--success-bg); }
/* A replacement keeps its lavender identity; a mint badge carries any saving. */
.stack-folder-tile--changed { --card-accent: var(--change-border); --card-border: var(--change-border); --card-background: var(--change-bg); --card-hover-border: var(--change); --card-hover-background: var(--change-bg); }
.stack-folder-tile__icons { display: grid; grid-template-columns: repeat(2, 24px); grid-template-rows: repeat(2, 24px); gap: 3px; }
.stack-folder-tile__icons img { width: 24px; height: 24px; }
.stack-folder-tile__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stack-folder-tile__copy strong { font-size: var(--card-name-size); line-height: 1.5; }
.stack-folder-tile__copy > span { color: var(--muted); font-size: var(--text-summary-caption); }
.stack-folder-tile__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.stack-folder-tile__tags:empty { display: none; }
.stack-grid[data-density="compact"] > .stack-folder-tile { --card-min-height: 92px; grid-template-columns: 43px minmax(0, 1fr); gap: 6px; }
.stack-grid[data-density="compact"] > .stack-folder-tile .stack-folder-tile__icons { grid-template-columns: repeat(2, 20px); grid-template-rows: repeat(2, 20px); }
.stack-grid[data-density="compact"] > .stack-folder-tile .stack-folder-tile__icons img { width: 20px; height: 20px; }
/* Folders have their own density. Condense them before hiding core changes,
   keeping product type, price and badge sizes untouched. */
.stack-folder-dock { display: grid; grid-template-columns: repeat(var(--folder-columns), minmax(0, 1fr)); gap: var(--card-gap); flex: 0 0 100%; min-width: 0; }
.stack-grid[data-folder-density="small"][data-density="compact"],
.stack-grid[data-folder-density="minimal"][data-density="compact"] { --card-columns: 2; }
.stack-grid[data-folder-density="small"] .stack-folder-dock > .stack-folder-tile,
.stack-grid[data-folder-density="minimal"] .stack-folder-dock > .stack-folder-tile {
  --card-padding: 6px;
  --card-min-height: 72px;
  --card-name-size: var(--text-summary-name);
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 5px;
}
.stack-grid[data-folder-density="small"] .stack-folder-dock > .stack-folder-tile .stack-folder-tile__icons,
.stack-grid[data-folder-density="minimal"] .stack-folder-dock > .stack-folder-tile .stack-folder-tile__icons {
  grid-template-columns: repeat(2, 18px);
  /* Two logos need one row, not an empty second row. Keep the same logo size
     and let three/four logos form the full 2x2 folder preview. */
  grid-template-rows: none;
  grid-auto-rows: 18px;
  gap: 2px;
}
.stack-grid[data-folder-density="small"] .stack-folder-dock > .stack-folder-tile .stack-folder-tile__icons img,
.stack-grid[data-folder-density="minimal"] .stack-folder-dock > .stack-folder-tile .stack-folder-tile__icons img { width: 18px; height: 18px; }
.stack-grid[data-folder-density="small"] .stack-folder-dock > .stack-folder-tile .stack-folder-tile__copy,
.stack-grid[data-folder-density="minimal"] .stack-folder-dock > .stack-folder-tile .stack-folder-tile__copy { gap: 2px; }
.stack-grid[data-folder-density="minimal"] .stack-folder-dock > .stack-folder-tile {
  --card-min-height: 94px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  row-gap: 4px;
}
.stack-grid[data-folder-density="minimal"] .stack-folder-dock > .stack-folder-tile .stack-folder-tile__tags { justify-content: center; }
.stack-paged { display: flex; flex-direction: column; }
.stack-paged__viewport { display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; direction: ltr; scroll-snap-type: x mandatory; scrollbar-width: none; }
.stack-paged__viewport::-webkit-scrollbar { display: none; }
.stack-paged__page { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.stack-paged__controls { display: flex; flex: 0 0 36px; align-items: center; justify-content: center; gap: 14px; font-size: var(--text-summary-caption); }
.stack-paged__controls button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; color: var(--teal-700); }
.stack-paged__controls button:disabled { opacity: .3; }
.summary-empty { flex: 0 0 100%; margin: 0; padding: 28px 12px; color: var(--muted); font-size: 15px; text-align: center; }
.summary-folder { position: absolute; inset: 0; z-index: 10; }
.summary-folder__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 14px; background: rgba(12,39,44,.12); }
.has-open-folder > .stack-grid, .has-open-folder > .stack-paged { filter: blur(4px); opacity: .5; }
.summary-folder__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  max-height: 530px;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 1px solid #e0eeee;
  border-radius: 22px;
  background: rgba(248,253,253,.97);
  box-shadow: 0 12px 28px rgba(18,56,64,.17);
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.summary-folder__panel > header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.summary-folder__panel > header span { display: block; color: var(--teal-700); font-size: var(--text-summary-caption); font-weight: 700; }
.summary-folder__panel > header h3 { font-size: var(--text-card-title); line-height: 1.4; }
.summary-folder__panel > header button { align-self:center; }
.summary-folder__viewport { position: relative; flex: 1; min-width: 0; min-height: 0; margin-top: 4px; overflow-x: auto; overflow-y: hidden; direction: ltr; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; }
.summary-folder__viewport::-webkit-scrollbar { display: none; }
.summary-folder__viewport:focus-visible { outline: 2px solid var(--teal-300); outline-offset: -2px; border-radius: 12px; }
.summary-folder__track { display: flex; height: 100%; }
.stack-grid.summary-folder__page { --card-columns: 2; --card-name-size: var(--text-summary-name); --card-logo-size: 28px; --card-padding: 8px; --card-content-gap: 5px; flex: 0 0 100%; height: 100%; padding: 8px 3px; scroll-snap-align: start; scroll-snap-stop: always; }
.summary-folder__page > .stack-card:only-child { flex-basis:100%; }
.summary-folder__page .stack-transition { padding: 4px; }
.summary-folder__page .stack-transition__heading { margin-bottom: 5px; }
.summary-folder__pagination > span { font-size: var(--text-summary-caption); color: var(--muted); }
.summary-folder__pagination { display: flex; flex: none; align-items: center; justify-content: center; gap: 12px; min-height: 36px; padding-top: 4px; }
.summary-folder__pagination.is-single-page { visibility: hidden; }
.summary-folder__pagination > button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--teal-700); }
.summary-folder__pagination > button:disabled { opacity: .3; }
.summary-folder__pagination svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.summary-folder__dots { display: flex; align-items: center; gap: 6px; }
.summary-folder__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #b8cdd0; }
.summary-folder__dots button[aria-current="page"] { width: 20px; background: var(--teal); }
.summary-costs { display: grid; flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-block: 9px; border-block: 1px solid var(--line); }
.summary-costs > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 8px; min-width: 0; min-height: 36px; padding: 7px 9px; border-radius: 9px; background: var(--surface); color: var(--muted); font-size: var(--text-summary-caption); }
.summary-costs strong { font-size: var(--text-summary-price); color: var(--ink); }
.summary-costs .summary-costs__saving { background: var(--success-bg); color: var(--success); }
.summary-costs__saving strong { color: var(--success); font-size: var(--text-body); }
.summary-costs .summary-costs__value { grid-column: 1 / -1; color: var(--muted); }
.summary-costs__budget { grid-column: 1 / -1; }
.summary-costs__budget.is-over strong { color: #a63f3f; }
.summary-value-help { position: relative; flex: none; margin-top: 8px; }
.summary-value-help > button { color: var(--teal-700); font-size: var(--text-summary-caption); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.summary-value-popover { position: absolute; inset-inline: 0; bottom: calc(100% + 8px); z-index: 15; padding: 14px; border: 1px solid var(--teal-200); border-radius: 12px; background: #fff; box-shadow: 0 12px 28px rgba(18,56,64,.18); }
.summary-value-popover p { margin: 0; color: var(--muted); font-size: var(--text-summary-price); line-height: 1.5; }
.summary-value-popover p+p:not([hidden]) { margin-block-start:12px; }
.summary-note { flex: none; margin-block: 7px; color: var(--muted); font-size: var(--text-summary-caption); line-height: 1.45; }
.stack-summary > .btn { flex: none; min-height: 40px; padding-block: 8px; font-size: var(--text-small); }

@media (min-width: 1181px) and (max-width: 1520px) {
  .builder-layout { grid-template-columns: 500px minmax(0, 1fr); gap: 24px; }
}
@media (min-width: 1181px) and (max-height: 860px) {
  .summary-folder__panel { width: calc(100% - 8px); height: calc(100% - 8px); padding: 8px; }
  .summary-folder__panel > header { padding-bottom: 4px; }
  .summary-folder__panel > header > div { display: flex; align-items: baseline; gap: 8px; }
  .summary-folder__panel > header h3 { order: -1; font-size: var(--text-body); }
  .summary-folder__panel > header span { font-size: var(--text-summary-caption); }
  .summary-folder__panel > header button { align-self:center; }
  .summary-folder__pagination { min-height: 30px; padding-top: 2px; }
  .summary-folder__pagination > button { width: 28px; height: 28px; }
  .stack-grid.summary-folder__page { padding-block: 6px; }
}
@media (max-width: 1180px) {
  .builder-layout { display: block; direction: rtl; }
  .stack-summary { position: relative; top: auto; height: auto; margin-top: 30px; overflow: visible; }
  .summary-products-stage { min-height: 0; overflow: visible; }
  .summary-products-stage > .stack-grid { position: relative; }
}
@media (max-width: 600px) {
  .stack-summary__heading { flex-wrap: wrap; }
  .stack-grid { --card-columns: 1; }
  .stack-transition__sets { grid-template-columns: minmax(0, 1fr); }
  .stack-transition__arrow { transform: rotate(-90deg); height: 20px; }
  #productDialogContent { padding: 22px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .stack-card, .stack-folder-tile { transition: none; }
}
@media print {
  .builder-layout { display: block; }
  .stack-summary { position: static; height: auto; box-shadow: none; }
  .stack-summary__clear { display: none; }
  .summary-products-stage { overflow: visible; }
  .summary-products-stage > .stack-grid { position: relative; }
}