/* ==========================================================================
   Tahoorestan — the buying flow
   --------------------------------------------------------------------------
   Loaded by /cart/, /checkout/, /checkout/pay/ and the two result pages, on
   top of listing.css, content-pages.css, shop.css (the .pcard cross-sell
   grid) and account.css (.abtn, .osum, .oline, .aempty, .alocal — the cart
   and an order are the same objects, so they are drawn by the same rules).

   No new vocabulary: the step medallions are the hero shields' traced
   #sh-hex, the money column is the product page's own, the forms are the
   contact page's .fld shell, and every colour, radius and shadow is a token
   styles.css defines.
   ========================================================================== */

.page--cart,.page--ck,.page--res{padding-bottom:0}
.page--pay{padding-bottom:0;background:#f4f6f1}
.phero--cart,.phero--ck{padding-block:42px 62px}


/* ══════════════════════════════════════════════════════════════════════════
   1. the four-step rail
   --------------------------------------------------------------------------
   The same strip on /cart/ and /checkout/, so the four steps of buying read
   as one sequence rather than two unrelated pages.  A finished step on the
   checkout becomes a real <button>, so going back is a click rather than a
   browser Back that would leave the page's own state behind.
   ══════════════════════════════════════════════════════════════════════════ */

.crail{border-bottom:1px solid var(--line);background:#fff}
.crail__l{
  width:min(var(--cw),100% - 48px);margin-inline:auto;
  display:flex;align-items:center;gap:0;padding-block:15px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.crail__l::-webkit-scrollbar{display:none}
.crail__i{
  display:flex;align-items:center;gap:9px;flex:none;
  font-size:13.2px;font-weight:700;color:#b0b0b0;white-space:nowrap;
}
.crail__i+.crail__i{flex:1;min-width:0}
.crail__i+.crail__i::before{
  content:"";flex:1;min-width:16px;height:2px;border-radius:2px;background:#ececec;
  transition:background .3s;
}
.crail__n{
  flex:none;display:grid;place-items:center;width:32px;height:32px;
  background:#f1f1f1;color:#9e9e9e;font-size:13px;font-weight:800;
  clip-path:url(#sh-hex);transition:background .3s,color .3s;
}
.crail__i.is-on{color:var(--ink2)}
.crail__i.is-on .crail__n{background:var(--green);color:#fff}
.crail__i.is-done{color:var(--green-dd)}
.crail__i.is-done .crail__n{background:var(--pale);color:var(--green-dd)}
.crail__i.is-done+.crail__i::before,
.crail__i.is-on+.crail__i::before{background:var(--ring)}
/* a finished step is clickable on the checkout; on the cart the rail is only
   a position indicator, so nothing there is a button */
.crail--ck .crail__i.is-done{cursor:pointer}
.crail--ck .crail__i.is-done:hover .crail__n{background:var(--ring);color:#fff}


/* ══════════════════════════════════════════════════════════════════════════
   2. /cart/
   ══════════════════════════════════════════════════════════════════════════ */

.cartp,.ck{
  width:min(var(--cw),100% - 48px);margin:34px auto 0;
  display:grid;grid-template-columns:minmax(0,1fr) 358px;gap:30px;align-items:start;
}
.cartp__main,.ck__main{min-width:0}
.cartp__side,.ck__side{position:sticky;top:calc(var(--hh-c) + 14px)}
.cartp__side[hidden],.ck[hidden]{display:none}

.cartp__hd{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.cartp__hd[hidden]{display:none}
.cartp__clear{
  display:inline-flex;align-items:center;gap:7px;margin-inline-start:auto;
  height:34px;padding:0 12px;border-radius:8px;white-space:nowrap;
  font-size:12.4px;font-weight:700;color:#8a8a8a;
  transition:background .18s,color .18s;
}
.cartp__clear .ic{width:14px;height:14px}
.cartp__clear:hover{background:#fdf4f1;color:#a13b1c}

/* A cart line.  The same three-column shape an order line has in
   account.css, with the controls a cart needs added: a stepper, a way to set
   the line aside, and a way to remove it. */
.cl{
  display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:16px;
  padding:16px 18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);
}
.cl+.cl{margin-top:11px}
.cl__img{
  grid-row:span 2;width:82px;height:82px;object-fit:contain;
  background:#fafafa;border:1px solid #f0f0f0;border-radius:12px;padding:5px;
}
.cl__t{font-size:15px;font-weight:700;color:var(--ink2);line-height:1.6}
.cl__t a:hover{color:var(--green-dd)}
.cl__o{
  margin-top:5px;display:flex;flex-wrap:wrap;gap:4px 10px;
  font-size:11.8px;line-height:1.85;color:var(--muted);
}
.cl__o span{display:inline-flex;gap:4px}
.cl__o i{font-style:normal;color:#b4b4b4}
.cl__p{
  grid-column:3;grid-row:1;text-align:end;white-space:nowrap;
  font-size:15.6px;font-weight:800;color:var(--ink);
}
.cl__p span{display:block;margin-top:2px;font-size:11.4px;font-weight:600;color:var(--muted)}
.cl__row{
  grid-column:2 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:12px;padding-top:12px;border-top:1px solid #f4f4f4;
}
.cl__x{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;white-space:nowrap;
  border-radius:8px;font-size:12.2px;font-weight:700;color:#7f7f7f;
  transition:background .18s,color .18s;
}
.cl__x .ic{width:14px;height:14px}
.cl__x:hover{background:#f5f6f3;color:var(--ink2)}
.cl__x--rm{margin-inline-start:auto}
.cl__x--rm:hover{background:#fdf4f1;color:#a13b1c}
.cl__note{
  grid-column:1 / -1;margin-top:10px;padding:9px 12px;border-radius:10px;
  background:#fdf6e0;font-size:11.8px;line-height:1.9;color:#6b5a26;
}

/* the stepper.  A real number input beside the two buttons, because ۱٫۵ کیلو
   is faster to type than to reach in half-kilo steps — the same reason the
   product page's stepper takes typing. */
.cq{display:flex;align-items:center;gap:0;border:1px solid var(--line);
  border-radius:10px;background:#fff;overflow:hidden}
.cq__b{
  display:grid;place-items:center;width:34px;height:36px;
  color:#6f6f6f;transition:background .16s,color .16s;
}
.cq__b .ic{width:15px;height:15px}
.cq__b:hover{background:var(--pale);color:var(--green-dd)}
.cq__b[disabled]{color:#cfcfcf;pointer-events:none}
.cq__in{
  width:66px;height:36px;border:0;border-inline:1px solid var(--line);
  text-align:center;background:none;
  font-size:13.4px;font-weight:800;color:var(--ink2);
}
.cq__in:focus{outline:0;background:#fafcf7}
.cq__u{padding-inline:9px;font-size:11.6px;font-weight:700;color:var(--muted)}

/* the money column, shared by the cart and the checkout */
.csum{
  padding:20px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 14px 34px rgba(40,60,20,.06);
}
.csum__h{
  position:relative;padding-inline-start:16px;margin-bottom:15px;
  font-size:16.6px;font-weight:800;color:var(--ink);
}
.csum__h::before{
  content:"";position:absolute;inset-inline-start:0;top:3px;width:7px;height:20px;
  border-radius:3px;background:var(--green);
}
.csum__lines{
  max-height:216px;overflow-y:auto;overscroll-behavior:contain;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed #e4e4e4;
}
.csum__go{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;margin-top:16px;padding:6px 16px;border-radius:var(--r-md);
  background:var(--green);color:#fff;font-size:15.4px;font-weight:800;
  line-height:1.45;text-align:center;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.csum__go .ic{width:18px;height:18px}
.csum__go:hover{background:var(--green-d);transform:translateY(var(--btn-lift));
  box-shadow:var(--lit-sh)}
.csum__back{
  display:block;margin-top:10px;text-align:center;
  font-size:13px;font-weight:600;color:#7b7b7b;
  text-decoration:underline;text-decoration-color:#d8d8d8;text-underline-offset:3px;
  transition:color .18s;
}
.csum__back:hover{color:var(--green-dd)}
.csum__note{margin-top:12px;font-size:12px;line-height:1.9;color:var(--muted)}
.csum__note b{color:var(--green-dd)}

/* a small line in the summary's basket list */
.csl{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center}
.csl+.csl{margin-top:10px;padding-top:10px;border-top:1px solid #f5f5f5}
.csl__img{width:38px;height:38px;object-fit:contain;background:#fafafa;
  border:1px solid #f0f0f0;border-radius:9px;padding:2px}
.csl__t{font-size:12.4px;font-weight:700;color:var(--ink2);line-height:1.55;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csl__q{margin-top:1px;font-size:11.2px;color:var(--muted)}
.csl__p{font-size:12.4px;font-weight:800;color:var(--ink);white-space:nowrap}

/* the coupon field.  The .track shell from styles.css, so a coupon and an
   order lookup are visibly the same kind of control. */
.cpon{margin-top:15px;padding-top:15px;border-top:1px dashed #e4e4e4}
.cpon__row{
  position:relative;display:flex;align-items:center;gap:7px;padding:5px;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  transition:box-shadow .16s,border-color .16s;
}
.cpon__row:focus-within{border-color:var(--ring);box-shadow:0 0 0 3px rgba(140,200,91,.24)}
.cpon__ic{flex:none;width:17px;height:17px;margin-inline-start:9px;color:#a8a8a8}
.cpon__in{
  flex:1;min-width:0;height:40px;border:0;background:none;padding-inline:4px;
  font-size:13.4px;font-weight:700;color:var(--ink2);letter-spacing:.5px;
}
.cpon__in:focus{outline:0}
.cpon__in::placeholder{letter-spacing:0;font-weight:500;color:#a8a8a8}
.cpon__go{
  flex:none;height:40px;padding:0 16px;border-radius:var(--r-sm);white-space:nowrap;
  background:#eef2ea;color:var(--green-dd);font-size:13px;font-weight:700;
  transition:background .18s,color .18s;
}
.cpon__go:hover{background:var(--green-d);color:#fff}
.cpon__msg{margin-top:8px;font-size:12.2px;font-weight:700;line-height:1.8}
.cpon__msg.is-ok{color:var(--green-dd)}
.cpon__msg.is-bad{color:#c2410c}
.cpon__msg.is-hint{color:var(--muted);font-weight:600}
.cpon__msg code{
  font-family:inherit;font-weight:800;color:var(--ink2);
  background:#f4f5f2;border-radius:5px;padding:1px 6px;unicode-bidi:isolate;
}

.cassure{margin-top:16px;padding-top:15px;border-top:1px solid #f2f2f2;
  display:flex;flex-direction:column;gap:10px}
.cassure li{display:flex;align-items:flex-start;gap:9px;
  font-size:11.8px;line-height:1.85;color:var(--body)}
.cassure .ic{flex:none;width:16px;height:16px;color:var(--green);margin-top:3px}
.cassure b{color:var(--ink2);font-weight:800}


/* ══════════════════════════════════════════════════════════════════════════
   3. /checkout/
   ══════════════════════════════════════════════════════════════════════════ */

.ckstep{
  padding:24px 26px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 14px 34px rgba(40,60,20,.05);
}
.ckstep[hidden]{display:none}
.ckstep__h{
  display:flex;align-items:center;gap:11px;margin-bottom:18px;
  font-family:var(--font-head);font-size:19.4px;font-weight:800;color:var(--ink);
}
.ckstep__n{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  background:var(--green);color:#fff;font-size:14px;font-weight:800;
  clip-path:url(#sh-hex);font-family:var(--font-body);
}

.cknote{
  display:flex;align-items:flex-start;gap:9px;margin-top:16px;padding:12px 14px;
  border:1px dashed #dcdcdc;border-radius:var(--r-md);background:#fcfcfc;
  font-size:12.4px;line-height:1.95;color:#6b6b6b;
}
.cknote .ic{flex:none;width:16px;height:16px;color:#9a9a9a;margin-top:3px}
.cknote b{color:var(--ink2);font-weight:800}
.cknote a{font-weight:700;color:var(--green-dd);text-decoration:underline;
  text-decoration-color:var(--ring);text-underline-offset:3px}
.cknote[hidden]{display:none}
.cknote--gold{
  border-style:solid;border-color:#f0e6c4;
  background:linear-gradient(180deg,#fffdf5 0%,#fffaeb 100%);color:#6b5a26;
}
.cknote--gold .ic{color:var(--gold-d)}
.cknote--gold b{color:#5a4a1c}

/* a saved address, as a radio the whole card belongs to */
.ckaddrs{display:flex;flex-direction:column;gap:10px}
.cka{position:relative;display:block;cursor:pointer}
.cka input{position:absolute;opacity:0;width:0;height:0}
.cka__f{
  display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;
  padding:15px 16px;border:1.5px solid var(--line);border-radius:var(--r-card);
  background:#fff;transition:border-color .18s,background .18s,box-shadow .18s;
}
.cka__dot{
  margin-top:3px;width:20px;height:20px;border-radius:50%;
  border:1.6px solid #d3d7ce;background:#fff;
  display:grid;place-items:center;transition:.16s;
}
.cka__dot::after{
  content:"";width:9px;height:9px;border-radius:50%;background:#fff;
  transform:scale(0);transition:transform .16s;
}
.cka__t{font-size:14.4px;font-weight:800;color:var(--ink2)}
.cka__badge{
  margin-inline-start:7px;height:21px;padding:0 8px;border-radius:999px;
  background:var(--pale);color:var(--green-dd);font-size:10.6px;font-weight:800;
  display:inline-flex;align-items:center;vertical-align:2px;
}
.cka__b{margin-top:6px;font-size:12.6px;line-height:1.95;color:var(--body)}
.cka__ph{font-weight:700;color:#5d5d5d;unicode-bidi:isolate}
.cka__ship{
  grid-column:3;text-align:end;white-space:nowrap;
  font-size:12.2px;font-weight:700;color:var(--muted);
}
.cka__ship b{display:block;font-size:14px;color:var(--ink2);margin-top:2px}
.cka__ship b.is-free{color:var(--green-dd)}
.cka:hover .cka__f{border-color:#dde9d1;background:#fbfdf9}
.cka input:checked+.cka__f{
  border-color:var(--green);background:#fbfdf9;
  box-shadow:0 8px 22px rgba(91,146,45,.13);
}
.cka input:checked+.cka__f .cka__dot{border-color:var(--green);background:var(--green)}
.cka input:checked+.cka__f .cka__dot::after{transform:scale(1)}
.cka input:focus-visible+.cka__f{outline:2px solid var(--green);outline-offset:2px}

.ckadd{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:48px;margin-top:11px;padding:6px 14px;line-height:1.45;
  border:1.5px dashed #d6ddd0;border-radius:var(--r-card);background:#fcfdfb;
  font-size:13.6px;font-weight:700;color:var(--green-dd);
  transition:background .18s,border-color .18s;
}
.ckadd .ic{width:16px;height:16px}
.ckadd:hover{background:var(--pale);border-color:var(--ring)}
.ckadd[hidden]{display:none}

.ckform{margin-top:14px;padding-top:16px;border-top:1px solid #f2f2f2}
.ckform[hidden]{display:none}

.ckset{border:0;margin:0;padding:18px 0 0}
.ckset__h{padding:0;margin-bottom:11px;font-size:13.8px;font-weight:800;color:var(--ink2)}
.ckset__note{margin-top:9px;font-size:11.8px;line-height:1.9;color:var(--muted)}

/* the day chips and the window chips: one shape, two rows */
.ckdays,.ckwins{display:flex;flex-wrap:wrap;gap:9px}
.ckdays{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:3px}
.ckdays::-webkit-scrollbar{display:none}
.ckc{position:relative;cursor:pointer;flex:none}
.ckc input{position:absolute;opacity:0;width:0;height:0}
.ckc__f{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:82px;padding:10px 14px;
  border:1.5px solid var(--line);border-radius:var(--r-md);background:#fff;
  font-size:13.2px;font-weight:700;color:#5d5d5d;transition:.18s;
}
.ckc__f b{font-size:14.4px;font-weight:800;color:var(--ink2);transition:color .18s}
.ckc__f i{font-style:normal;margin-top:2px;font-size:11.4px;font-weight:600;color:var(--muted)}
.ckc:hover .ckc__f{border-color:#dde9d1;background:#fafcf7}
.ckc input:checked+.ckc__f{border-color:var(--green);background:var(--pale)}
.ckc input:checked+.ckc__f b,.ckc input:checked+.ckc__f{color:var(--green-dd)}
.ckc input:focus-visible+.ckc__f{outline:2px solid var(--green);outline-offset:2px}
.ckc input:disabled+.ckc__f{opacity:.45;cursor:not-allowed}
.ckwins .ckc__f{min-width:104px;flex-direction:row;gap:8px}

/* the payment methods */
.ckpays{display:flex;flex-direction:column;gap:10px}
.ckp{position:relative;display:block;cursor:pointer}
.ckp input{position:absolute;opacity:0;width:0;height:0}
.ckp__f{
  display:grid;grid-template-columns:22px 40px minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:15px 16px;
  border:1.5px solid var(--line);border-radius:var(--r-card);background:#fff;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.ckp__dot{
  width:20px;height:20px;border-radius:50%;border:1.6px solid #d3d7ce;background:#fff;
  display:grid;place-items:center;transition:.16s;
}
.ckp__dot::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff;
  transform:scale(0);transition:transform .16s}
.ckp__i{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:#f5f6f3;color:#8f8f8f;transition:background .18s,color .18s}
.ckp__i .ic{width:20px;height:20px}
/* both are spans inside the card's text cell: block, or the explanation runs on from the heading */
.ckp__t{display:block;font-size:14.4px;font-weight:800;color:var(--ink2)}
.ckp__x{display:block;margin-top:3px;font-size:12.2px;line-height:1.85;color:var(--body)}
.ckp__bal{font-size:12.2px;font-weight:700;color:var(--muted);white-space:nowrap;text-align:end}
.ckp__bal b{display:block;font-size:13.6px;color:var(--ink2);margin-top:2px}
.ckp:hover .ckp__f{border-color:#dde9d1;background:#fbfdf9}
.ckp input:checked+.ckp__f{border-color:var(--green);background:#fbfdf9;
  box-shadow:0 8px 22px rgba(91,146,45,.13)}
.ckp input:checked+.ckp__f .ckp__dot{border-color:var(--green);background:var(--green)}
.ckp input:checked+.ckp__f .ckp__dot::after{transform:scale(1)}
.ckp input:checked+.ckp__f .ckp__i{background:var(--pale);color:var(--green-dd)}
.ckp input:focus-visible+.ckp__f{outline:2px solid var(--green);outline-offset:2px}
.ckp input:disabled+.ckp__f{opacity:.5;cursor:not-allowed}
.ckp__note{
  grid-column:3 / -1;margin-top:9px;padding:9px 11px;border-radius:9px;
  background:#f8f9f6;font-size:11.6px;line-height:1.85;color:#6f6f6f;
}

/* the review step's three recap boxes */
.ckrev{display:flex;flex-direction:column;gap:14px}
.ckrb{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.ckrb__h{
  display:flex;align-items:center;gap:9px;padding:11px 15px;
  border-bottom:1px solid var(--line);background:#fbfcfa;
  font-size:13.4px;font-weight:800;color:var(--ink2);
}
.ckrb__h .ic{width:16px;height:16px;color:var(--green)}
.ckrb__edit{
  margin-inline-start:auto;font-size:12.2px;font-weight:700;color:var(--green-dd);
  text-decoration:underline;text-decoration-color:var(--ring);text-underline-offset:3px;
}
.ckrb__b{padding:14px 15px;font-size:12.8px;line-height:2;color:var(--body)}
.ckrb__b b{color:var(--ink2);font-weight:700}

.ckagree{margin-top:18px}
.ckagree a{font-weight:700;color:var(--green-dd);text-decoration:underline;
  text-decoration-color:var(--ring);text-underline-offset:3px}
.ckagree__msg{margin-top:4px}
.ckagree__msg.is-bad{color:#c2410c;font-weight:700}

.ckfoot{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:22px;padding-top:18px;border-top:1px solid #f2f2f2;
}
.ckfoot .abtn:last-child{margin-inline-start:auto}
.abtn--pay{background:var(--gold-d)}
.abtn--pay:hover{background:#c79403;box-shadow:0 10px 26px rgba(241,183,9,.4)}

/* what has been chosen, repeated in the sticky column */
.ckchosen{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px dashed #e4e4e4}
.ckchosen:empty{display:none}
.ckchosen p{display:flex;align-items:flex-start;gap:9px;
  font-size:12.2px;line-height:1.8;color:var(--body)}
.ckchosen .ic{flex:none;width:15px;height:15px;color:var(--green);margin-top:3px}
.ckchosen b{color:var(--ink2);font-weight:700}


/* ══════════════════════════════════════════════════════════════════════════
   4. /checkout/pay/ — the simulated gateway
   --------------------------------------------------------------------------
   Deliberately NOT in the shop's own colours.  A bank's page does not look
   like the merchant's, and a stand-in that borrowed the shop's green would be
   the one place on this site where the design itself told a small lie.
   ══════════════════════════════════════════════════════════════════════════ */

.pay{width:min(620px,100% - 36px);margin:44px auto 60px}
.pay__card{
  background:#fff;border:1px solid #dfe3da;border-radius:var(--r-lg);
  box-shadow:0 20px 50px rgba(30,44,16,.1);overflow:hidden;
}
.pay__hd{
  display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid #eceee8;background:#fafbf8;
}
.pay__mark{
  display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  background:#e8ecf5;color:#3d5a94;flex:none;
}
.pay__mark .ic{width:22px;height:22px}
.pay__who b{display:block;font-size:14.4px;font-weight:800;color:var(--ink2);line-height:1.5}
.pay__who i{display:block;font-style:normal;font-size:12px;color:var(--muted)}
.pay__clock{
  margin-inline-start:auto;padding:5px 11px;border-radius:8px;
  background:#f1f1f1;font-size:13.6px;font-weight:800;color:#5d5d5d;
  unicode-bidi:isolate;transition:background .2s,color .2s;
}
.pay__clock.is-low{background:#fbeae3;color:#a13b1c}

.pay__sim{
  display:flex;align-items:flex-start;gap:10px;margin:0;padding:14px 20px;
  background:#fff8e6;border-bottom:1px solid #f0e6c4;
  font-size:12.4px;line-height:1.95;color:#6b5a26;
}
.pay__sim .ic{flex:none;width:18px;height:18px;color:#b07d05;margin-top:3px}
.pay__sim b{font-weight:800;color:#5a4a1c}

.pay__amt{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;
  background:#eceee8;border-bottom:1px solid #eceee8;
}
.pay__amt>div{padding:14px 20px;background:#fff}
.pay__amt dt{font-size:11.8px;font-weight:600;color:var(--muted)}
.pay__amt dd{margin:4px 0 0;font-size:13px;font-weight:700;color:var(--ink2);
  unicode-bidi:isolate}
.pay__amt dd b{font-family:var(--font-head);font-size:21px;font-weight:800;color:var(--ink)}

.pay__f{padding:20px}
.pay__card-in{letter-spacing:2px;font-weight:700;text-align:center}
.pay__row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px;margin-top:4px}
.pay__row .fin{text-align:center}
.pay__a{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.pay__a .abtn{width:100%;min-height:52px}
.pay__a .abtn i{font-style:normal;font-weight:600;opacity:.75;font-size:12.4px}
.pay__ok{background:#2f7d32}
.pay__ok:hover{background:#27682a;box-shadow:0 10px 26px rgba(47,125,50,.32)}
.pay__cancel{display:block;margin:16px auto 0;text-align:center}
.pay__foot{
  display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:14px 16px;
  border:1px dashed #d6dacf;border-radius:var(--r-md);background:#fff;
  font-size:11.8px;line-height:1.95;color:#6e6e6e;
}
.pay__foot .ic{flex:none;width:16px;height:16px;color:#9a9a9a;margin-top:3px}
.pay__foot b{color:var(--ink2);font-weight:800}


/* ══════════════════════════════════════════════════════════════════════════
   5. the two result pages
   ══════════════════════════════════════════════════════════════════════════ */

.res{
  width:min(760px,100% - 36px);margin:52px auto 0;padding:38px 32px 30px;
  text-align:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 20px 50px rgba(40,60,20,.08);
}
.res__b{display:grid;place-items:center;width:72px;height:72px;margin-inline:auto;
  border-radius:50%}
.res__b .ic{width:36px;height:36px}
.res--ok .res__b{background:var(--pale);color:var(--green-dd)}
.res--bad .res__b{background:#fbeae3;color:#a13b1c}
.res__t{margin-top:18px;font-family:var(--font-head);font-size:27px;font-weight:800;
  color:var(--ink);line-height:1.5}
.res__x{margin-top:11px;font-size:14.4px;line-height:2.05;color:var(--body);
  max-width:56ch;margin-inline:auto}
.res__body{margin-top:26px;text-align:start}
.res__a{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.res__note{margin-top:24px;text-align:start}
.res__weight{margin-top:18px;text-align:start;border-color:#e6c27a;background:#fffaf0;color:#7a5a12}
.res__weight .ic{color:#c08a1e}
/* the balance link of a deposit order (/pay/{token}) */
.res__pay{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:26px}
.res__pay .ckset{text-align:center}
.res__pay .ckwins{justify-content:center}

/* the receipt: the order number big enough to read out on the phone */
.rct__id{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  padding:16px 20px;border-radius:var(--r-card);
  background:#fbfdf9;border:1px dashed var(--ring);
}
.res--bad .rct__id{background:#fdf7f4;border-color:#e6c5b8}
.rct__id span{font-size:12.6px;font-weight:600;color:var(--muted)}
.rct__id b{font-family:var(--font-head);font-size:25px;font-weight:800;color:var(--ink);
  letter-spacing:1px;unicode-bidi:isolate}
.rct__copy{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  color:#8e8e8e;transition:background .18s,color .18s;
}
.rct__copy .ic{width:16px;height:16px}
.rct__copy:hover{background:var(--pale);color:var(--green-dd)}

.rct__next{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;
}
.rct__n{
  padding:15px;border:1px solid var(--line);border-radius:var(--r-card);
  background:#fff;text-align:center;
}
.rct__n span{display:grid;place-items:center;width:38px;height:38px;margin-inline:auto;
  border-radius:11px;background:var(--pale);color:var(--green-dd)}
.rct__n span .ic{width:19px;height:19px}
.rct__n b{display:block;margin-top:9px;font-size:13.2px;font-weight:800;color:var(--ink2)}
.rct__n i{display:block;margin-top:4px;font-style:normal;font-size:11.8px;
  line-height:1.85;color:var(--body)}


/* ══════════════════════════════════════════════════════════════════════════
   6. responsive
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width:1240px){
  .cartp,.ck{grid-template-columns:minmax(0,1fr) 318px;gap:22px}
}

@media (max-width:1024px){
  /* the money column moves under the content and stops sticking — a sticky
     summary on a narrow viewport covers the thing it summarises */
  .cartp,.ck{grid-template-columns:minmax(0,1fr)}
  .cartp__side,.ck__side{position:static;margin-top:22px}
  .cartp__side{order:2}
  .csum__lines{max-height:none}
  .rct__next{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:820px){
  .ckstep{padding:20px 18px}
  .crail__i span:not(.crail__n){display:none}
  .crail__i.is-on span:not(.crail__n){display:inline}
  .pay__row{grid-template-columns:1fr 1fr}
  .pay__row .fld:first-child{grid-column:1 / -1}
  .res{padding:30px 20px 24px}
  .res__t{font-size:23px}
}

@media (max-width:680px){
  .cartp,.ck{width:calc(100% - 28px);margin-top:24px}
  .crail__l{width:calc(100% - 28px)}
  .cl{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:13px 14px}
  .cl__img{grid-row:span 1;width:64px;height:64px}
  .cl__p{grid-column:1 / -1;grid-row:auto;text-align:start;margin-top:8px}
  .cl__row{grid-column:1 / -1}
  .cl__x span{display:none}
  .cl__x{padding:0 9px}
  .pay__amt{grid-template-columns:minmax(0,1fr)}
  /* each button keeps its own label's width as its basis, so the pair shares
     a row only when both labels fit on one line, and otherwise each takes a
     full row — `flex:1` split the row in half and folded «ادامه — انتخاب
     زمان ارسال» into three lines.  wrap-reverse puts the step forward on
     top once they part. */
  .ckfoot{flex-wrap:wrap-reverse}
  .ckfoot .abtn{flex:1 1 auto}
  .ckfoot .abtn:last-child{margin-inline-start:0}
  .ckp__f{grid-template-columns:22px minmax(0,1fr);row-gap:8px}
  .ckp__i{display:none}
  .ckp__bal{grid-column:2;text-align:start}
  .ckp__note{grid-column:1 / -1}
  .cka__f{grid-template-columns:22px minmax(0,1fr);row-gap:8px}
  .cka__ship{grid-column:2;text-align:start}
}

@media (max-width:520px){
  .rct__id b{font-size:21px}
  .res__a .abtn{width:100%}
  .cq__in{width:54px}
}

/* the motion layer resets only what it sets */
@media (prefers-reduced-motion:reduce){
  .cl,.cka__f,.ckp__f,.ckc__f,.crail__n,.csum__go,.pay__clock{transition:none}
}