/* Panamax lead-form wizard — shared component styles (mirrors index.html #contacto).
   Used by the standalone /cotizar/ page; index.html still carries these inline. */
:root{--pmx-blue:#054491;--pmx-blue2:#053a7d;--pmx-red:#cd3439;--pmx-ink:#131c28;--pmx-muted:#51647a;--pmx-line:#c0ccd8;--pmx-bg:#eef2f6}

.wa-btn{display:inline-flex;align-items:center;gap:9px;margin-top:24px;height:50px;padding:0 22px;
  background:#1f7a4d;color:#fff;border-radius:10px;font:700 15px Archivo,sans-serif;text-decoration:none}

.wiz-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 18px 44px rgba(3,32,63,.10);
  padding:24px}
.wiz-progress{height:5px;border-radius:999px;background:var(--pmx-bg);overflow:hidden;margin-bottom:22px}
.wiz-progress span{display:block;height:100%;width:33%;background:var(--pmx-red);border-radius:999px;transition:width .3s}
.wiz-step h3{font:800 18px Archivo,sans-serif;color:var(--pmx-ink);margin:0 0 4px}
.wiz-step p.sub{font:400 14px Archivo,sans-serif;color:#708296;margin:0 0 18px}
.wiz-q{font:700 13px Archivo,sans-serif;color:#34465a;margin:18px 0 9px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;background:#fff;
  border:1.5px solid var(--pmx-line);border-radius:10px;font:600 14px Archivo,sans-serif;color:var(--pmx-ink);cursor:pointer;transition:.15s}
.chips button:hover{border-color:#1466c9}
.chips button.sel{background:var(--pmx-blue);border-color:var(--pmx-blue);color:#fff}
.wiz-field{margin-top:14px}
.wiz-field label{display:block;font:600 13px Archivo,sans-serif;color:#34465a;margin-bottom:7px}
.wiz-field input,.wiz-field select,.wiz-field textarea{width:100%;min-height:48px;padding:0 14px;
  font:400 15px Archivo,sans-serif;color:var(--pmx-ink);background:#fff;border:1.5px solid var(--pmx-line);border-radius:8px}
.wiz-field textarea{padding:12px 14px;min-height:72px;resize:vertical}
.wiz-field input:focus,.wiz-field select:focus,.wiz-field textarea:focus{outline:none;border-color:#1466c9;box-shadow:0 0 0 3px rgba(20,102,201,.15)}
.wiz-more-btn{background:none;border:none;padding:6px 0;font:700 13.5px Archivo,sans-serif;color:var(--pmx-blue);cursor:pointer}
.wiz-actions{display:flex;gap:10px;margin-top:22px}
.btn-back{height:52px;padding:0 20px;background:var(--pmx-bg);color:#34465a;border:none;border-radius:10px;font:700 15px Archivo,sans-serif;cursor:pointer}
.btn-next,.btn-submit{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;height:52px;
  background:var(--pmx-red);color:#fff;border:none;border-radius:10px;font:700 15.5px Archivo,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(205,52,57,.30)}
.btn-next.is-blue{background:var(--pmx-blue);box-shadow:none}
.wiz-done{text-align:center;padding:8px 0}
.wiz-done .check{width:66px;height:66px;border-radius:50%;background:#e8f6ef;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.wiz-done h3{font:800 24px Archivo,sans-serif;color:var(--pmx-ink);margin:0 0 8px}
.wiz-done p{font:400 15.5px/1.55 Archivo,sans-serif;color:var(--pmx-muted);max-width:320px;margin:0 auto}
#calBlock{margin-top:22px;text-align:left}
#calBlock h4{font:800 17px Archivo,sans-serif;color:var(--pmx-ink);margin:0 0 10px}
.btn-reset{margin-top:16px;height:44px;padding:0 22px;background:var(--pmx-bg);color:#34465a;border:none;border-radius:8px;font:600 14.5px Archivo,sans-serif;cursor:pointer}
.wiz-err{color:#cd3439;font:600 12.5px Archivo,sans-serif;margin-top:6px}
.wiz-field.bad input,.wiz-field.bad select{border-color:#cd3439!important;box-shadow:0 0 0 3px rgba(205,52,57,.12)!important}
[hidden]{display:none!important}

/* --- Location + priority fields (2026-10-10). Additive: pages without these
   elements are unaffected. --- */
/* "(opcional)" tag next to a label or question. */
.wiz-opt{font-weight:500;color:#708296}
/* Small helper line under an input. */
.wiz-help{font:400 12.5px/1.45 Archivo,sans-serif;color:#5f7186;margin:6px 0 0}
/* Calm priority note shown when the customer reports water coming in now. */
.wiz-note{margin:10px 0 0;padding:10px 12px;border:1px solid #c9d9ee;border-left:4px solid var(--pmx-blue);
  border-radius:8px;background:#eef4fb;color:#03203f;font:600 13.5px/1.45 Archivo,sans-serif}
/* "¿Dónde es?" group: a fieldset with its browser chrome removed.
   min-width:0 stops long zone names from widening the page on phones. */
.wiz-where{border:0;margin:0;padding:0;min-width:0}
.wiz-where legend{padding:0;margin:18px 0 0}
/* Secondary "use my location" button (shown only where geolocation works). */
.wiz-geo-btn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;min-height:44px;padding:0 14px;
  background:#fff;border:1.5px solid var(--pmx-line);border-radius:8px;color:var(--pmx-blue);
  font:700 13.5px Archivo,sans-serif;cursor:pointer;max-width:100%;text-align:left}
.wiz-geo-btn:hover{border-color:var(--pmx-blue)}
.wiz-geo-btn[disabled]{opacity:.6;cursor:progress}
/* Selected chips also expose aria-pressed for screen readers. */
.chips button[aria-pressed="true"]{background:var(--pmx-blue);border-color:var(--pmx-blue);color:#fff}
@media (prefers-reduced-motion:reduce){
  .chips button,.wiz-progress span{transition:none}
}

/* ===== Request form v2 (CELL F, 2026-10-10): "tap, don't type" =====================
   Every control inside the v2 block of /ventas/ and the home page #contacto uses ONLY
   these pk-* classes, all scoped under .wiz-card, so both pages render the same (the
   home page's #contacto .wiz-* rules no longer reach the form). Mobile first: chips
   are a 2-column grid on phones, 1 column under 356px; every tap target is >= 44px.
   Borders of chips, fields and radio cards are #7a8ca1: 3.4:1 on white (WCAG 1.4.11
   asks at least 3:1 for the edge of a control). */
.wiz-card{scroll-margin-top:16px}
.wiz-card .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wiz-card [hidden]{display:none!important}
/* Visually hidden, still read by screen readers. */
.wiz-card .pk-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Step heading + sub-line. The heading gets focus when a step opens (tabindex=-1).
   «Paso N de 5» sits on its own small line inside the heading, so it is read with it. */
.wiz-card .pk-step-h{margin:0 0 4px;padding:0;color:#03203f;font-family:inherit;font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.wiz-card .pk-stepno{display:block;margin:0 0 3px;color:#51647a;font-size:12.5px;font-weight:700;letter-spacing:.03em;line-height:1.3}
.wiz-card .pk-step-h:focus{outline:none}
.wiz-card .pk-step-h:focus-visible{outline:2px solid #054491;outline-offset:4px;border-radius:4px}
.wiz-card .pk-sub{margin:0 0 6px;padding:0;color:#51647a;font-size:14px;line-height:1.45}
/* A question above a group of chips. */
.wiz-card .pk-q{display:block;margin:18px 0 8px;padding:0;color:#34465a;font-size:14.5px;font-weight:700;line-height:1.35}
.wiz-card .pk-req{color:#cd3439;font-weight:700}
.wiz-card .pk-opt{color:#5f7186;font-weight:500}
.wiz-card .pk-help{margin:6px 0 0;padding:0;color:#51647a;font-size:13px;line-height:1.45}
.wiz-card .pk-help-q{margin:-4px 0 8px}
/* Buttons under a zone hint («Usar Juan Díaz», «Sí, corregir el barrio»): one row, wrapping. */
.wiz-card .pk-hint-actions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
/* Calm blue note (emergency note, WhatsApp-later note, done-screen reminders). */
.wiz-card .pk-note{margin:10px 0 0;padding:10px 12px;border:1px solid #c9d9ee;border-left:4px solid #054491;border-radius:8px;background:#eef4fb;color:#03203f;font-size:14px;font-weight:600;line-height:1.45;text-align:left}
.wiz-card .pk-err{margin:6px 0 0;color:#b4232a;font-size:13.5px;font-weight:700;line-height:1.4}
/* Chips: answers you tap. Selected = filled blue + a check mark (not colour alone). */
.wiz-card .pk-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0;padding:0}
.wiz-card .pk-chip{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:6px;min-width:0;min-height:44px;margin:0;padding:9px 12px;
  background:#fff;border:1.5px solid #7a8ca1;border-radius:10px;color:#131c28;font-family:inherit;font-size:14.5px;font-weight:600;line-height:1.25;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s,color .15s}
.wiz-card .pk-chip b{font-weight:800}
/* Two-line answers (roof size): the word in bold, the detail under it. */
.wiz-card .pk-chip-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.wiz-card .pk-chip-text span{font-size:13px;font-weight:500;line-height:1.3}
.wiz-card .pk-chip[aria-pressed="true"],.wiz-card .pk-chip[aria-checked="true"]{background:#054491;border-color:#054491;color:#fff}
/* The «✓» is decoration: `content: "✓" / ""` gives it an empty accessible name, so a
   screen reader reads «No, estoy en otro lugar», not «✓ No, estoy en otro lugar» (the
   chip's state is already read from aria-checked / aria-pressed). The first declaration is
   the fallback for browsers without the "/ alt" syntax. */
.wiz-card .pk-chip[aria-pressed="true"]::before,.wiz-card .pk-chip[aria-checked="true"]::before{content:"✓";content:"✓" / "";flex:0 0 auto;font-weight:800}
@media (hover:hover) and (pointer:fine){.wiz-card .pk-chip:hover{border-color:#054491}}
.wiz-card .pk-stack{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.wiz-card .pk-chips-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wiz-card .pk-chips-3 .pk-chip{justify-content:center;text-align:center}
/* Four short answers in one row ("¿Desde cuándo pasa?"). */
.wiz-card .pk-chips-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wiz-card .pk-chips-4 .pk-chip{justify-content:center;padding-left:6px;padding-right:6px;text-align:center}
/* An answer that takes the whole row (a long label). */
.wiz-card .pk-chip-wide{grid-column:1/-1}
/* Roof size: two-line answers, two per row on phones. */
.wiz-card .pk-chips-size{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
/* "¿Estás ahora en la propiedad?": two big equal answers. */
.wiz-card .pk-gate{grid-template-columns:repeat(2,minmax(0,1fr))}
.wiz-card .pk-gate .pk-chip{min-height:48px;justify-content:center;text-align:center}
/* Visit days: six short day chips in one row, "Cualquier día" across the full width. */
.wiz-card .pk-days{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.wiz-card .pk-days .pk-chip{position:relative;justify-content:center;padding:9px 2px;text-align:center}
/* A chosen day keeps a «✓» (not colour alone), in the corner so the narrow chip does not
   need to be wider. */
.wiz-card .pk-days .pk-chip[aria-pressed="true"]::before{position:absolute;top:2px;right:4px;font-size:11px;line-height:1}
.wiz-card .pk-days .pk-chip-any[aria-pressed="true"]::before{position:static;font-size:inherit}
.wiz-card .pk-days .pk-chip-any{grid-column:1/-1}
/* Typed fields (name, phone, building line, reference, link, note). 16px text so
   iPhones do not zoom in when the field gets focus. */
.wiz-card .pk-field{margin:14px 0 0;padding:0}
.wiz-card .pk-field>label{display:block;margin:0 0 6px;color:#34465a;font-size:14px;font-weight:700;line-height:1.35}
.wiz-card .pk-input,.wiz-card .pk-select{display:block;width:100%;min-height:48px;margin:0;padding:0 14px;background:#fff;border:1.5px solid #7a8ca1;border-radius:9px;
  color:#131c28;font-family:inherit;font-size:16px;line-height:1.3;box-shadow:none}
/* A long zone name is cut with "…" instead of being clipped mid-word on small phones
   (the hint under the select names the short zone too). */
.wiz-card .pk-select{height:48px;padding-right:28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wiz-card .pk-textarea{min-height:76px;padding:11px 14px;resize:vertical}
.wiz-card .pk-input:focus,.wiz-card .pk-select:focus{border-color:#054491;outline:none;box-shadow:0 0 0 3px rgba(5,68,145,.16)}
.wiz-card .pk-bad .pk-input,.wiz-card .pk-bad .pk-select{border-color:#cd3439!important;box-shadow:0 0 0 3px rgba(205,52,57,.12)!important}
.wiz-card .pk-counter{text-align:right}
/* A field the customer should fill (approximate GPS point -> "escribe una referencia"). */
.wiz-card .pk-field-hint .pk-input{border-color:#054491;box-shadow:0 0 0 3px rgba(5,68,145,.16)}
/* Buttons. Primary = Panamax red; secondary = soft grey. */
.wiz-card .pk-nav{display:flex;gap:10px;margin:22px 0 0;padding:0}
.wiz-card .pk-btn{display:flex;flex:1;align-items:center;justify-content:center;gap:9px;min-height:52px;margin:0;padding:0 18px;background:#cd3439;border:0;border-radius:10px;
  color:#fff;font-family:inherit;font-size:16px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;box-shadow:0 7px 18px rgba(205,52,57,.24)}
.wiz-card .pk-nav .pk-btn::after{content:"→";font-size:18px;line-height:1}
.wiz-card .pk-btn[disabled]{opacity:.7;cursor:progress}
.wiz-card .pk-btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin:0;padding:0 18px;background:#eef2f6;border:1px solid #d6dee8;border-radius:10px;
  color:#34465a;font-family:inherit;font-size:15px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
.wiz-card .pk-btn-small{min-height:44px;padding:0 14px;font-size:14px}
.wiz-card .pk-link{display:inline-flex;align-items:center;min-height:44px;margin:6px 0 0;padding:0;background:none;border:0;color:#054491;font-family:inherit;font-size:14.5px;font-weight:700;text-align:left;cursor:pointer}
/* The big "Estoy en la propiedad: usar mi ubicación" button (56px, full width). */
.wiz-card .pk-gps-box{margin:14px 0 0}
.wiz-card .pk-gps{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;margin:0;padding:10px 16px;background:#054491;border:0;border-radius:12px;
  color:#fff;font-family:inherit;font-size:16px;font-weight:700;line-height:1.25;text-align:left;cursor:pointer;box-shadow:0 8px 20px rgba(5,68,145,.25)}
.wiz-card .pk-gps-pin{flex:0 0 auto}
.wiz-card .pk-gps[aria-busy="true"]{cursor:progress;opacity:.9}
.wiz-card .pk-gps[aria-busy="true"] .pk-gps-pin{display:none}
.wiz-card .pk-gps[aria-busy="true"]::before{content:"";flex:0 0 auto;width:18px;height:18px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:pk-spin .8s linear infinite}
@keyframes pk-spin{to{transform:rotate(360deg)}}
/* Location status card: green = point saved, blue = approximate / info, amber = act. */
.wiz-card .pk-status{margin:12px 0 0;padding:12px 14px;border:1px solid #c9d9ee;border-radius:10px;background:#eef4fb;color:#03203f;font-size:14px;line-height:1.45}
.wiz-card .pk-status[data-kind="ok"]{border-color:#bfe3cf;background:#e8f6ef;color:#14563a}
.wiz-card .pk-status[data-kind="warn"]{border-color:#f0d3a2;background:#fff4e0;color:#5c3700}
.wiz-card .pk-status-title{display:block;margin:0 0 2px;font-size:15px;font-weight:800}
/* Focus lands on the card's title (or first line) after a GPS answer: a visible ring only
   for keyboard users, like the step headings. */
.wiz-card .pk-status [tabindex="-1"]:focus{outline:none}
.wiz-card .pk-status [tabindex="-1"]:focus-visible{outline:2px solid #054491;outline-offset:3px;border-radius:4px}
.wiz-card .pk-status p{margin:4px 0 0;padding:0}
.wiz-card .pk-status-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.wiz-card .pk-status-actions .pk-btn-secondary{min-height:44px;padding:0 14px;background:#fff;font-size:14px}
/* "Other ways" radio cards. */
.wiz-card .pk-fieldset{min-width:0;margin:18px 0 0;padding:0;border:0}
/* A legend does not take a top margin like other blocks: the fieldset carries it. */
.wiz-card .pk-fieldset>legend{float:left;width:100%;margin:0;padding:0}
.wiz-card .pk-fieldset>legend+*{clear:left}
.wiz-card .pk-radio{display:flex;align-items:center;gap:10px;min-height:48px;margin:8px 0 0;padding:10px 14px;background:#fff;border:1.5px solid #7a8ca1;border-radius:10px;
  color:#131c28;font-size:14.5px;font-weight:600;line-height:1.3;cursor:pointer}
.wiz-card .pk-radio input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:#054491}
.wiz-card .pk-radio:has(input:checked){border-color:#054491;background:#eef4fb}
/* Keyboard focus on a way to send the location: one clear ring around the whole card, the
   same on /ventas/ and on the home page (whose own input:focus rule removes the outline). */
.wiz-card .pk-radio input:focus-visible{outline:none}
.wiz-card .pk-radio:has(input:focus-visible){outline:2px solid #054491;outline-offset:2px}
.wiz-card .pk-maps-f{margin:10px 0 4px 12px;padding-left:12px;border-left:3px solid #c9d9ee}
/* Barrio search (ARIA 1.2 combobox). The list sits in the page flow, so it never
   covers other fields on a small phone. */
.wiz-card .pk-place{margin:0;padding:0}
/* scroll-margin-top: where wizard.js stops the barrio box when it lifts it above the phone
   keyboard (the home page adds its sticky header's height in home-uplift.css). */
.wiz-card .pk-combo{position:relative;scroll-margin-top:12px}
/* The list may be cut to the space above the keyboard (wizard.js sets max-height): it then
   scrolls inside, and «No encuentro mi barrio» stays pinned at its bottom. */
.wiz-card .pk-listbox{margin:4px 0 0;padding:4px;list-style:none;background:#fff;border:1.5px solid #7a8ca1;border-radius:10px;box-shadow:0 10px 24px rgba(3,32,63,.10);
  overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box}
.wiz-card .pk-option{display:flex;flex-direction:column;justify-content:center;min-height:48px;margin:0;padding:6px 12px;border-radius:8px;color:#131c28;font-size:15px;font-weight:700;line-height:1.25;cursor:pointer}
.wiz-card .pk-option small{color:#51647a;font-size:12.5px;font-weight:500}
.wiz-card .pk-option[aria-selected="true"]{background:#eef4fb;box-shadow:inset 0 0 0 2px #054491}
@media (hover:hover) and (pointer:fine){.wiz-card .pk-option:hover{background:#f3f7fc}}
.wiz-card .pk-option-none{position:sticky;bottom:-4px;margin-top:2px;background:#fff;border-top:1px solid #e2e8f0;border-radius:0 0 8px 8px;color:#054491}
/* «No está en la lista: “Villa Rosario” · Cambiar» (after «No encuentro mi barrio»). */
.wiz-card .pk-barrio-state{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px;margin:0;padding:4px 6px 4px 12px;
  border:1px solid #d6dee8;border-radius:10px;background:#f6f9fb;color:#03203f;font-size:14.5px;font-weight:600;line-height:1.35}
.wiz-card .pk-barrio-state .pk-link{margin:0}
/* Step 5: one more GPS try before sending (status card colours). */
.wiz-card .pk-retry{margin:12px 0 0}
.wiz-card .pk-retry p{margin:0}
/* Step 2, only an extractor / wash / paint: the pre-filled leak answer on one line. */
.wiz-card .pk-leak-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin:14px 0 0;padding:4px 6px 4px 12px;border:1px solid #d6dee8;border-radius:10px;background:#f6f9fb;color:#34465a;font-size:14.5px;line-height:1.35}
.wiz-card .pk-leak-summary b{color:#03203f}
.wiz-card .pk-leak-summary .pk-link{margin:0}
/* "Seguimos donde te quedaste" bar after a reload or an app switch. */
.wiz-card .pk-restore{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 14px;padding:8px 8px 8px 12px;background:#eef4fb;border-radius:10px;
  color:#03203f;font-size:14px;font-weight:600}
/* Done screen. */
.wiz-card .pk-done{padding:8px 0;text-align:center}
.wiz-card .pk-check{display:flex;align-items:center;justify-content:center;width:66px;height:66px;margin:0 auto 14px;border-radius:50%;background:#e8f6ef}
.wiz-card .pk-done .pk-step-h{font-size:24px}
.wiz-card .pk-done-p{max-width:340px;margin:8px auto 0;padding:0;color:#51647a;font-size:15.5px;line-height:1.55}
.wiz-card .pk-done .pk-note{margin-top:14px}
.wiz-card .pk-done-ref{margin:10px 0 0;padding:0;color:#34465a;font-size:14.5px}
/* The request number never breaks in the middle (customers copy it into WhatsApp). */
.wiz-card .pk-done-ref strong{color:#03203f;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.wiz-card .pk-cal{margin:18px 0 0;text-align:left}
.wiz-card .pk-btn-cal{display:inline-flex;flex:none;background:#054491;box-shadow:none}
.wiz-card .pk-done>.pk-btn-secondary{margin-top:16px;min-height:44px}
/* The failure box with the one manual WhatsApp link (created by wizard.js). */
.wiz-card .pk-fail{margin:14px 0 0;padding:13px 15px;border:1px solid #f3c6c6;border-radius:10px;background:#fdecec;color:#a02626;font-size:14px;line-height:1.5}
.wiz-card .pk-btn-wa{display:inline-flex;flex:none;margin-top:12px;background:#1f7a4d;box-shadow:none}
@media (max-width:520px){
  .wiz-card .pk-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .wiz-card .pk-stack{grid-template-columns:1fr}
  .wiz-card .pk-chips-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wiz-card .pk-chips-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wiz-card .pk-chips-size{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wiz-card .pk-days{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .wiz-card .pk-step-h{font-size:19px}
  .wiz-card .pk-chip{padding:8px 10px;font-size:14px}
}
/* Very narrow cards (e.g. the home page at 360px): days in two rows of three so each
   day stays at least 44px wide. */
@media (max-width:370px){
  .wiz-card .pk-days{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wiz-card .pk-chips-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:355px){
  .wiz-card .pk-chips{grid-template-columns:1fr}
  .wiz-card .pk-gate{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wiz-card .pk-chips-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wiz-card .pk-days{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .wiz-card .pk-chip{transition:none}
  .wiz-card .pk-gps[aria-busy="true"]::before{animation:none;border-top-color:rgba(255,255,255,.35);border-right-color:#fff}
}