/* kupiti.rs Price History 1.5: tiny mobile scrollbar and spacing finish on the 1.3 layout.
 * All rules component-scoped. Product sticky bars, chart JS and SEO remain unchanged.
 */
.ph {
  --ph-border:#dee7dc;
  --ph-ink:#173c35;
  --ph-muted:#64766b;
  min-width:0;
  margin:26px 0 30px;
  padding:clamp(17px,2.25vw,26px);
  border:1px solid var(--ph-border);
  border-radius:16px;
  background:#fff;
  color:var(--ink,var(--ph-ink));
}
.ph__intro {display:flex;align-items:baseline;justify-content:space-between;gap:7px 16px;flex-wrap:wrap;}
.ph__intro h2,.ph--empty h2 {margin:0 0 4px;font-size:clamp(23px,2.25vw,28px);font-weight:750;line-height:1.24;letter-spacing:-.5px;}
.ph__subtitle {margin:0;color:var(--muted,var(--ph-muted));font-size:12.5px;line-height:1.5;}
.ph__range-summary {font-size:11px;color:#718074;line-height:1.5;font-variant-numeric:tabular-nums;}
.ph__workspace {min-width:0;}
.ph__toolbar {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 18px;margin:14px 0 5px;}
.ph__summary {display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;min-width:0;flex:1 1 570px;color:var(--ph-ink);font-size:11.5px;line-height:1.55;}
.ph__minimum,.ph__stat {display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:3px 6px;min-width:0;}
.ph__metric-label {color:#687d70;font-size:11px;font-weight:500;}
.ph__summary strong {color:var(--ph-ink);font-size:12.5px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ph__minimum strong {font-size:13.5px;}
.ph__minimum-source {color:#77867a;font-size:10.5px;}
.ph__stat {padding-left:14px;border-left:1px solid #dae5d9;}
.ph__periods {display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:#f0f4ef;}
.ph__period {min-height:37px;padding:8px 13px;border:0;border-radius:7px;background:transparent;color:#5e7062;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
.ph__period:hover {background:#e8efe6;}
.ph__period[aria-pressed="true"] {background:#fff;color:var(--ph-ink);box-shadow:0 1px 3px #173c3512;}
.ph__period:focus-visible,.ph__retailer input:focus-visible,.ph__details summary:focus-visible,.ph__point:focus-visible {outline:3px solid #749447;outline-offset:3px;}
.ph__retailers {display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 2px;}
.ph__retailer {display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:7px 10px;border:1px solid #dce8d9;border-radius:999px;background:#fff;color:#42594b;cursor:pointer;font-size:11.5px;line-height:1.25;font-weight:650;white-space:nowrap;}
.ph__retailer:hover {border-color:#adbea9;}
.ph__retailer:has(input:checked) {background:#f5f9f3;border-color:#c3d6bc;}
.ph__retailer input {flex:0 0 15px;width:15px;height:15px;margin:0;accent-color:#427b55;}
.ph__retailer-dot {width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--ph-series-color,#648a74);opacity:.55;}
.ph__retailer:has(input:checked) .ph__retailer-dot {opacity:1;}
.ph__retailer-logo {display:block;flex:0 0 18px;width:18px;height:18px;object-fit:contain;border-radius:3px;background:#fff;}
.ph__chart {position:relative;display:grid;place-items:center;min-width:0;width:100%;min-height:220px;margin-top:3px;overflow:hidden;}
.ph__chart svg {display:block;width:100%;max-width:100%;height:auto;overflow:visible;}
.ph__point {cursor:pointer;transition:r .12s ease,opacity .12s ease;}
.ph__point:hover,.ph__point.is-highlighted {r:7;}
.ph__tooltip {position:absolute;top:8px;right:9px;z-index:2;max-width:min(88%,280px);padding:9px 12px;border:1px solid #c9dacd;border-radius:8px;background:#fff;color:#244739;box-shadow:0 4px 13px #173c3518;font-size:11px;line-height:1.5;font-weight:700;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility .12s ease;}
.ph__tooltip.is-visible {opacity:1;visibility:visible;}
.ph__chart-fallback {max-width:42ch;padding:20px 12px;color:var(--ph-muted);font-size:12px;line-height:1.6;text-align:center;}
.ph__explanation {margin:2px 0 0;color:#748077;font-size:10px;line-height:1.6;}
.ph__details {margin-top:17px;overflow:hidden;border:1px solid #e3eae0;border-radius:10px;}
.ph__details summary {padding:12px 14px;cursor:pointer;background:#f8faf7;color:#315244;font-size:12px;font-weight:700;}
.ph__details summary:hover {background:#f0f6ee;}
.ph__details summary span {color:#829085;font-size:10px;font-weight:400;}
.ph__table-scroll {max-width:100%;overflow-x:auto;}
.ph__table {width:100%;min-width:420px;border-collapse:collapse;font-size:12px;text-align:left;}
.ph__table th,.ph__table td {padding:11px 13px;border-bottom:1px solid #e9efe8;vertical-align:top;}
.ph__table th {color:#60786a;background:#f9fbf8;font-size:11px;}
.ph__table tbody tr:hover td {background:#fbfdfb;}
.ph__table td:last-child {font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ph__seller {display:block;margin-top:3px;color:var(--ph-muted);font-size:10px;}
.ph__table-note {padding:0 13px;color:var(--ph-muted);font-size:10.5px;}
.ph__limit-note {margin:13px 0;padding:9px 12px;border-radius:7px;background:#faf6ec;color:#83652f;font-size:11px;}
.ph__disclaimer {margin:11px 0 0;color:#78837b;font-size:10px;line-height:1.55;}
.ph--empty {padding:19px 22px;}
@media(max-width:680px) {
  .ph {margin:20px 0 25px;padding:17px 14px;border-radius:14px;}
  .ph__intro {display:block;}
  .ph__intro h2 {font-size:24px;margin-bottom:2px;}
  .ph__subtitle {line-height:1.4;}
  .ph__range-summary {display:block;margin-top:3px;line-height:1.4;}

  .ph__toolbar {align-items:flex-start;flex-direction:column;gap:7px;margin:9px 0 3px;}
  .ph__summary {flex:0 1 auto;width:100%;gap:4px 11px;line-height:1.42;}
  .ph__minimum {flex-basis:100%;row-gap:2px;column-gap:6px;}
  .ph__stat {padding-left:0;border-left:0;gap:2px 5px;line-height:1.4;}
  .ph__stat + .ph__stat {padding-left:12px;border-left:1px solid #dae5d9;}
  .ph__period {min-height:44px;padding:9px 13px;}
  /* Keep native horizontal swiping; hide the heavy system scrollbar (mobile only). */
  .ph__retailers {flex-wrap:nowrap;gap:7px;margin:11px 0 0;padding:0 0 2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-inline:contain;}
  .ph__retailers::-webkit-scrollbar {display:none;width:0;height:0;}
  /* Fade only while additional retailers remain off-screen to the right. */
  .ph__retailers.ph__retailers--has-more {-webkit-mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 22px),transparent 100%);}
  .ph__retailer {flex:0 0 auto;min-height:44px;font-size:11px;padding:9px 10px;}
  .ph__chart {min-height:200px;margin-top:0;}
  /* SVG text stays legible after viewBox scaling on narrow devices. */
  .ph__chart svg text {font-size:13px;fill:#566c60;}
  .ph__range-summary {color:#5f7166;font-size:11.5px;}
  .ph__minimum-source {color:#617467;font-size:11px;line-height:1.4;}
  .ph__explanation {color:#5b7062;font-size:11.25px;line-height:1.65;}
  .ph__disclaimer {color:#5b7062;font-size:11px;line-height:1.65;}
  .ph__tooltip {top:3px;right:3px;}
  .ph__details {margin-top:15px;}
  /* Mobile only: keep the history table semantically intact, but reflow each
     observation into a two-line date/retailer + price card. No sideways swipe. */
  .ph__table-scroll {overflow-x:visible;}
  .ph__table {display:block;width:100%;min-width:0;border-collapse:separate;}
  /* Visually hide headers without hiding them from assistive technology. */
  .ph__table thead {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
  .ph__table tbody {display:block;}
  .ph__table tbody tr {display:grid;grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:"date price" "store price";align-items:center;gap:3px 9px;padding:11px 12px;border-bottom:1px solid #e9efe8;}
  .ph__table tbody tr:last-child {border-bottom:0;}
  .ph__table tbody td {display:block;min-width:0;padding:0;border:0;line-height:1.4;overflow-wrap:anywhere;}
  .ph__table tbody td:first-child {grid-area:date;color:var(--ph-muted);font-size:11px;font-variant-numeric:tabular-nums;}
  .ph__table tbody td:nth-child(2) {grid-area:store;font-weight:650;}
  .ph__table tbody td:last-child {grid-area:price;align-self:center;justify-self:end;text-align:right;font-size:12px;font-weight:750;white-space:nowrap;}
  .ph__table .ph__seller {margin-top:2px;font-weight:400;}
}
@media(prefers-reduced-motion:reduce){.ph__point,.ph__tooltip{transition:none;}}

/* Price History 1.6: shown only when both online and supermarket history exist. */
.ph__kind-filters{display:flex;flex-wrap:wrap;gap:4px;margin:11px 0 2px;}
.ph__kind{min-height:32px;border:1px solid #dce8d9;border-radius:8px;background:#fff;padding:6px 11px;color:#576f60;font-family:inherit;font-size:11.5px;font-weight:650;line-height:1.25;cursor:pointer;}
.ph__kind[aria-pressed="true"]{background:#eef6ed;color:#214937;border-color:#aecdaf;}
.ph__kind:focus-visible{outline:3px solid #749447;outline-offset:2px;}
.ph__retailer[hidden]{display:none!important;}
@media(max-width:680px){.ph__kind{min-height:40px;padding:8px 10px;}.ph__kind-filters{margin:9px 0 0;gap:5px;}}