/* Website styles, worker a (client change list) */

/* ===== Product pages (D1, D3, D4): options, price table, Add to cart + Buy now ===== */
.ms-fl{display:block;font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#6b7a76;margin:18px 0 8px}
.ms-sel{display:block;width:100%;height:50px;border:1.5px solid var(--ms-line);border-radius:12px;padding:0 42px 0 14px;font:inherit;font-weight:700;font-size:15px;color:var(--ms-ink);cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2313594a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center/16px;
  -webkit-appearance:none;appearance:none;text-overflow:ellipsis}
.ms-sel:hover{border-color:#c9d9d3}
.ms-sel:focus-visible{outline:2px solid var(--ms-g6);outline-offset:2px;border-color:var(--ms-g6)}
.ms-sel.sm{height:40px;border-radius:10px;padding:0 34px 0 11px;font-size:13.5px;background-position:right 11px center;background-size:14px}

/* Validity: three equal choices; USB token: two wide choices */
.ms-opts.eq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ms-opts.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ms-opts.eq span,.ms-opts.two span{min-width:0;height:100%}
.ms-opts b{font-weight:800}

/* Price table inside the buy box: validity x with / without token. Cells are clickable. */
.ms-pt{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--ms-line);border-radius:12px;overflow:hidden;font-size:13.5px;margin-top:16px;background:#fff}
.ms-pt th,.ms-pt td{padding:9px 12px;text-align:right;border-top:1px solid var(--ms-line);color:var(--ms-text)}
.ms-pt thead th{border-top:0;background:var(--ms-g0);color:var(--ms-g8);font-weight:800;font-size:12.5px}
.ms-pt th:first-child,.ms-pt tbody th{text-align:left}
.ms-pt tbody th{font-weight:700;color:var(--ms-ink)}
.ms-pt tbody td{cursor:pointer;font-variant-numeric:tabular-nums}
.ms-pt tbody td:hover{background:var(--ms-g0)}
.ms-pt tbody tr.on th{color:var(--ms-g7)}
.ms-pt tbody td.sel{background:var(--ms-gold0);color:var(--ms-ink);font-weight:800;box-shadow:inset 0 0 0 1.5px #f1cd7a}
.ms-note{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--ms-mute)}
.ms-note svg{width:17px;height:17px;color:var(--ms-g6);flex:none;margin-top:1px}
.ms-body .ms-scroll{margin-bottom:4px}

/* Product cards: price, validity / pack choice, token tick box, and both buttons (cards in a row share one height) */
[data-reveal]>.ms-pc{height:100%}
.ms-pc .ft{display:block;margin-top:auto;padding-top:12px}
.ms-pcf{display:grid;gap:9px;margin:0}
.ms-pcp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ms-pcp b{font-size:22px;color:var(--ms-ink);font-family:var(--font-heading,inherit);letter-spacing:-.01em}
.ms-pcp s{color:#a3b0ac;font-size:13px}
.ms-pcp small{font-size:12px;color:var(--ms-mute);font-weight:600}
.ms-pct{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ms-text);cursor:pointer;margin:0}
.ms-pct input{width:17px;height:17px;accent-color:var(--ms-g6);flex:none;margin:0}
.ms-pct b{margin-left:auto;color:var(--ms-g6);white-space:nowrap}
.ms-pcb{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ms-pcb.one{grid-template-columns:1fr}
.ms-pc .ms-pcb .ms-btn{height:42px;padding:0 8px;font-size:13.5px;white-space:nowrap;width:100%}

/* Price list: one row = one option, with its own Add to cart + Buy now */
.ms-plf{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin:0}
.ms-plf .ms-pct{font-size:12.5px;width:100%;justify-content:flex-end;margin:0 0 2px}
.ms-plf .ms-btn{height:36px;padding:0 12px;font-size:13px;white-space:nowrap}

/* Home price calculator: Add to cart + Buy now side by side, details link below */
.ms-calc .ms-calc-go{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.ms-calc .ms-calc-go .ms-btn{padding:0 10px;white-space:nowrap}
.ms-calc .ms-calc-more{display:flex;justify-content:center;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--ms-g7);text-decoration:none}
.ms-calc .ms-calc-more:hover{text-decoration:underline}

/* Chat assistant product cards: Add to cart + Buy now */
.msc-card-a .msc-btn{width:100%;white-space:nowrap}
.msc-card-more{display:block;margin-top:8px;font-size:12px;font-weight:700;color:#176f5b;text-decoration:none}
.msc-card-more:hover{text-decoration:underline}

/* Mobile buy bar: price + both buttons */
.ms-buybar .ms-btn{padding:0 13px;font-size:14px;flex:none}
.ms-buybar .ms-btn.line{border-width:1.5px}

/* Cart: the token that comes with a certificate sits under it */
.sx-line.sx-with{background:#fafcfb;padding-top:14px;padding-bottom:14px}
.sx-line.sx-with .sx-thumb{width:48px;height:48px;border-radius:14px;justify-self:end}
.sx-line.sx-with h3{font-size:14.5px}
.sx-withqty{font-weight:800;color:var(--ink,#0f1f1b);min-width:96px;text-align:center}

@media (max-width:640px){
  .ms-opts.eq{gap:6px}
  .ms-opts.eq span{padding:9px 8px}
  .ms-opts.two{grid-template-columns:1fr}
  .ms-pt th,.ms-pt td{padding:8px 9px}
  .ms-row .ms-btn.grow{flex:1 1 calc(50% - 5px);min-width:0;padding:0 10px}
  .ms-row .ms-qty{width:100%;justify-content:space-between}
  .ms-row .ms-qty input{flex:1}
  .sx-line.sx-with{grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"t i i" "q q p";gap:12px 14px}
  .sx-line.sx-with .sx-thumb{grid-area:t;width:40px;height:40px;justify-self:start}
  .sx-line.sx-with .info{grid-area:i}
  .sx-line.sx-with .sx-withqty{grid-area:q;text-align:left;min-width:0}
  .sx-line.sx-with .sx-price{grid-area:p;min-width:0}
}